Bits and bytes of code

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.

I came across the document.designMode property recently, and at first I did not understand why you would ever need it, but today I actually used it and wanted to share my learnings with you!

Old Git branches that are already merged can very quickly clutter your local repository. This can make it more difficult to find active branches you are working on. With a simple shell script we can clean up these old branches.

If you find yourself switching branches frequently and getting frustrated with typing out long branch names, or hitting tab way too many times to get to the branch you want to switch to, I might just have a solution for you!

A common mistake when creating overflowing containers with CSS is to use overflow: scroll or it's x/y variants. This will result in scrollbars always showing, even if the content doesn't overflow. This results in "phantom scrollbars" that are useless and only take up space and distract your users.

The transition and animation shorthand properties are great to reduce the verbosity when declaring several CSS properties at the same time. However, the combination of both enforced and unenforced order for certain properties make these properties a bit challenging.