Hacker News Reader

Comment by jordanwallwork | Hacker News Reader

The problem with using css this way is that it's not as obvious what's supposed to happen as it is when using js. I'd love for there to be some explanation within the examples of _why_ they work - I've just been reading the first modal example but I can't really understand it

View on HN

Building web applications with screens that have complex workflows and state is a need that is largely ignored by browsers and web standards.

Instead of getting reusable gui components we get indechiperable css hacks that were built for creating art installations on the web rather than getting any actual work done.

Mozilla (including Firefox) had XUL, but nobody cared.

Was it ever meant for general web usage?

For a time that was talked about (and Firefox supported XUL-based sites up to version 4).

> Mozilla (including Firefox) had XUL, but nobody cared.

Have you seen XUL? Here's an example, from https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Tu...

    <?xml version="1.0"?>
    <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
    <window id="findfile-window"
            title="Find Files"
            orient="horizontal"
            xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    
      <button id="find-button" label="Find"/>
      <button id="cancel-button" label="Cancel"/>
    
    </window>

All that does is display a window with two buttons. You can imagine how hideous it could get when it got more complex. Now, imagine this alternative (I'm assuming that id & title are mandatory arguments, and that orient is optional, default to horizontal):

    (sul
     (stylesheet "chrome://global/skin" "text/css")
     (window "findfile-window" "Find Files"
             (button "find-button" "Find")
             (button "cancel-button" "Cancel")))

Which would you rather write in?

Now, imagine that JavaScript were Scheme or Lisp instead, so that your browser interaction code were also written in an s-expression language. And imagine that CSS were s-expression-based, so that you were using the same tools to manipulate the same data everywhere.

It makes me weep.

I must be insane because I don't really see that much of a difference between the two examples you provided. I can read one just as well as the other.

The former has 46 words/348 characters; the latter 20 words/176 characters. That's more than twice the tokens, twice the disk space, twice the cognitive load.

Frankly, it's silly to think that cognitive load is directly proportional to number of words/characters.

For example, the latter relies on more implicit information (the order of the arguments), which can be harder to keep in mind than the keywords use by the former, particularly as you add more than two attributes. I'd say this version actually reduces the cognitive load, but it doesn't save as many words:

    (sul
     (stylesheet :href "chrome://global/skin" :type "text/css")
     (window :id "findfile-window" :title "Find Files"
             (button :id "find-button" :label "Find")
             (button :id "cancel-button" :label "Cancel")))

Twice the tokens, don't care.

Twice the disk space, who cares?

Twice the cognitive load, I guess I have a high tolerance.

Still don't see a compelling reason one is better than the other.

Using what was supposed to be a document display format for developing application interfaces is a massive hack in the first place...

And using style sheets that were initially for styling documents for animation/graphics, and using javascript which was created as a lightweight language for non-professionals to create reactive diff-based dom manipulations, and...

The :target pseudoclass is used, along with anchors. It means that it also pollutes the browser history, which is somewhat appropriate for modals, but probably not what you want.

Still neat though.

How does the browser know which modal is targetted though? I thought :target had to match the hash, but both links just link to # :S

Ah forget that, as usual it's immediately obvious after I post that I don't understand! Looks like I had a bit of a mental block and couldn't see the top buttons for some reason - I was looking at the close links.

Yup that all makes sense now then

Reply on news.ycombinator.com