23 ms·

CSS Houdini

315 points by mvolfik 5y ago

bpierre 5y ago
Implementation status of the different APIs: https://ishoudinireadyyet.com/ https://ishoudinireadyyet.com/ I personally can’t wait for the Layout API, which will allow alternative solutions to compete with the CSS layout mechanisms, without the performance penalty.
- Rapzid 5y ago
  Under consideration with FireFox and only a couple in dev with Safari.. Not knowing anything about the velocity of the effort, I look at that and can imagine this being years from general availability.
  - pjmlp 5y ago
    Depends pretty much how Firefox keeps being relevant, and how Safari or iOS are relevant to customer base in some countries. From my point of view I can start thinking about putting ChromeOS developer instead of Web developer on my skill list.
msoad 5y ago
What's super nice about these APIs is that everything is happening off the main thread.
vagrantJin 5y ago
I feel like I work on a different web. > Note: With great power comes great responsibility! With Houdini you could invent your own masonry, grid, or regions implementation, but doing so is not necessarily the best idea. The CSS Working group does a lot of work to ensure every feature is performant, handles all edge cases, and considers security, privacy, and accessibility. Sounds like a lot of work to display a bloody list.
- smhmd 5y ago
  https://www.youtube.com/watch?v=1W79T2ibd5Y https://www.youtube.com/watch?v=1W79T2ibd5Y
- croes 5y ago
  Sounds like possible security and privacy nightmare for users
- afavour 5y ago
  > Sounds like a lot of work to display a bloody list. UI is complex? Who knew!
- jrochkind1 5y ago
  If <ul> meets the needs of your application, there's no reason you'd have to do more work than that.
  - brianzelip 5y ago
    Masonry is a <ul>.
- madeofpalk 5y ago
  My understanding is that these Houdini features are aimed more at big library/framework authors. It's not for "every day users". It's more expected that you'll use things that use Houdini under the hood as an implementation detail. A new layout mode (like CSS Grid) isn't available yet? This allows someone to write a polyfill for it. That's neat!
  - holtalanm 5y ago
    > A new layout mode (like CSS Grid) isn't available yet? This allows someone to write a polyfill for it. That's neat! this was my first thought, too. We have polyfills for js features that don't yet exist in a lot of browsers, but polyfills for css are either very complicated or just don't exist in some cases.
macando 5y ago
I've heard about Houdini 3 years ago and am really surprised it hasn't taken off and became mainstream yet. Still waiting to use it on a commercial project.
- pjmlp 5y ago
  Not surprising, given that is yet another API being pushed by Chrome.
______- 5y ago
I have always striven to insulate decoration (CSS) from functionality (JS). Now the two have blended and we end up with madness like: <script>.element{color:red}</script>
- slver 5y ago
  Please, RTFA before commenting next time.
bshimmin 5y ago
I can't wait to do JS-in-CSS-in-JS!
- _Microft 5y ago
  ... running in the sandbox of a browser in a VM and getting streamed to your local PC from a super-computer in the cloud.
  - fallat 5y ago
    Aren't we in a Mighty exciting time!
- jrochkind1 5y ago
  The Houdini APIs are not really about "JS in CSS". They are about extending CSS features (like adding new features to CSS, new keywords or what have you) by providing a JS implementation at runtime.
  - ihuman 5y ago
    But you can use it to write JS in CSS and then eval it (although you probably shouldn't) https://css-houdini.rocks/js-in-css https://css-houdini.rocks/js-in-css (only works in Chrome)
    - jrochkind1 5y ago
      OK, good point! And neat demo, thanks! I guess if you can add features to CSS, you can add a feature to have evaluatable JS! And that is a pretty neat demo. It is not the main targeted use case of Houdini though! (And I'm gonna go out on a limb and say the Houdini devs would say it's a bad idea as more than a cool toy!)
hexo 5y ago
But, why?
- d--b 5y ago
  My question exactly
- jrochkind1 5y ago
  This lets you provide an implementation for a CSS feature that is perhaps not yet implemented by browsers, or maybe never will be. You could always do this with Javascript, and some people have been. See: https://philipwalton.github.io/polyfill/ https://philipwalton.github.io/polyfill/ But this lets you do it in a less hacky, and especially, more performant way. The author of that JS CSS polyfill library above actually wrote in 2016 how that approach was proving a bad idea, and the right way to do this was the houdini API... I guess we've been waiting for it since 2016? This is the first I had heard of it. https://philipwalton.com/articles/the-dark-side-of-polyfilling-css/ https://philipwalton.com/articles/the-dark-side-of-polyfilli...
  - mst 5y ago
    Plus, something people often forget is that the features required to polyfill and the features required to produce a proof-of-concept/prototype are really quite similar. Enabling JS devs to experiment with things up front before they go to the standards track and the effort of full browser implementations will have a lot of cool advantages, I hope.
- netghost 5y ago
  So that you can implement new layout algorithms, gradient generation and such in user space. It's extremely unlikely that most developers will use this directly.
- postalrat 5y ago
  why use uppercase?
axiosgunnar 5y ago
Everybody get prepared for the predictable onslaught of Hackernews purists who are all about to faint after reading that CSS has become the next prey of the devil - Javascript. Nevermind that humanity has experienced a quantum leap in productivity and e-commerce that has given generations of entrepreneurs wealth and every consumer on the planet unprecedented quality of life thanks to the Web, and that Web being made possible precisely because the developer-friendly, move fast and break things route that Javascript has taken from day one. But because there is a new Javascript framework coming out every day (I'm surprised competition is seen in a negative light, on HN out of all places), because it's easy to learn (and we all like to gatekeep a bit, don't we?) and because it's not a "real" language (since you cannot shoot yourself in the foot with a use-after-free), Javascript has become the prime target of ivory tower grumbling.
- NikolaNovak 5y ago
  I think I agree with most things except easy to learn... Every time I want to get back into programming, the complexity of javascriot frameworks, the infinite variety of ephemeral choices, bounces me right out. Of all programming languages now and past, javascript as it is used today (as opposed plain language) would not be my first choice for "easy to learn". I feel there's huge effective gatekeeping with it but that's just an outsiders perspective :-/
  - austincheney 5y ago
    I choose to ignore the frameworks for that very reason. This line of thought makes me far less employable but then why would I want to work a job I hate only to drown in weak unnecessary abstractions and all the defects and poor scale that come from that?
  - axiosgunnar 5y ago
    I agree that frameworks might be a challenge. I would consider learning full-blown frameworks (e.g. React) pretty much like learning a new language, especially since JSX is a new syntax (albeit it's pretty much HTML). Regarding React, I consider the "hooks" coding style to be INCREDIBLY ergonomic and have been wondering sometimes if React-like "hooks" could be used elsewhere, esp in other programming languages. Or does that only make sense with UIs?
maxov 5y ago
The synchronicity of this showing up on the HN front page at the same time as Google moving Docs to canvas-based rendering (https://news.ycombinator.com/item?id=27129858 https://news.ycombinator.com/item?id=27129858) is kind of funny. More seriously, this looks really cool, and I do actually wonder if it could ease some of the problems Google is looking to solve by using canvas-based rendering, although I'm not super familiar with the challenges of rich-text editing. It would be much more preferable for me (and I think for most developers and users) if web apps still used the DOM to render text boxes, and you could hook into the rendering and layout engine for more complex operations. The layout and painting hooks offered by Houdini seem very useful for this. The one issue is I'm not sure how text selection works here - the order of elements in selection is already kind of obtuse for more complicated layouts, and this adds even more configurations. I don't know if the APIs offer some sort of ability to control the order of selection or if that's somehow a feature of the box model.
- bayesian_horse 5y ago
  In Google Docs they value consistency of the rendering output over performance, while complex documents might even see some performance benefits. CSS Houdini is a way to get performance out of complex and custom layout or animations.
  - maxov 5y ago
    I might be misinterpreting, but are you saying the two are mutually exclusive? Google Docs does need custom layout and rendering which may be tough/finicky to implement with the existing css layout, as well as consistency.
  - steren 5y ago
    Why do you assume canvas will have bad performance? Sheets moved to canvas from HTML, and got a massive perf boost.
    - bayesian_horse 5y ago
      It's not totally mutually exclusive. But canvas operations aren't hardware accelerated, and rendering of HTML potentially is. It's still possible to make the DOM complicated enough that moving to canvas has performance advantages. I don't know the details, but I'm guessing that is achieved by skipping updates the browser would usually make.
silon42 5y ago
Sometimes I find that disabling CSS in umatrix in addition to Javascript improves the site...
etaioinshrdlu 5y ago
To be clear, it looks like this is on a standards track and going to be implemented natively by browsers? (and already is behind feature flags?)
- ihuman 5y ago
  Chrome already supports some of it https://ishoudinireadyyet.com/ https://ishoudinireadyyet.com/
deleted 5y ago
[deleted]
seumars 5y ago
I thought writing css in camel case and dealing with media queries in css-in-js was bad enough, but the boilerplate the CSS Paint API introduces just to access variables is absolutely atrocious: <style> textarea { --checkerboard-spacing: 10; --checkerboard-size: 32; background-image: paint(checkerboard); } </style> <script> CSS.paintWorklet.addModule('checkerboard.js'); </script> // checkerboard.js class CheckerboardPainter { paint(ctx, geom, properties) { const size = parseInt(properties.get('--checkerboard-size').toString()); } } registerPaint('checkerboard', CheckerboardPainter); More escape acts here: https://developers.google.com/web/updates/2018/01/paintapi#parameterizing_your_worklet https://developers.google.com/web/updates/2018/01/paintapi#p...
- msoad 5y ago
  The proper way to read the value is actually a bit more code that `parseInt`. You should be using the Parser API's `CSSNumericValue.parse`. Realistically these are things that can make look nice by utility functions. The value of being able to paint using Canvas APIs off the main thread for super custom components is really high. In all other platforms like iOS and Qt you can take over painting if you want to. It's nice that we will be able to do this in web too.
- ihuman 5y ago
  For that example, you can drop the toString(), because it's already a string. I think it's a string by default because that css variable is untyped. You can define the type with @property in css, or CSS.registerProperty in Javascript. Then you just need to call properties.get('--checkerboard-size').value, and drop the parseInt. Unfortunately, this solution also adds more boilerplate.
  - seumars 5y ago
    That’s the point
snow_mac 5y ago
This is really cool. I like the random background example or the ripple effect example in the video tutorial. I bet someone will compose a library of effects leveraging Houdini that will allow UI developers to greatly enhance their UI. Things that we could only really do in Flash, like cool animations with transitions could become even more possible and easier to build with Houdini. The table rounding is a really cool idea. I could see us combining a bunch of concepts to build really fast and performant designs that are cutting edge.
wnevets 5y ago
https://houdini.how/ https://houdini.how/ has some neat examples of what you can do with Houdini
- snow_mac 5y ago
  From that, https://paintlets.herokuapp.com/ https://paintlets.herokuapp.com/ amazing. SO COOL
  - erichurkman 5y ago
    Scrolling on that page is incredibly janky (Chrome/mac). Is that the underlying tech being new and slow, or the specific implementations using it on the gallery?
- r-k-jo 5y ago
  here is a cool example using d3.js to render the earth using Houdini https://observablehq.com/@fil/hello-paintworklet https://observablehq.com/@fil/hello-paintworklet
- __app_dev__ 5y ago
  I created a Fractal Demo using Houdini that is featured on houdini.how: https://github.com/ConradSollitt/css-houdini-fractals https://github.com/ConradSollitt/css-houdini-fractals It's similar to rendering with canvas. houdini.how is a Chrome Labs Site from Google and allows authors to submit demos. I would recommend creating a demo on it for any developer that wants to try Houdini. https://github.com/GoogleChromeLabs/houdini.how https://github.com/GoogleChromeLabs/houdini.how
deleted 5y ago
[deleted]
dragonwriter 5y ago
> With Houdini you could invent your own masonry, grid, or regions implementation, but doing so is not necessarily the best idea. Prediction: that “but...” is going to be ignored way too much.
- o_____________o 5y ago
  On that note, masonry layout is finally coming to CSS: https://drafts.csswg.org/css-grid-3/ https://drafts.csswg.org/css-grid-3/ https://github.com/w3c/csswg-drafts/issues/4650 https://github.com/w3c/csswg-drafts/issues/4650 (Think Pinterest layout with ltr ordering, which is extremely problematic in pure CSS)
  - qwertox 5y ago
    How does one create the layout? By playing a round of Tetris?
    - IgorPartola 5y ago
      Yes but the down button is stuck so you can only go left or right and only a little bit.
  - egeozcan 5y ago
    I think the css grid got too complicated to fit in my brain. I mean not just the usage and the details, that ship has sailed a long time ago anyway. These days, I can't keep in my mind even what it is capable of and how to approach my layout problems. Perhaps embarrassing for a web developer of my experience, or maybe we really need better tools (not just standards!) for layout.
    - tomcooks 5y ago
      I still use float and positioning, it works fine. Slowly integrating flexbox and grid in my work but I'm not in a hurry.
    - BadOakOx 5y ago
n0us 5y ago
But when can we extend JavaScript with CSS?
- inopinatus 5y ago
  When we finally accept that the experiment with non-Turing-complete layout has failed, and bring back DSSSL.
ryanwhitney 5y ago
Looks like this would finally allow managing pseudo-classes via JavaScript? What a world.
deleted 5y ago
[deleted]
SirHound 5y ago
Certainly some of these APIs look to offer extensibility but the Animation Worklet as it currently stands doesn’t come close to offering the kind of extensibility you’d expect in this area: https://mattperry.is/writing-code/animation-worklet-4-missing-features https://mattperry.is/writing-code/animation-worklet-4-missin...
junon 5y ago
This seems groundbreaking, honestly. This is only going to help bridge desktop and web applications.
deleted 5y ago
[deleted]
zodzedzi 5y ago
So if I disable javascript by default for websites (say, in uBlock Origin), but I don't disable CSS, will there now still be unrestricted javascript allowed to run under the guise of CSS?
- grishka 5y ago
  Definitely not unrestricted, but it won't run in the first place and you'll end up with a broken page. You need to first load the worklets from JS that runs in the context of the page itself.
  - zodzedzi 5y ago
    Thanks, that was helpful.
sidpatil 5y ago
Everything that's old is new again: https://en.wikipedia.org/wiki/JavaScript_Style_Sheets https://en.wikipedia.org/wiki/JavaScript_Style_Sheets
- livre 5y ago
  It was also new some time ago with Internet Explorer https://stackoverflow.com/questions/26339276/what-is-behavior-url-property-in-css#26339480 https://stackoverflow.com/questions/26339276/what-is-behavio... Used to implement things like CSS3 rounded corners and other decorations https://github.com/lojjic/PIE https://github.com/lojjic/PIE
yuchi 5y ago
I love this evolution and would have been a lifesaver 10 years ago. Currently, not so groundbreaking but still interesting. What I really don’t understand is why they still insist on global namespace polluting APIs. It was ok-ish with CSS Animations’ names, it broke any real project with custom elements (want to have 2 different versions of the same element? Good luck) and then this… They really don’t care about actual folks trying to incrementally upgrade applications or developing composite applications. All of this requires a level of coordination that is prohibitive to have in enough complex projects… Odi ed amo…
- lioeters 5y ago
  > Catullus 85 is a poem by the Roman poet Catullus for his lover Lesbia. > Ōdī et amō. Quārē id faciam fortasse requīris. > Nesciŏ, sed fierī sentiō et excrucior. > I hate and I love. Why I do this, perhaps you ask. > I know not, but I feel it happening and I am tortured.
dang 5y ago
Some past threads: CSS Houdini Experiments - https://news.ycombinator.com/item?id=21628921 https://news.ycombinator.com/item?id=21628921 - Nov 2019 (14 comments) CSS Houdini Interactive Introduction - https://news.ycombinator.com/item?id=20548183 https://news.ycombinator.com/item?id=20548183 - July 2019 (28 comments) Houdini: Maybe the Most Exciting Development in CSS - https://news.ycombinator.com/item?id=11357794 https://news.ycombinator.com/item?id=11357794 - March 2016 (62 comments) Houdini and the Extensible Web - https://news.ycombinator.com/item?id=9533423 https://news.ycombinator.com/item?id=9533423 - May 2015 (1 comment)
croes 5y ago
Bad name to google because of SideFX Houdini.
- fctorial 5y ago
  It isn't a product, it's the name of an API.
  - croes 5y ago
    Doesn't matter if you try to google something. You will get lots of results for SideFX Houdini and the other way around.
    - pentaphobe 5y ago
      100% agree, getting real tired of all this name reuse especially in situations like this where both are vaguely graphics related
dalmo3 5y ago
Can't wait for css-illusions.com!
- mintone 5y ago
  Hey dalmo3. You replied to a question I asked a while ago but I can't reply directly to you there. (https://news.ycombinator.com/item?id=24486487 https://news.ycombinator.com/item?id=24486487). Thank you for that reply. I solved exactly what you asked for. My email is in my profile if you want to know more.
  - dalmo3 5y ago
    Oh wow that's great! Looks like it ticks all boxes, and more. Really wish you succeed in making the web a better place. I'd love to try the platform from a consumer standpoint, though - maybe add a demo page? I'm not a creator, so not sure about signing up for that free trial. Do the transcripts go well with (instrumental) music? It'd be great to have this for the online bass lessons I just started. :D
- neolog 5y ago
  lmao
Zren 5y ago
Heh, a wild Tabs mixed with Spaces appears in the second example.
galaxyLogic 5y ago
But does this only work with FireFox? If so, the web is splintering again.
tanaypingalkar 5y ago
I found this repo on github which have a list of haudini resources. https://github.com/CSSHoudini/awesome-css-houdini https://github.com/CSSHoudini/awesome-css-houdini
PoignardAzur 5y ago
Copying from another thread: Houdini seems mostly abandoned. The feature page [1] lists multiple sub-proposals that have "No signal" even from the Chrome team. All mentions of Houdini I can find on developers.google.com are from 2018. I can't find anything about Houdini integration with WebAssembly, which is what I'd expect if development was ongoing. Overall, I'm seeing everything I would expect to see in the timeline where Mozilla has no intention of ever implementing Houdini, and Google has decided it's not worth pursuing beyond what's already implemented. [1]: https://ishoudinireadyyet.com/ https://ishoudinireadyyet.com/

315 points by mvolfik 5y ago

Implementation status of the different APIs: https://ishoudinireadyyet.com/ https://ishoudinireadyyet.com/ I personally can’t wait for the Layout API, which will allow alternative solutions to compete with the CSS layout mechanisms, without the performance penalty.

Rapzid 5y ago
Under consideration with FireFox and only a couple in dev with Safari.. Not knowing anything about the velocity of the effort, I look at that and can imagine this being years from general availability.
- pjmlp 5y ago
  Depends pretty much how Firefox keeps being relevant, and how Safari or iOS are relevant to customer base in some countries. From my point of view I can start thinking about putting ChromeOS developer instead of Web developer on my skill list.

msoad 5y ago

What's super nice about these APIs is that everything is happening off the main thread.

vagrantJin 5y ago

I feel like I work on a different web. > Note: With great power comes great responsibility! With Houdini you could invent your own masonry, grid, or regions implementation, but doing so is not necessarily the best idea. The CSS Working group does a lot of work to ensure every feature is performant, handles all edge cases, and considers security, privacy, and accessibility. Sounds like a lot of work to display a bloody list.

smhmd 5y ago
https://www.youtube.com/watch?v=1W79T2ibd5Y https://www.youtube.com/watch?v=1W79T2ibd5Y
croes 5y ago
Sounds like possible security and privacy nightmare for users
afavour 5y ago
> Sounds like a lot of work to display a bloody list. UI is complex? Who knew!
jrochkind1 5y ago
If <ul> meets the needs of your application, there's no reason you'd have to do more work than that.
- brianzelip 5y ago
  Masonry is a <ul>.
madeofpalk 5y ago
My understanding is that these Houdini features are aimed more at big library/framework authors. It's not for "every day users". It's more expected that you'll use things that use Houdini under the hood as an implementation detail. A new layout mode (like CSS Grid) isn't available yet? This allows someone to write a polyfill for it. That's neat!
- holtalanm 5y ago
  > A new layout mode (like CSS Grid) isn't available yet? This allows someone to write a polyfill for it. That's neat! this was my first thought, too. We have polyfills for js features that don't yet exist in a lot of browsers, but polyfills for css are either very complicated or just don't exist in some cases.

macando 5y ago

I've heard about Houdini 3 years ago and am really surprised it hasn't taken off and became mainstream yet. Still waiting to use it on a commercial project.

pjmlp 5y ago
Not surprising, given that is yet another API being pushed by Chrome.

______- 5y ago

I have always striven to insulate decoration (CSS) from functionality (JS). Now the two have blended and we end up with madness like: <script>.element{color:red}</script>

slver 5y ago
Please, RTFA before commenting next time.

bshimmin 5y ago

I can't wait to do JS-in-CSS-in-JS!

_Microft 5y ago
... running in the sandbox of a browser in a VM and getting streamed to your local PC from a super-computer in the cloud.
- fallat 5y ago
  Aren't we in a Mighty exciting time!
jrochkind1 5y ago
The Houdini APIs are not really about "JS in CSS". They are about extending CSS features (like adding new features to CSS, new keywords or what have you) by providing a JS implementation at runtime.
- ihuman 5y ago
  But you can use it to write JS in CSS and then eval it (although you probably shouldn't) https://css-houdini.rocks/js-in-css https://css-houdini.rocks/js-in-css (only works in Chrome)
  - jrochkind1 5y ago
    OK, good point! And neat demo, thanks! I guess if you can add features to CSS, you can add a feature to have evaluatable JS! And that is a pretty neat demo. It is not the main targeted use case of Houdini though! (And I'm gonna go out on a limb and say the Houdini devs would say it's a bad idea as more than a cool toy!)

hexo 5y ago

But, why?

d--b 5y ago
My question exactly
jrochkind1 5y ago
This lets you provide an implementation for a CSS feature that is perhaps not yet implemented by browsers, or maybe never will be. You could always do this with Javascript, and some people have been. See: https://philipwalton.github.io/polyfill/ https://philipwalton.github.io/polyfill/ But this lets you do it in a less hacky, and especially, more performant way. The author of that JS CSS polyfill library above actually wrote in 2016 how that approach was proving a bad idea, and the right way to do this was the houdini API... I guess we've been waiting for it since 2016? This is the first I had heard of it. https://philipwalton.com/articles/the-dark-side-of-polyfilling-css/ https://philipwalton.com/articles/the-dark-side-of-polyfilli...
- mst 5y ago
  Plus, something people often forget is that the features required to polyfill and the features required to produce a proof-of-concept/prototype are really quite similar. Enabling JS devs to experiment with things up front before they go to the standards track and the effort of full browser implementations will have a lot of cool advantages, I hope.
netghost 5y ago
So that you can implement new layout algorithms, gradient generation and such in user space. It's extremely unlikely that most developers will use this directly.
postalrat 5y ago
why use uppercase?

axiosgunnar 5y ago

Everybody get prepared for the predictable onslaught of Hackernews purists who are all about to faint after reading that CSS has become the next prey of the devil - Javascript. Nevermind that humanity has experienced a quantum leap in productivity and e-commerce that has given generations of entrepreneurs wealth and every consumer on the planet unprecedented quality of life thanks to the Web, and that Web being made possible precisely because the developer-friendly, move fast and break things route that Javascript has taken from day one. But because there is a new Javascript framework coming out every day (I'm surprised competition is seen in a negative light, on HN out of all places), because it's easy to learn (and we all like to gatekeep a bit, don't we?) and because it's not a "real" language (since you cannot shoot yourself in the foot with a use-after-free), Javascript has become the prime target of ivory tower grumbling.

NikolaNovak 5y ago
I think I agree with most things except easy to learn... Every time I want to get back into programming, the complexity of javascriot frameworks, the infinite variety of ephemeral choices, bounces me right out. Of all programming languages now and past, javascript as it is used today (as opposed plain language) would not be my first choice for "easy to learn". I feel there's huge effective gatekeeping with it but that's just an outsiders perspective :-/
- austincheney 5y ago
  I choose to ignore the frameworks for that very reason. This line of thought makes me far less employable but then why would I want to work a job I hate only to drown in weak unnecessary abstractions and all the defects and poor scale that come from that?
- axiosgunnar 5y ago
  I agree that frameworks might be a challenge. I would consider learning full-blown frameworks (e.g. React) pretty much like learning a new language, especially since JSX is a new syntax (albeit it's pretty much HTML). Regarding React, I consider the "hooks" coding style to be INCREDIBLY ergonomic and have been wondering sometimes if React-like "hooks" could be used elsewhere, esp in other programming languages. Or does that only make sense with UIs?

maxov 5y ago

The synchronicity of this showing up on the HN front page at the same time as Google moving Docs to canvas-based rendering (https://news.ycombinator.com/item?id=27129858 https://news.ycombinator.com/item?id=27129858) is kind of funny. More seriously, this looks really cool, and I do actually wonder if it could ease some of the problems Google is looking to solve by using canvas-based rendering, although I'm not super familiar with the challenges of rich-text editing. It would be much more preferable for me (and I think for most developers and users) if web apps still used the DOM to render text boxes, and you could hook into the rendering and layout engine for more complex operations. The layout and painting hooks offered by Houdini seem very useful for this. The one issue is I'm not sure how text selection works here - the order of elements in selection is already kind of obtuse for more complicated layouts, and this adds even more configurations. I don't know if the APIs offer some sort of ability to control the order of selection or if that's somehow a feature of the box model.

bayesian_horse 5y ago
In Google Docs they value consistency of the rendering output over performance, while complex documents might even see some performance benefits. CSS Houdini is a way to get performance out of complex and custom layout or animations.
- maxov 5y ago
  I might be misinterpreting, but are you saying the two are mutually exclusive? Google Docs does need custom layout and rendering which may be tough/finicky to implement with the existing css layout, as well as consistency.
- steren 5y ago
  Why do you assume canvas will have bad performance? Sheets moved to canvas from HTML, and got a massive perf boost.
  - bayesian_horse 5y ago
    It's not totally mutually exclusive. But canvas operations aren't hardware accelerated, and rendering of HTML potentially is. It's still possible to make the DOM complicated enough that moving to canvas has performance advantages. I don't know the details, but I'm guessing that is achieved by skipping updates the browser would usually make.

silon42 5y ago

Sometimes I find that disabling CSS in umatrix in addition to Javascript improves the site...

etaioinshrdlu 5y ago

To be clear, it looks like this is on a standards track and going to be implemented natively by browsers? (and already is behind feature flags?)

ihuman 5y ago
Chrome already supports some of it https://ishoudinireadyyet.com/ https://ishoudinireadyyet.com/

deleted 5y ago

[deleted]

seumars 5y ago

I thought writing css in camel case and dealing with media queries in css-in-js was bad enough, but the boilerplate the CSS Paint API introduces just to access variables is absolutely atrocious: <style> textarea { --checkerboard-spacing: 10; --checkerboard-size: 32; background-image: paint(checkerboard); } </style> <script> CSS.paintWorklet.addModule('checkerboard.js'); </script> // checkerboard.js class CheckerboardPainter { paint(ctx, geom, properties) { const size = parseInt(properties.get('--checkerboard-size').toString()); } } registerPaint('checkerboard', CheckerboardPainter); More escape acts here: https://developers.google.com/web/updates/2018/01/paintapi#parameterizing_your_worklet https://developers.google.com/web/updates/2018/01/paintapi#p...

msoad 5y ago
The proper way to read the value is actually a bit more code that `parseInt`. You should be using the Parser API's `CSSNumericValue.parse`. Realistically these are things that can make look nice by utility functions. The value of being able to paint using Canvas APIs off the main thread for super custom components is really high. In all other platforms like iOS and Qt you can take over painting if you want to. It's nice that we will be able to do this in web too.
ihuman 5y ago
For that example, you can drop the toString(), because it's already a string. I think it's a string by default because that css variable is untyped. You can define the type with @property in css, or CSS.registerProperty in Javascript. Then you just need to call properties.get('--checkerboard-size').value, and drop the parseInt. Unfortunately, this solution also adds more boilerplate.
- seumars 5y ago
  That’s the point

snow_mac 5y ago

This is really cool. I like the random background example or the ripple effect example in the video tutorial. I bet someone will compose a library of effects leveraging Houdini that will allow UI developers to greatly enhance their UI. Things that we could only really do in Flash, like cool animations with transitions could become even more possible and easier to build with Houdini. The table rounding is a really cool idea. I could see us combining a bunch of concepts to build really fast and performant designs that are cutting edge.

wnevets 5y ago

https://houdini.how/ https://houdini.how/ has some neat examples of what you can do with Houdini

snow_mac 5y ago
From that, https://paintlets.herokuapp.com/ https://paintlets.herokuapp.com/ amazing. SO COOL
- erichurkman 5y ago
  Scrolling on that page is incredibly janky (Chrome/mac). Is that the underlying tech being new and slow, or the specific implementations using it on the gallery?
r-k-jo 5y ago
here is a cool example using d3.js to render the earth using Houdini https://observablehq.com/@fil/hello-paintworklet https://observablehq.com/@fil/hello-paintworklet
__app_dev__ 5y ago
I created a Fractal Demo using Houdini that is featured on houdini.how: https://github.com/ConradSollitt/css-houdini-fractals https://github.com/ConradSollitt/css-houdini-fractals It's similar to rendering with canvas. houdini.how is a Chrome Labs Site from Google and allows authors to submit demos. I would recommend creating a demo on it for any developer that wants to try Houdini. https://github.com/GoogleChromeLabs/houdini.how https://github.com/GoogleChromeLabs/houdini.how

deleted 5y ago

[deleted]

dragonwriter 5y ago

> With Houdini you could invent your own masonry, grid, or regions implementation, but doing so is not necessarily the best idea. Prediction: that “but...” is going to be ignored way too much.

o_____________o 5y ago
On that note, masonry layout is finally coming to CSS: https://drafts.csswg.org/css-grid-3/ https://drafts.csswg.org/css-grid-3/ https://github.com/w3c/csswg-drafts/issues/4650 https://github.com/w3c/csswg-drafts/issues/4650 (Think Pinterest layout with ltr ordering, which is extremely problematic in pure CSS)
- qwertox 5y ago
  How does one create the layout? By playing a round of Tetris?
  - IgorPartola 5y ago
    Yes but the down button is stuck so you can only go left or right and only a little bit.
- egeozcan 5y ago
  I think the css grid got too complicated to fit in my brain. I mean not just the usage and the details, that ship has sailed a long time ago anyway. These days, I can't keep in my mind even what it is capable of and how to approach my layout problems. Perhaps embarrassing for a web developer of my experience, or maybe we really need better tools (not just standards!) for layout.
  - tomcooks 5y ago
    I still use float and positioning, it works fine. Slowly integrating flexbox and grid in my work but I'm not in a hurry.
  - BadOakOx 5y ago

n0us 5y ago

But when can we extend JavaScript with CSS?

inopinatus 5y ago
When we finally accept that the experiment with non-Turing-complete layout has failed, and bring back DSSSL.

ryanwhitney 5y ago

Looks like this would finally allow managing pseudo-classes via JavaScript? What a world.

deleted 5y ago

[deleted]

SirHound 5y ago

Certainly some of these APIs look to offer extensibility but the Animation Worklet as it currently stands doesn’t come close to offering the kind of extensibility you’d expect in this area: https://mattperry.is/writing-code/animation-worklet-4-missing-features https://mattperry.is/writing-code/animation-worklet-4-missin...

junon 5y ago

This seems groundbreaking, honestly. This is only going to help bridge desktop and web applications.

deleted 5y ago

[deleted]

zodzedzi 5y ago

So if I disable javascript by default for websites (say, in uBlock Origin), but I don't disable CSS, will there now still be unrestricted javascript allowed to run under the guise of CSS?

grishka 5y ago
Definitely not unrestricted, but it won't run in the first place and you'll end up with a broken page. You need to first load the worklets from JS that runs in the context of the page itself.
- zodzedzi 5y ago
  Thanks, that was helpful.

sidpatil 5y ago

Everything that's old is new again: https://en.wikipedia.org/wiki/JavaScript_Style_Sheets https://en.wikipedia.org/wiki/JavaScript_Style_Sheets

livre 5y ago
It was also new some time ago with Internet Explorer https://stackoverflow.com/questions/26339276/what-is-behavior-url-property-in-css#26339480 https://stackoverflow.com/questions/26339276/what-is-behavio... Used to implement things like CSS3 rounded corners and other decorations https://github.com/lojjic/PIE https://github.com/lojjic/PIE

yuchi 5y ago

I love this evolution and would have been a lifesaver 10 years ago. Currently, not so groundbreaking but still interesting. What I really don’t understand is why they still insist on global namespace polluting APIs. It was ok-ish with CSS Animations’ names, it broke any real project with custom elements (want to have 2 different versions of the same element? Good luck) and then this… They really don’t care about actual folks trying to incrementally upgrade applications or developing composite applications. All of this requires a level of coordination that is prohibitive to have in enough complex projects… Odi ed amo…

lioeters 5y ago
> Catullus 85 is a poem by the Roman poet Catullus for his lover Lesbia. > Ōdī et amō. Quārē id faciam fortasse requīris. > Nesciŏ, sed fierī sentiō et excrucior. > I hate and I love. Why I do this, perhaps you ask. > I know not, but I feel it happening and I am tortured.

dang 5y ago

Some past threads: CSS Houdini Experiments - https://news.ycombinator.com/item?id=21628921 https://news.ycombinator.com/item?id=21628921 - Nov 2019 (14 comments) CSS Houdini Interactive Introduction - https://news.ycombinator.com/item?id=20548183 https://news.ycombinator.com/item?id=20548183 - July 2019 (28 comments) Houdini: Maybe the Most Exciting Development in CSS - https://news.ycombinator.com/item?id=11357794 https://news.ycombinator.com/item?id=11357794 - March 2016 (62 comments) Houdini and the Extensible Web - https://news.ycombinator.com/item?id=9533423 https://news.ycombinator.com/item?id=9533423 - May 2015 (1 comment)

croes 5y ago

Bad name to google because of SideFX Houdini.

fctorial 5y ago
It isn't a product, it's the name of an API.
- croes 5y ago
  Doesn't matter if you try to google something. You will get lots of results for SideFX Houdini and the other way around.
  - pentaphobe 5y ago
    100% agree, getting real tired of all this name reuse especially in situations like this where both are vaguely graphics related

dalmo3 5y ago

Can't wait for css-illusions.com!

mintone 5y ago
Hey dalmo3. You replied to a question I asked a while ago but I can't reply directly to you there. (https://news.ycombinator.com/item?id=24486487 https://news.ycombinator.com/item?id=24486487). Thank you for that reply. I solved exactly what you asked for. My email is in my profile if you want to know more.
- dalmo3 5y ago
  Oh wow that's great! Looks like it ticks all boxes, and more. Really wish you succeed in making the web a better place. I'd love to try the platform from a consumer standpoint, though - maybe add a demo page? I'm not a creator, so not sure about signing up for that free trial. Do the transcripts go well with (instrumental) music? It'd be great to have this for the online bass lessons I just started. :D
neolog 5y ago
lmao

Zren 5y ago

Heh, a wild Tabs mixed with Spaces appears in the second example.

galaxyLogic 5y ago

But does this only work with FireFox? If so, the web is splintering again.

tanaypingalkar 5y ago

I found this repo on github which have a list of haudini resources. https://github.com/CSSHoudini/awesome-css-houdini https://github.com/CSSHoudini/awesome-css-houdini

PoignardAzur 5y ago

Copying from another thread: Houdini seems mostly abandoned. The feature page [1] lists multiple sub-proposals that have "No signal" even from the Chrome team. All mentions of Houdini I can find on developers.google.com are from 2018. I can't find anything about Houdini integration with WebAssembly, which is what I'd expect if development was ongoing. Overall, I'm seeing everything I would expect to see in the timeline where Mozilla has no intention of ever implementing Houdini, and Google has decided it's not worth pursuing beyond what's already implemented. [1]: https://ishoudinireadyyet.com/ https://ishoudinireadyyet.com/