|
|
|
|
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. Apple |
|
“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 |
|
📙 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 Animation — No, 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
|
|
Why Do Reflows Negatively Affect Performance?
|
🔧 Code, Tools & Resources |
|
|
SVG Flag Icons — A collection of over 200 country flag icons with one click SVG code-to-clipboard. Nucleo |
|
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 FormKit |
|
WXT: Next-Gen Web Extension Framework — A framework for creating cross-browser extensions. You can target Chrome, Firefox, Edge and Safari. WXT |
|
restore-scroll: Restore Scroll Position of Elements on Page Navigation — This means not only the 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 |
|
| 🐸 ...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. KilledByAPixel |