useTabOutline: a React hook for better UX and a11y

I wrote this hook to work around the problem of leaving the outline CSS style enabled, where a toggle button’s outline will “stick” on click— e.g. a hamburger menu button.

Eek! The outline stays after I toggle the menu. But if I disable the outline, the button is much less universally accessible for people who rely on the keyboard to navigate. What to do?

Many posts have been written explaining that the most accessibility (“a11y”)…

If you’re using media queries in Javascript to do responsive layout, you might be adding listeners to mediaQueryList, a pretty common technique:

const mediaQueryList = window.matchMedia(mediaQuery);
const propagate = (e: MediaQueryListEvent) => {
return e.matches ? handler(true) : handler(false);
mediaQueryList.addEventListener('change', propagate);

However, beware! We recently encountered an ugly problem…

There’s a nice Jest plugin for VS Code that adds green or red dots next to each test and even shows which lines fail with inline comments.

Unfortunately, at least at time of writing this, it’s sorely lacking the full interactive, syntax-highlighted goodness of jest --watch. Here’s a trick that makes it easy:

  1. Add a script to your package.json like:
"jest-w": "jest --watch",

2. Open the in-editor Terminal in VS Code (ctrl-`) and type yarn jest-w (or npm run jest-w).

That’s all!

jest watch running in the VS Code in-editor Terminal pane

When you run watch inside the editor, you get the added bonus that console.log shows up in the output for easy debugging. 💥

React Native’s Animated API provides a great way for developers to create performant animations for their iOS and Android apps. It unpacks some of the moving parts typically hidden inside an animation engine, such as raw Animated values that can be tweened directly or interpolated into new values, an extremely…

Moses Gunesch

Just another software engineering dad in Portland, Oregon

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store