TanStack Hotkeys near me

Issue #464.February 20, 2026.2 Minute read.
Bytes

Today’s issue: What two Pikachus can teach us about advanced web styling, Wasm comes to Hermes, and trying to figure out if Larry Ellison owns TikTok’s React libraries now.

Welcome to #464.


Eyeballs logo

The Main Thing

Sam Altman and Dario standing next to each other with hands raised

Cmd and Ctrl being forced to work interchangeably

TanStack Hotkeys near me

Abraham Maslow famously stated that, “When you’re a TanStack hammer, every part of web dev looks like a nail that needs type-safety and a smoother developer experience.”

So we shouldn’t have been surprised last week when Kevin Van Cott & friends released TanStack Hotkeys (alpha), which provides a complete toolkit for handling keyboard shortcuts in your applications.

Hotkeys might seem like unlikely territory for TanStack’s 15th library, but it comes with enough small gotchas that can add up to a lot of annoying complexity when dealing with multiple keyboard layouts, operating systems, custom shortcuts, and more.

And it turns out that applying the TanStack approach to these problems should save a lot of time and headaches. Here’s how:

  • Type safety – You define keyboard shortcuts with a fully type-safe Hotkey string type that validates key combinations at the type level and gives you autocomplete for valid modifiers like Alt+S and Shift+D.

  • Cross platform compatibility – The Mod modifier automatically maps to Cmd on macOS and Ctrl on Windows/Linux, so your shortcuts work everywhere without platform checks.

  • Better defaults – Including automatic preventDefault and stopPropagation, smartly ignoring shortcuts when input fields are focused, and automatic cleanup on unmount. Scoping hotkeys to refs or elements is also easy, so you can define context-aware keyboard shortcuts without unexpected side-effects.

  • Sequences and recording – Lets you build multi-step keyboard sequences like Vim-style commands or cheat codes with configurable timeouts. And you can let users record and customize their own shortcuts with a built-in hotkey recorder.

Bottom Line: If type safety and sensible DX features can indeed fix anything, maybe Tanner can ship a library that’ll help those of us with IBS enjoy Crunchwrap Supremes like we’re 15 again 🫠.


Sentry logo

Our Friends
(With Benefits)

Claymation chicken looking scared

Manual debugging is my passion

Free Workshop: Debugging with Sentry’s Seer

Everyone knows manual debugging is the worst. That’s why Sentry is hosting a workshop series diving deep on how to set up their Seer agent and use it throughout your workflow.

The four sessions will cover:

  • Feb 24 – Full end-to-end demo of debugging with Seer
  • Mar 3 – Root cause and fix production bugs with Seer
  • Mar 10 – Find bugs before they ship with Seer code review
  • Mar 17 – Debug while you build with Seer via MCP

RSVP here to claim your spot.


Spot the Bug logo

Spot the Bug

Sponsored by Datadog

Their Front-end Developer Kit comes with multiple free resources to help you improve your front-end monitoring and testing strategies.

function calculateTotalCost(mealCost, taxRate = 0.1, tip = 0) {
  arguments[1] = 0.15;
  arguments[2] = arguments[2] + 5;

  let totalCost = mealCost + mealCost * taxRate + tip;
  return totalCost;
}

let total = calculateTotalCost(50, undefined, 10);
console.log(total);

Cool Bits logo

Cool Bits

  1. Christoph Nakazawa wrote about how to get the fastest front-end tooling for humans and AI. Because only the blazingest will survive the AI revolution.

  2. Trigger.dev lets you build resilient AI agents and workflows that scale automatically without hitting a timeout. Debug faster in Cursor and Claude using the custom MCP server and deep observability built directly into the Trigger.dev platform. Deploy your first task today. [sponsored]

  3. TikTok just released the first stable, open-source version of Sparkling, which provides the infrastructure to easily spin up a new Lynx app from scratch. I don’t think Larry Ellison technically owns this, but you might wanna turn on your VPN just in case.

  4. Right on cue, Lynx 3.6 comes with Lynx for AI, enhanced CSS capabilities, and hooks for ReactLynx because time is a flat circle.

  5. Agent Conf is happening in Warsaw, Poland this September and is being hosted by Callstack (same team behind React Universe Conf). Speakers like Kent C Dodds and Kitze will be teaching how to design and orchestrate agents in modern software dev. And they built a very cool landing page for it. [sponsored]

  6. Tanstack Start just added import protection, which prevents server-only code from leaking into client bundles and vice versa.

  7. Eric Bailey wrote about how design systems can’t automate away all of your a11y considerations. Unfortunately.

  8. Chris Lattner wrote a deep dive on what the Claude C Compiler reveals about the future of software, and how he managed to learn so much about compilers while being the most hated college basketball players of the 90s.

  9. Convex engineers made a YouTube video breaking down exactly what happens when you push to Convex, from a technical perspective. [sponsored]

  10. Tzvetan Mikov from the React Native team wrote about how Wasm has come to Hermes and why that’s a very big deal.

  11. Mihir Koshti wrote a detailed breakdown of Radix UI vs Base UI that had better conform to all of my previously held biases, or I will be very upset.

  12. Matthew Verive compared two official images of Pikachu to demonstrate how color spaces mess with design. Personally, I haven’t learned this much from two Pikachus since I bawled my eyes out during the climactic clone fight scene in Pokémon: The First Movie.


Spot the Bug logo

Spot the Bug: Solution

Sponsored by Datadog

The answer is 65. MDN explains “Non-strict functions that are passed rest, default, or destructured parameters will not sync new values assigned to parameters in the function body with the arguments object.”

If we remove the default parameters we get a different answer:

function calculateTotalCost(mealCost, taxRate, tip) {
  arguments[1] = 0.15;
  arguments[2] = arguments[2] + 5;

  let totalCost = mealCost + mealCost * taxRate + tip;
  return totalCost;
}

let total = calculateTotalCost(50, undefined, 10);
console.log(total);

The answer with no default params is 72.5 (50 + 7.5 + 15).