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.
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.
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.
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.
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.
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.
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.
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.
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.
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!
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.
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.
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