CSS as the back end – Cascading Server Sheets | Hacker News Reader

CSS as the back end – Cascading Server Sheets

dev.to

141 pointsritabratamaiti30 comments

After deep-diving on front-end stuff in the late 2000s, I got enamored with the idea of a templating engine that would let you address content into places in the document rather than strain it in via placeholders.

Eventually, I wrote a library for it in PHP [0] and built a blog and another app or two around it. Never could seem to sell many people on the basic concept, though. Glad to see someone else had some similar ideas.

[0] http://weston.canncentral.org/web_lab/CAST/about.html https://github.com/westonc/CAST/

https://github.com/Level-2/Transphporm is the same idea with more selectors and caching

Nice! Also seems to be written in more recent php versions/idioms.

Interesting to see this and the gp--especially how others are thinking/communicating about them. I have been picking at something that uses css in a similar way, but I've found it difficult to put what it is into words.

Separation of concerns. The person writing the HTML should get to decide where the data is rendered in the page, not the person generating the data. What you've done (as far as I can tell) is unnecessarily couple the backend to the structure of the presentation layer.

Someone doing all the content addressing within PHP would indeed be coupling the backend, and while I can imagine that being conditionally useful you're probably right that it would have drawbacks as a general pattern.

Someone using the Content Addressing Sheets feature of CAST would actually be adding an additional layer of separation:

* HTML - document structure with decorating attributes/semantics

* Content Addressing Sheet - determines where in the document computed content is displayed

* Domain Logic - determines values to be computed

The CAS is a CSS-like DSL that is very much not the backend host language (though it may invoke things defined within that language).

Will the same person author the HTML and CAS? Not necessarily, but it's certainly as plausible as someone authoring an HTML file with template syntax sprinkled around.

I'm glad this isn't on Github because I'd be so tempted to add features to it. I keep getting ideas, none of which would make this framework not a mistake.

The author appears to have included the full working source code in the article, so getting it formalized into a git repository is a trivial (possibly even entertaining) exercise, left to the reader.

How generous of Pascal Thormeier to leave the window open for fun! :)

Cascading Tree Sheets https://dspace.mit.edu/handle/1721.1/87014 would fit so nicely with this.

People are laughing at this, but it's less dumb than the adjacent project when I was still at a certain BigTech.

They were implementing a "3rd party platform" like Geocities where you can describe your webpages in YAML. This templating language lacked the composability and flexibility of HTML or Angular. Nodes in the tree mapped to custom built Angular.JS components. This is all arbitrary. You'd have to know the names of the components, which props to pass in. The implementation itself was built on top of Angular.JS instead of native vanilla JS and DOM manipulation. So basically they maintained a virtual DOM on top of Angular. All of this lived in an IFrame.

The competing solution was a sandbox where these 3rd party vendors could describe their UI sections in a limited subset of Angular, running in a security sandbox where data access is done through an API ( as opposed to providing components with tightly coupled and hard-coded data access ).

Does this make Emmet a higher-level scripting language?

Thinking about that seriously, I would love an Emmet style tool for quick class outlining. Not that it's a big issue. SomeClass<SomeBaseClass::someFunc(arg1,arg2)::anotherFunc(arg1:type) tab to complete.

For anyone not sure what Emmet is https://www.emmet.io/

It autocompletes something like `ul.the-class>li*3` into

    <ul class=the-class>
      <li></li>
      <li></li>
      <li></li>
    </ul>

This is what Web3 should be

I wish I had the time and patience to come up with something like this.

Since this thread is probably catnip for a certain kind of person...

Anyone have a term for "a CSS" that is distinct from the official CSS specs? I.e., a term that communicates something re-uses CSS-the-syntax, but with a different set of properties and functions.

For a silly example, imagine there's a CSS with properties and functions for describing tacos.

Oh! So CSSML?

I like this as a thought exercise. I wonder if a taco is a single element, or composed of multiple elements (shell, protein, sauce, add-ons). What are the pseudo states of a taco? Does the taco have child elements like a list?

``` shell: ‘hard’ | ‘soft’; temperature: 0 - 100 | ‘cold’ | ‘hot’ | ‘lukewarm’ ```

It would be a shame not to mention this: https://cuberule.com/

I think it would be called a DSL. Just happens to be a DSL that looks like CSS.

I've considered "a CSS DSL for X", though unfortunately there are already several projects that call themselves a "CSS DSL", by which most of them mean "a DSL for expressing CSS in general_language".

April fool's is one month away not today...

shudders

Pretty cool exercise to go through!

This relies on JS... so really not CSS magic at all.

There’s always someone

Edit: if this seems unreasonable, consider a large part of CSS relies on JS APIs just to exist or be usable at all.

CSS does not rely on JS APIs

Incorrect.

Not it isn't. Whether some browsers reuse JS in some of their APIs is a different story, however there are non-JS browsers with CSS support. CSS has nothing to do with JS and is about rendering.

Okay. You can’t use Houdini without JS. Just to start. It’s entirely a CSS API, and it’s impossible to use without JS.

Houdini is an API to extend CSS via JS. That doesn't mean that CSS requires JS at all.

It’s a part of the CSS spec. Not a part of JS or the DOM or HTML or anything else. Entirely CSS. You can only use it with JS. It’s not the only part of CSS that can only be used with JS, just a really unambiguous part to make the point.

Reply on news.ycombinator.com