21 Awesome Web Features you’re not using yet

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.

#webdevelopment #javascript #top10

💬 Chat with Me on Discord

🔗 Resources

🔥 Get More Content - Upgrade to 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

[armoredvortex]

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

[professordragon]

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

[unlimitedbytes-random]

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

[heyitsdross]

2:54 "... and the WebGPU version is far more majestic!"

Me, who sees no difference: "Oh, yes indeed!"

[JC-jzrx]

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

[rendon]

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

[ysmdev]

TL;DR
1. 0:32 - <dialog> 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

[TheJort]

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

[raz]

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

[abeidiot]

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

[somerandomguy]

just got a job at google after showing your certificate 🙌🙌
I'm very grateful. now I just need to learn html

[SpaceChicken]

The new viewport units that respect the toolbar make me so happy, I could cry.

[mohammadimran]

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

[jediampm]

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.

[KrutonPL]

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

[BlueJDev]

Behind the scenes:
Export function structuredClone(input){
Return
}

"Now it's not a hack."

[TelmaFrege]

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!

[treebeard]

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.

[BlurryBit]

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.

[devsDojo]

The only YouTube 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. ❤