Check out all the web sessions at Google I/O → goo.gle/io24-web-yt

@linuxgeex

19 күн бұрын

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

@aberba

13 күн бұрын

Where can I find the sample code for the talk?

@Rick_Sanchez_Jr.

13 күн бұрын

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.

@TheBswan

17 күн бұрын

Are y'all not using component libraries? Or stack overflow? I've literally never struggled with a popover

@zenlanfleek6580

17 күн бұрын

Radix UI all the way baby ​@@TheBswan

@JoeyXie

16 күн бұрын

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

@TheNewton

15 күн бұрын

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

@a11aaa11a

7 күн бұрын

​@@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

@LarsRyeJeppesen

17 күн бұрын

Huh; css grid solved this years ago

@zenlanfleek6580

17 күн бұрын

​@LarsRyeJeppesen CSS Flex, auto margins, and absolute position fixed it long time ago. Centering a div became an outdated joke.

@poschinski

16 күн бұрын

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

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

View transitions across pages is a huge deal - very exciting!

@neutralitat2570

20 күн бұрын

And SPA finally will be completely obsolete 🎉

@invinciblemode

19 күн бұрын

@@neutralitat2570SPAs will probably use it too

@trashAndNoStar

18 күн бұрын

It's Chromium only for now, unfortunately. Still have to add fallback for unsupported browsers if needed.

@mma93067

18 күн бұрын

@@trashAndNoStar some sort of polyfill based on origin vs an entire framework is a no-brainer.

@zenlanfleek6580

17 күн бұрын

Safari will add it after 9 years.

Super usefull features. Can't wait for them to become available in all browsers.

The start of making web experiences cool again. I can't wait to implement some of these new css features.

It's truly a golden era for web ui🔥

This is fantastic! The rest of Google I/O felt particularly boring this year

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

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.

FINALLY!!!! WE CAN CENTER A DIV!!!!! And aninating gradients, thank you so much!!

Great presentation of the improvement of the Web UI

timecodes would be so great

A lot of exciting material here, especially (for me) in view transition, and some of the scroll-driven animations.

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

Many great examples. Do you share code examples of these anywhere?

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.

@UnaKravets

20 күн бұрын

Working on it!

@thengakola6217

18 күн бұрын

@@UnaKravets Pinging for getting my notification once finished

So glad to get the Popover API! 😁

would be nice to have a link to a repo with all the examples

30:15 Greetings from Lviv ❤

So many advancements .. so many years … wow … but why we still missing a basic combo box select feature with autocomplete ?

All of my IDE's, React and Sveltekit are calling the `select->button->datalist` combo invalid HTML. How do we use it?

Helpfull....gonna use in my future project

Yuna knocked it out of the park!

Does anyone know the name of the code editor theme used in the presentation?

When all these functionalities become available in Firefox, it will be worth it. 🔥🦊

Damn, never been so excited about new features... this is amazing, great job! Can't want for them to go baseline

What font is it? Looks neat.

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.

@JakobEriksen

15 күн бұрын

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)

I was done at centering divs :D

THIS IS AMAZING!! I'm so ready to try all of this

Mind-blowing! 😊 I love it! 😍

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!

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

anchor v.s. popover, which is better? seems they have some overlapped use cases?

@Killyspudful

19 күн бұрын

They work together - popover reveals/hides the 'floating' element, and anchor positions that element in relation to the trigger.

@havefun5519

19 күн бұрын

@@Killyspudful Thanks for the info🤞

A will done presentation thank you!!!

cross-page css transitions oh my god my heart is melting

So in other words, I'll be waiting a few years before I use these.

@layhoutchea5695

20 күн бұрын

Not years, decades.

@SirusStarTV

19 күн бұрын

Wouldn't you just use it indirectly?

@uchennaofoma4624

19 күн бұрын

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

@socialkruption

19 күн бұрын

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

@kevin00898

19 күн бұрын

​@@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 :(

It's amazing! We've been waiting for years!

Looks fantastic. Just need Tailwind to wrap it up and we'll use it in prod.

@aberba

13 күн бұрын

Sooner or later, not knowing vanilla CSS is going to be a problem.

Cross-document view transitions could completely revolutionise and revive old school full stack frameworks like django and laravel

@repotranstech9614

16 күн бұрын

Htmx already fixing it currently.

Great video, CSS is the best!

Web is always the new future

Well well well... very interesting, guys !

I'm having trust that Tailwind will implement those for the devs.

@UnaKravets

20 күн бұрын

Yes! That’s the plan! They’ve already started working on anchor positioning

@forno_nicolas

20 күн бұрын

Hahaha true

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.

@spartanatreyu

16 күн бұрын

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)

really cool stuff!

I need the source code for the menu dropdown

popover was really exciting

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.

38:22 I'm done. Ok bye.

We also need sidebar drawer modals

@UnaKravets

19 күн бұрын

You can build those with popover: codepen.io/web-dot-dev/pen/vYbadaJ

getting more complex and heavy

I love Una!

Only Centering a div might be enough :))

super cool

superb

I really want Firefox to implement `@scope` 🙏.

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 😢

this is incredible!

12:47 That 1px upwards translation of "View Transition" bugs me 💀

Keep betting on the Web!

native browser features: useable now, added 10 years ago

Great talk. Una is an absolute legend.

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.

@UnaKravets

19 күн бұрын

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.

@avertry9529

19 күн бұрын

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

@LarsRyeJeppesen

17 күн бұрын

You can just use them, old browsers just won't animate. So what.

@UnaKravets

17 күн бұрын

@@avertry9529 There is a popover polyfill by Oddbird! Not all CSS features are easy or efficient to polyfill, though.

I almost started 🥹 during the popver section. There's hope for humanity!

Awesome !

🤯

I want to see BRAVE!!

this is actually awesome to enable more and more PWAs and move away from the native apps hell.

Очень круто! Так много мозговыносящих новинок. Жизнь разработчика никогда не будет прежней

you throwing accessibility through the window; popcorn pages. Please keep the browser accessible to those who don't have visual capability as you have!

Google who autoplays shows forced advertisements on KZread 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 .

5:34 no need GSAP

@nekomew

19 күн бұрын

Yeah no more scrollTrigger plugin for simple scroll animations.

@spartanatreyu

16 күн бұрын

Why download a dependency when the browser can already do it?

@nekomew

16 күн бұрын

@@spartanatreyu Well, so we don't need to rewrite the code especially for complex scroll triggered animations.

RIP Single-Page Apps 15:30

Bro jsut make my pc stop overheating if I have 4 chrome tabs open.

🤩🤩🤩

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

Cool bro

I love Computer .

Tokopedia? 😌

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

@UnaKravets

19 күн бұрын

What do you feel has become more complicated?

ada indonesia coyyy 8:15

the demo guy who record video using intel dual core cpu💀

Nice, See that's wasn't hard, was it? AI isn't the only cool thing Google.

Wow ada tokped

Safari not supporting this stuff makes it useless to me :(((

23:42 dangerous section with calm blue color, want to delete my account now

no ios support

It's annoying there is not writeup for this content

@unakravets4368

16 күн бұрын

Working on it! It'll land this week or next wek

@mahmoudmousa2405

16 күн бұрын

@@unakravets4368 Thank you kindly!

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

@unakravets4368

8 күн бұрын

Which of these additions to the platform is awful and why do you think so?

2028: Mozilla hear about this and is starting considering implementing this in Firefox 2029: Mozilla argue about the implemention being wrong and that it should be done differently because they know better 2030: Implementation is on pause because they're working on a new UI 2036: After years of arguing about the padding of tabs, the new UI is finally done 2040: Mozilla finally implemented the features but they do not work the same way as other browsers because they know better, the 0.5% of users still using Firefox are happy. They can browse the web again

This is so depressing..

@LarsRyeJeppesen

17 күн бұрын

Why?

@ZeZeBatata69

17 күн бұрын

@@LarsRyeJeppesen The whole fake happy corporate vibe, the lingo, the over-complexity, most of this bs is just OKR check boxes inside the usual corporate dynamics.