Now I have your attention with my Upworthy-worthy clickbait title, I want to tell you a little story.

In October of last year, I wanted to get serious about contributing more to the web design and development community. I had spent the previous couple of years reading every blog post, watching every video tutorial, and picking through every repo I could get my hands on. I had benefitted from the countless hours others had spent publishing their work and their learnings, and I decided it was time that I do something to give back.

Blogging was a tedious activity for me, and try as I might, I've never been able to consistently do it. I'd previously tried making a couple of little GitHub repos with some animations in them, but they weren't getting much traffic and I felt like I was getting very little feedback on the work.

After seeing tweets from Chris Coyier about CodePen in my Twitter feed, I decided to try and create a first demo. I had been trying to wrap my head around CSS animations and translate3D so I made some little CSS butterflies.

After saving my pen, I went back to the homepage a short time later to find my butterflies there! I was pretty confused until I figured out that my pen had been 'picked' for the home page. When I realised that thousands of people were seeing my pen before I was finished with it I was horrified (I hate the idea of people seeing unfinished work). I upgraded to Pro straight away and never looked back.

2014 has been an incredible year for me professionally, and I am not exaggerating when I say it has all been made possible in some part due to publishing on CodePen. No doubt, a lot of the opportunities I have been handed would have something to do with the amount of buzz that our work at Active Theory has generated this year, but, on a personal level - CodePen has changed my life.

Some of the things that have happened because of the code I shared on CodePen:

  • Despite having no conference speaking gigs on my resume, I was asked by Dan Denney to speak at Front End Design Conference. He requested that I speak specifically because he liked my pens.
  • I was asked to contribute to Codrops, which is a blog that I have loved and admired since I first started in web. When Manoela Ilic contacted me about me contributing she told me she found out about my work through my pens.
  • I was asked to be a guest on my favourite podcast, Shoptalk and chat with two of my web heroes1.
  • I've had HUNDREDS emails/messages asking me to interview for jobs (of which I assume about 30% are good job offers, can't be sure though because I usually pay little to no attention to them).
  • My Twitter follower count has grown from around 350 to 1700+2
  • I've made a whole bunch of new friends who love web work as much as I do, online and IRL.
  • I've had a real opportunity to give back. Whether it is just answering the emails young people send me asking how they can get in to motion design on the web, or answering people's questions on Twitter, or just providing a CodePen example for people to look at. CodePen has given me a real audience and a real opportunity to contribute, which is the whole reason I started this in the first place.

Yeah, it was me who did the work to come up with the pens that people liked. But CodePen as a product gave me the tools to publish them. CodePen as a community is a space where I felt safe to put myself and my experimentation out there. I will be forever grateful to Tim, Chris & Alex for creating this community, and amplifying my voice.

1 - I mean it's one of the guys who made this website! Like OMG! I don't think anyone can really appreciate the significance of this on the level I do. 2 - I know all of these followers are probably not coming straight from CodePen, but more coming from things the previously mentioned things that happened because of CodePen, like a snowball effect.


Aside: How to get more online exposure through CodePen

I've never been someone who wants to be more 'known' online just for the sake of it. But I can't deny the more exposure you receive, the more excellent opportunities come your way. These are some things I have discovered to get you more views on CodePen.

  1. Get a PRO account, and limit published pens to your best work only. In my opinion, this is the most important part. Especially if you are looking for a job. Potential employers might look through your recent feed and if they see a bunch of broken/unfinished stuff they could judge you on that. Also, people are more likely to follow you on CodePen if your published work is limited to quality pens. I'm not sure if this is true, but I also think if you are PRO you have a better chance of getting your pens picked for the front page. The guys have to filter through a LOT of recent work to pick the best pens, it makes sense that yours would stand out with a shiny PRO badge on it, does it not?
  2. Try and make your pens using techniques or technology that is totally 'hot right now'. I feel they tend to be more popular because people are looking for examples of technology that is new on the scene. You can't go wrong with SVG at the moment. I've made a couple of pens that used brand new libraries when they just came out and they were very popular because there was a lot of buzz around the libraries at the time.
  3. Be unique. We've all seen how a hamburger icon can be animated in to an X, like a hundred times, in every possible way. Try and make a pen that solves a real design problem that people are struggling with, or do something you haven't really seen anywhere else. The more unique pens tend to get more views and attention.
  4. Participate in the community, and for the love of all that is good, be a nice person! If you comment and like people's pens, they may check out your profile and like yours back. This is like, the basics of social engineering. Also, I think feedback in the spirit of helping others is a great thing (as many of us are here to learn) but hold back the urge to *well actually* everything you see on CodePen. Sometimes it is just better to focus on what you like rather than what needs improvement.


So that was kind of a long story. Bye for now!

Disclaimer: I pay for my CodePen account with my own money. Although this reads like some sort of paid weight loss editorial in a magazine, I came up with this post on my own. I'm just CodePens no. 1 fan 4eva and in the spirit of thanksgiving (that is a thing you Americans are in to, right?) I wanted to thank the creators of this site. I feel emotional about it you guys. I'm going to have a lie down.


8,649 20 114