Front-end Dev Tools

I recently came across a web tools list1 and decided to compile a similar list of tools that have been making my life easier as front-end dev.

 Tools

As far as tools go, there’s always new stuff and sites like Product Hunt2 ensure folks are in the know for every product under the sun. Nevertheless there are always a few main stays or daily drivers, here are mine.

 Prepros

As the name suggests, Prepros is a bundle of drag n’ drop preprocessing goodness. I primarily use it for SASS, JS Concat and LiveReload support during solo development; but you can throw LESS, Jade and a bunch of other stuff at it. The latest version adds/refines a slew of features that make it a one stop shop for common dev tasks. Get Prepros.

 Harp

Harp is a Node app I came across when I did a web search for “static site builder with simple authentication.” Its sell for our team was built-in authentication, LESS, and partial support. Zero config doesn’t hurt either. Like Prepros, you can throw a bunch of different languages at it and it’ll compile them for you. Being a command line tool, you can easily include Harp functionality in your task runner/build tool of choice3. Get Harp.

 SourceTree

I still can’t figure why the Windows version isn’t as attractive as the one for Mac but it remains my Git client of choice. I talk more about it in an older post; but basically Atlassian’s SourceTree is another productivity tool that helps me to get Git stuff done quickly. Get Sourcetree.

 Editors

I know all the “cool kids” swear by Sublime Text, VIM, EMACS or even Atom3, but Brackets is my primary text editor.

 Brackets

I can’t remember how I came across Brackets, but I’ve been using it for sometime and have shared it with a few colleagues who’ve also made it their default editor. Brackets has a light minimalist feel with an active plugins community. The shortlist of built-in features like Live Preview, SVG Preview, multiple cursors and JSLint are great, but third-party plugins like Emmet, BracketsToIX and Markdown Preview (which I’m using to write this post) are where the tool shines. On the other hand, Brackets could really do with splitview and multiwindow support; once it gets those two I’ll have no reason to look back. Get Brackets.

 Aptana

This text editor (or IDE) is a little long in the tooth, but Aptana is a sturdy dependable Eclipse based editor. What makes it attractive is the built-in toolset out of the box, like multiple Terminal/Command line windows, GIT, FTP and multiple window and splitview support. On the other hand its rather slow to start-up and has a few functions that are slow as well. Aptana doesn’t seem to have an active third-party plugin community and I’ve oft found the plugin process tedious. Finally it is also no longer updated (as far as I can tell) and as such doesn’t benefit from active development like newer text editors. Get Aptana.

 Atom

I use this when I need to refer to another codebase while using Brackets. It’s my fast multiwindow + splitview option. I haven’t taken the time to learn it, so I can neither deny or claim its greatness. Get Atom.


Have a digest of favorite tools? Tweet @komplexb and let me know.

 Footnotes

  1. Web Tools I Love |
  2. Product Hunt |
  3. Harp + BrowserSync [+ Pow] |
  4. VIM guy & EMACS guy bully the Atom guy |
 
1
Kudos
 
1
Kudos

Now read this

#a11y-ing up byronbuckley.com

Making byronbuckley.com a little more accessible with WAI-ARIA and progressive enhancement. From textbooks to #a11y, accessibility is a topic I was aware of but never tried to learn. Recently, I decided to change that by reading Apps for... Continue →