Bits and bytes of code

Have you ever added a scrollbar to a rounded container just to realize that the scrollbar looks ugly and square? Thankfully, the solution is pretty simple with just an extra div.

CSS has a relative new feature for building relative colors based on a source color. This allows you to make small changes to a color value without fully redefining it. One interesting use case for this syntax is changing the opacity of hex colors.

The sr-only class is a common convention for visually hiding an element while keeping it visible to screen readers. If not implemented properly though, it can cause some unexpected overflow due to absolute positioning.

Something that came up at work recently was joining buttons into a group. When joined, we wanted the buttons to have no border radius between them to achieve a nice visual aesthetic.

I was adding an expand/collapse feature to my website code blocks the other day, and I wanted to create an animation where the arrows flip vertically when you press the button.

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'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.

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.