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.

Finding dead or unused CSS on a live website using a 1px transparent gif.

I needed to prototype something recently by creating output HTML from a modest set of data. I wanted to avoid extra dependencies such as Handlebars and managed to get the job done using ES2015 Template Literals.

SVG knows how to maintain aspect ratio. CSS grid knows how to make overlapping items affect each other’s size

This idea, testing a screen reader, proved much harder than I thought. It's actually a bit of a holy grail in the accessibility space. Something that many have dreamed of, but few—if any—have achieved.