Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

A little bit of plain JavaScript can do a lot

jvns.ca

Post reply on HN
Print view View original

1–10 of 206 posts

Re: A little bit of plain JavaScript can do a lot

#2

Post by dhritzkiv »

More specifically, how JavaScript can do a lot in browser by interacting through the DOM API.

The modernization of the DOM API in the last 5 years has done a lot to remove the need for jQuery et al, and has made building the View part of JavaScript apps much more frictionless.

Re: A little bit of plain JavaScript can do a lot

#3

Post by ed25519FUUU »

dhritzkiv wrote: post #2

More specifically, how JavaScript can do a lot in browser by interacting through the DOM API. The modernization of the DOM API in the last 5 years has done a lot to remove the need for jQuery et al, and has made building the View part of JavaScript apps much more frictionless.

Where can we learn about this “modern JS“? I feel like in some ways I’m learning the old ways, similar to old c++.

Re: A little bit of plain JavaScript can do a lot

#7

Post by wolfgang42 »

I agree about the nuisance of creating DOM elements. innerHTML is OK if you’re doing static content, but for anything that needs to be dynamic (untrusted input, event handlers, etc.) I have a little tiny helper library that I carry around in my head and write into projects that need it:

    const $T = text => document.createTextNode(text)
    
    function $E(tag, props, kids) {
        const elem = document.createElement(tag)
        for (const k in props) {
            elem[k] = props[k]
        }
        for (const kid of kids) {
            elem.appendChild(kid)
        }
        return elem
    }
(Add flourishes as necessary for things like optional arguments and allowing falsey kids.)

This isn’t as nice as JSX, but it makes a reasonably ergonomic API for quick little projects. Here’s what the example in the article would look like (admittedly it’s a bit easier to follow with syntax highlighting):

    const button = $E('button', {}, [
        $E('i', {className: 'icon-lightbulb'}, []),
        $T('I learned something!'),
        $E('object', {data: '/confetti.svg', width: 30, height: 30}, []),
    ]);

Re: A little bit of plain JavaScript can do a lot

#8

Post by bartread »

ed25519FUUU wrote: post #3
dhritzkiv wrote: post #2

More specifically, how JavaScript can do a lot in browser by interacting through the DOM API. The modernization of the DOM API in the last 5 years has done a lot to remove the need for jQuery et al, and has made building the View part of JavaScript apps much more frictionless.

Where can we learn about this “modern JS“? I feel like in some ways I’m learning the old ways, similar to old c++.

The parent isn't talking about JS: they're talking about the DOM APIs. The best resource I've found for learning about these is MDN: https://developer.mozilla.org/en-US/docs/Web/API/Document_Ob.... I've found this to be an incredibly helpful reference when I need to do something without using a library.

Re: A little bit of plain JavaScript can do a lot

#9

Post by zamadatix »

ed25519FUUU wrote: post #3
dhritzkiv wrote: post #2

More specifically, how JavaScript can do a lot in browser by interacting through the DOM API. The modernization of the DOM API in the last 5 years has done a lot to remove the need for jQuery et al, and has made building the View part of JavaScript apps much more frictionless.

Where can we learn about this “modern JS“? I feel like in some ways I’m learning the old ways, similar to old c++.

Following the tc39 proposals on GitHub is a great way to keep up with features just being added. "What's new in ES2020" type blog posts should catch you up between then and the bleeding edge. MDN for actually getting the technical details on things as you try to implement the features you read about (will also xover browser specific APIs). caniuse to see if they are actually ready to be used.
Post reply on HN