A little bit of plain JavaScript can do a lot

Post by edwinjm » Sun, Jun 21, 2020, 3:04 PM UTC

galaxyLogic wrote: post #14

An interesting use of 'classList' is that it makes it easy to use css-classes to indicate the state of a dom-element. Is the element selected or not? Well does its classlist include the css-class 'selected'?

Post by dgb23 » Sun, Jun 21, 2020, 3:16 PM UTC

spion wrote: post #141

peruvian wrote: post #131

Earlier quoted context omitted.

If you're a front-end only developer not only do you use the same hammer (big framework) for all nails, the use of that hammer is what gives you job security and satisfaction. If companies switched to using old fashioned server-rendered pages with light JS, half of HN would not have anything to do at work.

For the first year, anyway. If the project continues to grow, next year they would be called to deal with the enormous spaghetti mess that has resulted.

Post by elwell » Sun, Jun 21, 2020, 3:36 PM UTC

andrewstuart wrote: post #28

I'm an experienced React developer. I wanted to try out writing a plain vanilla JavaScript application - I enjoy plain JavaScript, it feels close to the metal. It wasn't long before I was craving an application framework that allowed me to cleanly organise and structure my application instead of it rapidly becoming a spaghetti. I also craved the ability to write small simple functions for making components. And I wan…

Post by theandrewbailey » Sun, Jun 21, 2020, 3:42 PM UTC

yesenadam wrote: post #70

When starting to learn/write JS, I found a few of these basic name-shortening functions from HN's own JS very useful, and well-named: function $(id) { return document.getElementById(id); } function byClass (el, cl) { return el ? el.getElementsByClassName(cl) : [] } function byTag (el, tg) { return el ? el.getElementsByTagName(tg) : [] } function allof (cl) { return byClass(document, cl) } function hasClass (el, cl) {…

    if (undefined === window.$) {
        window.$ = document.querySelectorAll.bind(document);
        [EventTarget.prototype, window, XMLHttpRequest.prototype].forEach(function setOnOff(p) {
            Object.defineProperty(p, "on", {
                get() {
                    return function onElement(t, f) {
                        this.addEventListener(t, f);
                        return this;
                    };
                }
            })
            Object.defineProperty(p, "off", {
                get() {
                    return function offElement(t, f) {
                        this.removeEventListener(t, f);
                        return this;
                    };
                }
            });
        });
        [NodeList.prototype, HTMLCollection.prototype].forEach(function setOnArray(p) {
            Object.setPrototypeOf(p, Array.prototype);
            Object.defineProperty(p, "on", {
                get() {
                    return function onArray(t, f) {
                        this.forEach(function onEach(e) {
                            e.addEventListener(t, f);
                        });
                        return this;
                    };
                }
            });
            Object.defineProperty(p, "off", {
                get() {
                    return function offArray(t, f) {
                        this.forEach(function offEach(e) {
                            e.removeEventListener(t, f);
                        });
                        return this;
                    };
                }
            });
        });
    }

Post by bschwindHN » Sun, Jun 21, 2020, 3:47 PM UTC

kingdomcome50 wrote: post #127

bschwindHN wrote: post #68

Earlier quoted context omitted.

Not nearly as minimal as your example, but I like the "no build tools route" of using preact. You don't need to build your code, and you can get JSX-esque syntax and some of the niceness of React without messing with npm or webpack or any of that. https://preactjs.com/guide/v10/getting-started#no-build-tool...

I am failing to understand why someone would choose this over React. The page you linked to, I kid you not, has a section about how you build a Preact application from the command line...