Let’s kick this issue off with Three modern CSS properties your website must have, brought to you by Mojtaba Seyedi. scroll-margin-top is an absolute must if you have a fixed header; the others are very useful, too.

Adam Argyle gets a little more in-depth with his 6 CSS snippets every front-end developer should know in 2023. All are definitely powerful, but I am most excited about scroll snap, grid piles, and logical properties…

Maybe not quite as “mandatory” as those above, but touch-action is also worth mentioning. With at least partial support in all major browsers, this is a great way to take control over how browsers deal with touch interactions. Andy Adams offers a nice write-up.

And as long as we’re listing things, why not checkout these 21 Awesome Web Features you’re not using yet? There are some really, really great ones in here, covering HTML, CSS, JS and more!

And now that we have “the basics” covered, let’s play a little in the current-to-near future! Adrian Bece offers two 2-part series, first on the Shared Element Transitions API (Part 1, Part 2), and then on the View Transitions API (Part 1, Part 2). Cannot wait to fully dig into, and play with, both of these! I love the direction in which the web is moving…

Ever needed to verify what loading priorities were used on a specific page? Me neither, but if I ever do, I sure am going to be happy that Sia Karamalegos created this Loading Priorities Scanner Bookmarklet for us!

I know I’ve been harping on this in several previous issues, but INP is in the near future and coming fast! So let’s let…

• Cliff Crocker and the good folks at SpeedCurve help us find (and fix!) INP interactions on your page,
• Rick Viscomi teach us how to analyze INP performance using RUM data, and
• Tsvetan Stoychev show us what happens when INP meets Puppeteer.
  

I have to admit, after all these years of web dev work, I am still completely flummoxed by SVGs… I could not hand-crank an SVG to save my life… If you are like me, perhaps Nanda Syahrasyad can help us all at least Understand SVG Paths… Nanda makes this all seem simple, especially starting with the “prettified” version of a path… And there are even little micro quizzes along the way, yay! ;-)

And once you’ve got your sexy new SVG all sussed out, let Nils Binder help you make sure it is responsive!

Another topic I have more-or-less stuck my head in the sand about is Web Components. They have always interested me, but just haven’t found a need for them (yet). So, let’s let Hawk Ticehurst take us through The 12 Days of Web Components!

And now that we’re web component masters, Raymond Camden shows us how to make An Image Dialog Web Component, where clicking a thumbnail opens a dialog that displays the full-size image.

And speaking of displaying images, Temani Afif shows off first a Horizontal list of stacked avatars, and then a Circular list of stacked avatars. Both quite impressive, considering the relatively limited amount of code required to make it happen!

Hopefully one of the last “year-end wrap-up” articles I read about 2023, Simon Willison gives us a nice wrap-up of Stuff we figured out about AI in 2023 He offers a succinct background/history lesson, then shares links to multiple instances we can all use to help improve productivity, and some deep thoughts about the possible future. Well worth the read.

And this is well worth the watch: Jumping back to Adam Argyle, watch him live-code a compare slider, in under 18 minutes, including the preamble and summation… Just. Wow. And so much fun to listen to… Hammer!

And finally, I try hard not to be a doomsayer when things I love are facing impending change, like when WebPageTest.org was purchased by Catchpoint; I am a big fan of hard work paying off for those that worked so hard, even though it often means that the sold product soon diminishes. So far, WebPageTest has continued as an integral performance testing tool. So, let’s hope the same continues as Catchpoint rolls WebPageTest into their own product lines…

Happy reading,
Atg

Top⇪