1st Codepen Meetup Brazil — review

André C. de Oliveira
Sorocaba CSS
Published in
4 min readOct 28, 2016
These people screamed ‘MEOOOOOOOOW’ to take this pic. What else to expect of this meetup than fun?

Here, our register from what happened in Fatec Sorocaba campus, last saturday, 2016 October 22, including all meetup’s photos at the end of this post.

Show & Tell

The official schema of Codepen meetups consists, basically, in show a created pen and tell how it was created, explaining the code as the creative process. We had five Show & Tell:

Vitor Talaia — CodeMiner42

Talaia, our most photogenic speaker.

Talaia’s opening show & tell demythificated animations and transitions, proving that isn’t complex make something beautiful and offer a better UX in a simple Twitter switch with checkbox.

The use of animation inspector, from Chrome’s dev tools, deserves attention.

Link to Talaia’s Pen: Rolling Twitter logo switch.

Guilherme Serrano — GSolutions, EuCompraria

Did you ever seen another brazilian online store sponsoring an international event?

PIXEL ART! Guilherme created an interactive card with EuCompraria’s logo, one of the event’s sponsors. Basically, the logo was created with box-shadow’s CSS property.

Link to Serrano’s Pen: Pixel Art.

Eduardo Matos — GetNinjas

This isn’t the first Eduardo’s contribution to Sorocaba’s local dev community, even he don’t live here. We hope it wasn’t the last, also. Thanks a lot, man! ❤

Eduardo loves Steven Spielberg’s Jurassic Park. His pen is a reproduction of the first film’s glasses with just one div and some CSS code lines — but if you aren’t still impressed, his pen is fully animated. Awesome! :D

Link to Matos’ Pen: Jurassic Park Binoculars.

Keit Oliveira — HomeRefill

Even she’s one of FrontInSampa’s organizers, it was the first public Keit’s presentation. What a debut, huh?!

Keit merged two things our public simply loves: HTML5 and… Stranger Things!

Her pen was the serie’s Christmas lights wall with Google’s voice recognition API. The lights turn on according to what’s said. Wonderful!

Link to Oliveira’s Pen: Speak from the upside down world.

Giulia Cardieri — Applied IT’s Lab (UNESP Bauru)

Giulia was incredibly patient, explaining each detail of her pen. Surely a reflex from his CSS & JS domain! :-)

Giulia proved how to illustrate and animate an entire city, with interactivity and capriciously beautiful details, and at last (but not at least)… a marvelous easter egg (tip: click on the clouds).

Bonus: the whole crowd recorded a kiki for Dino Kiki, another Giulia’s creation.

Link to Cardieri’s Pen: Bauru: Day&Night Sun&Rain — Pure CSS Illustrations and Animations.

Coding Dojo: Dribbble + CodePen CrossOver

The first row was the next duos’ row. In the left, the CSS jedis; in the right, the padawans.

This was the brazilian flavour in the event. We wanted the crowd’s participation, so the organization concluded that the best way to motivate and include the crowd would be a coding dojo, instead to follow only the Show & Tell official schema.

The idea was to find a Dribbble’s shot and implement it on Codepen. More important than pixel perfect, our goal was to make the greatest possible number of people to participate and to lose their fears in learning front end.

In this point of view, the dojo was successful: it lasts a few more than a hour and counted with 15 duos, in 4 minutes turns. Each duo was formed by 1) a CSS novice and 2) someone who believes to be more confident with HTML & CSS.

It was very beautiful and funny. Click here to see the result.

Thanks

The event was 5 hours long. Five speakers, three months and more than 40 hours spent by the organization (which had more than 10 people), a crowd of 78 incredible people, coffee break and networking 40 minutes long, the comfortable structure of Fatec Sorocaba and lots of gifts from Codepen and also from our sponsors.

The SorocabaCSS organization thanks to all who came to the event, to the speakers, to Fatec Sorocaba (specially to Systems’ Analysis and Development coordinator, Maria Angélica) and our sponsors: MediaTemple, Tegra, MochaStudio and EuCompraria (they deserve at least one like, don’t they?).

One of the best parts was to talk for 40 minutes with a lot of nice people.

We wanted a meetup where everyone could share their knowledge in a funny way. So, surely the first official Codepen meetup in Brazil was a huge success! :)

We took ~250 photos!

They’re all in SorocabaCSS’ Facebook — don’t forget to give us your like!

--

--

André C. de Oliveira
Sorocaba CSS

Amante da Música, entusiasta da Matemática e padawan na área de TI. Alma inquieta e curiosa.