Web Editors for Mac OS X - Taco

Some have asked what editor I use on the Mac and what I recommend they use. It really depends on how you work as a Web Designer. If you are familiar with html & css and perhaps even php then you'll most likely want to avoid those bloated web editing software packages with all the flashy front ends that are placed between you and the code. These web editing programs often add extra code that you don't necessarily want or need.

This is why most tecky web designers (is there really any other sort?) prefer to edit the code directly. There is TextEdit, basically the same as Notepad on Windows. Add the power of TextExpander and you have a powerful web editor.

Taco
But my favourite web editor is Taco. It has a live edit window so you can preview the results as you code. The Component Library allows you to select one of 22 components, which can be customised. It has code colouring, so you can see at a glance what code is what, a companant library, code clips, and more.

Go to the site, have a read, and download a demo version to try it out for yourself. It's only $25.

 Once you've created your website you'll need an FTP program and a reliable webhost, but that's for another post.

Colour Sucks

Another really useful tool for creating a colour scheme for your website.

Say you've got an image in mind for the front page of your new site. It'd be nice if the colour scheme of your new website matched. This tool will extract a range of colour schemes that you can choose from based on the colours sucked out of your photo.



Here are some tips from the author's website:

Drag and drop the color results: You can move the color results around the page, click on the color strip, hold and drag, let go to drop. You can also show and hide the color text by clicking the small grey dot next to the strip.

Flickr pages: If you enter a Flickr photo page (e.g. http://www.flickr.com/photos/bitterlysweet/33358201/) in the 'Enter image url' box, ColorSuckr will find the main photo.

Web pages: If you enter a web page url (e.g. http://abduzeedo.com/) instead of an image, ColorSuckr will scan the page and show you the images on it & you can choose from there.

Use color photos: Yes, this sounds silly, but black and white images will only return a few shades of grey.

Bookmarklet: Drag and drop this link - Get image colors - into your bookmarks bar or save it to your favourites and make getting colors from web images easy. Next time you are on a webpage with images you'd like to get colors from - just click the bookmark. (Works on images larger than 50px x 50px)

Colors that are picked: ColorSuckr chooses the 12 most common colours from an image, so if your image is mostly blue with a splash of pink, chances are the pink won't get picked up.

Install the Firefox add-on: Rather than messing about with copying and pasting urls, make it easier to grab colors from images by installing the add-on for Firefox.

* Editor's Note: The more observant of you would have noticed that I spelled "colour" the proper way, while the original article's author seems a bit confused over how to spell the word, sometimes spelling it "color" and other times "colour".

Free Download: 36 High Quality Fonts

A great boon to any web developer is a big swag full of fonts. A recent post at Instantshift showed us where we can grab lots of great design fonts for free.


From the post:

"Below you’ll find Collection of High-Quality Free Fonts to Enhance Your Designs by which you can save money and focus on making great applications.


The basic purpose behind this post is to show you Popular, Artistic and most importantly Free Downloadable font types to save your time searching them online. Direct download link available for the entire fonts.

You can also find some related free references at the end of the post. Just make sure to read the license agreements carefully as they can change from time to time."

Read the full post and download the fonts.


* Editor's note: "swag" is Australian slang for something you sleep in, these days a bit like a tent and sleeping bag combined. A "swag load" means as much as you can fit into a swag, which is a lot.