ES6 and Beyond

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!

Material based on Erik Trautman | The Odin Project

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

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


Material based on Erik Trautman | The Odin Project

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

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.


Material based on Erik Trautman | The Odin Project

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

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!


Material based on Erik Trautman | The Odin Project

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

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


Material based on Erik Trautman | The Odin Project

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