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.

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.

// 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();

Log in or sign up? – Leah Culvers Blog.

Structure

1. Reset
I could as well link one of the many reset.css style sheets, but to save on server requests, I’ve decided to put the reset styles on the top of my main CSS file.

2. Base
The html, body and defaults for other basic html elements go here. This section is usually pretty minimal, because I like to style elements as they come along in the source. That way I have more control over the styles and less overriding to do later on.

3. Structure
You might opt to let this section go, depending on whether you like to separate the container divs from other styles or not.

4. Header
The definitions for styling the header of your site go here.

5. Content
The definitions for styling the content section of your site go here.

6. Footer
The definitions for styling the footer of your site go here and again you might skip this section if your site has no footer.

7. Navigation
The various menus, breadcrumbs indicator, etc.

8. Modules
I use this section to define the separate modules or blocks used on my site. News, polls, events lists, flickr feeds, quick links, and similar sections are usually defined here.

9. Forms
I like to put all the forms in one place, this proved to be a wise decision over time.

10. Custom Classes
I put here various reusable classes that are frequently shared throughout the site. You might not need this section if your site is a simple one, but when it grows too complex, you might find this section handy.

11. Everything Else
All that you can’t fit anywhere above. Usually this section only ends up only having a few classes.

12. Print Styles
If you don’t store your print styles in a separate file, this is the place to define them with a @media print block. You should put this section as the last one, as you potentially want to override any previous CSS declaration.

Sample

Here is some code from a sample style file. I’ve omitted most of the code for simplicity sake, but I’ve left section and sub-section comments in.

/*
 *  Table Of Sections
 *
 *  1. Reset
 *  2. Basic Elements
 *  3. Generic Classes
 *  4. Basic Layout
 *  5. Header
 *  6. Content
 *  7. Sidebar
 *  8. Footer
 *  9. Navigation
 * 10. Forms
 * 11. Modules
 * 12. Print styles
 *
 */

/* Reset  - do NOT modify!
-------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q {	quotes: none; }

/* remember to define focus styles! */
:focus { outline: 0; }

/* remember to highlight inserts somehow! */
ins { text-decoration: none; }
del { text-decoration: line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Basic Elements
-------------------------------------*/
html, body { height: 100%; }

body {
	font-family: helvetica, arial, sans-serif;
	font-size: 62.5%; /* 1em = 10px */
	line-height: 1.5em;
	color: #333;
	background: gray;
}

/* Generic Classes
-------------------------------------*/
/* --- Link list --- */
/* --- News list --- */
/* --- Attachments list --- */
/* --- Links --- */
/* --- Messages --- */
/* --- photo frame & content photos --- */
/* --- Other --- */

/* Basic Layout
-------------------------------------*/

/* Header
-------------------------------------*/

/* Content
-------------------------------------*/
/* external link */
/* --- video --- */
/* --- unsorted list --- */
/* --- numbered list --- */
/* --- tables --- */
/* --- Icons in content --- */
/* --- Search results --- */
/* --- Photogallery --- */
/* --- News --- */

/* Sidebar
-------------------------------------*/

/* Footer
-------------------------------------*/

/* Navigation
-------------------------------------*/
/* --- Breadcrumbs --- */
/* --- Sitemap --- */
/* --- Main Menu --- */

/* Forms
-------------------------------------*/

/* Modules
-------------------------------------*/
/* --- News --- */
/* --- FAQ --- */
/* --- Poll --- */
/* --- Quick links --- */

/* Print styles
-------------------------------------*/
@media print {

	/* Your print styles go here */

}

So, here it is – a nice organized layout for your CSS declarations. I hope you find it useful as much as I did and I’d love to hear from you if you have any comments or suggestions to improve this.

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

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.

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.