Today’s Readings

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???):

For all you WebPackers out there, is it time to switch to Vite?

And for you WordPressers out there, 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, 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 to give us 60 of the hottest frontend tools of 2021. 60! :-)
A couple standouts for me (from the top 10, at least) are:

shows us how to Animate Anything Along an SVG Path. Pretty magical stuff!

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 ‘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!

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, writes a beginner’s guide to building a blog using Eleventy.

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:

  1. Parallax Powered by CSS Custom Properties, by
  2. 3D CSS Flippy Snaps with React && GreenSock, also by Jhey
  3. A Serene CSS Dappled Light Effect, by

Happy reading,
Atg

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.