{"id":292138,"date":"2019-06-28T10:33:12","date_gmt":"2019-06-28T17:33:12","guid":{"rendered":"http:\/\/css-tricks.com\/?p=292138"},"modified":"2019-10-15T07:13:46","modified_gmt":"2019-10-15T14:13:46","slug":"weekly-platform-news-event-timing-google-earth-for-web-undead-session-cookies","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/weekly-platform-news-event-timing-google-earth-for-web-undead-session-cookies\/","title":{"rendered":"Weekly Platform News: Event Timing, Google Earth for Web, undead session cookies"},"content":{"rendered":"

\u0160ime posts regular content for web developers on webplatform.news<\/a>.<\/p>\n

In this week’s news, Wikipedia helps identify three slow click handlers, Google Earth comes to the web, SVG<\/abbr> properties in CSS get more support, and what to do in the event of zombie cookies. <\/p>\n

<\/p>\n

Tracking down slow event handlers with Event Timing<\/h3>\n

Event Timing is experimentally available in Chrome (as an Origin Trial) and Wikipedia is taking part in the trial. This API<\/abbr> can be used to accurately determine the duration of event handlers with the goal of surfacing slow events.<\/p>\n

We quickly identified 3 very frequent slow click handlers experienced frequently by real users on Wikipedia. […] Two of those issues are caused by expensive JavaScript calls causing style recalculation and layout.<\/p><\/blockquote>\n

(via Gilles Dubuc<\/a>)<\/small><\/p>\n

Google Earth for Web beta available<\/h3>\n
\"\"<\/figure>\n

The preview version of Google Earth for Web (powered by WebAssembly) is now available. You can try it out<\/a> in Chromium-based browsers and Firefox\u200a\u2014\u200ait runs single-threaded in browsers that don\u2019t yet have (re-)enabled SharedArrayBuffer\u200a\u2014\u200abut not in Safari because of its lack of full support for WebGL2.<\/p>\n

(via Jordon Mears<\/a>)<\/small><\/p>\n

SVG geometry properties in CSS<\/h3>\n

Firefox Nightly has implemented SVG geometry properties (x<\/code>, y<\/code>, r<\/code>, etc.) in CSS. This feature is already supported in Chrome and Safari and is expected to ship in Firefox 69 in September.<\/p>\n

\nSee the Pen
\nAnimating SVG geometry properties with CSS<\/a> by \u0160ime Vidas (@simevidas<\/a>)
\non CodePen<\/a>.<\/span>\n<\/p>\n

(via J\u00e9r\u00e9mie Patonnier<\/a>)<\/small><\/p>\n

Browsers can keep session cookies alive<\/h3>\n

Chrome and Firefox allow users to restore the previous browser session on startup. With this option enabled, closing the browser will not delete the user\u2019s session cookies, nor empty the sessionStorage<\/code> of web pages.<\/p>\n

Given this session resumption behavior, it\u2019s more important than ever to ensure that your site behaves reasonably upon receipt of an outdated session cookie (e.g. redirect the user to the login page instead of showing an error).<\/p><\/blockquote>\n

(via Eric Lawrence<\/a>)<\/small><\/p>\n","protected":false},"excerpt":{"rendered":"

In this week’s news, Wikipedia helps identify three slow click handlers, Google Earth comes to the web, SVG properties in CSS get more support, and what to do in the event of zombie cookies. <\/p>\n","protected":false},"author":245432,"featured_media":292143,"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":true,"jetpack_social_options":[]},"categories":[1649],"tags":[972,469],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/06\/wpn20190627.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":323293,"url":"https:\/\/css-tricks.com\/netlify-edge-handlers\/","url_meta":{"origin":292138,"position":0},"title":"Netlify Edge Handlers","date":"October 13, 2020","format":false,"excerpt":"Some very cool news from Netlify: Edge Handlers are in Early Access (request it here). I think these couple of lines of code do a great job in explaining what an Edge Handler is: export function onRequest(event) { console.log(`Incoming request for ${event.request.url}`); event.replaceResponse(() => fetch(\"https:\/\/www.netlify.com\/\")); } So that's a little\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/netlify-edge.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":156362,"url":"https:\/\/css-tricks.com\/namespaced-events-jquery\/","url_meta":{"origin":292138,"position":1},"title":"Namespaced Events in jQuery","date":"November 18, 2013","format":false,"excerpt":"It's really easy to add an event listener in jQuery. It's equally easy to remove an event listener. You might want to remove a listener because you don't care to perform any actions on that event anymore, to reduce memory usage, or both. But let's say you've attached several listeners\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":176679,"url":"https:\/\/css-tricks.com\/capturing-all-events\/","url_meta":{"origin":292138,"position":2},"title":"JavaScript Event Madness! Capturing *all* events without interference","date":"July 28, 2014","format":false,"excerpt":"The following is a guest post by Matthias Christen and Florian M\u00fcller from Ghostlab. Ghostlab is cross-browser cross-device testing software for Mac and PC. One of the things I'm very impressed Ghostlab can do is sync the events from one browser to all the others. Scroll one page, the others\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":332992,"url":"https:\/\/css-tricks.com\/netlify-edge-handlers-2\/","url_meta":{"origin":292138,"position":3},"title":"Netlify Edge Handlers","date":"January 19, 2021","format":false,"excerpt":"Netlify Edge Handlers are in Early Access (you can request it), but they are super cool and I think they are worth wrapping your brain around now. I think they change the nature of what Jamstack is and can be. You know about CDNs. They are global. They host assets\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/edge-handler.jpg?fit=1200%2C804&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":170671,"url":"https:\/\/css-tricks.com\/dangers-stopping-event-propagation\/","url_meta":{"origin":292138,"position":4},"title":"The Dangers of Stopping Event Propagation","date":"May 20, 2014","format":false,"excerpt":"The following is a guest post by Philip Walton (@philwalton). He is going to explain why stopping event propagation isn't something you should do lightly, and probably something you should avoid altogether. If you're a front end developer, at some point in your career you've probably had to build a\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":363861,"url":"https:\/\/css-tricks.com\/add-to-calendar-button-ui-widget\/","url_meta":{"origin":292138,"position":5},"title":"Add-to-Calendar Button UI Widget","date":"February 16, 2022","format":false,"excerpt":"A useful little UI widget thingy here from Jens Kuerschner. Click the add-to-calendar button, get a list of calendar apps, the user selects which one they actually use, and they get what they need for that calendar. Could be a specialized URL they get sent to, or even an .ics\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/repo_image.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/292138"}],"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\/245432"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=292138"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/292138\/revisions"}],"predecessor-version":[{"id":292141,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/292138\/revisions\/292141"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/292143"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=292138"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=292138"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=292138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}