{"id":346608,"date":"2021-08-12T14:10:22","date_gmt":"2021-08-12T21:10:22","guid":{"rendered":"https:\/\/css-tricks.com\/?p=346608"},"modified":"2021-08-12T14:10:25","modified_gmt":"2021-08-12T21:10:25","slug":"stay-alert","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/stay-alert\/","title":{"rendered":"Stay alert"},"content":{"rendered":"\n

A few days ago, Chris wrote up his thoughts about how alert()<\/code>, confirm()<\/code>, and prompt()<\/code> were being deprecated by Chrome and collected a bunch of thoughts from developers<\/a>. If certain features can essentially be turned off by a major browser, a lot of folks started to worry about the predictability of the web. <\/p>\n\n\n\n

On that note, I really liked this note by Richard Harris<\/a>:<\/p>\n\n\n\n

We can’t normalise the attitude that collateral damage is the price of progress, even if we accept the premise \u2014 which I don’t \u2014 that removing APIs like alert represents progress. For all its flaws, the web is generally agreed to be a stable platform, where investments made today will stand the test of time. A world in which websites are treated as inherently transient objects, where APIs we commonly rely on today could be cast aside as unwanted baggage by tomorrow’s spec wranglers, is a world in which the web has already lost.<\/p><\/blockquote>\n\n\n\n

This specific bit of drama isn\u2019t of much interest to me, I must admit. But! I think it brings up a super important distinction between software and the web. Here\u2019s a story.<\/p>\n\n\n\n\n\n\n\n

The other day I was faffing about with Astro (which I like a lot). I was rebuilding my personal site with it and I decided \u2014 in a spark of punk rock-ness \u2014 to update to the latest version of it. I thought perhaps it might make my build process a bit quicker and give me a chance to explore new features. But alas \u2014 everything broke. APIs had been deprecated! My build process broke! Everything crumbled down around me.<\/p>\n\n\n\n

This isn\u2019t me dunking on Astro. I love it, still. But it\u2019s important to remember that Astro isn\u2019t the web. Neither is React or any other framework, really. Those teams can feel free to deprecate things, improve things as much as they want. They can burn it all to the ground and start again. But stuff like alert()<\/code>, old CSS features, and HTML elements aren\u2019t in the same category. They can\u2019t be deprecated in the same way because, as Jeremy said, the web needs to be predictable. And we can\u2019t treat the web like plain ol\u2019 software because no one team or individual owns those features.<\/p>\n\n\n\n

Here\u2019s the gist of my rant: alert()<\/code> and confirm()<\/code> aren\u2019t features of Chrome, but of the web. But I fear that\u2019s how a lot of folks might think about them.<\/p>\n\n\n\n

This is also why standards are so important! Talking about new features in public lets us fix all the bugs and answer all the questions before a new feature ships onto this platform where you can\u2019t just delete it when you realize you goofed up. I\u2019m not even really dunking on Chrome here either, but this distinction between software<\/em> and the open web<\/em> is an important one to make. Right?<\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

A few days ago, Chris wrote up his thoughts about how alert(), confirm(), and prompt() were being deprecated by Chrome and collected a bunch of thoughts from developers. If certain features can essentially be turned off by a major browser, a lot of folks started to worry about the predictability of the web. On that […]<\/p>\n","protected":false},"author":223806,"featured_media":269547,"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":[4],"tags":[1365],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/grid-lightbulb.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":355516,"url":"https:\/\/css-tricks.com\/quickly-get-alerted-to-front-end-errors-and-performance-issues\/","url_meta":{"origin":346608,"position":0},"title":"Quickly Get Alerted to Front-End Errors and Performance Issues","date":"November 11, 2021","format":false,"excerpt":"Measuring things is great. They say what you only fix what you measure. Raygun is great at measuring websites. Measuring performance, measuring errors and crashes, measuring code problems. You know what's even better than measuring? Having a system in place to notify you when anything significant happens with those measurements.\u2026","rel":"","context":"In "Sponsored"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/errors.png?fit=1200%2C777&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":359306,"url":"https:\/\/css-tricks.com\/html-sanitizer-api\/","url_meta":{"origin":346608,"position":1},"title":"HTML Sanitizer API","date":"December 16, 2021","format":false,"excerpt":"Three cheers for (draft stage) progress on a Sanitizer API! It's gospel that you can't trust user input. And indeed, any app I've ever worked on has dealt with bad actors trying to slip in and execute nefarious code somewhere it shouldn't. It's the web developer's job to clean user\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/hmtl-sanitizer-bubbles.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":346368,"url":"https:\/\/css-tricks.com\/choice-words-about-the-upcoming-deprecation-of-javascript-dialogs\/","url_meta":{"origin":346608,"position":2},"title":"Choice Words about the Upcoming Deprecation of JavaScript Dialogs","date":"August 9, 2021","format":false,"excerpt":"It might be the very first thing a lot of people learn in JavaScript: alert(\"Hello, World\"); One day at CodePen, we woke up to a ton of customer support tickets about their Pens being broken, which ultimately boiled down to a version of Chrome that shipped where they ripped out\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/Screen-Shot-2021-08-09-at-10.49.34-AM.png?fit=1200%2C973&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":161876,"url":"https:\/\/css-tricks.com\/design-systems-building-future\/","url_meta":{"origin":346608,"position":3},"title":"Design Systems: Building for the Future","date":"February 5, 2014","format":false,"excerpt":"The modern web design and development process is rapidly evolving, and responsive websites are quickly becoming the norm. Frameworks like Bootstrap and Foundation are showing us the value of creating robust systems of components to make building things on the web faster, better, and easier. About a year ago, I\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":307879,"url":"https:\/\/css-tricks.com\/dealing-with-stale-props-and-states-in-reacts-functional-components\/","url_meta":{"origin":346608,"position":4},"title":"Dealing With Stale Props and States in React\u2019s Functional Components","date":"May 12, 2020","format":false,"excerpt":"There\u2019s one aspect of JavaScript that always has me pulling my hair: closures. I work with React a lot, and the overlap there is that they can sometimes be the cause of stale props and state. We\u2019ll get into exactly what that means, but the trouble is that the data\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/react.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":302570,"url":"https:\/\/css-tricks.com\/how-to-create-an-animated-countdown-timer-with-html-css-and-javascript\/","url_meta":{"origin":346608,"position":5},"title":"How to Create an Animated Countdown Timer With HTML, CSS and JavaScript","date":"February 3, 2020","format":false,"excerpt":"Have you ever needed a countdown timer on a project? For something like that, it might be natural to reach for a plugin, but it\u2019s actually a lot more straightforward to make one than you might think and only requires the trifecta of HTML, CSS and JavaScript. Let\u2019s make one\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/countdown-timers.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\/346608"}],"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\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=346608"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/346608\/revisions"}],"predecessor-version":[{"id":346647,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/346608\/revisions\/346647"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/269547"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=346608"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=346608"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=346608"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}