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