Together with  Frontend Masters logo
🚀 Frontend Focus

#​631 — February 21, 2024 | Read on the web

How To Center a Div — What was once a tricky ordeal in CSS is now much easier thanks to lots of new tools — but which one do you reach for? Flexbox, Grid, something else? Josh dives in, and shares the trade-offs between different approaches, and the strategies to use. He notes “this turned out to be way more interesting than I initially thought”. The definitive resource to conclude a long running meme in the Web design world? Let's hope!

Josh W Comeau

Tailwind CSS: Write Efficient, Utility-First CSS — Join Steve Kinney for this detailed video course exploring Tailwind CSS. You'll build real-world components like modals, forms, and page layouts — becoming proficient in creating stunning, responsive, and maintainable UI.

Frontend Masters sponsor

An Update on Apps Distributed in the European Union — Last week we shared news that Apple looked to be dropping support for Progressive Web Apps for users located in the EU. That news has now sadly been confirmed in a developer support document.


“It’s Official, Apple Kills Web Apps in the EU” — Here’s a response to the above news from the Open Web Advocacy group, who are also asking for feedback from developers and businesses who operate online in the EU on how this may impact things.

Open Web Advocacy

⚡️ Quick Links

📙 Tutorials, Articles & Opinion

Okay, Color Spaces — This is an excellent, fun explainer of color spaces — a worthwhile read if you’re curious about the various color changes coming to CSS.

Eric Portis

What is Utility-First CSS? — A critical view on so-called 'utility-first' CSS, highlighting skepticism towards its practicality, and noting that whilst it may seem appealing it often complicates things rather than simplifies them.

Heydon Pickering

Build Secure Apps with Clerk's Auth & User Management — Clerk is a complete suite of embeddable UIs, flexible APIs, and admin dashboards to authenticate and manage your users.

Clerk sponsor

Creating a CSS-Only DVD Screensaver AnimationNo, you’ve been staring at this for five minutes waiting for it to hit the corner Anyway, here’s a detailed look at how this classic DVD animation has been recreated, without JavaScript. All presented with dynamic examples and handy code snippets.

Javier Morales

100 Things You Can Do On Your Personal Website — Do you have a personal site? If not, maybe consider it and then go through this list. 🧡 IndieWeb

James G

Build AI-Powered Web Apps with Firebase Extensions
Umar Hansa

Why Do Reflows Negatively Affect Performance?
Lydia Hallie

🔧 Code, Tools & Resources

SVG Flag Icons — A collection of over 200 country flag icons with one click SVG code-to-clipboard.


Marquee: A Beautiful 'Marquee' Component for React — Not just for text, which is what we normally associate with the so-called ‘marquee’ effect. You can see some examples here, one of which is a vertical marquee.

Erick Hartanto

Open-Source JavaScript Form Builder for PHP — Generate dynamic JSON-driven forms using a drag-and-drop form builder UI, and effortlessly send the form data to any PHP application.

SurveyJS sponsor

Tempo: An Easier Way to Work with Dates — This is a collection of utilities for working with the native Date object. Under the hood, it mines JavaScript’s Intl.DateTimeFormat to extract complex data, giving you a simple API to format, parse, and manipulate dates. Good stuff.


WXT: Next-Gen Web Extension Framework — A framework for creating cross-browser extensions. You can target Chrome, Firefox, Edge and Safari.


restore-scroll: Restore Scroll Position of Elements on Page Navigation — This means not only the <body> element’s scroll position can be restored, but any scrollable element.

Kent C. Dodds

canvas-size 2.0: Determine Max Area, Height, Width, and Custom Dimensions of HTML Canvases — The Canvas element is broadly supported across browsers but there are differences in the size limitations, which this library can determine for you. GitHub repo.

John Hildenbiddle

🕰️ ICYMI (Older links, still worth checking out)

🐸 ...and finally

Cross My Heart — This is an impressive playable 'demake' of arcade classic Frogger (or Crossy Road, depending on your generation!) in just 256 bytes. You’ve got to get the 🖤 up the screen using your arrow keys.