All Posts «

A Pen for Your Thoughts

Doug Gerber August 19, 2019 Technology, Web Design & Development

Share Comment 0
The Sandbox

Just as designers have boards to frame inspiration, web developers need a place to practice solutions for abstract challenges that their designer counterparts may unknowingly, and sometimes, knowingly, create. CodePen, the online community for testing and showcasing user-created code snippets, aptly named “pens”, functions as a readily accessible code editor and open source learning environment. It also serves as an inspiration board for we humble developers.

As one of my weekly tasks, I will take a few minutes to see what’s happening around the web community. At the beginning of the year, I blogged about trends for 2019. From what I’ve observed, most developers are often sampling their newly honed skills using a new language, framework, or technology. Baked into those examples, simple and elegant solutions to common design concepts associated with the average website can be extrapolated for real world use. Without further ado, here are my favorite pens, not based on popularity or any kind of super-creative merit — and there are plenty of insanely creative code snippets — but rather what I found purposeful within their specific utility.

Top Ten in CodePen
  1. Navigation animation
  2. Hamburger menu animation
  3. Minimalistic animation
  4. Responsive slider
  5. Distortion slider
  6. Loading animation
  7. Airtable animation
  8. Horizontal accordion
  9. Tab animation
  10. Interactive gallery

Bonus: Lion Pen 

0 Comments

There aren't currently any comments for this entry.

Leave a Comment