First CodePen Chicago Meetup by Matt Soria on CodePen

CodePen Chicago at Workshop Chicago

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 Zugovic presenting at CodePen Chicago Nathan Herring presenting at CodePen Chicago 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 Richardson presenting at CodePen Chicago 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 Artz presenting at CodePen Chicago 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.

Caroline Artz presenting at CodePen Chicago

Stacy Kvernmo

Stacy Kvernmo presenting at CodePen Chicago 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 Bhat presenting at CodePen Chicago 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 Albaugh presenting at CodePen Chicago 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 Gaebel presenting at CodePen Chicago 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: