JavaScript

All JavaScript articles

Exploring the JavaScript language, one semicolon at a time.

Cache-busting in Jekyll, GitHub pages

I’ve always found updating my blog an interesting feat, however with sev...

Pure versus impure functions

Understanding pure and impure functions is a simple transition into clea...

ES6 arrow functions, syntax and lexical scoping

ES2015 (ES6) introduces a really nice feature that punches above its wei...

Polyfills suck, use a featurefill instead

I’m going to dub this a featurefill as the post title suggests, but it’s...

Replacing switch statements with Object literals

In many programming languages, the switch statement exists - but should ...

Web Components and concepts, ShadowDOM, imports, templates, custom elements

Web Components, the future of the web, inspired from attending Google I/...

Methods to determine if an Object has a given property

There are multiple ways to detect whether an Object has a property. You’...

What (function (window, document, undefined) {})(window, document); really means

In this post, we’re going to explore what the title suggests, and offer ...

Understanding JavaScript types and reliable type checking

Type checking in JavaScript can often be a pain, especially for new JS d...

Simple forEach implementation for Objects/NodeLists/Arrays

Looping Objects is easy. Looping Arrays is also easy. Looping NodeLists ...

Understanding the “this” keyword in JavaScript

It’s probably safe to say that the this keyword is one of the most misun...

Writing a standalone Ajax/XHR JavaScript micro-library

Whether you’re working with websites or applications, you’re bound to ha...

Ditch the [].forEach.call(NodeList) hack

I’ve got to admit before we go any further, I used to use this technique...

Stratos.js simplifying Object manipulation

JavaScript Objects are usually the driving force behind applications I d...

Mastering the Module Pattern

I’m a massive fan of JavaScript’s Module Pattern and I’d like to share s...

Avoiding anonymous JavaScript functions

Anonymous functions, the art of the callback. I’m going to propose that ...

Everything you wanted to know about JavaScript scope

The JavaScript language has a few concepts of “scope”, none of which are...

Stop toggling classes with JS, use behaviour driven DOM manipulation with data-states

Using a class to manipulate the DOM? What about this idea. Using classes...

A comprehensive dive into NodeLists, Arrays, converting NodeLists and understanding the DOM

Manipulating the DOM is JavaScript’s role when developing websites and a...

Vault.js, HTML5 (local/session) Web Storage API with automatic JSON support

Vault is a 0.6KB standalone HTML5 (local/session) Web Storage API with a...

Smarten your front-end workflow with @conditionizr, screencast on all the APIs

Who’s using Conditionizr? So far we’ve found some teams at Google, Sench...

Apollo.js, standalone class manipulation API for HTML5 and legacy DOM

Apollo is a <1KB standalone DOM class manipulation API for adding, re...

Understanding Regular Expression matching with .test(), .match(), .exec(), .search() and .split()

Regular Expressions, often noted as RegEx or RegExp, are seen and used p...

NoFi, detecting no WiFi, callbacks for offline states with HTML5

An HTML5 API buried inside the navigator Object called onLine is where t...

Hacking SVG, traversing with ease - addClass, removeClass, toggleClass functions

Update: I’ve turned this into a small JavaScript module named Lunar and ...

Conditionizr reloaded, what every developer has been waiting for

Wouldn’t it be ideal to target any browser, mobile browser, mobile devic...

The [data-js] API for behavioural-binding; stop using selectors in your JavaScript

Selectors in JavaScript are bad. The bridge between the DOM communicatin...

FireShell, fiercely quick front-end boilerplate and workflows

Built for the modern developer. For teams and the individual, encouragin...

Building out an HTML5 experience with Intels HTML5 Hub, for Rolling Stone magazine

Back in June this year, I was approached by Intel and Rolling Stone maga...

Echo.js, simple JavaScript image lazy loading

I’m currently working on a project for Intel’s HTML5 Hub in which I requ...

Hacking the HTML5 <video> element with Suave.js

Suave, for elegant HTML5 videos (how they should have been). Suave was b...

Using Grunt and Chrome Workspaces for in-browser development

After some great interest in why I ditched Sublime Text 2 for the day to...

Psswrd, the show/hide password JavaScript plugin

Show/hide toggling for password inputs. Psswrd is a neat little script I...

Is it time to drop jQuery? Essentials to learning JavaScript from a jQuery background

jQuery has been a godsend to pretty much all of us front-end developers ...

Re-engineering the jBar plugin with Immediately-Invoked-Data-Expressions

Earlier this week I wrote about IIDE, Immediately-Invoked-Data-Expressio...

Revisiting SVG workflow for performance and progressive development with transparent data URIs

A few months ago I covered a range of SVG techniques that proved to be a...

IIDE, Immediate-Invoked-Data-Expressions, data-init and using HTML5 to call your JavaScript/jQuery

There’s something that’s been at the back of my mind ever since I’ve sta...

Simple HTML5 data-* jQuery tabs, markup free and relative to their container for ultimate re-use

One of my favourite additions to the HTML5 spec is data-* attributes, th...

Progressively enhancing HTML5 forms, creating a required attribute fallback with jQuery

HTML5 required attributes are a fantastic addition to the HTML5 spec, th...

data-js selectors, enhancing HTML5 development by separating CSS from JavaScript

I’ve started introducing a new concept into my JavaScript workflow and I...

Flaunt.js for stylish responsive navigations with nested click-to-reveal

Flaunt.js is a jQuery script that allows you to create a responsive, nes...

Introducing SuperBox the re-imagined lightbox gallery

SuperBox is a new jQuery plugin I’ve been composing over the last few da...

Storing data in the browser with the HTML5 localStorage API

HTML5 localStorage is an HTML5 API that allows us to save string data in...

Building an HTML5 responsive menu with media queries and JavaScript

Responsive navigation menus come in all different shapes and sizes, you ...

Writing the best CSS when building with HTML5

Let’s become HTML agnostic. HTML agnostic means to use as little HTML in...

Attaching event handlers to dynamically created JavaScript elements

When working with JavaScript, you can sometimes need to create new eleme...

Progressively enhanced SVG sprite icons

You may remember a while back, I coded up some nice CSS3 social media ic...

Using HTML5 Geolocation to show current location with Google Maps API

Geolocation is one of the best new HTML5 APIs, so let’s see what we can ...

Getting started with Object-Orientated CSS (OOCSS), creating a button kit

Object-Orientated CSS, or OOCSS to the masses, is a method of structurin...

How to addClass, removeClass, toggleClass in JavaScript

jQuery is a pretty cool framework, it has it’s uses, it’s pretty reliabl...

Contact forms; the HTML5 way. Semantics, inputs, data attributes, javascript feature detection

Forms are often one of the last quick-finishes to a website, so here’s a...

Fluid and responsive YouTube and Vimeo videos with fluidvids.js

One of the major drawbacks to responsive design is managing external plu...

Browser-based responsive development tool, viewport resizing, custom widths

Designing in the browser is increasingly popular, especially with respon...

Creating a responsive, dynamic mobile select navigation from pure javascript

Here’s how to create a select menu from an existing menu using JavaScrip...

Meet Conditionizr, the conditional free legacy, retina, script and style loader

After much debate about a way forward past conditional statements, retin...

ViewPort dynamic width calculation, retina and pixel ratio JavaScript widget

Dynamically adjusted screen dimensions, retina detection and device pixe...

imgShufflr, randomised inline and CSS background images plugin

imgShufflr is quick and lightweight plugin for generating a random image...

bounceThis plugin, mimics CSS3 keyframes bouncing header animations

We all love those slick animated drop-down headers that gracefully drop ...

Flawless clickable drop-down navigation

In this tutorial I’ll show you how to create a superb clickable drop-dow...

Mastering SVG use for a retina web, fallbacks with PNG script

SVGs (Scalable Vector Graphics) are the future graphics format of the we...

Fluid-first: creating a future proof fluid and responsive website

Fluid-first is a way of thinking, then designing, then coding. It’s not ...

jResize Plugin, for one window responsive development

jResize is a responsive web development tool, built in jQuery to assist ...

HTML5 Blank, Rapid WordPress Theme Development

HTML5 Blank Theme is an industry leading WordPress shell, recognised by ...

HTML5 and jQuery Super Simple Drop Down Nav

How hard is it to find a decent and lightweight navigation that actually...

Email address Spam Protection with JavaScript

This is a simple code snippet to prevent any spambots crawling your Cont...

jBar Plugin, the jQuery call to action bar

jBar is a simple and lightweight jQuery notification bar that’s been rev...

Thoughts on progressive and relative images

Image quality and size have been high on my thinking list recently, with...

Create a simple jQuery hover call-to-action box

Here’s a quick and easy tutorial on how to create a small call to action...

How to utilise Google Analytics onClick Tracking

Collecting data on how web users scurry through our websites is a great ...

Using CSS3 text-selection to override default highlight colour

Add something different to your website by overriding the default text s...