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>.dyndns.org/” 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 192.160.2.53 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

Troubleshooting

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

Done

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

The good news is that Microsoft provides free VirtualPC disk images for each of their browsers:

http://www.microsoft.com/downloads/details.aspx?FamilyId=21EABB90-958F-4B…

The bad news is that they wont run on Mac and VirtualPC wont run inside Parallels or VMWare Fusion — but I’ve found a solution! We can convert the disk images to work for VMWare Fusion or VirtualBox.

Setup

First go and download the versions of IE you want to use:

http://www.microsoft.com/downloads/details.aspx?FamilyId=21EABB90-958F-4B…

To do the conversion you’ll need a copy of the Qemu command line tool. I couldn’t get it to work on Mac, so you’ll probably need to use it on a Linux or Windows machine. (you can do this through Parallels or VMWare Fusion too) Download, extract and install Qemu tool on your computer.

Linux

WILL NOT work on windows because it was not compiled to support files over 2GB.
http://fabrice.bellard.free.fr/qemu/

Windows

Download “Qemu-0.9.1-windows.zip” from:
http://lassauge.free.fr/qemu/

VMWare Fusion

This is the easiest way to go, except it means you’ll need to buy a copy of VMWare Fusion — whereas VirtualBox is free.

The process will probably take less than an hour and require about 2Gb of space. These instructions are tailored more towards Windows for the file conversion. If you’re using Linux you’re probably smart enough to adapt these instructions to your system.

1. Open a command prompt: Start > Run and type “cmd”
2. Use “cd” to go to the directory you download and extracted Qemu.
3. Run:
   qemu-img.exe convert -f vpc "XP SP2 with IE7.vhd” -O vmdk XPIE7.vmdk
   • “XP SP2 with IE7.vhd” is the path to the IE VPC file you downloaded
   • “XPIE7.vmdk” is the new file that VMWare Fusion will use.
4. Wait…(will probably take 15 - 30 minutes)
5. Move the new “.vmdk” file to your mac.
6. Open VMWare Fusion and click File > New
7. Go through the wizard and when you get to the “Virtual Hard Disk” page, expand “Advanced disk options”, check “Use an existing virtual disk” and use the dropdown to find the new “.vmdk” file.
8. Finish the wizard and start it! (If prompted to upgrade the virtual harddrive, click “Yes”)
9. Be sure to install the VMWare tools (Virtual Machine > Install VMWare Tools) as soon as Windows boots up. If installing the tools gives you a weird error, read the next section.
10. You’re done!

Installing the VMWare Tools

If the VMWare Tools wont install automatically follow these simple steps to install it manually:

1. With VMWare Fusion running click Virtual Machine > Install VMWare Tools
2. Open your “My Computer” to see which drive letter the CDRom with the VMWare Tools has mounted to.
3. Open a command prompt: Start > Run and type “cmd”
4. Type the following and press enter (change “D” to the drive letter from step 2):
   • msiexec -i "D:\VMware Tools.msi"
5. The installation wizard should open and walk you through the rest of the install.

VirtualBox

The great thing with VirtualBox is that it’s free and available for most OSes! The process will take a little longer and will temporarily require about 20Gb - 30Gb of disk space. In the end your IE virtual disk will only be about 2Gb.

You might be tempted to do the VMWare Fusion conversion, outlined above, and use the “.vmdk” file in VirtualBox. It’s true that VirtualBox supports “.vmdk”, but everytime I tried it I ran into massive problems.

These instructions are tailored more towards Windows for the initial file conversion. If you’re using Linux you’re probably smart enough to adapt these instructions to your system.

1. Open a command prompt: Start > Run and type “cmd”
2. Use “cd” to go to the directory you download and extracted Qemu.
3. Run: qemu-img.exe convert -f vpc "XP SP2 with IE7.vhd” -O raw XPIE7.bin
   • “XP SP2 with IE7.vhd” is the path to the IE VPC file you just downloaded
   • “XPIE7.bin” is the new file.
4. Wait…(will take about an hour)
5. Move the new “.bin” file to your mac. (or try the next 2 steps on the same machine)
6. Install VirtualBox
7. Convert and compress the “.bin” file. (This can also be done on Windows or Linux if you have VirtualBox on that machine)
   1. Open a terminal or command prompt.
   2. Go to the directory where your “.bin” file is.
   3. VBoxManage convertdd XPIE7.bin XPIE7.vdi (FYI: on Windows, VBoxManage is in “C:\Program Files\innotek VirtualBox\”)
   4. VBoxManage modifyvdi XPIE7.vdi compact
8. Open VirtualBox
9. Click New
10. Go through the wizard
    • Give it at least 350MB of “Base Memory”
    • Use the new “.vdi” file as the “Boot Hard Disk”.
11. Finish wizard and start it!
12. Be sure to install the VirtualBox tools as soon as Windows boots up.

Now you can have all IE versions running on your Mac. Enjoy!

So please checkout my instructable and give it a vote!

Plagiarism Claims

Some people on the site have already added comments accusing me of copying KipKays video. On closer inspection you’ll notice that he posted that video a whole 8 months after my original post. In fact his video follows exactly the same steps and procedures that my instructions outlined. I’m not mad, I think his video is excellent and I’m glad somebody took the time to do that. However, I would have liked him to give credit where it is due.

To take other peoples work and claim it as your own is wrong.

Thanks for the vote

With that said, checkout my new instructable and if you like it, throw it a vote. Thanks!
California home loan mortgage refinance loan california
Home equity loan calculator
Credit life and disability insurance
Credit repair business
Disability insurance canada
Consolidation debt elimination
Student loan servicing center
Student loans apply online
Mint credit card uk
Repairing credit score
Advantages of whole life insurance
Buying life insurance
Credit report fico score
Federal long term care insurance
Payday loan calculator
Fair credit and reporting
Best airline credit card
Credit card offer
Low cost health insurance
Card credit interest low
Broker commercial loan mortgage
Payday advance loan
Experian credit score
Missouri payday loan
Instant credit score
Instant issue life insurance
Creditreports
Illinois auto insurance
Three major credit reporting
Uk home loan house refinance mortgage rates
Consumer credit reports
Credit reporting bureau
Leads insurance annuity
Do credit scores
Irs tax debt relief
Accept card credit
3 bureau credit report
Federal home life insurance company
Long term care insurance policies
Discount life insurance
Dispute credit reports
Fha home loans
Credit cards no apr
Legal credit repair
Student loans consolidated
Free credit score only
Credit card application for
Clean credit report
Creditreport
Extended auto warranty california
Debt relief settlement
Online auto loan
Health insurance quotes texas
Credit report identity theft
California home equity loan rates
Government free credit reports
Credit repair sample letter
Canadian credit report score
Compare renters insurance
Auto loan rates
College student loan
Rhode island health insurance
Credit immediately online report
Term vs Whole life insurance
Instant payday loans
Renters insurance co
Best credit card offer
For credit reports
Free credit repair letter
Home loans bad credit
Cancer health insurance
Student loans for bad credit
Online credit report
Denver home refinance
Bad credit california home loans
Repairing bad credit
Credit report laws

Parallels vs. VMWare vs. Entourage

I’m a mac user who works in a PC environment. As such I have to learn to work with MS Exchange in the best way possible. I’ve tried Thunderbird with IMAP — but that simply didn’t work since I couldn’t schedule or respond to meetings.

Eventually I went with Parallels so I could use Outlook on my mac. It worked well, not great, but good enough for my purposes. My biggest problem was that somethings just didn’t seem to work well. For example after the computer would wake up from sleep Parallels thought it would be a good idea to reopen the apps that were already running. So windows would have 5 new Outlook processes and 3 new IE processes open at the same time. This can be very annoying.

So this week I decided to try out VMWare Fusion. Everyone I’ve talked to says it’s awesome and so much better than Parallels. I was very optimistic and downloaded the demo and imported the Parallels vhd into it. Unfortunately I found VMWare to be kludgier than Parallels. More specifically:

Problems with VMWare Fusion

• Often times ran slow, or had a significant delay when I tried to access it.
• It doesn’t know I have a dock and when I maximize widows, they expand under it.
• (the kicker) No cross application support. For example, when I click a link in Outlook it opens in the Firefox on Windows. I want it to open in Firefox on the mac side.

Parallels doesn’t have these problems, so I am back to using that.

Except that’s not the end of the story. I also won a copy of Office 2008 for Mac at the Geeks Love Bowling event at SXSW. We didn’t win for the most points, but for consuming the most alcohol; we had to live up to our team name: “The Beer Liberation Front”. (See Pictures).

I got excited that Entourage in Office 2008 might actually be usable. After installing it I was impressed — the UI looked great and the calendar wasn’t pink! (Entourage 2004 was pink) Entourage is very usable but I still fell back to Outlook because I couldn’t totally get used to it. Here are some points:

Problems with Entourage 2008

• Local folders are far down on the left bar, so you have to scroll to get to most of them.
• Not many options to customize.
• Sorting email by “conversation” doesn’t build the message tree like Outlook, so you don’t really know who replied to which message.
• Not as easy to skim through the email list.
• NO WAY to directly import PST files from Outlook (The same company produces both of these products, right?)
• (the kicker) Dragging an email to your local folder COPIES it instead of moving it! How does that make sense?

Overall these are mostly small issues, but the app wasn’t good enough to make me totally switch to it. Maybe someday.

Pandora vs. Last.fm

I’ve been using the Pandora music player for the last 6 months and have found so many great new artists through their music recommendations; I love it. They’ve always had big advertising around the player, and I never minded. They provide a valuable service to me and I think they should get paid for that. The problem is this week their player took a turn to the dark side: It would play a song or two, but refuse the next one until you put focus on the browser window with the player. This is unacceptable! I cannot stop what I’m doing every 5 - 10 minutes to jump to that page just to get another couple songs!

This was enough of a push to send me to try another thing that I’ve been hearing everyone rave about: last.fm. With so many people talking about it, it must be good, right? I signed up, downloaded the software and “scrobbled” (WTF?) my itunes library. Coming from Pandora I expected that by having their program send the titles from my itunes library to my account it would know what I like and give me recommendations on that. No luck. It didn’t tell me what to expect from it, so I decided maybe it was waiting for me to listen to some music first.

I open the player and entered “Pink Floyd” — my favorite band — and pressed play to listen to them and similar artists. Nice so far. I have a rather eclectic music taste so as much as I like Pink Floyd I don’t want to listen to them and similar music all day. In Pandora can setup stations and add a range of artists like Metallica, Ludo, Booker-T and the MGs, RJD2, Moby, Bob Marley, etc. The point is I like my music to switch up ever couple of songs and give me a different sound. Last.fm wont give that to me.

It feels very restrictive. I have to pick an artist or genre and I can’t add anything to it. If I get tired of the music selection I need to start over. The site isn’t helpful either. No real instructions or guidance, they just expect that you get it or are going to take the social approach and search for users like you. I’m sorry; I just want to listen to good music.

For example, take the following screen (notice it tells me the recommendations are a “Sample”):

It says that there aren’t any “real” recommendations for me yet because…why? It read my itunes library, I’ve listened, and scrobbled, a lot of songs. So at what point is it going to recommend something to me? I’ve done everything it has asked me to do. BAD USER EXPERIENCE == FAIL!

The good news is that I’ve found that several projects that have created desktop applications that play music from Pandora and they don’t have the stupid “pause” behavior that is present in the web player. So I’ve downloaded PandoraBoy and can now groove to my stations. In fact as I type this blog post Pandora is playing a list of fantastic selections — I’m very pleased. (at this second it’s playing “Sunday”, by Moby)

Summary

So at the end of the week, even though I’m back where I started, I’m happy I tried these products and got a taste for what’s out there. It seems I was using the better apps to begin with. Big Win!

Sadly I returned with what is now widely known as the SXSW Scurvy! It seems everyone who went to the 5 day conference came back with a bad strain of the flu. To make everyone feel better Stephanie Trimble, Josh Gillick and I put together a giant Get Well card and patient registry for all who are infected.

Not only did I return with the scurvy, I also came back with a sprained ankle and now I need to wear this walking boot for 4 - 6 weeks.

All-in-all though, it was totally worth it. I extended my network in many important directions and had a great time with friends. I’m already planning a list of panel ideas in hopes of actually speaking at the 2009 conference. The ideas are revolving around JavaScript, how social sites connect people in real life and easy progressive enhancement techniques. I’m hoping that next year will have a stronger technical path and design panels with fresh information and strategies.

More photos from SXSW.

It was great to finally meeting all the people who I had been exchanging emails with over the past 14 months at PayPal. There is something very human and refreshing when you put a face to the name. The training went very well and both weeks were very interactive with lots of great questions and discussions. We were able to get through beginning JavaScript and ended on intermediate OO JavaScript techniques. Everyone was really friendly and always made sure Kimberly and I were comfortable and having a good time.

While I was there I also received a comment on my blog asking me to do a talk at a local webcamp in Chennai. Even though I wasn’t able to make it out to that, it was very flattering to receive a request out of the blue like that. Thanks Prabhu!

Over the weekend we flew up to Delhi and Agra to see the Taj Mahal and a few forts. There aren’t words to explain how amazing of an experience it was. From seeing the amazing architecture and history to watching people putting the time, heart and pride into making a marble inlaid dinner table which takes a full year and a half to complete.

After the 2 weeks were complete I realized that it truly wasn’t about the training; it was about the people. There’s not enough room on my blog to thank everyone who affected my journey, but I want to say a special thanks to Guru Prasath and Reena Bansal. Guru made sure Kimberly and I were always comfortable and not getting ourselves into too much trouble and Reena became our tour guide through Delhi and helped us negotiate good prices for things in the market and let me borrow he camera when mine ran out of battery.

See more pictures…

After I returned to California I had 6 days to readjust before jumped back on a plane to head down to Austin, Texas for 5 days at the SXSW Interactive conference. More on that later…

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!

I still would like to contribute to a SXSW topic, so if you’re putting together a panel and need another person, let me know. Personally I specialize in standards based web development where my target areas are:

• Unobtrusive and accessible JavaScript
• Semantic [X]HTML/CSS
• Logical use of XHR (i.e. don’t use it for everything — only where it matters)
• Discussing where certain Web 2.0 and Ajax patterns are over used and abused

If you’re interested, leave me a comment below and I’ll get back to you. Don’t send me an email since I get too much spam at my public address.

After a little research I found a tool, called TwitterGram, which does just this. You enter your Flickr username and Twitter username/password and it will automatically send updates to your Twitter log when you upload a photo. Unfortunately it didn’t work for me, so I went ahead and made my own which you can download and run on your servers!

My script starts by reading the Flickr feed (rss or atom), checks for new images that were uploaded within the last 12 hours (this can be set by $timeout — see configuration), gets the TinyUrl for each new photo and sends it with the Flickr title to Twitter.

Setup

• Download the script.
• Upload it to your PHP enabled web server.
• Set configuration options
• Setup a cron job to run this script as often as you want.

Configuration

The options PHP variables at the top of the file.

$twitter

The username/password for your twitter account

$flickr

The flickr feed URL to watch. This must be in atom or rss2 format. NOTE: RSS1.0 does not have timestamps and can cause duplicate entries or other unexpected behavior.

$cacheFile

This file holds the last 50 flickr image URLs uploaded in PHP serialized form to prevent duplicate entries.

$timeout

Filters out photos from your stream that were uploaded before this number of hours ago.

$debug

Set this to TRUE if you want to test the script and do everything but send the message to twitter.

Flickr Feed

Using a Flickr feed lets you limit the Twickr tweets to a specific tag. Here’s how to get the feed URL:

• Login to Flickr
• Click “Your Photos”
• Add the following to the end of the URL “tags/twickr/” (change “twickr” to any tag you want to limit the app to)
• Click the RSS icon () towards the bottom of the page.
• The page that loads is your Flickr feed, copy that URL into your $flickr configuration variable.

Testing

Before finishing the setup be sure to test it. Edit the script and set $debug to TRUE and then run it from the command line:

php -f twickr.php

A common error will be “Permission denied” when it tries to create the cacheFile — which is used to store the URL of the last 50 images tweeted to prevent duplicates. This file is saved in the same directory as the script. Be sure the user which calls the script has access to write to this directory.

Remember to set $debug back to FALSE when you’re ready to use the script for real.

Cron Job

If you’ve never setup a cron job before, use this command:

sudo crontab -e

The to have the script (which in my case is at /usr/local/bin/twickr/twickr.php) run every 10 minutes enter the following as it’s own line:

0,10,20,30,40,50 *   *   *   *   php -f /usr/local/bin/twickr/twickr.php

(More information about cron)

Now whenever you upload a photo to flickr with the required tag it’ll automatically send a tweet with the Flickr image title and URL (as a TinyUrl).

Download

Download or get the latest from my SVN repository.

Web Service

If you do not have a web server or are want to have somebody else host the script I’m considering putting together a simple site to do just that for you. If you’re interested let me know in the comments and subscribe to my blog to hear about updates like this in the future.

Updates

Subscribe to my blog to learn about updates.

An example I saw today, and what compelled me to write this post, was when I dropped in on the PunBB website (http://punbb.org/). It tells me “It’s called PunBB. It’s the only way to fly.”, hmmm, OK sure, whatever that means. Then the main column part of the page is News, with the developers talking about milestones and progress and other stuff they’re doing on this mysterious product. Why wont you just come out andtell me who you are? When you finally look around and discover the “About” link, you find out that “PunBB is a fast and lightweight PHP-powered discussion board.” Oh, why didn’t you say so?

This is a perfect example of poor design and user interaction. As a web developer or designer you should always ensure that the user immediately understands what you do as soon as they hit your site. Don’t waste your homepage with talking about progress and milestones; put that on another page. At most you should only have the latest update on the homepage and all other news on a dedicated page. If you forget this many users will come, glance around the homepage, be confused and run away with a negative feeling about your website — not the product. This is dangerous because that feeling will last and can mean they’ll never use your service or product.

PHP Nuke (http://phpnuke.org/) is another example of this. This site does have a tagline, although you might have to look for it: “Professional Content Management System - Official Website”. Unfortunately that’s the last bit of coherent content you’ll find. So tell me more about this professional CMS. Half the links send me to pages with content which doesn’t help me at all. Cut down on the links and the noise. Put the most important information and links for new users at the top.

Don’t fall into the same bad habits. Take time and care to make sure your homepage is clear, self explanatory and easy to navigate — you know what they say about first impressions.

This panel will explore these solutions and talk to the people who helped to create them in an effort to find the perfect recipe for self maintaining documentation.

The only way panels make it into the conference schedule is if people vote for them. Vote for it here:
http://panelpicker.sxsw.com/ideas/view/241

You only have until Friday September 21!

Thanks for your vote! <Presidential Wave>

• 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:

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:

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:

• Simple-Horizontal: A simple horizontally oriented tab box.
• Simple-Vertical: A simple vertically oriented tab box.

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.

API

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:

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.

Download

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

If you’re going to be there, lets get together for some drinks and general geekiness. Leave a comment below with your email (which will be kept private) and I’ll get back to you. Don’t send me an email, because my @mozmonkey email system is not working right now.

If you see me there, reach out a hand and say “Hello”. Here’s what I look like. And here’s a more recent picture by Dustin Diaz on the 4th of July.

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.

–

Discuss…

Lost has been loosing much of it’s audience for exactly these reasons. Instead of the producers fixing the problem, they instead narrate a review episode, called “The Answers” where they explain all that we have learned throughout the series. The episode felt like they were trying to convince all of us that there have been answers — really — we must not have seen them. The problem is that the answers so far are either not directly part of the main plot line or open other questions.

The types of answers that don’t matter are things like how Locks’ Dad is the same person that conned Sawer’s parents. Or that Jack’s father is also Claire’s dad. Oh and Kate killed her father. Do the producers have “daddy” problems? How about how the girl Sawer conned helped Kate later on — that was really important, right? These things are interesting, but don’t give a whole lot to the story. They really aren’t answers.

Most of the other “answers” really didn’t answer anything but opened up more. For example, we thought that the others were part of the Dharma Initiative. Well, the show answered that question by…spoiler alert…telling us the “others” were rebels who murdered everyone in the Dharma Initiative with the help of Ben. Ok, then where did the rebels come from? Why are they at war the plane crash survivors? And who the f***k is Jacob?!?

This is why the audience feels like there haven’t been any answers, because the answers aren’t leading anywhere. They don’t really contribute, and I’m starting to get really pissed off. I’m considering tuning out until the last season. Because I’m reasonably sure not much will happen until then and the last few episodes will be a huge explosion of revelation.

If the producers want to keep their audience, they need to answer some big questions first: Why are the others at war with the survivors? Who is Jacob, why is he there and where did he come from? What’s with the black entity on the island? Give us real answers, then feel free to open a few more questions. We want to feel progress.

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.

TAKE THE SURVEY!

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>.”

I’m not the type of guy that gets excited about new locomotives, but this is something cool that I caught while browsing through inhabitat.com.

The folks at General Electric have recently put together a series of informative, compelling, and visually stunning videos as part of their Ecomagination “commitment.” Here’s a video about their Evolution Series Locomotive, a lean mean high-performing machine which truly “defies the perception that greater efficiency means less power,” using 189,000 fewer gallons of fuel in its lifetime than its predecessors….

via inhabitat.com

The coolest thing was the numbers on the GE site (located from the video page at ‘Behind the Story’ > Facts):

• If every locomotive in North America were as clean as GE’s Evolution…[it] would be like removing 48 million cars from the road each year.
• If the largest railroad in North America switch half its locomotive fleet to the GE Evolution, annual carbon dioxide emissions would be reduced by an amount equal to planting more than 31,000 acres of trees.
• Compared to locomotives built in 2004, a single Evolution locomotive will consume 315,000 fewer gallons of fuel in its lifetime…

I always love seeing innovations like these. We wont stop, or reverse, global warming with a single solution but many smaller steps until we reach the tipping point.

OK, back to listening to the panel…

Right now I’m in the “How to Bluff Your Way in Web 2.0″ hosted by the very funny Jeremy Keith and Andy Budd. It is a 90 minute mockery of Ajax, Web2.0 and important site design. Half the people in the room have their laptops open and are playing Buzzword Bingo — 2 people have won so far.

]]> http://blog.mozmonkey.com/2007/the-start-of-sxsw/feed/ http://blog.mozmonkey.com/2007/classanim-hoverhijax-keeping-presentation-out-of-your-javascript/ http://blog.mozmonkey.com/2007/classanim-hoverhijax-keeping-presentation-out-of-your-javascript/#comments Tue, 20 Feb 2007 21:44:23 +0000 Jeremy Gillick http://blog.mozmonkey.com/2007/classanim-hoverhijax-keeping-presentation-out-of-your-javascript/ Ever since the dawn of CSS and compliant browsers web developers have been squeezing the presentation layer out of HTML and into external CSS files. It has become a web development battle cry and having a tableless website was worn as your badge of honor. To the web dev elite, having <br> tags in your HTML is a sin punishable by death (or at least severe laughing and poking).

Now we are moving in to the so-called ‘Web 2.0′ era. The time of shiny websites with page refreshes cut down to a select few actions. Animations and special effects compliment the content as it fades in and out of view. Libraries like YUI, Dojo and Prototype are making these things increasingly easy and well supported. But with all this, I feel we’re forgetting something. Where’d the presentation layer go?

When you’re animating a rollover or fading some colors do you stop and thing what you’re doing? You’re putting the colors, dimensions and effects into your JavaScript! The presentation layer that you’ve worked so hard to externalize is leaking into your JavaScript code. This is a slippery slope that we have to prevent now. The presentation layer should remain in the CSS, markup in the HTML and logic in the JavaScript. If you want to change the colors or sizes the elements are morphed into, you should be making those changes in CSS.

This brings me to my solution. I present to you an extension to the YUI animation library that will perform your cool animations from the styles defined in your CSS. I call it ClassAnim.

How it works

1. ClassAnim starts by reading the styles from the base element.
2. Then it quickly applies the new CSS class to it, reads the new styles and removes the class. This happens quicker than the user can notice.
3. Now it compares the styles from both versions, extracts the differences that can be animated, and invokes the animation.

With ClassAnim, when you want to make a color or dimensional change you don’t have to go searching through your JavaScript, you make the change straight in the CSS — the way it was meant to be.

See the demo
(Please note: This API is still beta)

Link Rollovers (HoverHijax)

Here’s a simple implementation for rollovers. You’ll notice that all the links on my site have a fading hover effect on them (try mousing over one). This uses a simplified version of ClassAnim that I call HoverHijax. It only animates colors and does it on mouseover and mouseout. My original prototype would actually honor the :hover pseudo class, but good ‘ol Internet Explorer wasn’t allowing me to get to those styles through JavaScript. The current implementation adds a ‘hover’ class to all links when they are being moused over.

See the demo
(Please note: This API is still beta)

The best thing with HoverHijax is that it follows the Progressive Enhancement (or Hijax) strategy and can easily work with or without JavaScript as long as you use the ‘hover’ class along with a ‘:hover’ pseudo class. The only difference is that without JavaScript it wont have the cool fade effect.

a:hover, a.hover {

   color: #000;

}

Where to Download

You can download these new ‘experimental’ APIs from my subversion repository.

This should be a very exciting and insightful night!

http://www.svwebbuilder.com/page/2%2F28%2F07+Browser+War+Episode+II

What:

Browser Wars: Episode II Attack of the DOMs

When:

Feb 28, 2007 Wed 6:00pm

Where:

Yahoo Building C, 701 First Avenue, Sunnyvale , California 94089

Who:

Douglas Crockford, Architect at Yahoo & Founder of JSON (Moderator & Host)
Chris Wilson, Group Program Manager of the Internet Explorer Platform at Microsoft
Mike Shaver, Director of Ecosystem Development at Mozilla Corporation
Håkon Wium Lie, CTO at Opera & Founder of CSS

“We are the web…teach the machine”

So where did I start? <Leans back in chair> It all started a couple weeks ago when my Dad and I decided to go hiking up at Sanborn Park. Originally we were going to go Jeeping, but it had just rained the night before and his Jeep doesn’t have a winch yet, so we went hiking instead. The conditions were perfect and I was able to snap a few pretty good pictures. Out of the set, I was really drawn to the misty trail image. I liked it so much I decided to play with it in GIMP and afterwards decided to design my entire site around it. Once I had the picture, the rest of the site practically designed itself.

So browse around and let me know how you like it. I’ve also added some cool new Web 2.0 features:

• All links have a new animated fading rollover effect pulled in from the CSS and animated with YUI.
  • This is part of an API I’m building in order to keep presentatin separate from the JavaScript.  More on this soon!
• The tagline text fades into view when the page loads. I plan to add more random statements over time — any suggestions?
• Comment submission is now done with XHR. I plan to make this more robust in the future.
• And of course, shiny title bars.

The fading effects and XHR comments were all built with the YUI libraries.

Quoting Nate Koechley from the YUI blog:

This month the YUI Library turns one year old. When we started last year I wrote that I was “thrilled to have you with us.” That’s never been truer than it is today. We owe an outstanding first year to you. Libraries aren’t achievements themselves — it’s what people do with them that’s exceptional. We love everything you’re doing, so we’re throwing a party to thank you, our amazing community.

Join us Thursday, February 22nd, from 5:30 to 8:30 PM, at Yahoo! HQ in Sunnyvale, California. Visit Upcoming.org for details and to RSVP. 300 people max, so RSVP early!

You can bet that I’ll be there along with many other WebDevs from PayPal. The guest list is up to 197, so RSVP now!

I also fixed the bug that would, sometimes, execute the file multiple times.

I’ll be trying to find time to update my other extensions. Recently I’ve changed jobs and am working on a couple other open source projects. I can’t go into much detail right now about the open source projects I’m working on, but expect to hear more soon.

I’ve been at PayPal for about a month now and am really enjoying it. They hired me into their web development platform team as the JavaScript specialist. We’ve adopted the YUI libraries and they are working great to conserve time and provide really customized functionality. Will be sharing more soon.

Speaking of PayPal…

Even better is that all the extensions have now been committed to my shiny new Subversion source control that’ll I’ll open to the public sometime next week. When I do I’ll also release and article on how to download and painlessly upgrade extension version numbers with my handy build scripts.

I hope you enjoy the extensions.

In the meantime, if any of you have hacked the source code and upgraded my extensions, please post a link to them here.

Again, sorry for the delay and thanks for the continued support. You’ll get updates soon.

http://www.fullduplex.org/humor/2006/10/how-to-shoot-yourself-in-the-foot-in-any-programming-language/ (via digg)
I especially like the UNIX example.

NOTE:

I do not claim to be an expert on this subject. If you have more insight or suggestions please post a comment here.

MySql

Most times it’s the MySql database that’s the problem. All your blog entries are stored, managed and retrieved from a MySql database, and, by default MySql doesn’t allow more than 100 connections at a given time. So if you’re getting pounded by the entire world, most of your viewers will see an error page

Luckily there is an easy solution (if you manage your own server): just increase the number of connections MySql supports. Open your MySql configuration file, in my case it was at /etc/my.cnf, and set ‘max_connections’ to any number you want; I set it to 250. Now don’t forget to restart MySql after this change.

WP-Cache

MySql is only part of the issue — why abuse your database server if you don’t have to? WP-Cache is a WordPress plugin that caches your posts to static HTML files to save your database and server cycles.

This saves your MySql server by keeping the number of connections to a minimum. Also since WordPress is written in PHP, which is an interpreted language that must be parsed each time a page is requested, caching the pages as HTML saves your web server cycles and speeds up the load time for your viewers.
By default the cache is used for an hour until it’s expired and refreshed with new content. Since I wanted to view the recent comments quicker than that I changed the expiration time to 4 minutes (or 240 seconds). To change this click Options > WP-Cache and change the expire time value and then click ‘Change Expiration’. Be sure to read the WP-Cache instructions on how to install and configure it.

Mirroring

These steps are all fine and good, but what if your server can’t handle the traffic or you don’t have the administrative rights to make the necessary optimizations? At this point you’ll want to mirror blog post before it gets submitted to Digg or Slashdot. The reason I stress this is if you wait until your site is down, it’s too late.

Mirroring your content only takes a single click with the Coral Content Distribution Network. Coral works like a P2P network and as soon as your link is submitted on their website, it’s mirrored around the world across 260+ servers. To start, go to their website and enter your URL in the form (under Using Coral) and click ‘Go’. This will open a new window and show you your mirrored page (this may take a minute).

It’s important to note that Coral does have a bandwidth limit on the URLs it mirrors, so it might be a good idea to create a couple more mirrors through Coral. You should be able to do this by adding a unique parameter to your URL; I did it this way:

1. http://blog.mozmonkey.com.nyud.net:8090/2006/april_fools_hack/
2. http://blog.mozmonkey.com.nyud.net:8090/2006/april_fools_hack/?mirror2
3. http://blog.mozmonkey.com.nyud.net:8090/2006/april_fools_hack/?mirror3
   

Now, when you post to Digg or another high traffic website you can include these mirror URLs as the one of the first comments.

Apache

If you’re running your site through Apache you probably wont need to tweak it much — the only thing I did was set MaxClients to the max (256). For more information about Apache optimizations checkout the Apache Performance Notes. This article has some simple changes you can make to help squeeze the most out of Apache.

Advanced Options

If you want to know more advanced optimizations checkout High Performance WordPress. This article goes into great detail about how WordPress works and many more things you can do to optimize it.

This year I decided to go all out for April Fools and do something that could be duplicated across multiple computers without permanent damage — and so the singing keyboard hack was born.

Update

If you like this project, please vote for it on instructables.com.

Concept

Take the musical element from a musical greeting card and connect it to the caps lock LED on the user’s keyboard. Each time the victim presses caps lock the music plays (and quite loud too). This is a great sleeping prank…It might be found on the first day, or weeks from implementation. It’s the perfect prank.

Why Caps?

True, most people don’t use caps lock very often, if ever, but unfortunately not many other keys are linked to an LED. Also most keys are only pressed momentarily, which would require a solid-state bounceless switch; which I had trouble getting to work. The num lock LED turns on and off several times during boot time, so that’s out and only leaves the caps lock as a viable solution.

Disclaimer

If you decide to do this prank understand that it could be a career-limiting move if you do it to your boss and/or somebody without a sense of humor. I would also recommend to first experiment with a dummy keyboard that you don’t mind destroying.

I will not be held responsible for your problems. ;o)

Setup

To start you’ll need, of course, several musical greeting cards. Hall