It’s back! We counted up all the hearts given to every Pen created in 2021 and created a list of the top 100. Marie and Chris chat about this year’s list. Who’s on it, what’s on it, and digging into the numbers where we can.

Remember that people can heart pens up to 3 times each, so if it looks like a Pen lower down the list has more hearts than one higher up the list, it’s because of the density of hearts. The number you see on the card only reflects the number of people that have hearted not the true number of hearts.

Lots of folks hitting multiple times. George Francis hit 6(!) times (7, 28, 59, 75, 80, 82), an impressive feat for a member who only joined in late 2020. Four people with four placements: Aysenur Turk (3, 11, 14… and 🥁 1), Yoav Kadosh (17, 33, 72, 95), Dilum Sanjaya (22, 24, 64, 65), and Aybüke Ceylan (38, 46, 63, 91), and a couple of 2-position people. Woot!

“Full page” layouts were quite a trend on the Top 100 this year. That is, Pens that look like complete websites with widgets and cards and navigation and sidebars and the whole nine yards. That’s opposed to some past years where more minimal small-yet-surprising Pens were more dominant in the Top 100.

Advice for those shooting for the top? Talk about your work. Almost nobody on the list creates work and then never shares it. Share it on social media, blog about it, make a video, re-promote it multiple times. Be part of the community by liking other people’s work. Remember, your hearts come from other CodePen members. Also, feel free to update and revise your Pens. Many of the Top 100 are updated and improved even after their initial wave of popularity.

Time Jumps

Sponsor: Netlify

Did you Netlify offers auth? They call it Netlify Identity. Why would you need auth on a static site? Well, a static site can also by quite dynamic, that’s the nature of Jamstack. Say you’re building a TODO app. No problem! You can have users sign up and log in. You can store their data in a cloud database. You can pull the data for that user from the database based on information about the logged-in user because of Netlify Identity.

Transcript

Chris Coyier: Hey, everybody. Time for another CodePen Radio. This is episode 350 where we're going to be talking about the top Pens of 2021, which is just a fantastic time of year because we just get to reflect upon some of the most amazing work that happened on CodePen in the whole last year. With me, of course, is Marie because Marie is not only our lead of community and has her eye on all this stuff all year long, of course, but has dug into the data as well.

Marie Mosley: Yes, I have. Hey, everybody. Happy New Year.

Chris: Hey! Yeah. It just feels a little better this year - just a little.

Marie: A smidge. Yeah.

Chris: Just a smidge.

Marie: [Laughter]

Chris: I'm in a better mood anyway. Although, I'll tell you what. I need to get back on the treadmill. My god. The cookies this year, just--

Marie: Oh... [Laughter]

Chris: I really just threw away any good sense.

Marie: Yeah. Those Danish butter cookies are the ones that always get me.

Chris: [Laughter] I'm an equal opportunity slob.

[Laughter]

Chris: Okay, so what we did, this is not the first we've done it. Probably something like the fifth or sixth - or something. I don't remember the first year that we did it, but it's an annual tradition, for sure. What we do is, unlike our popularity algorithms, which factor in to CodePen popularity generally things like comments, views, age of the Pen, and all kinds of stuff. Even lately stuff like clicks and other things that you might be interested in because we apply fancy machine learning models to CodePen. This is not that. This is just like we count up how many hearts the thing got and that's it. [Laughter]

Marie: Mm-hmm.

Chris: It's the top hearted, the most hearted Pens of 2021. There is only one little quirky caveat in that not everybody knows this, so I always feel compelled to mention it that you can heart things multiple times on CodePen, not like heart it, un-heart it, heart it again, but there are three levels of hearts. You click once and you get a little pink heart. You heart again and that pink deepens into a deep pink (let's call it). You click again and it gives you a nice thick red color.

That actually matters. It matters for this little contest. It applies a little bit more like-atude to that Pen. For you, you can go look on your profile and view Pens that you've liked one, two, or three times. It's just for fun. It's just a little funzy-funzy that we added to CodePen a million years ago.

Marie: Mm-hmm.

Chris: Those do factor into this.

00:02:28

Marie: I think a lot of people also use that as kind of like how they categorize things that they like, too: I like it, I like it a lot, I love it. That way you can kind of go back and look at things.

I think I've said on the show before, and it remains true, I am a one or a three. I don't give twos.

Chris: Yeah. You're so weird. Come on.

Marie: [Laughter] I know.

Chris: I'm heavy on two. I don't know why.

Marie: No.

Chris: I reserve my threes for the obvious cream of the crop.

Marie: Oh, yeah.

Chris: I'm liberal with my ones.

Marie: Yes.

Chris: That gives me twos as the ones, like, this is stand out, but sorry if I withhold my threes for only the very greatest.

Marie: Well, it's like me on Medium. I'll clap 50 times if I'm going to bother clapping at all.

[Laughter]

Marie: So, you know.

Chris: Yeah, right on. Right on.

Marie: I'm an extremist.

Chris: I like it. So, there are all kinds of interesting things about this year. Of course, please be encouraged to go to codepen.io/2021/popular/pens. It's going to get you there.

Then there are ten Pens on each page. Sorry, we didn't make it just one big, long thing, but that's because of the nature of CodePen and how they're little iframes and all that can be a little too heavy. So, we split it up, not for the page views, which we literally don't even count. [Laughter]

Marie: Nope.

Chris: Just for the sake of your browser.

Marie: Yeah. [Laughter]

Chris: Then it starts at 100. If you just want to look at the top 10, well, of course, I encourage you to look at all top 100, but just go to /10 and that'll show you the top 10 anyway.

00:03:57

Chris: Congratulations to number one, of course, Aysenur Turk.

Marie: Yes.

Chris: She is fantastic. She's on the list for times and just tremendous. I'm trying to get her for the show. She said maybe.

Marie: Yeah.

Chris: ...set a time. English not her first language, so kind of a maybe there.

Marie: Mm-hmm.

Chris: You'd recognize her. This is a trend - beyond just her. Full layouts.

Marie: Yes.

Chris: Really like, here is what an app might look like - or whatever - or a website with a little bit more to it than average, and it's really amazing that these get pulled off in Pens at all, especially because we don't -- of course, we have resources that you can use. But I feel like, generally, full layouts like this are broken out into multiple different files and componentry and stuff. It's pretty impressive that these are pulled off at all - and really cool to see.

Marie: Mm-hmm.

Chris: If anything, it's like, "Oh, my god. My app could look like that." I think there's a practical nature to these that really pulls out those hearts.

The gap between number one and even just number two is double.

Marie: Yes.

Chris: Aysenur, huge claps for that. Nearly 10,000 hearts on this sucker, which is just some next level CodePen stuff right there.

Marie: Mm-hmm. Yes, it is.

Chris: Yeah. Tremendously cool.

Marie: Yeah, the thing that's probably worth pointing out there is that Aysenur actually updated that Pen later in the year and repromoted it, so it was created January 2nd and shared at the very beginning of the year, which is a pretty smart strategy in terms of getting something -- as much as exposure as possible throughout a year.

Chris: Mm-hmm.

Marie: But then, in September, she updated the Pen and made some significant revisions and talked about it again, started sharing it on social media, and things like that. So, that gave it a second round of attention, and I think that was a really smart play.

Chris: Sure.

Marie: If that was a plan to get onto the top 100, it was a smart one. If not, it worked either way.

Chris: I tell ya. I see it everywhere. You see it in politics, not that we're going to talk about that. But if you just repeat yourself enough, it tends to work. People pay attention.

Marie: Yeah.

Chris: That's the thing that they associate with you and that kind of repetition. It works in advertising. Why wouldn't it work with popular Pens, too? Why don't we talk about that? Let's sprinkle this into our conversation today is advice for people attempting to make this list. I think that's an important one that you put a finger on there is talking about it. You can't just make it and walk away.

00:06:41

Marie: Yeah, and don't be shy about resharing. I think a lot of people feel uncomfortable resharing something that they've already shared, especially if, for example, we've retweeted them already or we've already put it in the Spark or something.

It doesn't matter. If someone sees your stuff enough that they're like, "Oh, no, I've seen this twice," then it's a hit, realistically. We're all up against algorithms here and all just flooded with information. So, if somebody sees your thing more than once - I don't know - that's a win, really. [Laughter] So, don't be shy. Let it happen.

Chris: Yeah. Absolutely. There are some more things that we'll talk about, so keep listening here.

There is also -- and this happens every year that you can have a big year on CodePen and hit this list multiple times.

Marie: Oh, yeah.

Chris: That happened to a whole bunch of people here. In fact, relative newcomer George Francis. I had him on this show.

Marie: Mm-hmm.

Chris: If you're interested in George's work, just go back and listen to that. He was on the list. I'm trying to build up to it. I'll just say it. Six times!

Marie: Yes. Yeah.

Chris: Holy cow, George. High-five on that.

Marie: Yep.

Chris: George is big into the generative stuff and a lot of Houdini stuff.

Marie: Mm-hmm.

Chris: Which is kind of like a JavaScript API to teach CSS how to paint something. So, you make this little paint worklet and then you can kind of control it through CSS custom properties - usually, generally. That's usually the approach George takes. And some stuff in it that I am just tremendously compelled by.

In fact, one of my favorites is his little flecks, like paint flecks. You can imagine laying out a piece of paper on the floor and - I don't know - painting the ceiling or paining your wall and just the feeling of random droplets of stuff falling down. It really has - I don't know - an authentically speckled look to it.

Marie: Yeah, it does.

Chris: I'm not sure what the approach is, but I think it just looks tremendous. Perhaps in the past, we would make a JPEG or something of that look and just use background repeat, repeat on it and kind of get that look. But the fact that it's actually truly randomized and can be rather efficiently drawn because it ultimately ends up as canvas on the Web, essentially. That's pretty efficient. The fact that then you can control -- it's not -- you can't tell a JPEG, "Well, increase the splotchitudes," or "Make the splotches purple," or whatever in the same that you can in Houdini. Just so cool.

In fact, as soon as I saw that splotches, I incorporated it on CSS-Tricks in the header and the footer. It used to be just a solid gray color. Now I'm like, it's gray with flecks.

Marie: Nice.

Chris: Because it's two lines of code! Just because those worklets are so easy to use. You just say, "Load the worklet from this URL," and then you use the worklet in CSS. It literally can be as small as two lines of code.

Anyway, I've said too much about that. Congratulations, George, on six places in there. Weren't you kind of saying George is relatively new?

Marie: Yeah.

Chris: Maybe not to the world of programming, but certainly to CodePen.

Marie: Yeah. Joined at the end of 2020 and then 2021, had a beautiful run. One of them is in the top ten. He's in number seven.

Chris: Very, very great.

00:09:59

[Guitar music starts]

Chris: This episode of CodePen Radio is brought to you in part by Netlify. High-five for the support, Netlify.

You know Netlify has auth? You know? You can't run any server-side code on Netlify and they often jump in at moments like processing forms and running cloud functions and auth are things that you might really need a server for, but they just kind of help you do so that the rest of your site can remain static and, thus, fast and secure and all that. Their auth is really super cool and powerful.

They call it Netlify Identity, and it just does exactly what you think it's going to do. They'll help you provide OAuth, meaning log into this site with Google, BitBucket, GitLab, or GitHub. You do, and then you have what you need as a logged in user.

Let's say you're going to build a to-do app - or whatever. But you're going to do it Jamstack style. You might have a data source that some cloud data store. You're going to talk to it.

Well, how are you going to talk to it? You're going to talk to it through cloud functions, probably, because you're going to have an API key. Then you can keep it secret and use these cloud functions to talk that you're communicating through with JavaScript from the browser.

Okay. You need to ask that store, "Give me user 8294's to-do items." Well, how do you know it's user 8294? Well, because they're auth'd through Netlify Identity, so you know how to pass that information to the API and get the data back that you need to get.

You can build any app in the world based on this stuff going on. Of course, it can do more. It can help you generate custom emails that say, "Hey, you signed up," or "Hey, you changed your password," or all that kind of stuff. Then edit their roles as well. Be like, "This person is an admin, but this person is just a user," and all that.

Anyway, all that possible on Netlify, just in case you didn't know. Again, thanks for the support, Netlify.

[Guitar music ends]

00:11:57

Chris: Another one, Dilum Sanjaya, we were looking at his work just earlier today. Super good. We were like, you know what? If anybody kind of appears as if they have--

Are you a listener? Write in, Dilum, if you are.

[Laughter]

Chris: That would be interesting to see. Maybe following the Chris and Marie playbook of CodePen success because they're doing everything right.

Marie: Yeah.

Chris: There are full layouts here. There's a periodic table you pointed out, which is kind of a classic one.

Chris: Yeah, somehow.

Chris: It seems to stir up likes.

Marie: A periodic table hits the top 100 - what's this - 3-years running now, so people like them.

Chris: Mm-hmm.

Marie: We have brought it up on the show, so I do have to wonder if this is a student of the program.

[Laughter]

Chris: Congratulations on four placements in the top there.

Marie: Yes.

Chris: That's pretty great. You know I just don't see anybody who has this kind of talent in making things for the Web, you know, not being successful if they want it. You know?

Marie: Yeah.

Chris: I just feel like you dang did it. You know? Look! You're demonstrably wonderful at this stuff. Should you choose to stick around this industry -- and I hope you do -- you're going to do well for yourselves, all of these people.

Marie: Yeah. Absolutely.

Chris: Pretty cool.

Marie: It's an attainable list. It is definitely possible to get onto. You just have to make something cool and get it out in front of the community.

Chris: Yep.

00:13:26

Marie: And participate in the community. I do think that's important because, you know, these hearts come from CodePen members, so you've got to be part of the community to really get the attention of the other community members. It makes sense. It's just like any social network.

Chris: Yeah. Right. Again, you can't make it and walk away. You've got to share it. You've got to talk about it.

You pointed out an interesting one to me that not only you participate in the comments on your own Pen. You know?

Marie: Mm-hmm. Yeah.

Chris: That you're involved there as well, which won't affect how many hearts you get. I mean I don't know. It might have indirect effects in that the comments on the post then effect its popularity on CodePen, which then more people will see it and get more hearts. But it's not directly factored in.

Marie: Well, and also, if you are replying to comments, you know, if people have questions about your work -- and that's very common for things that get popular. People will have questions about how it's made. It's not unlikely that if you answer them, they might hit that heart button. You know? [Laughter]

Chris: Yeah. There you go. Pretty wonderful. Yeah, so as far as our checklist is concerned, talking about it, sharing it, promoting it, and participating in the community, that's our checklist so far here on people trying to do their thing. You know the obvious one being it's just got to have that something special.

Marie: Yeah. Yeah.

Chris: It's not so hard to get some degree of shown on the trending page or something. It's a little easier to hit trending, certainly, than it is to hit the top Pens. There's something always a little something extra about the top 100.

00:15:01

Marie: Yeah. Yeah. One thing that I noticed is that a full 10% of the top 100 were Challenge Pens, which is a pretty cool thing.

Chris: Wow!

Marie: Yeah, so 10 out of 100 were made for a CodePen Challenge. Pretty cool.

Chris: That's awesome!

Marie: Yeah.

Chris: Well, I did not know that. That's really, really cool.

I think, in years past, we've said it doesn't really matter when you make the thing. You wouldn't say, "Oh, I have a great idea for a Pen, but it's October."

Marie: Right.

Chris: "So, I guess I'll just not do it because my chances are lower." I'm going to say that there are Pens created in October and November that are on this list. There happens to not be any December, so I think this year we're a little wrong about that. January is pretty stacked.

Marie: Yes.

Chris: I hate to tell you. [Laughter]

Marie: Yeah, so again, I have to wonder if people are students of the previous times we've talked about the top 100. Yeah, you're obviously giving yourself an advantage to put something out at the beginning of the year.

I do think some folks worked on stuff through the December holidays and then just copied it out to a fresh new Pen and release it then. That's smart because you don't want to get stuck in December. It's not a time when people are particularly active on the Internet. It's when people go on vacation.

Chris: Mm-hmm.

Marie: People are preparing for the holidays, so it is very smart to release your late year work actually the next year, if you can hold back. [Laughter]

Chris: Yeah. Sure.

Marie: Because then you do have the full year to grow. You have the full year to be seen.

Chris: Yep.

Marie: You have the full year to repromoted your work, like I'm mentioning and like we saw. Lots of people did re-promote their work throughout the year.

Chris: Yeah.

Marie: Yeah. This time around, the creation dates on these Pens is heavily stacked to the first quarter of the year.

Chris: Mm-hmm, which I guess is a little unfair, but that's just how we roll here.

Marie: It's not unfair. It's just how time works. You know? [Laughter]

Chris: Yeah. It's how the Oscars work, so you know.

00:17:04

Marie: Exactly. Yeah. Exactly. There are seasons to release things, and we're saying this now but a lot of this is tied to how life was through 2021. A lot of us didn't get to do a whole lot in the outside world until the summertime.

Chris: Mm-hmm.

Marie: So, you know, we do see a heavy stack up at the beginning of the year, and then things start to change as the weather changed, as things changed throughout the world. What we're saying about 2021 may not apply for 2022, but you can't hurt yourself by getting something out early.

Chris: There you go. More big high-fives to Yoav Kadosh, 4 positions on the top 100.

Marie: Yes.

Chris: Very fantastic.

Marie: Very cool work. I really enjoy what he's done this year. Some real cool, super realistic looking things, like the realistic switch. There's like a red toggle switch that looks like what you'd have on a guitar amp or something. Then there's also a toggle switch that's like an orange slider toggle switch that has a very space feeling to it. You know what I mean?

[Laughter]

Chris: Totally, totally, totally. Toggles.

Marie: Yeah. People love them.

Chris: As much as we're saying dashboards, toggles will never die on CodePen.

Marie: Toggles will never die, and then carousels. A couple of years back, we said carousels are back. Carousels are back. People accept carousels.

Chris: [Laughter] Yeah.

Marie: Okay?

Chris: Heck yeah.

Marie: [Laughter]

Chris: Especially the 3D, and the carousel-carousel. That's a good way to put it. Imagine an actual 3D carousel with the horses and stuff.

Marie: Yeah.

Chris: But instead of the horses, you put panels, and it has a 3D aspect to it. Yes. So, so cool.

Marie: Yeah, so you can make a carousel if you want. Don't let anybody tell you, you can't. [Laughter]

Chris: No. Darn it. Yeah, people know how to swipe.

Marie: Totally. That's the thing, and I think that's the change that happened is that people got used to the concept of swiping, and the idea of swiping isn't unusual.

Chris: No.

Marie: A lot of people are experiencing the Web with their thumbs now. [Laughter] You know? It's a very different thing.

00:19:11

Chris: I think the - I don't know - pooping of carousels in the past, at least in my circles, was more about content strategy than it was ever about the functionality of a slider at all. There are four subgroups at this meeting, and everybody wants the homepage.

Marie: Right.

Chris: And so, our solution is to give everybody a panel of a carousel on the homepage, which is kind of bad for everybody, instead of an organization that knows how to make choices for real.

Marie: [Laughter]

Chris: Yeah. Anyway, that's more about the actual carousels on CodePen. It's so beautiful.

Marie: Yes. Gorgeous. Yes.

Chris: A big high-five to Aybuke Ceylan, let's say - another four position. Those are all our top people. Again, just wow. You know?

Marie: Yes. Yeah. Really impressive, and it's great to see people get on there repeatedly because it's like you're building a portfolio of really impressive work. Congratulations to everyone.

Chris: Yeah. A lot of new faces. Those are our favorites, of course.

Marie: Yes.

Chris: Because it's kind of like proof that you can just slide right into CodePen and kick butt if you want to. But I do appreciate seeing the old faces as well, people that maybe even step away for a while but they've still got it - kind of thing.

Marie: Oh, yeah. We have--

Chris: You know Hakim El Hattab is one of my favorite dudes. He runs slide.com, and he's just been around forever doing creative things. So cool to see his name on the list again with a really kind of clever form concept. Just neat to see.

Then another one on the list was an idea that Hakim had that somebody else coded, right?

Marie: Yes. Yeah. That was really interesting to see. It was a reference to someone else on the top 100 list, and I thought that was really cool.

Chris: I hear so much from talking to people. This podcast has had a lot of guest stuff in it, and I think this next year is going to have a lot more, too. Hearing from people that say, "Of course, I have ideas. But a lot of my ideas just come from elsewhere. They come from the real world, or they just," and how many times have we said this, "come from Dribbble or something."

Marie: Mm-hmm. Yeah.

Chris: Yeah. Certainly, that shows up here. I'm not sure how many of the top 100 started life as a Dribbble. I don't think that many, but certainly a lot of trending Pens do.

Marie: Yeah, and many of them did. I'm pretty sure our number one has its roots in Dribbble.

Chris: Oh, right on.

Marie: Yeah.

00:21:33

Chris: Some of my personal favorites is there's a Sarah Fossheim one of this called muson.css.

Marie: Oh, yeah.

Chris: It must be some piece of recording history. It looks like - I don't know - a rainbow keyboard or something. I don't know what the actual history of this machine is, but--

Marie: Oh, the muson. Yeah.

Chris: Yeah. I'm sorry. I ruined it. I've never actually seen one in real life before, but I feel like I have now because it literally looks like a photograph.

Marie: Yeah, it's like an old-time -- I want to say that one is from like the '70s. It's an old one.

Chris: Yeah.

Marie: It's got that -- and you can see it in this illustration. It's got that - I don't know - plastic of the '70s and '80s. [Laughter]

Chris: Sure.

Marie: Which was that kind of like off-brown kind of pinkish sort of color. Yeah, it's a really [laughter] beautiful rendition of it. The shadows are perfect.

Chris: Yeah.

Marie: It's such a cool illustration. I love her work.

Chris: I'm not even sure what it is about it that--

Marie: Sarah Fossheim does really cool things.

Chris: Yeah, truly, and I don't think -- this is certainly not her first time replicating an object.

Marie: Mm-hmm.

Chris: I think some of her early work there is a camera that she did that was amazing and then did some other musical devices. An old Mac, she did.

That's a lesson in itself, right? You have one success with something. I think that proves that you've got what it takes. Do it again. [Laughter]

Marie: Yeah.

Chris: Do it again. Do a variation on something that you already know is successful.

Marie: Yeah. Absolutely, yeah. I think that it's cool to see people iterate on things in that way, to build on a theme, to take an idea and expand upon it. It's great, and no shame in that.

I do think people have a fear of repeating themselves. Don't fear it.

Chris: Yeah.

Marie: I'm going to repeat myself a bunch of times on this podcast about that.

[Laughter]

00:23:26

Chris: GreenSock has been friends of CodePen for a long time, in no small part because of how many people just love using GreenSock on CodePen.

Marie: Mm-hmm.

Chris: Big in the animation community. It's cool to see themselves because they have a CodePen account. They have one on the top 100, and I think that's cool when a framework puts effort into building amazing demos for their own framework and get attention for it that way. It's proof that CodePen can have an element of marketing to it that's not necessarily just a person.

Marie: Mm-hmm.

Chris: Yeah. I'd like to see that more almost. There are no rules against your framework having an account and then posting cool stuff that your framework can do. Go for it.

Marie: Absolutely. It's an incredible way to demonstrate it. They've done a really brilliant job of engaging with the community and also promoting their work.

They had a big release. I guess this one, the one that's on the top 100 here, the scrolling cards, that's related to their big release at the beginning of the year. Right? They had a cool plugin come out. I forget the name of it [laughter] but they had a cool plugin.

Chris: Was it the scroll timeline one? Probably.

Marie: I think so. Yeah.

Chris: That was their splashiest release.

Marie: Absolutely, and they coordinated that with the community. They had people make things. I'm guessing that they gave people access to it early so that they could kind of play with it ahead of time.

Chris: Mm-hmm.

Marie: That was a really smart play and it got it into a lot of people's hands and got a lot of eyes on it, so that's the way to do it.

Chris: I love it.

Marie: Yeah.

Chris: I think they made their flip plugin free recently, which spurred some use in that.

Marie: Mm-hmm.

Chris: That's my favorite because it has this element of what flip means is it's one of those first/last input. I forget what the actual acronym means, but it means you do your layout, you put the stuff where you want, and then you know that there's going to be a transition and things are going to move around, so you just do it. You just maybe change a class name, move the things to the position that you want them to be in, and then when you use flip, it just will tween the things from where they're going. You don't have to write the animation yourself. You just put it where you want it to go and the flip animates it to that position.

Marie: Nice.

Chris: Instead of having to use your brain and say, "I want to animate it up 17 pixels and to the right 3 and change the opacity to this." You do all that with CSS and then say, "GreenSock, tween it." You know?

Marie: Nice.

Chris: Which is great because they kind of started life as a flash thing, didn't they?

Marie: Oh, I didn't know that. How about that? Wow! They've adapted.

Chris: That's funny because flash kind of had tweening built in. I wonder what they--

Yeah, they've had a bunch of lives. They've been around a long time, which I really appreciate.

Marie: Cool.

Chris: What else do you want to say about these things here?

00:26:19

Marie: Well, I think a point that you made earlier on that full page UI and stuff was really hot this year, I just want to stress how hot that was. It was like 17 Pens in the list [laughter] that I feel like could fall into that category.

Chris: Mm-hmm.

Marie: It's really interesting to see how people are building out full pages in a single page. It is extremely fascinating. I would not have guessed that it would be this popular. I saw it emerging, but I wouldn't have thought it would take this much of the list.

Chris: Right.

Marie: We also, of course, see a lot of really practical UI stuff across the list. One thing that's interesting also is that we see a bit less of CSS illustration alone making the list this year.

Chris: Hmm.

Marie: It was real big last year, but this year it was overtaken by other trends.

Chris: Sure. Yeah.

Marie: I think it's just really interesting to see these things emerge over time and also to have the opportunity to look back over a year and see, okay, this is what this year was really about. You do not ever know at the beginning of a year. You can make a guess.

Chris: [Laughter]

Marie: If you listen to last year's podcast, you can hear me saying glass morphism, no way.

[Laughter]

Marie: That's going to flow. Then here it is number one. And I wasn't talking about that Pen, but I was talking about the concept of glass morphism. I was like, nobody -- this is going nowhere. [Laughter] But we don't see it namechecked anymore, but it just kind of got absorbed into the style. You see the style of glass morphism all throughout what's popular, and many of the things here in the top 100 actually kind of incorporate that kind of style. Yeah, you can't even guess what's going to happen in a year sometimes. You know?

00:28:15

Chris: No. The little, tiny things with the light, Aaron Iker, of course, the master of that, has been on the show.

Marie: Yes.

Chris: Does appear on the list. Congratulations, Aaron. But less of that, you know. Less of Aaron's style. Bigger than smaller was big this year, I guess.

Marie: Yeah. I guess that's what you can kind of say when you look at what was popular here is that we went from lots of popularity in tiny things, like buttons, micro-interactions were very big in 2020. Then this year, we see entire page layouts and also just app layouts, dashboards, large navigation, things like that. It's really cool to see that change, and also it's informative for us. We are learning what the front-end wants and needs right now.

Chris: Mm-hmm. Mm-hmm. It looks like Amit Sheen has got a couple of placements on here. He's always interested in clever 3D stuff.

Marie: Oh, yes. Yes.

Chris: He's got one on here that's a little unusual even for him with this kind of word morphing idea, which I was so into. I'm like, how on Earth does that work?

Marie: Yeah. That one is trippy. Yeah.

[Laughter]

Chris: I like to see that because I feel like sometimes a "how on Earth" Pen might not make the top 100.

Marie: Mm-hmm.

Chris: You know because it will appeal to people that are curious about how it was done but maybe not just globally. The hearts don't just flow in. But they did for this one. Truly weird. You know? It looks like something that you'd almost certainly have to use video for or After Effects that is just being done on a handful of lines of CSS - believe it or not.

Marie: Yeah. Really, really impressive. When you realize it's just CSS, it is shocking. It's something that's fascinating to kind of dig into.

I always like, when I see something like this, to take it and actually do the thing where I view the compiled CSS and just look at the actual CSS to see how it worked. That's an option in the CSS panel. You just hit the menu up top and you can view the compiled. I just think that's really interesting to do when you have something that's made with a pre-processor. Like Amit's thing here, the CSS morphing, that one is done with Sass.

Chris: Mm-hmm.

Marie: So, seeing the actual compiled CSS is always very instructive for me to understand how the heck did they actually do this. [Laughter]

Chris: Mm-hmm. That can be true in HTML as well.

Marie: Yes. Yes.

Chris: If they're using some pug or whatever else.

Marie: If you see something where it's HTML and it's extremely mysterious, "How did this work?" you want to compile the pug and just get a real understanding of what's actually happening in there.

00:30:51

Chris: Yeah. Fantastic. If you're new to CodePen, this might be fun to look at to see, you know, just some of the incredible stuff that people do. Look at them. Fork them. Do whatever.

It's also you get a little sense of who they are while browsing through the list because it has their avatar and their name and how many Pens they've made and things like that. And there's a big old follow button next to everybody on there. So, if you want some interesting people to follow on CodePen, browsing this list might be a wonderful place. I might even recommend just click and follow on all of them, really. But that's just me.

Marie: It's a great place to start if you are new to CodePen. Following the people in the top 100 is a way you can't go wrong. Then that way you're following feed is full of interesting work, and you get to see the things that they're liking, the things that they're adding to collections. So, you get a feel for what else is happening in the community, too.

I think since we've increased the emphasis on following, people are getting more interesting stuff to look at. And we also saw people are really self-curating their own feeds now. This year, we saw that there was an almost even split between picked Pens and not picked Pens that were getting hearts, which means that there are whole communities that exist that are enjoying each other's work, learning from each other that have nothing to do with the editorial level where we're making decisions about this is cool; this is going on the homepage.

There were lots of just people liking each other's work and having little mini communities form around work. Having self-curation of your following feed I think adds a new dimension to enjoying CodePen.

I follow tons of people, obviously, because it's my job to do so, but also because I enjoy it. It is really cool to follow people, see the new things that they're making, see the things that they're interacting with, and see them grow as developers because everybody -- the more work that they put in, they grow every day. Every new thing that they create is a new opportunity to learn something and expand their skills. So, follow people. It's the way to make things extra fun.

Chris: Hey! High-five. That's a nice place to end it. Any final words before we wrap up?

Marie: No. I just want to say congratulations to everyone that's on the top 100, and I am looking forward to seeing who makes it next year.

Chris: Ah, exactly the same. Muah.

Marie: [Laughter] Thanks for listening, everybody. Bye-bye.

Chris: See you later.

[Radio channel adjustment]