Lynn Fisher is my guest this week! You might know her as @lynnandtonic on CodePen and most other platforms. We get to talk about her A Single Div project and all the CSS magic that goes into those, other creative projects and why those are so satisfying, a recent transition over to Netlify, and the fact that we’ve worked together on an illustration project without ever having met.
Time Jumps
Sponsor: VideoPress
There is a bit of a rebirth of VideoPress that just happened! If you run a self-hosted WordPress site like we do, VideoPress is a major upgrade to hosting videos in content. You get VideoPress through Jetpack. If you buy Jetpack Complete, you’ve got it, otherwise, it’s an ala-carte purchase. Meaning if VideoPress is the only feature of Jetpack you want, no problem, it’s literally the only thing you need to pay for and use. To name a few things… with VideoPress you get a nice customized video player, cloud-hosted optimized video delivery, playback speed control, and the videos will look good on mobile without you having to manually create a poster.
Transcript
[Radio channel adjustment]
Announcer: Today, on CodePen Radio.
Chris Coyier: Hey, everybody. Welcome to another CodePen Radio. This is 338, and we have one of my favorite Web designers in the whole world on to talk to. It's my great pleasure to talk to Lynn Fisher. How are you doing, Lynn?
Lynn Fisher: I am awesome. How are you?
Chris: Oh, I am awesome too. Thank you for being awesome. This is one of those funky Internet relationships where we've actually literally done work together, and I don't believe we've ever even done a Zoom call - like ever.
Lynn: I know.
Chris: Just email only. [Laughter]
Lynn: Yeah.
Chris: Probably, or something.
Lynn: Yeah, online colabs without any face-to-face.
Chris: Yeah. It's kind of how I like it, honestly.
Lynn: Yeah.
Chris: It's cool that work can get done in the modern age without - I don't know - having to be super in-person about it. Pretty rad.
Lynn: Hopefully, mm-hmm.
Chris: Yeah. People out there, you already know Lynn.
Lynn: [Laughter]
Chris: I absolutely guarantee it. Maybe not personally, but if you've ever seen anything with the moniker lynnandtonic attached to it, that's you, right?
Lynn: Yeah. Yeah, lynnandtonic on most places.
Chris: It sets people up right, I think.
Lynn: Yeah.
Chris: Because it's like, "Ooh, a funny little pun." Then I feel like that's all your work is like. It's not necessarily puns, but it definitely has an element of fun to it, like maybe literally everything you ever do.
Lynn: [Laughter] Yeah, I definitely don't take myself too seriously, so it is a good kind of setup.
Chris: Yeah, but the work is always just so phenomenal. Definitely, yeah. Some of us adults forget how to have fun.
Lynn: [Laughter]
Chris: But not Lynn.
Lynn: Yeah.
Chris: She's fun. And maybe - I don't know. It would be hard to pick a top work because, once in a while, there's some new project. Then it's on the news or something.
Lynn: [Laughter]
Chris: You're like, "I'm going to make a website for every single thing that David Rose ever wore." Then it's all over the Internet for a week. But this one, there's one project that persists over years and years and years. You've been working on it forever. It's timely right now because I believe it's what they called Divtober.
Lynn: Mm-hmm.
Chris: I don't know if you invented it, but certainly popularized the idea of doing illustration, I guess, in the Web browser, but not with the help of much HTML. [Laughter]
Lynn: Yeah.
Chris: Literally a single div.
Lynn: Yup.
Chris: You've done -- oh, God -- it must be hundreds of these things.
Lynn: Yeah, a lot, over (I think) a little over seven years now, I've been working on it.
Chris: Yes! Yes. That's amazing. And so, you can check that out at a.singlediv.com, I think is the URL.
Lynn: Yeah, asinglediv.com also redirects to the A dot subdomain.
Chris: Nice. Throwing money at domains.
Lynn: Just in case. I know. Well, I did the first one, the subdomain, and then I was like, "Oh, no one is going to type it like that," so I had to buy the other one. [Laughter]
Chris: [Laughter] Nice.
Lynn: Yeah.
Chris: Nice. Yeah, I think the subdomain one is cooler, though.
Lynn: Yeah, I agree.
Chris: Good taste - direction.
Lynn: Yeah.
Chris: And so, a single div, some people are like, "Okay, well, I know enough CSS, so I can apply a border. I could apply a background color. I could apply a box shadow, maybe even multiple box shadows."
Lynn: Mm-hmm.
Chris: And that's it. How could I possibly draw a plant sitting on a windowsill with shades with no HTML?
Again, there are no tricks, right? I mean there are tricks, but there is no SVG. There's no background images, right?
Lynn: Right. Yeah.
Chris: What's up with this? I'm sure you've been asked this question for seven years straight, but I'll just ask you again. How do you make it happen?
Lynn: [Laughter] Yeah. I feel like I'm always learning new ways to do things, so it's cool to kind of see progress. But yeah, there's some of the standard things that you use with height, border radius. You can make some funky shapes with border radius, which is cool.
Chris: Oh, yeah! Yeah, yeah. Even not just circles, right?
Lynn: Right. Yeah.
Chris: Or ovals.
Lynn: Kind of lumpy, organic shapes. Yeah.
Chris: Mm-hmm.
Lynn: I like to use not the shorthand, so you do border top right radius and then set two values, and that'll give you some really neat, fine-grain controls of the border radius.
Chris: Oh, yeah.
Lynn: Which is cool.
Chris: Yeah, once in a while, I'm reminded. Even if you don't use border top right radius, which is maybe one of the (I hate to say) worst name things, but you can never remember which. After border, the rest of the three are, like, "What order are they in again?"
Lynn: Yeah. Right. Yeah.
Chris: I'm surprised you lean on border radius, though, because border radius only works on one element.
Lynn: Right.
Chris: You've only got one, but kind of three, right?
Lynn: Yeah.
Chris: Because you get--
Lynn: Yep. Yes. You get the div and then it's like before and after pseudo elements. You technically get three layers.
Chris: Yeah. Okay.
Lynn: But then, yeah, the power, the real power is in background gradients.
Chris: Okay.
Lynn: You have linear gradients, which you can use to create pretty much any sort of rectangular shape or angled lines, and then also shading, as you would imagine a gradient would work. Then you have radial gradient where you can make circles or ellipses, different variants of that.
Chris: Yeah.
Lynn: Then, actually, yesterday's Divtober or the previous day's Divtober drawing I did is the first time I've ever used conic gradient on there.
Chris: No kidding? Really?
Lynn: Yeah. I'm a little bit of a late adopter. Yeah, so conic gradient is super-powerful and can make really cool--
Chris: That's the one with a CD on it - or whatever?
Lynn: Yup. Yeah.
Chris: Yeah.
Lynn: Yeah, so I'm going to kind of explore that a little bit more. Gradients and then multiple box shadows, like you mentioned. If you have a circle, like 50% border radius, then you can make infinite circles with box shadow. Right?
Chris: Mm-hmm.
Lynn: You can change the size, change the spread of the shadow so you can make hard shapes, as many as you want.
Chris: And then move it, too.
Lynn: Yeah. Yup, position it, and so there are a lot of tedious, like, "Placing a circle here, placing a rectangle over here," kind of stuff that's happening. But yeah, so basically, with those tools, you have these array of shapes you can make. Then you're just piling them on top of each other to make an image.
Chris: That's great. Do you find kindred spirit in the other CSS masterpiece painters? You know what I'm talking about, right?
Lynn: Yes.
Chris: Yeah. [Laughter]
Lynn: Yeah, like Diana Smith.
Chris: But they don't limit themselves.
Lynn: Right.
Chris: Yeah, like Diana.
Lynn: Yeah. Yes, I think I love what they do. It's amazing. I'm just in awe.
The nice thing about single divs is that it's just so constrained. At some point I'm like, "Well, I'm done. There's no more to do." Right?
Chris: Yeah.
Lynn: But for them, I think these folks that make these really elaborate masterpieces, like, "When do you know when you're done?" You just keep adding as many things.
Chris: Right.
Lynn: But as they've shown, you can really create just anything.
Chris: They're prolific enough, like Diana is, that it is a style, and you have one too. If you only did one of these and then you stopped, well, that's that. But I think it's interesting that you can look at multiple of her work and be like, "Yes, that looks like a Diana Smith piece," and you can look at your work, too, and it looks like a Lynn Fisher work, too. It's pretty cool.
Lynn: That's cool.
Chris: Backgrounds are a big tool here. We can move on. I just think this is fascinating.
Lynn: No. Yeah, I love it.
Chris: Do you ever use repeating, like the actual syntax repeating background?
Lynn: Yeah, repeating linear gradients. Yes, so for stripes or one I just recently did to make blinds on a window, if you need repeating stripes, I'll use it there.
Chris: Yeah. That's the syntax. I mean it does what it says on the box, right? It repeats it.
Lynn: Mm-hmm.
Chris: But I though there were weird limitations, like you can't say only repeat it seven times. It just repeats until it's done.
Lynn: Oh, yeah. No, you can't. It just repeats forever. What you can do is control it just with using background size.
Chris: Background size.
Lynn: Yeah, so you constrain where it's repeating. Actually, one thing I wish that you could do is that same kind of concept with radial gradient.
A repeating radial gradient creates a bullseye. It's repeating outward from the center. But what I want is to repeat side-by-side so I could make polka dots.
Chris: Oh...
Lynn: Which you can in some way by using the background repeat, repeat. Like repeat wire, repeat X, but you can't constrain it then with background size. It's a little bit funky. There are kind of like little rules you have to figure out how much you can get away with using repeating.
Chris: Yeah, you're butting against the wall of CSS's--
Lynn: Yeah. Right. Yeah.
Chris: --use cases.
Lynn: It'd be cool to do that, but who does that? You don't need that. [Laughter] You know what I mean? It's most just for this particular use case.
Chris: Gosh, making me think of all the weird tricks.
Lynn: Mm-hmm.
Chris: Isn't there one with background size that does actually resize a little bit? It's like background size round or something like that?
Lynn: Oh, yeah. Space.
Chris: Yeah. Exactly.
Lynn: Space and then round.
Chris: It puts as many as will fit.
Lynn: Yup. Yeah. That one is cool. I've only used that maybe once or twice just because I'm constraining things a little bit more, like I want it exactly here. But I saw one. I saw a CodePen once that was cool where, as you scaled the browser vertically, because of round it would only add -- it was a burger. Sorry.
Chris: Oh, yeah!
Lynn: It was a burger. Yeah, and as you grow the burger, little patties would appear, but it would only show a full patty once there's enough space to house a new patty instead of partial ones. I thought that was kind of a neat example of how that worked.
Chris: It's like the perfect use case for that particular thing.
Lynn: Yeah. Mm-hmm.
Chris: Okay. Yeah, I had some weird thing in my mind that repeating linear gradient somehow rendered worse somehow. But apparently not if you're using it.
Lynn: I think it just takes a little bit to wrap your brain around how it's going to behave.
Chris: Yeah.
Lynn: But it's pretty predictable once you get--
Chris: Once you got it.
Lynn: Once I got it in my brain. You know?
[Guitar music starts]
Chris: This episode of CodePen Radio is brought to you in part by VideoPress, which you can now buy a la carte. It's part of Jetpack, the plugin for your self-hosted WordPress site that has all kinds of functionality.
If you buy the complete plan of Jetpack with all the features, it's in there, but now you can buy it a la carte. It's only $4.77 a month if you buy it yearly. It's a super great product.
Imagine you have an MP4 file - or whatever. You can just drag it onto the media uploader in a WordPress site and drop a video on there. But it's not cloud hosted, so it's not particularly efficient. All that bandwidth is on you. The player will just be the native player of browsers, which is okay but doesn't have a lot of features like jumping ahead and playback control and all that stuff.
It's like you get a really nice player for your WordPress videos and they're cloud hosted and they do all kinds of smart stuff for video. It's just a much, much better video experience for your videos, the bandwidth being the most important one right out of the gate.
Here's another one that's my favorite thing because I blog all the time. I put little movies in blog posts. A lot of times, I just do it with nothing, right? But now I'm doing it with VideoPress.
But anyway, before VideoPress, you just put a video tag in HTML, which is the default experience of videos. You don't get a poster. Unless you hand-put a poster attribute on it, on mobile, like on iOS, you just get nothing. It just looks like a blank nothing rectangle. You're like, "I guess this is a movie? I'll play it or something."
With VideoPress, because it's a nicer player and it's just a way better video experience, you can see an actual frame of the video and a big play button. You're like, "It's a video. I'll hit play. I understand what's happening here." I just thought that was just terrible UX to use just native only and not bother with the poster stuff. Anyway, that's a tiny little feature.
Go check out Jetpack and VideoPress. It should be the default thing that you have. You should just have it if you have a WordPress site. It's just better. Thanks. Bye.
[Guitar music ends]
Chris: Sometimes these end up on CodePen, too - or whatever. Do you do them in VS Code and then move around, or do you use some other editor? Do they start on CodePen?
Lynn: Oh, yeah. Yeah, I work in Sublime. For Divtober, I put every one of those in CodePen, so I just copy it over. I use a template, which is really nice.
Because I started A Single Div so long ago, there are a lot of legacy CSS controlling them that I wouldn't use now. But it's there, so I don't want to fix it, so I have a template that keeps all that for me, which is really nice and makes it easy.
Then, actually, there have been a couple that I've done solely on CodePen. Speaking of when do you stop adding divs, I did an illustration with 50 divs (last year) and that one I did totally in CodePen. The live update was so nice, as I was working on that.
Chris: This is just one little outlet you have, right? You work on all kinds of other projects. I mentioned the Dave and Rose thing, but you did a thing with airports [laughter] and all kinds of stuff.
Lynn: Yeah.
Chris: Is it just a place to dump creative energy? Yeah, I don't know.
Lynn: Yeah.
Chris: It must keep you going in some way.
Lynn: I don't know. I just love the Web, and so I think I'll just always have projects to work on and the Web makes it so easy to do it and share that work out. It kind of just all concentrates there.
Yeah, it's interesting. A lot of people say that they feel burnt out from side projects. Side projects, for me, if I'm not working on them, I'm probably burnt out. It's the thing that I'm so excited about. If I'm feeling bummed out, I'm not working on them.
I redo my portfolio every year. That to me is a real energizer at the end of the year. It kind slowly creeps later and later each year. [Laughter]
Chris: [Laughter]
Lynn: I don't know. I just love trying new stuff. I love experimenting with CSS, especially. Yeah, it's a lot of fun.
Chris: Yeah. That's a lot of pressure. Every year.
Lynn: I know.
Chris: It's all good. They get better and better, too.
Lynn: Oh, yeah. It is. I remember 2017 was the first year where people paid attention to it. Before, my friends would be like, "Great." You know? [Laughter]
Chris: Yeah. [Laughter] Cool...
Lynn: But then that year was the year were every 100 pixels was a totally different layout, so there was like 24 different layouts to the site.
Chris: Oh, my gosh. Yeah.
Lynn: That was the first one where it blew up a little bit. Every year after that, it's been a little bit of, like, "What's next?" You know? [Laughter]
Chris: Mm-hmm.
Lynn: But I think I found that a year, especially now -- CSS is moving so fast -- about a year is like, "Oh, there's some new thing I want to try."
Chris: Oh...
Lynn: And so I'm like, "Oh, that's cool. Here's the thing that I can experiment with," or also just a year is enough time where I'm like, "Okay, I'm tired of this one. I'm ready to see something different."
Chris: Yeah. Yeah. Yeah. I think that the one that just sticks in my brain the most is your face - or whatever - has the million ones that smash together.
Lynn: Yeah.
Chris: Woo! That's great. Don't visit on your phone. It's no fun.
Lynn: Oh, I know.
Chris: You're only going to get one.
Lynn: I know. I've always wondered about that. When people are like, "Oh, check out this site," and you look at it on the phone. You're like, "Yeah...?" It's kind of like not giving too much way but, oh, you do have to interact with it on a computer.
Chris: Right. Almost always, it has to do with the browser width, right?
Lynn: Mm-hmm. Yeah.
Chris: Classic responsive design action.
Lynn: Yeah.
Chris: I remember I was so proud of myself (a million years ago). It was one of the first things I thought of when we started having media queries is that you could absolutely position something. Then when a media query hits, change the numbers, like the top and the left and stuff.
Lynn: Oh, yeah.
Chris: Then apply a transition to it and watch the thing fly around.
Lynn: Yes.
Chris: Like, "Woo! There it goes!"
Lynn: [Laughter]
Chris: You know? Oh, man.
Lynn: Totally.
Chris: Overused that for a minute.
Lynn: [Laughter]
Chris: A big job change recently, as far as I can tell, you for a long time were at an agency, right?
Lynn: Yep.
Chris: I always imagined your life as, like, "Oh, we're seeing this tiny sliver of Lynn's life through her side projects," but really, your day-to-day was just cranking stuff out for clients. Is that right? It was And Yet, right?
Lynn: Yep. Yeah, I was working on client stuff for pretty much most of my career. Then toward the end of my tenure at And Yet, I actually did get to focus a little bit on some creative projects for that team, which was pretty cool.
Chris: Mm-hmm.
Lynn: But yeah, I am diving into the product world, which is interesting. I just started at Netlify last week.
Chris: Whoa! Really super new.
Lynn: Yep.
Chris: One week. Wow. Good. I'm glad.
Lynn: Yeah.
Chris: She's like, "Uh, it's been a couple of years, Chris."
Lynn: [Laughter]
Chris: No, that's awesome. During the client work (many years), did they know who they were working with?
[Laughter]
Chris: Were they like, "Give me the Lynn Fisher special. That's what I want"?
Lynn: Occasionally, there would be folks, or at least that they'd be familiar. They've seen something that I've worked on before, which was cool.
I think if I could give -- I try not to give a lot of career advice because everyone's experience is so different. I started so long ago. I think the one thing that has just been so clutch for me is that if I am meeting with a client or meeting at a job interview or whatever and they've already seen something that you've done, it makes it so much easier. That was cool.
Occasionally, there would be clients specifically looking for, like, "You know a lot about responsive design. How would you approach this problem?" But usually, it was just like, "I love your site," and then we switch it into work mode.
Chris: Oh, yeah. Sure.
Lynn: Yeah.
Chris: Yeah. A little yeti monster is cool and stuff, but we sell widgets.
Lynn: Right. Yeah.
[Laughter]
Chris: All right. Is it just for fun? We don't have to get into it if you don't want, but it does seem like a pretty dramatic shift to decide to do the product thing. Netlify, as far as I can tell from the outside, is a pretty fun with fun people, but they make a very serious product.
Lynn: Yeah. Yeah, I was surprised, too. I took the summer off, and then I was starting a job search. I was like, "Okay, I'm at the point in my career where I'm just going to say what I want to work on," and so I went into every conversation like, "Hey, I just want to work on creative Web projects. That's what I want. That's what I'm good at and what I want to do. It excites me. People respond well to the things that I make."
A lot of product teams were like, "Well, we don't have that available for you," which is fair.
Chris: Sure. They'd doing what you're doing.
Lynn: Yeah, exactly.
Chris: They're saying, I'm going to be honest about what we need."
Lynn: Totally, and Netlify saw an opportunity for me to work on some creative Web projects, kind of cross-functional with dev ex, marketing, growth. There's a lot of opportunity.
They do a lot of community stuff with Jamstack and conferences, and so there's a lot of surface area for micro-sites, creative Web experiences. Yeah, we're still kind of figuring it out but, yeah, it's exciting to hear that they were excited about that, too.
Chris: Yeah. Surface area is a good word for it, isn't it? They do have their hands in quite a lot of stuff. It seems like the homepage is new every month over there.
Lynn: I know. [Laughter]
Chris: [Laughter] Well, it'll be exciting to see what you do for them. That sounds pretty rad.
Lynn: Thanks. Yeah, I'm excited.
Chris: I love Netlify. High-five to you and all of them over there.
Lynn: Thank you.
Chris: They've kind of changed the game in a number of ways for things.
Lynn: Yeah.
Chris: Not a sponsor. That was just a random shoulder rub.
Lynn: Yeah. I'm always like, I just love the product. For me, I was like, I'm not going to go work on a product unless it's one that I use or that I like.
Chris: Yeah, right, where they're like, "Can you come work for this weird crypto company?"
Lynn: Right. Yeah.
Chris: Sometimes it's like, "I don't know. That salary is pretty good." Unless they're paying you in bitcoin or whatever. Then don't do it.
Lynn: Right.
Chris: [Laughter]
Lynn: Like, "Hold on. Let me convert this today."
Chris: Yeah. Right.
Lynn: Or in an hour, and we'll see.
Chris: Big roles at product companies do tend to, in my experience, outpace what an agency can offer, too. We don't have to go there, but that was really good.
Lynn: Yeah. I think I was a little bit -- And Yet was pretty small, and the team before, the agency I was at before that, was a little bit bigger. Yeah, it was definitely the smaller team kind of environment.
Chris: Right on. What else? Are you excited about anything? Like you said, every year, a little bit of CSS stuff changes, and then that's a good opportunity to redo the site. Maybe this year is a banger, huh?
Lynn: Yeah, I don't know.
Chris: For new tech. [Laughter]
Lynn: I did have kind of a -- you know how you have an ah-ha moment, but then you dig into the thing and you're like, "Oh, wait. That's not really what it was or what I was hoping it would be"?
Chris: Yeah. Yeah.
Lynn: I had a big ah-ha moment about a way to use grid with container queries. I started digging in, and I was like, "Oh, maybe it's not going to behave exactly how I want it," but then Divtober started. And so, I was like, "Okay, I'm going to focus on this and regroup in November."
But I think the thing that I'm digging into right now is how elements can change relative to each other. I think the thing I was focusing on for a long time was just the viewport. I was thinking, "Well, it'd be cool if the browser was a container itself," so like with the faces. More appears as you grow the container, or the Bob's Burgers.
Chris: Yeah. Yeah.
Lynn: It's like an animation that happens. I was thinking of the browser as like an animation compiler. I think this year I'm thinking, because of container queries, I don't know where that will be by the time I launch my site, but I'm exploring the way that elements on a page react to each other.
Chris: Hmm. Hmm.
Lynn: I don't know. It's still pretty abstract and big in my brain, and maybe it won't be that, but that's kind of what I'm thinking about right now.
Chris: Well, keep going a little bit.
Lynn: Yeah.
Chris: What is it about grid plus a container query that is unique?
Lynn: Did you see that article that was like, "You don't need absolute positioning anymore because of grid"?
Chris: Yeah.
Lynn: Yeah.
Chris: Ahmad's article?
Lynn: Yeah.
Chris: Yeah.
Lynn: I was thinking about it like that where grid -- I have not been using grid in that way, but I want to try. These homepages, they're not -- I mean they are layouts, but really they're kind of like art, in a way. Right?
Chris: Yeah. Definitely.
Lynn: Yeah.
Chris: More on that scale, I'd say.
Lynn: Right. Yeah, and so I'm thinking about, like, okay, thinking about how to use grid for placement but also grid itself has some sizing logic, right? Thinking through how that works with container queries. I don't know.
Chris: The point of the article was something about how you can stack. If you're going to put a bunch of things that are on top of each other, you don't really need absolute positioning for that or negative margins or any trickery anymore.
Lynn: Mm-hmm.
Chris: You can just be like, "They're all in grid cell one."
Lynn: [Laughter]
Chris: "Go there."
Lynn: Right.
Chris: But just because they're in grid cell one doesn't mean that they all occupy exactly the same space of grid cell one. They can be on the top left or the bottom right or they could stretch or they could stretch through the middle. That is kind of a cool aspect of grid. Although, I wonder if it's fair to even say it's grid.
I was just chatting with Jen Simmons the other day, and she's like, "Don't think of alignment as part of grid. Alignment is just alignment and grid is just grid."
Lynn: Oh...
Chris: I was like, "I don't know," but she's always on another level.
Lynn: I know.
Chris: [Laughter]
Lynn: If I could understand this in the way that you do. [Laughter]
Chris: By the time she presents it, it will be understandable because that's another power of hers as well.
Lynn: Yeah. Yep, totally.
Chris: Yeah, that's cool, and that seems slightly usable, although I worry a little bit.
There was a big bang of excitement around container queries, and then it's like, "They're not actually out yet though."
Lynn: Right. I know.
Chris: Right?
Lynn: Yeah.
Chris: Maybe January 2022 is a little early.
Lynn: Right. Yeah.
Chris: But there are Polyfills, so maybe.
Lynn: Yeah. I don't know.
Chris: I'm thinking that your favicon is a little squid and there happens to be a pretty popular TV show about Squid Game at the moment, so I'm like, "How can that not be on Lynn's radar?"
Lynn: Oh, funny. [Laughter] I haven't watched that yet. I need to. It's on my list, though. I need to -- because it's subtitles, I have to really focus.
Chris: Yeah.
Lynn: I'm going to set aside some time to do it.
Chris: I'm only two episodes in, but it just seems like - I don't know - Lynn has got something with squids going on.
Lynn: [Laughter]
Chris: It's going to happen in 2022.
Lynn: Could be.
Chris: The thing I alluded to earlier that we worked on together was the fact that you just did the illustrations for the Flexbox guide. I get that on the street, practically, Lynn. "Oh, my God! I use your Flexbox guide so much," which is great. I feel like it's one of those things I can never live it down.
Lynn: [Laughter]
Chris: I'm like, "You know I've written more things than that in my life."
Lynn: Oh, funny. That probably is; thinking about it. The small piece of it that I worked on is probably the thing that the most people have seen, collectively, of all the work I've ever done because that page is visited so much.
Chris: I almost agree only because of the longevity of the page.
Lynn: Mm-hmm.
Chris: It's highly trafficked day after day and month after month and year after year whereas I would think a David Rose page gets real hot for a couple of months there and then--
Lynn: Mm-hmm. A little bit. Yeah.
Chris: Yeah. Less in popular culture now that it's over.
Lynn: Mm-hmm.
Chris: But I don't know. So, if y'all out there have ever been to the Flexbox guide or the Grid guide, those illustrations are Lynn's and are really clutch to making the page look cool, understandable, fun, and all that. Pretty rad. Pretty rad.
We sell them as a poster, too. Lynn, I sell them every single day.
Lynn: Oh, nice.
Chris: Somebody buys, somebody, somebody out there in the world buys a poster. If you could have a globe, you'd never guess.
Lynn: [Laughter]
Chris: I don't think we've sent one to Greenland, but they go everywhere else on planet Earth.
Lynn: Neat!
Chris: Anywhere.
Lynn: That's awesome.
Chris: The posters are different. It's not just a printout of the guide. You designed those very specially.
Lynn: Yeah. Yeah, it was fun trying to -- on the Web, you take for granted how nice it is to design for the Web when you make a poster. [Laughter] You know? It's like, "Oh, my gosh!" You're just limited in space.
Chris: Where did you go? I didn't ask you about tooling, yeah. The single div thing and anything else you do for the Web, is CSS your tooling? Do you just think it out and type characters, or do you have cool, little, secret apps that you build? It doesn't seem to me that you use fancy preprocessors, generally, right? It's just pretty raw CSS?
Lynn: Right. I do use stylis on my personal stuff, but I'm not doing a lot of fancy stuff. Occasionally, I'll do a mix-in. I use it most -- on A Single Div, especially, I use it mostly because stylis has property lookup, which Sass doesn't. You can do width--
Chris: What is that?
Lynn: It's like width 20 pixels, and then you can do height at width, so the height is the width.
Chris: Wow!
Lynn: Yeah, and then, so later you can do margin calc, like 100% minus at width, and it just looks up the property in the declaration that you're in.
Chris: Hmm. I've never heard someone wax poetic about property writeup before.
Lynn: I know. I love it. It's one of -- whenever I have to use Sass, I mean Sass is more powerful in a lot of different ways, but it's the one thing I'm like, "Ugh!" I miss property lookup. It's so nice.
Chris: But now, I mean, do you feel like -- because custom properties is that now, essentially, right?
Lynn: Right.
Chris: Or do you think it's too verbose? Are you not on the double dash train? [Laughter]
Lynn: Yeah. It feels a little bit -- and maybe this is just me being old-school and not thinking -- like changing my mental model, but I think of it like, "Well, I'm setting a variable and I don't need a variable. I just want this thing to be the same as this other thing." Right?
Chris: I see. You reject the concept of variablizing it. You're like, "Just reference--" Yeah. Yeah.
Lynn: It's so localized. It doesn't extend outside of the selector, and so it's just right here. I set a value and I want that value. I'm willing to admit that I should run away and use that, right?
[Laughter]
Lynn: But again, like I said earlier, I'm a little bit of a late adopter, so I think--
Chris: Only because then you don't need a pre-processor and it's supported everywhere and there's not even a whisper (as far as I can tell) in the CSS world of property lookup making its way--
[Laughter]
Lynn: No one cares about it.
Chris: Yeah. [Laughter]
Lynn: I'm like the one person that cares about it. I'm like, "Yes, this one thing keeping me in stylis."
Chris: It is interesting, though. Then you put it at the top? Or is it smart enough? What if you wrote height first and then referenced width and then wrote width second? Is it super-smart?
Lynn: Yeah.
Chris: Even though it's the second thing down?
Lynn: Oh, I don't know. I've never tried that.
Chris: Yeah. Okay. [Laughter] That was a very weird question to ask you at the end of this--
Lynn: If I were to guess, I would say no, it's not that smart, but I don't know.
[Laughter]
Lynn: I don't know for sure.
Chris: Maybe.
Lynn: But yeah.
Chris: I always like stylis, too. It has some other nice things even aside from that. I mean one of them is that it's just super forgiving. It's like, "Do you want colons?" You don't even have to use colons.
Lynn: Yeah, you don't have to use any syntax, really.
Chris: But also, I don't believe stylis has been touched in a hot long while.
Lynn: It's been a long time. [Laughter] It's funny. On my personal sites, I'm using -- on the more just straight up kind of dump out some PUG into HTML, I'm using a really, really, really old setup of Grunt with--
Chris: Cool.
Lynn: Yeah. [Laughter] It's just super basic. I use PUG mostly just because I don't want to write as much stuff. You know.
Chris: Yeah. Yeah.
Lynn: I'm also not doing anything super complicated there.
Chris: That's good to hear, actually. I just had to put together a post about HTML pre-processors, and I'm like, "Does anybody even care anymore?" It seems like the way that HTML gets pre-processed is either like my CMS makes me use PHP or it's a JavaScript library.
Lynn: Yeah.
Chris: It's never just, "This weird little syntax called PUG." How many people actually use PUG to actually build sites? Well, Lynn Fisher does!
Lynn: [Laughter] I do, all the time. And we did for -- I think, actually, the andyet.com site is still in PUG. Oh, no. Nope, it got switched to Gatsby, maybe. Yeah, so for work stuff, I'm totally fine being in whatever--
Chris: Yeah. Yeah.
Lynn: --we're using, but for personal stuff, I want to do the least amount of typing, and so it's just so nice.
Chris: Yeah. I miss -- not that I--
I see it regularly. I wrote a little thing in PUG the other day, but it's because CodePen supports PUG and I can write a little card mix in and then use it four times. It just feels so satisfying.
Lynn: Mm-hmm.
Chris: But I'm like, "Does that translate to the real world at all?"
Lynn: I don't know. I think, for hobby type sites, probably, or personal sites, maybe.
Chris: Mm-hmm.
Lynn: I don't know.
Chris: I don't know. It's okay.
Lynn: Yeah. Yeah.
Chris: Philosophizing about PUG.
Lynn: Yeah. I like to -- I mean I usually find something that I like that works for me and then stick with it for a long time, and so--
Chris: Mm-hmm. That's how the Web is, though.
Lynn: Yeah.
Chris: Think of all the millions of old sites that use -- there are probably more sites that use Grunt than use React - in some weird world.
Lynn: Yeah.
Chris: I don't know if that's true. I just made that up.
Lynn: Right. Yeah. [Laughter]
Chris: It feels like it could be true. [Laughter]
Lynn: Yeah. I think I would be surprised and not surprised. You know?
Chris: Yeah. Yeah. It certainly doesn't get the airtime, but we know, we all know that's how that works.
Lynn: Mm-hmm.
Chris: Well, anyway, I won't keep you any longer. Lynn, it was a pleasure to talk to you about your life and your creative endeavors and stuff. Best of luck in your new gig over at Netlify.
Lynn: Thank you.
Chris: I hope to talk to you real soon again.
Lynn: Yeah.
Chris: Is there anything you want to tell the world?
Lynn: I don't know. Have fun making stuff for the Web. It's the best. [Laughter]
Chris: Cheers. We'll see you later.
[Radio channel adjustment]