Tap to unmute

21 Awesome Web Features you’re not using yet

  • Published on May 29, 2023 veröffentlicht
  • 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 clerk.com to build a beautiful user authentication system.
    #webdevelopment #javascript #top10
    💬 Chat with Me on Discord
    🔗 Resources
    - Web Baseline web.dev/baseline/
    - WebDev 101 • 100+ Web Development T...
    - JavaScript 101 • 100+ JavaScript Concep...
    - Web Performance • The ultimate guide to ...
    🔥 Get More Content - Upgrade to PRO
    Upgrade at 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
  • Science & TechnologyScience & Technology

Comments • 0

  • Fireship
    Fireship  3 months ago +341

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

    • skifli
      skifli 3 months ago +4

      Ima just grab first reply rq

    • Jason Trimble
      Jason Trimble 3 months ago

      @skifli no I'm first

    • Kristan Wifler
      Kristan Wifler 3 months ago +1

      It takes even less time to say uwu ! ooowooo!

    • Vampirat3
      Vampirat3 3 months ago

      Now That's what I'm TALKIN BOUT !!!!!
      Fireship be 🔥

    • Truth Futurist
      Truth Futurist 3 months ago

      Can make a pwa with teleporthq in magic minutes 🪄

  • armoredvortex
    armoredvortex 3 months ago +3842

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

    • Prince Singh
      Prince Singh 3 months ago +31


    • Caleb
      Caleb 3 months ago +12


    • Luis Sierra
      Luis Sierra 3 months ago +45

      He's partnering with ChatGPT

    • IronCobra
      IronCobra 3 months ago +2

      another one

    • GG FF
      GG FF 3 months ago +1


  • Professor Dragon
    Professor Dragon 3 months ago +197

    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

      IIARROWS 2 months ago +14

      This...The real problem.

  • UnlimitedBytes Random
    UnlimitedBytes Random 3 months ago +1016

    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

  • JC
    JC 3 months ago +518

    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

    • Irfan Afzal
      Irfan Afzal 3 months ago +2

      Same bruh

    • Henry14arsenal2007
      Henry14arsenal2007 3 months ago +21

      I cant believe JS didnt have a proper copy semantics all this time, JS bad I guess.

    • peanut
      peanut 3 months ago +36

      Why no Object.clone but global function, meh.

    • Hasnain Nazeer
      Hasnain Nazeer 3 months ago +5

      @peanut Yes, I have worked in WordPress/PHP and Vue among other things. I really dislike how you have to keep global functions and variables in your mind.

    • ChamplooMusashi
      ChamplooMusashi 3 months ago +8

      Don't forget to footgun yourself by cloning an object with a custom prototype and spend a week debugging random bullshit

  • Rendon
    Rendon 3 months ago +72

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

  • KrutonPL
    KrutonPL 3 months ago +85

    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

  • Robin Goodfellow
    Robin Goodfellow 3 months ago +5

    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.

  • Treebeard
    Treebeard 3 months ago +51

    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.

  • jediampm
    jediampm 3 months ago +12

    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.

  • Austin Schaefer
    Austin Schaefer 3 months ago +769

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

    • Mahmoud Ayoub
      Mahmoud Ayoub 3 months ago +36

      I thought the same lol

    • Chaz Bertino
      Chaz Bertino 3 months ago +41

      Majestic may not have been the best word... At least for the example, but webGPU will offer MAJOR performance gains and new abilities such as ray tracing.

    • Komi
      Komi 3 months ago +31

      me watching in 240p: "Oh, yes indeed!"

    • HorstKirkPageKian
      HorstKirkPageKian 3 months ago +38

      Pretty sure it was meant kind of sarcastic.

    • Preston
      Preston 3 months ago +7

      @Chaz Bertino webGPU doesnt have support for hardware raytracing right now

  • Jort de Bokx
    Jort de Bokx 3 months ago +98

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

  • Ruben Nijhuis
    Ruben Nijhuis 3 months ago +101

    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?

    • TheYuriG
      TheYuriG 3 months ago +25

      just use a maintained library, they will update eventually and you won't have to rewrite your code. they might already handle accessibility for you now, which you might just miss if you attempt to implement the new stuff yourself. Libraries also tend to implement progressive development, which will show the new stuff on supported browsers and the old stuff on the rest, handling a lot of the boring logic for you

    • Aayush Karna
      Aayush Karna 3 months ago +3

      Third-party libraries like modal, tooltip, accordion, ... became popular because they handled tedious things like animations and accessibility (keyboard friendly, screen reader/SEO friendly, not blocking the main thread, user preferences like reduced motion, dark/light theme, touch friendly). The problem with it was that they gave very little to no configuring on how it looks and feels or if it matches the project theme. Now, with new web standard features, we can build accessible web components with cool animations on our own that are highly customizable at the same time. You can build your own components once and use them across multiple projects.

    • TheQuinn50
      TheQuinn50 3 months ago +4

      Hope so, biggest issue ive found with the native dialog tag is the fact it doesn't use z-index it uses the new "Top layer" system and as such most component libraries who still use z-index for dropdowns and similar don't work at all with the new dialog component as they'll just show up under the dialog. Otherwise I think it's a nice feature.

  • ᖇᗩ乙0229
    ᖇᗩ乙0229 3 months ago +193

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

    • Anj
      Anj 3 months ago +60

      That would be hilarious, but (un)fortunately it is not the case.
      structuredClone has an ability to parse Maps, Sets or Dates for example, that would crash the simple JSON hack.

    • Agustín G. Martínez
      Agustín G. Martínez 3 months ago +5

      Also functions. The JSON hack doesn't work for them

    • ctdesing
      ctdesing 3 months ago +1

      why can't you clone by: newObj = { ...oldObj } ?

    • Conan
      Conan 3 months ago +14

      The object spread only works on the first level, If oldObj has properties which are non primitives e.g. objects, dates, functions, arrays then those would still point to the same memory in newObj as in oldObj

    • Rand0mTV
      Rand0mTV 3 months ago +17

      @ctdesing it's explained in the video starting from 6:15

  • Jakob Eriksen
    Jakob Eriksen 15 days ago

    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)

  • Telma Frege
    Telma Frege 3 months ago +7

    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!

  • daniel halachev
    daniel halachev 3 months ago +10

    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!

  • Chris
    Chris 3 months ago +102

    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

    • Dev-Siri 🇺🇦
      Dev-Siri 🇺🇦 3 months ago +6

      this.replace("TL;DR", "TL;DW");

    • Crossfire
      Crossfire 3 months ago

      ​@Dev-Siri 🇺🇦 nice

    • Shiro
      Shiro 3 months ago +2

      after 10, fireship went too fast just reading the names of the features lmao

    • SirWolf2018
      SirWolf2018 3 months ago +1

      It should be called ToC, not TL;DR. The latter implies that you summarize what is said, this ain't no summarization. This is just the table of contents.

    • Vishnu Sidharth
      Vishnu Sidharth Month ago

      99 likes... Hmm i'm going to fix it.
      100 now! 🎉🎉

  • Niels Kersic
    Niels Kersic 3 months ago +2

    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

  • Sevdalink
    Sevdalink 3 months ago +8

    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.

    • Some Place
      Some Place 3 months ago

      It's all so shit though. Anyone have a clue on why they didn't implement the array[-1] syntax, and rather opted to add a new .at() method to every array?

    • bensge1
      bensge1 Month ago

      @Some Place If they changed the behavior of the existing syntax (array subscript), that would break many websites and libraries that rely on the fact that currently array[negative_number] returns undefined. Unfortunate situation, but you can only ever add new APIs, never change the behavior of APIs that are already out in the wild.

  • Stefan M
    Stefan M 3 months ago +16

    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.

  • Lofi Relax
    Lofi Relax Month ago +1

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

  • Odysseas Papadimas
    Odysseas Papadimas 3 months ago +4

    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

  • Devs Dojo
    Devs Dojo 3 months ago +3

    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. ❤

  • Turnaround
    Turnaround 3 months ago +152

    Look at how realistic these AI-made videos are!

    • Dev Demo
      Dev Demo 3 months ago +7

      Look at how realistic these AI-made comments are!

    • goku vegeta
      goku vegeta 3 months ago +5

      Look at how realistic these AI-made replies are!

    • Roberto Jesus
      Roberto Jesus 3 months ago +2

      Look at how realistic these AI-made are

    • Raghav Gupta
      Raghav Gupta 3 months ago +5

      Look at how realistic these AI

    • timothytomato
      timothytomato 3 months ago +4

      Look realistic AI

  • Mohamed Al-Daly
    Mohamed Al-Daly 3 months ago +2

    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

  • William Ikenna-Nwosu
    William Ikenna-Nwosu 3 months ago +2

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

  • FuzzyBear
    FuzzyBear 3 months ago +1

    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.

  • chetan giradkar
    chetan giradkar 3 months ago

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

  • Thap Thop Theep
    Thap Thop Theep 3 months ago +1

    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.

  • Bryku
    Bryku 3 months ago +6

    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.

  • artu-hnrq
    artu-hnrq 3 months ago

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

  • Travis Van Couvering
    Travis Van Couvering 3 months ago +2

    My favorite thing about the dialog element is native focus trapping

  • Dylan "the brand slayer" Mulveiny

    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.

  • Abhay Kumar
    Abhay Kumar 3 months ago

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

  • Jéan-Pierre Schutte
    Jéan-Pierre Schutte 3 months ago +4

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

    • Prince Adigwe
      Prince Adigwe 3 months ago

      You are passionate about the frontend. I have never heard anyone say that. What particularly draws you... Is it the writing of complex algorithms or the css or js

    • iter8
      iter8 3 months ago +1

      ​@Prince Adigwewell, now you've heard it. First of all not a lot of people are actually "passionate" they say for some reason to convince their brain maybe. Secondly, yes people can be actually passionate about frontend development, for me personally its about how you can build your own stuff, easily and quickly.

    • Dipanjan Ghosal
      Dipanjan Ghosal 3 months ago

      @Prince Adigwe I mean I can understand people enjoying building shiny UI and front end of web pages/SPAs

    • Jéan-Pierre Schutte
      Jéan-Pierre Schutte 3 months ago

      @Prince Adigwe I've been a developer on the front-end for a good 15 years. At first, i was given a psd document and told to develop a functional php website that was compatible on all browsers at the time, including the dreaded IE8. Despite the frustration, there was a level of satisfaction that it finally worked. That, and using JS / Jquery to make the page do something sparked interest. I've enjoyed continuing to learn new web technologies, libraries and frameworks, new css features, etc. There's something magical about creating a good user experience (although i am not a fan of the actual designing aspect) and using (and understanding) different front end libraries and frameworks to achieve it.
      Also, channels such as Fireship do a really good job at getting one excited to trying new things and exploring new territory.

    • daniel halachev
      daniel halachev 3 months ago

      ​​@Prince Adigwe I also really like creating front-end, with as little JS as possible. It's really satisfying managing to hide classes and code behind something beautiful and responsive. My enthusiasm was ruined three days ago when I delivered my university course project and they didn't appreciate my team had created an actual working prototype instead of a sketch in Figma.

  • Yash Khd
    Yash Khd 3 months ago +5

    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..!!

  • Mahziyar Esmaili
    Mahziyar Esmaili 3 months ago

    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"

  • Fran Tortosa
    Fran Tortosa 3 months ago

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

  • Renzo Torr
    Renzo Torr 3 months ago

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

  • Alroc123
    Alroc123 3 months ago

    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 !

  • LoneShadow084
    LoneShadow084 3 months ago

    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

  • HartleySan
    HartleySan 3 months ago +4

    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.

    • Lawrence D’Oliveiro
      Lawrence D’Oliveiro 3 months ago +3

      The death of Microsoft Internet Explorer has been very liberating, shall we say.

  • Chris Zuber
    Chris Zuber 3 months ago

    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).

  • Steven Leon Music
    Steven Leon Music 3 months ago +1

    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.

    • Arjix
      Arjix 3 months ago +1

      who even copy pastes selectors from css to js?
      I can only imagine doing the reverse, writing the selector in the console and copying it to a css file
      but that only makes sense if you are either scraping a site, using a browser automation tool, writing a userscript/extension or just theming a site

    • Steven Leon Music
      Steven Leon Music 3 months ago

      @Arjix I've been a web developer for over a decade, I do it all the time. That's the entire power of CSS selectors, you can pinpoint specific elements for styling or manipulating with JS. If it wasn't an important feature why would anyone have bothered to engineer it to begin with? There's a reason the sizzle library was so popular/essential with jQuery. The HTML/CSS is often designed and written long before the JS and interactivity is even decided (at least where I work) so CSS selectors are usually going to be present before any scripts have even been written.

    • SirWolf2018
      SirWolf2018 3 months ago

      @Steven Leon Music We could still have IDE support for copying the full CSS selector to clipboard.

  • John Dodge
    John Dodge 3 months ago +1

    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.

  • Adam Jamiu
    Adam Jamiu 2 months ago

    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

  • Sunny To
    Sunny To 3 months ago

    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. 😅

  • Tim Badolato
    Tim Badolato 3 months ago +27

    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.

    • Animesh Nath
      Animesh Nath 3 months ago

      Polyfill is superseeded by Lit

    • Tim Badolato
      Tim Badolato 3 months ago +1

      @Animesh Nath Thanks - Lit is great for Web Component development, but it doesn't solve the CSS Container Query issue

  • RoiD
    RoiD 3 months ago +1

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

  • Chris Zuber
    Chris Zuber 3 months ago

    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.

  • ugur ata
    ugur ata 3 months ago

    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.

  • javad mnjd
    javad mnjd 3 months ago

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

  • Mohammad Imran
    Mohammad Imran 3 months ago +26

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

    • David Lavieri
      David Lavieri 3 months ago +5

      Which is fine, first adoption is not worth the trouble most of the time

  • Neoh
    Neoh 3 months ago

    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 !

  • Sanjeev Ghosh
    Sanjeev Ghosh 3 months ago

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

  • Damien Keitzy
    Damien Keitzy 3 months ago

    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...

  • Tanish Ranjan
    Tanish Ranjan 3 months ago +1

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

  • Adekunle Oshiyoye
    Adekunle Oshiyoye 3 months ago

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

  • Tag Howard
    Tag Howard 3 months ago +3

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

  • Glân von Brylân
    Glân von Brylân 3 months ago

    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.

  • AwesomeDude3247
    AwesomeDude3247 3 months ago

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

  • Drifting Draftsman
    Drifting Draftsman 3 months ago

    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.

  • Jakob Garde
    Jakob Garde 3 months ago +1

    Awesome video! Thanks for all the great tips! 🙏

  • Andrés Arrieche
    Andrés Arrieche 3 months ago

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

  • BlurryBit
    BlurryBit 3 months ago +26

    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.

    • Tarcísio Melo
      Tarcísio Melo 3 months ago +1

      You can slow down the video.

    • BlurryBit
      BlurryBit 3 months ago

      @Tarcísio Melo wow, yes I guess.

  • Berkay Atatop
    Berkay Atatop 3 months ago

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

  • Ayush Chaudhary
    Ayush Chaudhary 3 months ago

    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

  • MD Fakhruzzaman Sarkar
    MD Fakhruzzaman Sarkar 3 months ago

    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.

  • Ognjen Mišić
    Ognjen Mišić 3 months ago

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

  • Jay bluej
    Jay bluej 3 months ago +159

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

    • FaultyTwo
      FaultyTwo 3 months ago +7

      **bruh sound effect**

    • Kryyto
      Kryyto 3 months ago +3

      Probably not too far of the truth

    • Chris
      Chris 3 months ago +26

      just in case anyone believes it, this is of course not true and the function does not behave in exactly the same way

    • Kryyto
      Kryyto 3 months ago +2

      @Chris obviously

    • Lucas A
      Lucas A 3 months ago +1

      javascript be like....

  • Raphael Jaggerd
    Raphael Jaggerd 3 months ago

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

  • Zeldaplayergl
    Zeldaplayergl 3 months ago

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

  • Rodrigo Alvarez
    Rodrigo Alvarez 3 months ago

    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.

    • John Rambo
      John Rambo 3 months ago

      Google Chrome Developers and Kevin Powell channels

  • Jayro
    Jayro 3 months ago +1

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

  • Dev-Siri 🇺🇦
    Dev-Siri 🇺🇦 3 months ago +19

    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)

    • Πάνος
      Πάνος 3 months ago +13

      its always been like this why make a hacky js function that breaks accessibility and iphones instead of using the correct html tag

    • Lawrence D’Oliveiro
      Lawrence D’Oliveiro 3 months ago +1

      On the contrary, these new features are increasingly tied into CSS.

  • Infuriated Jurijcorn
    Infuriated Jurijcorn 3 months ago

    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.

  • Tobias Östh
    Tobias Östh 2 months ago

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

  • marti
    marti 3 months ago

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

  • Igor Lerinc
    Igor Lerinc 3 months ago

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

  • Yash
    Yash 3 months ago

    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

  • Gabriel Buonomano
    Gabriel Buonomano 3 months ago +1

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

  • Grand Theft Auto Expert
    Grand Theft Auto Expert 3 months ago +5

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

  • Chuckie B
    Chuckie B 3 months ago

    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.

  • Lawrence D’Oliveiro
    Lawrence D’Oliveiro 3 months ago

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

  • DMrLeeds
    DMrLeeds 3 months ago

    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.

  • Damon Medek
    Damon Medek 3 months ago +1

    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.

  • none of your business
    none of your business 3 months ago

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

  • Мухиддин Махмудов

    You are the next level of content making

  • Hoàng Tiến Thịnh
    Hoàng Tiến Thịnh 3 months ago

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

  • ihspan
    ihspan 3 months ago

    Nicely put together, thank you!

  • Tessabloom x86
    Tessabloom x86 3 months ago +1

    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 😨.

    • Emprost - kun
      Emprost - kun 3 months ago +2

      Non primitives data types are passed by reference whereas primitives ones are passed by value.

  • Péter Szarvas
    Péter Szarvas 3 months ago +2

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

    • jocospeed98
      jocospeed98 3 months ago +1

      Pont ezt akartam kommentelni lol

  • Chris M
    Chris M 3 months ago

    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?

    • Business Wolf
      Business Wolf 3 months ago

      Well html's onclick=() runs javascript so no. But you don't need any JavaScript outside of that.

    • Chris M
      Chris M 3 months ago

      @Business Wolf sadge

  • Batian Daniel Liu
    Batian Daniel Liu 3 months ago

    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.

  • Icy Foxe
    Icy Foxe 3 months ago

    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.

  • Peachez Programming
    Peachez Programming 3 months ago +6

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

    • Stephen
      Stephen 3 months ago +8

      Welcome to the club. That feeling does not do anything other than worsen - embrace it. There's always going to be orders of magnitude more things you don't know than things you do.

    • Derpy McDerp
      Derpy McDerp 3 months ago +6

      Thankfully you don't need to know it all.

    • lorddesert
      lorddesert 3 months ago +1

      Same here. Just keep going and do stuff you like the most. xD

    • Ivan
      Ivan 3 months ago +1

      Now imagine how would you feel if you actually picked something more challenging

    • cucumber with ketchup
      cucumber with ketchup 3 months ago

      Tbh, you don't need to learn all the stuff available out here. In most cases as web dev you will write pretty simple things, but will have to fuck with other unrelated to this stuff (like not working third party tool, random shitty bug from the internal library that you are not allowed to touch or fix, etc.). And keep in mind that most businesses will require you to use old-fashioned things to achieve maximum support for the old browsers.
      And also let's not forget that nowadays you can use AI tools to ask how to do things in modern way, like bing, phind or perplexity AI powered search engines.

  • Vladimir Gromozdin
    Vladimir Gromozdin 3 months ago

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

    • JustPlayerDE
      JustPlayerDE 3 months ago +2

      that it is not supported on internet explorer, which may not be that important anymore but it is still a downside

  • e1m1
    e1m1 3 months ago +86

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

    • זוהר יוסף
      זוהר יוסף 3 months ago +37

      That's why modern browsers update themselves without even asking you

    • Beyondo
      Beyondo 3 months ago +1

      @זוהר יוסף
      True, my browser forced me to update a few days ago lol.

    • Rumford C
      Rumford C 3 months ago +4

      @זוהר יוסף
      turns out malware had it right all along!

    • Theodore Alenas
      Theodore Alenas 3 months ago +2

      This is why I don't want to be obsessed over new features, it's unethical in a way for the client.

    • Business Wolf
      Business Wolf 3 months ago +2

      You can't just not innovate because some people don't want to keep up. They'll learn to keep up.

  • Dadsdy
    Dadsdy Month ago

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