Showing & Telling with Refresh PDX and CodePen

All you need is web browsers. With CodePen, users write and test code, iterating with HTML, CSS, and JavaScript, in a social, shareable environment. Browse pens, share pens, and admire all the cool stuff others have created. Maybe even find a solution.

To explore that social side of the tool, a recent Refresh PDX event with CodePen gave attendees the opportunity to present pens they’ve created and learn techniques from the community for making them better.

From Voronoi diagrams, to a SkiFree game, folks emerged from behind the screens to show what’s been on theirs.

One of those was Portland web developer Peter Rossing’s holiday spin on the "Exquisite Corpse" game. Three sliding carousels mix and match to create one character. The character graphics are 100% CSS, and sections of the sliders are created and animated with JavaScript, which loads empty 'panels' with the HTML for the next appropriate part of the character in the sequence. “No matter what kind of experience or background a person has, they can feel like they've got ideas to contribute and talents to share,” Peter says of CodePen.

Refresh co-organizer Susan Robertson says the event provided a platform to test the waters rather than each presenter doing a full talk. She also shared her own experience learning CSS Grid, which allows for a lot of different layouts and flexibility. “Layouts before were done using hacks, and we finally have a lot of interesting ways to do them through layout systems within the CSS spec,” she says.

Really, CodePen’s about discovery and experimentation. And maybe just a touch about Santa Claus, Gingerbread, Snowman hybrid monsters.

 
*Note: After 5 years, Refresh PDX's final event will be November 2017. We’ll be sad to see them go. Read about their decision here.