21 Awesome Web Features you’re not using yet

  Рет қаралды 946,559

Fireship

Fireship

10 ай бұрын

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

Пікірлер: 1 000
@Fireship
@Fireship 10 ай бұрын
Does your app need authentication? Check out Clerk - their platform is super impressive clerk.com
@skifli
@skifli 10 ай бұрын
Ima just grab first reply rq
@jasontfrom713
@jasontfrom713 10 ай бұрын
@@skifli no I'm first
@KWifler
@KWifler 10 ай бұрын
It takes even less time to say uwu ! ooowooo!
@Vampirat3
@Vampirat3 10 ай бұрын
Now That's what I'm TALKIN BOUT !!!!! Fireship be 🔥
@truthfuturist
@truthfuturist 10 ай бұрын
Can make a pwa with teleporthq in magic minutes 🪄
@armoredvortex
@armoredvortex 10 ай бұрын
Fireship rolling out videos so fast, even javascript frameworks can't keep up.
@tsarprince
@tsarprince 10 ай бұрын
lmao
@usernoneofyourbusiness
@usernoneofyourbusiness 10 ай бұрын
😂😂😂😂
@LuisSierra42
@LuisSierra42 10 ай бұрын
He's partnering with ChatGPT
@CodingWithTaaxo
@CodingWithTaaxo 10 ай бұрын
another one
@ggff2269
@ggff2269 10 ай бұрын
😂😂😂😮😮😮
@professordragon
@professordragon 9 ай бұрын
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
@IIARROWS 8 ай бұрын
This...The real problem.
@heyitsdross
@heyitsdross 10 ай бұрын
2:54 "... and the WebGPU version is far more majestic!" Me, who sees no difference: "Oh, yes indeed!"
@mahmoudayoub9168
@mahmoudayoub9168 10 ай бұрын
I thought the same lol
@chazbertino6102
@chazbertino6102 10 ай бұрын
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.
@komi5018
@komi5018 10 ай бұрын
me watching in 240p: "Oh, yes indeed!"
@HorstKirkPageKian
@HorstKirkPageKian 10 ай бұрын
Pretty sure it was meant kind of sarcastic.
@preston7376
@preston7376 10 ай бұрын
@@chazbertino6102 webGPU doesnt have support for hardware raytracing right now
@unlimitedbytes-random
@unlimitedbytes-random 10 ай бұрын
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
@sTryskaCz
@sTryskaCz 10 ай бұрын
6:52
@justamanofculture12
@justamanofculture12 10 ай бұрын
Not all heroes wear capes, some are named random.
@user-gz9mw3yr2x
@user-gz9mw3yr2x 10 ай бұрын
Ffffffff I'll just use markdown now 😂
@Harmxn
@Harmxn 10 ай бұрын
@@sTryskaCz 7:23 Circumsize
@imdanielmartinez
@imdanielmartinez 10 ай бұрын
KZbin should add a save comment button before other comments bury this one.
@JC-jz6rx
@JC-jz6rx 10 ай бұрын
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
@Muaddibkhan
@Muaddibkhan 10 ай бұрын
Same bruh
@Henry14arsenal2007
@Henry14arsenal2007 10 ай бұрын
I cant believe JS didnt have a proper copy semantics all this time, JS bad I guess.
@peanut3645
@peanut3645 10 ай бұрын
Why no Object.clone but global function, meh.
@Hasnain1F
@Hasnain1F 10 ай бұрын
@@peanut3645 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 10 ай бұрын
Don't forget to footgun yourself by cloning an object with a custom prototype and spend a week debugging random bullshit
@rendon2959
@rendon2959 10 ай бұрын
Best addition for me is #17 with the new viewport units. Implementing a fullscreen design that considers the toolbar is actually possible now.
@TheJort123
@TheJort123 10 ай бұрын
Very nice to be kept up-to-date this way, please do more of this :D
@raz0229
@raz0229 10 ай бұрын
06:48 I wouldn't be surprised if _structuredClone_ is basically just: const structuredClone = (object) => JSON.parse(JSON.stringify(object))
@anj000
@anj000 10 ай бұрын
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.
@Zhuclam
@Zhuclam 10 ай бұрын
Also functions. The JSON hack doesn't work for them
@ctdesing
@ctdesing 10 ай бұрын
why can't you clone by: newObj = { ...oldObj } ?
@conan3211
@conan3211 10 ай бұрын
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
@rand0mtv660
@rand0mtv660 10 ай бұрын
@@ctdesing it's explained in the video starting from 6:15
@KrutonPL
@KrutonPL 10 ай бұрын
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
@somerandomguy001
@somerandomguy001 10 ай бұрын
just got a job at google after showing your certificate 🙌🙌 I'm very grateful. now I just need to learn html
@DemPilafian
@DemPilafian 10 ай бұрын
*HTML is the best programming language ever!*
@Dead-Not-Sleeping
@Dead-Not-Sleeping 10 ай бұрын
That was you? I just LOST my job at Google because some schmuck showed up with one of those damn certificates! Thanks a lot.
@jediampm
@jediampm 10 ай бұрын
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.
@mohammadimran2219
@mohammadimran2219 10 ай бұрын
If I hadn't subscribed and enabled notifications for Fireship, I would have definitely learned about these Web features months later.
@Davidlavieri
@Davidlavieri 10 ай бұрын
Which is fine, first adoption is not worth the trouble most of the time
@victorlosadahernandez7125
@victorlosadahernandez7125 Ай бұрын
can confirm
@treebeard2416
@treebeard2416 10 ай бұрын
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.
@danielhalachev4714
@danielhalachev4714 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!
@helloimtim
@helloimtim 10 ай бұрын
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.
@whatsanimesh
@whatsanimesh 10 ай бұрын
Polyfill is superseeded by Lit
@helloimtim
@helloimtim 10 ай бұрын
@@whatsanimesh Thanks - Lit is great for Web Component development, but it doesn't solve the CSS Container Query issue
@TelmaFrege
@TelmaFrege 10 ай бұрын
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!
@abeidiot
@abeidiot 10 ай бұрын
can't wait to use these new html features and find 99% users never updated their browser
@ZoharYosef
@ZoharYosef 10 ай бұрын
That's why modern browsers update themselves without even asking you
@nullbeyondo
@nullbeyondo 10 ай бұрын
@@ZoharYosef True, my browser forced me to update a few days ago lol.
@rumfordc
@rumfordc 10 ай бұрын
@@ZoharYosef turns out malware had it right all along!
@theodorealenas3171
@theodorealenas3171 10 ай бұрын
This is why I don't want to be obsessed over new features, it's unethical in a way for the client.
@BusinessWolf1
@BusinessWolf1 10 ай бұрын
You can't just not innovate because some people don't want to keep up. They'll learn to keep up.
@devsDojo
@devsDojo 10 ай бұрын
The only KZbin 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. ❤
@rubennijhuis
@rubennijhuis 10 ай бұрын
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?
@YuriG03042
@YuriG03042 10 ай бұрын
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 10 ай бұрын
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 10 ай бұрын
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.
@TesterAnimal1
@TesterAnimal1 5 ай бұрын
Won’t ever work. Nothing can go on top.
@stefanm3280
@stefanm3280 10 ай бұрын
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.
@BlurryBit
@BlurryBit 10 ай бұрын
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.
@tarcisiosmelo
@tarcisiosmelo 10 ай бұрын
You can slow down the video.
@BlurryBit
@BlurryBit 10 ай бұрын
@@tarcisiosmelo wow, yes I guess.
@johnadriandodge
@johnadriandodge 10 ай бұрын
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.
@roid1510
@roid1510 10 ай бұрын
Having dealt with popovers and dialogs lately, im so happy to see these additions
@bruh-qi7ue
@bruh-qi7ue 10 ай бұрын
CSS Nesting is actually so sick because it is so needed LMFAO
@ludwig2345
@ludwig2345 10 ай бұрын
Hell yeah, it's fucking amazing. Nesting was the main reason I used SCSS.
@outis99
@outis99 10 ай бұрын
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
@javadmnjd
@javadmnjd 10 ай бұрын
the timing for dialog was perfect for me, didn't know it even existed, now I'm gonna use it! thanks jeff!
@Robin_Goodfellow
@Robin_Goodfellow 9 ай бұрын
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.
@scienc3tv
@scienc3tv 10 ай бұрын
if you were asking what the arabic text at @05:06 means: لما كان الإعتراف بالكرامة المتأصلة في جميع it translates to: for what was the recognition of the inherent dignity of all (it's incomplete sentence tho) thank you :D
@truvc
@truvc 10 ай бұрын
My favorite thing about the dialog element is native focus trapping
@renzotorr537
@renzotorr537 10 ай бұрын
i've heard about most of these but it's amazing to know that they're finally supported everywhere
@jthoward
@jthoward 10 ай бұрын
Something new that’s gonna be pretty cool is HTTP’s new QUERY method
@MasayaShida
@MasayaShida 10 ай бұрын
Ok somehow that mobile toolbar visibility css thing is what i see as most exciting
@bryku
@bryku 10 ай бұрын
Css has been lacking, many of these things have been requested for 10+ years. I remember in 2007 reading a book in the library that talked about how css needs nested styles... Mobile has been pretty difficult with every device being different and js d8dnt really make it better sometimes.
@thapthoptheep2076
@thapthoptheep2076 10 ай бұрын
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.
@williamikennanwosu
@williamikennanwosu 9 ай бұрын
Very engaging, high quality videos Fireship! You are doing great!
@sevdalink6676
@sevdalink6676 10 ай бұрын
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.
@illyias
@illyias 9 ай бұрын
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?
@nandanreddy
@nandanreddy 7 ай бұрын
@@illyias .findIndex() returns -1 if it can't find the element we are looking for. I don't know for sure but that might be the reason.
@bensge1
@bensge1 7 ай бұрын
@@illyias 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.
@54peace
@54peace 10 ай бұрын
Look at how realistic these AI-made videos are!
@devdemo467
@devdemo467 10 ай бұрын
Look at how realistic these AI-made comments are!
@gokuvegeta1626
@gokuvegeta1626 10 ай бұрын
Look at how realistic these AI-made replies are!
@electroaddiction
@electroaddiction 10 ай бұрын
Look at how realistic these AI-made are
@raghavgupta1799
@raghavgupta1799 10 ай бұрын
Look at how realistic these AI
@mrtomithy
@mrtomithy 10 ай бұрын
Look realistic AI
@kwe4117
@kwe4117 10 ай бұрын
Bruh, I was about to create a custom modal for a project and came across this video. You are a champion amongst men.
@JakobEriksen
@JakobEriksen 6 ай бұрын
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)
@TheDorac1
@TheDorac1 10 ай бұрын
I absolutely love your content. I am a passionate front-end web developer and this is fantastic!
@princeadigwe3764
@princeadigwe3764 10 ай бұрын
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
@the-iter8
@the-iter8 10 ай бұрын
​@@princeadigwe3764well, 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.
@dipanjanghosal1662
@dipanjanghosal1662 10 ай бұрын
@@princeadigwe3764 I mean I can understand people enjoying building shiny UI and front end of web pages/SPAs
@TheDorac1
@TheDorac1 10 ай бұрын
@@princeadigwe3764 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.
@danielhalachev4714
@danielhalachev4714 10 ай бұрын
​​@@princeadigwe3764 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.
@peterszarvas94
@peterszarvas94 10 ай бұрын
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 10 ай бұрын
Pont ezt akartam kommentelni lol
@lofirelax
@lofirelax 8 ай бұрын
Wow, so much new features making coding easier, Thanks Fireship!
@chetangiradkar
@chetangiradkar 9 ай бұрын
This(dialog) is (was) an actual problem I was solving. Glad I subscribed to this channel This video is a gem
@bryku
@bryku 10 ай бұрын
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.
@ysmdev
@ysmdev 10 ай бұрын
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
@Dev-Siri
@Dev-Siri 10 ай бұрын
this.replace("TL;DR", "TL;DW");
@Crossfirev
@Crossfirev 10 ай бұрын
​@@Dev-Siri nice
@goodshiro10
@goodshiro10 10 ай бұрын
after 10, fireship went too fast just reading the names of the features lmao
@SirWolf2018
@SirWolf2018 9 ай бұрын
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.
@vishnusidharth9309
@vishnusidharth9309 7 ай бұрын
99 likes... Hmm i'm going to fix it. 100 now! 🎉🎉
@artu-hnrq
@artu-hnrq 10 ай бұрын
Being updated with a summary of newest web features is awesome! Thanks for that
@realdaly
@realdaly 10 ай бұрын
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
@yashkhd1100
@yashkhd1100 10 ай бұрын
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..!!
@laptopuser5198
@laptopuser5198 10 ай бұрын
Hes got staff.
@imibuks-replit
@imibuks-replit 10 ай бұрын
He is replaced by A.i
@BlueJDev
@BlueJDev 10 ай бұрын
Behind the scenes: Export function structuredClone(input){ Return JSON.parse(JSON.stringify(input)); } "Now it's not a hack."
@FaultyTwo
@FaultyTwo 10 ай бұрын
**bruh sound effect**
@kryyto6587
@kryyto6587 10 ай бұрын
Probably not too far of the truth
@cyber_chris
@cyber_chris 10 ай бұрын
just in case anyone believes it, this is of course not true and the function does not behave in exactly the same way
@kryyto6587
@kryyto6587 10 ай бұрын
@@cyber_chris obviously
@lucasa8710
@lucasa8710 10 ай бұрын
javascript be like....
@taiwojolomi2638
@taiwojolomi2638 9 ай бұрын
Almost forgot that this one of the most awesome channels on KZbin.. Fireship 🔥🔥
@_sevelin
@_sevelin 10 ай бұрын
HTML got a huge update!
@DeadscreenXD
@DeadscreenXD 10 ай бұрын
Love your content.
@loneshadow0844
@loneshadow0844 10 ай бұрын
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
@peachezprogramming
@peachezprogramming 10 ай бұрын
I’m a new Web Developer and feel a bit overwhelmed by the massive amount of stuff I need to learn
@TheScoobysteve
@TheScoobysteve 10 ай бұрын
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.
@dafarii
@dafarii 10 ай бұрын
Thankfully you don't need to know it all.
@lorddesert
@lorddesert 10 ай бұрын
Same here. Just keep going and do stuff you like the most. xD
@IvanRandomDude
@IvanRandomDude 10 ай бұрын
Now imagine how would you feel if you actually picked something more challenging
@cucumberwithketchup
@cucumberwithketchup 10 ай бұрын
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.
@HartleySan
@HartleySan 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.
@lawrencedoliveiro9104
@lawrencedoliveiro9104 10 ай бұрын
The death of Microsoft Internet Explorer has been very liberating, shall we say.
@refuzion1314
@refuzion1314 10 ай бұрын
Why does FireshipX actually look good lol
@shoppy-wizard
@shoppy-wizard 10 ай бұрын
Fireship Should be CEO of Space X.
@ozzyfromspace
@ozzyfromspace 10 ай бұрын
Damn bro, that Clerk ad was actually really compelling. I use NextAuth rn, but I'm lowkey intrigued. Also, this video was fire(ship)!
@jamesfoo8999
@jamesfoo8999 9 ай бұрын
"structuredClone" wow this was so needed!
@Jakob-mf8us
@Jakob-mf8us 10 ай бұрын
5:20 Nothing to see there, just normal goat weed.
@dheerajr8246
@dheerajr8246 9 ай бұрын
True af 🤣
@grandtheftautoexpert2040
@grandtheftautoexpert2040 10 ай бұрын
I am going to be honest and say I saw absolutely no difference between the webgl and webgpu stuff you showed 😅
@BrianClincy
@BrianClincy 10 ай бұрын
The sarcasm gets me everytime... The first Character is awesome!!! Thanks for the info
@codyrap95
@codyrap95 10 ай бұрын
So excitiing, can't wait to use these new features in 2030 when all the people will have (maybe) updated their browsers/webviews.
@rickdg
@rickdg 10 ай бұрын
Can't wait for all of these to come to Safari in 2030, but not before a few of them silently break with an OS update. Isn't web development fun?
@fakenameforgoogle9168
@fakenameforgoogle9168 10 ай бұрын
Safari supports all of them except WebGPU and view transitions -- firefox is actually the main one lagging behind
@Dev-Siri
@Dev-Siri 10 ай бұрын
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)
@user-fr2fm3ri3w
@user-fr2fm3ri3w 10 ай бұрын
its always been like this why make a hacky js function that breaks accessibility and iphones instead of using the correct html tag
@lawrencedoliveiro9104
@lawrencedoliveiro9104 10 ай бұрын
On the contrary, these new features are increasingly tied into CSS.
@Neoh53
@Neoh53 10 ай бұрын
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 !
@noonewhomatters8941
@noonewhomatters8941 9 ай бұрын
3:11 that container feature is awesome
@shoppy-wizard
@shoppy-wizard 10 ай бұрын
Kids drink Tea 🍵 in Morning Men drink Coffee ☕ Legends drink Beer 🍺 Valademir Putin drinks Vodka 🍷 Fireship (🔥 🚢 ) drinks this 5:20 📯 🐐 ☘️
@comaecod
@comaecod 10 ай бұрын
Great. I knew '-1' of the features mentioned. Lifesaver ♥
@DriftingDraftsman
@DriftingDraftsman 10 ай бұрын
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.
@oretanbarnabas7768
@oretanbarnabas7768 10 ай бұрын
Awesome.... 🎉 This is insightful.. lol, I am anxious... I feel the gush to start using these in my projects 😂
@andrewkolansky5348
@andrewkolansky5348 10 ай бұрын
Love this video. Thanks for making it!
@SpaceChicken
@SpaceChicken 10 ай бұрын
The new viewport units that respect the toolbar make me so happy, I could cry.
@lukas.webdev
@lukas.webdev 10 ай бұрын
I feel you... 😉
@zeldaplayergl11
@zeldaplayergl11 10 ай бұрын
Fireship is definitely excited about everything... The first 10 were slow and in detail... But the rapid fire others caught me off guard 😂
@adekunleoshiyoye1872
@adekunleoshiyoye1872 10 ай бұрын
Love the video! So many useful new features. At 6:00 you mentioned JS is pass-by-reference, isn't it pass-by-value?
@berkayatatop1181
@berkayatatop1181 10 ай бұрын
Easily one of the most useful videos that I watched in a while.
@XDarkGreyX
@XDarkGreyX 10 ай бұрын
Sometimes I check caniuse not for support for a specific features but for the new ones that come out. Pretty exciting. now I just need to not suck. But I totally missed the nesting. I don't know how yet I am so here for it.
@igorlerinc3510
@igorlerinc3510 9 ай бұрын
This channel is God sent. Such quality content , what I need
@krateskim4169
@krateskim4169 10 ай бұрын
Thank you for the free certificate at the end man, I really appreciate it
@youseffx1661
@youseffx1661 10 ай бұрын
the King of web devolving programmers is talking right now
@pwan3971
@pwan3971 10 ай бұрын
Finally, one more certificate! thanks Fireship!
@barte.sr.7744
@barte.sr.7744 10 ай бұрын
LOVE THE TIPS VIDEOS. do more. and about your sponsor, cleark i think i gonna use it
@MahziyarEsmaili-bx9kq
@MahziyarEsmaili-bx9kq 10 ай бұрын
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"
@MsMarmima
@MsMarmima 10 ай бұрын
Wow dialogue is a massive game changer!
@carlhandy
@carlhandy 10 ай бұрын
Been waiting to be able to import json in js for yearssssssss. Excited about that one
@shriharikulkarni07
@shriharikulkarni07 9 ай бұрын
10th one is the most needed one. It took two freaking days for me to know and debug that issue of pass by reference in JS
@Alfakatt
@Alfakatt 10 ай бұрын
I absolutely love containers ❤
@kipchickensout
@kipchickensout 7 ай бұрын
that first one hit hard, i once wanted to make something because i barely ever do any web stuff, and thought "okay, so first I need a modal dialog, can't be hard right?"
@andresarrieche522
@andresarrieche522 10 ай бұрын
I didn't know about the dialog HTML element! Gotta make sure to use it in my future projects
@berrodev
@berrodev 10 ай бұрын
Dude the only difference between me and u is the animations i make and still i barely post 2 times a week, i am just amazed keep it up king!
@harryngwa
@harryngwa 10 ай бұрын
just changed my life.
@OurDivineKing
@OurDivineKing 10 ай бұрын
Fire hose ending.... lol. Great stuff.
@jakobgarde6769
@jakobgarde6769 10 ай бұрын
Awesome video! Thanks for all the great tips! 🙏
@maddsua
@maddsua 10 ай бұрын
Nah this channel is gold, and I wasn't even looking for copper
@ihspan6892
@ihspan6892 10 ай бұрын
Nicely put together, thank you!
@SanjeevGhosh
@SanjeevGhosh 10 ай бұрын
Super helpful video. Always excited to watch your content. Very rewarding.
@aaronevans6442
@aaronevans6442 9 ай бұрын
If web developers can't even manage to use a simple drop down field, why on earth would you expect them to use a built in modal . I predict will become the new tag, and we'll use it for rendering everything (except italics).
@awesomedude3247
@awesomedude3247 9 ай бұрын
Been working on a website with lots of pop ups and the diolouge fewture is a game changer for me
@RandomPlaythrough831
@RandomPlaythrough831 9 ай бұрын
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 !
@abhaykumar9806
@abhaykumar9806 10 ай бұрын
Some great features there that I'll use are dialog, color-mix and structuredClone. I already knew about dialog.
God-Tier Developer Roadmap
16:42
Fireship
Рет қаралды 6 МЛН
Masterclass: AI-driven Development for Programmers
8:49
Fireship
Рет қаралды 1 МЛН
Thx for 54M ❤️
00:17
Younes Zarou
Рет қаралды 47 МЛН
100+ Web Development Things you Should Know
13:18
Fireship
Рет қаралды 1,3 МЛН
You probably won’t survive 2024... Top 10 Tech Trends
8:56
Fireship
Рет қаралды 1,6 МЛН
This AI helps you build unique coding projects
7:37
Master Codebender
Рет қаралды 5 М.
Award Winning Animation With Only 20 Lines Of CSS?
6:59
Hyperplexed
Рет қаралды 1,5 МЛН
Reacting to Controversial Opinions of Software Engineers
9:18
Fireship
Рет қаралды 1,9 МЛН
I built a JavaScript framework
10:11
Fireship
Рет қаралды 475 М.
How to get rich as a solo software developer - The Ultimate Guide
8:51
I tried 10 code editors
10:28
Fireship
Рет қаралды 2,7 МЛН
10 CSS Pro Tips - Code this, NOT that!
9:39
Fireship
Рет қаралды 2 МЛН
how to never write bug
7:20
Fireship
Рет қаралды 793 М.
WoW 😮  SMD Soldering #soldering
0:15
Educational Engineering Team
Рет қаралды 5 МЛН
Не покупай эти процессоры в 2024 году
1:00
CompShop Shorts
Рет қаралды 438 М.