A framework-agnostic component library, designed to be styled. It can be done.
A CSS Custom Property can be used to tweak colors darker when shown on light and lighter when shown on dark, making them pop in both cases.
TanStack Query, or react-query, simplifies client-side data fetching with features like caching, automatic re-fetching, and error handling. It integrates smoothly with TanStack Router, allowing efficient prefetching and loading states using hooks like useSuspenseQuery.
TanStack Router is one of the most exciting projects in the web development ecosystem right now, and it doesn’t get nearly enough attention. It’s a fully fledged client-side application framework that supports advanced routing, nested layouts, and hooks for loading data. Best of all, it does all of this with deep type safety. This post […]
One approach to color modes it to do it all in CSS with prefers-color-scheme media queries and/or the light-dark() function. A user toggle can be a future improvement.
Baseline now has a baseline-status web component widget that can be used anywhere to show of general browser support. This post gets into what else there is to think about there.
A single HTML `progress` element can have quite an elaborate design with custom colors, a tooltip showing the active %, and even an entrance animation.
Amelia Wattenberger asks in a wonderful blog post wondering about more human interfaces:
Can we build something richer—something that moves with us, speaks our language, and molds to our bodies?
Allen Pike “after about a decade away from regularly writing JavaScript” comes back to take a look. I think these points are all correct:
- React has evolved from a little experiment thought to boost performance, into a sprawling ecosystem thought to hinder performance.
- Platform features like ES Modules,
fetch, view transitions, andasync/awaithave made the web a nicer platform to build directly for- Serverless has gone from a wild new idea to well-understood
- Cursor is especially good at working in TypeScript, which mostly eliminates boilerplate tedium
- Modern build and packaging tools like vite, pnpm, and esbuild have made the tooling around JS nicer and much faster
- All of the above has taken universal JS – sharing code between the client and the server – from barely-possible to well-supported
The goal was to see if there was an obvious (boring, trodden) framework, and the answer is… kinda?
I can imagine being asked at an interview: What’s the difference between JavaScript engines and JavaScript runtimes? Nicholas C. Zakas says:
A JavaScript engine implements ECMAScript as defined by the ECMA-262 standard. ECMA-262 defines the core functionality of JavaScript without any affordances for input or output. A JavaScript runtime is an ECMAScript host that embeds a JavaScript engine and augments it with additional functionality for input and output, along with anything else the runtime needs. Additional functionality might include the DOM in web browsers or file system access in server-side runtimes.
So a feature like a switch statement is a core part of the standard and implemented by a JavaScript engine. But an API like querySelectorAll is a DOM-specific thing and added on by specific JavaScript runtimes.
I enjoyed this very straightforward, well-presented, useful article on how to create a keyboard shortcut hook in React from Tania Rascia. It’s part basic implementation, part designing an API pattern that feels right, part dealing with React hook eccentricities, and part dealing with edge cases. In the end, a pretty readable 86 lines of code.
Developer news, information, and advice — right to your feed reader of choice.
RSSHere's our page on guest writing. It's a win-win-win!
Frontend Masters donates to open source projects through thanks.dev and Open Collective, as well as donates to non-profits like The Last Mile, Annie Canons, and Vets Who Code.
