Every web developer knows that their site should work when the site's users disables JavaScript, but I constantly find this principal is violated when it is simple thing to obey. When web UI developers violate this principal it shows an extreme laziness and a failure to understand good practices on their part; this can greatly worsen the user experience. So, I'd like to articulate what I'm going to call The Principle of JavaScript Illumination which is an idea I haven't seen articulated yet, but that everyone knows in their gut they should do, and yet I hardly ever see this principal adhered to in practice.

Definition

The Principle of JavaScript Illumination is a simple one, if some user interface element will not work when JavaScript is disabled, then have JavaScript add the element.

Implications

If you have a user interface (UI) element that uses JavaScript, then make sure there is a default functionality that will work when JavaScript is disabled. If the UI element cannot work at all without JavaScript, then you should make JavaScript add the element, this way if JavaScript is disabled then the user will not see UI elements that will not work, causing a bad user experience.

Examples

Facebook Chat

When you log in to Facebook with JavaScript disabled, the chat widget is displayed to you on the bottom right of the screen, but it doesn't do anything, it's completely useless to you and it's just in the way, so why the heck is it displayed to the user?

Kampyle

Kampyle provides some widget code for anyone to put on their site which adds a "Give Feedback" button to the bottom right of the user's screen, which the user can click on to give feedback for the site. The trouble is, when JS is disabled, or when the user uses NoScript to block assets from the kampyle.com domain, then the button doesn't work (see ROIRevolution's site for an example of this), so why the heck is it displayed to the user?

Conclusion

Be a good web citizen, and a smart web developer by obeying The Principle of JavaScript Illumination, because it's the right thing to do and because you're users will thank you for it.

After reading "JavaScript speedups in Firefox 3.6" by Alix Franquet, which mentions the JIT for browser UI JavaScript about:config variable named javascript.options.jit.chrome, which was available in Firefox 3.5 and I didn't know it, I finally decided to review all of the Firefox about:config variables and find out what they all were. After I did so I found quite a few settings that if changed from their default settings would make Firefox even faster. These are the settings I want to go over in this article.

To start off with, I would recommend that you install Firefox 3.6 RC2 or higher, because if you read the article I mention above, then you will know why Firefox 3.6 is so much faster than 3.5 is.

About:Config Settings

I'm not going to list every about:config setting, only the ones that I think if changed should improve Firefox's performance.

[More]

Three days ago Google announced it's release of Goo.gl a url shortener which is more reliable and trust worthy (to a user) than other services such as tinyurl.com, tr.im, bit.ly, etc.

Now I think all web publishers should maintain their own url shortener which only they can create urls for and control, for example I bought the domain evold.ca, and use the subdomain r.evold.ca as my url shortener. I primarily use this domain to shorten urls to my other domains, like erikvold.com, but I can and do occasionally use it to create short urls for domains that are not mine. As a user, when I see a blog post that I want to share, I first check if the publisher has published a short url for the page, which any smart web publisher does, but for the other web publishers (the majority atm) I have to create a short url, which I can now use Goo.gl to do.

The problem is that Goo.gl does not allow users to use it to shorten links directly. Currently, the Google URL Shortener is only officially available via the Google Toolbar and FeedBurner.

Well, I noticed that this problem was solved yesterday by a Google Chrome extension called goo.gl shortener. Amit Agarwal drew my attention to this extension in a blog post he wrote yesterday, where he pointed out the important javascript parts needed to create goo.gl short urls. So I took this information and opened Goo.gl up with a userscript, a ubiquity command, and a jetpack to help everyone create short urls with Goo.gl, check them out!

This is just a last moment idea inspired by the movie Starship Troopers which flashed in to my mind a couple of days ago as I was thinking about Jetpacks for the Jetpack for Learning Design Challenge. It is primarily a Microformat/Link Type proposal for rel-info with some ideas and prototypes demonstrating how it could be used.

Abstract

When you are reading something on the web there are usually pages which exist elsewhere on the web that would provide background information, and further reading if you desired to dig deeper into the subject(s) you are reading about. Sometimes some of those pages are linked to from the article you are on, but often the link wouldn't make sense in the context of the content, and using a link tag isn't very useful to a user, so the link is not made.

I propose a rel-info link type, even if just as a Microformat, for 'a' and 'link' tags to provide a link to context-sensitive information.

With rel-info a user can read more about the Movie that was discussed at Netflix or IMDB easily for example, because the publisher (or a script the user subscribes to, more on this later) provided a rel-info link which the user can easily find and follow with a Jetpack, Firefox extension, or some other browser extension.

Proposal

When rel-info links are provided on a page browser extensions can easily extract them from the page, which can lead to a large number of use cases, of which I am sure I have only just scratched the surface. There is another side to this coin however which is that there are a large number of ways that rel-info links might be added to a page.

Let's explore the latter case, first the person who published the page could add rel-info links, but then browser extensions could add rel-info links, they could also search for and remove rel-info links. A user could subscribe to a person's or institution's suggestion feed or script which adds and/or removes rel-info links to pages, along with using a AI based browser extensions to add rel-info links.

When the rel-info links are going to be consumed there are some other interesting possibilities, for example a browser extension could filter the links by a HTML 5 'data-topic' attribute by keeping a list of topics that the user dislikes or likes, the domain could also be used for filtering. A browser extension could allow the user to mark pages as read so that they are removed from pages in the future as another example.

Prototypes

To test this link type out with a Jetpack I first had to add it to some pages, so I decided to write a couple of UserScripts to do this demonstrating how they can be dynamically added to pages by anyone even users themselves. The first userscript was to add the rel-info link type to IMDB links, and another to add the rel-info link type to Wikipedia links.

If you install the above UserScripts then you should find rel="info" or rel="... info" on your IMDB and Wikipedia links. Once you have done that you can check out and install the "Would You Like To Know More?" Jetpack. This is a slidebar Jetpack, and when you open this slidebar the focused tab is then scanned for rel-info links, if any are found then they are displayed in a list for you to choose from, if you click one of the provided links a new tab will be opened for the new page.

These UserScripts and the Jetpack take advantage of HTML 5 'data-' attributes, by adding a 'data-source' attribute to the rel-info links added on the userscript side, which the jetpack was written to check for and display if found. This is an example of how HTML 5 'data-' attributes can be used with the rel-info link type which I propose to create more interesting results.

Since Google launched the Google Analytics Individual Qualification (IQ) program nearly 8 months ago, a lot of people have asked for (I was one of them):

1. A way to prove to others that they have passed the Google Analytics IQ test and what their score was.
2. A badge that qualified GA individuals can put on their personal and/or company website.

Issue I: We wanted proof!

Well Google finally got around to addressing the first issue today enabling those that passed the GAIQ test to create a link to proof that they passed, for example here is my proof of passing the Google Analytics IQ test.

I really must thank Google for finally addressing this, it finally means people that are looking for someone to help them with Google Analytics will have a metric that they can use to wade through all of the people out there that either did not pass the test and claim to, or did not do very well. Of course an educated decision will depend on far more than a test score, but it is very important nevertheless.

Issue II: We wanted a badge!

Early last month I got a wicked email from Kamal:

Hi Erik,

I came across your site through a search on a google analytics related query and I noticed that you're a GAIQ. Would you like to be listed in the GAIQ Directory at http://www.GAIQDirectory.com? There's a submission page at http://www.gaiqdirectory.com/submit-your-gaiq-listing and a set of badges at http://www.gaiqdirectory.com/badges

...

Thanks,
Kamal

The Unoffical GAIQ Directory has barely been used, there appear to be 6 people in the directory currently, so if you have passed the GAIQ test, then I highly recommend submitting your listing there. Hopefully they will display score results soon hint hint.

This userscript removes all CSS that is only for media="print", and makes the media="..screen.." into media="...screen..., print" so that what you see on the screen is what you will get for your print out of the page.

The Unpleasantry:

Currently if you print a webpage (or go to print preview) you may notice that most sites do not look the same as they do on the screen when you try to print one of their pages. This is because the page has CSS specifically designated for media="screen" which is different than the CSS they use for media="print".

The Alleviation:

Once you install the "Remove Print CSS (WYSIWYG)" UserScript there will be a Greasemonkey menu command that you can use called 'Remove Print CSS' which removes the media="print" CSS and makes the media="...screen..." CSS media="...screen..., print" CSS, which means that the same CSS used for your screen will be used when you try to print a page.

[More]

Librivox is an amazing website that I have been watching for a number of years now, and it helped me out enormously in those awful required Art classes I took while at UBC. Now the site is far more interesting to me as I have some time to read what I wish, and because I find listening to audiobooks, and switching to reading every now and then to be the most efficient way for me to digest a non-technical book.

Librivox is basically just a repository of free audiobooks that were made for free by volunteer netizens like you and I. All you need is a computer with some recording software which is ubiquitous at this point, in fact the iPhone Voice Memo app (which is also available for the iPod Touch) is a great way to do this from the comfort of your favorite chair and couch.

Remember not to be an dick! OK please.

After seeing Jonathan Zittrain's TED talk "The Web as random acts of kindness" on internet kindness I have decided to start a series expanding on the ways which netizens can exercise Online Kindness (OK) which may interest them. Watch for the upcoming suggestions for new ways of exercising your Online Kindness (OK).

The internet has made previously impossible acts of kindness possible, this is something that is plain to see I think, and that these random acts of online kindness only amplify it's significance, so it seems clear to me that every netizen should practice OK as it will only increase the significance of their state.

If you don't use OpenDNS then stop reading and go sign up immediately. Once you have OpenDNS, and have started using the shortcuts feature, then you will notice that the fastest way to create a new shortcut off the cuff is to just type it in to the location bar. Once you do this, OpenDNS will realize that you did not provide a url, and then it will check if the provided string is an existing shortcut, if the string is not a shortcut, then you will be taken to a OpenDNS custom search page which provides a convenient form to create a new shortcut.

The Unpleasantry:

When you have tried a shortcut that does not exist, there is a "Create new shortcut for ..." link for the string that you are provided (if it is a valid shortcut string). When you click this link a form is displayed which you can use to create a new shortcut. The problem is that the form does not auto populate with the string that brought me to the page, which is the string I want to use for the new shortcut > 99% of the time.

The Alleviation:

Once you install the "OpenDNS Create New Shortcut Fix" UserScript the shortcut string is auto populated in the create new shortcut form.

Today I wrote a simple time saving UserScript for Twitter. Often I find myself wanting to look up person's name on Twitter to see if the specific person I am looking for has an account, but the trouble is it has been a process that has always been a few steps too much for much fast past needs.

The Unpleasantry:

Take a look at the current process of searching for someone on twitter.com:

1. First, we have to click the link in the top navigation bar to go to the page that has the search form we want. If you think about this, you can break it down even finer, first you likely have to scroll up the page, and if you want to perform the search in a new tab (as I prefer) you have to right click the link and select "Open in new tab"..
2. Now you must wait for the search page to load and once you are on the search page, and you will have to click on the form field, then type your query, then hit enter or click 'search'.

The Alleviation:

Once you install the "Twitter Find People Search Command" UserScript you have two new and better options to perform a search for a person on Twitter. They are:

[More]