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

111–120 of 206 posts

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

#111

Post by ryanbrunner »

akira2501 wrote: post #37
wolfgang42 wrote: post #7

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…

Instead of the loop, you can just use: Object.assign(elem, props). I found I wanted a more data-driven style that matched the element types themselves, so I use the somewhat more cumbersome: // data driven HTMLElement creation var $element = function(type, p={}) { let h, elem = document.createElement(type); if (!p || (typeof(p) !== "object")) { elem.innerHTML = p || ''; return(elem); } h = p.attributes; delete p.attr…

Neat solution - out of curiosity though, why remove the properties from the passed options? If I called that function, I wouldn't normally expect it to mutate my arguments like that.

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

#113

Post by [deleted] »

wolfgang42 wrote: post #7

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…

[deleted]

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

#114

Post by hombre_fatal »

ryanbrunner wrote: post #111
akira2501 wrote: post #37

Earlier quoted context omitted.

Instead of the loop, you can just use: Object.assign(elem, props). I found I wanted a more data-driven style that matched the element types themselves, so I use the somewhat more cumbersome: // data driven HTMLElement creation var $element = function(type, p={}) { let h, elem = document.createElement(type); if (!p || (typeof(p) !== "object")) { elem.innerHTML = p || ''; return(elem); } h = p.attributes; delete p.attr…

Neat solution - out of curiosity though, why remove the properties from the passed options? If I called that function, I wouldn't normally expect it to mutate my arguments like that.

At a glance, they do it so that at the end they can merge in any remaining props they didn't handle after all their work building `elem` is done.

This can be accomplished non-destructively with destructuring.

    const {
      attributes,
      classList,
      style,
      ...rest
    } = p

    // elem = ...consume attributes, classList, style...

    return Object.assign(elem, rest)

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

#115

Post by CodesInChaos »

akira2501 wrote: post #37
wolfgang42 wrote: post #7

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…

Instead of the loop, you can just use: Object.assign(elem, props). I found I wanted a more data-driven style that matched the element types themselves, so I use the somewhat more cumbersome: // data driven HTMLElement creation var $element = function(type, p={}) { let h, elem = document.createElement(type); if (!p || (typeof(p) !== "object")) { elem.innerHTML = p || ''; return(elem); } h = p.attributes; delete p.attr…

Using innerHTML as default if the second argument isn't an object risks XSS vulnerabilities. I'd prefer innerText for as default.

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

#116

Post by hombre_fatal »

ktzar wrote: post #75
wolfgang42 wrote: post #7

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…

Tiny templating libraries like mustache are ideal for that. https://mustache.github.io/

Could never get over Mustache using {{foo}} for safe auto-escaped interpolation but {{{foo}}} for dangerous non-escaped interpolation.

I wonder how many XSS vulns this decision has caused in the wild.

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

#117

Post by hombre_fatal »

z3t4 wrote: post #95
triceratops wrote: post #30

Earlier quoted context omitted.

I'm sorry to say this, but it's not a problem with the newfangled stuff. I think you just don't work with very good frontend devs. Which isn't surprising honestly - it has the lowest barrier for entry of any programming specialization (I started there myself).

I think its a problem with selling. People want to sell. So out with the old, in with the new. Lets revive some of the trends from the 70's. Or lets rewrite all this code to use classes. Sell more books and courses. Hate on all solutions that dont require out products. Are you still writing plain old JS? In order to be pro you need to use these frameworks... Its all marketing. Trying to argue is like standing on a tr…

Or they have real value by helping developers deliver features that users love while contending with the inherent statefulness of clients.

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

#118

Post by hombre_fatal »

dmitriid wrote: post #92
runarberg wrote: post #39

Earlier quoted context omitted.

Either iterate through the `NodeList` with a `for ... of` loop or a `.forEach` method, or convert it to an array using `Array.from()` or `[...nodeList]`. `NodeList` can be a live list (not `querySelectorAll` though) which has some benefits over arrays. `NodeList` also implements `Symbol.iterator` so you can use your favorite iterator library if you need to map, filter or reduce it. And with the future pipeline operat…

You just spent three paragraphs describing how NodeList is different, including a reference to a non-existent operator. Nice.

Well, you called it a "weird object" that throws errors if you "look at it funny." They tried to demystify it for you in just three sentences.

That jQuery lets you willfully cling to the corpse of familiarity instead of spending 30 seconds looking up what NodeList was years ago says more about you than anything about jQuery.

And with your end-cap comment about the pipeline operator that they were already, helpfully, pointing out was going to be introduced in the future, you just sound like sour grapes. What gives? Kind of a weird attitude to bring to a forum of craftspeople.

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

#119

Post by onei »

hombre_fatal wrote: post #116
ktzar wrote: post #75

Earlier quoted context omitted.

Tiny templating libraries like mustache are ideal for that. https://mustache.github.io/

Could never get over Mustache using {{foo}} for safe auto-escaped interpolation but {{{foo}}} for dangerous non-escaped interpolation. I wonder how many XSS vulns this decision has caused in the wild.

I'd say that's the more sensible decision if you want to maintain syntax.

You can grep for {{{ without false positives matching {{. Conversely, it's harder to find places where == was used when === should have been used (although I'll concede it's not much harder). In general I'd prefer to go the extra mile to be unsafe than accidentally miss something out.

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

#120

Post by codemonkey-zeta »

CodesInChaos wrote: post #115
akira2501 wrote: post #37

Earlier quoted context omitted.

Instead of the loop, you can just use: Object.assign(elem, props). I found I wanted a more data-driven style that matched the element types themselves, so I use the somewhat more cumbersome: // data driven HTMLElement creation var $element = function(type, p={}) { let h, elem = document.createElement(type); if (!p || (typeof(p) !== "object")) { elem.innerHTML = p || ''; return(elem); } h = p.attributes; delete p.attr…

Using innerHTML as default if the second argument isn't an object risks XSS vulnerabilities. I'd prefer innerText for as default.

What XSS vulnerability? Any user can set the innerHTML of any element at any time.
Post reply on HN