5 ms·

It is not about the possibility. We can achieve anything with native browser's APIs without custom/polyfill layers these days. Point is: $('#somediv').removeC

It is not about the possibility. We can achieve anything with native browser's APIs without custom/polyfill layers these days. Point is: $('#somediv').removeClass('class-to-be-removed') is so much better than document.querySelector("#somediv").className = document.querySelector("#somediv").className.replace(/\class-to-be-removed\b/,'');

masklinn 8y ago
Broadly speaking I agree with you, but even IE11 supports classList so the "native" version of your bit is really document.getElementById('somediv').classList.remove('class-to-be-removed') Where the native APIs fall down is that 1. they tend not to be chainable/expression-oriented, you can't just `classList.add('foo').remove('bar').toggle('qux')` because the first two methods return `undefined` and the last one a boolean 2. they don't support set-oriented operations at all, it's a chore of manual iterations
- lewisjoe 8y ago
  Spot on! Those are probably the two most important blunt-sides of native APIs. The last thing I'd want to see is a codebase going from 40 lines of code to 400 lines, because "hey, we removed jQuery and writing verbose js is the new cool these days" I'd be happy if there's a jquery like polyfill library for DOM manipulation, but again - why not just custom jQuery builds and sizzle.js instead of re-inventing jQuery? P.S I'm not sure IE11 supports classList. Source: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList https://developer.mozilla.org/en-US/docs/Web/API/Element/cla...
  - megous 8y ago
    IE11 supports classList just fine, except for an argument to toggle. Nothing a little DOMTokenList.prototype change can't fix. > The last thing I'd want to see is a codebase going from 40 lines of code to 400 lines, because "hey, we removed jQuery and writing verbose js is the new cool these days" That will only happen if you're incompetent and will not write a few simple helper functions. And probably not even then. Plain DOM API is not that verbose over jQuery. Anyway, just look at what subset of jQuery you use the most and write helpers for that. Your codebase is already grown by 1000s of lines by using jQuery, so you have quite a head start sizewise if you drop jQuery.
  - masklinn 8y ago
    > P.S I'm not sure IE11 supports classList. Source: https://developer.mozilla.org/en-US/docs/Web/API/Element/cla.. https://developer.mozilla.org/en-US/docs/Web/API/Element/cla.... It provides basic support for classlist, add/remove/toggle exist and work as you'd expect. It does not have complete supports of all bits of the API: * it doesn't support the second argument to toggle so you have to use a conditional/ternary with add/remove * it doesn't support passing multiple classes to add/remove * it doesn't support replace
- megous 8y ago
  Re 2.: el.querySelectorAll('abc').map(el => ...)... You may need to copy some methods you'd like to use from Array.prototype to NodeList.prototype though, or use .values() from NodeList everywhere.
  - mercer 8y ago
    I usually add: const qs = (selector) => [...document.querySelectorAll(selector)] so that I can tread my results as a normal array.
  - masklinn 8y ago
    That's manual iteration even if it's done via HoF. Many of jQuery's operations implicitly apply to the entire nodeset regardless of the nodeset's arity.
    - girvo 8y ago
      Fair point, though for dynamic and large DOMs I dislike having to go and check whether I’m touching more than one element sometimes — not always though, sometimes it great to just $(‘#bleh’).hide() or what have you! Depends really
      - masklinn 8y ago
        That's completely fair, and there are cases where unknowingly selecting and applying complex operations to many nodes is problematic but I think it's a great baseline/default regardless.
- swah 8y ago
  Another tweet says that removing chaining improved readability... https://twitter.com/mislav/status/1022409388013834240 https://twitter.com/mislav/status/1022409388013834240 But this I'd say is very close to BS territory..
  - lewisjoe 8y ago
    It was me, who asked him the question. The answer though isn't satisfactory enough. But again 140 chars is not a good bandwidth for meaningful conversations. The claim is interesting, but isn't evident enough. For example, how exactly is var element = document.querySelectorAll('.container') element.style.paddingTop = "50px"; element.className = element.className + 'header'; communicating intent better than: $('.container').css('padding-top','50').addClass('header')
    - mercer 8y ago
      While I do agree in your comparison the second version looks better. At the same time, and this might be a tad too subjective to have much merit, it feels out of place to me. Instead, I'd use one of the various approaches where I can create a style = {} object and then apply it to the element, which would just fit better within the rest of my javascript. (which particular approach to use, .cssText, looping through props, or Object.assign, I'm not sure, but my point is any approach that applies a POJO to the node instead of chaining strikes me as more idiomatic. this is not a hill I'd die on though...)
    - wvenable 8y ago
      I wonder how many people will notice that your non-jQuery example actually contains a subtle bug.
pawelk 8y ago
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList https://developer.mozilla.org/en-US/docs/Web/API/Element/cla... ;)
- lewisjoe 8y ago
  [Same Link] You can see how poor the browser support is and how big the polyfill is. There's a chance that the polyfill could be bigger than jQuery's removeClass/addClass implementations.

masklinn 8y ago

Broadly speaking I agree with you, but even IE11 supports classList so the "native" version of your bit is really document.getElementById('somediv').classList.remove('class-to-be-removed') Where the native APIs fall down is that 1. they tend not to be chainable/expression-oriented, you can't just `classList.add('foo').remove('bar').toggle('qux')` because the first two methods return `undefined` and the last one a boolean 2. they don't support set-oriented operations at all, it's a chore of manual iterations

lewisjoe 8y ago
Spot on! Those are probably the two most important blunt-sides of native APIs. The last thing I'd want to see is a codebase going from 40 lines of code to 400 lines, because "hey, we removed jQuery and writing verbose js is the new cool these days" I'd be happy if there's a jquery like polyfill library for DOM manipulation, but again - why not just custom jQuery builds and sizzle.js instead of re-inventing jQuery? P.S I'm not sure IE11 supports classList. Source: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList https://developer.mozilla.org/en-US/docs/Web/API/Element/cla...
- megous 8y ago
  IE11 supports classList just fine, except for an argument to toggle. Nothing a little DOMTokenList.prototype change can't fix. > The last thing I'd want to see is a codebase going from 40 lines of code to 400 lines, because "hey, we removed jQuery and writing verbose js is the new cool these days" That will only happen if you're incompetent and will not write a few simple helper functions. And probably not even then. Plain DOM API is not that verbose over jQuery. Anyway, just look at what subset of jQuery you use the most and write helpers for that. Your codebase is already grown by 1000s of lines by using jQuery, so you have quite a head start sizewise if you drop jQuery.
- masklinn 8y ago
  > P.S I'm not sure IE11 supports classList. Source: https://developer.mozilla.org/en-US/docs/Web/API/Element/cla.. https://developer.mozilla.org/en-US/docs/Web/API/Element/cla.... It provides basic support for classlist, add/remove/toggle exist and work as you'd expect. It does not have complete supports of all bits of the API: * it doesn't support the second argument to toggle so you have to use a conditional/ternary with add/remove * it doesn't support passing multiple classes to add/remove * it doesn't support replace
megous 8y ago
Re 2.: el.querySelectorAll('abc').map(el => ...)... You may need to copy some methods you'd like to use from Array.prototype to NodeList.prototype though, or use .values() from NodeList everywhere.
- mercer 8y ago
  I usually add: const qs = (selector) => [...document.querySelectorAll(selector)] so that I can tread my results as a normal array.
- masklinn 8y ago
  That's manual iteration even if it's done via HoF. Many of jQuery's operations implicitly apply to the entire nodeset regardless of the nodeset's arity.
  - girvo 8y ago
    Fair point, though for dynamic and large DOMs I dislike having to go and check whether I’m touching more than one element sometimes — not always though, sometimes it great to just $(‘#bleh’).hide() or what have you! Depends really
    - masklinn 8y ago
      That's completely fair, and there are cases where unknowingly selecting and applying complex operations to many nodes is problematic but I think it's a great baseline/default regardless.
swah 8y ago
Another tweet says that removing chaining improved readability... https://twitter.com/mislav/status/1022409388013834240 https://twitter.com/mislav/status/1022409388013834240 But this I'd say is very close to BS territory..
- lewisjoe 8y ago
  It was me, who asked him the question. The answer though isn't satisfactory enough. But again 140 chars is not a good bandwidth for meaningful conversations. The claim is interesting, but isn't evident enough. For example, how exactly is var element = document.querySelectorAll('.container') element.style.paddingTop = "50px"; element.className = element.className + 'header'; communicating intent better than: $('.container').css('padding-top','50').addClass('header')
  - mercer 8y ago
    While I do agree in your comparison the second version looks better. At the same time, and this might be a tad too subjective to have much merit, it feels out of place to me. Instead, I'd use one of the various approaches where I can create a style = {} object and then apply it to the element, which would just fit better within the rest of my javascript. (which particular approach to use, .cssText, looping through props, or Object.assign, I'm not sure, but my point is any approach that applies a POJO to the node instead of chaining strikes me as more idiomatic. this is not a hill I'd die on though...)
  - wvenable 8y ago
    I wonder how many people will notice that your non-jQuery example actually contains a subtle bug.

pawelk 8y ago

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList https://developer.mozilla.org/en-US/docs/Web/API/Element/cla... ;)

lewisjoe 8y ago
[Same Link] You can see how poor the browser support is and how big the polyfill is. There's a chance that the polyfill could be bigger than jQuery's removeClass/addClass implementations.