Bits and bytes of code

A common challenge in React is managing state for components that have animations. For example, closing a modal after it transitions closed, resetting the state of a copy button after the animation finishes, or removing temporary height/width from expandable containers during open/close transitions.

You've likely encountered the common issue of calculating a border radius value when you have an element with a border radius within a parent element which also has a border radius. If you use the same value for both, the inner radius will look wrong.

If you use TypeScript, you've more than likely seen keyof typeof obj at one point or another to get a union type representing the keys of the given object. But what if we want to get a subset of the object keys, based on the values in the object?

Earlier last year, I created a tool called Flashlight which is a Rust-powered JavaScript code search tool. I recently added support for searching for JSX tags and I'd like to highlight the features of Flashlight briefly.

I recently published a new library that is an extremely minimal dependency injection library: TiDI. It has an intentionally small feature set and is designed specifically for class-based dependency injection

Taking screenshots is a common task when working on an engineering team. Sharing in-progress work, showing bugs or needed changes, or finding design inspiration from another web app. While often you just want to send a message with the screenshot, sometimes it's helpful to save them to disk for later use.

In a previous Byte, I showed the useStrictParams hook as a way to better manage React router params with better type safety and ease of use. Since then, I've made some improvements and published it to npm!

If you've ever created custom link styles to show on hover to replace the rather dull underline that is the default behavior for links, you may very well have encountered issues when links begin to wrap across multiple lines. Thankfully, CSS has a solution to this with a fairly obscure property: box-decoration-break.

ffmpeg is a fantastic tool for converting videos between various formats. I recently needed to create a GIF from a screen recording, which you can do with ffmpeg, but the command isn't the easiest to remember.

The useParams and useSearchParams hooks from React Router are critical when working with dynamic routes, however they have some sharp edges when used with TypeScript. With a small amount of additional code, we can make it much easier to work with params.