On Monday, April 13th I hosted the first CodePen Meetup in Chicago, and it was a seriously awesome time! We had an amazing turnout, and thanks to a few sponsors (Workshop Chicago provided the amazing venue, Campaign Monitor provided the beer, and VitaminT provided the food/refreshments) the evening was filled with nearly 100 happy and fed Chicagoland (and elsewhere even) developers.

We had eight people present some of thier pens, and also had a couple code challenges to participate in so I could give away the great CodePen t-shirts that the CodePen team provided.

Here's a run-down of the presenters, and some photos I took throughout the evening:

Miro Zugovic(top) & Nathan Herring(bottom)

Miro and Nathan both work at The Mx Group and gave a presentation that explained how their team uses CodePen for efficient rapid prototyping. Because of the nature in which they use CodePen, their pens are private to the team, but they've provided me with their slides that explain the process, which you can view here.

Andy Richardson

Andy created a pen that experimented (and tested the limits of) Websockets — the idea is that anyone viewing the pen can drag their mouse around the page, and in real time a strange orby emmision of light will trail the movements of their mouse, and if anyone else is viewing the pen from their computer at the same time, the viewer will see that person's movements as well. It was really rad having a whole room of people able to pull it up to see everyone's mouse movements in action — I think Andy said he checked the Heroku log afterward and found out that once there were 15 people viewing at once the app crashed — pretty awesome!

See the Pen Playing With Websockets by Andy Richardson (@andimal) on CodePen.

Caroline Artz

Caroline gave a great demo on using p5js to do crazy cool things with particles and canvas, using the CodePen logo as a demo.

See the Pen p5js magnetic codepen logo by Caroline Artz (@carolineartz) on CodePen.

Stacy Kvernmo

Stacy gave a really in-depth talk about using Breakpoint Sass to make working with inline Media Queries really efficient and easy.

See the Pen Breakpoint Sass Demo - Even better inline media queries by Stacy (@stacy) on CodePen.

Kunal Bhat

Kunal presented a really cool animation he created, as well as a few pens that he made that tried to replicate some cool things he found in some apps or websites.

See the Pen Animated 'Always With Honor' logo [DISCO VERSION] by Kunal Bhat (@kunalbhat) on CodePen.

Jake Albaugh

Jake presented his recently CodePen-famous pen, 'Pen PwLXXP' — the 'self-writing' pen that blew people's minds a few weeks ago. He talked us through the process of creating it, what's going on behind the scenes, and showed us how we can acheive the same effet.

See the Pen pen#PwLXXP by Jake Albaugh (@jakealbaugh) on CodePen.

Dennis Gaebel

Dennis, who by-the-way came to Chicago all the way from Buffalo New York to present at the meetup, gave an excellent talk that went through a hand-full of his pens that he found to be really useful and fun. He started out talking about his low polylion pen, and went through others that covered (among other things) using TweenMax with GSAP for better and more realistic motion, using Sass to theme form elements,using SVGs in all sorts of ways, and using the offset background-position shorthand for better background positioning.

See the Pen SVG Low PolyLion: Animated Polygons by Dennis Gaebel (@grayghostvisuals) on CodePen.

See the Pen Album Tracks GSAP Menu by Dennis Gaebel (@grayghostvisuals) on CodePen.

See the Pen SVG Checkbox by Dennis Gaebel (@grayghostvisuals) on CodePen.

See the Pen The New Way To Background by Dennis Gaebel (@grayghostvisuals) on CodePen.

Code Challenges

We also had two code challenges that were pretty opene-ended prompts to just style some completely un-styled markup, and we got some pretty great submissions:

The CodePenChicago Announcement page

Ben Gandhi-Shepard

See the Pen Chicago CodePen Meetup by SOLVM (@solvm) on CodePen.

Nathan Herring

See the Pen Chicago CodePen Meetup by Nathan Herring (@nherring) on CodePen.

Dennis Gaebel

See the Pen Chicago CodePen Meetup by Dennis Gaebel (@grayghostvisuals) on CodePen.

Stacy Kvernmo

See the Pen Chicago CodePen Meetup by Stacy (@stacy) on CodePen.

If Chicago Had a 404 Page

Julia Simplicio

See the Pen CodePen Chicago — Chicago's 404 by Julia (@juliasimplicio) on CodePen.

Daniel Hart

See the Pen CodePen Chicago — Chicago's 404 by Daniel hart (@danielhart) on CodePen.

Thomas Mathew

See the Pen CodePen Chicago — Chicago's 404 (Thomas Mathew) by Thomas I. Mathew (@thomasmathew) on CodePen.

Justin Smith

See the Pen CodePen Chicago — Chicago's 404 by Justin Smith (@justinisamaker) on CodePen.

Nathan Herring

See the Pen CodePen Chicago — Chicago's 404 by Nathan Herring (@nherring) on CodePen.

Photos & Stuff

Here's the social stream from the event: #CodePenChicago

Here's a few more photos from the evening:

Thanks to all who came, and keep your eyes open for the announcement of the second #CodePenChicago!

If you came to the meetup, or even if you didn't but you want to go to the next, help me make it the best ever by filling out this feedback form!