google-webfonts-helper — A Hassle-Free Way to Self-Host Google Fonts

To self-host Webfonts from Google Fonts — which you should — there’s google-webfonts-helper which you can use. They offer the entire Google Fonts catalog and provide a way to easily download the fonts and accompanying CSS snippets you need. google-webfonts-helper → Via Sebastian

Accessibility in Design Systems

Good slidedeck by Benno Lœwenberg: We all are only sometimes abled. Therefore accessible solutions benefit everybody. Treating accessibility not just as an afterthought to comply with regulations, but as an essential UX factor right from the start can lead to building better products and services. This talk is about how to lay an accessible foundation …

Identify and Extract Pseudo-Element Selectors from built-in HTML Elements using DevTools

Recently Stefan Judis shared how to style the browse button of a file selector using the ::file-selector-button pseudo-element TIL – you can style the file input "browse" button using `::file-selector-button`.😲Supported in Firefox, Chromiums starting with 89 & Safari Tech preview.🔗 MDN: https://t.co/56jACY9qK1🔗 Compat data pr: https://t.co/vrFNS4LdISVideo alt: Example of a styled browse button. pic.twitter.com/3YQ0njkX0J— Stefan …

JavaScript Temporal API — A Fix for the Date API

Anyone who has worked with dates and time in JavaScript knows how broken the built-in Date is. In the near future we’ll be able to use Temporal instead, an ECMAScript feature currently at Stage-3 Nathan Sebhastian has a good overview on how it compares to Date, along with some practical examples. The new Temporal API …

Animating Text Underlines

Instead of resorting to faux underlines using injected content, Michelle Barker shares that we nowadays can animate the text-decoration-* properties to achieve similar (and better) results. This approach however won’t work in Chromium, as only Firefox/Safari support animating text-underline-offset at the moment … but thankfully a tiny amount of CSS Houdini Magic can be sprinkled …

Container Queries are Actually Coming / Say Hello To CSS Container Queries

In addition to my first look + demo at Container Queries, both Andy Bell and Ahmad Shadeed have also published posts covering them. Ahmad starts off with explaining the idea behind them, before digging into a ton of use-cases. I especially like the pagination use-case, something I hadn’t thought of yet myself. In his post, …

New in Chrome 90

Get your 90s vibe on, as Pete LePage has took the version number 90 to the next level there … BRILLIANT! 🤩 Chrome 90 is rolling out now! There’s a new value for the CSS overflow property. The Feature Policy API has been renamed to Permission Policy. And there’s a new way to implement and …

Comparing the New Generation of Build Tools

Over at CSS-Tricks Hugh Haworth has done a nice write-up on the next generation of build tools that have been popping up. A bunch of new developer tools have landed in the past year and they are biting at the heels of the tools that have dominated front-end development over the last few years, including …