Archive for July, 2011

Older is sometimes better or why I use an old version of jQuery.

Posted on July 21st, 2011 in JavaScript, jQuery, zepto | 1 Comment »

For the last year or so I’ve been predominantly focused on mobile web applications. While I’m a big fan of jQuery, at it’s current revision of *32.18 KB (compressed and gzipped) I think it’s generally too big for the mobile web. That’s when I discovered Zepto, a jQuery-like library that features 90% of the same functionality at a weight of 4.8 KB (compressed and gzipped). Life was good again and I resumed working with iOS and Android web apps, bidding IE adieu.

Fast forward to now and I need to make some general web pages again for a project and I need to support IE once more. These pages have some light-to-moderate js functionality and though I could write a small library from scratch, I’d be a fool in wasting so much time, though minimally, I only need:

  • Cross-browser event support
  • Cross-browser ajax support

Though one does arguably write faster and more concisely (smaller file size) if one has:

  • A chainable API
  • A CSS selector engine

The answer? Use an older version of jQuery. jQuery 1.2.6 for example is 17.18 KB (compressed and gzipped). Almost half as small as the current version. It gives me all four requirements above. Every version of jQuery has been battle-hardened against the most finicky older browsers and the newest batch of browsers aren’t really causing too much trouble. I had been writing with Zepto in Chrome initially when I made the switch to test in IE. I made the switch to 1.2.6 without issue. IE and all browsers are happy.

While I would love to take credit for thinking this through, it actually happened by accident. I referenced jQuery version 1.2.6 from Google’s CDN instead of 1.6.2.

I’m sure someone’s going to comment how I’m missing some major optimizations in later versions, but after trying the project out, I already have split second performance using an old build. If I start doing crazy animations or need .live, I’ll move up some revisions. If you do plan to try this out for yourself, know that jQuery 1.3 (20.08 KB) is when Sizzle was introduced and in jQuery 1.6 a lot of the API was modified or had signature changes (nothing that’s affected me so far).

Here’s a list of some versions along with their file sizes. Check the blog for more details.
1.6.2 (32.18 KB) – misc small bugfixes
1.5 (30.12 KB) – ajax timeout and abort
1.4.2 (24.86 KB) – .delegate
1.4 (27.25 KB) – extended .live support
1.3 (20.08 KB) – Sizzle and Live
1.2.6 (17.18) – 100% faster events
1.2 (17.21 KB)

And don’t forget if you’re using Google’s CDN (a good idea), always fallback to your own version, too, just in case.

*2.6.1, I use Charles Debugging Proxy for measurements.

Nginx, Apache, and Node all living harmony.

Posted on July 15th, 2011 in Apache, nginx, node | 3 Comments »

So here’s two problems you want to solve:

You want to optimize static content

You have an Apache install that’s hosting a bunch of sites and friend’s sites through vhosts. One of your blogs is getting a lot of hits and you want to optimize it’s static content – or even the static content of all sites. You’re not quite ready for a CDN-type deal, just to place the content outside of Apache and into something more lighter-weight so it’s not running through WordPress / Apache and unnecessarily using up threads (at roughly 2mb a thread).

You want all your web apps on port 80!

You started really getting into Node (or Ruby on Rails or Django) but every web app needs to be binded to it’s own port and port 80 is taken by your Apache which is hosting a lot. You don’t want to be giving out the url:

Sure you can use Apache’s proxypass but you’re gaining overhead and, in case of Node (or Ruby’s EventMachine or Python’s Twisted), you’re losing the whole point of having an optimized, non-blocking / non-threaded, web app.

The solution

Nginx! Nginx is a web server, reverse-proxy, load balancer, and mail server all in one. Like Node, it was built with the concept of the event loop, not threads so it’s highly optimized for high concurrency. The idea is to setup Nginx to be a reverse-proxy for all your other services.

I’ll skip over how to install Nginx as it’s pretty straightforward and you can google it. I’ll go over the main steps to getting Apache to work through Nginx – it’s truly easy, I did it on my first try. The only problem that I encountered is that since the user only interfaces with Nginx – it’s Nginx that is making the requests to Apache / Node. So from Apache’s perspective, all requests are coming from We also fix this in the steps below.

  1. Once Nginx is installed, edit your /etc/httpd/conf/httpd.conf so that it listens on another port. Say
  2. Switch all your vhosts to also listen on this port.
  3. Edit your /etc/nginx/nginx.conf file. Make sure it’s set to listen on port 80 and add a server entry per each apache vhost. Here’s an example:
server {
           listen       80;

       location / {
                    include /etc/nginx/conf.d/proxy.conf;
  1. Next we’ll add that proxy.conf reference by creating /etc/nginx/conf.d/proxy.conf:
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
client_max_body_size 8m;
client_body_buffer_size 256k;
proxy_connect_timeout 60;
proxy_send_timeout 60;
proxy_read_timeout 60;
proxy_buffer_size 4k;
proxy_buffers 32 256k;
proxy_busy_buffers_size 512k;
proxy_temp_file_write_size 256k;
  1. At his point you need to install mod-rpaf for Apache. This enable Apache to use the extra headers Nginx is passing in the request. If you’re using a flavor of Linux that uses apt-get you’re in luck. Just run: sudo apt-get install libapache2-mod-rpaf. If you’re using a system that uses Yum, you’ll have to compile it yourself. Just follow the steps here.

As for serving static content. Inside each “server” declaration you can add the following (modified to your taste):

location ~* ^.+\.(jpg|jpeg|gif|png|ico|tgz|gz|pdf|rar|bz2|exe|ppt|txt|tar|mid|midi|wav|bmp|rtf) {
            root /folder/to/static/files;
            expires 90d;
       location ~* ^.+\.(css|js)$ {
            root /folder/to/static/files;
            expires 30d;

Ad that’s it you’re done!

Additional reading

Nginx Primer

Nginx Primer 2: From Apache to Nginx

Apache with Nginx

Really solid config samples