Hacker News Reader

Comment by AltruisticGap | Hacker News Reader

He/she could have put much of the function in the top under the $() to make a super mini jquery. That's close to what I use with Vue. It's made even easier to write considering I almost never find a need for jquery's default behaviour of running its methods on multiple nodes. 99% of the time in my projects I just need to do something with one node.

View on HN

I’ve replaced jQuery on several projects with $ = querySelector, $$ = querySelectorAll (wrapped in Array.from if you need to support IE11 so you can use all of the new array methods which their NodeList implementation didn’t get until Edge), classList and fetch.

Beyond the code size savings, I find the newer standard methods are generally easier to understand when scanning code.

I like what this guy did, talking about native methods. However it's too flexible for me, I prefer to have the most minimal functionality in order to ensure consistency in my code. But maybe that's just me. If the library opens up too many possibilities, then I have both the "problem of choice" when writing code, and also it's more difficult to refactor down the line if you want to change lib. Whereas using your own super simple solution (as long as it's sufficient), you can also do a simple abstract layer when including some vendor API.

https://github.com/eorroe/NodeList.js/

I've been using this for years – it's not the end of web development but an awful lot of projects don't need more framework than can fit in a tweet:

    let $ = (selector, scope=document) => {
        return scope.querySelector(selector);
    };

    let $$ = (selector, scope=document) => {
        return Array.from(scope.querySelectorAll(selector));
    };

My personal microframework:

    const node = (tag = 'div', attributes = {}, inner) => {
        const e = document.createElement(tag);

        for(const [key, value] of Object.entries(atrributes))
            e.setAttribute(key, value);

        if(inner) e.innerHTML = inner;

        return e;
    };

The premium version contains an additional:

    e.child = (a,b,c) => { const f = node(a,b,c); e.appendChild(f); return f; };

Reply on news.ycombinator.com