3 ms·

I love a good CSS-only solution because of its statelessness; makes things much easier to reason about IMO. Of course in this case you'll probably have to gener

I love a good CSS-only solution because of its statelessness; makes things much easier to reason about IMO. Of course in this case you'll probably have to generate your HTML in some procedural way anyway, but it's still a neat option to have, especially if you're statically-rendering your pages (you can avoid using JS entirely)

bob1029 6y ago
100% agree. CSS-only solutions are extremely attractive. Avoiding use of JS entirely is one my team's core values at this stage. We never got rid of 100% of it, but we did get really damn close using Blazor. Only ~180 lines of javascript interop is required for our entire solution last time I checked. This isn't trivial stuff either... We hand-rolled large file upload/download w/ progress, get client rect, get/set cookies, etc.
- pcthrowaway 6y ago
  Perhaps I'm wrong, but it may be impossible to add zoom capabilities to charts without JS
  - brundolf 6y ago
    Hmm. You would probably want to implement the actual zoom as a `transform: scale() translate()` regardless, and you could parameterize it with CSS properties like `transform: scale(var(--zoom-scale)) translate(var(--zoom-x), var(--zoom-y))`. But when it comes to getting those numbers and hooking them into the CSS vars, I don't see a way to do that without JS. Certainly, though, the JS could be just a couple lines if you did things this way (mousemove listener on the container, a bit of math to get the relative x/y, and then either a slider or a scroll listener to determine the scale, and these three numbers are plugged directly into the CSS).
    - pcthrowaway 6y ago
      Yeah, I suppose are definitely ways to do some basic zoom with just CSS and very minimal JS modifying the zoom-levels. But then when you take into account data that needs to be inserted for higher resolution at higher zoom levels, it becomes a lot of JS, especially if that data needs to be fetched as the user zooms.
  - thehappypm 6y ago
    You could probably use the :hover: pseudo-class and make it work.
    - brundolf 6y ago
      That would assume a single, harcoded zoom level and position
      - raylus 6y ago
        use js + scroll-wheel observer, profit.
  - eyelidlessness 6y ago
    It can definitely be done with checkbox hacks, adjacent child selectors, transform, and scroll-based interaction to pan.
- mssundaram 6y ago
  For what project/company?
  - bob1029 6y ago
    I am under NDA on specifics. We build automation/workflow solutions for the financial sector.
CrazyDave 6y ago
This is more of an alternative to SVG than an alternative to JS. You could always create charts using plain SVG. Most JS charting libraries just do that for you.
- brundolf 6y ago
  It is also a bit higher-level than working directly with SVG, but a comparison can be made

bob1029 6y ago

100% agree. CSS-only solutions are extremely attractive. Avoiding use of JS entirely is one my team's core values at this stage. We never got rid of 100% of it, but we did get really damn close using Blazor. Only ~180 lines of javascript interop is required for our entire solution last time I checked. This isn't trivial stuff either... We hand-rolled large file upload/download w/ progress, get client rect, get/set cookies, etc.

pcthrowaway 6y ago
Perhaps I'm wrong, but it may be impossible to add zoom capabilities to charts without JS
- brundolf 6y ago
  Hmm. You would probably want to implement the actual zoom as a `transform: scale() translate()` regardless, and you could parameterize it with CSS properties like `transform: scale(var(--zoom-scale)) translate(var(--zoom-x), var(--zoom-y))`. But when it comes to getting those numbers and hooking them into the CSS vars, I don't see a way to do that without JS. Certainly, though, the JS could be just a couple lines if you did things this way (mousemove listener on the container, a bit of math to get the relative x/y, and then either a slider or a scroll listener to determine the scale, and these three numbers are plugged directly into the CSS).
  - pcthrowaway 6y ago
    Yeah, I suppose are definitely ways to do some basic zoom with just CSS and very minimal JS modifying the zoom-levels. But then when you take into account data that needs to be inserted for higher resolution at higher zoom levels, it becomes a lot of JS, especially if that data needs to be fetched as the user zooms.
- thehappypm 6y ago
  You could probably use the :hover: pseudo-class and make it work.
  - brundolf 6y ago
    That would assume a single, harcoded zoom level and position
    - raylus 6y ago
      use js + scroll-wheel observer, profit.
- eyelidlessness 6y ago
  It can definitely be done with checkbox hacks, adjacent child selectors, transform, and scroll-based interaction to pan.
mssundaram 6y ago
For what project/company?
- bob1029 6y ago
  I am under NDA on specifics. We build automation/workflow solutions for the financial sector.

CrazyDave 6y ago

This is more of an alternative to SVG than an alternative to JS. You could always create charts using plain SVG. Most JS charting libraries just do that for you.

brundolf 6y ago
It is also a bit higher-level than working directly with SVG, but a comparison can be made