Post Archive

› January 31, 2006

Internet Explorer 7 Beta 2 Preview

It's finally public. Read more about it on the ieblog: Please test your sites with IE7 and Frequently Asked Questions for the IE7 Beta 2 Preview with ample linkage from there to more resources.

view rest of article

› January 26, 2006

Bubble Tooltips

Nearly two years ago over at pro.html.it I wrote an article on how to build pure CSS tooltips and then spice them up with a little DOM to ensure semantic use of the title attribute. Recently I was playing with a variation, a nearly pure Javascript+CSS approach where the tasks assigned are more clearly separated: interaction to javascript, presentation to CSS. So the new article on Bubble Tooltips was published this week in italian on Pro, and I'm presenting here a translation for the international audience.

Bubble Tooltips are an easy way to add (via a bit of CSS and javascript) fancy tooltips with a balloon shape to any web page. Before we begin, here it is the example: just roll over any link to see them in action. They operate this way:

view rest of article

› January 22, 2006

Call for action: help Firefox love list-style-images again

A couple of weeks ago, I posted about a CSS snippet tricking browsers into printing background images, something most of them don't do by default. That's all good, but there was one problem: a few WG readers pointed out that, although Firefox' print preview displays the image (= a list-style-image) correctly, its print output is less satisfactory - list-style-images are printed way too small. I had hoped to solve the problem by assigning different PPI values to the image, by editing its EXIF data, or by adding some CSS rules - alas, nothing works.

Poking around in the bugzilla database, I found bug 133490 "resolution of printed list-style-image images is wrong", which describes exactly the problem we're dealing with here. Apparently the problem has been around since, ahem, March 2002.

So, WG readers, if you want to be able to use my background printing technique on all browsers (or if you just think that Firefox should print list-style-images correctly), vote for bug 133490 so it gets fixed before this year's 2.0 release. Spread the word!

› January 17, 2006

Safari/Konqueror testing with CosmoPOD

When reading Nate's post about why Mac Intel is good news for web development, I suddenly remembered a cross-browser compatibility related link I intended to share, but then forgot about. So, here it is.

Ever wondered what's the easiest way to test your site on Safari (or Konqueror's KHTML engine for that matter) when you only have a Windows box? For a one time check, safaritest is probably sufficient, but if you want to do some serious debugging, you'll need a more powerful solution: a real browser.

Jens Wedin's three excellent howtos explain how to run Konqueror on Windows: Cygwin + KDE, QEMU + Knoppix, VMware + Suse

The easiest solution however is CosmoPOD - I know, the name (and cartoon logo) are so-so, but the service itself is great. You sign up, download the NX client, and have a (lightly sponsored) virtual KDE 3.5 desktop running within minutes. The CosmoPOD desktop's responsiveness is great, and Konqueror 3.5 is Acid2 compliant!

Start PHP on your new Mac

This is largely just a note to self:

  • Be sure bbedit or textmate or some other tool that has command line support is installed first
  • Open terminal
  • Open the php config file: bbedit /etc/httpd/httpd.conf (change bbedit if you're using something else)
  • Search for the term php
  • Un-comment the lines you find to contain php (remove the # at the start of the lines)
  • Save the file, open the system preferences and restart the web server by turning off/on again Personal Web Sharing under Sharing

Warning: At the time of this writing, this starts up the default version of PHP, which even on brand new Intel iMacs is version 4.3.1. Also, this info might be outdated by the time you read this. Doing this might not work on your computer, your computer might melt, it might train your cat to DESTROY, it might ruin your life's work - use at your own risk. Thanks Dan, for the reminder on how to go about this.

Source Order, Skip links and Structural labels

Flickr: Refreshable Braille device in actionLate last year Roger Hudson, Lisa Miller and I did some research into source order, skip links and structural labels.

The results were presented at Ozewai in December 2005, and the podcast was then made available in the WSG site.

Now, the full report has just been released - Source Order, Skip links and Structural labels.

view rest of article

› January 16, 2006

Mac Intel = good for web design

If you work in a mostly Windows based environment, you might have a Mac somewhere that you check your sites with before showing to clients. Conversely, if your workspace is largely Mac, you might have a Windows machine that you check your sites on before showing to clients. If you are a good deseloper*, with enough time to do their job right, you'll check your work carefully, you'll rework, fix, and refine. Sometimes, when time is tight, testing in the "other" environments (whichever they are) might be more of a lets-make-sure-its-not-awful check. When this happens, the smaller refinements that your client will never even think to bring up - get lost in the shuffle.

With the recent release of Intel based macs, and Microsoft's renewed commitment to develop for the Mac, I'm hoping we will soon be able to run Windows within the Mac OS X environment at decent speeds. We might have to wait for Microsoft to completely re-write Virtual PC, or perhaps another method will prove itself sooner, but the end result will mean easier access for testing/refinement, and as a result - better web design.

Meanwhile I'll keep my comparatively noisy windows box nearby, and keep using Synergy to switch from OS to OS, but it's nice to think of the potentially silent and speedy testing environment we might soon be able to enjoy.

*I'm really tired of not having this word available, so I'll make it up: Deseloper = web designer and/or developer. Correction: someone else thought of it already of course, but I still like it because it sounds animal-like.

› January 14, 2006

2005 is in the archive

All web-graphics.com posts for 2005 are now available in the archive for browsing.

› January 11, 2006

JavaScript Function Arguments: Assigning Defaults

This article demonstrates a nice technique for setting default values for function arguments in JavaScript. The basic form of the idiom is:

function foo(a, b, c) {
    var b = (b == null) ? "default" : b;
    var c = (c == null) ? 100 : c;
    ...
}

Within the body of a function, the argument b will receive the value of "default" if no corresponding value is passed to the function. This statement is repeated for each argument requiring a default value.

Not being one to leave well enough alone, I wanted to "improve" on this idea by creating a function to simplify the assigning of these defaults. Is this an improvement? You be the judge.

First, here is the function:

view rest of article

Tags vs Categories

Website taxonomy is a pretty huge subject, there are many debates about the best way to organize and provide access to information. Some prefer the control and intentions of a pre-set category system. Many are keen to adopt folksonomies, or community-generated tagging of content with weighted tag-clouds for browsing.

I'm interested to know if any web-graphics readers have a preference specifically for this website. We are revisiting the structure and design of web-graphics, and want to know what you'd prefer and why.

Leave a comment over here at this Say-So post: Categories or Tags.

More best of '05 lists

Vitaly Friedman made a few "best of" posts recently worth checking out:

Have some other "best of" lists for '05? Link them in a comment to this post!

› January 9, 2006

Links for light reading

When the Web Standards Group mail list was created in early 2003, I began been sending posts to the list with webstandards-based links for people to read. For some reason the subject of these posts became "Some links for light reading". Over the years quite a few people have requested that these posts be placed online somewhere for easier searching.

Now, thanks to the power of Wordpress, all 80-odd "links for light reading" posts are available on the Max Design site.

› January 3, 2006

The Perfectionist's Guide to Building a Query String

Below is a little JavaScript utility I wrote while home with the flu over the holidays (yay immune system!). I have found it to be useful and thought I would pass it along. All it does is return a string in a format suitable for the query portion of a URL for a given form element. You will find this kind of functionality in just about any AJAX code library, but this one is infused with my own brand of anal-retentive attention to detail. I wanted to recreate, as close as possible, the way in which a browser constructs a query string when a form is submitted. I found that the rules for building the name/value pairs for the various kinds of form inputs were not immediately obvious.

Here is the script:

view rest of article