Full-Bleed Layout Using CSS Grid — Every era of Web design has its equivalent of the ‘holy grail layout’ and Josh looks at a modern readable and responsive way to lay out content while still offering full edge-to-edge for images, break out boxes, etc. This then provoked an equally useful response post about getting the same effect with simpler CSS.

Josh W Comeau

Bringing the Browser DevTools to VS Code — Microsoft has released a Edge Tools for VS Code extension which takes the usual DevTools directly into the popular editor (including the Network pane).

Chris Heilmann (Microsoft)

Monitor Frontend Performance With User-Centric Metrics — Page load time isn't enough to guarantee you're providing a solid user experience; your users care about perceived performance. Learn to track interactivity metrics like `firstInteraction` so you can build for impact. Your users will thank you.

New Relic sponsor

Why Tailwind CSS? — “Why I changed my mind on Tailwind CSS, and why I now consider it the Goldilocks Styling Solution”

Shawn 'swyx' Wang

A Complete Guide to CSS Media Queries — We’ve all used them – if you want certain CSS rules to apply when certain conditions about the client’s environment are met, you turn to media queries. This is one of those useful roundups you’d turn to when you forget the syntax yet again (or, at least, I do!)

Andres Galante

Frontend Developer at X-Team (Remote) — Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more.

X-Team

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

An Honest Review of Gatsby — Gatsby is a popular React-based framework commonly associated with (but not limited to!) building static sites. Sentry have been using it for their documentation and here’s the tale of how that’s gone.. (spoiler: it’s not exactly all sunshine and roses)

David Cramer

Handling Range Requests in a Service Worker — Make sure your service worker knows what to do when a partial response is requested.

Jeff Posnick

How to Build for Modern Browsers (With Legacy Browser Support)

Shopify Partners sponsor

Bidirectional Scrolling: What’s Not to Like? — Bidirectional scrolling on sites like Netflix and Disney+ organize programs into rows of categories. This pattern seems great on the face of it but still over-complicates matters. Find out why here.

Adam Silver

The Failed Promise of Web Components — A response to Lea Verou’s article that we shared last week. The author proclaims that Web Components “are basically just failed solutions to the wrong problems”.

Carl M. Johnson

Does Web Performance Matter? It Depends. — A look at the Lighthouse scores for a variety of ‘big’ successful sites and some thoughts on whether hitting the hallowed 100 score is the be all and end all.

Aleksandr Hovhannisyan

Flexbox Froggy: A Game for Learning CSS Flexbox — We first linked this five years ago but this is still a neat introduction to flexible box layout which is now, at least, supported by basically every visual browser going.

Codepip

13 Beautiful CSS 3D Transform Perspective Examples — The folks behind the Polypane responsive development browser share 13 different single div-based 3D transformation examples, complete with copyable code.

Polypane

Test Website Security with Snyk’s Newest WebPageTest Integration — Run a website scan to check for vulnerable JavaScript libraries and missing HTTP security headers.

Snyk sponsor

SVGOMG: An SVGO-Powered Online SVG Optimization Tool — Got SVG images you want to optimize? You could download SVGO or.. you could use this online version for a more interactive experience.

Jake Archibald

Parsel: A Tiny, Permissive CSS Selector Parser — This is an ES module with a simple API that lets you parse and traverse CSS selectors, calculating specificity. Supports the full Selectors 4 syntax and no dependencies.

Lea Verou

Integrate Draw.io into VS Code — This unofficial extension integrates a popular online diagramming tool now called ‘Diagrams.net’ into VS Code.

Henning Dieterichs

Good Web Design: A Catalog of Landing Pages — A curated directory of product and service-oriented landing pages and elements that you can filter in various ways for inspiration.

Charlie and Yitong