There’s been a lot of buzz around CSS Custom Properties (more commonly known as “CSS variables”) in the front-end world these days. If you were like me, you might have initially turned a deaf ear to all the hoopla. We already have preprocessor variables, so what makes CSS variables so amazing?

When I was TA-ing a Responsive Web Design class for Girl Develop It several weeks ago, a great question was raised as to how to keep video embeds from losing their aspect ratio responsively. So I thought I’d do a quick post on how to maintain embed aspect ratios in a responsive site. And maybe I could even brush some dust off the accepted solution to this problem, especially now that we have CSS Grid ✨.

Recently, I made this cute lil CodePen buddy in an attempt to learn more about creating draggable UI elements with vanilla JS instead of relying on a JS library to do it for me. Basically, you can drag him all around his container, but he hates getting bumped against the sides. If you do it more than five times, he even faints.

Masonry layouts have been around a long time. You’ll most likely recognize its use on Pinterest. In fact, Pinterest so popularized the use of this layout that it’s also known as the “Pinterest style layout”.

But even after being around for a while, they’re still one of the most effective ways of laying out a gallery, a portfolio, a dashboard, or any grouping of times. Masonry, at its core, is a grid-based layout with rows containing items of variable heights. However, as these dynamically sized items wrap and stack on top of each other, they leave no unnecessary gap between the items.