Co-mmu-de-nity-pen

CodePen is awesome. Can we all just say that together really quick?

CodePen...is...awesome.

Great job on the harmony. CodePen, in addition to being the best place to draft front end code, consists of some of the most talented and unique front-enders on or off the market and some of the nicest people you will ever meet. This post is about why that’s valuable to the rest of us.

Casual Encounters

It was a brisk Chicago March in the Year of our Lord two thousand and fourteen. I was amidst various contract work, living off passable income, and learning how little I knew. I opened Google and typed something like, “Site to store code snippets that doesn’t look like it’s missing a stylesheet.”. I clicked on codepen.io and thought to myself, “Woah, I didn’t know .io is a thing now.” I was thankful to find a better-looking place to store my snippets. It was love at first misunderstanding. I had not yet discovered what makes CodePen much more than a place to put code.

My first pen was, admittedly, a brilliantly progressive and unique masterpiece of an idea—a hamburger menu icon. In case that link is broken, I'm sure my pen will be easy to find here: codepen.io/search?q=hamburger.

I don’t think I discovered the homepage until weeks after creating my account. It didn’t take long after that to realize that CodePen was not just a place to put my garbage—it was a place to learn things, see things, and show things.

And lo! It came to pass that I, weary traveler, had not simply arrived at the tool for which I had been searching, rather thrust by fate!—unwittingly at your front door, my comrades. You. You whose destiny has been made inextricably bound to my own by the elixir of one glistening and radiant hamburger menu icon—an icon that refuses to animate into an x on toggle with the same vigor with which we refuse to depart from each other’s protection in this vast land of opportunity and sometimes ambiguous CodePen Creative Challenges.

#Frenz

A lot of us work from home or find it hard to live outside of work. The life of a dev isn’t always ping-pong and standing desks. Most of the time it is sitting on a chair til your back hurts, talking to people through a computer, and not leaving your apartment for three days. Yeah, we gotta fix that, but that doesn’t change the fact that for some of us, it’s all we got right now.

What CodePen gives us is an opportunity to have the comradery found in shared experience that not all of us would have otherwise. CodePen is like a “Mothers who breastfeed in public” forum for front end devs—we are all doing something that a lot of people don’t understand and we have a place where we can encourage, and be encouraged by, like-minded individuals as we go through the ups and downs of learning something new together.


When I signed up for CodePen, I had approximately two people in my life that knew what a char entity was. One was a superbly talented Serbian mentor named Sasha, the other one was an American astrophysicist-I-mean-programmer named Nate.

Now, I regularly communicate with people from all over the globe via Twitter and CodePen comments. These are people that I would not have known existed if CodePen’s community wasn’t so strong. I think it will be some time before Chris, Tim, and Alex announce CodePen-mingle, but you can definitely make lasting connections here. If you have been able to, don’t take that for granted. If you haven’t, join us.

Feedback

The CodePen community gives you feedback you can receive for free about your techniques and ideas. The StackOverflow community can help you find a specific solution for a problem, but the CodePen community can help you make your good ideas better. Take advantage of it.

With that comes responsibility. You are not just responsible for how cool your shit looks. You are responsible for how you help others and how you make them feel. The more you invest into the community, the more it invests back. The more honest you are about where you lack knowledge, the more we all breathe easy because “Whew! Ok, you aren’t perfect either.”

Observation

There is a ton to observe across CodePen. At the time of this post, there were 4,178,043 unique pens. See how much that’s changed in the time it took you to read this. You can learn so much just from looking at other people’s code. One thing I learned fairly quickly is that nobody is good at everything. The other thing I learned is that things I once thought were impossible for me to comprehend can fit inside 50 lines of someone else’s Javascript in a way that I can understand. That is a powerful resource. It is free. Use it.

The past 1.4 years of my life on CodePen have translated to four major additions to my skillset:

  • Learning Sass
  • Understanding raw SVG
  • Doubling my CSS skills
  • Quadrupling my vanilla Javascript skills

That is tied directly to the combination of community and toolsets in CodePen. It is undeniably the best thing that has happened so far for my career.

So go, look at other people’s pens, follow them, read their blogs, tweet, give advice, and ask for advice. We all love each other. Welcome to the party.


Bonus: According to my research as the resident CP Scholar, @catalinred’s pen is the first ever hamburger-related thing on CodePen and is from 2012.


I am Jake Albaugh and am going to write this bio in first person. These days, I write on CodePen because I care more about it and you than I do about my personal site. Read more articles via my CodePen blog page. View my work on my CodePen profile. Or if you’re a hip millennial, “get at me” on my twitter @jake_albaugh.

2,528 11 36