Forem: Yaphi Berhanu

What I wish I knew when learning Node.js

Yaphi Berhanu — Sun, 26 Aug 2018 21:32:42 +0000

This article originally appeared on Simple Steps Code which aims to help people learn JavaScript and actually remember it.

When I first learned Node.js, nothing turned out the way I had hoped.

What I wanted:
A simple app that can save a piece of text to a database and read it again.

What I got:
A dark terminal with "hello world running on port 3000" and no idea where to go next.

There were so many questions and so few answers; so many steps and such little direction.

Ultimately I found myself wondering:
What pieces are needed to create a Node.js app, and how do they fit together?

This is the article I wish I had.

Here are the points I'll cover

What is Node.js really?
How much command-line knowledge do I need?
What is npm and how do I use it?
What is package.json?
What is all this require() stuff I'm seeing?
How does Node.js work? Why do I need to write my own server, and what does that even mean?
What is routing, and why do I need it? Why are we using Express.js?
What does "Listening on port 3000" mean?
How do I get my Node.js app to show an HTML file instead of command line text that says "Hello world"?
Which database should I use?
How does the front-end interact with the back-end?
How do I get my project up on the internet?

What is Node.js really?

Node.js is a program that lets you run JavaScript outside your web browser.

For example, you can use Node.js on the back end of your site to save info to a database and retrieve that info. You can also use Node.js to run JavaScript programs on your own computer to automate tasks.

How much command-line knowledge do I need?

You'll need to be able to do the following through your computer's command line:

see which folder you're in
navigate to another folder
see what's inside a folder

Here's my favorite tutorial to get up to speed quickly:
https://learnpythonthehardway.org/book/appendixa.html
(Don't get confused by the mention of Python. Note that this link is an appendix specifically about the command line, not Python.)

What is npm and how do I use it?

npm is a package management tool that lets you quickly download and install convenient, pre-made, reusable code packages that you want to use in your project. You can use these packages like building blocks to help make your apps.

Installing a package is as easy as typing "npm install whatever" in the command line.

If you have code snippets you think would help other people, you can also upload your own packages to the npm registry, where packages are held.

What is package.json?

Package.json is a file containing info about your project such as the name, the description, and which packages it relies on.

What is all this require() stuff I'm seeing?

Remember those useful code packages you installed through npm?

If you want to use a package in your project, Node.js has a built-in function called require() that lets you include whatever package you want.

How does Node.js work? Why do I need to write my own server, and what does that even mean?

First off, a server is a computer or a program that aims to give you what you want when you request something over a network.

For example, let's say you enter google.com into your browser's address bar. You're basically sending a request that says, "I want to see google.com."
This request will be sent over the internet to Google's servers.
Google's servers will respond with, "Okay, here's google.com," and it will send you the web page.

In that scenario, your computer is called the "client" and Google's computers are called the "servers".

To use a real-world comparison, it's kind of like how a restaurant client might order food through a waiter, and then the kitchen prepares the food and serves it back to the client through the waiter, who is basically the network connection between the kitchen (server) and the client (customer).

In this analogy, the request is your order, and the response is the food (or in some cases a "Sorry, we don't have that.")

In Node.js, you write your own server. That means you write a program to handle requests from a user's computer. So if someone requests "I want yoursite.com," your server can look at that request and respond with, "Okay, here's yoursite.com".

The reason you write your own server is that it gives you flexibility in what people can request and what you send back. To go back to the restaurant analogy, it's like writing what's on the menu.

Asking "Why do I have to write a server in Node.js?" is like a restaurant asking "Why do we have to decide what's on the menu?"

Here are some practical examples of how your Node.js server might handle requests for a social media site:

yoursite.com - This URL might send the home page.
yoursite.com/users/yaphi - This URL might send a user's profile data in a convenient JSON format.
yoursite.com/profile - This URL might show your profile, but only if you're logged in; otherwise it will show a login page.

See how that flexibility is useful?

What is routing, and why do I need it? Why are we using Express.js?

Routing is the process of determining what URL route you use to get to a particular resource. For example, yoursite.com/about can route to your site's "About" page. Another example: yoursite.com/analytics/page_load_speed can route to some data about average page load speed.

Express.js is a JavaScript framework that has pre-written code to make it easier to write routes in Node.js. It does other stuff too, but routing is one of the most common use cases to start with. You can install it through npm.

What does "Listening on port 3000" mean?

First, what is a network port?

This is easier to explain with an analogy.

Let's say a bunch of countries are delivering items to one another by airplane. The items are being sent and received through airports.

Networks such as the internet work the same way.

Data is sent from your computer to a server through a port. Think of a network port as if it's an airport for sending data.

Your computer has a bunch of ports it uses to send and receive data. You have to tell your program which port to wait at, so it knows what to expect. This is like how you have to tell someone which airport to go to if they're waiting for an item to arrive there.

When your Node.js app says it's listening on Port 1337, that's the port where it's waiting for requests and responses. It's like saying that your app is standing at Airport 1337, ready to send and receive items.

How do I get my Node.js app to show an HTML file instead of command line text that says "Hello world"?

A lot of tutorials leave you with that command line "Hello world" message, even though sending an HTML file is the same number of steps!

When you get to the part that says res.send, just use res.sendFile('whatever.html') instead of res.send('hello world'). That way, your server will respond with an HTML file instead of command line text.

Which database should I use?

Just start with MongoDB and use mlab's free hosting to get set up. I actually spent years not learning backend programming because I was so afraid of picking the wrong database.

Once you learn one, you can pick up the others quickly because the concepts are similar. You connect to the database, then you write, read, update, or delete. (Yes there are more concepts to learn, but focus on the core for now.)

I spent years agonizing over the choice, and eventually I just did it, and learned the basics in a couple of afternoons. Then I tried PostgreSQL and picked that up in another afternoon.

Don't agonize over this decision. Just pick MongoDB with mlab and get it over with.

How does the front-end interact with the back-end?

AJAX and fetch are two different JavaScript techniques that let you make requests from your web page and handle the responses that come back from your server.

Use AJAX or fetch depending on your browser compatibility needs. Fetch is more convenient and modern, but AJAX is more compatible.

Don't get scared of the names like I once did. These are not entire languages; they are techniques that often take one to five lines of JavaScript.

How do I get my project up on the internet?

Just use zeit.co to deploy your project. It's free and easier than the other options.

Final things to note

When creating a Node.js project expect some setup. This can be an adjustment for someone who is used to typing front-end code, saving it, and running it directly in the browser. The setup time will get smaller as you get comfortable with which packages you prefer and which common setup tasks you can automate or eliminate.

Get used to spending a lot of time following documentation. This can be an adjustment if you're used to coding everything off the top of your head. It's okay to rely on documentation since there's no way to automatically know how every package in the world works.

I hope this article has given you a basic idea of what's involved in a Node.js project.

Space Ghost: My Halloween Debugging Horror Story

Yaphi Berhanu — Wed, 01 Nov 2017 06:14:55 +0000

Yesterday I faced a nasty bug.

I needed to integrate some third-party code that would dynamically insert a script onto a page.

It was billed as a simple copy and paste, but these things rarely are.

I pasted the code in the console, and it didn't work. Nice. Time to lace up my Troubleshoot Boots™.

So what was the problem?

Was it the way the URL was being inserted (.src vs setAttribute)? - No
Was it the script url itself? - No
Was it a cross-origin issue? - Nope
Was it the site I was using this code on? - No
Was it the browser? - No

Finally, I asked myself, had basic script insertion stopped working altogether.

I rewrote my test case for the code from scratch just to make sure nothing was mistyped. Then something crazy happened. The new code worked.

The crazy part? It was exactly the same as the non-working code.

Baffled, I put both versions of the code into a diff checker.

Then I saw the problem: invisible spaces.

The integration code came from a PDF, which had automatically inserted unwanted zero-width spaces, meaning that the code would break while the offending characters would stay invisible.

Once I deleted the spooky space ghosts, the problem went away.

Key takeaway:
If you ever need to paste code from a PDF, an HTML page, an Excel sheet or anything that's not a plain text file, run it through some kind of validator to make sure there aren't any unwanted characters.

I hope this helps in case you run into a similar issue.

This post originally appeared on Simple Steps Code

Learn faster with this trick from PokÃ©mon Go and Cognitive Science

Yaphi Berhanu — Wed, 04 Oct 2017 03:27:05 +0000

Reduce the distance between milestones, and you'll go much farther. That's what I learned from a seasonal update to PokÃ©mon Go's reward systems.

PokÃ©mon Go rewards you for hitting certain walking distance benchmarks. However, the distances were long for relatively small rewards.

Then a temporary update cut the benchmark distances in half.

Suddenly I found myself outside walking a lot more, and my friends had the same experience. Now that each milestone was more reachable, I was more motivated to move. I felt like each step mattered, so I was more willing to take steps.

The end result was that I traveled a much greater total distance than in the past.

This was a eureka moment.

I could apply this principle to other things, like learning certain coding skills (or really learning anything).

As an example, I had wanted to get good with HTML5 canvas for a while, but that sounded like a big goal so I let it sit. Eventually I tried shrinking the distance between milestones.

I told myself to code one circle. And I did. That was the momentum I needed. Soon I had built up to a glowing laser-pong game, gravity physics, an arrow flying through the air with an accurate trajectory, and more.

According to cognitive science, here are the main benefits of shorter milestones in learning:

Motivation: Small steps help you stay motivated because each step feels more acheivable and therefore is more likely to get done. [Psychology Today]
Retention: Small steps improve retention because it's easier to remember stuff when there's less of it at a time. [Harvard guest lecture, Lifehacker]

Motivation and retention are common stumbling points for learners, so it's great to have a trick that can address both points.

If there's something you want to learn, try shortening your milestones. You might amaze yourself.

Now I'm curious to hear from you:
What's something you've been wanting to learn, and what steps have helped you make progress?

This article originally appeared on Simple Steps Code, which helps people learn JavaScript and actually be able to use it. Feel free to check it out if you're curious to see more content like this.

JavaScript project ideas and practical uses

Yaphi Berhanu — Mon, 28 Aug 2017 14:20:20 +0000

This article originally appeared on Simple Steps Code which tries its best to help people learn JavaScript and actually remember it.

Over and over, I hear people want JavaScript project ideas.

I've decided to start an ongoing list, and I'd love for you to jump in and share project ideas. The ideas don't need to be inhumanly creative or anything like that. If possible, I'd prefer plain JS, but don't restrict yourself if some framework or tool is required.

Also, before you attempt JavaScript projects, read this article to make sure you don't fall into the trap of attempting something too huge too soon and giving up.

Here's the list of JavaScript projects so far:

UI stuff

Autocorrecting text box
Form validator
Collapsible navigation menu
Countdown clock
Modal dialog box
A site that lets people design their own UI elements (buttons, mastheads, etc.)
Customize greeting if people came from a certain site

E-commerce

Price estimator
Front end of an interactive online store
Shopping cart front end

Finance

Tip calculator
Cost splitter
Investment calculator
House or car payment calculator
Savings calculator

Tools and utilities

Page that grabs data from somewhere on the web and puts it in a useful format
Random name picker
Unit conversion calculator
Secret message encoder/decoder

Fun and games

Basic quiz
Rock-paper-scissors game
Pong game
Madlibs
A mario-style game
A zelda-style game (more likely a 2d one until 3d performance improves on the web)

Social applications

Social network front end
Real time chat app (using socket io)

API stuff

Gif search, video search, etc
Something with maps (like a store locator)
Something with geolocation (e.g.: find XYZ near you)
Real-time feed of tweets about a subject of your choice
Text-to-speech
Combinations of any of the above

Console tricks

Scrape a page through your console and get info easily without having to copy, paste, and format each thing by hand (great for research)
Change colors of your favorite sites to see what they'd look like

I hope you've enjoyed this, and feel free to let me know if you have other suggestions.

Web development portfolio tips from an interviewer’s perspective

Yaphi Berhanu — Tue, 22 Aug 2017 02:21:28 +0000

This article originally appeared on Simple Steps Code.

A lot of people have asked me what makes a good web development portfolio.

I can't speak for everyone, but I'll tell you what I've looked for when evaluating candidates.

The main thing I look for is: can you do the work (or reasonably learn to)?

Let's talk about your portfolio's content and design.

Your portfolio's content

The basics

The content is the most important part, so start with this.

Once you get the baseline out of the way (name, title, contact, etc.), you'll want some projects that show key skills. I personally like to include CodePen demos because they're a great way to showcase your code as well as the results.

The convenient thing about web development is that you don't need to wait for someone to give you permission to do a project; you can just create whatever showcases your skills. Just in case, here are some project ideas.

Next, you can have a quick bio and some relevant experience. If you don't have professional experience, then just show your personal projects, and as long as those show the necessary skills, you should be fine.

Should you link to your GitHub account?

GitHub is a good way to show some code samples, but not a great way to show projects. If you're depending on employers to download and set up your stuff from GitHub, there's a good chance it'll get skipped. Make the reader's life easy by linking to a usable or viewable version of the project.

Short answer: Link to your GitHub account if it's interesting, but don't make it the only view of your work.

What are some common mistakes?

The most common problems I see are:

Listing skills that they don't have
Layout mistakes on their portfolio (like content going way off the side of the browser window)

How to avoid these mistakes:

If you've been following along up to now, you should have projects covering all or most of the skills you've listed. That's a good way to show you can do what you say you can do.
Test your portfolio at different browser widths to make sure the layout doesn't break. Lots of layout mistakes come down to misusing or misunderstanding the CSS box-model.

Also, here's a primer on responsiveness.

Your portfolio's design

If your content is strong (and it should be if you've followed the previous steps here), then the design doesn't need to be overly difficult.

In terms of design, it's better to do something simple and get it right than do something complicated and have it turn out terrible.

Priority number 1: your design should make your content as simple as possible to see, understand, and navigate.

After that, here are some tips to make it look nice:

Read this article about design for developers. It helped me a lot so hopefully you'll like it.
If you're stuck figuring out layout, just use a big masthead with some text overlayed on a photo (from Pexels or some other free photo site), and then put a content section after that. (See the article in the previous point for how to do this.)
If you're stuck picking a font, just use Work Sans, which you can find on Google Fonts. I like it because it's versatile (the thin versions look sleek while the thicker versions can look more friendly depending on how they're used).

Key takeaways

You can win without formal experience if your personal projects show relevant skills.
Avoid layout mistakes on your portfolio.
Don't be afraid to use a popular design structure (masthead, main content, etc).

I hope this article has been helpful!

If there's anything you'd like to add, feel free to let me know in the comments.

Understanding "this" in JavaScript

Yaphi Berhanu — Mon, 14 Aug 2017 17:50:43 +0000

This article originally appeared on Simple Steps Code which tries its best to help people learn JavaScript and actually remember it.

In JavaScript, the this keyword answers the following question:
Which object does our function belong to when it's called?

If that makes no sense, that's okay! It will make more sense after some quick background info and examples.

First, what is an object?

An object is a set of data stored in name-value pairs (also called key-value pairs).

For example:

var car = {
    color: 'purple',
    topSpeed: 9001,
    model: 'magic school bus',
    driver: 'Waluigi'
};

An object can store many things including strings, numbers, arrays, functions, or even other objects.

Next, what is a method?

A method is a function that belongs to an object.

For example:

var car = {
    color: 'purple',

    makeNoise: function(){
        console.log('vroom');
    }
}

In that example, makeNoise is a method of our car object, and we can call it like so:

car.makeNoise();

So where does `this` come in?

In JavaScript, this just means the object our function belongs to.

In the following example, this will be our car object.

var car = {
    currentSpeed: 0,

    goFaster: function(){
        this.currentSpeed += 10;
    }
}

console.log('speed before: ' + car.currentSpeed);

car.goFaster();

console.log('speed after: ' + car.currentSpeed);

If you try the example, you'll see that the goFaster function increases currentSpeed by 10.

What's a useful example of the `this` keyword?

Let's say we want to have some elements turn red and have a red border when clicked on.

The following code is too repetitive:

<div id="first">first text</div>
<div id="second">second text</div>

<script>
var firstDiv = document.getElementById('first');
var secondDiv = document.getElementById('second');

firstDiv.onclick = function(){
    firstDiv.style.color = 'red';
    firstDiv.style.border = '1px solid red';
};

secondDiv.onclick = function(){
    secondDiv.style.color = 'red';
    secondDiv.style.border = '1px solid red';
};
</script>

What a pain!

What if we just want one function that could say, "Hey. See this div? Change this div."

That would be much better than rewriting the function for each div.

Our this keyword can help us:

<div id="first">first text</div>
<div id="second">second text</div>

<script>
var firstDiv = document.getElementById('first');
var secondDiv = document.getElementById('second');

function turnRed(){
    this.style.color = 'red';
    this.style.border = '1px solid red';
}

firstDiv.onclick = turnRed;
secondDiv.onclick = turnRed;
</script>

See how much neater that is?

But wait... I thought this was supposed to refer to the object our function belongs to. Our turnRed function doesn't seem to belong to any objects, right?

Here's the key point:
The this keyword is only set each time you run the function, not when you first declare the function.

So in the above example, our onclick methods are set to turnRed. The onclick methods belong to their corresponding divs, so in each case, this means "this div".

What happens if you call turnRed() by itself?

If a function doesn't belong to another object when it's called, then it belongs to the window object by default.

That means this will refer to the window, and an error will happen because you can't put CSS styles directly on the window.

Quick recap so far

In JavaScript this is which object our function belongs to when it gets called.
The this keyword is set when you run a function, not when you first declare it.
Unless otherwise specified, this gets set to "window" by default.

How can I see what `this` is?

If you ever get stuck, you can always check what this is by logging it to the console.

Conveniently, console.log() doesn't interfere with the value of this so you won't have to worry that console.log(this); would say "console".

When in doubt, log it out.

Can `this` change?

Yeah!

Sometimes, this is inconvenient. Maybe you want it to refer to one thing, but it refers to something else.

Bind, call, apply, and ES6 arrow functions let you decide what you want this to be.

For now, you have enough to remember, but I've linked to those concepts in case you want to know more.

Key takeaways

this is whatever object your function belongs to when you run it.
Don't overthink it.
If you ever get stuck, just console.log(this); and you'll see what this is.

I hope this was helpful, and feel free to check out Simple Steps Code for more JavaScript tips.

If you have any questions, please feel free to leave them in the comments, and I'll do my best to answer.

JavaScript array push, pop, shift, unshift: how to remember the difference

Yaphi Berhanu — Mon, 07 Aug 2017 00:05:25 +0000

When you're adding and removing stuff from the beginning and end of a JavaScript array, it can be tough to remember which method does what. Here are some tips:

Unshift and shift make the whole array shift sideways (by adding and removing items from the beginning).
Push and pop do NOT make the array shift sideways (because they add and remove items at the end).
In each of those pairs (push/pop and unshift/shift), the longer word makes the array longer.

If you're curious, I made a quick animation to illustrate these points.

I hope this helps!

Note that this is more of a memorization trick than a full explanation, so feel free to check out MDN for full details and examples of push, pop, shift, and unshift.

When your entire knowledge gets judged because you didn't know that one random fact

Yaphi Berhanu — Wed, 26 Jul 2017 13:51:24 +0000

This article originally appeared on Simple Steps Code which tries its best to help people learn JavaScript and actually remember it.

Let's say you know a lot about a topic.

Suddenly a piece of trivia about that topic comes up in conversation.

It's something you don't know.

People see this, and they assume you know nothing about the entire topic just because you didn't know that one random fact.

Frustrating, right?

It can also go the other way. You might hear someone mention a buzzword and assume they have a vast pool of knowledge, when the truth might be that they read a paragraph on Wikipedia yesterday.

So why does this happen?

It happens because the brain likes shortcuts, so it's easy to assume the part you see represents the whole story.

Now why would this matter to you?

It matters because this pattern of assumptions can have consequences that go far beyond looking silly in some random conversation.

There are two types of situations where the effects can be particularly bad:

1) When you're learning
2) When you're in an interview or other important meeting

Let's look at both of those.

Problem 1: Assumptions can wreck you when you're learning

When people confidently throw around the latest buzzwords, you might see that surface and assume these people have vast pools of knowledge about the subjects. Often this is not the case. Since you have no way of knowing that, it's easy to feel like you have to know everything about every buzzword before you can get started. This discourages a lot of people from learning JavaScript. It can also lead to impostor syndrome.

What to do:

First, remember that everyone knows different amounts about different things, and it's impossible to know everything.

Don't let a fear of looking foolish stop you from asking questions. In fact, the smartest people aren't afraid to ask the "stupid" questions.

Also, when you hear people throwing around buzzwords, don't assume you need the entire combined knowledge of all of them just to get started. Instead, take it a step at a time, and focus on learning what makes sense for your goals.

Problem 2: Assumptions can embarrass you in an interview or other important meeting

Miss one small thing or phrase something in a way you didn't mean, and your audience might assume you know nothing.

To use an embarrassing personal example, I once phrased a question in a way that made a hiring manager think I didn't know what jQuery was even though I had been using it for years.

What to do:

The good thing about these sorts of situations is that you generally have an idea of the topics you'll be discussing, so you have time to prepare. The best thing to do is to prepare some talking points that will show your best skills in a way that ties them into what's relevant to your audience.

Key Takeaways

It's natural to assume things about other people's knowledge and how it relates to your own. The important things to remember are:

Don't get discouraged from learning.
Keep asking questions.
When there's something important like an interview, prepare a baseline of topics to cover so your audience will at least get an accurate, positive overview of what you know and how it's relevant to them.

I hope this has been helpful!

When that “simple” JavaScript tutorial is super complicated

Yaphi Berhanu — Tue, 18 Jul 2017 16:37:14 +0000

This article originally appeared on Simple Steps Code which tries its best to help people learn JavaScript and actually remember it.

“For some reason JavaScript tutorials often start with â€˜In this tutorial we will write a simple...’ and, 12,000 lines later you can't remember what it was you were trying to learn.”

– @perrydBUCS in a comment on dev.to

This is really well said, and it illustrates the key problem with a lot of tutorials: they promise simplicity at the beginning, and then they end up being so long and complicated that the readers give up.

Let's talk about how you can get around this problem and get the most out of a tutorial.

Tip #1: Start with the smallest possible piece

A lot of tutorials group a bunch of concepts into one big step. For example, they might ask you to perform an animation when a button is clicked.

If you follow along with the tutorial at this point, you'll end up typing (or pasting) a lot of stuff and not remembering it.

Instead, break the first step down into even smaller steps. First show a button. Next make the button do something simple (like maybe just saying hello when clicked). After that, try to create the animation on its own. Once you have a working button and a working animation, you can put the pieces together, and you'll understand how they work.

It also helps if you strip out unnecessary styles or markup in order to stay close to the bare essentials of what makes the code work. (Key word: unnecessary. If some of the styles and markup are necessary, keep them.)

In general, smaller pieces are easier to understand, easier to work with, and easier to remember. This approach will make a huge difference in how you learn.

Tip #2: Experiment before moving on

If you're learning new concepts, don't just follow a tutorial as written. Experiment with each step. For example, if the tutorial shows you one type of animation, try another type too. If something needs to happen when a button is clicked, try making different things happen when that button is clicked.

Adjust, experiment, play, break things. You'll learn so much in such a short time this way.

Tip #3: Try each step on your own first

When possible, try something on your own before looking at the tutorial. You might struggle, but you'll think deeply about the problem you're trying to solve and the issues to be aware of. This will prepare you to understand the tutorial much better because you'll understand why certain steps are included.

It isn't always possible to try solving the problem before looking at the tutorial, but it's something to consider in case it makes sense for your situation.

Key takeaways

The next time you see a tutorial, try these tips:

Break it down into the smallest possible pieces.
Experiment before moving to the next step.
Try to solve some pieces on your own first.

When trying these tips myself, here's what happened:

Instead of doing ten tutorials and learning zero things, I would do one tutorial and learn ten things.

I hope this will happen for you too.

This article was reprinted from Simple Steps Code which tries its best to help people learn JavaScript and actually remember it.

If you hated this article, feel free to visit my site and yell at me. However, if you have kind comments, put them here on dev.to :)

What are your biggest struggles in learning JavaScript?

Yaphi Berhanu — Thu, 13 Jul 2017 15:30:20 +0000

What are/were your biggest struggles in learning JavaScript?

This question can refer to specific code issues (like working with arrays) or learning issues (like following a tutorial but not remembering afterwards).

I'd like to hear it all!

Also, if you're more experienced, but you still remember your struggles with JS, feel free to chime in.

About to learn JavaScript? Projects can ruin you.

Yaphi Berhanu — Thu, 06 Jul 2017 22:32:06 +0000

Projects are a great way to get better at JavaScript. However, people often attempt big ones too soon. They say things like, "I'll just code up a quick slideshow," and then when that proves overwhelming, they give up, thinking they're just not cut out for JavaScript.

This problem is important to me because I've seen it stop too many people from learning JavaScript.

The problem happens because a new coder doesn't always have experience determining what's easy. They'll pick a project like a slideshow not realizing that it involves a whole bunch of concepts (animations, arrays, functions, variables, DOM manipulation, timing, etc). Then they end up thinking, "If I can't even do this easy thing, then I can't do JavaScript at all."

Alternatively, some people will take on a project too early and succeed anyway. Because there were too many concepts at one time, they often end up remembering nothing.

The solution I've found to work best is to start with concepts first. Show text on a page. Add two numbers together. Change the color of a div. Respond to a button click. Once you gather a bunch of concepts, you can keep them as Lego blocks in your bag of knowledge. You can put the pieces together and make a whole lot of things. As a result, you'll be able to build a lot of exciting projects, you'll remember everything better, and you won't be nearly as overwhelmed.

I hope this helps, and for anyone who's interested, I've written a quick road map of JavaScript concepts to get you doing practical things quickly.

Forem: Yaphi Berhanu

What I wish I knew when learning Node.js

Here are the points I'll cover

What is Node.js really?

How much command-line knowledge do I need?

What is npm and how do I use it?

What is package.json?

What is all this require() stuff I'm seeing?

How does Node.js work? Why do I need to write my own server, and what does that even mean?

What is routing, and why do I need it? Why are we using Express.js?

What does "Listening on port 3000" mean?

How do I get my Node.js app to show an HTML file instead of command line text that says "Hello world"?

Which database should I use?

How does the front-end interact with the back-end?

How do I get my project up on the internet?

Final things to note

Space Ghost: My Halloween Debugging Horror Story

Learn faster with this trick from PokÃ©mon Go and Cognitive Science

JavaScript project ideas and practical uses

UI stuff

E-commerce

Finance

Tools and utilities

Fun and games

Social applications

API stuff

Console tricks

Web development portfolio tips from an interviewer’s perspective

Your portfolio's content

The basics

Should you link to your GitHub account?

What are some common mistakes?

How to avoid these mistakes:

Your portfolio's design

Key takeaways

Understanding "this" in JavaScript

First, what is an object?

Next, what is a method?

So where does this come in?

What's a useful example of the this keyword?

Quick recap so far

How can I see what this is?

Can this change?

Key takeaways

JavaScript array push, pop, shift, unshift: how to remember the difference

When your entire knowledge gets judged because you didn't know that one random fact

Problem 1: Assumptions can wreck you when you're learning

What to do:

Problem 2: Assumptions can embarrass you in an interview or other important meeting

What to do:

Key Takeaways

When that “simple” JavaScript tutorial is super complicated

Tip #1: Start with the smallest possible piece

Tip #2: Experiment before moving on

Tip #3: Try each step on your own first

Key takeaways

What are your biggest struggles in learning JavaScript?

About to learn JavaScript? Projects can ruin you.

So where does `this` come in?

What's a useful example of the `this` keyword?

How can I see what `this` is?

Can `this` change?