Louis Hoebregts (aka Mamboleoo) has been creating wonderfully creative Pens on CodePen for many years. His early work, as we learn on this episode, was inspired by the CSS trickery of Lea Verou! He rotates his tools between HTML and CSS, SVG, and canvas, but tends to have an aspect of motion and the unexpected. Some of the most popular Pens have an aspect of education to them as well. Here’s a list of Louis’ Pens he chose to talk about, covering some of his history here, each of which is symbolic of a personal era and often unlocking new professional doors:
- https://codepen.io/Mamboleoo/pen/ynzCu (March 2014)
- https://codepen.io/Mamboleoo/pen/dzyBu (Aug 2014)
- https://codepen.io/Mamboleoo/pen/ByxPvG (Feb 2015)
- https://codepen.io/Mamboleoo/pen/pvQQde (March 2015)
- https://codepen.io/Mamboleoo/pen/dowRJo (Aug 2015)
- https://codepen.io/Mamboleoo/pen/xGeELo (Aug 2015)
- https://codepen.io/Mamboleoo/pen/PZWPZx (Jan 2016)
- https://codepen.io/Mamboleoo/pen/oxaXdj (April 2016)
- https://codepen.io/Mamboleoo/pen/Bppdda (Jan 2017)
- https://codepen.io/Mamboleoo/pen/GRJKoBw (Feb 2020)
- https://codepen.io/Mamboleoo/pen/WNxOvjo (Oct 2020)
Time Jumps
- 00:34 Guest introduction
- 02:35 His first Pen
- 05:21 Second Pen
- 09:13 Sponsor: WooCommerce
- 10:50 Animating a photo (2015)
- 15:23 ThreeJS Pen
- 18:26 Generative art and NFTs
- 21:18 Turn your mind Pen
- 25:11 Teaching code
- 29:12 Try to have fun with code
- 30:01 Happy New Year Pen
- 32:42 CSS 3D Pen
- 36:22 Running a Meetup
- 40:48 Most popular Pen
- 43:24 Among Us inspired Pen
- 44:32 The Trick to Viewports in Mobile article
Sponsor: WooCommerce
WooCommerce can do it all as far as adding eCommerce functionality to a WordPress site. One off product sales, for sure, including shipping and inventory management and all that. But it can also sell digital products. It can also sell memberships and subscriptions. Put on your what if hat. What if your business sold memberships? What could you offer? It’s always worth thinking about.
Transcript
[Radio channel adjustment]
Announcer: Today, on CodePen Radio.
Chris Coyier: Howdy, folks. Welcome to another CodePen Radio. This is 353. Another one with a super special guest - that you already know because you already tapped the button with your finger on your podcast player of choice. It is Louis Hoebregts.
Louis Hoebregts: [Laughter]
Chris: Hi, Louis! We've never met. We're meeting for the first time - kind of - which is outstanding because we've crossed paths many times. You've written for CSS-Tricks. You've been a CodePen member just forever.
Louis: Yeah.
Chris: It's just a pleasure to get to talk to you.
Louis: Yeah. It's an honor to be here as well. Really fun to finally meet the guy behind the website I probably use the most in my career.
Chris: Oh, nice. Yeah, Louis, you are the front-end doctor, the front-end painter, the front-end snowman. I get these from your really excellent personal site, which is at Mamboleoo, which is kind of the screenname you go by on CodePen, Instagram, Twitter, and everywhere else. I'll link all that stuff up in the show notes as well.
You have one of those really cool -- mamboleoo.be for Belgian. You're from Belgium.
Louis: Yep, Brussels, precisely.
Chris: Brussels. Fantastic.
Louis: I feel like people know Bruges and then Brussels. That's most of Belgium for you, probably.
Chris: Yeah.
[Laughter]
Chris: It's Brussels bigger?
Louis: Yeah, it's the capital.
Chris: Well, fantastic. That's the power of the Internet bringing us together, as usual. I reached out to you to do this, which is overdue, frankly, just because of how much amazing work you have on CodePen. It's just, again, a pleasure to get to talk.
You had this idea to take a trip down memory lane of some of the Pens that you've produced, which I think is just a tremendous idea. I love talking about code and the history of things, just getting a chance to peek at the past. Then we'll roll forward to today and start looking at some of your Pens, including your very most popular Pen. We'll get there in time. Maybe let's start at the back.
You listed one from 2014, which part of me feels like, "Oh, that wasn't that long ago."
Louis: [Laughter]
Chris: Part of me is like, "Oh, my god. That was a really super-duper long time ago." What is this Pen?
Louis: Yeah, so this is the first Pen I could find on my profile. As you said, it's from--
Chris: Ooh, the very first one?
Louis: Yeah, it's the very first one, and I did it while I was studying in school, Web design. I was looking how to create some effects in CSS. There was this amazing talk by Leah Darrow. She made a talk to show the CSS secrets people didn't know, and there was one using the filters because, eight years ago, filters on the Web were nothing. Now people use them often. But back then, it was amazing.
Chris: Mm-hmm. Mm-hmm.
Louis: I was just trying to recreate the effect she was showing on her talk. Now you can even do backdrop filter, but it was a way to reproduce the backdrop filter with only CSS filters.
Chris: Right. There's a photo background, let's say. I think it works the best with the photo.
Louis: Yeah.
Chris: Then a part of that area has that blurry, glassy effect on it that got popular much later when Apple decided it was cool. It's amazing to see this back in 2014. Apparently, yeah, filters were a thing. Of course, you have -webkit-filter on here--
Louis: [Laughter]
Chris: --because that was the only way to do it, which will still work today because browsers kind of honor those old prefixes. But it was one thing to do a filter. It was another trick entirely to do a filter only on the background and not on the content on top of it.
Louis: Mm-hmm.
Chris: Which is what backdrop filter makes easy now. But of course, it looks like, in this trick, you had to have an element and then a pseudo element underneath it that did the blurring so that the one on top could have text it in and now blur. It looks like that was the trick here, right? For your first trick ever. [Laughter]
Louis: [Laughter]
Chris: I mean I know you were kind of quoting Leah, but still pretty cool to see.
Chris: Yeah. Actually, I think the first five Pens are basically just trying to reproduce most of the effects she was showing on the talk. It's really me trying to understand how CSS works and how we can make it prettier.
Chris: Nice. Nice. Yeah, I remember that talk, and her book as well CSS Secrets.
Louis: Yes. [Laughter]
Chris: They were really good. To this day, I'm like, "I'm the one who has a website called CSS-Tricks, but she's the real master of CSS tricks." And you yourself. Look, you're obviously attracted to the idea of pulling off these CSS effects. Now, eight years later, are still clearly doing that work, but use more technologies now. Even in this very second Pen that you list, you already have jumped from just CSS effects into Canvas.
Louis: Yeah, so ... I think it's from August, so just a few months later. I was googling online and, at some point, I just understand there was this thing called Canvas, 2D Canvas. I just started to explore what Canvas was. Well, CodePen was obviously the best place to do that because you could set up -- you know CodePen.
Chris: Yeah. I'm familiar.
Louis: [Laughter] That was really cool to just start exploring coding some Canvas, sharing with other students, and then from one little code, you can just fork and then do another one and do another one. That was my first steps with Canvas back then, which when I'm reading my code now, it's a bit cringy. But I think it's the first steps, baby steps.
Chris: Yeah. It's fun to see some of these things in here. This one has that classic request animation frame. It's not really a Polyfill. It was just a way to use that function because it required all these vendor prefixes, even in JavaScript. It was annoying to have to write that. There was this little snippet that everybody used back then that just kind of picked the right vendor prefix version of it. I see that at the top. I remember seeing that so often back in the day. Again, this is 2014, so pretty cool. Then it looks like you kind of built your own DAT GUI, or whatever.
Louis: Yes. [Laughter]
Chris: One of those things that's like, I'm not just going to do a Canvas animation, but the Canvas animation is going to take parameters from these range sliders sitting on the Pen. That is early days generative art, or at least for you.
Louis: Yeah, it is. It is. Yeah, as you were saying, I wanted to have some parameters that I could play with as a user. I don't even know if that GUI was already available back then. But you just make it work in your way.
Chris: Yeah, it probably was.
Louis: Yeah, probably.
[Laughter]
Chris: Yeah. No, that's cool because you don't always have to reach for a library. It's not that hard to just get element by ID and add an event listener for the change event. Then grab the new value and use it in your code.
Louis: Yeah, there is not even jQuery on the product. I'm surprised by myself.
Chris: [Laughter]
Louis: I'm proud.
Chris: Yeah.
Louis: A little pride here.
Chris: How big was the jQuery Canvas crossover? jQuery didn't really help you with Canvas, but it did, of course, with the inputs and stuff.
Louis: Yeah.
Chris: Yeah. Funny. Funny. No jQuery. Yeah. [Laughter] You were ditching jQuery back before jQuery existed.
Louis: Is there a search way to find old CodePen without jQuery or with jQuery? That could be good statistics to find on your profile.
Chris: Yeah. Maybe. I don't think there's probably something super reliably user facing that you could use. We could probably run queries to figure it out. But we've never.
Search is a really tricky thing; what you want to expose to users and what's possible and stuff. I would love that. I mean we've talked about it over the years internally. Even stuff like auto-grouping technologies like wouldn't it be nice if the user didn't have to think about, but they built a Pen using X, Y, and Z technology that was automatically part of other Pens that use those technologies, so they'd be easier to browser and search for.
Louis: Hmm.
Chris: We've never quite nailed. Someday, we'll figure it out.
[Guitar music starts]
Chris: This episode of CodePen Radio is brought to you in part by WooCommerce, which is the thing that powered e-commerce on all WordPress sites. If you were to use WordPress.com and spin up your site -- great choice, by the way -- and add e-commerce features to it, that's WooCommerce doing all that work. Tremendous plugin for WordPress.
I use it on CSS-Tricks. One of the things I use it for is subscriptions and memberships, which sound like really similar words, but you do kind of need to understand the difference a little bit.
A subscription is just like recurring payments that you can set up, so it handles that for you. Then a membership is a thing that unlocks aspects of the site. They're usually tied together, but they don't always have to be. You know what I mean?
Anyway, I think that's a thing that can really unlock your brain is what if. If you've got your business hat on -- whether it's on behalf of a client or yourself -- what if you had subscriptions. What if you had memberships? What would you offer? Would you offer a newsletter that has your valuable insights into the things that you know, but you have to pay to read it? Would you lock down certain areas of the site and put special videos there, special content there? Would you offer digital downloads just for members that's different than a one-off download? These are things that you can download as a member.
What if? What if? What if your site had memberships? Just think about it and then know that whatever you think of, WooCommerce can do it.
That's it. Thanks for the support, WooCommerce.
[Guitar music ends]
Chris: From Canvas, fast-forward about a year, so 2015. These are all so -- it's funny how early you were in your journey, but they're so interesting and good.
Louis: [Laughter]
Chris: There's an element of creativity to them that you could tell you had the spark early on. This next one is, I think, a famous photograph a guy who was trying to fly by tying a bunch of birds to his arms.
[Laughter]
Chris: It must have been inspiring to you somehow that you chose to animate this photo. How did you even get here?
Louis: I don't know, actually. I probably just saw the picture online. I was like, "Oh, this is a great start to create some 3D animations."
Yeah, as you were saying, there's a guy who tied two birds trying to fly away, and I just, in Photoshop, started to crop out all the birds, the guy, the background, and stuff and make everything in divs. This is like 3D CSS and all the birds are floating around in different positions, speeds. Yeah, just from the picture, I figured out it was a nice way to animate. Yeah.
Chris: Yeah. It's kind of amazing that this might have been the first take on a photo that's just begging for it.
I was just in Portland and saw a Van Gogh exhibit there. The point of the exhibit was like a modern take on Van Gogh paintings. You're sitting in this huge room with Van Gogh paintings on the wall. Not real ones, but giant digital recreations of it. Then they would slowly start to move. They eyeballs would blink. The leaves would fall off the trees and stuff.
Some artist, like you, who took these original photos and then decided to bring movement to them, it was cool to see. I think that kind of reflections in that in this Pen, too. It's stuff that, okay, you did this six years ago, but it feels just as fresh.
Louis: [Laughter]
Chris: If this Pen dropped today, you'd be like, "Cool!" This would be great work to see any day.
How is 3D involved here? I see when you move your mouse. Yeah, it's not the birds' movement that's 3D. I guess it is.
Louis: No, it's only the perspective that's being--
Chris: Perspective.
Louis: There were big rotations on the parent or something. Yeah.
Chris: Right. Even the guy himself is set up on a layer above the background.
Louis: Yes.
Chris: A tiny bit of Parallax there. Beautiful.
Louis: Yeah, and as I'm scrolling, it's funny because I see some comments in French because, back then, my English was worse. [Laughter] I was still writing comments but trying to make them in French so I could understand them myself. Yeah, I'm trying to understand what I'm doing, but I don't know what I'm doing in this code. It's been so long.
Chris: [Laughter] Yeah. I know.
Louis: Yeah. Even the library I'm using is long gone. Yeah.
Chris: Is it really?
Louis: Yes. Yes.
Chris: What was it? It was a 3D CSS library?
Louis: Yeah, it was made by one of my teachers. He's actually the one who introduced me to Web GL, Canvas, and all that stuff.
Chris: Mm-hmm.
Louis: He created a library to generate divs in 3D, so you could just ask, "Make a box," and it could create six divs with a good transform on them, and then you could apply a rotation on the box or on the parent and stuff.
Chris: Yeah, I see. That's when Translate 3D existed in CSS. It was like post -- you know it was post CSS 3.
Louis: Yes. [Laughter]
Chris: I see the library here. It's up and hosted on CodePen Assets, probably because you just had to put it somewhere.
Louis: Yeah. [Laughter] A backup.
Chris: I don't know if it's pre-NPM, but certainly something like that. Yeah.
Louis: Yeah, definitely.
Chris: Copyright 2010....
Well, that's a beautiful Pen. I hope people check out all of these, listening to that. Then here comes 3JS, which is still a highly used library, so we're into modern times in that regard. What captured your attention about 3JS?
Louis: Yeah. I think I remember -- do you remember there was a video clip ROME. It was a video clip. You're following a train, and then you had birds and animals running around. It was a full video clip in the browser, and that was amazing back then.
Chris: Oh...
Louis: I remember when I saw that. I was like, "Okay, this is what I want to do." I just started with the basics. Yeah, this is--
Chris: A city.
Louis: Yeah, it's a city. It's just boxes. Then the light is being controlled by the mouse.
Chris: Right.
Louis: Yeah, so that's the first of steps because I started to create this collection on CodePen, Learn 3JS.
Chris: Right.
Louis: Because even for me, it was hard when I was starting a new CodePen, like a new 3JS experiment. I was like, "Oh, but I've been loading OBG files in the past, so how do I do that again:?" Then I would just check my own Pens. I created a collection because, of course, I had to develop Pens like 3JS animations, so it was hard for me to find them back, so the collection was nice for me.
Chris: Oh, that's nice. Yeah, the feature on CodePen of collections is kind of a way to get back.
Louis: Yes, it is. Yeah.
Chris: Yeah. That's cool.
Louis: How to not get lost in your own CodePens.
Chris: Yeah, it's still nice. Is there an element of generativeness to this?
Louis: I think it's pretty much random, checking on the boxes.
Chris: Yeah.
Louis: The library, 3JS is version 70. I think we just got the version 136 or 137 this week, which is almost double.
Chris: That's funny. They don't really follow semantic versioning, I guess, this particular library.
Louis: [Laughter]
Chris: They just crank the version up.
Louis: Yeah.
Chris: Interesting. Still, yeah, so there are still tons of 3JS stuff on CodePen. This one is still a very beautiful Pen now. It's amazing what you can do with just having an idea that's pretty clutch. Then try to reproduce the idea and add a little randomness to it. There's so much about CodePen that begs for that generative quality.
Louis: Mm-hmm.
Chris: Add the little knobs. Add the controllers. Make the colors changeable. Make it random but constrain the randomness. You can see that so clearly in the heights of these towers. There's a minimum and a maximum. It almost makes it more beautiful, unlike if there were just no limits to their heightness or shortness. It might look too random. At least that's my take on things.
I would be remiss without asking. I'm still, like everybody else, trying to sort out my feelings. There's so much of this world of NFTs and all that crap that is generative. You know?
Louis: [Laughter]
Chris: You see some CodePen community playing with it to some degree. Does it interest you? [Laughter] Are you trying to jump out there and make generative city NFTs or anything?
Louis: [Laughter]
Chris: Or do you just not care?
Louis: Well, I'm keeping an eye on it because it's a new technology. As a nerd, I have to keep my eyes everywhere on the Web. I just don't feel like jumping into that right now. There are many concerns.
Yeah, I don't want to ... opinion on it. I'll just wait to see where it goes for now.
Chris: Yeah. That's why I'm asking you because I'm trying to make sure I collect everybody's feelings on it. Of course, I have some of my own, too.
Louis: [Laughter]
Chris: It's not like I'm incapable of having a thought, but it seems so early and there's so many very obvious negatives.
Louis: Mm-hmm.
Chris: And some very obvious positives, too.
Louis: Yeah.
Chris: [Groans] It's tricky. It's tricky. I want to wait for some of those negatives to kind of smooth out and see. Yeah, all the theft and stuff really bothers me.
CodePen is such this hive style. If you are a bad person, you could go to your profile. Gosh, I feel weird even saying this. Just steel your stuff and NFT it. That happens every day. It's probably happening right now. That part is really a bummer.
Louis: Yeah, well, it happened to Michelle Barker. I don't know if you follow that.
Chris: I did read her post on that.
Louis: She had this CodePen on generative 3D characters. Just some random person started copying, like copy/paste, and making NFTs out of it, which was super weird because it was obvious that everything was from Michelle.
Chris: Right.
Louis: Luckily, the guy understood it was wrong and he took it down. It was still shady, very shady.
Chris: Yeah. Doesn't that add an interesting twist to it that they didn't even realize it was wrong?
Louis: Yeah.
Chris: There's something about that whole community that theft is so -- you don't even understand what stealing is.
Louis: Mm-hmm.
Chris: [Laughter] Just blows my mind.
Louis: Yeah. "Oh, it looks nice, so people will want to buy it." It's not yours.
Chris: Yeah. Thus, the money should come to me and my wallet.
Louis: Because I have the idea to sell it, so it's my money.
Chris: Right. There's a joke nature to that. I love the fact that somebody sold all the Olive Gardens, which is like a chain restaurant here in the United States. It's a cheesy one.
To me, the fact that that exists is such a joke. It kind of makes them all a joke in some way.
Louis: Yeah.
Chris: You stay in the 3D realm for quite a while. This is one of my absolute favorites of all time. I'm glad you put it on here. Which is this Turn Your Mind, which is this--
Louis: Oh. [Laughter]
Chris: The Pen loads and it's a room. The colors are so beautiful, like this mint green and dull reds and whites. It's just a beautiful thing to look at. Then the room starts to kind of deteriorate as the tiles individually start moving and all that stuff.
I like this stuff because I'm personally such a Web guy so stuck in my HTML and CSS ways. I even had a little phase with SVG for a while, but I don't even think SVG could pull this off.
Louis: Hmm.
Chris: You see these animations that are too complicated that they have to be Canvas, almost, for performance reasons. [Laughter] I mostly just look at these with my jaw dropped and a little bit of envy and jealousness because it's just so cool.
This one is particularly good. Is there a story behind it?
Louis: I think the inspiration comes from the game Portal because, sometimes in the games -- like all the walls are made of tiles, and sometimes the tiles would explode or ... something.
Chris: Uh-huh.
Louis: I just tried to reproduce one of the rooms in the game from all the tiles and then started to make them rotate in any kind of direction. But the Pen itself was made during--
There was this thing called the CCC, the CodePen Creative Challenges. Every week--
Chris: Yeah.
Louis: This is what we have now with the proper CodePen Challenges. Back then, it was a community thing to have a theme every week.
Chris: Yep.
Louis: Then on Twitter, everybody would share tweets from, yeah, a CodePen that we would do within the theme. That was one of them.
Chris: That's amazing. Yeah, I love to know that a creative challenge can really -- oh, and here I am quoting the colors of this Pen and I didn't realize you can just click on it.
Louis: Oh, yeah, you can change the theme.
Chris: It changes to different color themes. Oh, incredible. Yeah, Marie would be happy to know. She runs those challenges today, and it's nice to know that.
Sometimes when you ask someone or give them a prompt, a challenge, or an idea, that amazing things can come out of it.
Louis: Mm-hmm.
Chris: This is no exception to that.
Louis: Yeah, because I feel like when you get a theme, it's easier to start to do something because you will start just exploring, "Oh, what direction should I take?" Then you start with nothing but you still have one idea in your head.
Sometimes I would just open a CodePen and be like, "Okay, I want to do something." Then I start with a blank page. It's not easy to get started.
Chris: Right.
Louis: If you have a proper theme. If you have inspiration coming from other people in the community, and that's really helpful.
All the -- Codevember we had also in the past, and then we had 3D January, or something.
Chris: Mm-hmm. Oh, yeah.
Louis: There have been so many different kind of challenges and themes through the months and the years.
Chris: Right.
Louis: It's really helpful.
Chris: There's been code golfing ones. There's been like make a game in as little code as possible. It was just Jenuary, this past January.
Louis: Yeah, exactly. [Laughter]
Chris: Yeah. I love those things. So cool. Yeah, I think CodePen -- I don't know. We were going to take over CCC or something. I can't remember the history of it, but we just thought we should have one in-house. It's not a way to discourage community ones. It's just such a cool thing to have, we thought we might as well get in on it. You know? I know Marie loves doing it on our team.
Louis: [Laughter]
Chris: We'll probably just keep doing it.
Eventually, you get into teaching this stuff (to some degree), too, right? Do you have a class that you currently teach with it or some video courses or something? What's your angle on helping people?
Louis: I've been teaching generative design for five years.
Chris: Wow!
Louis: In the school where I studied, so it's actually funny. You know, like you're a student and then you come back years later, and you know the rooms.
Chris: Yeah.
Louis: You know still some of the teachers. You're like, "Hey, I'm back." [Laughter]
Chris: Right. Mm-hmm.
Louis: Yeah, I stopped this year after COVID and all that. It was not the best timing for me to keep teaching.
Chris: Mm-hmm.
Louis: But yeah, that was amazing, and CodePen was everything while teaching because, for me, I would explain some of the content I had, and then the students, I would give them an exercise to do. Everything was on CodePen because they could just share their link to me. Then I could explore the code with them and get an overview on how it goes and if they have any issues. Yeah, even me, I've produced hundreds of CodePens, like private ones, just for all the exercises. I was making one and then making it more complex so that it would be, okay, this is exercise one, two, three, and so on. Yeah, I got lost within my CodePens, myself, because there were too many of them.
Chris: Yeah.
Louis: Sometimes you try to keep a proper name, like 1.0 CSS Animation, 1.1 CSS Animation, 1.3 SVG Animation, 1.4 SVG Animation plus Gridsome, 1.6 -- but you just lose track of it at some point.
Chris: Yeah, I know what you mean. Then it's like if you've got to go change 1.3, but you want change to affect 1.3, 1.4, and 1.5.
Louis: Yes. [Laughter]
Chris: That's tricky. Even Git doesn't have that one solved. [Laughter]
Louis: Indeed.
Chris: There's a, it looks like, tongue in cheek kind of funny Pen here, My Very First Portfolio, that has your-- [Laughter] Is this fake or real scans of your second-grade portfolio?
Louis: No.
Chris: Obviously, you weren't working in Photoshop.
Louis: The website itself is my portfolio that I had to make for my end-of-the-year assignments, if that's a thing.
Chris: I see.
Louis: I'm really bad at design. I'm not a Web designer. I cannot design a website. But I had to design my own portfolio, so I just started drawing my portfolio with crayons.
Chris: Crayons! [Laughter]
Louis: Yes. I found crayons in my mom's ceiling, you know, like an old room or something. I was like, "Okay, I'll just draw everything and then scan all the drawings and then add them as PNGs on my website." This is my design, just me drawing on a paper and scanning the paper.
Chris: Yeah, that's great. Then you made them all individual elements such that you could use Parallax.
Louis: Yeah, everything is animated. Yeah, everything is animated with jQuery. There was jQuery Parallax, the plugin, because Parallax was everything back then. I mean it still is nowadays.
Chris: Yeah.
Louis: But it was really at the beginning of Parallax.
Chris: Yeah. Oh, don't worry, Louis. It's coming back with scroll timeline in CSS and all that.
Louis: Oh, yeah.
Chris: It's going to have its day again. I always think of these hand-drawn, you know, Jeff Bridges, like the dude from The Big Lebowski. He's a great actor. He's been in lots of stuff. But his website always goes through different iterations, but he always has that, like, "I just got out a marker and drew it." [Laughter] Here's my website.
Louis: [Laughter]
Chris: But this is very fun and very cool. I almost wish you could see more creativity like this on the Web. Every time a site like this drops, people are like, "Bring back the weird Web!"
Louis: [Laughter] Yes. Yes. Try not to be too serious in what you're doing.
Chris: Mm-hmm.
Louis: Yeah, that's also why true CodePen, you can find people are actually into that kind of shit because they just try to explore. They just to have fun in CodePen. Then sometimes it can end as a proper website. Then you just see them on Twitter, like, "Oh, yeah. I've seen some experiments on CodePen. Then, boom, it's a website, it's a portfolio, and this is just the best when people expand on their websites.
Chris: Indeed. Here's another really fun one, and apparently a bit of a moment of glory for you. There's a Happy New Year Pen that happened back in 2016.
Louis: Ooh.
Chris: Really cool. You open the present. The big, beautiful animation says Happy New Year, but then my favorite part is that the words "Happy New Year" have snow on them and different little scenes. You can see from the w to the capital Y, there's a little gondola or ski lift or something. You're like, "Oh, it's so tiny. I wish I could see it better." Well, you can click, and the whole scene kind of zooms into that moment. Then you can see it better, which in the world of SVG, there was kind of a hot little period there where you could animate the view box. Is that what's happening here? Which then makes it kind of act as a camera, right? You're not transforming the entire thing and cropping it. You're literally changing the view box of the SVG, right?
Louis: Yeah, exactly. Again, I don't remember where the idea came from. It's probably something I saw somewhere, and I was like, "Oh, this is cool. You can zoom in the SVG just by updating the view box property," so that's what I did. That's probably also when I started working more and more with GreenSock because GreenSock and SVG, I think that's how I started because it was just the best tool.
Chris: Mm-hmm.
Louis: Like all the issues we had with transform-origin and stuff.
Chris: Right. Right. Right. Right.
Louis: This is all GreenSock animations in the SVG. But I remember I kept adding more details in the scene, so I started with the snowman. I was like, "Oh, this is not enough," so I added the little houses. Then you get penguins. You get penguins sliding on the N from the New Year words.
Chris: Yeah. [Laughter]
Louis: Yeah. It's hard to stop, but this Pen -- I checked in my emails. GreenSock actually shared the Pen in one of their monthly newsletters. It got a lot of visibility. Back then -- it's six years ago -- that was amazing for me.
Chris: Yeah.
Louis: Out of all those people liking my Pen and viewing it, I could just see the numbers. I was like, "Oh, okay. This one is good. This is nice if people are enjoying what I'm doing."
Chris: Exactly. I know exactly what you mean. It feels very validating and just kind of a warm fuzzy to know that people are seeing it in and enjoying it for all the right, positive reasons.
Louis: Mm-hmm.
Chris: Very cool. It's interesting to then see moments like that and then watch them snowball a little bit. Right after this, the Pen you listed just a few months later was another one of these kind of 3D Pens, but this one happened to be all CSS. You listed that this particular Pen then led to doing a talk somewhere in Paris.
Louis: Yeah.
Chris: Your first official talk, so people are seeing your work. They're seeing more of your work. More people are following you. You're inspired to make more work. That work unlocks new doors for you. I just love to see that kind of snowballing effect happen for people.
Louis: Yeah, that's exactly how it worked for me. It's really like you get some -- you do something you enjoy, and then people like it. Then they share it. They share also the fact that they like it (to you), and you just want to create more, basically, because you feel like, "Oh, okay. People like what I do, so I should do more for the people."
Yeah, so the one you mentioned, it's a pure CSS sphere because I wanted to play again with--
Chris: Mm-hmm.
Louis: I feel like I'm going through cycles on CodePen. I would play with 3JS for a couple of months and then completely stop doing any 3JS and coming back to CSS and then going back to SVG. Yeah, this was a phase where I was all about pure CSS because it's really a thing when you're just spending some time on CodePen. You will find many CodePens with just Pure CSS in the title because that's a thing, you know. It's like a challenge.
Chris: Yeah, right.
Louis: I wanted to make a sphere from some math, like functions and algorithms you can find online.
Chris: Oh, interesting. Yeah, because there are a lot -- to make a sphere, there's certainly going to be some math involved.
Louis: Yeah, there is.
Chris: Indeed you use sign and cosign. Using the value of pi. Thank God that exists...
Louis: Yeah, so I was using Compass.
Chris: Oh...
Louis: Because you needed trigonometry and you could use the Compass extension to Sass, which is still needed nowadays if you want to do sign, cosign, and all that stuff.
Chris: Right. I wonder if Sass will get that or if they're talking about it or not. It seems like probably somewhat of a low priority, but it's funny for us because Compass does not run anymore on Sass.
Louis: Oh, okay.
Chris: You know what I mean? You have to run Ruby Sass, which Sass themselves has said, "No, that's deprecated."
Louis: Hmm. Mm-hmm.
Chris: "It's not canonical Sass anymore." Even when people wanted a faster Sass, for a long time there was Node Sass and Lib Sass that would run in C, and the Node Sass had Lib Sass bindings. This was a big, complicated story. Now Sass is written in Dart, and that's just the one true Sass. Everybody tends to use that because it works in Node and it tends to work with everybody's workflow.
On CodePen, there are still Pens like this where line one is import Compass, which will never work in Dart Sass, so we have to keep all these legacy servers online for that to run.
Louis: Well, thank you for that. [Laughter]
Chris: Oh, yeah. We'll never stop doing that. It's just kind of an interesting behind-the-scenes thing. Yeah.
Look. To this day, apparently, if you need sign, cosign, and pi, you're going to need Compass, so it's right there for you. You don't even have to ask for Ruby Sass. If you put import Compass somewhere in your Sass, we just know to use the old version. We'll just kind of send it to those old servers for you.
Louis: All the behind the scenes little features you had to develop for us.
Chris: [Laughter] Indeed. Then you get involved in running a meet-up to this day. It sounds like you're involved with Creative Front-End Belgium.
Louis: Yeah. I once got invited to Rotterdam in the Netherlands to actually do a presentation about one of my CodePens. I thought it was a CodePen meet-up, so I went to the CodePen meet-up. I was like, "Oh, okay. This is nice. People enjoy CodePen and talk about CodePen."
After the meet-up, I came back in Brussels, and I started talking about meet-ups with a friend. We started this front-end, Creative Front-End Belgium thing, which was basically CodePen meet-ups all over Belgium. Yeah.
Chris: Oh, I see. It's not just one. There's a bunch of them. Yeah, that's great.
Louis: Yeah, we made two or three official CodePen meet-ups. I don't remember what happened, but the CodePen meet-ups were not a thing. You stopped sponsoring meet-ups or something.
Chris: Yeah. for a while, we were trying to -- not push people to do it, but we had a page on our website. It's like, "Do you want to throw one? Here's all the stuff we'll do for you, and these are the expectations we have for you." It just was some interest in them petered out. Probably not from you. It sounds like yours were going good, but it ended up being a little bit of a distraction of how much time.
Louis: Hmm.
Chris: Then you kind of look around at other companies who have kind of gone through this, and there seems to be a lifecycle for them.
Louis: [Laughter] Yeah.
Chris: In a way. You don't just get to do meet-ups for 20 years. At least that are specific to a company. You could probably run a JavaScript meet-up for 20 years.
Louis: Mm-hmm.
Chris: Having one specific to CodePen, we thought we'd rather have just a clear ending to them rather than see them sadly pitter away. Having a sad public-facing thing like that can do more harm than good. You know?
We were thinking maybe we'll bring them back but bigger. Maybe we'll host them. But we never just found the energy for it. Sometimes when you're on a small team, you just have to choose focus.
Louis: Mm-hmm.
Chris: You have to choose, like, we're going to work on these things because we can do them well, rather than spread our attention out to these eight things kind of thing. Anyway, that's the behind-the-scenes. Sorry, I didn't mean to pull the rug on you from meet-ups.
Louis: No. I mean thanks to the CodePen meet-ups, we kept doing them until COVID, but we just switched the name. We ditched CodePen from the name and then it became Creative Front-End Belgium because we didn't want to go fully front-end or fully JavaScript.
Chris: Right.
Louis: The creative scene is, for me, very important. I'm less interested in all JavaScript frameworks and developments. I wanted to keep this CodePen vibe into the meet-ups. Yeah, it was great to have a structure behind our organization. You can just tell people, "Oh, we're throwing a CodePen meet-up," because people know what's CodePen. Then you send us some goodies. That was also amazing. [Laughter] You had some water bottles and stickers and pens and stuff.
Chris: Nice.
Louis: People are always happy when they go home with a little goody. Yeah, I mean for me that was amazing.
Chris: I even have a local meet-up now in the town I live in that we just call -- it's just the local JavaScript meet-up, and I didn't really start it, so it'd already kind of had that name, but we think of what do you allow. Do I really care that it's that focused on JavaScript? What if somebody wants to talk about CSS, like me? Shouldn't that be allowed?
What if they want to talk about WordPress? Would we say no because that's too--? We're a little bit of a small town here. [Laughter] We probably can't.
But then if somebody wants to pitch their startup, we actually do draw the line there because it's not a business meet-up. Anyway, it's hard to pick the perfect thing, but Creative Front-End seems like a pretty nice encapsulation of what you talk about and what you don't.
Louis: Yeah because for some people like working with React is kind of creative.
Chris: Yeah. Certainly.
Louis: If you do some front-end, it's creative, so you can just join.
Chris: Well, let's do this, your most popular Pen of all time, quick. It was a little longer than a normal episode, but I think that's great. I really, really, really love this one because it has this element of learning to it, which is just the most important thing. Yeah, just love that when somebody takes the time not only to make something beautiful and open-source the code, but then teach them about it. It's this famous painting that you work with?
Louis: Yeah. In French, it's La Fille a la Perle, which is the woman with the pearl - or something.
Chris: Yeah, the pearl earring.
Louis: It's actually part of a collection that I did where I just tried to start from scratch and explain how a generative animation works through simple steps, in a way. This one is just going, okay, so you draw your image. Then you divide your image into pixels. Then you get the brightness of each pixels. Then you just throw a bunch of particles floating. Then you just adjust the speed of each particle based on the brightness of the pixel. They're flowing above, like the brightness defined the speed of the particle.
Yeah, when is this CodePen from? Last year? 2020, yeah, February 2020.
Chris: 2020, two years.
Louis: Yeah.
Chris: Oh, it's having its birthday just right now. Two years old.
Louis: Oh, yeah. [Laughter] It just exploded. I think people like the fact that they actually understand because sometimes you see generative art and you're like, "Oh, this is great. I just don't understand what's happening. But it just looks great."
Here, people could easily see where it comes from, like the end results. Even on Twitter, it didn't get viral in a very Twitter way, but it still got attention. Yeah, that's really enjoyable.
Chris: Yeah. There's something satisfying about being able to understand it, something that's so beautiful, and then be like, "Oh, if I just break it down into these eight steps, then I get it."
Louis: Mm-hmm.
Chris: In this case, that, like, "Oh, the speed of the pixel is the brightness of the underlying pixel. It feels good."
Also, if this was everywhere, well, maybe we'd be used to it. But to see something so fresh-looking - I don't know - it just adds something to it. Then have it work out so magically that you understand exactly what you're looking at. Woo! Fantastic. Really good.
The last one on your list was from later in 2020. A game.
Louis: Oh, yeah. That was the at-home timing that we all remember from two years ago. [Laughter]
Chris: Yeah.
Louis: Yeah, so again it's a pure CSS. You see, like I said, it's a cycle. Apparently, me in 2020, I was back in the pure CSS game. [Laughter]
Chris: Right. What's next? SVG again, I think, will be coming.
Louis: Well, yeah. I mean that's what's happening now. The last Pens I've shared were all SVGs. [Laughter]
Chris: Nice!
Louis: Just wait a few weeks and I'll switch back to CSS.
Chris: [Laughter]
Louis: No, just that I was playing Among Us, as many of us during the lockdown.
Chris: Right.
Louis: Sometimes the idea just comes from what you're doing during the day and me playing whatever during the day, so it just felt like a good idea to make a pure CSS animation, which is the ending animation when you kick someone from the ship into space floating around.
Chris: Yeah, they go flying by.
Louis: Yes. [Laughter]
Chris: [Laughter] Yeah. Super fun. Some of your work you do is just pure creative. This amazing room or a tribute to a game and all this stuff. But this article that I see -- not a week goes by I don't see somebody referencing it is the one that you wrote for me. You've written for Codrops and lots of other places as well, but the Trick to Viewport Units on Modal, even though it's from 2018--
Louis: Oh-- [Laughter]
Chris: --tends to be the one, like that's the one you should read. If you're really having this problem, read Louis's article on this. I'll put it in the show notes. I like you're a very kind of practical thinker as well as very creative thinker.
Louis: I mean, this article, I wish that we could just throw it in the garbage and stop thinking about it.
Chris: [Laughter]
Louis: It came from a problem that we all experience at some point on mobile when you scroll the viewport changes. It's still an issue nowadays. Yeah, I mean I'm happy to help people.
Chris: Maybe in the garbage in the next few years. I hear there are new viewport units coming that ... deal with this.
Louis: Yeah, apparently.
Chris: Will everybody switch over to them? Will they be bug-free?
Louis: [Laughter]
Chris: I don't know. Hard to tell. Anyway, thanks so much for your time in talking to me about all these things. There'll be links to all these things in the show notes. Please go to see the show notes and click every one of these Pens and heart them because they are worthy of that. Is there anything you want to leave people with, Louis?
Louis: No. I think, yeah, just keep producing on CodePen, people. I love the community there. [Laughter]
Chris: Oh, same, same. All right. Until next time, Louis, it's been a pleasure. Thank you.
Louis: My pleasure. Bye.
[Radio channel adjustment]