Brett Stimmerman

Outside Events for YUI 3

2010-04-21T00:00:00+00:00

Outside Events is a spankin’ new YUI 3 Gallery module that allows elements to subscribe to DOM events that occur outside of them. An event occurs outside the subscriber if the target it is not the subscriber itself, or any of the subscriber’s ancestors. Many common outside events are pre-defined and ready to use, and defining new outside events is a cinch.

Outside Events is tiny weighing in at 475 bytes minified and gzipped. It’s also hosted on the same CDN as YUI 3, so including it in your projects is simple and fast.

YUI({
  // Last Gallery Build of this module
  gallery: 'gallery-2010.04.21-21-51'
}).use('gallery-outside-events', function(Y) {
  // Outside events are ready to go!
});

Subscribe to outside events just like any other DOM event. Here is the pre-defined clickoutside event in action.

Y.one('#dialog').on('clickoutside', function (e) {
  this.addClass('hidden');
});

Let’s say you’ve defined a sweet new swipe event with the YUI 3 Synthetic DOM Event API. Defining swipeoutside is easy.

Y.Event.defineOutside('swipe');

New outside events are named <event>outside by default. You can optionally give new outside events a custom name.

Y.Event.defineOutside('swipe', 'outerswipe');
Y.one('#foo').on('outerswipe', ... );

Outside event handlers receive the originating DOM event object as an argument.

Y.one('#foo').on('keyupoutside', function (e) {
  var tag  = e.target.get('tagName'),
      text = 'A keyup event occured on a ' + tag + ' element ' +
             'outside of #foo';

  console.log(text);
});

To learn more about Outside Events and view the list of pre-defined outside events, have a look at the YUI Library page and the README, which goes into detail about a few general caveats and specific known issues with IE 6, 7 and 8 you should be aware of.

IE VPC Images Now with WGA

2009-09-09T00:00:00+00:00

Just when I was on a virtualization roll using VirtualBox for testing IE on my Mac, Microsoft stopped me dead in my tracks. The latest version of Internet Explorer Application Compatibility VPC Images now have the anti-piracy features of Windows Genuine Advantage enabled.

The hardware signature detected when a VPC image first boots in a non-VPC host is different from the signature present when the image was first created, presumably in VPC. This difference triggers WGA’s re-activation requirement to make sure you’re not a dirty pirate. Of course you’re not a dirty pirate, but if you wish to re-activate Windows you’re going to need the original Windows Product Key which isn’t provided with the VPC images. Microsoft has effectively blocked end users from hosting the VPC images with anything but Virtual PC.

To their credit, Microsoft has done a great thing by providing these VPC images free of charge, and it makes sense they would use their own virtual disk format for distribution. But it doesn’t make sense for them to deny non-Windows (thus, non-VPC users) the ability to use the images.

One of the largest complaints I hear from web developers who work in a non-Windows environment is the difficulty of testing in IE. Until recently, VirtualBox was working quite nicely for me in this regard. Microsoft would be doing another great thing by loosening the reigns a bit. Alternatively, they could release Virtual PC for other operating systems.

How To Run IE on Your Mac with Virtualbox

2009-08-11T00:00:00+00:00

Recently at work I’ve switched from Parallels to VirtualBox for my virtualization needs. VirtualBox has come a long way recently, and I’m very pleased with its performance and ease of use. Parallels was starting to become noticeably slow, and was generally not working well for me anymore.

At first, I tried to convert my Parallels .hdd images to VM Ware .vmdk format, which is natively supported in VirtualBox. Virtual PC .vhd format is also natively supported. Since my Parallels images are fully licensed versions of Windows XP, I didn’t want them to go to waste. Sadly, the converted images were corrupt and weren’t recognized by VirtualBox, and I ended up wasting several hours.

I decided to ignore Parallels completely and simply use the free Internet Explorer Application Compatibility VPC Images from Microsoft. I should have done this in the first place, because setting them up was a breeze with the help of the internet and a few helpful how-to articles I found. I could link to those how-to’s here but instead I wanted to post my own condensed version of the steps I took setting everything up. Mainly for myself for future reference.

Step 1

Download and install VirtualBox and Stuffit Expander. You can skip Stuffit Expander if you already have a tool for opening self-extracting .exe files.

Step 2

Download the free Windows XP IE App Compat VPC images that you’ll need and extract the .vhd images with Stuffit Expander (or your tool of choice).

Using Finder, navigate to /Library/VirtualBox and create a new folder for each image. Move the extracted .vhd files into these new folders.

Step 3

In Terminal, run the following for each image:

$ cd /Library/VirtualBox/<image>
$ VBoxManage internalcommands sethduuid <image>.vhd

This undocumented command will avoid UUID conflicts when creating multiple VMs. If you’re only setting up one VM, you can skip this.

Step 4

In VirtualBox, create a new Windows XP VM and follow the prompts. When asked, choose Use existing hard disk. Click the folder icon to open the Virtual Media Manager. Click Add and navigate to a .vhd file you extracted and relocated in step 2. Click Select to choose the new virtual disk. Finally, click Next then Finish.

Step 5

Start your new VM. Close/cancel any Windows popups or dialogs that appear. There will be quite a few.

From the VirtualBox VM menu bar in OS X select Devices > Install Guest Additions… and follow the Windows prompts. Reboot Windows when asked.

Step 6

Now it’s time to install the network drivers. Why this isn’t covered by the VirtualBox Guest Additions is beyond me.

In Windows go to Start > Run… and run the following:

D:\VBoxWindowsAdditions-x86.exe /extract /D=C:\Drivers

Back to Start > Run… and run:

devmgmt.msc

In Device Manager, find Network adapters > Ethernet controller. Right click it, and select Update Driver….

In the Hardware Update Wizard choose No, not this time and click Next. Select Install from a list or specific location and click Next. Check the option Include this location in the search and paste the following into the Location box:

C:\Drivers\x86\Network\AMD

Alternatively, you can choose Don’t search … and navigate to the location manually. Click Finish and you should have a working network connection.

Step 7

In Device Manager, find Batteries > Unknown device. In my case, there were two. Right click each and select Disable and confirm. These appear to be VirtualPC specific. In any case, they aren’t really necessary anyway.

Next find Universal Serial Bus controllers > Universal Serial Bus (USB) Controller. Again, there were two. Disable them as well.

Finally, find Sound, video and game controllers > Multimedia Audio Controller and disable it.

Additional VMs

Repeat steps 4-7 to set up additional VMs, and enjoy your new VirtualBox goodness.

My Biggest Complaint About the iPhone

2007-07-29T00:00:00+00:00

After a month of iPhone ownership, I can honestly say I’m pleased with the device. While it’s true the iPhone is flawed in several ways, it is simply the best cell phone (and iPod) I’ve owned.

If I were to lodge a single complaint against the iPhone, it would not be about the lack of a native IM application. It would not be about how EDGE is painfully slow. Or how the camera lacks zoom and brightness controls. Or the lack of voice dialing. Or Bluetooth limitations. Or the various UI inconsistencies. Or poor voicemail sound quality. Or MobileMail’s automatic resizing of photos. Or the error-prone keyboard. Or the lack (so far) of an official native SDK.

In fact, nearly all of the above limitations I can happily live with. They are mostly software-bound and can (and hopefully will) likely be remedied by a future update. Yes, EDGE is slow but it’s decent in a pinch.

If I were to change one thing about the iPhone, it would be the headset. The one size fits all construction means that they do not fit my ears and the size cannot be easily changed. They easily fall out, and since the tiny speaker sits so far away from my ear canal when not falling out, they produce a very hollow, tinny sound and let too much outside noise into my ear. For a device where two of three major features lean on the headset, the included set is unacceptable.

What’s more, the jack won’t accept most off the shelf headsets without a separate adapter. Even if it did, those sets wouldn’t have the built-in and oh-so-handy microphone and button anyway. Only the V-MODA Vibe Duo comes close to being the perfect iPhone headset. It’s too bad they aren’t $50 to $70 cheaper and have an iPhone-compatible button. It’s also too bad I’m not the hacking type.

How To Safely Parse JSON

2007-06-13T00:00:00+00:00

Over the past few weeks I’ve witnessed several discussions about how to safely parse JSON in JavaScript. Most of these conversations hinge upon something like “because eval is simply not enough.” And they are right.

So how do you safely parse JSON in JavaScript? Luckily for us, most browsers today have native JSON support. For older browsers, Douglas Crockford created a polyfill called JSON-js.

Here’s a simple example of using the native or JSON-js JSON object:

var obj1 = { "foo": 42 };

// Create a JSON string from an object.
var str = JSON.stringify(obj1);

// Parse the JSON string into a new object.
var obj2 = JSON.parse(str);

PHP 5, Static and Inheritance

2007-04-25T00:00:00+00:00

The object oriented features of PHP 5 are leaps and bounds more complete than PHP 4. In fact, PHP 5 could almost pass for a true object oriented language in many ways: visibility, overloading, reflection, etc. Yet there are quite a few holes in its implementation that can make it painful to work with compared to similar languages. One well-known issue is that parent constructors are not implicitly called in derived classes; you must explicitly call parent::__construct().

I recently stumbled into a similar hole in PHP 5’s OO implementation: class methods and members declared as static do not behave as one might expect with respect to inheritance. Given a base class, Animal, and two derived classes, Dog and Cat, let’s assume that all Animals have a color and that it defaults to black.

<?php
class Animal
{
  protected static $color = 'Black';

  public static function getColor()
  {
    return self::$color;
  }
}

class Cat extends Animal
{
  protected static $color = 'Brown';
}

class Dog extends Animal
{
  protected static $color = 'Grey';
}
?>

Nice and simple, short and sweet. Animal has a color that defaults to black, and we’ve extended Animal with a Cat that defaults to brown and a Dog that defaults to grey. All fine and good. That is, until I want to ask the Dog or Cat classes what their default colors are.

<?php
echo Animal::getColor(); // Black
echo Dog::getColor();    // Black (huh?)
echo Cat::getColor();    // Black (what?)
?>

It turns out that static methods are called within the scope of the class where the method is defined. In this case, Animal. So, even though Dog and Cat both inherit the static method getColor(), its scope is bound to Animal.

The missing language feature that I want is called late static binding. The PHP Manual attempts to explain how things currently work.

… static method calls are resolved at compile time. When using an explicit class name the method is already identified completely and no inheritance rules apply. If the call is done by self then self is translated to the current class, that is the class the code belongs to. Here also no inheritance rules apply.

This issue has been a pain point for me lately, and I’ve resorted to some horrendous and clumsy workarounds to mimic the expected behavior. Until now there has been very little standing in my way of accomplishing most anything with PHP with relative ease. This is by far one of the most annoying dealings I’ve had with PHP in over 8 years.

A Quote from Dave Thomas

2007-03-29T00:00:00+00:00

Dave Thomas:

Recently, folks have been trying to [make] browser-based applications more interactive using technologies such as Ajax. To my mind, this is just a stop-gap until we throw the browser away altogether — Ajax is just lipstick on a pig.

OS X, tar and Resource Forks

2007-03-21T00:00:00+00:00

In preparing releases of Jabber::Bot, I had my first experience using tar in OS X to produce a tarball; I had previously only been a consumer of tarballs in OS X.

Using OS X on the command line means dealing with resource forks. Especially when doing things like copying or archiving files for public distribution. Most heavy OS X users are familiar with .DS_Store files. They are a nuisance, but generally can be dealt with without much fuss. Resource forks, on the other hand, can sometimes be tricky.

Resource forks serve no purpose to anyone but you or another OS X user, who likely doesn’t really care anyway. In order to create a public tarball, it’s a good idea to exclude resource forks since they are unnecessary. But, tar on OS X (Tiger) likely won’t exclude them, even if you specify an exclude pattern like --exclude='._*'.

After a bit of tinkering, I found a solution:

$ export COPY_EXTENDED_ATTRIBUTES_DISABLE=true

Then run tar and resource forks will be excluded.

Twitter

2006-12-26T00:00:00+00:00

It’s a simple concept, really. But I just can’t quite understand why.

Wii Internet Channel

2006-12-22T00:00:00+00:00

I am writing this on the Wii Internet Channel. Using the Wiimote to input large amounts of text is far too painful, and zooming and scrolling around is a little awkward. Also, using the Wiimote to click on links and other controls feels clumsy. A keybord/mouse combination would be much nicer. Overall I think it’s a great addition to the Wii.

User Preferences are a Huge Pain

2006-08-16T00:00:00+00:00

Recently while working on a project at work, I realized that one of the most frustrating aspects of software development is also one of the most mundane: user preferences. Building out the main application is tremendously rewarding, but providing users with preferences is a huge pain.

Most applications provide some way for a user to modify how the application behaves at run time. In fact, users expect some level of control over the application’s behavior. As a user, I like having such options, even options I know I won’t need right away but might like to use in the future. But users — myself included until recently — don’t realize that, as a developer, providing users with options is much easier said than done.

First, the preferences need a place to live. As developer, I need a way to retrieve preferences from somewhere and store them back again. This storage system could be a text file of key-value pairs, more complex XML data, an OS-provided data store (e.g. Windows registry), a relational database, or umpteen other possibilities. Choosing the proper way to handle the storage of user preferences depends on the size of the project, but is by no means a simple matter. Simple applications with many simple options can quickly outgrow a simple storage system.

Once I’ve decided on a storage system and implemented an API for manipulating it, it’s time to give the user a UI to view and modify the current configuration. There are no standard conventions for creating preferences UIs. Because the preferences for a unique application are, well, unique, there isn’t one, generalized UI that has already been built that can easily be reused.

During the development of a project that requires modest user preferences, I had an epiphany.

A user preferences UI and storage system is a complete project in and of itself, with a purpose entirely separate from that of the application to which it provides configuration abilities.

First and foremost, the preferences UI has to make sense. The user has to be able to quickly find where a setting can be changed. If the preferences UI is too convoluted the application becomes difficult to configure, and the overall experience using the application can be adversely affected. I would advise against letting a strictly developer-type build your preferences UI. This is something that a user will use from time to time. It needn’t be pretty, but it must be easy to use. This is a task best left to information architects and designers, and it should not be an afterthought.

Once I’ve sufficiently sketched a preferences UI (or reviewed a designer’s sketches) and feel I’m confident I understand how it will work, I must now translate thoughts and drawings into code. This is perhaps the most time consuming step in the process. The preferences system I create must present a simple UI to the user and also be easily maintained by the developer when requirements change.

Designing the UI itself isn’t terribly difficult, but because preferences often use a myriad of UI controls such as text fields, select lists, drop downs, and check boxes, the logic behind each control must be fleshed out and properly bound to the storage system. to avoid configuration errors, controls often have unique validation requirements. Creating this controller layer of the user preferences system is the most tedious and time consuming, and is very often the least rewarding, since it’s development time not spent directly on the core of the main application.

After the UI is designed and created, and the controls are bound to the storage system, and all input is properly validated, and modification are persisted, and the main application responds to the changes — only then is my job complete. I’ve just spent a few hours, likely days, and potentially weeks allowing Joe User to change his text color from Medium Quasar Blue to Metallic Pearl Shine. And because my application is not a Medium Quasar Blue to Metallic Pearl Shine font color changerator, I’ve just spent many hours on code that does not help accomplish my application’s main goals.

At this point, my user is happy with their new font color, and if I happen to work on another application that needs a Medium Quasar Blue to Metallic Pearl Shine font color changerator, I’ve already got some code to work with. However, I’ll still need to decide upon the proper preference storage system, create a unique UI and write the tedious controller logic fluff. There’s got to be a better way.

And Then Java Ate My Life

2006-06-28T00:00:00+00:00

A few months back I started a new job. A large part of this new job entails building and maintaining Java desktop applications. A large part of my life has recently been eaten away by terse API docs, vague explanations of core and advanced features, and minimalist and nearly useless code examples of said features.

Though it’s a great change of pace from years of working mainly in PHP, it means I don’t have much free time to work on things I like. At least for a little while.

I’m hoping that getting back into Java after a 5 year hiatus will be good for me. The Java landscape is difficult for me to accurately gauge, but it seems as though Java on the desktop is trending back into fashion.

Once I settle in to Java and my new role, I hope to be able to pick up my side projects again. It’s unfortunate, but other projects don’t pay the bills.

Ajax Design Patterns Book

2006-04-15T00:00:00+00:00

I just stumbled across the Amazon pre-order page for a new O’Reilly book, Ajax Design Patterns, based on Michael Mahemoff’s Ajax Patterns wiki. It’s set to be released on June 1, 2006.

From the Amazon description:

Ajax Design Patterns provides best practices for web developers by investigating how others have successfully dealt with conflicting design principles. You will find sections on foundational technology patterns, programming patterns, functionality and usability patterns, and diagnosis/testing of Ajax applications. Ajax is all about usability, so the patterns in this book focus on delivering usability in the face of constraints, such as user capabilities and expectations, bandwidth limits, the stateless nature of HTTP, and the complexity of Javascript.

I’m excited to see a wiki like this published in book form, especially an O’Reilly book. I’m also excited because Lace makes an appearance or two. It might not be much, but it’s the first code I’ve written to be published in text form on such a massive scale.

Think Fast - Making First Impressions on the Web

2006-01-14T00:00:00+00:00

The case for creating visually appealing and usable web sites (and applications) now has more ammunition. In an article entitled “Web users judge sites in the blink of an eye”, nature.com reports a university study found that web users make their first impressions much more quickly than one might expect.

We all know that first impressions count, but this study shows that the brain can make flash judgements almost as fast as the eye can take in the information. … [Researchers] found that impressions were made in the first 50 milliseconds of viewing.

Fifty milliseconds is incredibly fast: one twentieth of a second, or roughly half the time it takes to blink.

The article goes on to suggest that overall simplicity, a trend borne of the the Web Standards movement, is a crucial step towards making a lasting impression:

These days, enlightened web users want to see a “puritan” approach … It’s about getting information across in the quickest, simplest way possible.

This is hard evidence that we as web designers and developers must create an excellent and long-lasting first impression, or we are not doing our job.

Ajax Tagging

2005-12-15T00:00:00+00:00

I walked past this small delivery truck this morning on my way to work, and had myself a chuckle. There is plenty of graffiti and tagging that line the streets of Berkeley and Albany, ranging from the obscure to the obscene. But until today, none have struck me as being so very appropriate.