Live data from Hacker News

A little bit of plain JavaScript can do a lot

jvns.ca

191–200 of 206 posts

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

#191

Earlier quoted context omitted.

As a React developer I have the strictest policy to never go lower level than the browser and I never touch other fields of computing. I started my computing career in 1986 knowing only React and I'll get to the end of it knowing nothing else.

Damn, you must be the one scooping up all those 10+ years React experience jobs :)

I’m giving GP credit for the joke :) it’s hard to mistype 201X as 1986.

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

#192

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...

Because React tries to do so many things nowadays, I can no longer justify the bundle size cost when I can have Preact do what I need at a fraction of the size.

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

#193
post #88

Earlier quoted context omitted.

querySelectorAll is a lot slower than old school functions. You would be tempted to say who cares, but then you load Gmail and wait 2 seconds for UI to render.

https://www.sitepoint.com/optimizing-css-id-selectors-and-ot... The slowest and most convoluted selector took 21ms when tested against 50,000 elements using a 2014 MacBook Pro.

20ms for one call over 50000 elements, on a 2.6GHz cpu capable of 4 IPC. 50-200K instructions per element. Truly we are living in the future :)

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

#194
post #88

Earlier quoted context omitted.

querySelectorAll is a lot slower than old school functions. You would be tempted to say who cares, but then you load Gmail and wait 2 seconds for UI to render.

Do you have any references for this? I would be flabbergasted if the simple case of #id and .class weren't optimized to be basically identical. (the only difference being that they had to do a quick "parse" before jumping into the optimized path)

https://jsperf.com/getelementbyid-vs-queryselector/25

tldr just looking for class x10 slower.

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

#195

Earlier quoted context omitted.

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.

The problem is that the code $element("span", text) looks harmless, appears to work, and yet is dangerously wrong.

Dynamically setting text is very common. While dynamically setting innerHTML is a rare and dangerous operation which should be explicit in the code. The alternative syntax also supported by this function $element("span", { innerHTML: html }) is much better.

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

#196
post #194

Earlier quoted context omitted.

Do you have any references for this? I would be flabbergasted if the simple case of #id and .class weren't optimized to be basically identical. (the only difference being that they had to do a quick "parse" before jumping into the optimized path)

https://jsperf.com/getelementbyid-vs-queryselector/25 tldr just looking for class x10 slower.

Trying that on Firefox mobile and they are all within 5%. The direct calls are faster but that could conceivably be the time to check for special cases with a DOM that small.

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

#198

Earlier quoted context omitted.

> What XSS vulnerability? Any user can set the innerHTML of any element at any time. This mindset right here is exactly why XSS is still an issue. If you pull user generated content and put it in the DOM like this, you will open your users to XSS from other users. Basing your personal use DOM APIs on setting `el.innerHTML` will lead to a slip-up. Use `textContent` by default.

Often times you write code to defend against other developers who don't know any better.

Most of the time I write code to defend against future me, because I know that in a few days I'll have forgotten half of the code along with all the optimization hacks in it.

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

#199
post #163

Earlier quoted context omitted.

Using tagged template literals the way lit-html does is the nicest JSX-substitute I’ve seen: https://github.com/Polymer/lit-html

The downside there is you’re heavily relying on strings, which feels a bit weird for things like event handlers, which would either have to inline the function as a string or do some magic behind the scenes. The editor is also going to be less helpful in figuring out your intent when using a string-only templating system.

lit-html is not a "string only" template system. Because tagged literals can contain JavaScript expressions we process many other data types and handle them appropriately.

For event handlers, only the event name is in the string. The handler function is passed directly in and we add it to elements with addEventListener().

The only "magic" is that we wrap the user's handler call it with the host component as the `this` value so that you don't have to create closures like in Reach. You can just do:

    class MyElement extends LitElement {
      render() {
        return html`Click Ma
      }
      _onClick(e) {
        console.log('this is', this);
      }
    }

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

#200
post #36

Earlier quoted context omitted.

Using tagged template literals the way lit-html does is the nicest JSX-substitute I’ve seen: https://github.com/Polymer/lit-html

It's pretty nice but doesn't play so nicely with editor indenting modes and stuff like that, so there are some reasons to use normal JavaScript function calls instead.

There are plugins for many editors that give syntax highlighting, code completion, type-checking, etc. The experience is great.
Post reply on HN