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 »

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

Anony Mouse posted:

Is there a reason that in TYOOL 2019 people are still using getElementById and getElementsByTagName instead of querySelector and querySelectorAll?

Is it that simple? Yes it was a matter of a mix of Google search results to wind up at the code I came up with, but I've talked to a lot of people about how I miss jQuery's simple $("#foo") and .each() and how there's a ton of ways to select things in vanilla JS. If querySelector and querySelectorAll replace all those in modern browsers, it'll save me a lot of headache trying to find the "proper" way to select a specific (set of) DOM element(s).

# ? Mar 28, 2019 03:16

Adbot: ADBOT LOVES YOU

# ? May 15, 2024 01:49

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

Because getElementById isn't going anywhere. It's more specific as to what you're trying to do... think about it as auxiliary to the good ones.

# ? Mar 28, 2019 09:30

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

Dumb Lowtax posted:

I learned es6 and for three years have never imported any JavaScript libraries, needed outside code, or used a compilation tool. That hasn't stopped me from making anything I've wanted yet. It's overall been a very rewarding and non-frustrating experience

To be fair you do post a lot of questions that basically boil down to "help me reinvent this round rolly thing please" but not gonna lie it's fun to watch.

# ? Mar 28, 2019 11:59

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

*scowling while wrapping querySelectorAll in a function called $ for the 100th time, thinking* GOSH I SURE DON'T MISS jQuery AT ALL GLAD IT'S NOT NEEDED ANYMORE

# ? Mar 28, 2019 16:28

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

god drat do i ever not miss jquery

# ? Mar 28, 2019 17:32

Roadie: Jun 30, 2013

LifeLynx posted:

Coding this taught me a lot about arrays, and how some things in Vanilla JS return arrays instead of objects that "just work" with whatever action I want to do to them. I spent a while trying to figure out why:
code:
item.getElementsByTagName('a').addEventListener
...didn't work. It's because item.getElementsByTagName returns an array, so I need to specify the [0] there for the first (even if it's the only) item.

Actually, that returns an HTMLCollection, not an array. It's iterable in current browsers (so you can dump it into an array using spread syntax), but it doesn't have map, forEach, etc.

This is also as dumb as it sounds.

# ? Mar 29, 2019 03:50

Nalin: Sep 29, 2007; Hair Elf

code:

> (new Date(Date.parse('2019-04-12'))).toDateString()
"Thu Apr 11 2019"

Can somebody tell me what I can do about this? I have no idea why JavaScript is doing this to me.

I needed to determine if a day was on a Friday and I thought this was going to be simple. I thought I could just put the date into a Date object and call getDay() and check if it was equal to 5, but apparently I've fallen into hell and I can't trust anything anymore.

EDIT: Oh, I figured it out. Turns out using that specific date format constructs the Date in UTC time instead, so I have to use getUTCDay() to get the actual day.

Nalin fucked around with this message at 18:32 on Mar 29, 2019

# ? Mar 29, 2019 18:28

Happy Thread: Jul 10, 2005; by Fluffdaddy; Plaster Town Cop

That was an emotional rollercoaster!

# ? Mar 29, 2019 18:41

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

Don't forget `getUTCDay` is 0 indexed and starts on Sunday.

# ? Mar 29, 2019 19:02

mystes: May 31, 2006

Nolgthorn posted:

Don't forget `getUTCDay` is 0 indexed and starts on Sunday.

That way people who think the week starts on Sunday and people who think Monday is day one of the week can both be happy.

# ? Mar 29, 2019 19:13

darthbob88: Oct 13, 2011; YOSPOS

Munkeymon posted:

*scowling while wrapping querySelectorAll in a function called $ for the 100th time, thinking* GOSH I SURE DON'T MISS jQuery AT ALL GLAD IT'S NOT NEEDED ANYMORE

I still like jQuery for that alone and some of the utility functions.

My own problem: I have an .npmrc file that's configured to use a particular project-specific registry in place of the standard public registry. However, for some reason npm keeps installing some packages from the public npmjs registry rather than the custom registry, even though those packages are listed under the custom registry. The closest to an explanation I have is that it's particular to dependencies; the package listed in package.json will install correctly, but its dependencies will come from the public registry. I'm still curious what I can actually do about that.

# ? Mar 29, 2019 19:50

Happy Thread: Jul 10, 2005; by Fluffdaddy; Plaster Town Cop

Roadie posted:

If you want to import something that definitely uses the specific insertion order, use Map.

Question from last page, but wouldn't switching from Objects to Maps require me to change all my syntax wherever I use a definition that I imported by name?

Right now this works, supposing my imported namespace is called "tiny":

code:

new tiny.Matrix()

But if it were a Map would all my code everywhere have to become like this?

code:

new tiny.get( "Matrix" )()

...

Secondly, isn't it annoying that Maps have no equivalent of the es6 object functionality of automatically generating key names? Such as:

code:

const a = 3; const b = { a };

Which generates an ["a",3] key value pair.

There being no equivalent for Map forces me to type the same name twice every time I store a function definition in a Map:

code:

tiny.set( "Matrix", Matrix );

# ? Mar 29, 2019 20:20

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

Dumb Lowtax posted:

Question from last page, but wouldn't switching from Objects to Maps require me to change all my syntax wherever I use a definition that I imported by name?

Really not sure the suggestion is viable in your case, given you're relying on module imports being objects but then wanting to read those objects in insertion order for the sole purpose of matching the code in the imported file, but answer is gonna be yes. Also yes, you would need to set explicitly to a map (and then iterate through it on the other end)

Edit: that being said, I can't see how it's solvable without putting the code, as is, into some ordered data structure at one end when it's exported, then unwrapping it at the other where it's imported. And then I guess that's probably in turn gping to need more logic to just get the code to all function together properly. I'd be really interested if you manage to come up with a solution, cos I can't for the life of me see how you're going to do it

RobertKerans fucked around with this message at 20:49 on Mar 29, 2019

# ? Mar 29, 2019 20:39

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

Edit: quote is not edit

# ? Mar 29, 2019 20:48

Chenghiz: Feb 14, 2007; WHITE WHALE
HOLY GRAIL

darthbob88 posted:

I still like jQuery for that alone and some of the utility functions.

My own problem: I have an .npmrc file that's configured to use a particular project-specific registry in place of the standard public registry. However, for some reason npm keeps installing some packages from the public npmjs registry rather than the custom registry, even though those packages are listed under the custom registry. The closest to an explanation I have is that it's particular to dependencies; the package listed in package.json will install correctly, but its dependencies will come from the public registry. I'm still curious what I can actually do about that.

I�m guessing your package lockfile still specifies the public npm registry

# ? Mar 29, 2019 20:59

Happy Thread: Jul 10, 2005; by Fluffdaddy; Plaster Town Cop

RobertKerans posted:

I'd be really interested if you manage to come up with a solution, cos I can't for the life of me see how you're going to do it

Maybe what I'm grasping for is really just an array, not a Map. So, declaring each class in scope for the file, and then immediately pushing it to an array for also remembering order.

code:

class a extends b { whole definition of a }
tiny.push(a)

But then at the end of the file I'd want to convert that array into an object somehow, with keys that equal the class names, so that lookup can be done as if it were a namespace.

code:

new tiny.Matrix()

# ? Mar 29, 2019 21:22

darthbob88: Oct 13, 2011; YOSPOS

Chenghiz posted:

I�m guessing your package lockfile still specifies the public npm registry

It doesn't, though. If I delete the lockfile, npm just creates a new one, which still points to the public registry for those packages. If I go through and replace all the references to public registry with the private one, it just overwrites them with references to the public one. It's maddening.

# ? Mar 29, 2019 21:44

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

darthbob88 posted:

It doesn't, though. If I delete the lockfile, npm just creates a new one, which still points to the public registry for those packages. If I go through and replace all the references to public registry with the private one, it just overwrites them with references to the public one. It's maddening.

Are your private dependencies scoped?

# ? Mar 29, 2019 22:13

darthbob88: Oct 13, 2011; YOSPOS

Osmosisch posted:

Are your private dependencies scoped?

Not to my knowledge; it's all `"my-package": "^4.2.0"`, not `@my-org/my-package`. That might fix it, but I'd rather try other solutions first.

# ? Mar 30, 2019 00:05

Chenghiz: Feb 14, 2007; WHITE WHALE
HOLY GRAIL

Bizarre, I've never had an issue like that. If you run `npm get registry` in the directory where your npmrc file is, do you get the right registry?

# ? Mar 30, 2019 15:25

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

darthbob88 posted:

Not to my knowledge; it's all `"my-package": "^4.2.0"`, not `@my-org/my-package`. That might fix it, but I'd rather try other solutions first.

You should scope your packages anyway.

# ? Mar 30, 2019 16:46

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

Dumb Lowtax posted:

Question from last page, but wouldn't switching from Objects to Maps require me to change all my syntax wherever I use a definition that I imported by name?

Right now this works, supposing my imported namespace is called "tiny":
code:
new tiny.Matrix()
But if it were a Map would all my code everywhere have to become like this?
code:
new tiny.get( "Matrix" )()
...

Secondly, isn't it annoying that Maps have no equivalent of the es6 object functionality of automatically generating key names? Such as:
code:
const a = 3; const b = { a };  
Which generates an ["a",3] key value pair.

There being no equivalent for Map forces me to type the same name twice every time I store a function definition in a Map:
code:
tiny.set( "Matrix", Matrix );

Objects have guaranteed insertion order is traversal order for years now - probably for longer than they've supported GL, but I wouldn't swear to that.

Have you tried something like

JavaScript code:

//library.js or whatever you call it
export default {
  functionOne: functionOne,
  //etc
};

//playground.js
import libraryFunctions from 'library';

Iterating over libraryFunctions should have them in the order you want them in.

# ? Apr 1, 2019 14:24

Happy Thread: Jul 10, 2005; by Fluffdaddy; Plaster Town Cop

Munkeymon posted:

Objects have guaranteed insertion order is traversal order for years now - probably for longer than they've supported GL, but I wouldn't swear to that.

Thanks, this is what I was thinking last page, if it ain't broken why fix it

(It's still ugly right now to do two things for every definition, but no less ugly if I use Maps)

Munkeymon posted:

Have you tried something like

Ah, this won't work because it assumes the definitions all exist in isolation, but some of them extend the class definition of others. The "extends" statement evaluates immediately and won't have access to other things written out in the same object literal.

# ? Apr 1, 2019 19:23

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

Dumb Lowtax posted:

Ah, this won't work because it assumes the definitions all exist in isolation, but some of them extend the class definition of others. The "extends" statement evaluates immediately and won't have access to other things written out in the same object literal.

I'm not advocating shoving the whole file into the literal, just making it a K:V pair list of the functions in your library in the order you want them in, so it should traverse in that order when imported.

JavaScript code:

//library.js
function fart(size) {
  return 'f' + 'a'.repeat(size) + 'rt';
}

function display(element, string) {
  element.text
}

export default {
  fart: fart,
  display: display,
};

//playground.js
import libFuncs from 'library';

console.log(Object.keys(libFuncs)); //should be ['fart', 'display']

# ? Apr 1, 2019 19:51

Happy Thread: Jul 10, 2005; by Fluffdaddy; Plaster Town Cop

Well I'm specifically avoiding solutions that require editing more than one place in source code to add a class, because I know my students won't remember to

# ? Apr 1, 2019 20:28

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

Dumb Lowtax posted:

Well I'm specifically avoiding solutions that require editing more than one place in source code to add a class, because I know my students won't remember to

Oh, you aren't the one maintaining the library file for them? Huh.

Does your compiler support decorators? Granted, that's another thing they can forget.

# ? Apr 1, 2019 20:57

Happy Thread: Jul 10, 2005; by Fluffdaddy; Plaster Town Cop

Munkeymon posted:

Oh, you aren't the one maintaining the library file for them? Huh.

Does your compiler support decorators? Granted, that's another thing they can forget.

I'm the maintainer, I'm just referring to any class definitions that students decide to add for their own course projects that extend the base code. I think those class definitions should appear in the displayed navigator too, but they won't unless the students remember to do some extra and silly steps while declaring them.

No compiler is being used; so far we've been able to do everything but this just fine with vanilla es6 JavaScript. Including some pretty complex networked 3D graphics applications.

# ? Apr 1, 2019 21:05

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

You can do complex networked 3d applications with assembly.

# ? Apr 1, 2019 22:37

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

Build a tree from the prototypes of your "classes" and sort your result that way. Anything at the same depth in the tree gets alphabetical sort.

Wouldn't actually solve the problem in the way you want (specific ordering) but you could use it to be sure classes are listed after their base, at least.

necrotic fucked around with this message at 22:58 on Apr 1, 2019

# ? Apr 1, 2019 22:55

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

Munkeymon posted:

I'm not advocating shoving the whole file into the literal, just making it a K:V pair list of the functions in your library in the order you want them in, so it should traverse in that order when imported.
JavaScript code:
//library.js
function fart(size) {
  return 'f' + 'a'.repeat(size) + 'rt';
}

function display(element, string) {
  element.text
}

export default {
  fart: fart,
  display: display,
};

//playground.js
import libFuncs from 'library';

console.log(Object.keys(libFuncs)); //should be ['fart', 'display']

Huh, it retains order quite a bit more than I expected. I assumed platform-specific reordering (or no reordering) would kick in as soon as the object was imported but doesn't seem to be the case. I get weird results when I play around mixing around the exports though, just tried a load of different combinations in a load of different browsers: generally the order remains as insertion, but sometimes it switches to alphabetised. I can't seem to reliably trigger it not being in insertion, it just...happens (as long as they're all in a single k:v map it always seems to work regardless of browser though, just happens that that is of no real use so :\)

RobertKerans fucked around with this message at 23:14 on Apr 1, 2019

# ? Apr 1, 2019 23:11

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

As of ES2015 objects are specified to iterate in insertion order. Before that it was left unspecified and was up to the implementation to decide.

# ? Apr 1, 2019 23:33

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

necrotic posted:

As of ES2015 objects are specified to iterate in insertion order. Before that it was left unspecified and was up to the implementation to decide.

Yeah I know, it's the underlying get... methods that build out the lists of keys in order, but I couldn't figure how I can trigger alphabetical order sometimes (this in browsers that are up to date) :shrug:

# ? Apr 2, 2019 00:09

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

RobertKerans posted:

Yeah I know, it's the underlying get... methods that build out the lists of keys in order, but I couldn't figure how I can trigger alphabetical order sometimes (this in browsers that are up to date)

Isn't it just import * as exports from 'library'?

Dumb Lowtax posted:

I'm the maintainer, I'm just referring to any class definitions that students decide to add for their own course projects that extend the base code. I think those class definitions should appear in the displayed navigator too, but they won't unless the students remember to do some extra and silly steps while declaring them.

No compiler is being used; so far we've been able to do everything but this just fine with vanilla es6 JavaScript. Including some pretty complex networked 3D graphics applications.

Well you don't have to export them separately from the default export, either. Just say that that's just how you like to do exports because they enumerate nicely. There's an "extra step" either way, after all: you can forget to export something or you can forget to add it to the K:V map.

There's also another good argument for the K:V export, in that it makes it easier for you to arbitrarily rename your module internals without affecting your API.

It's, uh, interesting to me that this use case would be a lot easier to deal with if class declarations were hoisted like you'd think they would be.

# ? Apr 2, 2019 16:38

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

Munkeymon posted:

Isn't it just import * as exports from 'library'?

That's what I thought, all the different permutations I tried for exporting just used that on the import side. I need to try this again; I think it involved exporting some in one object + some just as export function, but tried that many different ways to break the insertion order I can't remember what triggered alphabetical ordering

# ? Apr 2, 2019 22:30

Roadie: Jun 30, 2013

A glob import produces an object, but it's one with an order determined by the vagaries of the bundler/browser/whatever. If you want a specific ordering, you'll have to make your own object with stuff in it and put it as an export.

# ? Apr 2, 2019 22:47

Kraus: Jan 17, 2008

I'm still messing with code golf* and was wondering if anyone had any advice for shrinking this implementation(JavaScript) of FizzBuzz down. Apparently it can be done in 36 fewer characters?

code:


for(i=1;i<101;i++)j="",f=i%3,b=i%5,q="Fizz",p="Buzz",!f&&!b?j=q+p:!f?j=q:!b?j=p:j=i,document.write(j+"<br>")

*I'm not doing it for points on any site, just to become a better programmer.

# ? Apr 3, 2019 12:27

Chenghiz: Feb 14, 2007; WHITE WHALE
HOLY GRAIL

Code golf won't make you a better programmer.

# ? Apr 3, 2019 15:11

Happy Thread: Jul 10, 2005; by Fluffdaddy; Plaster Town Cop

It's a nice way of discovering obscure or power-user language features you didn't know about

edit: I just learned that I'm good enough at parsing code now to read long nested ternary expressions like that without missing their meaning, so it's good for finding that out too. Acting like the parser and seeing what it sees regardless of formatting is an important skill for diagnosing code, which can be mistyped in ways that trigger the parser to act differently

Happy Thread fucked around with this message at 18:11 on Apr 3, 2019

# ? Apr 3, 2019 18:06

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

Chenghiz posted:

Code golf won't make you a better programmer.

In fact, it might make you a worse programmer.

# ? Apr 3, 2019 20:57

Adbot: ADBOT LOVES YOU

# ? May 15, 2024 01:49

lunar detritus: May 6, 2009

Thermopyle posted:

In fact, it might make you a worse programmer.

It'll make you the kind of programmer that makes every coworker they ever have hate them.

# ? Apr 3, 2019 21:20

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

«‹›277 »