Stephanie Eckles showcases her responsive image gallery, using grid, object-fit, aspect-ratio, 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”.
And with all this great new CSS3 at our fingertips, Aleksandr Hovhannisyan shows us all how to start writing better CSS!
Then you can put all your newly-polished CSS skills to the test with SpeedRun!
Back to CSS Tricks really quickly, but this time for Louis Lazaris to give us 60 of the hottest frontend tools of 2021. 60! :-)
A couple standouts for me (from the top 10, at least) are:
- UIsual: Free Landing Page Layout Templates
- CSS Layout Generator – Configurable Flexbox/Grid Layout Generator
Louis Hoebregts shows us how to Animate Anything Along an SVG Path. Pretty magical stuff!
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!
And if you are considering removing jQuery, that would also require removing jQuery-dependent plugins, so checkout Craig Buckler‘s guide to Form Validation Using JavaScript’s Constraint Validation API.
And in case you need to replace a few other dependencies, The Vanilla JavaScript Repository is here for you!
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.
Zach Leatherman examines, and improves upon, adding favicons to external site links.
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
Happy reading,
Atg