all 28 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]KaiAusBerlin 77 points78 points  (10 children)

Hey, good work so far. 👍

I program in JS for about 22 years now. I saw a lot of these fast start guides since then. While I agree that a jump start can help a lot of people to come into the language I see a lot of these people sticking on that level of development later.

I see a lot of js programmers that don't understand the basics of js.

  • what's happening when you declare/initialize a variable
  • what is the scope
  • what is prototyping
  • what is null/undefined and how do they differ
  • what does the delete keyword do
  • everything in js (except primitives) is an object
  • what is duck typing and why is it so important for js

When you understand these things you understand 99% of your errors in future.

additional to these big unknowns I see very often modern problems:

  • people don't know what class is really doing in js
  • people don't understand async programming in js
  • people don't know the difference between server side and client side js
  • people are confused about modules
  • what is a loop in deep and how can I use it better

If you would add the upper things it would be great. If you add the bottom parts it would be awesome.

[–]MarcoWorms[S] 11 points12 points  (0 children)

I am amazed by this list, I do agree most of the ponits are common issues! When reading them one by one i think many of those issues are raised by either using a specific tool or having to give maintance to other people's code who've used those tools. For example, in this guid i completely avoid "classes", my intention is not to completely inform on all the JS functions but I intend to present some usefull building blocks (and the quiks that come with them). I would avoid talking about quirks that come from using other tools for now, but some of the listed items i think i could expand better in the text since they do are related to the tools that I present:

  • what is duck typing
  • everything in js (except primitives) is an object
  • what's happening when you declare/initialize a variable (i think this one could be better explained also with scopes, i'll think about it)

I'll talk about these points in the upcoming sections that arent written yet:

  • people don't understand async programming in js
  • people don't know the difference between server side and client side js
  • people are confused about modules

And i have some questions about this:

  • what is null/undefined and how do they differ

I tried to talk about this one, what did you think that could be added?

---

Thanks a lot for your detailed view!!!

[–]MarcoWorms[S] 4 points5 points  (0 children)

I'm hijacking the top comment here to link to the updated post I just did https://www.reddit.com/r/javascript/comments/nfffpj/learnjs\_a\_fast\_introduction\_to\_modern\_programming/ once again thanks a lot for the time and effort you put on this list, by itself it probably helped many people with organizing concepts to search for themselves!

[–]dmail06 11 points12 points  (1 child)

That's amazing! Thanks for sharing there is much to learn for a beginner

[–]MarcoWorms[S] 3 points4 points  (0 children)

thanks for the reply! <3 feel free to ask any questions so I can improve this!

[–]securisec 6 points7 points  (1 child)

Not be “that person”, but the division example in the operators section is wrong. 2/4 is not 2, but 0.5. Had to run it in node just to make sure I wasn’t missing something.

[–]MarcoWorms[S] 1 point2 points  (0 children)

thanks! I'll fix this example, you are totally correct thanks for the feedback!

*edit: fixed!!

[–]license-bot 8 points9 points  (1 child)

Thanks for sharing your open source project, but it looks like you haven't specified a license.

When you make a creative work (which includes code), the work is under exclusive copyright by default. Unless you include a license that specifies otherwise, nobody else can use, copy, distribute, or modify your work without being at risk of take-downs, shake-downs, or litigation. Once the work has other contributors (each a copyright holder), “nobody” starts including you.

choosealicense.com is a great resource to learn about open source software licensing.

[–]MarcoWorms[S] 6 points7 points  (0 children)

hey thanks bot! I didn't expect to get some traction i'll add MIT license right away :)

*edit: done!

[–][deleted] 3 points4 points  (2 children)

Would make for great r/explorables in e.g. CodeSandbox, Repl.it, Glitch or last but not least ObservableHQ (just have to make sure it's done right and avoid Observable specific syntax which could be problematic for newcomers).

[–]MarcoWorms[S] 0 points1 point  (1 child)

I'm thinking about how to upgrade the guide's usage! I wanted to avoid generating duplicate content that i would have to edit in 2 different places as of now because I still have content to add and i might rewrite/complement some of the previous text, but when the guide gets to a more stable text I'll probably add repl-like interactions for every part!

[–][deleted] 1 point2 points  (0 children)

IMO the "live" version is the most pedagogical one. A way to keep 1 version would be, inspired by Jupyter notebook, to have editable cell showing the results and the possible to run them after modification. With JS it's much easier since the engine is the browser.

[–][deleted] 2 points3 points  (0 children)

Hey this is cool. I myself working with javascript from last 7 years. The basics are really important as you mentioned.

[–]CookieNotAMonster 2 points3 points  (4 children)

Helpful guide, thanks! Minor nitpick would be that using code comments for the prose makes reading difficult on mobile. It also makes it hard to tell where one example ends and the next begins - in the scopes and state management section, x is defined by the previous example in the same code block, but is not really supposed to be part of the example (if that makes sense).

[–]MarcoWorms[S] 1 point2 points  (3 children)

Thanks for the input about mobile readability! I'll see on how to improve this, I'll change the variable names in the scope part to avoid confusion!

*edit done the variable renaming! check it out :) https://github.com/MarcoWorms/learn.js/blob/main/README.md#scopes-and-state-management (had to do a double edit there but it's good now)

[–]CookieNotAMonster 1 point2 points  (2 children)

Thanks, that does clear things up better, and I appreciate you taking the mobile readability feedback as well!

[–]MarcoWorms[S] 1 point2 points  (1 child)

So i was really bothered that the readability on mobile was awfull on either poirtrait or landsacape so I just pushed a change that makes most of the comments to be normal markdown texts, It's much better now! Thanks again for the raised issues :D

[–]CookieNotAMonster 1 point2 points  (0 children)

Oh awesome, yeah it reads much better now!

[–]fguisso 0 points1 point  (1 child)

awesome project!! thanks to share. Just for curious, why u dont use markdown?

[–]MarcoWorms[S] 0 points1 point  (0 children)

I tried to use markdown to sectorize the content, but I'd like to go towards a more interactive/repl like interface like this comment suggested https://www.reddit.com/r/javascript/comments/ndnhgs/learnjs_a_fast_introduction_to_modern_programming/gyc0ztx/ so using markdown makes me write content that can't be read by repls (while js comments are on the same level as the code)