CodePen Philly Recap

Image for CodePen Philly Recap

On October 8, Intuitive Company hosted a Philly CodePen Meetup, bringing developers, designers and other creative types to our shop to hang out and talk all things CodePen with the burgeoning Philadelphia CodePen community. The event was co-sponsored by Girl Develop It’s Philly Chapter and PHLDesign.co, and we had a great time seeing some really cool demos and checking out some awesome libraries that people in and around Philadelphia are using. Conshohocken Brewery helped keep the beer a-flowing, Primo’s hoagies kept everyone fed, and ReAnimator Coffee kept the gang nice and caffeinated.

If you are not familiar with CodePen and just stumbled upon this article, CodePen is a front-end developer playground that allows users to create HTML/CSS/JS prototypes—as well as get inspiration for code or design patterns—so it’s a great resource for developers and designers. Another neat thing about it is that your work gets seen and liked, plus you get valuable feedback from the community on work that you are doing.

We at IC use CodePen a lot, and it’s proving to be a key tool to help us prototype ideas with the design team. It also allows us to explore new ideas and relay concepts quickly to the client in order to help them understand an idea more fully or push things forward. Personally I’ve been using CodePen for a couple of years now, and it gives me a place to look into new libraries and experiment with different ideas I have. It also gives me a place to mess around and have fun, without having to necessarily tie it into a project or current work. I’ve always wanted to give back to the community, and figured it’d be great to host a Meetup to get like-minded sorts to hang out and talk shop.

So one day, I approached Jes, our Managing Director, about the idea. Keep in mind, the only thing I’ve really ever organized is my kid’s birthday party (a challenge in itself), so jumping into this was new, exciting, and to be honest a little intimidating. But Jes, and ultimately the IC partners, were all on board. The next step was to reach out to the gang at CodePen. They were more than happy to work with me to get things set up—they even sent a swag bag of goodies! I set up an Nvite through CodePen and got things going. I also sent out a “Call for Entries” for some lightning talks. We wanted to get people to showcase the work they had done or seen, or to demo a library or something cool out in the wild, all using CodePen. The team at IC was great too, with Erin Eaby, our Office Manager, setting up the office and making sure everything was all locked down for the event, and Ryan Dudek, a fellow developer, helping out with getting the beer and coffee.

The Event

So for the event, the plan was to have some networking at the beginning, followed by lightning talks, a less formal show and tell, and finally, the group would sit down and code. While we stayed relatively close to the plan, we let things evolve, and we wanted the night to be pretty loose and casual. The theme for the evening was “collaboration,” and we wanted anyone who was interested in CodePen—no matter their role—to take away something from the event.

Greg from BlueCadet

Greg from BlueCadet

The first lightning talk was by Greg Sarault, a developer at Bluecadet. His theme was “prototype early, prototype often.” Essentially, Bluecadet uses CodePen as a tool to collaborate between design and development. Greg showed how they had used CodePen to prototype some interactions and animations for the work they did for Longwood Gardens. He also showed a CSS3D animation pen he had worked on, and described how he came up with the idea. You can check that pen out here.

Mike from 1TrickPony

Mike from 1 Trick Pony

Next up, lead developer at 1 Trick Pony, Mike McCarron, presented a demo of Apple’s new 3D Touch Interaction, available on the iPhone 6s. Luckily for JavaScript developers, WebKit supports 3D Touch, which determines the amount of pressure you are placing on an object when you are pressing down on it. Mike demoed an interaction where you tap on an icon, and it would increase and decrease the size of a pop-out navigation element as you press harder and softer on it. If you’re interested in checking out the demo, you can do so here (however, remember that you can only really see its effect on an iPhone 6s).

Our very own Ryan

Ryan’s sweater wins.

After that, IC’s own Ryan Dudek gave an overview of a library we use on a lot of our prototypes: dat.GUI.js. Dat.GUI allows us to create parameters, trigger functions, and create different use cases that give us a ton of flexibility when exploring different interactions or animations. Ryan walked through a case where he originally created a panel for different animations from scratch, but then imported dat.GUI, which then gave him more flexibility in creating parameters to work with the design team. You can check his pen out here. (He also wore a pretty wild Flyers sweater.)

Independent contractor Jim talks three.js

Independent contractor Jim talks three.js

Last up for the lightning talks was Jim Connor, a contractor from the Philadelphia area, who talked about and demoed one of my personal favorite libraries: three.js. Three.js is a WebGL-powered 3D library that creates amazing hardware accelerated animations. You can create particle scenes, as well as well as rich 3D environments. Jim demoed a more practical use of three.js as well: a 404 page that uses a three.js-created lion that follows your mouse as you move it around the page. You can see it here. It’s a pretty cool “surprise and delight” interaction.

We then gave away some stuff. CodePen, Girl Develop It, and ReAnimator Coffee were generous enough to supply free swag, and we raffled items off. The big winner for the evening was Bill Zerega, who got a free three-month subscription to CodePen Pro, as well as shirts, pins, stickers, and coffee. Congrats!

CO_Matt

Our very own Matt

After that, we then opened it up to an informal show and tell. Again, IC represented as Matt Lewis, a developer here, discussed some of the latest and greatest enhancements to CodePen. These included templates, which act as building blocks for your pen, as well as a couple other pens he had created at IC, like this. Lastly, Victor Lourng, a 17-year-old high schooler, demoed a pen that had he created—take a look at it here. Pretty cool to see someone so young present in front of a group, and he’s doing some awesome work, as you can see.

We were then planning to sit down and code, but everyone was having such a great time chatting it up that we decided to let those who wanted to hang out do so, and to let those who wanted to code, code!

All in all an excellent night was had by all! Everyone I talked to took something away from the discussions we had, and it was great seeing people present some of the incredible work they are doing with CodePen. If you couldn’t make it out, we’ll be doing these Meetups more frequently, either at IC or at various locales around the city, so come out to the next one and get involved! Also check out and follow IC on CodePen—we’re always up to something!

About the Author

Image of John Blazek

John Blazek

Senior UX Developer

John has simple goals: to envision usable, rich, and interactive experiences across devices... and to stay steadily caffeinated. More