What is Toluu?
Toluu is a free service for sharing the feeds you read and discovering new ones.		 Get Invite

456 Berea Street

Roger Johansson is a web professional specialising in web standards, accessibility, and usability.


Find inline CSS and JavaScript with Inline Code FinderDecember 16 2008

A few weeks ago I posted Find nasty JavaScript with the Obtrusive JavaScript Checker, talking about Robert Nyman’s useful quality assurance tool.

Well, Robert didn’t stop at finding inline events and JavaScript, so now he has extended the Obtrusive JavaScript Checker and created Inline Code Finder.

Instead of just looking at JavaScript-related things, Inline Code Finder will find and highlight any elements that have inline events, inline styles, or javascript: links.

Good stuff!

Posted in (X)HTML, CSS, Coding, JavaScript.

456bereastreet?i=cBDso 456bereastreet?i=tYXro
Reveal new window links and links to non-HTML files with a user stylesheetDecember 15 2008

As I stated in Make Safari open targeted links in new tabs instead of new windows I find links that open in new windows highly annoying.

One reason that new windows can be so intrusive is that most browsers don’t make it obvious to the user that clicking a link is going to open a new window (or a new tab, depending on browser configuration). If it was really obvious before you click a link that it will open in a new window, at least you’d be prepared for it.

Well, there is a rather simple way of achieving this by adding a few CSS rules to a user stylesheet. For some reason this never occurred to me until Jim Wilkinson mentioned it to me in an email response to the article about Safari that I just mentioned. Thanks Jim!

Highlight links that open in a new window

Based on Jim’s tip, here’s the CSS I use to highlight links that open in a new window:

  1. a[target="_blank"]:before,
  2. a[target="new"]:before {
  3. margin:0 5px 0 0;
  4. padding:1px;
  5. outline:1px solid #333;
  6. color:#333;
  7. background:#ff9;
  8. font:12px "Zapf Dingbats";
  9. content: "\279C";
  10. }

This will insert a box with a “heavy round-tipped rightwards arrow” before any links that have a ta

Version control with Subversion on Mac OS XDecember 10 2008

We all know that we should back up our important data frequently. Many of us do. But backups don’t give you the fine-grained control of changes to source code that a version control system does.

For a long time (too long) I didn’t use version control at all. Well, unless you count manually duplicating files, which is far from a good solution. But I always felt that I really, really should be using version control. The problem was that I never got around to setting anything up since I thought I had to use a Subversion server, and my attempts at getting one up and running were unsuccessful.

It turns out that getting started with version control is much easier than I thought, at least as long as you don't need to be able to access your repositories remotely. Accessing repositories through your local file system eliminates the requirement for a separate version control server and lowers the barrier significantly. Too bad I didn’t know about this option earlier.

There are several version control systems available, but the one I use is the open source Subversion.

Working remotely

To enable everybody on your team to use the same repositories, which is kind of the point if you’re using version control in a team, you need to set up a server. You will probably also want to configure it to let people access it through the svn or http

Make Safari open targeted links in new tabs instead of new windowsDecember 4 2008

One of the things I find most annoying when browsing the web is when a link opens a new window. It completely disrupts my workflow when a new window pops up, especially when it does so without warning.

If you’re using Firefox this isn’t such a big problem anymore since it will open targeted links in a new tab instead, which is much more manageable and less intrusive.

For Safari, however, there is no such setting to be found when you look through its preferences window. But the setting does exist (at least in the Mac OS X version), though you have to use Terminal.app to enable it:

  1. Quit Safari
  2. Open Terminal.app
  3. Enter defaults write com.apple.Safari TargetedClicksCreateTabs -bool true and press enter
  4. Open Safari
  5. Notice that links that used to open in a new window will now open in a new tab

Much better.

Posted in Apple, Browsers, Usability.

456bereastreet?i=F0Uao
Making Google Maps more accessibleDecember 1 2008

It has become very popular to use the Google Maps API to add maps to websites. While the maps work fine for most users, unfortunately Google Maps does not by default work without JavaScript – when there is no JavaScript support, you don’t get a map.

Fortunately it is quite easy (but not very common) to provide a fallback for users who do not have JavaScript enabled in their browser by using the Google Static Maps API.

The Google Static Maps API lets you embed a map as a plain image in various formats. The developers guide explains the many options you have when it comes to configuring the static maps.

So next time you use the Google Maps API to put a map on a website, take a couple of minutes to add a static fallback for users without JavaScript.

While we’re on the topic of making Google Maps work for more people, I recommend reading Patrick H. Lauke’s article on creating Keyboard-accessible Google Maps. Making Google Maps usable without a mouse requires a bit of hacking, but the end result is well worth it.

Posted in Accessibility, JavaScript.