An Animated Poem built with CSS Drawings & Animations (CodePen Show & Tell)_Felipe Bernardes_Codemotion Berlin 2019

During a surgery recovery in 2017, I've spent 10 hours writing a creative animated poem using HTML+CSS, which ended up being featured on CodePen front page. In this talk, I'll present my creation in a "show & tell" way, and share what I've learned about the importance of creative side-projects, and the impact of it in my career since then. I intend to inspire both technology newcomers and experienced people to look at personal side projects in a different way.

About:
Felipe Bernardes
Sr. Front End Developer - Toptal

I’m a Brazilian Front End freelancer living in Sorocaba. Currently, I work remotely as a Sr Front End Developer at BabyCenter.com, the biggest and best parenthood content website. I enjoy to travel, learn, teach, design user interfaces and code web/mobile apps. I also play guitar and drums, and I suck at both. What drives my work is to build a better web for people — by sharing knowledge through talks, organising tech communities and especially by building things that positively impact people.

Transcript

2. An Animated Poem built with CSS drawings & animations Felipe Bernardes felipebernardes.com Codemotion Berlin '19
3. • • • • •
4. 1. context 2. code 3. learnings
5. I made this for my SO, Amanda Vilela
7. Why?
8. Why not?
9. Just kidding
10. I had a surgery
11. … and 2 weeks of recovery
13. I got bored
14. To the point I missed work...
15. To the point I missed work...?
16. To the point I missed code!
18. It was one of the most fun I had with code
19. And I want to share with you how I did it
20. 4 steps
21. 1. have a surgery 2. get really bored while on recovery 3. ??? 4. animated poem
22. Just kidding
23. 2 steps
24. 1. Drawings 2. Animations
25. css drawing basics
26. css drawing basics
27. from basic shapes, we can draw anything!
29. a heart from combining squares and circles
31. let's see some code
32. disclaimer: it's ok to not understand everything right away
33. we'll have Q&A and I can clarify questions afterwards @ toptal booth
35. 1. Drawings a. heart baloon b. me and amanda c. mini hearts d. stars e. ground
36. 1. 2. Animations a. me and amanda, flying b. me and amanda, blinking c. mini hearts, popping up d. stars, slowly appearing e. sky, rotating f. ground, moving out of view g. poem stanzas, showing up
37. full demo presentation
38. learnings
39. frameworks & tools
40. creativity as our tool
41. one thing from this talk
42. exercise your creativity
43. fork me
44. just a heads up
50. Vielen Dank! Come talk to us @ Toptal booth!