└── README.md /README.md: -------------------------------------------------------------------------------- 1 | # .Awesome-CSS-Houdini { [![Awesome](https://awesome.re/badge.svg)](https://awesome.re) } 2 | 3 | > A curated list of CSS Houdini resources. 4 | 5 | ### πŸ€” Is Houdini ready yetβ€½ 6 | 7 | The first question that we do when we view a new technology, thanks to [Surma](https://github.com/surma) we have a great table to see the status of APIs and the browsers support. 8 | 9 | [![Is Houdini ready yetβ€½](https://user-images.githubusercontent.com/1307927/97810683-0b864680-1c76-11eb-822c-6fdfd1bb658a.png)](https://ishoudinireadyyet.com/) 10 | > [Is Houdini ready yetβ€½](https://ishoudinireadyyet.com/) 11 | 12 | --- 13 | 14 | ### πŸ“š Documentation 15 | 16 | - [CSS-TAG Houdini Editor Drafts (site)](https://drafts.css-houdini.org/) 17 | - [CSS-TAG Houdini Editor Drafts (source)](https://github.com/w3c/css-houdini-drafts) 18 | - [CSS Houdini Wiki](https://github.com/w3c/css-houdini-drafts/wiki) 19 | - [public-houdini Mailing List](https://lists.w3.org/Archives/Public/public-houdini/) πŸ“¬ 20 | 21 | --- 22 | 23 | ### πŸ“¦ Libraries 24 | 25 | | Library | Description | 26 | | ---- | ---- | 27 | | [Extra.CSS](https://extra-css.netlify.com/) | A CSS Houdini library for making your site a little more #extra. | 28 | 29 | --- 30 | 31 | ### πŸ“– Articles 32 | 33 | | Name | APIs | 34 | | ---- | ---- | 35 | | [CSS Houdini](https://houdini.glitch.me/) ⭐ | `Worklets` `Typed OM` `Custom Properties & Values API` `Paint API` `Animation Worklet` `Layout API` | 36 | | [Houdini: Maybe The Most Exciting Development In CSS You’ve Never Heard Of](https://www.smashingmagazine.com/2016/03/houdini-maybe-the-most-exciting-development-in-css-youve-never-heard-of/) | `Worklets` `Typed OM` `Custom Properties & Values API` `Paint API` `Animation Worklet` `Layout API` `Parser API` | 37 | | [Houdini: Demystifying CSS](https://developers.google.com/web/updates/2016/05/houdini) | `Worklets` `Paint API` `Layout API` `Typed OM` `Custom Properties & Values API` `Font metrics` | 38 | | [Say hello to Houdini and the CSS Paint API](https://codersblock.com/blog/say-hello-to-houdini-and-the-css-paint-api/) | `Paint API` | 39 | | [What Houdini Means for Animating Transforms](https://css-tricks.com/what-houdini-means-for-animating-transforms/) | `Animation Worklet` | 40 | | [Working with the new CSS Typed Object Model](https://developers.google.com/web/updates/2018/03/cssom) | `Typed OM` | 41 | | [New ways to make your web app jank with Houdini – An introduction](https://dassur.ma/things/houdini-intro/) | `Worklets` `Typed OM` `Custom Properties & Values API` `Paint API` `Layout API` `Font metrics` `Compositor Worklet`| 42 | | [Exploring the CSS Paint API](https://vitaliy-bobrov.github.io/blog/exploring-the-css-paint-api/) | `Paint API` `Custom Properties & Values API` | 43 | | [Simple Interactive Pie Chart with CSS Variables and Houdini Magic](https://css-tricks.com/simple-interactive-pie-chart-with-css-variables-and-houdini-magic/) | `Custom Properties & Values API` | 44 | | [Houdini is like Babel but for CSS](https://medium.com/@mutebg/houdini-could-be-like-babel-but-for-css-7110d7cb6d60) | `Typed OM` `Custom Properties & Values API` `Paint API` `Animation Worklet` `Layout API` `Parser API` | 45 | | [A Houdini Quickstart: registerProperty](https://danielcwilson.com/blog/2018/02/houdini-quickstart/) | `Custom Properties & Values API` | 46 | | [CSS Paint in Action: Bar Chart](https://vitaliy-bobrov.github.io/blog/css-paint-in-action-bar-chart/) | `Paint API` `Custom Properties & Values API` | 47 | | [The CSS Paint API](https://css-tricks.com/the-css-paint-api/) | `Paint API` | 48 | | [CSS Paint API](https://developers.google.com/web/updates/2018/01/paintapi) | `Paint API` | 49 | | [Houdini's Animation Worklet](https://developers.google.com/web/updates/2018/10/animation-worklet) | `Animation Worklet` | 50 | | [New horizons in CSS: Houdini and the Paint API](https://blog.logrocket.com/new-horizons-in-css-houdini-and-the-paint-api-8b307cf387bb) | `Paint API` | 51 | | [CSS Custom Properties in Depth](https://vitaliy-bobrov.github.io/blog/css-custom-properties-in-depth/) | `Custom Properties & Values API` | 52 | | [A Practical Overview Of CSS Houdini](https://www.smashingmagazine.com/2020/03/practical-overview-css-houdini/) | `Worklets` `Paint API` `Layout API` `Typed OM` `Custom Properties & Values API` `Font metrics` | 53 | | [Randomized Selective Color: A Post List Study](https://una.im/random-selective-colors/) | `Paint API` `Custom Properties & Values API` | 54 | | [Performance - CSS Painting versus CSS Houdini Paint API](https://lisilinhart.info/posts/css-houdini-performance/) | `Paint API` | 55 | | [Magical Rainbow Gradients](https://joshwcomeau.com/react/rainbow-button/) | `Paint API` `Custom Properties` | 56 | | [@property: giving superpowers to CSS variables](https://web.dev/at-property/) | `Custom Properties` | 57 | | [The Typed Object Model](https://css-tricks.com/the-typed-object-model/) | `Typed OM` | 58 | 59 | --- 60 | 61 | ### πŸŽ™ Podcasts 62 | 63 | | Podcast | Speaker | 64 | | ------- | ---- | 65 | | [Houdini Reloaded](https://spec.fm/podcasts/toolsday/215273) | [Una](https://twitter.com/una) & [Chris Dhanaraj](https://twitter.com/chrisdhanaraj) | 66 | | [Modern Web Podcast](https://modernweb.podbean.com/e/s05e17-houdini-with-tracy-lee-rob-ocel-surma-aimee-knight-and-vitalii-bobrov/) | [Surma](https://twitter.com/dassurma), [Aimee Knight](https://twitter.com/aimee_knight), [Vitalii Bobrov](https://twitter.com/bobrov1989) | 67 | | [CSS Podcast](https://pod.link/thecsspodcast/episode/ZTYyYmQzZWUtMmNkOC00YWE2LWFkNGYtNjQ5OTEyMjkxZTQ0) (4 episodes) | [Una](https://twitter.com/una) & [Adam Argyle](https://twitter.com/argyleink) | 68 | 69 | --- 70 | 71 | ### πŸ’» Samples 72 | 73 | | Samples | APIs | 74 | | ------- | ---- | 75 | | [CSS Houdini](https://houdini.glitch.me/) 🀩 | `Worklets` `Typed OM` `Custom Properties & Values API` `Paint API` `Animation Worklet` `Layout API` | 76 | | [CSS Houdini Experiments](https://css-houdini.rocks/) 🀩 | `Custom Properties & Values API` `Paint API` `Layout API` | 77 | | [Houdini Samples (Google Chrome Labs)](https://github.com/GoogleChromeLabs/houdini-samples) | `Custom Properties & Values API` `Paint API` `Animation Worklet` `Layout API` | 78 | | [Houdini's CSS Paint Polyfill](https://github.com/GoogleChromeLabs/css-paint-polyfill) | `Paint API` | 79 | | [Using Houdini CSS Paint API with Rough.js](https://github.com/pshihn/rough-paint/) | `Paint API` | 80 | | [Ana Tudor's Houdini samples](https://codepen.io/thebabydino/pens/tags/?selected_tag=houdini) | `Custom Properties & Values API` `Paint API` `Animation Worklet` | 81 | | [KarstenBuckstegge's `houdini-experiments`](https://github.com/KarstenBuckstegge/houdini-experiments) | `Paint API` | 82 | | [AndresCuervo's `css-houdini-experiments`](https://github.com/AndresCuervo/css-houdini-experiments) | `Paint API` | 83 | | [Hello Houdini](http://hello-houdini.herokuapp.com/) | `Paint API` | 84 | | [extra.css](https://github.com/una/extra.css) | `Paint API` | 85 | | [CSS Houdini experiments](https://github.com/nucliweb/houdini) | `Paint API` | 86 | | [Jeffsum clone](https://jeffsum.oliverturner.cloud) | `Custom Properties & Values API` | 87 | | [CSS Paint Demos](https://vitaliy-bobrov.github.io/css-paint-demos/) | `Paint API` | 88 | 89 | --- 90 | 91 | ### πŸ“Ί Talks 92 | 93 | | Talk | Conference | Channel | Speaker | 94 | | ---- | ------------------------- | ------- | 95 | | [Houdini: Demystifying the Future of CSS](https://www.youtube.com/watch?v=sE3ttkP15f8) | `Google I/O 2016` | [Surma](https://twitter.com/DasSurma) | 96 | | [Houdini Task Force](https://www.youtube.com/watch?v=QxcP47Pg6k0) | `BlinkOn 5 2016` | [Ian Kilpatrick](https://twitter.com/bfgeek) | 97 | | [Houdini and the Future of Web](https://www.youtube.com/watch?v=ks6iDTJn8wA) | `BlinkOn 6 2016` | | 98 | | [Polyfills & Houdini | Browser API Special](https://vimeo.com/232982766) | `CSS Day 2017` | [Phil Walton](https://twitter.com/philwalton) | 99 | | [The Future of CSS: CSS Houdini](https://www.youtube.com/watch?v=lOAKU5h-lpQ) | `CSS Day 2017` | [Tab Atkins](https://twitter.com/tabatkins) | 100 | | [CSS Houdini - from CSS variables to JavaScript and back](https://www.youtube.com/watch?v=3IUxyBx_PnM) | `NDC Conferences 2017` | [Serg Hospodarets](https://twitter.com/malyw) | 101 | | [Houdini, the Future of CSS](https://www.youtube.com/watch?v=fl_n7lKLhjI) | `DrupalCon Vienna 2017` | [Chris Ruppel](https://twitter.com/rupl/) | 102 | | [Animation Worklet](https://www.youtube.com/watch?v=ZPkMMShYxKU) | `HTTP203 Advent` | [Surma](https://twitter.com/DasSurma) | 103 | | [CSS Houdini: From CSS Custom Properties to JavaScript Worklets and back](https://www.youtube.com/watch?v=rJbk0AndV6I) | `Voxxed Days Thessaloniki 2018` | [Serg Hospodarets](https://twitter.com/malyw) | 104 | | [Magic tricks with Houdini](https://www.youtube.com/watch?v=FYWZrLpN5Po) | `CSSConf Australia 2018` | [Sam Richard](https://twitter.com/snugug) | 105 | | [Houdini the new CSS Magic](https://www.youtube.com/watch?v=vZk7qPTVs5s) | `JSUnconf 2018` | [Karsten Buckstegge](https://twitter.com/mr_bambule) | 106 | | [Houdini - What lies ahead](https://www.youtube.com/watch?v=BalUlHBwwlM) | `JSConf Iceland 2018` | [Arun Michael Dsouza](https://twitter.com/amdsouza92) | 107 | | [State of Houdini](https://www.youtube.com/watch?v=lK3OiJvwgSc) | `Chrome Dev Summit 2018` | [Surma](https://twitter.com/DasSurma) | 108 | | [How to Be #Extra with CSS Houdini](https://www.youtube.com/watch?v=qY0UF7jaqfs) | `You Gotta Love Frontend 2019` | [Una Kravetz](https://twitter.com/Una) | 109 | | [CSS Houdini & The Future of Styling](https://www.youtube.com/watch?v=GhRE3rML9t4) | `JSConf EU 2019` | [Una Kravetz](https://twitter.com/Una) | 110 | | [Design System Magic with CSS Houdini](https://www.youtube.com/watch?v=1W79T2ibd5Y) | `CSSconf EU 2019` | [Sam Richard](https://twitter.com/snugug) | 111 | | [When Houdini Met Goldblum](https://www.youtube.com/watch?v=aULlyfQOF18) | `CSS Camp 2019` | [Oliver Turner](https://twitter.com/oliverturner) | 112 | 113 | --- 114 | 115 | ### πŸ“Ί Video Tutorials 116 | 117 | | Video | Author | 118 | | ----- | ------ | 119 | | [Animate gradient components independently with CSS vars & Houdini magic](https://www.youtube.com/watch?v=Z0FJmv0bnQ0) | [Ana Tudor](https://twitter.com/anatudor) | 120 | | [MΓΆbius beacons with CSS transforms, variables and Houdini magic](https://www.youtube.com/watch?v=q1taz5lPIB0) | [Ana Tudor](https://twitter.com/anatudor) | 121 | | [Cube rings with CSS variables & Houdini magic](https://www.youtube.com/watch?v=F4qxs74tG8M) | [Ana Tudor](https://twitter.com/anatudor) | 122 | | [Neon trails on torus with CSS variables & Houdini magic](https://www.youtube.com/watch?v=al5lwWwTEv0) | [Ana Tudor](https://twitter.com/anatudor) | 123 | | [moon grid with clip-path, CSS variables & Houdini magic](https://www.youtube.com/watch?v=NXJnvdnESf4) | [Ana Tudor](https://twitter.com/anatudor) | 124 | | [Rainbow bar spinner with CSS vars & Houdini magic](https://www.youtube.com/watch?v=E2EySmjtggA) | [Ana Tudor](https://twitter.com/anatudor) | 125 | | [Pointless 🌈 stairs with CSS variables & Houdini magic](https://www.youtube.com/watch?v=JtvJV8LOcYg) | [Ana Tudor](https://twitter.com/anatudor) | 126 | | [Temperature display change: conic-gradient, CSS vars, Houdini magic](https://www.youtube.com/watch?v=E5XGeJsizMM) | [Ana Tudor](https://twitter.com/anatudor) | 127 | | [CSS Painting and Custom Properties](https://www.youtube.com/watch?v=5s6MuG6lioY) | [Nate Jacobs](https://twitter.com/nathanalan) | 128 | | [Creating a Custom CSS Houdini Paintlet!](https://www.youtube.com/watch?v=kQAci8m0SpE) | [Coursetro](https://twitter.com/designcoursecom) | 129 | 130 | --- 131 | 132 | ### πŸ“„ Slides 133 | 134 | - [Houdini The Feature of CSS](https://rupl.github.io/houdini/) 135 | - [CSS Houdini in short: From CSS Custom Properties to JavaScript Worklets and back](http://slides.com/malyw/houdini-short#/) 136 | - [Houdini & Polyfilling CSS](http://philipwalton.github.io/talks/2017-06-15) 137 | - [CSS Magic πŸ§™β€β™‚οΈ & Futuristic Javascript πŸ€–](https://slides.com/evanpeterson/deck-2/) 138 | - [Houdini: programming in CSS](https://slides.com/joanleon/houdini-programming-in-css/) 139 | - [Make the Web Brighter with the CSS Paint API](https://speakerdeck.com/bobrov1989/make-the-web-brighter-with-the-css-paint-api-1c99ed50-7d7d-43b4-bc1e-7f41684274ed) 140 | - [WebAssembly in Houdini CSS, is it possible?](https://www.slideshare.net/gskachkov/webassembly-in-houdini-css-is-it-possible) 141 | - [Design System Magic with Houdini](https://css-houdini.web.app/talks/design-systems/) 142 | - [When Houdini met Goldblum](https://slides.com/oliverturner/when-houdini-met-goldblum) 143 | - [Calculating Color: Dynamic Theming With CSS Variables](https://una.im/calculating-color) 144 | 145 | --- 146 | 147 | ### πŸ—£ People that talk about CSS Houdini 148 | 149 | - [Ian Kilpatrick](https://twitter.com/bfgeek) 150 | - [Sam Richard](https://twitter.com/snugug) 151 | - [Serg Hospodarets](https://twitter.com/malyw) 152 | - [Surma](https://twitter.com/DasSurma) 153 | - [Una](https://twitter.com/una) 154 | - [Vincent De Oliveira](https://twitter.com/iamvdo) 155 | - [Vitalii Bobrov](https://twitter.com/bobrov1989) 156 | - [Amelia Bellamy-Royds](https://twitter.com/AmeliasBrain) 157 | - [Oliver Turner](https://twitter.com/oliverturner) 158 | - [Nikita Dubko](https://twitter.com/dark_mefody) 159 | --------------------------------------------------------------------------------