Starting a new project can be tiresome because the toolchain setup can be quite time consuming. The web is full of outdated webpack tutorials, just give me something that works ! Instead of starting from scratch each time, I started to reuse the common parts of my projects. The following is the result of this process.
I present you the ES2015 (EcmaScript2015/ES6) starter kit:
The learning curve shouldn't be too steep and it is best suited to quickstart small projects. I had simplicity in mind while developing it.
It's very easy, simply clone and edit the project:
# clone the repository
git clone [email protected]:blaze33/es6-starter.git my-app
# install the npm packages of the dependencies
# if you don't have yarn installed just npm install
# start webpack-dev-server
npm run serve
Now you should have your browser open a new tab that will autoreload once you start editing the files in the
Happy coding !
ES2015 starter uses:
- node-sass and sass-loader to compile the SCSS files to CSS.
- webpack-dev-server, a development server that provides live reloading.
- Babel with preset
- Linting check with standard.js.
- normalize.css, makes browsers render all elements more consistently and in line with modern standards.
- purify-cssremoves unused css.
- surface, a Material Design CSS only framework.
Ideally I would like for this starter project to be a live one that would be updated and improved over time.
Contributions, pull requests, questions and comments are welcome:
Thanks for reading !
If you're curious how I made the above gif, I used
recordmydesktop on Ubuntu 17.04. Install it with:
sudo apt install recordmydesktop
Then I edited and converted the resulting video with
# install ffmpeg
sudo apt install ffmpeg
# cut the first 2 and last 2 seconds of the video
ffmpeg -ss 2 -i es2015-starter-demo.mp4 -t 88 -c copy es2015-starter-demo-cut.mp4
# generate a custom png palette to use in the final gif
ffmpeg -y -i es2015-starter-demo-cut.mp4 -vf fps=10,scale=800:-1:flags=lanczos,palettegen palette.png
# generate the final gif
ffmpeg -i es2015-starter-demo-cut.mp4 -i palette.png -filter_complex 'fps=1,scale=800:-1:flags=lanczos,setpts=0.25*PTS[x];[x][1:v]paletteuse' es2015-starter-demo.gif
That's it !