56 Experts reveal 3 beloved front-end development tools

Web development Tools

Get free updates of new articles, interviews & roundups here, or subscribe to our RSS feed.

A front-end developer develops the front-end of the website. The front-end is the part of your website which is visible for your visitors. The front-end developer, also known as the client side developer, works in close cooperation with designers and developers. He or she in facts operates in between them, so in between creativity and technique. The front end developer position is a rather new position in the development and design world. In the past front end tasks like HTML, CSS and JS were often executed by a webmaster or a programmer. Throughout the years though the front-end developer tasks have become so diverse, programmers and webmasters just can’t keep up with all front-end developer aspects and a dedicated front-end developer is often appealed to. A front-end developer should not only take into account the technical website aspects but should also consider accessibility, user-friendliness and performance. Altogether a front-end developer converts the design of a website to a fully-functional website which is properly displayed in all browsers, inclusive the corresponding interactions.

Front-end development tools

Front-end developers can experience serious obstacles while writing HTML, CSS and Javascript. To tackle most of these obstacles front-end developers should make use of well-designed and well-developed front-end development tools. Front-end development tools are applications and tools which fasten the front-end development, which ease the development process and which can clearly show the developer what has gone wrong.

Which front-end development tools are used by experts?

Development ToolsNo matter if you are a multi-year experienced front-end developer or a newbie who has just started to develop front ends, finding the appropriate tools might be a difficult and tricky task. There are many top 5, 10 & 20 lists or pages focusing on specific development tools. Nevertheless by consulting these pages and lists it is still not always clear which one is most recommended. Therefore we decided to consult our own experts, because thanks to their personal experience this is in fact the only way to get a clear picture of the best and most user-friendly tools.

To get a clear idea of the best front-end development tools we asked the following question to 56 front-end development experts:

If you could only use 3 front-end development tools, which 3 tools would you choose?

The top 5 most popular front-end development tools

Based on the insights of 56 experts

  1. Sublime Text 19 votes
  2. Sass 16 votes
  3. Chrome Developer Tools 15 votes
  4. jQuery 10 votes
  5. Git(Hub) 7 votes

The 56 experts

Please find below an alphabetical list of all experts who have participated in our research. By clicking on the person’s name you are immediately directed to his or her personal insight. One could also decide to scroll over all expert insights one by one because there are many experts who are more than happy to share handy tool and application tips in their insight.

The expert insights has been arranged in order of delivery

Brad Colbow

Website
Brad Colbow

Here are my choices:

  1. Coda

    I’ve been using Coda of years and years, it’s still my editor of choice. I’ve heard great things about Sublime Text and I know a couple front end developers who use VIM now. Those are overkill for the amount of time I actually spend in the code.

  2. Compass/Sass

    I’ve used sass for a while now, probably to long. Recently I jumped into an plain old css file and half forgot how to update it. I probably only use about 10% of what it can do but that 10% is ridiculously useful. I threw compass in there because I probably wouldn’t have started using sass without all the nifty things that compass does that makes sass easier to use.

  3. Jekyll

    Not a front end tool, but I’ve been using it a lot lately and i love it. I’ll be the first to confess that I don’t really know as much as I should about back end development especially what my server is doing. The most frustrating thing in the world is to have something go wrong with your site and having to work with tech support or beg a developer to help you because you don’t know what the server is doing. Jekyll is a Ruby static site generator. You run it locally and it spits out html pages you can upload. No backend to fiddle with, no mess, and you have all the power of a CMS.

Jeffrey Zeldman

Website
Jeffrey Zeldman
  • Clean Text

    I use "Clean Text" to prepare content—it's an uncluttered writing and editing environment that zaps gremlins, counts words and characters, smartens quotation marks and apostrophes, and otherwise does nothing else. Exactly what I need.

  • PageSpinner

    I write HTML and CSS in Clean Text or in WordPress's Text view. If I'm doing anything extensive, I work in good old BBEdit (or, very occasionally, Coda 2). My all-time favorite HTML editor was PageSpinner—yes, really.

  • Images

    I use a small Sony digital camera to create images, Adobe Lightroom 5 to edit them, and Photoshop to "Save For Web," except when the CMS handles image crunching for me. For instance, the CMS Tim Murtaugh designed for An Event Apart in ExpressionEngine takes the highest-quality image I can send it ... and then serves an appropriately sized thumbnail or what have you, as the situation dictates. That's the future, in my opinion: a CMS that handles the increasing complexities of responsive and Retina images. In a situation like that, I just use my camera and Lightroom.

Stevan Živadinovic

Website
Stevan Živadinovic

I would pick Sublime, jQuery and LESScss.

  1. Sublime Text

    Sublime is a treat to work with, it makes text editing a glorious, expressive thing.

  2. jQuery

    jQuery evens out the kinks on the JS side of different browsers and reduces the amount of boilerplate code that I'd have to write to get effects or AJAX happening.

  3. LESS

    And LESS with its variables and mixins, lets me make subtle style decisions relative to certain predefined variables and do it all in the browser without needing to bake the files server-side. Separating different visual elements from actual instances of those elements in the templates is a very handy abstraction. Aside from that, I tend to build things from scratch and prefer the tools that don't solve too much of what I feel the job of design ought to be.

Eric A. Meyer

Website
Eric A. Meyer
  1. BBEdit
  2. Firefox
  3. Chrome

In roughly that order, though the second and third places may switch up if Firefox doesn't get its developer-tools house in order.

Tiffany B. Brown

Website
Tiffany B. Brown
  • BBEdit

    I've used BBEdit for the last half decade or so. I've tried Aptana, TextMate, Brackets, and Sublime Text. Still, I keep coming back to BBEdit. Part of that is habit, but most of that because BBEdit is a really good editor. Every time I try a new editor, I run into a feature that I miss from BBEdit. Or, I find an awesome feature in another editor and realize BBEdit already has it. It's really solid software.

  • Bourbon and Neat

    Bourbon is a mix-in library for Sass, and Neat is a semantic grid framework that incorporates Bourbon. What I love about them is that they're lightweight and pretty much get out of your way. Neat, in particular, doesn't force you into its system of class names. It just provides mix-ins that you can use with your own to create your grid system.

  • VirtualBox

    It's not really a front-end specific tool, but I still use VirtualBox enough that I think it's worth mentioning. I'm a Mac user, but obviously, I still need to test compatibility in Internet Explorer. VirtualBox and virtual machines from Modern.ie save me from owning four laptops.

Jamis Buck

Website
Jamis Buck

My list:

  • Vim (specifically, MacVim)

    I've loved vim for a long time, now. I've spent the time getting comfortable there, and I'm able to operate quickly and efficiently in it. It's home. :)

  • CoffeeScript

    I mean, Javascript is nice and all, but its warts are huge. CoffeeScript's additions (like list comprehensions and cleaner syntax) are a breath of fresh air.

  • jQuery

    Cross-browser compatibility will be an issue forever, and jQuery is a wonderful solution to that. Even aside from its browser compatibility features, jQuery's convenience methods are wonderful. Combine it with CoffeeScript and you've got a team that's hard to live without.

Bradley Neuberg

Website
Bradley Neuberg

Sindre Sorus

Website
Sindre Sorus

Most of the time spent on my Mac is in either Sublime Text, Terminal or Chrome. Other than that it differs too much to be useful. I like to experiment with a bunch of different things.

Jesse Stay

Website
Jesse Stay

I admit I haven't done a ton of frontend dev of recent, so my answers may not be much help. I've always been a big fan of jQuery. I use Vim to do most of my editing.

Armand Emamdjomeh

Website
Armand Emamdjomeh

Let's see, I think the three frontend tools I couldn't do without would be:

  1. Bootstrap

    There are just too many tools here that make it easy to build sites and frameworks in a flash.

  2. Underscore

    I love the tools for templating and for accessing and manipulating data.

  3. jQuery

    I guess I'd have to go with jQuery - it can be bulky and slow, but it also makes so many things so easy when performance isn't a factor, but speed to completion is.

Harry Roberts

Website
Harry Roberts

My three would be:

  • Chrome

    Chrome for its immense capabilities as a profiling and auditing tool, as well as just being a web browser. The amount you can manipulate—and learn about—your code in its Dev Tools is invaluable.

  • Git(Hub)

    Git(Hub)because version control is a must, and Git(Hub) is the best there is. I refuse to work on a project that isn’t under some form of version control, and nine times out of ten that is Git.

  • Finch

    Finch for how much time and effort it saves me when building, sharing, and testing responsive sites. It’s a pretty new tool on the scene, but I predict it’s going to be big, big news.

Matthew Lein

Website
Matthew Lein

I'm going to answer with tools allowing a general ecosystem of plugins as well. Ultimately the answers are pretty tame and expected, but maybe there is some value in that. These things are in every project, where others may vary.

  1. Sublime Text

    An IDE is obviously essential, and Sublime is the best of breed. With its plugin ecosystem, it is a lifesaver (and massive time/money saver). My essential plugins are:

    • Autofilename
    • EditorConfig
    • Emmet
    • SCSS
    • SidebarEnhancements
    • SublimeLinter (and all of its linters)
    • Flatland/Soda theme

    Emmet and SublimeLinter are the big winners. They both improve productivity and reduce typing errors dramatically. Can't live without them now.

  2. SCSS

    I can never go back to regular CSS, SCSS adds way too much. Modularity of files probably being the most beneficial. Autoprefixer has taken over a lot of its initial benefits in CSS3 prefixing, but overall I think SCSS is here to stay for all of its other features.

  3. Grunt

    Grunt holds it all together and makes solving other front end problems relatively easy. File watching/compilation, livereload, server setup, concatenation/minification, browserify/require builds, code releases, sprite management, static asset revving, and probably of bunch of other things I'm not thinking of. All solved without much work on your end, just learning how the configs work. And when a new problem comes up, someone has probably already built a plugin to deal with it. Other flavors of task runners can probably do all this, use whatever one you want, but for me Grunt has done the job incredibly well.

Peter Cooper

Website
Peter Cooper

I'll keep it short.

  1. Any text editor

    I'm not fussy. I just want to punch text into a computer.

  2. Sass

    It makes CSS a delight to work with.

  3. LiveReload

    Takes a lot of friction out of the design process.

Jeff Geerling

Website
Jeff Geerling

I would say that the three tools I use the most are:

Joel Housman

Website
Joel Housman

For code editing, first of all know that I am a Mac user. My 3 primary tools are: BBEdit (code editing), Tower 2 (Git Repository Client), and PIxelmator (Asset Editing). I could expand on this list greatly, but since you just want me to list three, I’ll focus on those.

  1. BBEdit

    This choice is entirely subjective on my part. I just prefer BBEdit’s UI over other popular editors such as Sublime Text or Textmate (or even Coda). So many small features that I rely on, such as multi-file search are handled in a way in BBEdit that I’m just used to because I’ve been using it for about 8 years.

  2. Tower 2

    It makes working with Git, because I’m not a command-line type of guy, so visually easy to understand.

  3. Pixelmator

    It’s like Photoshop but it opens as if it is Text Edit. I love how light weight it is, yet powerful. It does 99% of the tasks that I used to use Photoshop to do, and they stay on top of new hardware and software updates. For instance, they were one of the first apps to add in support for the new Mac Pros which I appreciated when I got mine this past spring.

Brian LeRoux

Website
Brian LeRoux

I'd choose HTML, CSS, and JavaScript. Framework/library fashion is helpful but you need to know the platform in order to deliver great experiences with it.

Benjamin Farrell

Website
Benjamin Farrell

The only way to answer this question is to go really broad. I think most experts will agree: use the best tool for the job even if it changes from job to job. So, right there frameworks and libraries are out, because it will vary depending on what you're trying to do. So to keep things broad, I'll pick some tools that do it all that I use in one form or another for most everything I do.

  • Node.js

    First is Node.js. Different projects have different needs, whether it's grunt, gulp, LESS compiling, minification, etc, Node.js is the common thread that runs through all of these in my workflow today. I can pick any task that I need to do and I can probably find it on NPM. If not, I can write it myself in Javascript and run it with Node.

  • Github

    Next tool is Github. Yes source control is fantastic. Going back in time to see my changes, not having to worry about backing my files up, and collaborating with folks are all good things. We've had this for ages with git or SVN or whatever. Github is pretty special though, because developers of all kinds are flocking to it and offering great code that I don't have to write! It's fun writing code, but why bother writing something that someone else already wrote? In addition to taking, we can give, too. I always have something new I want to build, but if you don't have an idea or are just a beginner, you can contribute to some great stuff there!

  • Jet Brains' Webstorm

    Last tool, I'll break my rule a little bit and not go so broad. Like any other tool, IDEs come and go. We've got Brackets, Atom, Sublime, and even VIM if you're hardcore. My favorite IDE is Jet Brains' Webstorm. It's a joy to use and really speeds up development. Probably my favorite thing about it, is that it gives you a good kick in the pants if you need it. To explain, Webstorm usually stays up to date with the latest workflows and tooling. For example, version 8 just added a nice little Grunt console. Sometimes Webstorm can blindside you with something you didn't think of learning....but it's there right there in your IDE, enticing you to try it out. It happened to me with Node a few years ago. I wasn't really looking to learn Node, but it was right there waiting for me. I tried it and got hooked. There are way too many things to learn, it's impossible to try them all. So far, Webstorm has been a great tool to gather front-ender feedback, integrate a feature, and then offer that feature to you on a silver platter.

Gregory Hidalgo

Website
Gregory Hidalgo

There are many tools but I choose:

Nathan Smith

Website
Nathan Smith

If I could only choose three front-end tools, I would use: Sublime Text, jQuery, and Sass.

I'm not really a fan of Bootstrap, because for the projects I've been on that were (already) using it, I found myself having to override a lot of things. To the point where it would've been less labor intensive to just write the few things it did from scratch. I have a list of software I use here: http://sonspring.com/resources/software

David Heinemeier

Website

Adham Dannaway

Website
Adham Dannaway

If I could only use 3 front end tools I'd choose:

  1. Sass

    Sass is definitely my favourite CSS pre-processor as I love the extra power it provides. I'm able to break down styles into objects and re-use common elements by extending them. Being able to create variables for font sizes and colours is also very handy.

  2. Sublime Text

    Sublime Text is my text editor of choice mainly because it's simple, light weight and still quite powerful. It's easy to customise to match your coding preferences and there are a bunch of great add on packages for extra functionality.

  3. Chrome Inspect Element

    I don't know what I'd do without the Element Inspector. It's a great way to see exactly what's happening with HTML/CSS elements on the page and you can even debug JavaScript which is handy.

Brad Frost

Website
Brad Frost

I would choose:

  1. Pattern Lab

    While I'm a bit biased, I honestly can't imagine designing websites without Pattern Lab. It gives me the ability to establish and implement design patterns, design with dynamic content, and craft a pattern library alongside the final product. Again, I'm biased, but I legitimately love it.

  2. jQuery

    While the footprint is sizable, jQuery takes a lot of the grunt work out of Javascript writing. Because I've used it so long I would have a hard time giving it up

  3. Chrome Developer Tools

    Developer tools have definitely made my life a lot easier. While I certainly am no power user, the ability to modify things on the fly, see what's been downloaded, etc, are massively beneficial.

Cody Lindley

Website
Cody Lindley

This is pretty much all one needs to do front-end development:

  1. Sublime
  2. Chrome/Devtools
  3. Git/Github

Ricardo Cabello

Website
Ricardo Cabello

My setup is very simple. When I'm on Linux I use Chrome, Atom and gitg. When I'm on OSX I use Chrome, Atom and Source Tree.

Steven Bradley

Website
Steven Bradley

Here's what I came up with:

  • Code Editor

    I use Coda by Panic, but I think code editors are a personal choice. I'd recommend a code editor with some basic features like syntax highlighting and code completion. Beyond that it's really more about personal choice and your style of development.

  • Browsers

    Use any and all and not just for testing. My primary browser is Safari, but I also use Chrome, Firefox, Opera, and IE as well as a variety of mobile browsers. Use all at least occasionally to get a feel for their strengths and weaknesses and where they have specific issues. Realistically you aren't going to have every version of every browsers. For most the latest version is probably enough. For some (mainly IE) you want to have access to several versions.

  • My brain

    Other than a code editor and various browsers, there's nothing I use on every project. Every site, every client, is unique. For example one might require enough scripting where it makes sense to include jQuery. Another site might only need a small function that would be better written in Javascript. I don't think it's a good idea to automatically reach for certain libraries or tools and apply them to every project. I think that's forcing solutions on problems instead of solving them.

By a wide margin, your brain is the most important tool you have and it's all you really need. It's a tool that requires a lot of care and maintenance and a willingness to continue to make it better.

Jeff Starr

Website
Jeff Starr

Honestly I try to stick with CSS/HTML/JavaScript. When more is needed, I might use Backbone, Angular, or some other script/tool, but really I can't say that I use any of them "the most". It's more of on an as-needed basis. My motivation for sticking with the basics is efficiency, performance, and simplicity.

Josh Emerson

Website
Josh Emerson

It’s difficult to answer the question in the abstract, as the choice of tools will be very much dependent on the project. However, broadly speaking, I enjoy using the following tools:

  • Sublime Text 2 & 3

    The plugin architecture has meant that anyone can create functionality for the editor. I especially like using the git plugin so I can git blame people when I see bad code! Also, the keyboard shortcuts can be a huge time saver.

  • Git

    Although not new or sexy, this versioning system has saved me time and effort so many times. Github is a great tool for visualising, sharing and collaborating with Git.

  • Require.js

    Being able to split my code into maintainable parts, and to explicitly state what dependencies each module has. For larger code bases, this is an absolute must. I can’t imagine returning to any other way of working now. With Grunt it’s possible to build and minify the code, so that performance is not impacted in production.

Remy Sharp

Website
Remy Sharp

TIP: Watch Remy's video trailer about his workflow with DevTools

Lea Verou

Website
Lea Verou

Espresso, CodeKit (for SASS & minification), git. I don’t use that many tools :-)

And of course all my own tools (Dabblet etc)

Les James

Website

Daniel Howells

Website
Daniel Howells

Three frontend development tools

Andrew Burgess

Website
Andrew Burgess

Hope this helps:

  • Macvim

    My editor of choice.

  • Bootstrap

    Because I can’t really design.

  • Angular

    My front-end MVC-ish library of choice.

Joni Korpi

Website
Joni Korpi

Here's some front-end development tools:

  1. Atom

    Atom is my code editor. It’s fast, well supported and doesn’t require a computer science degree to configure.

  2. Middleman

    Middleman is what I use as the “back-end” for every normal website I make, as well as for any front-end prototypes I create. It’s a relatively hassle-free static site generator.

  3. LiveReload

    LiveReload reloads my browser whenever I make changes to a file and save. Something that allows completely live editing would be nicer, but this is easy to setup and works with anything.

Shannon Mølhave

Website

Jonathan Snook

Website
Jonathan Snook

Jeremy Keith

Website
Jeremy Keith

If I could only use 3 development tools, they would be:

  1. HTML
  2. CSS
  3. JavaScript

Dale Harvey

Website
Dale Harvey

I only majorly use 2 development tools, Emacs + a web browser, primarily Firefox however very often Chrome, I have been trying to replace Emacs with something web based but not found a suitable replacement so far.

I guess NPM would be the 3rd major addition, its heavily used with all my JS projects.

Wes Bos

Website
Wes Bos

Great Question! Here you go:

  • Sublime Text

    This editor has really changed both the way front end developers work as well as the way they approach other tooling. So much that I am writing a book about it. Once someone is excited about customizing their editor, they move onto other great workflow tools like Grunt, Gulp, Alfred and so on.

  • Angular JS

    Whatever your front end framework of choice, using one is crucial to building small or large scale web apps.

  • Sass (or Stylus if you are running a Node stack)

    Once you have written CSS with a preprocessor, writing regular CSS just isn't any fun. I'm huge on productivity so this is a must-have for me.

Christian Heilmann

Website
Christian Heilmann
Christian Heilmann Tweet

Chris McDonough

Website
Chris McDonough
Chris-McDonough Tweet

Stephen Radford

Website
Stephen Radford
Stephen Radford Tweet

Rey Bango

Website
Rey Bango
Rey Bango Tweet

Peter-Paul Koch

Website
Peter-Paul Koch
Peter-Paul Koch Tweet

Joe Casabona

Website
Joe Casabona
 Joe CasabonaTweet

Jeremy Fields

Website
Jeremy Fields
Jeremy Fields Tweet

Jenna Gengler

Website
Jenna Gengler
Jenna Gengler Tweet

Ryan Olson

Website
Ryan Olson
Ryan Olson Tweet

Rachel Nabors

Website
Rachel Nabors
Rachel Nabors Tweet

Lim Chee Aun

Website
Lim Chee Aun
Lim Chee Aun Tweet

Steve Souders

Website
Steve Souders
Steve Souders Tweet

Alison Gianotto

Website
Alison Gianotto
Alison Gianotto Tweet

Mathias Bynens

Website
Mathias Bynens
Mathias Bynens Tweet

Rembrand Le Compte

Website
Rembrand Le Compte
Rembrand Le Compte Tweet

Leah Culver

Website
Leah Culver
Leah Culver Tweet

Alex R. Young

Website
Alex R. Young
Alex R. Young Tweet

WOW!

We would like to express our gratitude to all who have contributed to this epic expert roundup. We truly enjoyed the contact with all these experts, after which we could use their feedback to produce our results and to compose our article. We now have a pretty good idea of which front end development tools really matter and which of them can be denied. There is no better and more valuable feedback than expert front end developer feedback.

Did you like this article? Please share it!

Make sure you become my Twitter follower and become the first one to be informed of our future interviews and articles. Find below once more our research results:

The top 5 most popular front-end development tools by the experts

  1. Sublime Text - 19 votes
  2. Sass - 16 votes
  3. Chrome Developer Tools - 15 votes
  4. jQuery - 10 votes
  5. Git(Hub) - 7 votes
Scroll To Top
Scroll To Top
EAM
- 2014-10-02 22:10:37

Not a very diverse group of experts here...

Bauke
- 2014-10-04 02:31:52

Hi Edwin, it would be bad if the group was diverse since all experts need to be front-end development experts to get reliable results.

ramses
- 2014-10-03 06:40:19

coda, emet.io, jquery, bootstrap

Bauke
- 2014-10-04 02:28:21

Hi Ramses,
Can you motivate why those development tools are your favorite?

John
- 2014-10-06 11:11:13

Great article! I am loving it!! Will come back again.

webastronaut
- 2014-10-06 13:35:17

Can't understand why there are so many Sublime fanboys and girls. IMHO Sublime is very nice for small code/text editing tasks and I have it opened all day long, but if you ever used Webstorm for daily frontend business you soon will realize and appreciate the difference between a code editor and an IDE.

So my 3 favs are: Webstorm, Grunt, Sass

Giovanni
- 2014-10-06 20:17:51

I use PhpStorm, Twitter Bootstrap / Zurb Foundation and Sequel Pro. I use PhpStorm just because it is nice.
I really like it that you can click on a class and it automatically switches to the right file, this goes the same for methods in a class.

Twitter Bootstrap and Zurb Foundation are really nice to create a simple site very quickly. The same goes for Sequel Pro, it's a really simple yet effective tool to manage databases locally or remotely!

宫经营
- 2014-10-08 12:02:00

Nice job!
I would like to recommend some tools, getF5 (cross-platform auto reload page when any file in the directory).
Codekit, kola for less sass coffee.

Matt
- 2014-10-09 01:18:07

No mention of node or grunt...very suprising

Bauke
- 2014-10-09 02:00:25

Grunt is mentioned several times, so is node :)

Rhonda
- 2014-10-12 15:02:34

Admiring the hard work you put into your blog and in depth information you present.

It's good to come across a blog every once in a while that isn't the same out of date rehashed information. Fantastic read!

I've bookmarked your site and I'm including your RSS feeds to
my Google account.

wagville
- 2014-11-05 11:08:07

Hi, just wanted to mention, I enjoyed this post.
It was inspiring. Keep on posting!