translucent—keep Twitter banner images noise free

A tool which turns a single pixel on the top left corner of an image to 99.6% opacity, so that Twitter doesn't mess with the image once it's uploaded.

The new CSS Layout by Rachel Andrew

A great talk on Flexbox and Grids.

The veil of Ignorance

Great article on web accessibility. 

Front-end development blog by Ire Aderinokun

This is a really nice example of someone documenting their learning.

Let's Encrypt

For maintaining SSL certificates.

Font Loading Revisited with Font Events

A nice article on font loading with Font Face Observer

Taking Let's Encrypt for a Spin by Tim Kadlec

This is a great article on how to use Let's Encrypt to move your site to HTTPs. I just followed it and it took around 10 minutes—amazing! Thank you for posting, Tim.

Chapter 4 of Brad Frost's book: Atomic Workflow

I'm enjoying Brad Frost's book. Loads of great stuff on atomic design.

Flexbox Froggy

This game is awesome! A great way to learn flexbox.

Building for retina devices

There is a useful section on adding image-set to CSS for retina devices

The beautifully designed opening titles for Beyond Tellerand​

All the speakers form the ingredients for a delicious looking rum cake.

The Techie's guide to public speaking

Jeremy showed me this book today, which looks really good. I'll definitely get a copy.

Pattern library examples

I love browsing through the lovely pattern libraries on here.

18 great web design podcasts

I've been meaning to get back into podcasting. This is a pretty good list; I used to follow a few of these and plan to start doing so again.

Performance budget calculator

Calculate a performance budget based on connection speed. By Jonathan Fielding.

Building our first pattern library

I love this post by Alla Kholmatova about her work on the pattern library at Future Learn.

URL Design

URL design is sometimes forgotten. This article is a few years old, but a great read on designing URL structures.

How to code in HTML for beginners

A great book that I recommend to Codebar students.

You May Have Seen My Face on BART

A Medium post by Isis Anchalee on her tough experiences of being a women in tech and her campaign to spread awareness and redefine “what an engineer should look like”, using the hashtag #iLookLikeAnEngineer.


I admit to being a culprit of this when I started out and I learnt a while ago that I would get more satisfaction out of learning and understanding the code I'm writing. It's a great feeling when something you made really works!

Indie Web Camp Brighton 2015

A nice article about Indie Web Camp Brighton 2015, by Johannes Dachsel.

What a CSS review might look like

A great article on what to consider during a CSS review.

Live notes of Responsive Day Out

Live notes of Responsive Day Out by Orde Saunders

Responsive day out 3: the final breakpoint

A great overview of Responsive Day Out by Hidde de Vries.

A complete guide to SVG fallbacks

A pretty extensive guide to SVG fallbacks. For SVGs in HTML, there are so many choices. This explains the options really well.

Don't forget about flex-shrink by Noah Blon

This is a great use of flexbox.

Indie Web Camp

Indie Web Camp Brighton is happening again. It will be on the weekend of July 11th and 12th (coinciding with the big US Indie Web Camp in Portland at the same time) and it will once again be at 68 Middle Street.

I'm looking forward to this!

Inventing on Principle by Bret Victor

This is a couple of years old, but it's still awesome. Bret Victor demonstrates the tools he's created based on his principle that creators need an immediate connection to what they create. I highly recommend watching it.

Practical ARIA examples

This awesome list by @heydonworks is all about enhancing accessibility using ARIA. The examples are very practical and relevant to a lot of my work. Example 1 is particularly relevant to my recent investigation into the :checked pseudo class.

Flexbox in 5

This takes you through a series of steps to create flexbox layouts. I like the explanations that go with each step. A nice tool for learning the basics.