Javascript fundamentals: variable scopes

A few months ago I wrote about the concept of context and the this keyword - one of JavaScript’s core fundamentals. Today I’ll be going over another important concept in JavaScript called ‘scope’.

read on...

Javascript fundamentals: context and the `this` keyword

A lot of new developers that are learning JavaScript tend to start with teaching themselves how to implement (and possibly slightly alter) jQuery plugins. Although I strongly believe that jQuery is a great library and that it is definitely responsible for pushing the web forward, knowing what jQuery is (and isn’t) and learning how to write vanilla JavaScript will make you a better front-end developer.

read on...

Move over Grunt: Introducing Gulp

In case you’re new to Grunt or even front-end automation in general - GruntJS is a task runner for web applications. It’s a piece of software that can do a lot of repetitive tasks for you like minification, linting, compilation, setting up web servers and live-reloading.

read on...

Beyond console.log: Getting fancy with your developer console

As you’re probably aware of, most modern browsers allow developers to log pretty much anything into the console. If you’re like me, you use console.log as your first approach for solving pretty much any javascript-related problem. You want to know more about the arguments that are being passed into a function? Console.log! Wondering why your $.ajax call is not returning the results like you were hoping it would? Console-dot-freakin’-log!

read on...

Zero-delay setTimeout: what it does and why it can be helpful

Browsers have to do a number of things pretty much all at once to ensure that you have the page that you asked for as quickly as possible. One of those tasks is executing JavaScript. Since JavaScript in a browser executes on a single thread, heavy operations - like manipulating the DOM tree – can sometimes cause the page to take a long time to load. If part of this JavaScript does not necessarily need to be executed on page load then you’re probably better of allowing the rest of your application to load first.

read on...

Benchmarking and optimizing your front end with DevTools

In order to improve the performance of your website’s front end, you must be able to benchmark your app and track down the bottlenecks. The last two months I shared some tricks on how to easily improve your app’s render and paint performance using simple CSS and Javascript techniques. This time I’m going to demonstrate three ways of benchmarking a web app’s performance using the Google Chrome DevTools.

read on...

Using the requestAnimationFrame() API

Last month I wrote about improving animation performance using CSS3 transitions and the transform property rather than animating the left property. This time, I’ll be demonstrating how to use the requestAnimationFrame API to get smooth, battery-friendly JavaScript animations.

read on...