56 Experts reveal 3 beloved front-end development tools
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
Which front-end development tools are used by experts?
No 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 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
Here are my choices:
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.
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.
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.
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.
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.
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.
Sublime is a treat to work with, it makes text editing a glorious, expressive thing.
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.
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. MeyerWebsite
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. BrownWebsite
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.
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.
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. :)
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.
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.
Let's see, I think the three frontend tools I couldn't do without would be:
There are just too many tools here that make it easy to build sites and frameworks in a flash.
I love the tools for templating and for accessing and manipulating data.
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 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)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 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.
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:
- 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.
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.
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.
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.
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.
It makes working with Git, because I’m not a command-line type of guy, so visually easy to understand.
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.
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.
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.
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
If I could only use 3 front end tools I'd choose:
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.
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.
Chrome Inspect Element
I would choose:
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.
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.
Here's what I came up with:
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.
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.
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.
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.
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.
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.
Here's some front-end development tools:
Atom is my code editor. It’s fast, well supported and doesn’t require a computer science degree to configure.
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.
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.
If I could only use 3 development tools, they would be:
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:
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.
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.
Lim Chee AunWebsite
Rembrand Le CompteWebsite
Alex R. YoungWebsite
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!
Find below once more our research results:
The top 5 most popular front-end development tools by the experts
- Sublime Text - 19 votes
- Sass - 16 votes
- Chrome Developer Tools - 15 votes
- jQuery - 10 votes
- Git(Hub) - 7 votes