Register a SA Forums Account here!
JOINING THE SA FORUMS WILL REMOVE THIS BIG AD, THE ANNOYING UNDERLINED ADS, AND STUPID INTERSTITIAL ADS!!!

You can: log in, read the tech support FAQ, or request your lost password. This dumb message (and those ads) will appear on every screen until you register! Get rid of this crap by registering your own SA Forums Account and joining roughly 150,000 Goons, for the one-time price of $9.95! We charge money because it costs us money per month for bills, and since we don't believe in showing ads to our users, we try to make the money back through forum registrations.
 
  • Post
  • Reply
necrotic
Aug 2, 2005
I owe my brother big time for this!

fuf posted:

Thanks, I just about get this.

This looks kind of good? What's the issue?

No semicolons alone is enough to throw that out. “Just memorize all the stupid automatic semicolon insertion rules~” no I’ll just tell it what I intend by using semicolons.

Adbot
ADBOT LOVES YOU

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

Nolgthorn posted:

The solution to this was to update node to a compatible version inside of the docker instance. Now instead npm is telling me dotenv is not installed, it certainly absolutely is. I've deleted node_modules and .lock again, re-installed, force installed, cleared cache, audit fix on and on and on.

Npm is impossibly bad.

Er , if docker is in the picture and you “update node … in a docker instance”…. Might that be your issue? I mean, docker? Have you tried rebuilding the container?

necrotic
Aug 2, 2005
I owe my brother big time for this!
Using an Intersection Observer is the preferred approach these days

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#a_simple_example

necrotic
Aug 2, 2005
I owe my brother big time for this!
Ionic has a lot of Web Components in recent versions, and we’ve started seeing more custom usage of them in our customer base.

necrotic
Aug 2, 2005
I owe my brother big time for this!
If you don’t have a middleman API layer to handle an HttpOnly cookie I think your kind of stuck using local storage if you want it to persist across hard refreshes / a later session.

necrotic
Aug 2, 2005
I owe my brother big time for this!
How you respond to CORS is entirely on you, so yes it’s possible. This allows you to only permit things such as what you need on specific pages (or all pages except specific exceptions).

necrotic
Aug 2, 2005
I owe my brother big time for this!
I definitely prefer Number, though if you have a string I want turned into a number I’m going to use parseInt

necrotic
Aug 2, 2005
I owe my brother big time for this!
Yes, only some events bubble.

https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles

MDN is a fantastic resource for (web focused) JavaScript

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

Doom Mathematic posted:

For loops have named parts, and one of them is the "afterthought"? I had no clue.

Every piece of syntax is going to have a specific name :)

necrotic
Aug 2, 2005
I owe my brother big time for this!
It’s entirely intuitive if you understand the high level of how react works, and specifically called out in the useState docs that updates are for the _next render_.

I like to help people, but my first step is always “did you read the documentation for X?”

necrotic
Aug 2, 2005
I owe my brother big time for this!
Yes, any time you render a list of items you should set a key attribute that specifically identifies that item (so not it’s index in the list).

https://react.dev/learn/rendering-lists

It should be logging an error message that you aren’t doing this.

necrotic
Aug 2, 2005
I owe my brother big time for this!
If you just need a data bag, define A as an interface and then you can just assign an object of that shape.

code:
interface A {
  foo: string;
}

const thing: A = { foo: “value” };
Phone posting excuse the fancy quotes.

If you need methods on your thing then a class is better, obviously. Yoy can’t have multiple constructors because JavaScript doesn’t have that concept. A single constructor can be define in typescript with overloaded type definitions but the actual implementation must then handle all of those manually.

edit: Typescript _does_ allow you to declare fields _in the constructor_ so you only have to specify once. Can use public, protected or private as the access level and that declares it as a field on the class itself, without the need to manually assign or declare the field separately.

code:
class A {
  constructor(
    public foo: string,
  ) { }
}

const a: A = new A('bar');
console.info(a.foo);

necrotic fucked around with this message at 20:01 on Jun 21, 2023

necrotic
Aug 2, 2005
I owe my brother big time for this!
There’s no constructor for Plain JavaScript Objects, they are just a map!

JavaScript actually doesn’t even have actual classes! The class keyword is syntactic sugar around the prototype system.

A naked { foo: “value” } is an instance of the very root “type” of Object, it’s not creating a new “thing”.

The type definition example above is all typescript magic, not JavaScript at all.

You _can_ use its "defaults", though!

TypeScript code:
const fooThing = {
   a: "",
   b: 0,
   c: "",
}

type Foo = typeof fooThing

const barThing: Foo = {
  ...fooThing, // "Copy" the object into this one
  a: "farts", // assign a new value
}
Note that this spread operation only copies primitives! Any arrays or more complex objects are copied by _reference_. Example:

TypeScript code:
const fooThing = {
   a: [1, 2, 3],
   b: {
     foo: 'bar',
   },
};

type Foo = typeof fooThing

const barThing: Foo = {
  ...fooThing,
  a: [5, 6, 7], // Here we _replace_ a with a new array
};

barThing.a.push(8);
console.info(fooThing.a); // Still 1, 2, 3!
console.info(barThing.a); // 5, 6, 7, 8

barThing.b.foo = 'baz';
console.info(fooThing.b.foo); // Oops, this is now also 'baz'!

necrotic fucked around with this message at 19:35 on Jun 23, 2023

necrotic
Aug 2, 2005
I owe my brother big time for this!
This works in most places now https://developer.mozilla.org/en-US/docs/Web/API/structuredClone

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

Vino posted:

The perf of that will be terrible and I hope there are no uncopyable objects in there like mutexes (do those exist in javascript?) but if you don't care about perf I applaud you.

JavaScript is single threaded so no, it has no mutexes.

Obviously don’t do deep clones in the hot paths but it’s not going to matter basically anywhere else.

necrotic
Aug 2, 2005
I owe my brother big time for this!
I wouldn’t use unknown for a data source I control. Use it for 3rd party apis and data sources, not your database layer that you control.

necrotic
Aug 2, 2005
I owe my brother big time for this!
Sure, and if I don’t care about those parts I wouldn’t type them. I’m mostly saying using unknown for first party isn’t necessary, but may be beneficial for third party (or just plain old user input, like if you offer an API for others to call)

necrotic
Aug 2, 2005
I owe my brother big time for this!
There’s a TC-39 proposal to make set suck less https://github.com/tc39/proposal-set-methods

W3C isn’t involved in JavaScript, the ECMA group handles JavaScript. The current Set was added back in ES6, which was the first major update to JavaScript in _years_.

Why they added very a limited implementation I can't say (TC-39 wasn't around, and I'm not sure where to find any discussions prior to then).

edit: found it, not a lot of discussion and its on a now defunct site. Thanks, wayback machine!

https://web.archive.org/web/20170105121945/http://wiki.ecmascript.org/doku.php?id=harmony:simple_maps_and_sets

necrotic fucked around with this message at 19:35 on Aug 18, 2023

necrotic
Aug 2, 2005
I owe my brother big time for this!
Ban time zones and ship it. Easy

necrotic
Aug 2, 2005
I owe my brother big time for this!
Have you configured the heap limit?

https://nodejs.org/api/cli.html#--max-old-space-sizesize-in-megabytes

The crash report should mention how much was used when it shut down.

necrotic
Aug 2, 2005
I owe my brother big time for this!
No. That’s how pnp or whatever works too, if I remember right.

necrotic
Aug 2, 2005
I owe my brother big time for this!
You can use express with sveltekit

https://kit.svelte.dev/docs/adapter-node#custom-server

If you opted for another server, surely it has a session middleware that can be used.

necrotic
Aug 2, 2005
I owe my brother big time for this!
You can reference a function itself without calling it, and then the mangling won’t matter. Phone posting but I can edit an example in shortly

edit:

code:
function foo() {
  return 'foo';
}

const funcRefs = {
  foo: foo,
};

console.info(funcRefs['foo']());
Now if webpack mangles foo to e.g. a, the reference in funcRefs will also update and point to a, with the key still 'foo'.

necrotic fucked around with this message at 21:00 on Sep 22, 2023

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

abraham linksys posted:

i figure module import mocking is probably not something the average node codebase has and i get why they didn't implement it for v0 of this extremely new thing (node:test isn't even in the LTS version without a feature flag, is it?)

Yeah it’s still experimental in 18, but marked stable in 20. I don’t think it’s feature flagged, though, as you have to explicitly import and use it.

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

Combat Pretzel posted:

A while back when I started my project with CRA, I initially wanted to do the front-end in Typescript and TSX, but eventually ditched the idea because every hot reload involved running the Typescript compiler and it got annoying quickly. Now that I switched to Vite a while ago, Typescript got viable again. What I'm wondering now is, if you want a web service and front-end communicating with each other, how do you handle the type data? In a third module shared between both, or import the types from the web service module directly?

Yeah we have a package for sharing types and utilities between the backend and front end.

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

some kinda jackal posted:

Is that a style thing or an actual typescript syntax thing because it’s not giving me any errors on private, but for all I know I could be doing something unintended..

Switching to the hash anyway, thanks!

The hash syntax for private fields is pure JavaScript, and actually makes the field privately scoped. Typescript has an actual private keyword that only makes it private _to typescript_, the field is still fully “public” in JavaScript.

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

Harriet Carker posted:

Can anyone help me maybe understand what he means? I've never run into this issue and I'm super unclear, but I don't feel confident enough to engage in the discussion.

https://github.com/microsoft/TypeScript/issues/42151

https://github.com/microsoft/TypeScript/issues/16577

Here are some rather large issues related to the ESM behavior.

TS5 added some features to make this a little better, but it relies on your bundler to appropriately handle things , and sounds like it only works for TS files importing other TS files which would make it “all or nothing”.

https://devblogs.microsoft.com/typescript/announcing-typescript-5-0/

necrotic
Aug 2, 2005
I owe my brother big time for this!
If your route ended in a / the ./ would work like you desire. A regular old anchor tag behaves the same way.

If you’re on /foo then ./bar links to /bar.

If you’re on /foo/ then ./bar links to /foo/bar.

necrotic
Aug 2, 2005
I owe my brother big time for this!
One of the biggest lessons to learn from that help is to work at breaking down what you are doing into smaller chunks. One big function doing a lot of stuff is generally a signal that it can be broken down into smaller "units of work" that each individually solve a smaller part of the larger problem.

This turns out to be one of the harder things for people to "figure out", in my experience, but can be a huge boost on writing at least decent code. Any time you find yourself struggling to resolve an issue, take a step back and see if you can break down what you're working on into smaller pieces. That process alone might lead you to resolving whatever issue, but if not it can help you narrow down where it is and then focus on that specific part.

I believe this is what you are acknowledging with

quote:

maybe the next time I write some code, it won't be several hundred lines of brain vomit.

so don't take my post as a "you got the wrong lesson", just an aid on top if anything.

And to add a bit more: figuring out how to break things down never goes away. It may become easier to see where things can be broken down, but you will at some point find yourself back here going "okay I have this thing and... what's wrong?".

necrotic fucked around with this message at 01:43 on Feb 23, 2024

necrotic
Aug 2, 2005
I owe my brother big time for this!
I would split into two filter calls with anonymous functions if it was a one off. If those specific filtering rules apply to multiple spots then yeah I’d define helper functions. For a one-off I’d argue that’s “too much”

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

KoRMaK posted:

This feels like a really stupid question but I cant figure out what the transom I have to bridge is: I have a webpack that has sortablejs in it, and I'd like to be able to call sortablejs from the browser's dev tools console, just like i could when I was using jquery, so I can interactively play around with it. how do I do that? my full tech stack is rails and yarn based



If you’ve webpacked everything is in one module with a bespoke “require/import” to work in that one bundle.

The hacky stupid approach I will suggest is to do a window.sortablejs = require (…) somewhere in your sources to make the package available to the console.

There may be a better solution, I don’t know or care to look because bundling generally works this way.

import in web (as you are using in the console) is very specific to ES modules. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

If your webpack can / is setup to spit out ESM that would work with import it may be changing the module name, but I haven’t really worked with ESM so don’t really know.

Edit: and you are seeing the original source with the webpack:// prefixes because of Source Maps. That is _not_ the actual JS that is executing in the browser, it’s mapping that browser file back to the original sources for debugging.

necrotic fucked around with this message at 19:19 on Feb 24, 2024

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

KoRMaK posted:

Yes I had considered this but since you are at a breakpoint time is frozen and you can't interact with the rendered browser ui as you normally would.

You should be able to assign whatever you want to a variable (possibly on the window again) and then resume with that approach.

necrotic
Aug 2, 2005
I owe my brother big time for this!
Death by committee ?

Adbot
ADBOT LOVES YOU

necrotic
Aug 2, 2005
I owe my brother big time for this!
Yup, can have a <link> to a stylesheet as well.

There’s also Constructed Stylesheets which can be attached to multiple shadow DOMs for reuse.

  • 1
  • 2
  • 3
  • 4
  • 5
  • Post
  • Reply