Freelancer Developer Tools I cannot live without

Mac Apps

My favorite code editor is Sublime Text - I love Sublime Text! Best code editor I have ever used. Period.

I barely scratch the surface of all the features this great code editor has, but it is super fast and has such cool functions that help me daily. One day I will make a list of my favorite Sublime Text Packages.

GitHub for Mac

The most simple tool to use for Git use. This app handles about 90-95% of my day-to-day Git usage, and the rest I take care of directly in a Terminal window. Just the right amount of features in a nice easy to use GUI. And its free. Love it.

CodeKit

CodeKit for Mac?- "It's like steroids for web developers." CodeKit is an excellent web developer tool that helps me build websites faster and better. CodeKit automatically compiles tons of different formats such as?Less, Sass, Stylus, CoffeeScript, Typescript, Jade, Haml, Slim, Markdown & JavaScript and it does so automatically every time you save a file in your editor. I use it with Sublime Text, and CodeKit does syntax checking and warns me if there are any errors in my code.

When I build custom WordPress themes or plugins, I try to minimize both CSS and JavaScript as much as possible to improve loading time. It is very easy for me to automatically prepend or append other .js files when I save any changes, check for syntax errors and minimize the output directly to a single .js file.

Skype

Skype is the most commonly used video chat tool, and I use it to talk with customers worldwide. Not only can I arrange meetings with face-to-face conversations, but I also use Skype to call people around the world on their cell phone or landlines. The minute prices for international calls are far lower than what my cell phone provider offers.

LiveReload - Instant browser refresh

LiveReload is such a handy tool for web development. I work on an iMac 5K 27-inch, meaning I have ample space for Sublime Text on one side and on the other half I have browser window running - Usually with Developer Tools opened.

Now, before what I would do, and what most developers do, they refresh the browser window/tab manually. That does not take long.

But you still have to alt-tab your way to the browser or use the mouse to click on the browser and then refresh and wait.

On a local development setup, this loads fast, but a couple of seconds here and there adds up.

With LiveReload running, I make a change to a CSS file, I save the file and the browser uploads instantly (okay, half a second) - no waiting. Lovely.

If I edit a .php file, it will refresh the browser, the moment I press save. No need to switch to the browser and wait for a refresh.

How much time it saves me, I don't know - but I do know that this makes development seem faster, and I have no idea what I did before I installed this tool.

I have used it for a long time now, and it has never failed. Okay, now I might have jinxed it, but up until now, it has functioned steadily without fail.

FTP Clients

For my FTP needs, I use two application. I like Transmit by Panic for its stability, ease of use and friendly GUI. However, it is way too slow to work with for many cases. Why? Because of their implementation of thread operates in the queue.

When you add a list of folders to be uploaded or downloaded, each folder is handled by a single thread worker. This means if you have a couple of folders with few files and one with plenty of files, the other threads will be done quickly and just standing idle while a single thread worker uploads each file in that folder one-by-one.

CrossFTP is a different beast that handles this process much smoother and a lot faster. The interface is more clunky to work with, and it is not nearly as nice, but it works FAST, and I use this app on a daily basis.

Check out my test of the?fastest of three Mac applications - FileZilla, Transmit and CrossFTP?on cleverplugins.com

Time Tracking - ChronoMate for FreshBooks

I have used FreshBooks?(more about them later) for many years for my time tracking, invoicing and expenses.

I use a little 3rd party App called Chronomate to track my work and billable hours.

Instead of writing down m on a piece of paper and then forget to add things, I have a couple of timers running on the top of my desktop all the time, and I can quickly start and stop a timer or change to a different client when I need to.

Chronomate helps me save time every day and it is one of my best time savers. Not only that, but I am also certain that I remember to log hours and not miss billable time. I also use for tracking internal projects and projects with a fixed price to make sure I do not go over my internal estimate.

In the interface, it is easy to add a small note before the hours are pushed to FreshBooks, and I use that as a quick reminder of what the time was spent on. For some clients, I add a PDF file?of all tracked hours with the notes attached. It makes it very easy to document what my?time was spent on.

Photoshop

There are plenty of image editing software for any OS out there, but Adobe Photoshop has and most likely always will be my favorite tool. In my past, as a 3D/CGI artist, I used Photoshop extensively. These days I use it far less, and I use only a fraction of the power this powerful tool can do.

The shortcuts and interface are far too ingrown in me to ever change, and it is one of the tools I doubt I will ever change.

Screenshare / reporting tool - Clarify It

Clarify It is a brilliant screenshot tool that I use constantly. It is so easy and fast to take a screenshot, make a few annotations and then upload to their website for quick sharing.

There are many screenshot/sharing tools out there that offer even simpler interfaces and workflows, and I have tested many in the past. Clarify It has hit the sweet spot for me with features and speed, and I use it many times every day to share quick notes and questions with customer and collaborators.

I also use it to build my custom SEO reports. I add a screenshot of a problem and write simple instructions to fix the problem. Each step in the application can be numbered automatically (very nice feature), making it easy to reference to a particular problem over the phone when discussing the report with my clients.

Clarify It has a sharing system, and if you have any updates, you just edit your document and share it again, overwriting the previous version.

Most importantly they have PDF export functionality, and I have set up a company branded template so I can export a report in less than a minute and send via email.

Every screenshot on this page is made via Clarify It.

ImageOptim

Optimizing images can have a huge influence on how fast your website performs for visitors. Waiting for one or several 600kb images can put your visitors off entirely, and they just cancel and go somewhere else.

There are many WordPress plugins and external tools for optimizing images. I like and use the WordPress plugin?WP Smush Pro (link to WPMU plugin page), but it is not free. When I develop sites locally or when I work on optimizing a client project locally I turn to ImageOptim -?imageoptim.com

ImageOptim is a free app that makes images take up less disk space and load faster, without sacrificing quality. It optimizes compression parameters, removes junk metadata and unnecessary color profiles.

ImageOptim runs each image through a range of image optimization tools and chooses the best choice for each image after testing. This process can take some time, but it is worth it.

ImageOptim seamlessly integrates the best optimization tools: PNGOUT, Zopfli, Pngcrush, AdvPNG, extended OptiPNG, JpegOptim, jpegrescan, jpegtran, and Gifsicle.

Here are a couple of before and after pictures. I have seen almost 50% reduction on some client websites, leading to a faster loading site.

Google Chrome

I love the developer tools in Google Chrome, very helpful and I use it constantly to develop websites and find errors.

Although quirky at times, it also uses a lot of memory because each tab runs independently of each other. This is nice in case a tab breaks, the other tabs and windows keep running. The price is more ram will be in use with each tab, but it is a price I am happy to pay.

I also test websites in many other browsers. On my laptop, I use Google Chrome, Safari, Firefox and Opera. For testing on other platforms, I use BrowserStack.

Google Chrome Extensions

The Great Suspender is an excellent extension for Google Chrome you can use to help with the memory problem Chrome has. I use the brilliant extension?- which "Automatically suspends unused tabs to free up system resources". It saves me many system?resources because I open many tabs and windows and switch between many different projects throughout the day.

1Password

I highly recommend 1Password by Agilebits. They keep all the logins and passwords for myself and my customers stored safely. It works both as Google Chrome Extension and as a standalone app for Mac. It also syncs its encrypted data between my Macbook Air, iPhone and iPad. Yes.. I am an Apple fan boy 🙂

Gmail to Trello

This extension does what it says. It adds a button in Gmail that allows with a few clicks I can add an email as a task for me into Trello. My to-do manager of choice these days. Love it. More about that later. Try out the extension here.

Emmet LiveStyle

This nifty tool allows me to edit CSS live in Google Chrome. When I edit a CSS property, it automatically saves the changes in the .css file, and I can also edit the CSS?file in my editor and see the changes happen in real-time in the browser. Read more about the extension here.

Wordpress Style Editor

When I have a quick fix that I need to apply to a website, I use the "WordPress Style Editor." This nifty Chrome extension allows me to save changes directly to the WordPress theme's style.css file (if I am logged in as an admin).

Check out the extension here.

Online Tools and Services

Trello

I have tons of things to keep track of, so I use Trello (referral link) to help with that. Don't get me wrong; I still use the pen and paper method when doing meetings or the "7 different tiny notes on a PostIT technique". I try to add tasks there and organize them. I use a 5-column system for that, from left to right regarding priority.

• The first column contains ideas or planned projects that I note down and then push forward when it gets time to work on them. I named this "Future."
• The second column is "Coming up." At this stage, I am checking up on the different cards and making sure I am prepared or have sent the necessary information, so I am ready to handle them when they go to the next column.
• The third is named "TO DO" - These are lower priority tasks that I get to when I take a break from the currently active projects in the next column.
• The fourth column is "In Progress." Each card I need to work on today or as soon as possible. Sometimes this gets pretty long, and I try to finish as quickly as possible or at least to make some progress as often as I can.
• The?fifth and last column is where I keep the cards which I have finished. It helps motivate me to make sure I push as many of them as possible to the fifth and last column, so it's not empty. And yes, it makes me happy to move them to that column 🙂 I archive all cards in this every couple of days.

Email Signature

It is important to look professional in your communication, and having a nice looking email signature helps your branding as well. I have tried several different ways over the years to create e-mail signature, but nothing has been quite as easy as this tool made by Exclaimer:?http://free-email-signature.exclaimer.com/

Email stuff

Speaking of email, a great place to check and fix email deliverability problems or other email related technical difficulties visit emailstuff.org -?EmailStuff is a set of online tools that might be useful for people working with email.

GitHub and Bitbucket

I use GitHub and Bitbucket for all my git needs. The excellent GitHub Mac application I mentioned before works fine with Bitbucket as well.

Bitbucket is free for teams of fever than five people (you have to pay for bigger teams), and all code is private.?Github is free, but all code is open unless you pay for a premium account to keep your work secret.

deploybot.com

deploybot.com is an automated deployment service, making it easy for me to commit a bunch of code changes to a git repository, and then the changes are updated on the server for me within seconds.

It is fast and easy to work with. Instead of manually updating files via FTP or SSH, I can just move on to the next task. They even offer a way to make updates run?manually or automatically every time I make a commit and even only listen to changes on specific branches.

This saves me many minutes of work every day.

BrowserStack

As any web developer knows, not all browsers are created equally. There are a plethora of browsers for different operating systems, and each browser version has different quirks that need to be addressed when we develop.

The fastest way I have found is to use the BrowserStack tool that makes it fast to switch between different operating systems and browser versions with a few clicks. Each browser have developer tools activated so you can quickly dive into the code and see what goes wrong in the particular browser.

Testing for speed and optimization

Pingdom has an excellent and useful performance testing tool on tools.pingdom.com for testing performance of websites.

gtmetrix.com does the same but also has more information in some areas.

Pagespeed Insights - Always nice to get Google's opinion on things 🙂

When testing I use all three and combine the information.

Google's Structured Data Testing?Tool - ?Again, Google gives us a nice way to test the rich meta and structured data embedded on a page.

Knowem has also created a helpful tool Social Media Optimizer on smo.knowem.com.

WordPress Plugins

If you are looking for recommendations for WordPress plugins, I also have?a list of the coolest plugins that I use for developing WordPress sites.

External stuff

Proxies

For gathering a large amount of data, which you do often when you work with SEO, you need quality proxies, and the best I have found - at an affordable price - is Proxy-Hub (affiliate link).

Although I only had to contact their support a few times, every time they have been fast and friendly.

Business Cards

I rarely pass out business cards, I do business mostly by word-of-mouth, and more or less all my clients are referred to me. However, it is always nice to have a card or two when you meet someone unexpectedly.

I do not want to have a wallet and card holder to carry around, so instead, I just keep a few small MiniCards from Moo in my wallet. They are about the half size a typical business card, looks very fresh and it is very easy to create a unique and professional design with Moo's online editor in no time.

I always recommend Moo for business cards, and here is my referral link if you want to check them out yourself: www.moo.com/share/zhs5qg.