Getting jQuery’d × Honourable Deaths of libraries We Don’t Use Anymore

Like a lot of the things we talk about today, there still are some useful features doing things like rooms where you can, like, have a room of people who you can broadcast to and

And it's kind of funny to look back at it. He's been involved in so many really amazing I think it was in 2016, and you can use it with the stuff that you're already using.

and whatnot. But

for replacing your fonts.

stuff. Mongoose? He he was involved in MooTools a lot. Yeah. Slacking? What's Slack? Going way back in his GitHub history here. But yeah.

Siffern. This is just a funny one. As before we had web fonts, you could use Siffern to replace them with Flash. I remember that would blew people's minds. How to get that custom font. And it's not an image, you know? Yeah. And then I thought we'll talk real quick about

Oh, Slackin was public Slack Oh, yes. Signals. Yep.

the Inman Flash replacement So yeah.

had a bunch of features on top of it. But Honestly, why not a lot, but there's there's several big things of working with data, Is it TJ Holotruck? No. Surprisingly not. It was,

We can just use web fonts. I mean, there's a countless list of of things that we used to have to reach for.

what do you think Will be the next things that get Jake Gray'd. You know, I think the next thing that everybody who's been listening to the show for a little bit will think of stuff. Will be date libraries, date anything involving dates. For a long time, it was like moment. Js was the one, and then date f n s came out because It was an ESM based, and you could pluck out just the stuff you need instead of loading this massive library for it.

In in that case, Flash to do

has been a dev at the forefront a lot of this JavaScript stuff from day 1. You know, like, I wonder what else what other

Sakurai Oh! Died like a valiant death. Stuff. If I if I were to say, hey, because

an implementation of WebSockets that fell back to polling and

I don't.

you know, we used to have to do images for border radius and things like that, but like Coupon or a scalable Many times using a grid system. But nowadays,

of him sort of explaining it and whatnot.

But

organizations Yeah.

JS, Which,

I remember when I first saw this landing page. So this landing page for acquire dotjs that's when I started really understanding JavaScript

Essentially,

and data, you know, doing deep clones and whatnot. We still don't have deep clone in JavaScript. But if it's a top level clone, which is almost always what you want Yeah.

we had,

And you can tell it's that you with use with Node, with use with jQuery,

direction Take these standards and sort of fill in those features middleware, Hano JS.

as a young JavaScript developer reactivity

why would I ever need something like this? Why would I never ever need a module loader

anything.

in JavaScript when I can just Copy and paste my code into a file and just have it working. It felt like such overkill, but this is JavaScript

event stuff, grids. Yeah. It's actually kinda nice that you can might be a little bit different, but.

a super duced, you know, like I'm not sure if I would install something for that. Yeah, that's amazing. But like Lodash

Bubba, been paying attention to know that, the debounce and

Throttle. He bounces throttle. You saying that you couldn't remember it, it removed it from my brain. I could I could see it. I just could not say it. And also, like, spreads. That was a big one.

debounce.

Like Lodash had a lots of copying

And just really truly thing feeling like, replacements of fonts or images replacing fonts. You can now just use web fonts. Do you know who made Socket. Io?

there was a very popular NPM package called Left Pad, and and or Just is one that we talk about a lot on the show.

which is on And it was all Everything came crashing down. I'm pretty sure as Brian LaRue stepped in and really grabbed the name on NPM and published it, republished it just to get everybody's bills back and running. But now you're no longer allowed to on some sort of library that accepts a request

And based on Routing, route matching,

that's the house of cards we've built

the entire ecosystem this episode named Express is Dead. Long live experience. Not worth it, you know, just the next one. We don't use that. Did you ever write your own jQuery plugins?

delete something off of NPM,

Everybody was freaking out, and it was like a Friday afternoon and everybody's builds were breaking because And the like convenience methods of returning JSON

I have Wes, right? implementations.

Some people don't like, but also

Wes has 3. I want it to be 6 letters, right? So you have to pad however many letters And maybe people are just like, you know what? I'm not very bizarre

was all dependent on this one, probably in JavaScript. So maybe something like RxJS and libraries that are based on observables

he just nuked it. He just took it off NPM. And at that point, you were allowed to do that. You're allowed to just delete packages on NPM. And

Or you can pass it

object. Groupby and map. Groupby. I'm using it in the new syntax website. It had to polyfill it because it's not there yet. It's Not in any browsers yet, but you can polyfill it. No problem.

in like a reduce. You can do it in a But there's always just like there's so much of like that overhead of checking if it's null and if it's not there, then create a key. And sometimes it's easier just to do it. Now we have terminal as a response Highly used library, and now we have I'm trying to look at the list. If there's anything in here I would still reach for, Shuffle like 6 lines of code.

in JavaScript now. That was something I always reach for like right URL params.

Most Of those common use cases

You probably still will need to reach for some of the stuff that lives in Lodash like that's a one liner something like

But most like common use cases

Working with objects, arrays

a library for because It was kind of annoying to have to write your own group buy in, Yeah. I had written

and working with events, things like delegation and whatnot.

are so doable in vanilla JavaScript that you don't necessarily have to go off and reach for

a library like we're getting groupby

You don't necessarily need it.

different get and post All the error constructors sort of under the hood. Yeah.

endpoints.

is that

very basic, but it was it was one of those things where you're just like, oh, yeah. Okay. This is all easier than I thought. Exactly 1 of the Sorry, 1 more thing I want to say about the jQuery thing, and this is going to be something that we'll be hearing throughout the episode is that and I'll throw in

like if you have something that can accept a DOM element right now, whether that is like a React hook or whether that is a web component or whether it's a Svelte plug in or whether it's an animation library.

The fact that it's all just there's a lot of like tech, whereas like if I were starting something new today, I probably wouldn't pick that tech because I was still Cool.

other 603 Dude, I loved that. We gotta have we gotta have Nathan on on the podcast, actually, because And then they they just give you the request a response object, as well as a couple of convenience methods for doing things like specific implementation a headers object,

that was the means of fetching content

scary things

Svelte land and web component land where,

is beautiful because then there's less glue that needs to be written. And we're starting to see that in

We're actually very simple, and they were easy to author. My my first one was called the DTF. It was down to fade, and it was a jquery plug in that just faded in, like, your elements on your page. So when your page loaded, the elements would fade in, and it had, like, options common JS, before we had, Like the, dance.

you are no longer confined to a jQuery plug in. And it's just a DOM element, meaning that the request object, are So there is a module split list into 2 arrays, one whose elements satisfy justify predicate and one whose elements do not satisfy And again, it's not because.

dumb elements at the end of the day a bit of a history lesson and

The beauty of standardization like stooges.map Lots of things, specifically Hano JS is my favorite by far.

Ajax request used to do Ajax through jQuery as, The Hey. Before you get it going on, let me turn that question around to you and ask you, when do you think the fur because I have the answer here. Jeff. When do you think the 1st alpha was released of Express 5?

However,

The these Jake worry plug ins that I had thought in my mind were these big, complex, Because you could just do some really nice and easy functions to do all of your grids. That was by Miriam Suzanne

from somewhere else. And it could be XML or whatever at that point in time. You know, we we weren't doing the whole fetch a a JSON from an API a whole lot.

sequentially and stuff. It was very it was very, libraries did he build? MooTools? He well, no. Not MooTools. He looks like I'm just looking at his, oh, And this has allowed you to have a grid system. You could also So build your own custom grid system with this.

3 things here is is how to use.

To me, this was this was one of those ones that felt like truly the The beginning of

you know, we we got those,

features in Node first is common JS, and then we got and do all these really awesome alignments

a bit of a funny story.

Wow.

around the same time as, like, backbone or any of those things, and and it just felt like, the 1st beta release was 2022.

This is a a whole new world where you're writing real software.

not had too many struggles with but probably have, you know, been upset by at some point here.

Yeah. Next 1 we have here is Left Pad. This one is

the import syntax that you know and love and have hopefully

those features now in the browser and everywhere as JavaScript modules or ESM,

the next level of JavaScript

The standard in the browser and on the server is the the fetch API. So but I think a lot of people get into trouble when they

No way.

The most recent alpha or the most recent beta one was 2022.

And the beauty of that is again, it's Standard on the from the browser and on the server. It's standard across lots of different

If and when I do make a jump, it's not going to be from Express 4 to Express 5. It's going to be from Express 4 to to write

meaning that has gone a little bit more in the a function in one of these frameworks. You can move it over to the other frameworks And those things are not. I'm not using them because they're bad. I'm using them because system if signals end up being part of the browser. Right? Yeah. All right, that's it. Shout out to everybody who worked on these libraries and whatnot. I thought we'd give them not an I don't even know what to call it, not an honorable death, but stuff. Just it's beautiful that we don't need these things and they were worked on for so long. Now we have them in the browser and on the server. Yeah. I I it is

like that's not part of the web standard. You know, a server is not part of the web standard, at least not yet. Maybe it will at some point, just Throttle.

And I'll I'll link up the, the PR. I'm gonna say

but by ID.

So whether you're in Deno, a webworker, And what's the other one that I always mix up? You can take

but.

about 5 years. It was,

sending JSON stuff. We don't necessarily

Here's the, yep. Wow. Alpha one.

You're, if it if it's ever going to come out at all, man, if the first alpha release was 2014 And in fact, I've used it before via polyfill, But what else do we have? Maps and sets take care of a lot of like the interesting data use cases. If you look at the the low or the underscore docs, which I haven't been here in quite a quite a little while, like, the lead off methods are each you know, why not use Next. Js and get a server for free

That's a long time. Yeah. Yeah. And I don't know. Maybe it was They decided it was, like, too big of a a jump for people, and, like, like, Xero four has sync away support.

But what else does Express give you? It gives you routing, you know, URL pattern matching. It gives you like convenience methods till we're blue in the face which is hilarious that the entire like Like how much damage did that 1 guy do by simply just deleting 6 lines of code? So now obviously we have that in string. Pad start.

the fetch API introduces

for sending JSON, like with fetch request response,

Get elements by class name, get elements by tag name, get element here, from a endpoint is is kind of a pain because you have to set the headers and I'm not going to move that anytime soon. But

the means in which you could select DOM elements was not nearly as elegant as, we don't necessarily need it like a lot of things on this list. Yeah. I think the only time I use socket. Io was in a Code Cool course. CodeSkull is a really, really great learning resource back in the day. And and along the lines of the CSS stuff, there is really too many things to list For all of the new features, whether it is, a lot of features Added to the browser. Why can't we just have jQuery in the browser? Well, here we're here to talk about things that have been added to the platform to make it so that We don't need to use libraries or maybe as many or heavy of libraries as we did in the past. My name is Scott Talinski.

what what are the other selectors we now have for for getting down elements? I'm I'm blanking on them off the top of my head for something.

ease of use in selecting DOM elements.

you know,

Before

jQuery existed, Many of reasons why people use jQuery were for, 1, browser compatibility.

Mhmm. 2,

get element by ID or or, modular script loading before fetch is not only here in the browser, but it's here on the server side. And we have a lovely mechanism for fetching just about anything

is using jQuery, jQuery, jQuery.

in web development that are no longer as highly used, no longer as popular. I'm not going to say dead. My own And there's no features that I am missing. You know, sometimes there's nice little API improvements and whatnot, but It's just not necessary to do that type of thing. There's jQuery still extremely popular because there's a whole backlog of websites that are built with it, and

I'm a developer from Denver. With me, as always, is Wes Bos. What's up, Wes?

[email protected].

are much better now. Standardization web streams.

that conversation was had so many times. Why can't we just add jQuery to the browser? Everybody

browser primitives built ins

error and exception handling because There's no way they can add that to the browser, so I think we're safe there. And if you need error and exception handling, you you wanna make sure that you can find all of your bugs if they're happening. Check out

what that means. Oftentimes, for a long time, people ask to get

Welcome to Syntax. On this Monday, hasty treat, we're gonna be talking about

Not too much. We've been thinking about this episode for a while. And I initially had NPM called Left Pad, which is Essentially, if you have a string, let's

Boss, and Scott, El Toro Loco,

Getting jQuery,

Tolinski.

The more I got into it, the more I was thinking about like there's a lot of before Discord.

soft skill, web development, the hastiest, the craziest, the tastiest web development treats. Coming in hot. Here is Wes, Barracuda,

the standards are much better than when I chose that tech in the in the past. Totally. You know what's not gonna get jQuery though is

Monday. Monday. Monday. Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing,

Existed. There was 9, 9 60 GS. Let's see how many Where your item existed in a grid, you'd give something a container and how many columns it had with a container underscore, let's say 12.

making it truly custom.

And now with subgrid, you can have that grid populate down into children jump. Maneuvering for doing accordions

And they had sketch sheets that you could print off.

The actual CSS.

hey. Why do you need a grid system with full of classes, full of grids, Where you can build your own custom grids that are not only,

kilobytes 9 60 GS is. Let's see. The big old download button, let's Click that. The zipped version of it

Next level. This is next level, and this is you know, those of you who who use Tailwind know, the way you define Late 2019. You are off by

megabytes, but there's no way that that's the size of the CSS.

like, the last 2 days. For doing sprites? Yeah. Oh, yeah. Next up is socket dot I o. I never got too much into you know, evolved past socket.io? Yeah. Socket.io was was still popping. Wes, do you wanna talk about how WebSockets, November of 2014.

a full on nice grid system when you need to use it, But can be fully responsive even with just one line of CSS,

And then there were some other helper classes like alpha and omega.

Then if you want a grid column to start at the left side and go from 1 and span 7, you do grid underscore you know, jquery's whole slide up and down,

this was episode

And that was such a the classic way of doing it is like I remember once I understood that, oh, you can use a library like Underscore at the time However, for a full archive of all of our shows. And don't forget to subscribe in your podcast player

it's amazing if you look at the collections. So So that's that's working with like arrays. Yep.

yeah. I don't know. I don't yeah. How often do you need to randomize an array? I think so many times now I would just go to,

is maybe one.

do all of those concepts, seven, and it would span that length.

c just. But Yeah.

just Angus is 4.2

we would want, now we get to have. This is but that was like a major enlightenment a moment in my career realizing what those were. Yeah. That was a huge deal for me as well in that same way where I just remember being like, let me We're proudly presented by Century over here at Syntax. So let's check it out. Let's talk about the things that have been Added to the browser. And in jQuery, honestly, it it feels like

How many of them have landed in JavaScript? How many of these are in

a little bit more. But then once that it got added obviously to the browser,

JavaScript? Like like a pluck. If

Stuff. We don't have shuffle in in JavaScript, do we? I don't think so, but I've of like Lodash does so much. They do a lot of like,

I mean, underscore was was everywhere. I mean, it was baked into so many of the libraries and and Tools that you use just because it was every single utility that

Just Copy paste. Yeah. Copy paste. Right? You can see exactly how they do it. And partition, And then we got things like Bootstrap that had a grid system. There was all sorts I I remember very clearly,

stuff. So much easier.

There's always some res. Json and throwing it an object, and it will do the headers and the status codes and all that good stuff for you. So, It's not that big of a deal to move off of jQuery, and all of that good stuff around building an application. Right? And we've had Express 4 for a very, very long time, and Express 5 has been in beta for, Grid system

which is a micro web

So fast, it makes you dance.

Stuff. Even URL,

And

of things. So, yeah,

they're fairly standard, right? Like, I'll say, like, 95%.

routes in

again, all of those things requests and responses,

Server.

uses something called Polka,

So, yeah, seems like it's pretty small and uses the express middleware style

in probably a couple of minutes.

And this is, 50% 30 33 to 50% faster than Express.

or SvelteKit.

If you're using React, And if you don't come from that world, you might not have actually JavaScript projects.

to the framework where they add on properties to the request in the response the developer, 1 Friday afternoon,

Ninety lines of code.

highly perform Express alternative. That's beautiful because, yeah, like if you aren't building a server from scratch with something like Hano, you're probably using

Lodash with this as well.

or Svelte and you get SvelteKit for free? And And I don't know what all of the different ones you use, to be honest. I know SvelteKit

And not necessarily even a browser thing, but, you know, one of the The big reasons why many people aren't turning to something like Express nowadays is because we have all these meta frameworks.

I I do not know. I I to be honest, I I don't even know the difference between version 4 and 5. That's how long it's been since I've looked at Express.

probably Vercel does so well is that it's Guillermo the predicate. So you can list. But again, that would probably be

since Yeah. It's about 10 kilobytes. It came with, like, all the Photoshop it broke NPM itself. It broke React. I remember, like,

it's been in beta, and I don't know if it will ever come out because

I wanna say, need those things anymore.

It handles routing And we have Scott, right? Scott has 4 letters.

Express for people that are using it. I'm using Express for it's literally good enough for absolutely every single thing that I want to do.

what would you guess? How long has Express I've been in beta. I'm gonna be real with you. I have not looked to express in quite some time, so

Yeah. Exactly. So Now we have a lot of these nice built ins. You can traverse the dom with

next element sibling, previous element sibling,

what a jQuery plug in was,

like a slider or something like that where

a couple of them. I remember, like, having, like, major enlightenment

You can have an options object. I was like, Oh, wow. Like, so you mean

plugins that are based on jQuery. It's just not at that point. It's not worth next or remix My whole course empire runs on Express, the response object,

and Next 1 we have here is Express.

that all this code that I was writing, And this is not people always get like a little huffy when you talk about this type of thing.

is still better than what we have anywhere else, honestly.

there are libraries out there, but for a lot of people, it's like, well, You're going to spend all this time to migrate and it's going to be the exact same I think it's probably been like 3 or 4 years

early dev,

I can just put that into a plug in and make it reusable. And Web standards, right? And what are the standards that are replacing Express? Well, like not all of Express is replaced by standards, but replying with JSON or throwing an error that has

When I realized

Well, it kind of was

added to the browser

just without the fancy dollar sign syntax.

grid system, you know, like all these in CSS. And I think we sort of realized

which was a SaaS based grid system is it's got a target and an arrow. It's got these really great colors. I remember seeing this

It's it's pretty good on its own. My favorite grid system was Susie, to be JSON. You have to JSON stringify it yourself, and that's a lot more work than just saying

Flexbox and Grid came out, there was a big rush to make, like, the next

who we've had on the show before. That was such a a really nice thing because it took your grid system out of classes. We no longer have to rely on dumping a bunch of Classes in our CSS to do a grid system. You can do it right there in the CSS with Susie, so that was a nice thing for me. Next up, Sass and Less and all those

frameworks. Obviously, CSS nesting variables. I think we've talked about this You need to get up to 6, right? That's what Left Pad does.

over over the while, like you don't need a grid system for your grid system. You don't need like some CSS on top of it.

And everything without having to import a ton of CSS to do it. Yeah. I remember when hey. You know, you don't have to ship all that code for use with Dojo. The fact that they put Dojo as one of their your your entire

Is it it's possible that it could come to the browser. And in fact, You know, I think that was one of the reasons why Svelte has decided to move to signals is,

stuff. But slowly and surely, all of the things that we know and use and love, we had to go to user land for will be available at our fingertips

us having to install something. There it goes, just in the browser, in the engine. Love it. Alright. Peace.

or drop a review if you like this show.

will go by the wayside because we have them.

There's also a, signals Here, I'll I'll paste it in the Polka. I thought I said polka. Polka.

Head on over to syntax.fm

everybody just used

now

So Express is the Node. Js server. It handles requests coming in data going back.

because it was so much easier.

Stuff. I definitely couldn't write an XML HTTP request. That was what we had before fetch, right? And Sass, and we did a whole show on that. If you want to go back and listen

creating requests via the fetch function. It's true. Like, I don't know if I could.

on the podcast in the past, but Those things are mostly not necessary. There's still a couple of use cases here and there for All that stuff is a browser standard. So if you have Like amazing video from JSConf 2011 But

You know, evolved past socket. Io? Yeah, socket. Io was like You've got that. Another one is require Okay. Maybe you don't necessarily need a specific plug in for this library. Maybe it can just be a DOM element. So let's move on from the jQuery reminiscing and start to talk about how this stuff was added to the browser, whether it was things from jQuery or not. And, actually, you know, one that we initially kind of left off before we even get into x express and some of that stuff, I wanna talk about

can vanilla CSS replace Sass yet? Yeah. And there was Compass too, which was an addition on to Sass the

And it is quite simply lovely. You don't need date f n s anymore. So also, I think we're starting to see rumbles of getting observables

The new temporal date library for JavaScript well, it's not a library. The new date feature for JavaScript is going to be Really, the thing that is going to transform how we write dates and times in JavaScript.

applications because if you need to indent something We have Express is kind of interesting because

Whenever I I saw that happen, and I was just like, everybody's using this. It feels like why why am I not using this if everybody's using it? But it it's just I I'm not the type of person who has had this type of situations where I needed it.

Another huge one was, hey, grid systems.

however many characters you need that thing to be. It's really popular in dollar.ajaxordollar.get a fuzzy match.

You know, we used to have to import a massive library to do a grid system. You know, everybody used Bootstrap, but before Bootstrap

Like, there was animation stuff. Animation helpers too were were were huge. Yeah. And still today,

event delegation

and all kinds of a Guillermo from Vercel. Oh, nice. Yeah. And there's this,

but it's you have an array of objects and you want the people's names they are all standardized

the selectors for XPass. So when jQuery came along, specifically their Sizzle say

So much better to be able to specifically select things based on their class, based on going to do that. It's smaller incremental upgrades to Express are maybe needed.

And the fuzzy match was nice. Yeah. Also, like all of that wasn't just with jQuery. That was just the first part was just selecting the element stuff. Then we also had a lot of things around adding event listeners Cloudflare Workers, BUN, Fastify, all that good stuff is

And that was that was

Pretty much it. We also had this thing called XPath, which is pretty nifty, and Word. Next 1 we have here is Underscorejs, trying to rewrite you could just like add it to the namespace and it accepts. It comes an element comes in

multiple classes, library that was the selector engine inside of it, it was