Scarf*oo

Like every trade needs its set of tools, so do we web developers. In this article I’ll present you – what in my experience are – the best web development applications available on Mac OS X.

Graphics Manipulation

The king of all graphic manipulation apps is Adobe Photoshop ($699 or $49/month). Its performance and features are simply way above anything else, but so is its price. If you can afford to buy it, definitely go for it, else there are some alternatives – much less powerful – but way easier on your wallet:

• Pixelmator ($23.99)
• Acorn ($49.99)
• The Gimp (free)

Also if you have Photoshop and you don’t do a lot of line art, you might probably do without Adobe Illustrator. I rarely use it by itself, but sometimes I use it for more complex vector art and conversion in conjunction with Photoshop.

File Transfer

Transmit ($34) – Probably the best commercial FTP application on the Mac.
Cyberduck (free) – A great alternative to Transmit, featuring a single-pane interface.

Text Editing

If Photoshop is the king of graphics manipulation, then Macromates’ TextMate is the king of text editing. Once you start using it, all other text editors look like toys. The features of this editor are simply to many to list here, so feel free to browse the product’s web site for more info.

Database Access And Manipulation

If you need to access (mysql) databases, you need a good tool to manage it. Navicat is just that. It is however, a bit expensive, and there are other free tools that do the job quite as well:

• Sequel Pro (free) – a fast and easy-to-use Mac database management application for working with MySQL databases.
• Querious ($29) – a native OS X application supporting viewing, searching, editing, importing, exporting, and structuring your MySQL databases.

Browsers & Plugins

My main development browser is Mozilla Firefox with the following plugins:

• Web developer toolbar – a toolbar that has it all
• Firebug – a great html/css debugging tool with live preview of changes
• ColorZilla – a color picker tool
• YSlow – a web page performance analyzer

For your IE debugging needs, you should probably go for a virtual machine that runs a version of windows with IE. I recommend spending your money on VMware Fusion ($79.99 – $99.99) or Parallels Desktop and install Windows XP, which comes preloaded with internet explorer version 6. You can then have separate installations with various other browser versions and run them as needed.

“An incredibly useful CSS3 feature when you’re creating columns with floats is box-sizing. It lets you choose which box sizing model to use – whether or not an element’s width and height include padding and border or not.”

Very useful indeed. Too bad IE7 does not support it natively.

More about this technique at Controlling width with CSS3 box-sizing | 456 Berea Street.

I must have needed this function a gazillion times and here it is. Basically you give it a number of objects and it sets them all as tall as the tallest one between them. Simple and effective, and it also takes into consideration any paddings, borders and margins your columns may have.

// make all columns equally high
$.fn.equalHeightColumns = function() {
	var tallest = 0;

	$(this).each(function() {
		if ($(this).outerHeight(true) > tallest) {
			tallest = $(this).outerHeight(true);
		}
	});

	$(this).each(function() {
		var diff = 0;
		diff = tallest - $(this).outerHeight(true);
		$(this).height($(this).height() + diff);
	});
};

// call it like this:
$(".columns").equalHeightColumns();

Now that IE6 is practically dead and gone, we can embrace the power that comes with CSS 2.1 selectors. Hurray! Forgotten CSS selectors | 456 Berea Street.

How about putting both log-in and register forms into one? A nice informative read.

Log in or sign up? – Leah Culvers Blog.

If you haven’t decided to drop IE6 support, this might be the right time to do it. The article CSS Differences in Internet Explorer 6, 7 and 8 over at Smashing Magazine is a great reference to CSS differences between various IE versions when handling advanced CSS rules. Looks like versions 7 and up already support the vast majority of rules you throw at them, so if you want to take advantage of advanced CSS selectors to ease styles development, go on, I don’t believe many will be hurt in the process.

Let’s face it, navigating and maintaining large CSS files is no fun. As long as the site is small or if you happen to be in the early stages of development, the CSS file looks manageable, but once you hit the 2k+ line mark, finding what you are looking for can take a while. Not to mention how your team is going to pollute your style.css if the file structure is overly complicated.
(more…)

David Berlow of The Font Bureau has proposed a Permissions Table for OpenType that can be implemented immediately to turn raw fonts into web fonts without any wrappers or other nonsense. If adopted, it will enable type designers to license their work for web use, and web designers to create pages that use real fonts via the CSS @font-face standard.

via Web Fonts Now, for real – Jeffrey Zeldman Presents The Daily Report.

Looks like the guys over at Typekit have found a way to legally provide us with a large library of fonts and a simple way of integrating them in our web pages. If this proves to be the truth and not a scam, I’m really wanting to know the details. As the authors put it:

As a Typekit user, you’ll have access to our library of high-quality fonts. Just add a line of JavaScript to your markup, tell us what fonts you want to use, and then craft your pages the way you always have. Except now you’ll be able to use real fonts. This really is going to change web design.

via Introducing Typekit « The Typekit Blog.

Too bad that there are still many clients running and demanding your product to run on IE6. At least in my case, 80% of the clients are of the aforementioned sort and I am in no position to change that. It’s a sad sad thing really.

Someone should really write a conditionally included universal CSS file to handle IE6 bugs and just be off with it. On the other hand, there are other approaches such as providing a universal readable and pleasant style just for IE6 users and hoping the clients will be happy with it.

Check the proposed style in question at Universal Internet Explorer 6 CSS | For A Beautiful Web.