Front-End Developer Toolbox: How Does Yours Measure Up?October 18, 2017
Front-end development in 2017 is a complicated and constantly shifting landscape of frameworks, trends, libraries and strategies. It seems like there is a new ‘must use’ tool every few months. It can feel as though you’re drowning in quicksand trying to keep your head above the latest trends.
When you look at your front-end tool box, do you feel more like Bob Vila or Bob Saget?
My must haves for a good front-end toolset are:
- CSS Preprocessor
- Task Runner
- Lint or Debug program
(Note that there are many other tools not covered here, such as your choice of computer, your IDE and other software. For this article, let's just cover the libraries and frameworks.)
I’ve been a jQuery guy since I started my first web project ever, but the increasing popularity and stability of frameworks definitely make them an attractive choice. React and Angular seem to still be fighting it out for position as the most popular framework but React is supposed to be a bit easier to learn and if you’re a Drupal front-end developer, getting to know React is definitely a good idea given the recent push to use React for Drupal’s administrative UI’s.
Lint and Debug
Think back over all the time you’ve spent trying to find a missing semicolon or unclosed bracket that brought a project to its knees, while you manually scanned 1000s of lines of code to figure out what you did wrong. Wish you had that month or so of your life back? Tools like Stylelint, ESLint, and your browser’s built in development tools will not get that time back for you, but they will help prevent that pain from happening again.
Stylelint and ESLint are command line lint programs that comb your code and compare it against a set of specified rules. You can write your own rules, use an existing library, or a combination of both. Your linting can be targeted to follow a set of best practices, just the rules you most care about, or help you overcome bad coding habits.