Educational Edition

Featuring education was a suggestion by Arelia and it was a great idea so during the event we highlighted CodePen's pedagogically uses. Majority of the presenters circled back to their pens as a means to teach others. Eric Boyer was wonderful enough to livestream the event too, check it out.

CodePen at Shiftgig

Kiedis the Floof our special guest


Arelia Jones

Arelia led the event with a collection of pens for CoderSpace, an organization she co-founded that teaches 14-17 year olds how to code, collaborate on local client projects and develop leadership skills for a digital world. Arelia covered some projects she has the students fork and complete, a media query Beyonce example and a CSS example of an animating play button.

Arelia presenting her student work and projects

CodePen Tech Ed collection

Melanie Sumner

Melanie, an Ember.js core team member, showed how she's teaching the Ember team about accessibility and it's importance when integrating it into their projects plus how CodePen is great at settling debates! Checkout her A11Y collection.

Melanie showing A11Y examples

A11Y collection

Dave Cohen

Dave showed off a music generator that printed out chord progressions, melodies, rythms and meters. He then showed the finished product that generated a *.midi file and played the generated music.

Dave and his music generator

See the Pen scraggo's music tools - random generators (JavaScript) by scraggo (@scraggo) on CodePen.

Random Music Generators

Jeremy Kahn

Jeremy showed a Pokedex React app he built as a learning tool for him getting into React. The app includes over 700 Pokemon in the pokedex.

Jeremy presenting the Pokedex React

See the Pen React Pokedex by Jeremy Kahn (@jeremyckahn) on CodePen.

Kevin Lesht

Kevin engaged the audience with an anonymous quiz from the Stack Overflow survey of developer habbits. The app was built in Vue using Firebase anonymous authentication to keep track of who is taking the quiz.

Kevin showing his Stack Overflow quiz

See the Pen VueJS / Firebase Quiz App by Kevin Lesht (@klesht) on CodePen.

Jake Albaugh

Jake built an audio player used a canvas element that was rendered at 4x4 pixels and outputs audio based on the color values of the canvas. The rendered image uses the device's camera and the canvas reduces that down in a much smaller image and maintaining it's pixelation with CSS.

Jake using the laptop camera to show the generated audio

Video Music

Kenneth Watkins

Kenneth presented an augmented reality(AR) project that used Hiro images to attach a 3D model of the earth. You can move the Hiro image and the AR library will track the 3D model with the image position.

Kenneth using a Hiro image for AR

World AR Animated

Austin Andrews

Austin prototyped an example of github issues visualized for contributers to track :thumbsup: emoji for issues to determine what to address first for Material Design Icon.

Austin with his prototype for Material Design Icons

See the Pen MDI GitHub Issues by Austin Andrews (@templarian) on CodePen.

Brian Haferkamp

Brian H prototyped his news app, Skmmr, to pull in multiple news' sources and filtering the results to keep updated on daily events. Quick and easy to consume with filtering options, feel free to check it out!

Brian H standing in front of a laptop and a monitor on the right displays the skmmr prototype on CodePen

See the Pen skmmr // Mobile App by Brian Haferkamp (@brianhaferkamp) on CodePen.

Brian Montana

I, Brian, decided to show off my CSS animations that focused on the 12 principles of animations that will be included in a future talk on animation. Next I showed an older example of a 3D SVG that rotated with mousemove and deviceorientation events, you can see the final product included on my website.

Brian Montana talking in front of a blank monitor, a monitor on the left and right display a CodePen pen called CSS animation principles

See the Pen Animation Principles CSS by Brian Montana (@brianmontanaweb) on CodePen.

See the Pen 3D Logo SVG and deviceorientation by Brian Montana (@brianmontanaweb) on CodePen.

Sean Mann

Sean talked about the blurring and contrast filter effects to render goey effects. He explained and brought up a canvas particle effect that used the same filtering techniques with user input controls.

Sean in a dark grey hoodie in front of a blank monitor, a partial monitor on the left displays code from CodePen

See the Pen ink by Sean Codes (@sean_codes) on CodePen.

Photo gallery:

CodePen @ Shiftgig

Thank you for attending!

Thank you to Austin for getting the space, food and bartender all sponsored by Shiftgig. Thanks to Arelia for leading the presenters and showing all the ways she uses CodePen for education. Always thankful for Marvin Cespedes for documenting the presenters and photographing the event!

If you have any suggestions, feel free to reach out on Twitter or email :D

2,328 0 8