In prep for the upcoming CWV INP, Barry Pollard and Noam Rosenthal introduce us to the LoAF (pronounced Lo-Af, so not like bread) API, which is a proposed update to the Long Tasks API, to help us understand what harms INP.
Gerardo Rodriguez provides a 1-2 punch for progressively-enhancing form validation, very thorough collection of options:
- First, HTML and CSS
- Then, Layering in JavaScript
Blessing Ene Anyebe shares her Guide to Optimizing JavaScript Files. She starts with a nice description of the possible issues, then dives into some fairly common steps (minification, compression, etc.), before diving into concepts like conditional loading, using improved code (map vs. for, etc.), and finally dancing through several tools that can help (Gulp, Babel, Webpack, etc.). At least worth a quick scroll, see if you are missing anything!
Ryosuke Niwa points out that requestIdleCallback is finally implemented in WebKit! Huzzah!! Once that formally lands, it is going to be a very green horizon for bfcache!
Ralph Mason helps us better understand object-fit and object-position. I think most of us are familiar with object-fit: cover, but are you as familiar with the other options? Coupled with object-position, you can get some really nice variation!
Am I the only one that hadn’t heard about the new @font-face syntax?
And speaking of things I did not know: Adding dir="auto" to your input and textarea elements lets the browser decide the best text direction of your content, based on the content itself.
And speaking of variable fonts and customizing things for the user (and things I did not know), Adam Argyle shares how to adapt your site’s typography to user preferences with CSS.
Una Kravets and Joey Arhar introduce us to four new CSS features for smooth entry and exit animations.
The Alt Text Hall of Fame. Everything you ever wanted to know about alt text, and more…
WordPress announced their new Interactivity API back in April 2022, and are now asking for your help to start using and testing it. They’ve even provided a handy Getting Started Guide!
We all know vertical scrolling, we’ve all seen horizontal scrolling, but what about ‘Depth scrolling’? Well, with scroll-driven animation it’s simple and fun.
Amit Sheen shows off a fun example (currently works only in Chrome 115+).
Jeremy Wagner reminds us that DOM size matters and provides suggestions for improving performance related to bloated DOM.
Tripped on quite a useful tool the other day: FontDrop allows you to drop (or upload) a font file (such as a .woff2) and get the “name” of the font (like “Gotham Book”). Really useful when file names are hashed into oblivion…
MDN just announced the MDN front-end developer curriculum. Why, you ask? Well…
We believe that by supplementing the Learn area with stronger guidance on what new front-end developers should learn about in order to be successful in the web industry, we’ll make this section of our website even more helpful. The curriculum represents a first step towards this goal.
And finally, had enough of tech stuff, but still not really? How about a big batch of tech-related documentaries?
Happy reading,
Atg