Bits and bytes of code

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.

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.

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!