Special Guest: Dave DeSandro

Dave DeSandro reached out to me about speaking at CodePen Chicago to talk about his process when building a JavaScript library. The talk started about Dave trying to make a video game, okay, maybe not, but he tried making a 3D graphics library. Actually, not really, but Dave is definitely making lots of demos. These demos were a gradual incrementation of feature updates to making more interesting visual solutions in rendering graphics using canvas. The build up for the demos was about making them small, easy and accessible so they can be done in short time spans while talking about the failures that led to his shift by turning large problems into smaller attainable goals.

Check out all the different demos as he solves different graphical rendering problems with canvas, Round 3D :D

See the Pen Happy town round 3D by Dave DeSandro (@desandro) on CodePen.

Dave in front of screen with lots of S characters Sprout Social event space with attendees talking Stickers and shirts with much swag!


Matt Helbig

Matt presenting in front of a projector screen Defeat the Warlock of Outlook Mountain

See the Pen Defeat the Warlock of Outlook Mountain. by Really Good Emails (@reallygoodemails) on CodePen.

Matt showed an email that uses check box hacks for an Email Adventure game with a very 8-bit JRPG aesthetic and fun play through. Lots of pop references, riddles and involved.

Kevin Bertram

Kevin leaning forward in front of a laptop Happy Worm Exploring Space on Hover

See the Pen Happy Worm Exploring Space on Hover by Kevin Bertram (@kbrtrm) on CodePen.

Kevin showed off a cute happy worm that flew through space, when a user hovers it smiles and flies through the stars!

Andrew Doss

Andrew talking into a microphone Tone.js Synth Keyboard

See the Pen Tone.js Synth Keyboard by Andrew Doss (@andrewphillipdoss) on CodePen.

This pen from Andrew was a synthesizer keyboard that uses the Tone.js library to make audio. Try out the keys for some music!

Jake Albaugh

Image of data points connecting across the USA TSP Divide & Conquer Algo Visualization Project

Jake showed off his attempts to solve the traveling salesperson problem(TSP) which is unsolvable but used to determine the shortest possible route when given multi destinations. The data visualization is his presentation on the progress towards a solution in canvas.

Colt Borg

Colt talking into the microphone with hand gestures God of War Pre-Order Cards

See the Pen God of War Pre-Order Cards by Colt Borg (@coltborg) on CodePen.

Colt talked about his prototyping experience that leads to pens like this, replicating UIs and building web solutions for them. The pen uses atomic CSS methodology to use utility classes instead of specific classes for styling.

Arelia Jones

Arelia in front of a laptop talking into microphone SXSW

See the Pen SXSW by arelia (@arelia) on CodePen.

Arelia wanted to show her students at CoderSpace different blending layer uses with CSS and images. CodePen allows her the chance to show her students these quick examples of writing code properly and using experimental features effectively.

Dave Willhite

Dave typing on laptop Nice Face

See the Pen Nice Face by Dave Willhite (@dwillhite) on CodePen.

Dave changed careers, found a new passion with coding and showed off a pen he made for his 2 year old! The face has different interactions and will respond when the user clicks different parts of the face.

Gebre Mesquitta

Gebre looking at projector screen talking into microphone Random Quote Machine

See the Pen Random Quote Machine by Code Designer (@IDCoder) on CodePen.

Gebre showed a few different pens and the Random Quote Machine was the last one he showed which uses an API from forismatic to fetch quotes in English and updates the DOM with the new data.

Brian Montana

Brian being awkard with his hands Weird Flowers

See the Pen Weird flower. by Brian Montana (@brianmontanaweb) on CodePen.

I built a quick canvas animation in canvas with multiple flowers moving about in a circle motion. Hopefully this will force me to make my next pen :O


All Photos are from Marvin: CodePen Chicago @ Sprout Social

Thank yous!

Thanks to Dave for presenting to CodePen Chicago! Thank you to Arelia and Sprout Social for getting the space, food and drinks. All photography is done by Marvin, thanks! Thanks to Austin for the MDI posters!

If you have any questions and/or suggestions, feel free to reach out :D

1,726 9 13