Sometimes, the smallest things are the most powerful. They might seem humdrum, but are actually the foundations of healthy projects. This is especially true with Version 2.0 of our front-end toolkit. A set of proven tools and practices, it maximizes efficiency and improves project hygiene and code quality, for initiatives ranging from static HTML to corporate.NET. Since all of the structure is in the toolkit (which is optimized for componentized development), even beginners in front-end development can quickly get to work. Here’s how and why:
Maximized efficiencies
With the toolkit, you no longer need to install lots of dependencies globally; instead, merely have Node.js in your machine, and run “npm install” and “npm run start.” After the code pull, dependencies are checked automatically; if a component is missing, it will download automatically. No longer is there a need to run “npm install” commands to view breaking development tasks. Some key toolkit features include:
Automated SVG spriting with fallback to PNG (if needed) and Sass mixins to easily use SVG assets in Sass code.
Integrated CSS autoprefixer.
Front-end resources cache busting, ensuring users see all updates.
As accessibility is becoming more and more important, we’ve integrated automated accessibility testing with report generation. It won’t cover all the cases like a human could, but it can cover a lot. With automated accessibility testing, you can generate a report, identify your weak points, and fix them.
Integrated automated code quality tools, such as Sass-lint and ESlint, enabling you to reduce pull-request comments, write better code, and share practices easily.
Integrated live reload.
Improved project hygiene
Has it ever been unclear which Node.js version your team is using when launching a new project? Via the toolkit, we encourage NVM (node version manager) usage and replace a .nvmrc file with the proper Node.js version. Similarly, has it ever been unclear which code formatting your team is using? The solution? Use EditorConfig. IDE auto-configures itself, depending on what is defined.
We encourage you to try Version 2.0 for yourself, to begin reaping the rewards of rapid development and improved code quality.
