Your browser is not supported.

CSS tips and tricks
If most of my standards references are found at W3Schools, then most of my CSS tips and tricks references can be found at A List Apart, the best webzine on the industry out there. INJMHO^*. Their design articles and how-tos specialize in clean, reusable and maintainable code, and are usually what I go to first when I want to make sure I’m not reinventing the wheel.

Speaking of reinventing the wheel, my three favorite tutorials from ALA are on three of the most common UI elements: multi-column layouts, tabbed interfaces, and CSS-mostly drop-down menus:

• In search of the Holy Grail, an excellent how-to for making a three-column layout with two fixed sidebars and a liquid center. Update 2007-03-07 14:03—Published recently on ALA, here’s another way of making a multi-column layout with equal height columns.
• Sliding doors, a discussion on how to use the sliding doors technique to make dynamically sized tabs.
• Suckerfish dropdowns, a great way to make (almost^**) entirely CSS-driven dropdown menus.
• Update 2008-06-20 11:04—Conflicting absolute positions is an elegant Javascript-less technique to make a multi-column layout that needs to take up the full browser window.

Everything else is more or less kid stuff, so I’m not linking it here.

Next up: Making your site work in IE.

^* In Not Just My Humble Opinion.

^** Almost because IE doesn’t support the :hover pseudo-class on anything but <a> tags.

The standards
OK, now we’ve got that tools discussion out of the way, let’s get down to the meat and potatoes of our discussion; that is, the standards. If you do web development for any length of time, you’ll, whether you like it or not, become intimately familiar with the HTML, XHTML and CSS standards. But no matter how familiar you become, you’ll need to, at some point, refer back to them. So we come to the most important weapon in my arsenal: my reference library.

While I have a few books, the bulk of my reference library consists of bookmarks. Let’s start with the ones pertaining to the standards:

• W3C HTML 4.01 Specification: None of the W3C’s specs are the easiest things to read, but when you really need to understand the desired behavior of a content or presentation element, this is where you have to come. So while these specifications are the foundations of the web, they’re usually my last line of defense; I find that you have to have a pretty good understanding of how the technology works in practice first before you come here with detailed questions of how it should work.
• W3C XHTML 1.0 Specification
• W3C CSS 2.1 Specification

If those are my last line of defense, here’s my first one: the quick reference guides.

• HTML 4.01/XHTML 1.0 reference
• CSS2 reference
• Here’s another CSS 2.1 reference, linked because it’s got a great interface.
• JavaScript and HTML DOM references: Of course, you won’t get very far with just XHTML/CSS. At some point you’ll have a need to do something a little more complicated, and that’s where JavaScript and the HTML DOM come in.

OK, you say, but say you’re not like me, and you don’t do this stuff for a living? Say you need more than a quick reference guide. How does one learn? I’m a firm believer that I, at least, learn best by doing. And the best way to do that is to follow a tutorial. Here are some of my favorites:

• HTML and XHTML tutorials
• CSS tutorial 1 and CSS tutorial 2: The first one is a quick, no-nonsense way to learn, but the latter is my favorite, because you have a practical goal to work toward.

Finally, now that we’ve learned how to do it, here’s a convenient way of making sure we did the work right:

• W3C Markup Validation Service: A great way of checking that the markup you wrote conforms to the standards.
• W3C CSS Validation Service: Likewise for CSS.

Next up: tips and tricks.

Browsers and browser-plugins
First, let me explain a bit of my strategy. As I said, I code to the standards and then hack for browser compatibility. My first line of defense is Safari/Firefox, and once I have my styles/layout working in both of those, I move on to IE6. I am not supporting IE7 at this time, because our clients run mostly IE6 and have no immediate plans to upgrade.

The browsers alone are not enough, though. Each needs some kind of enhancement or companion tool to help me debug my CSS code.

• Safari + XyleScope: Safari you know about, and XyleScope, you probably don’t. The latter is the only application of its kind out there, and I really wish it wasn’t; I wish there were versions of it for every browser and every operating system. What it does is use the Safari rendering engine to render any URL you give it, and dissects the styles used in every component. The killer part of this app is that you can select any item on the page by clicking on it, and XyleScope will give you the complete breakdown of styles that apply to it (and most importantly, in which order), its place in the markup hierarchy, and a graphical representation of its box model rendering, the last of which is sometimes priceless. I’d love love love to get a tool like this for IE, the browser with the most weird box model-related rendering bugs, but there just isn’t one that does that for me (more on this later).

  XyleScope does have some shortcomings, though. One is that it only uses the Safari rendering engine, which gives it limited usefulness when testing cross-browser compatibility. The second—and crucial—one is that it doesn’t deal with generated elements very well. So when I’m testing with my webapp running, and much of the content is generated by my server-side code, XyleScope gives up.

• Which is mostly the reason that I use WebKit, the open-source, next-generation, beta version of Safari. It’s got two important advantages over Safari, the first being that it lets you style form elements, which Safari does not (which blows). Secondly, it’s got this awesome (seriously, I can’t say enough about it) “inspect element” feature that will inspect any element in your final page, and give you all the goods on it, from place in the markup hierarchy, final computed style, and a listing, like XyleScope’s, of what styles from your stylesheet apply and in which order. On top of that, it’s got a lovely clean interface that is a pleasure to use (except for the obnoxious scrollbar behavior in the markup hierarchy section, but I’m hoping that’ll be fixed soon).
• Firefox + FireBug: Firefox is my control group. Besides Safari/Webkit, it’s probably the best widely-used browser with regard to standards support. If my site works in Firefox, it’ll (mostly) work in every other browser. As I said, debugging is crucial to my work, so I use the immensely useful FireBug plugin to help me inspect generated elements when testing. Feature-wise, it’s almost identical to the inspect element functionality in WebKit, but it’s a little less stable and doesn’t have as nice of a UI; and really, you can say the same of Firefox in general in comparison to Safari/WebKit. That said, FireBug is an invaluable debugging tool.
• Last but unfortunately not least, Internet Explorer and the IE developer toolbar: IE6. What can I say? Like any other web developer who has ever tried to program for it, I hate it. But most of my users use it, so what can I do? Since most of my debugging takes place in IE6, it was vital that I had some sort of debugging tool, because XyleScope isn’t available for Windows. Enter the IE developer toolbar. Much like the inspect feature in WebKit and FireBug for Firefox, this helps you select elements on your rendered page and inspects them, HTML, CSS and all. My very favorite part of this is the tool that allows you to size your window to any of a set of common resolutions, so you can see just how much your users can see, and design accordingly. I couldn’t live without this, as it makes my job that much easier.

Graphics
Anyone who works with graphics, photo or video knows it’s difficult (though not impossible) to get accurate color representation out of an LCD monitor. And since it’s impractical to lug a CRT around with you wherever you go, what are you to do? Calibrate your LCD monitor, of course. There are lots of solutions out there, but relatively few that don’t require guesswork (reduce contrast until the white box just disappears into the background): MonacoOPTIX is one of them. With a colorimeter included, it gives you consistent results without the guessing, a big plus in my book. 

Here’s a big surprise: Adobe Creative Suite 2, though what I should really be saying is PhotoShop. Illustrator is not, and never has been, my favorite vector program. Nevertheless, I do use it on occasion, because I’m not about to shell out another few hundred for CorelDRAW when I’ve already paid so much for the Adobe product. Back to the subject, viz, PhotoShop. I’ve said before that it’s the only decent piece of software Adobe produces, and I’ll say it again here. As user-unfriendly as it is, there’s nothing else on the market that comes close in power and versatility.

For my flowcharting and UI wireframe needs, I use OmniGraffle Pro. It has a bit of a clunky interface, but it gets the job done. I especially like the symmetry markers that pop up to help you position elements.

I’ve already talked about the OS, so I’ll start my software discussion with what goes on top.

The basics
Let’s start with the basic tool that any programmer needs: the text editor. And don’t give me this crap about IDEs like Dreamweaver and Visual Studio. Real men use text editors. Now, you’d think that for something as basic as a text editor, someone would have come up with the be-all end-all solution for programmers long ago. Not so. Until I discovered the one I use now, I had been on a years-long, seemingly endless search for a development-oriented text editor that met my needs: customizable syntax highlighting with a bunch of languages built-in, line numbers, tab/space conversion, line ending selection, modest autocomplete abilities, the ability to manage many files at once easily in a folder-tree, etc., etc. And until last year, my search had been fruitless; I kept finding something that was close enough, but not quite.

Now, though, I use what has to be the best programmer’s text editor ever: TextMate. It’s got a ton of great features, but the ones I care about most is that it’s easy to use and powerful at the same time; I can manage many files at once with almost no effort, and the endlessly customizable keyboard shortcut system TextMate includes makes my programming experience infinitely less tedious. For example, there’s a keyboard shortcut to automatically close the HTML/XML tag you’re writing, and that is priceless for someone who writes as much markup as I do. There’re keyboard shortcuts to open any file in my project, to reveal it in the folder tree, to preview it in a browser, etc. You have to use it to believe it, but believe me when I say that those €39 are probably the best money I ever spent on a piece of software.

I use another text editor (though I don’t really have to) for my non-development tasks, to manage lists and notes, etc.: Bare Bones’ TextWrangler. It’s easy to use (mostly; see below) and the price is right (it’s free), which is a marked improvement over their $125 (I am not kidding) behemoth, BBEdit. Now, I am usually not averse to spending money on software if I think it’s going to be useful to me (see above note about TextMate), but $125?! I don’t care how fully featured it is, I can’t see myself spending more than $100 to edit text. Besides which, have you ever seen the preferences panels for any Bare Bones software (including TextWrangler)? Two words describe them: huge and confusing. They’re not that easy to use.

Oh! I almost forgot. Let me take a step back to something even more basic: the power user’s best friend. I’m talking about QuickSilver. It’s an extensible keyboard-based navigation system for your applications, bookmarks, emails and contacts. What does that mean? It means that you can, using only your keyboard, open any application, contact, bookmark or email, and what’s more, do a number of preconfigured tasks (like sending an email or IM to one of your contacts without explicitly opening your mail, IM and addressbook applications first). I hear what you’re saying: “You can do that with Spotlight, hotshot,”. Well, yes and no. You can find contacts and files and applications using Spotlight, yes, but doing something other than finding them is a bit difficult and involves more keypresses or mouse clicks. So while finding a contact is easy in Spotlight, you can’t configure it to automatically start an email to that person when you click enter, whereas with QuickSilver you can. The software is in beta now, and I’m so hooked on it that I’ll probably pay any price to have continued use of it once it goes into production. Which wasn’t, probably, a smart thing to say in public.

This is the first in a series of posts talking about what I do for a living (web development, for those who don’t know) and the tools I use to help me do it. Not that any of you will particularly care, but it’s also (especially in the later posts) going to help me keep track of tips and tricks I’ve discovered along the way.

First things first: hardware. My development machine is a 2.16 GHz Core 2 Duo MacBook Pro with 2 GB of RAM. A lot of power in a small package.

Why a Mac? Because—and this is not really hardware related—it’s running, like, the best OS evar. In my mind, Mac OS X is a developer’s dream. It’s UNIX-based, so you can set it up (though not, it should be noted, easily) as a self-contained test environment, with any web server and technology you desire. What’s more, it comes installed with most of the technologies you’ll need: Apache, Java, Python, Ruby. So while you can (also not easily) set up a PC to do the same thing, having a Mac makes your job that much easier. Not to mention that its command-line interface is so much better than DOS, out of the box. Any developer using a PC with Windows will have to install cygwin out of self-preservation, just to get anything done.

Secondly, and this is again software-related, it’s to do with what browsers you program for. Now, I know that like 102.6% of internet users use Internet Explorer, but IE is notoriously lacking on web standards support. So what does a good programmer do? A good programmer programs to the standards, and makes hacks later so it’ll work in IE. That means that you program to make your site/web app work in Safari and FireFox first.

Thirdly—again, software—I’m a web developer, which means that I care about good user interface design. And some of the best, easy to use and powerful development software out there is programmed for Mac OS. More on this later.

Why a MacBook Pro specifically? Because, since as I mentioned I need to support all browsers, I can run Windows natively (instead of in emulation as I was doing with my PowerBook) so I can easily test my work in Safari, WebKit, FireFox and Internet Explorer at the same time. 

Registration for Google Code Jam 2006 begins today. Are you ultimate enough? Well, are ya…punk? (Via Slashdot)

I can’t believe Rails doesn’t support this. They need to add functionality to ActiveRecord supporting SQL set and enum types. It’s just stupid that they don’t.

Update 2006/03/09 08:43: Apparently this is a new feature in Rails 1.1, which is to be released very shortly, but I can’t confirm this, since the blog post that was written about the new features in 1.1, which everyone links to, is down.

a few weeks: I bought my copy of TextMate this morning. It’s not that SEE is bad at all, it’s just that TextMate has a vast array of tools for the programmer; everything, in fact, that I am looking for in a text editor.

• Block editing
• A file tree to enable you to switch quickly between multiple files
• Files can be opened either in tabs or new windows
• Search and replace across multiple files
• Intelligent, customizable syntax highlighting
• Line numbering
• Capability to collapse blocks
• Popup symbol menu to quickly navigate between functions in a large file
• Bracket and quote auto-pairing
• Columnar selection

This is kind of a big thing for me; I have never before found a text editor that didn’t have at least one thing I didn’t like about it or thought was missing. Really. Those guys did a great job.

A way to install Typo, the Rails-based blogging software, as an engine or plugin. This could be pretty tough to pull off, though, because currently Typo is packaged as a standalone Rails app. But wouldn’t it be cool to build a Rails app and be able to drop in full, Rails-integrated blog functionality with only a little effort?