UbuntuForums.org Site Makeover via UserJS

40915_before

A while back there was a neat little styling script being passed around that tuned the Ubuntu Forums to match the new official designs a little more closely. While its not official and no where near a perfect solution, it does dramatically improve the appearance of the forums overall.

Before

After

To use this, all you have to do is download and install the Stylesheet or UserJS file and configure it in your browser! I’m using the UserJS version, but you may prefer the other. Either way, enjoy!

Ubuntu 10.10 Banner

38

Recently I was looking through the Ubuntu 10.10 banners and really liked the simplistic design of one by Anthony Scarth.

Curious about adding it to my blog (as you should now see in the right column), I fired him an email. Unfortunately he didn’t have a script prepared, but still offered up the images!

Taking a little time, I grabbed the old script for an Ubuntu 10.04 Banner, made a few modifications (and corrections) and got the banner up and ticking in no time!

If you’re interested in using one of these two banners on your site then you’ll be happy to know I’m posting easily linkable scripts to these two right here!

Orange
<script type='text/javascript' src='http://www.kyleabaker.com/fun/ubuntu1010banner/orange.js'></script>

Purple
<script type='text/javascript' src='http://www.kyleabaker.com/fun/ubuntu1010banner/purple.js'></script>

Copy and paste the style that you’d like to use into your blog or web site. If you have any problems just let me know.

Be sure to give Anthony a shout out and thanks if you like his design as well! You can find his email listed on the Ubuntu banners page linked above.

Sputnik: ECMAScript 3 conformance test suite

An experimental plot to illustrate how the latest stable browsers compare.

Today, The Chromium Blog has officially released their ECMAScript 3 conformance test suite in a form that is more friendly to test in your browser. The test contains over 5,000 tests (currently 5,246) and continues to grow!

The Chromium Blog has also posted some initial results among the top web browsers for Windows (emphasis is mine).

In this example, when running Sputnik on a Windows machine, we saw the following results: Opera 10.50: 78 failures, Safari 4: 159 failures, Chrome 4: 218 failures, Firefox 3.6: 259 failures and Internet Explorer 8: 463 failures.

An experimental plot to illustrate how the latest stable browsers compare.

Putting that into terms of 100% conformance rates: Opera 10.50: 98.5% successful, Safari 4: 97.0% successful, Chrome 4: 95.9% successful, Firefox 3.6: 95.1% successful and Internet Explorer 8: 91.2% successful.

Running the test myself in the latest Opera 10.50 snapshot for Linux (Build 6242) I’m seeing a solid 77, proof that Opera 10.50 is progressing still!

As explained in their post, the goal of this test is not related to Javascript performance in terms of speed, but in terms of conformance to the spec. Ideally all browsers would be in the center of the bullseye, meaning they all conform and behave (nearly) identically.

The Sputnik tests have been released as an open source project, so if you’re interested in providing conformance test cases to improve the future web..now is a perfect chance to get involved. ;)

To run the test yourself or learn more about it, visit: http://sputnik.googlelabs.com/

UserJS: Twitter-Rounded

twitter-css-2-opera

I’ve thrown together a quick script for Opera that you can use if you’d like to see rounded corners (aka border-radius). It seems that Twitter currently sends Opera a style sheet with empty settings for rounded corners…

…so, all I did was write a script that will insert a link to a style sheet that’s stored here at kyleabaker.com which overwrites these empty styles with the correct ones.

If you’ve never used scripts before then you should first learn how to setup UserJS. After you’ve setup Userjs, you may need to enable UserJS for secure pages (https) in Opera’s internal configuration page….”opera:config#UserPrefs|UserJavaScriptonHTTPS“. Just check/enable that option. Make sure to click save!

Lastly, save the “Twitter-Rounded” script to your UserJS folder that you setup in the steps above.

Now you have a more pleasant looking Twitter page in Opera 10.5. ;)

WP-TwitterBadge v0.2 Released

After taking some time to track down a bug that seems to only affect Internet Explorer 6 (why on earth did I bother?) I’ve finally released an update that fixes the error.

After getting several comments about users experiencing errors with this plugin while using IE6 I finally gave in and patched the little bug. Why are they still using IE6?

…well, it works fine now…as far as I know. I’ve had a few people test it with no errors as well as myself, so hopefully if you couldn’t use it before it will work fine now.

To find out more about this WordPress plugin, go to it’s main page. You will find all released versions there (past and present) as well as a link to the official WordPress Plugin page. Feel free to leave feedback!

New: Netflix Watch Instantly Timer

netflix-watch-instantly-with-userjs

I’ve just posted a User Javascript file that allows you to get a quick glance at the total time that you’ve spent watching Netflix Watch Instantly programs.

netflix-watch-instantly-with-userjs

So far I haven’t had enough time to make the script Greasemonkey compatible, but it should be shortly. For now, it works great with Opera.

Thanks to @fearphage for helping me get this sorted out with Greasemonkey as well!

Head on over and grab the script so you can keep tabs on how much time you spend watching tv…online…on netflix. ;)

Why Browser Sniffing is a Bad Idea

For many web developers, browser sniffing has become almost routine. Have you ever noticed that short list of “supported web browsers”?

While browser sniffing may seem like a good idea at first, you may be setting yourself up for problems later.

The biggest problem with browser sniffing is that it is usually relied on far too heavily to even consider removing later. The inner workings of a site can be based (unknowingly sometimes) around working specifically for specified web browsers and nothing more.

One poor use of browser sniffing that I came across today was for EyeWearSelect.com and it just so happens to be an easy fix.

On one of the EyeWearSelect pages, they show a thumbnail preview of a pair of glasses. Below the image is a link entitled “Click to Enlarge”, which uses some javascript to show you a larger picture in a pop-up window. Here’s how they begin the pop-up script..

if (parseInt(navigator.appVersion.charAt(0))>=4){
var isNN=(navigator.appName=="Netscape")?1:0;
var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}

Basically, the script says…true or false…this is Netscape? Also, true or false…this is Microsoft (Internet Explorer)? ..but what if you’re not using Netscape or Internet Explorer? What if you’re using Opera? or Konqueror?

If you’re using a browser that doesn’t match Netscape or Internet Explorer, then the future checks for isNN and isIE will never match and your browser will be “incompatible” with the scripts. In this case, the incompatibility is that the author never made it possible for those that are compatible.

A simple fix for this would be to change that bit of code to the following, which would basically check for Internet Explorer and then treat all others differently..

if (parseInt(navigator.appVersion.charAt(0))>=4){
var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;
var isNN=!isIE;}

They won’t always be this easy for developers to correct, but this script could actually be cleaned up much more than just that.

In most cases, browser sniffing isn’t needed. The more efficient method to follow is capability testing.

If your code requires a web browser with capabilities that others (or not all web browsers) have, then you can use browser sniffing which is a form of hard coding the compatible web browsers…or you can test the browser’s capabilities and see if the javascript that you need to use will be supported.

By using the second method, you make your script much friendlier to the future of both the web and it’s browsers. You will also save yourself some work by not having to update the script each time you want to support another browser that would already be capable of using your script if it weren’t blocked in the first place. ;)

If you run compatibility tests and find that a certain feature will not be available, that’s the time to announce that the user should update their browser or use a different one all together.

Of all of the times that I’ve seen browser sniffing, only a couple have every been properly used. One of those was a browser sniffer that would display instructions and images explaining how to download and save a file to your computer. The images were of course specific to the browser that I was using for a more useful set of instructions.

If you should happen to come across a web site that suggests that your browser is not compatible, fire off an email and let them know that you would appreciate more accurate scripting and detection for your web browser let them know that you would appreciate more accurate scripting!

New WordPress Twitter Badge Plugin!

wp-twitterbadge-01

After coming across this nifty little Twitter Badge at Techie-Buzz while reading a Google Chrome OS article, I realized how cool their little Twitter link was and I instantly new it was going to be on kyleabaker.com as well. :D

wp-twitterbadge-01

After a quick look at the source code of the page, I had decided to build a quick plugin for WordPress to insert the same code. So the plugin process began.

I didn’t want to hard code it into the footer of my K2 theme, because I frequently update to the latest K2 theme nightly builds. This way would save me a lot of trouble and even make this neat little Twitter Badge available to thousands. And so…WP-TwitterBadge was born.

wp-twitterbadge-02

I traced the code back to an embeded script from go2web20.net and realized how n00b friendly this script would have been to install anyway even without an easier plugin to install it for you, but the fact that it would save me time in the future was well worth it.

Basically, if you’re not using the WordPress plugin, you just link the script and set a few variables. This made it very easy to make it customizable as well!

Just mimicking their own setup page, I was able to make a quick Options page featuring a live preview (as all of my plugins have so far ;) ). I even coded the preview with way less script than they used on their own page since extreme error checking is really not needed (everything is live so you can see the problems there).

wp-twitterbadge-03

At a rate of 20-30+ new downloads per hour I would say that this plugin is by far my most favored project…considering that it hasn’t been reviewed yet (no trackbacks thus far) by anyone whereas others already have.

If you’d like to checkout this little Twitter Badge on your own site, just head over to the plugin page or search for “WP-TwitterBadge” from your “Add New Plugins” page in WordPress and install it from there. If you like it, pass it on!

WordPress Plugin WP-UserAgent 0.8

wp-useragent-0-8-img1

I’ve just updated WP-UserAgent to version 0.8, covering a lot of ground over the past few days. As I’m working to reach a stable and solid 1.0 release, I’m also working towards a feature complete plugin.

Version 0.8 offers support for detecting ~90 different web browsers and ~35 different operating systems (counting each version of windows).

wp-useragent-0-8-img1

Easy access to WP-UserAgent settings is worked right into the Plugins page. No more need to search for options to edit!

Once you find the options page, you’ll find a cleaned up look and feel, along with a real-time preview of how your changes will appear.

wp-useragent-0-8-img2

If you’re in need of a cool geeky WordPress plugin, why not give WP-UserAgent a shot? It’s an interesting way to find out a few details about your subscribers and other visitors!

Find out more details, changelogs and downloads on the official WP-UserAgent plugin page.

Google Translator v2.4pre1

screenshot1

I’ve spent some time today improving my Google Translator widget for Opera. You can find the changelog here, but I’ve uploaded a screenshot of the tab changes that I made.

Basically, I just made it follow the layout of the Google Chrome browser a little more closely. In version 2.3 I was going for more of a Gmail design with the folder style, but it was difficult to work with since I had to make it hide a little to make more room. This change will actually help me with my next big feat…making the widget resizable.

Here is the screenshot comparing v2.3 to v2.4pre1:

I’ve had a lot of good feedback on this widget with over 114,000 downloads (currently at 114,174). The one feature request that continually comes up is for a resizable version.

Unfortunately it’s not as easy as one might think so it’s taken some time to change my code. It’s been completely rewritten for a third time now as each time it becomes more and more optimized and fluid.

I’m hoping to satisfy everyone with v2.5 which should be the first resizable build so stay tuned.

Pushup: Pushing Up The Web

1up

Today I came across an interesting web site with the goal of keeping people notified when their web browsers are out dated. It’s called Pushup.

It’s a simple project and it’s something that you install on your website so you yourself can make a difference online.

In short, Pushup is a simple javascript file (images and css included) that detects the browser bring used when you visit a web site using it. After detecting the browser and browser version it does one of two things:

  1. If the browser is outdated: It will display a simple and elegant message notifying the user that there is an update available to the browser they are using and even include a link to the download page.
  2. If the browser is not outdated: It will stop the script and the visitor will see nothing.

You can download a compressed file containing the javascript, images and css from the Pushup homepage. After that it’s as easy as adding these lines to the header of your web site:

<link rel=’stylesheet’ type=’text/css’ href=’css/pushup.css’ />
<script type=’text/javascript’ src=’js/pushup.js’></script>

Depending on your directory names you may need to slightly adjust those paths. Other than that it works immediately (clear your header cache if you’re serving cached files if you want to see it immediately).