|
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 |
|
|
# ? May 15, 2024 01:06 |
|
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 |
|
If you want to import something that definitely uses the specific insertion order, use Map.
|
# ? Mar 19, 2019 02:16 |
|
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 |
|
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 |
|
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 |
|
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 |
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 |
|
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 |
|
Just use VS Code with its Chrome debugger integration.
|
# ? Mar 20, 2019 07:58 |
|
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. 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 |
|
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.
|
# ? Mar 20, 2019 15:43 |
|
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 |
|
Has anyone made the switch from VSCode to a Jetbrains IDE and found it worthwhile for web/node stuff?
|
# ? Mar 20, 2019 18:18 |
|
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 |
|
Banging my head against the wall again. I've got this:code:
code:
code:
|
# ? Mar 26, 2019 22:50 |
|
LifeLynx 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.
|
# ? Mar 26, 2019 23:01 |
|
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. 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 |
|
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++). 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 |
|
When in doubt, use forEach and write in such a way that you don't have to worry about list indexes.JavaScript code:
|
# ? Mar 27, 2019 02:06 |
|
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 |
|
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 |
|
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 |
|
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 |
|
breakpoints don't work correctly half the time for me. thanks source maps
|
# ? Mar 27, 2019 17:20 |
|
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 |
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 |
|
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 |
|
Got it!code:
code:
|
# ? Mar 27, 2019 19:22 |
|
Any good resources for transitioning to typescript from ES5? Conventions to avoid, new patterns, etc?
|
# ? Mar 27, 2019 19:26 |
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 |
|
The Fool posted:Any good resources for transitioning to typescript from ES5? 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 |
|
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 |
|
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 |
|
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 |
|
Suspicious Dish posted:I use TypeScript on my moderately large app This is cool btw
|
# ? Mar 27, 2019 22:35 |
|
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 |
|
LifeLynx posted:Got it!
|
# ? Mar 28, 2019 02:05 |
|
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 |
|
|
# ? May 15, 2024 01:06 |
|
Older IE support and a lack of need for the additional functionality?
|
# ? Mar 28, 2019 03:08 |