JavaScript: Basics

[CrabDude]

This should just be a collection of resources, probably mostly from MDN, but also some others currently here

What success looks like: Succinctness and clarity. Less is more. This should just be a pared down collection of recommended references for learning the language.

Please assign to yourself before working on this. /cc @NinjaSudo @philster @azoff @DiyahM

[CrabDude]

Note the title change: "JavaScript: Basics"

[CrabDude]

ETA?

[pixelknitter]

@CrabDude made a first pass of this one. Going to flesh out with some examples of basic concepts. Here's a list of the current Table of Contents (continued learning will mostly be short blurbs again and references):

Overview

Basics

Data Types

Functions

Data Structures

Object-Oriented JavaScript

Functional JavaScript

Continued Learning

Intermediate

Promises

Prototypes & Inheritance

Advanced

Don't have anything here yet.

References

Tools

Keep Up to Date

[pixelknitter]

The order of the above topics and where they go are still a bit in flux. Just added:

Basics:

• Operators

As there are some quirks to understand that I find important to clarify early on. I'd almost say that I'm going with an "Essentials" list.

[CrabDude]

@NinjaSudo This is ambitious. I think the trick to being successful here is really going to be finding a way to give a representative concise overview of a subtopic without attempting to be comprehensive. In other words, we shouldn't try to reproduce JavaScript Garden, but instead provide references to such resources.

This should be a starting point, launching point or 10,000ft overview of the JavaScript development landscape. On that note, this looks like a good overview and I think you're taking the right approach. The best analogy I can give is that I used to teach my Bootcamps attempting to be comprehensive, almost academic, which unintentionally limited their usefulness. On the other hand, the far more pragmatic project-based approach of CodePath is far more useful to students. Aim for the latter.

Note title change to "Basic JavaScript"

[pixelknitter]

definitely valid points. I'll refine based upon your suggestions and reminder to remain true to the CodePath mentality.

Eddie

On Thu, May 7, 2015 at 2:14 PM, Adam Crabtree notifications@github.com wrote:

@NinjaSudo https://github.com/NinjaSudo This is ambitious. I think the trick to being successful here is really going to be finding a way to give a representative concise overview of a subtopic without attempting to be comprehensive. In other words, we shouldn't try to reproduce JavaScript Garden http://bonsaiden.github.io/JavaScript-Garden/, but instead provide references to such resources.

This should be a starting point, launching point or 10,000ft overview of the JavaScript development landscape. On that note, this looks like a good overview and I think you're taking the right approach. The best analogy I can give is that I used to teach my Bootcamps attempting to be comprehensive, almost academic, which unintentionally limited their usefulness. On the other hand, the far more pragmatic project-based approach of CodePath is far more useful to students. Aim for the latter.

Note title change to "Basic JavaScript"

— Reply to this email directly or view it on GitHub https://github.com/codepath/nodejs_guides/issues/15#issuecomment-100021211 .

[pixelknitter]

@CrabDude Sorry for the delay, had a few things come up. I should have a draft posted for this by tomorrow.

[pixelknitter]

Running through a final clean up, took a bit longer than expected due to a quick rewrite. I'll post next for review.

[pixelknitter]

@CrabDude Here's the first run through. Removed much of the advanced/intermediate references and instead referenced some of my favorite resources and tutorials (mostly referring to MDN since they are an industry standard). Went with an upfront example based approach, let me know what you think on that.

https://github.com/codepath/nodejs_guides/wiki/JavaScript:-Basics

Look forward to feedback.

[pixelknitter]

Just noticed a problem, JavaScript:-Basics on the "Pages" list isn't the same in the "Home" wiki:

https://github.com/codepath/nodejs_guides/wiki

Two Links: https://github.com/codepath/nodejs_guides/wiki/JavaScript:-Basics https://github.com/codepath/nodejs_guides/wiki/JavaScript-Basics

I'll let you figure out which one you want. I fixed it for now :)

[CrabDude]

It should be "Basic JavaScript" in all places.

[pixelknitter]

Ok, not sure how to change the Pages for the Wiki, but I can look into that tomorrow.

Eddie

On Wed, May 13, 2015 at 6:48 PM, Adam Crabtree notifications@github.com wrote:

It should be "Basic JavaScript" in all places.

— Reply to this email directly or view it on GitHub https://github.com/codepath/nodejs_guides/issues/15#issuecomment-101877697 .

[CrabDude]

It's based off the title , but I already changed that. We just need to update the other links. Don't worry, I'll take care of it.

On Wednesday, May 13, 2015, Edward Freeman notifications@github.com wrote:

Ok, not sure how to change the Pages for the Wiki, but I can look into that tomorrow.

Eddie

On Wed, May 13, 2015 at 6:48 PM, Adam Crabtree <notifications@github.com javascript:_e(%7B%7D,'cvml','notifications@github.com');> wrote:

It should be "Basic JavaScript" in all places.

— Reply to this email directly or view it on GitHub < https://github.com/codepath/nodejs_guides/issues/15#issuecomment-101877697

.

— Reply to this email directly or view it on GitHub https://github.com/codepath/nodejs_guides/issues/15#issuecomment-101942552 .

[pixelknitter]

figured it out :P fixed them this morning.

Eddie

On Thu, May 14, 2015 at 10:25 AM, Adam Crabtree notifications@github.com wrote:

It's based off the title , but I already changed that. We just need to update the other links. Don't worry, I'll take care of it.

On Wednesday, May 13, 2015, Edward Freeman notifications@github.com wrote:

Ok, not sure how to change the Pages for the Wiki, but I can look into that tomorrow.

Eddie

On Wed, May 13, 2015 at 6:48 PM, Adam Crabtree <notifications@github.com javascript:_e(%7B%7D,'cvml','notifications@github.com');> wrote:

It should be "Basic JavaScript" in all places.

— Reply to this email directly or view it on GitHub <

https://github.com/codepath/nodejs_guides/issues/15#issuecomment-101877697

.

— Reply to this email directly or view it on GitHub < https://github.com/codepath/nodejs_guides/issues/15#issuecomment-101942552

.

— Reply to this email directly or view it on GitHub https://github.com/codepath/nodejs_guides/issues/15#issuecomment-102108199 .

[CrabDude]

Updating. Unfortunately, there's a lot to update here. Let me know if it's not obvious from the diff.

How do these links work? [MDN Guide for Grammar][mdn-grammar]

[pixelknitter]

Hmm, ok. Let me check out the diff. I don't see anything yet.

They are reference links, so the key "mdn-grammar" is listed at the bottom and the actual URL is associated with the key. This allows you to reference the link multiple times without having the text define the key.

Cheeers,

Eddie

On Mon, May 18, 2015 at 1:45 PM, Adam Crabtree notifications@github.com wrote:

Updating. Unfortunately, there's a lot to update here. Let me know if it's not obvious from the diff.

How do these links work? [MDN Guide for Grammar][mdn-grammar]

— Reply to this email directly or view it on GitHub https://github.com/codepath/nodejs_guides/issues/15#issuecomment-103205006 .

[pixelknitter]

I got some feedback from folks and realized there were a few things I should have covered but didn't.

Eddie

On Mon, May 18, 2015 at 2:26 PM, Eddie Freeman eddie.freeman@gmail.com wrote:

Hmm, ok. Let me check out the diff. I don't see anything yet.

They are reference links, so the key "mdn-grammar" is listed at the bottom and the actual URL is associated with the key. This allows you to reference the link multiple times without having the text define the key.

Cheeers,

Eddie

On Mon, May 18, 2015 at 1:45 PM, Adam Crabtree notifications@github.com wrote:

Updating. Unfortunately, there's a lot to update here. Let me know if it's not obvious from the diff.

How do these links work? [MDN Guide for Grammar][mdn-grammar]

— Reply to this email directly or view it on GitHub https://github.com/codepath/nodejs_guides/issues/15#issuecomment-103205006 .

[CrabDude]

Pushed. A couple points to keep in mind:

• Brevity & avoid confusion (no need to cover hoisting, especially since let doesn't hoist)
• Consistent ESNext syntax

I'll leave this open till you've had a chance to update it if you want.

[pixelknitter]

@CrabDude thanks, ah thanks for the updates, so far they do make sense. I appreciate the feedback.

I didn't use some of the shorthands, but I guess it makes sense in a practical example.

[CrabDude]

Covering shorthands is a balancing act. I prefer to use them when I think they'll be commonly used (fat arrows, object methods), and not when they're not ({value})

On Mon, May 18, 2015 at 2:36 PM, Edward Freeman notifications@github.com wrote:

@CrabDude https://github.com/CrabDude thanks, ah thanks for the updates, so far they do make sense. I appreciate the feedback.

I didn't use some of the shorthands, but I guess it makes sense in a practical example.

— Reply to this email directly or view it on GitHub https://github.com/codepath/nodejs_guides/issues/15#issuecomment-103219626 .

[pixelknitter]

Indeed, well so far I'd only make a few changes and then I was thinking of adding a section about loops, expressions, etc as that would be a syntax introduction since there isn't one in there yet. What do you think?

[pixelknitter]

I'll clean up the links as well.

[CrabDude]

Yup. I would cover loops & expressions in the same demo + comments style. JavaScript will be very familiar, so our goal is to introduce them to portions that are similar and point out how/if they're different, followed by deeper dives into non-similar topics (e.g., object & function)

On Mon, May 18, 2015 at 2:47 PM, Edward Freeman notifications@github.com wrote:

I'll clean up the links as well.

— Reply to this email directly or view it on GitHub https://github.com/codepath/nodejs_guides/issues/15#issuecomment-103222592 .

[pixelknitter]

Do you mean, Loops and Expressions will be very familiar in JavaScript (as they are similar to other languages)? Then pointing out the differences, where they exist? Just want to clarify.

Otherwise, sounds good.

[CrabDude]

Yes.

On Mon, May 18, 2015 at 2:56 PM, Edward Freeman notifications@github.com wrote:

Do you mean, Loops and Expressions will be very familiar in JavaScript (as they are similar to other languages)? Then pointing out the differences, where they exist? Just want to clarify.

Otherwise, sounds good.

— Reply to this email directly or view it on GitHub https://github.com/codepath/nodejs_guides/issues/15#issuecomment-103225428 .

[pixelknitter]

@CrabDude What's your stance on introducing the "label" statement? I've personally never used it in a practical sense. I looked around at other primers and don't see it mentioned. Only found it mentioned in the MDN guide.

[pixelknitter]

Updated, with the new section. I'm considering a similar syntax example of the first section for Expressions & Conditionals but feel it might be a bit ambitious.

[CrabDude]

@NinjaSudo LGTM Thanks for all your hard work.

WRT label, I've never seen it used by anyone, but it has always seemed like a very powerful paradigm. My suspicion is that it may be a little too powerful and thus a bit of an anti-pattern. The best explanation I can give here is the arguments against "GOTO". In short, goto undermines the expectation of running to completion. If I have some code, I generally expect that it will only short-circuit on a return, break or throw and only recurse or continue to the end. GOTO adds an additional expectation which is that at any point in time any line can arbitrarily be re-entered regardless of the current local state. I suspect that this is just too much potential complexity for most developers to account for.