Having fun with Mooml & Twitter

Feb 19 2010

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:

  1. {
  2.   "results":[
  3.     {
  4.       "profile_image_url":"http://a3.twimg.com/profile_images/547672997/twitterProfilePhoto_normal.jpg",
  5.       "created_at":"Fri, 19 Feb 2010 17:08:55 +0000",
  6.       "from_user":"digitalr3bel",
  7.       "to_user_id":1212494,
  8.       "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",
  9.       "id":9343656026,
  10.       "from_user_id":23704390,
  11.       "to_user":"davidwalshblog",
  12.       "geo":null,
  13.       "iso_language_code":"en",
  14.       "source":"<a href="http://apiwiki.twitter.com/" rel="nofollow">API</a>"
  15.     }
  16.     // More results here…
  17.   ],
  18.   "max_id":9343656026,
  19.   "since_id":0,
  20.   "refresh_url":"?since_id=9343656026&q=mootools",
  21.   "next_page":"?page=2&max_id=9343656026&q=mootools",
  22.   "results_per_page":15,
  23.   "page":1,
  24.   "completed_in":0.0352710000000001,
  25.   "query":"mootools"
  26. }

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:

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

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

  1. // Data is the JSON response from Twitter
  2. 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:

  1. <script type="text/javascript" src="http://enekoalonso.com/lib/mootools-1.2.4-core-nc.js"></script>
  2. <script type="text/javascript" src="http://enekoalonso.com/lib/mooml.js"></script>
  3. <script type="text/javascript">
  4. Mooml.register('twitter-search-result', function(entry) {
  5.   div({id: "tweet-" + entry.id},
  6.     img({src: entry.profile_image_url, alt: entry.from_user}),
  7.     span(entry.from_user),
  8.     p(entry.text)
  9.   );
  10. });
  11.  
  12. function searchTwitter() {
  13.   new Element('script', {
  14.     type:'text/javascript',
  15.     src:'http://search.twitter.com/search.json?q={text}&show_user=true&callback=renderData'.substitute({
  16.       text:$('twitter-mooml-search').get('value')
  17.     })
  18.   }).inject(document.head);
  19. }
  20.  
  21. function renderData(data) {
  22.   $('mooml-twitter-demo').empty().adopt(Mooml.render('twitter-search-result', data.results));
  23. }
  24.  
  25. $('twitter-mooml-search-btn').addEvent('click', searchTwitter);
  26. 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!

No responses yet

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

Feb 18 2010

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.

No responses yet

My current SVN setup

Feb 07 2010

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.

No responses yet

Got NFS working

Feb 06 2010

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.

  1. # Install NFS
  2. yum -y install rpcbind nfs-utils nfs-utils-lib system-config-nfs rsync
  3.  
  4. # chkconfig nfs on
  5. /sbin/chkconfig nfs on
  6.  
  7. vi /etc/idmapd.conf
  8. # [General]
  9. # Domain = spaniards.es
  10. # [Mapping]
  11. # Nobody-User = nfsnobody
  12. # Nobody-Group = nfsnobody
  13.  
  14. service rpcidmapd restart
  15.  
  16. echo "/files/archivos  /nfs4exports/archivos none bind 0 0" >> /etc/fstab
  17. mount /nfs4exports/archivos
  18.  
  19. 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
  20. 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
  21. su -c "/usr/sbin/exportfs -rva"
  22. /sbin/service nfs restart
  23.  
  24. echo 'portmap:ALL' > /etc/hosts.deny
  25. echo 'lockd:ALL' >> /etc/hosts.deny
  26. echo 'mountd:ALL' >> /etc/hosts.deny
  27. echo 'rquotad:ALL' >> /etc/hosts.deny
  28. echo 'statd:ALL' >> /etc/hosts.deny
  29.  
  30. echo 'portmap:XXX.177.133.25,XXX.177.136.14' > /etc/hosts.allow
  31. echo 'lockd:XXX.177.133.25,XXX.177.136.14' >> /etc/hosts.allow
  32. echo 'mountd:XXX.177.133.25,XXX.177.136.14' >> /etc/hosts.allow
  33. echo 'rquotad:XXX.177.133.25,XXX.177.136.14' >> /etc/hosts.allow
  34. echo 'statd:XXX.177.133.25,XXX.177.136.14' >> /etc/hosts.allow
  35.  
  36. echo 'LOCKD_TCPPORT=48620' >> /etc/sysconfig/nfs
  37. echo 'LOCKD_UDPPORT=48620' >> /etc/sysconfig/nfs
  38. echo 'MOUNTD_PORT=48621' >> /etc/sysconfig/nfs
  39. echo 'STATD_PORT=48622' >> /etc/sysconfig/nfs
  40. echo 'RQUOTAD=no' >> /etc/sysconfig/nfs
  41. 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?

No responses yet

Mooml.globalize(): Mooml template functions going global

Feb 01 2010

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:

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

With Mooml.globalize() we can do this:

  1. Mooml.globalize(); // Only need to call this once
  2. 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:

  1. var mydiv = div(options,
  2.  p('First paragraph'),
  3.  p('Second paragraph'),
  4.  div('Nested div:',
  5.   span('div content')
  6.  ),
  7.  Mooml.render('nested_template'),
  8.  'Some <b>inline</b> <em>html</em> too'
  9. );

Will generate the dom elements for this html:

  1. <div>
  2.  <p>First paragraph</p>
  3.  <p>Second paragraph</p>
  4.  <div>Nested div:
  5.   <span>div content</span>
  6.  </div>
  7.  <!– nested template here –>
  8.  Some <b>inline</b> <em>html</em> too
  9. </div>

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.

No responses yet

CloudServers: Creating a new MySQL db server

Jan 31 2010

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.

  1. # Install MySQL
  2. yum -y install mysql mysql-server rsync
  3. /sbin/chkconfig –levels 235 mysqld on
  4.  
  5. # Start DB
  6. /etc/init.d/mysqld start
  7.  
  8. # Grant permissions to db_user (1.2.3.4 is the web server IP address)
  9. mysql -e "grant all privileges on db_name.* to db_user@'1.2.3.4' identified by 'password';"
  10. mysql -e "flush privileges;"
  11.  
  12. #############################################################
  13. # FIREWALL
  14. # Open DB port 3306
  15. # Allow connections only from web server
  16. iptables -F
  17. iptables -A INPUT -p tcp –dport 22 -j ACCEPT
  18. iptables -P INPUT DROP
  19. iptables -P FORWARD DROP
  20. iptables -P OUTPUT ACCEPT
  21. iptables -A INPUT -i lo -j ACCEPT
  22. iptables -A INPUT -m state –state ESTABLISHED,RELATED -j ACCEPT
  23. iptables -A INPUT -s 1.2.3.4 -p tcp –dport 3306 -j ACCEPT
  24. iptables -L -v
  25. service iptables save

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

No responses yet

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

Jan 31 2010

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:

  1. # Install HTTPD
  2. yum -y install httpd rsync
  3.  
  4. # Install PHP
  5. yum -y install php php-mbstring php-mysql mysql
  6.  
  7. #############################################################
  8. # FIREWALL
  9. # Open http port 80 (and ssh)
  10. iptables -F
  11. iptables -A INPUT -p tcp –dport 22 -j ACCEPT
  12. iptables -P INPUT DROP
  13. iptables -P FORWARD DROP
  14. iptables -P OUTPUT ACCEPT
  15. iptables -A INPUT -i lo -j ACCEPT
  16. iptables -A INPUT -m state –state ESTABLISHED,RELATED -j ACCEPT
  17. iptables -A INPUT -p tcp –dport 80 -j ACCEPT
  18. iptables -L -v
  19. service iptables save
  20.  
  21. # Start HTTPD server
  22. /etc/init.d/httpd start
  23.  
  24. # Install  memcached
  25. yum -y install memcached
  26. memcached -d -u apache
  27. yum -y install php-pecl-memcache
  28.  
  29. # Restart HTTPD server
  30. /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 :)

One response so far

Got new servers on Rackspace Cloud

Jan 30 2010

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.

5 responses so far

Un Navarro en California is back!

Jan 29 2010

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

No responses yet

4 years of excanvas

Jan 29 2010

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?

No responses yet

Older »