dev.enekoalonso.com » api

Having fun with node.js & Redis

Eneko Alonso — Fri, 01 Oct 2010 23:05:19 +0000

Last week I set up node.js for the first time. I did it on my Dreamhost shared server, but since that goes against the Terms of Service, I set up a small dedicated virtual server at RackspaceCloud.

My configuration uses:

Ubuntu 10.04.1
subversion
node.js
grasshopper
node_redis
redis

So far it’s been a lot of fun, I’ll give more details about the installation steps and configuration later on :)

May 6, 2010 -- Tech talks at LEVEL Studios (0)
February 19, 2010 -- Having fun with Mooml & Twitter (0)
February 28, 2009 -- Kyte’s REST API (0)
October 12, 2011 -- Command line scripting with Node.js (0)

Creating QR Codes with Google Charts API

Eneko Alonso — Sat, 31 Jul 2010 05:51:28 +0000

As simple as a URL: http://chart.apis.google.com/chart?cht=qr&chs=250×250&chl=http://dev.enekoalonso.com

May 6, 2010 -- Tech talks at LEVEL Studios (0)
February 19, 2010 -- Having fun with Mooml & Twitter (0)
January 28, 2010 -- Things to do (0)
June 30, 2009 -- iPhone 3.0 geolocation with Javascript (1)

Tech talks at LEVEL Studios

Eneko Alonso — Thu, 06 May 2010 15:51:16 +0000

Today we have a Tech Meeting at LEVEL Studios and I’ll be doing a quick demo of some tools we have been using in our current project, to help during our development:

Using Closure Compiler to detect Javascript syntax errors and remove warnings.
Using QUnit to test a REST api
The power of WebSockets and how the way browsers and servers interact with each other will change in the future.

May 22, 2010 -- More WebSockets, now with Python! (9)
March 15, 2010 -- More updates to Mooml coming soon (0)
January 28, 2010 -- Things to do (0)
March 14, 2011 -- Staying busy (0)

Having fun with Mooml & Twitter

Eneko Alonso — Fri, 19 Feb 2010 20:43:54 +0000

Mooml is a templating engine for Mootools. With it, you can create HTML from Javascript using a very clean syntax. Plus, it is extremely useful when you have to generate repeating elements, since Mooml automatically renders arrays of data multiple times. Let’s see an example.

Searching Twitter

Nowadays there are a lot of APIs out there that support JSON or JSONP, which we can use directly from the front end using Javascript. Also, there are other APIs that return tons of JS data, like Google Maps. In this example we are going to be searching Twitter and displaying the search results in a container div, properly rendered as HTML.

The url for searching Twitter is http://search.twitter.com/search.json?q=mootools&show_user=true (searching for Mootools in this case). Check the output:

{
"results":[
{
"profile_image_url":"http://a3.twimg.com/profile_images/547672997/twitterProfilePhoto_normal.jpg",
"created_at":"Fri, 19 Feb 2010 17:08:55 +0000",
"from_user":"digitalr3bel",
"to_user_id":1212494,
"text":"@davidwalshblog Hi David – im a big fan of your site! Can you recommend a good MooTools tutorial for someone who can already program? thx",
"id":9343656026,
"from_user_id":23704390,
"to_user":"davidwalshblog",
"geo":null,
"iso_language_code":"en",
"source":"//apiwiki.twitter.com/" rel="nofollow">API"
}
// More results here…
],
"max_id":9343656026,
"since_id":0,
"refresh_url":"?since_id=9343656026&q=mootools",
"next_page":"?page=2&max_id=9343656026&q=mootools",
"results_per_page":15,
"page":1,
"completed_in":0.0352710000000001,
"query":"mootools"
}

We want to render each result inside out container div. On this example, we will just render the user name, user image and message text. Here is our Mooml template:

Mooml.register('twitter-search-result', function(entry) {
div({id: "tweet-" + entry.id},
img({src: entry.profile_image_url, alt: entry.from_user}),
span(entry.from_user),
p(entry.text)
);
});

Since all results are returned into an array, we can pass it directly to Mooml which will render all of the elements in it:

// Data is the JSON response from Twitter
Mooml.render('twitter-search-result', data.results);

So, let’s do a live test. Type something you want to search for and hit the search button to see Mooml in action :)

Search:

How cool is that?

The code

Ok, so here is the whole code I have used in this post for this mini-demo:

<script type="text/javascript" src="http://enekoalonso.com/lib/mootools-1.2.4-core-nc.js">script>
<script type="text/javascript" src="http://enekoalonso.com/lib/mooml.js">script>
<script type="text/javascript">
Mooml.register('twitter-search-result', function(entry) {
div({id: "tweet-" + entry.id},
img({src: entry.profile_image_url, alt: entry.from_user}),
span(entry.from_user),
p(entry.text)
);
});
function searchTwitter() {
new Element('script', {
type:'text/javascript',
src:'http://search.twitter.com/search.json?q={text}&show_user=true&callback=renderData'.substitute({
text:$('twitter-mooml-search').get('value')
})
}).inject(document.head);
}
function renderData(data) {
$('mooml-twitter-demo').empty().adopt(Mooml.render('twitter-search-result', data.results));
}
$('twitter-mooml-search-btn').addEvent('click', searchTwitter);
searchTwitter();

As you can see, the code is very basic and so is the Mooml template. The coolest thing here is that you don’t need to iterate over the results to render each element.

Have fun!

April 28, 2010 -- Mooml 1.2.3 – Bye, bye, with() (3)
March 24, 2010 -- Mooml 1.1 – No more eval(), say Hi to Mooml.Template and Mooml.Templates (0)
March 15, 2010 -- More updates to Mooml coming soon (0)
February 1, 2010 -- Mooml.globalize(): Mooml template functions going global (0)

Things to do

Eneko Alonso — Fri, 29 Jan 2010 04:15:44 +0000

To do list:

~~Try Appcelerator~~ (downloaded.. don’t like it very much, have to spend more time with it)
~~Install iPhone SDK 3.2 (~~downloading~~ installing…)~~
Study LinkedIn API
Study Twitter API
Take a look at YQL
Play with Google Closure JS library
Play with Dojo JS library

That’s it for now. Let’s see if I can find time to do all those.

Updated

May 6, 2010 -- Tech talks at LEVEL Studios (0)
January 28, 2010 -- Dojo y yo (0)
June 30, 2009 -- iPhone 3.0 geolocation with Javascript (1)
June 14, 2011 -- Titanium Studio and Titanium Mobile 1.7 (0)

iPhone 3.0 geolocation with Javascript

Eneko Alonso — Tue, 30 Jun 2009 16:13:43 +0000

I was watching one of the video tutorials from Apple last night about some custom JS available on Safari, only on the iPhone 3.0, that let’s you interact with the phone and obtain data like the current location, etc.

So I built a little page to see how it works. I included Mootools 1.2.3 from Google servers and the Google Maps API. And voilá, with a few lines of code we have a totally functional web based GSP navigation system. A little bit ugly, but functional. Currenlty it only centers the map on the coordinates given by the phone, and also does a reverse geolocation to obtain the address (actually city, state and country). But it could be easily extended to add markers to the map, or even paths to track the movement.

If you have an iPhone (or an iPhone simulator) go to:
http://enekoalonso.com/research/iphone/geolocation.html

The source code:

var Navigator = new Class({
initialize: function() {
// Listen for position changes
this.watchId = navigator.geolocation.watchPosition(
function(position){ this.position(position) }.bind(this),
function() {},
{ enableHighAccuracy: true, timeout: 1000, maximumAge: 10000 }
);
this.infoPanel = $('info');
// Create the Geocoder and the Map
this.geocoder = new google.maps.Geocoder();
this.map = new google.maps.Map($('map'), {
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
},
position: function(position) {
// Update labels
this.infoPanel.getElement('p.date').set('text', position.timestamp);
this.infoPanel.getElement('p.coords').set('text', position.coords.latitude + ', ' + position.coords.longitude);
this.infoPanel.getElement('p.altitude').set('text', position.coords.altitude);
this.infoPanel.getElement('p.heading').set('text', position.coords.heading);
this.infoPanel.getElement('p.speed').set('text', position.coords.speed);
// Center map
var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
this.map.set_center(latLng);
// Reverse geolocation (get current address)
this.geocoder.geocode({'latLng': latLng},
function(results, status) {
if (google.maps.GeocoderStatus.OK) this.showAddress(results)
}.bind(this)
);
},
showAddress: function(results) {
// console.dir(response);
if (results[1]) {
this.infoPanel.getElement('p.location').set('text', results[1].formatted_address);
}
}
});
window.addEvent('load', function() {
new Navigator();
});

Enjoy.

September 17, 2010 -- MooTools Core for Server and Mobile Development (1)
February 19, 2010 -- Having fun with Mooml & Twitter (0)
January 28, 2010 -- Things to do (0)
February 28, 2009 -- Kyte’s REST API (0)

Kyte’s REST API

Eneko Alonso — Sat, 28 Feb 2009 17:39:47 +0000

During the last weeks at work I’ve been working on a very cool Mootools based Javascript API to interact with Kyte’s REST API. So far it’s been working very good and I’m very impressed about how fast Kyte’s API is.

Unfortunately, until the project I’m working on is launched I won’t be able to show any code. The launch date is April 27th :)

February 19, 2010 -- Having fun with Mooml & Twitter (0)
June 30, 2009 -- iPhone 3.0 geolocation with Javascript (1)
October 5, 2010 -- Javascript console in the terminal (command line) (1)
October 1, 2010 -- Having fun with node.js & Redis (1)

WordPress Comment API & WPNotifier

Eneko Alonso — Sat, 20 Dec 2008 20:01:31 +0000

I didn’t know WordPress had an API (I just decided to start using WordPress a few weeks ago). Apparently now is event better, since the 2.7 API has support for comments too. Well, I promise I’ll play with it as soon as I have some time. Others are already having fun with it and applications like WPNotifier are a good example of what this API can do.

February 7, 2010 -- My current SVN setup (0)
October 1, 2010 -- Having fun with node.js & Redis (1)
July 30, 2010 -- Creating QR Codes with Google Charts API (1)
May 6, 2010 -- Tech talks at LEVEL Studios (0)

dev.enekoalonso.com » api

Having fun with node.js & Redis

Related Posts:

Creating QR Codes with Google Charts API

Related Posts:

Tech talks at LEVEL Studios

Related Posts:

Having fun with Mooml & Twitter

Searching Twitter

The code

Related Posts:

Things to do

Updated

Related Posts:

iPhone 3.0 geolocation with Javascript

Related Posts:

Kyte’s REST API

Related Posts:

WordPress Comment API & WPNotifier

Related Posts: