Javascript questions which don't deserve their own thread.

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.

«‹›277 »

IAmKale: Jun 7, 2007; やらないか; Fun Shoe

Some people run ESLint and Prettier side-by-side and I still don't "get it". Isn't ESLint with a sane ruleset like Airbnb's sufficient for ensuring code quality? What does Prettier do that eslint --fix won't?

# ? May 23, 2019 01:54

Adbot: ADBOT LOVES YOU

# ? Jun 7, 2024 21:04

evilfunkyogi: Jun 27, 2005

Prevents anyone from wasting time arguing about whose preferred coding style everyone else should follow.

(It also results in everything being formatted consistently automatically)

# ? May 23, 2019 02:02

ddiddles: Oct 21, 2008; Roses are red, violets are blue, I'm a schizophrenic and so am I

I just started adding eslint into a project at work and theres like 4 million errors.

Prettier does indeed own, though who uses double quotes in JS? Get outta heah.

# ? May 23, 2019 02:32

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

evilfunkyogi posted:

Prevents anyone from wasting time arguing about whose preferred coding style everyone else should follow.

(It also results in everything being formatted consistently automatically)

Yep:

ddiddles posted:

who uses double quotes in JS? Get outta heah.

# ? May 23, 2019 03:05

ddiddles: Oct 21, 2008; Roses are red, violets are blue, I'm a schizophrenic and so am I

Jokes on you I'm the one setting up the webpack config so you get to use *my* arbitrary opinions.

Edit: Upon further reading of what I just posted, i've removed all configs to prettier and extended eslint preferred, and will now live my life as a happy man.

ddiddles fucked around with this message at 03:12 on May 23, 2019

# ? May 23, 2019 03:08

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

Nolgthorn posted:

The first thing I did was see how many dependencies it uses. Good god no. Eslint already abuses modules enough. I'll stick with it and my little eslint config file.

Why care?

You don't have to include it in your project if you don't want. I certainly dont.

# ? May 23, 2019 03:15

smackfu: Jun 7, 2004

IAmKale posted:

Some people run ESLint and Prettier side-by-side and I still don't "get it". Isn't ESLint with a sane ruleset like Airbnb's sufficient for ensuring code quality? What does Prettier do that eslint --fix won't?

I think there�s an eslint confit that turns off all the formatting rules for that situation, so they don�t fight.

# ? May 23, 2019 03:45

Roadie: Jun 30, 2013

IAmKale posted:

Some people run ESLint and Prettier side-by-side and I still don't "get it". Isn't ESLint with a sane ruleset like Airbnb's sufficient for ensuring code quality? What does Prettier do that eslint --fix won't?

Prettier is so you never have to think about mentally parsing the technically correct but bizarrely formatted code produced by that one coworker who uses a wingdings coding font or something.

# ? May 23, 2019 04:39

Newf: Feb 14, 2006; I appreciate hacky sack on a much deeper level than you.

The Rube Goldberg machine of JS tooling has left me with ESLint / TSLint / Webpack configuartion / Vetur (VSCode vue plugin) combinations that format my code on save to formats that ESLint and the compiler complain about. I've mostly learned to ignore it. Incidentally, I'm up to about 5 hours per week of hanging out in a clock tower stroking a rifle.

Side note, I'm not exactly sure whether my linters have ever 'saved' me from anything other than an unfashionable piece of whitespace. I assume they matter less in a typescript project than in straight javascript...?

# ? May 23, 2019 05:04

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

Thermopyle posted:

Why care?

You don't have to include it in your project if you don't want. I certainly dont.

Everyone is drunk on modules. See how the problem manifests in the post above this one?

# ? May 23, 2019 11:13

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

Nolgthorn posted:

Everyone is drunk on modules. See how the problem manifests in the post above this one?

Well yes, but my point is that however many modules Prettier uses it doesn't have any effect on your project. It's completely transparent to you.

There's no configuration or anything. (Well, you have to configure your editor to execute format on save, but that'd be the same if Prettier was one monolithic file written with zero modules)

# ? May 23, 2019 17:10

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

Well my eslint config is 17 lines, eslint is also transparent to me and I know in the back of my mind I'm making the world a better place.

# ? May 23, 2019 17:22

geeves: Sep 16, 2004

Thermopyle posted:

Well yes, but my point is that however many modules Prettier uses it doesn't have any effect on your project. It's completely transparent to you.

There's no configuration or anything. (Well, you have to configure your editor to execute format on save, but that'd be the same if Prettier was one monolithic file written with zero modules)

We used husky and wrote a small pre-commit hook for prettier and if you're nitpicky enough with IntelliJ you can have it just auto-format it for you.

Nolgthorn posted:

Well my eslint config is 17 lines, eslint is also transparent to me and I know in the back of my mind I'm making the world a better place.

I still prefer eslint, with eslint --fix and CMD+option+L.

And double quotes. Because we're a Java shop and it's easier to mandate and keep a consistent style since so many of us work in both languages.

# ? May 25, 2019 02:10

Roadie: Jun 30, 2013

Newf posted:

The Rube Goldberg machine of JS tooling has left me with ESLint / TSLint / Webpack configuartion / Vetur (VSCode vue plugin) combinations that format my code on save to formats that ESLint and the compiler complain about. I've mostly learned to ignore it. Incidentally, I'm up to about 5 hours per week of hanging out in a clock tower stroking a rifle.

I'm guessing you're not using eslint-config-prettier and should.

# ? May 25, 2019 02:21

tankadillo: Aug 15, 2006

I recently changed my React app to store parts of its state in indexeddb (via LocalForage). Components use a useEffect hook to load their state from indexeddb and then a useEffect hook to write changes any time the state updates. This seems to be working fine, except I can't figure out how to get my tests to play nicely with it. (I'm using react-testing-library.) I assume I should use something like waitForElement to wait for the state to load (since indexeddb is async), but Jest gets mad at me because I don't have all my state changes wrapped in act(). The problem is, I can't easily change `const {getByText} = render(<MyComponent/>);` to `const {getByText} = act(() => render(<MyComponent/>));`, or can I?

I figure this is probably a solved problem, but the guides I've found don't seem to cover it.

tankadillo fucked around with this message at 22:56 on May 25, 2019

# ? May 25, 2019 22:48

LifeLynx: Feb 27, 2001; Dang so this is like looking over his shoulder in real-time; Grimey Drawer

I'm back with another React/JS question!

code:

import React from 'react';

const App = () => {

  let artistData = require('./mass-artists.json')

  artistData.map(
    (theArtist) => {
        fetch(`[url]https://api.scryfall.com/cards/search?q=a:[/url]"${theArtist}"`)
            .then((response) => {
              return response.json();
            })
            .then((myJson) => {
              console.log(JSON.stringify(myJson)); //returns the JSON data, so I know it's working
              console.log(myJson.data[0].name); //returns the first card name
            })
    }
  )

  return(<span>This is here so React doesn't yell at me about no return statement.</span>)
}

export default App;

The JSON file is just a list of names of Magic artists. The map maps over the list of artists and searches on the API for them. I want to do the usual thing I do with the map, i.e. display something on the front-end. But I'm having trouble getting anything to work. I can log things to the console or do any Javascript function such as setting something's innerHTML, but where/how would I put a return statement to show the result in, say, a span tag? Even such as "Hello!".

Thanks as always!

# ? May 26, 2019 00:51

tankadillo: Aug 15, 2006

LifeLynx posted:

I'm back with another React/JS question!
code:
import React from 'react';

const App = () => {

 let artistData = require('./mass-artists.json')

 artistData.map(
 (theArtist) => {
 fetch(`[url]https://api.scryfall.com/cards/search?q=a:[/url]"${theArtist}"`)
 .then((response) => {
 return response.json();
 })
 .then((myJson) => {
 console.log(JSON.stringify(myJson)); //returns the JSON data, so I know it's working
 console.log(myJson.data[0].name); //returns the first card name
 })
 }
 )

 return(This is here so React doesn't yell at me about no return statement.)
}

export default App;
The JSON file is just a list of names of Magic artists. The map maps over the list of artists and searches on the API for them. I want to do the usual thing I do with the map, i.e. display something on the front-end. But I'm having trouble getting anything to work. I can log things to the console or do any Javascript function such as setting something's innerHTML, but where/how would I put a return statement to show the result in, say, a span tag? Even such as "Hello!".

Thanks as always!

I think the way to do this is to put the fetch result into the component�s state. Since fetch() is async, then React needs a way to know when it�s updated.

code:

import React, { useState, useEffect } from 'react';

const App = () => {

  let artistData = require('./mass-artists.json')
  const [artistJSON, setArtistJSON] = useState({});

  useEffect(
    function () {
      artistData.map(
        (theArtist) => {
          fetch(`[url]https://api.scryfall.com/cards/search?q=a:[/url]"${theArtist}"`)
            .then((response) => {
              setArtistJSON((prevState) => prevState[theArtist] = response.json()); // <- Something like this to add each one to the state.
            })
            .then((myJson) => {
              console.log(JSON.stringify(myJson)); //returns the JSON data, so I know it's working
              console.log(myJson.data[0].name); //returns the first card name
            })
        }
      )
    },
    [] // <- this ensures the data only gets fetched once
  );

  return (<span>This is here so React doesn't yell at me about no return statement.</span>)
}

tankadillo fucked around with this message at 01:29 on May 26, 2019

# ? May 26, 2019 01:04

Master_Odin: Apr 15, 2010; My spear never misses its mark...

ladies

For Typescript, what would be the proper way to handle dynamically loaded plugins?

What I mean based on that is depending on a value in a config file, the base module may have
module.rabbitmq
module.redis
module.mongo

and then if you install NPM plugins (module-plugin1, module-plugin2), you can end up with:

module.plugin1
module.plugin2

How does one do the typing for this, or does it just require a judicious use of <any>?

# ? May 26, 2019 02:47

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

I am becoming more and more convinced that absolutely everything outside of core ECMAscript is wrong. Every single thing. React, express, definitely webpack, grunt, npm... everything. Absolutely everything.

# ? May 26, 2019 04:00

roomforthetuna: Mar 22, 2005; I don't need to know anything about virii! My CUSTOM PROGRAM keeps me protected! It's not like they'll try to come in through the Internet or something!

Nolgthorn posted:

I am becoming more and more convinced that absolutely everything outside of core ECMAscript is wrong. Every single thing. React, express, definitely webpack, grunt, npm... everything. Absolutely everything.

These recent React questions certainly made me feel that way. Everything except Typescript which is pretty okay.

# ? May 26, 2019 04:06

Happy Thread: Jul 10, 2005; by Fluffdaddy; Plaster Town Cop

Nolgthorn posted:

I am becoming more and more convinced that absolutely everything outside of core ECMAscript is wrong. Every single thing. React, express, definitely webpack, grunt, npm... everything. Absolutely everything.

I've never tried anything outside of core ECMAscript but from reading the questions in here all the time all those other things sound like such a pain in the rear end. All that time spent on configuration and fighting with it and automating test cases, and seemingly nobody is spending a single second with their mind free to think about things like algorithms or data structures or control flow or any of the actions that actually result in an interesting program that does something.

# ? May 26, 2019 04:15

LifeLynx: Feb 27, 2001; Dang so this is like looking over his shoulder in real-time; Grimey Drawer

Nolgthorn posted:

I am becoming more and more convinced that absolutely everything outside of core ECMAscript is wrong. Every single thing. React, express, definitely webpack, grunt, npm... everything. Absolutely everything.

I always get the feeling that I could be doing my little apps in pure ECMAscript without relying on React, but going "npx create-react-app my-app-name-here" and having a little environment set up with Babel, ESLint, ES6, TypeScript, and I don't even know what else is so handy. And now that I've gotten the feel for hooks, setting state and reading from state is something I don't know what to do without (even though I still struggle here and there). If there's a setup that works just as well for single or even multi-page apps clue me in, because I'm a purist and love learning the core stuff.

# ? May 26, 2019 04:28

geeves: Sep 16, 2004

Nolgthorn posted:

I am becoming more and more convinced that absolutely everything outside of core ECMAscript is wrong. Every single thing. React, express, definitely webpack, grunt, npm... everything. Absolutely everything.

For me webpack and npm are just JS's version of the compiler and Maven Central. I wish that the NPM registry maintainers were as thorough as Sonatype when it came to architectural design and continuity of assets. Auto semver, etc. was also poor security decision, imho.

It's gotten a bit better now with some @namespacing, but really it should have been enforced from the beginning.

# ? May 26, 2019 04:40

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

I would concede that a better means of delivery to the client is needed than just having a browser load my hundreds of js files over http separately. Some kind of bundler. But I don't need anything complex, rollup.js seems to do a good job. I don't want or need to convert it to es5 for example. When NASA allegedly went to the moon they didn't use a huge architecture with 800,000 different points of failure and a 2GB node_modules directory.

Vue is pretty neat but most the time you don't need a single page application. If you're using React I'd suggest even Redux is over engineered. What are the chances we can convince the industry to return to normalcy, because I don't think all of these monolithic tools that seem to be ubiquitous nowadays are really solving more problems than they introduce. Almost every tool feels like a tech demo, something to be iterated on into the future before being ready for production. And then only used when appropriate.

But they keep adding features on top of features on top of features, it propagates out, and most people lather themselves in it.

Nolgthorn fucked around with this message at 17:09 on May 26, 2019

# ? May 26, 2019 16:48

smackfu: Jun 7, 2004

roomforthetuna posted:

These recent React questions certainly made me feel that way. Everything except Typescript which is pretty okay.

Heh, and I see the TypeScript questions about fighting with the type system for no apparent gains and feel the same way.

# ? May 26, 2019 17:20

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

React and something like Redux or some other state management is a godsend for UI/UX architecture.

However, this stuff only brings benefits beyond certain levels of app complexity. Below that level it at least doesn't bring any benefits, and actually probably brings costs.

Dumb Lowtax posted:

I've never tried anything outside of core ECMAscript but from reading the questions in here all the time all those other things sound like such a pain in the rear end. All that time spent on configuration and fighting with it and automating test cases, and seemingly nobody is spending a single second with their mind free to think about things like algorithms or data structures or control flow or any of the actions that actually result in an interesting program that does something.

People who waste time on configuration are just wasting time. There is no need to do so if you want to bundle or use React or whatever.

Mostly people who are having problems building apps and posting in this thread are people who are new to whatever it is they are doing...so they're posting and asking questions.

I don't spend any time fighting with React or webpack or whatever now that I know how to use them. I just copy in my project configuration and start thinking about my business logic...not thinking about React.

# ? May 26, 2019 18:10

ddiddles: Oct 21, 2008; Roses are red, violets are blue, I'm a schizophrenic and so am I

I was usually one for wanting to configure stuff, but now I agree, and if you're just getting into react, do:

npx create-react-app

Then start writing components/logic/tests, dont worry about any of the other stuff, and 90% of what you are going to be writing outside of JSX is pure JS anyway.

Just curious for the people who are against this sort of workflow, have you ever done a large project without some sort of UI framework? Sounds like a nightmare to me, or you just end up writing your own.

# ? May 26, 2019 22:19

Happy Thread: Jul 10, 2005; by Fluffdaddy; Plaster Town Cop

I wrote a big one-off WebGL programming site for my students, and did eventually have to make all sorts of general UI stuff from scratch. It eventually settled into a design where JavaScript populates all the pieces from a couple tiny placeholder tags in a mostly blank HTML file. I think React does this as well.

# ? May 26, 2019 22:22

prisoner of waffles: May 8, 2007; Ah! well a-day! what evil looks
Had I from old and young!
Instead of the cross, the fishmech
About my neck was hung.

Dumb Lowtax posted:

I wrote a big one-off WebGL programming site for my students, and did eventually have to make all sorts of general UI stuff from scratch. It eventually settled into a design where JavaScript populates all the pieces from a couple tiny placeholder tags in a mostly blank HTML file. I think React does this as well.

Yes, and also a lot of other related stuff, and in a more complicated way, at JSX buildtime.

tbqh I really like writing UI components as actual HTML templates that get cloned and populated by a teeny tiny amount of JavaScript with no compile step... if your project is small enough that you can get away with it

# ? May 26, 2019 22:47

prisoner of waffles: May 8, 2007; Ah! well a-day! what evil looks
Had I from old and young!
Instead of the cross, the fishmech
About my neck was hung.

https://twitter.com/sophiebits/status/1132366889684881409

^ this is also something I don't quite love about React: that some built-in elements have (quite nice) stateful behavior and React doesn't quite know how you should work with them.

# ? May 27, 2019 01:42

mystes: May 31, 2006

At least React gives you uncontrolled components as an escape hatch, as opposed to something like Elm.

# ? May 27, 2019 04:29

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

https://twitter.com/lukejacksonn/status/1131506699356037121

And then the rover careened into the lunar surface.

# ? May 27, 2019 09:22

necrotic: Aug 2, 2005; I owe my brother big time for this!

All for a pretty map of downloads.

https://github.com/Unitech/pm2/issues/4289#issuecomment-495338752

# ? May 27, 2019 16:07

smackfu: Jun 7, 2004

And no one noticed until it broke.

# ? May 27, 2019 16:57

Happy Thread: Jul 10, 2005; by Fluffdaddy; Plaster Town Cop

Wow, so the left-pad incident happened again then

https://www.theregister.co.uk/2016/03/23/npm_left_pad_chaos/

quote:

With left-pad removed from NPM, these applications and widely used bits of open-source infrastructure were unable to obtain the dependency, and thus fell over during development and deployment. Thousands, worldwide. Left-pad was fetched 2,486,696 downloads in just the last month, according to NPM. It was that popular

Here was the entire left-pad:

quote:

module.exports = leftpad;

function leftpad (str, len, ch) {
str = String(str);

var i = -1;

if (!ch && ch !== 0) ch = ' ';

len = len - str.length;

while (++i < len) {
str = ch + str;
}

return str;
}

Here's a research paper about it, why developers use trivial packages, and what can be done:

https://www.researchgate.net/profil...tudy-on-npm.pdf

# ? May 27, 2019 20:37

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

I don't really think this is completely a npm/JS-modules problem in the sense thats been getting harped on for a long time now. The problem is that a lot of people wanted analytics on their packages and did it in a stupid way that broke everything. For example, if I was writing C# and used some library that died when it tried to do an HTTP request to some analytics server the same thing would've happened.

I did use the word completely there. From my understanding npm's share of the fault comes from the fact that it allows you to depend on packages from arbitrary servers and there's no way (or at least no commonly known way) to enforce a policy of telling such dependencies or dependencies-of-dependencies to gently caress off.

The trivial packages thing is kind of a red herring.

On the one hand, the usage of trivial packages does increase the number of packages in usage, and thus the likelihood of someone getting bitten by a left-pad-esque problem, but trivial packages are not the cause of left-pad-esque problems.

Some of the more core problems are:

1. Security and reliability of package repositories.
2. Coding policies that allow dependence upon non-secure and non-reliable package repositories.
3. Basically no javascript standard library.

Both left-pad and this thing would've been avoided or somewhat mitigated if npm was better.

Writing your own code and avoiding repos is no panacea. If some maintainers are already depending on random third-party servers and not pinning versions and not vendoring what you need to vendor, I wouldn't be so confident that such maintainers writing their own code is going to be a security and reliability win.

There's not really a perfect solution for JS or any language.

For example, in Python-land right now there's a big hubbub going on about how the standard library is getting stagnant, but there's also been incidents of typo-squatting packages on the main, official package repository. If you fat-finger a package name you end up installing a functional but malware-compromised version of the package.

The whole JS design-by-committee is going to make it difficult to truly address any of these problems. JS probably needs a standard library, an official package repository, and, of course, a functional module import/bundling system.

Thermopyle fucked around with this message at 21:12 on May 27, 2019

# ? May 27, 2019 21:09

LifeLynx: Feb 27, 2001; Dang so this is like looking over his shoulder in real-time; Grimey Drawer

Dumb Lowtax posted:

Wow, so the left-pad incident happened again then

https://www.theregister.co.uk/2016/03/23/npm_left_pad_chaos/

Here was the entire left-pad:

Here's a research paper about it, why developers use trivial packages, and what can be done:

https://www.researchgate.net/profil...tudy-on-npm.pdf

Brilliant! I thought nothing could be worse than the dozens of redundant WordPress plugins I've run across, but then there's this.

# ? May 27, 2019 21:11

Happy Thread: Jul 10, 2005; by Fluffdaddy; Plaster Town Cop

Check that research paper Thermopyle, it goes into that stuff

# ? May 27, 2019 21:13

Doom Mathematic: Sep 2, 2008

Dumb Lowtax posted:

Here was the entire left-pad:

JavaScript code:

module.exports = leftpad;

function leftpad (str, len, ch) {
  str = String(str);

  var i = -1;

  if (!ch && ch !== 0) ch = ' ';

  len = len - str.length;

  while (++i < len) {
    str = ch + str;
  }

  return str;
}

* proactively converts str to a string if it isn't a string for some reason
* doesn't check that ch is a single character long, resulting in incorrect output if it's longer
* mysterious special case to allow ch to be the number 0???
* doesn't check that the desired string length is equal to or greater than the input string length, instead silently returns the original string with no warning
* O(n) string concatenation operations

Yeah, taking that code down was probably for the best.

# ? May 27, 2019 21:39

Adbot: ADBOT LOVES YOU

# ? Jun 7, 2024 21:04

Ola: Jul 19, 2004

Doom Mathematic posted:

Yeah, taking that code down was probably for the best.

Camera zooms out. That was just one brick. Zooms out more. A brick in the support column of a huge bridge. Zooms out even more. In a vast metropolis of brick structures.

# ? May 27, 2019 21:57

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.

«‹›277 »