6 ms·

CSS Houdini Interactive Introduction

73 points by dimtion 7y ago

pm90 7y ago
I was literally just watching this excellent cssconf talk on Houdini https://youtu.be/1W79T2ibd5Y https://youtu.be/1W79T2ibd5Y
onion2k 7y ago
I wrote a 'scratch off' card[1] using the CSS paintlet API a little while ago to see what it was like to work with. There were a few annoying quirks (basically Chrome only, lots of talk without much forward motion, not much that you can't do with a plain old canvas) but there's a lot of potential. [1] Working example: https://scratchy.ooer.com/ https://scratchy.ooer.com/ - click and drag to scratch off the symbols. The code lives at https://github.com/onion2k/scratchy https://github.com/onion2k/scratchy
herodotus 7y ago
I am put off by a poorly designed web page. Someone in the Houdini group need to redesign the page.
- dandigangi 7y ago
  It looks fine. This is ZippyDB: http://www.zippydb.com/ http://www.zippydb.com/ And Facebook uses on their Redis cluster. Design is important but far from the most important.
  - IggleSniggle 7y ago
    Hahahah ZippyDB landing page is hilarious. At least on mobile, interactive text elements sitting on top of interactive text elements...making it both difficult to read AND difficult to interact with.
  - ipsum2 7y ago
    I don't think thats the same ZippyDB Facebook uses. Theirs is developed for internal use on top of RocksDB, not Redis. (at least any public info I could find out about it), this looks like a (purposeful?) name collision to cause confusion.
    - dandigangi 7y ago
      You might be right but I am like 90% sure I found the link directly in an article on FB's engineering blog. I could def be wrong though.
mmastrac 7y ago
I really hope this tech doesn't take off - the web has been so successful _because_ it was declarative and not imperative. Now we're going to be baking in all the subtleties of Chrome and/or Firefox's handling of callbacks in a language that was never really designed to run inside of a layout engine. Yes, a declarative web API is _far_ harder to get right, but the web community has created an amazing long-term compatibility story. It _should_ be difficult to add things to the web-at-large precisely because it has to live, essentially, forever.
- a_lieb 7y ago
  I also worry about the increase in security surface area. A ton of additional C-level operations exposed to JS in all browsers. What could go wrong?
  - dymk 7y ago
    How are these C level operations?
- pjmlp 7y ago
  It already took off. Even if Houdini fails adoption, WebAssembly + Canvas/WebGL/WebGPU will do it. https://www.qt.io/qt-examples-for-webassembly https://www.qt.io/qt-examples-for-webassembly https://platform.uno/ https://platform.uno/ https://blogs.autodesk.com/autocad/autocad-web-app-google-io-2018/ https://blogs.autodesk.com/autocad/autocad-web-app-google-io... https://dotnet.microsoft.com/apps/aspnet/web-apps/client https://dotnet.microsoft.com/apps/aspnet/web-apps/client
  - mmastrac 7y ago
    Respectfully, that's a stretch - WebAssembly + (display tech) is a completely different stack in the browser. Houdini is bolting on a bunch of imperative stuff directly inside the browser engine with knock-on effects up and down throughout all of the web umbrella technologies. With a wasm+web hybrid, there's a clear separation between the imperative wasm bits and the declarative web bits, so you can even combine them in ways that allow both stacks to perform well.
agumonkey 7y ago
I expected someone to emulate houdini in css
brandonmenc 7y ago
Seriously, how long do we have to wait until the browser is just a language VM and a drawable surface and you supply your own programming language and layout engine? Like, hey, this URL just points to say, a QT app, and then it runs in this "browser" window over the network. Where have I heard of this before... Everything else just feels like loads of duct tape on top of an over-stressed document browsing paradigm. Just rip it out completely.
- brianberns 7y ago
  Java applet?
- rounce 7y ago
  You mean like targeting WASM and drawing to a canvas element?
- pjmlp 7y ago
  Here are your Qt examples, https://www.qt.io/qt-examples-for-webassembly https://www.qt.io/qt-examples-for-webassembly
- nevir 7y ago
  That's kind of the goal. Recent efforts to strip browsers down to their core functionality, and provide a world where the current web is effectively userland code: * web components * service workers * Houdini Imagine a future where browsers just implement these low level concepts, and HTML is defined as an (open source/community) library that all vendors bundle as part of their browser. And then, also consider how much overlap there is here with traditional operating systems. Your next device OS could be just another layer on top.
  - majewsky 7y ago
    Sounds like another Google plan to make adblocking impossible.
malvosenior 7y ago
I feel like this page was designed to be ironically bad to mask the fact that it's actually just bad. Why make it so difficult to understand what's going on? Is this glitch page somehow part of the actual WC3 project?
abhchand 7y ago
Honestly, it feels like the web is so bloated sometimes. Are the fundamentals really that difficult? We have raw CSS and at most we can have a layer above it that generates manage-able CSS (e.g. SASS). Why introduce all this un-needed complexity?
- rchaud 7y ago
  Can you give examples of what you consider to be the bloated web? From what I can tell, the most popular websites other than Youtube are still all text and images, but have enormous file sizes because of the million ad and tracking scripts working in the background.
adamschwartz 7y ago
Check out https://css-houdini.rocks https://css-houdini.rocks instead. Really well put together.

73 points by dimtion 7y ago

pm90 7y ago

I was literally just watching this excellent cssconf talk on Houdini https://youtu.be/1W79T2ibd5Y https://youtu.be/1W79T2ibd5Y

onion2k 7y ago

I wrote a 'scratch off' card[1] using the CSS paintlet API a little while ago to see what it was like to work with. There were a few annoying quirks (basically Chrome only, lots of talk without much forward motion, not much that you can't do with a plain old canvas) but there's a lot of potential. [1] Working example: https://scratchy.ooer.com/ https://scratchy.ooer.com/ - click and drag to scratch off the symbols. The code lives at https://github.com/onion2k/scratchy https://github.com/onion2k/scratchy

herodotus 7y ago

I am put off by a poorly designed web page. Someone in the Houdini group need to redesign the page.

dandigangi 7y ago
It looks fine. This is ZippyDB: http://www.zippydb.com/ http://www.zippydb.com/ And Facebook uses on their Redis cluster. Design is important but far from the most important.
- IggleSniggle 7y ago
  Hahahah ZippyDB landing page is hilarious. At least on mobile, interactive text elements sitting on top of interactive text elements...making it both difficult to read AND difficult to interact with.
- ipsum2 7y ago
  I don't think thats the same ZippyDB Facebook uses. Theirs is developed for internal use on top of RocksDB, not Redis. (at least any public info I could find out about it), this looks like a (purposeful?) name collision to cause confusion.
  - dandigangi 7y ago
    You might be right but I am like 90% sure I found the link directly in an article on FB's engineering blog. I could def be wrong though.

mmastrac 7y ago

I really hope this tech doesn't take off - the web has been so successful _because_ it was declarative and not imperative. Now we're going to be baking in all the subtleties of Chrome and/or Firefox's handling of callbacks in a language that was never really designed to run inside of a layout engine. Yes, a declarative web API is _far_ harder to get right, but the web community has created an amazing long-term compatibility story. It _should_ be difficult to add things to the web-at-large precisely because it has to live, essentially, forever.

a_lieb 7y ago
I also worry about the increase in security surface area. A ton of additional C-level operations exposed to JS in all browsers. What could go wrong?
- dymk 7y ago
  How are these C level operations?
pjmlp 7y ago
It already took off. Even if Houdini fails adoption, WebAssembly + Canvas/WebGL/WebGPU will do it. https://www.qt.io/qt-examples-for-webassembly https://www.qt.io/qt-examples-for-webassembly https://platform.uno/ https://platform.uno/ https://blogs.autodesk.com/autocad/autocad-web-app-google-io-2018/ https://blogs.autodesk.com/autocad/autocad-web-app-google-io... https://dotnet.microsoft.com/apps/aspnet/web-apps/client https://dotnet.microsoft.com/apps/aspnet/web-apps/client
- mmastrac 7y ago
  Respectfully, that's a stretch - WebAssembly + (display tech) is a completely different stack in the browser. Houdini is bolting on a bunch of imperative stuff directly inside the browser engine with knock-on effects up and down throughout all of the web umbrella technologies. With a wasm+web hybrid, there's a clear separation between the imperative wasm bits and the declarative web bits, so you can even combine them in ways that allow both stacks to perform well.

agumonkey 7y ago

I expected someone to emulate houdini in css

brandonmenc 7y ago

Seriously, how long do we have to wait until the browser is just a language VM and a drawable surface and you supply your own programming language and layout engine? Like, hey, this URL just points to say, a QT app, and then it runs in this "browser" window over the network. Where have I heard of this before... Everything else just feels like loads of duct tape on top of an over-stressed document browsing paradigm. Just rip it out completely.

brianberns 7y ago
Java applet?
rounce 7y ago
You mean like targeting WASM and drawing to a canvas element?
pjmlp 7y ago
Here are your Qt examples, https://www.qt.io/qt-examples-for-webassembly https://www.qt.io/qt-examples-for-webassembly
nevir 7y ago
That's kind of the goal. Recent efforts to strip browsers down to their core functionality, and provide a world where the current web is effectively userland code: * web components * service workers * Houdini Imagine a future where browsers just implement these low level concepts, and HTML is defined as an (open source/community) library that all vendors bundle as part of their browser. And then, also consider how much overlap there is here with traditional operating systems. Your next device OS could be just another layer on top.
- majewsky 7y ago
  Sounds like another Google plan to make adblocking impossible.

malvosenior 7y ago

I feel like this page was designed to be ironically bad to mask the fact that it's actually just bad. Why make it so difficult to understand what's going on? Is this glitch page somehow part of the actual WC3 project?

abhchand 7y ago

Honestly, it feels like the web is so bloated sometimes. Are the fundamentals really that difficult? We have raw CSS and at most we can have a layer above it that generates manage-able CSS (e.g. SASS). Why introduce all this un-needed complexity?

rchaud 7y ago
Can you give examples of what you consider to be the bloated web? From what I can tell, the most popular websites other than Youtube are still all text and images, but have enormous file sizes because of the million ad and tracking scripts working in the background.

adamschwartz 7y ago

Check out https://css-houdini.rocks https://css-houdini.rocks instead. Really well put together.