I like the transparency about Chrome being behind for once when it comes to faster rendering of previous pages when going back by saving them in memory.
Wow! This is probably the most exciting video I’ve seen about web dev this year. Huge thanks to everyone that helped standardize and ship these new features!
The portal concept is really awesome, I have been tinkering on how to give the mobile web a clean transition we have on native apps. And the best part is that it is only interactive when activated. Although the users getting some visible notification on the URL change when portals are activated will enhance the security in chrome.
Clarification: The layout-shift-preventing benefits of f-mods only apply when you're using line-height "normal", whiiiich you probably aren't. The main benefit of f-mods right now is in controlling the metrics around the baseline. The layout-shift-preventing parts will be much more powerful when we can do something more with letter widths.
I read "Clarification" and immediately expected the text after to be something along the lines of "The further information mentioned in the video can be found behind the links in the description..."
@@jadedtheredone How many frameworks do you really need ? What's the points of all the effort to make the web more lightweight and efficient when devs' no.1 solution is to add stuff instead of fixing what they already have
@@Apolochon the cause of my idea is actually for switching technologies, or collaborating with other parties. another team specialized with another type of framework can also develop other components on the same project without breaking integrity.this principle was actually introduced by using , yet it wasn't a nice solution. So maybe portal can help it.
6:57 - Hah! Every time you said “I know what you’re thinking,” that’s exactly what I was thinking. 😆 While I do think portals can be helpful, I prefer anchor tags with direct href’s to the content I want to load. Hopefully people will use that pattern (e.g. so you can still middle click or right click open new tab, right click copy URL, etc) I hope it doesn’t result in the anti patterns of devs relying solely on JS (e.g. so you have lots of javascript:; in anchors or clickable elements that may not be natively clickable or focusable, etc) who are implementing these new portals. This is why I like service workers which work at the network level to help cache content ahead of time; albeit that’s a bit more complex to implement. If done right, portals can probably be an even easier way to accomplish a similar result while maintaining good fallback functionality (safe degradation).
As far as portals go, it will probably a nice feature for injectable widgets. The problem with widgets that are injectable into some other page is that the other page may be full of animations and movies and if the widget is also heavy for the processor, then weaker phones will suddenly get extremely sluggish. If one could use such a portal to freeze the background page while the widget takes over the interaction, then it would really help.
11:11 Am I the only one that thought for a split second Jake was using a Switch controller as presentation clicker? :D But seriously, I'm really excited, that portals are not dead!
@@victornpb Can you elaborate how you envision that abuse to work? It’s a feature developed within the W3C, and everyone participating has privacy and security front of mind.
I have question, the container intrinsic size HEIGHT is a fixed number, what if the container is responsive designed? do we put different intrinsic-size with media query?
I was playing around with content-visibility a bit and found that when scrolling to the bottom of the page so that areas further up the page get hidden again, the page would jump whenever the contain-intrinsic-size value didn't exactly match the area's height. Is there a way to prevent that?
Does the content-visibility support list item? Like if I have 600 items in a list It loads only those in the viewport. IF so it will be those virtualized list/ react-window killer
I like the transparency about Chrome being behind for once when it comes to faster rendering of previous pages when going back by saving them in memory.
*sigh* if only there was a way to find out further information about these topics :-/
I wish they have added it to the description ;)
I wonder if they would be clickable
We should call them litd for brevity!
There are some links in the description
Jake: Here are css properties that make text display the same on different browsers.
also Jake: It's only supported in one browser.
That was the joke 😀
@@jakearchibald And a good one at that. I've never laughed so hard watching this channel. Keep it up!
:\
Wow! This is probably the most exciting video I’ve seen about web dev this year. Huge thanks to everyone that helped standardize and ship these new features!
The portal concept is really awesome, I have been tinkering on how to give the mobile web a clean transition we have on native apps. And the best part is that it is only interactive when activated. Although the users getting some visible notification on the URL change when portals are activated will enhance the security in chrome.
Clarification: The layout-shift-preventing benefits of f-mods only apply when you're using line-height "normal", whiiiich you probably aren't. The main benefit of f-mods right now is in controlling the metrics around the baseline. The layout-shift-preventing parts will be much more powerful when we can do something more with letter widths.
Monospace all the fonts!
Noooo @@omri9325 I bet you use Vim or Emacs and IRC is your preferred communication tool. ;)
I read "Clarification" and immediately expected the text after to be something along the lines of "The further information mentioned in the video can be found behind the links in the description..."
@@wheatley6544 hah I missed a trick there
Portals seem really cool! Definitely a step towards a more native-like and smooth experience on the web
... for the people who haven't moved to SPAs
They are like 2020 version of pop ups. You’re gonna browse random websites and floating portals will try to stay under your cursor.
I hope this will also help using microservices on frontend level, allowing to use multiple frameworks on different components.
@@jadedtheredone How many frameworks do you really need ?
What's the points of all the effort to make the web more lightweight and efficient when devs' no.1 solution is to add stuff instead of fixing what they already have
@@Apolochon the cause of my idea is actually for switching technologies, or collaborating with other parties. another team specialized with another type of framework can also develop other components on the same project without breaking integrity.this principle was actually introduced by using , yet it wasn't a nice solution. So maybe portal can help it.
layout shift preventing awesome with f-mods. Thanks Chrome Dev Team. Great Work
Jake is so entertaining to watch!
Could listen to Jake all day. Also props to the Video Animation & Illustration peeps behind the scene. 🖌
I am the animation and illustration peeps 😀 (aside from the intro and outro branded anims). All anims were done in the browser.
@@jakearchibald 😅 time to share your dribbble account
PSA: There are links in the description, these are to be clicked for further information.
6:57 - Hah! Every time you said “I know what you’re thinking,” that’s exactly what I was thinking. 😆 While I do think portals can be helpful, I prefer anchor tags with direct href’s to the content I want to load. Hopefully people will use that pattern (e.g. so you can still middle click or right click open new tab, right click copy URL, etc) I hope it doesn’t result in the anti patterns of devs relying solely on JS (e.g. so you have lots of javascript:; in anchors or clickable elements that may not be natively clickable or focusable, etc) who are implementing these new portals. This is why I like service workers which work at the network level to help cache content ahead of time; albeit that’s a bit more complex to implement. If done right, portals can probably be an even easier way to accomplish a similar result while maintaining good fallback functionality (safe degradation).
fwiw, portals will have a default click behaviour which activates the portal. You raise a good question about middle click though.
It's simple enough to add a middle-click event listener for the time being. 🤷♂️
I like how he is playing a Switch game with only one joy-con while giving this presentation. That's true skill.
He's changing slides... He talks about this in his podcast HTTP203
@@chinmayk8004 No my dude, you are mistaken.
As far as portals go, it will probably a nice feature for injectable widgets. The problem with widgets that are injectable into some other page is that the other page may be full of animations and movies and if the widget is also heavy for the processor, then weaker phones will suddenly get extremely sluggish.
If one could use such a portal to freeze the background page while the widget takes over the interaction, then it would really help.
11:11 Am I the only one that thought for a split second Jake was using a Switch controller as presentation clicker? :D
But seriously, I'm really excited, that portals are not dead!
I am 😀
Amazing video!!! Where can I get the blue background of the presentation, I love it!!!!
portals are mind-blowing
Woah dude.
Great stuff! But how on earth can I get further information on these topics?
I like this guy.
Where can I find links to pages with more information? 🙃
Back to 90's...let's the browsers war begin and the frontend nightmare start!
Not sure if I understood but you said something about the description?
Portals are a good fit for MPA and SSR apps. On the other hand, PWA is still the holy grail for bandwidth saves (but needs more work)
A MPA can be a PWA. They are not mutually exclusive.
I saw the future of Portals. I think I’m gonna be the first developer to make a portal-blocker extension 😅.
I know that feature is kind novel but I’m sure it’s going to be abused, by shopping websites, news blogs and ad networks.
@@victornpb Can you elaborate how you envision that abuse to work? It’s a feature developed within the W3C, and everyone participating has privacy and security front of mind.
I have question, the container intrinsic size HEIGHT is a fixed number, what if the container is responsive designed? do we put different intrinsic-size with media query?
You can. You can also use other units like vw vh em etc
I really love portals and have been using it since it was released in 85, but unfortunately, it has not made its way into stable yet :(
He said chrome will save the previous page in "memory" it implies that chrome is now even more RAM hungry than never before😂
Correct me if am wrong.
damn you are probably correct. lol
I never manage to spell "intrinsic" correct. Can we change that to something writeable?
I was playing around with content-visibility a bit and found that when scrolling to the bottom of the page so that areas further up the page get hidden again, the page would jump whenever the contain-intrinsic-size value didn't exactly match the area's height. Is there a way to prevent that?
Does this happen in Canary too? Some bugs have been fixed. If not, can you create a public demo of the issue? I can file the bug for it.
Does the content-visibility support list item? Like if I have 600 items in a list It loads only those in the viewport. IF so it will be those virtualized list/ react-window killer
Yeah, it works with list items. It still loads all of the list items, but it won't have to perform layout on them.
@@DennisJ42 right, but if your CSS selector is "li" then it's applying to all the list items.
seen an unrelated talk about portals, sad that its still behind a flag
epic ending 😹
when you say chrome, does it also mean chromium?
Yep!
What are you using that switch controller for? 😂
To change slides
so much
just give us better an dfaste PWA's and Flutter Web final version
pagehide and pageshow are not new things, they have been there long time ago. SImiliar with prefetch and preload
Beyond fast! And eats more RAM