Latest Posts

Learning to write again

Last weekend, I attended the Google Developers Experts Summit in Sunnyvale, California. During the summit, some GDEs delivered quick, 5-minute lightning talks on interesting projects or experiences they had over the course of their career. As you would expect, there were a lot of interesting people doing a lot of...

Understanding the difference between grid-template and grid-auto

With all the new properties related to CSS Grid Layout, one of the distinctions that always confused me was the difference between the grid-template-* and grid-auto-* properties. Specifically the difference between grid-template-rows/columns and grid-auto-rows/columns. Although I knew they were to do with the explicit and implicit grid systems,...

[Smashing Magazine] Creating The Feature Queries Manager DevTools Extension

While working with feature queries, I requently find myself in the messy situation of trying to test my fallbacks layout. This lead me to create the Feature Queries Manager, a developer tools extension that lets you easily toggle styles behind feature queries. I recently wrote an article for Smashing Magazine...

How display: contents; Works

As I frequently mention, every element in the document tree is a rectangular box. Broadly speaking, this "rectangular box" consists of two sections. First we have the actual box, which consists of the border, padding, and margin areas. Second, we have the contents of the box; the content...

Recreating the GitHub Contribution Graph with CSS Grid Layout

While learning CSS Grid Layout, I’ve found that the best way to internalise all the new concepts and terminology is by working on various layouts using them. Recently, I decided to try to recreate the GitHub Contribution graph using CSS Grid Layout, and found it was an interesting challenge....