4 ms·

These days I’ve moved to native JS, but hot damn the $() selector interface was elegant and minimal vs document.getElement[s]by[attribute)]. While presumably j

These days I’ve moved to native JS, but hot damn the $() selector interface was elegant and minimal vs document.getElement[s]by[attribute)]. While presumably jquery is slower than native selectors, maybe that could be pre-computed away.

egeozcan 9mo ago
jQuery but gets compiled out like svelte... Not a bad idea at all.
- efskap 9mo ago
  I hate to sound like a webdev stereotype but surely the parsing step of querySelector, which is cached, is not slow enough to warrant maintaining such a build step.
  - egeozcan 9mo ago
    Some things you build not because they are necessary, but because you can.
jraph 9mo ago
In case you missed them: check out querySelector and querySelectorAll. They are closer to what the jQuery selector system does, and I think they were inspired by it. If the verbosity bothers you, you can always define an utility function with a short name (although I'm not personally a fan of this kind of things). https://developer.mozilla.org/docs/Web/API/Document/querySelector https://developer.mozilla.org/docs/Web/API/Document/querySel... https://developer.mozilla.org/docs/Web/API/Document/querySelectorAll https://developer.mozilla.org/docs/Web/API/Document/querySel... https://developer.mozilla.org/docs/Web/API/Element/querySelector https://developer.mozilla.org/docs/Web/API/Element/querySele... https://developer.mozilla.org/docs/Web/API/Element/querySelectorAll https://developer.mozilla.org/docs/Web/API/Element/querySele...
- hyperhello 9mo ago
  body.qsa('.class').forEach(e=>): Yes, add qs() and Array.from(qsa()) aliases to the Node prototype, and .body to the window, and you’ve saved yourself thousands of keystrokes. Then you can get creative with Proxy if you want to, but I never saw the need.
  - jraph 9mo ago
    Please don't mess with native prototypes though.
    - Sammi 9mo ago
      Agree if you've a library developer. If you're an app or website developer then it's your project. Everyone else should steer clear of adding to native prototypes, just so they are clean for the end user.
      - jraph 9mo ago
        If you are an app or website developer, at least you won't break other's systems. But you might still break stuff in your own projects. Imagine you extend a native prototype with a method, and later the native prototype starts having a method with the same name. Newer libraries start using that new standard method. You upgrade the libraries your website depends on, or add a dependency, and this new code happens to depend on that native prototype. Only you replaced it with your custom method, and that method likely doesn't have the exact same behavior. You broke that new code and fixing this might not be trivial because uses of your custom method are sprinkled everywhere in your code. It only works if you ever works on projects that have zero dependencies, or dependencies you never update. Or you could spare yourself the troubles and define a method that takes the node in parameter. It's also a question of forming good habits: you could be working on your projects now, forming a habit of extending prototypes, but will you remember not to do this the day you write a library? By the way, how can you be sure you won't move some of your app code to a library because you like your utility functions and would like to reuse them in another project of yours? And why not open source that shared code, so you can just install it with NPM? Bam, that stuff is a library now.
adzm 9mo ago
The $ (and $$) selector functions live on in chrome/chromium devtools!
- deleted 9mo ago
  [deleted]
Sammi 9mo ago
Very simple jquery implementation with all the easy apis: (function (global) { function $(selector, context = document) { let elements = []; if (typeof selector === "string") { elements = Array.from(context.querySelectorAll(selector)); } else if (selector instanceof Element || selector === window || selector === document) { elements = [selector]; } else if (selector instanceof NodeList || Array.isArray(selector)) { elements = Array.from(selector); } else if (typeof selector === "function") { // DOM ready if (document.readyState !== "loading") { selector(); } else { document.addEventListener("DOMContentLoaded", selector); } return; } return new Dollar(elements); } class Dollar { constructor(elements) { this.elements = elements; } // Iterate each(callback) { this.elements.forEach((el, i) => callback.call(el, el, i)); return this; } // Events on(event, handler, options) { return this.each(el => el.addEventListener(event, handler, options)); } off(event, handler, options) { return this.each(el => el.removeEventListener(event, handler, options)); } // Classes addClass(className) { return this.each(el => el.classList.add(...className.split(" "))); } removeClass(className) { return this.each(el => el.classList.remove(...className.split(" "))); } toggleClass(className) { return this.each(el => el.classList.toggle(className)); } hasClass(className) { return this.elements[0]?.classList.contains(className) ?? false; } // Attributes attr(name, value) { if (value === undefined) { return this.elements[0]?.getAttribute(name); } return this.each(el => el.setAttribute(name, value)); } removeAttr(name) { return this.each(el => el.removeAttribute(name)); } // Content html(value) { if (value === undefined) { return this.elements[0]?.innerHTML; } return this.each(el => (el.innerHTML = value)); } text(value) { if (value === undefined) { return this.elements[0]?.textContent; } return this.each(el => (el.textContent = value)); } // DOM manipulation append(content) { return this.each(el => { if (content instanceof Element) { el.appendChild(content.cloneNode(true)); } else { el.insertAdjacentHTML("beforeend", content); } }); } remove() { return this.each(el => el.remove()); } // Utilities get(index = 0) { return this.elements[index]; } first() { return new Dollar(this.elements.slice(0, 1)); } last() { return new Dollar(this.elements.slice(-1)); } } global.$ = $; })(window);
itsHel 9mo ago
const $ = document.querySelector.bind(document); const $$ = document.querySelectorAll.bind(document);
Zardoz84 9mo ago
const $ = document.querySelectorAll
- recursive 9mo ago
  Probably have to bind the this value.
- Tistron 9mo ago
  I usually do const $ = (s, e = document) => e.querySelector(s) and a similar one for $$.

egeozcan 9mo ago

jQuery but gets compiled out like svelte... Not a bad idea at all.

efskap 9mo ago
I hate to sound like a webdev stereotype but surely the parsing step of querySelector, which is cached, is not slow enough to warrant maintaining such a build step.
- egeozcan 9mo ago
  Some things you build not because they are necessary, but because you can.

jraph 9mo ago

In case you missed them: check out querySelector and querySelectorAll. They are closer to what the jQuery selector system does, and I think they were inspired by it. If the verbosity bothers you, you can always define an utility function with a short name (although I'm not personally a fan of this kind of things). https://developer.mozilla.org/docs/Web/API/Document/querySelector https://developer.mozilla.org/docs/Web/API/Document/querySel... https://developer.mozilla.org/docs/Web/API/Document/querySelectorAll https://developer.mozilla.org/docs/Web/API/Document/querySel... https://developer.mozilla.org/docs/Web/API/Element/querySelector https://developer.mozilla.org/docs/Web/API/Element/querySele... https://developer.mozilla.org/docs/Web/API/Element/querySelectorAll https://developer.mozilla.org/docs/Web/API/Element/querySele...

hyperhello 9mo ago
body.qsa('.class').forEach(e=>): Yes, add qs() and Array.from(qsa()) aliases to the Node prototype, and .body to the window, and you’ve saved yourself thousands of keystrokes. Then you can get creative with Proxy if you want to, but I never saw the need.
- jraph 9mo ago
  Please don't mess with native prototypes though.
  - Sammi 9mo ago
    Agree if you've a library developer. If you're an app or website developer then it's your project. Everyone else should steer clear of adding to native prototypes, just so they are clean for the end user.
    - jraph 9mo ago
      If you are an app or website developer, at least you won't break other's systems. But you might still break stuff in your own projects. Imagine you extend a native prototype with a method, and later the native prototype starts having a method with the same name. Newer libraries start using that new standard method. You upgrade the libraries your website depends on, or add a dependency, and this new code happens to depend on that native prototype. Only you replaced it with your custom method, and that method likely doesn't have the exact same behavior. You broke that new code and fixing this might not be trivial because uses of your custom method are sprinkled everywhere in your code. It only works if you ever works on projects that have zero dependencies, or dependencies you never update. Or you could spare yourself the troubles and define a method that takes the node in parameter. It's also a question of forming good habits: you could be working on your projects now, forming a habit of extending prototypes, but will you remember not to do this the day you write a library? By the way, how can you be sure you won't move some of your app code to a library because you like your utility functions and would like to reuse them in another project of yours? And why not open source that shared code, so you can just install it with NPM? Bam, that stuff is a library now.

adzm 9mo ago

The $ (and $$) selector functions live on in chrome/chromium devtools!

deleted 9mo ago
[deleted]

Sammi 9mo ago

Very simple jquery implementation with all the easy apis: (function (global) { function $(selector, context = document) { let elements = []; if (typeof selector === "string") { elements = Array.from(context.querySelectorAll(selector)); } else if (selector instanceof Element || selector === window || selector === document) { elements = [selector]; } else if (selector instanceof NodeList || Array.isArray(selector)) { elements = Array.from(selector); } else if (typeof selector === "function") { // DOM ready if (document.readyState !== "loading") { selector(); } else { document.addEventListener("DOMContentLoaded", selector); } return; } return new Dollar(elements); } class Dollar { constructor(elements) { this.elements = elements; } // Iterate each(callback) { this.elements.forEach((el, i) => callback.call(el, el, i)); return this; } // Events on(event, handler, options) { return this.each(el => el.addEventListener(event, handler, options)); } off(event, handler, options) { return this.each(el => el.removeEventListener(event, handler, options)); } // Classes addClass(className) { return this.each(el => el.classList.add(...className.split(" "))); } removeClass(className) { return this.each(el => el.classList.remove(...className.split(" "))); } toggleClass(className) { return this.each(el => el.classList.toggle(className)); } hasClass(className) { return this.elements[0]?.classList.contains(className) ?? false; } // Attributes attr(name, value) { if (value === undefined) { return this.elements[0]?.getAttribute(name); } return this.each(el => el.setAttribute(name, value)); } removeAttr(name) { return this.each(el => el.removeAttribute(name)); } // Content html(value) { if (value === undefined) { return this.elements[0]?.innerHTML; } return this.each(el => (el.innerHTML = value)); } text(value) { if (value === undefined) { return this.elements[0]?.textContent; } return this.each(el => (el.textContent = value)); } // DOM manipulation append(content) { return this.each(el => { if (content instanceof Element) { el.appendChild(content.cloneNode(true)); } else { el.insertAdjacentHTML("beforeend", content); } }); } remove() { return this.each(el => el.remove()); } // Utilities get(index = 0) { return this.elements[index]; } first() { return new Dollar(this.elements.slice(0, 1)); } last() { return new Dollar(this.elements.slice(-1)); } } global.$ = $; })(window);

itsHel 9mo ago

const $ = document.querySelector.bind(document); const $$ = document.querySelectorAll.bind(document);

Zardoz84 9mo ago

const $ = document.querySelectorAll

recursive 9mo ago
Probably have to bind the this value.
Tistron 9mo ago
I usually do const $ = (s, e = document) => e.querySelector(s) and a similar one for $$.