7 Tools For Front End Development in 2020

Some time in 2016 I was asked to write a list of my favourite Front End tools to help newbie coders. Because 2020 forced me to re-platform this article, I thought I’d write an update. Think of it like that interview Vanity Fair does with Billie Eilish every year, except with 44,789,967 fewer viewers and a lot more waffle about code…

code

Web development tools have come a long way in just a few short years [2020 edit: 🤦‍♀️]. Thanks to this progress, we can harness the power of highly tested libraries to improve our workflow and benefit from greater possibilities when it comes to responsive design. Not only that, we can build things together thanks to ever-improving version control systems. From browser add-ons and plugins, to processors that streamline your code, there have never been more possibilities for creating awesome web applications.

But with the number of web dev tools increasing almost daily, finding the best software to get the job done can sometimes feel daunting. To help you out, I’ve created a list of essential tools for front-end development to get you started.

Editors

Artfully run by a one-man development team, the secret to Sublime’s success lies in the program’s vast array of keyboard shortcuts — such as the ability to perform simultaneous editing (making the same interactive changes to multiple selected areas) as well as quick navigation to files, symbols, and lines. And when you’re spending 8+ hours with your editor each day, those precious few seconds saved for each process really do add up…

You can start coding with Sublime in this free web development tutorial (no sign-up necessary).

2020: Atom
I don’t remember when I made the switch over to Atom, but suffice to say that it must have been so long ago that I don’t actually ever remember using Sublime.

Developer Tools

Google’s built-in Chrome Developer Tools let you do just that. Bundled and available in both Chrome and Safari, they allow developers access into the internals of their web application. On top of this, a palette of network tools can help optimize your loading flows, while a timeline gives you a deeper understanding of what the browser is doing at any given moment.

Google release an update every six weeks — so check out their website as well as the Google Developers YouTube channel to keep your skills up-to-date.

2020: I guess maybe Firefox…for now?
I feel weird that I singled dev tools out as a specific weapon in the front end arsenal. I guess maybe I meant that in 2016 I hated the prospect of opening Firefox and having to use their Dev Tools, and so mainly used Chrome. For now I like Firefox better (grid layouts, slightly nicer UI) – although maybe not for long.

JS Library

That was until 2006, when jQuery — a fast, small, cross-platform JavaScript library aimed at simplifying the front-end process — appeared on the scene. By abstracting a lot of the functionality usually left for developers to solve on their own, jQuery allowed greater scope for creating animations, adding plug-ins, or even just navigating documents.

And it’s clearly successful — jQuery was by far the most popular JavaScript library in existence in 2015, with installation on 65% of the top 10 million highest-trafficked sites on the Web.

2020: React
I mean…right?

Version Control

By rolling out your project with the service, you can view any changes you’ve made or even go back to your previous state (making pesky mistakes a thing of the past). The repository hosting service also boasts a rich open-source development community (making collaboration between teams as easy as pie), as well as providing several other components such as bug tracking, feature requests, task management, and wikis for every project.

Many employers will look for finely honed Git skills, so now’s the perfect time to sign up — plus it’s a great way to get involved and learn from the best with a wide array of open-source projects to work on.

2020: Yep, still GitHub.

JS Framework

UI frameworks are an attempt to solve these problems by abstracting the common elements into reusable modules — meaning developers can scaffold the elements of new applications with speed and ease.

The most widely used of these frameworks is Bootstrap, a comprehensive UI package developed by the team at Twitter. Complete with tools to normalize stylesheets, build modal objects, add JavaScript plugins, and a plethora of other features, Bootstrap can dramatically cut down on the amount of code (and time) needed to build your project.

2020: I feel like…anything else? Vue? React?
I mean, see item no.3. To use Bootstrap you need jQuery, which ultimately means using Bootstrap CSS, and Bootstrap JS too. It’s just too weighty for 2020 🙅‍♀️.

6. Angular.js

This is where AngularJS, an open-source web application framework, comes in. Developed by Google, AngularJS lets you extend your application’s HTML syntax, resulting in a more expressive, readable, and quick to develop environment that could otherwise not have been built with HTML alone.

The project is not without its critics: some feel that this sort of data binding makes for a messy, non-separated code, but we still think it’s an invaluable skill to have in your front-end kit.

2020: React
I’m going to be honest: When I wrote this article I’d never used Angular, and am yet to 😬.

7. Sass

Enter the world of the CSS preprocessor, a tool that will help you write maintainable, future-proof code, all while reducing the amount of CSS you have to write (keeping it DRY).

Perhaps most popular among them is Sass, an eight-year-old open-source project which pretty much defined the genre of modern CSS preprocessors. Although a little tricky to get to grips with initially, Sass’s combination of variables, nesting, and mixins will render simple CSS when compiled, meaning your stylesheets will be more readable and (most importantly) DRY.

2020: SCSS or Sass.
I’ve worked on projects using either syntax, and don’t necessarily have a preference.

Composer and developer turned product designer. lizmowforth.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store