Linting & Dynamic User Interface Interactions Copy

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.

Introduction to User interface Interactions

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!
Back to Lesson