Tools of the Trade - Front End Developer31 August 2017
The work of a front-end developer is complicated. There is a lot of compiling and minifying code, moving assets around and installing dependencies! Let's not forget actually writing the code too.
In today's article, I'm going to talk about some of the tools often used by front-end developers to make life easier.
Code Editor or IDE for Front End Development
Sublime text has been around for nearly 10 years. It is incredibly popular and has a huge ecosystem of plugins and themes etc. Sublime Text requires a licence which costs $70, however, it can be evaluated for free. The free trial has no expiry time.
Atom is a free and open source editor built by GitHub. It is built using web technologies like Node.js. This means it's easy to hack and customise. As Atom is so easy to customise, it also has a large number of available plugins to extend its functionality.
Check out my article on Atom Plugins.
Visual Studio Code
VS Code is built by Microsoft and is available for free. Again, there are plenty of plugins available. Visual Studio Code is a great choice if you plan on working with Microsoft Technologies such as the .NET framework.
If you're just getting started learning to code, you probably don't need to worry too much about task runners. Instead, focusing on understanding the languages you use. When you find yourself doing the same thing over and over, think about setting up one of the following...
Grunt is the first task runner I ever used. All configuration of you grunt tasks would be done in a
Gruntfile.js, usually in the root directory of your project.
Grunt, like the other task runners I'll mention runs on a plugin based setup. Each plugin gives grunt new abilities, such as image compression.
To get started with Grunt, visit gruntjs.com
Gulp was released sometime after Grunt with the promise of being code over configuration. The idea was that your
Check it out at gulpjs.com
Learn more at webpack.js.org
Chrome Developer Tools
The chrome developer tools are amazing. If you work as a front-end developer and don't use Google Chrome as your main browser, you might be crazy!
The list of useful features is pretty much endless. To read more about them, visit developer.chrome.com/devtools.
Front end Frameworks
Why write code when you don't have to? It may be worth checking out some of the main front-end frameworks. These frameworks usually come with a CSS framework which can give you a basic layout grid, have default styles for things like buttons and forms and also include responsive styles.
Codepen is a great tool for testing out new ideas. It allows you to write code in the browser and see how it updates in real time. Even if you don't plan on using it yourself, you should sign up for their newsletter to see what other amazing things people are building.
There are more tools for front-end developers than you can possibly imagine. These tools can help make your day to day work easier and more efficient. If you use a tool regularly and I've not mentioned it, get in touch with me and I'll update this article.