Top picks — 2022 October

Published: 2022.10.31 · 3 minutes read

Delightful UI Animations With Shared Element Transitions API (Part 1) #

Complicated transitions between two UI states are tough, and we often pull hefty third-party libraries to our projects to achieve it. However, this thing is about to change, thanks to Shared Element Transitions API. Adrian Bece published this article in Smashing Magazine that explains the complexity of the problem and shows how we can solve it using multiple practical examples (to-do list, image gallery, carousel and shop cart animation). It is almost hard to believe that these API is real — possibilities are endless, and the functionality is surprisingly easy to use.

Introducing OG Image Generation: Fast, dynamic social card images at the Edge #

Custom open graph images can boost the engagement of your article by up to 40%. So it is worth paying a little attention to this and crafting a nice picture for the posts we spend a lot of energy on. This solution by the Vercel team looks very solid to me. I love how they made the full deployment of a tool like this to your own Vercel account with a single click. If you are curious about more in-depth technical details about the design process, look at the series of tweets by one of the authors, Shu Ding.

Style Queries #

Container queries barely landed in almost all browsers (at the time of writing this article, we are still waiting for Firefox support), so it is time for another type of CSS query. This post by Una is a top introduction to Style Container Queries. What’s most exciting about it is that you can combine container and style queries, which opens new possibilities for CSS. It is an excellent time to be a CSS developer!

Scroll-Linked Animations with ScrollTimeline and ViewTimeline | HTTP 203 #

Jake Archibald and Bramus Van Damme from the Google team recorded this episode of HTTP 203 about the scroll-linked animations. Be aware that this is still an experimental feature, and you can play around with it only by using CSS/JS polyfill. Good one, dudes!

Introducing Turbopack: Rust-based successor to Webpack #

Another addition to the turbo family of products by Vercel. After a good adoption of Turborepo that revolutionized how we work with monorepos, time to replace the most popular underlying technology of most JS projects nowadays — Webpack. Turbopack is written in Rust and offers up to 700 faster performance than Webpack. You can start using it now with Next.js 13. However, keep in mind that Turbopack is still in the alpha stage.

Getting started with Mastodon #

We have to deal with two hot dramas now — Kayne West and his rapid journey to bankruptcy and Eleon Mast and his latest acquisition — Twitter. I don’t care about Kayne apart from his first two albums released ages ago. Twitter thingy is a bit more interesting to me. For many years, Twitter was where the Web Developers’ community met, exchanging knowledge and resources. Things change tho, and Mastodon is an obvious alternative to many. Dr Axel Rauschmayer published this handy guide about this platform. An excellent read for everyone who is confused about Mastodon jargon.

Leave a comment

Save my data for the next time I comment