I got to talk to Paulina Hetman this week! Paulina is a heck of a creative coder, using her skills as an illustrator and all-around web developer to make ideas come to life. And she doesn’t keep all those ideas to herself, she spends time educating other budding developers both professionally and by building courses and things like her incredibly clever quizzes (as Pens!).
Time Jumps
- 00:22 Guest introduction
- 01:12 Making quizzes in pens
- 05:17 Working with cascade layers
- 06:20 Using CodePen for teaching
- 08:38 Homepage design as a pen
- 09:54 Sponsor: Notion
- 10:47 Working with WordPress and Automattic
- 13:23 Working with particles and three.js
- 17:31 Working with illustrations
- 19:29 Working with the syntax of CSS
- 22:10 Horizontal parallax pen
- 24:15 CSS Shapes forest collection
- 26:22 Tagging Google fonts
- 27:36 Landscape in a triangle pen
- 27:51 When you can’t decide pen
- 29:39 Header transition pen
Sponsor: Notion
Notion is an amazing collaborative tool that not only helps organize your company’s information but helps with project management as well. We know that all too well here at CodePen, as we use Notion for countless business tasks. Learn more and get started for free at notion.com/codepen. Take your first step toward an organized, happier team, today.
Transcript
[Radio channel adjustment]
Announcer: Today, on CodePen Radio.
Chris Coyier: Hey, everybody. Welcome to CodePen 366. I have Paulina Hetman with me, and I'm so excited to have her. How are you doing, Paulina? Thanks for coming on the show.
Paulina Hetman: Hi! Hi, Chris. Hi, everybody. I'm doing great. I'm extremely excited and super honored to be here. Yeah, it's a big event to be on CodePen Radio. Thank you for having me.
Chris: Sure. The honor is all mine, Paulina. You do so much outstanding work on CodePen and off CodePen, so many cool projects. Truly a code artist. One of the best out there. It's going to be awesome to talk to you. There are so many things I could pick from. [Laughter]
Paulina: [Laughter]
Chris: I don't even know. You sent me a list of them, so not only are you a code artist, but you have this thing that I feel like is almost strangely common amongst really creative people that they have a desire to teach what they know as well.
Paulina: Mm-hmm.
Chris: You're an educator as well and have some LinkedIn courses, I think, and then do some things that are just free for everybody in the form of quizzes. I think probably some hardcore CSS and CodePen people have seen these before, but you have this quiz called Well Aimed, that's like how well do you know your CSS selectors. That's a whole CSS quiz, but it's built right inside a Pen, right?
Paulina: Yeah. Yeah, exactly. Actually, there is a series of three, and the one that you mentioned is the first one. What happened there is that I was teaching Rail students. I was teaching them WordPress. I noticed that they were kind of mostly excited by modifying the themes and playing with CSS. They were starting with that. What I noticed is that the main struggle was related with selectors, so they were struggling to target the elements they would link to.
Chris: Okay.
Paulina: To change, and that was the biggest problem. So, I was thinking, okay, I'm enjoying it very much, given this WordPress workshop. What if I deliver a selectors workshop.
Chris: Hmm.
Paulina: [Laughter] And the series of these quizzes was built gradually for this sector workshop that we were having fun and then I wanted to teach them selectors with some help from the quizzes. CodePen worked super great for that, and also they could see how it was built, so for the students.
Chris: Right.
Paulina: It was double interesting.
Chris: I suppose because it looks like you used Vue to do it. The quiz is fun in itself, but you're looking at the code that makes the quiz at the same time.
Paulina: Yeah.
Chris: Hence the CodePen. Yeah, and it looks very -- it's just cleverly put together. IT's configured, so the questions have a selector and what you call a proposal, meaning like, "Is this correct or not?" kind of thing, which I think is very clever.
Then you have an example DOM or an example chunk of HTML that people are looking at, and so you can kind of see it highlights what the selector should be selecting and then gives you this proposal. You're like, "Is that right or not?" You have to use your brain in this clever way. It looks like a lot of them are very close to correct, but they're not all quite correct.
Paulina: [Laughter]
Chris: So, you really gotta use your brain.
Paulina: Yeah. Yeah. Yeah. What was also fun is that you can fork it and you can make a simpler version for the beginners.
Chris: Mm-hmm.
Paulina: It's just like a moment to do that, so you can reuse it, and that's fun.
Chris: Yeah, That's fantastic. That's, like you said, a series. That's the first of them. There's one about learning about specificity. Was that the same? Were they the same students that were having trouble with that? Mm-hmm?
Paulina: Yeah. Yeah, exactly. Yeah, so then it was various things to select, so you could learn how to select elements, you know, that get them. Then they discover, okay, we can select things in different ways. Which one will win? Then there is the third one that combines both of them where you have the declaration. Yeah, okay.
Chris: Yeah, and the specificity.
Paulina: Try and which one would win if they would supply it, so that was fun.
Chris: That's great. I'm sure it made a big difference because it seems like I still think it's kind of fun. CSS is a puzzle in that way where you have to connect what's happening in the DOM with these selectors and stuff. I don't know. It's like little puzzles. I probably get the same kind of kick out of it as somebody who does a crossword puzzle does.
Paulina: Yeah.
Chris: You're like, "Yeah, got it!" You know? [Laughter]
Paulina: Yeah. Yeah. It's super fun.
Chris: I guess I have some follow-up stuff. Have you followed or seen anything with cascade layers stuff that's coming out that it's going to throw some of the specificity stuff.
Paulina: Yeah.
Chris: It's going to make it a little tricky.
Paulina: Yeah, I think that will change. Still, the very first change that I would like to apply is just to add it to the new "is" and "where" selectors, so that's on my to-do list, and then there is so much happening.
Chris: Mm-hmm.
Paulina: So, I guess that I will have to re-look at that.
Chris: I don't think it's going to hurt your quiz in any way because I think the value of specificity is always going to matter. It just adds this one weird little layer where if something -- if a selector happens to be sitting on a layer that's more powerful -- this is going to be weird for us, too, for sure.
Paulina: Mm-hmm.
Chris: That a selector that looks less powerful can still beat a selector that looks more powerful just because it's on a different layer that's going to be -- [Laughter]
Paulina: [Laughter]
Chris: We're going to have to adjust how we teach a little bit, I think - if it matters.
Okay, well, that's cool too. But it's not that teaching through these quizzes is the only way that you teach. You have actual students, and you make actual courses and things like that as well, right?
Paulina: Yeah. Yeah, but you know I used CodePen really a lot for that, so I've had another account, an account for teaching that was sponsored by the school. Then I would use that for the demos during the courses. I would use that for exercises, and it was really fun.
It's that you can actually -- you know, I was using jest-lite so that I can test the answers of the students. There was some little--
Chris: Nice.
Paulina: Yeah, some little snippet of JavaScript that I would add secretly in the bottom of the CodePen, of the Pen, and I would also load jest-lite. And then when the students had the answers right, there would be just fireworks or anything, you know. They really loved that. That was much more work for me, but that was fun.
[Laughter]
Paulina: They got used to that.
Chris: I know what Jest is, but this is the first I'm hearing of jest-lite. Is it just meant to be used in the browser?
Paulina: Yeah, it is, but it's not maintained anymore. I've just checked that today, and I guess it was updated the last time three years ago, so that's a pity because it was really, really, really great. But you can also do that with.... I use that as well. It's maybe just a little bit more complicated to setup, but it works. It's powerful.
Chris: Years and years ago, I did a blog post on using the different JavaScript testing frameworks in CodePen because they're all a little tricky to set up because we don't have -- we don't really run Node for you, which would be probably easier to setup, but we have to make sure that whatever happens in the browser. It can be a little tricky.
Especially in an educational context, I can see that being so valuable. We have free code camp used to use us pretty heavily, and they built their own little framework that put a little widget at the top of the screen that somehow was watching what was happening in JavaScript and the DOM and would give you a pass or fail depending on what you're doing. But they had to build that all themselves.
I guess the handle you go by most on the Internet, PeHaa.
Paulina: PeHaa.
Chris: PeHaa. On Twitter, that's your personal website. Your personal website is just beautiful. I love it. It's so cool.
Paulina: Thank you. Thank you. If somebody is inspired, there is a Pen. There is one Pen that's a ... transition where you've got almost the same effect just without changing the router change but also done with Vue, so if somebody would like to check that.
Chris: That's the idea that you click on a link and the URL changes. But in the case of your website, it goes from a dark background to a light background on projects. There's animation happening and stuff.
In your case, it's Nuxt, right?
Paulina: Yeah, it is.
Chris: Yeah. It's just extraordinarily nice looking. But the niceness goes all the way. There are these beautiful little moving dots, but they're not too distracting. The typography is nice. Woo! It's just a good one.
Paulina: [Laughter] Thank you.
Chris: Yeah. Check it out, folks, pehaa.com. That's you on Twitter and everything as well.
[Guitar music starts]
Chris: This episode of CodePen Radio is brought to you in part by Notion. Love Notion. Thanks for the support.
You know not all work collaboration tools are created equal. Some of them are about organizing your company's information, and some of them are about managing projects. Notion does both. It's one tool for your whole team to do it all. Beautifully designed. Everyone is going to want to use it.
I find that to be highly true at CodePen and ShopTalk Show and CSS-Tricks when we were managing that project. All of them, I use Notion for and people liked using it even if they didn't use it every day. But the more they used it, the more they liked it - generally.
It's kind of amazing how anything you do in Notion ends up looking good. They got the controls just right on making sure anything that you produce in Notion looks good, and I always appreciated that.
Learn more and get started for free at notion.com/codepen. That's notion.com/codepen to help you take the first step towards an organized, happier team today.
[Guitar music ends]
Chris: You've written for CSS-Tricks a bunch of times. Thanks for that. I appreciate that. All kinds of interesting things. You're a WordPress developer, and now at Automattic as well, but have a long history with working with WordPress too, right?
Paulina: Yeah, exactly. Exactly. Right now, I'm working for Automattic as a Woo software engineer, so all these years with WordPress and then I end up in Automattic. I guess that makes sense.
Chris: Yeah.
Paulina: So, I'm super excited about that as well.
Chris: It's relatively new, right? A couple of months.
Paulina: Yeah. Yeah. It's 11 weeks exactly.
Chris: Oh! Well, congratulations.
Paulina: I'm still counting in weeks.
Chris: That's cool.
Paulina: Yeah, thank you.
Chris: We have that in common. I'm a long-time WordPress fan.
Paulina: Yeah.
Chris: I've never worked for them, but they've sponsored things that I've done, and I've built countless WordPress sites. I don't know. I learned it early on in my career and felt like they just did a good job. [Laughter] You know?
Paulina: Hmm. Yeah.
Chris: It's the right tool for the job in a lot of situations despite endlessly getting crap from certain developers. It still trucks on and gets more and more popular all the time.
You're on the WooCommerce side of things, right?
Paulina: Yeah, exactly. Yeah. That's kind of new to me because I was not very much familiar with all the e-commerce stuff, so there is a lot to learn and understand how all these mechanisms work. But it's exciting. It's challenging. Yeah, I love it.
Chris: That's great. Before Automattic, it was just more like self-employed?
Paulina: Yeah. More like self-employed and recently mostly teaching and also working on Gatsby development teams for some time.
Chris: Oh, I see that Gatsby WordPress connection.
Paulina: Yeah.
Chris: Oh... Interesting.
Paulina: On WordPress, so I guess WordPress was always there with me in some way.
[Laughter]
Chris: Yeah, in some way. So, with other technologies you dabble in, you've been doing -- I've seen just recently this week -- playing with particles and stuff and Three.js more.
Paulina: Mm-hmm.
Chris: What draws you to that? It feels so super different.
Paulina: Exactly. And I guess that's the reason. I just wanted -- you know there was a moment when I needed to do something new.
Chris: Mm-hmm.
Paulina: My brain needed to do something new, and for my mental health and all of that, I wanted just something. Then my husband is a motion designer. We were playing with After Effects and all these 3D plugins, so I'm looking at that to focus more like remaking Star Wars, but still I was impressed. I said, "Okay. We can do similar things with the cloud. Wow. That's exciting."
Chris: Mm-hmm.
Paulina: Then I just started to learn Three.js, and it's addictive. It's extremely addictive.
[Laughter]
Paulina: Yeah, so that's all about learning for the moment. There's a long way behind me, but yeah.
Chris: I am envious of your skills at it because the output has just been amazing so far. There's a really cool CodePen one you posted the other day. There's this dancing tree that's a very Christmas tree looking kind of thing.
Paulina: Yeah.
Chris: But it's beautiful. It rotates in this spiral on the way up in a very satisfying way. The ornaments, if you could call them that, are kind of inside the tree. It's so cool. So cool! How do you even start? Where do you even start?
Paulina: I guess I found something similar, and it's probably linked there. I said, okay. It was just a cube or a sphere.
Chris: Just code. [Laughter]
Paulina: I was thinking, okay. What about the spiral? There is a parametric equation of a spiral, so ... time is a parameter and play with that and then just that was one of these rare cases when I really took a paper and draft to what I wanted to do. And it worked!
Chris: Nice.
Paulina: It took me several days, but it worked as I wished it would. Yeah. Nice.
Chris: There's certainly some math involved, especially if you want there to be, right? Does it leave you wishing there was more math available in CSS? We have so little, right? There's calc for addition, subtraction, division, multiplication, but that's it. There's no sign waves in CSS.
Paulina: [Laughter] That would be nice. Yeah, that would be nice. But sign, that definitely would be nice. But still, what we have, you know we can play with that, and that's not kind of-- Though, maybe it's even nicer that it's so challenging to do some things in CSS.
Chris: I've heard that from other people, for sure, that they almost prefer. I don't want to put words in their mouth. Not prefer that it's limited but know what CSS can do and then are okay with that and like the challenge of working with the constraints that exist rather than demanding that it evolved to be more complex. Just be like, "No, that's what it is."
Paulina: Exactly.
Chris: And that's where it goes.
Paulina: Exactly. You know there is this--
Chris: It's not like CSS is tapped out. It's not like every grid of thing in CSS has already been done. Not true.
Paulina: Yeah, but when you look at Lynn Fischer and her single div project, why would we do that that way? Because it's challenging, because it's fun. There's this--
I guess we kind of like this ... some limits and playing with that.
Chris: Yeah. Yeah. It's such a silly thing. Why would you do a crossword puzzle when you could train a machine learning model to do all crossword puzzles? Because I enjoy it! Leave me alone! [Laughter]
Paulina: [Laughter]
Chris: Yeah, fantastic. And so, illustration is some of it. In Three.js, it's like you work with a model, I guess.
Paulina: Mm-hmm.
Chris: There are particles and stuff. I don't know. You don't have to use particles in Three.js, I'm sure, but I don't think of it quite as illustration. But you work with illustration as well. Some of my absolute favorite Pens of yours, there's a girl skipping rope that's just tremendously beautiful. That's just straight up illustration. Where does that come from?
Paulina: Oh, so I like it. You know when I started to be interested in Web, my first most loved tool was Adobe Illustrator, and I would play with that. And that's how I fell in love in all these Web technologies playing with vectors and then trying to go farther with that.
From time-to-time, I like to go back and try again and do the same thing with CSS. Yeah, that's something I just ... for pure pleasure.
Chris: That's wonderful. Yeah.
Paulina: And I like how you can add some life to that with just a pinch of animation. That's magic.
Chris: Just a pinch. Yeah. Yeah, that's amazing. Yeah, you can see your Adobe Illustrator skills, I think, in so many Pens. A lot of the start in Illustrator, would you say?
Paulina: No.
Chris: No.
Paulina: I would rather not, but sometimes when I'm stuck, I'm stuck and I don't know how to proceed, I will take a screenshot, put it back to -- put it into Adobe Illustrator, and then play with some additional forms and so on. But I'd rather start in CodePen straightaway.
Chris: Yeah.
[Laughter]
Chris: Nice. That's cool. And so, there's that. Then there's just taking CSS and just doing something clever with it, outside of the scope of illustration.
Paulina: Mm-hmm.
Chris: You have some very interesting, clever Pens that do things interesting with CSS. I don't know how to describe it. Raw.
Paulina: Yeah.
Chris: For example, the CS only direction aware hover effect. That has nothing to do with being a good illustrator. It's just being clever with the syntax of CSS as you hover your mouse over this grid in this Pen, CSS only directly aware hover effect. It's like, how does that work? [Laughter] It seems like something that would require JavaScript.
Paulina: Yeah.
Chris: It feels like it's following your mouse. You're like, "CSS can't follow your mouse."
Paulina: That's the superpowers of pseudo elements. Yeah.
Chris: [Laughter]
Paulina: But that's crazy how much we can achieve with that. I wish there were more than two. That's what I would wish for CSS. There's only before and after. Why don't we have middle or more. That would be fun.
Chris: I tell you what. I did a whole talk on pseudo elements in the past.
Paulina: Really?
Chris: Yeah. I was a little obsessed with them for a little while and I thought it would make a good conference talk because it seems like such a tiny thing, but there are so many things that you can do with them that it's easy to fill the time in a conference talk. Then that was definitely a call to action, like, "Why are there only two? Why isn't there Nth after or Nth before, or something?"
Paulina: Yeah.
Chris: Then you know how they're placed inside the element. They're inside the element but before the content. So, after doesn't really mean after the element. It means after the content in the element. But wouldn't it be cool if it was actually after the element?
Paulina: Yeah, exactly.
Chris: If there was an arbitrary number of them and you could pick any of those four places within the element, that would be really powerful. It seems like the kind of thing that's like, "Why not?" You know? It's not like one of those complex things like container queries. Oh, no, it'll break the browser because it requires -- it opens up vectors for infinite loops - or anything like that.
It's like, "No, no, no. We just want little -- we just want the ability to have more than two pseudo elements. Come on. We're not asking for the world here."
Paulina: Right. Right.
Chris: [Laughter] That's a beautiful one. We'll link all these up in the show notes. There's another one about a parallax, horizontal parallax library. A lot of times, because of the natural flow of the Web, you see a lot of vertically scrolling things. Parallax is cool in any direction, but this horizontal one is truly something different. Postcards from Paris. That's where you live now, too, isn't it?
Paulina: Yeah, exactly. Yeah. I just became French yesterday, so two big events this week.
Chris: [Gasp] Congratulations!
Paulina: Yeah. I'm now Polish and French, officially.
Chris: You have dual citizenship? Is that what that means?
Paulina: Yeah.
Chris: Yeah. Cool. Now you're doing a podcast in English.
[Laughter]
Chris: Well, this parallax one is beautiful. Do you remember how it works exactly? Parallax is not something that CSS can do naturally.
Paulina: To have parallax, we need a perspective, and it would help because then you have a perspective on the container and then the elements within the containers sort of play with the translate on the Z-axis. That does the magic, actually.
Chris: The magic.
Paulina: Yeah.
Chris: Okay. You move it on the Z-axis. Isn't there some transform scale involved to size it back to look normal?
Paulina: Exactly. Yeah, and there is this magic formula that I can never recall, and I always Google that. But then you have multiply and subtract something and then it's just not that complicated.
Chris: Yeah.
Paulina: It's more complicated to Google that because -- [Laughter] I should record that for once.
[Laughter]
Chris: No, that's okay. This one is begging to be a little WordPress plugin, I feel like. I'd love to be able to just select a few images and click it and then have this be the experience within the blog post.
Then you've got another one here, the CSS shapes forest collection. This is one that has a lot of illustration to it. It has kind of two states where you click it and it sorts the forest into individual cards.
Paulina: Yeah. [Laughter]
Chris: Then you click it, and it comes back together. Oh, that's funny. I wonder if that mimics how some people's brains work. You know?
Paulina: [Laughter]
Chris: They can't make sense of the forest. They need to sort it.
Paulina: Not mine.
Chris: No? [Laughter]
Paulina: [Laughter] Now it's always the forest.
Chris: It's so clever, though. It's very satisfying to watch it transform, especially knowing how it's all put together at first. Does it start as--? Which state is the starting state?
Paulina: I guess the state is the forest.
Chris: Right.
Paulina: That was made, I guess, for a CodePen challenge. It was this challenge about single divs.
Chris: Nice.
Paulina: So, that was also fun because it showed elements as a single div, so I was trying to explore which animals can be done as single divs.
Chris: Ah, there's no SVG at play here, huh?
Paulina: No. No.
Chris: These are all single divs.
Paulina: These are CSS shapes.
Chris: Wow!
Paulina: It was a CSS shapes challenge. Yeah.
Chris: I would have guessed the other way. There are so many little details, like the little puff on the back of the deer's butt, you know.
[Laughter]
Chris: It's a different color. It's amazing. And it's not just one flower. It's two flowers. How does that work? Lots of little--
Paulina: Yeah.
Chris: If you know CSS a little bit, it almost becomes more amazing. I like Pens like that that the more you know, the trickier it gets. If you're a magician and you watch some other magician, and they're impressing you, it's all the more impressive.
Paulina: Yeah. Some job shadow....
Chris: Oh...
Paulina: I can't actually remember exactly, but probably.
Chris: That would be a way that you could duplicate.
Paulina: Yeah, I guess so.
Chris: Like get the second flower for free.
Paulina: Yeah.
Chris: Nice. You have a bunch of interesting projects off CodePen as well. Your pinned tweet is about a fonts project that you were involved with where you tagged the fonts on Google fonts, which is so great. I wish that they would just take this as a pull request, almost, to Google fonts. How many times do you go to Google fonts and type in, "Just show me the friendly-looking ones."
Paulina: Yeah.
Chris: But they don't have anything like that. You have to search around for some blog post on the Internet that's like, "The 10 Friendliest Google Fonts," or something. But no more. You can go to goofonts.com, click on the friendly tag, and it'll show you all the Google fonts that apparently you (and whoever you worked with on this project) decided were friendly.
Paulina: Yeah. We were attacking them with my husband, so yeah. That was a lot of work, but I use that on a daily basis if I need fonts, scary fonts or friendly fonts or whatever.
Chris: Yeah. That is a heck of an endorsement. You use your own project every day. Yeah. I'm glad you built it then. That's amazing.
There are so many Pens to talk about. I'm just looking at this one called Landscape in a Triangle, and I immediately want it on a hat or a T-shirt or something. It's just beautiful mountain landscape set into a triangle.
But there are a few others that you listed here, some JavaScript experiments. One of them is called When You Can't Decide. How did that one come to be?
Paulina: I built a tiny JavaScript flagging using the slider element.
Chris: Mm-hmm.
Paulina: The input type range, I guess. I guess I would have to pull it up to check. Then I was thinking, okay, how can I use it more creatively, so not just before, after, but play a little bit.
Chris: Right.
Paulina: And then I came up with this idea, so to show a beautiful sea that we get in Poland, the Baltic Sea.
Chris: It's really beautiful. It's interactive, for the people just listening with audio. It's one of those. It's almost like an image comparison slider.
Paulina: Mm-hmm.
Chris: I guess that's quite literally what it is.
Paulina: Yeah.
Chris: But in this case, you've taken it even further in that, as you reveal one side, it's talking about the Baltic Sea in the summertime, which includes the title and content and everything. Not just the image. Then as you slide the image the other way, it reveals a different image. It looks almost like probably the same image with different CSS filters on it.
Paulina: Yeah, or maybe it was like presets in light ... something like that probably.
Chris: Yeah.
Paulina: So that the change was more dramatic.
Chris: Uh-huh.
Paulina: But that could also work with CSS filters, definitely. Yeah.
Chris: Well, it's beautiful. Then it shows you this Baltic Sea during the wintertime and the look of it is much more wintery and beautiful. It's really just a nice experience. You know? God, these all would be so good of a little Gutenberg blocks, I think. Just saying. Just saying.
Paulina: [Laughter]
Chris: It's begging to happen. Yep. Another one here is the header transition one that you mentioned that's currently live on your personal website, so people love your personal website. It's available on CodePen as well - open-source. Fantastic. Is there any other favorites you wanted to talk about here or anything else you wanted to tell people? Perhaps, advice for people hoping to follow in your creative footsteps.
Paulina: Yeah. Yeah. Feel free to follow me on CodePen. I've been not that much active because I've just started a new job, so I guess it's kind of normal. But I'll be back. I'll be back with some new ideas because they're so much fun.
Chris: Yeah, don't worry about that. Every creative person I've talked to -- and it's life, you know. You get excited about certain things, and then they fall off. Then maybe you come back to them. Maybe you don't. It's all okay. That's what makes life interesting and fun. It sounds like yours is very interesting and fun.
Congratulations on the new job and the new citizenship and everything.
Paulina: Thank you. Thank you.
Chris: It was a pleasure to talk to you, and I hope I get to do so again soon.
Paulina: The pleasure is mine. Thank you, Chris. Thank you so much.
Chris: You're welcome.
[Radio channel adjustment]