![\"wunderlist\"](\"https:\/\/guwii.com\/wp-content\/uploads\/2013\/08\/wunderlist1-229x300.png\")
\nWunderlist 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.<\/p>\n
Here’s the top apps I believe web developers\/designers should try at least once, for me, they’re used every day.<\/p>\n
\nWunderlist 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.<\/p>\n
![\"ShowHide](\"https:\/\/guwii.com\/wp-content\/uploads\/2013\/08\/ShowHide-Hidden-300x149.png\")
\nMany items on your Mac as a web developer\/designer will be “hidden” files, this little app, created here at guwii, 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!<\/p>\n
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.<\/p>\n 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!<\/p>\n 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.<\/p>\n Easiest way is to save it to a memorable shortcut, for myself its: ![\"Chrome](\"https:\/\/guwii.com\/wp-content\/uploads\/2013\/08\/Chrome-Canary-Logo.png\"){kind=logo}
\nChrome 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<\/a> allows you to keep track of the change log.<\/p>\n\n\tGet it: Chrome Canary<\/a>
\n\tPrice: Free!\n<\/div>\n
\nSourceTree<\/h3>\n
![\"SourceTree\"](\"https:\/\/guwii.com\/wp-content\/uploads\/2013\/08\/SourceTree-1024x703.png\")
\nSourceTree 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<\/strong> I’ve found.<\/p>\n\n\tGet it: SourceTree<\/a>
\n\tPrice: Free!\n<\/div>\n
\nMAMP<\/h3>\n
![\"mamp_home\"](\"https:\/\/guwii.com\/wp-content\/uploads\/2013\/08\/mamp_home.gif\")
\nA 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.<\/p>\n\n\tGet it: MAMP<\/a>
\n\tPrice: Free! (Optional paid version for extra features – worth it!).<\/em>\n<\/div>\n
\nSublime Text<\/h3>\n
![\"Sublime](\"https:\/\/guwii.com\/wp-content\/uploads\/2013\/08\/Sublime-Text-1024x630.png\")
\nSublime 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.
\nCheck out the Best Sublime Text Packages and Setup<\/a> written here for some tips on the best packages and settings to use.<\/p>\n\n\tGet it: Sublime Text<\/a>
\n\tPrice: $70 (Unlimited Trial is available, but such an awesome piece of software deserves your money!)<\/em>\n<\/div>\n
\nGhostLab<\/h3>\n
![\"ghostlab\"](\"https:\/\/guwii.com\/wp-content\/uploads\/2013\/08\/ghostlab.jpg\")
\nEasily browse your website on multiple devices, checking for consistency and ease of use.<\/p>\n\n\tGet it: Ghost Lab<\/a>
\n\tPrice: $49 (7 Day free trial)<\/em>\n<\/div>\n
\nSequel Pro<\/h3>\n
![\"Sequel](\"https:\/\/guwii.com\/wp-content\/uploads\/2013\/08\/Sequel-Pro-1024x719.png\")
\nYou 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!<\/p>\n\n\tGet it: Sequel Pro<\/a>
\n\tPrice: Free!\n<\/div>\n
\nCodeKit<\/h3>\n
![\"codekit\"](\"https:\/\/guwii.com\/wp-content\/uploads\/2013\/08\/codekit.png\")
\nThis app is a godsend, it has a lot of nice features for web developers and some extra ones for web designers too. Key Features:<\/p>\n\n
\n\tGet it: CodeKit<\/a>
\n\tPrice: $25\n<\/div>\n
\nFranke DeLoupe<\/h3>\n
![\"franke-de-loupe\"](\"https:\/\/guwii.com\/wp-content\/uploads\/2013\/08\/franke-de-loupe-293x300.png\")
\nColour 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.<\/p>\ncmd, alt + f<\/code>
\n![\"franke-de-loupe-picker\"](\"https:\/\/guwii.com\/wp-content\/uploads\/2013\/08\/franke-de-loupe-picker-300x201.png\")
\nIt 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.
\n\ufffc
\nYou 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.<\/p>\n\n\tGet it: Franke DeLoupe<\/a>
\n\tPrice: $0.99\n<\/div>\n
\nIntegrity<\/h3>\n
![\"Integrity\"](\"https:\/\/guwii.com\/wp-content\/uploads\/2013\/08\/Integrity-1024x650.png\")
\nCheck 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.
\nVery useful if you change CMS, take on a new clients existing website, or just want to perform some spring cleaning on your own sites!<\/p>\n\n\tGet it: Integrity<\/a>
\n\tPrice: Free \/ \u00a31.49 on App Store\n<\/div>\n
\nXcode\/iOS simulator<\/h3>\n
![\"TrulyCode](\"https:\/\/guwii.com\/wp-content\/uploads\/2013\/08\/TrulyCode-iOS-Simulator-148x300.png\")
\nXcode 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<\/strong> as well as the touch functionality<\/strong> of the website.<\/p>\n\n\tGet it: Xcode<\/a>
\n\tPrice: Free!\n<\/div>\n
\nDropBox<\/h3>\n
![\"dropbox-logo\"](\"https:\/\/guwii.com\/wp-content\/uploads\/2013\/08\/dropbox-logo.png\"){kind=logo}
\nSync 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.<\/p>\n\n\tGet it: Drop Box<\/a>
\n\tPrice: Free (with optional plans for extra space)<\/em>\n<\/div>\n
\nMixture<\/h3>\n
![\"mixture\"](\"https:\/\/guwii.com\/wp-content\/uploads\/2013\/08\/mixture.jpg\")
\nMixture 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!
\nChoose 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.
\nAlready it does: Preprocessing, Minification, Concatenation & Optimisation \/ Live Refresh & Style injection.<\/p>\n\n\tGet it: Mixture<\/a>
\n\tPrice: Free!\n<\/div>\n
\nScssRename<\/h3>\n
![\"scss-rename-animation\"](\"https:\/\/guwii.com\/wp-content\/uploads\/2013\/05\/scss-rename-animation.gif\")
\nScssRename is another app created here at guwii. 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 “_<\/strong>stylesheet.scss<\/strong>“, which then can be imported by your master SCSS stylesheet.<\/p>\n
![\"coda2\"](\"https:\/\/guwii.com\/wp-content\/uploads\/2013\/08\/coda2-1024x640.jpg\")