Updated 9/26: To include Rachel recently posted a great write up of this here My Process For Building Generative Pens

Learn to Code LA & I were extremely honored to host our inaugural web development show and tell night as well as a general networking mixer held at the beautiful downtown Nation Builder offices. This being the first CodePen Meetup in Los Angeles in quite a while, it's goes without saying that we were ecstatic to get everyone together for some good old fashioned code demonstrations.

We had some great demos from some amazing guests including CodePen and NationBuilder staff to some amazing members of our own group! Topics covered included SVG animation, using your own tools a.k.a. 'dogfooding' and advanced SVG usage via parameterizing random animations. I'd love to go ahead and share a brief description of the presenters and what their demo's were about with links to all of the things! Please read on :).


Taking Off with CSS and SVG Animation!

by: Liz Krane & Jim Thoburn

Our groups awesome founder Liz Krane & Jim Thoburn kicked us off with an amazing talk about how to make a spaceship take off via CSS/SVG. Their slides gave a clear idea about how to creating page elements with HTML and CSS, drawing the graphics with SVG, and making life-like animation with Penner’s easing equations by adding a motion blur. They even showed us how to let the user control the animation by scrolling!


"Dogfooding" NationBuilder's Own Platform

by: Eric Williams

Eric Williams, front-end developer on the NationBuilder design team, gave an excellent talk on how to break into the field of web development. Less than a year ago, Eric was a bartender learning how to code in his spare time. He acquired the fundamentals, then started building his own WordPress themes and Meteor apps. This independent track and "just build websites" approach led him to NationBuilder where he now wrangles heaps of code. Eric told this story, along with his adventure of revamping our voter file request form right below!


Gradual Development by Parameterizing Visual Effects

by: Rachel Smith

Rachel, a self described beer drinking, makeup tutorial watching, leggings addicted web developer who currently wrangles CSS & JavaScript for CodePen. She dreams of a well-animated web in which we are all very nice to each other 💕, as I often do so myself!

She was gracious enough to show us how to not only better determine which animations we can randomize for a nice twist on animation effects with SVG, but also helped us better appreciate and how to parameterize, randomize, tween, and iterate through said animations so they become modular and reusable :)! She recently posted a great write up of this here My Process For Building Generative Pens

Rachel Smith CodePen Demo

And if you'd like to follow along with her slides they can be found on her Rachel's Speaker Deck


GitHub Profile Node App

by: Wai-Yin Kwan

Wai-Yin gave us a great demo of a simple Node/Express application that displays a brief bio page with a GitHub profile. Receiving really positive reception when presented to a Women Who Code workshop we thought it was a great idea to demo it here as well and it worked out great!

GitHub Profile Node App

Slides/Lecture notes:

Part 1 // Part 2 // Part 3

And the GitHub repo to the project is here: Wai-Yin Node App Repo


Whiz Tutor 2.0 for Tutors

by: John Anthony Rivera

John gave us a look into the tutor-side of an app he built called Whiz Tutor, it's a service that creates a process for Students to find Tutors online, and schedule in-person tutoring sessions. It's build on the Ionic framework, which is AngularJS + Custom Ionic Directives/Services running in a WebView, all packaged together by Cordova as a mobile app.

A few things discovered on his journey:

  • Showcasing CSS flexbox to build the messaging system and other various components of this app converted him to flexbox evangelism.

  • Inherent graphical performance constraints of running a web-view in potentially lower-end mobile devices taught him to be much more careful when it comes to applying CSS transitions and animations, as well as which attributes will use GPU to avoid excess paints to animate.

  • How to structure data with Angular to avoid extra watchers as well, but the biggest learning curve was working with callbacks and promises while structuring the internal logic of an application to properly handle them as well as edge cases.

Concerning callbacks & promises

Being contract work, time management has definitely been interesting for John, putting in a good 60hrs and really trying to optimize productivity, if you have any useful tips he's all ears.


In Conclusion

All in all, I would have to say that this was a great success thanks to the help and hard work of everyone involved. With the help of the excellent CodePen Support, Media Temple unbelievable generosity, Brian Tippy, Eric Williams, and Brittany Bunch of NationBuilder, and some very gracious volunteers (Megan McGee,Lena Klimas, Kenny Lee, & Aaron Goold) I can happily say that it turned out to be quite a success!


This Meetup was Free thanks to our sponsors:

NationBuilder for providing the awesome venue at the NationBuilder offices in the heart of beautiful DTLA!

CodePen.io for providing 'swag' typically including t-shirts, stickers, notebooks, pens, buttons, etc.

Media Temple for sponsoring food and drinks in addition to also offering all attendees 20% off any web hosting for an entire year, using coupon code CODEPENMEETUP!!!


930 0 5