Essential Tools for Any Web Developer

  • Atom
Atom is a text editor like no other. It may look any other text editors on the market like Notepad ++, sublime, PHP storm however with ATOM its fully hackable to the core and it brought to you by the same guys who run GitHub (If you don't know who Github are, probably best you crawl out from under that rock) (interestingly, the guy who created Git also wrote a little known thing called Linux…) So please find our best packages you can use with ATOM.  
Emmet Open-Recent sync-settings Autocomplete-Paths Highlight selected                                                   
  • Emmet is great for us developer who want to rapidly improve our HTML and CSS workflow through some simple shorthand actions.
  • Sounds like it should be a standard any any software package but sadly this is a slight downfall with atom. However thanks to a “Zren” we now have a way to open your most recent projects.
  • If you are like us and work across many devices and work from home also but would like to keep your environments and packages instantly crossover then Sync Settings is a smart choice.
  • Connect it to your Github and you're good to go.
  • Its monday morning, your tired/ hungover and no amount of coffee can wake you up but you still need to remember what paths and pipes need to link up or down the tree then Autocomplete-Paths is the tool for you.
  • Simply start typing the path and it will begin to autocomplete and show you which pipes are available in that branch
  • Eye strain affects us all, specially if you're looking for the same word multiple times. If only there was a package that allows you to highlight/double click the word you want and it would highlight the rest. Enteres “Highlight Selected” which does exactly that.
Linters Pigments Seti Icons Minimap
  • Lintes make life that much easier. Why not use them unless you want to make your job more difficult.
  • A must if you want to increase your productivity.
  • Linter(with Cow Powers)
  • Linter-csslint
  • Linter-htmlhint
  • Linter-jshint
  • “A package to display colors in project and files” - Pigment, Straight to the point and much like the package it will clearly highlight that color code you have horribly chosen.
  • We all love a sexy workspace with slick styles and layout so why should your icons be any different. “Seti Icon” make that already perfect workspace even more sexy.
  • We have all at some point played simcity or Civ. Well you know that minimap that helped you navigate around the world. That's what “Minimap” does. It helps you navigate through those long pages quickly without having to scroll like a *insert quirky joke*.
  • SourceTree:
SourceTree is great visual tool for version control in all your projects which works on a Branch / commit bases which simply links up with Bitbucket, github and stash account. “SourceTree simplifies how you interact with your Git and Mercurial repositories so you can focus on coding. Visualize and manage your repositories through SourceTree's simple interface.” We recommend the Gitflow to help visually follow your versions.  
  • MAMP:
Simply translates to “Mac, Apache, MySQL, PHP” and is very similar on how you would use LAMP or WAMP. It basically create a web server where you can run all server side scripts from a root directory. Our backend pug developer however says it's great for us front end bunch but for anyone who knows their backend then it’s a bit more limiting than a customised setup.   Great for a simple responsive design which does not heavrly rely on server side setup.  
  • Filezilla:
Filezilla has been around since 2001 and connects directly to your ftp account. Everyone has at some point used it to take the hassle of uploading files to your server without having to go through that annoying cpannel process on our hosting provider's site . Its straight forward, quick and just works.   Also (winscp)  
  • Terminal/Console:
Google it! The coding heart of any Windows/Linux/Mac which also allows you to connect to a remote server and run commands.  
  • Adobe CC:
Simply has everything you will ever need to create Graphics, Videos, Content, Sound, web prototyping and yes even websites but dont follow into that cycle. Unlike previous version Adobe’s Creative Cloud combines every product Adobe has ever made into an affordable bundle that can sync with multiple devices through their cloud servers. Not essential but will make any developer's life that much easier.  
  • Multiple Browsers:
For cross browser testing duh? We personally all prefer Chrome for various reasons but don't be that person who only swear down to one browser and that is the only browser they will developer for, bunch of IE Bandits!