{"id":260115,"date":"2017-09-18T08:39:00","date_gmt":"2017-09-18T15:39:00","guid":{"rendered":"http:\/\/css-tricks.com\/?p=260115"},"modified":"2017-09-18T08:39:00","modified_gmt":"2017-09-18T15:39:00","slug":"rube-goldberg-machine","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/rube-goldberg-machine\/","title":{"rendered":"A Rube Goldberg Machine"},"content":{"rendered":"

Ada Rose Edwards takes a look at some of the newer browser APIs and how they fit together:<\/p>\n

These new APIs are powerful individually but also they complement each other beautifully, CSS custom properties being the common thread which goes through them all as it is a low level change to CSS.<\/p><\/blockquote>\n

The post itself is a showcase to them.<\/p>\n

Speaking of new browser APIs, that was a whole subject<\/a> on ShopTalk a few weeks back.<\/p>\n","protected":false},"excerpt":{"rendered":"

Ada Rose Edwards takes a look at some of the newer browser APIs and how they fit together: These new APIs are powerful individually but also they complement each other beautifully, CSS custom properties being the common thread which goes through them all as it is a low level change to CSS. The post itself […]<\/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":[17],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":271134,"url":"https:\/\/css-tricks.com\/build-nodejs-apis-using-serverless\/","url_meta":{"origin":260115,"position":0},"title":"Build Nodejs APIs Using Serverless","date":"May 17, 2018","format":false,"excerpt":"Simona Cotin did a great talk at Microsoft Build about Serverless technologies, called \"Build Node APIs Using Serverless.\" In this talk, she addresses pretty much every major gotcha that you might run into while creating Serverless infrastructure for JavaScript applications. Some of the topics included, but are not limited to:\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/microsoft-build.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":336380,"url":"https:\/\/css-tricks.com\/platform-news-defaulting-to-logical-css-fugu-apis-custom-media-queries-and-wordpress-vs-italics\/","url_meta":{"origin":260115,"position":1},"title":"Platform News: Defaulting to Logical CSS, Fugu APIs, Custom Media Queries, and WordPress vs. Italics","date":"March 12, 2021","format":false,"excerpt":"Looks like 2021 is the time to start using CSS Logical Properties! Plus, Chrome recently shipped a few APIs that have raised eyebrows, SVG allows us to disable its aspect ratio, WordPress focuses on the accessibility of its typography, and there's still no update (or progress) on the development of\u2026","rel":"","context":"In "Weekly Platform News"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/wpn-20210312.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":251869,"url":"https:\/\/css-tricks.com\/html-apis-design-good-one\/","url_meta":{"origin":260115,"position":2},"title":"HTML APIs: What They Are And How To Design A Good One","date":"February 25, 2017","format":false,"excerpt":"Lea Verou writes about the design of HTML APIs and how we might write better documentation for web designers. An HTML API is term for a JavaScript library that is configured and controlled through HTML rather than through JavaScript. For example might tell a library that this element is in\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":239753,"url":"https:\/\/css-tricks.com\/houdini-maybe-exciting-development-css-youve-never-heard\/","url_meta":{"origin":260115,"position":3},"title":"“Maybe The Most Exciting Development In CSS You\u2019ve Never Heard Of”","date":"March 25, 2016","format":false,"excerpt":"Philip Walton has the scoop on Houdini, a new W3C task force that\u2019s planning to give developers low level browser APIs: The bottom line is, imagine how much nicer your development life would be if you could use any CSS property and know for sure it was going to work,\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":300251,"url":"https:\/\/css-tricks.com\/design-apis-the-evolution-of-design-systems\/","url_meta":{"origin":260115,"position":4},"title":"Design APIs: The Evolution of Design Systems","date":"December 17, 2019","format":false,"excerpt":"A clever idea from Matthew Str\u00f6m: [...] design APIs don\u2019t seem like a stretch of the imagination. An API-driven approach is the natural extension of the work currently being done on design systems, including tokens and standardization projects. If you buy into the idea of design tokens, that expresses itself\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/matthew-strom-design-system-tokens.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":247592,"url":"https:\/\/css-tricks.com\/cooperative-scheduling-requestidlecallback\/","url_meta":{"origin":260115,"position":5},"title":"Cooperative Scheduling with `requestIdleCallback`","date":"November 8, 2016","format":false,"excerpt":"Potch: If you absolutely must perform tasks on the main thread (mutating the DOM or interacting with main-thread-only Web APIs), you can now request the browser provide you with a window of time in which it is safe to do so! ... requestIdleCallback allows the browser to wait until it\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/260115"}],"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=260115"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/260115\/revisions"}],"predecessor-version":[{"id":260116,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/260115\/revisions\/260116"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=260115"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=260115"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=260115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}