4 ms·

The ugly legacy of ColdFusion lives on in tools like Vue and AlpineJS. If you like working with HTML, don't use tools that introduce proprietary syntax to inje

The ugly legacy of ColdFusion lives on in tools like Vue and AlpineJS. If you like working with HTML, don't use tools that introduce proprietary syntax to inject janky control structure and looping logic. Instead, consider StimulusJS, which allows you to add behaviors to elements in your DOM. It's the sharpest tool you're not using. Give it a shot before smashing that down arrow.

alephnan 3y ago
> Instead, consider StimulusJS, which allows you to add behaviors to elements in your DOM. It's the sharpest tool you're not using. Give it a shot before smashing that down arrow I did. And that’s exactly why I’m smashing that down arrow. It’s highly subjective whether it’s the sharpest tool for the job, because for me it’s not.
bdcravens 3y ago
Stimulus is great, but a technology that really gives me the vibe of working with CFML is HTMX. I think the "ugly legacy" is a bit of a near-sighted perspective. Today CF's reputation seems limited to being a spaghetti-riddle mix of HTML with logic, but for the era it was built in, it was an amazing language focused on productivity.
- peteforde 3y ago
  I agree that HTMX is in this camp. My primary frustration with HTMX - even more than the CF-inspired syntax - is that it's fundamentally a client-side solution. Better than nothing, but if you want to build the next Figma, you need to look towards a toolset where the single source of truth is on the server. StimulusReflex on Rails or Phoenix LiveView on Elixir are a lot closer to a full-stack solution. Obviously, all of this is highly subjective. When ColdFusion came out, I was primarily working in ASP and its OSS clone, PHP. You'll have to trust me when I say that my opinion on the ugly was formed at the time, and hasn't changed since. It seems as though folks either like interpolated templates (ASP, PHP, ERb), components (React and etc) or macros (CF, Alpine, HTMX). It could be that one's first true love endures.
  - listenallyall 3y ago
    Such a weird comment... nobody would ever suggest using HTMX to build a "desktop app" running in the browser like Figma. But since 99% of projects are nothing like Figma, it's typically not an issue. But HTMX practically requires server-side state. The whole point is to make it very easy to frequently update, and receive new content from, a server (HATEOAS), and NOT to maintain state client-side. If you're building a site "where the single source of truth is on the server" then HTMX fits perfectly.
    - peteforde 3y ago
      The difference I'm referring to is "requires" vs "ships with". As to whether a requirement is typical or not, I am frustrated by local maximum thinking. If your tooling cannot build an ambitious project, then you're not going to build an ambitious project. I actively try to spend my finite time on ambitious projects in general. You don't need LiveView or StimulusReflex to build a landing page, that's true. But if you're building an ambitious real-time web app, the range of complexity where it makes sense to use HTMX instead of a full-stack solution gets smaller very quickly.
      - listenallyall 3y ago
        I think you're either misguided, or just a hater. HTMX can accommodate ambitious, real-time web apps. Its entire purpose is to make interacting with a server (that single source of truth) easy, fast and transparent, as if doing so was simply built in to the HTML spec. What it can't do, is calculate the shape of a bezier curve, and that's why it's not a good choice for building an app like Figma.
        peteforde 3y ago
        I definitely do not like HTMX, that much is true. Does that make me a hater? I'm reading what you're saying, and it's very clear that you do not understand what frameworks like StimulusReflex and LiveView do for you. There is no fair comparison between HTMX and frameworks that ship with a server-side infrastructure for maintaining a long-lived, persistent connection. I won't mock you if you set aside your assumptions, investigate and have a moment of illumination.
troupo 3y ago
> don't use tools that introduce proprietary syntax to inject janky control structure and looping logic And StimulusJS doesn't? <div data-controller="modal" data-action="keydown.esc->modal#close" tabindex="0"> </div> <div data-controller="content-loader" data-content-loader-url-value="/messages.html" data-content-loader-refresh-interval-value="5000"></div> Zealots cannot recognize a custom nonstandard poorly specified DSL even if stares them right in the face
- peteforde 3y ago
  Wait, do you mean this custom nonstandard poorly specified DSL? https://html.spec.whatwg.org/multipage/dom.html#attr-data- https://html.spec.whatwg.org/multipage/dom.html#attr-data-* What you're showing above is 100% standards HTML 5. Data attributes have been a thing since 2008 or perhaps slightly earlier. You might not love the look of it, but the markup above is something that your browser understands without interpretation. You can turn off JS and it will render without any issue whatsoever. https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data- https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att...* This is very different from tooling that uses alternative, non-HTML syntax. Our browsers might be written to be absurdly tolerant of broken markup, but that doesn't mean that Vue/HTMX/Alpine/CFML templates aren't proprietary.
  - arcanemachiner 3y ago
    FWIW I'm pretty sure Alpine can be configured to require `data-` as a prefix for its tags, e.g. `data-x-click="handleClick"`.
  - troupo 3y ago
    > What you're showing above is 100% standards HTML 5. Data attributes have been a thing since 2008 or perhaps slightly earlier. So, which part of these is standardized and non-custom: keydown.esc->modal#close content-loader-url-value content-loader-refresh-interval-value > This is very different from tooling that uses alternative, non-HTML syntax. Ah yes. Pure HTML syntax of `keydown.esc->modal#close`

alephnan 3y ago

> Instead, consider StimulusJS, which allows you to add behaviors to elements in your DOM. It's the sharpest tool you're not using. Give it a shot before smashing that down arrow I did. And that’s exactly why I’m smashing that down arrow. It’s highly subjective whether it’s the sharpest tool for the job, because for me it’s not.

bdcravens 3y ago

Stimulus is great, but a technology that really gives me the vibe of working with CFML is HTMX. I think the "ugly legacy" is a bit of a near-sighted perspective. Today CF's reputation seems limited to being a spaghetti-riddle mix of HTML with logic, but for the era it was built in, it was an amazing language focused on productivity.

peteforde 3y ago
I agree that HTMX is in this camp. My primary frustration with HTMX - even more than the CF-inspired syntax - is that it's fundamentally a client-side solution. Better than nothing, but if you want to build the next Figma, you need to look towards a toolset where the single source of truth is on the server. StimulusReflex on Rails or Phoenix LiveView on Elixir are a lot closer to a full-stack solution. Obviously, all of this is highly subjective. When ColdFusion came out, I was primarily working in ASP and its OSS clone, PHP. You'll have to trust me when I say that my opinion on the ugly was formed at the time, and hasn't changed since. It seems as though folks either like interpolated templates (ASP, PHP, ERb), components (React and etc) or macros (CF, Alpine, HTMX). It could be that one's first true love endures.
- listenallyall 3y ago
  Such a weird comment... nobody would ever suggest using HTMX to build a "desktop app" running in the browser like Figma. But since 99% of projects are nothing like Figma, it's typically not an issue. But HTMX practically requires server-side state. The whole point is to make it very easy to frequently update, and receive new content from, a server (HATEOAS), and NOT to maintain state client-side. If you're building a site "where the single source of truth is on the server" then HTMX fits perfectly.
  - peteforde 3y ago
    The difference I'm referring to is "requires" vs "ships with". As to whether a requirement is typical or not, I am frustrated by local maximum thinking. If your tooling cannot build an ambitious project, then you're not going to build an ambitious project. I actively try to spend my finite time on ambitious projects in general. You don't need LiveView or StimulusReflex to build a landing page, that's true. But if you're building an ambitious real-time web app, the range of complexity where it makes sense to use HTMX instead of a full-stack solution gets smaller very quickly.
    - listenallyall 3y ago
      I think you're either misguided, or just a hater. HTMX can accommodate ambitious, real-time web apps. Its entire purpose is to make interacting with a server (that single source of truth) easy, fast and transparent, as if doing so was simply built in to the HTML spec. What it can't do, is calculate the shape of a bezier curve, and that's why it's not a good choice for building an app like Figma.
      - peteforde 3y ago
        I definitely do not like HTMX, that much is true. Does that make me a hater? I'm reading what you're saying, and it's very clear that you do not understand what frameworks like StimulusReflex and LiveView do for you. There is no fair comparison between HTMX and frameworks that ship with a server-side infrastructure for maintaining a long-lived, persistent connection. I won't mock you if you set aside your assumptions, investigate and have a moment of illumination.

troupo 3y ago

> don't use tools that introduce proprietary syntax to inject janky control structure and looping logic And StimulusJS doesn't? <div data-controller="modal" data-action="keydown.esc->modal#close" tabindex="0"> </div> <div data-controller="content-loader" data-content-loader-url-value="/messages.html" data-content-loader-refresh-interval-value="5000"></div> Zealots cannot recognize a custom nonstandard poorly specified DSL even if stares them right in the face

peteforde 3y ago
Wait, do you mean this custom nonstandard poorly specified DSL? https://html.spec.whatwg.org/multipage/dom.html#attr-data- https://html.spec.whatwg.org/multipage/dom.html#attr-data-* What you're showing above is 100% standards HTML 5. Data attributes have been a thing since 2008 or perhaps slightly earlier. You might not love the look of it, but the markup above is something that your browser understands without interpretation. You can turn off JS and it will render without any issue whatsoever. https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data- https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att...* This is very different from tooling that uses alternative, non-HTML syntax. Our browsers might be written to be absurdly tolerant of broken markup, but that doesn't mean that Vue/HTMX/Alpine/CFML templates aren't proprietary.
- arcanemachiner 3y ago
  FWIW I'm pretty sure Alpine can be configured to require `data-` as a prefix for its tags, e.g. `data-x-click="handleClick"`.
- troupo 3y ago
  > What you're showing above is 100% standards HTML 5. Data attributes have been a thing since 2008 or perhaps slightly earlier. So, which part of these is standardized and non-custom: keydown.esc->modal#close content-loader-url-value content-loader-refresh-interval-value > This is very different from tooling that uses alternative, non-HTML syntax. Ah yes. Pure HTML syntax of `keydown.esc->modal#close`