Most SPAs don’t make use of the back button correctly, and it trains people to not use it because it’s behavior is kinda unexpected. (Does clicking back closes that modal in Twitter or moves me back to previoussite.com?) I wish browsers gave the user a visual cue when clocking back actually leaves the current page/origin. The back button still in the 90s. They could have like different states, not exactly like but something like this: ⏮⏪◀️
And it has become even more confusing now that pages and apps have their own back button somewhere in the upper-left area of the viewport. And it's quite common that clicking any of the two buttons does the same thing, which confuses people even more.
Those are the ones with different engines. Edge, Samsung, Brave etc all Chromium-based, so I'm pretty sure the behaviour would be the same as Chrome. Happy to be proven wrong though!
That was hell lot of weirdness. most of the auth services add a to keep session tracking on. Thank god we dont navigate them from parent. BTW I really love these quiz thingy. Makes me think too rather that just watching and following links in description. Cheers to jake and surma. With these videos I feel like I am becoming nerd although I am far far far away from it. 😂
Iframe navigation creating entries in the history was a very useful workaround for implementing SPAs back in the days of IE6/7, which didn't support hashchange event.
I could have swore you guys talked through this couple years ago. It was on a podcast where you talked about the rare case Safari truer to spec than Chrome/Firefox usually a case of the spec being written to follow practice. How back buttons work vs. how they're SUPPOSED to work was just one point in that larger discussion.
The whole navigation part of s makes them really complicated. Been running into issues with that multiple times; like e.g. an ifarme in a modal which tries to re-authenticate and accidentally causes a redirect of the whole page, brilliant. I would be fine with deprecating them as long as we get something like a element to provide those capabilities separately.
Man you guys are awesome, every night when I am done with my day tired and feeling like just dropping down on the bed, I put you guys on and I am grateful to have always learned with the exciting topics that you guys come up with. It's been a while I have subscribed to this channel and only because of the fun and banter Surma and Jake has. Both of you have a really friendly style and with each video you bring more values to the lives of web developers. Hope you guys be safe and well and keep rocking the tech world
Amazing video! I've been using QuickSight (embedded BI tool/dashboards) and it's quite convenient to use it in an -- usually, except when your authentication times out and you hit back the next day -- but was mystified until now how the back button seems to magically work. I feel like a boomer, seeing you young guys reverse engineer browser behavior, heck I used to build pages with frames on geocities, so I know this stuff is really old at this point.
There's some interesting back button behaviour if a page loads its own URL via XHR, using a different Accept header to return different data: Browser => /items (Accept: text/html) # => … visible XHR => /items (Accept: application/json) # => { … } returned to Javascript /leave-page Back => /items # => displays the raw { … } JSON in the viewport This is because the browser cache doesn't pay attention to the Accept header (regardless of the Vary header). It just stores the JSON from the XHR in the cache as the "most recently seen" response, and restores that next time that URL is looked up.
The big back button question is when is chrome et all going to make history|navigation manipulation a permission. It's nuts how many websites don't seem to get severely punished in ranking when it spams the history so you cannot go back to the serps along with other hijinks.
I don't see how this would work in practice, as you'd need to show a permission prompt when the user clicks a link. Chrome tries to mitigate history attacks though, so if you've found an easy way around that, please file it at crbug.com
I got to 13:49 and I am tapping out.. You have broken me. I would love to tell you I WILL watch the rest of this .... But if I am honest.... I am dying here!
I am pretty sure this strangeness is very obvious in Service Now. was always really cool but haven't recent changes to browsers helped to lower the need for using them?
Also solid content, always look forward to seeing you two go deeeep into weby things, always learn something and good to see how experts talk through the complexities of the web. Makes my imposter syndrome disappear just a little 😅
This is wild and I'm aware of some of those. I have an old chat using s to send and load messages and I've been dealing with these quirks for the last 15 years :D Currently, I add the s using document.write to escape most of the weirdness. Is it your job to propose a reasonable behaviour or to just document the differences? Either way, good luck.
A bit of both. Since the browsers all behave differently, I have to pick something to standardise, but this is old old code in a lot of browsers so they don't want to stray too far from what they do now.
This was fascinating!!! Really wild concepts here. I found it especially hard because I haven’t used s since 1998. (That’s actually completely true - I created a truly hideous multiple-guess trivia game where the potential answers were each loaded in a different .)
I was gonna say it would be so much easier to deprecate s. 😂 I feel like the web would be a better place if third party content was either an embedded widget object or a portal. If included as an object it effectively just embeds some code into the current page without being a full page. If included as a portal, you get a preview of the page but interaction with it causes the browser to navigate to that page. Either way the parent page can then just treat it like an image or video element rather than a child document. I can't think of a single time that I've ever benefitted from being able to use a particular webpage from within another webpage. Every single I've ever used has been a third party widget that didn't need to be an entirely separate document or has been an embedded version of a third party payment provider which would have been a lot more reassuring as a proper redirect to the payment site (not to mention it would then be handled by the app on mobile rather than a tiny window in the browser).
"...third party content was either an embedded widget object or a portal." or placed inside a shadow Dom (closed mode perhaps) to get the sandboxing and its javascript contained within the upcoming "Realms api" github.com/tc39/proposal-realms
This behaviour in s goes back to the times when we used ordinary frames. Say a menu frame that loads pages in the content frame. Then it really makes sense that history works on the content-frame. There was even a short time when this was *not* the case which was really annoying, because then you'd click around the site and hitting the back-button would just leave the entire site. The day the backbutton started to remember the navigation in the frames was a good day
Ugh, I replied to this, but moderators deleted my comment. Our moderation is so broken right now, sorry. We have another video on contributing to web standards called "Changing web standards - HTTP 203". I would link to it, but I think that's why they deleted my comment. Can't even link to our own videos. Absolutely ridiculous.
@@Manivelarino No, but you asked why anyone would use an . For example if your application displays emails (which can be html). With sandbox you can for example forbidd javascript execution, which gives you a layer of protection against malicious emails.
@@koussayhajkacem287 heh kinda. I'm trying to write how it should work, but then I get to a bit where I think "wait, but how does this work?", then I test browsers and find out it doesn't
@@jakearchibald WOW. I didn't expect this. Based on the 99% most accessed websites, how many of them have s? I am curious if most of those 53% websites are just random ones no one uses on daily bases.
@@jakearchibald Were you querying for s that were in the response body/markup or the HAR files for any s? Any site that has ads is likely using dynamically-generated s.
Before you start testing that back button yourself, why not subscribe to the channel?
Most SPAs don’t make use of the back button correctly, and it trains people to not use it because it’s behavior is kinda unexpected. (Does clicking back closes that modal in Twitter or moves me back to previoussite.com?)
I wish browsers gave the user a visual cue when clocking back actually leaves the current page/origin. The back button still in the 90s.
They could have like different states, not exactly like but something like this: ⏮⏪◀️
And it has become even more confusing now that pages and apps have their own back button somewhere in the upper-left area of the viewport.
And it's quite common that clicking any of the two buttons does the same thing, which confuses people even more.
Opening a modal should not pollute the history.
I love these. Thank you, Surma and Jake!
My favourite bit is when Surma says "squiz"
shut up...
@@dassurma Love you guys!!!
Lol poor Surma.. I think you did pretty good on that quiz! Good job ^_^
14:19 I love how every browser just means chrome + firefox + safari 😂😂
Those are the ones with different engines. Edge, Samsung, Brave etc all Chromium-based, so I'm pretty sure the behaviour would be the same as Chrome. Happy to be proven wrong though!
That was hell lot of weirdness. most of the auth services add a to keep session tracking on. Thank god we dont navigate them from parent. BTW I really love these quiz thingy. Makes me think too rather that just watching and following links in description. Cheers to jake and surma. With these videos I feel like I am becoming nerd although I am far far far away from it. 😂
Iframe navigation creating entries in the history was a very useful workaround for implementing SPAs back in the days of IE6/7, which didn't support hashchange event.
Love HTTP203! Keep em coming ♥️
You have the smartest chrome dev articles.
These are great. Thank you two. Also damn, Surma is hella smart.
Loving this series. very underrated
I could have swore you guys talked through this couple years ago. It was on a podcast where you talked about the rare case Safari truer to spec than Chrome/Firefox usually a case of the spec being written to follow practice. How back buttons work vs. how they're SUPPOSED to work was just one point in that larger discussion.
The whole navigation part of s makes them really complicated. Been running into issues with that multiple times; like e.g. an ifarme in a modal which tries to re-authenticate and accidentally causes a redirect of the whole page, brilliant.
I would be fine with deprecating them as long as we get something like a element to provide those capabilities separately.
Man you guys are awesome, every night when I am done with my day tired and feeling like just dropping down on the bed, I put you guys on and I am grateful to have always learned with the exciting topics that you guys come up with. It's been a while I have subscribed to this channel and only because of the fun and banter Surma and Jake has. Both of you have a really friendly style and with each video you bring more values to the lives of web developers. Hope you guys be safe and well and keep rocking the tech world
aww thanks!
@@jakearchibald Omg thanks for acknowledging this personally, it means the world to me bro
Amazing video! I've been using QuickSight (embedded BI tool/dashboards) and it's quite convenient to use it in an -- usually, except when your authentication times out and you hit back the next day -- but was mystified until now how the back button seems to magically work.
I feel like a boomer, seeing you young guys reverse engineer browser behavior, heck I used to build pages with frames on geocities, so I know this stuff is really old at this point.
I thought this would involve backbutton hijacking, you always kinda surprize me jake. Really insightful vid.
Jake: How are you?
Surma: I'm .... alive
How did he not follow up on this 😂
There's some interesting back button behaviour if a page loads its own URL via XHR, using a different Accept header to return different data:
Browser => /items (Accept: text/html) # => … visible
XHR => /items (Accept: application/json) # => { … } returned to Javascript
/leave-page
Back => /items # => displays the raw { … } JSON in the viewport
This is because the browser cache doesn't pay attention to the Accept header (regardless of the Vary header). It just stores the JSON from the XHR in the cache as the "most recently seen" response, and restores that next time that URL is looked up.
Now of course I find that Jake wrote a blog post about that exact issue in 2014
@@garethadams5580 ohhh interesting! I assume the XHR response doesn't have a vary header?
#deprecates
#UndeprecateFrameset
More 203 thanks.... a lot more.
The big back button question is when is chrome et all going to make history|navigation manipulation a permission.
It's nuts how many websites don't seem to get severely punished in ranking when it spams the history so you cannot go back to the serps along with other hijinks.
I don't see how this would work in practice, as you'd need to show a permission prompt when the user clicks a link. Chrome tries to mitigate history attacks though, so if you've found an easy way around that, please file it at crbug.com
I can't decide, what i do more: love these guys or hate s
I just realized you use a switch controller as a controller for the slides. Nice
Indeed! He upgraded! I remember he always used Wiimote in his Google IO talks :)
I got to 13:49 and I am tapping out.. You have broken me. I would love to tell you I WILL watch the rest of this .... But if I am honest.... I am dying here!
I am pretty sure this strangeness is very obvious in Service Now. was always really cool but haven't recent changes to browsers helped to lower the need for using them?
I'm curious if you figured out what Firefox does with that s case yet? Because hopefully hopefully it isn't time-based lol
Also solid content, always look forward to seeing you two go deeeep into weby things, always learn something and good to see how experts talk through the complexities of the web. Makes my imposter syndrome disappear just a little 😅
This is wild and I'm aware of some of those. I have an old chat using s to send and load messages and I've been dealing with these quirks for the last 15 years :D Currently, I add the s using document.write to escape most of the weirdness. Is it your job to propose a reasonable behaviour or to just document the differences? Either way, good luck.
A bit of both. Since the browsers all behave differently, I have to pick something to standardise, but this is old old code in a lot of browsers so they don't want to stray too far from what they do now.
Jake Jubilation during the Super Suma Session Sermon 😵
This was fascinating!!! Really wild concepts here. I found it especially hard because I haven’t used s since 1998. (That’s actually completely true - I created a truly hideous multiple-guess trivia game where the potential answers were each loaded in a different .)
I love these, thanks
definitely with surma here. I started mentally bracing as soon as I heard "".
Fun fact: you can also press and hold / right-click the forward button, even though you'll probably never use that
I've been testing that too 😀
I don't know that if you click the link, it would navigate the
deprecate s !
I was gonna say it would be so much easier to deprecate s. 😂
I feel like the web would be a better place if third party content was either an embedded widget object or a portal. If included as an object it effectively just embeds some code into the current page without being a full page. If included as a portal, you get a preview of the page but interaction with it causes the browser to navigate to that page. Either way the parent page can then just treat it like an image or video element rather than a child document.
I can't think of a single time that I've ever benefitted from being able to use a particular webpage from within another webpage. Every single I've ever used has been a third party widget that didn't need to be an entirely separate document or has been an embedded version of a third party payment provider which would have been a lot more reassuring as a proper redirect to the payment site (not to mention it would then be handled by the app on mobile rather than a tiny window in the browser).
Fwiw, all my research here branched off trying to figure out how to spec particular parts of portals
"...third party content was either an embedded widget object or a portal."
or placed inside a shadow Dom (closed mode perhaps) to get the sandboxing and its javascript contained within the upcoming "Realms api" github.com/tc39/proposal-realms
@@chris-eg fwiw, putting an in shadow DOM doesn't prevent it from adding history entries.
super interesting!
First 4 minutes and you blew my mind.
Great content - challenges us dev's to think.
You guys rock!
This behaviour in s goes back to the times when we used ordinary frames. Say a menu frame that loads pages in the content frame. Then it really makes sense that history works on the content-frame.
There was even a short time when this was *not* the case which was really annoying, because then you'd click around the site and hitting the back-button would just leave the entire site.
The day the backbutton started to remember the navigation in the frames was a good day
@@ArjenHaayman Then why don't you fix it?
@@31redorange08 ah, I'm too much used to twitter :-)
how to disable the back button in chrome? add a million s then remove them with javascript - 16:35
How do you get into writing specs? Always been a question I’ve been curious about
Ugh, I replied to this, but moderators deleted my comment. Our moderation is so broken right now, sorry. We have another video on contributing to web standards called "Changing web standards - HTTP 203". I would link to it, but I think that's why they deleted my comment. Can't even link to our own videos. Absolutely ridiculous.
Jake, where did you get that T-shirt?
Ugh, I replied to this, but moderators deleted my comment. Our moderation is so broken right now, sorry. Anyway, it's "never forget" on TeePublic
I would like to work in Google!... I am Software Developer and System Analyst..😊
Why would anyone use an when we have components and graphql?
I guess by "components and graphql" you mean just content in the DOM? In which case the answer is "effective sandboxing of third party content"
@@jakearchibald yes, I meant adding third party components as if it's first party and using their api. I think mapbox works this way and I like it.
@@Manivelarino but then it isn't sandboxed...
@@saithisx Do I need it to be sandboxed if the component isn't going to change without me updating it? (via npm for example)
@@Manivelarino No, but you asked why anyone would use an . For example if your application displays emails (which can be html). With sandbox you can for example forbidd javascript execution, which gives you a layer of protection against malicious emails.
Moral of the story: don’t use s 💪
Is this actually what Google engineers do all day?
We did it for 22:35
@@jakearchibald I meant try to break the web actually...
@@koussayhajkacem287 heh kinda. I'm trying to write how it should work, but then I get to a bit where I think "wait, but how does this work?", then I test browsers and find out it doesn't
who is using s anways?
Good question! So, I went and queried HTTPArchive about this, which holds data on over 6 million pages, and turns out around 53% of them have s.
@@jakearchibald WOW. I didn't expect this. Based on the 99% most accessed websites, how many of them have s? I am curious if most of those 53% websites are just random ones no one uses on daily bases.
I suspect most of those are auth or tracking widgets. Probably a good third at least are the Facebook thumbs up widget!
@@jakearchibald Were you querying for s that were in the response body/markup or the HAR files for any s? Any site that has ads is likely using dynamically-generated s.
@@supergnuru I'm not sure. I used num_s in the summary_pages table, but I can't find a reference for it. But anyway, ad s are still s.