A breakdown of the most useful new features for web developers using HTML, CSS, and JavaScript. Learn about native dialog windows, WebGPU, CSS container queries, and more.
Check out https://clerk.com to build a beautiful user authentication system.
#webdevelopment #javascript #top10
💬 Chat with Me on Discord
🔗 Resources
– Web Baseline https://web.dev/baseline/
– WebDev 101 https://youtu.be/erEgovG9WBs
– JavaScript 101 https://youtu.be/lkIFF4maKMU
– Web Performance https://youtu.be/0fONene3OIA
🔥 Get More Content – Upgrade to PRO
Upgrade at https://fireship.io/pro
Use code YT25 for 25% off PRO access
🎨 My Editor Settings
– Atom One Dark
– vscode-icons
– Fira Code Font
🔖 Topics Covered
– Beginner web development tutorial
– What is WebGPU?
– Web development best practices
– New CSS features in 2023
– New JS features in 2023
– Measuring performance on the web
– How to build websites from scratch
source
Does your app need authentication? Check out Clerk – their platform is super impressive https://clerk.com
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?"
How the hell you can code and test so many things? Please tell us the secrets
I knew the dialog tag 🙄 but not knowing how to use it
One day, your mum will reply.
In German it's just "ve ve ve" it always sounded so wierd having to say 3x "double-u". But still, what is this? the 90's? Nobody even says it anymore lmao!
I’m probably going to use all the css ones when making my next CSS only web app
Great one!
structuredClone – wow! Only 15 years after lodash implemented it and liberated EVERY project on Earth from implementing its own version of the deep cloning algorithm. BTW, structuredClone also handsomely transfers objects to a worker thread. Native dialogs – cool, but will take another 20 years to natively support a stateful dialog – a modal with its own bookmarkable URL. Some of us may still be eaten by AI alive!
These were actually all amazing!
It is absolutely mind boggling to me that the web is built on such garbage tier language. Even VBA has more sensible syntax and basic functionality.
Oh well, maybe it won't suck by the time I retire.
This is great and all, but it's starting to feel like HTML+CSS+JS is becoming the new C++. There will be 342 ways of doing the same thing, with a gazillion units, CSS rules, tag attributes and top-level functions. Oh, and all of them with their little quirks and subtle incompatibilities between browsers. Something to look forward to. :/
only here for memes!!!
Damn that was a lot of thing i missing
Wow, so much new features making coding easier, Thanks Fireship!
Horny goat weed person of culture
#20 goes CRAZY!
why would anyone wanna use dialog which generate a "virtual" dialog with it's own style when you can use <Alert> which generate a NATIVE dialog ?
The more I know about web technologies the more I wonder how hotchpotch and ad hoc solutions most of them seem.
Man structuredClone made my life so much easier this week, thank you for letting me know about this
7:17 Now that would actually be huge
You an't a reel web develper unless you write u'r own animations and effects by hand each time. Now geet off ma' lawn.
Ah. More things that ChatGPT won’t be able to help with since they came out after 2021 🙂
The dialog feature works well when I use it in an html file I created from scratch. But when I tried to use it in my existing .NET MVC 4 app, I'm getting an error "uncaught typeerror d.showModal is not a function". Anyone here knows why? Thanks!
It's even faster to say dub-dub-dub, which is how I invented space-x twice
What is tailwind doing here? It is not a web feature.
A good one man, thanks.
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
Dub-dub-dub for www
Let's rejoice over structuredClone() 🎉
2:54 Video: "WebGPu is far more majestic" Me: "dont see any difference"
Also, me disables WebGPU, because in no time somebody will decide to use users GPU to mine some cryptocrap.
"As you can see, WebGPU is far more majestic"… It looks exactly the same ^^
That's how I feel about state drop-down menus. You can't type in MA for Massachusetts or type in Massachusetts a lot of the time because it defaults to Maine. How much time have people wasted on state drop-down menus?
Just flagging that the nesting example at 4:42 is invalid. Nested selectors must be prefixed with a symbol, which is fine for classes, ids etc, but element selectors that start with letters need to be prefixed with `&` e.g. `& h1 { color: goldenrod; }`
Can't wait to replace the my minilons of JSON.parse(JSON.strifingify())
02:52 – Can we really..? 🧐
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