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.
Bits and bytes of code
Bytes is my collection of short-form posts, tips, and things I learn as I build software.
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.
How many times have you set the same value for top, bottom, left, and right to fill an absolutely positioned element to fit it's parent element? Thankfully there is an easier way!
Keeping your Git branches clean in your local repo is very helpful to make it easy to switch between branches you are currently working on. The last thing you want is a bunch of old branches that have already been merged showing in your list of branches when running git checkout.