Marie and I this week! Marie dug up some interesting data about “external library” usage on CodePen. In the Pen Editor (specifically), you have the option of adding external resources. These are literally placed in the Settings area and added to the end of your HTML. We’re specifically focused on these (not scripts you might add in the HTML by hand, Projects, imports, or otherwise) because we have them in a special database table — good for exactly this kind of data analysis! We’re also focusing on just JavaScript this time. We’ll look at the top 10 in terms of usage over time.
Time Jumps
- 00:32 Database nerdery
- 03:24 The Pens vs Resources table
- 05:53 Library usage over time
- 10:00 Top 10 all time libraries
- 10:40 Number 10
- 11:59 Number 9
- 13:18 Number 8
- 13:56 Forked vs original pens
- 15:35 Number 7
- 17:31 Sponsor: Whiskey, Web, and Whatnot
- 18:44 Number 6
- 21:19 Number 5
- 24:49 Number 4
- 27:11 Number 3
- 28:36 Number 2
- 31:06 Number 1
Sponsor: Whiskey Web and Whatnot
Whiskey Web and Whatnot is different than your typical dev podcast. We show a lighter, more human side of developers you know and love, like a fireside chat with your favorite devs. Past guests include Tom Preston-Werner, Kent C. Dodds, Charlie Gerard, Wes Bos, and the incomparable Chris Coyier! We have discussed everything from Next.js and TypeScript to Chuck’s past life as a blackjack dealer, favorite power tools, the best casseroles, and of course whiskey!
Transcript
[Radio channel adjustment]
Announcer: Today, on CodePen Radio.
Chris Coyier: Hey, everybody. Time for another CodePen Radio, 380, and I have Marie back in the podcast saddle. Hey, Marie.
Marie Mosley: Hey, everybody.
Chris: Hey, you know Marie is our, you know, resident data analyst (in a way). Somebody bought TablePlus from Marie at one point and it's been all uphill since then.
Marie: [Laughter] Yeah.
Chris: Which is great. It's a great little software product. It connects to our--
You know a lot of us devs use it for our local dev environment to just peek in the database. We use PostgreSQL now, and we could just see what's going on in our local PostgreSQL. You just have to poke into the database sometimes. By sometimes I mean every day. [Laughter]
Marie: Every day.
Chris: For some reason.
Marie: Yes, every single day. [Laughter] Once you pop, you can't stop - when it comes to TablePlus.
Chris: Yeah. But it also can connect to our production database if you want it to. It can connect to staging stuff. And we have a thing called the read-only database, which is just--
I think it's like a full-on -- unfortunate term -- slave of our master that's literally read only for reporting and other reasons.
Marie: Mm-hmm.
Chris: I think you always keep a hot DB in case your main DB dorks up. There are various reasons to do all this. But literally, it's also safe to just use for various reasons.
Marie: Yes. Yeah.
Chris: It can't be touched, and you can just hammer it with some weird ass query and who cares. It's not the prod one anyway. You know?
Marie: Yeah, it doesn't matter. You can -- although, for your own pride, it's not great.
Chris: Yeah. Yeah. [Laughter]
Marie: To have a query run forever, but yeah. It's read-only so there's nothing that can be done to prod. And it's also, yeah, like you said. You could just run something forever on it. It's also not far behind. I think it's only a few minutes behind.
Chris: Minutes, maybe. Not even.
Marie: So, it's not like we're working with -- yeah, it's some very brief interval in between prod and the actual read-only.
Chris: Yeah. It's some exotic AWS setup that handles all that. Cool.
Marie: Yeah, so it's never behind. It's just safer. So, yeah, that's where I spend my time. I don't write. [Laughter]
Chris: Yeah. It's weird, though, how not different it is. This is not where we're going with this podcast. We intend to talk about library usage of JavaScript stuff, so we'll get there in a minute. But it's like not any different to connect and manipulate production. I mean it's different as far as permissions and dev ops and internal stuff, but those queries you write that get and manipulate stuff--
Marie: Yeah.
Chris: --there is no difference between them and the production ones.
Marie: Yeah, it's almost like a simulation of what could happen on prod, so. [Laughter]
Chris: Yeah. Yeah. You're like enders. You're like battling the bugs without even knowing it. Whoa. Weird.
Marie: [Laughter] I don't know what that means.
Chris: Yeah, nobody does.
Marie: It's okay. Let's talk about what we're going to talk about.
Chris: In 2015 -- we're talking about databases, for one thing.
Marie: Yeah.
Chris: We split a table. We have this very massive table called pens, which is where all Pens are, distinct from projects and whatnot. But sometimes we -- for reasons that are a little bit above my database admin pay grade -- we split stuff off into tables. I think, way back when, it was probably like, "Yeah, this is probably what we should have done."
But there is a separate table, not the pens table. It's called resources.
Marie: Mm-hmm.
Chris: What this is, it's tied to a specific feature of CodePen. In a Pen (we're talking about specifically), you can open up the settings and put a URL in there that points out to a JavaScript file. CSS has it too. You can do it for CSS, and you can do it for JavaScript.
It's just a URL. Then we link it up in the Pen when you use it. The reason it's in settings is because this is a notorious old CodePen thing. You don't see the entire full HTML file in the Pen editor. You just see what's in the body. We just have this little convenience thing that's like, "Oh, I want to link up Bootstrap," or whatever. You get a URL to some CDN-hosted copy of Bootstrap. You put it in your settings, and then the Pen uses it.
If that seems weird to you, whatever. CodePen is over ten years old now. That's just how we roll, and still roll to this day.
While that data used to be in the pens table in 2014, we split off resources into its own table, and that whole table is just like what is that URL and what Pen is it associated with? You know?
Marie: Mm-hmm.
Chris: You know when you're querying the database, you join the two things to get them. It must be more efficient or something. That's what I mean. It's above my pay grade.
Marie: It's got to be. Yeah.
Chris: Yeah. It smalls up the pens table and it's probably clever.
Marie: Yeah, and also, I mean, for something like this where we were interested in library use over time, trying to run this query on the pens table would not have been successful. I would have had to break it down by year over year over year - all that type of stuff - just to even get it to run.
Having this smaller table of the resources table makes it much easier to just say, "Okay. Only give me JavaScript libraries, and give me the information about the time, which Pens they're using, all that type of stuff." It's much more efficient that way.
Chris: Yeah. So, you said it. That's what we're going to talk about: library usage over time.
Marie: Yes.
Chris: Heck of an intro for all that, but we're doing it because we have the data.
Marie: Yeah.
Chris: So, here's the caveat to the data. It started in 2015 and goes up to now.
Marie: Mm-hmm.
Chris: This is people that use that settings option of the Pen editor on CodePen. They go in there, and they put a URL in there to some external resource that they want. Notably, we help them do that a little bit with TypeAhead.
Marie: Yes.
Chris: If they type B-O-O, they might get suggested Bootstrap. Then they put that in there. Now they have Bootstrap.
When you're analyzing this, you can be like, "Hmm... What are the most popular URLs in our database?" and this is also interesting. They have a created at and updated at column (just because it's kind of the nature of a database). That way we know when was that resource put in there and what year. We can get a vibe of the popularity of libraries.
I think we're going to focus just on JavaScript, right? No Bootstrap. Bootstrap does have JavaScript, I think.
Marie: Well, Bootstrap actually does, yeah, have a JavaScript component and it's on the top ten.
Chris: Wow.
Marie: But it's not -- you know, it's lower than you'd expect, I think, considering how much people actually do use it.
Chris: Yeah, for CSS, it's so popular.
Marie: It's huge for CSS. Exactly. So, this time we are just focusing up on JavaScript. Actually, if we were to look at CSS libraries, it would basically just be Bootstrap and a bunch of fonts in terms of what would be up at the top because CSS is much more disparate.
Chris: I'm sure we will do that sometime.
Marie: Yeah, it would be.
Chris: It would be interesting to move it from the chart or something and see what else is there.
Marie: Yeah.
Chris: Yeah, okay, so we're going to talk about that. Another thing that just is self-selecting here is this is why this is kind of a slight -- even though we have a lot of data we're looking at here, it's sliced down to, for example, the JavaScript library needs to work in this way. It needs to have a URL that you can link up as a script tag and have it do the thing that you want it to do. That seems weird to say, but that's not always the case. There's a lot of libraries that were designed just to be imported as if from NPM and bundled as if a project that's running a bundler. That is a huge slide of the JavaScript ecosystem.
Marie: Mm-hmm.
Chris: While we kind of more recently do sort of kind of "support" an NPM ecosystem by way of just suggesting that you pull your feature through Skypack, which is now kind of deprecated, by the way.
Marie: Yeah.
Chris: Never fear. There's going to be solutions for you, CodePen users. Don't worry about it. It's not dead yet. It works fine. It will continue to work fine, and then we'll be kind of replacing it with our own thing.
Anyway, getting out of there, this is not looking at that style of import ESM usage of JavaScript libraries at all.
Marie: Right.
Chris: Just stuff that you link up as a script tag.
Marie: Stuff that you would pull in from a CDN. Occasionally, people would have their own copies of these libraries. Even, for example, hosted in their CodePen assets, and things like that.
Not to get too far into how this data was even retrieved, but I had to really look at URLs and breakdown the file formats and what I'm actually looking for, like what actually counts as jQuery, what actually counts as, for example, something like D3.
Chris: Hmm.
Marie: When you're looking for D3, you've got to be really careful because the two characters, D-3, can show up in a lot of different URLs.
Chris: Okay. Yeah.
Marie: To parse that all out was a little bit of a journey too. But yeah, this is all just from the external resource settings inside of a Pen.
Chris: Yeah, and so you did all this, and you data munged it and got it all ready, so we're prepared to do the top ten. Then we're prepared to do kind of like the top, year by year.
Marie: Yeah.
Chris: Like who won the year, so how do you want to do it?
Marie: Well, I mean we can just talk about the top ten of all time, which this is just tallies of every time the library appeared in a Pen. Obviously, with things like jQuery and also with GreenSock and things like that, oftentimes a Pen will have multiple libraries or multiple pieces of that library linked repeatedly inside the Pen. You only get counted once if you've done that. [Laughter]
Chris: Okay.
Marie: It doesn't inflate the numbers, for example, if someone -- sometimes you'll see a GreenSock Pen that has a whole bunch of plugins. It's only going to get counted one time for GreenSock.
Chris: Okay.
Marie: The top ten are--
Chris: Do you want to go in reverse or from--?
Marie: Yeah. You know what? Let's go from the bottom. That'll be fun.
Chris: Okay. Okay. Sounds good. What's at the very -- one, two, three, four, five, six, seven, eight, nine, ten. P5.js!
Marie: P5.js, yes. Now, that's at the bottom of the list. It's number ten, and it's kind of been trucking along at like 1% of Pens that have an external library (for some time now). But it appears to be on the rise. It might crack the 2% mark this year, which I think would be pretty interesting.
It's funny because I mentioned a couple of episodes back. Like last time I was on the show, I mentioned that I thought P5 was coming back.
Chris: Yeah.
Marie: I had not seen these numbers yet, so my instincts are good. Let me just say. So, P5 is used for a lot of visualization.
Chris: Creative coding, yeah.
Marie: Yeah, generative art and things like that, so it's having a little bit of a resurgence.
Chris: It has APIs in it that are like draw this thing here. Interesting.
Marie: Yeah.
Chris: I know -- I remember The Coding Train, that YouTube channel, Daniel--
Marie: Yeah, Shiffman. Yeah.
Chris: He used P5 all the time.
Marie: Yes.
Chris: I wonder if that helped its popularity or if P5 transcends Sir Daniel Shiffman. I don't know.
Marie: Yeah. I'm not sure. I do think that a big part of the resurgence of it or the increase in interest is probably related to generative art, and I think that's pretty exciting.
It's also interesting to see it when you see what is number nine, which is Three.js.
Chris: Hmm. Okay, which is -- blah -- not similar. But it is that it's canvas-based and APIs for drawing stuff.
Marie: Yeah, they're kind of used by the same groups of people, like generative artists also use Three.js. But Three.js is much more for 3D scenes and stuff. You'll see in the Spark, entire rooms that you can move around in or planets that you can examine the entire surface of the planet. Oftentimes, those are made in Three.js.
Chris: Yep. So interesting.
Marie: It is.
Chris: Yeah, very, very, very popular stuff. But they're related in that they have convenience APIs for drawing stuff to the Web. I mean I guess all this stuff kind of does. Okay.
Marie: Yeah.
Chris: Yeah.
Marie: Well, I mean this is all front-end stuff. [Laughter] It's one thing you can....
Chris: Yeah, and really designed to be like, "Link up this script. Then call these APIs." It's tailormade. I feel like I'm trying to caveat it and I'm not, but it's interesting in that not surprising that it's popular on CodePen because CodePen is good at that.
Marie: Mm-hmm. Exactly.
Chris: Cool. That was number nine. We're talking about number eight.
Marie: Yeah, now we're at number eight, and so that's going to be material.
Chris: Ooh... Like material like material design, Google's thing?
Marie: Yes. Yeah, Material.js.
Chris: Oh...
Marie: Yeah, so that was a surprise. I had not thought of that one at all, so that one was kind of a sleeper, and that one is -- keeping in mind we're talking about all time here, so this is from 2015 through to now -- it managed to get into eighth place with overall volume of Pens.
Chris: Yeah. Yeah, and we are talking -- these numbers -- I think -- I guess we'll probably refrain from exact numbers, but they're fricken' -- these are very large numbers.
Marie: Yeah, they're big numbers. [Laughter] Yeah, so I mean you have to realize there are millions upon millions of Pens.
Chris: Yeah.
Marie: Also, one thing that I looked at, which I was curious, and maybe this made a difference, would be forked Pens versus original Pens.
Chris: Yeah. Right.
Marie: I was wondering if maybe people were more likely to use a library if they were creating a Pen on their own versus if they were forking someone else's work. The differences were actually not meaningful, and I was kind of surprised by that.
Chris: Oh... So, you just nuked it?
Marie: In terms of percentage, yeah, it just wasn't. It would have scooted a couple of things around like a tiny bit. Like it just wasn't interesting, so I just went with the overall numbers here, which I was surprised by. I thought we'd see a difference.
Chris: Yeah, I think it's interesting to keep them in there because if you're compelled by a library and you fork somebody's P5 Pen, that says something. You know?
Marie: Exactly, yeah. That's the thing. I mean I think when we're talking about actual popularity, we do want to count in forked Pens because that means someone said, "This Pen is cool."
Chris: Yeah.
Marie: They might not necessarily say to themselves, "This Pen is cool because of this library," but they do think the Pen is cool, and so they fork it.
Chris: Material is a very wildcard on here, to me. I know that it's popular.
Marie: Yes.
Chris: It just was surprising to me to see it that high, and it has little stuff in it like you click the button and then a ripple emanates from the exact point at which you clicked on the button. To me, that's the quintessential material design look.
Marie: Mm-hmm. Yes.
Chris: I'm sure you got that kind of stuff for free with the JavaScript library.
Marie: Yeah, definitely. That's definitely the tell. Any time I click a button that does that, I'm like, "Oh, material." But it is one of those things that almost fades into the background because I think it's so common and actually kind of so well understood that you don't even think about it. It doesn't stick out in your mind.
Yeah, I was excited and kind of surprised to see that one turn up on the list.
Chris: Yep. All right. Beating out material--
Marie: So, now where are we at? Number seven now, right?
Chris: Yeah.
Marie: Yeah, D3.
Chris: D3.
Marie: Yes.
Chris: Data-driven documents, just a powerhouse, really, in the world of data visualization, I guess.
Marie: Yep. Yes.
Chris: There are probably people in the world whose whole job is just mastery of D3. I know there are whole courses. There are university courses.
Marie: Mm-hmm.
Chris: It's like a massive thing and, yeah, very much designed to just be like -- to help you build these things. It's fairly low level API. If you go to the D3 homepage, it's like, "Here is a world map. Here's a Venn diagram. Here's a trippy spiral." You know?
Marie: Mm-hmm.
Chris: "Here's a really simple bar chart." It doesn't care, necessarily, what specifically you're doing with it. It has a very broad set of how much it helps you, which I think helps its popularity in a way. "You can do anything with it!" you know?
Marie: Yeah.
Chris: There are libraries built on top of D3.
Marie: Oh, absolutely. Yeah, and it's really fascinating, and it's kind of another one that flies a little bit under the radar.
We don't have it come up a ton in the picks, but lots of people work with it kind of behind the scenes.
Chris: Ah, yeah, yeah, yeah.
Marie: There are a lot of pro members using it. There are lots of people using it for work, for really work-related things, and so it's really interesting to see it. Actually, to place as high as it did was a surprise.
Chris: Yeah. Super cool. Three libraries there. P5: canvas drawing, low-level API. Three.js: canvas drawing, low-level API, but with 3D in mind.
Marie: Mm-hmm.
Chris: D3: canvas drawing, API helpers, but specifically for data vis. So interesting to see those libraries making it all in the top ten.
[Guitar music starts]
Chris: This episode of CodePen Radio is brought to you in part by another podcast. The podcast is called Whiskey, Web and Whatnot. You should subscribe to it. I already subscribe to it. I've listened to a bunch of them. I've been on the show, so you can listen to one with me.
Really a lighthearted, fun, tech-ish podcast. They talk about whiskey, of course. That's the first word in the title of the podcast. They literally ship the guest a whiskey. They talk about it. These guys know what they're talking about with the whiskey. It ends up really adding to the lighthearted spirit of the show. Really enjoyable stuff.
The two hosts, Robbie Wagner and Chuck Carpenter, they have a lot of experience in the industry. They build lots of stuff for clients. They come at it from lots of different technologies. Have very interesting and storied careers of their own in tech, and they're still interested in it. They have their strong opinions that are informed by a whole career of working in tech. Lighthearted, really good stuff.
They have lots of different guests from all areas of Web development. They've had Tom Preston-Warner on and Kent Dodds and Charlie Gerard and Wes Bos and me, for example, talk about all kinds of different stuff.
Anyway, I'll just leave it at that. Go look up whiskeywebandwhatnot.fm or click the link from the show notes, and just give it a listen. Give it a subscribe. It's a good show. You'll like it. Bye-bye.
[Guitar music ends]
Chris: Right above it is Bootstrap, so you're right.
Marie: Bootstrap, yes, it's on there.
Chris: Bootstrap makes an appearance in the top ten, and it's like, "Oh, I'm using the CSS for Bootstrap, but I want the modal to work," or I want the tabs to actually change tabs or whatever. You'd just include the Bootstrap JavaScript, and then those things automatically become functional. I think it's like if you use these tags or these class names, the JavaScript just kicks into place.
Marie: Yeah.
Chris: It makes sense.
Marie: I mean Bootstrap is just such a workhorse. People use Bootstrap all the time.
Chris: Right.
Marie: It is a very, very powerful library, so it makes sense to see it where it lands here on the list.
Chris: It should almost -- you know. We should have almost done, like way back in the past. If you added the CSS, we should have popped something up or something. "Want to add the JavaScript too?" [Laughter]
Marie: Wasn't there--? I feel like there was a thing about that back in the old days where it was like--
Oh, I wish I could remember what the problem was. There was some kind of thing with how we recommended.
Chris: It rings a little bit of a bell.
Marie: Yeah, how we recommended Bootstrap, but I'm talking -- I mean this is like 2016 or something, so that's ancient history now.
Chris: Yeah.
Marie: Ah, well. [Laughter]
Chris: We did have to jump through hoops many times in CodePen's history to make sure that Bootstrap was doing the right thing. Like there was a moment at which a beta of a new version came out and it started kind of suggesting that by default.
Marie: That's what it was. Yes. Yeah. [Laughter]
Chris: And people were like, "No, it's too soon. Show me the old one."
Marie: Yeah, there was a version jump, like a weird version jump from our CDN. Yeah. I do remember that. Yeah, that's the thing. I mean that's how you know a library is huge when you hear a lot about it in support. A little change goes out, and it brings up a lot of tickets. That means tons of people rely on it, and so Bootstrap is absolutely just like a beast. [Laughter] It's huge.
Chris: It's a beast. Yeah.
It's interesting to be in the library of a library that you then don't really use.
Marie: Mm-hmm.
Chris: You just include it only.
Marie: Yeah.
Chris: I think that may be the only one on this list that's like that where you just--
Marie: Yeah, you're right.
Chris: It's just there.
Marie: Yeah, and like we were saying at the top of the show. If we were to look at the CSS externals, I'm positive that'd be number one. Although, okay, well, I'm like mostly positive [laughter] it would be number one based on what I saw preliminary stuff. When I was looking at just resources in general, it came up pretty high.
Marie: The next one is a real interesting one, GreenSock, GSAP, the GreenSock animation platform. Right?
Chris: Mm-hmm. Yeah. Sometimes called GreenSock, sometimes called GSAP.
Marie: It was called tween--
The thing that was coming up the most in the early days was TweenMax, which has been rolled into GSAP 3, so that's part of the whole thing now.
Chris: Right. I think that was the library that was like, "This is just everything, so just use this if you just want it all."
Marie: Mm-hmm.
Chris: And I think there was TweenLite or something that was the version that just didn't have as many bells and whistles or something.
Marie: Right. Yeah, so that's a big one, and that one is on the rise. We'll talk a little bit more about ones that are on the rise.
Chris: Oh, interesting. Yeah. Yeah, we haven't done that very much, but feel free to get into it.
Marie: Yeah. It's always been in the 4%-ish range. Sometimes it would go a little bit higher. But from 2018 forward, it started to really climb where it was at like 5%. Now, in this year, keeping in mind that we're only halfway through the year, it's in 8% of the Pens that have a JavaScript library, so that's a pretty big climb when you consider--
Chris: Oh, if you have a library. Okay. It's not all Pens.
Marie: Yeah, not all Pens.
Chris: But if somebody chooses a library, yeah.
Marie: Yes, if it has a JavaScript library, and that's everything here. All we're talking about here is Pens that include a JavaScript library. There are tons and tons of Pens that have nothing at all.
Chris: Yeah. Yeah. Yeah. Okay. Interesting. On the rise very consistently from 2018. GSAP was absolutely around and fairly big and popular then.
Marie: Yeah. It was, yeah. I think that the new releases that they've had more recently have increased their popularity, and I think they're putting more work into getting the library out there.
Chris: Yeah. Interesting. I think that's true, and I think that while they have modernized a lot and you can absolutely use it, I just did it yesterday, I think, imported GSAP into a project I was doing, like a side thing, that wanted to use it just kind of like with a bundler. I just wanted to import GSAP from GSAP, like you would anything else from NPM, and it worked great. It was perfectly fine for that.
People can still do think of it as just like an old school, just link it up as a script tag and use it - kind of thing.
Marie: Mm-hmm.
Chris: Yeah, obviously CodePen does that exceptionally well. I don't know. Maybe that just hangs on. It's both modern and whatever. I don't know what I'm trying to say.
I guess its popularity doesn't surprise me knowing that they work so hard on it.
Marie: Yes. Yeah, it keeps getting cooler. I think that their community, as it grows, just becomes more just higher profile. You know? And also, we have a pretty good relationship with them. CodePen has a good relationship with them.
They also have their plugin library available through CodePen, so you can try stuff on CodePen that is actually part of their paid suite, so I think that that's just kind of part of the reason it's growing. But I mean it just keeps getting cooler. Every year, every time they release something, it just keeps getting cooler, so I'm not surprised to see it on the rise. I actually thought I would see it a little bit higher up on the list, but it's in a good spot there, number five.
Chris: Yeah. It might be certainly rising.
Marie: Yes.
Chris: But the competition it's up against is, to me, not terribly surprising.
Marie: Yeah. It's ferocious competition up top here, yeah.
Chris: Yeah. Beating it is Angular, which is interesting to me.
Marie: Yes.
Chris: Especially because it just had some big early years, I think.
Marie: Uh-huh. Yes.
Chris: The only version of Angular that works on CodePen is Angular 1. That's how it was designed. It was designed to be linked up as a script tag, and you just use it. Then from 2 onwards -- and what are we at, 13 or 14 or something in Angular now?
Marie: Something like that, yeah.
Chris: It's just very different. It's very matured. It's just a very opinionated build process, file system, everything. It's just a very, very, very different thing than Angular 1 ever was. It's almost like two different -- they shouldn't even share the same name practically. So weird to see it at number four, but it shows that it's kind of a sleeper library still, you know.
Marie: Yeah.
Chris: Google makes it, so.
Marie: It had a very big year in 2016. It was real high up there in 2016, of all years. Then after that, it's actually been on a decline. But just those couple of years, you know the last half of 2015 and then 2016 and some of 2017, it counted for its position at number four on the overall list. So, tons of Pens were getting made with that in those earlier years.
Chris: Yeah.
Marie: It's one that we've kind of hoped we could support in a better way. We just never synced up with it right, but it's interesting to see it come in that high when we're talking about all-timers.
Chris: Yeah. Now that I'm looking at this more clearly, they call it -- because I was just like, "Let me just -- I want to see what version it's at." I was just going to Google it really quick, Angular.js.
I put the JS on there thinking, "Oh, isn't it just called Angular.js?" Not to modern Angular people, I don't think.
When you say Angular.js, I think what is implied is that that's the 1.0 branch of it.
Marie: I see. Yeah.
Chris: If you go to angularjs.org, it shows you a script tag CDN-hosted version of how Angular works, which still works fine. I wonder if there's still kind of happy users of that really basic, old-school Angular.
Then just the thing, Angular without the JS on the end of it, that implies the new, fancy, more of a meta-framework situation.
Marie: Yeah.
Chris: If you say Angular.js, it means the CodePen--
Marie: It's the old time stuff. Yeah, CodePen friendly.
Chris: Applicable one.
Marie: [Laughter] Yeah.
Chris: Mm-hmm. So, speaking of libraries that were designed clearly to be used in the browser, I remember talking to Evan You on ShopTalk Show about Vue and how it was very much part of the design decision of Vue all along that, sure, you can use it with a bundler. Of course, he goes on to create Vite and all that popularity, which is absolutely a big part of the bundler world today.
But Vue itself, to this day, even Vue 3, can be used just as a script tag right in the browser, very CodePen friendly, and friendly for sites that want no build process whatsoever.
Marie: Mm-hmm.
Chris: Vue comes in at number three.
Marie: Yes, and its biggest year was actually in 2020. After that, we added in the Vue editor, which created a situation where we actually can't tally it as a resource.
Chris: Yeah.
Marie: I think, potentially, if we had another look at it--
Chris: The only reason it went down is because -- [laughter]
Marie: I'm positive of that because the separated -- the Pens in the separate Vue editor are their own whole world, and so that's something we could drill into a little bit more closely if we felt like it, but it's still placed at number three.
Not to give away numbers or anything, but it wasn't going to be close to number two and number one, which are massive. So, we'll get into those.
Chris: Oh, is that--? Oh, yeah. I see. The charts leave a lot of room between the bottom.
Marie: Yeah. [Laughter] Yeah.
Chris: We've said their name, I think, in the show already, so I don't think there's a huge surprise what number two and number one are going to be, especially after you hear their names. What's number two?
Marie: Number two is React, and that has been in second place every year since 2017 when, actually, it took second place away from Angular. And, I mean, you know, some of that is based on when libraries came out and stuff. But yeah, that's when they crossed the line, overtook Angular, and became number two: React.
Chris: Yeah, very super popular.
Marie: Mm-hmm.
Chris: High up the line there, especially -- I don't know. I don't know what I mean especially by, but not a big surprise except for that, to me, React does work at a script tag but it's not -- I don't know.
You know? I feel weird even saying it because, until recently, there was a lot of links to CodePen examples in the React docs.
Marie: Mm-hmm.
Chris: I think since they've redone them, they've kind of gone a different way with some things, which is fine. Whatever.
Marie: Mm-hmm.
Chris: Which is kind of proving against what I'm about to say but React doesn't seem super designed to be used in that way. It just can be, and it's nice for little demos and stuff. Thank gosh because people like to do that on CodePen.
Marie: Mm-hmm.
Chris: I do that. I think it's useful in that way, but the core usage of React, the library itself doesn't beg for that kind of usage. I think it's meant to be bundled. But whatever. It's still extremely super popular.
Marie: Yes.
Chris: The fact now that you can copy and paste an example where, at the top of that example, it says, "Import React from React," because it's assuming that you're using a bundler and you're pulling React from NPM, CodePen will suggest to you, "Hey, you should pull React from Skypack," and we'll even just replace that. We'll just do it for you.
I think that's a big deal and the fact that then you can write in JSX too because all you've got to do is flip on Babel and CodePen. Then the way that you're writing React on CodePen feels pretty much identical to how you'd write React anywhere else. I think that really helps CodePen's usage of React.
If we didn't do as much as -- if we didn't make that possible on CodePen, it would be way further down, I think, because people would just be frustrated that they couldn't use React. React is fricken' huge.
Marie: Yes, it is. Absolutely. No question about it. But not as huge as number one. [Laughter]
Chris: No!
Marie: No.
Chris: Which is fricken' funny.
Marie: It is.
Chris: And it adds to the industry-wide conversation about this library, which is jQuery.
Marie: Yes, jQuery.
Chris: Dominant, right?
Marie: Yep, it is, and that's, I think, in a couple of ways, completely makes sense to me, especially when you consider, in the early days of CodePen, I think most of the time when people were trying a JavaScript library, it was going to be jQuery, I mean in the very, very early days of CodePen.
But then, over time, people just use it. It's not maybe the cool thing anymore. There are certainly other things that you can do besides use jQuery. I think, in a lot of cases, the things that it does or that it was mostly used for, you can already do them now in CSS. There are ways to handle it in CSS or even vanilla JavaScript things became available in the browser and then you don't necessarily need what jQuery was doing, which was to smooth out all those rough edges of the browsers.
Chris: Right. Right. There's almost nothing. I don't think there's almost anything left in jQuery that the browser didn't just steal in some way or another.
Marie: Right. Exactly. That just tells you -- I mean that tells you how innovative jQuery was.
Every time it comes up on the show, I'm always like, "Oh, jQuery was great," because it was. It still is, clearly, when we see how much people are still using it.
Chris: Still at number one. Yeah.
Marie: It's still number one. That's the thing. It is still number one. But again, like we were saying, we're only looking at things that are linked externally, like an external resource in the settings.
It also is moving downward, and I think it will be overtaken, but not yet. Not yet.
Chris: Yeah. Most of these are moving downward.
Marie: Uh-huh.
Chris: Except GreenSock. [Laughter] That one is up.
Marie: Yeah, well, that's the thing. We do have a couple that are on the rise. But part of what's happening also, not just that libraries are being overtaken or swapping places with each other or anything like that, the use of external libraries is going down just generally. So, we're kind of--
I think, in a way, we're sort of looking at a history here more than a prediction for the future. You know?
Chris: Right. Right. Right.
Marie: Also because, you know, in the future, things will work differently on CodePen too, so this kind of feels like, to me, this episode right now will be kind of like a time capsule that shows how things stood right now and a look into the past, which I think is valuable because we come along way as front-end developers. And we have all these new things available to us, but some of these old-school things -- you know Bootstrap, jQuery -- they're still with us. We're still using them, and they still show up in day-to-day work.
Chris: Yep. Very, very interesting.
Marie: Yeah.
Chris: I'm going to remember this, too. There's one -- there's a thing that comes up pretty regularly as a general industry conversation kind of thing that's about -- because this kind of jQuery versus React or framing of the two and how to compare and how to think about them because they're so wildly different has existed since they both were on the map at all in developers' minds because they're just so different in their approach to literally everything.
Marie: Yeah.
Chris: You can compare them in some ways. You can't compare them in other ways. Now we're at this spot in the industry where React is so dominant when you look at it from particular aspects like I'm looking for a job. What are the chances that the job posting for a front-end developer says React in it is really weirdly high.
Marie: Mm-hmm. Yeah.
Chris: Like most jobs are going to say it in some way, and the chances of jQuery being in there is really low. You know? Nobody is hiring a jQuery expert kind of thing. You're like, "Well, that's one interesting framing." But it's a framing that really matters to people because it's one of those like putting food on the dinner table kind of conversation.
Marie: Mm-hmm.
Chris: Then there's like, let's look at how much people talk about one or the other.
Marie: Oh, yeah.
Chris: You don't see a lot of blog posts about jQuery anymore.
Marie: No.
Chris: You still see plenty of React stuff. Although, is it diminishing a little bit? It just may be. What's happening there?
Then there's another one. Let's say you weren't just looking at CodePen data but were looking at really generic data of HTML documents across the Internet.
Marie: Mm-hmm.
Chris: If you do that, jQuery is still just trouncing React.
Marie: Yes. Yeah, of course.
Chris: As far as usage, right?
Marie: Yeah.
Chris: But that's a complicated one because it ships with WordPress, and WordPress is so weirdly dominant, so how many people are actively writing jQuery on those websites?
Marie: Right.
Chris: Whereas if React is on a website, it's actively being constructed by the developers that are building that site. it's not just present on the site like it might be--
Marie: Yeah, it's not just going to float along with it. You're right. Exactly. It'll be in a WordPress install or lots of other site builders tend to have it built in.
Chris: But now I question it because I'm like, look at how many people are -- there are no defaults on CodePen. There's no -- we don't guide you to any particular template.
Marie: No. Yeah.
Chris: If you want jQuery, you have to fricken' pick it. And to still see it being this popular in a way that actual human being Web developers start a Pen and then go choose jQuery very on purpose is still very high. So, to say that jQuery is absolutely not being written, it's a forget-about thing, it's only popular on websites because it's a ride-along, et cetera, I start to question that a little bit. I think there is a lot of active jQuery development.
Marie: Yeah. There must be. There has to be. These numbers tell us that it's happening still. I do think that a lot of the time when you response to a survey, you respond to a survey when you're talking about the thing that you think is cool, like a survey that gathers, "Oh, what are people working with these days?" You know things like that.
You're going to say what you want to be known for doing. [Laughter]
Chris: Hmm... Yeah.
Marie: You know? If you're wiring up shopping cart buttons with jQuery all day, you're probably not talking about it a ton on social media or talking about it in a survey.
Chris: I see. Yeah.
Marie: But it'll just be what you're doing, and so perhaps it's not as glamorous as it used to be but it's clearly in use, and that's what I found interesting from this exploration. I'd like to dig in further. I'd like to find ways to parse the data that's inside of these code panels and give us an even better view into what's really happening. I don't know if I'm going to tell you all about that, audience. I'll tell you, Chris.
Chris: Hmm...
Marie: We work together. You know what I mean.
Chris: Okay. Yeah.
Marie: [Laughter] But that type of information I think is going to be really interesting to have in the future. Yeah, behavior versus what you talk about is very often two different things.
Chris: Yeah. Yeah, nothing worse than self-reported data, and that's not what this is.
Marie: Yeah. [Laughter]
Chris: Yeah.
Marie: No, this is just raw, straight out of the table. This is just what's really happening on CodePen, and I think that's been real interesting to take a look at.
Chris: Yeah.
Marie: jQuery, it rules. It still rules. Congratulations to the jQuery team. You guys still rule.
[Laughter]
Chris: Yeah. Bring back jQuery Conf.
Marie: Yeah, sure. Let's do it. [Laughter]
Chris: All right. Thanks, Marie, for all the data. We'll put some -- I'll put whatever we can in the show notes.
Marie: Sure. Yeah. Thanks for listening, everyone. Bye-bye.
Chris: See ya.
[Radio channel adjustment]