{"id":292113,"date":"2019-07-02T15:40:51","date_gmt":"2019-07-02T22:40:51","guid":{"rendered":"http:\/\/css-tricks.com\/?p=292113"},"modified":"2019-07-02T15:40:51","modified_gmt":"2019-07-02T22:40:51","slug":"toast","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/toast\/","title":{"rendered":"Toast"},"content":{"rendered":"

One day, all the sudden, I started hearing jokes about toast. I had no idea what the context was. I assumed some friends just got started telling toast jokes, which isn’t rare by any means. But it turns out it was a whole thing<\/em>. It got me thinking, jeez, if I can’t keep up with this stuff when it’s kinda my job, it must be extra<\/em> tough for people who actually do work for a living. <\/p>\n

Anyway. Thankfully Jeremy summed it up nicely:<\/p>\n

\n

First off, this all kicked off with the announcement of \u201cintent to implement\u201d<\/a>. That makes it sounds like Google are intending to, well, \u2026implement<\/em> this. In fact \u201cintent to implement\u201d really means \u201cintend to mess around with this behind a flag\u201d. The language is definitely confusing and this is something that will hopefully be addressed<\/a>.<\/p>\n

Secondly, Chrome isn\u2019t going to ship a toast<\/code> element. Instead, this is a proposal for a custom element<\/a> currently called std-toast<\/code>. I\u2019m assuming that should the experiment prove successful, it\u2019s not a foregone conclusion that the final element name will be called toast<\/code>.<\/p>\n<\/blockquote>\n

<\/p>\n

The drama around it, hence the cause of all the jokes and such, was the fact that it felt like it came out of nowhere and was Chrome strongarming a feature through the standards process, or perhaps kinda skipping that process. Terence’s humorous post<\/a> digs into that a bit more. <\/p>\n

I’m not sure if Google is actually doing anything nefarious here. It’s behind a flag, so I guess the point of that is to explore and research and stuff. Feels very similar to kv:storage<\/a> to me, a “native module” much like a “native custom element.”<\/p>\n

But we should be extra watchful<\/em> about stuff like this. If any browser goes rogue and just starts shipping stuff, web standards is over. Life for devs gets a lot harder and the web gets a lot worse. The stakes are high. And it’s not going to happen overnight, it’s going to happen with little tiny things like this. Keep that blue beanie on.<\/p>\n

Regarding the element itself, it’s always a bit surprising to me to see what gets legs as far as new HTML elements. Toasts just seem like a positioned <dialog><\/code> to me, but I haven’t participated in any research or anything. They are popular enough for Bootstrap to have ’em<\/a>:<\/p>\n

\n See the Pen
\n Bootstrap Toasts<\/a> by Chris Coyier (@chriscoyier<\/a>)
\n on CodePen<\/a>.<\/span>\n<\/p>\n

I would have guessed something like dropdown menus or tabs would have been the strongest contenders for “native” web components. <\/p>\n","protected":false},"excerpt":{"rendered":"

One day, all the sudden, I started hearing jokes about toast. I had no idea what the context was. I assumed some friends just got started telling toast jokes, which isn’t rare by any means. But it turns out it was a whole thing. It got me thinking, jeez, if I can’t keep up with […]<\/p>\n","protected":false},"author":3,"featured_media":292320,"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":[1536],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/toast.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":210238,"url":"https:\/\/css-tricks.com\/redesigning-the-toast\/","url_meta":{"origin":292113,"position":0},"title":"Redesigning The Toast","date":"October 28, 2015","format":false,"excerpt":"Karen McGrane tweets, dreamteam assembles, epic redesign ensues, story of entire process published. Some minor nuggets #RelevantToMyInterets: A big part of the effort was content strategy and taxonomy work. Cleaning up the tag and category system (and actually inventing different types of tags) meant they could offer many more interesting\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":351389,"url":"https:\/\/css-tricks.com\/dont-attach-tooltips-to-document-body\/","url_meta":{"origin":292113,"position":1},"title":"Don\u2019t attach tooltips to document.body","date":"September 8, 2021","format":false,"excerpt":"Here's Atif Afzal on using a

that is permanently on the page where tooltips are added\/removed and how they perform vastly better than plopping those same tooltips right into the . It's not really discussed, but the reason you put them that high-up in the DOM is so you\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/79ed6c15-e9b3-4929-a75e-3d74dba53232.png?fit=512%2C396&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":354857,"url":"https:\/\/css-tricks.com\/how-to-implement-and-style-the-dialog-element\/","url_meta":{"origin":292113,"position":2},"title":"How to Implement and Style the Dialog Element","date":"October 27, 2021","format":false,"excerpt":"A look from Christian Kozalla on the HTML element and using it to create a nice-looking and accessible modal. CodePen Embed Fallback I'm attracted to the element as it's one of those \"you get a lot for free\" elements (even more so than the beloved
element) and\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/dialog-featured.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":361001,"url":"https:\/\/css-tricks.com\/vitepwa-plugin-offline-service-worker\/","url_meta":{"origin":292113,"position":3},"title":"Making a Site Work Offline Using the VitePWA Plugin","date":"January 18, 2022","format":false,"excerpt":"The VitePWA plugin from Anthony Fu is a fantastic tool for your Vite-powered sites. It helps you add a service worker that handles: offline supportcaching assets and contentprompting the user when new content is available\u2026and other goodies! We\u2019ll walk through the concept of service workers together, then jump right into\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/website-offline-pwa.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":325209,"url":"https:\/\/css-tricks.com\/bidirectional-scrolling-whats-not-to-like\/","url_meta":{"origin":292113,"position":4},"title":"Bidirectional scrolling: what\u2019s not to like?","date":"November 6, 2020","format":false,"excerpt":"Some baby bear thinking from Adam Silver. Too hot: [On horizontal scrolling, like Netflix] This pattern is accessible, responsive and consistent across screen sizes. And it\u2019s pretty easy to implement. Too cold: That\u2019s a lot of pros for a pattern that in reality has some critical downsides. Just right: [On\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/link-to-each-category.png?fit=1200%2C717&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":236076,"url":"https:\/\/css-tricks.com\/putting-my-patterns-through-their-paces\/","url_meta":{"origin":292113,"position":5},"title":"A Few Picks from 24 Ways 2015","date":"January 1, 2016","format":false,"excerpt":"Strong year for 24 Ways! The whole archives is worth browsing through and bookmarking the articles that most interest you. Here's some of our favorites: In Putting My Patterns through Their Paces, Ethan Marcotte writes about his experiences with flexbox properties and how he helped redesign The Toast with progressive\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/292113"}],"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=292113"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/292113\/revisions"}],"predecessor-version":[{"id":292348,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/292113\/revisions\/292348"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/292320"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=292113"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=292113"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=292113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}