Back to blogDev 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!
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
usein 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!
I just created https://t.co/xSpOBHQaCb, a tool to generate a TSConfig file for your new TypeScript project based on a few user inputs⚙️
— Blake Wilson (@sundaycode) April 27, 2024
It's inspired by @mattpocockuk's TSConfig Cheat Sheet.
Check it out!
Another reminder to just use the platform™️
CSS Tip! ✨
— jhey ▲🐻🎈 (@jh3yy) November 10, 2023
You can lean into form control state and layered backgrounds to create input status strokes 😎
input:valid { --valid: 1; }
input {
background: var(--bg) padding-box, ...,
var(--valid-bg) calc((1 - var(--valid)) * 100cqi) 0 /
100% 100% border-box;
}
The… pic.twitter.com/hUnCGpBRgu
