So You Wanna Learn JavaScript? (Part 2)

As of my last post on So You Wanna Learn JavaScript, I promised to put on several websites which I believe is rudimentary to enhance your JavaScript problem solving and algorithm skill.

So, besides on intensifying your knowledge on the concept, you need to actively put it on practice. Therefore these websites are really useful in making it happen.

Lets get straight down to it.

Free Code Camp

It's actually not design specifically for this purpose, yet Free Code Camp (FCC) is one of the best free open source website you could find to practice your JavaScript skill.

FCC mapped out to produce skilled web developer with tons of projects (which probably kind of what differentiate it from other sort of camps).

free code camp javascript algorithm practice

It has up to 150 algorithm scripting practice (on average) for JavaScript itself!

Pretty nice, right :)

You won't find common algorithm pattern come into practice (binary search, divide and conquer, etc). It will pivot on your ability to solve problems.

Here's one of it's advance algorithm scripting problem:

free code camp algorithm problem

It's nice to see how they even provide some helpful links you can check on:

helpful link free code camp

The test case you probably wondering, they spring it up so you'd know where you did wrong.

free code camp test case

One nice thing about them, is the awesome smooth user interface. free code camp UI

CoderByte

Plenty suggest CoderByte too. They have an organized sections of challenges difficulty, ranges from easy to hard.

I saw on the other day where Hack Reactor, the coding Bootcamp which specialized in JavaScript, ask their prospective students to practice on this site before going on their technical interview. There is a private section for you to prepare specifically to several bootcamp admission, including Hack Reactor, App Academy, and Fullstack Academy. They also provide a job interview questions for top companies like Google or Microsoft. Too bad they put on charge for you to access it :(

One thing I hate is their lousy UI. Kind of buggy, so you probably want to check out an online editor such as repl.it, and set the language to JavaScript.

One quick preview of it:

coderbyte user interface

There are currently 36 easy challenges, 33 medium challenges, and 45 hard challenges. See if you can solve them all :)

They have point system determined by the accuracy of your code and the time you need to solve it.

Code Wars

One of the best and recommended by many due to it's "war" feel and touch. I'm pretty sure many of you will love Code Wars.

Many of their problems (known as kata) is made by the users, so it keeps growing and growing. In terms of difficulty, you can find it ranges from 1-8. They call it kyu. So, there will be questions mark with 1 kyu until 8 kyu. You will start of with 8 kyu rank, and will level up gradually as you finish the challenges.

One sample question of a 7 kyu kata:

sample problem of code wars

You can define your own test cases:

code wars user interface

One awesome thing about this website is that you can see solutions by other "warriors" and vote for which you consider the best practice and clever. You'd find new ways of solving the problems, techniques you wouldn't realize before, which is GREAT!

best practice code wars

That's all from me, let me know what you think by leaving a comment!

I'll try to come up with more websites for you to try. Cheers :)

So You Wanna Learn JavaScript?

Previously, I made a series of post named JavaScript for Noobs. Not because I'm sort of 'the Javascript guru', but more less of a documentation of my studies around the technology.

Javascript is a pretty mean language, isn't she?

It's an easy way through at the start, but as times go on, it's an undoubtedly nightmare. That is because Javascript has a "steep learning curve".

What I meant is this:

steep-learning-curve

As you can see, the amount of time required to enhance your skill right from the kickoff is genuinely steep, that is, with a little amount of time, you're able to posses lots of knowledge/skill.

BUT,

when your skill levels at a certain scale, the graph moves much more gently, which probably close to a parallel of the x-axis. This, is when things get ridiculously hard.

By the way, the graph aren't quite illustrating what I'm saying, so let's change it:

steep learning curve

Aha! Now this does a great job emphasising what I meant.

Anyway, why would someone in particular want to learn Javascript? Besides, there are dozens of other programming languages worth to learn too.

You should definitely watch the following video:

[su_youtube url="https://www.youtube.com/watch?v=Bx17ywo-5nM"]

Scott Hanselman, one of the top web developers I'm currently admire of, suggesting that if you know Javascript and an enterprise language (such as C# or  Java), you basically can create anything on any platform.

Javascript is EVERYWHERE!

One hell of a shortcut on learning Javascript is to team up with developer bootcamp. I'm particularly aiming for a bootcamp known as the Hack Reactor. I'm after the remote beta, since my geographic location is not particularly helpful.

Anyway, the key point of this post is to elaborate several resources in regards to learning Javascript.

For now, I would give you the resources to it's concept, tune up for next post in regards to practices!

Concept

I came across with several sources, I find these references helpful in terms of bringing up the basic concepts of Javascript nor the primary building blocks.

  • PluralSight

It's one of the best and complete reference yet, but in came with a price (monthly/annually subscription). But, if you really mean of learning Javascript, you can nail it for a month. Go check it's Javascript learning path. I must warn you that some of it's content are not beginners stuff, although it is labeled for beginners (or probably is just me).

  • Javascript Is Sexy

I'm sure you heard of it. In fact, it now has an official website for it's course, similar like a bootcamp. By the release of this post, Javascript is Sexy is going for their second cohort. That one thing I love about this website is their meticulous attention to detail. They are giving step by step guide on learning Javascript properly, so you won't messed up, or jumping randomly and miss some fundamentals.

  • Eloquent Javascript

It's a reference book and yet free! You can read it online here, or get your own paperback copy of it. There's a decent amount of exercise on some it's chapters, and you can play around with it's Code Sandbox. The Hack Reactor suggest you to read chapter 1 - 5 before proceeding to their technical interview.

  • You Don't Know Javascript (YDKJS)

The free open source Javascript which available to public through gitHub. Tons of Javascript expert have been spending time contributing to this project, thus giving you insight on how deep this book might goes. You can get the paperback copy too through O'Reilly publishing.

Once you reach an intermediate state, you might find yourself need to find the perfect design pattern out there. The design that would gives your code the desired maintainability, reusability, and reliability to solve existing problems.

  • eJohn

I personally haven't check it's content, but if you consider so, please refer here. It did mention that it's an advance Javascript.

I'll gradually add this list by time.

Cheers :)

JavaScript for Noobs: Intro

During this post, I would generally be discussing about the “noob” features of Javascript.

I’m not saying that I’m a proficient Javascript guru, or whatever, it’s just these topics I’m going to write, are just plain noob 🙁

Nonetheless, get to know the basic is an essential step to getting your Javascript mastery. You should know that Michael Jordan itself practice whole a lot more on the basic techniques (dribbling, passing, shooting), rather than focusing out on the crazy moves typical ballers would do.

Let’s get started.

Statements

Statements, like in other programming language, are just “statement“, though.

[suhighlight]It’s a single line (mostly) instruction for the computer, that would generally end up with the semicolon[/suhighlight], as follows:

var awesome = 2 * z;

The = and * are an operator, that said, just like the old-school mathematical operation. If you got no hell of an idea about this, well, you’re screwed. Anyway, an operator have precedence as it’s base rule of who gets operated first. You should definitely check that out, I’m just not into pointing that for this post, not to say that I’m lazy 😉

Number 2 is a literal. [suhighlight]Values that are not being stored in a variable are called as a literal[/suhighlight]. You don’t get to say that z is a literal too, what it does is simply telling the computer to get the value stored in variable z .

Most of the time, computer (compilers/interpreters), read from the left to right. So it’s just like how most people read, unless if you’re Arabic…

Expressions

Aha! I bet you would probably confuse this with statements 🙂

Needless to say, it’s quite a different world, you might say. That’s why I put this on a different section.

The awesome explanation I got from the internet is this:

[suquote]An expression is syntactic construction that has a value. Expressions are formed by combining variables, constants, and method returned values using operators.[/suquote]

Well, that’s a lot to say. I can’t figure out what a “syntactic construction” mean, but I got to tell you, expressions are a combination of variables, constants, and method that produce a value. That’s it!

Let’s try few things:

var coolStuff = awesome * 2;

Let me ask you, how many expression you find on the preceding statement?

To make it short, it’s four! Let’s break this down a bit:

  • awesome is a variable expression, it get’s value from the awesome variable.
  • 2 is a literal expression.
  • awesome * 2  is an arithmetic expression.
  • coolStuff = awesome * 2 is an assignment expression.

Operators

I did mention a few times about operator, and yes, I did said that if you’re not good at this, you probably skipped school bunch of time (just kidding).

Let me list down the most commonly used Javascript operator. But, rather than writing it out by myself, I would prefer a screenshot from a well-known open source JavaScript book, You Don’t Know JavaScript! You should DEFINITELY check that out.

operator in javascript

Comments

You know the most arguable thing in the world? EVERYTHING. It’s the nature of human kind that we love to comment, I can prove you by referring you to Youtube. That is why Javascript gave you this noble feature for you people to comment. But this time, you are not going to comment what other people did, but more onto what you’ve did.

On several occasions, you would probably code for 2 hours non-stop, and then decide to take a few minutes break. You said to yourself, “Well, a 10 minutes nap would be fine.” Thus, you went for the nap.

After awhile you woke up, squeezing those little eyes on the monitor, and realize, “What on Earth am I doing for the past 2 hours!?”

That’s right, you forgot everything.

That’s when the comment would come for the rescue. You should always, I mean, ALWAYS, comment on your code. Period.

What you think about this post? Make sure to subscribe, comment, and thumbs up! I appreciate at my very best of what you guys might think about. Definitely check out on my previous post about my recent stupidproject 🙂