My 5 Essential JavaScript Books (2020)

learn javascript today!

Whether you’re a rank beginner or seasoned veteran of JavaScript, it seems that one can never have enough books.

For those who prefer to have a physical book in their hands when learning something new, we decided to put together a list of our favorite five JavaScript books. While at first glance you might be a little concerned that some of these were printed a few years ago. However, so far the concepts that these books introduce still hold up for the most part today. An added bonus, is that because of their age, they should be perhaps less expensive. You might even be able to find them at your local library.

5. JavaScript and jQuery: Interactive Front-End Web Development

javascript and jquery

Written by John Duckett, this book is squarely aimed at an audience of people interested in learning how to write JavaScript, but don’t work in IT.

Like most of the books in this list, it goes through basic JavaScript concepts and sprinkles in some neat (and common) “how to” tasks such as image sliders for a web page.

4. Eloquent JavaScript

eloquent javascript

Marijn Haverbekedives goes through the process of teaching you how to write “beautiful”, code.

He starts with the basic structure of the JavaScript language as well as the control structures and functions. He then steps into the world of error handling and bug fixing (an important skillset), modularity and asynchronous programming.

3. A Smarter Way To Learn JavaScript

smarter way

From Mark Mayers, this is a useful book to have nearby whether you’re just beginning your JavaScript journey, or if you’re further along. This book is quite easy to pickup and work through, with quite a bit of coding samples and illustrations.

2. Head First JavaScript Programming: A Brain Friendly Guide

headfirst javascript

I’ve always been a fan of the “Head First” series of books and Elizabeth Robinson definitely puts together another great entry to the series. As with the others in our list, this book goes through a lot of the fundamentals to JavaScript up to some pretty advanced topics. Elizabeth discusses data structures, objects, functions and the brower DOM (Document Object Model).

1. Secrets of the JavaScript Ninja

secrets of the javascript ninja

John Resig, Bear Bibeault and Josip Maras go through practical examples to educate each core concept and technique. It covers handy JavaScript concepts like objects, functions, closures and prototypes.

10 Simple Tips for Learning JavaScript

learn javascript today!

JavaScript is one of the most popular programming languages in the modern world. It is predominately used for web development, particularly the creation of interactive front-end elements, but it also has some other use cases.

If you’ve been struggling with choosing a language to learn, then JavaScript is undoubtedly one of the best languages to learn. You pretty much have to learn JavaScript if you want to work in any sort of web development field.

Why JavaScript?

JavaScript is the scripting language of the internet and one of the most essential web technologies along with HTML and CSS. It’s what allows you to implement and display complex things on your webpage, to create content, to animate images and a wealth of other amazing possibilities with just a few lines of code.

There’s plenty of reasons to learn this powerful programming language. One important reason is the fact that JavaScript runs everything and almost everywhere. Most of the prominent websites are built with JavaScript and currently there are more than 3 billion JavaScript capable devices in the form of smartphones, desktops and IoT. JavaScript went through a massive surge of popularity and quickly become the most dominant language in the world of software. In light of this, it’s obvious that Javascript skills are in high demand by companies everywhere.

Currently, the average salary for JavaScript developer is $117,809 in the US. It definitely can be lucrative to have JavaScript skills on your resume.

Why is it challenging?

Learning JavaScript is much easier said than done. Newcomers often run into similar kinds of problems such as difficulties in understanding confusing concepts. Along with that, JavaScript also has an ever-changing tooling landscape that often introduces a few more barriers. JavaScript is also an un-typed language which means that the same thing in one code can easily mean something different depending on the context and medium. Spreading the knowledge and training on JavaScript around the world, also relies heavily on having enough resources translated to your language.

Tips for the JavaScript Beginner

So a big question is: how to learn JavaScript? Similar to every complicated thing in life, you can learn JavaScript coding through constant practice and by never giving up. To help you in this task, I have written down some tips and advice to help you out! Try to follow these tips to enhance your learning experience.

1. Right attitude

The first thing you need to do is to go with the right attitude to learn JavaScript. Learning JavaScript is going to become needlessly complicated if you approach it with the wrong mindset. Trying to learn it with an “I need to get this over with” mindset is not going to take you anywhere. It’s a huge struggle to face, and you truly have to be passionate about code to learn it. Not only that, you need to remind yourself to have fun with what you’re learning as JavaScript code is capable of astonishing things once you get the hang of it.

2. Start Slowly

A mistake many beginners make is that they directly start at a Google search, then jumping into a framework such as jQuery, AngularJS, Backbone, React, Ember, etc. That can be a mistake. Instead, you should start working on DataTypes and in-built methods – what some are calling “Vanilla JavaScript”. You can also learn a lot from the Mozilla Developer Network, which is a great place for you to start. After getting enough of the fundamentals, you can start dipping your feet into any framework you want.

3. Find your favorite editor for JavaScript

You can’t code without a text editor. Fortunately, you have tons of options to choose from. To write JavaScript code, you can either use your Windows notepad or even download programs such as Sublime Text or Visual Studio Code. Either way, choose the one that you’re most comfortable to work on as this is where you’ll be spending A LOT of your time. An extra tip here, is that since you’re a beginner and just starting out, it can be helpful to choose an editor that has a simplistic interface and will support you as a beginner.

4. JavaScript Tutorials!

If you search the web for JavaScript tutorials, there are a vast number of tutorials available online on sites such as CodeAcademy, FreeCodeCamp, Wazoo Media, etc. If you’re a beginner then you should start from beginner level JavaScript tutorials and then move on to intermediate and advanced level. Tutorials are usually structured like school exercises and the sites with JavaScript tutorials are ideal for learning the basics and getting used to the syntax. Learning JavaScript is no different than learning a human language like French or Spanish. It just takes time and practice.

5. Look out for JavaScript Resources

The internet has millions of resources available for you to use. Take “JavaScript: The Definitive Guide” by David Flanagan. It’s a book that has been forever considered a bible for JavaScript programmers across the world. In it is a comprehensive guide that is well-organized and detailed for new programmers to learn and old programmers to revise. Another book that you can read is “You Don’t Know JS” by Kyle Simpson which provides the necessary background for those with limited knowledge about programming. The entire series introduces more complex and harder parts of the JavaScript language as you read on one book at a time. Furthermore, there are tons of articles, blog posts and even YouTube videos available for reference. Don’t waste these valuable resources!

6. Do not rush! Go step by step

I know it’s tempting to move on immediately once you understand a concept, but don’t! Instead, play with what you have learned, get comfortable and even combine it with knowledge from a previous lesson. Start from beginner’s level and cover all the topics from tutorials, check resources, implement what you have learned and when you are finally confident of your beginner level skills, then move on to something at an intermediate level and after that, an advanced level. By limiting the learning content and keeping in touch with the previous lessons, you’ll be able to retain the material in your head and find it easier to remember key concepts. The process seems long for sure but it actually takes far less time since you don’t have to keep revising and is actually quite fun. There’s really nothing that you cannot do with JavaScript in regards to web development.

7. Start Ajax and Async after getting a hang of the basics

After you have spent quite a lot of time on JavaScript, start working on concepts like Ajax and Async. Learn how to use different functions on JavaScript and use classes as well. All of these things take quite a lot of time to master but all your hard work will surely be rewarded.

8. Challenge yourself! Explore JavaScript and learn

When it comes to learning JavaScript, there is always something you can learn as it is a never-ending process. A lot of people end up never improving their JavaScript coding by spending too much time only re-using the same small set of skill that they have learned. Make sure that you’re not one of them. Every time you finish any lesson, ask yourself if you have learned something you didn’t know before. That is the key to success. Be mindful of what you want to learn or improve your knowledge of. Make sure that you’re challenging yourself and growing as a developer instead of getting comfortable and staying in a comfort zone.

9. Keep experimenting & interact with your local community

Find and make your own way to solve problems related to JavaScript. Keep experimenting with the problems and what you have learned so far. Also, do interact with your peer group as the large community lead to more support and help you’ll be able to receive. Fortunately, JavaScript has one of the largest internet communities that is all about giving and receiving help and exploring the world of JavaScript. Take advantage of that! Meet up with the experts to not only motivate yourself to study but to learn as well. You might even be offered a mentorship! By being a part of a community, you’ll also be able to keep up to date with new, innovative tools!

10. Keep yourself up to date and be prepared

In some ways, JavaScript isn’t an easy skill to learn. If it was, it wouldn’t be held with the same importance as it is in the labor market now. You need to understand that learning JavaScript will require an amount of your time and dedication. It’s not going to be an easy road. Not only is JavaScript already a complex and intricate skill to master, but it is also a growing field which would require you to stay updated with the new web development practices. Prepare yourself that it may likely consume a chunk of your time. Be patient too. You’re not going to learn JavaScript in a month and maybe not even in a year. All the time spent is going to be grilling, demanding but remember that in the end, it will also be completely worth the trouble.

Learning JavaScript is constant work and quite difficult but with the right attitude and determination, learning it can be an extremely satisfying experience. All you need is passion and a hunger to learn. Hopefully, with the above-mentioned tips, as well as some of the other resources available here, you’ll be able to pick up JavaScript as quickly as possible while having a great enjoyable ride.

Good Luck and Have Fun!

HOWTO: Use the link_to Helper in Rails6

To create those juicy hyperlinks between those beautiful elements in your web application, it’s possible you might be far more familiar with the common front end approach of using HTML such as <a href="" class="">link</a>.

This is “fine”, but in Rails there’s actually a way to do this with a little less effort AND in a way that helps to protect your internal linkings during potential route refactorings.

Let’s dive in!

Assumptions & Goals

  • You are on a system that has Ruby on Rails 6 setup and available to you
  • You are starting from the rails-static-pages project (available here - /blog/building-static-pages-in-rails6/)
  • We want to learn and demonstrate the link_to helper

Getting Started

I’ve written in several tutorials here in this site on setting up a Rails 6 project. We’re going to skip ahead a little bit in this tutorial to jump right into using the link_to helper. As mentioned in my Assumptions, be sure to have the rails-static-pages project as your starter.

Let’s recap some common front end markup from the Home view template, app/views/pages/home.html.erb:


<% provide(title, "Home") %>
<h1>Home</h1>

Let’s add a regular href over to our About page:


<% provide(title, "Home") %>
<h1>Home</h1>

<a href="/about">About</a>

This is acceptable of course, but a drawback is that we’re not making any use of the Rails router. Let’s rewrite this using the link_to helper, and maybe it will start to demonstrate why we’d want to do this.


<% provide(title, "Home") %>
<h1>Home</h1>
<%= link_to "About", about_path %>

and let’s do the same to the About view template, app/views/pages/about.html.erb:


<% provide(title, "About") %>
<h1>About</h1>
<%= link_to "Home", home_path %>

Run the server with bin/rails s and make sure you can navigate back and forth between Home and About.

Adding some class

This helper is so far proving to be useful. But what happens when we want to apply some style? No problem at all. It happens to be another parameter to link_to.


<%= link_to "About", about_path, class: "nav-link" %>

If your server is still running, check out what happened. You won’t need to hit refresh a few times, as nothing obvious changed. However, if you use the Chrome browser to inspect the link, you should be able to see that it now uses the class nav-link as we specified.

Let’s open one of our main stylesheets, app/assets/stylesheets/application.css:


.nav-link {
  color: yellow;
  background-color: darkblue;
  padding: 10px;
  border-radius: 10px;
}

Voila! Now when you refresh the page, you be seeing that each link is now visually similar to a button.

If you found this tutorial helpful, please share it!