In 2020, with our mature and cross browser compatible JavaScript, it surprises me that many people are still discovering vanilla JavaScript. Is something wrong here?
A little bit of plain JavaScript can do a lot
121–130 of 206 posts
Re: A little bit of plain JavaScript can do a lot
#122In 2020, with our mature and cross browser compatible JavaScript, it surprises me that many people are still discovering vanilla JavaScript. Is something wrong here?
I get the sense that there are a ton more beginner tutorials based on frameworks. And those type of tutorials are underrated ways that lots of people use to learn "js".
Re: A little bit of plain JavaScript can do a lot
#123So, question for those who are following the JS ecosystem trends more closely: Is innerHTML now officially "ok to use" again?
I remember way back (when XHTML was still on the table) that innerHTML was effectively deprecated: It was still around but you weren't supposed to use it for anything new because support might be dropped at any point in "the future". It was also non-standard. Instead, you were supposed to use the DOM APIs (createElement etc) for any kind of DOM modifications. (Not even talking about the risk of performance issues or XSS vulnerabilities if you used innerHTML naively)
Now "the future" has come around and innerHTML is still supported basically everywhere. It's clear that implementing innerHTML correctly adds substantial complexity to browsers (they have to parse and serialise arbitrary HTML fragments on the fly, synchronously, without stalling the event loop. The result also has to interact well with all the other DOM manipulation/inspection APIs. Not to mention if the HTML string contains its own bits of JS...) - however, there seems to be so much "legacy" content that dropping the API seems infeasible.
So, does anyone know what the official state of innerHTML is in terms of standard compliance and future support?
Re: A little bit of plain JavaScript can do a lot
#124Earlier quoted context omitted.
The class related functions have been made native by the classList property of elements. element.classList.has('someClass') //true if present element.classList.add('someClass') //add to element element.classList.remove('someClass') //remove from element element.classList.toggle('someClass') //remove if present, add if not present I would also argue element.querySelector and element.querySelectorAll are plenty shortha…
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)
Re: A little bit of plain JavaScript can do a lot
#125Earlier 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.
https://portswigger.net/web-security/cross-site-scripting/st...
You protect against someone else abusing it on other users.
Re: A little bit of plain JavaScript can do a lot
#126Re: A little bit of plain JavaScript can do a lot
#127I 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…
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...
Re: A little bit of plain JavaScript can do a lot
#128I 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…
> I have a little tiny helper library that I carry around in my head and write into projects that need it
May I suggest a repo. Github is great, I hear. :)
Re: A little bit of plain JavaScript can do a lot
#129I’ve never worked as a professional frontend developer, so even though I’ve been writing HTML/CSS/JS for 15 years for little side projects, all of the projects have been pretty small I'm pretty much the same, and one thing I've noticed which continues to both amuse and sadden me is the fact that those whose main focus is not web development often make better sites/pages than "professional" developers. I once rewrote,…
I think I know why that might be the case: they used an approach appropriate for large-scale projects in a small-scale project - happens very often really. None of the max 30-user SPAs I wrote during my time at a certain large pharmaceutical company made sense as SPAs, because the scale at which that becomes beneficial just wasn't there. As for your other experience: I get where you both are coming from. Thing is, we…
I believe a lot of it is also because many genuinely useful features from frameworks have recently been added to the core language. "Vanilla JS" (and "Vanilla CSS") in latest-generation browsers with support for JS modules, JS classes, async/await, fetch, querySelectorAll, Flexbox and Grid Layout is something else than writing "Vanilla JS" five years ago.
Re: A little bit of plain JavaScript can do a lot
#130So, question for those who are following the JS ecosystem trends more closely: Is innerHTML now officially "ok to use" again? I remember way back (when XHTML was still on the table) that innerHTML was effectively deprecated: It was still around but you weren't supposed to use it for anything new because support might be dropped at any point in "the future". It was also non-standard. Instead, you were supposed to use…
Whether or not it is widely supported is academic - you shouldn't use `innerHTML` for the same reasons you shouldn't use `eval`, the most important being that it is a security risk.