5 ms·

Exciting new technology for styling web pages. https://www.w3.org/Style/CSS/ https://www.w3.org/Style/CSS/

quickthrower2 4y ago
The question makes me think someone is teaching new developers wrong in a complex-thing-first way. Instead of HTML, CSS, JS in that order maybe they got chucked right into a NextJS / Tailwind twitter clone course as their intro to web dev.
- jdthedisciple 4y ago
  Lol naw man that ain't it but i'm surprised apparently nobody got what I was getting at: Say I have my css sheet included, now I still need to set the class and id attributes everywhere I need styling. Are you telling me the client needs to parse the html result and add those manually? Seems absurd. Are you telling me a real Hypermedia API would return stuff like <div class="...">data</div> ? That would seem equally absurd, why would the API concern itself with css classes lol. That's what I don't get
  - quickthrower2 4y ago
    Oh I see. Cant speak to the library author’s intent but I think of it like this. Take an old school original rails app. No JS. Nothing. If something is gonna happen it is because you clicked a link or submitted a form. In that app any page is generated by the server and must have any classes defined for css also rendered. So the server is already needing to know about this and inject those classes. With HTMX it is the same thing except you render partials sometimes and sometimes the whole page.
  - mixmastamyk 4y ago
    KISS… use semantic tags when possible. In this example, perhaps table. Classless CSS helpful as well. Beyond that I don’t think adding an id or class here and there is too bad. I’d avoid class heavy frameworks, as I believe you are alluding to.
jdthedisciple 4y ago
Haha ok let me expand, I didn't actually mean only styling but layouting as well. Consider this example from htmx.org: <html> <body> <div>Account number: 12345</div> <div>Balance: $100.00 USD</div> <div>Links: <a href="/accounts/12345/deposits">deposits</a> <a href="/accounts/12345/withdrawals">withdrawals</a> <a href="/accounts/12345/transfers">transfers</a> <a href="/accounts/12345/close-requests">close-requests</a> </div> <body> </html> What I don't get is who says I want to have all of that html displayed in this exact form anywhere I make a request for account info? Say I want to only display the Account balance - are you telling me client has to cut and parse the html response for that? How much html parsing is that gonna be all over a web page? Also the example I gave below about setting the css classes and ids inside the returned html elements...
- quickthrower2 4y ago
  No. You would not reuse the “partial view” API call by parsing and adapting the result. You make a different partial view for each instance. This is my slight “ugh” against it and why I prefer the idea of the frameworks that just get the entire page and do a differential swap because architecturally that is simpler. No need to create lots of weird little partials and wire them up.
  - geoffeg 4y ago
    I imagine it would be somewhat easy to provide a way for the APIs to include a way to filter the resulting HTML they produce. A CSS path as a URL parameter that the API runs to only return the content of the CSS path. There's probably some kind of balance between giving every partial it's own URL and allowing each partial to support a filtered response. You could write a little middleware for your http server to support the filtered response on every endpoint that returns HTML.
    - quickthrower2 4y ago
      Yeah there could be some kind of “varnish-like” layer outside the app server designed to modify the response to the required “lens” that is specified in a header. This would process the app response and filters/zoom to the part of the doc you want. The app could be agnostic and it reduces the amount of crap sent over the wire.

The question makes me think someone is teaching new developers wrong in a complex-thing-first way. Instead of HTML, CSS, JS in that order maybe they got chucked right into a NextJS / Tailwind twitter clone course as their intro to web dev.

jdthedisciple 4y ago
Lol naw man that ain't it but i'm surprised apparently nobody got what I was getting at: Say I have my css sheet included, now I still need to set the class and id attributes everywhere I need styling. Are you telling me the client needs to parse the html result and add those manually? Seems absurd. Are you telling me a real Hypermedia API would return stuff like <div class="...">data</div> ? That would seem equally absurd, why would the API concern itself with css classes lol. That's what I don't get
- quickthrower2 4y ago
  Oh I see. Cant speak to the library author’s intent but I think of it like this. Take an old school original rails app. No JS. Nothing. If something is gonna happen it is because you clicked a link or submitted a form. In that app any page is generated by the server and must have any classes defined for css also rendered. So the server is already needing to know about this and inject those classes. With HTMX it is the same thing except you render partials sometimes and sometimes the whole page.
- mixmastamyk 4y ago
  KISS… use semantic tags when possible. In this example, perhaps table. Classless CSS helpful as well. Beyond that I don’t think adding an id or class here and there is too bad. I’d avoid class heavy frameworks, as I believe you are alluding to.

jdthedisciple 4y ago

Haha ok let me expand, I didn't actually mean only styling but layouting as well. Consider this example from htmx.org: <html> <body> <div>Account number: 12345</div> <div>Balance: $100.00 USD</div> <div>Links: <a href="/accounts/12345/deposits">deposits</a> <a href="/accounts/12345/withdrawals">withdrawals</a> <a href="/accounts/12345/transfers">transfers</a> <a href="/accounts/12345/close-requests">close-requests</a> </div> <body> </html> What I don't get is who says I want to have all of that html displayed in this exact form anywhere I make a request for account info? Say I want to only display the Account balance - are you telling me client has to cut and parse the html response for that? How much html parsing is that gonna be all over a web page? Also the example I gave below about setting the css classes and ids inside the returned html elements...

quickthrower2 4y ago
No. You would not reuse the “partial view” API call by parsing and adapting the result. You make a different partial view for each instance. This is my slight “ugh” against it and why I prefer the idea of the frameworks that just get the entire page and do a differential swap because architecturally that is simpler. No need to create lots of weird little partials and wire them up.
- geoffeg 4y ago
  I imagine it would be somewhat easy to provide a way for the APIs to include a way to filter the resulting HTML they produce. A CSS path as a URL parameter that the API runs to only return the content of the CSS path. There's probably some kind of balance between giving every partial it's own URL and allowing each partial to support a filtered response. You could write a little middleware for your http server to support the filtered response on every endpoint that returns HTML.
  - quickthrower2 4y ago
    Yeah there could be some kind of “varnish-like” layer outside the app server designed to modify the response to the required “lens” that is specified in a header. This would process the app response and filters/zoom to the part of the doc you want. The app could be agnostic and it reduces the amount of crap sent over the wire.