Tips and Tutorials Archives

If you’re a web developer or even a web designer, there are three Firefox add-ons that you probably already use. If not, get them now and consider this your first step into smart web development.

• Web Developer by Chris Pederick
• Firebug by Joe Hewitt
• YSlow by Yahoo! Inc.

Any other suggestions? What do you use?

Icons can make your website look super cool when used properly. My preference is to use icons that are exactly 16 pixels by 16 pixels. That’s just about the height of a line of text so the images line up well with words. I am a huge fan of Mark James’s “Silk” icon set that you can download for free from his website at famfamfam.com. Dan Cederholm also provides very nice icons for purchase at his Icon Shoppe. Go nuts.

Smashing Magazine has done it again, with an article that lists over eighty AJAX solutions that include widgets, tool sets, libraries, and effects. I know the list is a bit overwhelming, but if you’re a professional web programmer I recommend at least trying out 5-6 of the listed solutions. For a quick highlight list, just go to these sites. I’ve used these tools extensively and find them to be very useful:

• script.aculo.us
• Lightbox
• MooTools

Recently I have had the pleasure of working with a few new clients who have great website ideas, but no website yet. Naturally one of the first steps in the process is to pick a domain name. Unless you have a specific domain in mind (name of your existing company, proper noun, etc.) the options are endless. Sure, millions of domains have already been reserved by others, but there are still plenty of good ones out there to choose from. For checking the availability of specific domain names, I recommend instantdomainsearch.com, which gives you nice ajaxy features to, well, instantly search domains.

If you’re not quite sure what you want to call your website, I like makewords.com. This site allows you to seed domain searches with keywords, then makes recommendations based on availability, theme, and related words.

Here are a couple tips I recommend when choosing a domain name and what to do with it once you have one:

1. Make it short. Preferably 1-3 syllables, easy to spell, and memorable. Travel sites are good at this. A few good examples: hotwire.com, sidestep.com, orbitz.com, kayak.com, priceline.com. (Sure, I violate my own rule #1 with 5 syllables in my domain, but bustout.com was taken and the owner was not willing to sell it.)
2. Pick the right top level domain. A top level domain is what comes after the dot in the domain name, as in .com (commercial), .org (non-profit organizations), or .jp (Japan). Each TLD has a specific purpose. There is a trend towards using creative top level domains to make catchy domain names, such as mir.aculo.us and vita.mn.
3. Buy more than you need. If you want mydomain.com, go ahead and buy multiple variations to protect them: mydomain.net, my-domain.com, mydomainonline.com, etc. Domain names are cheap. At the time of this writing, domains are going for about $9 per year at registrars such as godaddy.com. Some hosting companies like dreamhost.com offer free domain names if you host your site with them.
4. Don’t give up. If the domain you want is taken, it’s not the end of the world. If the domain registration is public (most are) you can find out who owns it by searching WHOIS. If you’re lucky, the domain is not in use and is about to expire, or perhaps the owner is willing to sell the domain to you.
5. Sub-domains are good. Depending on needs, the use of sub-domains can be helpful to your business. When I build websites for clients I often setup secure sub-domains such as http://myclient.bustoutsolutions.com so clients can review the site while it is in development.
6. Personalize your email. To me it looks unprofessional when I get a business card with a Yahoo or Gmail email address on it. Once you buy a domain name, set up email addresses to brand your company or organization. jeff@bustoutsolutions.com looks much better than bustoutsolutions@gmail.com although I own that email address too!

I dug around for a while yesterday looking into how to close prototype modal windows upon a successful ajax post while ensuring proper error handling. I discovered two excellent blog entries on the subject at javathehutt and richtextblog. Unfortunately, neither of them quite fit my case or fully addressed my issue. Of course, I could just avoid the use of modal windows for my forms, but then what else would I do with myself on a Saturday afternoon? As it turns out, with RJS, what I needed is quite easy.

render :update do |page|
   page.call 'top.Windows.close', 'window_id'
end

If you’ve ever worked with images files in Photoshop or Illustrator, you’ve probably experienced some frustration in getting your colors to look right in a web browser, especially on Apple computers. If your images appear washed out or de-saturated, follow these simple steps to fix the problem. Special thanks to Andrew Bessler at Play for the tip.

Once you get the color how you want it Photoshop:

1. Select “Edit→Convert to Profile” in the menubar and change Destination Space Profile to “Color LCD”. (IMPORTANT: Don’t use “Assign Profile” to change the image profile to Color LCD — this will desaturate your pretty, pretty colors.)
2. Use “Save to Web” to export your jpeg.

Here’s an example of the difference. The first file looks washed out whereas the second image should retain it’s brilliant, saturated colors across browsers and operating systems.

Uncorrected

Corrected

One of the most common web design techniques is to add small icons next to hypertext links to give the user some visual indication of what the link does. A common example is to put an envelope next to an email address. There are a few ways of doing this, and with a bit of attention to detail, you can achieve a very nice effect. Let’s look at the most basic way of doing this first:

   
   you@yourdomain.com

The result, without any style:

you@yourdomain.com

Clearly the text needs coloring. A slight tweak in the css give us a color palette that is a bit more pleasing and a simple rollover effect:

a:link, a:visited {
   color:#399DCF;
   text-decoration:underline;
}

a:hover, a:active {
   color:#333;
}

you@yourdomain.com

As you can see, the image and the text aren’t quite lined up vertically, and and in non-IE browsers it looks a bit sloppy with the underline extending underneath the icon. In order to correct these problems, let’s change the markup to remove the image tag and add a class to the anchor tag:

   you@yourdomain.com

The rest is handled by CSS. We give a little left padding to the link and fill that space with a background image that is vertically aligned in the center of the line.

a.email-link:link, a.email-link:visited {
   padding-left:18px;
   background:url(/images/email.gif) center left no-repeat;
   color:#399DCF;
   text-decoration:underline;
}

a.email-link:hover, a.email-link:active {
   color:#333;
}

We now have a clean rollover underline effect and a link with a clickable icon that is aligned properly.