techno.blog("Dion")

There is a feature that changes every Wordpress release, that always has me wanting to patch. The way media is uploaded never suits my needs. It wasn’t built for me. Back in the day, the upload used to happen on a separate admin page, and then it became inline to the post page itself.

The latest version drives me the most nuts. The problems that I have are frustrating as they take a two click scenario and make it a 10 click one!

My issues:

• When you click on the media upload it flashes between the browser upload and the Flash one
• The link URL is to the image itself, when I never want this. I want to link to either none, or to a Web page (the use case shown is for posting a small thumbnail that links to the full size picture)
• The size defaults to medium, but I always want full size!
• Insert into post doesn’t do what Blogger does (put it at the top), but rather nukes anything that you have written in your post and replaces it with the image. I have to remember to select-all and copy, then insert, and then copy back in. How often do you want to nuke content in there??
• Weird classnames applied. I just want a border="0" and a href to the page of my choice.

If I could change the defaults I would be a lot happier. Having to hack the code (which gets more spaghetti each release in this area) is a pain, and a plugin can’t hook in there.

On the back of my example enjoying the Observer pattern with custom events I have started to play with a pet project also involving custom events.

I love keyboard shortcuts. I hate the mouse. I wish that Web applications would offer more keyboard shortcuts a la Gmail, and wondered if there could be a generic way to tie keys to actions in an app. There are things such as accessKey, but we need more.

If you start to follow the pattern of creating named events for public integration points, then how about tieing in keys? I implemented this on the quote example, where you can now use up and down arrows, and N and P, to move through the list of names.

To use the system you declare the keys and tie them to events:

KeyBindings.add({
   eventname: 'action:move-up',
   // keys: KeyBindings.caseInsensitive('p'),
   keys: ['p', Key.ARROW_UP ],
   description: "Move up the stack"
});

KeyBindings.add({
   eventname: 'action:move-down',
   keys: ['n', Key.ARROW_DOWN ],
   description: "Move down the stack"
});

This code ties the keys to the actions, and thus fires those actions when pressed. Next, you need to capture those events to do the work when the key is fired:

document.observe('action:move-up', function(e) {
    Selection.moveUp();
});

document.observe('action:move-down', function(e) {
    Selection.moveDown();
});

With a standardized way of annotating events, interesting side effects appear. You can hit the ‘?’ key to bring down a heads up display sharing what keys do. You could imagine a Greasemonkey script, or browser plugin, that loads the keybindings.js code, and looks for the key binding definitions. The declaration could be done in HTML too, which could be found by the plugin and tied into the system. What do you think?

There is nothing in life that changes your direction as much as having kids. Getting married is nothing in comparison :)

I keep running up against symbols of my two lives, so I will contrast them here. Today’s episode is simple. This is what Amazon thinks of me before I had Sam:

And, this is what it thinks I should be buying now:

Do you have any symbols like this?

I am going to start posting some frustrating user experiences as I come across them. Them seem to have happened a lot recently. Maybe it is my mood :)

I was at the United Red Carpet club and a nice lady couldn’t work out why she couldn’t login to the (now) free WiFi. She put in her mileage plus number, and this came up:

The solution didn’t take long. I scrolled down the page, which then showed a “Terms and Conditions” area that you had to check. This was awful as the flow is all wrong. You see the area you need to fill in (mileage plus number) and then you see the other option, the complimentary access that doesn’t apply to you. You stop, and you submit the form.

Since you can only submit one of the areas, you could do several things such as:

• Put the damn terms on top
• As you fill in one of the forms, the terms popup close by

Here is the full form that makes it obvious:

I had a post in my queue relating JavaScript 2 to Perl 6. They are both in very rough spots indeed, yet JavaScript 2 has a couple of features that have me a lot more worried than I am about Perl 6:

• No offense to Perl (a language I really love, and I have code in CPAN) but JavaScript is an immensely important tool on the Web
• Unlike Perl, there are no dictator groups who can clean up. The politics are politics. If a certain someone doesn’t implement, you are in big trouble.

I have been hacking more and more on JavaScript (1.0, Brendans toy!) recently, and the more I do so, the more I like it. I worked out some years ago that it was the DOM and cross browser issues that I didn’t like, not the language.

I do wish that there was a standard library for JavaScript (Dojo does a good job). I do find myself reinventing the wheel a lot when it comes to the Object world. This week I will be in a Class.create() kinda mood. Other times I would fancy some new function() magic, and other times a bit of (function() { functions; return { ... } })(). Now I try to use the right tool for the job, but the problem is reading other peoples code.

Take a peek at the Firebug source and you will see the following at the top of each module:

FBL.ns(function() { with (FBL) {

Joe Hewitt likes with() :)

This is where it starts to feel a lot like Perl. Many ways to do one thing, and when that one thing is so core as packaging and modularization, it shows through. This is also a reason why we are in pain with components. If someone writes a great component for Dojo but you are using Prototype, you curse. What is the real difference? The darn packaging! dojo.hitch() versus function.bind(). These changes go so deep though, that it would be quicker to write from scratch.

I would love an import/include statement. Finding myself dynamically creating script elements to do a script src is starting to get a little silly. The language itself should just support that.

JavaScript 2 is helping us with packaging, but in my opinion, it used to have too much in it. Programming units, packages, namespaces, that is just too much to wrap your head around.

I am also not a fan of the optional static typing. That is fine for ActionScript, but I don’t think JavaScript needs it. This is a scripting language, something that can fit in a onclick="..." and I think the world is moving more towards the dynamic world (there is still a place for static). How about just allowing ActionScript to be written in the browser? Why try to boil the ocean with JavaScript, as Java has tried to do in the past. Work on the runtime, and allow multiple languages. This is already being done with IronMonkey and the like…. and Microsoft is doing a great job with that tactic in Silverlight. Work on an object model that can be shared, and then we can all go to town.

var self = this;

I see that too much too, even with the binders and the hitchers. The magic of var foo jumping to the top of the scope is weird too. But, all in all, JavaScript is pretty damn good! In fact, JavaScript 1.8, and what I hear about 1.9 is really nice too. I am all for cleaning up what needs to be cleaned up, and working on other stuff.

At this point in my draft I sat in the corner and cried, as I thought JS2 was in epic trouble, and that the walls were going to fall down. I didn’t know what to do. We had Brendan++ on one side, and Doug/Microsoft on the other (simplified version). I sit in between. Without some Harmony, what would happen to the Web?

Well, the reason that I can post this is because I heard that the ECMAScript meeting in Oslo was very promising indeed, and some Harmony may come out of it. Hopefully the news will get through the official process, and out in public as soon as possible, as there is new hope for us. I am sure there is still a long road, but with great people working together, we’ll get ‘er done.

I created an introductory example discussing custom events as an implementation of the Observer pattern.

The example dynamically adds functionality based on checkboxes to simulate events that could change processing and uses the fire() and observe() methods from Prototype.

I strap on behaviour to a list of names. When you click on the name, something can happen. To do this I could have done the following:

$$('ul#leftchoices li').each(function(el) {
    el.observe('click', function(e) {
        if ($('colorchange').checked) {
           changeColor();
        }

        if ($('contentchange').checked) {
           changeContent(el.id);
        }
    });
});

In the click event itself, I do various checks and kick off behaviour. That can be fine for small actions, but what if you want to do more? This is when I prefer to abstract out the action and just fire an event:

$$('ul#leftchoices li').each(function(el) {
    el.observe('click', function(e) {
        el.fire('selected:choice');
    });
});

At this point, this bit of code becomes dumb. It doesn’t know what to do when you select the item, and it just hopes that somewhere, someone is listening. That is where the observers come in, such as this one that changes the main content based on the selected name:

$('contentchange').onchange = function(e) {
    if (e.target.checked) {
        document.observe('selected:choice', changeContent);
    } else {
        document.stopObserving('selected:choice', changeContent);
    }
}

When someone clicks on the checkbox, this method is fired and an observer is either added, or taken away.

Once you start building applications with this in mind, you may find a bit of a sea change. You start to think about the various events as a public API that you can easily expose to observers. Gone is the simple ability to look at one method and see what is happening, but the loose coupling gives you the ability to easily layer in your architecture. Based on some settings, behaviour can be dynamically added. You could even expose these events in a way that makes it easier for Greasemonkey hackers to come in and work with your application. All in all, a win-win for anything more than a simple example.

Although this example uses Prototype, you could do the same with the other top class JavaScript libraries. In fact, if someone wants to port this example to Dojo, jQuery, Mootools, YUI, or anything else, send me the files and I will put them up so we can all compare how custom events are done in the various toolkits.

UPDATE: We now have Prototype, jQuery, DOMAssistant, and Appcelerator versions. Thanks Malte!

I was reading Om Malik’s interview with Kevin Lynch of Adobe, and mulling over the mobile question.

After reading, I popped online to view the menu for the Tandoori Grill in Boulder (I love that place!). They use Flash for the menu, which doesn’t make the iPhone happy. I cursed again, as their is no work around until either:

• It gets on the iPhone (and I think it will)
• Someone does the crazy Flash on the server hacks

After cursing, I sat down and realized that the tough love that Steve Jobs is giving Adobe could actually be a good thing for everyone (including Adobe!). You have to bet that the Adobe Flash / mobile teams are working their arse off getting Flash small and compact in a way they never have had to before. I am sure they will get there, and the day that Steve can pop open the debug Safari build and see that it runs Flash nicely without sucking the battery life, he will give it the OK. When that happens, we will not only have Flash on the iPhone, but also a much leaner and meaner Flash that can run on the desktop. A true win-win?

The last week and a smidgen have been very surreal when it comes to wallets, and losing them. This is a Yin and Yang tale of losing wallets, and what happened to them. I get to play the part of a Baboon as I earn a mention for the Darwin awards with how I lost my wallet.

But, first, wallet number one:

Stolen: Union Square

Emily and my family were enjoying some time in Union Square, when at some point during the trip, Emily come to realize that her purse had been stolen out of her bag. It would be an easy thing to do for anyone who wanted, as she was carrying Sam, our two year old, at the same time.

Just in case, we looked all over, but as soon as I checked out account we saw that the person had indeed started to use it. It makes you sick to think about someone running around with your information. The purse had so much in it. Knowing the pain of replacing every little card and detail was going to be a royal pain.

Oh, and this happened a day before we left for a trip to Colorado. Bad timing. It meant a real pain when we got to pick up our rental car…. but that is another story.

The only silver-lining to the entire thing was learning how the cards were being used. The thief was buying food (we like to think it wasn’t booze :/) from the local food store. Maybe they needed it more than us? Emily has the fun time ahead of calling everyone, and going to the DMV for an enjoyable replenishment.

Code Review: The Moron Cometh

I was up in the mountains, in Eldora Colorado. I still wanted to record a Code Review show for the Google Developer channel, and since I wasn’t at the Googleplex why not use a nice background?

I was staying right next to a stream, which is beautiful, but turned out to be too loud. I hunted around and found a spot which the mountains behind, and the old town ahead. Now the only problem I had was getting the shot. It took some time, but I ended up with a MacGyver solution involving the top of the car, a battery, and my wallet.

After I finished the recording, I went to review the footage, then threw everything in the car and drove back to the cabin.

But of course, I didn’t throw everything in there. I left the wallet on top of the roof of the car! Thus begun the two hour hunt for the wallet. Since it could have stuck on for awhile, the end could have been never-ending, but after a couple of hours we called it a day. In the meantime I had called the local police station, and then went to work calling the credit card companies and the bank yet again. They must think we are nuts. We only just got our new cards!

Ok, all done. I am an idiot, and I have lost my wallet. Now we both don’t have drivers licenses. Luckily we have our passports on us so we can fly back home hassle free.

After a night of cursing my idiocy, the next day brought fantastic luck. The cabin that I stay in up in Eldora has no cell phone service. I did get Internet which is great, but we have to rely on the land line. Thus, it was very surprising when at noon my cell phone started to ring. How could that happen? There is no service up here! By the time I answered the connection died, but it was long enough to show who had called. A local 303 area code, yet no-one that was plugged in as a contact.

Probably a useless call, but wait a minute… maybe it was the police station? I quickly called back and it wasn’t the police, but rather my bank. Someone had dropped off the wallet at the bank local to them and they had it!

They closed pretty soon, but we piled 5 kids into the car, shot down the Boulder where I dropped off the kids and mums, and kept going to the bank to pick it up. Although I got there 10 minutes late, they had enough pity to wait for me. I also had two babies in the car sleeping.

All very bizarre. Whoever found my wallet (didn’t leave any info) thank you so much. You didn’t take the $100 bucs, and yet I would have been fine if you did (a reward). You are a true champ, and so different to the person who stole Emily’s purse a week prior. What a change a week makes.

Oh, and here is the video that caused all of the pain:

I am in a paradox this morning. I found myself managing a million friggin updates to various software and components.

There were the iPhone Apps (keep hoping that NetNewsWire will get stable :(), and the software updates, and the browser plugin updates, and the list keeps going on.

It is interesting, because at the same time, if I download an application that doesn’t tie into an auto-update framework, I get frustrated. I am maddened as I know that I won’t stay on top of the versions, and I shouldn’t have too!

So, I want all of my software to update, but I don’t want to be bugged all of the time. Hmm. How about silent installs? What if I could say for a set of apps “just keep these puppies up to date and don’t even bug me”. Maybe just a growl “hey, just so you know, I updated NetNewsWire to the latest point release, and if it isn’t working well, you can revert”. Having revert would be cool (but potentially more work).

But wait a minute, what if that happened and suddenly something stopped working, or I just didn’t like the new version? Well, revert can help there, but maybe you could have a setting where silent updates happen only for point releases.

What about security though? This would allow developers to sneak in some code without me even knowing! True. That sounds scary doesn’t it. However, isn’t that bogus? They could just put it in the new release and you would update anyway! I doubt you are cracking open the .exe to look for malicious code :)

The fact is that we rely on trust. We weigh up trust. And, I am willing to trust certain companies and people to do silent installs.

In fact, someone on the Gears team mentioned that they think it is the developers responsibility, and that it has to be taken seriously. What if there is a security breach? If you have the ability to push out a fix in short order, you can minimize the scope. Else, there will always be a serious of people who never upgrade and are taken over. How many 5 year old worms and viruses are out there that still propagate due to your aunt running Windows 98 with no changes to it. Ouch.

So, I am all for a change. Time to allow more silent upgrades. Developers, protect me, and don’t bug me all the time!