Marie and I hop on the show to discuss our recently released Most Hearted of 2022 Pens. We only did the calculations the day before, so this is more of a first reaction than a deep dive.

• Congrats to Hyperplexed for #1 and a massive year on CodePen. Last year, just one entry on the Top 100, and this year, nine. “Full layouts” like this appeared a number of times, including Aysenur Turk, last year’s winner, at #13 with Liquid Transition Effect, and there were two NFT-themed landing pages (1, 2) in the Top 100.
• A lot of Pens attract attention when they have that “I could use this” feel to them, demonstrated by Ryan Mulligan’s Logo Wall at #2!
• High five to Greensock for taking #3 with a re-creation of Brian Cross’ lovely Pen. The tag “gsap” was used a ton in the Top 100.
• Jon Kantner took #4 and 10 other spots making this the most appearances on the Top 100 list ever, and also took a spot with a Pen made on December 13th! Aaron Iker and Yoav Kadosh both had 4 spots.
• Perhaps my favorite because of the deep CSS trickery involved was Scott Kellum’s Apple inspired pride clock. Scott has the oldest account of anyone in the list, over 10 years old! Huge fan of Steve Gardener’s joke, though as well.
• 11 of the Top 100 were created for CodePen Challenges.

Time Jumps

Sponsor: Notion

Notion is an amazing collaborative tool that not only helps organize your company’s information but helps with project management as well. We know that all too well here at CodePen, as we use Notion for countless business tasks. Learn more and get started for free at notion.com. Take your first step toward an organized, happier team, today.

Transcript

[Radio channel adjustment]

Announcer: Today, on CodePen Radio.

Chris Coyier: Hey, everybody. CodePen Radio #395. Welcome to the year 2023, Marie. How are you doing?

Marie Mosely: Hey, everybody. Happy New Year.

Chris: Yay! You know what we do at the top of the year. Now that the year is fully complete, all 365 days. It wasn't a Leap Year, right? 365 days? Yep.

Marie: Not last year, yeah.

Chris: Yeah.

[Laughter]

Chris: This year is, though, right?

Marie: Um... uh... I don't know.

Chris: Live Google it. Last year wasn't. All the days are complete, which means our data set is complete.

Marie: It is! Yes, it's Leap Year. Oh, fantastic. That means you've got to wear yellow and blue, *Thirty Rock* fans.

Chris: And you can blame anything on the Leap Year. Just be like, "This is a write-off year. It's got me all twisting around."

Marie: Yes. [Laughter]

Chris: Okay, so what I mean by our complete data set is that we're not going to tally up the most popular Pens of 2022 in 2022. We have to wait for the year to close out and then we do it.

Marie: Exactly.

Chris: Now, the astute amongst you might be like, "Well, surely, that is unfair to the players of the game of the most popular Pen of 2022. What if you make your Pen in December? I don't have enough time to accumulate hearts?"

Well, if you've listened to this before, you'll know that plenty of Pens do make the list that were made in December because the hearting of Pens is so front-loaded that that can just happen anyway. And whatever. It's just a problem that happens. The same thing happens with the Oscars. Whatever.

Marie: Yes. Yeah.

Chris: It's a thing.

Marie: If you want to get onto the list, if that's the game that you really want to play, if you make something really cool in December, keep it private and publish it in January.

[Laughter]

Marie: No, for real, though. You know, just work on it in secret and make it a brand-new Pen. Put it into a brand new Pen in the following year. Then you've got the whole year to rack up--

Chris: Well, yeah. Okay, so you have some months. That's exactly the advice I was trying not to give. You know? Like, "I don't care when you publish it."

Marie: No, hey, this is a game you can win. And we have--many, many times--given lots and lots of pro tips on how to do this.

Chris: The advice.

Marie: And I can tell that people on this list are students of the show, so--

Chris: [Laughter] Nice.

Marie: [Laughter] I'm going to keep telling them. I'm going to keep telling them.

Chris: Yeah. Publish it in January, and then keep reminding people that you made it.

Marie: Keep reminding people. Exactly.

Chris: Yeah. That's the big one. All right, so here's the thing. Sometimes in years past, we have published this. It has gone around social media. People have digested it. Maria has done statistical analysis on all this. And then we record the podcast.

This year, just for a twist, it's going to more like a first look. We have looked at it already. We kind of have to just to make sure that nothing went weird in the data and that the top 100 really is the top 100. There's not a random fork in there or something, not that there ever would be. We know how to program computers.

[Laughter]

Chris: But it wouldn't be the first time where there was some just anomaly that had to be corrected. This year, there's absolutely no trouble at all. We did what we normally do.

Marie: Yeah. Yeah, no investigations were opened. [Laughter]

Chris: No. [Laughter]

Marie: Which is nice to say.

00:03:15

Chris: No. Nice to say. And so, the top 100 was the top 100. It went out. You can visit it. There'll surely be a link in these show notes.

Marie: Mm-hmm.

Chris: It's fun to look through. We paginate them into ten. Not because we're greedy and we're looking for page views. Heck, it's a single-page app kind of site anyway, so it doesn't really matter. It's just because showing more than ten iframes on a page is slow. [Laughter] Sorry. They're paginated. Go to the end if you want to only see the top ten.

But of course, the top 100 on a site like CodePen are awesome! All of them are really good because there are almost like tears of awesomeness of CodePen. There are Pens that are picked, which show up in the feeds, which are awesome.

Then there are ones that make it into the Spark (on a given week), which are really, really awesome. There are some that made it into social media, which might not be part of either of those categories but are also awesome.

There are all these kinds of awesome. But if you're on the top 100, you are really... That's the cream of the crop here, let's say. And it wasn't voted by us. It was voted by you.

Marie: Exactly. It gets more competitive every year. More Pens get picked every year. More people join CodePen every year. More hearts go out to lots of different work every year. So, as time goes by, it gets trickier and trickier to get on the list, and you've really got to impress people.

Chris: Marie and I have looked through the notes. We have our own little commentary on it. We're just going to share. It's going to be a little scattershot. We're not going to talk about these from 100 down to one or anything like that. We're just going to mention some of our favorites, some interesting anecdotes about them, and such. It's up to you to do that.

It probably is not the last you'll hear of this top 100, even on this show, just because it's such fascinating material to talk about. Perhaps we'll get some of the authors and stuff. Please shoot us a note on social media or email if you have opinions on who we should talk to or anything you want to know about this top 100 list.

00:05:13

Chris: A tiny, tiny other thing: Remember the Grinch style...? [Laughter] How do I say this? The Grinch-style hearting on CodePen.

Marie: Mm-hmm.

Chris: Which is not how I should say it because nobody thinks of it that way, but it's from that Christmas cartoon with the Grinch where his heart grew three sizes that day. That's how he fixes himself at the end of that movie.

Likewise on CodePen, you can heart something once, twice, three times. The heart gets a little pinker or a little redder and a little larger every time you do it before that fourth click takes it back to unhearted.

That actually matters (at this time of year specifically) because hearting something three times does give it three votes in this syntax. So, that's just something you should know in case you see a Pen that appears out of order because the number, the number that's displayed is only how many users hearted that thing, but it might have three times that many hearts in reality.

Marie: Right. Also, the other thing to know is that we don't stop letting them get hearted after the year ends.

Chris: Correct.

Marie: As you look through the list, people will start to heart things that are on the list, and their numbers will change but the ranking is fixed to 2022.

Chris: The day we ran the script, which in this case was yesterday, January 2nd, so you got one extra day - technically.

Marie: Well, congratulations, everyone, on one extra day. It didn't make a big difference.

00:06:35

Chris: It sure did not. Okay, so number one, I'll just get right out and say it, was from Hyperplexed, which I have spoken to as some dude, and I do not know his name. I have no idea what it is. He's totally pseudo-anonymous on the Internet, I think. I bet if you really dug, you could find it, but I think prefers to go by that. That's the website. That's the CodePen handle. And crucially, that's the YouTube channel.

Marie: Yeah.

Chris: Which I don't know when it officially started, but I started watching this year, and I'm obsessed with it. It's so good of content. Yes, he happened to use CodePen often to display it. Not always, but sometimes.

You can just tell. It's not like you're just staring at the YouTube interface. There's zooming in on a few lines of code at a time. It's very classily done, like, "Look. This is the particular piece of code I'm talking about. Often strips away anything superfluous to look at. And usually makes something just really interesting, like, "Hey, I was browsing around the Internet and saw this interaction on this website, and I'm going to recreate it," and then recreates it really cleanly and with little code to help make it understandable. Just a super-good YouTube channel.

I'm glad to see them make not only the top 100 list but the number one, and then also hit the list a bunch of times too, right?

Marie: Yes. Yeah. Yeah, a total of nine times on the list this year. And Hyperplexed made their debut on the list last year, and they were on once down in the 90s somewhere.

Chris: Okay.

Marie: This year, that's why when I was talking about students of the show, I think Hyperplexed is one of them. Absolutely rocked it this year. Nine positions on the top 100.

00:08:23

Chris: Fantastic. Fantastic. I was going to mention that Hyperplexed is number 12 with this hover effect that they did a little video on. Imagine a grid of dark cards with a border on them that's a slightly different shade of gray than the card is. As you hover over the cards, not only is there a radial gradient kind of highlight effect that follows the mouse, but as you get to a corner of one of the cards, even the cards around it also kind of pick up some of that highlighting. It looks like one of those things, like, "Ooh... Nice touch." You know?

There's a YouTube video on it. There's a Pen that's very popular. But then also number 14, David Khourshid saw the same thing and created it as well. It's funny to see 12 and 14 be a recreation of the same type of effect - so close to each other.

Marie: I think it was a site called Linear. I don't remember what that app does, but that was the style inspiration for both of these.

Chris: Mm-hmm. And they have that touch of... Maybe I'm not working on something right this minute (or maybe I am) that could maybe use this. It's not so far away in weirdo land.

[Laughter]

Chris: You know when you see - I don't know - a 3D ball fall from the sky and bounce. Somehow, that's a loader or something. That's beautiful and fun. But usually, people see, like, "I don't know that I can actually use that." But when it's just a hover effect on a card, every website in the world has cards on it. I think that somehow is a ticket to massive popularity as it triggers that little part of your brain that's like, "Ooh, maybe I could steal this."

Marie: Yeah. Definitely. Also, there's something about it that just feels natural. It feels like how light should work in a scene.

Chris: Mm-hmm.

Marie: And so, I think that is part of what makes it so very appealing. You want to have light appear like that. That's how light works. It's very exciting to get to see how that can actually happen in the browser.

Chris: With that twist of, like, "And I haven't seen it before."

Marie: Mm-hmm.

Chris: Why haven't I seen this before?

Marie: Exactly. Yeah.

00:10:24

[Guitar music starts]

Chris: This episode of CodePen Radio is brought to you in part by Notion. It's a new year, folks. I'm sure a lot of you are doing planning and all that kind of stuff for the new year. Certainly, we are at CodePen, and using Notion to do it.

We've used it for a long time. That really helps keep the team on the same page. Just absolutely love it. Thanks so much for the support.

Whether you're starting a new gym routine, organizing a trip with friends, or even planning your company goals, Notion is a flexible, collaborative workspace that helps you make meaningful progress in every part of your life. Get started in seconds by choosing from thousands of templates for every task. Make it your own from to-do lists, OKR trackers, and so much more.

Notion helps you build the exact system you want so you can work the way you work best. Start your year off right and get organized now with a free Notion account at notion.com/codepen. Notion.com/codepen to learn more and get started for free right now. So awesome. Again, thanks so much for the support. Love Notion here at CodePen. The best.

[Guitar music ends]

00:11:37

Chris: I think also a lot of people have put a bunch of logos in a row on a website. It just seems like such a common need for anything from a brochure site to the front page of some software as a service app or something. "Look at all the companies that use our thing." That's Ryan Mulligan's #2 Pen logo wall, which kind of automatically animates a row of logos. And it's beautifully done, but I have a feeling it has so many hearts, partially because Ryan is a popular guy anyway. But partially because I've needed to do that. I'm going to heart this because the next time I have to do it, I'm just going to do it like this.

Marie: Yeah. Definitely. And it's fun to see the marque concepts in a modern way. It's not actually a marque element.

Chris: Yeah.

Marie: We all want that kind of ticker tape thing.

Chris: It fades out on the sides.

Marie: Yeah.

Chris: And it's coded cleverly enough that it's not a stretch to make it go vertical, so it's one click and the entire thing is happening but vertically instead. It's just nice to see modern Web technology make that not something that Ryan punted on. He just was like, "Oh, yeah. I've coded it," so it's - I wouldn't say trivial but - not a big deal to make happen in a totally different direction.

Marie: Mm-hmm.

00:12:53

Chris: I'm curious about this #3. It's from our friends at GreenSock who are heavy users of CodePen. I love that they're not only on this list but are so high up as #3. Straight-up credit the Pen.

At the top of the Pen it says the original was by Brian Cross. I think that's interesting that they published it on their CodePen, presumably because... I'm not sure. Maybe they wanted control over it or that they think it would get more eyes because it's on the official account than Brian has - or something. It's technically Brian Cross's Pen published... or republished, I guess, on the GreenSock list, and it's just this beautiful kind of scrolling website where even the typography on it comes in at a staggered rate and stuff. Really beautiful Pen, so I guess high-five both to Brian and GreenSock.

Marie: Yeah. This one is so nice. I love the way that the text scrolls in. Gorgeous.

Chris: Yeah. Just beautiful looking. Very worthy of its place here.

It does kind of have the complete website feel to it in a way, to me. At least it takes all the space of the screen, and you can imagine building the rest of a website around this aesthetic, which is decently common, I'd say, across the list.

As I look through the 100, there are - I don't know - 4 or 5 or so that are kind of like complete websites.

Marie: Yeah, lots of full-page UI in here, actually. It's really cool.

00:14:23

Chris: Aysenur from last year, number one--

Marie: Mm-hmm. Yeah.

Chris: --was on the list a bunch of times, is 13 this year, so still at it. Awesome job. Was kind of famous for that. You know would make full-page stuff, and she's on the list again this year in that same style.

But there are a couple of others. You actually noted that two of the top 100 were NFT landing pages.

Marie: Yeah. [Laughter]

Chris: That also have that feel.

Marie: Yeah, they have the full-page look in that dark violets and purples kind of color of the NFT world.

Chris: Mm-hmm.

Marie: Definitely that one is going to be the sign of the times that this was the 2022 list, that it was NFT dashboards, because I don't expect we'll be seeing that again. [Laughter]

Chris: No. No, probably not. But I wonder if some people hearted of them not because they're like, "Ooh, this is perfect for my NFT project," but they're like, "This is just a good looking website."

Marie: Yeah, they're just cool. The appearance of them, when you look at them, they're cards on a dark background, you know.

Chris: Right. Mm-hmm.

Marie: And this is something you could do with any type of website. That the concept that they were made for was for NFTs is very 2022. [Laughter] But other than that, yeah, you could absolutely make these into something else.

Chris: Yeah. I hate to admit... It's not fair to say that there's an NFT aesthetic because that's too broad. NFT is just a technology and you can make anything in NFT. But there is, thanks to the apes and whatnot, there tended to be a little bit of an aesthetic going on.

Marie: Yeah. There's the Web3 look.

Chris: Right.

Marie: Like I say, it is the dark purples and violets and all of that.

Chris: Yeah. The website had a different feel than NFTs themselves.

Marie: Yeah.

Chris: There was a Web3 look, for sure, and didn't hate it, actually. Really pretty nice-looking stuff, usually.

Marie: Yeah, it's cool. I think it can move forward into the future. It's just, you know, not everything will. [Laughter]

Chris: Not everything will. Yeah, so they had kind of that full-page thing going on, which was nice and literally could say anything on that website.

Marie: Mm-hmm. Yeah.

Chris: Let's reappropriate it for something new.

Marie: Sure.

00:16:27

Chris: Did we mention Jon Kantner? Congratulations, John. You had not only #4, but you were on there more than anyone else was.

Marie: Mm-hmm.

Chris: Eleven, which is nuts for the top 100.

Marie: Yes, that's a big year for John, and he made some amazing work this year. Really, really fun loaders. That was the stuff that really caught my eye this year. He was calling them pre-loaders but loading animation.

Chris: Yeah.

Marie: And so fun. Everything that he did this year was so cool. I'm not surprised. Well, honestly, seeing anyone on the list 11 times is pretty surprising, but I'm not surprised that it was John because his work was just amazing this year.

Chris: Yeah. That's probably tied or beating the most ever on any list. Wouldn't you think?

Marie: I think it is... I think it is a tie. Yeah.

Chris: Yeah. There was another 11 one year.

Marie: I think, if I'm not mistaken--

Chris: Probably Aaron Iker. I bet.

Marie: --Aaron Iker.

Chris: Yeah.

Marie: Yeah. Although, he could have been ten. This might be the winner. We'll have to dig in.

Chris: Yeah. That's the kind of data stuff that you're good at.

Marie: Yeah.

00:17:30

Chris: Plenty of one-offs. Most of them are, of course, people that made the list one time. Even our own Stephen Shaw was on the list.

Marie: Yeah.

Chris: Which of course, just makes me seethe with jealousy, Shaw.

Marie: I think he's going to be... [Laughter] I think he's going to be surprised about that one, too.

Chris: Yeah?

Marie: If I'm remembering correctly about that Pen, it wasn't anything major that he was working on. I think it just kind of... You know how sometimes you'll just make something and it just kind of gets away from you? [Laughter]

Chris: Yeah.

Marie: You share it and people just get into it. I think if he were to... If I was to ask him, "Which one of your Pens is on the top 100?" I think, first of all, he'd be surprised he was on, and that it was that one would be even more surprising. [Laughter]

Chris: Hmm...

Marie: I'll have to talk to him later today. [Laughter]

Chris: You know what? I'm writing it down right now because I think I've said this before that I want on. [Growls]

Marie: You're never getting on, Chris.

Chris: [Growls]

Marie: [Laughter]

Chris: I'm making a January Pen that's going to have fricken' purple on it.

Marie: Yeah. [Laughter]

Chris: It's going to be so good! I'm doing it! God dang it.

Marie: You've got to do a TikTok video where you point at it so people know that they're supposed to also heart it.

Chris: Tell me. I know you're kidding, but I assume you're not, actually.

Marie: [Laughter]

Chris: I'm going to do anything it takes.

Marie: No. You've got to do a TikTok dance and point at the heart button so people know to heart it.

Chris: Okay. To heart it, okay.

Marie: Yeah. Yeah. You've got to do it, Chris.

Chris: Okay. I'm getting on this dang...

Marie: If you want on this list.

Chris: I'm getting on this list.

Marie: You can listen to previous episodes where I give away the whole game and tell you how to get on the list. You're never paying attention to it.

Chris: Yeah. That was a good one. We'll point to that.

Marie: [Laughter]

Chris: Yeah. Fortunately, I also have database access, so I could just increment the number if I had to.

Marie: Yeah, but who does the picks? Let's talk about it, really.

[Laughter]

Marie: Because I've got data on that, too.

Chris: Yeah, you do. You really have searched ahead the last many years in sheer pick-a-tude.

Marie: Yeah. [Laughter]

00:19:14

Chris: There as a Pokémon card on here, which was cool.

Marie: Yeah.

Chris: It was made re-popular based on your playing cards challenge. It's cool to see Challenge Pens get in here. It's not the only one. I feel like there are at least two or three, if not more.

Marie: Oh, there are a bunch. Yeah.

Chris: Yeah.

Marie: Eleven of them were made for challenges.

Chris: Eleven!

Marie: Yeah.

Chris: Wow. Great.

Marie: This Pokémon one that we're talking about--

Chris: Simon Goellner.

Marie: I would guess gell-ner.

Chris: Sorry, buddy.

Marie: We're trying. But this is actually a revision of a Pen that he had made in a previous year. And so, he just made it brand new for the challenge. It was a cards challenge, and he completely revised it and made a brand-new effect. It's such a cool Pen.

And also, I really like the way that it looks in the grid. I think that was part of what drew people into it.

Chris: Oh, really?

Marie: It just looks good in the grid. You know?

Chris: That does matter.

Marie: But I also saw that, after Simon shared this for the challenge, he was also continuing to talk about it on social media, share it multiple times, and I think that does kind of help boost things up.

Chris: Maybe that's why I saw so much buzz. Of all the Pens that were talked about during the year, I saw this come up a lot.

Marie: Mm-hmm.

Chris: People were just impressed by this and so much so that they would share it.

Marie: Definitely.

Chris: Which is good to see.

Marie: Well, that foil effect, it's so cool.

Chris: The foil is nuts.

Marie: Yes.

Chris: Because we've seen this before. It's a 3D Pen. So, as you hover over and move your mouse around, it affects the 3D angle of the card. Notably, it does it with just CSS. I always think that's kind of appealing to people to see that, to be like, "Ooh, I don't have to learn JavaScript for this." Although, I would think that actually JavaScript would make this easier. This was made more difficult by the fact that it doesn't have any JavaScript on it.

So, it moves in 3D space. That's always cool anyway. But if that's all this was, I think there's no way it would make the top 100.

What it has on there is -- how did you put it -- a gloss or--?

Marie: Oh, the holographic effect to it.

Chris: Yeah.

Marie: Yeah.

Chris: There's this almost like oil slick look.

Marie: Yeah.

Chris: Over top of the card with these shiny reds and greens and stuff on it, but like a lot of it. [Laughter] It just looks awesome.

Marie: Yeah. It's like a foiled playing card, like when you get one that's hot stamped with foiling on it.

Chris: Yeah.

Marie: It's so cool. Of course, Pokémon. I have to say Pokémon Pens do well all the time. People love Pokémon.

Chris: Yeah.

Marie: But yeah, I mean it's the whole package. It's got everything you would expect to be in a really high-performing Pen.

Chris: Right. That foiling, it's not just applied once, too. As you move it in 3D, that foiled look just goes wild on it.

Marie: Yes.

Chris: It's just crazy.

Marie: Yeah.

Chris: It's great. It's great looking.

Marie: Super cool. Awesome work, Simon.

00:22:17

Chris: Old faces and new, certainly. It was cool to see Chris Gannon hit 10,000 followers, celebrate it, and then see that be the Pen that got him on the top 100.

Marie: Yeah, so great.

Chris: Very cool. Congratulations, Chris.

You know there are new members, right? Let's do new members first.

Marie: Yeah.

Chris: Somebody made their own account in August of this year (for the first time) and made the list: Katar.

Marie: Yeah. Pretty exciting. That's pretty awesome, too, because realistically, getting on in August, we're coming to the end of the year there. August generally is a slow time of year. Lots of people are on vacation. So, to catch a lot of attention like that in August is real impressive. Congratulations.

Chris: It's cool to look at their profile and see them finding the look.

Marie: Yeah.

Chris: There are lots of Pens that have a little bit of the glassy blur behind kind of look, and some of them are hitting it and some of them aren't.

Marie: Mm-hmm.

Chris: And when they start to hit it, you can tell. [Laughter]

Marie: Yeah. That's always so fun to see the journey.

00:23:24

Chris: And our oldest member has an account. Created the very year we launched CodePen itself in that early, Marie-level cohort. Right?

Marie: [Laughter] Yeah.

Chris: Mr. Scott Kellum, in 2012, made the list again with one of my favorites from the whole list. What did he call it? The Apple-inspired Pride clock.

Marie: Yes. Super cool.

Chris: Yeah, Apple through this event that it was a white background primarily with rainbow stripes down it. And then whenever there was text involved, the lines would fatten out. It's just a very unusual look. You can clearly read what the text is just with these fattened lines.

Marie: Yeah. It's almost like a pointillist effect. It's really, really engaging.

Chris: Right. To have it be editable then, that's what blows my mind because I could see pulling this off in Illustrator or something. I understand that that would be an interesting, complex effect in image editing software. But he's done it here with basic Web tech.

Marie: Mm-hmm.

Chris: It's so clever, and somewhere - I feel bad about this. Scott, where did you write this up? I saw a little explanation of how this works, or maybe somebody else wrote it for Scott because it's such an unusual look, but I couldn't find it really quickly.

But there was an explanation how this works, and there are layer after layer after layer involved in making this happen. Then there are filters and layering effects that make it do what it does.

I don't think it's a million miles away from that blog effect that we saw a number of years ago.

Marie: Mm-hmm.

Chris: Remember when two SVG circles would kind of hit each other and they'll go blah into each other?

Marie: Yeah. [Laughter]

Chris: There's none of that on the list this year, but don't quote me on this. I think some of that same kind of stuff is at work here.

Marie: There is at least one blob on here.

Chris: Is there a blob?

Marie: There's got to be a blob. Yeah. [Laughter] But also, about Scott's Pen, also, just a nice added touch. It tells time. You will see the actual time of day when you look at it.

Chris: Yeah.

Marie: It's not just designed to look like a clock. It actually works like a clock, so that's really cool.

Chris: Mm-hmm. Yeah, it reminds me, too. The blobs I was mentioning were hard-edged blobs. But what got popular, especially this year and perhaps the last couple of years was almost like that NFT background purple. Gradients of color, but multiple colors behind them.

Marie: Yes. Yeah, that's what I was talking about when I said blobs. Yeah, so we're just talking about different types of blobs here. [Laughter]

Chris: Yeah. There are so many blobs.

Marie: So many. [Laughter]

Chris: Disambiguate the blobs. Gees.

Marie: Yes.

Chris: Pretty cool, so even though the full page look was popular, some of those on here -- more popular, generally -- is the one little component or something, like a loader, like a card, like whatever. That's number one, I'd say.

Marie: Yeah. UI elements and even things like buttons.

Chris: Buttons are always huge. It's just the way it is. Some interactive, some animation, those are just things that I've decided are not trends on CodePen anymore. That's just kind of what CodePen is.

Marie: Yeah. They're bread and butter. Absolutely, yeah.

Chris: Then if something isn't in that category of, like, beautiful-looking UI, then where does it go? It tends to be something that's almost artistic for art's sake.

Marie: Mm-hmm.

Chris: Like a crawler or something that's just like, "Wow, that's just beautiful. Something beautiful is happening there." It has nothing to do with user experience. It's just cool - or it's a game, and there are a couple of games on there this year. It's not necessarily something you use on a website.

00:27:10

Marie: Right. It's just a Pen that is very cool, and that's the beauty of the top 100. You find practical things. You find useful things. And you also find the most fun thing just to play with and just to enjoy or to take apart and figure out, like, how was this made?

It's always an exciting time to see what's on the list and to just go through it. Kind of a trip down memory lane for me, of course. But also, to just kind of get a feel for what everybody was really enjoying this year. It's been really fun.

Chris: Mm-hmm.

Marie: When you say little crawlers, quite literally we had things that were crawling in the top 100. [Laughter]

Chris: Oh, the spiders. Yeah.

Marie: There are two spiders. This is the first time ever. Two spiders in the top 100. At 75, we have one from Fabio Ottaviani.

Chris: Mm-hmm.

Marie: That is just the parametric spider just crawling around. And then months later, from Stranger in the Q, another spider. They actually have similarities. They're done in a different way, but they have similarities in the way that they crawl across the screen.

Chris: Oh, how true. Yeah. Please, everyone. Look at both of these Pens.

Marie: Yes.

Chris: See how different they are aesthetically, but you can just feel, when you play with them, that the bones underneath them are similar.

Marie: Yes. Yeah, but they're both so interesting. The one from Stranger in the Q actually kind of looks like... This is such an '80s thing for me to say. Do you remember those slimy things that you would throw at the wall and they would climb down?

Chris: Yeah.

Marie: It would come in like a cereal box. It looks like those. [Laughter]

Chris: There's a pretty good Bluey called "Sticky Gecko" that evokes that in the modern era.

Marie: Oh, right on. I don't know what that is, but... [Laughter]

Chris: Okay. Well, like a lizard - whatever.

Marie: No. What's Bluey?

Chris: What's Bluey?!

Marie: Yeah.

Chris: Okay. We'll have to take this offline. I'm sorry.

Marie: [Laughter]

Chris: It's a very popular show from the land of Rachel Smith. It's an Australian program.

Marie: Oh, right on. Oh, I'm so out of the loop.

Chris: Yeah. If you had a young... If you had a little these days, you would know. But now your kid is old.

Marie: Oh... oh, okay. It's a kids' show. Right on.

Chris: Yeah, it's for kids.

Marie: Yeah, now my kid is too old for that. [Laughter]

Chris: Yep. Yep. Although, you know, they're probably right in that middle age where they wouldn't like it but adults like it almost just as much as kids because it's so... It hits the adult note so perfectly.

Marie: Ah... Cute.

Chris: So perfect.

Yeah, so spiders were huge. That was kind of cool.

Marie: Yeah.

00:29:30

Chris: We already talked about Jon. Congratulations on your 11 lists on here. One of them, though, created in December 2013, so despite us opening the top of this show saying that you should publish in January.

Marie: Yeah. I mean, realistically, once again giving away the game, the first three months of the year are the ones that give you the best chance of, first of all, getting a ton of eyeballs and also having a bunch of time to re-promote something and get more people to look at it.

Chris: Mm-hmm.

Marie: But then you will have something that is just really popular, and that was this one this year, Jon Kantner's snowball pre-loader, which was just... I mean you could almost feel the cold coming out of it.

Chris: It's a favorite of Jon's Pen this year.

Marie: It's so good.

Chris: It's so good.

Marie: It's so good. It looks exactly like what it would look like to circularly make a snowball in the snow. You can almost feel it.

Chris: Yeah.

Marie: It's so good, and so that was... I loved that it was on the list. I love that one very much. I think that one is going to be an all-timer. You know?

Chris: Yeah?

Marie: If were to... Oh, yeah. Yeah, it's so cool. It's so good, and it's so evocative of reality that I think that one is going to be popular for a long time.

Chris: Yeah. It actually makes me think. No promises here, but the first year that we chose to do this was 2013, which means that at the end of 2023, we will have 10 years of potential data on this. You know?

Marie: Oh, yeah. We could run a, yeah, top 100 all-time. Maybe the top ten of all time.

Chris: Of the last decade - or whatever.

Marie: Uh-huh.

Chris: Yeah. Pretty sweet. Pretty sweet.

Marie: That would be pretty cool.

00:31:09

Chris: A lot of GreenSock in usage, just as a little bit of data.

Marie: Yes.

Chris: I said we weren't going to dig deep into data, but it looks like you've got some here.

Marie: I did the light dig. Yeah.

Chris: Yeah.

Marie: [Laughter]

Chris: Which is great. So, okay, I guess just a massive congratulations to everyone that is on this list. If you're fighting for it, well, you've got to fight me next year because I'm doing this.

Marie: Yeah. He's trying. [Laughter]

Chris: I'm doing this.

Marie: [Laughter] And you know he does kind of have some fans.

Chris: Your best bet, though, your best bet, I'll say, is to go Pro on CodePen.

Marie: That's true.

Chris: There are very, very few non-Pros on this list.

Marie: Now that's true.

Chris: Yeah.

Marie: But that's because when you're this good, you ought to be a Pro because you've shown you are a pro front-end developer.

Chris: Oh...

Marie: And if you're a pro front-end developer--

Chris: You need the badge.

Marie: --you've got to be on CodePen Pro. Exactly.

Chris: Yeah. All right, well, thanks, Marie. Let us know if there's anybody you'd really like us to talk to on this list. I hope to pluck out a few of them.

But I will give you all a heads up. I think this is 395. We're going to do five more of these, hit a huge 400 milestone, and then just take a little break on this show while we kind of finish up our big project, and then use this show to talk about the big project once it's ready. So, a little heads up there.

And we'll talk to you again soon. Happy New Year.

Marie: Happy New Year. Thanks for listening, everyone. Bye-bye.

[Radio channel adjustment]