21 Awesome Web Features you’re not using yet

Does your app need authentication? Check out Clerk - their platform is super impressive clerk.com

Fireship rolling out videos so fast, even javascript frameworks can't keep up.

This is insane, I can't wait to use all of these features in 9 years when they're fully implemented and everyone's browser is updated

0:00 Intro
0:30 Native HTML Dialog
1:20 Sponsor
2:03 Popover
2:29 WebGPU
3:11 Container Queries
4:00 Color-Mix
4:28 CSS Nesting
4:44 Color Fonts
5:11 Vitals Extension
5:35 Array. prototype. at
5:57 Deep Copy
6:56 TransformStream
7:01 Import maps
7:06 Json Imports
7:12 Transform Props
7:19 Trig Functions
7:26 Initial Letter
7:32 Viewport Units
7:38 :focus-visible
7:45 Inert Prop
7:54 View Transition API
8:02 Animation-Timeline
8:14 Outro

That structured clone for objects one is definitely one I’ll be using a lot. And will probably help new devs. It’s not as hard now that I know what reference types are. But at the beginning I remember having a hard time tracking down bugs due to me changing objects directly

Best addition for me is #17 with the new viewport units. Implementing a fullscreen design that considers the toolbar is actually possible now.

There's also those non-mutating functions of arrays such as .toSorted() or .toReversed() that do the same as the equivalent but they make a full copy of the object

I love seeing native JS and HTML absorbing framework features. Half of the reason that JS frameworks experience so much churn is that they're constantly trying to make up for the lack of native features.

I always thought json imports using asserts keyword was supported everywhere but I guess it's supported by only chrome. Excited about view transitions api, been waiting for it and hopefully css-intrinsic-size and content-visibility get major support so we can finally get rid of virtualized tables just like we did with dialog and need for js based modals.

Hi @fireship, a correction: deep copy, more specific struturedClone is browser / window specific method, not part of ES / ECMAScript. As such will not be available in js runtime like nodejs, they have to implement.
And this feature exist and available to all browser almost more than two yrs, because already use it last yr.
And others few js things mention may also be browser / client specific too. ;)
And you forget to mention another cool feature very useful also like dialog, which is details ( to mimic accordions in booostrap), this exist since 2020 and already use in my website.

2:54 "... and the WebGPU version is far more majestic!"
Me, who sees no difference: "Oh, yes indeed!"

Very nice to be kept up-to-date this way, please do more of this :D

I wonder how libraries will be updated with these new web standard features. I use certain modal libraries for example and hope they will either not be needed or be way smaller as they won't need to recreate a lot of the features. Could you make a video on when to write it yourself vs using a library?

06:48 I wouldn't be surprised if _structuredClone_ is basically just:
const structuredClone = (object) => JSON.parse(JSON.stringify(object))

Inert is such an awesome feature in terms of accessibility - it can completely hide entire sections of e.g. a navigation without having to toggle tabindex on every single focusable element... Also one of the cool things included in Dialog (it will give you inert out of the box)

The first one got me crying of happiness. Building modals was always so annoying and time consuming! I’m excited about many of these new features!

If I had known the new native HTML dialog and popup features just two weeks earlier, it would have made my life so much easier!

TL;DR
1. 0:32 - element
2. 2:08 - popover attributes
3. 2:30 - WebGPU
4. 3:12 - container queries
5. 4:00 - color-mix
6. 4:28 - CSS Nesting
7. 4:46 - Color Fonts
8. 5:12 - Web Vitals Extension
9. 5:37 - Array.prototype .at
10. 5:59 - Deep Copy (structuredClone)
11. 6:57 - TransformStream
12. 7:02 - import maps
13. 7:06 - json imports
14. 7:12 - transform props
15. 7:19 - trig functions
16. 7:26 - CSS initial-letter property
17. 7:33 - viewport unit (svh, lvh)
18. 7:39 - :focus-visible
19. 7:45 - inert attributes
20. 7:54 - View Transitions API
21. 8:03 - animation-timeline

I think it’s a really good time to be a web developer. These are some great features and I love that the browsers have started to work together to support this stuff across the board

I remember writing my own deepcopy function using recursion to create a decoupled new object.
JS has some really stupid holes in the development tooling. Deepcopy and the last array element accessing are great examples.

This sounds awesome. Many of the CSS improvements remind me of Sass. And a lot of the js improvements remind me of lodash.
Edit: Thank you for a gpt-free video.

Wow, so much new features making coding easier, Thanks Fireship!

It's insane that it took so long to get those new viewport units, I remember I used to do such weird hacks and still do to fix this issue on mobile

The only Clip-Share channel so far where I fear if I need to slow down the playback speed.
Anyway, thanks for keeping us updated and I love your video styles. ❤

Look at how realistic these AI-made videos are!

I asked for a sticky pseudo class in the official Google Chrome Developers channel, this will be useful to check if an element is sticky or not and apply styles accordingly. Surprisingly Una Cravets replied and said sticky will be the first state implemented for state queries

Very engaging, high quality videos Fireship! You are doing great!

I'm still a CS undergrad, just finished my first project on web dev after binging a lot of your videos since the doctor speaks so slowlllyyyy, and I can tell how simply insanely convenient this is.
I remember when I tried coding first, it was C# and Visual Studio. It was extremely hard and tedious, then they released Vs Code and It was so easy.

This(dialog) is (was) an actual problem I was solving. Glad I subscribed to this channel
This video is a gem

Very nice.
Am currently hacking a hot mess together in Laravel fighting with the JS at times - some of these features are exactly what I need.

Finally, some good css updates!!!
I have been waiting for containers and nested css!
The new sizes are good to, mobile was always a pain to deal with the bars.

Being updated with a summary of newest web features is awesome! Thanks for that

My favorite thing about the dialog element is native focus trapping

Of all of those features, I think structuredClone is the coolest. I can't count how many times I've used the old JSON trick to copy objects.

Some great features there that I'll use are dialog, color-mix and structuredClone. I already knew about dialog.

I absolutely love your content. I am a passionate front-end web developer and this is fantastic!

I'm wondering how you able to track all these developments and roll out videos so quickly. A video around keeping track of all these things would be great for Fireship Community..!!

After years of struggle with things like modals (dialogs), notifications, carousel, picker and such. I finally developed two npm packages for vue and React to make life easier.
"gamon-react" and "gamon-vue"

Fantastic. How do you get updated on all these features to be able to compile such an awesome video? I want the source!!!

i've heard about most of these but it's amazing to know that they're finally supported everywhere

I love your videos man, it's always cool content that I actually don't know. It's fast but not overwhelming, and it's also funny. keep it up !

Fireship, you videos are helping me so much complete a Coding Bootcamp. I can understand more easily, even though its only week 6 of 10

I remember a time (not that long ago) when all bleeding-edge features were just "fantasy web" things with the hope that some of the features may actually be useful in 2-3 years. With Chrome, Edge and Firefox (and Mobile Safari to a lesser extent) staying pretty up to date with this stuff though, it all feels usable now or in the near future.

The one thing I didn't know was the vitals Chrome extension because I don't use Chrome much. I've written polyfills and libraries for many of the others... Wish `inert` was a thing long ago because it makes the `` polyfill a whole lot easier (since there's accessibility to doing it correctly).

I love CSS nesting but my one criticism is simply that the old way does literally spell out the actual selector you can subsequently use in JavaScript to select that element or element set so if you use nesting you'll love it while you're writing CSS but when you go to do stuff in JavaScript you can't really copy/paste a long selector anymore. And maybe that's okay, maybe you should just refactor so you don't have "long" selectors anyway but it's a consideration.

Thank you for sharing Jedi Fireship! I have not yet included dialog or popover, among so many others new features which you generously have shared, but am looking forward to it sometime hopefully and LORD willing soon.

Thanks for the update. You give me the inspiration to stay up to date in web technologies. Can you please do a video on ViewTransitionsAPI

Can you do something on CSS subgrid sometime? Safari and Firefox support it but Chromium is taking its time. Maybe one of your videos will get people excited about it enough to pass the finish line. 😅

Container queries are a huge win! Way overdue. Unfortunately, they have a ways to go. Right now they are a challenge to work with within web components and still require Google's polyfill which Google recently abandoned. FireFox support is also iffy.

Having dealt with popovers and dialogs lately, im so happy to see these additions

The spec for importing non-js now uses `with` instead of/in addition to `assert`. `with` is correct, but we're probably stuck with `assert` because Chrome.

AI can be seen as a new way of interacting with web sites. Instead of clicking buttons or writing text think about simply speaking with your phone or laptop. Business logic can be on the server side this way. AI can generate customized content according to need too.

the timing for dialog was perfect for me, didn't know it even existed, now I'm gonna use it! thanks jeff!

If I hadn't subscribed and enabled notifications for Fireship, I would have definitely learned about these Web features months later.

OMG that's right ! You can use the stringify + parse to deep copy !
No more custom recursive copy function ! Thank you ! It might seem basic but a game changer for me ! I will give this old forgotten project a new live !

Super helpful video. Always excited to watch your content. Very rewarding.

I love the HTML5 dialog but its z-index hierarchy really messes up having TInyMCE or CKEDITOR for text area editor tool popups like table or image etc...

It's finally the time to learn web developement it seems 🙂

Love the video! So many useful new features. At 6:00 you mentioned JS is pass-by-reference, isn't it pass-by-value?

Something new that’s gonna be pretty cool is HTTP’s new QUERY method

Honestly, I don't think I'll use structuredClone, it's too limited. It can't copy prototypes (except Array; so you'll only have basic objects and arrays) and just throws if it encounters a function or a symbol. I'll stick with my custom clone function, thank you.

Been working on a website with lots of pop ups and the diolouge fewture is a game changer for me

7:33 Made my day. Just added mobile support for my web game. It's only played in landscape mode, the toolbar allowing you to scroll bothered me to no end.

Awesome video! Thanks for all the great tips! 🙏

I didn't know about the dialog HTML element! Gotta make sure to use it in my future projects

One of the rare channels (I got two or three max on youtube lol) that when I start watching, I first pause, take a notebook, like the video, then unpause and start watching. ❤
To be honest it took me quite some time to get used to these fast paced videos coz I am a slow learner. But it ultimately grew up on me and these days, I would rather watch these “concentrates” rather than fluffy and gimmicky ones. I just pause/unpause/rewind/slow down etc.. 😂
Seriously, I can’t thank you enough for your contributions man. Just know that there is atleast one person who likes these. Haters gonna hate anyway.

Easily one of the most useful videos that I watched in a while.

Thanks, That was a great video and I got to learn many things, please keep uploading these types of videos instead of the ai company battles(Bard vs ChatGPT) constantly

there was another one , which would allow devs to transition from display: none to display: content [or anyhting that show the component ], also vice versa. Which was not possible before. Did I miss it in the video? I am lost. But I am looking forward to this.
And also will make a video about the streamable api or nextjs streamable api. I have no idea how to use them. But somehow I am feeling this is a game changer.

A slight correction, JavaScript isn't pass by reference. It would be correct to say that JavaScript is "pass by reference value"

Behind the scenes:
Export function structuredClone(input){
Return JSON.parse(JSON.stringify(input));
}
"Now it's not a hack."

Hey man, i think a tutorial on how to make a framework or library would be dope

Fireship is definitely excited about everything... The first 10 were slow and in detail... But the rapid fire others caught me off guard 😂

How do you stay up to date with all this features? You may think that giving me the answer would stop me from watching you but you bought my subscription at the programming iceberg.

So excitiing, can't wait to use these new features in 2030 when all the people will have (maybe) updated their browsers/webviews.

I like how JS and CSS are becoming more of "something to avoid" while HTML is just getter better & better.
Can't wait for the day where JS & CSS bundles are at 200kb & the actual HTML document is 1MB (Brotli)

The only thing I really want is support for true CMYK. I did a calendar for print in HTML so I don't have to do it manually each year, now I have to edit each page in Illustrator to get the color ready for printing.

Colored fonts makes me think of those imported styled text you could do in MS Word in like early -00.

im most impressed with the viewport units its been annoying me for so long didn't know this existed!

This channel is God sent. Such quality content , what I need

timestamps took from @unlimitedbytes-random
titles inspired from video at 0:22
this is NOT targetted for youtube chapter timestamps - rather, an easy to grasp breakdown of features presented in this video
== HTML ==
0:30 1. HTML elem Modals: dialog
with builtin JS methods, & backdrop pseudo element
2:03 2. HTML attbr: popover
to avoid using CSS :focus-within
7:45 19. HTML prop: inert
== WEB BROWSERS ==
2:29 3. WebGPU
4:44 7. Colorfonts
5:11 8. Web vitals extension

== CSS ==
3:11 4. CSS Container Query:
container-type @container
4:00 5. CSS color-mix(): similar to LaTeX
4:28 6. CSS Nesting
7:23 14. CSS prop: Transform: translate, rotate, scale
7:19 15. CSS fxn: Trig: calc( cos() )
7:26 16. CSS prop: initial-letter (Drop Cap)
7:32 17. CSS Viewerport units
to accound for toolbars state
7:38 18. CSS :focus-visible
8:02 21. CSS: animation-timeline Linear Easing

== JS ==
5:35 9. JS: array.at(-1)
5:57 10. JS Deep Copy: structuredClone()
6:56 11. JS Piping fetch() via TransformStream()
7:01 12. JS Import Maps
7:06 13. JSON import modules
7:54 20. JS: ViewTransitions API

Looking forward to using some of these! Just discovered structuredClone myself, can't believe it was actually finally added!

I am going to be honest and say I saw absolutely no difference between the webgl and webgpu stuff you showed 😅

As someone who has a web developer job at a Fortune 500 company, I can tell you most of those features won't get implemented in years since we still have to support older versions of iOS. Of course, that's the thing they never tell you.

Here’s one: are you still using hex codes to specify colours? Or have you discovered the CSS colour functions yet?

Am I a developer of any sorts? Most definitely not. Am I mesmerized by these videos and find myself watching them more fully than my more mainstream interests. Definitely yes.

I'm so glad I started with web dev over other software building tools. It seems because web dev is built into the internet it just gets the highest priority in innovation. C++ and even python just can't compete. They're still important but the amount I can create using web dev tools is insane in a day. I can build a grocery list faster in svelte than I can in microsoft word.

Eventually css, JavaScript and HTML will merge and we are back where we started.

You are the next level of content making

Can i use instead of create modal using portal if i am using React?

Nicely put together, thank you!

I've been learning some simple web dev since last year, and I didn't even knew that in JS, objects are passed by reference 😨.

Fun fact, in my language (Hungarian), we say "double v" instead of "double u". However, for a url, we say "v". Huge time saver. 🤯

It has been a few years since I built a full-stack app, and modals were a pain. I'm very happy to hear about the dialog tag. However, is it possible to get modal behavior without Javascript?

As evident from these new features, the current web standard is far from perfect, almost as if it was hastily put together. Similar to Javascript, which was created in just 10 days, it gained dominance over the web due to mysterious underlying forces, making it extremely difficult to modify later on. Millions of developers are forced to work with these flawed and impractical designs on a daily basis. These standards did not become the norm because of their brilliance or superiority, but rather due to more complex reasons such as monopoly.
People may need to find certain patterns and experiences in order to create a comprehensive standard that can continuously evolve and improve, rather than being based on conflict, domination, and self-interest.

You know what would be cool? If we could finally transition elements with width or height of "auto" once they resize. Not half of the useless stuff they are adding to CSS.

I’m a new Web Developer and feel a bit overwhelmed by the massive amount of stuff I need to learn

was quite a discovery. I wonder what the downsides of using it might be. Thanks for sharing anyways!

can't wait to use these new html features and find 99% users never updated their browser

I’m probably going to use all the css ones when making my next CSS only web app