Stephanie Eckles showcases her responsive image gallery, using
transform, supporting touch and respecting reduced motion preference.
Now just tack on one of the most long-awaited and sorely-missed features of CSS (though I remember seeing this demonstrated in Opera like… 13-14 years ago???):
CSS Scroll Snap: https://t.co/6qkWfvlnCK ~ lock the viewport to certain elements after the user finishes scrolling. Ace for advanced interactions. Also see https://t.co/Q5AiH2lPTn to learn more. h/t @argyleink @una @maxkoehler pic.twitter.com/B0G20wFiOZ
— Addy Osmani (@addyosmani) January 22, 2022
For all you WebPackers out there, is it time to switch to Vite?
And for you WordPressers out there, Chris Coyier shares several options for adding a TOC to your posts.
Chris also gives us a fantastic roundup of what’s new in CSS, since CSS3. It’s a great starting point for anyone that has been absent from the scene for a bit, or just wants to make sure they aren’t missing any “bits”.
Then you can put all your newly-polished CSS skills to the test with SpeedRun!
- UIsual: Free Landing Page Layout Templates
- CSS Layout Generator – Configurable Flexbox/Grid Layout Generator
Ben Nadel walks us through replacing jQuery with Umbrella JS. Ben considered just Vanilla JS, but was held back by the same concern I expressed in my Replacing jQuery with Vanilla ES6 article: the jQuery API is really convenient!
Shimin Zhang demonstrates how to Measure web performance with Navigation Timing API. Way to start an article off with a bang, what a lovely bunch of useful data you can get with tese two simple JS line:
const [entry] = performance.getEntriesByType("navigation"); console.table(entry.toJSON());
For anyone looking to get started playing with Eleventy, Raymond Camden writes a beginner’s guide to building a blog using Eleventy.
And finally, although this post is already chock-full of CSS, I will leave you with three very clever and innovative demonstrations:
- Parallax Powered by CSS Custom Properties, by Jhey Tompkins
- 3D CSS Flippy Snaps with React && GreenSock, also by Jhey
- A Serene CSS Dappled Light Effect, by Preethi Sam