Todd Motto

Todd Motto

Owner, Ultimate Angular

JavaScript

All articles on JavaScript, ES6 and tips and tricks

Oct 11, 2016

Pure versus impure functions

Understanding pure and impure functions is a simple transition into cleaner, more role-based and testable...

Apr 14, 2015

ES6 arrow functions, syntax and lexical scoping

ES2015 (ES6) introduces a really nice feature that punches above its weight in terms of...

Dec 1, 2014

Polyfills suck, use a featurefill instead

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

Jul 17, 2014

Replacing switch statements with Object literals

In many programming languages, the switch statement exists - but should it any longer? If...

Jun 30, 2014

Methods to determine if an Object has a given property

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

Jun 3, 2014

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

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

Jun 2, 2014

Understanding JavaScript types and reliable type checking

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

May 14, 2014

Simple forEach implementation for Objects/NodeLists/Arrays

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

Apr 12, 2014

Understanding the “this” keyword in JavaScript

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

Mar 31, 2014

Writing a standalone Ajax/XHR JavaScript micro-library

Whether you’re working with websites or applications, you’re bound to have faced a task dealing...

Feb 23, 2014

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

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

Feb 22, 2014

Stratos.js simplifying Object manipulation

JavaScript Objects are usually the driving force behind applications I develop, specifically JSON which gets...

Jan 29, 2014

Mastering the Module Pattern

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

Jan 19, 2014

Avoiding anonymous JavaScript functions

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

Dec 29, 2013

Everything you wanted to know about JavaScript scope

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

Dec 17, 2013

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 have many...

Dec 9, 2013

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

Manipulating the DOM is JavaScript’s role when developing websites and applications, and we do this...

Dec 7, 2013

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 automatic JSON support. Web...

Nov 26, 2013

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, Sencha, NASA are some...

Nov 9, 2013

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

Apollo is a <1KB standalone DOM class manipulation API for adding, removing, toggling and testing...

Oct 29, 2013

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

Regular Expressions, often noted as RegEx or RegExp, are seen and used pretty much everywhere...

Oct 27, 2013

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

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

Oct 24, 2013

Conditionizr reloaded, what every developer has been waiting for

Wouldn’t it be ideal to target any browser, mobile browser, mobile device, touch device, screen...

Sep 21, 2013

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

Selectors in JavaScript are bad. The bridge between the DOM communicating with JavaScript is a...

Sep 15, 2013

FireShell, fiercely quick front-end boilerplate and workflows

Built for the modern developer. For teams and the individual, encouraging a better workflow. JavaScript...

Aug 11, 2013

Echo.js, simple JavaScript image lazy loading

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

Jul 27, 2013

Using Grunt and Chrome Workspaces for in-browser development

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

Jul 20, 2013

Psswrd, the show/hide password JavaScript plugin

Show/hide toggling for password inputs. Psswrd is a neat little script I’ve put together to...

Jun 25, 2013

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 since its...

Jun 1, 2013

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

Earlier this week I wrote about IIDE, Immediately-Invoked-Data-Expressions. Not an official term as such but...

May 30, 2013

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...

May 28, 2013

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 started writing...

Mar 24, 2013

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

Flaunt.js is a jQuery script that allows you to create a responsive, nested navigation out...

Mar 18, 2013

Introducing SuperBox the re-imagined lightbox gallery

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

Mar 5, 2013

Attaching event handlers to dynamically created JavaScript elements

When working with JavaScript, you can sometimes need to create new elements on-the-fly, and from...

Mar 1, 2013

Progressively enhanced SVG sprite icons

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

Feb 2, 2013

Creating jQuery-style functions in JavaScript, hasClass, addClass, removeClass, toggleClass

jQuery is a pretty cool framework, it has it’s uses, it’s pretty reliable, but remember:...

Jan 22, 2013

Fluid and responsive YouTube and Vimeo videos with fluidvids.js

One of the major drawbacks to responsive design is managing external plugins/resources, such as YouTube...

Jan 18, 2013

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

Designing in the browser is increasingly popular, especially with responsive websites. Having a reliable and...

Jan 1, 2013

Creating a responsive, dynamic mobile select navigation from pure javascript

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

Dec 17, 2012

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

After much debate about a way forward past conditional statements, retina detection, and legacy content...

Dec 16, 2012

ViewPort dynamic width calculation, retina and pixel ratio JavaScript widget

Dynamically adjusted screen dimensions, retina detection and device pixel ratio. When working on website projects...

Dec 6, 2012

imgShufflr, randomised inline and CSS background images plugin

imgShufflr is quick and lightweight plugin for generating a random image upon page load. Simply...

Dec 3, 2012

bounceThis plugin, mimics CSS3 keyframes bouncing header animations

We all love those slick animated drop-down headers that gracefully drop into the page on-load....

Nov 25, 2012

Flawless clickable drop-down navigation

In this tutorial I’ll show you how to create a superb clickable drop-down navigation, using...

Nov 17, 2012

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

SVGs (Scalable Vector Graphics) are the future graphics format of the web, they offer resolution-independent,...

Oct 28, 2012

jResize Plugin, for one window responsive development

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

Sep 5, 2012

HTML5 and jQuery Super Simple Drop Down Nav

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

Aug 18, 2012

Email address Spam Protection with JavaScript

This is a simple code snippet to prevent any spambots crawling your Contact pages, finding...

Aug 4, 2012

jBar Plugin, the jQuery call to action bar

jBar is a simple and lightweight jQuery notification bar that’s been revisited and rewritten (18.11.2012)...

Jun 4, 2012

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...

Apr 30, 2012

How to utilise Google Analytics onClick Tracking

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