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.

«‹›2 »

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

What's a decent and common UI toolkit package for Electron? For creating desktop apps, or something that looks like it. I'd like to tinker around and evaluate it.

# ¿ Nov 16, 2020 20:21

Adbot: ADBOT LOVES YOU

# ¿ May 5, 2024 02:53

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

I'm randomly researching things regarding Javascript and React. What sort of patterns should I look at when I want to do something from traditional development, like loading/spawning forms or controls inside a container of a page (or app in case of Electron)? Say if I want an application frame with all sorts of navigation stuff, like a drawer and a breadcrumb bar, and then load the appropriate things into the content area. I'm not sure what I should look up for this. It's all happening in the render() function I guess?

# ¿ Feb 28, 2021 16:50

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

It's the lack of littering controls all over the application surface and accessing them by name that's not clicking yet.

# ¿ Feb 28, 2021 19:53

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

Since I'm now rewriting some of our apps in Javascript and want to use Electron, but everything's xcopy deployments and I don't want to update every Electron runtime per app, I figured install one in a central location and feed it the path to the node app. That seems to work apparently fine. Any drawbacks with that? Could this work with asar files, too? --edit: Nevermind, just feed it the path to the asar instead of the project folder. So easy. :doh:

Combat Pretzel fucked around with this message at 18:17 on Mar 3, 2021

# ¿ Mar 3, 2021 18:13

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

Is there anything to consider or that stops me from putting independent pages/functionality into a single Node.JS app? I'm just asking, because I'm not too fond of their way of littering my project folder with 350MB worth of dependencies across 30000 files for a template that does Hello World (e.g. npx create-react-app). So I'd like to minimize that footprint.

# ¿ Mar 6, 2021 17:05

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

So, anyhow, about my earlier question, if I were to put independent React pages/JS into subdirectories, that'd just work like that?

TheFluff posted:

there is no standard library

That is something I don't understand. Trying to do various string and date formatting things, that I take for granted in .NET, Java and even goddamn C, just aren't there. Well, some of it, is. But only from certain versions of the standard onwards. It seems like things are reactionary at best? Like adding String.padStart, after those left-pad histrionics.

# ¿ Mar 7, 2021 21:26

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

What's the best way to deal with grids (in React)? Just use a plain HTML table, or is there a preferred control? I'm looking for something that works kind of like WPF's Grid, i.e. specifying grid and row columns and then place the controls with row, column and appropriate span attributes.

# ¿ Mar 8, 2021 19:55

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

Thanks.

Dear god, I'm apparently so out of HTML/CSS, it ain't funny.

# ¿ Mar 8, 2021 21:05

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

This Node.JS stuff is weeeeeird.

I'm toying around with React Router and dropping both a <Link to="/"> and an <a href="/"> into the document. Within the HTML code they look exactly the same (both plain <a href="/">), yet clicking the one generated by <Link> navigates immediately whereas the manually written <a> reloads the whole page. How does that even happen?

# ¿ Mar 10, 2021 21:25

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

I suppose no one here knows an npm package to deal with a DB2 on z/OS, that a) doesn't involve wrapping jt400 and b) doesn't make Webpack poo poo itself like it does with the current odbc npm package I'm using for development (because of requires with a path set during runtime).

# ¿ Mar 11, 2021 18:19

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

Say if I were to work on two Node.JS packages concurrently, because one is dependent on another, and I used npm-link (which the Internet suggests I should) to set things up, would the fswatcher in the main project, that kicks off a compile/webpack on file changes, also pick up on file changes in the dependency project?

Also, is the Javascript Map just a flat key value store, or does it internally some hash map or binary tree things to aid performance?

# ¿ Mar 11, 2021 19:41

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

Oh good, thanks. I'm currently abusing(?) a bunch of Maps as look-up tables to reconstruct a history graph of amount of active manufacturing per day per priority level. I'd rather not have computation time scale exponentially when extending the date range.

# ¿ Mar 12, 2021 17:06

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

What's the difference between {foo: 'bar'} and {'foo': 'bar'}? When I send former over the wire, e.g. via Express.js and then parse it on the other end, it turns out like latter. With latter x.foo doesn't work, tho. If I want former, I need to use a "reviver". However, when I specifically try to assign latter to a variable, it becomes the former anyhow.

# ¿ Mar 25, 2021 18:58

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

Pass an object reference of the child (this) up to the parent somehow, then go hogwild.

# ¿ Apr 5, 2021 14:50

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

Is Typescript stuff allowed here, too?

Is it possible to override the constructor of the Date type in Typescript without declaring a derivative type? Because I can just add methods fine like this:

code:

declare global {
    interface Date {
        doSomething() : Date;
    }
}

Date.prototype.doSomething = function() {
    return this;
}

export {};

But when I touch the constructor in any way (I can't even find the proper way), it starts acting up.

The idea is mostly trying to teach the Date constructor about that stupid YYYYMMDD date format used everywhere in our data tables and avoiding to declare a new type. I have plenty of helper functions on Date itself, so it'd be nice to have it parse that format, too, instead of veering off to a derived type. Apparently I need to do something with the DateConstructor interface, but I'm running against a wall.

# ¿ Jun 10, 2021 23:16

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

Oh, that's how you do it with DateConstructor. Thanks for the solution. That'll work as well, so long it's combined with the other helper functions and not separate.

# ¿ Jun 11, 2021 05:45

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

What's the generally preferred YAML package nowadays?

# ¿ Jun 15, 2021 15:54

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

I suppose there isn't any intrinsic functionality to Node.js/V8 to get the memory footprint of an object? I just have to iterate through it and estimate?

It's for some heuristic deciding when to ditch cached results of database queries. It's the goddamn varchars.

# ¿ Jun 18, 2021 20:41

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

I'd like a more controlled approach. I want to assign a certain amount of memory to that cache and then jerryrig some tunable garbage collector that decides based on timeouts, hit rate and memory footprint. I suppose counting manually could work, but if there would have been some native method, that I couldn't find a reference to, that'd be nice, because I'd expect it to be faster (especially for larger datasets).

# ¿ Jun 19, 2021 07:46

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

Regarding React... or rather running a development server.

I've set up a React Typescript project, eventually linked my own libraries, when everything went to poo poo. It primarily got upset at the async keyword being present in my linked Typescript code, yapping something about loaders. Not being evident how to fix it in the template itself, I just upgraded to and set-up Webpack 5 et al from scratch. Now the React Router stuff doesn't entirely work. On the setup of the React template, refreshing the page in the browser, the site picked up where it should, whereas on Webpack's dev server, I just get an "Cannot get /a/b/c" error, if I load into anything other than /. Essentially, clicking my way through React Router links itself works fine, until I want to refresh the page in place.

I suppose this is just a configuration problem, since you'd probably want it to always load behind the scenes into / regardless of URL, but I don't see how. The same issue would probably happen on eventual deployment, so it'd be nice to know.

# ¿ Jul 7, 2021 16:39

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

Thanks. Mentioning the proper term for this all led me to find out that it's just this setting to make it work properly with Webpack dev server:

code:

devServer {
    historyApiFallback: true
}

Or --history-api-fallback respectively.

# ¿ Jul 7, 2021 19:10

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

Dear god no. Everything related to web applications is getting tiring.

Doing the backend stuff in Node.JS seemed pretty easy, so I thought that picking React, backed by some big company, that also comes with Typescript support, would keep things easy. Yet I lost hours on end today, because for some reason it (well, the template and toolchain, or whatever, it installs) doesn't support some standard loving Typescript feature/keyword, introduced end of 2015 of all things, out of the box. And trying to find a solution, I only chased my tail, because daily reinventions of the wheel litter the web with all sorts of outdated help and advice.

I have it working currently with my presumably janky Webpack configuration and I'm not gonna touch it anymore, until that house of cards collapses again. Probably takes just one npm update.

--edit:
Also, I'm not even sure it was the wisest idea to go fully Typescript. The initial idea was to type everything so that the TS compiler catches random idiocy, but whenever I'm looking up React things related to Typescript, they're all functional with plenty of any-types. Oh the time spent figuring out this React Hooks and classes things being like cats and water.

Combat Pretzel fucked around with this message at 19:55 on Jul 7, 2021

# ¿ Jul 7, 2021 19:39

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

HexiDave posted:

Check your tsconfig.js file to see if it's set to compile a more modern standard. Async/await and such all work fine, but you also need to make sure that you're putting it in something that supports Promises directly, or you have to wrap them in one.

It happened whenever things were compiled. The error message was pretty much this (I just looked up a version of it on the web, project's over at work):

quote:

ERROR in ./foo.js
Module parse failed: C:\Users\Redark\Desktop\asyncFuncTest\node_modules\babel-loader\lib\index.js!C:\Users\Redark\Desktop\asyncFuncTest\foo.js Unexpected token (1:6)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:6)

Unexpected token was async. I have all tsconfig.json files set to esnext and es2020 where applicable. Was that wrong?

I mean I have it working now, mainly just by switching to custom Webpack, with the same tsconfigs. But it was still unfortunate it didn't work out of the box.

--edit: One of the things I had to do was to use that Babel plugin, one of its purposes is to deal/"transform" that async stuff, for reasons: https://babeljs.io/docs/en/babel-plugin-transform-regenerator/

Combat Pretzel fucked around with this message at 20:51 on Jul 7, 2021

# ¿ Jul 7, 2021 20:28

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

Random observation... Looking for suggestions for varying things can get a bit frustrating at times. I was looking for a charting module that outputs SVG instead of using canvas, googling around for it I ran into several posts, virtually all of them linking commercial projects for the most part. Most suggestions seemed unsatisfactory. So just now I was looking at the web dashboard of my 3D printer, it had a chart. Turned out to be SVG. I looked what it was, turns out to be ECharts from Apache, which looks like a pretty powerful library. Is there a catch, or why didn't it come up in my searches?

--edit:
Scrolling through the examples page, I'm even more confused. Back when I looked for a library, chart.js came up first, then things like amCharts, Flexcharts, ApexCharts and god knows what sort of alphabet soup, but this one flew under my radar. Huge variety of charts, easy to use, and SVG which makes printing easier than this DPI fuckery with chart.js.

Combat Pretzel fucked around with this message at 18:49 on Aug 12, 2021

# ¿ Aug 12, 2021 18:42

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

Is there any sort of callback or whatever when React removes elements from the DOM?

Right now I'm trying to find a way to wrangle ECharts into printing, and I'm currently attempting this with wrapping a chart with a helper, kind of so:

code:

<EChartsPrintHelper>
    <ReactEChart ... />
</EChartsPrintHelper>

Said helper class would then add listeners to beforeprint and afterprint. It would save the container client sizes, call resize() on the EChart to make it fit certain dimensions, and when printing is done, it'd resize to the stored values.

But once an user navigates away, so would EChartsPrintHelper, except it'll leave the listeners still in place, and thus cause drama and also not get garbage collected?

--edit:
Found it I think. componentWillUnmount().

Combat Pretzel fucked around with this message at 18:30 on Aug 22, 2021

# ¿ Aug 22, 2021 18:07

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

Regarding the useState hook inside a React functional component, are the state variables globally unique (like you can't use a functional component more than once, otherwise your state gets hosed up), or does it work like classes anyway?

# ¿ Aug 29, 2021 20:24

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

I'm slowly converting my React class components to functional ones, among other reasons because various theming solutions are tons easier to work with hooks and poo poo. And React announcing somewhen in the past that they're focusing on hooks and putting classes on maintenance. But classes made it easier to maintain internal state. In functional components I resorted to a state variable hosting an object for this, that I modify directly. Is that OK, or is this going to blow up into my face in some fashion? It's not related to rendering JSX.

# ¿ Sep 6, 2021 23:12

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

Hmm, thanks, I'm gonna look into it.

What I was doing so far was creating a state variable called rt (for runtime, because ???) and doing rt.var = ... instead of the this.var = ... previously in a class. Seemed to work fine. So far anyway.

# ¿ Sep 9, 2021 13:20

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

Help me understand the default theme of Material UI. Is it intentional that none of the components have any padding/margin/spacing by default?

Say if I create a Paper element with three buttons inside, it's all caked together without any whitespace at all. I'm using createTheme, ThemeProvider and even CssBaseline. From what I can tell, it's applying the default theme, because colors change if I say modify it in createTheme.

# ¿ Sep 15, 2021 20:00

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

Osmosisch posted:

You can specify your layout and any padding/spacing with Grid components.

If that's overkill, take a look at the spacing properties: https://material-ui.com/system/spacing/

Yeah, I know about these things. I just find it odd that if I put say two buttons (OK and Cancel) next to each other in the same grid cell, that there's no spacing whatsoever, unless I actually define it myself. Same goes for the Paper component, which you'd think as a wrapper, it'd come with some default padding. The CSS baseline stuff says it has defaults for starting out, but I guess that doesn't include any spacing. (Using the grid for button layout seems wrong, because they're all over the place depending on window width.)

I'm just asking to verify whether I'm doing something wrong, anyway, so that I don't start to modify the theme for no reason.

--edit:
So essentially what I'm going on about is that there's this:

https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins

...and I had the assumption that these things are done by default out of the box.

Combat Pretzel fucked around with this message at 20:17 on Sep 16, 2021

# ¿ Sep 16, 2021 20:12

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

Thanks for pointing out Stack. But you show, too, that there are no defaults on containers either. I'd have figured that it had some out of the box, given the guidelines I linked to.

That said, after some digging around (more like flailing), it seems I can set that poo poo globally via createTheme. Which is good I guess, because I'd like to avoid setting everything manually:

code:

const theme = createTheme({
    components: {
      MuiStack: {
        defaultProps: {
          spacing: 1
        }
    }
    // That and other components
});

Thanks.

Combat Pretzel fucked around with this message at 21:13 on Sep 16, 2021

# ¿ Sep 16, 2021 21:07

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

When I have multiple modules with loose Javascript statements in the main body (in Node.JS), outside of a function, as long these modules are somehow referenced, will that code execute when the application starts up? What about static class constructors? I'm wondering if it's possible to implement some self-registering semantic for endpoints of my web service. Or what's a good way to go about it?

# ¿ Oct 6, 2021 15:59

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

Do Javascript or its specific runtimes happen to have an intrinsic to quickly hash strings, for implementing fast custom hash tables or poo poo like that?

# ¿ Oct 14, 2021 12:55

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

I'm using that one already for creating hashes of database queries and parameters for caching. So that one runs faster than a pure JS implementation then?

# ¿ Oct 14, 2021 16:01

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

What's a good semantic to deal with user sessions and authentication in a React SPA?

Right now, when the user loads the page, the App.jsx "frame/wrapper" checks with upstream whether the authentication token is still valid and either renders the login form or the React Router routing stuff. If said token times out, so far how I have things, it'll break the application (one reason I guess because things closer to the root of the DOM don't have a need to re-render and the effects don't run).

How to handle this better? Just run a timer that refreshes the token/session in background, so long the application is open in the browser?

# ¿ Oct 19, 2021 22:39

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

Regarding Redux for React, if I want to avoid rerendering unnecessary things, I need to encapsulate components accordingly?

Right now I have a progress bar to indicate loading and an alert box, sitting in App.jsx, both controlled via Redux, so that I don't need to implement it everywhere and run down all files if I want to change looks. However, everytime I'm changing their state, React will rerender everything. I suppose that'll stop if I shove them into a separate component that's separate from App.jsx?

# ¿ Nov 6, 2021 16:07

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

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.

# ¿ Nov 30, 2021 23:57

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

If I do bitwise operations on indexes on an UInt32Array, do I get largely the same semantics as in "proper" typed languages, or will I get hosed by JavaScript number quirks? This is mostly about maintaining a huge bitmap of flags.

# ¿ May 9, 2022 18:14

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

So in TypeScript, generics are a compile-time thing. Since that's so, why can't I instance generic types? Kinda this sort of stuff.

TypeScript code:

class Foo<T extends SomeBaseClass>{
    someFunc()
    {
        const bar = new T();
        ...
    }
}

If it's about enforcing some constructor notation, you'd figure that could be arranged by some special notation around <T>, but no bueno.

Combat Pretzel fucked around with this message at 15:47 on Sep 7, 2022

# ¿ Sep 7, 2022 15:43

Adbot: ADBOT LOVES YOU

# ¿ May 5, 2024 02:53

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

I've seen factory function stuff before. I figure it's remnants coming from C# that hinder me from understanding why I can't just put the drat type in the pointy brackets and have the Typescript compiler do its thing in the background.

TypeScript code:

const lionCage = new Cage<Lion>();

...looks cleaner to me, because it separates the type fed as generics argument from the actual potential constructor parameters. Just some syntactical sugar.

Alas, it's not meant to be I guess.

Combat Pretzel fucked around with this message at 20:43 on Sep 8, 2022

# ¿ Sep 8, 2022 20:40

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

«‹›2 »