ES6 and Beyond (v1)

Introduction

We’ve been throwing around the term ES6 since our very first lessons, but we haven’t taken the time to properly explain what it means or to investigate the implications of it in our code.

Put simply ES6 is a version of JavaScript that was officially released in the summer of 2015. It included many new features that make writing JavaScript much easier and cleaner. If you have been following our lessons you have already been learning these new features because, well, ES6 is just JavaScript.

You have probably also come across articles talking about features in ES7 or ES8 or ES2015 or ES2017 etc. Part of the confusion here is that right after the release of ES6, the committee that makes these decisions changed the naming scheme from ‘version numbers’ (ES5, ES6, ES7 etc.) to ‘release years’ (ES2015, ES2016, ES2017 etc.)

  • This article provides a nice clean explanation and timeline of the various ECMAScript releases.

  • This document outlines all the new features that showed up in ES6. As we’ve mentioned you’ve already been using many of these, though there are a few we haven’t specifically covered yet.

The problem with JavaScript constantly updating and adding features is that it sometimes takes web-browsers a while to catch up and implement new features once they’ve been released. At the current time all modern browsers (Chrome, Firefox, Safari and Edge) support all of ES6, and most of ES7, but older browsers (various versions of Internet Explorer for instance) do not. This means, unfortunately, that if you write code that uses these new features it will not run in browsers that do not support it.

For most of us, this has not been an issue because you are almost definitely using a new browser that automatically updates itself when a new version is released. But in the real world, if you’re selling products to customers you can’t control which browsers people will use to connect to your site.

Fortunately there is solution to this problem. Babel is a tool that takes your modern JavaScript code and transpiles it to code that older browsers can understand. It can be used from the command line with a simple command, and can also easily be added to your webpack configuration. With the babel-loader.

In all honesty, this is not something that you are going to need to worry about on every project you’re starting. All the ES6 features are present in the large majority of browsers used worldwide. But JavaScript is constantly changing, and as new features are announced and released, you can use Babel to try them out, often before they’re available in any browser!

  • Follow the instructions here to install the babel-loader and use it with webpack. If you’ve already got webpack up and running in a project, adding babel is a cinch!

Feedback

  • Is there anything we can help with up to this point? Do you have something to suggest about this chapter? Let us know in the comments below.

UPDATED: 06.01.2021

Webpack (v1)

Introduction

We’ve already introduced webpack in a previous lesson. It is the go-to tool across the web for bundling and compiling javascript code. There are other options out there, but at this time none of them are as popular or widely used as webpack.

In our last lesson we covered the first half of what webpack can do for you – bundling your modules. Another amazing feature is webpack’s ability to process and manipulate your code during the compilation step. So, for example, if you would like to use Sass to write your CSS, webpack can compile that for you. Webpack can manage your images and compress and optimize them for use on the web. Webpack can minify and uglify your code. There are tons of things webpack can do, but to access these functions we need to learn more about loaders and plugins.

  1. Go through the "Core Concepts" lessons at Webpack Academy. It starts off with the concepts we’ve already learned, but do the whole thing. The review is valuable and this presenter explains things very clearly. Make sure you take note of the --watch feature!

  2. Go through this tutorial to see examples of using webpack to manage your website’s assets.

  3. Finally, do this tutorial to learn how to let webpack manually manage your index.html and insert your bundle into the page for you!

  4. You don’t need to do the rest of the webpack tutorials at this time, but take a look at what’s offered on the sidebar of their guides page. There are several sweet features that you might want to use in future projects such as code-splitting, lazy-loading, and tree-shaking. Now that you have a handle on webpack’s configuration system adding these features is as easy as using the right plugins and loaders!.

Additional Resources

Feedback

  • Is there anything we can help with up to this point? Do you have something to suggest about this chapter? Let us know in the comments below.

UPDATED: 10.03.2021

  • [10.03.2021] Adding resource for parcel, rollup and esbuild bundlers.

Forms (v1)

Introduction

Forms are a crucial part of most websites. Almost every major site has sign-up forms, contact forms, search forms and more! Luckily HTML5 and JavaScript have some handy built-in methods

  • This tutorial covers pretty much everything you need to know about HTML form validation.

  • For Reference, this document covers the JavaScript validation API in a more concise format. These functions were explained in the previous article. Typically with HTML forms, the inputs are validated upon form submission, but you can use these functions to check validity whenever you like (such as when a user clicks or tabs out of a specific input field).

Warmup

Go back to your ‘Library’ project and add simple validation to that form! Don’t let your users submit without filling in all the fields!

Project

Build a browser form which collects Email, Country, Zip Code, Password and Password Confirmation fields. It should use live inline validation to inform the user whether a field is properly filled in or not. That means highlighting a field red and providing a helpful error message until it has been filled in properly.

The form doesn’t need to actually submit, but you should give an error message if the button is pushed with any active errors or unfilled required fields. If all is well and the form is "submitted", give the user a high five.

  1. Set up a blank HTML document

  2. Think about how you would set up the different form elements and their accompanying validators. What objects and functions will you need? A few minutes of thought can save you from wasting an hour of coding. The best thing you can do is whiteboard the entire solution before even touching the computer.

  3. Write the simple form elements. Don’t worry about styling them.

  4. Add the JavaScript code that checks validation as the user progresses through the form. When a user leaves a form field it should automatically validate that field.

  5. Test out all possible cases.

Feedback

  • Is there anything we can help with up to this point? Do you have something to suggest about this chapter? Let us know in the comments below.

UPDATED: 06.01.2021

Dynamic User Interface Interactions (v1)

Introduction

JavaScript is a very powerful language. It is capable of creating complex web applications that work everywhere. But it is just as often used on a smaller scale. JavaScript is the glue that holds even less flashy websites together- it makes drop-downs drop down and image sliders slide.

Fortunately, at this point, you already have all the tools you need to make these items without resorting to using a bloated framework like bootstrap. (Nothing against bootstrap… you just do not need it! Good for you!)

We aren’t presenting any new content in this lesson – just giving you the chance to practice some of the techniques that you’re going to be using on a daily basis as a JavaScript programmer.

Animations are typically handled by CSS which is a little out of the scope of this lesson, but interactive stuff like this is no fun without a little motion! If you want to take a break and learn more about making stuff move watch the next video:

Duration: 28 minutes

Drop-down Menus

You know what we’re talking about here. Picture a nav-bar or a button and when you click it the menu slides down nicely. As mentioned previously, you already know everything you need to create this element. Here are some things to keep in mind:

  1. You can allow the menu to show up either on click or on hover.

  2. You should hard-code the menu items into your HTML but hide/reveal them using JavaScript. You can do this either by adding a class (visible or something) or by manually setting the style in JS.

  3. Make sure the code is reusable! You should be able to create multiple drop-downs on a page without repeating the JavaScript code.

  4. If you bundle your code into a module you can publish it to npm and then install and use it anytime you like! Nothing like publishing your own modules to make you feel like a pro 😎.

Mobile menus

Mobile versions of your sites are almost definitely going to need their own menu implementation. Depending on how you decided to implement your drop-down, you could reuse it here, but there are tons of more inventive options out there.

  1. Browse the web for some inspiration, pick something and try to implement it!

Image slider

Again, there’s not much instruction needed here – just practice.

Create a simple image carousel. It should contain arrows on each side to advance the image forward or backward. It should automatically move forward every 5 seconds. It should contain the little navigation circles at the bottom that indicate which slide you are on (and they should be click-able to advance to that particular slide).

Don’t spend too much time worrying about getting your images to display at the correct size — it’s more important to get the slider sliding.

  1. This one is a little more involved than the last two, so think about how you would set up the different elements within the site.

  2. Set up a very wide div which will contain the individual "slides" of each image. By appropriately positioning that div inside a container div (which acts like a picture frame), you can choose which slide is visible at any given time.

  3. Once you have the slider positioned properly, build functions for "next" and "previous" which will advance to the next or previous slide accordingly. Make the transitions smooth using simple effects.

  4. Set up arrow buttons which activate those functions and play with cycling through the images.

  5. Add in some navigation dots at the bottom of the slides. Make a horizontal series of empty circles with CSS immediately below the slideshow. Each circle represents a slide, so whenever a new slide is activated, its corresponding circle gets filled in so you can tell where in the show you are. Make each circle link to that particular slide, so you can click on the circle and it will jump to that slide.

  6. Add a timeout which advances the slides every 5 seconds.

  7. Play around with your slideshow!

Feedback

  • Is there anything we can help with up to this point? Do you have something to suggest about this chapter? Let us know in the comments below.

UPDATED: 06.01.2021

Linting (v1)

Style Guides

Code style is important! Having a consistent set of style rules for things such as indentation or preferred quote style makes your code more maintainable and easier to read. There are several popular JavaScript style guides on the net that set standards for these types of things, and a little time spent reading them will make you a better developer.

  1. The Airbnb Style Guide is one of the most popular. It is also very well formatted and easy to read.

  2. Google also has their own style guide for JavaScript.

  3. The JavaScript Standard Style. Used by companies like NPM and GitHub, among others.

Linting

The style guides we mentioned above are full of really helpful advice for formatting, organizing and composing your code. But there are a lot of rules – it can be difficult to internalize them all. Linters are tools that will scan your code with a set of style rules and will report any errors to you that they find. In some cases, they can even auto-fix the errors! The following articles explain in more detail the benefits of using a linter while you code.

  1. This article gets right to the point… start here!
  2. This article goes a little further by discussing exactly how linters do what they do.

There are multiple options for linting your JavaScript, but the most popular (and most common in the industry) is eslint. Getting it installed and the initial set-up is fairly simple.

  1. The official ‘Getting Started’ page is a good place to start. It covers installation and basic setup. The basic way to use this tool is to simply run the eslint command in your terminal with a specific file.

  2. Far more useful are linting plugins for your favorite text editor. Most editor plugins allow you to automatically lint your code as you are writing it, and will show the errors right in the editor, which makes resolving them much simpler.

For Visual Studio Code you can use The Plugin and follow a tutorial.

Prettier

Prettier is awesome. It is similar to a linter, but serves a slightly different function. Prettier will take your JS code and then automatically format it according to a set of rules. Unlike a linter, it’s not looking for style errors, but specifically targeting the layout of your code and making intelligent decisions about things like spaces, indentation levels and line-breaks.

  1. This quick talk from prettier’s creator is a great introduction.

  2. Give it a test drive here. Go ahead and copy/paste some of your old JavaScript code into that editor and see what happens.

  3. Setup is simple. The homepage links to tutorials for most popular editors.

Using prettier makes coding faster and easier! You don’t have to worry about nailing things like indentation, or remembering every semi-colon because prettier will take care of those details for you

Feedback

  • Is there anything we can help with up to this point? Do you have something to suggest about this chapter? Let us know in the comments below.

UPDATED: 31.12.2020

ES6 and Beyond

Introduction

In this topic we will take a closer look at the term ES6. To be more specific, we will properly explain what it means and we will also investigate the implications of it in our code.

ES6 is a version of JavaScript that was officially released in the summer of 2015. This version included many new features that their main purpose was to make writing JavaScript much easier and cleaner. We have seen these new features throughout this course.

Furthermore, throughout this course you might have seen articles talking about features in ES7 or ES8 or ES2015 or ES2017 etc. This might seem a little bit confusing. Right after the release of ES6, the committee that makes these decisions changed the naming scheme from ‘version numbers’ (ES5, ES6, ES7 etc.) to ‘release years’ (ES2015, ES2016, ES2017 etc.)

  • Go through this article which provides a nice clean explanation and timeline of the various ECMAScript releases.

  • Go through this document which outlines all the new features that showed up in ES6.

Since JavaScript is constantly updating and adding new features that causes some problems with the web-browsers. To be more specific, sometimes takes web-browsers a while to catch up and implement new features once they’ve been released. At the current time all modern browsers (Chrome, Firefox, Safari and Edge) support all of ES6, and most of ES7. However older browsers, such as various versions of Internet Explorer, they don’t. So if you write code that uses these new features, the code won’t run in browsers that do not support it.

This hasn’t been an issue for us since, we are almost definitely using a new browser that automatically updates itself when a new version is released. However if you are selling a product to customers you don’t know which browsers people use.

Babel is the solution to this problem. Babel is a tool that takes your modern JavaScript code and transpiles it to code that older browsers can understand. It can be used from the command line with a simple command, and can also easily be added to your webpack configuration. With the babel-loader.

This is something that you won’t have to worry about in your projects. Most all modern browsers support ES6 features. Having said that, since new features are announced and released constantly you can use Babel to try them out, before they are available in any browser!

Follow the instructions here to install the babel-loader and use it with webpack.


The archived old version of this post can be found here

UPDATED: 06.01.2021

Feedback

  • Is there anything we can help with up to this point? Do you have something to suggest about this chapter? Let us know in the comments below.

Webpack

Introduction

In a previous topic we have learned some basic stuff about webpack. Webpack is a powerful tool that is used for bundling and compiling javascript code. As expected there are several other options out there for doing the same thing. However webpack is the most popular and the one that is widely used.

Furthermore, in our previous topic we covered the first half of what webpack can do, which it was bundling your modules. Webpack has other features as well, such as to process and manipulate your code during the compilation step. In other words, let’s say you want to use Sass to write your CSS. Webpack can compile this for you.

In addition webpack can manage your images and compress and optimize them for use on the web. It can also minify and uglify your code. As you see there are tons of things that webpack can do. However in order to access these functions we will first need to learn about loaders and plugins.

Study

  1. Go through the "Core Concepts" lessons at Webpack Academy. These lessons start off with the concepts we’ve already learned, but do the whole thing. The review is valuable and this presenter explains things very clearly. Make sure you take note of the --watch feature!

  2. Go through this tutorial. This tutorial is useful because you can see examples of using webpack to manage your website’s assets.

  3. Finally, do this tutorial. This tutorial is also useful because you will learn how to let webpack manually manage your index.html and insert your bundle into the page for you!

  4. You don’t need to do the rest of the webpack tutorials at this time. However you can take a look at what’s offered on the sidebar of their guides page.

Additional Resources

In this section you can find a lot of helpful links to other content. This is a supplemental material for you if you want to dive deeper into some concepts.


The archived old version of this post can be found here

UPDATED: 09.06.2021

  • [10.03.2021] Adding resource for parcel, rollup and esbuild bundlers.

Feedback

  • Is there anything we can help with up to this point? Do you have something to suggest about this chapter? Let us know in the comments below.

Forms

Introduction

Forms are a very important part of most websites. There are several types of forms such as sign-up forms, search forms and contact forms. Almost every website has one or more types of a form. For this reason HTML5 and JavaScript have some handy built-in methods.

  • HTML form validation is really important and this tutorial covers pretty much everything you need to know.

  • For Reference, this document covers the JavaScript validation API in a more concise format. These functions were explained in the previous article. With HTML forms, the inputs are validated upon form submission, but you can use these functions to check validity whenever you like (such as when a user clicks or tabs out of a specific input field).

Practice

Now it is time for practice! So, go back to your ‘Library’ project and add simple validation to that form! Don’t let your users submit without filling in all the fields!

Project

In this project you will build a form that collects Email, Country, Zip Code, Password and Password Confirmation fields. In addition this form should use live inline validation to inform the user whether a field is properly filled in or not. To be more specific, if a field hasn’t been filled properly the field should be highlighted red and a helpful error message should appear.

As usual the form doesn’t need to submit. However if the button is pushed and there are active errors or unfilled required fields, an error message should appear. On the contrary if everything is fine and the form is "submitted", give the user a high five.

  1. Set up a blank HTML document

  2. Take a minute to think about how you would set up the different form elements and their accompanying validators. In other words think the objects and functions that you will need.

  3. Write the simple form elements. Don’t worry about styling them.

  4. Add the JavaScript code that checks validation as the user progresses through the form. Keep in mind that when a user leaves a form field it should automatically validate that field.

  5. Test out all possible cases.

  6. Push your solution up to a private Github repo and submit the URL on the Quiz below.


The archived old version of this post can be found here

UPDATED: 09.06.2021

Feedback

  • Is there anything we can help with up to this point? Do you have something to suggest about this chapter? Let us know in the comments below.

Dynamic User Interface Interactions

Introduction

By using JavaScript we have the power to create web applications that work everywhere. In addition JavaScript can be used on a smaller scale. You can think of JavaScript as the glue that holds the websites together. In other words, JavaScript makes the drop-downs drop and the image sliders slide.

From the things you have learned so far, you have all the tools you need to make these items work without using a framework like bootstrap. (Nothing against bootstrap… you just do not need it! Good for you!)

In this topic you are just going to practice more some of the techniques that you have learned and that you are going to be using on a daily basis as a programmer.

Animations are typically handled by CSS which is a little out of the scope of this topic. However interactive stuff like this is no fun without a little motion! If you want to take a break and learn more about making stuff move watch the next video:

Duration: 28 minutes

Drop-down Menus

Imagine a nav-bar or a button and when you click it the menu slides down nicely. As stated before, you already know everything you need to create this element.

Keep in mind the following things:

  1. The menu should show up either on click or on hover.

  2. The menu items should be hardcoded into your HTML. You should hide/reveal them using JavaScript. This can be done either by adding a class (visible or something) or by manually setting the style in JS.

  3. Make sure the code is reusable! In other words, you should be able to create multiple drop-downs on a page without repeating the JavaScript code.

  4. If you bundle your code into a module you can publish it to npm and then install and use it anytime you like! Publishing your own modules it will make you feel like a pro 😎.

Mobile Menus

As expected the mobile versions of your site will need their own menu implementation. There are tons of options out there to implement a drop-down menu.

  1. Browse the web for some inspiration, pick something and try to implement it!

Image Slider

Now you are going to create a simple image slider. The image slider should:

  • Contain arrows on each side to advance the image forward or backward.
  • Automatically move forward every 5 seconds.
  • Contain the navigation circles at the bottom that indicate which slide we are on. The navigation circles should be click-able to advance to that particular slide.

The most important thing is to get the slider sliding. Don’t spend too much time worrying about getting your images to display at the correct size.

  1. Think of how you would set up the different elements withing the site.

  2. Set up a very wide div which will contain the individual "slides" of each image. By appropriately positioning that div inside a container div (which acts like a picture frame), you can choose which slide is visible at any given time.

  3. Once you have the slider positioned properly, build functions for "next" and "previous" which will advance to the next or previous slide accordingly. Make the transitions smooth using simple effects.

  4. Set up arrow buttons which activate those functions and play with cycling through the images.

  5. Add in some navigation dots at the bottom of the slides. Make a horizontal series of empty circles with CSS immediately below the slideshow. Each circle represents a slide, so whenever a new slide is activated, its corresponding circle gets filled in so you can tell where in the show you are. Make each circle link to that particular slide, so you can click on the circle and it will jump to that slide.

  6. Add a timeout which advances the slides every 5 seconds.

  7. Play around with your slideshow!

  8. Push your solution up to a private Github repo and submit the URL on the Quiz below.


The archived old version of this post can be found here

UPDATED: 09.06.2021

Feedback

  • Is there anything we can help with up to this point? Do you have something to suggest about this chapter? Let us know in the comments below.

Linting

Introduction to Style Guides

Code style is really important and useful. In other words, having a consistent set of style rules it will make your code easier to read and maintainable. There are several popular JavaScript style guides on the net that set standards for these types of things, such as indentation and quote style. Therefore spending some time reading them it will make you a better developer.

  1. One of the most popular style guides is the Airbnb Style Guide. It is also very well formatted and easy to read.

  2. Google also has their own style guide for JavaScript.

  3. The JavaScript Standard Style. Used by companies like NPM and GitHub, among others.

Introduction to Linting

Linters are tools that will scan your code with a set of style rules and will report any errors to you that they find. In some cases, they can even auto-fix the errors! In the following articles you will find a lot of information about the benefits of using a linter while you code.

  1. This article gets right to the point… start here!
  2. This article goes a little further by discussing exactly how linters do what they do.

As expected, there are multiple options for linting your JavaScript. However the most popular (and most common in the industry) is eslint. Getting it installed and the initial set-up is fairly simple.

  1. The official ‘Getting Started’ page is a good place to start. It covers installation and basic setup. The basic way to use this tool is to simply run the eslint command in your terminal with a specific file.

  2. Far more useful are linting plugins for your favorite text editor. Most editor plugins allow you to automatically lint your code as you are writing it, and will show the errors right in the editor, which makes resolving them much simpler.

For Visual Studio Code you can use The Plugin and follow a tutorial.

Introduction to Prettier

Prettier is similar to a linter, but serves a slightly different function. In other words, prettier will take your JS code and then automatically format it according to a set of rules. Therefore, prettier isn’t looking for style errors as a linter does. To be more specific, prettier specifically targets the layout of your code and makes intelligent decisions about things. Those things can be indentation levels, spaces and line-breaks.

  1. A great introduction to prettier is this quick talk from prettier’s creator.

  2. You can give it a test drive here. Go ahead and copy/paste some of your old JavaScript code into that editor and see what happens.

  3. Setup is simple. The homepage links to tutorials for most popular editors.

Prettier is awesome. It makes your code faster and easier. It will take care for you details such as indentation and semi-colons so you don’t have to worry about remembering those things.


The archived old version of this post can be found here

UPDATED: 09.06.2021

Feedback

  • Is there anything we can help with up to this point? Do you have something to suggest about this chapter? Let us know in the comments below.