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 »

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

Nolgthorn posted:

If I were trying to render html based on some code in a file, I'd read the file and try to parse it myself. Ie, I'd look for class definitions, I'd even have line numbers if I did it that way so that's what I recommend.

Would that extra fetch call cost another network request for the same file again or is that always cached?

edit: Parsing manually seems like doing the JavaScript interpreter's job, and it seems weird that the engine by design can't let you do introspection on the very code you imported into a Module without changing the order of it. It's easy for the user to call sort() on the resulting iterable manually, unlike converting the other way, which now requires information the interpreter threw out when generating the Module object. (Sorry for the page snipe)

# ? Mar 19, 2019 01:38

Adbot: ADBOT LOVES YOU

# ? May 15, 2024 07:12

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

I still have no idea what you're doing. But if you are trying to parse a file rather than eval it, so you take the eval and try to un-eval it so that you can parse it, and then complain that something unordered isn't in the same order then please don't do it that way.

# ? Mar 19, 2019 01:53

Roadie: Jun 30, 2013

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

# ? Mar 19, 2019 02:16

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

Nolgthorn posted:

I still have no idea what you're doing. But if you are trying to parse a file rather than eval it, so you take the eval and try to un-eval it so that you can parse it, and then complain that something unordered isn't in the same order then please don't do it that way.

Sounds like they're trying to make sort of a code explorer thing for students that just works through reflection. I guess "Open the file in the Sources tab" is too hard a step to follow when learning to program.

# ? Mar 19, 2019 16:09

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

It's more that the sources tab shows them the whole file at once, which is overwhelming to the students. There are many JS class definitions inside working in tandem just to get basic 3D graphics working and organized.

Yes, it is for students! Correct guess. We use it onscreen in class and it embeds itself into their project's pages so they have a little navigator.

Importantly, my students' code explorer thing can generate inline links whenever the source code of one class mentions one of the other classes. The name is turned into a link so you can "jump to definition". The Sources tab lacks that basic functionality for some reason.

This tool has always been helpful when I show my students the contents of the large files I hand them in class, including showing it up on the projector in class. It has been much more helpful than showing them the Sources tab and scrolling all up and down it and getting lost.

I also don't want to overwhelm them by handing them too many files, so the only files my server generates for them to view are: one tiny graphics library file for wrapping WebGL, a second file containing all the code class definitions the particular demo they're viewing needs (and no others), a third small file containing only the one class definition they are meant to edit so as to alter the displayed 3D scene, and index.html which is hardly 1k long.

Happy Thread fucked around with this message at 18:21 on Mar 19, 2019

# ? Mar 19, 2019 18:17

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

Speaking as someone who has done some amount of teaching coding, I...think you're probably just trying to do too much handholding, but that's neither here nor there I guess.

Basically, you're going to have to roll your own solution to your problem because the way you want it to work is just not the way it works.

# ? Mar 19, 2019 19:47

The Fool: Oct 16, 2003

Dumb Lowtax, are the student you are teaching going on to be developers of some sort, or are you teaching some sort of supplementary course for non-devs?

If the former, I'm concerned that all of your weird "I have to do it this way because my students will get confused" issues are going to do your students a disservice in the future.

# ? Mar 19, 2019 20:02

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

I share the concerns above.

I'm still kind of lost why all this effort is going into a code browser when that's basically a solved problem. Like, git clone or unzip -> open in vscode, done. Including clickable import source links.

# ? Mar 20, 2019 00:14

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

I'll try not to use it for handholding. My code for generating a "class definition navigator" on the page is mainly for easier presentation to them onscreen in class when I'm explaining organizing of a graphics program into parts. And for giving an easier first impression of the structure of the code and which classes mention which other classes. It's got color coding and everything.

After that first impression, I do expect a lot out of them. One of my main hopes for the class is for them to become much, much better programmers. Graphics programs are inherently difficult to debug (the default failure mode is the dreaded blank screen) so a big focus of the class is diagnosis when your new graphics feature isn't working.

Sadly, most undergrad students in my department are terrible at debugging. None of the previous courses they take emphasize setting up an IDE and using all its features. Much less single stepping a program line by line and monitoring variable and expression values, live, by hovering the mouse over them. One course gives them some GDB experience but they're never shown how to integrate this into their practical workflow. So, to remedy this, I actually make them code in a way that puts the JavaScript debugger in their face at all times: I tell them to edit code directly in Chrome. I also constantly show how to use the debugger but I want them to see it all the time. Chrome is not as good of an editor as VSCode, but it's also more fully featured than you probably think. It lets them do what they need to their code projects while simultaneously monitoring their running program, and by the end of the course they are better at a debugger than when they came in, so I think that's a satisfying outcome and side effect of a class that's about something else (graphics).

# ? Mar 20, 2019 02:15

Roadie: Jun 30, 2013

Just use VS Code with its Chrome debugger integration.

# ? Mar 20, 2019 07:58

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

Dumb Lowtax posted:

It's more that the sources tab shows them the whole file at once, which is overwhelming to the students. There are many JS class definitions inside working in tandem just to get basic 3D graphics working and organized.

Yes, it is for students! Correct guess. We use it onscreen in class and it embeds itself into their project's pages so they have a little navigator.

Importantly, my students' code explorer thing can generate inline links whenever the source code of one class mentions one of the other classes. The name is turned into a link so you can "jump to definition". The Sources tab lacks that basic functionality for some reason.

This tool has always been helpful when I show my students the contents of the large files I hand them in class, including showing it up on the projector in class. It has been much more helpful than showing them the Sources tab and scrolling all up and down it and getting lost.

I also don't want to overwhelm them by handing them too many files, so the only files my server generates for them to view are: one tiny graphics library file for wrapping WebGL, a second file containing all the code class definitions the particular demo they're viewing needs (and no others), a third small file containing only the one class definition they are meant to edit so as to alter the displayed 3D scene, and index.html which is hardly 1k long.

If you've already taken care to structure the file such that the contents are in lesson order (I guess you'd call it?), I would think that would help immensely in preventing them from getting overwhelmed. But it sounds like you've put a lot of work into a neat code navigation tool that could maybe be improved with some metadata that, yeah, you'd have to maintain separately because the language isn't designed with this in mind like, say, Python with its docstrings.

IIRC, the Sources UI will present the option to jump to the implementation of a symbol when you're stepping through in debug because then it actually knows for sure what the implementation is. Otherwise, due to the nature of the language, it'd be an educated guess no better or not much better than a text search.

# ? Mar 20, 2019 14:37

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:

IIRC, the Sources UI will present the option to jump to the implementation of a symbol when you're stepping through in debug because then it actually knows for sure what the implementation is. Otherwise, due to the nature of the language, it'd be an educated guess no better or not much better than a text search.

I'd much rather have the educated guess than no functionality. "Not much better than a text search" actually is much better than a text search if you're dealing with multiple files, because text searches across multiple files are inconvenient as gently caress and require you to type what you're searching for and then they come up with every instance of that string, vs. eg. pressing F3 on a thing and going to the one instance that's a function definition not a call, or being presented with a list of likely candidates. If VS Code can do it, so could another tool!

# ? Mar 20, 2019 15:43

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

roomforthetuna posted:

I'd much rather have the educated guess than no functionality. "Not much better than a text search" actually is much better than a text search if you're dealing with multiple files, because text searches across multiple files are inconvenient as gently caress and require you to type what you're searching for and then they come up with every instance of that string, vs. eg. pressing F3 on a thing and going to the one instance that's a function definition not a call, or being presented with a list of likely candidates. If VS Code can do it, so could another tool!

AFAICT VS Code is just doing a text search? I guess F3 is easier to mash than Ctrl + Shift + F, but fuckall nothing's gonna help you find, say, the implementation of an anonymous callback without evaluating the script.

This is not me arguing against using VS Code or whatever editor you want that's better than Chrome's debug tools, by the way. This is just me pointing out that, unless you're actively running the script, it's often not possible to actually know what the implementation of a symbol is, so it's understandable that dev tools wouldn't try to pretend to.

# ? Mar 20, 2019 16:04

playground tough: Oct 29, 2007

Has anyone made the switch from VSCode to a Jetbrains IDE and found it worthwhile for web/node stuff?

# ? Mar 20, 2019 18:18

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

playground tough posted:

Has anyone made the switch from VSCode to a Jetbrains IDE and found it worthwhile for web/node stuff?

I did it with sublime text a few years ago. It's pretty great if you've got the PC to handle a full IDE smoothly.

# ? Mar 20, 2019 18:21

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

Banging my head against the wall again. I've got this:

code:


<ul>
<li class="linkto linkto-services"><a href="#">Services</a></li>
<li class="linkto linkto-contact"><a href="#">Contact Us</a></li>
</ul>

I also coded this recently, with the polyfill for smooth scrolling for Edge and other browsers:

code:

<script>
var contactTop = document.getElementById('contact').offsetTop - 20;

document.getElementById('contact-ribbon').addEventListener('click', () => window.scrollTo({
	top: contactTop,
	behavior: 'smooth',
}));
</script>

I have an anchor tag with the ID of #contact in the body somewhere. What I want to do is: when the user clicks on, for example, ".linkto-contact a", they're taken to an anchor tag with the ID of #linktarget-contact down the page. If they click ".linkto-services a", they go to #linktarget-services, and so on. What I have so far is this:

code:

<script type="text/javascript">

var linktoList = document.getElementsByClassName('linkto'), i;
var ltl = document.getElementsByClassName('linkto').length;
console.log(ltl);

for (i = 0; i < ltl; i++) { 
  console.log(i.html);
}

</script>

Is "i" getting anything related to the current element? It's times like these I miss the $(this) function of jQuery. If anyone can point me in the right direction, I'd appreciate it, because I'm not even sure what to Google, and usually I can solve things through an hour or so of Googling.

# ? Mar 26, 2019 22:50

Doom Mathematic: Sep 2, 2008

LifeLynx posted:

code:
<script type="text/javascript">

var linktoList = document.getElementsByClassName('linkto'), i;
var ltl = document.getElementsByClassName('linkto').length;
console.log(ltl);

for (i = 0; i < ltl; i++) { 
  console.log(i.html);
}

</script>
Is "i" getting anything related to the current element? It's times like these I miss the $(this) function of jQuery. If anyone can point me in the right direction, I'd appreciate it, because I'm not even sure what to Google, and usually I can solve things through an hour or so of Googling.

You're doing i.html, which will return undefined because i is a number, which has no html property. I think you want something like linktoList[i], which is a DOM element you can do more work with.

# ? Mar 26, 2019 23:01

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!

Doom Mathematic posted:

You're doing i.html, which will return undefined because i is a number, which has no html property. I think you want something like linktoList[i], which is a DOM element you can do more work with.

Also you're doing for (i=0; i < ltl; i++) when you mean for (i=0; i < ltl.length; i++).

Edit: oh wait, ltl *is* the length, and then you don't have the list. Don't do that.
Edit2: oh wait, you do have the list, but then you re-perform the search to construct the list in order to make ltl contain its length. Madness. linktoList.length, man!

roomforthetuna fucked around with this message at 00:02 on Mar 27, 2019

# ? Mar 26, 2019 23:59

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

Doom Mathematic posted:

You're doing i.html, which will return undefined because i is a number, which has no html property. I think you want something like linktoList[i], which is a DOM element you can do more work with.

roomforthetuna posted:

Also you're doing for (i=0; i < ltl; i++) when you mean for (i=0; i < ltl.length; i++).

Edit: oh wait, ltl *is* the length, and then you don't have the list. Don't do that.
Edit2: oh wait, you do have the list, but then you re-perform the search to construct the list in order to make ltl contain its length. Madness. linktoList.length, man!

Yeah I tend to just write and not think about what's redundant until I actually get something that functions, then I start reducing.

# ? Mar 27, 2019 00:15

Roadie: Jun 30, 2013

When in doubt, use forEach and write in such a way that you don't have to worry about list indexes.

JavaScript code:

[...document.getElementsByClassName('linkto')].forEach(item => {
  console.log(item.html);
});

(You need the wrapping array because getElementsByClassName doesn't actually return an array, just an iterable, which can be converted to an array by doing that.)

# ? Mar 27, 2019 02:06

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

Now the Chrome Developer Tools window has logpoints so you don't need Console.log at all.... as infrequently as you should have already been using it due to breakpoints and hovering over variable names for contents normally being the more appropriate way to monitor a running program

# ? Mar 27, 2019 04:15

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.

Dumb Lowtax posted:

Now the Chrome Developer Tools window has logpoints so you don't need Console.log at all.... as infrequently as you should have already been using it due to breakpoints and hovering over variable names for contents normally being the more appropriate way to monitor a running program

man it seemed dumb to just set a conditional breakpoint and put console.log() in the statement like i've been doing to get the equivalent effect, but logpoints is apparently a new feature in 73, so I guess I can look forward to that soon.

# ? Mar 27, 2019 04:23

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

The console.log was just a placeholder, it was the simplest thing I could think to write in there that would have the effect of "is this doing anything remotely like I think it should?"

# ? Mar 27, 2019 04:30

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

Oh I can relate, sometimes I've been using console.log as a dummy line to finish out an if statement or something because the if statement needs a body, even though I only need it for activating a breakpoint when it's true. But that's the very definition of a conditional breakpoint like Brugels just thought of. It sounds like we both should be using those instead and integrate them into our thought process since that's what they're for.

# ? Mar 27, 2019 05:00

Suspicious Dish: Sep 24, 2011; 2020 is the year of linux on the desktop, bro; Fun Shoe

breakpoints don't work correctly half the time for me. thanks source maps

# ? Mar 27, 2019 17:20

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.

Suspicious Dish posted:

breakpoints don't work correctly half the time for me. thanks source maps

before typescript and this new node/webpack ecosystem, i didn't seem many projects that were more than, say, 200k ~ 300k of javascript - people would be like "gently caress this, all this code shouldn't be on the front end god have mercy let's not write any more javascript."

nowadays i'll see ts projects run half a million ~ million+ loc not including jquery, react / whatever, and these take minutes to build. on the one hand it's cool that these tools make it practical to produce a working project with this much javascript, on the other hand, it's a crime against nature. if i had to build every time i did console.log i'd go insane.

# ? Mar 27, 2019 18:31

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

Bruegels Fuckbooks posted:

if i had to build every time i did console.log i'd go insane.

Webpack can do partial rebuilds and hot reloading making this not an issue, thankfully.

I mean, you're not wrong, but at least there's bright points.

# ? Mar 27, 2019 18:41

Suspicious Dish: Sep 24, 2011; 2020 is the year of linux on the desktop, bro; Fun Shoe

I use TypeScript on my moderately large app. I have hand-written most of the code myself and my dependencies are extremely minimal. Yet Chrome seems to have major issues with breakpoints and speed whenever I have the devtools console open, and the tooling just doesn't work on a regular basis.

console.log ftw

# ? Mar 27, 2019 19:00

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

Got it!

code:

const linktoList = document.getElementsByClassName('linkto');

[...linktoList].forEach(function(item) {
	var aTag = item.getElementsByTagName('a')[0];
	aTag.addEventListener('click', function(event) {
		var targetTop = document.getElementById(item.classList[1]).offsetTop;
		event.preventDefault();
		window.scrollTo({ top: targetTop, behavior: 'smooth',});
	});
});

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.

# ? Mar 27, 2019 19:22

The Fool: Oct 16, 2003

Any good resources for transitioning to typescript from ES5?

Conventions to avoid, new patterns, etc?

# ? Mar 27, 2019 19:26

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

Being so spoiled by idea and chrome debuggers, doing a bunch of clojure on the side with its REPL plus lack of debugger has been really educational. It's especially brought me back to testing practically every line of code rather than going 'eh it's just controller boilerplate.' Small functions and tests let you sniff out bugs with a couple of prints.

# ? Mar 27, 2019 19:46

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

The Fool posted:

Any good resources for transitioning to typescript from ES5?

Conventions to avoid, new patterns, etc?

You want a guide for ES5 -> ES6 ie. ES2015+ because that's where all the info is. Typescript is primarily just adding types on top of it, and a pretty good compiler. Are you looking for how to write ES2015+ coming from a ES5 background because that's books worth of info.

# ? Mar 27, 2019 20:19

The Fool: Oct 16, 2003

Nolgthorn posted:

Are you looking for how to write ES2015+ coming from a ES5 background because that's books worth of info.

Basically this.

I just started a project with Javascript and I'm finding that when left to my own devices, everything I write is ES5 and it makes me feel bad.

# ? Mar 27, 2019 20:21

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

I write ES5 by hand from time to time but it's hard and beyond the challenge of it, not fun. You should learn the new stuff it makes JavaScript actually such a good language they're using it for near every drat thing these days. There's no reason to start at the beginning of the revival, just start learning ES2019.

TypeScript makes it a bit more complicated and so I recommend learning it after you're comfortable. I think just about any modern "Learn JavaScript" guide would teach you all the things, and you can skim the parts you know already. The language really changed a lot.

# ? Mar 27, 2019 20:30

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

Also don't bother with learning Webpack and compilers and all that stuff either. You'll get overwhelmed. When things like node and any modern browser supports it without compilation anyway, and there are alternatives to Webpack too. I recommend learning how to use it vanilla, then browsing what has become an insane universe of tools for what you really want to use. Some people get caught up in the options and just use everything when that's probably a path to eventual depression.

# ? Mar 27, 2019 20:37

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

Suspicious Dish posted:

I use TypeScript on my moderately large app

This is cool btw

# ? Mar 27, 2019 22:35

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

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

# ? Mar 28, 2019 00:36

Anony Mouse: Jan 30, 2005; A name means nothing on the battlefield. After a week, no one has a name.; Lipstick Apathy

LifeLynx posted:

Got it!
code:
const linktoList = document.getElementsByClassName('linkto');

[...linktoList].forEach(function(item) {
	var aTag = item.getElementsByTagName('a')[0];
	aTag.addEventListener('click', function(event) {
		var targetTop = document.getElementById(item.classList[1]).offsetTop;
		event.preventDefault();
		window.scrollTo({ top: targetTop, behavior: 'smooth',});
	});
});
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.

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

# ? Mar 28, 2019 02:05

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

Anony Mouse posted:

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

Google search results not sorted by recent

# ? Mar 28, 2019 02:40

Adbot: ADBOT LOVES YOU

# ? May 15, 2024 07:12

duz: Jul 11, 2005; Come on Ilhan, lets go bag us a shitpost

Older IE support and a lack of need for the additional functionality?

# ? Mar 28, 2019 03:08

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

«‹›277 »