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 »

Supersonic: Mar 28, 2008; You have used 43 of 300 characters allowed.; Tortured By Flan

I want to build a frontend app which shows various stats from a service pulled from an API. The only endpoint is essentially a Dynamodb dump (JSON object) which is way too big to download to the frontend (30+mb).

Given I don't have access over the endpoint (but permission to use it), would the solution here be to create a backend in Node (maybe on a daily basis) and then perform my own operations on the data and serve it to the frontend? I haven't done too much backend work and have never worked with this type of endpoint before (normally I'm just querying RESTful APIs), and so I'm a bit confused as to what I should do here.

# ? Sep 11, 2020 02:18

Adbot: ADBOT LOVES YOU

# ? Apr 26, 2024 08:36

Ruggan: Feb 20, 2007; WHAT THAT SMELL LIKE?!

Supersonic posted:

I want to build a frontend app which shows various stats from a service pulled from an API. The only endpoint is essentially a Dynamodb dump (JSON object) which is way too big to download to the frontend (30+mb).

Given I don't have access over the endpoint (but permission to use it), would the solution here be to create a backend in Node (maybe on a daily basis) and then perform my own operations on the data and serve it to the frontend? I haven't done too much backend work and have never worked with this type of endpoint before (normally I'm just querying RESTful APIs), and so I'm a bit confused as to what I should do here.

Doesn�t need to be a node backend, but yes. It sounds like you need your own server and data store (flat file, db) where you can stuff the data you�ve pulled down so you can feed the relevant / aggregated chunks to the front end.

# ? Sep 11, 2020 02:29

Granite Octopus: Jun 24, 2008

If you have some kind of http caching in front of the endpoint you create, you could chuck a long timeout on it and not bother with any other kind of infrastructure to store your computed state.

Downside is some poor sucker is going to have to wait occasionally when the cache misses, but if you don't care or have a good retry policy on the frontend it would greatly simplify your implementation.

roomforthetuna posted:

(Also it should be noted that actual blockchain stuff, where you're actually doing work, is not a good match for async or Promise, everything will still be blocked by your work, async is not the same as multithreaded.)

A dumb question but just to make sure I've got this straight, if your promises are mostly there because they have to wait for http responses there would be no advantage to using actual multithreading because its network-bound not compute-bound?

Granite Octopus fucked around with this message at 13:08 on Sep 11, 2020

# ? Sep 11, 2020 13:02

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!

Granite Octopus posted:

A dumb question but just to make sure I've got this straight, if your promises are mostly there because they have to wait for http responses there would be no advantage to using actual multithreading because its network-bound not compute-bound?

Correct. Waiting for anything that isn't "more javascript code running" is totally fine to do with regular single-threaded async. (Being more vague than network-bound specifically because I think you can probably have GPU-bound 'await' as well.)

# ? Sep 12, 2020 03:17

MrMoo: Sep 14, 2000

Of note Promise.all() was optimized a while back to actually run in part parallel giving boost over standard chaining.

I love abusing the Promise.then() syntax and ignoring the catch(). The chome :chome:

developers do not agree and love flagging warnings and errors. Kind of silly to force a .catch(e => { throw e; }) when trivial re-throwing was popularly frowned upon. Also a bit rear end that the throw has to be in a block.

# ? Sep 13, 2020 19:53

Doom Mathematic: Sep 2, 2008

I was fairly sure a throw expression was on its way through the standards track.

.catch(e => { throw e; }) doesn't do anything though? It's frowned upon because it achieves nothing?

# ? Sep 13, 2020 20:28

MrMoo: Sep 14, 2000

Randomly copying a console output example:

code:

 node:4796) UnhandledPromiseRejectionWarning: Unhandled promise rejection (r                                                                                               ejection id: 1): Error: spawn cmd ENOENT
[1] (node:4796) DeprecationWarning: Unhandled promise rejections are deprecated.
In the future, promise rejections that are not handled will terminate the Node.
js process with a non-zero exit code.

You need a rethrow for the above, or at least do something.

# ? Sep 13, 2020 21:52

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

I'm trying and failing to get the background color of a page to change when an element is scrolled into view. All of these .fullheight sections have min-height: 100vh.

code:

<section class="fullheight color-target" data-color="background-white">Default</section>
    
<section class="fullheight color-target" data-color="background-green">Green</section>

<section class="fullheight color-target" data-color="background-red">Red</section>

<section class="fullheight color-target" data-color="background-blue">Blue</section>

<script>
    window.addEventListener('scroll', function(event){
        observer = new IntersectionObserver(entries => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    dataColor = entry.target.getAttribute('data-color');
                        if (dataColor == 'background-green') { document.querySelector('body').style.background = '#009900'; }
                        if (dataColor == 'background-red') { document.querySelector('body').style.background = '#990000'; }
                        if (dataColor == 'background-blue') { document.querySelector('body').style.background = '#000099'; }
                } else {
                    document.querySelector('body').style.background = 'white';
                }
            });
        });
    
        document.querySelectorAll('.color-target').forEach(image => {
            observer.observe(image);
        });
    });
</script>

This does exactly what I want, but I want to do it in vanilla JS: https://codepen.io/daveredfern/pen/zBGBJV

LifeLynx fucked around with this message at 22:30 on Sep 14, 2020

# ? Sep 14, 2020 22:28

Ima Computer: Oct 28, 2007; Stop all the downloading!

Help computer.

LifeLynx posted:

I'm trying and failing to get the background color of a page to change when an element is scrolled into view. All of these .fullheight sections have min-height: 100vh.
This does exactly what I want, but I want to do it in vanilla JS: https://codepen.io/daveredfern/pen/zBGBJV

IntersectionObserver is an alternative to using a scroll event handler, so you can get rid of that. Instantiating a new observer on every scroll event sounds like a performance nightmare.

You're also setting the background color on every iteration of entries, so only the intersecting status of the last entry will ever change the background color.

Without setting a threshold and with 100vh elements, you'll also have different sections competing for who sets the background color, so maybe try 50%?

And you can probably save yourself some if statements by storing the color directly in the data attribute.

code:

<section class="fullheight color-target" data-color="#ffffff">Default</section>
<section class="fullheight color-target" data-color="#009900">Green</section>
<section class="fullheight color-target" data-color="#990000">Red</section>
<section class="fullheight color-target" data-color="#000099">Blue</section>
<script type="text/javascript">
let prevColor;

const observer = new IntersectionObserver(entries => {
  let nextColor = '#ffffff';

  entries.forEach(entry => {
    if (entry.isIntersecting) {
      nextColor = entry.target.getAttribute('data-color');
    }
  });

  if (nextColor !== prevColor) {
    prevColor = nextColor;
    document.body.style.backgroundColor = nextColor;
  }
}, { threshold: 0.5 });

document.querySelectorAll('.color-target').forEach(image => {
  observer.observe(image);
});
</script>

# ? Sep 14, 2020 23:59

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

fireraiser posted:

IntersectionObserver is an alternative to using a scroll event handler, so you can get rid of that. Instantiating a new observer on every scroll event sounds like a performance nightmare.

You're also setting the background color on every iteration of entries, so only the intersecting status of the last entry will ever change the background color.

Without setting a threshold and with 100vh elements, you'll also have different sections competing for who sets the background color, so maybe try 50%?

And you can probably save yourself some if statements by storing the color directly in the data attribute.

Thanks! You're right, the scroll event was causing it to retry with every scroll event. I eventually figured something out:

code:

<section id="header">Header</section>

<section class="fullheight">Hero</section>

<section id="color-change">
<aside class="fullheight color-target" data-color="background-blue">Blue</aside>
<aside class="fullheight color-target" data-color="background-red">Red</aside>
<aside class="fullheight color-target" data-color="background-white">White</aside>
<aside class="fullheight color-target" data-color="background-green">Green</aside>
</section>

<section id="footer" class="fullheight">Footer</section>

<script>
    observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                var regx = new RegExp('\\b' + 'background-' + '[^ ]*[ ]?\\b', 'g');
                entry.target.className = entry.target.className.replace(regx, '');
                document.querySelector('#color-change').className = document.querySelector('#color-change').className.replace(regx, '');
                dataColor = entry.target.getAttribute('data-color');
                document.querySelector('#color-change').classList.add(dataColor);
            }
        });
    }, { threshold: 0.5 });

    document.querySelectorAll('.color-target').forEach(image => {
        observer.observe(image);
    });
</script>

With the #color-change wrapper, I can have things above and below it that don't interfere with the color changer, and I don't have to worry about changing the color of the entire body element. The best part of doing it this way is that when I scroll past the #color-change section, it keeps whatever the last background color was. I added the regex to be able to assign colors in the CSS so I can change colors universally. Am I using threshold correctly there? It seems to be working okay no matter which direction I scroll.

# ? Sep 15, 2020 00:13

Sergeant Rock: Apr 28, 2002; "... call the expert at kissing and stuff..."

I think that would be much cleaner using native CSS variables and a 'style' property on the elements to store the colours. Unless you need IE support?

# ? Sep 15, 2020 08:51

Empress Brosephine: Mar 31, 2012; by Jeffrey of YOSPOS

I'm going through the Odin project and they're making a huge deal about learning prototype, but I'm a little confused, why would you use prototype when you could just use a class and the super function?

# ? Sep 16, 2020 22:16

Tanners: Dec 13, 2011; woof

Empress Brosephine posted:

I'm going through the Odin project and they're making a huge deal about learning prototype, but I'm a little confused, why would you use prototype when you could just use a class and the super function?

I think its worth understanding how prototypical inheritance works so you know how to avoid some of the less obvious footguns with it. I don't think anyone writes new javascript that way, but if you ever have to deal with legacy poo poo its worth knowing how screwed over you are exactly.

# ? Sep 17, 2020 00:15

Empress Brosephine: Mar 31, 2012; by Jeffrey of YOSPOS

Sweet thanks Tanners

# ? Sep 17, 2020 00:22

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

Empress Brosephine posted:

I'm going through the Odin project and they're making a huge deal about learning prototype, but I'm a little confused, why would you use prototype when you could just use a class and the super function?

Class and super are essentially syntactic sugar over the normal prototype approach, you're learning the foundation of a system that does not match other languages with "classes".

# ? Sep 17, 2020 06:16

Ytlaya: Nov 13, 2005

edit: After some convoluted nonsense I got the "variable number and type of columns for DataTables without using logic in the template language" thing working. The ugly part that bugs me is that I'm storing the "first attribute column index" (i.e. the index where the "non-static" column types start) in the "sample" objects (that go into the rows). The column render function can then pull the index out of the data that are passed into the DataTables instance. I'm pretty sure this doesn't actually cause any functional problems, but I don't like it "conceptually" (since "first column index" is not an actual attribute of a mouse/rat/human data sample).

Ytlaya fucked around with this message at 23:32 on Sep 17, 2020

# ? Sep 17, 2020 21:24

Empress Brosephine: Mar 31, 2012; by Jeffrey of YOSPOS

This is probably a dumb question but I'm learning Javascript and I can't figure out how to search for a answer to this using vanilla JS and not Node but:

I have three files

Index.js (which imports sixflags.js)
SixFlags.js (which exports a class called Attraction)
SixFlagsNewEngland.js (which imports SixFlags.js and allows the creation of new Attraction classes for each ride)

Is it possible to access the ride classes created in SixFlagsNewEngland in Index.js? If that makes sense? Basically I want to be able to be in Index.js and go like console.log(SixFlagsNewEngland.houdiniRide) and have the created class object in SixFlagsNewEngland show up without exporting each individual item or should I just skip doing a chain of modules like this and just incorporate SixFlagsNewEngland into index?

Thanks all

Empress Brosephine fucked around with this message at 21:35 on Sep 29, 2020

# ? Sep 29, 2020 21:33

The Fool: Oct 16, 2003

If I'm reading your post correctly, index.js should import SixFlagsNewEngland.js not SixFlags.js and it will be fine.

# ? Sep 29, 2020 22:26

Empress Brosephine: Mar 31, 2012; by Jeffrey of YOSPOS

Kinda, I think I might've figured it out. The idea was that SixFlags.Js would contain the Class logic that creates the Object per ride and then each SixFlags park would have its own seperate JS file with new classes only pertaining to that park. But I think I got around that by just adding the new classes to another object titled the name of the park and importing those.

If that makes any sense at all lol.

# ? Sep 29, 2020 22:54

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!

I tried to get a css file to work with webpack and typescript, which forced me to update all my things to try to get a css-loader and css-typescript-whatever-the-gently caress that were supposed to play well together, and then it still sucked, generated a .d.ts file in among my source code eventually that stopped the typescript code from complaining about the import some-css file that apparently I was required to do, and also mangled the css names, but the mangled css names weren't matched to the html file that tried to set a class on an element so it basically broke stuff that worked fine before webpack touched it.

In the end I came to the conclusion that "gently caress it I'm just going to write my css stuff in typescript functions, applying styles to elements directly from typescript code, because that'll work okay with the thing I'm doing, gently caress webpack and gently caress all of this." I think maybe it's trying to make me use react so I'd have to do like class="{some react style reference to the class name}" rather than class="the_actual_class_name_i_wrote_in_the_css_file"? And then the mangled names are like 15 characters long and unreadable instead of 5 characters long and meaningful. Thanks for your help webpack!

# ? Sep 30, 2020 01:08

MikeJF: Dec 20, 2003

Hey, can I get a quick favour: can someone with a decent standalone graphics card post screenshots of their WebGL 1 and 2 reports at https://webglreport.com ? I wanna see something and I only have laptops and tablets for a little while.

Don't need to worry about capturing the long list of functions.

# ? Oct 2, 2020 03:39

Impotence: Nov 8, 2010; Lipstick Apathy

MikeJF posted:

Hey, can I get a quick favour: can someone with a decent standalone graphics card post screenshots of their WebGL 1 and 2 reports at https://webglreport.com ? I wanna see something and I only have laptops and tablets for a little while.

Don't need to worry about capturing the long list of functions.

# ? Oct 2, 2020 10:54

MikeJF: Dec 20, 2003

Thanks.

# ? Oct 2, 2020 11:59

i vomit kittens: Apr 25, 2019

i have a Ubuntu server that I'm trying to run a Node project from. It works fine on both my Windows desktop and Raspberry Pi, but I have been trying for loving hours and it refuses to compile on the server. I get an error that the module "@material-ui/core/Checkbox" is not found. It is, though. I've looked in the node_modules folder and it's right there. Things I have tried to fix this include:

1) Force a cache clean and delete the package_lock.json, then run npm install again (tried about 10 times)
2) Delete just the @material-ui/core package and reinstall it (also tried about 10 times)
2) Completely uninstall Node and reinstall it (tried 5 times, both the same and different versions from what is on my own computers)
3) Delete the project from the server and clone it again with git

I feel like I'm going loving crazy.

# ? Oct 12, 2020 11:20

ynohtna: Feb 16, 2007; backwoods compatible; Illegal Hen

i vomit kittens posted:

I feel like I'm going loving crazy.

I've been here and I feel for ya, comrade.

Misc first-pass things I would try are running npm shrinkwrap to ensure absolute ; and running npm doctor on each environment to try and determine where the setup deviation lies.

# ? Oct 12, 2020 11:37

Ola: Jul 19, 2004

i vomit kittens posted:

i have a Ubuntu server that I'm trying to run a Node project from. It works fine on both my Windows desktop and Raspberry Pi, but I have been trying for loving hours and it refuses to compile on the server. I get an error that the module "@material-ui/core/Checkbox" is not found. It is, though. I've looked in the node_modules folder and it's right there. Things I have tried to fix this include:

1) Force a cache clean and delete the package_lock.json, then run npm install again (tried about 10 times)
2) Delete just the @material-ui/core package and reinstall it (also tried about 10 times)
2) Completely uninstall Node and reinstall it (tried 5 times, both the same and different versions from what is on my own computers)
3) Delete the project from the server and clone it again with git

I feel like I'm going loving crazy.

If it's under devDependencies in package.json, try moving it to dependencies.

# ? Oct 12, 2020 14:05

i vomit kittens: Apr 25, 2019

I checked both of the above but nothing stood out/it wasn't in the dev dependencies

I found out that I can just build it on one of my computers and transfer the static files to the server to add to my backend, which seems to work fine. A stupid, time-consuming bandaid fix but it's better than nothing. It's just odd because an old version of this project compiled on an older DO droplet I had just fine (~6 months ago). It's a new droplet, but I built it off of the same default image as the last one.

# ? Oct 12, 2020 22:19

spiritual bypass: Feb 19, 2008; Grimey Drawer

Do the npm and nodejs versions match between the environments?

# ? Oct 12, 2020 23:07

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

and do all envs have the same package lock?

# ? Oct 13, 2020 14:06

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

Edit: Missed the call to start the function, I'm an idiot

LifeLynx fucked around with this message at 21:44 on Oct 13, 2020

# ? Oct 13, 2020 21:39

Doom Mathematic: Sep 2, 2008

i vomit kittens posted:

i have a Ubuntu server that I'm trying to run a Node project from. It works fine on both my Windows desktop and Raspberry Pi, but I have been trying for loving hours and it refuses to compile on the server. I get an error that the module "@material-ui/core/Checkbox" is not found. It is, though. I've looked in the node_modules folder and it's right there. Things I have tried to fix this include:

1) Force a cache clean and delete the package_lock.json, then run npm install again (tried about 10 times)
2) Delete just the @material-ui/core package and reinstall it (also tried about 10 times)
2) Completely uninstall Node and reinstall it (tried 5 times, both the same and different versions from what is on my own computers)
3) Delete the project from the server and clone it again with git

I feel like I'm going loving crazy.

When you say "compile", do you mean this is a front-end project and you're trying to webpack it? Can you whittle this down to a minimal reproduction?

# ? Oct 13, 2020 23:15

i vomit kittens: Apr 25, 2019

Doom Mathematic posted:

When you say "compile", do you mean this is a front-end project and you're trying to webpack it? Can you whittle this down to a minimal reproduction?

Finally had the time to do this to figure out the problem and it is much stupider than I ever could have imagined. I had this in the file that was throwing the error:

code:

import Checkbox from "@material-ui/core/checkbox";

Which should have been:

code:

import Checkbox from "@material-ui/core/Checkbox";

For some reason, the former still works on Windows?

# ? Oct 20, 2020 14:43

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

i vomit kittens posted:

Finally had the time to do this to figure out the problem and it is much stupider than I ever could have imagined. I had this in the file that was throwing the error:
code:
import Checkbox from "@material-ui/core/checkbox";
Which should have been:
code:
import Checkbox from "@material-ui/core/Checkbox";
For some reason, the former still works on Windows?

Windows runs in case-insensitive mode by default.

# ? Oct 20, 2020 15:09

Empress Brosephine: Mar 31, 2012; by Jeffrey of YOSPOS

I went through some basic Javascript lessons and am trying to teach myself react and Gatsby but I'm a little confused as to where you're supposed to put your actual Javascript. Code that isn't jsx. Is it all in modules that gets imported?

# ? Oct 20, 2020 15:43

barkbell: Apr 14, 2006; woof

in your .js or .jsx files

# ? Oct 20, 2020 15:56

i vomit kittens: Apr 25, 2019

Munkeymon posted:

Windows runs in case-insensitive mode by default.

yeah I knew it did with filenames but never considered that also applied to import statements. WebStorm auto-imports those components like "import {Checkbox} from '@material-ui/core'" and the Material UI documentation says the other way is preferred, so I've been changing them myself and missed the capital in this one spot :argh:

i vomit kittens fucked around with this message at 16:36 on Oct 20, 2020

# ? Oct 20, 2020 16:34

Roadie: Jun 30, 2013

i vomit kittens posted:

Finally had the time to do this to figure out the problem and it is much stupider than I ever could have imagined. I had this in the file that was throwing the error:
code:
import Checkbox from "@material-ui/core/checkbox";
Which should have been:
code:
import Checkbox from "@material-ui/core/Checkbox";
For some reason, the former still works on Windows?

This kind of stuff is why you always go through the hassle of dumping in strict ESLint presets. For example, eslint-plugin-import will check it by default, and is included in eslint-config-airbnb.

Empress Brosephine posted:

I went through some basic Javascript lessons and am trying to teach myself react and Gatsby but I'm a little confused as to where you're supposed to put your actual Javascript. Code that isn't jsx. Is it all in modules that gets imported?

Generally with React (as well as Node stuff in general) you do this kind of thing:

JavaScript code:

// src/components/BigYellowBox.jsx

import generateSomeText from '../util/generateSomeText'

export default () => {
  const text = generateSomeText()

  return <div style="background: yellow">{text}</div>
}

JavaScript code:

// src/util/generateSomeText.js

export default function generateSomeText() {
  return `Here's some text`
}

Roadie fucked around with this message at 19:15 on Oct 20, 2020

# ? Oct 20, 2020 19:13

Empress Brosephine: Mar 31, 2012; by Jeffrey of YOSPOS

Okay sweet that was exactly what I was wondering, thanks for the help. I guess a large part of it is dealing with props and such

# ? Oct 20, 2020 19:38

Skyarb: Sep 20, 2018; MMMPH MMMPPHH MPPPH GLUCK GLUCK OH SORRY I DIDNT SEE YOU THERE I WAS JUST CHOKING DOWN THIS BATTLEFIELD COCK DID YOU KNOW BATTLEFIELD IS THE BEST VIDEO GAME EVER NOW IF YOULL EXCUSE ME ILL GO BACK TO THIS BATTLECOCK

I am back to writing typescript after a long while of NOT doing that.

what the does it mean when a function has `<>`?

for instance:

code:

const something = doAThing<{ foo: string, bar: string }>();

# ? Oct 20, 2020 20:51

Adbot: ADBOT LOVES YOU

# ? Apr 26, 2024 08:36

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

I think that's a generic function and you're providing a type it needs at call time.

# ? Oct 20, 2020 20:55

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

«‹›277 »