<story><title>PlainJS – Vanilla JavaScript Repository</title><url>https://plainjs.com/</url></story><parent_chain><item><author>batat</author><text>Yea, let&amp;#x27;s bury jQuery again and make more &amp;quot;helpers.js&amp;quot; [1]&lt;p&gt;&lt;pre&gt;&lt;code&gt;    export function extend(src) {
      var obj, args = arguments
      
      for (let i = 1; i &amp;lt; args.length; ++i) {
        if (obj = args[i]) {
          for (let key in obj) {
            &amp;#x2F;&amp;#x2F; check if this property of the source object could be overridden
            if (isWritable(src, key))
              src[key] = obj[key]
          }
        }
      }
     }
&lt;/code&gt;&lt;/pre&gt;
or just add super-unique stuff to our classes [2]&lt;p&gt;&lt;pre&gt;&lt;code&gt;    DragSelect.prototype.removeClass = function( element, classname ) {    
      var cn = element.className;
      var rxp = new RegExp( classname + \&amp;#x27;\\b\&amp;#x27;, \&amp;#x27;g\&amp;#x27; );
      cn = cn.replace( rxp, \&amp;#x27;\&amp;#x27; );
      element.className = cn;
      return element;    
    };
    
    DragSelect.prototype.hasClass = function( element, classname ) {    
      var cn = element.className;
      if( cn.indexOf( classname ) &amp;gt; -1 ) { return true; }
      else { return false; }    
    };
&lt;/code&gt;&lt;/pre&gt;
or write tons of boilerplate code like&lt;p&gt;&lt;pre&gt;&lt;code&gt;    if (typeof element === &amp;#x27;string&amp;#x27;) {
        owner.element = document.querySelector(element);
    } else {
        owner.element = ((typeof element.length !== &amp;#x27;undefined&amp;#x27;) &amp;amp;&amp;amp; element.length &amp;gt; 0) ? element[0] : element;
    }
&lt;/code&gt;&lt;/pre&gt;
(mmm, it&amp;#x27;s so vanilla)&lt;p&gt;[1] &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;oncode&amp;#x2F;handorgel&amp;#x2F;blob&amp;#x2F;master&amp;#x2F;src&amp;#x2F;helpers.js#L56&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;oncode&amp;#x2F;handorgel&amp;#x2F;blob&amp;#x2F;master&amp;#x2F;src&amp;#x2F;helpers....&lt;/a&gt;&lt;p&gt;[2] &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;ThibaultJanBeyer&amp;#x2F;DragSelect&amp;#x2F;blob&amp;#x2F;master&amp;#x2F;src&amp;#x2F;DragSelect.js#L768&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;ThibaultJanBeyer&amp;#x2F;DragSelect&amp;#x2F;blob&amp;#x2F;master&amp;#x2F;s...&lt;/a&gt;</text></item></parent_chain><comment><author>twhb</author><text>Your JS knowledge appears to be severely outdated. Instead of the first you can now write:&lt;p&gt;&lt;pre&gt;&lt;code&gt;    Object.assign(target, object1, objectN);
&lt;/code&gt;&lt;/pre&gt;
The second:&lt;p&gt;&lt;pre&gt;&lt;code&gt;    element.classList.add(className);
    element.classList.contains(className);
&lt;/code&gt;&lt;/pre&gt;
And the third has been fixed at a community level, as we&amp;#x27;ve learned the value of API strictness, obviating such checks.&lt;p&gt;I don&amp;#x27;t think anybody was against jQuery back when the alternative was helper functions, I certainly wasn&amp;#x27;t. But that&amp;#x27;s five years ago at this point. Modern JavaScript looks nothing like the code you posted, it&amp;#x27;s actually been built up into a pretty good language.</text></comment>
<story><title>PlainJS – Vanilla JavaScript Repository</title><url>https://plainjs.com/</url></story><parent_chain><item><author>batat</author><text>Yea, let&amp;#x27;s bury jQuery again and make more &amp;quot;helpers.js&amp;quot; [1]&lt;p&gt;&lt;pre&gt;&lt;code&gt;    export function extend(src) {
      var obj, args = arguments
      
      for (let i = 1; i &amp;lt; args.length; ++i) {
        if (obj = args[i]) {
          for (let key in obj) {
            &amp;#x2F;&amp;#x2F; check if this property of the source object could be overridden
            if (isWritable(src, key))
              src[key] = obj[key]
          }
        }
      }
     }
&lt;/code&gt;&lt;/pre&gt;
or just add super-unique stuff to our classes [2]&lt;p&gt;&lt;pre&gt;&lt;code&gt;    DragSelect.prototype.removeClass = function( element, classname ) {    
      var cn = element.className;
      var rxp = new RegExp( classname + \&amp;#x27;\\b\&amp;#x27;, \&amp;#x27;g\&amp;#x27; );
      cn = cn.replace( rxp, \&amp;#x27;\&amp;#x27; );
      element.className = cn;
      return element;    
    };
    
    DragSelect.prototype.hasClass = function( element, classname ) {    
      var cn = element.className;
      if( cn.indexOf( classname ) &amp;gt; -1 ) { return true; }
      else { return false; }    
    };
&lt;/code&gt;&lt;/pre&gt;
or write tons of boilerplate code like&lt;p&gt;&lt;pre&gt;&lt;code&gt;    if (typeof element === &amp;#x27;string&amp;#x27;) {
        owner.element = document.querySelector(element);
    } else {
        owner.element = ((typeof element.length !== &amp;#x27;undefined&amp;#x27;) &amp;amp;&amp;amp; element.length &amp;gt; 0) ? element[0] : element;
    }
&lt;/code&gt;&lt;/pre&gt;
(mmm, it&amp;#x27;s so vanilla)&lt;p&gt;[1] &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;oncode&amp;#x2F;handorgel&amp;#x2F;blob&amp;#x2F;master&amp;#x2F;src&amp;#x2F;helpers.js#L56&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;oncode&amp;#x2F;handorgel&amp;#x2F;blob&amp;#x2F;master&amp;#x2F;src&amp;#x2F;helpers....&lt;/a&gt;&lt;p&gt;[2] &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;ThibaultJanBeyer&amp;#x2F;DragSelect&amp;#x2F;blob&amp;#x2F;master&amp;#x2F;src&amp;#x2F;DragSelect.js#L768&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;ThibaultJanBeyer&amp;#x2F;DragSelect&amp;#x2F;blob&amp;#x2F;master&amp;#x2F;s...&lt;/a&gt;</text></item></parent_chain><comment><author>jlukic</author><text>These utility functions and shims are &amp;quot;per&amp;quot; component. This means that functions like extend will be repeated many times in different idiosyncratic code across app.&lt;p&gt;Imagine your app uses, modals, dropdowns, multiselects, search autocompletes, sliders, rich text areas etc. Instead of having one cached utility library upfront you have many hidden utility libraries scattered around each component, which makes it difficult to say clearly that jQuery is always larger.&lt;p&gt;The other issue is maintainability. When you&amp;#x27;re working with third party components, hot-fixing an OS library can be fairly daunting if you need to also learn their own internal class structure, selector helpers, dom manip functions. Doing this in jQuery, it&amp;#x27;s fairly easy to fork the codebase and plop in a .clone() or .append() to fix a stale issue.</text></comment>