on Writings, Blog, JavaScript, Code

Code more efficiently with automation and web tooling

Front-end development isn’t just about writing code, but also being flexible in the way you work. It’s important to have a development environment that supports making fast alterations when designs can change quickly.

Why think about workflow optimisation?

Optimizing your workflow can help by reducing some of the overhead when writing code, saving you time and money. Also, using build tools to take control of mundane tasks and complexities in the development process without your input can reduce human errors and allow you to focus on creating.

There are many options for web tooling and optimization, so it’s important to choose the tools that suit your needs and not go overboard. If a tool takes longer to set up than the time it saves you in the long run, there’s little argument for adapting the it.

Use the right tools for the job: IDE vs Editor

Depending on what you're making, you'll have to use some sort of development environment to code your project - generally an IDE (integrated development environment), or an editor (e.g. Sublime or Atom).



Making the choice between the two depends on the type of work you’re doing. Below, we'll first look at the benefits of an IDE, and then why you would want to use an editor.

Using an IDE

You can think of an IDE as a Swiss army knife - it can do it all:

  • editing
  • debugging
  • building
  • compiling
  • optimizing

IDEs also often control the programming language and platform they’re used for, and also offer good support. Good examples of effective IDEs are XCode for iOS development, or Android Studio for Android development where you’re developing for a primary medium.

However, despite doing so much, using an IDE comes at the expense of using tools that do just one thing really well.

Web development is more effective with a code editor

When developing for the web, there’s a lot of fragmentation such as different browsers, devices and standards. In this situation, it’s better to use individual tools that are best for each job, whilst ensuring they work well together.


For example you can use a SASS compiler to convert SCSS to CSS, and a tool such as Browser Sync that enables live editing, so you can see your changes without manually refreshing the browser. To enable these tools to function well together, we can use a task runner such as Gulp or Grunt - but which one?

Find out here