Tools that ease the front-end process
Every programmer, back-end or front-end, has a set of tools that help in the development process. Some are of great help, others less so. It is up to the developer (or the company) to decide which tool will actually bring more speed and ease the procedure. If you are seeking the best option tool(s) to assist in your front-end development, we will show here the main tools which we have:
Yeoman
It is a stack (a set of resources) with a focus on front-end that automates your build and manage its dependencies. It does not reinvent the wheel, since it uses Grunt and Bower as builder and package manager, respectively. It even performs scaffolding. Furthermore: Compiles CoffeScript automatically; JavaScript automatically checks with JSHint; Minify and makes the merge of your scripts; Optimizes your images; LiveReload makes your page with a preview server location; Performs unit testing
All about Yeoman: http://yeoman.io/ (in english) | http://tableless.com.br/yeoman-e-quando-as-coisas-dao-errado/ (in portuguese)
Bower
It is a package manager (basically a single file, bower.json) in which you list the dependencies of your project and keep up to date with the source. It is created by the staff of Twitter and is used mainly by front-end packages. If you have a problem, for example, when some dependencies are missing in your project, the bower searchs it for you.
All about Bower: https://bower.io/ (in english) | http://tableless.com.br/bower-na-pratica/ (in portuguese)
Grunt
The GruntJS is a Task Runner that runs from the terminal and is used in order to automate tasks. Minification, compilation, linting, among others, are examples of what can be done using Grunt. The big advantage is to automate all tasks in Grunt and not having to use multiple programs.
All about Grunt: http://gruntjs.com/ (in english) | http://tableless.com.br/grunt-voce-deveria-estar-usando/ (in portuguese)
Jekyll
Jekyll is a static code generator developed in Ruby. With it you can create pages using HTML and information. It is based on formats like Markdown to format texts and posts and also has a template pattern that is called Liquid, along with YAML to save the data of variables.
All about Jekyll: https://jekyllrb.com/ (in english) | http://tableless.com.br/jekyll-servindo-sites-estaticos/ (in portuguese)
Middleman
As Jekyll, is a GEM of Ruby that creates static websites, without database, based on pure HTML code and information. Some users prefer Middleman than Jekyll, due to the former be more flexible.
All about Middleman: https://middlemanapp.com/ (in english) | http://tableless.com.br/gerando-arquivos-estaticos-com-o-middleman/ (in portuguese)
Sass
It is a preprocessor, with language based on CSS, which after compiled generates the CSS. It has two different syntaxes, the SASS and SCSS. Color functions; Extend; Nesting CSS selectors; mathematical operations are some of the features that has Sass.
Important information: The Bootstrap in version 4, currently in Alpha, changed LESS by Sass.
All about Sass: http://sass-lang.com/ (in english) | http://tableless.com.br/sass-um-outro-metodo-de-escrever-css/ (in portuguese)
Compass
It is a Sass framework that automatically creates CSS sprites.
Compass documentation: http://compass-style.org/
LESS
It is a CSS-based language that generates CSS in the end. People calls it the preprocessor, because in the end, the browser only understands CSS. You write an .less file but uses in the end a .css compiled with the command “lessc”. That can be done also with a JavaScript that you include on the site and directly compiles LESS in the browser; useful for testing but not recommended for production — it takes time and more bytes.
All about LESS: http://lesscss.org/ (in english) | http://tableless.com.br/css-dinamico-com-less/ (in portuguese)
As we can see, some tools are very similar and basically has the same goal. It all depends on your own taste, or of your boss.
Until next time!
Thank you for reading! If you enjoyed this piece, please click the ♥ below. It really helps interested readers find this article.
