A few weeks ago, I presented a talk to my colleagues at Toggl. We call them Kitchen Talks. Everyone is required to do a Kitchen Talk each season, and it can range from super-serious work topics to casual stuff like hobbies and games.
Kitchen Talks are fun!
Also very anxiety-inducing if you're the one presenting - but we don't talk about the negatives.
The hardest thing is usually coming up with a topic. Luckily, one of my colleagues had already figured it out for me. I showed a few of my pens during one of our meetups back in South Korea.
Next thing I know, the suggestion was in the "Kitchen Talk Suggestions box". I ran with it. Heck, I didn't even bother to come up with a better title. The title suggested was literally "Codepen Designs: Why She's Made Them and What She's Made." To clarify- it's not really Codepen "designs", but rather Codepen "projects".
Anyway, naturally, I love to make things more challenging so I decided to make a quick pen for my presentation slides.
"Quick".
I've made the talk in Codepen pen form, presented it, and now this is the talk in Codepen post form. We've gone full circle. Also, here's the pen!
See the Pen by Olivia Ng (@oliviale) on CodePen.
View at 0.5x! As I've only optimized the pen for my presentation, it has to be slightly zoomed out -- I also use Codepen at 75% zoom and :pikachuface: every time I set it back to normal.
Introduction
At the start of the presentation, I explained what Codepen is about and who uses Codepen. I showed a couple of examples as well, just to give them a better idea.
See the Pen by Olivia Ng (@oliviale) on CodePen.
The second example I showed. I think there are a lot of better pens out there but I showed this one because this was actually a snippet from one of our company fun projects.
The animations for our project back then were done with After Effects & JavaScript but I wanted to try it out with CSS Animations, hence, this pen was created. I just wanted to show them something familiar 😄
Why Codepen?
No brainer here that I do Codepen projects to practice coding and definitely, absolutely for fun. I had to point out the fact that a lot of Codepen projects I do are kind of useless concepts that can't be used in the real world.
See the Pen by Olivia Ng (@oliviale) on CodePen.
I mean, really? Whatever though, they are super fun to me and that's all that matters 😂
See the Pen by Olivia Ng (@oliviale) on CodePen.
Another fun pen. This pen has about 80% success rate for me every time I show it off - it usually sorts me into Slytherin 🐍 - but when I showed it during this talk, it sorted me into Ravenclaw 🐦. TWICE, ffs. 😭
For the point on "small-scale projects", I actually wrote a blog post explaining more in detail, but the gist of it is that I have trouble motivating myself to do big projects. So I stick to Codepen, which will usually take me about 5-15 hours.
The Process
I then talk a little bit about my process.
It always starts with an idea. I jump into building it, usually with no planning. Halfway through, I start to negotiate with myself what feature I can cut down because I've already spent too much time on a pen and I should just wrap it up.
When I decide that a pen is done, believe me, I'm SO DONE. As in, I will ship it, tweet about it... and I don't want to see it anymore 😂
The good news about this process is that, if I ever choose to go back and work on an old pen, there are lots of things to improve on. Silver lining, amirite?
Data
Used a very buggy bubbly chart to show this data (size is sort of relative to time spent; 3.5 hours = 35px width and height).
Also showcased the pen that took me the longest.
See the Pen by Olivia Ng (@oliviale) on CodePen.
It's because the shapes are all CSS instead of SVG
Inspiration
I then talk a bit about how I get the inspiration for my pens. I have too many pens to showcase and I couldn't choose so I built a little random generator.
Everyday: Everyday items in my life
See the Pen by Olivia Ng (@oliviale) on CodePen.
Like how I use Excel spreadsheets a lot for work
Favorites: My Favorites
See the Pen by Olivia Ng (@oliviale) on CodePen.
Inspired by my favorite musical called Waitress. They had funny pie names 🥧
Concepts: Serious UI things or certain CSS concepts I want to test out.
See the Pen by Olivia Ng (@oliviale) on CodePen.
Playing with hover effects
Jokes: Things I find funny or inside jokes with people in my life.
See the Pen by Olivia Ng (@oliviale) on CodePen.
Lol
Questions
Every talk must have a Q&A session, of course. I tried to grab all the questions that were asked.
Do you play dota? (I showcased a Dota-inspired pen)
Not anymore. Used to play but it was too time-consuming.
"I'm starting to suspect Olivia likes harry potter"
I know this is not a question, but yes.
Olivia, I need you to build me a Rainbow Six Operators hard counter relation grid.
Trusty Slackbot answered this for me :D
So, when are you joining the frontend team?
I really dislike cross-browser compatibility fixes, and it's going to be a no as long as we still support IE11.
What are some challenges while working on projects?
Unsolicited advice 😛 Especially by people who take things a lot seriously than I do for my fun pens.
I talked a bit about how you can receive 30 positive comments and one negative comment... and it's the negative one that keeps you awake at night. I know that this comes with the territory of sharing content online, but it will take some time for me to get used to it.
Ultimately, I try to remind myself that I really do all these pens for myself.
What is your favorite pen?
I'm so glad this question was asked!! Because of the random pen generator, I basically put my faith into RNG and JavaScript that it would choose my favorite pen. If it didn't choose it, I would show it as a "closing pen". But I forgot to do so because when you're presenting, all your plans/thoughts kinda go haywire.
But I got to show it in the end because the moderator asked <3
See the Pen by Olivia Ng (@oliviale) on CodePen.
Hands-down my favoritest pen for forever
- End presentation. Finito. -
Overall Thoughts
Boy, am I glad my colleague came up with this topic. It was a topic which I'm very comfortable with, so it was just easy storytelling on my end.
Do I regret using a pen as my slides?
Oo, tough one. I guess, I do not? I definitely spent too much time on this pen. I was supposed to present on a different date but when the moderator asked me if I could present it a week earlier, I jumped on the chance because I know I would spend even more time.
But I think it's really cool to use a pen, given the topic.
Would I do it again though?
Oh, hell yeah.