JS Learners' Fieldguide

Free Code Camp is the the one JavaScript resource that I can’t recommend highly enough for Learners!

In late 2015, they did change the site design, making the skip process less intuitive. To skip lessons, open your "Map" and click on the lesson you would like to complete.

Another great resource for any novice and junior developer is Code Newbie. It’s more about the social and networking aspects of entering the programming world. They have a bunch of different things including a pretty active forum and a blog. They also do a weekly podcast, which is really good (but remember, if it comes down to listening to a podcast OR working through freeCodeCamp - CODE!) They also have a learning resources section, but it’s mostly bootcamps that require money or being on location for many consecutive weeks, or resources that simply aren’t as comprehensive, and learner-friendly as freeCodeCamp. (freeCodeCamp really is the best resource I’ve seen for learning in a guided, thorough, and progressive way!)

Mozilla Developer Network (MDN) is the best definitive JavaScript reference. As a novice, it can be overwhelming. I encourage you to continue referencing it as you make your way through FreeCodeCamp and other resources. Bit by bit, you will start to "grok" the MDN documents and come to love them.

p.s. goto is a common command in many programming languages, and is a reserved word in JavaScript. To get an idea of community acceptance of goto, check out xkcd: goto.

Once you start actually coding in JavaScript, you will likely start to wonder what is happening under the hood. To get a glimpse, I recommend running your code through the JavaScript version of the PythonTutor.

The one big complaint I have about Free Code Camp, is that it doesn’t encourage deliberate practice. Once you have the basics down, I strongly encourage Learners to start working on code katas. The best site I’ve found for katas is Codewars.

You can start playing with Codewars after about the first 1/4 of freeCodeCamp’s "Basic JavaScript" exercises (about 16 hours into their series, which assumes absolutely no prior knowledge, if you have any then you’ll move through it faster than that!).

My first recommendation is that when you do a kata, you spend almost as much time reviewing and understanding the other solutions as you do developing your own solution.

My second recommendation is that when you learn something new, whether it be through Free Code Camp, a previous kata, a personal project, or anywhere else, that you find related katas and work through one a day until you feel comfortable with that topic.

For example, I kept running into RegEx solutions in katas, but hadn’t really done a lot with RegEx up to that point. So I found a great online RegEx tutorial (RegexOne). After I finished it, I made a point to work through RegEx related katas, starting at 8kyu (even though I’m rated above that) and worked through one or two a day. In the course of that, I also noticed a lot of ES6 arrow functions in "Best Practice" solutions, so I started adding in more ES6 solutions. (I’m particularly proud of my "Unlimited Sum" solution.)

I’ll be posting a fuller article on this topic in the near future. For the time being, I’ll simply say that pair-programming, mentoring, and code reviews (e.g. via Codewars' solutions) are as important as more solo resources like the exercises, code katas, or reference materials.

Frustratingly, several times when I’ve shared this I’ve heard references to "competition is demotivating" (one example).

Pair-programming, mentoring, and reviews of common code absolutely should not be competitions! Among other things, they should be opportunities to communicate what a learner thinks they understand, to see alternative implementations, to deconstruct and figure out what they don’t understand, and ask questions of a fellow learner or mentor - all without judgment. Each of these activities augments learning in important ways.

If you are a learner and you sense competition or judgment from someone that you are pairing with, you should emphasize that you do not desire to competitively engage in these activities. If you can, provide specific examples of the undesirable behavior that you felt this person engaged in and discuss alternative ways to interact with one another. If your peer or mentor doesn’t understand this, or is incapable of accommodating this perspective - find someone else to work with!

Once you’ve gotten through the "Basic JavaScript" exercise, I recommend you start to learn more about how JavaScript works "under the hood".

Anthony Alicea’s "JavaScript: Understanding the Weird Parts" dives deep into the workings of JavaScripts. Where Free Code Camp will help you understand how to make web applications, The Weird Parts will help you understand why JavaScript does what it does.

Make sure to check Retail Me Not for current discounts (there’s almost always one!)

If you haven’t already started using JavaScript version of the PythonTutor, now is a perfect time to do so!

When you’re starting to feel confident in the basics and need a bit of a change of pace (your primary focus should still be on progressing through freeCodeCamp!) there are many great places to play and practice what you’re learning:

I’d hold off playing around with them until you’ve finished at least the freeCodeCamp’s "Basic JavaScript" exercises (by their estimates, another 8 hours or so). And —coming from experience— don’t let them distract you from actually moving forward on your primary goals!

You will run into Javascript frameworks left and right during your JavaScript adventures (e.g. Angular, React, Meteor, Aurelia, Ember, Backbone, Vue). Don’t spend time learning them until you’ve got the basics down or absolutely need to use a specific library (e.g. for a job). Learning core JavaScript will allow you to quickly get up to speed on any framework, while learning specific frameworks without a corresponding knowledge of core JavaScript will limit you to the specific, and frequently ephemeral, frameworks you’ve learned.

I’ve had a lot of novices ask about editors. Developers tend to develop strong preferences, so you should be comfortable working with any editor. That said, here are some thoughts on editors.

While HTML and CSS are not JavaScript, if you’re using JavaScript then there’s a good chance you’ll also need to use HTML and CSS. CSS is an interesting markup language and is pretty powerful in its own right. If you want to have some fun learning about CSS3 or FlexBox (a subset of CSS3), than I highly recommend you checkout the CSS Diner and Flexbox Froggy. (I recently ran across Flexbox Defense which looks like yet another a game for learning flexbox.)

Test-Driven Development is a wonderful thing, but as a novice it can be overwhelming. I encourage Learners' to start practicing TDD when they start working through CodeKata. It has it’s own flavor of TDD, but the principals will carry over to other TDD libraries. Writing your own tests for CodeKatas helps you work through the principals of TDD. When you think you might be ready to explore TDD, check out my post TDD for JS Learners.

As you’re learning JavaScript, and pretty much any other modern open-source programming languages, you’ll see a lot of projects and what not on GitHub (I’m pretty sure freeCodeCamp now encourages you to get an account before you even start coding).

GitHub is the go-to for most open-source projects, but for personal projects I much prefer and strongly recommend, GitLab. Pretty much anything that GitHub does GitLab does, plus GitLab does a lot more (for example, allowing you to have private projects for free). The important caveat is that private projects on GitLab are, well, private. In other words, you won’t be building up a highly visible trail of code. If you’re looking for a job, then a trail of code is something that employers can reference, just like a portfolio.

I’m MetaSean on both (https://github.com/metasean ; https://gitlab.com/u/metasean). I look like I’m more active on GitHub only because of things I do with projects already hosted there and because I have private repos on GitLab and so you won’t see my activity on those ('cause private).

DuckDuckGo (DDG) !bangs - I love DDG for many different reasons, one of which is their !bangs. !bangs are basically shortcuts for different sites, resource types, and a handful of other things. In a DDG search bar you can press "!" (without the quotes) and it will show you the most popular !bangs as well as a link to a very, very, very long list of all the available !bangs (did I mention they have a lot of !bangs!)

Why am I including this? Because there is a bang to search MDN - "<search term/s> !mdn" - even better, there is a bang to search just the JavaScript reference section of MDN - "<search term/s> !js".