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 »

Osmosisch: Sep 9, 2007; I shall make everyone look like me! Then when they trick each other, they will say "oh that Coyote, he is the smartest one, he can even trick the great Coyote."; Grimey Drawer

gbut posted:

Speaking of http/2/3, is anyone following the latest Firefox fiasco? Apparently telemetrics are interfering with its http/3 implementation, so you need to disable one or another to get a functioning browser. I was wondering what was going on and blamed it on my ISP the last few days.

e: it manifest as random dropped/hanging requests

gently caress so that's what's going on, thanks. Was driving me crazy.

Looks like it wasn't telemetrics per se actually
https://bugzilla.mozilla.org/show_bug.cgi?id=1749908#c21

Osmosisch fucked around with this message at 15:07 on Jan 13, 2022

# ? Jan 13, 2022 15:03

Adbot: ADBOT LOVES YOU

# ? May 16, 2024 15:03

gbut: Mar 28, 2008; 😤I put the UN🇺🇳 in 🎊FUN🎉

Yeah, seems like telemertics might have just triggered the issue. loving Mozilla. Now I have to look for another browser.

# ? Jan 13, 2022 15:50

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

There is no other browser, only Chrome

# ? Jan 13, 2022 20:25

Osmosisch: Sep 9, 2007; I shall make everyone look like me! Then when they trick each other, they will say "oh that Coyote, he is the smartest one, he can even trick the great Coyote."; Grimey Drawer

gbut posted:

Yeah, seems like telemertics might have just triggered the issue. loving Mozilla. Now I have to look for another browser.

Eh, one morning of weird issues until they fixed their poo poo is not sufficient to switch to one of the even more evil browsers.

# ? Jan 14, 2022 00:13

gbut: Mar 28, 2008; 😤I put the UN🇺🇳 in 🎊FUN🎉

Yeah, but Pocket, Servo team layoffs, etc sure add up.

# ? Jan 14, 2022 00:32

death cob for cutie: Dec 30, 2006; dwarves won't delve no more
too much splatting down on Zot:4

What's the best option for benchmarking and profiling when running JS locally in Node?

Background: I teach at a bootcamp (my job is primarily Python, but I have to do some JS as well) and I'm writing up some material to demonstrate some CS principles. I'm writing some exercises for students, including some solution code, and right now I'm using jsbench online to test it - so I can establish that solution A is faster than solution B, both of which are faster than C, and then pointing out to students why. I know under the hood jsbench uses Benchmark.js, and I know Benny is a nice wrapper around Benchmark.js, so that solves part of the issue.

What I really need is something that'll tear apart the execution of these functions and help me understand why X is constantly n percent faster than Y. Sometimes it's obvious enough, but I have a few examples (primarily involving recursion, and a few more coming I am sure) that I can't quite puzzle through on my own - code that looks very similar, and when I plot out very small test cases by hand they seem like they should have similar enough performance, but there ends up being a significant gap. It may be due to my poor understanding of JS internals, or it may be a lack in my CS knowledge; whatever the case, I need to know why so I can tell other people why.

Ideally what I'd like is something that will profile not the runtime of the function itself, but each statement within it - something that will show me how a function is recursing and with what parameters, how much memory it's using, etc. Some preliminary searching is showing me tools that seem to be primarily aimed at web applications, and I feel like there's got to be a solution that doesn't require me to make calls to an Express server or something. I also know there's a little profiler in Chrome, but I don't think it's designed for the level of detail I'm looking for.

Does such a thing exist? I feel like it must, I'm just not using the right terms to look for it.

# ? Jan 14, 2022 19:54

Jabor: Jul 16, 2010; #1 Loser at SpaceChem

If your problems are the sort of student exercises that do minimal actual computation, then the answer to why your recursive solution is constantly n% slower than the iterative one is "function call overhead", and the reason one recursive solution is constantly n% faster than another seemingly-the-same recursive solution is "the jitter could optimize away the recursive call for one implementation but not the other".

# ? Jan 15, 2022 14: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!

Jabor posted:

If your problems are the sort of student exercises that do minimal actual computation, then the answer to why your recursive solution is constantly n% slower than the iterative one is "function call overhead", and the reason one recursive solution is constantly n% faster than another seemingly-the-same recursive solution is "the jitter could optimize away the recursive call for one implementation but not the other".

Seems like the question being asked is "how can I inspect what the optimizer did".

# ? Jan 15, 2022 14:08

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

Are node --prof and node --prof-process the incantations you're seeking, OP? You can also look into the V8 options with node --v8-options.

I know there's toolsets like Airbrake.io and others for a more lubricated diagnostic experience, but I've not used them myself. As said, you're going to need a real workload for any performance analysis to be meaningful above the noisy JS baseline overhead.

# ? Jan 15, 2022 14:16

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!

Is there a tool like godbolt.org for inspecting what javascript precompiles to? I feel like that person's question isn't "how can I inspect the performance of the functions" but "how can I *explain* the performance of the functions", and profiling tools aren't gonna help much with that.

# ? Jan 15, 2022 15:23

aperfectcirclefan: Nov 21, 2021; by Hand Knit

Quick React question that I don't know how to correctly word this. Basically I have a react component that does a call to a controller (I guess?) that dictactes back an ability. Right now it looks like follows:

code:

import * as Abilities from '../controllers/Abilities'

export default function Cards(props) {

  const [state, dispatch] = useContext(Context);
  const cardsInHand = props.cards;

  const useofAbility = (ability) =>{

      switch (ability.toLowerCase()) {
        case 'investigate':
          return <Abilities.Investigate/>;
        case 'shoot':
            let newEnemyHealth = (state.enemyhealth - 10);
            console.log(newEnemyHealth);
            dispatch({type:"SET_ENEMY_HEALTH", payload: newEnemyHealth})
          return
        case 'analyze':
          return <Abilities.Analyze/>;
        case 'self-destruct':
          return <Abilities.SelfDestruct/>;
        default:

      }
  }

  return (
    <>
      {cardsInHand.map((card,index) => {
        return (

            <div className="cardBox" key={index.toString()}>
             
              <div className="abilityBox">
                {card_data[card].abilities.map((e) => {
                  return (
                    <div className="nameBox" key={e.toString()}>
                      <a onClick={()=>{useofAbility(ability_desc[e].name)}} data-tip={ability_desc[e].text} key={e.toString()}>{ability_desc[e].name}</a>
                      <ReactTooltip/>
                    </div>
                  );
                })}
              </div>
             </div>
        );
      })}
    </>
  );
}

Abilities.Js

code:

import { useContext, useEffect, useState } from "react";
import {Context} from '../Store';

export const Investigate =(params)=>{
    window.open('/PMScenes/Investigate.html')
    return (
        <>
            {alert("Investigion Complete.")}
        </>
    )
}

export const Shoot = (params) => {
    return <></>;
}

export const Analyze = (params) => {

    return <>{alert("Analyzed")}</>
}

export const SelfDestruct = (params) => {
    return <></>
}

You can see a mix in the switch statement of calling React Components such as <Abilities.SelfDestruct/>. My issue i'm having is that this doesn't work since I presume React is expecting something in the Return function. If I turn them into direct function calls like Ability.SelfDestruct() it'll work. But the problem with that is no code gets executed and I can't use React hooks in them since they're not React components. So, in the above switch case code, shoot will work but investigate won't. I understand I can just put all the code into that top JS file but would like to keep em seperate.

I'd like to have my abilities uh farmed out(?) to this seperate file but I can't figure out the correct way to be able to do this. I'm sorry if this makes 0 sense I just couldn't think of the right way to word it lol.Thanks

# ? Jan 16, 2022 21:47

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

aperfectcirclefan posted:

Quick React question that I don't know how to correctly word this. Basically I have a react component that does a call to a controller (I guess?) that dictactes back an ability. Right now it looks like follows:

You can see a mix in the switch statement of calling React Components such as <Abilities.SelfDestruct/>. My issue i'm having is that this doesn't work since I presume React is expecting something in the Return function. If I turn them into direct function calls like Ability.SelfDestruct() it'll work. But the problem with that is no code gets executed and I can't use React hooks in them since they're not React components. So, in the above switch case code, shoot will work but investigate won't. I understand I can just put all the code into that top JS file but would like to keep em seperate.

I'd like to have my abilities uh farmed out(?) to this seperate file but I can't figure out the correct way to be able to do this. I'm sorry if this makes 0 sense I just couldn't think of the right way to word it lol.Thanks

So there are a number of abilities, clicking on one causes some effect (like navigation or whatever). You can make a hook out of your abilities that you can call functions from, letting you reuse code and keep things separate.

JavaScript code:

// useAbilites.js
 const useAbilities = (dispatch) = { // take dispatch so we can use it in our abilities, 
  
  
  const shoot = (currentHealth) =>  dispatch({type:"SET_ENEMY_HEALTH", payload: currentHealth - 10})
  const analyze = () => dispatch({ type: "ANALYZE" });
  const alertLOL = () => alert('lol');
 
  return { shoot, analyze, alertLOL }
}
export default useAbilities

// Cards.js
import useAbilites from 'hooks/useAbilities'

export default function Cards(props) {

   const [state, dispatch] = useContext(Context);
   const { shoot, investigate, alertLOL } = useAbilities(dispatch);

   return (
      <div>
         <button onClick={() => shoot(state.enemyHealth)}>Pew Pew</button>
         <button onClick={() => analyze()}>Check that out</button>
         <button onClick={() => alertLOL}>OMG LOL</button>
      </div>
    );
}

If my assumptions are incorrect, sorry, and if you can make a dummy like me understand better what you need, I am happy to try to help further !

# ? Jan 16, 2022 23:46

aperfectcirclefan: Nov 21, 2021; by Hand Knit

Oh duh that's a great idea. I didn't even think of doing it that way. Thanks

# ? Jan 16, 2022 23:53

aperfectcirclefan: Nov 21, 2021; by Hand Knit

Figured it out I think

aperfectcirclefan fucked around with this message at 17:14 on Jan 26, 2022

# ? Jan 26, 2022 17:08

zombienietzsche: Dec 9, 2003

Was this a new question? If so, it's generally good netiquette to leave it up and edit in your answer so that it's available for others who run into the same issue.

# ? Jan 26, 2022 18:22

aperfectcirclefan: Nov 21, 2021; by Hand Knit

Apologies, I'll keep it up next time. I have a new question though!!

I have two seperate search functions that kinda work independandtly (the second one works but doesn't restore the state upon blank) but don't combine together, how do I make them combine so that if i'm searching for a tag I also see a name that the tag is supplied too and vice verse

code:



const searchStudentsByName = (e) => {
    e.preventDefault();

    let students = state.originalStudentList.students.filter(data => {
      return data.firstName.includes(e.target.value) || data.lastName.includes(e.target.value);
    })

    setstudentData({ students });
  };

  const searchStudentsByTag = (e) => {
    e.preventDefault();

    let students = state.originalStudentList.students.filter(data =>{
      return data.tags ? data.tags.find(data=> data.includes(e.target.value)) : "";
    })

    setstudentData( {students} );
  };

# ? Jan 27, 2022 16:19

fakemirage: Nov 6, 2012; Can't see the haters.

aperfectcirclefan posted:

I have two seperate search functions that kinda work independandtly (the second one works but doesn't restore the state upon blank) but don't combine together, how do I make them combine so that if i'm searching for a tag I also see a name that the tag is supplied too and vice verse

I'd suggest looking at storing e.target.value of searchStudentsByName and searchStudentsByTag as states (e.g. with useState) so the two values are accessible when you want to apply your filters.

# ? Jan 27, 2022 21:33

MREBoy: Mar 14, 2005; MREs - They're whats for breakfast, lunch AND dinner !

Anyone know of a decent example of a 2 level cascading dropdown menu for a HTML form ? All the examples I'm finding online seem to have 3 levels and I don't know enough to figure out how to chop the 3rd one off :saddowns:

# ? Feb 5, 2022 07:14

Good Sphere: Jun 16, 2018

MREBoy posted:

Anyone know of a decent example of a 2 level cascading dropdown menu for a HTML form ? All the examples I'm finding online seem to have 3 levels and I don't know enough to figure out how to chop the 3rd one off

Can you post the 3 level one you found? It may just be a quick change.

# ? Feb 6, 2022 01:06

Video Nasty: Jun 17, 2003

MREBoy posted:

Anyone know of a decent example of a 2 level cascading dropdown menu for a HTML form ? All the examples I'm finding online seem to have 3 levels and I don't know enough to figure out how to chop the 3rd one off

This is glib, and missing CSS for how it should show\hide but the basic understanding of what you want to accomplish looks like this:

HTML code:

<ul class="drop-down-menu">
<li class="drop-down-menu-item">
<li class="drop-down-menu-item">
</ul>

This website has a TON of good examples for you to copy\paste based on your immediate needs: https://www.sliderrevolution.com/resources/css-dropdown-menu/

# ? Feb 6, 2022 01:25

MREBoy: Mar 14, 2005; MREs - They're whats for breakfast, lunch AND dinner !

Good Sphere posted:

Can you post the 3 level one you found? It may just be a quick change.

https://www.w3schools.com/howto/howto_js_cascading_dropdown.asp

and

https://jsfiddle.net/mplungjan/65Q9L/

I understand the concept that the first menu will display, for example, Options A, B, and C, then the 2nd menu will be A.1/2/3, B.1/2/3 and so on, its just my attempts at modding the included JS in these examples are not working out. What I'm trying to do will have 37 primary choices with each choice having 3 to 5 sub-choices.

# ? Feb 6, 2022 05:40

fakemirage: Nov 6, 2012; Can't see the haters.

MREBoy posted:

https://www.w3schools.com/howto/howto_js_cascading_dropdown.asp

and

https://jsfiddle.net/mplungjan/65Q9L/

I understand the concept that the first menu will display, for example, Options A, B, and C, then the 2nd menu will be A.1/2/3, B.1/2/3 and so on, its just my attempts at modding the included JS in these examples are not working out. What I'm trying to do will have 37 primary choices with each choice having 3 to 5 sub-choices.

I tweaked the jsfiddle slightly, so you can get your 2 levels.

In short I...

Removed optthree from the HTML box (lines 10-14) and JavaScript (lines 27-34) since we don't want the third level
Changed the stateObject (line 1) to only represent two levels (i.e. removed cities, and turned the counties into an array instead of an object)
Changed the for...in (iteration over keys) to a for...of (iteration over values) on line 22, since I changed to using an array for counties

There are some limitations with the jsfiddle and w3schools implementations, e.g. you can't have different values for the value and text of the Option, but I assume the changes above are enough to get you going for now.

fakemirage fucked around with this message at 15:22 on Feb 6, 2022

# ? Feb 6, 2022 10:29

MREBoy: Mar 14, 2005; MREs - They're whats for breakfast, lunch AND dinner !

fakemirage posted:

I tweaked the jsfiddle slightly, so you can get your 2 levels.

Hey thanks for this, I got it working fine for my purposes. After spending an hour finding typos with quotes, brackets, and commas in my list of variables, lel

# ? Feb 6, 2022 19:27

MREBoy: Mar 14, 2005; MREs - They're whats for breakfast, lunch AND dinner !

I added this countdown timer to what I am working on-> https://www.w3schools.com/howto/howto_js_countdown.asp and was wondering if its possible to alter it in such a way that the text color changes based on how much time is left. There would be 5 stages total (more than 24 hrs, then less than 24, 12, 6, and 3 hours).

# ? Feb 9, 2022 05:24

huhu: Feb 24, 2006

code:

const Foo = (id) => {
    const data = useQuery(GET_DATA, { variables: { id } });

    const [addData] = useMutation(ADD_DATA, {
        variables: {
            id: uuidv4(),
        }
    })

    if (data.loading) return <p>Loading...</p>
    if (data.error) return <p>Error :(</p>;

    return <p>
        JSON.stringify(data)
    </p>
}

I've got this snippet of code using GraphQL and React. What I want to do is, when the page loads, I want to fetch the data, with GET_DATA, that is needed for the Foo component. If the data doesn't exist, I want to use ADD_DATA to create the data and then get back the result. I've tried a few different ways to get and add data but it either ends up in infinite loops or ADD_DATA getting called twice. How would you incorporate the addData function into this component?

# ? Feb 14, 2022 22:30

bltzn: Oct 26, 2020; For the record I do not have a foot fetish.

It would be helpful if you included some of what you've already tried. Does

code:

const Foo = (id) => {
    const {data, loading, error} = useQuery(GET_DATA, { variables: { id } });

    const [addData] = useMutation(ADD_DATA, {
        variables: {
            id: uuidv4(),
        }
    })

    if (loading) { return <p>Loading...</p> }
    if (error) { return <p>Error :(</p> }
    if (!data) { addData() }

    return <p>
        JSON.stringify(data)
    </p>
}

not work as expected?

# ? Feb 15, 2022 05:29

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

Help computer.

huhu posted:

I want to fetch the data, with GET_DATA, that is needed for the Foo component. If the data doesn't exist, I want to use ADD_DATA to create the data and then get back the result.

Maybe I'm confused about your use case, but this sounds like logic that should go on the server-side/GQL/API layer, not in the client side app?

# ? Feb 15, 2022 16:10

Ape Fist: Feb 23, 2007; Nowadays, you can do anything that you want; anal, oral, fisting, but you need to be wearing gloves, condoms, protection.

The 'State of JS' report is out for 2022: https://2021.stateofjs.com/en-US/libraries

And as usual what JS devs want and like is complete loving nonsense. I understand the popularity of Next/Nuxt, whatever, that's fine. The TSC CLI, makes sense. I have no loving idea what Vite is but the blurb on the site looks like some 'Im pretending to be solve a problem I created' just like graphQL (sorry, die mad about it) but the one part that's gotten me is that they rank Nest.js as A Tier and Angular as C tier.

You do know that Nest is basically just Angular + Express, right? Like if you like Nest and hate Angular you might have some sort of bias you're not appropriately expressing.

I hate to be that loving guy but as time goes by I increasingly just think 'I don't like Angular' means 'I don't understand it', and its fine if you don't understand it. Its a highly complex and opinionated framework.

edit: Angular is not AngularJS.

# ? Feb 18, 2022 21:40

Jadeilyn: Nov 21, 2004

I still feel like part of Angular�s reputation comes from not renaming it. A lot of people used AngularJS, and had bad experiences. That�s on Google though. Angular was never 2.0 of AngularJS, and they should have renamed it once they realized it was a total rewrite.

# ? Feb 18, 2022 22:41

Roadie: Jun 30, 2013

Ape Fist posted:

I have no loving idea what Vite is but the blurb on the site looks like some 'Im pretending to be solve a problem I created

Vite is the next iteration of Webpack, create-react-app, Parcel, etc all-in-one web build tooling, with its advancement compared to others being that it makes it much easier to hook in server-side rendering and integration with whatever backend framework you feel like using.

Ape Fist posted:

You do know that Nest is basically just Angular + Express, right? Like if you like Nest and hate Angular you might have some sort of bias you're not appropriately expressing.

Or maybe it's just that a lot of people find it a useful pattern for backend work but not frontend sites.

# ? Feb 18, 2022 22:54

barkbell: Apr 14, 2006; woof

ng sucks

# ? Feb 18, 2022 22:56

camoseven: Dec 30, 2005; RODOLPHONE RINGIN'

I think we can all agree that typescript kicks rear end, at least

# ? Feb 19, 2022 01:08

Video Nasty: Jun 17, 2003

Typescript is way more fun but I'm stuck in Angular 1.5 land at my job and I make do. :shobon:

# ? Feb 19, 2022 01:10

fsif: Jul 18, 2003

Ape Fist posted:

I have no loving idea what Vite is but the blurb on the site looks like some 'Im pretending to be solve a problem I created' just like graphQL

...

I hate to be that loving guy but as time goes by I increasingly just think 'I don't like Angular' means 'I don't understand it',

Hmm.

# ? Feb 19, 2022 01:42

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

I think I understand vanilla JS, React, and NextJS enough to attempt Typescript. Should I convert a project or is it better to start fresh? Looking over the typescriptlang.org site I'm not sure what it does for me that ESLint doesn't already (for a small NextJS site at least), but I need to see what the fuss is all about.

# ? Feb 19, 2022 01:51

camoseven: Dec 30, 2005; RODOLPHONE RINGIN'

LifeLynx posted:

I think I understand vanilla JS, React, and NextJS enough to attempt Typescript. Should I convert a project or is it better to start fresh? Looking over the typescriptlang.org site I'm not sure what it does for me that ESLint doesn't already (for a small NextJS site at least), but I need to see what the fuss is all about.

Have you gone through this: https://www.typescriptlang.org/docs/handbook/intro.html ? It's pretty good.

# ? Feb 19, 2022 01:57

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Video Nasty posted:

Typescript is way more fun but I'm stuck in Angular 1.5 land at my job and I make do.

I'm sure you know this, but AngularJS is EOL

# ? Feb 19, 2022 13:55

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

Ape Fist posted:

The 'State of JS' report is out for 2022: https://2021.stateofjs.com/en-US/libraries

Do not seek wisdom or insight in poorly aggregated, self-reported, qualitative hype-driven crowds, friend.

# ? Feb 19, 2022 16:10

Video Nasty: Jun 17, 2003

The Merkinman posted:

I'm sure you know this, but AngularJS is EOL

I know, it's great! All the documentation to ever be written about it is already published and available online.
It's part of the engine in the software I use for work, so we're restricted to ECMA5 and I'm happy as a clam about it.

# ? Feb 19, 2022 18:06

Adbot: ADBOT LOVES YOU

# ? May 16, 2024 15:03

Data Graham: Dec 28, 2009; 📈📊🍪😋

Video Nasty posted:

I know, it's great! All the documentation to ever be written about it is already published and available online.
It's part of the engine in the software I use for work, so we're restricted to ECMA5 and I'm happy as a clam about it.

I may quote this post in my next job interview about why I'm "more of a back-end guy"

# ? Feb 20, 2022 14:14

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

«‹›277 »