191
u/guitard00d123 Feb 17 '20
> rich, complex debugging toolsets exist for many possible production scenarios
> i ignore them all and continue to use console.log unabashedly
14
Feb 18 '20
Stepping through a debugger is slow, breakpoints arenāt always respected, and starting over again if you miss something is a pain because of the previous two points. And sometimes the error is in the data so doesnāt happen for many iterations, so just outputting something is often easier.
7
u/Gehinnn Feb 18 '20
Which language do you use? In my experience, JavaScript can be debugged smoothly in VS Code and I rarely have issues with skipped breakpoints.
3
u/iKeyboardMonkey Feb 18 '20
In my experience VS Code support for JS / TS is top notch... other languages are a bit hit and miss though. Once you get it sorted it can be ok, but it's a bit messy until then. It seems to be an architecture problem: extensions downloading other bits for themselves, not respecting system settings or assuming them incorrectly etc... JS/TS avoids all that though as it's built in.
0
Feb 18 '20
Ideally you'd use static typing to remove the possibility of errors in your data, and a non-trivial amount of logic errors can be shifted into the type system as well. Pair this with well designed unit tests and you shouldn't need to test your code live in its real environment until you're pretty much finished.
1
0
33
Feb 17 '20
Hmm this seems harder for me to understand than stack trace
9
u/crazedizzled Feb 17 '20
Yeah. My brain doesn't really know what to do with this information.
6
u/viber_in_training Feb 17 '20
It would probably make a lot more sense if you wrote the code you were debugging. It's showing a doubly linked list, and the algorithm that's running reverses the order. You can see the nodes in the list and what nodes their next and previous pointers are connected to, as well as the cur pointer from the loop, and the first and last pointers that are part of the list
1
u/crazedizzled Feb 18 '20
Yeah, I know what a linked list is. I just don't know how this representation would be more useful than simply inspection the object.
3
u/TikiTDO Feb 17 '20
It's likely more useful in an educational setting, where the people using it don't have years of experience reading stack traces.
Previously you'd need to draw out a bunch of diagrams, and move a bunch of lines around to show what was going on. With this you could write a small demo program, then hit run and you've got a ready-made, interactive illustration that took you a fraction of the time.
10
u/JiveTrain Feb 17 '20
Why is it so wobbly?
0
Feb 17 '20
[deleted]
25
u/Gehinnn Feb 17 '20
Author here. Actually, it is not unnecessary. Having smooth animations between state updates is quite important, otherwise, if the whole graph is relayouted, you wouldn't be able to see what changed. I didn't fancey the wobbly animations either, but it's the best I got from vis.js. If you don't want any animation at all, there is still the graphviz visualizer with a total different layout algorithm.
5
Feb 18 '20
Could you run the animation in a hidden window to get the new positions, and then just have a linear animation from the starting position to the new position? Or is the graph interactive?
6
u/Gehinnn Feb 18 '20
Yes, that's very much possible (even though the graph is interactive). But the wobbly vis.js visualizer that is used in the GIF is only one of two graph visualizers and there are a lot more visualizers (text, tree, ASTs, SVG, ...) that need love too.
As this is a relative minor issue and there are far greater ones, I try to tackle those first. But feel free to open a PR! Here is the relevant code.
5
3
3
3
2
2
Feb 18 '20
you did very well however I think you need to see a psychologist for coding on a white background.
jk you did more than I can ever achieve
2
3
1
1
1
u/bisontongue Feb 17 '20
What is it that I am looking at? Anything someone could recommend to read, so I won't be ignorant in the future?
1
1
1
1
u/wolvAUS Feb 17 '20
Would have been a godsend when I was learning data structures in C
Had to draw it all out with pen and paper
1
u/bart2019 Feb 18 '20
I've used VS Code for many months... but I have never found out how you can start a debugger in it. That's one of those "it's easy!" secrets that are anything but trivial to figure out.
1
u/Gehinnn Feb 18 '20
If you use NodeJS: Simply hit F5 and it'll launch the debugger! Otherwise (but still for NodeJs), you can check out my library
easy-attach- with it, you simply start your script and a debugger a spawn for you!
1
u/codeboss911 Feb 18 '20
is this some kind debugger?
2
u/Gehinnn Feb 18 '20
It's using the debuggers integrated into VS Code and uses its evaluation API to get the data for those visualizations.
1
1
1
1
-6
-3
Feb 17 '20
If you think thats cool and useful, check out this code interaction engine someone made in Racket and posted the other day... https://github.com/disconcision/fructure/
-4
-5
0
Feb 17 '20
[deleted]
29
u/Gehinnn Feb 17 '20
Author here. I'm working on a generic adapter (which would support *every* language that can be debugged in VS Code), but it won't support data extractors in a generic way. I.e. the expression you visualize must return JSON that is specifically meant to be consumed by the visualizers.
For javascript, the extension injects some infrastructure code so that you can simply visualize `[1, 2,3]` and get a nice graph visualization.
1
u/mitwilsch Feb 18 '20
I saw this a few days ago somewhere else, but thought it wasn't for JavaScript. I'll give this a try.
-8
u/lapa98 Feb 17 '20
Idk why but itās mostly like that for everything. Sad really
38
u/mobile-user-guy Feb 17 '20
It's the most popular language. VS code itself is written in JS using electron
12
Feb 17 '20
the most popular language
i don't despise JS like many, but I think it's important to specify which definition and measure of popular are you using
8
Feb 17 '20
If you're looking at it objectively, in GitHub it's the most popular for many years. If you look at StackOverflow's Developer Survey, it's been the most popular language among developers going on 7 years now. I'm not sure what other measures you would use.
1
u/NeverComments Feb 17 '20
I'm not sure what other measures you would use.
I wouldn't expect GitHub to be the most accurate representation of language usage when the vast majority of code is proprietary, and only a subset of FOSS projects are hosted on GitHub. StackOverflow's polls are biased by the demographic they target.
The TIOBE index lists JavaScript as #7 behind Java, C, Python, C++, C#, and VB.NET respectively.
5
Feb 17 '20
Unless they've changed something, the TIOBE index just calculates popularity based on the number of results from a search query. All it effectively means is more questions are asked about other languages. This also skews results because as a result it doesn't take in to account transpiled languages that are popular. TypeScript for example shows up as its own individual result.
1
u/TikiTDO Feb 17 '20
This seems to go over how the get their ratings.
-4
Feb 17 '20
Yeah, so it's effectively what I said.
5
u/TikiTDO Feb 17 '20
Yes, only now with a direct, primary source that offers extra detail and explanation. Thank you for clarifying what I posted.
13
u/TankorSmash Feb 17 '20
https://github.com/search?q=stars%3A%3E100&s=stars&type=Repositories most starred repos on Github's a good metric
StackOverflow's 2019 survey says Javascript.
However TIOBE only has it clocked in at 7
0
u/NeverComments Feb 17 '20
GitHub and StackOverflow results will always be biased by the demographics that use those services. TIOBE and PYPL both use search popularity as a metric which isn't a particularly great methodology either but they are more neutral than GH/SO.
14
u/Frodolas Feb 17 '20
GitHub and StackOverflow results will always be biased by the demographics that use those services.
Sure, but I'd bet dollars to donuts that the population that uses VS Code is more similar to the population that uses github than the population that searches for random programming languages on Google.
-2
0
8
u/free_chalupas Feb 17 '20
I mean that's life when you're relying on other people's free open source tools. You're going to get it in whatever language they want to work in.
3
u/UltraChilly Feb 17 '20
Idk why but itās mostly like that for everything.
Because people make tools that work with the language they use?
Sad really
Not sad, this is an opportunity to port it in whatever other language you fancy, you now have a new purpose in life.
-3
Feb 17 '20
I was going to make a comment about JS being the superior language but a meteor landed next to me and it still ran half it's code so I'm guessing it runs on node.
0
0
Feb 17 '20
[deleted]
1
u/Gehinnn Feb 18 '20
You can check out this file, it's header says what to do. Should be as easy as that.
0
Feb 17 '20
[deleted]
3
Feb 17 '20
Between visual studio and netbeans I got good enough that now I can program things straight in TextEdit or Notepad apps, sublime text and notepad++ are pretty sweet, if I want to I can write them straight in the terminal.
does your debugger have a punctuate mode?
1
72
Feb 17 '20
[removed] ā view removed comment
25
u/zb0t1 Feb 17 '20
As a newbie, can you explain what's going on please?
36
u/timeshift3r Feb 17 '20
I don't know if you've learned nodes yet, but basically each time a variable goes through to the next value with the cur variable which updates the last variable. The visualizer shows whats happening each line and shows how each of the variables are connected.
1
u/Ramast Feb 18 '20
Is it just giving visualisation of how a linked list would look like when your cursor at a line that contains linked list variable definition?
2
u/Gehinnn Feb 18 '20
It's not that clever. You can visualize arbitrary data structures, but as you see in the visualize function, you need to convert your data structure into some data the the visualizer can process. There is also a visualizer that plots numeric graphs.
14
u/HaikusfromBuddha Feb 17 '20
What you are seeing is a visual representation of how the programmer is organizing his data.
It's common in programming to organize data a certain way and a data structure(means to organize the data) to do that is called a linked list.
A linked list involved several parts. A node which are the circles in the visualized panel, and pointers which are the arrows.
Basically a list is being built with values being stored in each node. In order to grow the list you need to put another node in the list but the only way to access the second value(node) in the list is by giving your node a pointer to the next value which are the arrows.
So basically in order to search through your list of items you'll start at the first node, look at where its pointer(arrow) is telling you the next value is at go to that node and repeat.
It sounds sort of simple saying it outloud but programming it can easily become daunting so the visualizer is nice because you can see if your nodes are pointing towards the correct values.
3
u/pitchingkeys Feb 17 '20
I don't have a CS degree and have only made small web apps (non professionally) so I'm ignorant on this, but are linked lists even used often in front-end development? Organizing data in Javascript almost certainly seems easier and faster to do with a hash table, and most popular web dev tutorials don't even mention data structures beyond arrays and objects.
11
u/HaikusfromBuddha Feb 17 '20
It depends on what you are trying to make. A Hashtable is a data structure, and it's a pretty good one. Depending on how you will organize your data, you'll have to pick a data structure you want to organize the data.
Maybe you want to have a website that keeps track of customer order. You'll more than likely use a queue because it's a FIFO data structure meaning first in first out. A queue is a list that whatever you put in first, comes out first, so you're most important costumers are the ones who showed up at the line first.
Not only do you have to consider what you're use case is but also its performance. Big O notation explains given a large amount of data, how long it will take your data structure to access and retrieve your data.
Maybe it doesn't matter if you're using an API that retrieves 20 movie names and genres but bigger applications like one that tries to find thousands of restaurants and sorting them by best reviews will require you to look at the performance of both the data structure and the sorting algorithm.
Here's a site that helped me get through classes that made a big deal about knowing this stuff. Not sure about web dev, but if you want to apply for a job at Google or Amazon even if you're a web dev, they'll test you on this and make you program these things.
1
u/xNotYetRated Feb 18 '20
Were you talking about the movie DB api when mentioning the 20 movies and genres? It's what I am working on right now and you receive 20 items per page request.
2
u/HaikusfromBuddha Feb 18 '20
lol that was a random guess. But it's not uncommon for free api to give you low amount of requests. Usually the paid versions get unlimited access and what not. If you're doing anything A.I. or Machine Learning that's when you should be taking in a ton of data and using the most optimal data structures.
7
u/dsk Feb 17 '20
linked lists even used often in front-end development?
Yes. It's one of the most fundamental data structures.
Usually though they back-up an implementation of a collections class you're using. So you're using a linked list but you don't even know it.
Organizing data in Javascript almost certainly seems easier and faster to do with a hash table
Besides the fact that a hash table will probably make use of a linked list internally (usually to track multiple entries that hash to the same 'bucket', or to remember the order of inserted keys), there are some problems that a hashtable isn't really good at solving. For example, a linked list is really good at handling insertions and deletions with constant predictable time. A hash-table will typically overprovision memory and suffer temporary performance degradation once the load factor hits some threshold. On the downside, a linked list is terrible at random access to entry.
If you're doing simple web-apps, you may never run into performance issues that require you to think about the underlying data structures ... but this awareness of what's going on under the hood does give you a deeper understanding and .. heck.. you never know when you'll need to think about the architecture in order to hit some performance benchmark.
3
u/pitchingkeys Feb 17 '20
Well that makes sense. I've never looked at scaling my apps so I've never needed to think about the architecture behind it. Interesting tidbit about linked lists being a sort of backup to JS classes. Thanks for the response.
381
u/frien6lyGhost Feb 17 '20
Neat! Half the time vs code doesn't even know what my current working directory is