I have always told my students that the best way to get backup help is to go to the bookstore, site down, and read 10 pages out of each book on the topic, and find the one that “speaks” to them. A teacher’s recommended text, the school’s required textbook, it’s rare that student find them legible or helpful (I think my logic teacher went out of her way to find the most confusing book on Earth). Find the book that they understand and start working. Work every day. Work at least 15 minutes or 30 minutes every single day, doing the exercises over and over, changing little things, until the whole concept is solved.

But not every great book can be found at the store. Of course there are the online standard – w3schools.com for example – and the plethora of smaller resources. But it is always a treat to find an online resource that has both extensive resources and is also an easy, if not opinionated, read.

Such is “Eloquent Javascript,” authored by Marijin Haverbeke. I remember coming across it a few years ago but a posting on DownloadSquad reminded me of it. It is available in its entire text online (in HTML) as well as via downloadable PDF. As with most good resources, I recommend grabbing the PDF (and if you’re ambitious, a local copy of the HTML) before the perishability of Web documents steals it away.

Once installed, it adds an additional panel to the FireBug console labelled “Reference”. Check out the screen shot to see the changes and be sure to get all the details on SitePoint’s web site.

Fortunately for most designers, the performance impact is only in extreme situations. But it’s definitely something to be aware of when writing CSS.

For the Web designer n00bs reading this: CSS selectors are names given to styles — font-size, color, background-color, etc — in internal and external style sheets that dictate a Web page’s design. By using sibling, descendant (two or more selectors) and child selectors (a selector that’s a “child” of another selector), designers can apply greater control over the CSS for their pages.

Sykes’ test uses a 20,000-item loop in an HTML document. Within that document, he uses three levels of nested “div” tags, the lowest containing a “paragraph” tag that also contains an “anchor” tag. The anchor tag is targeted and styled using the CSS.

The test also consists of three parts: class (each anchor tag gets a unique class name), descendant selectors and child selectors. The results — listed by the browsers with the largest performance hit — were as follows:

See Sykes’ graph of his results

Class

1. Firefox 3 (OSX)
2. Firefox 2 (OSX)
3. IE 7
4. IE6 and Safari (aprox. tie)

Descender selector

1. Firefox 3 (OSX) and Firefox 2 (OSX) tie
2. Safari
3. IE 7
4. IE 6

Child selector

1. Safari and Firefox 3 (OSX) tie
2. IE 6
3. Firefox 2 (OSX)
4. IE 7

Note that Opera 9 (OSX) was excluded because it couldn’t render the test page for Sykes.

Sykes does point out that this test measures the performance under extreme circumstances — there aren’t many Web pages with this amount of markup or styling. But he does caution that descender and child selectors can cause at least a slight drop in browser performance.

You can download Sykes’ tests in ZIP format.

[via DownloadSquad via comment by Dave Hyatt via ShaunInman.com]

But there are quite a few high quality typefaces that are available on most new computer systems and you can always fall back on the common ones. Of course there are options like creating images, dynamic headlines, and siFR… but all of these techniques increase load time and development time. There are plenty of good reasons to be strategic in the font choices rather than using additional technology. I am shocked at how rarely I see anyone taking advantage of these type options, so here is a quick and dirty list of fonts you should and could use in your desgns and stylesheets.

WINDOWS 97.09% / MAC 78.86%

This is a nice serif font that his pretty good support for both Mac and Windows based machines (97.09% of all windows machines have it, and 78.86% of mac’s). Yet very few people use it and instead default to georgia or times. As you can see it makes for great headlines, and I have used it with success as copy type as well. Worse case you can always default back to georgia, times, etc.

WINDOWS 96.09% / MAC 72.02%

I admit this is not one of my favorite fonts, but it does have many instances where it could be used effectively. It doesn’t seem to get used very often despite the fact that it could be an excellent copy font. Again there is always Arial or Helvetica if the machine doesn’t have Tahoma installed.

WINDOWS 95.85% / MAC 88.08%

Admittedly this font probably is overused in non-web related design. Since it is one of the “cooler” default fonts on most machines it tends to get a lot of use. Despite this fact there are plenty of good places to use it, and it works great for well… “impactfull” headlines.

WINDOWS 85.44% / MAC 42.50%

This is a nice elegant font that was overused by graphic designers some time ago, but it has been locked away and shunned for some time now. It may almost be time to pull it back out of the tool chest. Not a huge percent of Mac systems come with it preinstalled, but most new ones do. Depending on your target audience this could be the perfect font to use. If you are worried about the low mac support you could always opt for Futura as well (which has very high mac support).

WINDOWS 97.73% / MAC 96.18%

Yup you don’t just have to use plain old Arial. Arial black is a nice bold font that could be perfect for headings, impacting headlines, and hell even a replacement for the Impact font mentioned above. I don’t know that I would use it for body text, but it is an option that should be realized in web typography.

WINDOWS 87.08% / MAC 91.01%

Arial again! We are not done yet, oh no. Much like arial black, arial narrow is a great font for headlines. Instead of the big bold in your face style of headlines you can use this typeface for more elegant subtle headlines. A nice change from the traditional arial, and can be used much like you would a condensed font.

WINDOWS 58.13% / MAC 85.85%

I will admit I hate this font, mostly because it is misused (and people will probably argue that it is not the fonts fault, but the designers). But there are times when it can be used effectively, and it has pretty good support on newer windows computers and most mac based computers. Most likely it will again be for headlines, larger headlines, as it is not terribly legible at small fonts especially when it isn’t properly aliased.

WINDOWS 43.09% / MAC 90.82%

No surprise I like this font. I think it works both in copy and in headlines, and it has fair support in both platforms. Anytime you use a font that has about 50% support rate you want to think about the next logical font to serve, but there are enough options specific to windows that would let you achieve the same typographic message with only subtle differences.

[Excellent article from 3.7CREA.TV - click here for original article]

For 2007, the compilation includes:

1. Bad Search 
2. PDF Files for Online Reading 
3. Not Changing the Color of Visited Links 
4. Non-Scannable Text 
5. Fixed Font Size 
6. Page Titles With Low Search Engine Visibility 
7. Anything That Looks Like an Advertisement 
8. Violating Design Conventions 
9. Opening New Browser Windows 
10. Not Answering Users’ Questions