A breakdown of the most useful new features for web developers using HTML, CSS, and JavaScript. Learn about native dialog windows, WebGPU, CSS container queries, and more. 

Check out https://clerk.com to build a beautiful user authentication system. 

#webdevelopment #javascript #top10 

💬 Chat with Me on Discord

https://discord.gg/fireship

🔗 Resources

- Web Baseline https://web.dev/baseline/
- WebDev 101 https://youtu.be/erEgovG9WBs
- JavaScript 101 https://youtu.be/lkIFF4maKMU
- Web Performance https://youtu.be/0fONene3OIA


🔥 Get More Content - Upgrade to PRO

Upgrade at https://fireship.io/pro
Use code YT25 for 25% off PRO access 

🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font

🔖 Topics Covered

- Beginner web development tutorial
- What is WebGPU?
- Web development best practices
- New CSS features in 2023
- New JS features in 2023
- Measuring performance on the web
- How to build websites from scratch
2024-02-04T05:05:10.296Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
34fb13e2-6483-4c63-801e-2480c236b9b9
0c8fbb8e514fbaea900f78fcf6909346ea45450b85d24fbdac75329eee9fd679
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
If you're a web developer, be prepared to have your mind blown.
Did you know it takes longer to say www than it does to just say World Wide Web, and that one little change could add 100 of milliseconds to your productivity.
Had I known that 15 years ago, I'd probably have my own space exploration company by now, but instead, I'm still just building crappy websites.
Speaking of which, while while we've all been distracted by the terrifyingly overhyped rise of artificial intelligence, the web platform has landed some game changing new features that you probably haven't heard of yet and will change the way we build websites forever, and that's not even hyperbole.
The first feature on this list is huge, the native HTML dialog.
I first mentioned this feature about a year ago, but now it's fully ported on all major browsers.
And what it does is make it way easier to build your own modal windows.
Normally, to build a modal from scratch, you need a full screen back dropped in a window that sits on top of it and a bunch of hacked together JavaScript to show and hide these elements.
It's always felt way harder than it should be.
But, now, we have the dialog, which is just stay regular HTML element that you can reference by its ID and has a few built in JavaScript methods to show and hide it.
For example, to show the modal, we can run the show modal method, and it magically appears in the UI with a backdrop.
The backdrop itself has its own pseudo element that can be styled with CSS.
We can then close the modal by I either submitting a form inside of it with a method of dialogue or by calling its closed method on some other event.
This makes life so much easier because you can animate it using simple CSS transitions.
And speaking of making your life easier, today's sponsor is Clerk, who provides the most beautiful user authentication solution I've ever seen.
By dropping a few components into your favorite full stack framework, you get a professional UI that can handle a variety of different sign in methods like passwords, magic links, social sign on, and will to factor off.
Once signed in, developers can easily access the current user from both front end and back end environments.
In addition, Clerk provides the UI for users to customize their own data, it handles advanced security requirements like session management per device, features that could take weeks to roll out on your own.
And the UI is fully customizable.
I had a lot of fun switching from retro to neo brutalism.
These components can be dropped into any React framework and play well with popular back ends like Firebase.
And it has a free tier up to 5,000 users.
Give it a try with the link below.
Native modal windows are great, but another feature that's annoying to implement that is the popover.
Luckily, native popovers are also coming to the web.
As of today, this feature is experimental, so you'll need to enable it with a flag, but, basically, it provides a couple of attributes like popovertarget and popover, which allows you to show and hide content without the need to write any JavaScript or tricky CSS that uses focus goes with them.
Just match the element ID to the popover target, and you're done.
That'll be a nice quality of life improvement, but the next feature, WebGPU, do is easily the most important feature on this list even if you never use it.
It's basically the successor to WebGL, allowing browsers and web applications to take advantage of GPU's.
Used, it is under an experimental flag today, but many libraries like Babylon JS fully supported already, and support for 3 JS is underway.
And that means 3 d graphics and games names are about to get way faster on the web.
I'm using it right now with Babylon.
Js, and as you can see, the web GPU version is far more majestic.
And not is that, but libraries like TensorFlow JS support it, which means developers will be able to build web apps where end users can train machine learning models without the need to download a bunch of Python libraries or use a notebook in the cloud.
That's pretty cool, but for most web developers, the biggest challenge is writing good CSS.
Next on the list, we have container queries.
To build sponsored websites, developers often use media queries where you apply different styles to an element based on the size of the viewport.
The problem is that in many cases, you're not worried about the viewport, but you're worried about the parent container of an element, and that's always been really hard to deal with until now.
With container queries, you first create a containment context with the container type property, then from there, you can use the container at rule, which can apply different styles based on the nearest ancestor container.
In addition, there are a bunch of new units like container query width and height that allow you to compute the proper size of the children directly in the CSS.
In the past, you might run into situations where you have to actually get the bounding box from JavaScript then solves some crazy differential equations, you get the div in the right place.
And you'll be happy to know that there's an official Tailwind container queries package that allows you to declare these containers directly in your HTML.
Another cool CSS feature you might not know about is color mix.
I've used tools like Sass to mix colors in the past, but now we we can do it natively in CSS.
It's a function that takes 2 color arguments and mixes them in a specified color space.
Like in this example, if we mix red and blue in an RGB color space, we get purple as a result.
That's not very useful on its own, but it makes it easier to do effects like this where I have a list of items that mix red and white together to create a gradient effect that occurs for multiple elements.
But, speaking of features from Sass, another huge one is CSS nesting.
I can't believe it's taken this long, but it's almost fully supported in all in browsers, it's purely an ergonomic feature that allows you to write styles in a far more concise and readable way by nesting them inside a parent just like a kangaroo in a pouch, which eliminates tons of plicated class names from your code.
But another very interesting new feature is color fonts, also known as chromatic fonts, that use multiple colors inside of a single glyph.
This opens up a whole new world of possibilities, because now you can customize the entire color palette of a font and create some crazy effects like 3 d gradients.
What's cool about this is that they're still interpreted as regular fonts in the browser.
Whereas previously, stuff like this would only be possible with your own custom vector graphics.
There are only a few color fonts at the moment, but it will be interesting see what else comes out in the future.
But the next thing I wanna look at is performance and the new Web Vitals plugin for Chrome.
You can measure the performance of any website by running a Lighthouse report, but the process is kind of slow and cumbersome.
This plugin will console log performance metrics as you use a website, and it can pinpoint performance issues like layout shift can point you to the exact element that's causing the problem.
There's a ton of things to consider when it comes to performance, and I have a full video on that topic on my second channel if you wanna learn war.
But, now it's time to talk about some new JavaScript features like array at.
If you come from a language like Python or most other languages for that matter, you might find it er, that to get the last element in a JavaScript array, you have to take the array length and subtract 1.
You can't just use negative one or last until now because at makes this is code obsolete.
Now, we can just say at negative one to get the last element, or second to last with negative 2.
That's pretty cool, but deep copy is even more useful.
One thing you'll eventually they have to do is copy an object.
In JavaScript, objects are passed by reference, which means if you assign one to a new variable, you're still going to reference the same original object.
If you modify a property on b, it will also modify the property on a because they're the same object reference.
Now most of the time, we use object assign or the spread syntax is to create a new object, but the problem here is that it only does a shallow copy.
And that means if an object has any nested objects on it, those nested objects x will still maintain the reference to their original object, but in many cases that's not what you want.
And what developers have been doing for years is using JSON stringify to turn the object into a string, and then JSON parse to parse it back into an object.
That's a completely ridiculous hack that creates a new object reference in memory, but I'm happy to report that life doesn't have to be this way.
There's now a global function called structured clone that can clone an object into a new reference, making it way easier to transfer data from one object to another.
Bruh.
And that gives us 10 awesome new web features to take advantage of.
But wait, there's more.
Like the transform stream interface that allows you to pipe 1 fetch call into there.
Or how about import maps that allow you to declare a bunch of JavaScript modules all at once?
And I didn't even mention that there's a TC 39 proposal that will allow you to import JSON directly into a JavaScript file in the future.
Oh, and let's not forget that we also now have individual CSS transform properties, allowing you modifies scale, translation, and rotation more easily.
And we have new trigonometric functions in CSS like sine, cosine, and tangent, which is incredibly useful if you have circles in your time.
We also now have a CSS initial letter property, which you might use to make the first letter in an article bigger just like in a magazine.
I should also probably mention new viewport units designed specifically for mobile, that can take into account if toolbars are opened or not.
Also, let's not forget focus visible, which is a more accessibility friendly way to handle focus in form inputs and buttons.
Speaking of focus, there's also now an inert property that you can use on elements to show they lack the ability to move or be focused on.
That one's kinda boring, but a way more exciting experimental technology is the view transitions API, which allows developers to create animations between web pages to make websites behave more like mobile apps helps to keep the user in context.
And finally, we have animation timeline.
As of today, it's experimental, but it gives you the ability to control animations based on the scroll position in the browser, a feature that everybody does but always feels way more complicated than it should be.
And with that, we've looked at 21 new features on the web.
If you knew every single one of them, congratulations.
You just won the grand prize.
One free web development job redeemable at the company of your choosing.
Just present the certificate during your interview, and they should let you write in, no questions asked.
Thanks for watching, and I will see you in the next one.

Speaker 0: If you're a web developer, be prepared to have your mind blown. Did you know it takes longer to say www than it does to just say World Wide Web, and that one little change could add 100 of milliseconds to your productivity. Had I known that 15 years ago, I'd probably have my own space exploration company by now, but instead, I'm still just building crappy websites. Speaking of which, while while we've all been distracted by the terrifyingly overhyped rise of artificial intelligence, the web platform has landed some game changing new features that you probably haven't heard of yet and will change the way we build websites forever, and that's not even hyperbole. The first feature on this list is huge, the native HTML dialog.

I first mentioned this feature about a year ago, but now it's fully ported on all major browsers. And what it does is make it way easier to build your own modal windows. Normally, to build a modal from scratch, you need a full screen back dropped in a window that sits on top of it and a bunch of hacked together JavaScript to show and hide these elements. It's always felt way harder than it should be. But, now, we have the dialog, which is just stay regular HTML element that you can reference by its ID and has a few built in JavaScript methods to show and hide it.

For example, to show the modal, we can run the show modal method, and it magically appears in the UI with a backdrop. The backdrop itself has its own pseudo element that can be styled with CSS. We can then close the modal by I either submitting a form inside of it with a method of dialogue or by calling its closed method on some other event. This makes life so much easier because you can animate it using simple CSS transitions. And speaking of making your life easier, today's sponsor is Clerk, who provides the most beautiful user authentication solution I've ever seen.

By dropping a few components into your favorite full stack framework, you get a professional UI that can handle a variety of different sign in methods like passwords, magic links, social sign on, and will to factor off. Once signed in, developers can easily access the current user from both front end and back end environments. In addition, Clerk provides the UI for users to customize their own data, it handles advanced security requirements like session management per device, features that could take weeks to roll out on your own. And the UI is fully customizable. I had a lot of fun switching from retro to neo brutalism.

These components can be dropped into any React framework and play well with popular back ends like Firebase. And it has a free tier up to 5,000 users. Give it a try with the link below. Native modal windows are great, but another feature that's annoying to implement that is the popover. Luckily, native popovers are also coming to the web.

As of today, this feature is experimental, so you'll need to enable it with a flag, but, basically, it provides a couple of attributes like popovertarget and popover, which allows you to show and hide content without the need to write any JavaScript or tricky CSS that uses focus goes with them. Just match the element ID to the popover target, and you're done. That'll be a nice quality of life improvement, but the next feature, WebGPU, do is easily the most important feature on this list even if you never use it. It's basically the successor to WebGL, allowing browsers and web applications to take advantage of GPU's. Used, it is under an experimental flag today, but many libraries like Babylon JS fully supported already, and support for 3 JS is underway.

And that means 3 d graphics and games names are about to get way faster on the web. I'm using it right now with Babylon. Js, and as you can see, the web GPU version is far more majestic. And not is that, but libraries like TensorFlow JS support it, which means developers will be able to build web apps where end users can train machine learning models without the need to download a bunch of Python libraries or use a notebook in the cloud. That's pretty cool, but for most web developers, the biggest challenge is writing good CSS.

Next on the list, we have container queries. To build sponsored websites, developers often use media queries where you apply different styles to an element based on the size of the viewport. The problem is that in many cases, you're not worried about the viewport, but you're worried about the parent container of an element, and that's always been really hard to deal with until now. With container queries, you first create a containment context with the container type property, then from there, you can use the container at rule, which can apply different styles based on the nearest ancestor container. In addition, there are a bunch of new units like container query width and height that allow you to compute the proper size of the children directly in the CSS.

In the past, you might run into situations where you have to actually get the bounding box from JavaScript then solves some crazy differential equations, you get the div in the right place. And you'll be happy to know that there's an official Tailwind container queries package that allows you to declare these containers directly in your HTML. Another cool CSS feature you might not know about is color mix. I've used tools like Sass to mix colors in the past, but now we we can do it natively in CSS. It's a function that takes 2 color arguments and mixes them in a specified color space.

Like in this example, if we mix red and blue in an RGB color space, we get purple as a result. That's not very useful on its own, but it makes it easier to do effects like this where I have a list of items that mix red and white together to create a gradient effect that occurs for multiple elements. But, speaking of features from Sass, another huge one is CSS nesting. I can't believe it's taken this long, but it's almost fully supported in all in browsers, it's purely an ergonomic feature that allows you to write styles in a far more concise and readable way by nesting them inside a parent just like a kangaroo in a pouch, which eliminates tons of plicated class names from your code. But another very interesting new feature is color fonts, also known as chromatic fonts, that use multiple colors inside of a single glyph.

This opens up a whole new world of possibilities, because now you can customize the entire color palette of a font and create some crazy effects like 3 d gradients. What's cool about this is that they're still interpreted as regular fonts in the browser. Whereas previously, stuff like this would only be possible with your own custom vector graphics. There are only a few color fonts at the moment, but it will be interesting see what else comes out in the future. But the next thing I wanna look at is performance and the new Web Vitals plugin for Chrome.

You can measure the performance of any website by running a Lighthouse report, but the process is kind of slow and cumbersome. This plugin will console log performance metrics as you use a website, and it can pinpoint performance issues like layout shift can point you to the exact element that's causing the problem. There's a ton of things to consider when it comes to performance, and I have a full video on that topic on my second channel if you wanna learn war. But, now it's time to talk about some new JavaScript features like array at. If you come from a language like Python or most other languages for that matter, you might find it er, that to get the last element in a JavaScript array, you have to take the array length and subtract 1.

You can't just use negative one or last until now because at makes this is code obsolete. Now, we can just say at negative one to get the last element, or second to last with negative 2. That's pretty cool, but deep copy is even more useful. One thing you'll eventually they have to do is copy an object. In JavaScript, objects are passed by reference, which means if you assign one to a new variable, you're still going to reference the same original object.

If you modify a property on b, it will also modify the property on a because they're the same object reference. Now most of the time, we use object assign or the spread syntax is to create a new object, but the problem here is that it only does a shallow copy. And that means if an object has any nested objects on it, those nested objects x will still maintain the reference to their original object, but in many cases that's not what you want. And what developers have been doing for years is using JSON stringify to turn the object into a string, and then JSON parse to parse it back into an object. That's a completely ridiculous hack that creates a new object reference in memory, but I'm happy to report that life doesn't have to be this way.

There's now a global function called structured clone that can clone an object into a new reference, making it way easier to transfer data from one object to another. Bruh. And that gives us 10 awesome new web features to take advantage of. But wait, there's more. Like the transform stream interface that allows you to pipe 1 fetch call into there.

Or how about import maps that allow you to declare a bunch of JavaScript modules all at once? And I didn't even mention that there's a TC 39 proposal that will allow you to import JSON directly into a JavaScript file in the future. Oh, and let's not forget that we also now have individual CSS transform properties, allowing you modifies scale, translation, and rotation more easily. And we have new trigonometric functions in CSS like sine, cosine, and tangent, which is incredibly useful if you have circles in your time. We also now have a CSS initial letter property, which you might use to make the first letter in an article bigger just like in a magazine.

I should also probably mention new viewport units designed specifically for mobile, that can take into account if toolbars are opened or not. Also, let's not forget focus visible, which is a more accessibility friendly way to handle focus in form inputs and buttons. Speaking of focus, there's also now an inert property that you can use on elements to show they lack the ability to move or be focused on. That one's kinda boring, but a way more exciting experimental technology is the view transitions API, which allows developers to create animations between web pages to make websites behave more like mobile apps helps to keep the user in context. And finally, we have animation timeline.

As of today, it's experimental, but it gives you the ability to control animations based on the scroll position in the browser, a feature that everybody does but always feels way more complicated than it should be. And with that, we've looked at 21 new features on the web. If you knew every single one of them, congratulations. You just won the grand prize. One free web development job redeemable at the company of your choosing.

Just present the certificate during your interview, and they should let you write in, no questions asked. Thanks for watching, and I will see you in the next one.
If you're a web developer, be prepared to have your mind blown. Did you know it takes longer to say www than it does to just say World Wide Web, and that one little change could add 100 of milliseconds to your productivity. Had I known that 15 years ago, I'd probably have my own space exploration company by now, but instead, I'm still just building crappy websites. Speaking of which, while while we've all been distracted by the terrifyingly overhyped rise of artificial intelligence, the web platform has landed some game changing new features that you probably haven't heard of yet and will change the way we build websites forever, and that's not even hyperbole. The first feature on this list is huge, the native HTML dialog.
space exploration
computer science
google
technology
artificial intelligence
video gaming
internet
websites
I first mentioned this feature about a year ago, but now it's fully ported on all major browsers. And what it does is make it way easier to build your own modal windows. Normally, to build a modal from scratch, you need a full screen back dropped in a window that sits on top of it and a bunch of hacked together JavaScript to show and hide these elements. It's always felt way harder than it should be. But, now, we have the dialog, which is just stay regular HTML element that you can reference by its ID and has a few built in JavaScript methods to show and hide it. For example, to show the modal, we can run the show modal method, and it magically appears in the UI with a backdrop. The backdrop itself has its own pseudo element that can be styled with CSS. We can then close the modal by I either submitting a form inside of it with a method of dialogue or by calling its closed method on some other event.
This makes life so much easier because you can animate it using simple CSS transitions. And speaking of making your life easier, today's sponsor is Clerk, who provides the most beautiful user authentication solution I've ever seen. By dropping a few components into your favorite full stack framework, you get a professional UI that can handle a variety of different sign in methods like passwords, magic links, social sign on, and will to factor off. Once signed in, developers can easily access the current user from both front end and back end environments. In addition, Clerk provides the UI for users to customize their own data, it handles advanced security requirements like session management per device, features that could take weeks to roll out on your own.
networking
customer support
customers
commerce
And the UI is fully customizable. I had a lot of fun switching from retro to neo brutalism. These components can be dropped into any React framework and play well with popular back ends like Firebase. And it has a free tier up to 5,000 users. Give it a try with the link below. Native modal windows are great, but another feature that's annoying to implement that is the popover. Luckily, native popovers are also coming to the web. As of today, this feature is experimental, so you'll need to enable it with a flag, but, basically, it provides a couple of attributes like popovertarget and popover, which allows you to show and hide content without the need to write any JavaScript or tricky CSS that uses focus goes with them.
Just match the element ID to the popover target, and you're done. That'll be a nice quality of life improvement, but the next feature, WebGPU, do is easily the most important feature on this list even if you never use it. It's basically the successor to WebGL, allowing browsers and web applications to take advantage of GPU's. Used, it is under an experimental flag today, but many libraries like Babylon JS fully supported already, and support for 3 JS is underway. And that means 3 d graphics and games names are about to get way faster on the web. I'm using it right now with Babylon. Js, and as you can see, the web GPU version is far more majestic. And not is that, but libraries like TensorFlow JS support it, which means developers will be able to build web apps where end users can train machine learning models without the need to download a bunch of Python libraries or use a notebook in the cloud.
video gaming
software development
software
That's pretty cool, but for most web developers, the biggest challenge is writing good CSS. Next on the list, we have container queries. To build sponsored websites, developers often use media queries where you apply different styles to an element based on the size of the viewport. The problem is that in many cases, you're not worried about the viewport, but you're worried about the parent container of an element, and that's always been really hard to deal with until now. With container queries, you first create a containment context with the container type property, then from there, you can use the container at rule, which can apply different styles based on the nearest ancestor container. In addition, there are a bunch of new units like container query width and height that allow you to compute the proper size of the children directly in the CSS. In the past, you might run into situations where you have to actually get the bounding box from JavaScript then solves some crazy differential equations, you get the div in the right place. And you'll be happy to know that there's an official Tailwind container queries package that allows you to declare these containers directly in your HTML. Another cool CSS feature you might not know about is color mix. I've used tools like Sass to mix colors in the past, but now we we can do it natively in CSS. It's a function that takes 2 color arguments and mixes them in a specified color space. Like in this example, if we mix red and blue in an RGB color space, we get purple as a result. That's not very useful on its own, but it makes it easier to do effects like this where I have a list of items that mix red and white together to create a gradient effect that occurs for multiple elements. But, speaking of features from Sass, another huge one is CSS nesting. I can't believe it's taken this long, but it's almost fully supported in all in browsers, it's purely an ergonomic feature that allows you to write styles in a far more concise and readable way by nesting them inside a parent just like a kangaroo in a pouch, which eliminates tons of plicated class names from your code.
But another very interesting new feature is color fonts, also known as chromatic fonts, that use multiple colors inside of a single glyph. This opens up a whole new world of possibilities, because now you can customize the entire color palette of a font and create some crazy effects like 3 d gradients.
cosmetics
What's cool about this is that they're still interpreted as regular fonts in the browser. Whereas previously, stuff like this would only be possible with your own custom vector graphics. There are only a few color fonts at the moment, but it will be interesting see what else comes out in the future. But the next thing I wanna look at is performance and the new Web Vitals plugin for Chrome. You can measure the performance of any website by running a Lighthouse report, but the process is kind of slow and cumbersome. This plugin will console log performance metrics as you use a website, and it can pinpoint performance issues like layout shift can point you to the exact element that's causing the problem. There's a ton of things to consider when it comes to performance, and I have a full video on that topic on my second channel if you wanna learn war. But, now it's time to talk about some new JavaScript features like array at. If you come from a language like Python or most other languages for that matter, you might find it er, that to get the last element in a JavaScript array, you have to take the array length and subtract 1. You can't just use negative one or last until now because at makes this is code obsolete. Now, we can just say at negative one to get the last element, or second to last with negative 2. That's pretty cool, but deep copy is even more useful. One thing you'll eventually they have to do is copy an object. In JavaScript, objects are passed by reference, which means if you assign one to a new variable, you're still going to reference the same original object. If you modify a property on b, it will also modify the property on a because they're the same object reference. Now most of the time, we use object assign or the spread syntax is to create a new object, but the problem here is that it only does a shallow copy. And that means if an object has any nested objects on it, those nested objects x will still maintain the reference to their original object, but in many cases that's not what you want. And what developers have been doing for years is using JSON stringify to turn the object into a string, and then JSON parse to parse it back into an object. That's a completely ridiculous hack that creates a new object reference in memory, but I'm happy to report that life doesn't have to be this way. There's now a global function called structured clone that can clone an object into a new reference, making it way easier to transfer data from one object to another. Bruh. And that gives us 10 awesome new web features to take advantage of. But wait, there's more. Like the transform stream interface that allows you to pipe 1 fetch call into there. Or how about import maps that allow you to declare a bunch of JavaScript modules all at once? And I didn't even mention that there's a TC 39 proposal that will allow you to import JSON directly into a JavaScript file in the future. Oh, and let's not forget that we also now have individual CSS transform properties, allowing you modifies scale, translation, and rotation more easily. And we have new trigonometric functions in CSS like sine, cosine, and tangent, which is incredibly useful if you have circles in your time. We also now have a CSS initial letter property, which you might use to make the first letter in an article bigger just like in a magazine. I should also probably mention new viewport units designed specifically for mobile, that can take into account if toolbars are opened or not. Also, let's not forget focus visible, which is a more accessibility friendly way to handle focus in form inputs and buttons.
Speaking of focus, there's also now an inert property that you can use on elements to show they lack the ability to move or be focused on. That one's kinda boring, but a way more exciting experimental technology is the view transitions API, which allows developers to create animations between web pages to make websites behave more like mobile apps helps to keep the user in context. And finally, we have animation timeline. As of today, it's experimental, but it gives you the ability to control animations based on the scroll position in the browser, a feature that everybody does but always feels way more complicated than it should be. And with that, we've looked at 21 new features on the web.
animation
graphic design
visualization
multimedia
technology
If you knew every single one of them, congratulations. You just won the grand prize. One free web development job redeemable at the company of your choosing. Just present the certificate during your interview, and they should let you write in, no questions asked. Thanks for watching, and I will see you in the next one.
If you're a web developer, be prepared to have your mind blown. Did you know it takes longer to say www than it does to just say World Wide Web, and that one little change could add 100 of milliseconds to your productivity. Had I known that 15 years ago, I'd probably have my own space exploration company by now, but instead, I'm still just building crappy websites. Speaking of which, while while we've all been distracted by the terrifyingly overhyped rise of artificial intelligence, the web platform has landed some game changing new features that you probably haven't heard of yet and will change the way we build websites forever, and that's not even hyperbole. The first feature on this list is huge, the native HTML dialog. I first mentioned this feature about a year ago, but now it's fully ported on all major browsers. And what it does is make it way easier to build your own modal windows. Normally, to build a modal from scratch, you need a full screen back dropped in a window that sits on top of it and a bunch of hacked together JavaScript to show and hide these elements. It's always felt way harder than it should be. But, now, we have the dialog, which is just stay regular HTML element that you can reference by its ID and has a few built in JavaScript methods to show and hide it. For example, to show the modal, we can run the show modal method, and it magically appears in the UI with a backdrop. The backdrop itself has its own pseudo element that can be styled with CSS. We can then close the modal by I either submitting a form inside of it with a method of dialogue or by calling its closed method on some other event. This makes life so much easier because you can animate it using simple CSS transitions. And speaking of making your life easier, today's sponsor is Clerk, who provides the most beautiful user authentication solution I've ever seen. By dropping a few components into your favorite full stack framework, you get a professional UI that can handle a variety of different sign in methods like passwords, magic links, social sign on, and will to factor off. Once signed in, developers can easily access the current user from both front end and back end environments. In addition, Clerk provides the UI for users to customize their own data, it handles advanced security requirements like session management per device, features that could take weeks to roll out on your own. And the UI is fully customizable. I had a lot of fun switching from retro to neo brutalism. These components can be dropped into any React framework and play well with popular back ends like Firebase. And it has a free tier up to 5,000 users. Give it a try with the link below. Native modal windows are great, but another feature that's annoying to implement that is the popover. Luckily, native popovers are also coming to the web. As of today, this feature is experimental, so you'll need to enable it with a flag, but, basically, it provides a couple of attributes like popovertarget and popover, which allows you to show and hide content without the need to write any JavaScript or tricky CSS that uses focus goes with them. Just match the element ID to the popover target, and you're done. That'll be a nice quality of life improvement, but the next feature, WebGPU, do is easily the most important feature on this list even if you never use it. It's basically the successor to WebGL, allowing browsers and web applications to take advantage of GPU's. Used, it is under an experimental flag today, but many libraries like Babylon JS fully supported already, and support for 3 JS is underway. And that means 3 d graphics and games names are about to get way faster on the web. I'm using it right now with Babylon. Js, and as you can see, the web GPU version is far more majestic. And not is that, but libraries like TensorFlow JS support it, which means developers will be able to build web apps where end users can train machine learning models without the need to download a bunch of Python libraries or use a notebook in the cloud. That's pretty cool, but for most web developers, the biggest challenge is writing good CSS. Next on the list, we have container queries. To build sponsored websites, developers often use media queries where you apply different styles to an element based on the size of the viewport. The problem is that in many cases, you're not worried about the viewport, but you're worried about the parent container of an element, and that's always been really hard to deal with until now. With container queries, you first create a containment context with the container type property, then from there, you can use the container at rule, which can apply different styles based on the nearest ancestor container. In addition, there are a bunch of new units like container query width and height that allow you to compute the proper size of the children directly in the CSS. In the past, you might run into situations where you have to actually get the bounding box from JavaScript then solves some crazy differential equations, you get the div in the right place. And you'll be happy to know that there's an official Tailwind container queries package that allows you to declare these containers directly in your HTML. Another cool CSS feature you might not know about is color mix. I've used tools like Sass to mix colors in the past, but now we we can do it natively in CSS. It's a function that takes 2 color arguments and mixes them in a specified color space. Like in this example, if we mix red and blue in an RGB color space, we get purple as a result. That's not very useful on its own, but it makes it easier to do effects like this where I have a list of items that mix red and white together to create a gradient effect that occurs for multiple elements. But, speaking of features from Sass, another huge one is CSS nesting. I can't believe it's taken this long, but it's almost fully supported in all in browsers, it's purely an ergonomic feature that allows you to write styles in a far more concise and readable way by nesting them inside a parent just like a kangaroo in a pouch, which eliminates tons of plicated class names from your code. But another very interesting new feature is color fonts, also known as chromatic fonts, that use multiple colors inside of a single glyph. This opens up a whole new world of possibilities, because now you can customize the entire color palette of a font and create some crazy effects like 3 d gradients. What's cool about this is that they're still interpreted as regular fonts in the browser. Whereas previously, stuff like this would only be possible with your own custom vector graphics. There are only a few color fonts at the moment, but it will be interesting see what else comes out in the future. But the next thing I wanna look at is performance and the new Web Vitals plugin for Chrome. You can measure the performance of any website by running a Lighthouse report, but the process is kind of slow and cumbersome. This plugin will console log performance metrics as you use a website, and it can pinpoint performance issues like layout shift can point you to the exact element that's causing the problem. There's a ton of things to consider when it comes to performance, and I have a full video on that topic on my second channel if you wanna learn war. But, now it's time to talk about some new JavaScript features like array at. If you come from a language like Python or most other languages for that matter, you might find it er, that to get the last element in a JavaScript array, you have to take the array length and subtract 1. You can't just use negative one or last until now because at makes this is code obsolete. Now, we can just say at negative one to get the last element, or second to last with negative 2. That's pretty cool, but deep copy is even more useful. One thing you'll eventually they have to do is copy an object. In JavaScript, objects are passed by reference, which means if you assign one to a new variable, you're still going to reference the same original object. If you modify a property on b, it will also modify the property on a because they're the same object reference. Now most of the time, we use object assign or the spread syntax is to create a new object, but the problem here is that it only does a shallow copy. And that means if an object has any nested objects on it, those nested objects x will still maintain the reference to their original object, but in many cases that's not what you want. And what developers have been doing for years is using JSON stringify to turn the object into a string, and then JSON parse to parse it back into an object. That's a completely ridiculous hack that creates a new object reference in memory, but I'm happy to report that life doesn't have to be this way. There's now a global function called structured clone that can clone an object into a new reference, making it way easier to transfer data from one object to another. Bruh. And that gives us 10 awesome new web features to take advantage of. But wait, there's more. Like the transform stream interface that allows you to pipe 1 fetch call into there. Or how about import maps that allow you to declare a bunch of JavaScript modules all at once? And I didn't even mention that there's a TC 39 proposal that will allow you to import JSON directly into a JavaScript file in the future. Oh, and let's not forget that we also now have individual CSS transform properties, allowing you modifies scale, translation, and rotation more easily. And we have new trigonometric functions in CSS like sine, cosine, and tangent, which is incredibly useful if you have circles in your time. We also now have a CSS initial letter property, which you might use to make the first letter in an article bigger just like in a magazine. I should also probably mention new viewport units designed specifically for mobile, that can take into account if toolbars are opened or not. Also, let's not forget focus visible, which is a more accessibility friendly way to handle focus in form inputs and buttons. Speaking of focus, there's also now an inert property that you can use on elements to show they lack the ability to move or be focused on. That one's kinda boring, but a way more exciting experimental technology is the view transitions API, which allows developers to create animations between web pages to make websites behave more like mobile apps helps to keep the user in context. And finally, we have animation timeline. As of today, it's experimental, but it gives you the ability to control animations based on the scroll position in the browser, a feature that everybody does but always feels way more complicated than it should be. And with that, we've looked at 21 new features on the web. If you knew every single one of them, congratulations. You just won the grand prize. One free web development job redeemable at the company of your choosing. Just present the certificate during your interview, and they should let you write in, no questions asked. Thanks for watching, and I will see you in the next one.
If
if
you're
you're
a
a
web
web
developer,
developer
be
be
prepared
prepared
to
to
have
have
your
your
mind
mind
blown.
blown
Did
did
you
you
know
know
it
it
takes
takes
longer
longer
to
to
say
say
www
www
than
than
it
it
does
does
to
to
just
just
say
say
World
world
Wide
wide
Web,
web
and
and
that
that
one
one
little
little
change
change
could
could
add
add
100
100
of
of
milliseconds
milliseconds
to
to
your
your
productivity.
productivity
Had
had
I
i
known
known
that
that
15
15
years
years
ago,
ago
I'd
i'd
probably
probably
have
have
my
my
own
own
space
space
exploration
exploration
company
company
by
by
now,
now
but
but
instead,
instead
I'm
i'm
still
still
just
just
building
building
crappy
crappy
websites.
websites
Speaking
speaking
of
of
which,
which
while
while
while
while
we've
we've
all
all
been
been
distracted
distracted
by
by
the
the
terrifyingly
terrifyingly
overhyped
overhyped
rise
rise
of
of
artificial
artificial
intelligence,
intelligence
the
the
web
web
platform
platform
has
has
landed
landed
some
some
game
game
changing
changing
new
new
features
features
that
that
you
you
probably
probably
haven't
haven't
heard
heard
of
of
yet
yet
and
and
will
will
change
change
the
the
way
way
we
we
build
build
websites
websites
forever,
forever
and
and
that's
that's
not
not
even
even
hyperbole.
hyperbole
The
the
first
first
feature
feature
on
on
this
this
list
list
is
is
huge,
huge
the
the
native
native
HTML
html
dialog.
dialog
I
i
first
first
mentioned
mentioned
this
this
feature
feature
about
about
a
a
year
year
ago,
ago
but
but
now
now
it's
it's
fully
fully
ported
ported
on
on
all
all
major
major
browsers.
browsers
And
and
what
what
it
it
does
does
is
is
make
make
it
it
way
way
easier
easier
to
to
build
build
your
your
own
own
modal
modal
windows.
windows
Normally,
normally
to
to
build
build
a
a
modal
modal
from
from
scratch,
scratch
you
you
need
need
a
a
full
full
screen
screen
back
back
dropped
dropped
in
in
a
a
window
window
that
that
sits
sits
on
on
top
top
of
of
it
it
and
and
a
a
bunch
bunch
of
of
hacked
hacked
together
together
JavaScript
javascript
to
to
show
show
and
and
hide
hide
these
these
elements.
elements
It's
it's
always
always
felt
felt
way
way
harder
harder
than
than
it
it
should
should
be.
be
But,
but
now,
now
we
we
have
have
the
the
dialog,
dialog
which
which
is
is
just
just
stay
stay
regular
regular
HTML
html
element
element
that
that
you
you
can
can
reference
reference
by
by
its
its
ID
id
and
and
has
has
a
a
few
few
built
built
in
in
JavaScript
javascript
methods
methods
to
to
show
show
and
and
hide
hide
it.
it
For
for
example,
example
to
to
show
show
the
the
modal,
modal
we
we
can
can
run
run
the
the
show
show
modal
modal
method,
method
and
and
it
it
magically
magically
appears
appears
in
in
the
the
UI
ui
with
with
a
a
backdrop.
backdrop
The
the
backdrop
backdrop
itself
itself
has
has
its
its
own
own
pseudo
pseudo
element
element
that
that
can
can
be
be
styled
styled
with
with
CSS.
css
We
we
can
can
then
then
close
close
the
the
modal
modal
by
by
I
i
either
either
submitting
submitting
a
a
form
form
inside
inside
of
of
it
it
with
with
a
a
method
method
of
of
dialogue
dialogue
or
or
by
by
calling
calling
its
its
closed
closed
method
method
on
on
some
some
other
other
event.
event
This
this
makes
makes
life
life
so
so
much
much
easier
easier
because
because
you
you
can
can
animate
animate
it
it
using
using
simple
simple
CSS
css
transitions.
transitions
And
and
speaking
speaking
of
of
making
making
your
your
life
life
easier,
easier
today's
today's
sponsor
sponsor
is
is
Clerk,
clerk
who
who
provides
provides
the
the
most
most
beautiful
beautiful
user
user
authentication
authentication
solution
solution
I've
i've
ever
ever
seen.
seen
By
by
dropping
dropping
a
a
few
few
components
components
into
into
your
your
favorite
favorite
full
full
stack
stack
framework,
framework
you
you
get
get
a
a
professional
professional
UI
ui
that
that
can
can
handle
handle
a
a
variety
variety
of
of
different
different
sign
sign
in
in
methods
methods
like
like
passwords,
passwords
magic
magic
links,
links
social
social
sign
sign
on,
on
and
and
will
will
to
to
factor
factor
off.
off
Once
once
signed
signed
in,
in
developers
developers
can
can
easily
easily
access
access
the
the
current
current
user
user
from
from
both
both
front
front
end
end
and
and
back
back
end
end
environments.
environments
In
in
addition,
addition
Clerk
clerk
provides
provides
the
the
UI
ui
for
for
users
users
to
to
customize
customize
their
their
own
own
data,
data
it
it
handles
handles
advanced
advanced
security
security
requirements
requirements
like
like
session
session
management
management
per
per
device,
device
features
features
that
that
could
could
take
take
weeks
weeks
to
to
roll
roll
out
out
on
on
your
your
own.
own
And
and
the
the
UI
ui
is
is
fully
fully
customizable.
customizable
I
i
had
had
a
a
lot
lot
of
of
fun
fun
switching
switching
from
from
retro
retro
to
to
neo
neo
brutalism.
brutalism
These
these
components
components
can
can
be
be
dropped
dropped
into
into
any
any
React
react
framework
framework
and
and
play
play
well
well
with
with
popular
popular
back
back
ends
ends
like
like
Firebase.
firebase
And
and
it
it
has
has
a
a
free
free
tier
tier
up
up
to
to
5,000
5,000
users.
users
Give
give
it
it
a
a
try
try
with
with
the
the
link
link
below.
below
Native
native
modal
modal
windows
windows
are
are
great,
great
but
but
another
another
feature
feature
that's
that's
annoying
annoying
to
to
implement
implement
that
that
is
is
the
the
popover.
popover
Luckily,
luckily
native
native
popovers
popovers
are
are
also
also
coming
coming
to
to
the
the
web.
web
As
as
of
of
today,
today
this
this
feature
feature
is
is
experimental,
experimental
so
so
you'll
you'll
need
need
to
to
enable
enable
it
it
with
with
a
a
flag,
flag
but,
but
basically,
basically
it
it
provides
provides
a
a
couple
couple
of
of
attributes
attributes
like
like
popovertarget
popovertarget
and
and
popover,
popover
which
which
allows
allows
you
you
to
to
show
show
and
and
hide
hide
content
content
without
without
the
the
need
need
to
to
write
write
any
any
JavaScript
javascript
or
or
tricky
tricky
CSS
css
that
that
uses
uses
focus
focus
goes
goes
with
with
them.
them
Just
just
match
match
the
the
element
element
ID
id
to
to
the
the
popover
popover
target,
target
and
and
you're
you're
done.
done
That'll
that'll
be
be
a
a
nice
nice
quality
quality
of
of
life
life
improvement,
improvement
but
but
the
the
next
next
feature,
feature
WebGPU,
webgpu
do
do
is
is
easily
easily
the
the
most
most
important
important
feature
feature
on
on
this
this
list
list
even
even
if
if
you
you
never
never
use
use
it.
it
It's
it's
basically
basically
the
the
successor
successor
to
to
WebGL,
webgl
allowing
allowing
browsers
browsers
and
and
web
web
applications
applications
to
to
take
take
advantage
advantage
of
of
GPU's.
gpu's
Used,
used
it
it
is
is
under
under
an
an
experimental
experimental
flag
flag
today,
today
but
but
many
many
libraries
libraries
like
like
Babylon
babylon
JS
js
fully
fully
supported
supported
already,
already
and
and
support
support
for
for
3
3
JS
js
is
is
underway.
underway
And
and
that
that
means
means
3
3
d
d
graphics
graphics
and
and
games
games
names
names
are
are
about
about
to
to
get
get
way
way
faster
faster
on
on
the
the
web.
web
I'm
i'm
using
using
it
it
right
right
now
now
with
with
Babylon.
babylon
Js,
js
and
and
as
as
you
you
can
can
see,
see
the
the
web
web
GPU
gpu
version
version
is
is
far
far
more
more
majestic.
majestic
And
and
not
not
is
is
that,
that
but
but
libraries
libraries
like
like
TensorFlow
tensorflow
JS
js
support
support
it,
it
which
which
means
means
developers
developers
will
will
be
be
able
able
to
to
build
build
web
web
apps
apps
where
where
end
end
users
users
can
can
train
train
machine
machine
learning
learning
models
models
without
without
the
the
need
need
to
to
download
download
a
a
bunch
bunch
of
of
Python
python
libraries
libraries
or
or
use
use
a
a
notebook
notebook
in
in
the
the
cloud.
cloud
That's
that's
pretty
pretty
cool,
cool
but
but
for
for
most
most
web
web
developers,
developers
the
the
biggest
biggest
challenge
challenge
is
is
writing
writing
good
good
CSS.
css
Next
next
on
on
the
the
list,
list
we
we
have
have
container
container
queries.
queries
To
to
build
build
sponsored
sponsored
websites,
websites
developers
developers
often
often
use
use
media
media
queries
queries
where
where
you
you
apply
apply
different
different
styles
styles
to
to
an
an
element
element
based
based
on
on
the
the
size
size
of
of
the
the
viewport.
viewport
The
the
problem
problem
is
is
that
that
in
in
many
many
cases,
cases
you're
you're
not
not
worried
worried
about
about
the
the
viewport,
viewport
but
but
you're
you're
worried
worried
about
about
the
the
parent
parent
container
container
of
of
an
an
element,
element
and
and
that's
that's
always
always
been
been
really
really
hard
hard
to
to
deal
deal
with
with
until
until
now.
now
With
with
container
container
queries,
queries
you
you
first
first
create
create
a
a
containment
containment
context
context
with
with
the
the
container
container
type
type
property,
property
then
then
from
from
there,
there
you
you
can
can
use
use
the
the
container
container
at
at
rule,
rule
which
which
can
can
apply
apply
different
different
styles
styles
based
based
on
on
the
the
nearest
nearest
ancestor
ancestor
container.
container
In
in
addition,
addition
there
there
are
are
a
a
bunch
bunch
of
of
new
new
units
units
like
like
container
container
query
query
width
width
and
and
height
height
that
that
allow
allow
you
you
to
to
compute
compute
the
the
proper
proper
size
size
of
of
the
the
children
children
directly
directly
in
in
the
the
CSS.
css
In
in
the
the
past,
past
you
you
might
might
run
run
into
into
situations
situations
where
where
you
you
have
have
to
to
actually
actually
get
get
the
the
bounding
bounding
box
box
from
from
JavaScript
javascript
then
then
solves
solves
some
some
crazy
crazy
differential
differential
equations,
equations
you
you
get
get
the
the
div
div
in
in
the
the
right
right
place.
place
And
and
you'll
you'll
be
be
happy
happy
to
to
know
know
that
that
there's
there's
an
an
official
official
Tailwind
tailwind
container
container
queries
queries
package
package
that
that
allows
allows
you
you
to
to
declare
declare
these
these
containers
containers
directly
directly
in
in
your
your
HTML.
html
Another
another
cool
cool
CSS
css
feature
feature
you
you
might
might
not
not
know
know
about
about
is
is
color
color
mix.
mix
I've
i've
used
used
tools
tools
like
like
Sass
sass
to
to
mix
mix
colors
colors
in
in
the
the
past,
past
but
but
now
now
we
we
we
we
can
can
do
do
it
it
natively
natively
in
in
CSS.
css
It's
it's
a
a
function
function
that
that
takes
takes
2
2
color
color
arguments
arguments
and
and
mixes
mixes
them
them
in
in
a
a
specified
specified
color
color
space.
space
Like
like
in
in
this
this
example,
example
if
if
we
we
mix
mix
red
red
and
and
blue
blue
in
in
an
an
RGB
rgb
color
color
space,
space
we
we
get
get
purple
purple
as
as
a
a
result.
result
That's
that's
not
not
very
very
useful
useful
on
on
its
its
own,
own
but
but
it
it
makes
makes
it
it
easier
easier
to
to
do
do
effects
effects
like
like
this
this
where
where
I
i
have
have
a
a
list
list
of
of
items
items
that
that
mix
mix
red
red
and
and
white
white
together
together
to
to
create
create
a
a
gradient
gradient
effect
effect
that
that
occurs
occurs
for
for
multiple
multiple
elements.
elements
But,
but
speaking
speaking
of
of
features
features
from
from
Sass,
sass
another
another
huge
huge
one
one
is
is
CSS
css
nesting.
nesting
I
i
can't
can't
believe
believe
it's
it's
taken
taken
this
this
long,
long
but
but
it's
it's
almost
almost
fully
fully
supported
supported
in
in
all
all
in
in
browsers,
browsers
it's
it's
purely
purely
an
an
ergonomic
ergonomic
feature
feature
that
that
allows
allows
you
you
to
to
write
write
styles
styles
in
in
a
a
far
far
more
more
concise
concise
and
and
readable
readable
way
way
by
by
nesting
nesting
them
them
inside
inside
a
a
parent
parent
just
just
like
like
a
a
kangaroo
kangaroo
in
in
a
a
pouch,
pouch
which
which
eliminates
eliminates
tons
tons
of
of
plicated
plicated
class
class
names
names
from
from
your
your
code.
code
But
but
another
another
very
very
interesting
interesting
new
new
feature
feature
is
is
color
color
fonts,
fonts
also
also
known
known
as
as
chromatic
chromatic
fonts,
fonts
that
that
use
use
multiple
multiple
colors
colors
inside
inside
of
of
a
a
single
single
glyph.
glyph
This
this
opens
opens
up
up
a
a
whole
whole
new
new
world
world
of
of
possibilities,
possibilities
because
because
now
now
you
you
can
can
customize
customize
the
the
entire
entire
color
color
palette
palette
of
of
a
a
font
font
and
and
create
create
some
some
crazy
crazy
effects
effects
like
like
3
3
d
d
gradients.
gradients
What's
what's
cool
cool
about
about
this
this
is
is
that
that
they're
they're
still
still
interpreted
interpreted
as
as
regular
regular
fonts
fonts
in
in
the
the
browser.
browser
Whereas
whereas
previously,
previously
stuff
stuff
like
like
this
this
would
would
only
only
be
be
possible
possible
with
with
your
your
own
own
custom
custom
vector
vector
graphics.
graphics
There
there
are
are
only
only
a
a
few
few
color
color
fonts
fonts
at
at
the
the
moment,
moment
but
but
it
it
will
will
be
be
interesting
interesting
see
see
what
what
else
else
comes
comes
out
out
in
in
the
the
future.
future
But
but
the
the
next
next
thing
thing
I
i
wanna
wanna
look
look
at
at
is
is
performance
performance
and
and
the
the
new
new
Web
web
Vitals
vitals
plugin
plugin
for
for
Chrome.
chrome
You
you
can
can
measure
measure
the
the
performance
performance
of
of
any
any
website
website
by
by
running
running
a
a
Lighthouse
lighthouse
report,
report
but
but
the
the
process
process
is
is
kind
kind
of
of
slow
slow
and
and
cumbersome.
cumbersome
This
this
plugin
plugin
will
will
console
console
log
log
performance
performance
metrics
metrics
as
as
you
you
use
use
a
a
website,
website
and
and
it
it
can
can
pinpoint
pinpoint
performance
performance
issues
issues
like
like
layout
layout
shift
shift
can
can
point
point
you
you
to
to
the
the
exact
exact
element
element
that's
that's
causing
causing
the
the
problem.
problem
There's
there's
a
a
ton
ton
of
of
things
things
to
to
consider
consider
when
when
it
it
comes
comes
to
to
performance,
performance
and
and
I
i
have
have
a
a
full
full
video
video
on
on
that
that
topic
topic
on
on
my
my
second
second
channel
channel
if
if
you
you
wanna
wanna
learn
learn
war.
war
But,
but
now
now
it's
it's
time
time
to
to
talk
talk
about
about
some
some
new
new
JavaScript
javascript
features
features
like
like
array
array
at.
at
If
if
you
you
come
come
from
from
a
a
language
language
like
like
Python
python
or
or
most
most
other
other
languages
languages
for
for
that
that
matter,
matter
you
you
might
might
find
find
it
it
er,
er
that
that
to
to
get
get
the
the
last
last
element
element
in
in
a
a
JavaScript
javascript
array,
array
you
you
have
have
to
to
take
take
the
the
array
array
length
length
and
and
subtract
subtract
1.
1
You
you
can't
can't
just
just
use
use
negative
negative
one
one
or
or
last
last
until
until
now
now
because
because
at
at
makes
makes
this
this
is
is
code
code
obsolete.
obsolete
Now,
now
we
we
can
can
just
just
say
say
at
at
negative
negative
one
one
to
to
get
get
the
the
last
last
element,
element
or
or
second
second
to
to
last
last
with
with
negative
negative
2.
2
That's
that's
pretty
pretty
cool,
cool
but
but
deep
deep
copy
copy
is
is
even
even
more
more
useful.
useful
One
one
thing
thing
you'll
you'll
eventually
eventually
they
they
have
have
to
to
do
do
is
is
copy
copy
an
an
object.
object
In
in
JavaScript,
javascript
objects
objects
are
are
passed
passed
by
by
reference,
reference
which
which
means
means
if
if
you
you
assign
assign
one
one
to
to
a
a
new
new
variable,
variable
you're
you're
still
still
going
going
to
to
reference
reference
the
the
same
same
original
original
object.
object
If
if
you
you
modify
modify
a
a
property
property
on
on
b,
b
it
it
will
will
also
also
modify
modify
the
the
property
property
on
on
a
a
because
because
they're
they're
the
the
same
same
object
object
reference.
reference
Now
now
most
most
of
of
the
the
time,
time
we
we
use
use
object
object
assign
assign
or
or
the
the
spread
spread
syntax
syntax
is
is
to
to
create
create
a
a
new
new
object,
object
but
but
the
the
problem
problem
here
here
is
is
that
that
it
it
only
only
does
does
a
a
shallow
shallow
copy.
copy
And
and
that
that
means
means
if
if
an
an
object
object
has
has
any
any
nested
nested
objects
objects
on
on
it,
it
those
those
nested
nested
objects
objects
x
x
will
will
still
still
maintain
maintain
the
the
reference
reference
to
to
their
their
original
original
object,
object
but
but
in
in
many
many
cases
cases
that's
that's
not
not
what
what
you
you
want.
want
And
and
what
what
developers
developers
have
have
been
been
doing
doing
for
for
years
years
is
is
using
using
JSON
json
stringify
stringify
to
to
turn
turn
the
the
object
object
into
into
a
a
string,
string
and
and
then
then
JSON
json
parse
parse
to
to
parse
parse
it
it
back
back
into
into
an
an
object.
object
That's
that's
a
a
completely
completely
ridiculous
ridiculous
hack
hack
that
that
creates
creates
a
a
new
new
object
object
reference
reference
in
in
memory,
memory
but
but
I'm
i'm
happy
happy
to
to
report
report
that
that
life
life
doesn't
doesn't
have
have
to
to
be
be
this
this
way.
way
There's
there's
now
now
a
a
global
global
function
function
called
called
structured
structured
clone
clone
that
that
can
can
clone
clone
an
an
object
object
into
into
a
a
new
new
reference,
reference
making
making
it
it
way
way
easier
easier
to
to
transfer
transfer
data
data
from
from
one
one
object
object
to
to
another.
another
Bruh.
bruh
And
and
that
that
gives
gives
us
us
10
10
awesome
awesome
new
new
web
web
features
features
to
to
take
take
advantage
advantage
of.
of
But
but
wait,
wait
there's
there's
more.
more
Like
like
the
the
transform
transform
stream
stream
interface
interface
that
that
allows
allows
you
you
to
to
pipe
pipe
1
1
fetch
fetch
call
call
into
into
there.
there
Or
or
how
how
about
about
import
import
maps
maps
that
that
allow
allow
you
you
to
to
declare
declare
a
a
bunch
bunch
of
of
JavaScript
javascript
modules
modules
all
all
at
at
once?
once
And
and
I
i
didn't
didn't
even
even
mention
mention
that
that
there's
there's
a
a
TC
tc
39
39
proposal
proposal
that
that
will
will
allow
allow
you
you
to
to
import
import
JSON
json
directly
directly
into
into
a
a
JavaScript
javascript
file
file
in
in
the
the
future.
future
Oh,
oh
and
and
let's
let's
not
not
forget
forget
that
that
we
we
also
also
now
now
have
have
individual
individual
CSS
css
transform
transform
properties,
properties
allowing
allowing
you
you
modifies
modifies
scale,
scale
translation,
translation
and
and
rotation
rotation
more
more
easily.
easily
And
and
we
we
have
have
new
new
trigonometric
trigonometric
functions
functions
in
in
CSS
css
like
like
sine,
sine
cosine,
cosine
and
and
tangent,
tangent
which
which
is
is
incredibly
incredibly
useful
useful
if
if
you
you
have
have
circles
circles
in
in
your
your
time.
time
We
we
also
also
now
now
have
have
a
a
CSS
css
initial
initial
letter
letter
property,
property
which
which
you
you
might
might
use
use
to
to
make
make
the
the
first
first
letter
letter
in
in
an
an
article
article
bigger
bigger
just
just
like
like
in
in
a
a
magazine.
magazine
I
i
should
should
also
also
probably
probably
mention
mention
new
new
viewport
viewport
units
units
designed
designed
specifically
specifically
for
for
mobile,
mobile
that
that
can
can
take
take
into
into
account
account
if
if
toolbars
toolbars
are
are
opened
opened
or
or
not.
not
Also,
also
let's
let's
not
not
forget
forget
focus
focus
visible,
visible
which
which
is
is
a
a
more
more
accessibility
accessibility
friendly
friendly
way
way
to
to
handle
handle
focus
focus
in
in
form
form
inputs
inputs
and
and
buttons.
buttons
Speaking
speaking
of
of
focus,
focus
there's
there's
also
also
now
now
an
an
inert
inert
property
property
that
that
you
you
can
can
use
use
on
on
elements
elements
to
to
show
show
they
they
lack
lack
the
the
ability
ability
to
to
move
move
or
or
be
be
focused
focused
on.
on
That
that
one's
one's
kinda
kinda
boring,
boring
but
but
a
a
way
way
more
more
exciting
exciting
experimental
experimental
technology
technology
is
is
the
the
view
view
transitions
transitions
API,
api
which
which
allows
allows
developers
developers
to
to
create
create
animations
animations
between
between
web
web
pages
pages
to
to
make
make
websites
websites
behave
behave
more
more
like
like
mobile
mobile
apps
apps
helps
helps
to
to
keep
keep
the
the
user
user
in
in
context.
context
And
and
finally,
finally
we
we
have
have
animation
animation
timeline.
timeline
As
as
of
of
today,
today
it's
it's
experimental,
experimental
but
but
it
it
gives
gives
you
you
the
the
ability
ability
to
to
control
control
animations
animations
based
based
on
on
the
the
scroll
scroll
position
position
in
in
the
the
browser,
browser
a
a
feature
feature
that
that
everybody
everybody
does
does
but
but
always
always
feels
feels
way
way
more
more
complicated
complicated
than
than
it
it
should
should
be.
be
And
and
with
with
that,
that
we've
we've
looked
looked
at
at
21
21
new
new
features
features
on
on
the
the
web.
web
If
if
you
you
knew
knew
every
every
single
single
one
one
of
of
them,
them
congratulations.
congratulations
You
you
just
just
won
won
the
the
grand
grand
prize.
prize
One
one
free
free
web
web
development
development
job
job
redeemable
redeemable
at
at
the
the
company
company
of
of
your
your
choosing.
choosing
Just
just
present
present
the
the
certificate
certificate
during
during
your
your
interview,
interview
and
and
they
they
should
should
let
let
you
you
write
write
in,
in
no
no
questions
questions
asked.
asked
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The web platform has various features, including a native HTML dialog, popover, UI, and a WebGPU feature called " ratio of elements." There is also a new plugin called WebGL, which allows developers to create sponsored websites and mix colors in CSS. The speaker then discusses new features and functionality, including popover features, container queries, and the use of WebGL for web applications and Chrome. They also mention a new JavaScript plugin called structured clone and a new plugin for web development, including the ability to create objects and transform pages, display images on websites, and obtain a certificate for web developers.
21 Awesome Web Features you’re not using yet
If you're a web developer, be prepared to have your mind blown. Did you know it takes longer to say www than it does to just say World Wide Web, and that one little change could add 100 of milliseconds to your productivity. Had I known that 15 years ago, I'd probably have my own space exploration company by now, but instead, I'm still just building crappy websites. Speaking of which, while while we've all been distracted by the terrifyingly overhyped rise of artificial intelligence, the web platform has landed some game changing new features that you probably haven't heard of yet and will change the way we build websites forever, and that's not even hyperbole. The first feature on this list is huge, the native HTML dialog. I first mentioned this feature about a year ago, but now it's fully ported on all major browsers. And what it does is make it way easier to build your own modal windows. Normally, to build a modal from scratch, you need a full screen back dropped in a window that sits on top of it and a bunch of hacked together JavaScript to show and hide these elements. It's always felt way harder than it should be. But, now, we have the dialog, which is just stay regular HTML element that you can reference by its ID and has a few built in JavaScript methods to show and hide it. For example, to show the modal, we can run the show modal method, and it magically appears in the UI with a backdrop. The backdrop itself has its own pseudo element that can be styled with CSS. We can then close the modal by I either submitting a form inside of it with a method of dialogue or by calling its closed method on some other event. This makes life so much easier because you can animate it using simple CSS transitions. And speaking of making your life easier, today's sponsor is Clerk, who provides the most beautiful user authentication solution I've ever seen. By dropping a few components into your favorite full stack framework, you get a professional UI that can handle a variety of different sign in methods like passwords, magic links, social sign on, and will to factor off. Once signed in, developers can easily access the current user from both front end and back end environments. In addition, Clerk provides the UI for users to customize their own data, it handles advanced security requirements like session management per device, features that could take weeks to roll out on your own. And the UI is fully customizable. I had a lot of fun switching from retro to neo brutalism. These components can be dropped into any React framework and play well with popular back ends like Firebase. And it has a free tier up to 5,000 users. Give it a try with the link below. Native modal windows are great, but another feature that's annoying to implement that is the popover. Luckily, native popovers are also coming to the web. As of today, this feature is experimental, so you'll need to enable it with a flag, but, basically, it provides a couple of attributes like popovertarget and popover, which allows you to show and hide content without the need to write any JavaScript or tricky CSS that uses focus goes with them. Just match the element ID to the popover target, and you're done. That'll be a nice quality of life improvement, but the next feature, WebGPU, do is easily the most important feature on this list even if you never use it. It's basically the successor to WebGL, allowing browsers and web applications to take advantage of GPU's. Used, it is under an experimental flag today, but many libraries like Babylon JS fully supported already, and support for 3 JS is underway. And that means 3 d graphics and games names are about to get way faster on the web. I'm using it right now with Babylon. Js, and as you can see, the web GPU version is far more majestic. And not is that, but libraries like TensorFlow JS support it, which means developers will be able to build web apps where end users can train machine learning models without the need to download a bunch of Python libraries or use a notebook in the cloud. That's pretty cool, but for most web developers, the biggest challenge is writing good CSS. Next on the list, we have container queries. To build sponsored websites, developers often use media queries where you apply different styles to an element based on the size of the viewport. The problem is that in many cases, you're not worried about the viewport, but you're worried about the parent container of an element, and that's always been really hard to deal with until now. With container queries, you first create a containment context with the container type property, then from there, you can use the container at rule, which can apply different styles based on the nearest ancestor container. In addition, there are a bunch of new units like container query width and height that allow you to compute the proper size of the children directly in the CSS. In the past, you might run into situations where you have to actually get the bounding box from JavaScript then solves some crazy differential equations, you get the div in the right place. And you'll be happy to know that there's an official Tailwind container queries package that allows you to declare these containers directly in your HTML. Another cool CSS feature you might not know about is color mix. I've used tools like Sass to mix colors in the past, but now we we can do it natively in CSS. It's a function that takes 2 color arguments and mixes them in a specified color space. Like in this example, if we mix red and blue in an RGB color space, we get purple as a result. That's not very useful on its own, but it makes it easier to do effects like this where I have a list of items that mix red and white together to create a gradient effect that occurs for multiple elements. But, speaking of features from Sass, another huge one is CSS nesting. I can't believe it's taken this long, but it's almost fully supported in all in browsers, it's purely an ergonomic feature that allows you to write styles in a far more concise and readable way by nesting them inside a parent just like a kangaroo in a pouch, which eliminates tons of plicated class names from your code. But another very interesting new feature is color fonts, also known as chromatic fonts, that use multiple colors inside of a single glyph. This opens up a whole new world of possibilities, because now you can customize the entire color palette of a font and create some crazy effects like 3 d gradients. What's cool about this is that they're still interpreted as regular fonts in the browser. Whereas previously, stuff like this would only be possible with your own custom vector graphics. There are only a few color fonts at the moment, but it will be interesting see what else comes out in the future. But the next thing I wanna look at is performance and the new Web Vitals plugin for Chrome. You can measure the performance of any website by running a Lighthouse report, but the process is kind of slow and cumbersome. This plugin will console log performance metrics as you use a website, and it can pinpoint performance issues like layout shift can point you to the exact element that's causing the problem. There's a ton of things to consider when it comes to performance, and I have a full video on that topic on my second channel if you wanna learn war. But, now it's time to talk about some new JavaScript features like array at. If you come from a language like Python or most other languages for that matter, you might find it er, that to get the last element in a JavaScript array, you have to take the array length and subtract 1. You can't just use negative one or last until now because at makes this is code obsolete. Now, we can just say at negative one to get the last element, or second to last with negative 2. That's pretty cool, but deep copy is even more useful. One thing you'll eventually they have to do is copy an object. In JavaScript, objects are passed by reference, which means if you assign one to a new variable, you're still going to reference the same original object. If you modify a property on b, it will also modify the property on a because they're the same object reference. Now most of the time, we use object assign or the spread syntax is to create a new object, but the problem here is that it only does a shallow copy. And that means if an object has any nested objects on it, those nested objects x will still maintain the reference to their original object, but in many cases that's not what you want. And what developers have been doing for years is using JSON stringify to turn the object into a string, and then JSON parse to parse it back into an object. That's a completely ridiculous hack that creates a new object reference in memory, but I'm happy to report that life doesn't have to be this way. There's now a global function called structured clone that can clone an object into a new reference, making it way easier to transfer data from one object to another. Bruh. And that gives us 10 awesome new web features to take advantage of. But wait, there's more. Like the transform stream interface that allows you to pipe 1 fetch call into there. Or how about import maps that allow you to declare a bunch of JavaScript modules all at once? And I didn't even mention that there's a TC 39 proposal that will allow you to import JSON directly into a JavaScript file in the future. Oh, and let's not forget that we also now have individual CSS transform properties, allowing you modifies scale, translation, and rotation more easily. And we have new trigonometric functions in CSS like sine, cosine, and tangent, which is incredibly useful if you have circles in your time. We also now have a CSS initial letter property, which you might use to make the first letter in an article bigger just like in a magazine. I should also probably mention new viewport units designed specifically for mobile, that can take into account if toolbars are opened or not. Also, let's not forget focus visible, which is a more accessibility friendly way to handle focus in form inputs and buttons. Speaking of focus, there's also now an inert property that you can use on elements to show they lack the ability to move or be focused on. That one's kinda boring, but a way more exciting experimental technology is the view transitions API, which allows developers to create animations between web pages to make websites behave more like mobile apps helps to keep the user in context. And finally, we have animation timeline. As of today, it's experimental, but it gives you the ability to control animations based on the scroll position in the browser, a feature that everybody does but always feels way more complicated than it should be. And with that, we've looked at 21 new features on the web. If you knew every single one of them, congratulations. You just won the grand prize. One free web development job redeemable at the company of your choosing. Just present the certificate during your interview, and they should let you write in, no questions asked. Thanks for watching, and I will see you in the next one.
The web platform has various features, including a native HTML dialog, popover, UI, and a WebGPU feature called " ratio of elements." There is also a new plugin called WebGL, which allows developers to create sponsored websites and mix colors in CSS. The speaker then discusses new features and functionality, including popover features, container queries, and the use of WebGL for web applications and Chrome. They also mention a new JavaScript plugin called structured clone and a new plugin for web development, including the ability to create objects and transform pages, display images on websites, and obtain a certificate for web developers.

        [INST]
        You are youtuber called Fireship you make engaging high-intensity and entertaining coding tutorials and tech news. 
        you covers a wide range of topics relevant to programmers, aiming to help them learn and improve their skills quickly.
        
        Given the title of the video : 21 Awesome Web Features you’re not using yet 
        and a small summary : The web platform has various features, including a native HTML dialog, popover, UI, and a WebGPU feature called " ratio of elements." There is also a new plugin called WebGL, which allows developers to create sponsored websites and mix colors in CSS. The speaker then discusses new features and functionality, including popover features, container queries, and the use of WebGL for web applications and Chrome. They also mention a new JavaScript plugin called structured clone and a new plugin for web development, including the ability to create objects and transform pages, display images on websites, and obtain a certificate for web developers.
        [/INST]
        
        Generate the video : If you're a web developer, be prepared to have your mind blown. Did you know it takes longer to say www than it does to just say World Wide Web, and that one little change could add 100 of milliseconds to your productivity. Had I known that 15 years ago, I'd probably have my own space exploration company by now, but instead, I'm still just building crappy websites. Speaking of which, while while we've all been distracted by the terrifyingly overhyped rise of artificial intelligence, the web platform has landed some game changing new features that you probably haven't heard of yet and will change the way we build websites forever, and that's not even hyperbole. The first feature on this list is huge, the native HTML dialog. I first mentioned this feature about a year ago, but now it's fully ported on all major browsers. And what it does is make it way easier to build your own modal windows. Normally, to build a modal from scratch, you need a full screen back dropped in a window that sits on top of it and a bunch of hacked together JavaScript to show and hide these elements. It's always felt way harder than it should be. But, now, we have the dialog, which is just stay regular HTML element that you can reference by its ID and has a few built in JavaScript methods to show and hide it. For example, to show the modal, we can run the show modal method, and it magically appears in the UI with a backdrop. The backdrop itself has its own pseudo element that can be styled with CSS. We can then close the modal by I either submitting a form inside of it with a method of dialogue or by calling its closed method on some other event. This makes life so much easier because you can animate it using simple CSS transitions. And speaking of making your life easier, today's sponsor is Clerk, who provides the most beautiful user authentication solution I've ever seen. By dropping a few components into your favorite full stack framework, you get a professional UI that can handle a variety of different sign in methods like passwords, magic links, social sign on, and will to factor off. Once signed in, developers can easily access the current user from both front end and back end environments. In addition, Clerk provides the UI for users to customize their own data, it handles advanced security requirements like session management per device, features that could take weeks to roll out on your own. And the UI is fully customizable. I had a lot of fun switching from retro to neo brutalism. These components can be dropped into any React framework and play well with popular back ends like Firebase. And it has a free tier up to 5,000 users. Give it a try with the link below. Native modal windows are great, but another feature that's annoying to implement that is the popover. Luckily, native popovers are also coming to the web. As of today, this feature is experimental, so you'll need to enable it with a flag, but, basically, it provides a couple of attributes like popovertarget and popover, which allows you to show and hide content without the need to write any JavaScript or tricky CSS that uses focus goes with them. Just match the element ID to the popover target, and you're done. That'll be a nice quality of life improvement, but the next feature, WebGPU, do is easily the most important feature on this list even if you never use it. It's basically the successor to WebGL, allowing browsers and web applications to take advantage of GPU's. Used, it is under an experimental flag today, but many libraries like Babylon JS fully supported already, and support for 3 JS is underway. And that means 3 d graphics and games names are about to get way faster on the web. I'm using it right now with Babylon. Js, and as you can see, the web GPU version is far more majestic. And not is that, but libraries like TensorFlow JS support it, which means developers will be able to build web apps where end users can train machine learning models without the need to download a bunch of Python libraries or use a notebook in the cloud. That's pretty cool, but for most web developers, the biggest challenge is writing good CSS. Next on the list, we have container queries. To build sponsored websites, developers often use media queries where you apply different styles to an element based on the size of the viewport. The problem is that in many cases, you're not worried about the viewport, but you're worried about the parent container of an element, and that's always been really hard to deal with until now. With container queries, you first create a containment context with the container type property, then from there, you can use the container at rule, which can apply different styles based on the nearest ancestor container. In addition, there are a bunch of new units like container query width and height that allow you to compute the proper size of the children directly in the CSS. In the past, you might run into situations where you have to actually get the bounding box from JavaScript then solves some crazy differential equations, you get the div in the right place. And you'll be happy to know that there's an official Tailwind container queries package that allows you to declare these containers directly in your HTML. Another cool CSS feature you might not know about is color mix. I've used tools like Sass to mix colors in the past, but now we we can do it natively in CSS. It's a function that takes 2 color arguments and mixes them in a specified color space. Like in this example, if we mix red and blue in an RGB color space, we get purple as a result. That's not very useful on its own, but it makes it easier to do effects like this where I have a list of items that mix red and white together to create a gradient effect that occurs for multiple elements. But, speaking of features from Sass, another huge one is CSS nesting. I can't believe it's taken this long, but it's almost fully supported in all in browsers, it's purely an ergonomic feature that allows you to write styles in a far more concise and readable way by nesting them inside a parent just like a kangaroo in a pouch, which eliminates tons of plicated class names from your code. But another very interesting new feature is color fonts, also known as chromatic fonts, that use multiple colors inside of a single glyph. This opens up a whole new world of possibilities, because now you can customize the entire color palette of a font and create some crazy effects like 3 d gradients. What's cool about this is that they're still interpreted as regular fonts in the browser. Whereas previously, stuff like this would only be possible with your own custom vector graphics. There are only a few color fonts at the moment, but it will be interesting see what else comes out in the future. But the next thing I wanna look at is performance and the new Web Vitals plugin for Chrome. You can measure the performance of any website by running a Lighthouse report, but the process is kind of slow and cumbersome. This plugin will console log performance metrics as you use a website, and it can pinpoint performance issues like layout shift can point you to the exact element that's causing the problem. There's a ton of things to consider when it comes to performance, and I have a full video on that topic on my second channel if you wanna learn war. But, now it's time to talk about some new JavaScript features like array at. If you come from a language like Python or most other languages for that matter, you might find it er, that to get the last element in a JavaScript array, you have to take the array length and subtract 1. You can't just use negative one or last until now because at makes this is code obsolete. Now, we can just say at negative one to get the last element, or second to last with negative 2. That's pretty cool, but deep copy is even more useful. One thing you'll eventually they have to do is copy an object. In JavaScript, objects are passed by reference, which means if you assign one to a new variable, you're still going to reference the same original object. If you modify a property on b, it will also modify the property on a because they're the same object reference. Now most of the time, we use object assign or the spread syntax is to create a new object, but the problem here is that it only does a shallow copy. And that means if an object has any nested objects on it, those nested objects x will still maintain the reference to their original object, but in many cases that's not what you want. And what developers have been doing for years is using JSON stringify to turn the object into a string, and then JSON parse to parse it back into an object. That's a completely ridiculous hack that creates a new object reference in memory, but I'm happy to report that life doesn't have to be this way. There's now a global function called structured clone that can clone an object into a new reference, making it way easier to transfer data from one object to another. Bruh. And that gives us 10 awesome new web features to take advantage of. But wait, there's more. Like the transform stream interface that allows you to pipe 1 fetch call into there. Or how about import maps that allow you to declare a bunch of JavaScript modules all at once? And I didn't even mention that there's a TC 39 proposal that will allow you to import JSON directly into a JavaScript file in the future. Oh, and let's not forget that we also now have individual CSS transform properties, allowing you modifies scale, translation, and rotation more easily. And we have new trigonometric functions in CSS like sine, cosine, and tangent, which is incredibly useful if you have circles in your time. We also now have a CSS initial letter property, which you might use to make the first letter in an article bigger just like in a magazine. I should also probably mention new viewport units designed specifically for mobile, that can take into account if toolbars are opened or not. Also, let's not forget focus visible, which is a more accessibility friendly way to handle focus in form inputs and buttons. Speaking of focus, there's also now an inert property that you can use on elements to show they lack the ability to move or be focused on. That one's kinda boring, but a way more exciting experimental technology is the view transitions API, which allows developers to create animations between web pages to make websites behave more like mobile apps helps to keep the user in context. And finally, we have animation timeline. As of today, it's experimental, but it gives you the ability to control animations based on the scroll position in the browser, a feature that everybody does but always feels way more complicated than it should be. And with that, we've looked at 21 new features on the web. If you knew every single one of them, congratulations. You just won the grand prize. One free web development job redeemable at the company of your choosing. Just present the certificate during your interview, and they should let you write in, no questions asked. Thanks for watching, and I will see you in the next one.
        