10 ms·

> I'm not exactly claiming Carmack-level jQuery proficiency, but comments like yours make me wonder (optimistically) whether you've forgotten all of the amazing

by revvx 7y ago

> I'm not exactly claiming Carmack-level jQuery proficiency, but comments like yours make me wonder (optimistically) whether you've forgotten all of the amazingly useful things that jQuery can do. Ajax, selectors and CSS transitions are the Nickelback of creative possibility. It's been several years since I last used jQuery, but what are those other useful things that are hard using Vanilla.js? (Legitimate question, not being sarcastic here)

holoduke 7y ago
Dom regex selectors. jQuery has extremely powerful and smart ways of retrieving elements that way.
- rajangdavis 7y ago
  I feel as though that if you need regex selectors, there is something wrong with the structure of your HTML. Can you tell me which use case you would need to do this? I don't think there is anything wrong with this functionality, but it seems like if you needed it, that your HTML is needlessly complex.
  - DCoder 7y ago
    I'm not the parent poster, and I'm not sure if these are the regex selectors they had in mind, but nonetheless. An example use case: the person writing the HTML ≠ the person writing the selectors. Browser extensions like Stylus, for example. If the HTML author did not bother to add a specific class you need, you have to resort to ugly methods. In fact, this is a scenario I deal with regularly. I have a Chrome extension for video download sites that scans the current page for metadata (title, performers, release date, etc.) and decorates the download links with `download="…"` attributes, so that I can download a file with a properly formatted filename. I manually adapt this extension to every site I need, and quite often I need things like `a[href^=/model/]` † to distinguish links to performers from other links to get their text content. It's clearly not a situation the site authors worry about, and that's fine as long as I have a way to do this myself. † This particular selector can be done without jQuery if you don't care about backcompat. In browser extensions, you usually don't. But it's still an answer to your question about when such selectors are needed. --- Since I'm talking about this, that same browser extension can demonstrate some other complications brought on by React and CSS-in-JS: 1. CSS-in-JS turns class names into unreliable gobbledygook, so extracting metadata means more regex selectors and abominable DOM hierarchy selectors (`section>div>div:first-child>div` because nobody bothers with semantic <h2> or even .title anymore). 2. React makes DOM elements vanish and reappear instead of just hiding them, so that `download="…"` attribute I want to add has to go through a MutationObserver instead of just running once on page load.
    - asoo 7y ago
      `document.querySelectorAll('a[href*="model"]')`
    - peteforde 7y ago
      Your point #2 is one of the main reasons React is far-less creatively flexible than DOM manipulation. I'm surprised that this doesn't come up far more often.
peteforde 7y ago
Great question! I hope that I can give a good answer. When I stopped to think about how to answer, I found myself challenged to compose my thoughts because I have to unpack specific features from the context I use them in; the context frequently informs the way I use various patterns and jQ functions together to achieve an end result. However, there are some jQuery functions that I use all of the time: $.closest() and less frequently, $.parentsUntil() Not just $.siblings() and $.next()/$.prev(), but $.nextAll() and $.nextUntil() $.getJSON() $.toggleClass() Deep extend via $.extend(true, {}, objA, objB) jQuery's custom event triggering is A+ $.delay() $.end() Consider this a solid starting point for further exploration.
- revvx 7y ago
  Great answer likewise! Some of those are really cool indeed! Deep copy/deep extend is a must in every programming language ever. I have no idea why 90% of the environments I ever programmed with make it so damn hard to deep copy data. In javascript it is kind of comical. [1] Traversal utilities like closest/parentsUntil/nextAll/nextUntil is something I miss in most standard libraries. No for DOM manipulation, but for traversing lists and such. Until/while idioms are par for course in imperative contexts but I miss them in functional programming contexts. Not that they're that hard to implement with a couple lines :) Delay is further proof that the jQuery API design is nothing short of amazing. I wish more APIs were like that. The only thing that comes close to me, albeit in a completely different domain, is LINQ. I had no idea about End. That's point-free programming black magic. [2] Love it. [1]: https://stackoverflow.com/a/5344074 https://stackoverflow.com/a/5344074 [2]: https://en.wikipedia.org/wiki/Tacit_programming https://en.wikipedia.org/wiki/Tacit_programming
  - peteforde 7y ago
    Building on what you said, I would love to see more powerful node traversal functions make their way into every environment I work in. It's something worth making a push on. Moving around a tree can be a joy, and it unlocks many solution domains that might not cross your mind if you're not thinking about them. One traversal mechanism I'd love to see but I've never seen implemented coherently is... given my relationship to ancestor X, iterate through all my antecedent peers under x. This would make processing some kinds of structured data far simpler. End really is one of those hats-off bits of magic, and it's one of the first things that come to mind when any of the frothing haters pen statements that preclude anything good coming from method chaining. It'd be even better if ES supported Ruby-style send syntax eg. array.map(&:to_s). And yes, I put it last because I was going for clever. You know what drives me even more crazy than ES' lack of deep copy/extend? How is it possible that ({k: 1} === {k: 1}) is false? I find this to be maddening. Thank goodness for lodash.

by revvx 7y ago

holoduke 7y ago

Dom regex selectors. jQuery has extremely powerful and smart ways of retrieving elements that way.

rajangdavis 7y ago
I feel as though that if you need regex selectors, there is something wrong with the structure of your HTML. Can you tell me which use case you would need to do this? I don't think there is anything wrong with this functionality, but it seems like if you needed it, that your HTML is needlessly complex.
- DCoder 7y ago
  I'm not the parent poster, and I'm not sure if these are the regex selectors they had in mind, but nonetheless. An example use case: the person writing the HTML ≠ the person writing the selectors. Browser extensions like Stylus, for example. If the HTML author did not bother to add a specific class you need, you have to resort to ugly methods. In fact, this is a scenario I deal with regularly. I have a Chrome extension for video download sites that scans the current page for metadata (title, performers, release date, etc.) and decorates the download links with `download="…"` attributes, so that I can download a file with a properly formatted filename. I manually adapt this extension to every site I need, and quite often I need things like `a[href^=/model/]` † to distinguish links to performers from other links to get their text content. It's clearly not a situation the site authors worry about, and that's fine as long as I have a way to do this myself. † This particular selector can be done without jQuery if you don't care about backcompat. In browser extensions, you usually don't. But it's still an answer to your question about when such selectors are needed. --- Since I'm talking about this, that same browser extension can demonstrate some other complications brought on by React and CSS-in-JS: 1. CSS-in-JS turns class names into unreliable gobbledygook, so extracting metadata means more regex selectors and abominable DOM hierarchy selectors (`section>div>div:first-child>div` because nobody bothers with semantic <h2> or even .title anymore). 2. React makes DOM elements vanish and reappear instead of just hiding them, so that `download="…"` attribute I want to add has to go through a MutationObserver instead of just running once on page load.
  - asoo 7y ago
    `document.querySelectorAll('a[href*="model"]')`
  - peteforde 7y ago
    Your point #2 is one of the main reasons React is far-less creatively flexible than DOM manipulation. I'm surprised that this doesn't come up far more often.

peteforde 7y ago

Great question! I hope that I can give a good answer. When I stopped to think about how to answer, I found myself challenged to compose my thoughts because I have to unpack specific features from the context I use them in; the context frequently informs the way I use various patterns and jQ functions together to achieve an end result. However, there are some jQuery functions that I use all of the time: $.closest() and less frequently, $.parentsUntil() Not just $.siblings() and $.next()/$.prev(), but $.nextAll() and $.nextUntil() $.getJSON() $.toggleClass() Deep extend via $.extend(true, {}, objA, objB) jQuery's custom event triggering is A+ $.delay() $.end() Consider this a solid starting point for further exploration.

revvx 7y ago
Great answer likewise! Some of those are really cool indeed! Deep copy/deep extend is a must in every programming language ever. I have no idea why 90% of the environments I ever programmed with make it so damn hard to deep copy data. In javascript it is kind of comical. [1] Traversal utilities like closest/parentsUntil/nextAll/nextUntil is something I miss in most standard libraries. No for DOM manipulation, but for traversing lists and such. Until/while idioms are par for course in imperative contexts but I miss them in functional programming contexts. Not that they're that hard to implement with a couple lines :) Delay is further proof that the jQuery API design is nothing short of amazing. I wish more APIs were like that. The only thing that comes close to me, albeit in a completely different domain, is LINQ. I had no idea about End. That's point-free programming black magic. [2] Love it. [1]: https://stackoverflow.com/a/5344074 https://stackoverflow.com/a/5344074 [2]: https://en.wikipedia.org/wiki/Tacit_programming https://en.wikipedia.org/wiki/Tacit_programming
- peteforde 7y ago
  Building on what you said, I would love to see more powerful node traversal functions make their way into every environment I work in. It's something worth making a push on. Moving around a tree can be a joy, and it unlocks many solution domains that might not cross your mind if you're not thinking about them. One traversal mechanism I'd love to see but I've never seen implemented coherently is... given my relationship to ancestor X, iterate through all my antecedent peers under x. This would make processing some kinds of structured data far simpler. End really is one of those hats-off bits of magic, and it's one of the first things that come to mind when any of the frothing haters pen statements that preclude anything good coming from method chaining. It'd be even better if ES supported Ruby-style send syntax eg. array.map(&:to_s). And yes, I put it last because I was going for clever. You know what drives me even more crazy than ES' lack of deep copy/extend? How is it possible that ({k: 1} === {k: 1}) is false? I find this to be maddening. Thank goodness for lodash.