Animejs
Animejs is a great JavaScript animation library that I use for just about every animation that can't be done quickly with CSS animations. This library is great for so many different kinds of animations including CSS animations and transitions, JavaScript style animations, SVG morphing animations, and more.
This package is also available with npm and can be installed like this:
npm install animejs
#or
yarn add animejs
After installing the package you can import it into your JS files with this import, and follow the Documentation for how to make amazing animations.
import anime from "animejs";
Normalize.css
Normalize.css is just a CSS file that you include in your project to 'reset' the CSS of the browser so that your code works better across as many browsers and devices as possible.
npm install normalize.css
#or
yarn add normalize.css
To include this package in your project you can add it to your main CSS or SCSS/SASS file.
// This @import will change depending on where your main CSS is located.
@import "../../../node_modules/normalize.css/normalize.css";
If anyone knows a better way to get to the root directory then node_modules please let me know in the comments.
Prettier
If you haven't already started using Prettier then you need to right now. Prettier takes care of formatting your code to your preferences so you can make typos and mistakes without needing to fix them later.
Prettier can be set up in many different ways like formatting on file save and formatting on git commit, which is exactly what pretty-quick and Husky can do.
Pretty-quick and Husky
Pretty-quick is just Prettier but can be run as a hook when committing your changes. Husky is a package that runs code hooks from the package.json file.
npm install pretty-quick husky
#or
yarn add pretty-quick husky
Then add this to your package.json file.
"husky": {
"hooks": {
"pre-commit": "pretty-quick --staged"
}
}
If you select a few lines of code the put into staging then just commit those few lines of code and you receive an error from prettier. I find that if you just ignore it and commit again it will work.
Browser sync
Browser sync is great for the development of a website because it lets you view a live version of the site and reloads the page when something in the code changes. It is also great for testing your site on different devices.
npm install -g browser-sync
#or
yarn global add browser-sync
For static sites, you can run a variation of this command.
browser-sync start --server --files "css/*.css"
And for dynamic sites running on a local server, you will have to run a variation of this command. For this command to work you will have to have already set up something like a Vagrant or Docker image.
browser-sync start --proxy "yourproject.dev" --files "css/*.css"
Eslinter
Eslint checks your JavaScript files against a set of rules that you can modify and tells you if your code is broken or missing anything that will break later. This includes things like missing semicolons and proper spacing.
There are too many different ways to set Eslinter up depending on your dev server, but if you are looking to add this to your Gridsome project check out the Documentation here.
Stylelint
Stylelint is the same as Eslint but for your stylesheets. This check to make sure you are spacing elements correctly and not missing semicolons.
There is no current way to add this to Gridsome.
Top comments (8)
Can one use
prettierfor CSS also? So within a project there is only one code formatting system.Looking at prettier.io I think it can use used for a bunch of use cases other than
js.Yes, it can. It also works with SCSS, Vue and more you just have to get them configured.
In some build environments like Webpack you can alias a path using a special character like
@, so the path in your code would be@/normalize.css/normalize.csswebpack.js.org/configuration/resolve/
That's cool. Thank you!
Thinks to self, "Hmm these are awesome suggestions... the only thing that could make it better is bacon. HOLY MOLEY IT'S GOT THAT TOO!"
Bacon goes great with everything, and I mean everything!
As you use them for every project, maybe it's useful to also make a starter on github and link it here.
Maybe it will be useful for others to just clone and play :).
Thanks for sharing!
Great idea, ill have to make a template