What toolsets for a Front End Developer to have in 2016?

Open 0 Answers 177 Views Web Design

You must have working knowledge of HTML, CSS, and JavaScript. Beyond that, the following are recommended, in personal order of importance:

A Buddy

Want to simultaneously increase how quickly you learn how to code better as well as reduce the number of errors in your code? Grow a Pair. Pair programming is one of the best ways to continue to develop yourself as a developer and at the same time reduce the number of problems as you'll actively have a second set of eyes looking over your code as you're writing it. Much better than code reviews/quality assurance. As of 2016, I highly recommend one of the following:

  • A friend
  • Another programmer near your level of expertise (or lack thereof)
  • A family member
  • A complete and utter stranger with a beard
  • A complete and utter stranger without a beard

JavaScript Framework

Assuming you have a project in mind that is more complicated than a website with a form, your choice in JavaScript framework will very much influence how you achieve that goal and (by way of extension) your time to market. My 2016 recommendations are:

  • AngularJS (version 1.x) for those looking to get a job in web development
  • React for those looking to build performance-driven applications
  • Ember, Aurelia, Backbone, Angular 2.0, etc. for building knowledge about other frameworks and understanding why/why not use them

Version Control

Tired of having all of your work undone by someone else FTPing their work over yours? Use some version control! Spend less time worrying about whether or not your latest changes are going to muck with another developer and more time trying to find pretty icons to put in your commit messages.

  • git

Package Manager

Why waste time trying to find the latest download sources of the latest libraries/frameworks when you can just install them directly from the command line and serve them from a directory in your application?

  • npm - from Node.js, even though this package manager is intended for developing applications with the Node.js runtime, it's just as good for fetching your frameworks, libraries, build tools, etc.
  • Bower is somewhat meh, but you should understand what it is even if you don't intend on actually using it

A Build Tool

Assuming you don't like to spend more time in the command line than you have to, I highly recommend getting comfortable with a solid build tool. Grunt, Gulp, and Webpack all play a large role in today's build environments, with numerous other options to choose from if you really want to get into the weeds.

  • Webpack, if using React (Hot Module Replacement is too good)
  • Literally anything you can get comfortable with, otherwise

A "Good" Text Editor

While you can continue coding in Notepad if that's your jam, I've found that a "good" text editor can have a noticeable impact on how quickly you can code. The "good" ones usually have some different plugins that you can use to further customize your code, which serves the purpose of further improving your experience and helping you with the areas you know you have issues with (missing parens, anyone?).

  • Atom, which boasts amazing plugin support, is hackable, and is free
  • Sublime Text, which is lightweight and has great packages
  • WebStorm, which does some of that fancy live updating for you
  • Notepad/vim/emacs/whatever

A CSS Pre-processor

Writing CSS can get tedious. Make it less-so with a pre-processor. Pre-processors will often support multiple different ways of making it easier to mentally structure your application, such as nesting, variables, and even computational logic. A beautiful tool for making beautiful content.

  • SASS
  • LESS

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:
To avoid this verification in future, please log in or register.