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 »

RobertKerans: Aug 25, 2006; There is a heppy lend
Fur, fur aw-a-a-ay.

Combat Pretzel posted:

I went through builtins.h of V8 earlier, and found out about this Temporal thing.

For the love of god, hurry up finishing this proposal and turn it into a loving standard already.

I'm the same, but everyone seems very jazzed about it & all the engines that matter seem to be going all-in testing so I'm trying to sit on my hands and be patient (and not slyly shove the test implementation into one of the less-important prod apps) because they really need to get this one right first time

# ? Dec 1, 2021 02:05

Adbot: ADBOT LOVES YOU

# ? May 15, 2024 10:04

camoseven: Dec 30, 2005; RODOLPHONE RINGIN'

I hadn't heard of that, but a quick search on it and I'm :swoon:

Is this supposed to be able to replace Moment.js? Because I would loving love to replace Moment.js

# ? Dec 1, 2021 04:32

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

camoseven posted:

I hadn't heard of that, but a quick search on it and I'm

Is this supposed to be able to replace Moment.js? Because I would loving love to replace Moment.js

My last company switched out moment for Luxon. I think it's what's recommended now if you want to get your bundle size down in the interim.

# ? Dec 1, 2021 04:51

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

EDIT: Solved this.

Supersonic fucked around with this message at 19:28 on Dec 24, 2021

# ? Dec 24, 2021 09:12

Sheep: Jul 24, 2003

e: As usual posting my question on the internet caused the solution to appear in my brain 5 seconds later.

# ? Jan 1, 2022 21:52

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

Supersonic posted:

EDIT: Solved this.

Sheep posted:

e: As usual posting my question on the internet caused the solution to appear in my brain 5 seconds later.

The important thing is that you edited out your questions and didn't provide your answers so nobody else can learn. :colbert:

# ? Jan 1, 2022 22:01

Sheep: Jul 24, 2003

Fair enough. Preface: this project has been my first time using Javascript, coming from a (being bad at) C/Rust/Python background.

It was pretty bad. Needed to replicate tail functionality in GNOME so I built this terrible version with Gio.File.load_contents() and made sure the file was only ever one line long, then hooked it into a file monitor on change signals, at which time the entire (single-line) file would be loaded into memory. It worked but was, again, bad.

The correct move seems to have been to make a Gio.new.file_for_path(), run read(null) on that to get a FileStream, do a seek(0, 2, null) on that to get to the end of any preexisting contents, then do a Gio.DataInputStream.new() out of that, after which I can call read_line(null) to get the last line coming in, which is a list(?) of [byteArray, length]. Anyways, this version works better and keeps IO to a minimum which is cool. Obviously won't work without some more logic if multiple lines are appended in the same change, but that will never happen in practice.

Next up will be using Gtk to make a File Chooser so I don't have to type the path to the file in question out, but all my attempts thus far have caused the desktop environment to crash entirely, which is always a good sign :v:

I may just not bother though because it's looking to be a ton of work.

edit: I give up on the file chooser; this is far too much work just to be able to click a file instead of typing a full path out.

Sheep fucked around with this message at 01:31 on Jan 2, 2022

# ? Jan 1, 2022 23:24

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

I want to get the width of a div in a child component in React. Basically what I have is this:

code:


const refFirstItem = useRef(null)

const scrollWorks = (direction) => {
 direction === 'left' ? setCurrentScroll(currentScroll - ###) : setCurrentScroll(currentScroll + ###)
}

The component is called WorkItem. In the parent component, I can wrap each WorkItem in a div with a ref, but that's not ideal. I want to pass the ref to the child component and back to the parent so I can get the width of a div inside the child component in order to scroll by the proper amount. How can I accomplish that?

Edit: Bonus question. I'm using react-intersection-observer. I'd like to use it to observe an element that already has a ref but this seems impossible:

https://github.com/thebuilder/react-intersection-observer

From what I'm understanding, it only accepts "ref={ref}" as an argument... that is a ref that's literally called "ref". How can I use it to observe an element with the ref "refFirst" or whatever so I don't have to come up with a convoluted way to give an element more than one ref?

LifeLynx fucked around with this message at 18:33 on Jan 8, 2022

# ? Jan 8, 2022 17:36

Roadie: Jun 30, 2013

LifeLynx posted:

I want to get the width of a div in a child component in React. Basically what I have is this:
code:
const refFirstItem = useRef(null)

const scrollWorks = (direction) => {
 direction === 'left' ? setCurrentScroll(currentScroll - ###) : setCurrentScroll(currentScroll + ###)
}
The component is called WorkItem. In the parent component, I can wrap each WorkItem in a div with a ref, but that's not ideal. I want to pass the ref to the child component and back to the parent so I can get the width of a div inside the child component in order to scroll by the proper amount. How can I accomplish that?

Edit: Bonus question. I'm using react-intersection-observer. I'd like to use it to observe an element that already has a ref but this seems impossible:

https://github.com/thebuilder/react-intersection-observer

From what I'm understanding, it only accepts "ref={ref}" as an argument... that is a ref that's literally called "ref". How can I use it to observe an element with the ref "refFirst" or whatever so I don't have to come up with a convoluted way to give an element more than one ref?

Uhh, just use the useInView hook instead of createRef wherever you were planning to do that?

You use that or the InView component, not both.

# ? Jan 9, 2022 00:19

smackfu: Jun 7, 2004

Along those lines, cool hooks that people like?

# ? Jan 9, 2022 00:51

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

Roadie posted:

Uhh, just use the useInView hook instead of createRef wherever you were planning to do that?

You use that or the InView component, not both.

Yeah I've been trying it, but I guess I just don't know how to write it? I can create a component that does it, but it seems weird to have to write a component for every element I want to observe... but that might just be React's virtual DOM?

# ? Jan 9, 2022 01:22

Roadie: Jun 30, 2013

LifeLynx posted:

Yeah I've been trying it, but I guess I just don't know how to write it? I can create a component that does it, but it seems weird to have to write a component for every element I want to observe... but that might just be React's virtual DOM?

If you don't want to write a wrapper component, use the InView wrapper component they provide you and just pass down the ref to whatever.

It seems like you've got some weird head gremlin going on here, potentially from not understanding what refs in React are and how they work.

# ? Jan 9, 2022 01:42

Good Sphere: Jun 16, 2018

I have a JSFiddle that matches any element that has the "background-color" style attribute. When I use it as an injected script inside a Safari Extension, I get the error "The string did not match the expected pattern", and I cannot continue the script beyond this point. Why would this happen?

code:

var possibilities = ['[style*="background-color"],[style*="background-color"]'],
    searchFor = /\bbackground-color/,
    cssProp = 'background-color',
    styles = document.styleSheets,
    i, j, l, rules, rule, elem, res = [];

for (i=0; i<styles.length; i++) {
    rules = styles[i].cssRules;
    l = rules.length;
    for (j=0; j<l; j++) {
        rule = rules[j];
        if (searchFor.test(rule.cssText)) {
            possibilities.push(rule.selectorText);
        }
    }
}
possibilities = possibilities.join(',');
possibilities = document.querySelectorAll(possibilities); // "The string did not match the expected pattern" ERROR
l = possibilities.length;
for (i=0; i<l; i++) {
    elem = possibilities[i];
    res.push(elem);
}
alert(res.length + ' matches!');

# ? Jan 9, 2022 21:49

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

Have you tried printing out the value of the string you've constructed immediately before it's used? That would probably give you some insight as to what exactly is messing it up.

# ? Jan 9, 2022 23:19

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!

Good Sphere posted:

I have a JSFiddle that matches any element that has the "background-color" style attribute. When I use it as an injected script inside a Safari Extension, I get the error "The string did not match the expected pattern", and I cannot continue the script beyond this point. Why would this happen?

Not an answer to the question, but did you try console.log(possibilities) before the error? Seems like it would be easier to identify what's going wrong from that than from the whole code snippet.

E: :rolleyes:

# ? Jan 9, 2022 23:20

Good Sphere: Jun 16, 2018

Thanks! I found out that there is a possibility that rule.selectorText could be undefined, so I check that before pushing it to the array.

# ? Jan 10, 2022 01:16

Kwolok: Jan 4, 2022

I'm writing a project that has JavaScript on the frontend and python on the backend. We have complex calculations in python that I want to package and use in a library for the frontend JavaScript. How would I go about doing this? I know some npm packages are not fully JavaScript under the hood and contain other languages but I don't understand how to make one language talk to or rely on another.

# ? Jan 12, 2022 05:14

Roadie: Jun 30, 2013

Kwolok posted:

I'm writing a project that has JavaScript on the frontend and python on the backend. We have complex calculations in python that I want to package and use in a library for the frontend JavaScript. How would I go about doing this? I know some npm packages are not fully JavaScript under the hood and contain other languages but I don't understand how to make one language talk to or rely on another.

If the Python stuff is on the backend, then you need to use an API to pull that data from the frontend. See, for example, Flask, which makes it easy to set up a basic REST API.

To embed Python in frontend Javascript, first you would need to package a full Python interpreter running in WASM, and frankly if you don't already know how to do that you absolutely shouldn't be considering it.

Roadie fucked around with this message at 06:43 on Jan 12, 2022

# ? Jan 12, 2022 06:41

Kwolok: Jan 4, 2022

Roadie posted:

If the Python stuff is on the backend, then you need to use an API to pull that data from the frontend. See, for example, Flask, which makes it easy to set up a basic REST API.

To embed Python in frontend Javascript, first you would need to package a full Python interpreter running in WASM, and frankly if you don't already know how to do that you absolutely shouldn't be considering it.

Unfortunately an API is too slow for how frequently we need these calculations done. The front end must be incredibly responsive.

# ? Jan 12, 2022 09:10

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

Kwolok posted:

Unfortunately an API is too slow for how frequently we need these calculations done. The front end must be incredibly responsive.

If you need a very responsive UI that also does a lot of complex calculations I have to say a python/JS combo is not where I would have gone, but instead opted for something native.

# ? Jan 12, 2022 09:51

Ola: Jul 19, 2004

Kwolok posted:

Unfortunately an API is too slow for how frequently we need these calculations done. The front end must be incredibly responsive.

Rewrite the math bits in Javascript. It might furrow some brows due to maintaining separate code bases and rewrite time, but only because there is an assumption / hope that porting it will take less time, be easier to maintain and as performant as the native Python (ahem), all of which may well be wrong.

Using one of the popular front-end frameworks is fine, perhaps to get a more developer friendly type system or similar. It shouldn't be slower than native JS unless there is a lot of DOM manipulation or other update logic that gets in the way.

# ? Jan 12, 2022 10:02

MrMoo: Sep 14, 2000

Kwolok posted:

Unfortunately an API is too slow for how frequently we need these calculations done. The front end must be incredibly responsive.

Hold on champ, this is mumbo jumbo. APIs are literally the only way code interacts. REST may not be the best way but one has to analyze the actual dataflow to work it out. Humans for a start are super slow, most screens update 60Hz which for computers calculating is a leisurely pace, in fact updating the screen too quickly is actually disorientating for many viewers and you need to slow down visual updates. If you look at Google numbers for responsive design you can see that 100ms is a nice ceiling to target.

So, determine whether the data is streaming or snapshot based. Streaming is perversely too fast for humans for anything above 4 times per second, so snapshots in time are a perfectly valid option. Using a transport with sufficient low latency on a local LAN segment it is surprisingly easy to pass data at 60fps and update the screen.

As above you make an app server running Python with something like Flask. Design has to determine whether calculations are continuous and requests take a snapshot or whether they are on demand. Also note there are two dimensions to latency here. One has the latency of response time, how quickly a screen updates, and the latency of the data actually updating to new values. The latter is surprisingly not that important and gives the concept of stale-while-revalidating.

# ? Jan 12, 2022 10:50

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

Kwolok posted:

I'm writing a project that has JavaScript on the frontend and python on the backend. We have complex calculations in python that I want to package and use in a library for the frontend JavaScript. How would I go about doing this? I know some npm packages are not fully JavaScript under the hood and contain other languages but I don't understand how to make one language talk to or rely on another.

Kwolok posted:

Unfortunately an API is too slow for how frequently we need these calculations done. The front end must be incredibly responsive.

If you're looking at third party packages and have concluded it's too slow you could try using the technologies you need directly. Unfortunately this is a Python question since the API is going to responsible for the responsiveness of these requests. But I was going to suggest trying out http2, as it is proving itself to be much faster than http, as it maintains it's connection and only communicates in pure binary.

I'm learning how to use this right now in Node, but I'm sure there's similar built into Python.

# ? Jan 12, 2022 10:55

MrMoo: Sep 14, 2000

Should be in YOSPOS or just being very much trolled by an MBA.

# ? Jan 12, 2022 11:00

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

Nolgthorn posted:

But I was going to suggest trying out http2, as it is proving itself to be much faster than http, as it maintains it's connection and only communicates in pure binary.

HTTP/2 is more about increasing efficiency of multiple requests to the same origin, so that assets and the like can be efficiently loaded in parallel from one stream. It will not do much for a single request, and the transport envelope is to support the parallelism not make it faster on its own. It�s still straight up HTTP responses under the hood, just packaged differently.

# ? Jan 12, 2022 17:01

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

They said there was a high frequency of requests, not having to resend headers on tons of tiny requests is perfect for http2.

# ? Jan 12, 2022 18:57

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:

They said there was a high frequency of requests, not having to resend headers on tons of tiny requests is perfect for http2.

Pretty sure it still does all the headers too, it's just the connection handshakes you get to skip, which is like 3x ping time per connection, and (versus reused connection http1) you don't have to wait for the first thing to end before the next thing starts, which means you get to avoid more ping times in synchronization. So it's a lot better than http1 if you have a long ping and spare bandwidth, and not really much better if you're bandwidth-constrained.

# ? Jan 13, 2022 00:30

aperfectcirclefan: Nov 21, 2021; by Hand Knit

I'm missing something obvious in this and I can't tell what it is. Why aren't the props actually showing up in the other function?

code:

import { useState, useContext } from "react";
import BattleScene from "../BattleScene";

export default function FirstBattle(params) {
  return <BattleScene enemy="snatcher" />;
}

code:


export default function BattleScene(params) {
    console.log(params)
}

# ? Jan 13, 2022 03:58

Cugel the Clever: Apr 5, 2009; I LOVE AMERICA AND CAPITALISM DESPITE BEING POOR AS FUCK. I WILL NEVER RETIRE BUT HERE'S ANOTHER 200$ FOR UKRAINE, SLAVA

aperfectcirclefan posted:

I'm missing something obvious in this and I can't tell what it is. Why aren't the props actually showing up in the other function?
code:
import { useState, useContext } from "react";
import BattleScene from "../BattleScene";

export default function FirstBattle(params) {
  return <BattleScene enemy="snatcher" />;
}
code:
export default function BattleScene(params) {
    console.log(params)
}

So you're expecting to see in the console:

JavaScript code:


{ enemy: "snatcher" }

Correct? Should just work. You do have a return in the second component that you've just not added here, though, right? It needs to render something.

# ? Jan 13, 2022 04:37

aperfectcirclefan: Nov 21, 2021; by Hand Knit

Yeah sorry I truncated it down from what's in that actual function. Weird. I'll look again tomorrow, thanks

# ? Jan 13, 2022 05:05

aperfectcirclefan: Nov 21, 2021; by Hand Knit

Here's both files:

JavaScript code:


import {useState, useContext} from 'react';
import BattleScene from '../BattleScene';

export default function FirstBattle (params)  {
    return (
        <>
        <BattleScene enemy="snatcher"/>
        </>
    )
}

JavaScript code:


import { useState, useContext } from "react";
import { Context } from "../Store";
import Cards from "./Card";
import './styles/BattleScene.scss';

export default function BattleScene(params) {
  const [state, dispatch] = useContext(Context);

  const [turn, setTurn] = useState(0);

  const [playerhealth, setPlayerHealth] = useState(parseInt(parseInt(state.playerlife)));

  return (
    <>
    <div className="battleScene">
        <div className="battleRow1">
            <h2>{playerhealth}</h2>
           {params.enemy ? <Cards cards={params.enemy}/> : null}
        </div>
        <div className="battleRow2 flex-container">
            <Cards cards={state.cardsheld} />
        </div>
    </div>
    </>
  );
}

# ? Jan 13, 2022 05:11

go play outside Skyler: Nov 7, 2005

I'm not sure an empty tag is valid syntax. If you need a container element that does nothing, use a <React.Container>

# ? Jan 13, 2022 08:16

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

that looks fine to me. anything in the console? what exactly is rendering on screen?

# ? Jan 13, 2022 08:19

SimonChris: Apr 24, 2008; The Baron's daughter is missing, and you are the man to find her. No problem. With your inexhaustible arsenal of hard-boiled similes, there is nothing you can't handle.; Grimey Drawer

go play outside Skyler posted:

I'm not sure an empty tag is valid syntax. If you need a container element that does nothing, use a <React.Container>

https://reactjs.org/docs/fragments.html

Note the "Short Syntax".

SimonChris fucked around with this message at 12:01 on Jan 13, 2022

# ? Jan 13, 2022 08:45

go play outside Skyler: Nov 7, 2005

SimonChris posted:

https://reactjs.org/docs/fragments.html

Not the "Short Syntax".

Wow, I think that's new. Guess that's what happens when you don't touch web dev for a year 🤷‍♂️

# ? Jan 13, 2022 09:02

MrMoo: Sep 14, 2000

roomforthetuna posted:

Pretty sure it still does all the headers too, it's just the connection handshakes you get to skip, which is like 3x ping time per connection, and (versus reused connection http1) you don't have to wait for the first thing to end before the next thing starts, which means you get to avoid more ping times in synchronization. So it's a lot better than http1 if you have a long ping and spare bandwidth, and not really much better if you're bandwidth-constrained.

HTTP/2 is a binary protocol, the headers are significantly compressed. Also pipelining is enabled by default which together with lingering makes multiple requests cheaper, although not as cheap as a WebSocket, or SSE.

# ? Jan 13, 2022 11:43

aperfectcirclefan: Nov 21, 2021; by Hand Knit

teen phone cutie posted:

that looks fine to me. anything in the console? what exactly is rendering on screen?

code:

{}

Is what is logged to the console. It's the weirdest bug lol which leads me to think it's something stupid.

code:

 {params.enemy ? <Cards cards={params.enemy}/> : null}

doesn't render anything, but everything else renders fine

# ? Jan 13, 2022 13:54

aperfectcirclefan: Nov 21, 2021; by Hand Knit

I'm a idiot....I was sending the wrong game state lol

# ? Jan 13, 2022 14:20

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:

HTTP/2 is a binary protocol, the headers are significantly compressed. Also pipelining is enabled by default which together with lingering makes multiple requests cheaper, although not as cheap as a WebSocket, or SSE.

Ah, good point. But still not the same as skipping headers. ("HTTP/2's HPACK algorithm compresses request and response metadata using Huffman encoding that results in an average reduction of 30% in header size.")

# ? Jan 13, 2022 14:49

Adbot: ADBOT LOVES YOU

# ? May 15, 2024 10:04

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

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

# ? Jan 13, 2022 14:53

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

«‹›277 »