395: The Most Hearted of 2022


Marie and I hop on the present to debate our lately launched Most Hearted of 2022 Pens. We solely did the calculations the day earlier than, so that is extra of a primary response than a deep dive.

  • Congrats to Hyperplexed for #1 and a large 12 months on CodePen. Final 12 months, only one entry on the Prime 100, and this 12 months, 9. “Full layouts” like this appeared various instances, together with Aysenur Turk, final 12 months’s winner, at #13 with Liquid Transition Impact, and there have been two NFT-themed touchdown pages (1, 2) within the Prime 100.
  • Quite a lot of Pens entice consideration after they have that “I may use this” really feel to them, demonstrated by Ryan Mulligan’s Brand Wall at #2!
  • Excessive 5 to Greensock for taking #3 with a re-creation of Brian Cross’ beautiful Pen. The tag “gsap” was used a ton within the Prime 100.
  • Jon Kantner took #4 and 10 different spots making this probably the most appearances on the Prime 100 record ever, and likewise took a spot with a Pen made on December thirteenth! Aaron Iker and Yoav Kadosh each had 4 spots.
  • Maybe my favourite due to the deep CSS trickery concerned was Scott Kellum’s Apple impressed pleasure clock. Scott has the oldest account of anybody within the record, over 10 years outdated! Large fan of Steve Gardener’s joke, although as effectively.
  • 11 of the Prime 100 have been created for CodePen Challenges.

Time Jumps

  • 00:23 The principles of the sport
  • 05:13 Grinch model hearting reminder
  • 06:34 Primary on the record
  • 10:24 Sponsor: Notion
  • 11:12 Brand wall
  • 12:52 Greensock scrolling website pen
  • 14:40 NFT touchdown pages
  • 16:25 11 appearances by John
  • 17:30 Shaw made the record
  • 19:09 Problem pens made the record
  • 22:16 New CodePen members on the record
  • 23:25 Longest CodePen member on the record
  • 25:09 Parts which are standard
  • 27:44 Spider pens
  • 29:37 Snowball pen

Notion is an incredible collaborative software that not solely helps set up your organization’s info however helps with undertaking administration as effectively. We all know that each one too effectively right here at CodePen, as we use Notion for numerous enterprise duties. Be taught extra and get began without cost at notion.com. Take your first step towards an organized, happier workforce, immediately.


[Radio channel adjustment]

Announcer: Right this moment, on CodePen Radio.

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

Marie Mosely: Hey, everyone. Comfortable New Yr.

Chris: Yay! You already know what we do on the high of the 12 months. Now that the 12 months is absolutely full, all twelve months. It wasn’t a Leap Yr, proper? twelve months? Yep.

Marie: Not final 12 months, yeah.

Chris: Yeah.


Chris: This 12 months is, although, proper?

Marie: Um… uh… I do not know.

Chris: Stay Google it. Final 12 months wasn’t. All the times are full, which implies our knowledge set is full.

Marie: It’s! Sure, it is Leap Yr. Oh, incredible. Which means you have to put on yellow and blue, *Thirty Rock* followers.

Chris: And you may blame something on the Leap Yr. Simply be like, “This can be a write-off 12 months. It is received me all twisting round.”

Marie: Sure. [Laughter]

Chris: Okay, so what I imply by our full knowledge set is that we’re not going to tally up the preferred Pens of 2022 in 2022. We’ve to attend for the 12 months to shut out after which we do it.

Marie: Precisely.

Chris: Now, the astute amongst you is perhaps like, “Nicely, absolutely, that’s unfair to the gamers of the sport of the preferred Pen of 2022. What in case you make your Pen in December? I haven’t got sufficient time to build up hearts?”

Nicely, in case you’ve listened to this earlier than, you will know that loads of Pens do make the record that have been made in December as a result of the hearting of Pens is so front-loaded that that may simply occur anyway. And no matter. It is only a downside that occurs. The identical factor occurs with the Oscars. No matter.

Marie: Sure. Yeah.

Chris: It is a factor.

Marie: If you wish to get onto the record, if that is the sport that you simply actually need to play, in case you make one thing actually cool in December, hold it non-public and publish it in January.


Marie: No, for actual, although. You already know, simply work on it in secret and make it a brand-new Pen. Put it right into a model new Pen within the following 12 months. You then’ve received the entire 12 months to rack up–

Chris: Nicely, yeah. Okay, so you may have some months. That is precisely the recommendation I used to be making an attempt to not give. You already know? Like, “I do not care whenever you publish it.”

Marie: No, hey, this can be a sport you’ll be able to win. And we have–many, many times–given tons and plenty of professional recommendations on how to do that.

Chris: The recommendation.

Marie: And I can inform that folks on this record are college students of the present, so–

Chris: [Laughter] Good.

Marie: [Laughter] I’ll hold telling them. I’ll hold telling them.

Chris: Yeah. Publish it in January, after which hold reminding folks that you simply made it.

Marie: Hold reminding folks. Precisely.

Chris: Yeah. That is the large one. All proper, so this is the factor. Typically in years previous, we’ve got printed this. It has gone round social media. Folks have digested it. Maria has completed statistical evaluation on all this. After which we report the podcast.

This 12 months, only for a twist, it will extra like a primary look. We’ve checked out it already. We form of have to only to be sure that nothing went bizarre within the knowledge and that the highest 100 actually is the highest 100. There’s not a random fork in there or one thing, not that there ever could be. We all know program computer systems.


Chris: However it would not be the primary time the place there was some simply anomaly that needed to be corrected. This 12 months, there’s completely no bother in any respect. We did what we usually do.

Marie: Yeah. Yeah, no investigations have been opened. [Laughter]

Chris: No. [Laughter]

Marie: Which is sweet to say.


Chris: No. Good to say. And so, the highest 100 was the highest 100. It went out. You possibly can go to it. There’ll absolutely be a hyperlink in these present notes.

Marie: Mm-hmm.

Chris: It is enjoyable to look by. We paginate them into ten. Not as a result of we’re grasping and we’re in search of web page views. Heck, it is a single-page app form of website anyway, so it does not actually matter. It is simply because displaying greater than ten iframes on a web page is sluggish. [Laughter] Sorry. They’re paginated. Go to the top if you wish to solely see the highest ten.

However in fact, the highest 100 on a website like CodePen are superior! All of them are actually good as a result of there are nearly like tears of awesomeness of CodePen. There are Pens which are picked, which present up within the feeds, that are superior.

Then there are ones that make it into the Spark (on a given week), that are actually, actually superior. There are some that made it into social media, which could not be a part of both of these classes however are additionally superior.

There are all these sorts of superior. However in case you’re on the highest 100, you might be actually… That is the cream of the crop right here, to illustrate. And it wasn’t voted by us. It was voted by you.

Marie: Precisely. It will get extra aggressive yearly. Extra Pens get picked yearly. Extra folks be part of CodePen yearly. Extra hearts exit to a number of totally different work yearly. So, as time goes by, it will get trickier and trickier to get on the record, and you’ve got actually received to impress folks.

Chris: Marie and I’ve appeared by the notes. We’ve our personal little commentary on it. We’re simply going to share. It should be slightly scattershot. We’re not going to speak about these from 100 down to 1 or something like that. We’re simply going to say a few of our favorites, some attention-grabbing anecdotes about them, and such. It is as much as you to do this.

It most likely will not be the final you will hear of this high 100, even on this present, simply because it is such fascinating materials to speak about. Maybe we’ll get a number of the authors and stuff. Please shoot us a observe on social media or e mail in case you have opinions on who we should always speak to or something you need to find out about this high 100 record.


Chris: A tiny, tiny different factor: Bear in mind the Grinch model…? [Laughter] How do I say this? The Grinch-style hearting on CodePen.

Marie: Mm-hmm.

Chris: Which isn’t how I ought to say it as a result of no person thinks of it that approach, but it surely’s from that Christmas cartoon with the Grinch the place his coronary heart grew three sizes that day. That is how he fixes himself on the finish of that film.

Likewise on CodePen, you’ll be able to coronary heart one thing as soon as, twice, 3 times. The center will get slightly pinker or slightly redder and slightly bigger each time you do it earlier than that fourth click on takes it again to unhearted.

That really issues (presently of 12 months particularly) as a result of hearting one thing 3 times does give it three votes on this syntax. So, that is simply one thing you need to know in case you see a Pen that seems out of order as a result of the quantity, the quantity that is displayed is simply what number of customers hearted that factor, but it surely may need 3 times that many hearts in actuality.

Marie: Proper. Additionally, the opposite factor to know is that we do not cease letting them get hearted after the 12 months ends.

Chris: Right.

Marie: As you look by the record, folks will begin to coronary heart issues which are on the record, and their numbers will change however the rating is mounted to 2022.

Chris: The day we ran the script, which on this case was yesterday, January 2nd, so you bought one further day – technically.

Marie: Nicely, congratulations, everybody, on one further day. It did not make an enormous distinction.


Chris: It certain didn’t. Okay, so primary, I am going to simply get proper out and say it, was from Hyperplexed, which I’ve spoken to as some dude, and I have no idea his identify. I don’t know what it’s. He is completely pseudo-anonymous on the Web, I feel. I guess in case you actually dug, you can discover it, however I feel prefers to go by that. That is the web site. That is the CodePen deal with. And crucially, that is the YouTube channel.

Marie: Yeah.

Chris: Which I do not know when it formally began, however I began watching this 12 months, and I am obsessive about it. It is so good of content material. Sure, he occurred to make use of CodePen typically to show it. Not all the time, however generally.

You possibly can simply inform. It is not such as you’re simply staring on the YouTube interface. There’s zooming in on just a few strains of code at a time. It’s totally classily completed, like, “Look. That is the actual piece of code I am speaking about. Typically strips away something superfluous to have a look at. And often makes one thing simply actually attention-grabbing, like, “Hey, I used to be shopping across the Web and noticed this interplay on this web site, and I’ll recreate it,” after which recreates it actually cleanly and with little code to assist make it comprehensible. Only a super-good YouTube channel.

I am glad to see them make not solely the highest 100 record however the primary, after which additionally hit the record a bunch of instances too, proper?

Marie: Sure. Yeah. Yeah, a complete of 9 instances on the record this 12 months. And Hyperplexed made their debut on the record final 12 months, and so they have been on as soon as down within the 90s someplace.

Chris: Okay.

Marie: This 12 months, that is why after I was speaking about college students of the present, I feel Hyperplexed is one in all them. Completely rocked it this 12 months. 9 positions on the highest 100.


Chris: Implausible. Implausible. I used to be going to say that Hyperplexed is quantity 12 with this hover impact that they did slightly video on. Think about a grid of darkish playing cards with a border on them that is a barely totally different shade of grey than the cardboard is. As you hover over the playing cards, not solely is there a radial gradient form of spotlight impact that follows the mouse, however as you get to a nook of one of many playing cards, even the playing cards round it additionally form of decide up a few of that highlighting. It seems like a kind of issues, like, “Ooh… Good contact.” You already know?

There is a YouTube video on it. There is a Pen that is extremely popular. However then additionally quantity 14, David Khourshid noticed the identical factor and created it as effectively. It is humorous to see 12 and 14 be a recreation of the identical kind of impact – so shut to one another.

Marie: I feel it was a website known as Linear. I do not keep in mind what that app does, however that was the model inspiration for each of those.

Chris: Mm-hmm. They usually have that contact of… Perhaps I am not engaged on one thing proper this minute (or perhaps I’m) that would perhaps use this. It is not so distant in weirdo land.


Chris: You already know whenever you see – I do not know – a 3D ball fall from the sky and bounce. Someway, that is a loader or one thing. That is stunning and enjoyable. However often, folks see, like, “I do not know that I can truly use that.” However when it is only a hover impact on a card, each web site on the planet has playing cards on it. I feel that in some way is a ticket to large recognition because it triggers that little a part of your mind that is like, “Ooh, perhaps I may steal this.”

Marie: Yeah. Positively. Additionally, there’s one thing about it that simply feels pure. It appears like how mild ought to work in a scene.

Chris: Mm-hmm.

Marie: And so, I feel that’s a part of what makes it so very interesting. You need to have mild seem like that. That is how mild works. It’s totally thrilling to get to see how that may truly occur within the browser.

Chris: With that twist of, like, “And I have not seen it earlier than.”

Marie: Mm-hmm.

Chris: Why have not I seen this earlier than?

Marie: Precisely. Yeah.


[Guitar music starts]

Chris: This episode of CodePen Radio is dropped at you partially by Notion. It is a new 12 months, of us. I am certain a variety of you might be doing planning and all that form of stuff for the brand new 12 months. Definitely, we’re at CodePen, and utilizing Notion to do it.

We have used it for a very long time. That basically helps hold the workforce on the identical web page. Simply completely adore it. Thanks a lot for the assist.

Whether or not you are beginning a brand new health club routine, organizing a visit with buddies, and even planning your organization targets, Notion is a versatile, collaborative workspace that helps you make significant progress in each a part of your life. Get began in seconds by selecting from hundreds of templates for each job. Make it your personal from to-do lists, OKR trackers, and a lot extra.

Notion helps you construct the precise system you need so you’ll be able to work the way in which you’re employed greatest. Begin your 12 months off proper and get organized now with a free Notion account at notion.com/codepen. Notion.com/codepen to be taught extra and get began without cost proper now. So superior. Once more, thanks a lot for the assist. Love Notion right here at CodePen. The very best.

[Guitar music ends]


Chris: I feel additionally lots of people have put a bunch of logos in a row on a web site. It simply looks like such a standard want for something from a brochure website to the entrance web page of some software program as a service app or one thing. “Take a look at all the businesses that use our factor.” That is Ryan Mulligan’s #2 Pen emblem wall, which form of routinely animates a row of logos. And it is superbly completed, however I’ve a sense it has so many hearts, partially as a result of Ryan is a well-liked man anyway. However partially as a result of I’ve wanted to do this. I’ll coronary heart this as a result of the subsequent time I’ve to do it, I am simply going to do it like this.

Marie: Yeah. Positively. And it is enjoyable to see the marque ideas in a contemporary approach. It is not truly a marque aspect.

Chris: Yeah.

Marie: All of us need that form of ticker tape factor.

Chris: It fades out on the edges.

Marie: Yeah.

Chris: And it is coded cleverly sufficient that it isn’t a stretch to make it go vertical, so it is one click on and the complete factor is occurring however vertically as an alternative. It is simply good to see fashionable Net know-how make that not one thing that Ryan punted on. He simply was like, “Oh, yeah. I’ve coded it,” so it is – I would not say trivial however – not an enormous deal to make occur in a completely totally different course.

Marie: Mm-hmm.


Chris: I am interested in this #3. It is from our buddies at GreenSock who’re heavy customers of CodePen. I like that they don’t seem to be solely on this record however are so excessive up as #3. Straight-up credit score the Pen.

On the high of the Pen it says the unique was by Brian Cross. I feel that is attention-grabbing that they printed it on their CodePen, presumably as a result of… I am unsure. Perhaps they wished management over it or that they assume it might get extra eyes as a result of it is on the official account than Brian has – or one thing. It is technically Brian Cross’s Pen printed… or republished, I assume, on the GreenSock record, and it is simply this stunning form of scrolling web site the place even the typography on it is available in at a staggered price and stuff. Actually stunning Pen, so I assume high-five each to Brian and GreenSock.

Marie: Yeah. This one is so good. I like the way in which that the textual content scrolls in. Attractive.

Chris: Yeah. Simply stunning trying. Very worthy of its place right here.

It does form of have the whole web site really feel to it in a approach, to me. No less than it takes all of the area of the display screen, and you’ll think about constructing the remainder of a web site round this aesthetic, which is decently frequent, I would say, throughout the record.

As I look by the 100, there are – I do not know – 4 or 5 or so which are form of like full web sites.

Marie: Yeah, a number of full-page UI in right here, truly. It is actually cool.


Chris: Aysenur from final 12 months, quantity one–

Marie: Mm-hmm. Yeah.

Chris: –was on the record a bunch of instances, is 13 this 12 months, so nonetheless at it. Superior job. Was form of well-known for that. You already know would make full-page stuff, and she or he’s on the record once more this 12 months in that very same model.

However there are a few others. You truly famous that two of the highest 100 have been NFT touchdown pages.

Marie: Yeah. [Laughter]

Chris: That even have that really feel.

Marie: Yeah, they’ve the full-page look in that darkish violets and purples form of colour of the NFT world.

Chris: Mm-hmm.

Marie: Positively that one goes to be the signal of the instances that this was the 2022 record, that it was NFT dashboards, as a result of I do not anticipate we’ll be seeing that once more. [Laughter]

Chris: No. No, most likely not. However I’m wondering if some folks hearted of them not as a result of they’re like, “Ooh, that is excellent for my NFT undertaking,” however they’re like, “That is only a good trying web site.”

Marie: Yeah, they’re simply cool. The looks of them, whenever you take a look at them, they’re playing cards on a darkish background, you already know.

Chris: Proper. Mm-hmm.

Marie: And that is one thing you can do with any kind of web site. That the idea that they have been made for was for NFTs could be very 2022. [Laughter] However aside from that, yeah, you can completely make these into one thing else.

Chris: Yeah. I hate to confess… It is not honest to say that there is an NFT aesthetic as a result of that is too broad. NFT is only a know-how and you may make something in NFT. However there’s, due to the apes and whatnot, there tended to be slightly little bit of an aesthetic occurring.

Marie: Yeah. There’s the Web3 look.

Chris: Proper.

Marie: Like I say, it’s the darkish purples and violets and all of that.

Chris: Yeah. The web site had a distinct really feel than NFTs themselves.

Marie: Yeah.

Chris: There was a Web3 look, for certain, and did not hate it, truly. Actually fairly nice-looking stuff, often.

Marie: Yeah, it is cool. I feel it could transfer ahead into the longer term. It is simply, you already know, not every thing will. [Laughter]

Chris: Not every thing will. Yeah, so that they had form of that full-page factor occurring, which was good and actually may say something on that web site.

Marie: Mm-hmm. Yeah.

Chris: Let’s reappropriate it for one thing new.

Marie: Certain.


Chris: Did we point out Jon Kantner? Congratulations, John. You had not solely #4, however you have been on there greater than anybody else was.

Marie: Mm-hmm.

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

Marie: Sure, that is an enormous 12 months for John, and he made some wonderful work this 12 months. Actually, actually enjoyable loaders. That was the stuff that actually caught my eye this 12 months. He was calling them pre-loaders however loading animation.

Chris: Yeah.

Marie: And so enjoyable. Every thing that he did this 12 months was so cool. I am not stunned. Nicely, truthfully, seeing anybody on the record 11 instances is fairly shocking, however I am not stunned that it was John as a result of his work was simply wonderful this 12 months.

Chris: Yeah. That is most likely tied or beating probably the most ever on any record. Would not you assume?

Marie: I feel it’s… I feel it’s a tie. Yeah.

Chris: Yeah. There was one other 11 one 12 months.

Marie: I feel, if I am not mistaken–

Chris: Most likely Aaron Iker. I guess.

Marie: –Aaron Iker.

Chris: Yeah.

Marie: Yeah. Though, he may have been ten. This is perhaps the winner. We’ll need to dig in.

Chris: Yeah. That is the form of knowledge stuff that you simply’re good at.

Marie: Yeah.


Chris: Loads of one-offs. Most of them are, in fact, those who made the record one time. Even our personal Stephen Shaw was on the record.

Marie: Yeah.

Chris: Which in fact, simply makes me seethe with jealousy, Shaw.

Marie: I feel he’ll be… [Laughter] I feel he’ll be stunned about that one, too.

Chris: Yeah?

Marie: If I am remembering accurately about that Pen, it wasn’t something main that he was engaged on. I feel it simply form of… You know the way generally you will simply make one thing and it simply form of will get away from you? [Laughter]

Chris: Yeah.

Marie: You share it and other people simply get into it. I feel if he have been to… If I used to be to ask him, “Which one in all your Pens is on the highest 100?” I feel, initially, he’d be stunned he was on, and that it was that one could be much more shocking. [Laughter]

Chris: Hmm…

Marie: I am going to have to speak to him later immediately. [Laughter]

Chris: You already know what? I am writing it down proper now as a result of I feel I’ve mentioned this earlier than that I need on. [Growls]

Marie: You are by no means getting on, Chris.

Chris: [Growls]

Marie: [Laughter]

Chris: I am making a January Pen that is going to have fricken’ purple on it.

Marie: Yeah. [Laughter]

Chris: It should be so good! I am doing it! God dang it.

Marie: You have to do a TikTok video the place you level at it so folks know that they are imagined to additionally coronary heart it.

Chris: Inform me. I do know you are kidding, however I assume you are not, truly.

Marie: [Laughter]

Chris: I’ll do something it takes.

Marie: No. You have to do a TikTok dance and level on the coronary heart button so folks know to coronary heart it.

Chris: Okay. To coronary heart it, okay.

Marie: Yeah. Yeah. You have to do it, Chris.

Chris: Okay. I am getting on this dang…

Marie: In order for you on this record.

Chris: I am getting on this record.

Marie: You possibly can hearken to earlier episodes the place I give away the entire sport and inform you get on the record. You are by no means taking note of it.

Chris: Yeah. That was a very good one. We’ll level to that.

Marie: [Laughter]

Chris: Yeah. Luckily, I even have database entry, so I may simply increment the quantity if I needed to.

Marie: Yeah, however who does the picks? Let’s discuss it, actually.


Marie: As a result of I’ve received knowledge on that, too.

Chris: Yeah, you do. You actually have searched forward the final a few years in sheer pick-a-tude.

Marie: Yeah. [Laughter]


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

Marie: Yeah.

Chris: It was made re-popular primarily based in your taking part in playing cards problem. It is cool to see Problem Pens get in right here. It is not the one one. I really feel like there are at the very least two or three, if no more.

Marie: Oh, there are a bunch. Yeah.

Chris: Yeah.

Marie: Eleven of them have been made for challenges.

Chris: Eleven!

Marie: Yeah.

Chris: Wow. Nice.

Marie: This Pokémon one which we’re speaking about–

Chris: Simon Goellner.

Marie: I’d guess gell-ner.

Chris: Sorry, buddy.

Marie: We’re making an attempt. However that is truly a revision of a Pen that he had made in a earlier 12 months. And so, he simply made it model new for the problem. It was a playing cards problem, and he utterly revised it and made a brand-new impact. It is such a cool Pen.

And in addition, I actually like the way in which that it seems within the grid. I feel that was a part of what drew folks into it.

Chris: Oh, actually?

Marie: It simply seems good within the grid. You already know?

Chris: That does matter.

Marie: However I additionally noticed that, after Simon shared this for the problem, he was additionally persevering with to speak about it on social media, share it a number of instances, and I feel that does form of assist enhance issues up.

Chris: Perhaps that is why I noticed a lot buzz. Of all of the Pens that have been talked about throughout the 12 months, I noticed this come up so much.

Marie: Mm-hmm.

Chris: Folks have been simply impressed by this and a lot in order that they might share it.

Marie: Positively.

Chris: Which is sweet to see.

Marie: Nicely, that foil impact, it is so cool.

Chris: The foil is nuts.

Marie: Sure.

Chris: As a result of we have seen this earlier than. It is a 3D Pen. So, as you hover over and transfer your mouse round, it impacts the 3D angle of the cardboard. Notably, it does it with simply CSS. I all the time assume that is form of interesting to folks to see that, to be like, “Ooh, I haven’t got to be taught JavaScript for this.” Though, I’d assume that really JavaScript would make this simpler. This was made tougher by the truth that it does not have any JavaScript on it.

So, it strikes in 3D area. That is all the time cool anyway. But when that is all this was, I feel there isn’t any approach it might make the highest 100.

What it has on there’s — how did you place it — a gloss or–?

Marie: Oh, the holographic impact to it.

Chris: Yeah.

Marie: Yeah.

Chris: There’s this nearly like oil slick look.

Marie: Yeah.

Chris: Over high of the cardboard with these shiny reds and greens and stuff on it, however like a variety of it. [Laughter] It simply seems superior.

Marie: Yeah. It is like a foiled taking part in card, like whenever you get one which’s sizzling stamped with foiling on it.

Chris: Yeah.

Marie: It is so cool. After all, Pokémon. I’ve to say Pokémon Pens do effectively on a regular basis. Folks love Pokémon.

Chris: Yeah.

Marie: However yeah, I imply it is the entire package deal. It is received every thing you’d anticipate to be in a extremely high-performing Pen.

Chris: Proper. That foiling, it isn’t simply utilized as soon as, too. As you progress it in 3D, that foiled look simply goes wild on it.

Marie: Sure.

Chris: It is simply loopy.

Marie: Yeah.

Chris: It is nice. It is nice trying.

Marie: Tremendous cool. Superior work, Simon.


Chris: Previous faces and new, actually. It was cool to see Chris Gannon hit 10,000 followers, rejoice it, after which see that be the Pen that received him on the highest 100.

Marie: Yeah, so nice.

Chris: Very cool. Congratulations, Chris.

You already know there are new members, proper? Let’s do new members first.

Marie: Yeah.

Chris: Any person made their very own account in August of this 12 months (for the primary time) and made the record: Katar.

Marie: Yeah. Fairly thrilling. That is fairly superior, too, as a result of realistically, getting on in August, we’re coming to the top of the 12 months there. August typically is a sluggish time of 12 months. Plenty of individuals are on trip. So, to catch a variety of consideration like that in August is actual spectacular. Congratulations.

Chris: It is cool to have a look at their profile and see them discovering the look.

Marie: Yeah.

Chris: There are many Pens which have slightly little bit of the glassy blur behind form of look, and a few of them are hitting it and a few of them aren’t.

Marie: Mm-hmm.

Chris: And after they begin to hit it, you’ll be able to inform. [Laughter]

Marie: Yeah. That is all the time so enjoyable to see the journey.


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

Marie: [Laughter] Yeah.

Chris: Mr. Scott Kellum, in 2012, made the record once more with one in all my favorites from the entire record. What did he name it? The Apple-inspired Delight clock.

Marie: Sure. Tremendous cool.

Chris: Yeah, Apple by this occasion that it was a white background primarily with rainbow stripes down it. After which every time there was textual content concerned, the strains would fatten out. It is only a very uncommon look. You possibly can clearly learn what the textual content is simply with these fattened strains.

Marie: Yeah. It is nearly like a pointillist impact. It is actually, actually participating.

Chris: Proper. To have or not it’s editable then, that is what blows my thoughts as a result of I may see pulling this off in Illustrator or one thing. I perceive that that may be an attention-grabbing, advanced impact in picture enhancing software program. However he is completed it right here with primary Net tech.

Marie: Mm-hmm.

Chris: It is so intelligent, and someplace – I really feel dangerous about this. Scott, the place did you write this up? I noticed slightly clarification of how this works, or perhaps someone else wrote it for Scott as a result of it is such an uncommon look, however I could not discover it actually rapidly.

However there was an evidence how this works, and there are layer after layer after layer concerned in making this occur. Then there are filters and layering results that make it do what it does.

I do not assume it is 1,000,000 miles away from that weblog impact that we noticed various years in the past.

Marie: Mm-hmm.

Chris: Bear in mind when two SVG circles would form of hit one another and so they’ll go blah into one another?

Marie: Yeah. [Laughter]

Chris: There’s none of that on the record this 12 months, however do not quote me on this. I feel a few of that very same form of stuff is at work right here.

Marie: There may be at the very least one blob on right here.

Chris: Is there a blob?

Marie: There’s received to be a blob. Yeah. [Laughter] But in addition, about Scott’s Pen, additionally, only a good added contact. It tells time. You will notice the precise time of day whenever you take a look at it.

Chris: Yeah.

Marie: It is not simply designed to appear to be a clock. It truly works like a clock, in order that’s actually cool.

Chris: Mm-hmm. Yeah, it jogs my memory, too. The blobs I used to be mentioning have been hard-edged blobs. However what received standard, particularly this 12 months and maybe the final couple of years was nearly like that NFT background purple. Gradients of colour, however a number of colours behind them.

Marie: Sure. Yeah, that is what I used to be speaking about after I mentioned blobs. Yeah, so we’re simply speaking about various kinds of blobs right here. [Laughter]

Chris: Yeah. There are such a lot of blobs.

Marie: So many. [Laughter]

Chris: Disambiguate the blobs. Gees.

Marie: Sure.

Chris: Fairly cool, so although the total web page look was standard, a few of these on right here — extra standard, typically — is the one little element or one thing, like a loader, like a card, like no matter. That is primary, I would say.

Marie: Yeah. UI parts and even issues like buttons.

Chris: Buttons are all the time large. It is simply the way in which it’s. Some interactive, some animation, these are simply issues that I’ve determined usually are not traits on CodePen anymore. That is simply form of what CodePen is.

Marie: Yeah. They’re bread and butter. Completely, yeah.

Chris: Then if one thing is not in that class of, like, beautiful-looking UI, then the place does it go? It tends to be one thing that is nearly creative for artwork’s sake.

Marie: Mm-hmm.

Chris: Like a crawler or one thing that is similar to, “Wow, that is simply stunning. One thing stunning is occurring there.” It has nothing to do with person expertise. It is simply cool – or it is a sport, and there are a few video games on there this 12 months. It is not essentially one thing you utilize on a web site.


Marie: Proper. It is only a Pen that could be very cool, and that is the great thing about the highest 100. You discover sensible issues. You discover helpful issues. And also you additionally discover probably the most enjoyable factor simply to play with and simply to get pleasure from or to take aside and work out, like, how was this made?

It is all the time an thrilling time to see what’s on the record and to only undergo it. Form of a visit down reminiscence lane for me, in fact. But in addition, to only form of get a really feel for what everyone was actually having fun with this 12 months. It has been actually enjoyable.

Chris: Mm-hmm.

Marie: Once you say little crawlers, fairly actually we had issues that have been crawling within the high 100. [Laughter]

Chris: Oh, the spiders. Yeah.

Marie: There are two spiders. That is the primary time ever. Two spiders within the high 100. At 75, we’ve got one from Fabio Ottaviani.

Chris: Mm-hmm.

Marie: That’s simply the parametric spider simply crawling round. After which months later, from Stranger within the Q, one other spider. They really have similarities. They’re completed otherwise, however they’ve similarities in the way in which that they crawl throughout the display screen.

Chris: Oh, how true. Yeah. Please, everybody. Take a look at each of those Pens.

Marie: Sure.

Chris: See how totally different they’re aesthetically, however you’ll be able to simply really feel, whenever you play with them, that the bones beneath them are comparable.

Marie: Sure. Yeah, however they’re each so attention-grabbing. The one from Stranger within the Q truly form of seems like… That is such an ’80s factor for me to say. Do you keep in mind these slimy issues that you’d throw on the wall and they’d climb down?

Chris: Yeah.

Marie: It will are available in like a cereal field. It seems like these. [Laughter]

Chris: There is a fairly good Bluey known as “Sticky Gecko” that evokes that within the fashionable period.

Marie: Oh, proper on. I do not know what that’s, however… [Laughter]

Chris: Okay. Nicely, like a lizard – no matter.

Marie: No. What’s Bluey?

Chris: What’s Bluey?!

Marie: Yeah.

Chris: Okay. We’ll need to take this offline. I am sorry.

Marie: [Laughter]

Chris: It is a extremely popular present from the land of Rachel Smith. It is an Australian program.

Marie: Oh, proper on. Oh, I am so out of the loop.

Chris: Yeah. Should you had a younger… Should you had slightly as of late, you’d know. However now your child is outdated.

Marie: Oh… oh, okay. It is a children’ present. Proper on.

Chris: Yeah, it is for teenagers.

Marie: Yeah, now my child is simply too outdated for that. [Laughter]

Chris: Yep. Yep. Though, you already know, they’re most likely proper in that center age the place they would not prefer it however adults prefer it nearly simply as a lot as children as a result of it is so… It hits the grownup observe so completely.

Marie: Ah… Cute.

Chris: So excellent.

Yeah, so spiders have been large. That was form of cool.

Marie: Yeah.


Chris: We already talked about Jon. Congratulations in your 11 lists on right here. One in every of them, although, created in December 2013, so regardless of us opening the highest of this present saying that you need to publish in January.

Marie: Yeah. I imply, realistically, as soon as once more freely giving the sport, the primary three months of the 12 months are those that provide the greatest probability of, initially, getting a ton of eyeballs and likewise having a bunch of time to re-promote one thing and get extra folks to have a look at it.

Chris: Mm-hmm.

Marie: However then you should have one thing that’s simply actually standard, and that was this one this 12 months, Jon Kantner’s snowball pre-loader, which was simply… I imply you can nearly really feel the chilly popping out of it.

Chris: It is a favourite of Jon’s Pen this 12 months.

Marie: It is so good.

Chris: It is so good.

Marie: It is so good. It seems precisely like what it might appear to be to circularly make a snowball within the snow. You possibly can nearly really feel it.

Chris: Yeah.

Marie: It is so good, and in order that was… I beloved that it was on the record. I like that one very a lot. I feel that one goes to be an all-timer. You already know?

Chris: Yeah?

Marie: If have been to… Oh, yeah. Yeah, it is so cool. It is so good, and it is so evocative of actuality that I feel that one goes to be standard for a very long time.

Chris: Yeah. It truly makes me assume. No guarantees right here, however the first 12 months that we selected to do that was 2013, which signifies that on the finish of 2023, we can have 10 years of potential knowledge on this. You already know?

Marie: Oh, yeah. We may run a, yeah, high 100 all-time. Perhaps the highest ten of all time.

Chris: Of the final decade – or no matter.

Marie: Uh-huh.

Chris: Yeah. Fairly candy. Fairly candy.

Marie: That might be fairly cool.


Chris: Quite a lot of GreenSock in utilization, simply as slightly bit of information.

Marie: Sure.

Chris: I mentioned we weren’t going to dig deep into knowledge, but it surely seems such as you’ve received some right here.

Marie: I did the sunshine dig. Yeah.

Chris: Yeah.

Marie: [Laughter]

Chris: Which is nice. So, okay, I assume only a large congratulations to everybody that’s on this record. Should you’re combating for it, effectively, you have to struggle me subsequent 12 months as a result of I am doing this.

Marie: Yeah. He is making an attempt. [Laughter]

Chris: I am doing this.

Marie: [Laughter] And you already know he does form of have some followers.

Chris: Your greatest guess, although, your greatest guess, I am going to say, is to go Professional on CodePen.

Marie: That is true.

Chris: There are very, only a few non-Professionals on this record.

Marie: Now that is true.

Chris: Yeah.

Marie: However that is as a result of whenever you’re this good, you must be a Professional since you’ve proven you’re a professional front-end developer.

Chris: Oh…

Marie: And in case you’re a professional front-end developer–

Chris: You want the badge.

Marie: –you’ve received to be on CodePen Professional. Precisely.

Chris: Yeah. All proper, effectively, thanks, Marie. Tell us if there’s anyone you’d actually like us to speak to on this record. I hope to pluck out just a few of them.

However I offers you all a heads up. I feel that is 395. We’ll do 5 extra of those, hit an enormous 400 milestone, after which simply take slightly break on this present whereas we form of end up our huge undertaking, after which use this present to speak in regards to the huge undertaking as soon as it is prepared. So, slightly heads up there.

And we’ll speak to you once more quickly. Comfortable New Yr.

Marie: Comfortable New Yr. Thanks for listening, everybody. Bye-bye.

[Radio channel adjustment]


Please enter your comment!
Please enter your name here