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 »

barkbell: Apr 14, 2006; woof

Check this article out dawg https://developer.mozilla.org/en-US/docs/Web/API/Document/forms

# ? Feb 5, 2021 13:52

Adbot: ADBOT LOVES YOU

# ? Jun 4, 2024 00:59

HappyHippo: Nov 19, 2003; Do you have an Air Miles Card?

Away all Goats posted:

Thank you for the help. I did some testing and it does seem that the problem seems to in the way the radio tag passes the information in to the function since it keeps returning a NaN value. I tried switching it to a select tag but no dice. Tried the form.elements method and adding an eventlistener and still keeps returning a NaN.

I've been smashing my head against this wall for a few hours now so I think I'll take a break. Thanks again though. Maybe I'll just have each calculator on its own separate page

Open up the developer tools and put a breakpoint on the first line at the start of the CalculateMetricBMR function. Step through it one line at a time until you see where the NaN appears.

Also, use strict mode (place "use strict"; at the top of your js file). This will catch more errors.

Also, this doesn't do what you think it does:

code:

default: "medium";

(default is used when none of the cases above are selected.)

Also your problem may be this:

code:

<input name="heightCM" size="4" tabindex="15" type="number" id="heightCM">

You've forgotten the slash at the end:

code:

<input name="heightCM" size="4" tabindex="15" type="number" id="heightCM" />

Your input fields for imperial don't have this problem

HappyHippo fucked around with this message at 17:41 on Feb 5, 2021

# ? Feb 5, 2021 17:19

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

I'm finding the jump from using express & pug to nextjs hard and things are a lot less straight forward imho. The whole getstaticpaths and getstaticprops thing seems odd. I guess with time it'll become second knowledge like using function blah = (req,res,next) but jeesh!

# ? Feb 5, 2021 17:41

barkbell: Apr 14, 2006; woof

why does it seem odd

# ? Feb 5, 2021 17:50

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

It's a lot more abstract imho. It could be because i'm still relatively new to javascript but something like this:

code:

export async function getStaticProps({ params }) {
  const postData = getPostData(params.id)
  return {
    props: {
      postData
    }
  }
}

seems a lot harder than the equivalent in express where I could just go:

code:


export function blogpage(req,res,next) {

// code logic here to create postdata variable

res.render('templatenamehere', {postdata})
}

and have access to postdata directly within PUG. Granted I know next is way more powerful than pug lol.

Is there a way to use postgres with nextjs also?

# ? Feb 5, 2021 18:37

Impotence: Nov 8, 2010; Lipstick Apathy

I really like vue.js much more than react, if not least for the fact that I'm basically writing a template with ifs and loops for components without JSX oddities that just seem weird to me like {whatever.map(<more thing>)}

# ? Feb 5, 2021 18:59

barkbell: Apr 14, 2006; woof

Empress Brosephine posted:

It's a lot more abstract imho. It could be because i'm still relatively new to javascript but something like this:
code:
export async function getStaticProps({ params }) {
  const postData = getPostData(params.id)
  return {
    props: {
      postData
    }
  }
}
seems a lot harder than the equivalent in express where I could just go:
code:
export function blogpage(req,res,next) {

// code logic here to create postdata variable

res.render('templatenamehere', {postdata})
}
and have access to postdata directly within PUG. Granted I know next is way more powerful than pug lol.

Is there a way to use postgres with nextjs also?

The equivalent would get to getServerProps() since you are doing server-side rendering when the page is requested. getStaticProps() generates the HTML at build time.

Check out the API routes for Next.js they are very similar to express.

You can definitely use any datasource your want with next.js, check this out
https://vercel.com/guides/nextjs-prisma-postgres

Biowarfare posted:

I really like vue.js much more than react, if not least for the fact that I'm basically writing a template with ifs and loops for components without JSX oddities that just seem weird to me like {whatever.map(<more thing>)}

One extends es6+ js syntax and the other is using a custom html templating language.

# ? Feb 5, 2021 19:42

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

Biowarfare posted:

I really like vue.js much more than react, if not least for the fact that I'm basically writing a template with ifs and loops for components without JSX oddities that just seem weird to me like {whatever.map(<more thing>)}

Why does javascript seem weird to you?

# ? Feb 5, 2021 19:54

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

Thank you for the help I'll take a look

# ? Feb 5, 2021 19:55

Impotence: Nov 8, 2010; Lipstick Apathy

Lumpy posted:

Why does javascript seem weird to you?

It's just personal opinion. I took to vue a lot more readily, it felt slightly more natural to do the vast majority of my JS stuff in JS, and just write "normal" HTML with a bit of `:if="user.loggedIn"` peppered into it like an actual template. I use computed a lot for this also.

I don't know how to describe it. I'm fine writing whatever.map(do => a thing) in the course of normal JS and outputting but using multiple lines of chained .map/filter inside mustaches and also doing stuff like `{a.filter(x => x.hasUserTitle).map(x => <UserTitle poop={x}>})` is strange to get used to, even though I use react daily.

# ? Feb 5, 2021 21:48

TheFluff: Dec 13, 2006; FRIENDS, LISTEN TO ME
I AM A SEAGULL
OF WEALTH AND TASTE

Vue is one heck of a lot easier to learn than React is, and gives you a whole lot more stuff builtin. You have your HTML and your JS and your CSS all in the same file but they're separate from each other and the HTML is mostly just normal HTML. You get scoped CSS for free too, which is really cool and good. Typechecking for props is builtin, and there are official libraries for a lot of usual boilerplate stuff like a state store (vuex) and a router and so on, so you don't need to go on a blog post reading adventure to figure out what third party library is "in" this year. The docs are also really good and much friendlier than React's.

Oh, and React components don't have custom events, instead you pass a callback function down as a prop like some kind of goddamned caveman, or you install some dispatcher library from npm.

The main disadvantage of vue is that the template language isn't as sophisticated as JSX's full-on javascript, but I've never really felt it was much of a limitation. Type checking the template doesn't work well either but I hear they've added native typescript support in Vue 3.

TheFluff fucked around with this message at 23:47 on Feb 5, 2021

# ? Feb 5, 2021 23:30

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

Vue sounds heavenly.

# ? Feb 5, 2021 23:34

TheFluff: Dec 13, 2006; FRIENDS, LISTEN TO ME
I AM A SEAGULL
OF WEALTH AND TASTE

I much prefer it over React, yeah. There are certain use cases where React's flexibility and pure-JS compositional nature can make it preferable but in most cases I really don't see any compelling technical reason to choose it over Vue these days. Vue is just a lot easier to work with and involves less bikeshedding over how to best implement boilerplate poo poo. React is still more prestigious though and most big organizations probably prefer it because of inertia and widespread adoption.

e: laffo, apparently vue also supports jsx and you can use that too if you really want to. TIL!

TheFluff fucked around with this message at 23:53 on Feb 5, 2021

# ? Feb 5, 2021 23:46

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

Question...how come I can't access "props" in this function?

code:

import Header from '../components/header"

export default function Layout({ children, home, props }) {
  return (
    <div className={styles.container}>
      <Head>
      </Head>
      <Header username={props.username} />

This is what i'm trying to send over to Layout

code:

const username = "PawlCat";
  return (
    <Layout home username={username}/>

Thanks

EDIT: I figured it out by setting export default function Layout ({children, home, username}) and that works, but i'm still unsure why I couldn't access it from "props"

Empress Brosephine fucked around with this message at 01:14 on Feb 6, 2021

# ? Feb 6, 2021 01:06

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

Empress Brosephine posted:

Question...how come I can't access "props" in this function?
code:
import Header from '../components/header"

export default function Layout({ children, home, props }) {
  return (
    <div className={styles.container}>
      <Head>
      </Head>
      <Header username={props.username} />
This is what i'm trying to send over to Layout
code:
const username = "PawlCat";
  return (
    <Layout home username={username}/>
Thanks

EDIT: I figured it out by setting export default function Layout ({children, home, username}) and that works, but i'm still unsure why I couldn't access it from "props"

Because you were destructuring an undefined variable called 'props' from the props that were passed in the way you created the component.

This:

code:

export default function Layout({ children, home, props }) {
 ...
]

is the same as this:

code:

export default function Layout(props) {
 const  children = props.children;
 const home  = props.home;  
 const  props  = props.props;  //now you have an undefined props.
 ...
}

is the same as this:

code:

export default function Layout(props) {
  const{ children, home, props } = props;  //now you have an undefined props.
 ...
}

if you want to access the actual props:

code:

export default function Layout(props) {
 const { children, home  } = props;
 console.log(props.buttes);
 ...
}

Lumpy fucked around with this message at 01:37 on Feb 6, 2021

# ? Feb 6, 2021 01:35

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

interesting, thank you for that help

# ? Feb 6, 2021 01:48

Doom Mathematic: Sep 2, 2008

If you want to be cool, you could try

JavaScript code:

export default function Layout({ children, home, ...otherProps }) {
  // now `children` and `home` have the values you want,
  // and `otherProps` contains all the other props
}

# ? Feb 6, 2021 01:52

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

What is the "..." syntax? i tried searching for it but couldn't get any results

# ? Feb 6, 2021 01:54

The Fool: Oct 16, 2003

Empress Brosephine posted:

What is the "..." syntax? i tried searching for it but couldn't get any results

Spread operator : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

# ? Feb 6, 2021 01:57

susan b buffering: Nov 14, 2016

Empress Brosephine posted:

What is the "..." syntax? i tried searching for it but couldn't get any results

It�s for variadic functions.

# ? Feb 6, 2021 01:57

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

Thabks

# ? Feb 6, 2021 02:11

Impotence: Nov 8, 2010; Lipstick Apathy

TheFluff posted:

React is still more prestigious though and most big organizations probably prefer it because of inertia and widespread adoption.

Oddly, this seems different based on userbase - from poking around the ecosystem, opening issues, looking for vue plugins, it seems like every major chinese company is all in on vue and avoiding angular/react (react in rare cases) for unknown reasons. more often than not if i find a plugin it'll have demos hosted on tencent cloud or alibaba, or have default npm instructions to pull from the taobao npm mirror. I don't see anything even remotely close to this in the angular/react world

Impotence fucked around with this message at 05:36 on Feb 6, 2021

# ? Feb 6, 2021 05:34

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

Nvm

Empress Brosephine fucked around with this message at 03:59 on Feb 10, 2021

# ? Feb 10, 2021 02:55

Analytic Engine: May 18, 2009; not the analytical engine

Does anyone know the maximum amount of memory JS can take on a user's browser?

# ? Feb 11, 2021 00:14

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

There's no one answer, since the practical limits are going to vary massively depending on what hardware the user has and what other things they're doing with their computer at the same time. In general, you should try not to be wasteful with the user's resources.

What motivates the question?

# ? Feb 11, 2021 01:31

MrMoo: Sep 14, 2000

I found v8 maxes out at 8GB (per the :chome:

Task Manager), even on a 16GB host.

There�s a case about it somewhere, don�t have the link to hand.

MrMoo fucked around with this message at 04:27 on Feb 12, 2021

# ? Feb 11, 2021 02:27

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

Wrapping my hands around fastify as an alternative for express. The problem I'm having is that my api uses both http and websockets, I've got websockets working properly and that's fantastic but the issue is fastify locks everything down.

For example fastify uses this massive json schema verification lib called ajv. So I figure if I'm using that already I may as well also use that for my websocket endpoints. But I can't use fastify's implementation of ajv willy nilly, I need to re-implement the thing manually. I can't just grab it out of the fastify instance.

I have to separately install ajv and build the tooling around it myself.

Same issue where it comes to fastify plugins like fastify-sensible, a library that implements a bunch of common error messages like BadRequest or Unauthorized.

I figure, since I'm using it anyway I may as well use this for my websocket requests too. But I can't, because fastify-sensible is a plugin for fastify and without the fastify instance I don't have access to what it does. Which makes me question why fastify is an instance to begin with, are people running multiple http servers on the same node?

I dunno maybe they are. But anyway I'm having problems.

Nolgthorn fucked around with this message at 03:15 on Feb 11, 2021

# ? Feb 11, 2021 03:08

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

Well to solve one problem I'll just use a normal lib like http-errors instead of fastify-sensible.

Nolgthorn fucked around with this message at 03:50 on Feb 11, 2021

# ? Feb 11, 2021 03:10

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

*double post*

# ? Feb 11, 2021 03:49

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!

Analytic Engine posted:

Does anyone know the maximum amount of memory JS can take on a user's browser?

Chrome will cut you off and crash the JS at a bit less than 2GB regardless of how much RAM the system has, unless you ran it with special flags. (And it will crash if you hit 2GB even if 1.5GB of it was ready to be garbage-collected and just hadn't been yet, and there's no way to force it to run the garbage collector without, again, special flags, and it also doesn't tell you that hitting a memory limit was the problem, so if you run into that it's just a really great experience all round.)

# ? Feb 11, 2021 06:03

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

Have any of you dabbled with Three.js and react 3D? Is that a huge memory hog?

# ? Feb 11, 2021 14:31

MrMoo: Sep 14, 2000

I have a 800GB webpage with THREE.js, so I have all the fun. The 1.7Gb limit above is out of date, however Google will show you it a lot with NodeJS.

# ? Feb 11, 2021 15:25

Bruegels Fuckbooks: Sep 14, 2004; Now, listen - I know the two of you are very different from each other in a lot of ways, but you have to understand that as far as Grandpa's concerned, you're both pieces of shit! Yeah. I can prove it mathematically.

MrMoo posted:

I have a 800GB webpage with THREE.js, so I have all the fun. The 1.7Gb limit above is out of date, however Google will show you it a lot with NodeJS.

When I see limits like ~1.7gb, that heavily stinks of limits intrinsic to 32-bit processes on windows to me, as 32-bit processes on windows are subject to heap fragmentation and dll calls start failing as the process runs out of virtual address space. I wouldn't expect there to be limits like that using 64-bit processes or saner platforms...

# ? Feb 11, 2021 17:11

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

The default max heap size in node is something like 1.5gb, but you can up it.

# ? Feb 11, 2021 17:59

MrMoo: Sep 14, 2000

The limit was deliberately low matching 32-bit platforms,

https://v8.dev/blog/heap-size-limit

Renderer side is dynamic now:

https://source.chromium.org/chromiu...35875668f75439f

Textures in WebGL are limited to 2GB I think, which is surprisingly and annoying. Maybe it's just not working well with a Quadro RTX with only 8GB? idk it bails out far too early.

The v8 heap limit is 4GB from this:

https://bugs.chromium.org/p/chromium/issues/detail?id=416284

My use case was storing compressed textures on the CPU and sending over to the GPU when needed. The GPU maxed out quickly, then I hit the system memory limit, then moved onto using Service Workers to cache content with better latency.

MrMoo fucked around with this message at 04:28 on Feb 12, 2021

# ? Feb 11, 2021 18:16

Analytic Engine: May 18, 2009; not the analytical engine

Awesome, thanks

# ? Feb 12, 2021 03:03

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!

MrMoo posted:

I have a 800GB webpage with THREE.js, so I have all the fun. The 1.7Gb limit above is out of date, however Google will show you it a lot with NodeJS.

How long ago did 1.7Gb as a limit go away? I encountered it at work, on 64-bit Linux machines, in a context in which deserializing about 200MB of protobuffers on the client would consume near-2GB and thereby crash the tab, about two years ago. (Because the Javascript handling of protobuffers is monstrous. If you have a need for that sort of thing I recommend Flatbuffers, where 200MB of them stays in 200MB where it belongs.)

I wouldn't think NodeJS would relate, since NodeJS is not generally running on the client.

# ? Feb 12, 2021 05:40

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

roomforthetuna posted:

How long ago did 1.7Gb as a limit go away? I encountered it at work, on 64-bit Linux machines, in a context in which deserializing about 200MB of protobuffers on the client would consume near-2GB and thereby crash the tab, about two years ago. (Because the Javascript handling of protobuffers is monstrous. If you have a need for that sort of thing I recommend Flatbuffers, where 200MB of them stays in 200MB where it belongs.)

I wouldn't think NodeJS would relate, since NodeJS is not generally running on the client.

Or just JSON. I was working on a thing that manipulated a 100+ MB JSON structure in Chrome two years ago and, while it used about as much RAM per tab as GMail, I didn't have tabs die on me.

# ? Feb 12, 2021 16:37

MrMoo: Sep 14, 2000

A very low limit was fixed in 2014:

https://bugs.chromium.org/p/v8/issues/detail?id=847

WASM 2GB limit removed in May 2020:

https://v8.dev/blog/4gb-wasm-memory#:~:text=Thanks%20to%20recent%20work%20in,512MB%20or%201GB%20of%20memory!

There�s recently a pointer compression thing:

https://www.infoq.com/news/2019/12/v8-8-0-heap-reduction/

Generally it�s brain worms hunting crbug.com for memory issues.

MrMoo fucked around with this message at 17:15 on Feb 12, 2021

# ? Feb 12, 2021 17:09

Adbot: ADBOT LOVES YOU

# ? Jun 4, 2024 00:59

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!

Munkeymon posted:

Or just JSON. I was working on a thing that manipulated a 100+ MB JSON structure in Chrome two years ago and, while it used about as much RAM per tab as GMail, I didn't have tabs die on me.

If those protobuffers had been encoded as JSON they'd have just been 2GB over the wire so that wouldn't have helped. Lots of floating point numbers in there, the worst thing to JSON. Even the gross deserialized proto is probably smaller than the JSON encoding would have been (and probably still smaller than the object the JSON 'decodes' to, as well, because the element keys in a deserialized proto are integers not multi-char strings.)

# ? Feb 13, 2021 06:13

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

«‹›277 »