Experiments in fixed aspect ratios

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

Read on

Creating a draggable element with JavaScript

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.

Read on

An exercise in CSS masonry

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.

Read on

Heyo, welcome!

First things first. I won’t lie. Writing, for me, does not come easily. I will also admit that since graduating college, I’ve avoided most opportunities to put my thoughts into comprehensible words on paper, preferring to resort to emojis in Slack or just code in Sublime.

So why am I starting this blog, you might ask?

Read on