Cumulative Layout Shift (CLS) in Practice — 'Layout shift' is when page content moves about after being initially presented to a user and it's really annoying! This article is a detailed primer on the issue, looking at how to measure it, and how you can improve it, highlighting several tools to consider using. There’s also a follow-up post with measurements from real-world examples.

Nic Jansma

The Widening Responsibility for Front-End Developers — This is an extended version of Chris Coyier’s essay 'When front-end means full-stack', evolving on the points made and highlighting how, as frontend devs, “there is a whole pile of new stuff we’re starting to be expected to do”.

Chris Coyier

The 20 Best Visual Studio Code Extensions for FEDs — The best Visual Studio Code extensions help developers write faster, cleaner, and more consistent code. We asked front end developers here at Shopify what extensions, packages, and plugins they couldn’t live without.

Shopify Partners sponsor

Developing for the Semantic Web — Frederick O’Brien explains how every site that develops with the (machine-readable) semantic web in mind strengthens the “foundations of an open, transparent, decentralized internet”.

Smashing Magazine

The --var: ; Hack to Toggle Multiple Values with One Custom Property — This is a neat little trick, using a single property value to turn multiple different values on and off across multiple different properties and even across multiple CSS rules.

Lea Verou

:focus-visible Is Here — The :focus-visible pseudo-class lets you show focus styles only when they are needed, using the same heuristic that the browser uses to decide whether to show the default focus indicator. A good thing for accessibility.

Matthias Ott

Find Your Next Job Through Vettery — Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers.

Vettery

Build a Responsive Media Browser with CSS — Creating a flexible media browser and video player layout that maintains its aspect ratio at all viewports.

Andy Bell

Logical Layout Enhancements with flow-relative Shorthands — A look at new logical property shorthands and new inset properties for Chromium (Available as of Chromium 87). Lots of good example code here.

Adam Argyle & Oriol Brufau

CSS Layout - Grid vs Flexbox — I always like to think of flexbox as one dimensional, grids as two, although it’s not quite that simple.

Ivaylo Ivanov

Reducing the Site-Speed Impact of Third-Party Tags — Here’s how you can approach reducing the impact that 3rd-party tags can have on site speed.

Andy Davies

How Do Top Developers Deliver Video? - Download the 2020 Video Report

Bitmovin Inc. sponsor

Automatically Sending Webmentions from a Static Site — Webmentions provides a standardized way to notify any URL when you mention/link to it on your own site.

James Mead

How to Recreate the Ripple Effect of Material Design Buttons

Bret Cameron

Enhancing HTML 5 Lazy Loading with CSS & Minimal JavaScript

Jason Knight

optimizt: CLI Image Optimization Tool — Can compress PNG, JPEG, GIF, and SVG in both lossy and lossless formats, and create WebP from raster — all via the command line on specified files/folders.

FunBox

Tailwind Play: An Advanced Online Playground for Tailwind CSS — Lets you use all of Tailwind’s build-time features in the browser. For example you can customize tailwind.config.js and the editor offers code completion plus a live preview and shareable URLs.

Tailwind Play

Logi Composer: An Out-of-the-Box Development Platform for Analytics — See how easy it is to build, customize, and embed analytics in your application. Download a free 14-day trial here.

Logi Analytics sponsor

PageSpeed Compare: Easy Page Speed Benchmarking — Enter one or more URLs to get various metrics via a number of services (Lighthouse, PageSpeed Insights, etc) to compare performance, UX, page size, CPU usage, and more.

Sander Heilbron

Hex Colors: A Set of Free Online Color Tools — Some of the tools include a palette generator, a full-page color picker, two different gradient generators, and a color contrast checker for WCAG compliance.

protek

tsParticles 1.18.0: Particle Features for the Web — Bounce, spray, and generally throw things around visually.

Matteo Bruni

ZzFXM: A Tiny JavaScipt Music Generator — Built for ‘size-limited productions’, ZzFX lets you create a wide array of sounds with very little code. Enjoy some examples. Even more impressively there’s a tracker system for creating songs for it.

Keith Clark and Frank Force