The latest in Web UI (Google I/O ‘24)
ฝัง
- เผยแพร่เมื่อ 15 พ.ค. 2024
- Get a rundown of all the things developers should know that landed in the browser for UI development since the last I/O, plus what's on the product roadmap.
Speaker: Una Kravets
Watch more:
Check out all the Web videos at Google I/O 2024 → goo.gle/io24-web-yt
Subscribe to Google Chrome Developers → goo.gle/ChromeDevs
#GoogleIO
Event: Google I/O 2024 - วิทยาศาสตร์และเทคโนโลยี
![CAMPปลิ้น | EP.76[1/2] โจโฉเปิดป่าโหดรับโอ๊ต-ป๊อบ รอบนี้พี่เอาจริง!](http://i.ytimg.com/vi/pNg5O7Pf-a0/mqdefault.jpg)
Check out all the web sessions at Google I/O → goo.gle/io24-web-yt
@media {prefers-* remains distractingly notional unril such time that Chrome provides Users a way to convey their User Preference to the User Agent. ie with Config Options. Everyone please add your voices on this subject to all Chrome for Developers posts until action occurs, and upvote each other's comments until Chrome Devs take action. Not only is this preventing realisation of benefits by Users, but it blocks Developers from even testing it.
Where can I find the sample code for the talk?
Are your Chrome UI devs smoking crack or what's the deal? Because all of the changes are awful and not only are they awful but you also made it so that we can't revert the changes
Over then next couple of years, this new popover API is going to save centuries worth of accumulated developer time.
Are y'all not using component libraries? Or stack overflow? I've literally never struggled with a popover
Radix UI all the way baby @@TheBswan
@@TheBswan UI libraries can help you build popovers, but you should know what's inside it. To implement a simple modal popup, you need to handle the visibility, z-index, position, keyboard events, mouse events, it's very hard to do it right in plain javascript. Using a react component to implement a popup is easy, but the library did the hard things for you. I don't write react, I use blazor wasm and tailwindcss to build front end website, so the popover api is a life saver for me.
@@TheBswan "I've literally never struggled with a popover"
and yet: " using component libraries? Or stack overflow?"
This is not about "struggle" you burnt time on this you shouldn't have too.
@@JoeyXieI've written all of these from scratch but it's just so just more efficient these days to use a component library where this is all already handled by teams who have spent hundreds of hours collectively on popovers. Unless you have extremely specific requirements or you're doing it to learn/for fun, it seems a bit unwise not to use premade components.
I'm excited for the popover API, but not because it's going to save me time directly, but rather that of the component library devs who then have more time to spend on other things.
People in 1960s: "We'll have flying cars in 60 years!"
2024: We solved centering a div
and I'm all for it
Huh; css grid solved this years ago
@LarsRyeJeppesen CSS Flex, auto margins, and absolute position fixed it long time ago. Centering a div became an outdated joke.
@@zenlanfleek6580 but people are still googleing it
I don't know what the heck happened to the quality in some of the shots but great talk nontheless, as always it's a blast to see what new stuff comes to the Web and UI developement.
FINALLY!!!! WE CAN CENTER A DIV!!!!!
And aninating gradients, thank you so much!!
View transitions across pages is a huge deal - very exciting!
And SPA finally will be completely obsolete 🎉
@@neutralitat2570SPAs will probably use it too
It's Chromium only for now, unfortunately. Still have to add fallback for unsupported browsers if needed.
@@trashAndNoStar some sort of polyfill based on origin vs an entire framework is a no-brainer.
Safari will add it after 9 years.
I'm constantly using text-wrap: balance; and text-wrap: pretty; as a little progressive enhancement.The same goes for the dialog element with .showModal() and .close() and other features.
Happy to see so many improvements that really simplify my work as a web developer
Super usefull features. Can't wait for them to become available in all browsers.
This is fantastic! The rest of Google I/O felt particularly boring this year
The start of making web experiences cool again. I can't wait to implement some of these new css features.
Great presentation of the improvement of the Web UI
Field Sizing Content for the WIN! OMG my biggest annoyance is that tiny window we all have to type in. Hahaha as I'm typing this I'm noticing that my TH-cam text field is sizing up to at least include 4 lines of text. But I want the option to see everything I wrote, all at once.
Anyway I hope a lot of people enjoy a resized, typed form window so it can continue to improve.
Many great examples. Do you share code examples of these anywhere?
Styling , Popover API and dialog are huge ones. I hope too date, time and calendar inputs get some customisations too.
I can see so much savings in lines of code for my projects once the popover and css scroll are fully implemented in all browsers. Hope they will be baseline soon.
Fantastic demonstration and insightful technical discussion! I really appreciated the depth and clarity.
how can be the part of live session anyone can guide me
Helpfull....gonna use in my future project
Mind-blowing! 😊 I love it! 😍
30:15 Greetings from Lviv ❤
timecodes would be so great
So glad to get the Popover API! 😁
It's amazing! We've been waiting for years!
Since there's a certain way to achieve something without involving any scripting or CSS hacks, does it mean the previous approach will be deprecated?
I would love to watch this in a blog/written format.
Working on it!
@@UnaKravets Pinging for getting my notification once finished
A lot of exciting material here, especially (for me) in view transition, and some of the scroll-driven animations.
would be nice to have a link to a repo with all the examples
This was a wonderful presentation full of excitement and great new features finally being available in baseline. You nailed it all Una, ty so much ❤
More Una presentations pls!
THIS IS AMAZING!! I'm so ready to try all of this
Yuna knocked it out of the park!
A will done presentation thank you!!!
All of my IDE's, React and Sveltekit are calling the `select->button->datalist` combo invalid HTML. How do we use it?
So many advancements .. so many years … wow … but why we still missing a basic combo box select feature with autocomplete ?
Damn, never been so excited about new features... this is amazing, great job! Can't want for them to go baseline
Great video, CSS is the best!
I was done at centering divs :D
When all these functionalities become available in Firefox, it will be worth it. 🔥🦊
It's truly a golden era for web ui🔥
What font is it? Looks neat.
really cool stuff!
34:58 exclusive accordion - we still need style control over the detail elements summary marker.
Though it's funny the anchoring for the popover api 19:38 or vertical centering of align-content-for-block-layout 38:07 might mean new hacks in trying to get a fake marker to layout on the rightside AND vertically center as the summary height changes such as due to text wrapping.
summary::marker { display: none; }
summary::before { ... custom marker closed styling ... }
[open] > summary::before { ... custom marker open styling ... }
(display: flex on summary will collapse the marker)
What about old properties that improve page readability for everyone, like those with dyslexia? One property that is only supported in Firefox is text-justify that allows adjusting spacing between the letters and words to look more balanced, because the default text-align: justify has always looked terrible and nothing like the justification that newspapers use.
I can't wait for Kevin Powell's take on this! 🙂
Does anyone know the name of the code editor theme used in the presentation?
Well well well... very interesting, guys !
cross-page css transitions oh my god my heart is melting
Great talk. Una is an absolute legend.
Looks fantastic. Just need Tailwind to wrap it up and we'll use it in prod.
Sooner or later, not knowing vanilla CSS is going to be a problem.
Web is always the new future
this is incredible!
I love Una!
popover was really exciting
So in other words, I'll be waiting a few years before I use these.
Not years, decades.
Wouldn't you just use it indirectly?
When was the last time you updated your browser? Exactly, you didn't, they just do it by themselves. In a few months you should be good to go with these new features
@@uchennaofoma4624 Sorry, you must be new here. Changes aren't rocket fast across the board and to think you would use the new features simply cause Chrome implements them show how green you are.
@@uchennaofoma4624most of the features mentioned are blink-only for now, or at least not implemented yet in firefox. So probably a big longer than a few months :(
Cross-document view transitions could completely revolutionise and revive old school full stack frameworks like django and laravel
Htmx already fixing it currently.
anchor v.s. popover, which is better? seems they have some overlapped use cases?
They work together - popover reveals/hides the 'floating' element, and anchor positions that element in relation to the trigger.
@@Killyspudful Thanks for the info🤞
Awesome !
super cool
38:22 I'm done. Ok bye.
watching this video made me appreciate more Framer motion to exist
I've been using Firefox for years but it really seems to be lagging behind when it comes to supporting new features.
Nah, Google only shows off features that their own browser supports and never goes out out of their way to show off features that they aren't prioritising (even if their competitors already support them).
For example, Firefox had subgrid for about 4 years before Google.
Excellent improvements on the web, it is a shame that will no longer need programmers to use them (💀AI)
I'm having trust that Tailwind will implement those for the devs.
Yes! That’s the plan! They’ve already started working on anchor positioning
Hahaha true
superb
Watching features came 1, 2 years before would be better since they just got mainly supported :p
🤩🤩🤩
Finally🎉 this is a game changer! Does anyone know if this is iOS/ Android friendly? Or just web?
I need the source code for the menu dropdown
🤯
Only Centering a div might be enough :))
Keep betting on the Web!
I want to see BRAVE!!
getting more complex and heavy
finalyy we dont use ------ to separate the contents :")
Cool bro
We also need sidebar drawer modals
You can build those with popover: codepen.io/web-dot-dev/pen/vYbadaJ
34:58 exclusive accordion - needs preference optout , also needs inclusive accordion behavior.
preference optout - It's annoying when sites have a FAQ they've made it so so you can't have to pieces of content open because the others close.
inclusive - long FAQ's and you have to click open every question one at a time instead of being able to just open them all.
Очень круто! Так много мозговыносящих новинок. Жизнь разработчика никогда не будет прежней
12:47 That 1px upwards translation of "View Transition" bugs me 💀
In just a few more years, I have a feeling that we will go back to PHP since we don't need js anymore. This is good and bad at the same time 😢
I really want Firefox to implement `@scope` 🙏.
RIP Single-Page Apps 15:30
native browser features: useable now, added 10 years ago
I love Computer .
The biggest shame is waiting for all browsers to implement these things, like scroll animation timeline and view timeline. I've been waiting too long for this.
What's needed is an independent standard, that pre-makes these, so browser makers literally have no work to do other than add them in, like a plugin feature.
I guess that would be a browser engine. For example, any browser that uses a Chromium-based engine (i.e. Edge, Arc, Brave, etc.) automatically get these features when Chromium implements them. But the 3 major browser engines (Gecko, Webkit, Chromium) are currently too divergent for everything to just work like a plugin.
@@UnaKravets Thank you for the response Una, I guess it wouldn't be such a headache, if the polyfills worked, almost every issue over on github is polyfill based.
Still I know they are doing their best, and maybe this is why other browsers have not implemented the scroll-timeline yet, simply because it's too difficult to implement.
You can just use them, old browsers just won't animate. So what.
@@avertry9529 There is a popover polyfill by Oddbird! Not all CSS features are easy or efficient to polyfill, though.
5:34 no need GSAP
Yeah no more scrollTrigger plugin for simple scroll animations.
Why download a dependency when the browser can already do it?
@@spartanatreyu Well, so we don't need to rewrite the code especially for complex scroll triggered animations.
Bro jsut make my pc stop overheating if I have 4 chrome tabs open.
you throwing accessibility through the window; popcorn pages. Please keep the browser accessible to those who don't have visual capability as you have!
releasing exclusive accordions is a terrible idea. their UX is really bad, yet for some reason developers love to use it. fortunately, it should be easy to remove with a userscript/ extension
this is actually awesome to enable more and more PWAs and move away from the native apps hell.
ada indonesia coyyy 8:15
Google who autoplays shows forced advertisements on TH-cam having 90% distracting elements , telling the world how to make their website less distractive .
improving accessibility for the needy should be appreciated but destroying other peoples mind first is ugly .
Tokopedia? 😌
ada tokopedia coyy
Wow ada tokped
20+ months and Mozilla still cant implement the View Transitions API. This is why Im just going to stop trying to support the browser at all in my code. They aren't even in the fight anymore. Chrome just getting better and better each day.
23:42 dangerous section with calm blue color, want to delete my account now
Nice, See that's wasn't hard, was it? AI isn't the only cool thing Google.
Safari not supporting this stuff makes it useless to me :(((
TLDW: "Hey guys, you know how you've already implemented most of this on your own. Well guess, what, we've made it more complicated so now you can do it the right way!".
What do you feel has become more complicated?
the demo guy who record video using intel dual core cpu💀
no ios support