Web designers and developers deserve the best in order to increase their work efficiency and quality. Over the years, I have built a pretty long list of interesting and useful apps and extensions that I utilize on the daily basis.
If you’re a fellow web designer or developer, then this article is for you. I hope it helps your work flow as it has helped mine.
This is currently my go-to code editor. I used to be a huge fan of Coda (and still am really), but Sublime Text is just so much faster and easier to work with. That’s not to say Coda doesn’t have its place on my machine.
I still use Coda as FTP management software and whenever I need to make quick changes live on the server. However, for serious coding, Sublime Text makes it more enjoyable to code.
The next best thing after Sublime Text is Coda. Coda is still a fantastic piece of software that allows you to work efficiently in a neat environment.
If you’re moving from Windows to Mac, the first impressions of Coda will give you a wow factor. It is designed to look GOOD. You simply cannot have that type of experience on a Windows or Linux machine.
Code Runner for PHP is only if you do any serious PHP development. It basically let’s you execute PHP code on the fly without needing to save files or run them on a local or remote server.
It is super handy when you need to test specific snippets of code, because you can perfect it in Code Runner before moving it to your development environment for further testing.
When you need to grab a quick color off any website or graphic, ColorSnapper will be the perfect choice for that. You can get any color from anywhere on your screen and get the hex color in a split second.
Not only can you initiate it from your menu bar, but you can also start it up with a shortcut option + command + C.
Everyone has been in a situation where they need to copy or save live websites quickly. I’ve had many clients that had websites but surprisingly no access to their hosting so there was no way to get the website source.
SiteSucker allows you to quickly fetch and save an entire website (recursively too) so that you can have all resources including HTML, CSS, JS, and images and can then run it locally.
It won’t look pretty, but it gets the job done.
Google Chrome Extensions
Similar to the ColorSnapper for getting the color, WhatFont allows you to quickly see what font a website is using. In addition, it will also tell you the weight, line-height and color of the font.
If the font is using a hosted web-font option, it will also tell you where that is coming from, such as TypeKit.
Window Resizer is exactly what it sounds like. It allows you to quickly resize the browser window to a selected window size. You can even add custom window sizes for future uses.
So anytime you want to see how it looks in a mobile-sized view port or specific resolution size, you can just select the size and it’s done. No need to manually resize the browser to try to emulate what the phone size might be.
If you have to test how a website responds to specific devices, you could try switching the User-Agent. Some websites utilize the User-Agent value to determine if it’s a mobile device and what kind of device it is.
So if your website displays different content for iPhone and Android users, you can emulate the User-Agent value to see exactly what each type of user will see.
This extension will quickly tell you what Google tags are implemented on the current page. For someone that constantly needs to add Google Analytics tracking scripts, Adwords conversion codes, and other Google JS scripts, it will come in handy.
Sure you could always view the page source and search for the tag, but this is a much faster way.
And finally, the ColorZilla extension. Although it was primarily made to pick colors off the page, we don’t really need it for that because the ColorSnapper app does a much better job at that.
However, ColorZilla has an awesome CSS gradient generator, which I use quite often. So do you really need this extension? Not really, but it can be handy if you do not currently have any quick way to pick colors off web pages.