JavaScript: Difference between revisions

From IndieWeb
(meme for excess JS on a website)
(→‎Libraries: Link to Node.js libraries)
(19 intermediate revisions by 3 users not shown)
Line 6: Line 6:
Generally useful libraries being developed by IndieWeb participants that run in Javascript:
Generally useful libraries being developed by IndieWeb participants that run in Javascript:
* [[CASSIS]]
* [[CASSIS]]
* Various [[Node.js#Libraries|Node.js Libraries]] available on npm
* ...
* ...


Line 29: Line 30:


=== Breaks Browser User Features ===
=== Breaks Browser User Features ===
==== JS breaks links in new tab ====
As illustrated by: https://twitter.com/gabrielgironda/status/721115498474270721 <blockquote>DEAR #FRONTEND DEVELOPERS: PLEASE STOP MAKING SITES WITH LINKS I CAN'T COMMAND-CLICK TO OPEN IN A NEW TAB. WHAT IS WRONG WITH YOU </blockquote>
As illustrated by: https://twitter.com/gabrielgironda/status/721115498474270721 <blockquote>DEAR #FRONTEND DEVELOPERS: PLEASE STOP MAKING SITES WITH LINKS I CAN'T COMMAND-CLICK TO OPEN IN A NEW TAB. WHAT IS WRONG WITH YOU </blockquote>
==== JS breaks form submission UI ====
As described by [http://beesbuzz.biz/blog/7456-Modern-web-design-antipatterns “Modern” web design antipatterns]: <blockquote><p>I press Enter, and nothing happens. So I click the submit button – which is, as it turns out, a &lt;div> with attached JavaScript. That JavaScript changes the &lt;div> text to “please wait…” and then it sends off an asynchronous API request. When it gets the response from the server, it then changes the location URL in my browser.</p><p>Congratulations on reimplementing &lt;form> the long way around!</p></blockquote>
==== JS breaks select menu keyboard UI ====
Ibid: <blockquote><p>I clicked on it, and tried typing “wa” – and nothing worked. It didn’t jump down to “Washington.” It didn’t even jump to “Washington” then back to “Alaska.” Oh, and of course cursor keys didn’t work either – I had to use my mouse to scroll and click and this hurts my wrist and is slow and error-prone. […]</p><p>Because it turns out that the dropdown box, rather than being a &lt;select>, was a fucking &lt;div> with JavaScript to set the value. And doesn’t have any keyboard access. For bonus points, they invented some HTML tags like &lt;dropdown> to contain it. Why?! Standards exist for a reason!</p></blockquote>


=== Can Encourage Bad Engineering ===
=== Can Encourage Bad Engineering ===
<span style="max-width:25%;float:right">[https://twitter.com/andybelldesign/status/1105440749687066624 <img style="max-width:100%" src="https://pbs.twimg.com/media/D1dQf4uWkAAAwkD.jpg" alt="A smiling guy labeled DEVELOPERS wearing an untucked light blue polo shirt and teal pants pouring a massive jug (the size of his torso) of olive oil labeled JAVASCRIPT into a medium sized bowl of salad labeled WEBSITE" />]</span>
<span style="max-width:25%;float:right">[https://twitter.com/andybelldesign/status/1105440749687066624 <img style="max-width:100%" src="https://pbs.twimg.com/media/D1dQf4uWkAAAwkD.jpg" alt="A smiling guy labeled DEVELOPERS wearing an untucked light blue polo shirt and teal pants pouring a massive jug (the size of his torso) of olive oil labeled JAVASCRIPT into a medium sized bowl of salad labeled WEBSITE" />]</span>
As summarized by: https://twitter.com/fox/status/716879915333750784 <blockquote>I have seen the worst engineering in my career lately and I have one message: <br/><br/>STOP TRYING TO WRITE EVERYTHING FRONT-END IN JAVASCRIPT</blockquote>
As summarized by: https://twitter.com/fox/status/716879915333750784 <blockquote>I have seen the worst engineering in my career lately and I have one message: <br/><br/>STOP TRYING TO WRITE EVERYTHING FRONT-END IN JAVASCRIPT</blockquote>
Instead: '''[[progressive enhancement|Use JavaScript only for progressive enhancement]].'''


== See Also ==
== See Also ==
[[Category:jargon]]
[[Category:jargon]]
* [[:Category:Software:JavaScript]]
* [[JSON]]
* [[JSON]]
* [[jQuery]]
* [[jQuery]]
Line 50: Line 59:
* Criticism: 2017-02-21 [https://hackernoon.com/the-javascript-phenomenon-is-a-mass-psychosis-57adebb09359 The JavaScript phenomenon is a mass psychosis]
* Criticism: 2017-02-21 [https://hackernoon.com/the-javascript-phenomenon-is-a-mass-psychosis-57adebb09359 The JavaScript phenomenon is a mass psychosis]
* Criticism: 2016-10-03 [https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f How it feels to learn JavaScript in 2016] - a dialog illustrating the absurdity of complex JS toolchains with [[React]], JSX, Babel, AMD, CommonJS, Browserify, Angular, VueJS, Grunt, Gulp, Broccoli, Mimosa, Webpack, SystemJS, Typescript, Flow, etc.
* Criticism: 2016-10-03 [https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f How it feels to learn JavaScript in 2016] - a dialog illustrating the absurdity of complex JS toolchains with [[React]], JSX, Babel, AMD, CommonJS, Browserify, Angular, VueJS, Grunt, Gulp, Broccoli, Mimosa, Webpack, SystemJS, Typescript, Flow, etc.
* [[toolchain]]
* Criticism comic - overuse thereof: https://twitter.com/CommitStrip/status/1119222651673878530
** "It’s better with Javascript<br> http://www.commitstrip.com/2019/04/19/its-better-with-javascript/" [http://www.commitstrip.com/en/ @CommitStrip] April 19, 2019
* 2019-11-04 [https://adamsilver.io/articles/javascript-isnt-always-available-and-its-not-the-users-fault/ JavaScript isn’t always available and it’s not the user’s fault] <blockquote>the problem is less about the 1% of users who always visit your site without JavaScript and more about the 1% of visits to your site which result in users experiencing your site without JavaScript</blockquote>
* ^^^ <blockquote>If you had an application bug which occurred 1% of the time, you’d fix it. No team I’ve come across would put up with that level of reliability.</blockquote>
* 2019-11-04 [https://littleyellowdifferent.substack.com/p/a-fictitious-somewhat-farcical-conversation A fictitious, somewhat farcical conversation between me and the JavaScript programming language] (humor) (too real)
* Criticism: 2020-01-01 [https://medium.com/@CM30/putting-devs-before-users-how-frameworks-destroyed-web-performance-6b2c2a506aab Putting Devs Before Users: How Frameworks Destroyed Web Performance] <blockquote>… many sites now using frameworks like React and Vue, SPAs becoming commonplace and requests going into the hundreds, the average webpage is now bigger than ever, with 2–3MB pages … </blockquote>
* Criticism of the state of the "art" as of 2020-05-25: [http://lea.verou.me/2020/05/todays-javascript-from-an-outsiders-perspective/ Today’s Javascript, from an outsider’s perspective]
* Thread criticizing JS [[frameworks]] (in particular [[React]]) https://twitter.com/zachleat/status/1290998533106040833
** "“you see, the giant JavaScript bundle actually makes the page faster…”" [https://www.zachleat.com @zachleat] August 5, 2020
* Countermovement: https://nojs.club/
* https://twitter.com/andrewcb/status/1367245083796369409
** "Stop doing JavaScript: Documents were not supposed to be Turing-complete" [http://dev.null.org/acb/ @andrewcb] March 3, 2021
* ^ https://pbs.twimg.com/media/EvluJt2XIAAUfW0.jpg
* https://twitter.com/gesa/status/1387601600378638339
** "Hello this is the co-chair of TC39 speaking. We specify and publish the JavaScript standard. I’m here to report that JavaScript is not intended for medicinal purposes, please speak with your doctor if you need healing cuz all we produce is sadness. 😅😘♥️<br><br>https://twitter.com/IanColdwater/status/1387599363929624576?s=19" [https://akiro.se/ @gesa] April 29, 2021
* Positive example of starting with javascript as a way of learning programming: https://twitter.com/bengoodger/status/1465726650398568453
** "I saw there was some discussion on here last week about how we shouldn't celebrate developers who don't know how the whole system works, end-to-end. 🧵/1" [https://twitter.com/bengoodger @bengoodger] November 30, 2021
* Great flowchart explaining why the "Everyone has JS" assertion from modern webdevs is often false for a variety of reasons: https://kryogenix.org/code/browser/everyonehasjs.html
* Criticism: More JS, More multiplicative risks: thread: https://twitter.com/slightlylate/status/1592834631468220417
** "I need to blog about the Principle of Minimal Client Complexity, but one way to understand why I push back so hard on huge stacks of JS is that when you move thing to the client, you don't add risks from each uncontrolled dimension, you _multiply_ them.<br><br>What are those risks?" [https://infrequently.org/ @slightlylate] November 16, 2022

Revision as of 05:31, 22 May 2023


JavaScript (JS) is a popular programming language due to its nearly ubiquitous availability in web browsers, and growing web server availability in the form of node.js.

Libraries

Generally useful libraries being developed by IndieWeb participants that run in Javascript:

Criticism

Sites break without Javascript

Javascript seems to have engendered web development methodologies that depend on it. Many sites seem to break without it, become inaccessible.

Although it is unlikely that visitors of your site still use a browser that does not support javascript as a technology, there are situations in which this is relevant to you as a webmaster.

See also: antipatterns

More Fragile Than HTML

Many sites now depend on Javascript to generate the page in a browser, rather than generating the page on the server and sending HTML. This is a more fragile approach:

Breaks Browser User Features

JS breaks links in new tab

As illustrated by: https://twitter.com/gabrielgironda/status/721115498474270721

DEAR #FRONTEND DEVELOPERS: PLEASE STOP MAKING SITES WITH LINKS I CAN'T COMMAND-CLICK TO OPEN IN A NEW TAB. WHAT IS WRONG WITH YOU

JS breaks form submission UI

As described by “Modern” web design antipatterns:

I press Enter, and nothing happens. So I click the submit button – which is, as it turns out, a <div> with attached JavaScript. That JavaScript changes the <div> text to “please wait…” and then it sends off an asynchronous API request. When it gets the response from the server, it then changes the location URL in my browser.

Congratulations on reimplementing <form> the long way around!

JS breaks select menu keyboard UI

Ibid:

I clicked on it, and tried typing “wa” – and nothing worked. It didn’t jump down to “Washington.” It didn’t even jump to “Washington” then back to “Alaska.” Oh, and of course cursor keys didn’t work either – I had to use my mouse to scroll and click and this hurts my wrist and is slow and error-prone. […]

Because it turns out that the dropdown box, rather than being a <select>, was a fucking <div> with JavaScript to set the value. And doesn’t have any keyboard access. For bonus points, they invented some HTML tags like <dropdown> to contain it. Why?! Standards exist for a reason!

Can Encourage Bad Engineering

A smiling guy labeled DEVELOPERS wearing an untucked light blue polo shirt and teal pants pouring a massive jug (the size of his torso) of olive oil labeled JAVASCRIPT into a medium sized bowl of salad labeled WEBSITE

As summarized by: https://twitter.com/fox/status/716879915333750784

I have seen the worst engineering in my career lately and I have one message:

STOP TRYING TO WRITE EVERYTHING FRONT-END IN JAVASCRIPT

Instead: Use JavaScript only for progressive enhancement.

See Also