Native CSS Masonry Layout In CSS Grid — There is now a specification for native CSS masonry-style layouts (think similar to how Pinterest lays things out), as part of the 'Grid Layout' spec. In this article, Rachel Andrew explains how it works with the help of a couple of demos you can try out in Firefox Nightly.

Smashing Magazine

Chasing the Pixel-Perfect Dream — This term isn’t anywhere near as ubiquitous as it once was, but for times where design duplication is demanded, Josh asks how we can now go about it, how realistic such a request is, and shares some tricks to help us “scooch a bit closer to pixel-perfection”.

Joshua Comeau

Webinar: Transforming Your Application's Analytics in 30 Minutes — Watch this webinar to learn how using a well-architected analytics development environment, with modern capabilities such as data and visual authoring, can fully transform an application in just 30 minutes.

Logi Analytics sponsor

Comparing Various Ways to Hide Things in CSS — There are many ways to ‘hide’ things in CSS, and each come their own pros and cons. Marko Ilic reviews each technique and caps things off with a summary to help you decide which to use and when.

CSS-Tricks

In Defense of Tables and Floats in Modern Day Development — If you find yourself considering tables or floats the author makes the case for using them “with confidence”, so long as “the situation aligns with their intended use”.

John Macpherson

MDN Web Docs: Editorial Strategy and Community Participation — An update on MDN including some details on their move from a Wiki approach with a MySQL database for content, to a Jamstack approach that allows contributions via Git. It does not say which SSG, for those curious, but other recently released Mozilla sites have already been written in 11ty.

Chris Mills

Senior Web Developer (Node/ReactJS) - Remote — Millions get inspired and plan adventures with our apps. To help us make komoot.com the place to go to plan outdoor adventures, we’re looking for a one of a kind Web Developer to join our team.

Komoot

Find a 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

Comparing Static Site Generator Build Times — This is an interesting post, especially given that build speed can become a major concern for large sites and because various SSGs make claims of build speed part of their “pitch.” I love how the author lays out his hypotheses first and compares them with the result. I would say the results more or less aligned with expectations.

Sean C Davis

Micro Frontends Pattern Comparison — Comparing build-time integration, server-side integration, run-time integration via iframes, and run-time integration via script.

Florian Rappl

What Is This Gemini Thing Anyway, & Why Am I Excited About It? — Gemini is a network protocol for exchanging particularly lightweight hypertext documents, but no HTML is involved. Imagine if the Web were forced to be lightweight. That's what Gemini is and it's quite fun to play with.

Drew DeVault

Browsers Don’t Have Feelings—Measure What Matters to Users — Page load time isn't enough, users care about perceived performance. Track interactivity metrics and build for impact.

New Relic sponsor

Getting Audio Visualizations Working with Web Audio API — A developer works through the trickiness of cross-browser issues around the Web Audio API and comes up with a neat visualization for his audio chat system.

Dwayne Harris

If Not Single Page Apps (SPAs) Then What? — If you’re not a fan of the SPA approach, what else can you do? Turns out there are numerous modern alternatives from Stimulus to RedwoodJS.

Tom MacWright

What Can Web Designers Do With Their Unused Designs? — Four ways to repurpose your unused designs and give them new life.

Suzanne Scacca

Grab Your User's Attention with The :focus-within CSS Selector — A neat trick, using this selector to style the parent of a focused element.

Vitor Paladini

Running Front-End Experiments

LaunchDarkly sponsor

Designing User-Friendly Data Tables

Meredith Meller

Tailwind Versus BEM: The Benefits and Drawbacks of Both

Eric Bailey

Photo-Realistic Glass in the Browser — Ok, so this WebGL/Three.js demo may well bring your browser to a crawl, but I'd say the effect is well worth seeing. Related repo here.

Domenico Bruzzese

CSS Spider: The Fastest and Easiest Way to Spy (Check, Copy and Edit) CSS of Any Site — Chrome only for now, but a neat way to really quickly view the CSS of any element you hover over.

FresaLabs

Graphery SVG: A Library for SVG Creation and Management — This well-documented library is good for creating and manipulating SVG in JavaScript. Offers a simple API — that’s said to be very close to the native structure of SVG.

Graphery

Adobe XD for Visual Studio Code — The Adobe XD design system now extends into the Visual Studio world for enhanced developer collaboration.

Adobe

Meraki UI: Beautiful Tailwind CSS Components That Support RTL Languages — You don’t often see a CSS framework advertised as supporting RTL, so that’s somewhat new. Includes 43 components in all, based on Flexbox and Grid.

khatab Wedaa & Mosab Ibrahim

A HTML and CSS Coin Flip Donate Button — This neat little animation, complete with randomized flipping, has no 3D elements, just 2D elements and some clever math to give the illusion of a 3D coin.

Cooper Goeke codepen

ngx-bootstrap: Fast and Reliable Bootstrap Widgets in Angular

Valor Software