dev.enekoalonso.com

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!

February 1, 2010 -- Mooml.globalize(): Mooml template functions going global (0)
June 30, 2009 -- iPhone 3.0 geolocation with Javascript (0)
February 28, 2009 -- Kyte’s REST API (0)
January 28, 2010 -- Things to do (0)

Google Fiber in San Luis Obispo? That would be awesome!

Eneko Alonso — Thu, 18 Feb 2010 16:52:44 +0000

It looks like the nomination for San Luis Obispo to get Google Fiber is gaining a lot of support. I have no idea how other cities or communities are doing, but here at SLO seems like a lot of people is getting involved. Having Google Fiber in San Luis Obispo would be awesome.

There is a group on Facebook (Bring Google Fiber to San Luis Obispo) with more than 1300 members right now, mostly from the tech companies and CalPoly.

If you want to nominate San Luis Obispo, please do it here.

January 28, 2010 -- Dojo y yo (0)
January 28, 2010 -- Things to do (0)
August 8, 2009 -- Drupal: users can’t access content! (node_access gone wild) (0)
June 30, 2009 -- iPhone 3.0 geolocation with Javascript (0)

My current SVN setup

Eneko Alonso — Sun, 07 Feb 2010 18:33:10 +0000

Once upon a time I decided it was time to start keeping track of the changes I was doing in my blogs and websites, specially my landing page at enekoalonso.com. So I started using SVN, which is available in my current hosting: Dreamhost.

Here is my current setup for blogs and websites:
enekoalonso.com
https://enekoalonso.com/prvsvn/enekoalonso.com/trunk (private)

enekoalonso.com/main
https://enekoalonso.com/prvsvn/enekoalonso.com-main/trunk (private)

enekoalonso.com/research
https://enekoalonso.com/svn/research (public)

dev.enekoalonso.com
Checked out directly from Wordpress SVN (currently running 3.0alpha)

I have different repositories, public and privates with https access, and I store my blogs, my sites and also other projects I work on, including iPhone applications, etc. Having SVN is a little overhead, but the benefits are great, specially if you use tags to keep track of versions, etc.

January 26, 2010 -- Loving git+github (0)
December 20, 2008 -- Wordpress Comment API & WPNotifier (0)
November 29, 2008 -- Setting up a development environment (0)
January 30, 2010 -- Got new servers on Rackspace Cloud (5)

Got NFS working

Eneko Alonso — Sun, 07 Feb 2010 06:19:27 +0000

Well, last night I started reading about how to share the files folder of a Drupal installation on a site with multiple web servers. Seems like NFS is the right way to go (as long as your traffic doesn’t grow too much). Perfect for Spaniards.es, since I want to move from a 2 dedicated server setup to a more flexible one where I can launch new web servers easily, almost on demand.

# Install NFS
yum -y install rpcbind nfs-utils nfs-utils-lib system-config-nfs rsync
# chkconfig nfs on
/sbin/chkconfig nfs on
vi /etc/idmapd.conf
# [General]
# Domain = spaniards.es
# [Mapping]
# Nobody-User = nfsnobody
# Nobody-Group = nfsnobody
service rpcidmapd restart
echo "/files/archivos /nfs4exports/archivos none bind 0 0" >> /etc/fstab
mount /nfs4exports/archivos
echo "/nfs4exports XXX.177.133.25(rw,insecure,no_subtree_check,nohide,fsid=0) XXX.177.136.14(rw,insecure,no_subtree_check,nohide,fsid=0)" > /etc/exports
echo "/nfs4exports/archivos XXX.177.133.25(rw,insecure,no_subtree_check,nohide) XXX.177.136.14(rw,insecure,no_subtree_check,nohide)" >> /etc/exports
su -c "/usr/sbin/exportfs -rva"
/sbin/service nfs restart
echo 'portmap:ALL' > /etc/hosts.deny
echo 'lockd:ALL' >> /etc/hosts.deny
echo 'mountd:ALL' >> /etc/hosts.deny
echo 'rquotad:ALL' >> /etc/hosts.deny
echo 'statd:ALL' >> /etc/hosts.deny
echo 'portmap:XXX.177.133.25,XXX.177.136.14' > /etc/hosts.allow
echo 'lockd:XXX.177.133.25,XXX.177.136.14' >> /etc/hosts.allow
echo 'mountd:XXX.177.133.25,XXX.177.136.14' >> /etc/hosts.allow
echo 'rquotad:XXX.177.133.25,XXX.177.136.14' >> /etc/hosts.allow
echo 'statd:XXX.177.133.25,XXX.177.136.14' >> /etc/hosts.allow
echo 'LOCKD_TCPPORT=48620' >> /etc/sysconfig/nfs
echo 'LOCKD_UDPPORT=48620' >> /etc/sysconfig/nfs
echo 'MOUNTD_PORT=48621' >> /etc/sysconfig/nfs
echo 'STATD_PORT=48622' >> /etc/sysconfig/nfs
echo 'RQUOTAD=no' >> /etc/sysconfig/nfs
echo 'RQUOTAD_PORT=48623' >> /etc/sysconfig/nfs

At the end, setting up NFS is not that complicated, but it was my first time, so it took a while. Actually, I had everything working before I noticed, since, logged in as root, I couldn’t figure out why I wasn’t able to write to the nfs mounted directory, being this mounted as rw. Well, turns out that you shouldn’t do this as root, since root access on nfs, once enabled does not require authentication.

I’m not sure why there is a need to mount a bind directory on the nfs server, but I think it has to do with the NFS4 directory configuration.

I think I got all the information I needed between these two links:
http://fconfig.wordpress.com/2006/08/17/setting-up-a-fedora-nfs-server/
http://fedorasolved.org/Members/renich/howtos/f7/en/nfsv4-fedora/?searchterm=nfs

Next step: set up the round robin load balancer: haproxy or dns?

January 31, 2010 -- CloudServers: Creating a new web server with httpd, php & memcached (1)
January 31, 2010 -- CloudServers: Creating a new MySQL db server (0)
January 30, 2010 -- Got new servers on Rackspace Cloud (5)
January 29, 2010 -- Un Navarro en California is back! (0)

Mooml.globalize(): Mooml template functions going global

Eneko Alonso — Mon, 01 Feb 2010 15:49:35 +0000

Since version 1.0.9, Mooml includes a new feature: globalize. It maybe handy for some websites to globalize all the Mooml template functions (div, a, p, span…) to the window object scope, so they can be used anywhere in the code without the need of defining or evaluating a template.

For example, in normal Mootools code we would create a div like this:

// options can have attributes, css, events and more
var mydiv = new Element('div', options);

With Mooml.globalize() we can do this:

Mooml.globalize(); // Only need to call this once
var mydiv = div(options); // Same options as Mootools new Element()

Mooml globalized functions can also have nested elements, which makes very easy to create dom elements:

var mydiv = div(options,
p('First paragraph'),
p('Second paragraph'),
div('Nested div:',
span('div content')
),
Mooml.render('nested_template'),
'Some inline html too'
);

Will generate the dom elements for this html:

First paragraph
Second paragraph
Nested div:
div content

Some inline html too

Elements created by Mooml template functions are not automatically injected in the DOM. They are just created like when you use new Element().

Please be aware that using Mooml.globalize() feature will pollute the window object scope, overriding any methods with the same name and/or possibly conflicting with other Javascript libraries. As a tip, Mooml.tags can be edited before calling Mooml.globalize(), so only functions for those tags we are interested on will be created.

February 19, 2010 -- Having fun with Mooml & Twitter (0)
April 7, 2009 -- Setting up timers and intervals inside JS objects (2)
January 17, 2010 -- Mooml: Mootools markup language (intro) (1)
September 2, 2009 -- Creating HTML blocks with Mootools (3)

CloudServers: Creating a new MySQL db server

Eneko Alonso — Mon, 01 Feb 2010 05:29:46 +0000

On my previous post I posted the commands I used to create a brand new Linux web server for my Drupal site. Now I’ll post the commands to create the database server. While creating the server instance at RackspaceCloud, I’ve chosen Fedora 12 for my db server, which comes with MySQL 5.1.42.

# Install MySQL
yum -y install mysql mysql-server rsync
/sbin/chkconfig –levels 235 mysqld on
# Start DB
/etc/init.d/mysqld start
# Grant permissions to db_user (1.2.3.4 is the web server IP address)
mysql -e "grant all privileges on db_name.* to db_user@'1.2.3.4' identified by 'password';"
mysql -e "flush privileges;"
#############################################################
# FIREWALL
# Open DB port 3306
# Allow connections only from web server
iptables -F
iptables -A INPUT -p tcp –dport 22 -j ACCEPT
iptables -P INPUT DROP
iptables -P FORWARD DROP
iptables -P OUTPUT ACCEPT
iptables -A INPUT -i lo -j ACCEPT
iptables -A INPUT -m state –state ESTABLISHED,RELATED -j ACCEPT
iptables -A INPUT -s 1.2.3.4 -p tcp –dport 3306 -j ACCEPT
iptables -L -v
service iptables save

As easy as that, having a MySQL server up and running is piece of cake :)

January 31, 2010 -- CloudServers: Creating a new web server with httpd, php & memcached (1)
January 30, 2010 -- Got new servers on Rackspace Cloud (5)
February 6, 2010 -- Got NFS working (0)
January 3, 2009 -- Check your server status with email notification (0)

CloudServers: Creating a new web server with httpd, php & memcached

Eneko Alonso — Sun, 31 Jan 2010 17:16:47 +0000

Creating a new web server is piece of cake at Rackspace Cloud. Here is a demo video of how to set up a new instance with your favorite Linux distribution. I have used Fedora 12 for my new spaniards.es servers, and here is the script I’ve used to install everything needed so far:

# Install HTTPD
yum -y install httpd rsync
# Install PHP
yum -y install php php-mbstring php-mysql mysql
#############################################################
# FIREWALL
# Open http port 80 (and ssh)
iptables -F
iptables -A INPUT -p tcp –dport 22 -j ACCEPT
iptables -P INPUT DROP
iptables -P FORWARD DROP
iptables -P OUTPUT ACCEPT
iptables -A INPUT -i lo -j ACCEPT
iptables -A INPUT -m state –state ESTABLISHED,RELATED -j ACCEPT
iptables -A INPUT -p tcp –dport 80 -j ACCEPT
iptables -L -v
service iptables save
# Start HTTPD server
/etc/init.d/httpd start
# Install memcached
yum -y install memcached
memcached -d -u apache
yum -y install php-pecl-memcache
# Restart HTTPD server
/etc/init.d/httpd restart

DNS configuration can be done through the admin pages, so there is no need for manual configuration. Copying the data from your old server can be done with rsync and having mysql installed is handy to test db connections from the console.

In less than 10 minutes you can have a new web server up and running :)

January 31, 2010 -- CloudServers: Creating a new MySQL db server (0)
January 30, 2010 -- Got new servers on Rackspace Cloud (5)
February 6, 2010 -- Got NFS working (0)
December 5, 2008 -- Enabling PHP5 on Mac OS X Leopard (0)

Got new servers on Rackspace Cloud

Eneko Alonso — Sun, 31 Jan 2010 01:06:09 +0000

Last night I got an account at Rackspace Cloud and created three brand new CentOS Linux servers. Now I have to set them up: two web servers and one database server. My goal: Move Spaniards.es website to this new hosting.

Why move?

Currently I am hosting Spaniards.es on two dedicated servers at Ace-Host.net. So far, so good, but the site has started to get slow (more the web server than the db server, which is running great so far). Some days I found the site running at 30 times the processor capacity (according to ‘top’), which is a lot. The biggest problem I have right now is the caching on the web server. I have installed both XCache and Memcached, but can get them to work since that server was my first ever dedicated server an has a CPanel installation that drives me nuts.

Sooner or later I had to move that webserver into a new clean installation, but I have decided that if I have to move, I’ll do it to a cloud. No more dependencies on a physical hardware, no more worries.

Why not EC2

Well, I’ve ried EC2 and it is not that I don’t like it. It is just that it is so much work. After seeing how CloudServers work on RackSpace, I have no doubt.

When is Spaniards.es going to be moved?

There is no date yet. First I have to set up the servers, make sure everything works fine, set up the domains, dns, mail, etc. Hopefully in a couple of weeks, if I can find enough time to do so.

January 31, 2010 -- CloudServers: Creating a new web server with httpd, php & memcached (1)
January 31, 2010 -- CloudServers: Creating a new MySQL db server (0)
February 6, 2010 -- Got NFS working (0)
February 7, 2010 -- My current SVN setup (0)

Un Navarro en California is back!

Eneko Alonso — Fri, 29 Jan 2010 23:53:11 +0000

Yeah baby, I’m back. I have restored the Drupal installation I had for my personal blog, kinda missed it a lot. Hopefully all the old links will still work.
Visit: Un Navarro en California

February 7, 2010 -- My current SVN setup (0)
February 6, 2010 -- Got NFS working (0)
August 8, 2009 -- Drupal: users can’t access content! (node_access gone wild) (0)
February 24, 2009 -- Upgrading Spaniards.es to Drupal 6 (5)

4 years of excanvas

Eneko Alonso — Fri, 29 Jan 2010 16:01:30 +0000

I wanted to say 5 years but it was actually in December 2005 when Emil A Eklund wrote on his blog about an idea he had to implement the canvas tag functionality in Internet Explorer using VML and behaviors. Today we now that code as excanvas.

Well, it’s been 4 years and 1 month and still Internet Explorer does not support the canvas tag. Is it possible that Internet Explorer 9 would support canvas? What about SVG?

January 27, 2010 -- Detecting when CSS gets loaded by the browser with Mootools and Asset.css (0)

Dojo y yo

Eneko Alonso — Fri, 29 Jan 2010 05:48:02 +0000

Back in November 2008 I had a chance to work with Dojo on a project for Cisco WebEx. I didn’t like it at all. I was used to the simplicity of jQuery and Mootools and I couldn’t understand how Dojo had been designed so complicated. Well, one year later I just realized that it is not that Dojo was that complicated. It is that I wasn’t ready for it. Now it is time to give it another chance.

Some cool stuff about Dojo

Reading Dojo’s documentation I have finally understood something that I was wondering how it works. It’s nothing really complicated, but it’s actually very cool: dojo.require

Javascript requests to the server are asynchronous (not sure if synchronous request can be done). So we depend on callback functions to continue the flow of your program. That means that when we put dojo.require('somefancyjs'); on a line, the execution does not stop and it continues to the next line of code while the browser downloads that file from the server in the background.

Looks like Dojo puts those requests on some kind of array, array that is checked when you use dojo.addOnLoad() which does not execute your callback function until all elements of the array have been downloaded. That is very cool because that means you can do as many dojo.require’s as you need. The down side is that you need to put your code inside a callback function, which is not very bad when working with objects.

Next, I have to find out how goog.require works ;)

January 28, 2010 -- Things to do (0)
June 30, 2009 -- iPhone 3.0 geolocation with Javascript (0)
February 19, 2010 -- Having fun with Mooml & Twitter (0)
February 18, 2010 -- Google Fiber in San Luis Obispo? That would be awesome! (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

January 28, 2010 -- Dojo y yo (0)
June 30, 2009 -- iPhone 3.0 geolocation with Javascript (0)
February 19, 2010 -- Having fun with Mooml & Twitter (0)
February 18, 2010 -- Google Fiber in San Luis Obispo? That would be awesome! (0)

Detecting when CSS gets loaded by the browser with Mootools and Asset.css

Eneko Alonso — Wed, 27 Jan 2010 19:20:22 +0000

Asset.css claims to have an onload event in Mootools documentation, but sadly, not all browsers support this feature. Even worse, browsers like Chrome seem to support the event, but never fire it.

After some research and testing at work, we have come up with a solution that overrides Asset.css to detect when CSS gets loaded by the browser using the onload event in those browsers that support it (Internet Explorer and Opera) and doing polling in those that do not (Chrome, Safari and Firefox). Here is the code:

// Add callback support to Asset.css for all browsers
Asset.css = function(source, onLoad) {
var link = new Element('link', {
rel: 'stylesheet',
media: 'screen',
type: 'text/css',
href: source
});
if (("onload" in link) && !Browser.Engines.webkit()) {
if (onLoad) link.onload = onLoad;
} else {
(function() {
try {
link.sheet.cssRules;
} catch (e) {
setTimeout(arguments.callee, 100);
return;
};
if (onLoad) onLoad();
})();
}
link.inject(document.head);
return link;
}
// Load some CSS and show an alert when done
var mycss = new Asset.css('http://example.com/style.css', function() {
alert('CSS loaded!');
});
// Unload the css
mycss.destroy();

Enjoy!

June 30, 2009 -- iPhone 3.0 geolocation with Javascript (0)
March 1, 2009 -- Safari 4 rocks (1)
February 19, 2010 -- Having fun with Mooml & Twitter (0)
February 1, 2010 -- Mooml.globalize(): Mooml template functions going global (0)

Loving git+github

Eneko Alonso — Wed, 27 Jan 2010 04:49:50 +0000

Up until now I always used subversion and, although haven’t used it much, I liked Google Code repositories a lot. Well, in the last few days I’ve been working with git and github and I have to say that both of them are very cool.

February 7, 2010 -- My current SVN setup (0)
November 29, 2008 -- Setting up a development environment (0)

Debugging cookies with Firebug 1.5/1.6

Eneko Alonso — Thu, 21 Jan 2010 04:43:09 +0000

I’ve been using Firebug 1.5 since it was an alpha and now I’m using Firebug 1.6 alpha with Firefox 3.6. I’ve been also using Firecookie for a very long time now, but never realized about this: you can put breakpoints on cookies to detect changes!

Good to know :)

January 19, 2010 -- Firefox 3.6RC2 & Firebug 1.6a (0)
November 30, 2008 -- Injecting javascript with Firebug (0)
January 27, 2010 -- Detecting when CSS gets loaded by the browser with Mootools and Asset.css (0)
December 2, 2008 -- Highlighting elements with Firebug console (0)

Firefox 3.6RC2 & Firebug 1.6a

Eneko Alonso — Tue, 19 Jan 2010 15:52:50 +0000

I love Firefox for web development. I have tried other browsers but nothing compares to the power of Firebug. For everything else I used to use Safari 4, but now I switched to Chrome. It is sooo fast.

Either way, don’t miss Firefox 3.6RC2 with Firebug 1.6a!
http://www.mozilla.com/en-US/firefox/3.6rc2/releasenotes/
http://getfirebug.com/releases/firebug/1.6X/

January 20, 2010 -- Debugging cookies with Firebug 1.5/1.6 (0)
November 30, 2008 -- Injecting javascript with Firebug (0)
January 27, 2010 -- Detecting when CSS gets loaded by the browser with Mootools and Asset.css (0)
December 2, 2008 -- Highlighting elements with Firebug console (0)

Finally: Singletons, the Mootools way

Eneko Alonso — Mon, 18 Jan 2010 17:26:38 +0000

I have been using for a while the “new new Class” syntax to create singletons on the projects I am working on. This is for many reasons, but specially because I didn’t like other solutions like Class.Mutators, Class.Oclude or extending a plain object with $extend().

Now, after discussing a little bit on the Mootools email list about what was the best way to create singletons, I have created Class.Singleton so we can create singletons the Mootools way. Here is how it works:

var MySingleton = new Class.Singleton({
initialize: function(){
// code here
},
method1: function(){
// code here
},
method2: function(){
// code here
}
});

Using inheritance, mixins, etc

Class.Singleton works like defining any other Mootools class using Class(), so we can have inheritance, mixins, etc.

var BaseClass = new Class({
initialize: function() {
// Initialization code here
console.log('BaseClass initialized.');
},
method1: function() {
// some code
}
});
var MySingleton = new Class.Singleton({
Extends: BaseClass,
initialize: function() {
this.parent();
console.log('MySingleton singleton initialized.');
},
method1: function() {
this.parent();
// more code
}
});

Hope you like it!

Repository url: http://github.com/eneko/Class.Singleton

April 23, 2009 -- Sending messages between Javascript objects (2)
April 7, 2009 -- Setting up timers and intervals inside JS objects (2)
July 20, 2009 -- Setters & Getters on Mootools classes (0)
December 14, 2008 -- Threads in Javascript (0)

Mooml: Mootools markup language (intro)

Eneko Alonso — Mon, 18 Jan 2010 05:38:56 +0000

It was a month ago when I found about Jaml, an excellent small Javascript library created by Ed Spencer which allows generating HTML code using very nice and clean templates. At work we use Mootools in most of our projects, so I thought it would be nice to improve Jaml by taking advantage of the power of Mootools. And this is the result.

Mooml: Mootools markup language

What is Mooml? Mooml is a templating system that allows generating HTML snippets very easily, without all the ugly nested “new Element” calls or string concatenation. With Mooml you can save templates for later use or evaluate snippets on the fly.

Download: http://mootools.net/forge/p/mooml
Source: http://github.com/eneko/mooml

Let’s see an example

Required HTML:

Node Title
Node body here.

Node title and body are variables, so let’s save them on a Json format for now.

var data = {
title: 'Node Title',
body: 'Node body here'
}

Using Mootools “new Element” we would have to code something like this:

var el = new Element('div', {'class': 'node'}).adopt([
new Element('h2', {text: data.title}),
new Element('p', {text: data.body})
]);

That code is much better than plain Javascript, but still messy. We could use the new Elements.from included in Mootools More 1.2.4, but that would require us writing the html as a string, which rapidly gets messy concatenating variables, etc.

var el = Elements.from('
' + data.title + '
' + data.body + '
');

With Mooml…

With Mooml, we can create a template for that piece of code, and reuse it later as many times as we need:

Mooml.register('node', function(data) {
div({'class': 'node'},
h2(data.title),
p(data.body)
)
});
document.body.grab(Mooml.render('node', data));

We can also execute the template directly as a function:

document.body.grab(Mooml.templates.node(data));

Finally, with Mooml we can evaluate templates on the fly, without having to store them for later:

document.body.grab(Mooml.evaluate(function(data) {
div({'class': 'node'},
h2(data.title),
p(data.body)
)
}, data));

More examples soon :)

February 19, 2010 -- Having fun with Mooml & Twitter (0)
February 1, 2010 -- Mooml.globalize(): Mooml template functions going global (0)
December 9, 2008 -- Dojo sucks, Mootools rocks (1)
January 27, 2010 -- Detecting when CSS gets loaded by the browser with Mootools and Asset.css (0)

I never use $$ on my projects (and barely use $)

Eneko Alonso — Sat, 16 Jan 2010 04:53:28 +0000

On all the projects I’ve worked on, I always try to follow the MVC arquitectural pattern, separating the model from the view *and* creating a controller. It may be a simple controller in charge of a tab-set, or an accordion. Or it may be a full size controller in charge of the whole page structure, on sites that make an extensive use of javascript.

Either way, I always have a controller for a dynamic section of the page and the controller always works with the container of that section. If I need to reference any element inside the container I will use this.container.getElementById() or this.container.getElements(), which will do a search only on the child elements of the container and not on the whole dom tree of the page.

Yes, it is very usual to see nowadays code that alters the links of a page we are searching the whole page. And coding like that is just a waste of resources.

December 18, 2008 -- Gravity in the DOM (0)
February 19, 2010 -- Having fun with Mooml & Twitter (0)
February 1, 2010 -- Mooml.globalize(): Mooml template functions going global (0)
January 27, 2010 -- Detecting when CSS gets loaded by the browser with Mootools and Asset.css (0)

Happy New Year 2010

Eneko Alonso — Fri, 01 Jan 2010 02:19:52 +0000

(function(){
t=[72,97,112,112,121,32,78,101,119,32,89,101,97,114,32,50,48,49,48];
alert(String.fromCharCode.apply(null, t));
})()

February 19, 2010 -- Having fun with Mooml & Twitter (0)
February 1, 2010 -- Mooml.globalize(): Mooml template functions going global (0)
January 28, 2010 -- Dojo y yo (0)
September 2, 2009 -- Creating HTML blocks with Mootools (3)

dev.enekoalonso.com

Having fun with Mooml & Twitter

Searching Twitter

The code

Related Posts:

Google Fiber in San Luis Obispo? That would be awesome!

Related Posts:

My current SVN setup

Related Posts:

Got NFS working

Related Posts:

Mooml.globalize(): Mooml template functions going global

Related Posts:

CloudServers: Creating a new MySQL db server

Related Posts:

CloudServers: Creating a new web server with httpd, php & memcached

Related Posts:

Got new servers on Rackspace Cloud

Why move?

Why not EC2

When is Spaniards.es going to be moved?

Related Posts:

Un Navarro en California is back!

Related Posts:

4 years of excanvas

Related Posts:

Dojo y yo

Some cool stuff about Dojo

Related Posts:

Things to do

Updated

Related Posts:

Detecting when CSS gets loaded by the browser with Mootools and Asset.css

Related Posts:

Loving git+github

Related Posts:

Debugging cookies with Firebug 1.5/1.6

Related Posts:

Firefox 3.6RC2 & Firebug 1.6a

Related Posts:

Finally: Singletons, the Mootools way

Using inheritance, mixins, etc

Related Posts:

Mooml: Mootools markup language (intro)

Mooml: Mootools markup language

Let’s see an example

Node Title

' + data.title + '

With Mooml…

Related Posts:

I never use $$ on my projects (and barely use $)

Related Posts:

Happy New Year 2010

Related Posts: