{"id":263963,"date":"2017-12-16T13:32:32","date_gmt":"2017-12-16T20:32:32","guid":{"rendered":"http:\/\/css-tricks.com\/?p=263963"},"modified":"2017-12-16T13:32:32","modified_gmt":"2017-12-16T20:32:32","slug":"just-dont-trust-tab","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/just-dont-trust-tab\/","title":{"rendered":"When You Just Don&#8217;t Trust a Tab"},"content":{"rendered":"<p>Do we need a word for when a browser tab has sat too long and you just don&#8217;t <em>trust<\/em> thing are going to work as you expect them do when you come back?<br \/>\n<a href=\"https:\/\/twitter.com\/chriscoyier\/status\/937070931943489538\" rel=\"noopener\">I tweeted that<\/a> the other day and apparently other people had them feels. <\/p>\n<p><!--more--><\/p>\n<p>It&#8217;s that feeling where you just know your session isn&#8217;t valid anymore and if you actually try to do anything that requires you to be logged in, it ain&#8217;t gonna work. It&#8217;s particularly uncomfortable if you were actually trying to do something and now you&#8217;re unsure if it&#8217;s done or saved. <\/p>\n<p>As for that name&#8230; here&#8217;s some good ones from <a href=\"https:\/\/twitter.com\/chriscoyier\/status\/937070931943489538\" rel=\"noopener\">the thread:<\/a><\/p>\n<ul>\n<li>Schr\u00f6dinger&#8217;s tab<\/li>\n<li>Crusty tab<\/li>\n<li>Tab smell<\/li>\n<li>Stale tab<\/li>\n<li>Fossilized tab<\/li>\n<li>Tab napping<\/li>\n<li>Dead tab<\/li>\n<li>Orphaned tab<\/li>\n<li>Tab rot<\/li>\n<\/ul>\n<h3>So how do you fix it?<\/h3>\n<p>It&#8217;s a UX issue, really. Depends on the situation. Here&#8217;s some options.<\/p>\n<h4>Shut it all down.<\/h4>\n<p>Banks do this a lot. When your session expires, which they time-limit pretty aggressively, you don&#8217;t just sit on the page, they log you out and send you back to a log in screen with a message. <\/p>\n<p>They might warn you:<\/p>\n<figure id=\"post-263965\" class=\"align-none media-263965\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/12\/log-out-warning.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><\/figure>\n<p>Then you&#8217;re gone:<\/p>\n<figure id=\"post-263966\" class=\"align-none media-263966\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/12\/chase-gone.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><\/figure>\n<figure id=\"post-263967\" class=\"align-none media-263967\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/12\/amex-gone.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><\/figure>\n<p>That might seem a bit much for a site with less sensitive security. But it does quite nicely solve the (let&#8217;s pick one) &#8220;Dead Tab&#8221; issue. You aren&#8217;t left wondering anything. It took action, logged you out, and dropped you on a page where there isn&#8217;t any half-baked state.<\/p>\n<h4>Stay where you are, but warn about actions.<\/h4>\n<p>Many sites want to keep you logged in. Ideally, as long as it&#8217;s secure, you&#8217;d be logged in forever until you explicitly log out. Logging in is an awkward dance that nobody particularly enjoys and keeps you away from doing what you want to do. <\/p>\n<p>CodePen is in this category, I&#8217;d say. We&#8217;d rather not log you out agressively, but certainly you can get logged out either with long periods of inactivity, or you can log yourself out. Say you logged out on a different tab&#8230; that&#8217;ll log you out everywhere, but at the moment we don&#8217;t anything for those other tabs left often that look like you are logged in.<\/p>\n<p>That&#8217;s the &#8220;dead tab&#8221; issue. But we do warn you if an action happens that you can&#8217;t actually do.<\/p>\n<p>WordPress has a kind of awkward flow related to this. Tabs can easily become dead, and if they do, you get no warning at all. When you perform an action that you can&#8217;t do, you&#8217;ll get this:<\/p>\n<figure id=\"post-263969\" class=\"align-none media-263969\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/12\/wordpress_theme.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><\/figure>\n<p>That&#8217;s a kind of middleman page that actually does refresh you session, so if you do &#8220;try again&#8221;, it usually works. It&#8217;s scary every time though. Even if it doesn&#8217;t work, the biggest risk in WordPress is losing writing, but even then, <a href=\"https:\/\/codex.wordpress.org\/Revisions#Autosaves\" rel=\"noopener\">autosave<\/a> usually saves the day.<\/p>\n<p>Here&#8217;s an example on CodePen where I created a Pen when I was logged in, but logged out elsewhere, then tried to save.<\/p>\n<figure id=\"post-263968\" class=\"align-none media-263968\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/12\/logged-out-save.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><\/figure>\n<p>I&#8217;d give us a C- here. At least you know what&#8217;s going on and you don&#8217;t lose any work, but, from here on out it&#8217;s awkward. You&#8217;ll have to log in on another tab, and probably copy and paste code elsewhere to save it, as the &#8220;dead tab&#8221; can&#8217;t get un-dead unless you refresh it. <\/p>\n<p>If we were gunning for an A, we&#8217;d allow you to log in on that page without refreshing somehow, and make sure any unsaved changed get saved after the successful login. And with an unsuccessful login, still make sure you get a copy of unsaved work somehow. We might call that&#8230;<\/p>\n<h4>Stay where you are, warn proactively.<\/h4>\n<p>Perhaps messaging like: &#8220;You&#8217;ve been logged out. You can log back in here.&#8221;<\/p>\n<p>To know this, the front end of your site needs to know about the log in status either periodically or in real time. For example, a server-ping every X seconds to check that status and if you&#8217;ve become logged out, show the message (without requiring any other action). Or perhaps a more modern websocket connection that could push the logging out messaging as it happens.<\/p>\n<p>If you can wire that up to all happen on any page of the site, not require changing pages to fix it, and never lose any unsaved work, that&#8217;s pretty ideal.<\/p>\n<h4>The truly dead tab<\/h4>\n<p>The worst case scenario is when the tab has died, and there is no path to recovery. It doesn&#8217;t tell you it&#8217;s dead, leaving the page could result in unsaved work or actions, and there is no warning or recovery steps. <\/p>\n<h3>Have you seen great UX for this?<\/h3>\n<p>This is a major issue in that it affects every single site you can log into. It&#8217;s both suprising that there isn&#8217;t more talk and best practices surrounding this, and that there aren&#8217;t some stand-out sites that handle this particularly awesome to shout out. <\/p>\n<p>Do you know of some particularly good (or bad) examples?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Do we need a word for when a browser tab has sat too long and you just don&#8217;t trust thing are going to work as you expect them do when you come back? I tweeted that the other day and apparently other people had them feels.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/263963"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=263963"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/263963\/revisions"}],"predecessor-version":[{"id":263970,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/263963\/revisions\/263970"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=263963"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=263963"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=263963"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}