Rodney Lab Newsletter — May 2023Rodney Lab Newsletter — May 2023
🛶 Pick of the Month — Capsize #
Capsize is typography tooling designed to give you more control when laying out text. It is needed because, for different fonts, the height of characters and gap above and below them is not easy to guess. Capsize uses precise metrics to help you place text exactly where you want it.
It turns out that those metrics are also helpful for reducing layout shift
on font swap. The latest version of Capsize has a createFontStack function
precisely for this. The font swap technique, on one hand, is marvellous for
improving user experience, increasing apparent page load speed. On the other
hand, it can be accompanied by a distracting layout shift as the web font is
substituted in. Capsize generates modern CSS overrides, to minimize or
eliminate this shift.
See recent posts on Capsize to learn more:
There is also a
fantastic tweet thread demonstrating Capsize createFontStack
by Michael Taranto, Capsize’s creator.
🧑🏽💻 Follower Feedback — Deno Fresh #
I have been getting some great feedback on Deno Fresh posts. It is incredible that there is so much framework choice at the moment. While Astro and SvelteKit, for example, are feature packed to help you hit the ground running on larger projects, Deno Fresh is quite ergonomic.
Since Fresh leans heavily on Web Standards, there is not much to learn. You create markup in Preact, and it generates fast sites with partial hydration. My favourite fresh feature, though, is instant builds via Deno Deploy; fantastic for optimization. See recent Deno content to learn more.
📢 Fun Finds #
- Resources — What’s New in CSS and UI: what I most look forward to as I scroll Twitter at the start of a day are the updates from the likes of Adam Argyle, Bramus, Una Kraets and Jhey Thompkins. These posts showcasing new web capabilities inspire me to try the latest CSS features. The recent rate of innovation is so fast that I easily forget the previous feature as I learn about each new one. Thankfully, Una, Bramus and Adam have put together this collection of 20 recent CSS greatest hits to help me out!
- Optimization — Web Performance Snippets: it seems no matter how much you optimize a site, you can always revisit next month and find performance could do with a tweak! Try this collection of optimization snippets when you find yourself struggling to satisfy the recommendations offered by automated tooling! It covers a broad range of areas from Core Web Vitals and Largest Contentful Paint to Time to First Byte and finding render blocking resources.
- Levelling Up — Learn Passkeys: passkeys use the new Web Authentication (WebAuthn) standard for secure login without passwords. Although Apple and Google have played a leading role in their development, Firefox support and Bitwarden passkey management are on the way. Eiji Kitamura, a Google Developer Advocate, gets you up to speed in this video.
👋🏽 Until next time! #
Hope there was something valuable in here for you. As always, reach out with feedback. I created an Astro tutorial series for CloudCannon this month, here is a link in case you missed it: