Give your business a fighting chance

The tools the top web developers use (Oh, they're also FREE)

4 min read

Written by
Owen Richards

Chief Product Nerd

Owen Profile
Fighting Chance

The tools the top web developers use (Oh, they're also FREE)

Before getting into this post, it's important to know that you might need a semi-techie head and have a basic understanding of how websites work. if you'd like to start there.

Choosing the right tools can completely change the way you work. I've had first-hand experience with this and tried out more than I care to count. This is a run down of my top tools to use as the web guy here at Big Lemon. I also know a lot of others vouch for them too. Disclaimer: These tools all have free versions. Some require you to pay for "continued use", but don't really enforce it. Most also have paid versions. We are NOT affiliated with any of these companies or tools. In the vein of productivity, let's dive right in.

My Stack

A foreword about my equipment... I use PHP and WordPress for all client sites. This is mainly because WordPress is very customisable and very easy to teach to clients. I also work with a 13" MacBook Pro (mid-2014) with a 26" Acer monitor, a few Western Digital external hard drives, an iPhone 6 and an old-ish iPad 2. DeathtoStock_Wired7

1. Sublime Text

Ah, where would I be without this? Probably still using Adobe Dreamweaver. cringe Sublime Text is a lightweight IDE (a more advanced text editor for newbies) to manage your projects, files and code.

By far the best feature of Sublime Text is its external packages, which let you add specific features. These can be simply added from inside Sublime Text to add much more functionality than you probably need. Here are the packages that I use. A ninja needs a lot of tools, you know. Despite this, any beginner would do fine by just installing Sublime Text and giving it a whirl with the default settings. The packages are a luxury in most cases. I've always found that larger IDEs (like Netbeans or WebStorm) were just too bloated for my needs. Too many features that I didn't use. Choosing my own packages also meant I learnt their features with more intent. You can get free versions of Sublime Text v2 and v3 Beta. Either is fine, but I personally use v3 to get the new features. Please note that you will be constantly asked to upgrade to a paid version, but it isn't necessary.

2. SourceTree

Version tracking your work is essential. Even more so for multiple-person teams. In a nutshell, SourceTree uses Git to track past and current versions of every single line of code in your projects. You can then revert to previous versions or combine your code with other developers' code.

It can also be used for working alone in multiple locations i.e. at the office and at home. With remote services like GitHub and BitBucket (they created SourceTree) you can store your code remotely to access anywhere. As a sole developer, I mainly use this to keep on top of new features I'm working on and track past changes. SourceTree is completely free to use.

3. Sequel Pro

For beginner developers it's unlikely that you'll need to do any database management. But when you do come to it, Sequel Pro is great at doing just this. The UI is brilliant for multiple database connections and favourited connections let you access any of your databases with ease. This makes diving into your remote and local databases dead easy. Goodbye phpMyAdmin. Sequel Pro is also completely free. DeathtoStock_Creative Community3

4. MAMP/AMPPS

These are simply a programs that allow you to run a website on your Mac or PC ("locally"). This is essential to speed up development and totally saves on uploading and downloading to a remote server. MAMP has a paid version called MAMP PRO.

After giving it a trial, I decided that the Pro version wasn't for me. I use _MAMP_ enough that I probably should pay, but I'd rather stick to the free version for functionality and ease of use. Alternatives for Mac users is [_AMPPS_](http://www.ampps.com/). While I haven't had a chance to check it out yet, I've heard great things about it. I plan on testing it over the next few weeks.

Update AMPPS is the dog's bollocks. It's fantastic. It lets you get set up with most environment in minutes and custom domains for your local projects is a sorely missed features in the free version of MAMP. Don't be put off by the design of their website. The actual app has a really nice UI that's intuitive and lets you find what you need pretty quickly. You can get AMPPS here.

5. Google

Last but certainly not least is the search engine behemoth, Google. One of the things I struggled with when starting to code was that I was constantly looking for things on Google. I can tell you now that this does not stop, regardless of experience. Rather than worrying about self-validity as a programmer, spend that energy refining your Googling skills. Practice being able to find exactly what you need as quickly as possible. It's impossible to remember every single function and syntax, but the more you practice and code, the easier things will be to remember.

I created a short guide on Googling tips to seriously speed up your searching below. It's helpful! Use it to get to where you need to go in record speeds. Google is your friend. Treat it as one and it will love you eternally.

Bonus: The Web Browser

Using all the browsers are normally required towards the end of a project. But for day to day and most of the development process I default to Chrome. Chrome handles almost anything you can throw at it, and has some fantastic extensions to help the development. The extensions that I use include:

  • Awesome Screenshot - Take a screenshot of a web page and save it as an image
  • Check My Links - Make sure all the links on your page are working and point at a real website
  • Google Analytics Opt-out - Stop Google Analytics tracking you as a website visitor
  • MozBar - Get Moz page and domain ranking data for websites and results in Google
  • Web Developer Toolbar - Contains most tools you need to test websites, including diabling JavaScript and CSS to browser resizing

Firefox is probably my backup, with the other three only being opened for testing projects.

Final world

Sublime Text is by far my most used tool and I absolutely swear by it. The packages are great, and when combined with these other tools you'll be well on your way to mixing with the pros. Sequel Pro is also great for database management on Mac.

If you can't remember a solution/function/snippet/use/syntax, don't feel bad for Googling. We all do it and it's essential to learning, as is trying to pick up tips from professional developers. Learn learn learn! Please let me know if you have any trouble with the programs I've suggested. I'm always happy to help out and give some advice or guidance.

I'dlove to hear what programs and tools you use. I'm always interested in looking at alternatives so please share them on Twitter.