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.
Bits and bytes of code
Bytes is my collection of short-form posts, tips, and things I learn as I build software.
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.
When creating a set of equal size columns in CSS for an unknown number of items, you might first reach for flexbox to solve the problem. However, there are actually quite a lot of gotchas when using flexbox, but CSS grid makes this super simple.
Ever wanted to open your browser bookmarks from the terminal? Maybe not, but if you have a lot of bookmarks and you also happen to spend a lot of time in the terminal, this can be a great way to quickly launch your bookmarks straight from the terminal.