Olivia Ng has done loads of wonderful work here on CodePen and off (check out her super cool travel bucket list site) She got started just out of pure desire to build things. “I just really like the internet” she told me. Hear hear! Her eye for design takes all her work to the next level. She had a particular focus on grid for a while there, and used those interesting designs to teach it. Also find her on Twitter and on her personal website.

Time Jumps

Sponsor: Jetpack

There are lots of reasons to look at Jetpack for your self-hosted WordPress site. One of which is the powerful search upgrade you get just by flipping a switch. Say you run a lot of WordPress sites, perhaps for clients as an agency would, now Jetpack offers a Licesning Dashboard for managing all the Jetpack subscriptions so that becomes a lot easier.

Transcript

[Radio channel adjustment]

Announcer: Today, on CodePen Radio.

Chris Coyier: Hey, everybody. Time for another CodePen Radio. This is 349, and I'm so stoked to have Olivia Ng on! Hey, Olivia. It's a pleasure to have you on. I'm a big fan.

Olivia Ng: Ah... Thank you. I'm such a huge fan of yours as well, actually.

Chris: Ah, likewise. And I'm a big fan because I think I know you mostly through CodePen and through creative coding stuff that you've done. It's not like you'd know the complete person, but you get a good sense of somebody's creative spirit through the work that they put out into the world.

You've put a lot of it out into the world, and it all has such a - I don't know - cool, positive, interesting, creative vibe to it that I thought I'd have you on the show and we could talk about it. I've been on a little kick of getting CodePen people on the show. So, you are very high on my list of someone to talk to.

You are on CodePen, oliviale. [Laughter] I guess you--

Olivia: Olivia Le, yeah, [laughter] is more like it.

Chris: Then meowlivia on a lot of other platforms, including Twitter (with an underscore). You got the domain name, though. You got the dot-com, meowlivia.com.

Olivia: I did get it, yes.

Chris: Yep.

Olivia: Yes.

Chris: All right, but you did warn me (before the top of the show) that you haven't done a lot of creative coding in a little while, and I totally understand that. Neither have I, to be frank.

Olivia: [Laughter]

Chris: But that's okay. It's not like some requirement. There are ebbs and flows to life and what you're into at the time and stuff.

Apologies if I dwell up on some old stuff, like, "Oh, I coded that three years ago," kind of thing, or more.

Olivia: Oh, no. It's totally fine.

Chris: Mm-hmm.

Olivia: I think it's a good trip down memory lane, I suppose.

Chris: Mm-hmm. Well, let's take that trip down memory lane, I suppose, then.

Olivia: [Laughter]

Chris: Can you tell me, just briefly? I know we only have half an hour here, but what's the, like, why coding at all, you know? How did you even get into it? Not even creative coding, but just decide to do Web stuff?

00:02:16

Olivia: Oh, um, it's actually really simple. I just really like the Internet. I studied business and, before I graduated, like at the tail end of the fourth year, my senior year, I didn't even think that Web design or Web development was a thing. I don't know. I guess sites just appeared.

I didn't think that it could just be my career because I was studying business. The typical track would just go finance or marketing and stuff.

Then I thought, you know what? I actually really like design stuff. I was doing graphic design on the side just for fun.

Chris: Mm-hmm.

Olivia: Then I took a course on just simple HTML and CSS. It's the simplest thing. We actually do internal CSS, internal style sheets, nothing fancy, even though, maybe about seven years ago, you could see some really cool stuff already. But then it got me into that.

What I really like about coding, in general, is I really like design and I really like seeing the design come to life. This is why I just love CSS because the feedback is almost immediate. It's actually immediate. You put something out. You see something. And then you go back and forth.

Chris: Yep.

Olivia: This is why I love CodePen as well because I can just see, and I can just click around, and so I spend hours on CodePen, generally.

Chris: Mm-hmm.

Olivia: This is also kind of why I don't really like JavaScript. [Laughter] I stay on the side of CSS.

This is what happened. I stumbled upon it, and I thought that I could give it a shot. At that time, it wasn't something I studied. Being Asian, it's a bit scary to go into that, so I thought I would give myself maybe a few months. If I find an internship, then maybe I can get into it, and I did.

Chris: I see. Even taking a few steps towards it was like, "Oh, I'm nervous because I might be wasting time"?

00:04:13

Olivia: Yeah, yeah, yeah. So, I coded up a portfolio. I had no idea what I was doing. You take bits and pieces of code from various tutorials, and if it shows that, great. Then you're like, "Great, it works." [Laughter]

Chris: Yeah.

Olivia: Even though the code is mangled. [Laughter] It's what happened. It's what happened. I did a decent enough portfolio. It got some attention.

Chris: Uh-huh.

Olivia: Somebody was like, "Maybe you can give this person a shot. Not super great, but maybe there's potential somewhere." I think that's how I opened the door for me, and I've been in it ever since. Yeah.

Chris: Then it keeps rolling from there? Well, that's great. Your angle was just for the love of design, which is really appreciate. I feel like I still--

I mean I just was telling somebody the other day. If I had a different career, could pivot a little bit, I'm always so envious of graphic design, just design - period. When you see a great design, you're like, "Oh, that's so cool! Why can't I do that?" You know? Even though I do lots of other stuff, I'm happy with my career (generally), I still am so jealous of the great designers.

Olivia: Yeah. It doesn't end there.

Chris: No. [Laughter]

Olivia: Because I do a lot of design, and then I see illustrations. I was like, "Why can't I do that?"

[Laughter]

Olivia: You know? Yeah, there are so many things. I'm just like, I have to be content with where I am right now. You know that's how it is.

Chris: I didn't mean to fuel any--

Olivia: Oh, no, no, no.

Chris: --any inner angst because I have it, too.

Olivia: [Laughter] It's fine.

Chris: I like that perhaps -- theoretical, outside of you or I -- if you're really into design and then I think that's a good path forward that you're into design so much that you learn whatever tools you need to pull off the design. That you know what good design is. You have that inner critique. You're always trying to get better. You think your own work is crap because you have such a high bar that you're trying to hit. That's very different than somebody who CSS just clicks with them and they're really good at understanding CSS or converting other people's designs or understanding the system of it but aren't necessarily that into design. Those are two different people, and I feel like I know them both. I worry that I'm more in the analytical CSS side of it. I wish I was more in the creative side.

Anyway, I think that perhaps that propels you. I can tell by looking at your designs. I know this is a radio show, so I wish I could show people all your Pens. Of course, you can just go to meowlivia.com and bounce around and see your work. They'll see what I see if they go there.

Olivia: Oh, sorry. I know you were saying there's so much analytical CSS that you do, but I was going to say that there's so much value in knowing how to do that, so that's also amazing.

00:07:03

[Guitar music starts]

Chris: This episode of CodePen Radio is brought to you in part by Jetpack, jetpack.com. It's a plugin for your self-hosted WordPress site. It does all kinds of stuff that makes your WordPress site better.

I'm a believer. I was just writing up all the ways I use it over on css-tricks.com. Many, many ways.

Just for one, though, they have Jetpack Search, so you flip it on and, oh, it's working. It requires no integration or work from you. You click onto a search form and it brings up this full-page search experience that is super smart. It's algorithmically powered proper search, unlike the default, built-in WordPress search, which is, in my opinion, basically unusable on sites of a certain size, like CSS-Tricks is (and probably most WordPress sites). They have a lot of content on it. You need good, fast, reliable search, and that's what Jetpack Search is, and that's one of a million things it does.

Let's say you're an agency and you're like, "We build WordPress sites for people," which is pretty common, right? It's just a big, popular, reliable CSS that's going to be around. You can build anything with it. CMS, I should have said.

Just part of your policy as an agency is to put Jetpack on sites because it helps with security. It helps with adding super useful features to it. It helps with backups and keeping the site secure. It does all these great things. Why not put it on every single site?

Well, they simplified for that for agencies because Jetpack is a paid product. How do you wrangle all the subscriptions and make sure that you're dealing with them all properly? They have this new dashboard for agencies, essentially, a licensing dashboard. So, you can keep track of all that stuff together. It's not like go over here and log into this account, this account, and this account, and manage it all separately, which could be a pain in the butt. It's now totally simplified.

If you're in that market, make sure you check out the link in this post. They announced it last October, announcing Jetpack licensing for agencies and professionals. Certainly, if I was in that world, I'd be doing it. I might even do it anyway because I have Jetpack on five or six sites - maybe more.

Thanks for the support. Bye.

[Guitar music ends]

00:09:18

Chris: Well, here's a good example of it. On meowlivia.com, there's a blog. There are a couple of blog posts on there. You know there's a good amount.

There's a post--I know this probably doesn't feel super fresh to you because it looks like it's a little over a year old--how you can get started with CSS Grid.

I've written CSS Grid tutorials, too, but yours, all the examples in it are not just like, "Here is some graph paper," [laughter] or "Here is the holy grail layout in CSS." It's like, "I'm going to design the Hogwarts train ticket."

It starts with a bingo card, so I guess that's graph paper. Then really just levels up. All the demos in it are just interesting and beautiful and stuff.

If somebody out there is like, "Something like CSS Grid doesn't click with me because all the tutorials are so boring," like, "Show me what this thing is really capable of," that they would do well landing on your article on it because every single demo in it is real world.

I don't know. Maybe it's not every day you need to design a periodic table on the Internet - or whatever. But a lot of the other stuff is calendars, interesting card layouts, and layouts that just aren't what you see every day on the Web. But pulled off with CSS Grid, so I feel like you really went on a CSS Grid bender there for a while. [Laughter]

Olivia: Yes. I think at some point I was trying to hit 50.

Chris: Oh!

Olivia: I think I had like 40, 30, 38, or something. I'm trying to hit 50. But like you said, I do really like coding things that I see every day in life. It doesn't have to be--

I know the periodic tables was a one-off. I saw it one time on the Internet and I said, "I'm going to replicate it," but things like calendars. I see bingo cards. I see tickets all the time - that kind of thing. That's why a lot of my ideas, if you see, they're actually quite simple.

Chris: I don't know.

Olivia: CSS-wise and design-wise as well.

[Laughter]

Olivia: I think the idea is simple, and then the execution, it takes a while to tweak it, to make it look complicated.

Chris: Especially because the details are good too. It's not just like, "Can I get this layout quite right?" It's like -- I don't know. The paddings in the margin are just right enough to look really professional and the typography involved isn't like you just left Times New Roman in place or picked a Google Font or whatever. Even if you did pick a Google font, it's like the right Google Font. There's enough stuff to get right in design beyond just the basic stuff.

I feel like I've beat a dead horse with that a little bit, but there's a pretty popular post you had of a newspaper layout, The CodePen Times with the funny headline "Woman spends too much time on CodePens despite advice;"

Olivia: [Laughter]

Chris: "No plans to stop." Which is hilarious, but it's a huge grid of newspaper that looks just super cool. It has that newspaper look, like the New York Times kind of has - and stuff. I wonder. Since that was a couple of years ago, I look at that one, and I'm like, "I wonder what Subgrid is going to do to Olivia."

It doesn't look like just one grid. I don't know how into Subgrid are you. Is that changing the game a little bit?

00:12:32

Olivia: I tried it a couple of times. But because this is not something that has come into the browsers, all the browsers yet, so it's not something that I get to play around with as much as I like to.

Chris: Oh, so you do take that pretty seriously in your demos is like, "Well, that's just not ready yet, so I'm not going to do it."

Olivia: Yeah. It's very hard as well. Then when you tweak something, it's like, "Oh, sorry. It's only available on X, Y, or Z."

Chris: Yeah.

Olivia: I know that sometimes that's fine, especially the crazy CSS illustrations, obviously. That one is okay. But I find it like if you have to put an asterisk on it, I feel like kind of - ahh. [Laughter]

So, a lot of times when I look at it, I'll be like, "I'll just wait for the thing to properly come out so that I can actually, you know, really sit down and learn about it.

Chris: Right.

Olivia: You want to learn about something you can use at work as well. [Laughter]

Chris: Ah, double duty. Yeah.

Olivia: Yeah.

Chris: Not just learning for learnings sake around here.

Olivia: Mm-hmm.

Chris: What are we, scientists?

Olivia: [Laughter]

Chris: Yeah. So cool, though, and the newspaper isn't just fake content. It's promoting your other Pens. It's really a fun one.

I just thought of Subgrid because it looks like there's probably a lot of opportunity in here where you're like, "Well, okay. There's one big outside grid and now I'm going to have to make a brand new grid inside." It just seems like the perfect kind of demo that would benefit from it.

Olivia: Oh, for sure.

Chris: But you're right that, yeah, Firefox only kind of thing.

Olivia: Yeah.

Chris: Which is a little unfortunate.

Olivia: Yeah, and I have no doubt that Subgrid would totally reduce the amount of code or repeat code. This is just what grid was doing, right? It was just reducing a whole bunch we could have done with Flex, in Flexbox, but then it would be complicated.

Then Grid came along and it was just one line. You're like, bam. [Laughter] So, I'm assuming that Subgrid is going to do something really similar, and I'm looking forward to it. Yeah.

Chris: That would be really fun. Somebody should go to this particular Pen and try to do it in Flex, only using Float. [Laughter]

Olivia: Right. Yeah. [Laughter]

Chris: Good luck. Even if you pulled it off, it would be so fragile. Oh, anyway. That's great.

Let's look at some of your other Pens. I know we can't look because of radio kind of thing. I found this to be true talking to other people on CodePen. I mentioned there's like, yeah, but the typography is nice, too. Yeah, but the colors are nice, too. Yeah, but there's just a feel to the gestalt of the Pen that's right, and that takes things a long way. It's not just an interesting idea, but the execution of it is good as well, and that's true in all of yours.

But there are other little CodePen tricks, like you have a very popular Pen with toggles on it. Toggles are just like, you know, catnip for CodePen. That's almost a trick. Design some toggles. You'll get some likes.

But yours are exceptional, of course. The pancake is hilarious. You toggle it on and pancakes fall from the sky.

Olivia: Mm-hmm.

Chris: And onto the pancake.

Olivia: Totally ideas you cannot use in real life.

Chris: [Laughter] Yeah.

Olivia: That was the idea I was really going for, like things you cannot do in production. But you know what? It looks really, really cute. [Laughter] It was my idea, yeah.

Chris: But we can hope that somebody who got the job to design -- I know you're in Malaysia at the moment, but a popular American chain is the International House of Pancakes. Somebody has got that job. There is a front-end Web developer out there who works on pancake related websites, and we can just hope that they see this and do it. Just put it down in the footer there. Make it when you toggle it on that the whole website gets Comic Sans or something.

Olivia: It's nice idea. Yeah.

[Laughter]

00:16:21

Chris: One of your CSS Grid demos does double duty. It's interesting for Grid. It has interesting interactivity in it. The point of it is color palates, and you use the metaphor of makeup to do the color palates. You open the blue on blue and there's an interesting layout in it of different blues that look like one of those handheld makeup palate kind of things. What was the story with that one? It's really cool. Each one you open has a different little Grid Layout in it.

Olivia: You know that was one of the -- I would say if I would rank the simplest ideas or how the ideas come to me, that is ten seconds. It took ten seconds to come across the idea.

[Laughter]

Chris: Yeah.

Olivia: I saw a makeup palate and I was like, "You know what? This is the perfect way to practice Grid as well."

Chris: Mm-hmm.

Olivia: When you want to make something really cool, throw in a couple of lines and see what you get. That was just the idea, really. I saw a couple of makeup palates and it just reminded me of a complicated Grid.

Chris: Yeah, I see it.

Olivia: Because I didn't just want it to be straight up similar columns, similar rows, and what not. Yeah, it was actually a very simple idea. There's actually not much story to it.

Chris: No, but you got to see it. I feel like they say that in photography sometimes. Not that I'm that educated in it, but that'll be a compliment to another photographer will be, "Well seen."

Olivia: [Laughter]

Chris: You saw something and you took a photo of it that maybe everybody else saw but you had the foresight to take the photo when it was seen. You saw something there that everybody else has seen too, but you put a point on it.

Olivia: Yeah. I suppose this one comes with practice, actually. I think also this one is very much a designer thing.

When you look at a poster, you start criticizing all the details. You start looking--

Chris: Mm-hmm.

Olivia: This is not just, "Oh, this is a cool poster." You start looking at -- you break down the typography, what colors, why did they choose those colors, and so on.

It started - - I don't know. I guess this is a symptom of too much Grid. At some point, when I was looking at things, I would be like, "Is there a grid in it?" I would just try and see grids in things.

Chris: I see! Even if it -- because sometimes it's very obvious, right? Now I'm looking at this restaurant website you did - or something - that has different avocado toast and stuff on it. There are big black thick lines that just scream, "This has a grid!" You know? But sometimes it's not so clear, right?

00:18:53

Olivia: No, so one of my ideas that it didn't come to life because I knew it was going to take too much time was a kitchen. You know when you look at a kitchen, you see the cabinets?

Chris: Mm-hmm.

Olivia: Then there's a stove ... sink.

Chris: Oh...

Olivia: I was -- that is a perfect grid thing that you can replicate. It just will take too much time for me to do the details. That's why I didn't get to do that.

Chris: I've seen you do shelves in the past, like bookshelves with cavities in it that also is very grid-like. But you can see the grid, but then the illustration that you snuck in there kind of breaks the grid, in a way. I don't know. It's great.

Olivia: Yeah.

Chris: The grid is one thing, but how do you add interest to it later?

Olivia: Yeah.

Chris: You're good at that as well.

Olivia: I think it just proves that you can actually pick the simplest ideas and then maybe just spend some time really refining the details. Then it will look something completely different from what you expect in the beginning.

Chris: Oh...

Olivia: Especially if I'm trying to encourage somebody to do something complicated, I would just say break it down to the simplest element that you can think of and then slowly build from there.

Chris: Mm-hmm.

Olivia: Otherwise, you're just stressing yourself out. [Laughter]

Chris: Do you do the "keep this private" for a while?

Olivia: Yes.

Chris: Then maybe walk away from it, come back, walk away from it, come back? It's not just like, "Okay. Done. Go."

Olivia: No. Actually, it's partial. I think if I get the idea, I put it down in a notebook or I write it down somewhere.

Chris: Okay.

Olivia: Even sketch it out. If I do have the time, then I will do it in one sitting. But if not, I will not start on it.

Chris: Okay. Interesting. Interesting.

Olivia: Basically, yeah. Yeah, it's just a weird thing, but mainly because it's a CodePen, so I always have a hard stop. Otherwise, I will just spend hours on CodePen, like ten hours just refining details.

Four hours, done, that's it. It's going out. I don't want to see this anymore. [Laughter] That's why I rarely go back to my old Pens to try and refine it because sometimes I feel like, "You know what? It's done. I'm proud of it."

Chris: Mm-hmm.

Olivia: "Let it go out and let it stay there." But that's it. I do find that I prefer to do it in one sitting.

Chris: Hmm. Interesting.

Olivia: Which is not healthy.

Chris: Yeah. I would have thought-- I couldn't have guessed either way. I really have tendency both ways, and it's not just a Pen. It's a blog post or whatever else in that there's 100% chance that it's better if I let it sit a day and come back to it. But my tendency is not to. My tendency is to write it or build it or whatever and then just be done.

Then the done moment is like, you hit publish or you tweet it or whatever. It's not like you can't change it after that, but it feels like - I don't know - that was the moment. Most people are going to see it at that moment, so it does feel kind of like a done moment after that.

Olivia: Yeah. I do agree, though. If you let it sit and come back, it's much better.

You know that one where you cannot find out what's the bug, like how to fix a bug? Then you sit for a few hours, and the next thing you know, you come back. [Laughter] It was just a semicolon missing somewhere.

Chris: I'm always impressed by people that just find the bug in their dream. They wake up with the answer. I'm like, "Oh, man. My brain does not do that."

It might solve it while, let's say, I relax and take a hot bath. Then I'm drifting off to sleep, and my mind is thinking about it. Then I might come up with it. When I'm actually asleep, no, it's not thinking about code.

Olivia: No.

Chris: Yeah.

Olivia: No.

Chris: But it happens to people. I know it does. Uh, okay. What happens now? You've learned to code really well. You're a designer and you like the design aspects of it. Where does it go? You need to work, right? We all do. Where do you end up? What's the journey there?

00:22:42

Olivia: Oh, okay. I actually am in a very -- what I like -- I think I quite like this place. I'm actually a marketing developer at this company called Toggl Track. We're a time tracking software - very niche.

Chris: Yeah. It looks like Toggl Track without the E at the end of toggle, Toggl Track. Yep.

Olivia: [Laughter] Toggl Track, yeah. I'm a marketing developer, so I babysit the marketing side. I'm the only one, so I can do whatever I want with it, really.

Chris: [Laughter]

Olivia: Without many people say anything, so I do incorporate a lot of things that I think I otherwise wouldn't be allowed to do it. For example, I would do a lot of CSS animations.

Chris: Mm-hmm.

Olivia: Here and there just to give a little bit of life to it. I think a good example would be let's just say if I want to showcase a feature. I actually did this in CodePen as well. I ported over the code. I wanted to showcase a feature, and I didn't want to use a GIF.

Chris: Right.

Olivia: Or a video.

Chris: Right. I can't wait. SVG.

Olivia: I did everything in HTML and CSS.

Chris: Oh, nice.

Olivia: [Laughter] Yeah. It's just animations, right? It would just loop because you can make it loop.

Chris: Right.

Olivia: There are little hacks. If you really look into it, and if another developer comes in and see, and if they don't understand CSS, they are screwed [laughter] because they wouldn't know how to tweak it. But because, yeah--

Chris: Oh, I see. These animations specifically are complex enough.

Olivia: Right. Right.

Chris: You'd be like, "Ooh..." [Laughter]

Olivia: Ooh, yeah. So, if they wanted to--

Chris: Yeah.

Olivia: In a way, sometimes I know, "Ah, maybe this is not the best idea," but it's actually very effective code wise, size wise because you're not making the user download a whole video.

Chris: Oh, sure. It's literally HTML and CSS.

Olivia: Yeah. Yeah, it's so small.

Chris: Probably a couple of K, if that.

Olivia: Yeah.

Chris: Yeah, super-efficient.

Olivia: I love it. So, I get to do all this kind of stuff.

Chris: And probably hardware accelerated and all that stuff. That's great.

Olivia: Mm-hmm. Yeah.

Chris: Yeah, the site really looks wonderful. Did they know what they were getting [laughter] when they hired you?

Olivia: Oh, no.

Chris: Kind of like, "Hey, I love this creative, getting weird with the code, stuff."

00:24:51

Olivia: Yeah. It was actually a very weird situation. I wasn't really hired to do Web pages. They just found out that I could do Web pages. Then as time passed, I started getting more Web pages. Then eventually I got the job title, marketing developer. I started off with something different.

Chris: Yeah. I like the title. I don't think I've heard it before, marketing developer. But of course, it makes perfect sense. Now knowing what you do and literally just building all these marketing pages, it's a perfect title, I think.

Unfortunately, I can't tell this wonderful story where, like, "Yeah, they saw my CodePen and I was a shoe-in." [Laughter]

Olivia: Oh, no. But I did give talks and stuff.

Chris: Mm-hmm.

Olivia: Yeah. The thing about being in the marketing team, I find, is that sometimes you can get quite siloed. The people who knew that I know how to code was only in the team. I guess they figured that the code just appears.

[Laughter]

Olivia: It just appeared randomly in their repo. But then my team lead at the time, he's like, "You know you want to do a CodePen show," because we have internal talks in the company.

Chris: Oh, nice. Yeah.

Olivia: I was like, "Okay. Sure, I'll show some of my CodePens." Then I showed it, and I guess that's when they found out, like, "Oh, okay. I guess Olivia does code, and she does the creative coding." I do things like that. That's how it went down.

Chris: Think of how many people are at companies with these secret hidden talents that they just don't even know about. You know?

Olivia: Mm-hmm.

Chris: That's nice, though, that you did and then it benefited you internally in big ways. I feel like I've seen it happen a couple of times, but not enough, like, "Oh, my gosh!"

I saw a fellow who was a great illustrator who would use that skill at work a little bit here and there. Then eventually, years later, you check back in on them and they're still at the same company and just doing illustration full-time. When you see the company kind of embrace the talent that somebody has, that's nice.

Olivia: [Laughter] Yes. For sure.

Chris: There's a -- [laughter]. Just because it's the last one on my list and I love it. There's moleskin notebooks, too. It reminds me of the makeup palate one a little bit. We don't have time to go through all 38 of them - or whatever.

Olivia: [Laughter]

Chris: There's some 3D stuff going on as well. Is that just a little bonus thing, or did you get into that for a moment?

00:27:17

Olivia: Oh, yes. It was a bonus thing. You can see that I kind of use it a lot. I open things a lot. [Laughter]

Chris: Yeah.

Olivia: I opened the notebook. I opened the makeup palate. I don't know. It's just something that I'm quite fond of.

Chris: Yeah.

Olivia: Anything that's open able, I will try to do that.

Chris: [Laughter] If it can be opened, it will be opened.

Olivia: Yeah, it will. Right. Might as well, right? It's also really simple. It's not super complicated. Probably like three lines of extra code.

Chris: No, but yeah.

Olivia: Yeah.

Chris: Who can do it? It's one of those ones. They're like, "I know this is possible, and I want to do it, but I definitely am going to have to look at different existing implementations because I could not." I couldn't tell you right now how it's done exactly. I know it's Translate 3D with a perspective value and stuff, but it's definitely not in my head.

I like this one because there's type on it. So, when it resizes, you can see the type move, too. Which lends some credibility or something to it.

Olivia: [Laughter]

Chris: Then here's a classic Olivia thing, which I think is just a little bit extra that makes it a little bit extra special. You open each three notebooks, one of them has blank pages and one of them has lined pages and one of them has graph paper and one of them has little dots on the inside. How nice! You know? How easy would it have been to just not have them be different?

They're cool anyway. They're different colors. The fact that there's more of them means that the 3D thing is reusable on multiple objects. Nope. You went the extra mile. It looks great.

[Laughter]

Chris: Anyway, is your creativity satisfied at work? [Laughter] Maybe it's too personal of a question, but you know. Is that just where you feel like you're at, at the moment? You don't necessarily need to just go home and do creative work outside of work because you just don't need to.

Olivia: No, actually, it's a bit of both, I think. The thing about work is that sometimes it's just the same thing over and over again. The creative projects don't come by as often as I would like, so it's always good to go back home. Try whatever you want to try. If you see a cool design on Dribbble, for example, and just to replicate it. There's always that itch there.

I think that is a good idea because it makes me research other ways that I would do that I wouldn't necessarily put it in production code, for example. But then if it's for fun, it doesn't matter sometimes how I implement it. If it looks good, it's like, ahh. This is my attempt. That's it.

Chris: Yeah.

00:30:02

Olivia: There's that. It's just that there's a bit of a pandemic burnout going on right now.

Chris: Yeah.

Olivia: Also, my workload--

Chris: What do you mean? I don't understand. Yeah.

Olivia: Yeah.

Chris: [Laughter]

Olivia: Oh, what happened? Yeah. [Laughter] So, I haven't been doing as much creative coding as I would like, but I wouldn't say that 2022 is the year because that would just put a lot of expectations out there.

Chris: Yeah.

Olivia: But I would still, like, sometimes I just do it for fun, but I just never publish it.

Chris: Oh, I understand. Yeah. Yeah.

Olivia: Yeah. Just, you know--

Chris: Reduce the burnout.

Olivia: Freshen up, yeah, and then just try different ideas. Then if the idea doesn't look good, well, nobody sees it - except me.

Chris: I picture you being like, "I just need to do something that isn't purple." Oh, my god.

Olivia: Oh, gawd! Yes!

[Laughter]

Olivia: Purple and beige. Ugh.

Chris: Yeah.

[Laughter]

Chris: That's the deal, though.

Olivia: Thank you.

Chris: It's a motif.

Olivia: I felt very understood.

Chris: [Laughter] I like the little -- there's a little -- another little motif. Maybe the more correct version of that word, the little letters tilt a little bit.

Olivia: Hmm.

Chris: It's just kind of a cute--

Olivia: Yeah, they call it the rotalics.

Chris: Rotalics.

Olivia: Yeah. Yeah, rotalics. Yeah. It's very quirky. I quite like it. But then the downside is, how do you tie something normal? How do you make something normal to just have that little quirkiness, but not annoying?

Chris: Yeah. I quite like it as well. Yeah. I don't know. It's just unique. I've never seen it before. It looks weird, but in an okay way. It doesn't heard their readability.

Olivia: It doesn't offend you too much. Yeah.

Chris: No. Yeah. Right because faux italics do. You know?

Olivia: [Laughter]

Chris: When the browser fakes and italic or something, you're like, "Ooh, that's just a mistake. It's not on purpose."

Olivia: Yeah.

Chris: But this is just a little quirkiness to the thing, which is fun. I would essentially demand that of anywhere I worked that there's some element of levity to things.

Can you imagine working at somewhere where it's like, "No! Seriousness only all the time is our brand." Blah! That would suck.

[Laughter]

Olivia: Yeah. But I do think Sass sites right now are doing very well in trying to be different, which is a nice thing. They all kind of look the same, but they do -- you know, layout-wise.

Chris: It's getting a little better, though, perhaps?

Olivia: I do think it's getting better. I know there are a lot of complaints out there. There's a reason why things look the same because it just makes it easy for the users. Me as a designer, I'm okay with that.

Chris: Yeah, me too.

Olivia: Yeah.

Chris: It makes a funny little quip or something, and you seem so clever when you're like, "Which one of these three layouts are you building?" Not to joke on that particular joke because that was one of the originals and it was pretty funny.

Olivia: Right.

Chris: But it's like the next day, somebody would be like, "This medium is so new. Digital design just hasn't found its footing in the same way that magazine design has or print newspapers have - or whatever." Yeah. You're right. It is new. Right?

Now, look at those things. How different is one newspaper from the next? You know? You pick a little bit of different brand elements. There's a little bit of different typography. Largely, it's the same format. That's what happens when the industry moves along and they find the patterns that work.

Maybe, just maybe we're finding those things ourselves in digital design.

00:33:36

Olivia: Yeah, and I'm okay with that. Then we have these little things like the rotalics that make it stand out. I think that that's cool.

Chris: Yeah.

Olivia: Yeah.

Chris: You don't have to overdo it. Use what works and don't use what doesn't.

Anyway, it's been so great to have you on. I'm glad we got to talk about what you're up to and what you're working on and some of the past creative coding stuff you did. It was a pleasure to talk to you. I guess people can find you at meowlivia.com. I also note that you have a Red Bubble shop, too, with a bunch of funny coding shirts.

Olivia: [Laughter]

Chris: Tech adjacent stuff in it.

Olivia: Just a few things. Yeah, things I dream. I wake up like, "Oh, that was a good quote. I'll put it on a shirt." [Laughter]

Chris: [Laughter]

Olivia: Not a lot of thought put into it.

Chris: [Laughter] Oh, I don't know. They got good. Some of them are classics like, "Be the CSS to my HTML," but with great design put on it. "Is this a feature or a bug? Yes." [Laughter]

Olivia: [Laughter]

Chris: Good stuff in there. Check it out, everybody. Anything you want to leave people with, Olivia?

Olivia: No. I was just going to say I'm very happy that you invited me on here. A huge fan of yours and also of CodePen, so a big honor.

Chris: Well, thank you very much. It was a pleasure, and I hope to talk to you soon. Take care.

Olivia: Thank you. Bye.

[Radio channel adjustment]