Latest Posts

Asynchronous vs Deferred JavaScript

In my article on Understanding the Critical Rendering Path, I wrote about the effect JavaScript files have on the Critical Rendering Path. JavaScript is considered a "parser blocking resource". This means that the parsing of the HTML document itself is blocked by JavaScript. When the parser reaches a <script&...

Optimising GIFs for the Web

Like a lot of people, I like GIFs. I like to use them in my articles to illustrate functionality. For example, this GIF from my article on "Recreating the iTunes Library" - However, a problem with this is that GIFs are heavy, the one above is a whopping 11.4...

CSS Grid Layout Terminology, Explained

In the CSS Grid Layout Specification, a grid is defined as the following - The grid is an intersecting set of horizontal and vertical grid lines that divides the grid container’s space into grid areas, into which grid items (representing the grid container’s content) can be placed Err…...

How calc() Works

The CSS3 calc() function allows us to perform mathematical operations on property values. Instead of declaring, for example, static pixel values for an element's width, we can use calc() to specify that the width be the result of the addition of two or more numeric values. .foo { width: calc(100px...