Category Archives: Technical

TinyUrl 2.0 supports multiple services

One of the most requested features for the TinyUrl Creator extension is to support other URL shrinking services like and After some dedicated research and development I have been able to add the following seven URL shrinking services to the latest version of TinyUrl (v2.0):

To change the service you’re using click Tools > Options and select the service from the dropdown list.

If you prefer another URL shrinking service and would like it to be added to this extension, leave a comment here to let me konw. Be sure to check if the service has an API, because if they don’t the extension will have to resort to screen scraping; which is pretty ugly.

Install TinyUrl Creator

Thanks for all your support.

New Feature in the TinyUrl Creator Firefox Extension

Along with upgrading all my extensions to work in Firefox 3 I also added a new feature to the TinyUrl creator extension: Link Preview.

Now the extension will find all links which have a address and add a tooltip to tell you what the actual URL is. Simply hover your mouse over the link for a moment and the tooltip will appear with the full URL. Here’s an example:

TinyUrl Creator with Link Preview

I can’t actually take full credit for this idea, last month my friend Stephanie Trimble suggested it over twitter. Thanks Stephanie for the idea!

I also plan to add support for other URL shrinking services in this feature. Please post a comment here with your favorite URL shrinking service so I can be sure to add it to the list.

You can install the extension from this page:

As always, I really appreciate the support of my users. Thanks.

Extensions for Firefox 3 are LIVE!

I just finished updating all my extensions for Firefox 3! Thank you for your support and patients during this upgrade. The Firefox code and extension API changed a bit which required me to go back and refactor some of the code and deployment scripts. Currently the Firefox 3 versions are only available from my site ( and I’m working on getting them to the official addons site now.

If you have problems with any of the extensions, please leave a comment to this blog post.

Thanks for all your support.

Extensions for Firefox 3

This is just a quick blog post to let everyone know that I will be upgrading all my extensions to support Firefox 3 by the end of this week. I’m sorry for the delay, it has been hard to find time for extension development in recent months.

On a related note, I feel bad that I have not had the opportunity to spend time on my extensions and would like to see if anybody wants to step up and either help me maintain them or take them over completely. If you’re interested, please post a comment to this blog post. I do not check my mozmonkey email much anymore, due to the amount of spam it gets, so the blog comments are the best way to reach me.

Viewing localhost in VirtualBox on your Mac

Heads Up! This post is now very outdated. There’s a MUCH easier way to access localhost in VirtualBox.

Last week I explained how to convert the IE6 – IE8 VirtualPC disk images to VirtualBox on the Mac. This week I noticed something critically wrong, I can’t access localhost or any LAN IP address from inside VirtualBox. This is a huge problem if you want to do local testing in IE.

The problem is that Mac support is still rather early with VirtualBox and they only provide a NAT networking option. I wont explain what NAT is because I don’t completely understand it myself. If you’re on Linux or Windows you can simply use the bridged network and it’ll work fine.

As with any problem, there is a solution! You could go buy VMWare Fusion, which should support this out of the box, but what’s the fun and challenge in that? The fun and free solution is to use a service called DynDNS.

What is DynDNS

If you’re like most people your ISP gives you a dynamic IP, which means that your home network doesn’t always have the same IP address and every so often your ISP will assign you a different one. DynDNS will give you a free domain name that always points to your ever changing home network IP address.

This means that when you’re done you’ll load a URL like “http://<you>” instead of “localhost” inside VirtualBox. This also assumes that you have some sort of web server running on your computer to serve up the pages.

Step 1 – Web Server

Setup a simple web server like Apache or the free version of LightSpeed (free version is at the bottom of the download page).

Make sure the server is installed and running properly before proceeding.

Step 2 – DynDNS Account

Go to DynDNS, register an account and create a new host. The site has good help sections to assist you through any issues or questions you run into. (see the DynDNS How-To section)

After creating the new host, download, install and run the DNS update program. This will update the service with your new IP address every time it changes.

Step 3 – Router

If your network uses a router, you might need to update it’s settings to let the requests through to your computer inside the network. At this point it is important to realize that your router has the “main” IP, which is provided by your ISP, and each computer inside your network will get their own “internal” IP address, provided by the router itself.

First test the new DynDNS URL you created. When you load the URL in your browser does it show pages from your local web server or does the browser sit there and mock you as it endlessly spins the “loading” animation?

If your web server didn’t load anything, you might need to alter your firewall settings and/or setup port forwarding in your router. Start by checking your router manual for information on how to login and change settings on it. On my SMC wireless router after logging in I found the settings I needed under Advanced Setup > NAT > Virtual Server. There I entered the last number from my “internal” IP address (IP on my computer) and the port that should direct to that computer. So if my internal IP is and my web server is setup to respond to port 80, I enter “53” and “80” into the fields.

Step 4 – Static Internal IP

If you had to setup port forwarding in the last step, you should also create a static internal IP on your computer. Otherwise next time you restart your computer it’s IP might be different and your URL wont work.

This step is surprisingly simple:

  1. Open your network preferences
  2. Go to the network you use (in my case “Airport”)
  3. Click Advanced (or similar button — I’m using Mac Leopard)
  4. Go to the “TCP/IP” area.
  5. Change the dropdown menu from “Using DHCP” to “Using DHCP with manual address”
  6. Enter the internal IP address you added to the port forwarding setting in your router.
  7. Done


If you have any problems with the setup, check out the troubleshooting page at DynDns.


Now you should be able to access your local computer from inside VirtualBox with your new URL.

Off to India to do Taining

In a few hours (5.5 to be exact) I’m jumping on a plane to travel from San Francisco to Chennai, India. PayPal is sending me to do the JavaScript training for the Web Development team there.

My plane leaves tonight at 12:05a and lands in Singapore for an 8 hour layover. I expect to leave the airport of a few hours of sight seeing and sampling the local food. Then I jump back on the plain to hop over to India.

I’ll be in India for 2 weeks and doing the “Intro to JavaScript and DOM Scripting” class for half the team each week. Over the weekend my boss, Kimberly Blessing, and I will be traveling up to Agra to see the amazing Taj Mahal. I’ll be taking lots of pictures and posting them on Flickr along the way. I love how every time I tell someone I’m going to India their eyes light up and they instantly have stories and advice for places to go and things to do — it’s fantastic! (and yes I’ve had my shots, pills and will avoid the water)

OK, off to finish packing now. Wish me luck!

Semantic Tab Box v2.0

Heads up! This was written in 2007 and many things have changed since then. This is probably not the most modern approach.

Last year I came up with the original semantic tab box, now I’m improving it. Here are the things I wanted to fix:

  • Keep JavaScript unobtrusive — no inline event handlers and needs to work without JavaScript.
  • Create a standard API that can be easily reused and customized.
  • Make the markup more flexible.
  • Support both vertical and horizontal tabs.
  • Don’t constrain the height of the box — let it expand to the size of the content.
  • Keyboard navigation.

How is this better that other tab boxes out there?

All the tab boxes I’ve seen overcomplicate their solutions. They start with an unordered list of the tab names, followed by the content blocks. With a bit of CSS this looks very nice, but for screen readers the content is disconnected from the tab names and can be very confusing. Just try turning off CSS, you’ll see how horrible this looks:

The Internet is a worldwide, publicly accessible network of interconnected computer networks that transmit data by packet switching using the standard Internet Protocol (IP).

Accessibility is a general term used to describe the degree to which a system is usable by as many people as possible.

Progressive enhancement is a label for a particular strategy of Web design that emphasizes accessibility, semantic markup, and external stylesheet and scripting technologies…

Notice how the content is disconnected from the “tabs” when CSS is disabled (or when being read by a screen reader).

To solve this problem, most people just duplicate the tab name with a header (h2, h3, etc) at the top of each content block and use CSS to hide them from visual users. Here’s an example of what this solution looks like without CSS:


The Internet is a worldwide, publicly accessible network of interconnected computer networks that transmit data by packet switching using the standard Internet Protocol (IP).


Accessibility is a general term used to describe the degree to which a system is usable by as many people as possible.

Progressive Enhancement

Progressive enhancement is a label for a particular strategy of Web design that emphasizes accessibility, semantic markup, and external stylesheet and scripting technologies…

Sure this works, but why the redundancy? Yuck!

My solution gets rid of the unordered lists and formats the content blocks logically — with header tags.

Enough talk…

…lets get to the examples:

In <head>

<script type="text/javascript"> var tabs = new Tabbox("editorTabs") </script>

In <body>

<div id="myTabbox"> <!-- Internet Tab --> <div class="tabPanel selected"> <h3><a href="#interWebTab">Internet</a></h3> <div id="interWebTab" class="tabContent"> <p> The Internet is a worldwide... </p> </div> </div> <!-- Accessibility Tab --> <div class="tabPanel"> <h3><a href="#accessTab">Accessibility</a></h3> <div id="accessTab" class="tabContent"> <p> Accessibility is a general term used to... </p> </div> </div> </div>

Pretty simple huh?

Accessibility and Non-JavaScript Support

This new version supports accessibility by using CSS to hide the content divs (<div class="tabContent">) off screen, instead of with the unaccessible display:none CSS property.

These CSS classes are applied with JavaScript, so the content will be viewable if JavaScript is disabled or broken on the page. Try viewing the examples with JavaScript disabled and you’ll see what I mean.


To setup the tab box all you need to do is initialize the Tabbox object with the main div ID:

var box = new Tabbox("myTabbox", { header: "h3",
                                   vertical : true,
                                   select: 1,
                                   autosize: true });

All the values in the second parameter are optional:

Name Default Description
header “h3” The header element used for each tab name. This element cannot be used anywhere else in the content block.
vertical false If the tabs should be oriented vertically. The tabs are setup horizontally by default.
select 0 The tab index to select initially.
autosize true Automatically size the box to the content of the tab.

The code has been commented and layed out logically so updating it with features and enhancements should be easy. Speaking of enhancements…

Advanced Example — Hey Look! Something shiny.

So far the examples have been rather simple and plain so I wanted to create one that was more advanced. This example has a more complex UI, animations and implements the YUI history manager. Now when you change tabs it adds history to your browser and the back button will select the previous tab. Check it out — it’s the Über-Cool, Shiny, Tab Box.


Now that you’ve seen the examples, you can download all the code and use it on your site: (46K)

“display: none” is NOT Accessible

Just a quick note to say that using “display:none” is not as accessible as many web developers think. I know I fell into this in several of my earlier examples. The general though is: “To keep my app accessible I need to include content that will only be read by screen readers and not to my visual audience”. This type of content can include submit buttons for simple dropdown lists, textual headers and content that needs to be hidden until a browser event occurs. The simple solution is just to add “display:none” to that element to hide it from view — but this is wrong.

The problem is that modern screen readers do understand CSS and if you use “display:none”, they will assume this content should be ignored and will skip it entirely. This of course was not your intention and leaves all that work and consideration for nothing.

A better solution is to hide the content off-screen until you need it:

.accessible { position: absolute; top: -9999px; left: -9999px; }

You’ll find that once you start supporting accessibility through Progressive Enhancement (Hijax), development becomes more straight forward and easier to maintain. Keep it accessible.


The Web Design [and developer] Survey, 2007

From A List Apart:

Designers, developers, project managers. Writers and editors. Information architects and usability specialists. People who make websites have been at it for more than a dozen years, yet almost nothing is known, statistically, about our profession. Who are we? Where do we live? What are our titles, our skills, our educational backgrounds? Where and with whom do we work? What do we earn? What do we value?

It’s time we learned the answers to these and other questions about web design. And nobody is better qualified than the readers of A List Apart to provide the answers. Participate in our first annual survey to increase knowledge of web design and boost respect for the profession. Selected participants, chosen by random drawing, will win one free ticket to An Event Apart event held in the continental U.S.; an Apple 30GB video iPod, an Event Apart jump drive, or a funky A List Apart T-shirt.

This survey is so important for our industry. How often have you wondered where your salary fit within the industry standard? Are you being paid enough? How do you rank among your peers? Of course these questions are taboo to ask of coworkers, but this survey will help break the ice.


I Took the survey

I’m Naked and it feels great…

…a bit brisk though.

If you’re wondering why my site is missing it’s design and appears a bit ‘naked’, it’s because I’m participating in CSS Naked Day ’07. To support web standards this site will be naked on April 5th.

CSS Naked Day is the brainchild of Dustin Diaz:

“The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of (x)html, semantic markup, a good hierarchy structure, and of course, a good ‘ol play on words. It’s time to show off your <body>.”