Using a public CDN versus hosting custom libraries

The plus side of using a public CDN

It is becoming common practice to use public CDNs to host some assets like jQuery and Bootstrap. The advantage is huge: less bandwidth usage for you, fully configured CDN will everything like Gzip, cache headers, etc. and a chance that even on the first load of your website, the user will already have the asset in his cache.

The down side

However, those libraries often come fully bundled. The whole Javascript for jQuery UI is whopping 230KB. This of course is cached, gzipped and everything, but you still have to parse this Javascript. Twitter Bootstrap also runs a lot of onLoad functions to bind automatically. Almost all libraries like those have builders that let you choose which part you need, reducing the load quite a bit. Moreover, you increase a lot the number of HTTP requests while you could be bundling all JS/CSS libraries together.

Testing the difference

So I decided to do a comparison of the three options: using a public CDN, hosting everything yourself bundled in one JS, one CSS (Hosted) and hosting only a subset of the features (Custom). The demo was done using Assetic to minify and concatenate. It is available here and it source code here but the subset looks like this:

• jQuery
• jQuery UI (including core and dependencies)
• Dialog
• Datepicker
• Twitter Bootstrap
• No responsive
• Alert
• Button
• Modal
• Tooltip
• Tab

On the demo, you may notice Javascript errors, I may have made some errors in the dependencies order, but it does not change the idea.

Then, the tests are done fully cached, 304 requests (when forcing refresh) and without any cache (No cache). Exec time is calculated using Google Speed Tracer, it includes parsing of JS/CSS and some JS execution. Keep in mind that the DOM was almost empty so result could scale a lot on crowded pages.

Results breakdown

	Custom	Hosted	Public CDN	Half/CDN
Gzipped size	82.91 KB	110.13 KB	128.93 KB	36 %
Exec time	15 ms	22 ms	22 ms	32 %
Cached	110 ms	130 ms	150 ms	27 %
304	125 ms	155 ms	195 ms	36 %
No cache	220 ms	240 ms	250 ms	12 %

* The measured time is onLoad event, so all files are downloaded, script are executed and the browser is ready.

Developer tools screenshots

Conclusion

Public CDN are really effective, but if you configure your CDN well, they are pretty on par. However, the difference is there and visible. As the page gets bigger and you add your own assets this idea quickly begins to become important. Also, don’t be too quick on calling micro-optimization because in the order 200ms, it is clearly noticeable.

CDN resources

• Google Hosted Libraries
• Microsoft Ajax Libraries
• Bootstrap CDN

Mind blowing jQuery plugin: Scroll Path

Joel Besada (@JoelBesada) did a jQuery plugin that lets you define custom scroll paths, including rotations and custom scrollbars.

The technology is not very new, a lot of video presentations use this kind of stuff. However, he did a dead-simple implementation, available on GitHub which allows us to do it directly in the browser.

The result is stunning; it is smooth, mostly compatible and pretty flexible. This is a wonderful alternative to building a PowerPoint to show your ideas.

I have not used it yet, but it seems pretty easy. Check out the live demo!

Automatic cache busting using Git commit in Symfony2

Cache busting

Cache busting is to rewrite a URL for an asset (JS, CSS, images, etc) so that is unique. This way, you can cache them for as long as you want. If the URL changes, it will use the new file.

Symfony

Symfony includes a cache busting mechanism which appends a GET parameter to your asset, but you must remember to increment it and it could quickly become a pain.

Incrementing using Git version

The idea is to use the current Git commit as a version number using git rev-parse --short HEAD. We can call this in the command line using PHP. Don’t worry, in production mode, Symfony caches the compiled configs, so it won’t be checked until you clear the cache.

Caveats

• All assets will be reset with every commit. Not a big deal since when you deploy, you usually touch a lot of assets.
• By default, Symfony uses a GET parameter, which is not cached by all CDNs.
  However, Amazon CloudFront now supports them.
  Otherwise, it is possible to rewrite using a folder prefix, but it can get tricky.
• You must be using Git (!), including on your production server. Otherwise, it could be possible to achieve something similar by adding a Git hook on commits, writing version in a file, and loading this file instead.

bcrypt with ircmaxell and how to use it

It is common knowledge that md5 is not secure for password hashing. It is almost worst than plaintext because it may falsly induce the impression of security. People aware of this usually also consider sha1 insecure and straightly go to sha256. Some techniques exist to add further security like adding a salt or hashing multiple times but ultimately the flaw remains: those methods are too quick. If you can hash a password in a fraction of a second, a standard bruteforce can as well. That’s why strong password security involves slow algorithms.

I was aware of all those principles, but @ircmaxell, contributor to PHP, made a video on password hashing with a nice comparison of different hashing functions and it struck me how quickly even a sha512 is computed quickly. Before, I often considered bcrypt as a nice feature to add to a backend but I now realise it is a must.



And be sure to check his blog post with the slides and some other discussion (yes, we have the same blog template).

Now, this is all very cute, but Anthony talks about an easy API coming in PHP 5.5 so it will not be usable anytime soon.

Here are plugins/ways to integrate bcrypt into several platforms:

• Symfony2
• Wordpress
• Drupal

Two good libraries:

• PHPass
• PHP-PasswordLib (5.3+)

But really, it boils down to this:

Git tutorial and global configs

I was searching for inspiration for a good Git tutorial and I stumbled across a wonderful resource.

Sure, you can take a week off and read the official Git Book but I wanted to give a crash course where I work so it was a bit lengthy. Don’t get me wrong, the Git Book is wonderfully written and anyone serious about Git should read it at least diagonally. However, if you don’t feel it at the moment, head over at http://www.vogella.com/articles/Git/article.html

Also, here is my setup for gitconfig and gitignore. Just copy gitignore to /etc/gitignore – or ~/.gitignore and change the corresponding path.

Batch update modules or themes of Drupal 6/7 in command line

To update Drupal modules, you need to download manually all modules and this can quickly become tedious. Especially if you have multiple modules and Drupal installations.

I wrote a simple script that parse the module's page and install or update the most up-to-date version.

This works for themes as well. To use it, simply go into a modules or themes folder and run one of the tool.

Valid folders are:

• /modules
• /themes
• /sites/all/modules
• /sites/all/themes
• /sites/*/modules
• /sites/*/themes

However, not that you should not try to update root folders, they are reserved for core modules and are updated with Drupal.

drupal-install-module.sh will install or update one module, drupal-update-modules.sh will batch update all modules in current folder.

Verifying DNS propagation

When changing DNS settings, the propagation can take from 15 minutes to two days. Clients and bosses are usually not very fond of this principle so it is often a good idea to be ready to provide a better answer than this.

Finding your nameserver (NS)

Start by finding your nameserver, you should probably already know it. If not, registrar often make them very easy to find. If not, a simple Google search should get you started. You will have 2-5 nameservers and they are usually in the form of ns1.registrar.com.

It is important to get the real information because NS propagation is part of the process.

Query your NS directly

To verify your settings, fire up a terminal and use dig. You can add MX to verify MX records. Basic dig syntax is like this:

dig [+trace] [MX] example.com [@ns1.registrar.com]

In our case, we query the NS directly so we use 

dig example.com @ns1.registrar.com

You should have an answer section giving you an A record, which is you IP address. If you get an error, you server is not configured properly and you can wait as long as you want, it will never work.

Verifying NS propagation

When a domain name is bought, the associated DNS is sent to the root servers. This is usually fairly quick (~20 minutes). By passing the option +trace to dig, it will bypass any local cache and query the root servers directly. You will see 3-5 iterations until you have your answer.

dig +trace example.com

If you get an error, it usually means your registrar has not sent the new informations to the root servers yet or the root servers have not updated their cache. Verify your NS settings with your registrar and wait a bit. More than 30 minutes is very usual and you should contact your registrar.

Verifying world propagation

Online tools exist to test the propagation against several NS around the world. I personally like http://www.whatsmydns.net/. Verify that the information is correct and once 80% of the server are agreeing, you are fairly confident that everyone near you will see the same as you.

Clearing local and domain cache

Most enterprise and routers have a DNS cache to speedup resolution, you can restart your router to clear it up. Otherwise, fancier network will have a mean to do this cleanly.

To clear local cache, it depends on your system.

• Windows: ipconfig /flushdns
• Mac: dscacheutil -flushcache or lookupd -flushcache
• Linux: Restart nscd and/or dnsmasq or equivalent

It may be tricky to get your client to do it though…

Contacting your ISP or bypassing them

If most world servers are correctly answering since a couple hours, you want want to contact your ISP and ask them what’s up. It is not uncommon that ISPs have caches of a couple hours to lower to stress of on their servers.  If they are not very collaborative, you can manually enter a new DNS for your network. Two fast and safe choices:

Google:

• 8.8.8.8
• 8.8.4.4

OpenDNS:

• 208.67.222.222
• 208.67.220.220

Testing your Regex skills

Regular expressions are powerful, yes. They should not be used for everything, especially not HTML. HTML is not a regular language. As soon as you need some logic, like checking dates, it is out as well. However, it is tredemously helpful for many things. I suggest regular-expressions.info for a very good round-up and a nice collection.

Now that you know that you must not use it everywhere, nothing stops you from trying. For example, when using a text editor, you might want to write a simple Regex to match some HTML just to find where it is in all your code, it does not have to be perfect, just good enough. @callumacrae has made a nice website where he posts a challenge every tuesday. http://callumacrae.github.com/regex-tuesday/

Here are my answers so far. They are not perfect, I have taken quite a few shortcuts, but it should get you started.

1. Repeated words
2. Grayscale colours
3. Dates
4. Italic MarkDown
5. Numbers
6. IPv4 address

WebPlatform.org – When giants get together

Starting to build websites can be very hard, keeping up with the technology is a must and building cross-browsers is a daily crisis. A lot of great resources are available to learn, share and experiment but in the end, one must often spend hours to find a way to make exactly what he wants.

The correct way is always changing. One of the worst is to embed a video. Do we use a Flash player, a video tag, or both ? Perhaps a javascript fallback on top of it ? What about codecs and fullscreen ? These things always evolve, adjusting with new technology and new hacks that are found.

Now, giants have decided to do something about it and help us, poor souls. Featuring big companies and big names, here is the launch video of a new wiki called WebPlatform.org. It is really at an alpha stage, but with all those names on it, they could have as well called it thedocumentation.org.


Also, as a bonus, check out a TED talk from Tim Berners Lee, whom we attribute merely the invention of the World Wide Web: http://www.ted.com/talks/tim_berners_lee_on_the_next_web.html

Going further

So, 4 years and a half after having started my bachelor degree at the University of Montreal in Computer Science, I am done. It has been a long and painful process where I struggled with myself about if I was completing it or not. If I knew what was awaiting me, which is a lot of maths and not a lot of programming, I would have gone elsewhere. Don’t get me wrong, this program is very good —but for people who love optimization, maths, theoretical computer science and quantum computing, which isn’t my strength or particularly my field of interest. I guess it is my fault anyway, I should have checked before.

Anyway, now that it is over, it is time to put it into practice. I worked for 4 years in a mid-size Web company and now I decided to associate myself with a rather new startup and hop in head first. I worked with them for a while as a consultant and they do business the way I like it: great company spirit, nice ideas, will of using the new and open-source technologies and decent business hours. Come and see us!

I always told myself that a nice work environment where you feel comfortable and continuously challenged is the most important. Hence, I will continue in the same path, sharing the interesting stuff I find while exploring the different Web technologies and trying to make some sense of all this HTML/CSS/JS/PHP/SQL/WTV.

Also, I finally decided to create myself a LinkedIn and a professional Twitter.

See you on the Interwebs!