I’ve been doing some Javascript tutoring this term and I realized that there are a few indispensable utilities that any budding web developer should know about.

Text Editor
The first thing you need is a good text editor. You can code anything in Microsoft’s Notepad or Apple’s Text Editor, but you won’t have any fun, that’s for sure. A good text editor is like a Swiss Army knife. Chances are you won’t use half of the features, but the ones you do use will save you an immense amount of hassle.

Text editors are useful because they display your source code in special colors to make it easier to read. This is called Syntax Highlighting. If you make a mistake, the text editor won’t highlight your code the way it normally would; this will call attention to the problem and save you hours of debugging.

Here are some of my favorite text editors:

• Komodo Edit – Mac, PC and Linux
• Geany - Mac, PC and Linux
• Smultron – Mac OS X
• TextPad – Windows

The first three are completely free of charge. I don’t like TextPad myself, but it seems to be popular among some crowds.

Mozilla Firefox
Real web developers will test their source code across multiple browsers and operating systems, such as Mac OS X, Linux and the various flavors of Windows. But if you’re just getting started, Firefox is the best browser to code in. If you get your site working in Firefox, chances are it’ll work nearly as well in most other browsers. At least until you start doing more advanced stuff. It also has an added benefit, which you’ll see in a moment.

Click the button below to download Firefox:

Firebug
Firebug is a Firefox plugin that allows you to view, edit and debug CSS, HTML, and JavaScript live in any web page. You’ll quickly see how useful this is when it turns up your first Javascript error.

Download Firebug

After you first install Firebug you’ll notice a little “bug icon” appear in the lower right corner of your Firefox window (you’ll need to restart Firefox once for this to appear). Click on it to view the Firebug window pane.

If you’re working in Javascript then you’ll love the Console tab. Otherwise the HTML and CSS tabs are your best friends. The Script, DOM and Net tabs won’t be handy until you gain a little more experience.

For more help with Firebug, check out the tutorials and video screencasts at the bottom of the Firebug documentation page.

A Project
Now that you have all these great tools at your disposal, you’ll want a project to get you started. Try working through some of the great tutorials at HTML Dog first. If you finish those you can check out the tutorials at W3Schools. If you’re feeling brave, try the Javascript tutorials.

Apparently Firefox has developed sporadic issues with with the Courier font-family on Windows computers. If you print the following fixed-width text examples and are using Firefox 3, then chances are you’ll see garbage text for the Courier block.

Default <pre> Font

$ whoami
$ ls -al
$ echo "hai world!"

Courier

$ whoami
$ ls -al
$ echo "hai world!"

Courier New

$ whoami
$ ls -al
$ echo "hai world!"

Fixed-Width

$ whoami
$ ls -al
$ echo "hai world!"

Monospace

$ whoami
$ ls -al
$ echo "hai world!"

I was able to easily reproduce this problem on my Windows XP desktop using Firefox 3.0.8. Oddly enough, after printing several test pages and print previews, Courier magically started printing again.

This problem has been reported elsewhere though:

Firefox 3 garbles fixed-width font printout on Laserjet
…Then I came across this mozilla support forum article and changed the Default Character Encoding from the default Western (ISO-8859-1) to Western (Windows-1252) in FF3 Tools/Options/Content/Fonts & Colors/Advanced.
- cynici

I haven’t tested this solution myself, but it may be worth a shot if you’re having this problem.

Until this bug is resolved, I’d recommend web developers avoid declaring the Courier font-family in their style sheets (try "Courier New" instead).

If anyone else has an insight into this problem please do let me know.

Thanks to Matteo.Mazzoni for the great photo of garbage!

About a week ago I launched a new website for the AccessABILITY Student Union at the University of Oregon (with a kickass CMS built on the jQuery UI). Coding the new site meant paying extra-special attention to web accessibility standards. So I thought I’d share some tips with you for making your websites more accessible to your visitors.

Web accessibility also benefits people without disabilities. For example, a key principle of Web accessibility is designing Web sites and software that are flexible to meet different user needs, preferences, and situations.– Introduction to Web Accessibility

To begin with, think about how your visitors are accessing your website. Are they using a web browser on their desktop? If so, are they using Internet Explorer, Firefox, Safari, Google Chrome or Opera? Maybe they’re browsing your site from their mobile phone or a netbook. If they’re visually impaired they might be using a screen reader or some kind of zooming software. If they have a physical impairment they might be using a keyboard-like input device instead of a mouse (which makes clicking slightly trickier).

The point is that your site’s visitors are using a diverse set of tools to access to information that you’re providing. You need to make sure that information is as easily accessible to as many of these people as possible.

Be Standards Compliant
Writing standard’s compliant markup is the best thing you can do to ensure your content is easily accessible across the board. Make sure you validate your HTML and CSS markup with the W3C Validator first, before you ever push it into production.

CSS, Site Flow and Markup
Make sure your site is laid out in a sensible manner. Pay particular attention to the flow of the content with styles turned off (in Firefox View->Page Style->No Style). Your site header and navigation should be at the top and the page content should flow from there.

Content should make good use of the h1 to h6 tags. Screen readers use headers to break your site up into content blocks, which make navigating the page easier for users with visual impairments.

Employ font-size in em’s or percentages to allow visitors to easily resize the text in their browser. There’s a reason large-print books exist.

Images should have descriptive alt text. Avoid ambiguous descriptions like alt="Image 1". Instead, include useful descriptions like alt="The Heceta Head Lighthouse at sunset on the Oregon Coast". Don’t include unnecessary alt text for images that are purely decorative, such as alt="rounded corner right", as this will only create more clutter for screen readers.

Tables should employ descriptive row and column headers. Screen readers rely on this information to help orient your visitor.

Avoid providing information solely by color. Highlighting clearance items in red won’t help someone who’s color blind. Try tagging items with the word clearance instead.

Give the Fangs plugin for Firefox a whirl. It does a decent job emulating some of the basic functions of screen readers. You can even pair it with Mac OS X’s text-to-speech function. This will give you an idea of how screen readers see your site content.

Javascript and AJAX
Avoid using JavaScript for styling site navigation, as CSS can almost always be used instead. Keep in mind that many visitors may have Javascript disabled. It’s important that your web application is able to degrade gracefully in these situations.

Be aware that many screen readers, such as JAWS, use a “Virtual Buffer” to cache your site markup and parse it out to the visitor in a sensible way. Using AJAX to modify the site content “on the fly” will often leave the buffered content outdated, and the visitor is left with few clues as to what has changed until the buffer is refreshed. See this article for more information.

Multimedia Content
If you provide multimedia content, like a podcast or video, make sure you provide the core information in other formats, such as linear notes.

Avoid using Flash content unless absolutely necessary, especially for key features like site navigation.

Additional Resources

• The W3C Markup Validation Service
• Section 508 Standards: Article 1194.22
• Web Accessibility Initiative
• WAI 10 Quick Tips
• Web Content Accessibility Guidelines 2.0

We use Pound as a reverse-proxy and loud-balancing frontend to our web cluster here in the office. Today we had some NAT problems with our proxy server and ended up with some server downtime. Pound defaults to outputting a cryptic error message when it can’t reach a valid host:

The service is not available. Please try again later.

This isn’t very helpful to clients who probably have no idea why their site is unreachable. After getting NAT back up and running, I decided to work on replacing this error with something a little more useful.

(more…)

Netbooks have existed for some time now, but have just recently become popular. A type of sub-notebook computer, netbooks are small, light and inexpensive. Originally, netbooks almost exclusively ran Linux operating systems due to performance and price benefits over Windows. Now many netbooks offer a choice between a Windows or Linux based operating system.

Although not as powerful as traditional notebook computers, the small size of netbooks makes them excellent companions for people on the go. The surprising thing is that they’ve proved tremendously popular with all kinds of consumer groups, from tech savvy bloggers, to English professors and even soccer moms.

Dylan McGrath writes in a recent EETimes article that “The Information Network estimates that 11.4 million netbooks were sold in 2008, up from 400,000 in 2007. For 2009, the firm estimates that netbook sales will grow 189 percent to 21.5 million.” That’s a 2,850 percent increase in sales!

So why have netbooks become so popular so quickly?

They’re Cheap
If you have to lug around a computer every day, it’s going to take some abuse. If your $300 netbook breaks or gets stolen it’s going to be much less of a hit to your wallet than $1299 for a new MacBook.

They’re Efficient
Although netbooks aren’t suited for intense multi-tasking or graphics design work, they are perfect for everyday tasks like surfing the web or taking notes in Google Docs. Keeping your documents in the cloud means you can start a presentation on your netbook and finish it at home on your desktop.

They’re Cute
Ars Technica has a good article espousing five reasons to consider a netbook. They hit on a key point at the end of the article:

It may be a hideously embarrassing truth, but the netbook appeal goes well beyond businesses—a lot of soccer moms and grandparents are buying netbooks because they have a basic ownership appeal. Netbooks work well for anyone who regularly moves around and wants to bring a certain level of computing with them.

Because so many netbook owners end up working in coffee shops or other public places, they tend to attract a lot of gawkers. Let’s face it, netbooks are cute and definitely ooze a certain “cool factor.” I think this has greatly contributed to the lasting buzz about netbooks.

For the past couple years I’ve been watching the popularity of netbooks grow, both online and off. Yet I’ve remained on the fence. I found it hard to believe anyone would want to work with such a small screen. It wasn’t until my roommates brought two Acer Aspire Ones home that I began to see their benefits (purchased at our local Circuit City’s liquidation sale).

The popularity of netbooks is certainly due to several factors. Cheaper hardware and better web applications have greatly contributed to netbooks rise. But I think that the biggest factor is the influence of thought leaders. That professor sitting in a café working on their Asus Eee PC has probably been the single biggest boon to netbook sales.

Ars Technica has an interesting series going on the history of the netbook. The first entry is entitled “The State of the Netbook, Part I: WEee have lived before.”

Thanks to -eko-, raster and quentinsf for the great netbook photos.