56 Experts reveal 3 beloved front-end development tools

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.

• 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.

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.

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.

• 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.

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.

• SASS

  Makes CSS fun again (and manageable too)

• Sublime Text

  Best editor around

• Chrome Dev Tools

  Gotta know what's going on under the hood

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.

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.

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.

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.

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.

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.

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

• Chrome web inspector

  Invaluable!

• jQuery & jQuery UI

  Both of these tools often solve a bunch of little problems and let me spend more time on harder issues

• Sublime Text 3

  I have a ton of plugins to help me write CSS and SASS more efficiently!

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.

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.

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.

There are many tools but I choose:

• AngularJs
• Bower (learning)
• SASS

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

• TextMate 1.5
• CoffeeScript
• HTML

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.

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.

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

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

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.

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.

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.

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.

• DevTools for Chrome
• Sublime
• xScope

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

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

And of course all my own tools (Dabblet etc)

• Atom
• Git
• Grunt

Three frontend development tools

• Sublime Text 2
• Mixture
• Git Tower

Hope this helps:

• Macvim

  My editor of choice.

• Bootstrap

  Because I can’t really design.

• Angular

  My front-end MVC-ish library of choice.

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.

My most used tools are:

• Firebug
• Dreamweaver Code view
• jQuery
• ImageOptim

• Vim
• Sass
• Chrome

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

1. HTML
2. CSS
3. JavaScript

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.

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.