Frontend Focus

🇺🇦 #​535 — March 30, 2022 | Read on the web

Understanding Layout Algorithms — Another great article from Josh — this time going beyond focusing on individual properties, instead taking a higher-level look at CSS, how it's structured, and how to form a solid mental model for using it.

Josh W. Comeau

Chrome Version 100 Arrives (with Refreshed Logo in Tow) — 14 years after its debut, Google’s browser hits triple digits with Chrome 100. This post from Pete LePage dives into what’s new for developers, including that all important user agent string change. There's also a timeline of 100 cool wider web moments, looking at neat events from throughout Chrome's lifetime.

Jon Porter

🎨  Who here remembers the Chrome comic Google published back in 2008 explaining how their take on the browser would work?

Dominate Your Lighthouse Score in Next.js Applications — Developers take care of onsite SEO now more than ever - see how to lay the perfect foundation and keep your Lighthouse score in Next.js applications at its peak. Click here to make sure all your boxes are checked.

The Software House sponsor

Those HTML Attributes You Never Use — Describes and demonstrates some interesting HTML attributes that you may or may not have heard of and perhaps find useful enough to personally use in one of your projects.

Louis Lazaris

Mozilla’s Vision for the Evolution of the Web — Mozilla has outlined its vision of the future of the web, based on three values: openness, agency, and safety. In practice the hope is this is a web that's encrypted by default, has better accessibility and internationalization, and no tracking. You can read a summary here if you’d rather not read the full post.

“The Web is an enormous asset to humanity and Mozilla is committed to protecting it and making it better. [..] we believe that we can all work together as a community to make a Web that is truly open and accessible to all.”


⚡️ Quick bits:

📙 Tutorials, Articles & Opinion

How to Use CSS Math Functions — A solid look (with plenty of code examples) at how to use the CSS logical functions calc(), clamp(), min() and max(), which are now supported by all modern web browsers.

Alex Ivanovs

Optimizing Largest Contentful Paint — A good, detailed resource looking at some of more technical and non-obvious aspects of optimizing sites for Largest Contentful Paint (LCP) – a key metric around perceived load speed of a page.

Harry Roberts

Variable Fonts in Real Life: How to Use and Love Them — A practical look at variable fonts including their benefits, example use cases, file optimization tips, accessibility benefits, and more.

Roman Shamin & Travis Tuner

Resetting Inherited CSS with “Revert” — A real-world example of using the all:revert CSS ability. Seems to be a powerful feature, but, as explained here, one that needs to be used with a certain degree of care.

Scott Vandehey

Tired of Asking Users to Enter Passwords in Your Applications? — Check out our blog post on how you can easily integrate magic links in your React chat apps with Supabase.

Stream sponsor

A Brief Look at CSS's :has — David takes a (very) quick look at some of the use cases for the :has pseudo-class, which allows styling a parent based on a relative selector.

David Walsh

The Web as the Ultimate Tool of Resilience for the World? — Marking two years since the start of the pandemic, W3C CEO Jeff Jaffe reflects on how the web became the 'ultimate tool of resilience' for the world.

Jeff Jaffe (W3C)

'As Google Chrome 100 Arrives, We Tried Version 1.0 On Windows 11 to See How Far It's Come' — It runs but, well, barely.
Daryl Baxter

Building a 'Vaporwave' Scene with Three.js
Maxime Heckel


Senior Front-End Engineer (Remote) — We’re looking for an engineer to join the web team at Unsplash. Small team but big product. React + strict TypeScript with plenty of functional programming.

The Freedom of Freelance with the Security of Full-Time — Top developers join Toptal for a flexible schedule, more free time, and great opportunities. Apply now.

🔧 Code, Tools & Resources

Placy: A Simple Tool for Generating Image Placeholders with data: URIs — This is neat because you can customize the dimensions, background color, text, etc., then the HTML uses a data URI, so you don’t have to worry about the service going down.


Mdash: A UI Component Library Based on HTML and Web Components — Boasts a small footprint and includes 20+ components and 160 utility classes, all of which are built with web standards and compatible with any third-party framework or library.

Jordan Brennan

Project Management for Today's (And Tomorrow's) Software Team

Shortcut (formerly sponsor

ScrollMovie: A Library to Animate a Background Image as the User Scrolls — You can see it in action on the home page in all its rather bloated glory. Definitely falls under the category of ‘neat, but use rarely if ever’!

Hiroaki Nagata

Static Starter: A Boilerplate to Start Projects with an Optimized and Modern Tech Stack

Pierre Mouchan Date & Time Conversion — Enter a date and time and this tool will generate the equivalent Unix timestamp, ISO 8601, and a local human-readable format.

Richard Jedlička