web analytics

Tag Archives: jquery

Writing MVC Javascript – A Node JS tutorial

I’ve been using Backbone JS daily as part of my day job for about three months. I’ve learned a lot in that time and have found it to be very effective at what it does. Whilst I am now much more comfortable with the framework, I had some false starts and I found the documentation slightly intimidating for a noob! Whilst I appreciate that this is in part due to the philosophy behind the software, I would have loved a structured tutorial with an accompanying “Hello World” example.

The problem with “Hello World” is that being an application that outputs only one string, it’s not really suited to a demonstration of MVC techniques which require slightly more dynamic data sources. Instead, I decided to write a simple calculator web server that multiplies two operands supplied by the client and returns the result. It demonstrates the basic principles of MVC on the client using both JSON and traditional form submits. It also has a script to generate its own documentation web pages from the source code, which are served up as part of the tutorial application.

The frontend is written in Backbone, jQuery and HTML5 and is served by Node JS using Express, Backbone, Jade and Browserify. All the documentation is generated with docco and it comes ready for deployment to Heroku.

Fork the code on github
Check out a live demo on Heroku

Custom Select Element Rage

Custom Select Rage

Custom Select Rage

I produced a presentation for LBi‘s Technology Department Show and Tell sessions. It describes the problems I faced producing Flyweight jQuery Custom Select and how I overcame them, giving a brief summary of the techniques used and a breakdown of the plugin’s eventual performance. Sadly the presentation wasn’t filmed but I do have the slides, which LBi have kindly granted me permission to share with you.

So, without further ado I present you with Custom Select Element Rage. I hope you enjoy reading as much as I enjoyed making it…

Custom Select Element Rage (Open Doc Presentation)
Custom Select Element Rage (Powerpoint Presentation)

This presentation was originally given on 26th August 2011.

Flyweight jQuery Custom Select

I’ve uploaded my first version of a jQuery custom form control to github. Take a look if you’re that way inclined. It’s intended to provide and alternative to the rather heavy jQuery UI version by Filament group. I developed it because Filament’s plugin renders very slowly on older browsers, particularly on pages with many inputs as it replaces each select menu with a full control. My version only implements the parts which must be visible at any one time, thus saving much event binding and many DOM operations, which are the most expensive of any Javascript calls. My version is yet to be ported to the jQuery or jQuery UI module format but it should prove a relatively straightforward process once I get the time.

Check out the theory behind the flyweight design pattern.

Edit 20110726

Added an unstable branch and live demo to the github pages. All branches, including the live demo, are now implemented as a jQuery plugin.

John Resig Reddit Rage

John Resig Reddit Rage

John Resig Reddit Rage