One of my favorite tools online is Codepen; however, one of my least favorite things about Codepen is that I never had a way to easily share my pens with people. This page is simply a collection of pens that I have created or forked and edited to enhance. I have also used Codepen to quickly mock up interaction or functionality to share with clients, user experience and interface designers, and other developers.

Accessibility Recommendations to Another Developer

Recently, another developer that I work with was asking for some accessibility recommendations for a form that he was working on. In his pen, he had added labels for the select elements and positioned them off screen, which was great. My recommendations to him were to:

  • Add a focus state to the select element (achieved by removing outline: none; and by using an empty div as a sibling of the select that gets a darker border when in focus)
  • Remove outline: none; from the quantity input element to the right
  • Darken the borders of focused elements more than the design had suggested

Product Variant Selector

For a recent project, we had to create custom accessible form elements to select product variants such as colors or flavors. I quickly mocked up two different ways to do it, since a flavor selector would probably use images instead of simply colors.

The Nic Cage Product Grid

Every developer has had to build a product grid at some point. Recently, I was working with a client and explaining to them that we could use images that were different aspect ratios and the grid could still line up. Rather than just tell them we could do it, I showed them by quickly building a basic product grid featuring everybody's favorite documentary film star, Nic Cage.

Javascript, Em Based Media Queries, and Default Font-Sizes

On a recent project with a large focus on accessibility, Ashton Harris and I had realized the benefits of using em based media queries and how we could give users on small screens with large font sizes a better user experience. Where we began to fall short was when we realized that our javascript wasn't always respecting the user's preference. Ashton summed up the problem quite well in a blog post, but I created this pen to be able to rapidly demo the problem and push for it to be implemented on my projects.

Ems and Rems

One day, while trying to explain the difference between ems and rems to my client, I decided that the best way to fully explain it was with a pen. Rather quickly, this became a topic of discussion in our office due to some communications issues between a group of off-shore developers and our design team. I gave a presentation to our design team featuring this pen and additionally helped them understand how they could talk about font sizes, leading, kerning, and tracking with developers and how to speak to these terms using their corresponding CSS properties.