Top Mac Apps for Web Designers And Developers
Here’s the top apps I believe web developers/designers should try at least once, for me, they’re used everyday.
Wunderlist is my “To Do” app of choice, allowing me to keep track of the tiniest things to remember, to my largest projects. It syncs across all devices, so my iPhone, iPad, MacBook etc all have the same data.
Price: Free (With optional pro plan for added features).
Many items on your Mac as a web developer/designer will be “hidden” files, this little app, created here at TrulyCode, allows you to simply click it, and all hidden files, such as “.htaccess”, hidden “library” directory, etc, will all now be visible. Click it again to hide them once more!
Chrome Canary is the “Beta” version of Chrome, where all new features are released for testing and early access, before being ported to the official Chrome app, should they be deemed stable. Having Chrome Canary is essential in allowing yourself to test the latest web technologies and see what’s around the corner. This website allows you to keep track of the change log.
SourceTree is the best app I’ve found for use with Git or Mercurial based version control. Personally I use BitBucket so these 2 go hand-in-hand perfectly. Easily tracking changes to files and multiple repositories. It’s the best and easiest version control I’ve found.
A must for any web developer, the classic “Stack”, MAMP, which stands for: Mac, Apache, MySQL, PHP – allows the execution and running of a dynamic web system on your local machine, rather than just static. MAMP basically sets up a small server on your Mac, allowing PHP files to run, access to local databases and scripts.
Price: Free! (Optional paid version for extra features – worth it!).
Sublime Text has quickly became the leading code editor for web designers/developers, and for good reason. It’s super slick and clean interface, as well as extensive array of packages make it the go to editor.
Check out the Best Sublime Text Packages and Setup written here for some tips on the best packages and settings to use.
Price: $70 (Unlimited Trial is available, but such an awesome piece of software deserves your money!)
Easily browse your website on multiple devices, checking for consistency and ease of use.
This app sets up a local server you can connect to via a local IP, then from any device you can control and browse the site, and it will be reflected on all other connected devices.
No longer do you manually need to go to that contact form and test it works on your iPhone/iPad/laptop etc, just connect them all to the local site, start browsing and filling in the form on one and see it reflected straight away. Even scrolling is replicated across all devices!
Price: $49 (7 Day free trial)
You may be used to accessing your Database directly through PhpMyAdmin, which requires going through cPanel, logging in, etc. Sequel Pro is a true database client, allowing you to remotely connect to your databases directly. Within it you can carry out all the normal procedures, adding tables, changing data, running MySQL queries and much more, with a nice interface and reliable connection, definitely recommended, saves a lot of time!
This app is a godsend, it has a lot of nice features for web developers and some extra ones for web designers too. Key Features:
- Add SASS/Compass/LESS/HAML/Stylus etc etc, functionality to your projects
- Minify & concatenate your JS and CSS files, saving on both HTTP requests and size!
- Lossless-ly compress images, on average I save around 10% on the size of my projects by just compressing the images with CodeKit!
- LiveReload – automatically reloads your browser when you save a file, but doesn’t cuase it physically refresh, it actually injects the style/file changes, meaning you don’t have to scroll back to the same point in the page.
CodeKit was actually one of the main apps that brought me to using a Mac. Although all/most of these functionality’s are available through different software, I’ve found nothing else that combines them quite as elegantly as CodeKit.
Colour picking made easy, no longer do you need to screenshot, open in photoshop and then manually grab the colour. With this handy little app that just sits quietly in your menu bar you use the magnifying glass to pick the pixel colour.
Easiest way is to save it to a memorable shortcut, for myself its:
cmd, alt + f
It provides a nice handy magnifying tool to easy pick the correct pixel to colour pick. Once clicked, your colour code is then in your clipboard to paste.
You choose which format you prefer your colour codes to be saved in, either: RGB, RGBA, HEX(#), HEX (no #) HSL, HSLA, NSColor RGB, UIColor RGB, CGColor RGB, GLColor RGB.
Check for broken links, redirects and 404’s with this app. Over time you’ll be surprised how 404’s and bad links can pop up, this app crawls the whole website, checking all links as it goes for broken links.
Very useful if you change CMS, take on a new clients existing website, or just want to perform some spring cleaning on your own sites!
Price: Free / £1.49 on App Store
Xcode is of course a necessity if you develop for iOS devices (iPad/iPhone etc), however it does have some added features that make it worthwhile for web developers. The main bundle that it comes with is the “iOS simulator”, allowing you to browse websites and apps on a simulated iPhone/iPad. This allows to both test the responsive web design as well as the touch functionality of the website.
Sync your files across all your devices and keep them secure. DropBox will change the way you work, from acting as a backup, sharing, or to just a place to have access to your photos/documents from any device. It works like a charm and is the industry leader for good reason.
Price: Free (with optional plans for extra space)
Mixture is fairly new to the scene, but making huge waves. This app enables very quick prototyping and creation of static projects. A lot of it’s features are the same as CodeKit as previously mentioned, but for the moment they survive equally on their own merits, though I can see Mixture potentially pushing to the forefront of the all-in-one web toolbox!
Choose your project style, whether it’s a bootstrap setup, YAML or most other popular templating systems, it pulls directly from Git so you always have the latest version of the system.
Already it does: Preprocessing, Minification, Concatenation & Optimisation / Live Refresh & Style injection.
ScssRename is another app created here at TrulyCode. It’s used to convert old, multiple style sheet projects into a single output/stylesheet SCSS project. It automatically renames the old stylesheets to the correct convention of “_stylesheet.scss“, which then can be imported by your master SCSS stylesheet.
Coda 2 was at one point my go to editor and IDE, Sublime Text took over that, however I still find some features within Coda 2 worthwhile, namely it’s FTP and terminal options. Worth considering.