I’ve built many simple websites that contain only a handful of sub-pages. And I found that there was one particular design element that appeared on nearly every single one of them. I’m talking about the header section with a logo placed in the upper left corner and the navigation in the upper right corner. I wanted to build this component without having to use a media-query.
Recently, I was adding a video to a website. Intuitively, I started to mark up the HTML <video>‘s <source> elements with media attributes to specify the viewport sizes that each of my video source files would best serve. As I was working, I vaguely recalled discussions years ago that made me question: “wait, is media support available for video?” A quick check over at MDN confirmed that indeed it was… NOT. Support was removed from browsers and the spec despite having no HTML-based alternatives to take its place.
There are cases where a developer wants to change the name of a control on the fly so it can act as its own trigger, message container, and method of conveying the status of a process. For example: Download, downloading, download failed, try again, downloaded. This post shows how you can make one of those multi-function buttons (that also safely changes its accessible name).
Let’s make 2021… fast! An annual front-end performance checklist (available as PDF, Apple Pages, MS Word), with everything you need to know to create fast experiences on the web today, from metrics to tooling and front-end techniques. Updated since 2016.