Image Zoom with plain JavaScript and CSS

Note: I’ve moved away from the solution outlined in this post. Mainly because I did not want to write an entire gallery from scratch. I’ve since opted to use lightgallery.js which is a pure JS image gallery solution with some nice goodies. The premise is simple. A post may contain images. These images are restricted in rendered size to keep the flow of the page in tact. Clicking an image allows you to zoom in.

Vows and CoffeeScript

CoffeeScript is a really nice way to write JavaScript code. Combined with NodeJS you are empowered by a very fast platform to develop server-side applications. Of course, you want to test these apps as well. Vows is really great way to do this. Unfortunately it’s not straight forward (yet) to set up NodeJS + CoffeeScript + Vows. ~ First off, make sure you have CoffeeScript and Vows installed. Here I install them globally so you can use the coffee and vows command line utilities.

Detect browser Web Sockets support

HTML5 Web Sockets are awesome! I’ve been toying around with it for a bit today and noticed that not every browser supports native HTML5 Web Sockets yet. Google Chrome 5 has native support for web sockets, FireFox 3.6 does not. This poses a problem if you’re building something awesome that does require web sockets. ~ Luckily, it’s easy to detect web sockets support through JavaScript. All you really need to do is check if WebSocket is defined or not.