The Anchor Positioning API in CSS is very powerful. This is the beginning of a series where we understand it through the perfect use-case: tooltips.
ššØššššØ is not just Potato formatted.
Typically, buttons are either pressed or they aren’t. But as long as you handle it accessibly, you can make a group of radio inputs look like a multi-state button with some CSS trickery.
A halftone is a pattern of dots that vary in size and spacing. It’s a printing technique that you normally don’t see, but blown up in size, is a cool aesthetic. This is a deep dive on how it can be done in CSS alone, starting quite simply!
I find this hard to remember and it’s come up for me a few times lately so I’m writing it down gosh darn it! The individual corner border-radius values, like border-top-right-radius (which is hard enough to remember on its own) have logical property versions, meaning that should the flow of the document change, the border […]
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.
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.
Little boosts of front-end development 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.
