CSS Houdini Interactive Introduction

http://houdini.glitch.me/

by dimtion • 7 years ago

73 28 7 years ago

houdini.glitch.me

onion2k• 7 years 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/ - click and drag to scratch off the symbols. The code lives at https://github.com/onion2k/scratchy

pm90• 7 years ago

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

herodotus• 7 years ago

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

dandigangi2• 7 years ago

It looks fine. This is ZippyDB: http://www.zippydb.com/

And Facebook uses on their Redis cluster. Design is important but far from the most important.

IggleSniggle• 7 years 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• 7 years 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.

mmastrac3• 7 years 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• 7 years 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• 7 years ago

How are these C level operations?

pjmlp4• 7 years 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://platform.uno/

https://blogs.autodesk.com/autocad/autocad-web-app-google-io...

https://dotnet.microsoft.com/apps/aspnet/web-apps/client

mmastrac3• 7 years 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.

codetrotter• 7 years ago

a language that was never really designed to run inside of a layout engine.

They should make Houdini available to use not just with JS but also with WebAssembly. Then you could use a more fitting language of your own choice.

agumonkey• 7 years ago

I expected someone to emulate houdini in css

brandonmenc• 7 years 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• 7 years ago

Java applet?

rounce• 7 years ago

You mean like targeting WASM and drawing to a canvas element?

pjmlp4• 7 years ago

Here are your Qt examples, https://www.qt.io/qt-examples-for-webassembly

nevir• 7 years 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• 7 years ago

Sounds like another Google plan to make adblocking impossible.

malvosenior• 7 years 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• 7 years 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• 7 years 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• 7 years ago

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

CSS Houdini Interactive Introduction

Related Stories