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.
Bits and bytes of code
Bytes is my collection of short-form posts, tips, and things I learn as I build software.
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.
When building complex animations, it can sometimes be difficult to fine tune animations, especially if they complete very quickly. Adjusting the duration works, but that becomes a pain when you start building multi-phase animations or when your animation includes several different sets of keyframes.
From time to time, it's helpful to send a coworker the GitHub commit URL for the latest commit in a repository. While you can navigate to GitHub, find the commit links, and manually copy it, using a custom CLI command makes this super easy!
When making a favicon for a website, it's pretty common to convert a PNG to an ICO file. There are countless online converters, but they all have gotchas, rate limits, and it's just hard to find the right one to do the job for you. With a very simple CLI command, we can do it ourselves!
In a previous byte, I discussed how the Arc browser allows a great deal of configuration for keyboard shortcuts. Another thing that I love about Arc is something you get right out of the box: the tab switcher.
I've you've ever implemented dark mode on a website, you probably have experienced that painful moment when you realize that your lovely dark themed site has an ugly white scrollbar. Thankfully, this is fixed very simply using color-scheme.