A Look Ahead at Web Development in 2025

Thank you. Thank you. All right. I'm just so curious what my slides look like on this big-ass monitor. Holy. I thought about just doing 20 minutes of hacking and showing it on there, but I think that looks ... Yeah.

All right. So what's up, everybody? My name is Wes Boss. I am Canadian, as we just said. And I do a couple things. I make web dev courses, and I have a podcast and YouTube channel called Syntax. Anyone ever heard of Syntax here? Woo. Yeah.

So today, I'm here to tell you about how awesome the web is. It feels like HTML, CSS, JavaScript. It feels like the last couple years, and maybe you haven't even heard of it, but there's a lot of stuff that has landed. It's quickly improving. Things are moving extremely fast right now. So today, we're going to look at some of the new features that you can either start to use or look forward to using in 2025.

The first one we have here is customizable select. So the great thing about built-in inputs to the browser is they're built-in, and that's about it. The rest of them, they suck. Nobody uses the built-in inputs or the built-in UI things in the browser because you can't style them. You can't get them to do what you want. And that is starting to change. One of the very first ones we have is this customizable select, which will allow you to put any HTML, CSS, and JavaScript inside of a select, and you can build any select box that you want. And it's all backwards compatible, and it's still a select element at the end of the day.

The next one we have is temporal. Temporal is standardized API for working with dates, time, and duration.

So here's a couple problems we have with the current date API in JavaScript. So you make a – let's say you want to tell your employees, hey, you have January 22nd off, right? You create a new date, January 22nd. You tell the New York office, hey, remember you have January 22nd off. And then you go to those losers on the west coast, and you tell them that the – they have the – just joking, just joking, just joking. You go to the San Francisco office, and hey, you parse that out to a date, and they – oh, all of a sudden they have the 21st off because you forgot about time zones, right? Who here has been bit by a time zone bug before, right? That's really annoying. So with temporal, you can – there's a whole time zone API. It's actually really flexible. But you can create dates in temporal without a time zone attached. So you simply just say January 22nd, 2025, and that's not specifically attached to any time zone. Another one is you can specify dates without a year, right? Or you can go ahead and add a year. So if you want to say I was born on December 15th, and you want to figure out what your birthday is in 2023, it will tell you what day that actually is. Or if you want to create durations, right now if we want to create durations that are not attached to a date, we just use milliseconds, right? So temporal durations will allow us to do things like one minute and 30 seconds. There's a nice API for adding them. And then there's also a really nice API for finding the difference between two dates, right? So you can take now. You can take your birthday, and you can say what is the time since that birthday? Really cool API.

Next one we have here is called invokers. This is sort of like declarative click handlers, meaning that we have these really cool APIs in the browser, like popover and dialogue. And if you want to open and close them, there are some commands for doing that.

But then if you look at something like a video player, if you want to have a button hooked up to a command on your video player, you have to select the item, attach an event listener, or check if the item is there, then attach an event listener. It's a whole thing, right? This API will allow us to say this is a command for this element, and this is the command that I want to run when you actually click the element. There's no JavaScript involved. I'm sorry this is a JavaScript conference, but no JavaScript involved in that one.

Next one we're talking about is called speculation. This is for pre-rendering and pre-loading your pages. I had this video go pretty popular in the last couple weeks on why the McMasterCar website was so fast. A huge reason behind why the McMasterCar website is so fast is that they're simply just pre-loading a lot of the HTML on the pages. It's something that's been possible for quite a while.

The speculation API is now going to allow you to do something like this. script type="speculation rules". Inside of that you can basically give it a bunch of regexes for stuff you want to find on the page that should match. You can use CSS selectors as well. That's really cool because you can tell it, hey, if you find links on the page that match these things, maybe go ahead and either pre-render or pre-fetch them. Harry Roberts, CSS Wizardry, already has this on his website. You can take a look. You can specify different eagerness. You can specify if it is going to be pre-fetched, which means it just goes and downloads the HTML for that page. Or you can specify if it will be pre-rendered, meaning it will download all the HTML, CSS images and actually render it in a separate tab. When you click the link, it instantly moves over. There's some really cool dev tools that will show you. The browser is in control of whether it will do it or not. Things like data, battery, and where the link is on the page. The browser will make the decision of if it should do that or not, so you're not just downloading 14 gigs of HTML on every single page.

The CSS Anchor API. This is really cool. The CSS Anchor API is going to allow you to position elements based on another element's location.

They don't have to be in the same parent. Or they don't have to be position relative or anything like that. So you simply just say price, anchor name, and you give it a variable.

So now you've named the price. That's the $5.99 in the video here. And then you have a call to action that says great deal. And I'm saying position anchor, anchor yourself based on the price. Then you can put them in the top center. And then when it goes off screen, it no longer fits there. We've had this with tooltips a lot. Where does the tooltip show up? Wherever there is space.

So you can tell it when you no longer have space on the top, flip block. Just flip to the bottom. And it just automatically does that for you. You can also specify custom positionings here. So you can name custom positions with this at position try API. And then when you go ahead and use it, the last line here, position try fallbacks, you can say try what I told you at first. If that doesn't work, you can't fit it on, then try custom. And if that doesn't work, then flip a block. You can basically just give it a whole list of positions to try.

This is going to be huge for tooltips and huge for context menus.

Web components. So I'm here to tell you today is that you don't have to love writing web components, you'll probably actually enjoy using web components. So web components are encapsulated. They can take HTML, CSS, and lots of JavaScript logic and encapsulate them all together. They're framework agnostic. They work on whatever framework you want. They're easy-ish to style. It's a little bit of a different approach for some use cases. They're a breeze to use and they're standardized, meaning a web component you write today is going to be available in 10 years from now, unlike many of the frameworks that we have.

And I can hardly take a weekend off without things breaking. Now, this example here is something called Media Chrome, which one of the hardest pieces of media UI to build is a video player, right? And a video player has lots of stuff. You got skip buttons, you got thumbnails when you hover over top of the scrubber bar. You've got different, like 1080p, 1440p, full screen, Apple Play, Chromecast, all of these different things.

I just wrote some what seems like HTML here, and I have a fully featured video element. And there's some poor soul that wrote this web component for me that took a lot of hard work and I just get to go ahead and use it. This is really exciting when you start to look into UI components. So there's this project called Shoelace, which is making lots of really cool web components, things that we need, because it probably doesn't make sense that we all rebuild the same web components. It doesn't make sense that we all build the same UI components over and again, because you got to think about mobile and make sure they're accessible. You got to make sure that they look good.

So Shoelace, it's actually called web awesome now, and they're going to release a whole bunch of web components, standardized components. AI, let's talk about AI, right? I'm sure everyone's kind of sick of this, but this is kind of cool stuff. There's this library called Transformers JS, and this allows you to use the models that are used in AI, but run them and interact with them in JavaScript land, both on the server and on the client.

So a couple examples that we have here is emotion detection. So what I did is I took something like, I don't know, 500 thumbnails from an image and I put them all through an emotion detection model. And then it told me which ones are the most happy, and we need this for the thumbnails for our podcasts. I need to find where I look the most smiley so we can put that one on the thumbnail on YouTube. We also have client-side depth detection. This one is really cool. So what this does is, again, I'm doing this all in the browser. I just took a photo of myself, and based on what it knows about depth detection, this is actually how Tesla does it. It's like self-driving. It will give you a map. You can kind of see it in the top left-hand corner. It's called a depth map, and then you can feed that to something like Three.js and actually have a full 3D experience. And it works really well, right? Background removal. You might think, yeah, this stuff is meant to be done in Python, but you know where Python doesn't run? In the browser. JavaScript runs there.

You might think, yeah, this stuff is meant to be done in Python, but you know where Python doesn't run? In the browser. JavaScript runs there. So if you need to do something in the browser, like background removal, do it in the browser. You don't have to send it to a server, process it, pay for that, and then send it back. You can simply just do it right away in the browser if it makes sense for the app that you're building.

Now these models, why would we want to even do this? Because these small models are, well, they're not all small, but they're relatively small versus the overhead of maybe sending it off to a server. So this modnet, which was used for detecting my smiles, 6 megs, 6.5 megs, right? That's pretty big to load on the client, but depending on the application, maybe it's not so big. And then also, it's faster. So the reason why this is, that's really fast to remove a background. This is happening in real time. I'm just doing one and then the next one, right? So the reason why that is so fast is this new API called WebGPU, which will allow you to access your user's GPU in the browser.

Window.ai. So this one's maybe not coming. This is more of an experiment from Chrome, but I thought I'd talk to you about it. There is a push to allow you to just access the models from the browser. So imagine you're building an app and you say, I want to use AI, well, imagine you could just call window.ai and you can use the model that's on the user's device already. In this case, it's Chrome has this.

Next one, calc size. This one is like probably the one problem that we've all wanted to do, and that is simply animating height auto like we did in jQuery 27 years ago. So a very simple example, height, 100 pixels, transition height over 0.2 seconds. And then when you hover, I want to set the height to auto because I don't know how big this thing is going to be. And in this case, we simply just say calc size auto, and then you'll be able to transition them from one to another.

Starting style, this one's really cool. So how many of you have ever done animation in React or Vue or something like that where you want to animate something in or you want to animate something out? Those things can be a little bit tricky because you often have to add a class, and then 10 milliseconds later, you'll add a second class, and that way you can transition from A to B. With starting style, what you can now do is say when an element is added to the DOM, apply these styles at the start and then immediately apply the regular CSS styles that you're used to. And what that allows us to do in this case, I'm simply just saying when you start, translate X negative 100%, so just move it off the page by default. And then when you apply the styles, translate X zero. And then they just zoom right on in as you need them.

Vue transition. So this is a really cool one where it's both a CSS and a JavaScript API. So here's a little demo I did where this is 16 video elements on a grid. And what I'm doing is I'm offsetting the position of the video element in each of them, so 16 different videos. And when I click on that randomize button, I'm taking all 16 of those elements out of the DOM, shuffling them, and then putting them back into the DOM in a random order. I'm simply just updating the order of 16 elements in the DOM. So what that looks like is each of those divs has a Vue transition name on it that is unique to that element. And then I use a little bit of CSS to say when you transition yourself, add this animation timing function to it. You can rotate them, you can zoom them, you can fade them in and out. Whatever it is that you want. Then I simply just need to, before I do, like I shuffle the items and before I actually update the DOM, I tip the browser off to say, hey, start Vue transition. And what that will do is it will say, okay, well, it sounds like you're going to change the DOM in some way. And after you've changed the DOM in some way, I'm going to figure out where that was and where it's going to be. And I'm simply just going to morph them from one to another. So again, if we come back to my demo that I have right here, again, I'm just taking the elements out of the DOM, mixing them up, and putting them back in. Because I'm using Vue transitions, the browser is able to figure out it was there, now it's there, I can then animate it from one place to another. There's no duplicating elements, there's no flip technique or anything like that. It just works really well. And that's the JavaScript API, but it works with just CSS as well.

This is the Syntax website where on the card view, that's an H4 with a Vue transition name. And then when you click on one of the pages, there's an H1 with a Vue transition name. It doesn't even have to be the same element. It's two totally separate pages. And when you go from one page to another, the browser says, oh, there's something with the same name, and it was here, it's going there, I'll figure out how to morph it from one to another.

CSS relative colors. This is really cool. If you have come from the SaaS world, probably one of the things you're missing in CSS is the ability to just simply make something lighter or darker a little bit, right? And now you can do that in CSS. So the way that it works is you take HSL or RGB or any of the color functions that you're used to using, and you use the from keyword. And you say from, in this case I'm taking a hex, and then it gives you three variables. The H, the S, and the L. It will also give you an alpha value if you have it. And you can take those variables, HSL, and do whatever you want with them, right? In this case, I'm simply just taking the lightness and cranking it up 40% or bringing it down 20%.

Scope CSS. So Scope CSS is really cool. It's here, it's in all the browsers. And then the way that it works is, well, there's kind of three different ways to use Scope CSS. So the first one is implicit scope. So you can literally just put a style tag inside of a div and say, at scope, and the CSS will then just be scoped to that div that is the parent of the style tag. It will not escape in Cascade or apply to other things that are on the page. And it's kind of cool. So you use at scope and then you use colon scope to access the scope container. And then you can select anything else inside of that div just with regular CSS selectors.

So the first one is implicit scope. So you can literally just put a style tag inside of a div and say, at scope, and the CSS will then just be scoped to that div that is the parent of the style tag. It will not escape in Cascade or apply to other things that are on the page. And it's kind of cool. So you use at scope and then you use colon scope to access the scope container. And then you can select anything else inside of that div just with regular CSS selectors.

Then there's also explicit scope. So if you want to put it in a separate CSS file, you could say at scope.card. And then that will allow you to access or write CSS that is only applied to something with a class of card. And then, of course, you can stick container queries and media queries. You can stick any of the other stuff that you're used to doing inside of that scope and it doesn't leak on out. And then there's also this thing called donut scope, which is, like a lot of people, who here uses Tailwind? Right? Lots of you. And the reason why people, myself included, like Tailwind, is that it doesn't cascade so much. And with donut scope, you can stop the cascade. So you can say, start the scope here, but if there's something nested in or you're trying to scope something really high level, if you have a card inside of a card, you can stop the scope from applying. And it's really cool. So basically you're saying, start the CSS here and then no longer cascade any further than this.

Web primitives. This is really interesting. So we have all of these different JavaScript run times now, right? Like we have Node, Deno, Bun, Cloudflare workers. I think there's seven or eight different server JavaScript run times. And then we also have like three major browser JavaScript run times. And it's just like, wow, that's kind of a lot. So the answer to writing modern JavaScript code is using web primitives as much as you possibly can. And so one example of this is fetch, web requests, and web response. And you've probably written this code before where if you want to send a fetch request, you might just write the fetch request. But what's actually happening is you're creating a web request. And then the response to that web request when you pass it to fetch is a web response.

But what's actually happening is you're creating a web request. And then the response to that web request when you pass it to fetch is a web response.

And it actually works exactly the same way on the server. So if you write a handler for when something comes in, you get the request. You can access all the information about stuff that's been get or posted to it. You can access cookies and headers and things like that. And then what do you send back from a handler? A response.

We're kind of lucky if you use JavaScript on the server as well. You're kind of lucky that you use the same primitives both on the client and on the server. And what that allows us to do is you can write the same handler and run it in Dino, Node, Bun, and in Cloudflare workers. And it'll actually run in web workers in the browser as well. And that's not the only one. That's just probably one that you've touched before. There are a whole bunch of these new standards that you should build your stuff on because they will work absolutely everywhere. And much of Remix and things are built upon this.

In fact, we're starting to see things like Hano and Nitro that are entire frameworks meant to replace Express.js with these web standards. And so that's all I have today. That was a lot of me just kind of running through a bunch of the new stuff. I probably could do about four more hours on all the new stuff on the web platform. But it's a pretty exciting time right now. Lots of changing. Yeah, let's go hang out after. We'll do four more hours. But the web is pretty awesome. Pretty excited about it. And thanks so much for coming out. I guess this is kind of like some of your early examples. I guess the styleable select. These are wins for UI in general. Yeah, it's huge that so much of the UI thing, popover, dialog, a lot of the CSS stuff, negates the need anchors.

There's a huge library called floating JS or something. And we have to write a lot of JavaScript to make these things work. Not that I'm anti-JavaScript. I love it. But if you can just do it in HTML or do it in a little bit of CSS, it takes a lot of the pain out of these things.

Right, right. And you talked about the speculation API with the prefetching and whatnot and your McMaster Car audit. I mean, I had to check, but it just hit a million. Yes, actually, a million views on YouTube, which is hilarious. I was talking to Stoya and Stefanoff earlier, and he's the performance guy, and he's just like, man, we got to get through to these regular people, because that's who's watching these things.

Right, right. In one month, dude. Yeah. Because today's the 18th, I guess. Is today the 18th? Yeah. Yeah. Wow. Yeah, in one month. Amazing. All right. For the web. I know, right? I have a question here from Brian, but I'm not sure if I get it. Did you notice performance differences between the different builds? The different builds. Yeah. I'm not sure, builds. Are we going to get specific? Brian, where are you? Maybe he's watching online. I'm not sure. Here's another question for you. With some of the amazing capabilities with the UIs and things like that. Yeah.

What have you poked around around accessibility? I have... Well, the thing about these standard things, like the select, is that they're accessible by default.

By default, yeah. And even with Popover, it's kind of hard to make it inaccessible. Not that you can't. I'm sure lots of idiots will build some stuff with it, but yeah, they're accessible by default, and that's what's so exciting.

And then when you get into custom ones, the folks that are building Web Awesome, they care a lot about making it accessible. And I think that's really cool that we can just use it, and if we follow how to use it, then it will just be accessible. You don't have to spend a whole bunch of time making it do that. Because we all care about accessibility, but we all have limited time as well. And unfortunately, sometimes that stuff gets forgotten.

I see. As I'm waiting for some more questions to come in, how many of these are behind a flag? And how many of these are stable? Yeah. I don't have a specific count. Starting style is in stable Chrome already. The Popover stuff is in there. Speculation API is in stable Chrome. Most of these things are not in all the browsers just yet, except for relative color. That hit Safari first. It's in Chrome now. I'm pretty sure it's in Firefox. But everything that I talked about today, I bet you will see, with the exception of the window.ai, I bet you will see in all the browsers in 2025.

Okay. So I'm gonna have to apologize, because for some reason this thing just logged me out. I'm gonna come back in. Because I see questions here. But they weren't showing up. Should we just look up? All right. Dude, my neck is... Hold on.

I'm gonna fall over. Yeah. So I'm like... I don't know what's going on.

What do you feel about the future of web development post 2025 with the advent of AI? How much will web developers be doing by 2023? Nobody freaking knows! We can talk about what we think and then you get the guys who are like, oh, I prefer to handwrite my code, because it's better. And I'm kind of somewhere in the middle. I love these tools. I think the AI stuff is really exciting. I don't think it will do away with us. But I do think that as web developers we really need to figure out how to make use of these AI tools. Because otherwise you're going to be a much slower developer.

Okay. We're good. We're back on. Sorry.

Does implicit CSS perform a lazy loading, only when that div is rendered, say conditional rendering in React? Yes. I think the question was with the pre-rendering stuff. Will it... So there's prefetching, which will only download the HTML. No... It won't parse any CSS tags or whatever. And then there's pre-rendering, which it will do absolutely everything. So that can be expensive. That still uses server resources, it uses bandwidth from your server, it uses bandwidth from your user's phone. So it uses CPU cycles to actually render it behind the scenes.

So it certainly is not something where you should just go willy nilly with it, because you could wake up with a very large bandwidth bill, especially if you're... If it's like a cache CDN, it's almost free. But if it's like every single user, you're re-rendering 20 extra pages, because they might click on it, then you might have a bit of a problem there. So I asked for the McMasterCar thing, they built a Next.js version, and I was like, publish the Vercel bill, I want to see. And they did, so you can go take a look at the Vercel bill and see.

We were talking about that in the background. The next question's from Mr. Moose. Hahaha. What specific feature that you covered are you most excited about? I think starting style, calc auto, and then there's one more which is allowed discrete, which is when you want to animate from display none to display block. If you want to animate that, but you want to go from 0% opacity to 100%, previously that was not possible, because display none to display block is a discrete thing, it doesn't know how to do that. So there's another thing I didn't talk about today called allowed discrete, and I think that's just going to take off so much of this JavaScript out of class, out of class, two seconds later, it's annoying. So I'm pretty stoked about that CSS area. Alright.

I do love this question actually, Mr. Morales. What's your preferred way to stay informed on new web development discoveries? Follow me on Blue Sky? No, my favorite way, it's kind of tricky, but obviously I do it for a living, so I have a whole list of things that I keep in, yeah, what's going on? I monitor release logs and things like that. But honestly, just being part of the community and keeping your ear to the ground, listen to podcasts, watch YouTube videos, go on Twitter, things like that, it's kind of good. You'll hear about it. And I always tell people, don't worry about knowing about it immediately, but if you hear somebody talk about it six times, that's your cue to say, I should check that out. I've heard about that a few more times. Do you ever read W3C meeting notes and things like that? Yeah, I usually scan the W3C meeting notes, TT39 meeting notes, proposals. Yeah, lots of good stuff like that. There's a really good Twitter account called Intent2Ship, and that one will be like, alright, this is getting serious. It means that Chrome is going to start implementing this CSS feature, which means that they've had the years of discussions about these things, and now they're actually going to build it and put it into the browser. Yeah, yeah, no, that's a good account to watch. I believe this may be the last question, but we'll see.

How do you think the new Scope CSS feature will influence the way developers manage styles? That's a good question. I don't know that it will ... We'll see what it looks like to actually making its way into frameworks and stuff. That's the way Svelte does their CSS right now, but then it's processed and whatnot. Will it be another thing like ESM, where eventually they just ship Scope CSS to the browser? We'll see. All right, thank you very much for that. And that'll be it for questions, so put your hands together for Wes Boss. Thanks, everyone.