JavaScript Playground

Using objects in jQuery's .css()

Jack Franklin |
Something I will be focusing on on a regular basis here at JSP is producing tidy code that's easier to maintain in the future as well as nicer to work with. One such area where people often produce messy code is when using jQuery's .css() method. Basic usage of this goes like so: $(elem).css("displ... read more

The JavaScript Module Pattern

Jack Franklin |
Lets say you've got a little library like this, that just increments a number: var jspy = { count: 0, incrementCount: function() { this.count++; }, decrementCount: function() { this.count--; }, getCount: function() { return this.count; } }; However, people using this library are able to do jspy.cou... read more

An introduction to jQuery Deferreds

Jack Franklin |
Prior to jQuery 1.5, Ajax requests could get a bit messy. You'd probably do something like this, if we were making a simple get request: $(function() { $.get( "content.txt", function(resp) { console.log("first code block"); console.log(resp); } ); }); But this gives you a potential issue - what hap... read more

jQuery 1.7 Event Binding: .on() & .off()

Jack Franklin |
From jQuery 1.7 new methods were added for binding events, .on() and .off() which, unsurprisingly, does the opposite of .on(). Amongst the community, there seems to have been a bit of confusion over these methods & in this post I want to clear this up, once & for all. Firstly, I'm going to ... read more

JS WTF: 5 < 4 < 3

Jack Franklin |
A quick fun "JS WTF?" post for you today. If you load up your JavaScript console & enter: 5 < 4 < 3 You'd be expecting to see false, right? However, you'll actually see true. WTF? This is actually down to the way JavaScript evaluates this and operator precedence. What it sees is: (5 < ... read more

A jQuery Pub Sub Implementation

Jack Franklin |
Having discussed the Module pattern briefly a few days ago, today I want to tackle another pattern, the Pub Sub (or Publish and Subscribe) pattern, also known as the Observer Pattern. If you've not heard of this implementation, it's pretty straight forward. It allows different aspects of your appli... read more

Testing with QUnit: Part 1

Jack Franklin |
Recently I was asked on Twitter to do a tutorial on QUnit, a JavaScript Unit Testing framework, and the one used by jQuery. What I wanted to do however, is use it with a real project, rather than set up some fake project. So, I've done just that. Having worked with the Instagr.am API recently, I'm ... read more

Scope and this in JavaScript

Jack Franklin |
Today I want to talk a little about scope in JavaScript and the this variable. The idea of "scope" is that it's where certain functions or variables are accessible from in our code, & the context in which they exist & are executed in. If you've ever seen someone do something like: function ... read more

Grunt, a JS Command Line Tool

Jack Franklin |
Grunt describes itself as: Grunt is a task-based command line build tool for JavaScript projects. It was released very recently and is authored by Ben "Cowboy" Alman and lives on the Github Repository. In this tutorial I'm going to be going through the basics of Grunt, how to install & use it... read more

QUnit, PhantomJS and Mockjax

Jack Franklin |
Following on from last week's introduction to QUnit today I want to talk less about how to use QUnit but ways to make it easier to use or integrate it into your development workflow. A lot of people asked me how to avoid refreshing the QUnit tests page everytime you want to rerun the tests. I was a... read more