I had tons of fun talking to Tiffany Choong this week! I loved learning her process on creating countless code art Pokémon characters. Just look at it and wing it! Wild. While I’m not nearly as creative as Tiffany, I feel some kinship looking through her Pens. Like how there are all these amazingly creative ones that clearly took tons of effort, that don’t have nearly the hearts they deserve (c’mon dino loader!), and then relatively simple practical Pens (like a menu) that go nuts with popularity and it’s hard to know why.

Time Jumps

Transcript

[Radio channel adjustment]

Announcer: Today, on CodePen Radio.

Chris Coyier: What's up, everybody? Time for another CodePen Radio - 359. I have another awesome CodePen community member and talented code artist, I would say, Tiffany Choong. Hey, Tiffany. How ya doin'?

Tiffany: Hello. Not too bad. How about you?

Chris: I'm doing awesome. Better known perhaps as @tiffachoo, of course.

Tiffany: [Laughter]

Chris: On Twitter, CodePen, GitHub, and everywhere. You've got one of those -- almost one of those names you can have anywhere. I guess there's an extra O on Twitter, though, huh?

Tiffany: Yeah. Someone stole my double O on Twitter, and I can't manage to grab that. [Laughter]

Chris: Dang. Keep your eye out, people.

Tiffany: I know. [Laughter]

Chris: That's rough. I was like, "Oh, she got all three." Then I looked at my little notes here, and I'm like, "No! There's an extra O. No!"

Tiffany: [Laughter] I know. I was so sad. [Laughter]

Chris: It wasn't my choice, necessarily. My full name is Christopher, and then my whole family called me just "Tiff-fer" or just "Tiff-er," as a kid, so a similar nickname, I'd say.

Tiffany: Oh... [Laughter]

Chris: [Laughter] Then people know you from CodePen. Maybe there are lots of ways to know you. It could be your neighbor in Toronto. I don't know.

Tiffany: [Laughter]

Chris: But if you're listening to this show, CodePen Radio, maybe you know Tiffany's work from CodePen itself, which is highly Pokemon-based, I'd say.

[Laughter]

Chris: There's a lot. Is Tiffachoo perhaps what your Pokemon name would be?

Tiffany: Probably. It's funny because it was just a nickname that a friend gave me once just because of Pikachu.

Chris: Right.

Tiffany: And my name is very close to "chu." [Laughter]

Chris: [Laughter] Yeah, it works. It works. But we can't avoid the Pokemon thing. I've got to know about it. It feels like half your work on CodePen is code art. It's a common-ish thing on CodePen is to see people exploring artistic output of front-end development code. Sometimes it involves just drawing, and that's kind of what you do, too. Although, some of your Pens have animation and stuff applied to it as well, but a lot of them are just straight up recreations of Pokemon.

00:02:21

Tiffany: Yeah. I just enjoy drawing, I guess. It's fun making them in CSS form just straight from reference.

Chris: Reference meaning you're working from some image elsewhere, right?

Tiffany: No, actually. [Laughter]

Chris: Oh, really?!

Tiffany: Yeah. I actually just have another window open with a bunch of Google image tabs, and then I just look at the Pokemon from that angle. Then I'll just draw it using CSS blobby shape things.

Chris: Okay, so there's no-- I was wondering. I was like, "If I had to do this, my first step would probably be to grab one of those (like from a Google image search or whatever) and make a div maybe in the middle of the screen and put that image back there. And then draw the shapes and place them on top of where I think they should go."

You don't even go that far. It's just a reference. You just look.

Tiffany: Yeah. [Laughter]

Chris: Oh, that's pretty rad. Then does the animation come at the end? Here I'm looking at "Rage," for example, who does a little jig. Does a little cute dance. It's probably... I love it.

Was that like, "Okay, it's done. Now what could move?" Was it planned more in advance than that?

00:03:36

Tiffany: For that one in particular, I did kind of reference Aggretsuko, the little red panda show character.

Chris: Mm-hmm.

Tiffany: She had a little dance in the intro of the show, so I kind of had a GIF of that play and then tried to replicate it using CSS animations.

Chris: Nice. Yeah. This one, there's the little dancing, but don't miss the click on the--

[Laughter]

Chris: Which is also just CSS. Cool. It looks like you used the checkbox hack where, when it's checked, then you get this whole other state you can work with, which triggers this whole animation and all that. That's awesome.

Tiffany: Yeah. Yeah, that checkbox hack is very handy.

Chris: Yeah, it sure it. You know just this week I saw a revival of kind of a draft spec for CSS about generic toggles. This is just for fun, so you can literally do whatever you want. You use literally colon checked in CSS. But what you just want is on and off or the toggle of something. There's a spec coming that maybe -- I don't know if we'll actually get it -- would just allow you to set those two states and use them rather than abuse something else. Actually, just allow us to have states. That would be neat.

Tiffany: That would be really neat.

Chris: This also reminds me of that new -- is it called Red or something? There's some new movie coming out of a little panda.

Tiffany: Oh, the little panda. Yeah.

Chris: She gets pissed or whatever.

[Laughter]

Tiffany: Yeah.

Chris: Maybe not pissed, but at least stressed out and turns into this giant thing.

Tiffany: Oh, yeah. That looks really cute.

Chris: All right, so you just wing it, huh? Then for a little bit more on process, how do you draw an oblong head? A lot of them have what would be a circle on the top, but then it chills out. A lot of times just advanced border radius stuff, or what is the stuff that you reach for to make all these shapes?

00:05:43

Tiffany: Yeah. Usually just some fancy border radius stuff. I use a little mix-in to make it easier for myself when I'm creating these little blobby shapes because it's usually--

Chris: Oh, you do.

Tiffany: Yeah, symmetrical blob, so usually the right and left will be exactly the same. Rather than using border bottom, whatever the border radius property is.

Chris: Yeah.

Tiffany: Rather than doing that, I'll use a mix-in to quickly create the top and then the bottom, so then they're exactly the same on either side.

Chris: Oh, and that just happens to be kind of the Pokemon design style is that they're generally symmetric-ish?

Tiffany: Yeah. Yeah.

Chris: Yeah. [Laughter]

Tiffany: Yeah, I don't generally turn the heads to the side a little bit. I just keep them straight on to kind of keep it a little more simple.

Chris: Mm-hmm. Yeah. They're not that simple. I'm looking at the "Let's Snuggle Forever" one now, some of these ones just from your profile itself. They eyes are scribbles and the cheeks are scribbles. That's no joke to pull off in CSS.

Tiffany: Oh, yeah.

Chris: Must be a lot of transforms and I don't even know.

Tiffany: Oh, yeah. Some transforms, rotate, circles.

Chris: Yeah. Right. Right, right, right. So cool. Yeah, border. Yeah, I'm glad you have a border radius helper because that property is deceptive. I bet 90% of usage or more is just like you set one value because all you're trying to do is literally soften the edges of a rectangle. But each corner can have its own radius, and it can have a different X and Y radius. Then there's a slash that gets involved sometimes. You could definitely fill a day of talking about just that thing.

Tiffany: Oh, yeah.

Chris: It's fun to go through your profile because I feel like there's all this code art stuff, fun stuff, and then just sprinkled within it is just like "example." It's just a form or something or something very - I don't know - just super normal and practical front-end developer stuff.

Tiffany: [Laughter]

Chris: Is that your job or you just do front-end development too, right?

00:07:57

Tiffany: Yeah. I actually work at a bank, so sometimes we do some pretty boring things. But some of that is just experimentation.

Chris: You work at a bank. I should have asked you. Not that we don't allow bank people on the show, but it's interesting. [Laughter]

Tiffany: [Laughter] I know. I know.

Chris: That's funny. Does the bank happen to use Vue? It looks like some of that stuff sprinkled in tends to be Vue-based.

Tiffany: Yeah. Yeah, we actually use Vue for a main framework, like all of our main websites use Vue. I actually work very heavily on our design system, so that uses Vue components.

Chris: Oh... Wow! You're deep in Vue. Cool.

Tiffany: Yeah.

Chris: Nice. Do you have a framework of choice for Vue? Do you get to do the Nuxt thing or is just kind of like out of the box Vue? I don't even know how to talk about Vue properly.

Tiffany: Yeah. Well, yeah. We use Next for some, like our documentation site for instance, but mostly we'll just use Vue straight out of the box and make our own components.

Chris: Mm-hmm.

Tiffany: We'll use our library on all of our websites - kind of thing.

Chris: It looks like Vue Conf rolled through town. It probably was virtual the last couple of times though, huh? Is it coming back?

Tiffany: Yeah.

Chris: Yeah.

Tiffany: Yeah, I think it was virtual the last two times. I'm not too sure about this time, actually. I haven't been paying attention, to be honest.

Chris: Okay. You're not officially involved but go. I would go if Vue Conf came to my town. That sounds fun.

Tiffany: Yeah, that was fun.

Chris: Nice. Nice. You get to use it at work, but do you like it too? [Laughter]

Tiffany: [Laughter]

Chris: You know that could be tricky because not everybody loves what they have to do at work.

00:09:42

Tiffany: Oh, yeah. Yeah, I actually do enjoy using Vue. It is very easy to pick up and fun to use.

Chris: Yeah. I don't know. I only ask because it seems like the people I know that use Vue a lot, there's a pretty tight correlation to liking it and using it (for whatever reason) that doesn't necessarily exist in, for example, React. I even work with people who are like, "Yes, I know we use this but look at how much easier it would have been if we did it in Vue." You know?

Tiffany: [Laughter] Yeah. I can't say I've tried React yet, but... or much, I'd say. Only a little bit.

Chris: I just write it all day and I'm the other way around. I haven't used Vue that much. I'm sure I would like it if I did it, but just occasion doesn't strike. You know?

As nerdy as I am and love playing with Web tech, there's only so many hours in the day. Sometimes learning a whole new framework just for fun doesn't quite--

Tiffany: Yeah, exactly.

Chris: --enter the day properly. Oh, there's one here that's just so great, but you left it as untitled, so it just didn't get the due that it was worth. There's this dinosaur walking across the screen gobbling up the screen. Then the meter bar kind of fills up. Yeah, it's a sweet page loader, but it only has four hearts. It just doesn't have a cool title. I don't know.

Tiffany: Oh, yeah. I kind of left that one in the back because--

Chris: [Laughter]

Tiffany: --it was actually an Easter Egg.

Chris: Oh, nice. Here's me calling out your secret Pens. [Laughter]

Tiffany: It's all good. It's all good.

[Laughter]

Chris: Oh, nice. So, Toronto. For some reason, I associate the town with having - I don't know - maybe it's just happenstance, but a pretty good bootcamp or code school kind of scene. Did you do that, or were you ever involved in that? Is that totally irrelevant to you?

00:11:33

Tiffany: I've heard of it, yeah, and I know a few people who have taken the bootcamp, but I actually went to just a plain old college.

Chris: Boring old college. Yeah, me too.

Tiffany: Yeah. Nothing exciting.

Chris: Yeah, that's cool. But were you able to -- what's college like these days? [Laughter] Did you major in Web stuff or is it not really like that?

Tiffany: Yeah. It was essentially -- well, I think this was seven or so years ago, maybe eight. I don't even know.

Chris: Mm-hmm.

Tiffany: But it was essentially a Web design course that I took. It kind of went all over the place. We learned some HTML. We learned some PHP, some Web design, some animation.

Chris: Oh, really?!

Tiffany: Even a little bit of print.

Chris: Oh, yeah. Okay. Like, yeah, you should be aware of InDesign or whatever. Here you go.

Tiffany: Right.

Chris: Yeah, that's cool. Then you get a BAA or a BFA?

Tiffany: No, just a piece of paper from college.

[Laughter]

Chris: But you liked it enough. You actually do the thing you went to college for, so you're in that 10% of people. I mean it seems like you have some joy for it. It seems like your online presence is very joyful, in general. Is that--?

00:12:53

Tiffany: Yeah. Yeah. I definitely do enjoy coding. I also like designing and drawing, so it all just kind of bundles together in this whole - eh. [Laughter]

Chris: Yeah. [Laughter] Yeah, if you have some free time, you might literally choose to spend it writing angle brackets and curly brackets and stuff. There's just something special about that, I think. You know? Do you have any idea what draws you to it?

Tiffany: No, I don't know. I guess I've been sort of interested in this for so long that I've enjoyed it for that long. It still makes me happy.

Chris: Mm-hmm.

Tiffany: Ever since I was a little one on Neopets trying to make my things all pretty.

[Laughter]

Chris: Well, tell that story. I know there are some classics in our industry, like you got into it because MySpace, and Neopets was one of those, right? But I didn't do that particular one. Was it a thing where you could apply custom CSS (if you knew how) to your profile or whatever?

Tiffany: Yeah. Essentially, yeah, you could decorate your little profile and your pets' pages with some custom CSS. I don't think they allowed you to put JavaScript or anything fancy, obviously.

Chris: But it was custom CSS, huh?

Tiffany: Yeah, exactly.

Chris: Nice! Wow, that's nice. What was yours like? Do you even remember? Do you have a screenshot? [Laughter]

Tiffany: I wish I had a screenshot, but I don't remember.

Chris: Yeah, that's all right. It's sad that sometimes those things just disappear to time.

Tiffany: Yeah.

Chris: Not fair. Don't delete my stuff, yo. Although, it's funny. Some of the things we did when we were -- I bet when I had my first MySpace account, I probably wasn't 18. You know? Now the terms of service for websites are all like, "You cannot sign up for..."

We even have to do that on CodePen itself. You know? There's something literally in our terms that says you have to be 18 in order to even theoretically agree to these terms, which I'm sure is not adhered to perfectly. But I think the clause is then like, "But if you're not, then it's implied consent from your parent or guardian," or something.

Tiffany: Ah...

Chris: Anyway. [Laughter] It's just weird to think about this hive of custom profiles from children who probably didn't properly agree to anything.

Tiffany: Oh, right.

Chris: [Laughter]

Tiffany: Yeah. I was definitely maybe not even over 13. [Laughter]

Chris: Yeah. I don't actually know if that was uncouth or not. Maybe they had a special terms of service or something that allowed for it. But I think the problem is that you can't legally agree to anything until you're 18. You know?

Tiffany: Yeah. Yeah.

Chris: Oh, interesting. What are you some of your favorites? Do you have a couple? Any particular Pens that you have made that you particularly loved working on or that took forever or turned out better than you thought?

00:15:58

Tiffany: Hmm... Um, there was this curvy Pen that I made with a user form that inhaled your email address kind of thing.

[Laughter]

Chris: Inhaled your email address?

Tiffany: [Laughter] Yeah.

Chris: Yeah, that sounds like my style. That's awesome. What's the name of that one?

Tiffany: That one is called "Delivering Happiness." I drew the SVG by hand and then drew all of the states of his face.

Chris: Wow!

Tiffany: And that just took so long.

Chris: Wow. That's amazing. Oh, look. When you Google it, you end up on other sites that kind of picked it up as inspiration.

Tiffany: Oh, wow.

Chris: That's awesome. At least one called The Animated Web that I'm looking at. Oh, yeah. Kirby as the mailman sucking down the email address. That's just fantastic.

[Laughter]

Chris: I was going to ask you about SVG, but sometimes -- not that it's a touchy subject, but sometimes people are like -- in a way, it doesn't matter what technology you use when you do the CSS. I'm sure you've seen that online--I mean you have a Twitter account after all--of people being weirdly defensive about, like, "Why would you do this in CSS? There are other technologies that you could do it in that are better technologies."

You're like, "Dude, it's a Pokemon. What the hell do you care?" You know?

[Laughter]

00:17:22

Tiffany: Yeah. Exactly.

Chris: Not to mention, are we in the business of telling artists what their medium should be now? That's pretty weird.

Tiffany: Yeah.

Chris: But SVG, I wrote a book on it at one time. I think it's pretty cool. It is a pretty neat format for drawing on the Web because it has this special syntax that allows you to draw curves and stuff that CSS just kind of sucks at, really. You know?

Obviously, there are ways to fake it. We've seen, essentially, oil paintings in CSS, so lots of possibilities there. If you wanted to just draw a wavy line, that's going to suck in CSS compared to perhaps just a couple of characters in SVG. In this case, you hand-drew it I SVG. Tell me about it.

Tiffany: Yeah. I actually took graphic design before Web design.

Chris: Oh...

Tiffany: So, I kind of know how to handle Illustrator fairly well, so I just hand-drew it with a pen tool and created all the circles and funny eye shapes and whatnot. Then I would just export it into SVG, then take it into the code editor, then separate all the pieces out, and then create all the different states for his face.

Chris: Oh, nice. Nice. Yeah. Illustrator, probably? What was the vector editing tool of choice?

Tiffany: Yeah, Illustrator. I definitely like Illustrator the best.

Chris: Yeah. Me too, but I attribute college to it, really, because that's what we learned there. Then you get used to the pen tool, which is its own little--

Tiffany: Mm-hmm.

Chris: It's almost like reminiscent of SVG. It's its own design system - in a way - all the little point manipulation tools you have to learn. Then you use something like Figma or whatever, and you're like, "No. Love you, but you don't quite have the details right on your pen tool." Even switching over to Photoshop, you're like, "What is this crippled pen tool?"

[Laughter]

Tiffany: Yeah. Illustrator definitely handles the pen tool the best. I prefer the way it exports the SVG as well because sometimes Figma and Sketch, they'll give me all these weird transforms on my elements.

Chris: Oh, right.

Tiffany: I'm like, "Oh, no!"

Chris: Yeah. You're like, "I didn't ask for that. What is the transform?"

Tiffany: Yeah.

Chris: Yeah. I love it when it just has three random groups, like that G-tag in SVG, too. I get it if I made it a layer or something. Maybe that's how it would express it, but sometimes there's just three random G's around everything that don't have a transform or anything, and you're like, "What are you doing?!"

Tiffany: Yeah. Why are you here?

Chris: Yeah. [Laughter] You're not bringing anything to the part. Yeah.

[Laughter]

Chris: Illustrator has gotten especially good at it lately. They must have gotten-- I don't know if that was always true. I think I lived through a little period where Illustrator exports were maybe the worst of the exports. They had all kinds of metadata crap.

Tiffany: Oh, yeah. Yeah.

Chris: Wanting to, like, "This was made in Illustrator!" You're like, "Nobody cares, Illustrator!"

Tiffany: [Laughter] Exactly. Highlight, delete.

Chris: Yeah. Yeah, exactly. Yeah. But I don't know. There must have been a little fight about it at some point because now all the tools do an okay-ish job. I think you still generally want to -- if it's just headed straight for production, you probably still want to run it through SVG - whatever - cleaner, minimizer kind of thing.

Tiffany: Mm-hmm.

Chris: It's probably still going to get a little extra benefit than straight out of the app.

Tiffany: Oh, yeah.

Chris: Mostly okay these days, you know. I always found it funny, too, when it would expert a float value, like 16.9382179. You know? That has way more precision than any SVG would ever need.

Tiffany: Oh, yeah. It's like, "I don't need this many decimal places."

[Laughter]

Chris: Right. Like maybe if my view box was 0011 or something, but it's not, so--

Tiffany: Right. I tried to make it perfect. [Laughter]

Chris: Sweet. Usually, you don't do the SVG thing. Even with your pen tool prowess, you still go for just divs and stuff a lot of times, huh?

00:21:44

Tiffany: Yeah. Yeah, there is something enjoyable about challenging yourself to make blobby shapes in CSS rather than that magic pen tool.

Chris: But it's not your only thing. Sometimes you do SVG. Sometimes they have interactivity via checkboxes. Sometimes they have interactivity via Vue or something. Here's a Kirby example I'm looking at from Kirby's grid land where you built Kirby with pixels in a grid. That's very different.

Tiffany: Oh, yeah. That was more of an experimentation because I had never used Grid before, so I just was like, "Oh, what's this? What's it called? Grid template area thing all about."

Chris: Yeah. Right. Yeah, this is exceptionally weird because you drew. The end result is the end result, but it's almost like you could look at the code, which is Sass, in this case. I'm sure it's giving you some kind of a hand where you set a variable to the grid template where you literally drew Kirby in the CSS.

[Laughter]

Tiffany: Yeah.

Chris: Which is just so cool. Then rather than name -- I mean they're named, but they're named with an emoji, so it visually looked like Kirby in there, which is pretty rad.

Tiffany: Yeah.

Chris: That way you can say, "Any grid that has a smiley face on it, make pink," or whatever, right? Anyone with a clock on it, make white - or something.

Tiffany: Mm-hmm. Exactly.

Chris: That's so cool. It's so cool. But you just have to switch between them like that, right? You can't animate a grid area, right?

Tiffany: Um, if....

Chris: It's more like a frame or something?

Tiffany: Yeah, I can't remember exactly how I ended up animating that, but I do remember making all of the frames in grid template areas.

Chris: Right, but when it shifts from one to the next, boop, it just does it - I think.

Tiffany: Yeah.

Chris: Yeah. It doesn't look like they slowly morph or something.

Tiffany: Yeah, exactly.

Chris: Yeah. But, oh, man. But you added a lot to it. It moves, but then the whole thing kind of moves anyway. This is very fancy.

Tiffany: Well, thank you.

Chris: Wonderful experiment, yeah. That's probably the kind of thing that doesn't end up on a bank website.

Tiffany: Oh, no.

[Laughter]

Chris: Nice. That's fun. Now that we're talking about it more, do any more Pens occur to you that were particularly weird or interesting?

Tiffany: Not as weird as that Kirby was.

[Laughter]

Chris: Yeah.

Tiffany: That was definitely a full experiment because, at my work, we don't use CSS Grid because--

Chris: Oh, IE 11?

Tiffany: Well, we still kind of support IE 11.

Chris: Yeah. There's a guest writer for CSS-Tricks once that was obsessed with trying to teach the world that you do not need to give up on CSS Grid just because you do support IE 11 because IE 11 had this really weird special syntax just for it for CSS Grid and that auto-prefixer could mostly get there by doing it. But, yeah, I really, really don't blame you. I think that would be too -- because I guess you're signing yourself up to having to open IE 11 a whole lot.

Tiffany: Oh, yeah.

Chris: But I guess you maybe do that anyway. Do you have to?

Tiffany: Yeah. Sometimes.

Chris: Yeah.

00:25:00

Tiffany: We've kind of strayed away slightly nowadays, but back when I made that Pen, we were definitely supporting IE 11 heavily, so I would have to open it. It would take so long to load.

Chris: Yeah. How'd you do it? Did you use one of those browser tools that can spin it up, like even though you're using Chrome or Safari or Firefox or something? You could spin it up in the browser, or do you have a Windows box sitting around that you can--?

Tiffany: Um, yeah. We actually have a VPN thing that has it on it, so I just use it there.

Chris: Oh... No. Yeah.

Tiffany: Nothing so fancy, but--

Chris: Yeah. It's nobody's favorite to do, but I always appreciate it when people did it. It's like, sure it sucks a little bit, but so do a lot of people's jobs.

[Laughter]

Chris: I don't know. We work for a living, right? It doesn't mean that every second of work has to be this perfect fantasy. That's the job. You have users. The users need to do their banking or whatever they need to do. The computer they happen to be using has this browser on it, so it's your freakin' job to make it work.

Tiffany: [Laughter] Exactly.

Chris: Get over yourself. You know? [Laughter]

Tiffany: [Laughter] Yeah. IE support sucks, but we got this.

Chris: I'm glad. It's so easy to break, unfortunately, too. JavaScript is especially hard. CSS has all these more graceful failure states. You try to do a spread in JavaScript or something, and it might just white the page.

Tiffany: Yeah.

Chris: That's especially not ideal for a bank, I would think. [Laughter]

Tiffany: Yeah. No. Thanks to Babel, all is well though.

Chris: Oh, right. Yeah. Oh, man. Yeah, I'd put Babel on its lowest possible setting, like whatever, transpile the crap out of this is, and ... turn on. Yeah.

Tiffany: Oh, yeah. Just do your worst. [Laughter]

Chris: Yeah. [Laughter] Yeah. I want to see a five megabyte output.

Tiffany: [Laughter]

Chris: Not really, but kinda. Okay. Awesome. There are a couple of Pens that were done with the hashtag #CodePenChallenge on it too. That's pretty rad. Marie on our team mostly is in charge of putting those together, so I'm sure she's pleased to see someone like you participating in these once in a while.

Yeah. Anyway, were they fun or any story on them?

00:27:24

Tiffany: Oh, they were fun. Yeah. I would love to participate more in them. But, yeah, sometimes I would rather make CSS art.

Chris: Yeah. Right. Life happens.

Tiffany: Yeah.

Chris: Yeah, or the muse is somewhere else.

Tiffany: Exactly. But yeah, they are very fun. I do like having an end goal in mind rather than having to think something up in my own head.

Chris: Yeah. Right. I think that's probably the top feedback for them is sometimes you're like -- I don't know. Like there's a special mood that's like, I feel like being creative but not white page creative. [Laughter]

Tiffany: Mm-hmm. Exactly. [Laughter] I would like some sort of direction.

Chris: There's a subreddit for writing prompt that's pretty fun to follow because the best writing prompts are like, I want to write, but I want somebody else to tell me what to write about or give me some really juicy little lead in, or whatever. That's a pretty fun one to follow.

Here's another classic is when a Pen gets super popular on you that maybe you didn't know. Though, maybe you knew in this case. But you have one called "Mike's Magical Mobile Mega Menu" that is just a green page, and it just has a hamburger menu on it and a menu slides out. Perhaps not as exciting as a Pokemon that turns red and yells at you or anything like that.

Tiffany: Yeah.

Chris: But this is super popular. It's probably one of your most popular Pens.

00:28:50

Tiffany: I know. I don't know how that one just got all the way up here, but that one was actually built for a work concept. I just kind of made it pretty, prettier than our actual brand, I guess.

Chris: Yeah.

Tiffany: It's not too -- you know.

Chris: Yeah. It's well done, though. It's cool. What's notable about it to me is that it can go five levels deep. A lot of times, you see a menu that opens up. Fine. A hamburger menu is not that hard. But then how do you do two levels? Does it expand even further? Does it cover the previous menu? How do you handle the back interaction? It's very nuanced and detailed in that way, so it's super well done, but almost every CodePen developer I've talked to has some kind of Pen like this that's like, "What?! That one is popular? Okay."

Tiffany: Yeah. It's just like, how did this happen?

[Laughter]

Chris: Yeah. Pretty cool. The name probably doesn't hurt you, in a way. You know? If you Google MMMMM--

[Laughter]

Chris: Oh, not really, but yeah. It is easy to find in that way. Well, okay. Fantastic. I guess we're coming up on the end here. Do you have any advice for anybody or anything you want to share with the greater CodePen Radio listening audience?

Tiffany: Yeah. Keep coding awesome things.

Chris: Yeah! Keep coding awesome things.

[Laughter]

Chris: You heard it from Tiffany. Well, thanks so much for coming on and chatting with me. I really appreciate it. Yeah. Thanks for doing awesome work. Take care.

Tiffany: Thank you. Thank you for having me.

[Radio channel adjustment]