back button Back to blog

Dev Roundup, Apr 2024

From finding cool new themes like Oh My Posh for your shell, to learning about a handy CSS function called light-dark(), this month's roundup has something for everyone. Dive into tutorials like building interactive 3D event badges with React Three Fiber, or get insights into essential metrics with "Latency numbers every web developer should know" by Malte Ubl. And don't miss React 19 announcement, packed with new features and improvements that are sure to make waves. Let's explore what's been happening this month in the world of software development!

Noah MatsellMay 1, 2024
Copy URL

Oh My Posh

While on the hunt for a new shell theme I came across Oh My Posh. They describe themselves as a "A prompt theme engine for any shell". Based on their Themes section showcase it looks like they have lots of goodies right out of the box.

light-dark() - CSS | MDN

This seems like a great new way of creating dark and light themes:

The light-dark() CSS function enables setting two colors for a property - returning one of the two colors options by detecting if the developer has set a light or dark color scheme or the user has requested light or dark color theme - without needing to encase the theme colors within a prefers-color-scheme media feature query.

It doesn't have full browser support yet, but still a very exciting new feature!

Building an interactive 3D event badge with React Three Fiber

This detailed tutorial dives into the inspiration, tech stack, and code behind this animation used on the Vercel Ship 2024 site.

Shoutout to Paul Henschel for this, who shares lots of interesting 3d related work on Twitter as 0xca0a.

Latency numbers every frontend developer should know

Web page load times and responsiveness are crucial for users on the web. This article by Malte Ubl compiles some of the most relevant frontend metrics into an easy to reference table.

React 19 Beta

This release is packed with too many exciting new features and improvements to list here. A few that caught my eye:

Actions and related actions related hooks

In React 19, we’re adding support for using async functions in transitions to handle pending states, errors, forms, and optimistic updates automatically.

The use API is a new React API that lets you read the value of a resource like a Promise or context.

Call use in your component to read the value of a resource like a Promise or context. Unlike React Hooks, use can be called within loops and conditional statements like if. Like React Hooks, the function that calls use must be a Component or Hook.

As with all major releases, I'm inclined to jump straight to the breaking changes and deprecations section. There are quite a few, so this section is worth a look before upgrading.

Mix Blend Modes | Epic Web Dev

This tutorial is a beautiful demonstration of the power of mix-blend modes in CSS. It's a follow-up on an initial tutorial demonstrating the power of background-clip. The result is a stunning text over image effect!

A few tweets 🐦

Super useful for new Typescript projects!

Another reminder to just use the platform™️

Like this post?

Sign up and get notified when new posts are published!