JavaScript icon Get 69% off the JavaScript Master Bundle!

See the bundle then add to cart and your discount is applied.

days
hours
mins
secs
Progressively enhanced SVG sprite icons image

Progressively enhanced SVG sprite icons

Todd Motto image

Todd Motto

Mar 1, 2013

You may remember a while back, I coded up some nice CSS3 social media icons, to which I have had to remove from my website due to the fact I cannot...

Using HTML5 Geolocation to show current location with Google Maps API image

Using HTML5 Geolocation to show current location with Google Maps API

Todd Motto image

Todd Motto

Feb 25, 2013

Geolocation is one of the best new HTML5 APIs, so let’s see what we can do with it. In a nutshell, Geolocation allows you to give your current loca...

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

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

Todd Motto image

Todd Motto

Feb 4, 2013

Object-Orientated CSS, or OOCSS to the masses, is a method of structuring your CSS and HTML classes in a specific way. The purpose of OOCSS is to m...

How to addClass, removeClass, toggleClass in JavaScript image

How to addClass, removeClass, toggleClass in JavaScript

Todd Motto image

Todd Motto

Feb 2, 2013

jQuery is a pretty cool framework, it has it’s uses, it’s pretty reliable, but remember: it’s written with JavaScript. It’s not a language by itsel...

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

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

Todd Motto image

Todd Motto

Jan 26, 2013

Forms are often one of the last quick-finishes to a website, so here’s a great boilerplate to get you kick-started on a standards-compliant, HTML5,...

Fluid and responsive YouTube and Vimeo videos with fluidvids.js image

Fluid and responsive YouTube and Vimeo videos with fluidvids.js

Todd Motto image

Todd Motto

Jan 22, 2013

One of the major drawbacks to responsive design is managing external plugins/resources, such as YouTube and Vimeo videos – which we can embed into ...

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

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

Todd Motto image

Todd Motto

Jan 18, 2013

Designing in the browser is increasingly popular, especially with responsive websites. Having a reliable and simple viewport resizer is key to any ...

Creating a responsive, dynamic mobile select navigation from pure javascript image

Creating a responsive, dynamic mobile select navigation from pure javascript

Todd Motto image

Todd Motto

Jan 1, 2013

Here’s how to create a select menu from an existing menu using JavaScript. The select menu will be comprised of an existing menu, which dynamically...

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

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

Todd Motto image

Todd Motto

Dec 17, 2012

After much debate about a way forward past conditional statements, retina detection, and legacy content serving, Mark Goodyear and I have been work...

ViewPort dynamic width calculation, retina and pixel ratio JavaScript widget image

ViewPort dynamic width calculation, retina and pixel ratio JavaScript widget

Todd Motto image

Todd Motto

Dec 16, 2012

Dynamically adjusted screen dimensions, retina detection and device pixel ratio. When working on website projects that are responsive, it’s imperat...

imgShufflr, randomised inline and CSS background images plugin image

imgShufflr, randomised inline and CSS background images plugin

Todd Motto image

Todd Motto

Dec 6, 2012

imgShufflr is quick and lightweight plugin for generating a random image upon page load. Simply load your images onto the server, and include the p...

bounceThis plugin, mimics CSS3 keyframes bouncing header animations image

bounceThis plugin, mimics CSS3 keyframes bouncing header animations

Todd Motto image

Todd Motto

Dec 3, 2012

We all love those slick animated drop-down headers that gracefully drop into the page on-load. This is usually done via some CSS3 keyframes code, b...