One of the most popular style guides is the Airbnb Style Guide. It is also very well formatted and easy to read.
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.
- This article gets right to the point… start here!
- This article goes a little further by discussing exactly how linters do what they do.
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
eslintcommand in your terminal with a specific file.
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.
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.
A great introduction to prettier is this quick talk from prettier’s creator.
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.
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
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:
The menu should show up either on click or on hover.
visibleor something) or by manually setting the style in JS.
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 😎.
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.