Eric Meyer: Hello. Welcome to Igalia Chats. I'm Eric Meyer. I'm a developer advocate at Igalia.
Ujjwal Sharma: And I'm Ujjwal, and I'm a developer advocate at Igalia.
Eric Meyer: And we have a guest today. Guest, please introduce yourself and tell people what it is you do.
Lynn Fisher: Hi, I'm Lynn Fisher. I am a web designer. I work for a little company called Fireship, where we create YouTube videos, a newsletter and developer courses, and you might know me from a bunch of weird websites that I make and maintain and love to explore the powers of CSS and things like that.
Eric Meyer: Yeah. And that's why we wanted to talk to you, because you do have these... I mean, you said that they were weird little websites. I think they're awesome little websites.
Lynn Fisher: Thank you.
Eric Meyer: But then, part of that is that, first of all, they're awesome, but second of all, I think like you, I come from the tradition of the weird web, when the web was starting out and we were just doing whatever. How long have you been at that?
Lynn Fisher: Gosh. I mean, I was learning how to make websites around the GeoCities, MySpace, LiveJournal era.
Eric Meyer: Nice.
Lynn Fisher: I've been doing websites professionally since about 2007.
Eric Meyer: Yeah. But professional, I'm just talking web in general.
Lynn Fisher: Okay, yeah. Just around the early 2000s.
Eric Meyer: Yeah. Turn of the millennium stuff.
Lynn Fisher: Yeah.
Eric Meyer: So yeah, you build all this stuff, why?
Lynn Fisher: I don't know. I think when I discovered that you can make websites, I think just a little spark happened in me. I think the coolest thing about the web, why I like to make websites, why it's my medium of choice, is that you can really easily share it with other people. I think that's really the clincher there, where... I mean, you can share art in a lot of different ways, but I think at the scale that's it's possible with websites, there's nothing that compares to it. So yeah, I think the web is an interesting medium to create these document-style sites, to create interactive art pieces. Yeah, it's very interesting to me, and I think all the ideas that run through my head channel through the medium of the web.
Eric Meyer: Yeah. One thing that people may have come across you for, that they don't realize it, is A Single Div. Would you agree it's the site that made you internet-famous?
Lynn Fisher: Yeah. I think that was the first time anything I made really broke through my little circle of influence, so that was really cool. But yeah, that was a about 10-year project that I worked on it, where I created just illustrations out of CSS using just one div per illustration. It's a fun little project. I still feel really fondly about it.
Eric Meyer: Yeah, I would imagine. Some of them were, wow, mind-blowing. But you say a single div, I'm assuming that you were not canvassing into the divs?
Lynn Fisher: No, yeah, just a regular HTML div and whatever CSS was available at whatever time I was doing the illustration. I think at the time when I was starting that project, CSS illustration was definitely happening. The thing I really remember was someone drew, I don't know names at this point, but someone drew all the Simpsons characters in CSS, and it was just incredible, it was perfect. But each Simpsons character was made of about 40 divs, and so people, of course, will point to that and say, 'See? This isn't practical, it's so much bloat,' which is... At the time, we weren't worried about that. And so, I was looking into it like, 'Well, right now...' At the time, we were putting icons on a site with a div or sometimes two, depending on what we needed to do, and so I was like, 'What if the CSS illustrations were just that, the markup was really clean and minimal, then would it be okay?' Just thinking about it through that argument. And it was cool, once I started doing it, I thought it was nice, because it adds this really tight constraint to the project. And so, each illustration, you really do have to think creatively, you have to look into CSS properties maybe that you wouldn't normally use for something. A lot of it was hand-nudging, testing things out. And so, yeah, it was a cool learning experience, for sure, just trying to achieve something with such tight constraints.
Eric Meyer: What did you lean on the most for that? I'm just curious.
Lynn Fisher: Definitely background image, linear gradients and radial gradients, and then, later on in the project, conic gradients. Those to me are the most impactful in that type of exercise. And actually, when I was starting early on, background size wasn't super widely supported, and so then it was really an exercise in layering. I think that it was a little bit trickier. But once background size really hit, I think the sky's the limit in terms of what you can create with just background image.
Eric Meyer: Okay. Why was that such a game-changer?
Lynn Fisher: Well, because before background size, the gradient would take up 100% width and height of the div, and so you really had to think about... It would be hard to make different shapes and place them within the div, within the background, if you think of it like a canvas. And so, what I'd end up having to do is create gradients that would go some color and then a bunch of transparency, and then layer them on top of each other. Whereas now, with background size, you can say, 'Oh, this one's 10 pixels by 10 pixels, and I want it at 10 pixels, 10 pixels left and top,' or something, and it'll just stick there, and you don't have to worry so much about what's sitting behind it or on top of it.
Eric Meyer: Okay. I guess you could design a component of the image at full size, and then be like, 'Okay, now that I've figured out all those details, I'm going to shrink you down and put you over here.'
Lynn Fisher: Right, yeah.
Eric Meyer: Okay.
Lynn Fisher: Yeah. With linear gradient, you can create rectangles and triangle type shapes, and then with radial and conic gradient, you can create diamonds and circles. And so, you have all the shapes available to you now, where you can just be placing them anywhere in your illustration.
Ujjwal Sharma: Yeah. I just feel like CSS in the web at large is such a... How do I say it? Underappreciated and niche platform, I guess, because it's more utilized for, let's say less weird means, but it's refreshing. And just going through some of them, my favorite is the chili garlic sauce, I'm biased, because it's like there's so many things going for it, but it's amazing, and I can't believe that we're still not exploring the web in more artistic ways. Most of the mainstream web is, I wouldn't say minimalistic, because it's just like it feels boring at some point, and I wonder if we can revive the web somehow.
Lynn Fisher: Yeah. That's interesting, where timeline-wise, when all of these really powerful CSS properties were giving us this artistic toolkit, the trends of the websites really weren't utilizing them. We shifted to more flat color, we shifted to really minimalist layouts. Even now, I think a lot of the more corporate websites all have this minimalist style. So I am really looking forward to a not skeuomorphism, but a renaissance of a texture and color and bringing in a little bit more of the things that we were playing with in the earlier days and that CSS makes super easy now. We're really lucky. I feel like rounded corners, back in the day, we always joked how hard it was to do that, and now it's just no big deal at all.
Eric Meyer: Yeah. So how many single divs were there, do you remember?
Lynn Fisher: Oh. I don't know that. I should look and see. Quite a lot. It was all on one page for a long time, and I ended up splitting into two, just for page loading and so you didn't have to scroll quite as far. But the last few years of the project, I did Divtober, which was play on Inktober, where a handful of us would do single divs every day in October. So that really bumped up the number, because before, I was just doing it whenever I had time or inspiration struck. So actually doing it once a day was another challenge of really keeping the drawings short to a timeline too, where it was like, 'Okay, I'll spend an hour or two on this, and then I'm done.' Where other ones in the past, I had put it down for a while, come back to it, when you have the leisure of time to work on it.
Eric Meyer: What interests me sometimes about when I go through a single div is that sometimes there are ones that I'll go past, and at first they'll seem very simple, and then I'll realize, 'Wait a minute. I have some idea, I don't know, I have some idea what had to go into making that, and wow, just wow.' The DVD screensaver would be an example.
Lynn Fisher: Oh, yeah.
Eric Meyer: Where it bounces around the screen and it changes colors, just like the old DVD screensaver used to do, and that seems real simple, real normal, but then it's like, 'Wait, this is just one div. Wow.'
Lynn Fisher: Yeah. I think when you incorporate animation, that limits you even more, where really, the before and after are the ones that you can animate, because if you're animating the div, it's going to animate everything, which I think there actually is one where I had to do that, or no, probably not animation. I think with transforms, if you're rotating something, if you rotate the div, it's going to rotate the before and after, and so you have to un-rotate those elements. I think there's some tricks like that, where you have to be a little bit careful about what is the thing that you're transforming or animating. But yeah, animation is a fun challenge there, where you want the animation to loop always, and so there's an interesting challenge of making it seem... I guess you're trying to make the animation fluid and as though it's not some sort of a hack that you're doing on the div.
Eric Meyer: Yeah. One of my other favorites, even though it's not very complicated, is the moon's haunted.
Lynn Fisher: Oh, yeah. I love that one.
Eric Meyer: Right next to the Eleventy possum.
Lynn Fisher: Oh, yeah, the possum. That was fun.
Eric Meyer: The awesome opossum. Just every time I see that with the ghosts orbiting around... The moon's haunted.
Lynn Fisher: Yeah, the moon's haunted.
Eric Meyer: Nice.
Lynn Fisher: That's what's fun too about in Divtober, you're working from a prompt every day, just a random word. And so, I feel like there was a lot of, okay, when you think of ghost or whatever, it probably was ghost, what is the first thing you think of? And the first thing I think of is the moon's haunted, so yeah, that was a fun one.
Eric Meyer: So you did that for 10 years, but I assume that other projects were coming up while you were doing that as well?
Lynn Fisher: Yeah. Around 2014/2015 is when a lot of these projects started manifesting in my backlog, I guess. And so, I was working on WhyAZ is a little website that I worked on at an agency I was working at at the time, but it's a little just reasons to love Arizona website. And actually, the illustrations on that site are all single div CSS illustrations, that's first where I started playing around with that. And then, the next one, I was working on Airport Codes, which broke containment into the aviation community, which was pretty cool. A lot of airport nerds out there I got to chat with. So since Airport Codes, I've had a new project every one or two years that I've been focusing on. Up until recently, I've really been focusing on my project, Nestflix, if you've seen that. It's a little fake streaming website, and that one has, because of the breadth of the data that's involved in that site, I've been working on it off and on for almost five years now, about four and a half years.
Eric Meyer: And so, Nestflix, it sounds like it's movies about birds to me.
Lynn Fisher: Yeah. Actually, the bird community comments on it quite a bit too, because they call bird cams Nestflix.
Eric Meyer: Oh, okay.
Lynn Fisher: Yeah. But yeah, Nestflix is essentially... It's a glorified wiki really of fake movies that appear in other movies. So the one I always reference that people know is in Home Alone, Kevin been watching that black and white gangster movie, Angels with Filthy Souls, and that movie is totally fictional, it only appears in that movie. And so, Nestflix, it's a pretend streaming service, but it catalogs all of those fake movies and fake shows that show up in other movies and shows.
Eric Meyer: Okay. Is that restricted to things that are off to one side, or does it also have entries for... I'm thinking The Studio, the series The Studio, where they're making either movies or shows, and so you spend a lot of time on them or... Oh, what was it? The Aaron Sorkin one, Newsnight, which was all about a show that doesn't actually exist in the real world.
Lynn Fisher: Right. Yeah, so all of those do qualify. I actually have been waiting to do some of the Aaron Sorkin ones. Because some of the series aren't streaming, I'm a little bit limited to what I'm able to access to watch and capture. But yeah, my main criteria is that it's fictional and that it shows some footage. So The Studio is good, where most of them, they either have a fake trailer or it shows them shooting part of the movie, and they also create, I'd love to get my hands on this kind of material, but the designers on the TV show have created fake posters that they walk by and fake ads on TV and things like that. So yeah, those ones are great.
Eric Meyer: Yeah. But it has to have some kind of video component, I guess.
Lynn Fisher: Footage, yeah. Footage would be ideal. I will allow, if they're in the process of filming it, if there's decent footage for that. The exception is for some movies, they'll have movie posters only, but there's a lot of them. So in Scott Pilgrim vs. the World, Lucas Lee, played by Chris Evans, is an action actor, and so they quickly show five of his movie posters in succession, so then I can compile those and make a Lucas Lee collection. Or Tracy Jordan on 30 Rock, things like that, or in 21 Jump Street, they show a bunch of fake sequels to 22 Jump Street, 23 and Half Jump Street, I don't know what they actually are, but those ones I'm able to put on the site because I can lump them together and make an entry that way.
Eric Meyer: I imagine that The Simpsons would be a source of so many.
Lynn Fisher: Yeah. Actually, in my spreadsheet, I have a whole sheet that's dedicated just to The Simpsons because there's so many. When I initially did the site, I felt like I was doing so many Simpsons entries, and I still have probably 300 in a spreadsheet that I haven't added to the site. Not everything is going to get added, of course, I won't be able to do it, I think. But yeah, there's tons in The Simpsons, it's a great one for Nestflix.
Eric Meyer: And speaking of breaking containment, Nestflix broke containment recently, didn't it?
Lynn Fisher: Yeah, that one was wild. So when I released it, my normal circle of web friends were like, 'Great, cool.' And then, I went grocery shopping and my phone just started blowing up, and Pat and Oswald actually tweeted about it, and so it hit movie Twitter, which was actually really cool. So I talked with Entertainment Weekly, they featured the project, and so I think it hit a movie audience that got really into it, and tons of people... The cool thing about most of my projects is that I ask for contributions, I want people to contribute to the project. And so, after that, tons of people were submitting titles that I didn't have on the site yet. And so, I have a big spreadsheet of all those, and I've been slowly adding to the site over the years. So yeah, it was really cool.
Eric Meyer: Yeah. And weren't you in the BBC, The Guardian, something, recently?
Lynn Fisher: Oh, yeah, yep. Yeah, it was really wild. It's just an interesting topic, and recently, it popped back up again because of Christmastime and Home Alone, everyone's watching Home Alone, and so people were writing about the fake movie in that.
Eric Meyer: Okay. Well, fingers crossed that they remake the Last Action Hero.
Lynn Fisher: Yes.
Eric Meyer: Then you'll be set.
Lynn Fisher: I think they easily could.
Eric Meyer: So I assume that starts with some kind of itch in your head, right? I have to assume that you didn't just sit down one day and say, 'What kind of a meta website could I make?'
Lynn Fisher: Yeah. No, I think a lot of them, like Airport Codes especially and Nestflix, they start as a, 'Oh, that's a cool thing to notice.' Airport Codes, the way I described it to people was that sometimes the three letter code doesn't match the city or the airport name, and so what is that? And so, there's this breath of history that exists about all of these airport codes and why they're specific names, so once you notice that, that's just a cool thing to know and to see. And same with the fake movies, where I think everyone probably remembers now when they found out that that Home Alone movie was fake, that it's not real. It's like your eyes are opened to this thing that exists in the world, and so you're looking for it now. So it usually starts just as an idea, something I'm interested in, something that's cool, and then I'll go online and look around, like, 'There's got to be a list somewhere of all these,' and usually, there are, just scattered. They're incomplete and they're just wikis or text-based. And so, I'm a visual person, and so I think, how can we create a more comprehensive database or wiki about this? And then also, how could it be presented in a way that's visual and fun to interact with? And so, that's how it evolves into a web project. And those ones, I think one thing I like about these projects too is I think I'm a bit of an archivist too. I really enjoy the process of, 'Okay, now I've got to just find all this information and bring it all together.' I think that's a really fun process, and it's good that I like it, because it's a lot of the work. But yeah, and that's how it grows. And then, with a project like Nestflix, I think one way that... It was sitting in my backlog for a long time, and I think the thing that helps me realize it into a real project is I was like, 'How would you present this information in a way that's fun or interesting?' And I was like, 'It should be a fake streaming service where you could...' It feels even more meta that it mimics some interface that you're really familiar with, like, 'Oh, man, I wish I could watch this movie.' So yeah, that's really how those projects grow into reality.
Eric Meyer: And keeping with the Hollywood theme, one of the other interesting ones that I saw was Hollywood Age Gap.
Lynn Fisher: So that is a site... The idea behind that is it's so interesting that in Hollywood movies and TV shows, very regularly, the love interests ages are... I feel like on average, this is just me off the cuff, I feel like 10 years is normal for the man to be about 10 years older than the woman. And then, there's extreme examples, like if you think about movies like James Bond, where James Bond is 20 or 30 years older than the love interest in that particular film. And so, I thought that that was really interesting. Also, this could be an offshoot of this site, but where women are cast as a man's mother, but she's just not old enough to be his mother, she's like 11 years older than him. So I think that's an interesting trend. I was looking around, like, 'Is there a place that...' There were a lot of articles that would point out the most egregious examples or would call out actors who have this recurring problem. And so, Tom Cruise and Adam Sandler and people like that, they were called out, there was actually a great article on that. But I was like, 'There's got to be a way that we can catalog this in a more complete way.' And so, that's where the site came from. It's actually one of the sites that really helps connect me to the data viz community online, where basically, all I'm tracking... The site has a a grid, but the main data that I'm tracking is the actors who are in the film, when the film was made, the director, and each of their birthdays, so it calculates the age gap when that movie was made. But it outputs a data file, and actually, lots of data viz folks have pulled that data and used it to create... I'm not a charts and graphs person, that's just not a skill set that I've honed very well. So it's cool to see these data viz experts graphing the data and changing how you can visualize the differences, that's pretty cool.
Eric Meyer: So the data that's being visualized here is at the time that the movie was made, so Jurassic Park, 1993, I am looking at it. Sam Neill and Laura Dern are playing the paleontologists who also have a relationship. You have the ages of the actual actors, not necessarily the ages that are in-universe?
Lynn Fisher: Right, the characters, right, yeah. Just the age of the actors at the time of the film being made.
Eric Meyer: Right. Which, in a lot of cases, like pretty much any Woody Allen movie, they're probably even more of an age gap in those situations in-universe. Part of the reason that I wanted to mention this is that the number one biggest age gap is in Harold and Maude. Bud Cort actually just, as we're recording this, died, I think yesterday or the day before, who played Harold, who was, at the time, the actor was 23, and Ruth Gordon, who played Maude, according to the site here, was 75. So there was a 52-year age... Of course, that's the whole point of the movie is that-
Lynn Fisher: Right, yep, yeah. Actually, in that similar vein, when there is a decent age gap and the woman is older, it tends to be a plot point that it's a relationship between an older woman and a younger man, versus the other way, where the man is older, it's not really pointed out, unless it's a really extreme...
Eric Meyer: Yeah. Usually, probably not pointed out. But again, in a few cases, it is.
Lynn Fisher: Yes, yeah, definitely.
Eric Meyer: Well, in some cases, it's going to be a plot point, like Harold and Maude, for example. How many of them are the other way around?
Lynn Fisher: There are a decent amount, but not a lot, not many, especially as a percentage. I think one thing that I've noticed over time, lately, with newer movies, I'm finding fewer and fewer good examples to add to the site, which is, I think, good probably, that the casting has changed, the way that people want to see relationships on screen has changed. But I'm finding it's much closer now, love interests are much closer in age now than they used to be, and so I don't add as many anymore, or if I do, a lot of them are movies from the past. I don't know if I ever added this, it's definitely an issue to be added, but to add just a toggle where you can show only the ones where the woman is older or vice versa.
Eric Meyer: Have a few filters.
Lynn Fisher: Yeah, I think that would be good.
Eric Meyer: I mean, I went down to the bottom of the page, and some of these had there's zero years. Did you include those because you didn't want to have just one end of the distribution?
Lynn Fisher: Right, yeah. I think it would be good to show popular movies where there just isn't that age gap. And as I was initially doing the initial dump, I was going through by actor and actresses, just doing their whole catalog, and so I would just add them, and sometimes they would just naturally be on the lower end of the spectrum.
Eric Meyer: Okay. So that's two things that are Hollywood-related, but you also did Airport Codes. I'm assuming that Hollywood is just...
Lynn Fisher: Yeah. I'm actually, I just am a movie and TV watcher, I love that, and there just naturally tends to be a lot of trivia or trends in those types of things. I have a project called Dress David Rose, where David Rose from Schitt's Creek, Dan Levy, he has just a very unique style on that show. And so, on that site, I catalog every shirt and sweater he wears on the show. So that was a little bit of a research data collection site, but also an illustration project for me. Those are all SVG, I did that illustration. That would be wild in CSS. I was working in Illustrator. So that's a fun project. And then, I also have The Good Place, the Kristen Bell, Ted Danson, Mike Schur show, that's a show where food is mentioned a lot and shown a lot throughout the show. And so, I collected all that data, every time anyone talked about food or beverages, and created a fake restaurant menu that catalogs all of the food items from that show. So yeah, when I get into a show or a movie series or something, I think I'll typically notice some of these recurring themes or recurring jokes, and those are ripe for building a site around.
Eric Meyer: I feel like it also probably calls for a certain amount of, let's say, completionist tendencies.
Lynn Fisher: For sure. I was actually thinking about this today. A project I'm working on right now is I'm trying to catalog all the concerts I've been to in my lifetime, which has been interesting, because a lot of them were when I was in high school, and so there's very little record of shows like that on the internet. And so, I was feeling an overwhelmed feeling, but also an excited feeling about collecting all this data and being able to have it be comprehensive. So yeah, I think that is a little bit of a driver for me is, 'Hey, there's all this scattered data somewhere and I'm going to put it all together and it's going to be this perfect little archive.'
Eric Meyer: How much do you rely on Wikipedia in those cases? I'm just curious.
Lynn Fisher: I do a lot for the age gap one especially, things like birthdays. I feel like for more informational type things, so on Nestflix, the studios that were involved with making each of the seasons of shows for making sure I'm crediting the right people, and I'm sure I've gotten a lot of it wrong, but I really earnestly try to make sure that I have the right credits. Oh, yeah, I have a website about Top Chef, so I use Wikipedia for that for contestants, and they do some episode recaps that help me out. I haven't used it much on my concert site. I think the data is just very scattered. But I never in earnest gave it a try to try and figure out if I could compile this data. But yeah, I think I can, and so I think will.
Ujjwal Sharma: All of them are so high quality, you're such a great artist. But I'm personally so impressed by the US flags. Obviously, it's such a great concept and idea and it's beautifully done. But being part of, a few at least, flag nerd communities and knowing a bunch of people, I know that you're particularly interested in the US because you're based in the US, but I think, no shade on US states, but there's other flags that are really cool as well, and I think you've inspired me to try something maybe with Spanish regional flags or something like some cool flags.
Lynn Fisher: Yeah. That would be awesome, you should totally do that. And I agree that there's much better flags outside of the US. A lot of the state flags are just the state seal on blue usually. And so, yeah, I think there's a lot of states... Arizona has a very good flag, so I love that one. But yeah, that one was interesting, where I was trying to specifically about the designs of flags, official colors and dimensions and things like that, which I actually reached out to a lot of state governments to try and get information, and a lot of them don't have it, which is also interesting. We talk about how companies don't have good design systems and things, and I think governments of states could use some help too. But it's also been fun, I have liked... Especially some states flags have been redesigned recently better, and that's been cool too.
Ujjwal Sharma: I love these redesigns as well. And always when they organize these contests, the submissions are so cool. Sometimes, I wish they picked better. But yeah, it's such a nice way to learn about flags while just nerding out, and it's a beautifully designed site, thank you.
Lynn Fisher: Thank you.
Eric Meyer: I have to agree with you about Arizona's flag, and it's kind of amazing to me that it is the original flag, because it looks like one of these recent redesigns.
Lynn Fisher: Right, right. Really bold and graphic and...
Eric Meyer: Right. It doesn't have those real fiddly details that you see in state seals, that sort of thing. It's just like, 'Here are 16 geometric forms, that's it.'
Lynn Fisher: Yes. Roman Mars, I think, did a podcast episode on state flags, or I think it was more just the design of flags and what makes a good design, and I remember one was that you could probably draw it by hand. And so, some of those state seal ones are definitely not hitting that requirement.
Eric Meyer: Right. I'm going to admit to a slight bit of pride, I live in the only state that does not have a rectangular flag.
Lynn Fisher: Oh, yeah.
Eric Meyer: Yep. Ohio has a swallow-tailed burgee shape.
Lynn Fisher: I do love that.
Eric Meyer: It's interesting.
Lynn Fisher: It's so cool. Yeah, unique, for sure.
Eric Meyer: I'm actually curious about something. Since Airport Codes has come up before, but on the Airport Code site, you have all these airport codes that are backed by very nice photography. Where did you get all that photography from? Because it's a lot of airports, literally all over the world.
Lynn Fisher: Yeah. So it is a combination of the Wikimedia Commons and Flickr, where the images are Creative Commons licensed. There is actually, I think, aviation photography and airport photography is a little community industry of itself.
Eric Meyer: Oh, yeah, absolutely.
Lynn Fisher: And so, there was a lot to choose from. I think I'm at the point now where the ones that are yet to be added are the ones that don't have great photography, they're just less visited, or all the photos are copyrighted and so I can't use those, or I'll reach out to the airport and they won't write me back or things like that. But yeah, I was able to thousands of airports before I ran into that issue of not having something to show.
Eric Meyer: Yeah. I just clicked into one and discovered that the credit was to somebody that I know
Lynn Fisher: What? Really?
Eric Meyer: Yeah.
Lynn Fisher: That's awesome.
Eric Meyer: It's the picture for Pearson International Airport in Toronto. It was taken by Coralie Mercier, who's at the W3C.
Lynn Fisher: Oh, nice. That's awesome.
Eric Meyer: Yeah, that's very cool. So Wikimedia Commons, is that a thing that you draw on a lot in some of these, or...
Lynn Fisher: I guess for Airport Codes especially and the flags, where there's just the public domain SVGs I can use and things like that. I'm trying to think. I actually was hoping there would be more for this concert project I've been working on, but I think there hasn't been as many concert photos on there. But yeah, I think for Airport Codes especially, it was very, very helpful.
Eric Meyer: Some of the other ones look like maybe you found a clip art source, but did you make the clip art? So as an example, The Dusting Zone.
Lynn Fisher: Oh, yeah. The Dusting Zone, I think that that was a design asset. What's that place? Oh, Creative Market, I think that one was from there.
Eric Meyer: Okay.
Lynn Fisher: Yeah. The Dusting Zone. That was a Netlify Hack Day kind of a project.
Eric Meyer: And what's the point of The Dusting Zone?
Lynn Fisher: Yeah. So actually, the prompt for that event was dusty domains, and it was, 'Hey, build a site for those domains you're sitting on for years, you're not using them. It's finally time to make a site and deploy it on Netlify,' or whatever. And so, I am actually very disciplined with my domain buying, so I don't buy a domain until a project's about 75% done, so I didn't have any dusty domains. But I decided I want to do one anyway, so I ran with the dusting dusty theme, and the site is almost just a, 'Hey, stop here if you're feeling stressed and you need a little break.' And so, there's a blackboard or a whiteboard on there with some illustrations, like you were mentioning, and you can just erase it, and then refresh it, erase it. And I think there's something a little bit satisfying about that, just clearing the board. It's like those pressure washing videos that you can watch. It's like, 'Oh, this is nice. You can clean it.'
Eric Meyer: I was just thinking, I would assume you were just a little bit ahead of the power washing simulator vibe, the whole dad core video game.
Lynn Fisher: Yeah, yeah. I think it feels just satisfying to do that.
Eric Meyer: I think what makes it really satisfying is that you can get it right, because I don't know about you, but when I clean things off in the real world, they're never completely clean.
Lynn Fisher: Oh, right, yeah.
Eric Meyer: I clean off my laptop screen or whatever, there's still a little bit of smudge. It's just like, 'Ugh.'
Lynn Fisher: Totally.
Eric Meyer: But here, as long as I make sure that I touch every pixel, it's all clean.
Lynn Fisher: Yep, 100%.
Eric Meyer: So which of these would you say is your favorite?
Lynn Fisher: Oh, wow. Gosh, I don't know. I think probably A Single Div, just because I spent so long with it, and I think it pushed me in a point in my career where I really needed that. I think it was really helpful in me growing and also connecting with people in the community. I think that project especially just put my work in front of people that I wanted to learn from and be connected with and chat CSS with, so that was probably my favorite in that way. Besides that, I would say Nestflix is a huge one. That one, I think I look at it and I'm like, 'Ah,' I still think this is so fun and cool. And also, when I'm working on these projects with all this data, that one actually is a lot of data collection and then also a lot of asset generation. Every entry has a logo and it's in SVG, and so I have to either figure out how to make that, either by hand or by using Adobe Illustrator tools, like image trace and things like that. And so, there was just a lot of work put into it. When I'm in it, I'm like, 'I must have been in a trance. How did I create all this stuff?' And so, it's fun to look at that and see the breadth of the content on that site, and it's a site I like looking at, and so I like that one.
Eric Meyer: What about you, Ujjwal, what was your favorite in here?
Ujjwal Sharma: I think it has to be the flags. I also like the WhyAZ. I've never been to Arizona, but I can feel your enthusiasm through this website.
Lynn Fisher: That's great. That project's definitely a passion project, where it's probably the site... So .az is Azerbaijan, the country code, and so it's not a cheap domain, so I joke that it's my project with the biggest differential between visitors and domain cost. But I've heard that people that I know, especially in Arizona, when they're trying to recruit people and people are not super jazzed on Arizona, they can send them that and be like, 'Hey, there's some cool stuff here.'
Eric Meyer: Okay. I'm going to go with Open Source, Open Hearts.
Lynn Fisher: Oh, that one's a good one. So yeah, that's a project that I worked on at Netlify, and it's basically you can send little Valentine's themed cards to open source maintainers that you want to say thank you to or show your appreciation.
Ujjwal Sharma: This is such good timing to remind people.
Lynn Fisher: Oh, yeah.
Eric Meyer: We are doing this right before Valentine's Day. And then, the other thing that I really want to hear about the way you can be creative on the web is your yearly site redesigns, which are always really involved. Well, they seem always really involved to me.
Lynn Fisher: Yeah. This year's was probably the most simple one I've done lately, which was nice because I wasn't super stressed out about it. But yeah, I redesign my website every year. Lately, it's been around December. So starting, gosh, probably like 2016, about 10 years ago, I really wanted to focus on exploring responsive design, and so using it in ways that people don't expect or doing some kind of artistic stuff with the landing page of my website. Prior to that, it was a little bit more standard redesigns, just changing colors and layout and things like that. But around that time, I really wanted to push myself, and also, CSS started to change real fast around that time, new stuff was coming out every year, and so there was always a new CSS property or CSS theme or idea to explore when my redesign came up. So it has been really rewarding and fun, really trying to push myself each year and do something different and unexpected.
Eric Meyer: Yeah. I mean, one of the things certainly that I noticed and a lot of people comment on is, at least with some of them, the way that as you change the view port width, things just change wildly.
Lynn Fisher: Yeah. I think coming back to the web being a creative medium, I think one thing I wanted to explore was how people interact with the browser, how that's such a unique aspect of the web, and how can you create something that uses that very specific thing? And so, for years, I think people were doing that already with scroll, there was that parallax boom and people with GSAP, especially people doing cool animations on scroll, sometimes they overdid it, a little bit too much scroll jacking or whatever, but it was cool. Lots of people were doing really neat, artistic things with scroll. And so, I was like, 'What's another thing?' And for web designers, it's resizing the browser. A lot of times, you go to a site, and the first thing you do is do that to see how the site is responsive. How did they handle this? Or sometimes there's just cool stuff. And so, I really wanted to tap into that and say, 'Okay. Well, wouldn't it be fun...' That first year, 2016, what happens is as you resize the browser, every 100 pixels, it just totally changes the design of the site. There's about 20 something different layouts. And so what I wanted there was for you to get to the site and you start resizing and it's like, 'Whoa, what's happening?' To surprise you. I don't think anyone was expecting something like that, and so that was really fun. And so, that one, I was thinking about responsive in a media query-heavy way. And then, other years, I've thought about, okay, well, what if as you resize the browser, the browser becomes an animation renderer? And so, there was a couple of years where, as you're resizing, animation is happening, the site is changing, but only when you're resizing, that's the trigger for the animation to happen. So I've also thought about like, oh, maybe the site, it looks boring, but then once you start resizing, then it's interesting, so then it's even more obscure. So some people might never see that, which is fine, you can experience it in different ways. Just lots to play with there.
Eric Meyer: Yeah. That first design that you talked about, where it basically completely changes the design every hundred pixels or so, I find that fascinating almost from a Dadaist point of view, because two different people can have two profoundly different experiences of the same site just because their browser windows are a little bit different in size. Literally, it could be you talking about, 'Oh, did you see Lynn Fisher's site with the... It's got the thing over on the side?' And then, someone else goes to it and it's like, 'What are you talking about? That's not over there. There's shrimp on the left.' 'No.' It's challenging a lot of the concepts that we rely on. You're supposed to have a consistent user experience. And of course, I know that you would never say that Amazon should do this, for example, or any site that's trying to communicate information to a customer base, let's say. But yeah, it's another aspect of the weirdness, and it's a thing that you can't really do in any other medium.
Lynn Fisher: Right, yeah, that's interesting.
Eric Meyer: Yeah. It's one of those fundamental things about the web, at least the web of now, that the only thing we're really using it for is to move a piece over here so that things feel consistent, but things are arranged a little bit better, depending on how people are coming in, which is great, that's an accessibility thing. But so often, we just ignore the fact that, wow, you could do so much with this, you could do really bizarre things with this. But you had the insight to see that and do something with it.
Lynn Fisher: Yeah. I'm usually a late adopter, but I feel like I was a real early adopter with responsive design at the company I was working at, I was like, 'We have to be doing this.' And I think the two biggest things that I was trying to push or had to explain was, one, that media queries wasn't just about width, all these other things can change technically if we want to. And so, it could just be really anything, whatever we want to do. Of course, you would, like you were saying, typically not do that with a client website or something. But the second thing was there was a lot of pushback about the site just looking the same all the time, no matter what device you're on, no matter what. And I think it took a lot for the industry and for people in general to, I think, get and also to accept the idea that, hey, things look a little bit different depending on the context of where you're seeing the site from, and that's okay. And so, this takes this to the extreme, obviously. But I think there's this foundational concept of, yeah, this site is going to change, depending on where it's, and I think that's a cool thing about the web.
Ujjwal Sharma: Yeah. One thing that seems to recur in our discussions, some of the biggest improvements that were made to the web platform, or some of the biggest technical restrictions being lifted, was coinciding with a period where culturally we were getting more and more restricted. And you were right, if I think back to learning about media queries and what it means to build a responsive website, I'm pretty sure that nobody in the mainstream was even talking about anything other than width, which is such a sad limitation. I mean, there's so much you can do with media queries, and it's only occurring to me for the first time today, it's kind of sad. We need you to teach people how to stop restricting themselves and use the medium.
Lynn Fisher: Yeah. I think all the tools we use every day, especially in CSS, there's so much more that you can do with each thing than you even think about the typical application, and it's fun to just explore that. Media queries were so powerful even when they were first introduced, and now we have just even more that you can do. I don't even know. I feel like that's something that I still want to look into, where I'm not using things to their full potential, I don't think, and I'd like to. And so, yeah, it's just a constant learning, but also looking at things in a different way.
Eric Meyer: It's so key. It's always, I think, important to have people in any field who are just looking at it differently and showing everyone else, 'Check this out.' Because yeah, probably nobody's ever going to deploy a client site that completely changes the layout at every break point, but they might feel a little more free to change it in significant but useful ways, rather than just, 'Oh, I'm going to make this a little more narrow and then I'm going to drop this down,' but maybe do more. And so, we need the visionaries, which I feel comfortable saying that you're one. You have visions for what you could do with a set of data, a set of trivia, a set of CSS commands, and do unexpected and interesting things with them. So if you won the lottery tomorrow, and therefore were able to just retire effectively, like, 'I don't have to worry about where my next meal's coming from, I'm set financially,' what project would you do that you're not currently doing because of time constraints?
Lynn Fisher: Oh my gosh. I don't know. I don't know if there's any that feel too big to accomplish where I would need all the time in the world. I think that a lot of them are still in the I'm-not-quite-sure-how-this-manifests stage yet. One thing I've been thinking about, I've been actually trying to figure out if there's a word for this, but in movies, so there's this paradox that exists, where in Avengers Endgame, the Marvel movie, they talk about time travel movies and they say Hot Tub Time Machine. But Sebastian Stan, who plays Bucky, is in Hot Tub Time Machine. And so, there's this paradox where actors are in a movie where their other movie gets named. I don't know if there's a term for that in the movie industry, but I've been thinking about things like that, this meta thing that happens in media. So that's one project I've been simmering on. I don't know if that'll end up being anything. I've also been thinking about... These are all movie-related. So one is sitcom relationships. I guess the sitcom is really different now, so maybe this is a little bit smaller in scope. But Seinfeld and Friends, all the different romantic pairings that happen in those shows, I feel like that's something I've been thinking about. And I've been thinking about death tolls on shows like Grey's Anatomy, where I feel like everyone would joke that just everyone dies on that show. Oh, also, sorry, I'm not sure this is interesting, but another thing I've been thinking about is in cartoon shows, I don't know if there's a term for this in the industry either, where you know how in cartoon shows like The Simpsons, everything resets every episode, but there's sometimes something happens where it never gets reset. So in The Simpsons, I don't know if this is true, but at some point, Santa's Little Helper dies and doesn't come back, I think, and that's some sort of canon event, I don't know, where their reality resetting world changes. Anyway.
Ujjwal Sharma: I've noticed that this occurs more on these Christmas episodes or those special episodes that they do only once a year, when they have this trope that only comes up maybe for Christmas episodes.
Lynn Fisher: Yeah. I bet there is a pattern.
Eric Meyer: Yeah. I think canon event is probably the right term. Maybe that's because I just recently watched Across the Spider-Verse with my team, where they talk literally about canon events. And I feel like there's probably a term for the other thing that you mentioned, where somebody who's a character in one setting is mentioned in another one. One of my favorite examples of that is the J.J. Abrams Star Trek films, they keep using Beastie Boys songs, but in Intergalactic, there's a lyric about Mr. Spock.
Lynn Fisher: Oh, yeah. That's totally...
Eric Meyer: So how does that work?
Lynn Fisher: Yeah, yeah. It creates an interesting paradox or a multiverse or something.
Eric Meyer: Yeah. Anyway. So I think we're coming to the end. I mean, we could talk for hours, but... Tell people where they can find you and maybe pitch a little bit of support your way.
Lynn Fisher: Yeah. So the best place to find me is lynnandtonic.com, which is my website. I'm on Mastodon, I think it's lynnandtonic@frontend.social. Probably not the best place to reach me, I think my website is probably the best spot, and you can jump to all my projects directly from there. And I encourage you to go take a look at them, I think you'll have a fun time with it.
Eric Meyer: All right. Well, thank you very much for joining us for Igalia Chats, Lynn, really appreciate it.
Eric Meyer
Ujjwal Sharma
Lynn Fisher