News for hackers. Stuff that matters.
Re:The Future of Htmx by The_Colonel on Monday January 06, 2025 @03:20PM (#42615218)
That website is (inadverently) one of the most effective marketing campaigns for jQuery. Some of the vanilla JS examples are atrocious.

What it doesn't show is that vanilla JS is not chainable (jQuery is).

Re:The Future of Htmx by Bengalilol on Monday January 06, 2025 @04:30PM (#42616100)
What do you mean ?

  let result = "   hello jQuery   "
  .trim()
  .replace("jQuery", "javascript")
  .toUpperCase();
  console.log(result);
map, filter, ...

  let numbers = [1, 2, 3, 4, 5];
  let result = numbers
  .filter(num => num % 2 === 0)
  .map(num => num * 2)
  .reduce((sum, num) => sum + num, 0);
  console.log(result); // 12
Simple string

  let myStr = "This is a wonderful day.";
  let reversed = myStr
  .split("")
  .reverse()
  .join("");
  console.log(reversed); // ".yad lufrednow a si sihT"
  
DOM elements

  document.querySelector('#element')
  .classList.add('active')
  .classList.remove('hidden');
Using a class

  class Chainable {
    constructor(value) {
      this.value = value;
    }

    add(num) {
      this.value += num;
      return this; // make it chainable
    }

    multiply(num) {
      this.value *= num;
      return this;
    }

    getValue() {
      return this.value;
    }
  }
  let result = new Chainable(5)
  .add(3)
  .multiply(2)
  .getValue();
  console.log(result); // 16
Re:The Future of Htmx by deniz-a on Monday January 06, 2025 @07:50PM (#42617970)
Re:The Future of Htmx by Bengalilol on Tuesday January 07, 2025 @03:49AM (#42620597)
Oops. You are right, I beg your pardon. Here's a working example.

HTML

  <span class="a b c"></span>
JS

  function getClassList(el) {
    let ele = document.querySelector(el);
    let list = ele.classList;

    return {
      add: function (c) {
        list.add(c);
        return this;
      },
      toggle: function (c) {
        list.toggle(c);
        return this;
      },
      remove: function (c) {
        list.remove(c);
        return this;
      },
    }
  }
  getClassList('span').remove('b').add('e').toggle('a');
  console.log(document.querySelector('span').classList);
Re:The Future of Htmx by hu3 on Tuesday January 07, 2025 @05:35AM (#42621172)
Congrats you're reinventing jQuery. With a worse and more limited API.

Plus jQuery is one of the most battle tested libraries in the world.

That "ops" you made with classlist, you're bound to repeat these mistakes ad infinitum. And they can bite in subtle ways only your users might experience.

People rarely report broken websites unless they really need to.

Re:The Future of Htmx by Bengalilol on Wednesday January 08, 2025 @03:22AM (#42632189)
I am truly interested in your arguments on why using chainable DOM Elements leads to less buggy websites.
Re:The Future of Htmx by hu3 on Wednesday January 08, 2025 @08:20AM (#42633900)
You're the only one making that claim.

Plus using a homemade alpha version of jQuery written by one dev leads to more bugs, not less.

Re:The Future of Htmx by Bengalilol on Wednesday January 08, 2025 @08:37AM (#42634059)
> That "ops" you made with classlist, you're bound to repeat these mistakes ad infinitum. And they can bite in subtle ways only your users might experience. People rarely report broken websites unless they really need to.

I think those two sentences are out of bounds, but I somehow get you. Yet I don't get the 'broken website' remark (took it condescending, or is it from experience?).

Mainly, I was replying to the affirmation that javascript is not chainable which is (imho) an indication of how one could get disconnected to the underlying lang by simply relying on libs such as jQuery (and I am thinking the same about htmx). Thanks for your reply!

Re:The Future of Htmx by The_Colonel on Tuesday January 07, 2025 @06:59AM (#42621534)
Thanks again for a nice demonstration of having to reinvent the wheel to produce a poor-man's buggy reimplementation of jQuery.