Handy Apps for Web Developers

It seems the days of opening up and developing a website solely with a text editor are long gone. Thankfully, today we are privileged to have access to so many amazing applications to help us develop better products.

Even though having the perfect toolbox seems like an elusive myth, the apps listed below have become a core part of my workflow and have been for quite some time. If you haven’t heard of them before, I highly encourage you to check them out if they fill a gap in your existing set up. I use all these apps on all of my projects, some on a daily basis, some whilst working on a particular part of a project. Each have their own unique tasks and each are a delight to use.

If you have any apps which you couldn’t live without, be sure to drop a link in the comments.


Day-to-day Development

CodeKit

There are a few other apps out on the market that do a very similar thing but CodeKit seems to be more reliable and has a nicer UI. It compiles everything, it does live browser reloads, it combines and minifies, it optimises images and lots more. Also Brian Jones, the developer, is very active in squashing any bugs and making it more awesome.

ColorSnapper

ColorSnapper is an easy-to-use tool for quickly finding out the colour of any pixel on the screen.

ImageOptim

Serving the smallest images possible is key to speeding up your site and giving your user a better experience. ImageOptim helps squeeze the juice out of them by removing all the unnecessary comments and colour profiles.

xScope

xScope is a powerful set of tools that are ideal for measuring, inspecting and testing on-screen graphics and layouts.

Gradient

Gradient streamlines the creation of CSS3 Gradients. It is a simple yet powerful tool to help you get rid of the clumsiness of ALL vendor prefixes.

Skala Preview

Skala Preview sends lossless, colour accurate image previews to any iOS device. Previews are pixel perfect. Colours are identical to how the final app or website will look on the device.

Slicy

Formaly known as Layer Cake. If you design at 1x but need high-res artwork, Slicy can enlarge your vectors and layer styles to build a high-quality 2x version. Making retina graphics is now easier than ever.


Screenshots

Skitch

Screen capture, crop, resize, sketch then share your ideas to get your point across fast. Use Skitch to give feedback on designs, point out something in a photo, take a screenshot of inspiration, draw an image from scratch, communicate bugs and issues and so much more.


Sharing

CloudApp

CloudApp is simple file and link sharing for the Mac. It allows you to share images, links, music, videos and files.

Dropbox

No real explanation needed for this one. Dropbox is awesome. It’s a free service (depends on storage size) that lets you bring your photos, docs and videos anywhere and share them easily.


Screencasts

Screeny

Screeny makes screen capturing easy and gives you the freedom to capture your videos or images at any size. It’s also very well priced.


Notes and Ideas

Simple Note

Simple Note is an easy way to keep notes, lists, ideas and more. Keep notes on the web, your mobile device and your computer.


File management

Cornerstone

Cornerstone is a version control app built on subversion that makes version control easier than ever.

Tower

Tower is a super nice and powerful Git client for the Mac. It also has great integration with Beanstalk, which is super handy.

BeanStalk

Instantly deploy or rollback updates to multiple servers for testing and production releases.


Local Development

Mamp

MAMP installs a local server environment in a matter of seconds on your Mac OS X computer. Great for WordPress development.


Mobile/Tablet Development

Adobe Shadow

Adobe Shadow is an inspection and preview tool that allows developers and designers to streamline the preview process, making it easier to develop for the mobile space.


Code Sharing Tools

CodePen

CodePen is all about front end code inspiration and education through sharing. In the editor, enter HTML, CSS and JavaScript and the combined result is displayed below. Save your Pen, share it and explore others. This is extremely useful for showing off your work, troubleshooting and demonstrating bugs.


Misc

Alfred

Increase your productivity by launching apps with shortcuts. I couldn’t imagine driving a computer without this anymore. Awesome app!

1Password

Have you ever forgotten a password? 1Password can create strong, unique passwords for you, remember them and restore them, all directly in your web browser.

TextExpander

Save time and effort with TextExpander! Whether it’s a simple email signature or several paragraphs of a standard response, you’ll love how easy it is to use TextExpander to avoid typing the same thing over and over.

Things

There are a lot of ‘Getting Things Done’ apps on the market. Things is my weapon of choice.

iA Writer

Need to knuckle down and write? iA Writer hits the spot. Super clean interface, powerful shortcuts, markdown supported and lots more.


A Few Last Words

The apps listed above have become my weapons of choice, which might not be yours.

During the last few years, the amount of tools and apps on the market have really exploded. We have all become obsessed to some degree to use the lastest and greatest. What I would recommend is pick a tool that fills a gap in your development workflow and take the time to really learn it. Adjust the default settings, learn the shortcuts and explore it to its full potential.

Then, when a new app / tool comes to your attention and all the cool kids are talking about it, use you own common sense to see if you really need it. If it does fill some gaps (or replaces existing tools) and makes things easier then by all means you’d be silly not to incorporate it into your workflow. But if all is good, you are probably best to continue with the way you are working. If you are constantly looking for the latest, greatest tools to help you work, that work will probably never get done.

2 Comments

  1. The most amazing time-saving tool I’ve found in recent times is “CSS Updater”. Here’s what it does: you edit your CSS in Firebug in the normal way. As you make your edits, you’ll notice that CSS Updater is seeing all the changes you’re making because it knows how to listen to FireBug. When you’re happy with your edits, one click updates your CSS file, because you’ve already told it where the files are. This tool bridges a wide gap in the current workflow, and as such saves me up to hours a day of tedious work.

    • That sounds like an awesome tool Larry!

      I am a Chrome developer at present, but will have to check it out. Hopefully in the not too distant future we will see this kinda of functionality ship with the latest browser builds.

Comments are closed.

This post currently has 2 responses. What do you think?

You can use basic HTML when posting code, please turn all < characters into &lt; or > into &gt;
If the code is multi-line, use <pre><code></code></pre>