A 'perfect' row-based image masonry

TL;DR: Check out the Codepen. Also note that after publishing, I found that there are much nicer, stable solutions that preserve perfect aspect ratio if needed (see react-photo-gallery & Justified Gallery). I was on a hunt for a special type of masonry layout for an image gallery today. It needed to fulfill the following requirements: […]

Multiline truncated text with “show more” button (with just CSS)

TL;DR: I built a CSS-only (~ish) solution for multiline truncated text with read more button. The other day, truncated text came up during a discussion in the office, and I since wondered if CSS has come far enough to be able to do truncated text right, that is, supporting the following: Multiple lines “Show more” […]

Where to start if you want to become a web developer

Starting a career as web developer can be a daunting experience. I’ve just given a Q&A to students at a Korean university, and I figured that some of my answers might make for a neat cheatsheet on where to start if you’re new to the world wide web. None of this is new, and more […]

Building a PWAMP #0: Introducing the ShadowReader

TL;DR: Try out the ShadowReader, and browse the source code. I’m happy to introduce the ShadowReader, a (fairly) production-ready, vanilla-JS implementation of the PWAMP pattern combining AMP and PWA. I’ve posted some high level details and motivation why I’ve built it on the AMP blog, but here are some highlights: The entire app (minus fonts, […]

The Illusion of Speed

Like to watch, rather than read? Watch my talk from Awwwards LA 2017. If you could take a 50% hit in real world performance and get a site that feels 50% faster, would you? For years, my colleagues and I have been working on convincing developers that faster websites are better websites. That’s not what this […]

Block formatting contexts and lists

If you’ve been reading about the latest in CSS, you might have read about flow-root. Flow root establishes a new block formatting context, but most have dismissed it as simply replacing clearfix hacks. But consider this extremely common case, where you have a few paragraphs of text, some bullet points and a floating image: See […]

Develop sites over HTTPS from static site generators (like Jekyll)

If you’re using a static site generator like Jekyll or Grow (recommended), you know that commands like jekyll serve or grow run will spin up local web servers that allow you to live develop and preview your static site. Unfortunately, these generators don’t create a secure context behind an HTTPS domain, something I need often […]

Flexbox freebie: Auto-growing list (for AMP Roadmap)

TL;DR: I did a thing with Flexbox. Here’s the standalone demo if you’re into DevTools and view:source, and the CodePen. A couple days ago I was asked to create a the a page for AMPProject.org that would display our roadmap. Which I did. It looks like this: In order to make this design fully responsive, […]

Custom pagination with Jekyll

For the recently launched Updates section on Web Fundamentals, we sorely needed pagination. The whole site on /web, including all sub sites (i.e. our Showcase, the Shows section, etc.) runs on a single instance of Jekyll, which made said task more difficult than it needed to be. If all you need is pagination for your single Jekyll […]

5 reasons for 60 fps

It’s easy to state that a higher number is better. It’s also easy to get sucked into (albeit interesting) theories and at other times non-researched half-truths when debating film projection technology and frame rate. But there are very simple, very reasonable arguments for not only high frame rate movies, but the establishment of 60 fps as standard. Here […]