I actually took this from production code!

I’ve had it with events in ActionScript 3! They are annoying to structure, annoying to extend, annoying to dispatch but most importantly annoying to consume – and I consume events a lot more than write or dispatch my own.

But! The idea of listening for stuff I really do like. I have some ideas about how this could be done a lot easier. Oh, and please stick around until the very end of this post.

Background

For those who can’t remember exactly, events in AS3 are consumed by listening for certain events and passing a function, that will be called when this event occurs. The function will always be invoked with the event type, that you listen for – and only that argument will be given to the callback. You cannot define extra arguments in any way or not accept the event argument. Let’s for example listen for when the use clicks a button – which is the MouseEvent.CLICK event (of type MouseEvent of course):

public function init():void {
  var myButton:Sprite = new Sprite();
  ...
  myButton.addEventListener(MouseEvent.CLICK, buttonPressed);
  ...
}
private function buttonPressed(me:MouseEvent):void {
  trace("the button has been pressed, hurray");
}

We abidingly accept the me:MouseEvent argument even though we don’t intend to use it.

The event object has information about the event, about who sent it, information related to the bubbling nature of events (that very few people ever use in ActionScript 3) and additional specific attributes only relevant for specific events. For instance, if we have several buttons representing different related actions, we can examine the event.target

private var selectRed:ColorButton;
private var selectGreen:ColorButton ;
private var selectBlue:ColorButton;
public function init():void {
  ...
  selectRed.addEventListener(MouseEvent.CLICK, selectColor);
  selectGreen.addEventListener(MouseEvent.CLICK, selectColor);
  selectBlue.addEventListener(MouseEvent.CLICK, selectColor);
  ...
}
private function selectColor(me:MouseEvent):void {
  var color:ColorButton = me.target as ColorButton;
  if (!color) {
    throw new Error("color selected was not actually a color");
  }
  switch (color) {
    case selectRed: trace("you chose a red Papa Smurf"); break;
    case selectGreen: trace("you chose a green Papa Smurf"); break;
    case selectBlue: trace("you chose a blue Papa Smurf"); break;
  }
}

Here, we do use the MouseEvent-object, but we cast the target property to the type we expect it to have and then we need to check, if the cast went well. Because, technically we could have used the same function as a listener for something else somewhere else (even though we know we didn't) and thus target could have been something entirely different.

Personal experiences

I've just checked a recent, larger project with 185 (home-made) classes. In general I try to minimize my event usage, but a lot of things I have to use events for event though I don't really need them, so I ran a simple script counting how many times I had a function that took an event as an argument, and how many of these actually used the event object. The result was 121 functions accepting an event as argument (10 of those had default null values), and in only 4 of those I actually used the event argument (one of them a KeyboardEvent, the others were all the same home-made PageEvent). 83 of the events accepted were MouseEvents (which is no surprise), and never was the me:MouseEvent variable used in the function body.

Then, I tested an even earlier project from before I started minimizing event usage (almost maximized it back then). It consisted of 50 (home-made) classes. It had 113 functions (a lot more per class than the above) accepting event arguments (16 of those defaulting to null) and 74 of those were MouseEvents. And this time around, I used the event argument 25 times, but 18 of these usages were accessing event.target or event.data and casting it to the right class. Thus, yes I did use the event argument in some cases (22% of the time I accepted an argument), but in most of them I still had to do manual casting of the event.target (or event.data) attribute to get the type I knew I was accessing. This leaves only 7 "true" usages or about 6%. Please see the background section about why using the event object for casting only just moves the problem around and makes the code even more verbose.

Dream scenario

So, what would I like instead? Something intelligent, that allows me to accept the arguments I need when I need them. For instance, take this snippet here:

private var close:CloseButton;
public function init():void {
  close.addEventListener(MouseEvent.CLICK, closeDialog);
}
private function closeDialog():void {
  someDialog.fadeToOblivion();
}

It is simple, I do not need any argument, so I do not expect one.

A often used situation is when you have several instances of the same type and attach the same listener to all of these, then you use the event argument's target attribute for switching on which instance was invoked and handling the result correspondingly:

private var downloadLowRes:DownloadButton;
private var downloadMediumRes:DownloadButton;
private var downloadHighRes:DownloadButton;
public function init():void {
  downloadLowRes.addEventListener(MouseEvent.CLICK, download);
  downloadMediumRes.addEventListener(MouseEvent.CLICK, download);
  downloadHighRes.addEventListener(MouseEvent.CLICK, download);
}
private function download(db:DownloadButton):void {
  switch (db) {
    case downloadLowRes: open("file_360p.avi"); break;
    case downloadMediumRes: open("file_720p.avi"); break;
    case downloadHighRes: open("file_1080p.avi"); break;
  }
}

The function expects a reference to the button clicked - not to an event, who references the button clicked, because only the actual button reference is necessary.

Finally, a more elaborate example of different other component listeners expecting just what they need and nothing else:

public function init():void {
  // listen for selections in a dropdown
  countryDropdown.addEventListener(Event.SELECT, selectCountry);
 
  // listen for checkbox changes
  acceptTermsCheckbox.addEventListener(Event.CHANGE, acceptTerms);
 
  // listen for focus changes between password input fields
  passwordInput.addEventListener(FocusEvent.FOCUS_OUT, checkPasswords);
  passwordConfirmInput.addEventListener(FocusEvent.FOCUS_OUT, checkPasswords);
 
  // listen for three different radio buttons changing
  languageDanish.addEventListener(Event.SELECT, selectLanguage);
  languageSwedish.addEventListener(Event.SELECT, selectLanguage);
  languageNorwegian.addEventListener(Event.SELECT, selectLanguage);
 
  // listen for submit button presses
  submitButton.addEventListener(MouseEvent.CLICK, submit):
}
private function selectCountry(country:String):void {
  selectedCountry = country;
}
private function acceptTerms(accepted:Boolean):void {
  termsAccepted = accepted;
}
private function checkPassword(fe:FocusEvent):void {
  if (!(fe.relatedObject in [passwordInput, passwordConfirmInput])) {
    // focus moved away from either input field
    // show mismatch alert if texts are not the same
    passwordMismatchAlert.visible = passwordInput.text !== passwordConfirmInput.text;
  }
}
private function selectLanguage(language:LanguageRadioButton):void {
  switch (language) {
    case languageDanish: load("texts_da.xml"); break;
    case languageSwedish: load("texts_se.xml"); break;
    case languageNorwegian: load("texts_no.xml"); break;
  }
}
private function submit():void {
  sendForm(withParameters);
}

One notable example among the above is, that if an event is needed, you can always have it. I only dislike events, when I don't need them but have to accept them anyway. When I actually need it, they do come quite handy - like the FocusEvent.relatedObject used in the above example.

Announcement

Actually, I have made the above work! It is a dirty, dirty triple-hack, but it feels quite sweet to use on both ends. I need to clean it up a lot, need to come up with a good name for it and need to benchmark it to see, that it doesn't kill performance (too much).

So please, stay tuned. But do not fear commenting on the above ideas anyway.

Related posts:

1. Link sharing spam on Facebook

Anyone can add the new like functionality to their website – as I have in the right column just below the share options. And as you can see on the front page in the “recommendations” box, someone likes (mostly me for this purpose) different parts of my website. But what is the difference between the likes on my page and the likes of IMDb movies like The Godfather, which has 741 likes at current?

Well, one major difference is that I can “tag” The Godfather in my status, but not pages from my website (here trying to tag .

And it is not just a question of my website being very small and with few interactions, because if I create a like button for an external website such as the video Conservative Libertarian from The Daily Show:

Because, even though 25,069 people like this video alongside me (yes, it really has that many likes!), it still cannot be tagged:

Further more, Facebook just today launched, that pages are integrated much nicer on your user info tab including former and present employers, educational institutions, cities etc as well as organizing all the pages you like – internal and external. Some partner external pages you like are correctly displayed in the categories where they belong – e.g. movies and television series:

But other external pages that you like are now not displayed at all (they were yesterday) – including external partner pages like youtube videos or CNN articles. It does make sense though, as both these are temporary, but what if you have a website of movie recommendations, wouldn’t it be nice, that if a user liked one these individual posts, it would show up in the user’s “movies” info section?

So, is there any other difference between being a partner website and just a regular website other than the inability to tag the pages and not be able to have them shown on your info tab?

Related posts:

1. Link sharing spam on Facebook
2. Facebook Notes and Images for Competition Results – January 2010 Ideas
3. Vimeo highly vulnerable to CSRF attacks – now fixed

The famous large flat thing slightly more useful than a rock

Here at Konstellation, we just launched the PageGangster for mobile devices including iPad, iPhone, iPod touch and Android. I developed the clientside for this in JavaScript and we launched it with automatic user agent detection serverside. But this had some problems.

I read some info about this and conclude, that some iPad user agent strings include the word “iPhone” and some users of all types of devices fake their user agent strings.

But then I read on the above link, that no matter what, the navigator.platform attribute would always be set to the right type of device. So in the regular web version of the publication viewer we have now (which uses Flash), we have added a JavaScript detecting if the serverside script did not redirect the client properly:

if (navigator && navigator.platform && navigator.platform.match(/^(iPad|iPod|iPhone)$/)) {
	location.replace(location.href+"?force-mobile");
}

It seems simple, but solves the problem of some users seeing the dreaded blue box instead of their publication optimized for their device.

On another node, this experience of developing a web application for the iPad/iPhone was very rewarding and I gained many insights, which might spawn other posts. And if you have any questions about it in any way, feel free to ask here – but please do not submit bug reports about the PageGangster for mobile – do that via info@pagegangster.com instead.

Related posts:

1. The iPhone developer boycott in the works
2. Coordinate-Proxy – January 2010 Ideas
3. App Idea Store – January 2010 Ideas

As has been said over and over, allow-all cross-domain policy files should never be used on domains, where users log on. This leaves the site open for CSRF attacks from flash clients on different domains, that can load pages from the target domain utilizing the user’s automated log-in and thus the flash load’s the pages, like the user himself would. This not only allows the flash file to (without the user knowing it) load all his private information from the target site, but potentially also post data to the site, which could include updating the user’s password, email, profile or in worse circumstances add/remove content or even make purchases, if the target site has any feature like that.

This has been done against large sites like Facebook, MySpace, Adobe and Youtube – the latter was ironically documented via a video on Vimeo by Jeremiah Grossman.

In Vimeo’s case, you can “only” upload videos, but an attacker could actually perform any action on the user’s behalf, that the user himself could – including changing the user’s bio, add/remove videos, comment on/like other videos etc. I made a small, seemingly innocent page, that included a hidden flash element, which first loaded the user’s info from vimeo.com/settings/personal and then re-posted this info back to the same page adding an extra line to the bio – namely “You have been bwned”, as it can seen on my vimeo profile.

Someone at vimeo has clearly seen this demo, (Julia Quinn has indeed) and now the cross-domain policy only allows *.vimeo.com (the new file is served with a Last-Modified timestamp of Thu, 11 Feb 2010 23:32:05 GMT, so the change is only an hour old). The strange thing is, that if you go back via the Wayback Machine from archive.org, you can see, that they had much better security back in 2007 and 2008 (html render fails, but view source), so I have no idea how such a relaxed policy suddenly appeared on their site. Google’s cache still show the allow-all policy as it dates back to January 20th (again, view source to see contents).

I found this while playing around attempting to load videos from Vimeo directly in a custom FLV-player on a different host than vimeo.com and found that this was actually possible, as all videos from their site are hosted from av.vimeo.com and this has an allow-all cross-domain policy. And this makes sense, as this domain is only used for serving videos and nothing else – no cookies or authentication info shared to this domain.

I haven’t heard from Vimeo yet – neither stating that they are looking at the issue nor that it has been fixed. I only post this after now seeing, that it has been fixed.

Related posts:

1. Sys-Con once again attacks Aral Balkan with stupidity and ignorance
2. Link sharing spam on Facebook
3. Re-Youtube – January 2010 Ideas

Why?

Sharing snapshots of what you see currently is difficult. It is a lot easier on a Mac than on Windows, though Windows 7 has made it easier, but sharing it on the web still requires that you go to some website, browse for the image locally and upload in order to obtain a shareable url. If you had a simple bookmarklet as explained above, this process would be much easier.

What’s next?

Do with this idea whatever you like – expand, implement, trash or forget. Just remember, that if you use it in anyway make sure to attribute me according to the Creative Commons Attribution 3.0 License, that all these 365 Social Ideas are published under.

Related posts:

1. Private Comment Sharing – January 2010 Ideas
2. Offline News Aggregator – January 2010 Ideas
3. Social Traffic Analyzer – January 2010 Ideas

I for one bashed Waveboard, when it came out, because it was simply Apple Safari wrapped in a Mac OS X application. But, recently I tried it again, as it had added Growl support, which means I was easily alerted to when new info was available in any of my waves – this made it feel much more like a mail application, because it was its own program on my MacBook, that I could switch program to and be notified about even though using billions of tabs in my “regular” browsing experience.

So, my suggestion is simply to anyone out there (I reckon it might actually be infinitely simple): do this with Google Docs and if possible, add similar Growl integration as has been done with the Waveboard application, then Google Docs would actually start to seem like a “real” program in itself.

Why?

Because I need it. I might be alone, but I doubt it. And I am pretty sure this is very simple, but it would be really useful.

What’s next?

Do with this idea whatever you like – expand, implement, trash or forget. Just remember, that if you use it in anyway make sure to attribute me according to the Creative Commons Attribution 3.0 License, that all these 365 Social Ideas are published under.

Related posts:

1. Comment On Everything – January 2010 Ideas
2. Appcelerator – January 2010 Ideas
3. NYT Article Trend Charts – January 2010 Ideas

I do not know how to integrate all these things, but a good traffic analyzer should know not only who links to you but also who is sharing links to your services through which channels. It should report which channels generate the most traffic, but also who pushes the links to these channels etc. If someone e.g. tweets/diggs/reddits about your service/website a lot, it should be reflected.

About the short-comings of Google Analytics, my main concern is, that when experimenting with how you can track new things, there is a 1-4 hour delay on page tracks and up to 3 days delay on custom variables tracking (in my experience). A good provider really ought to have a development option available, that only allow limited traffic but provide almost-instant analysis of this data.

Why?

This is one of the simplest of Google’s services, and thus we really need a contender. With the availability of cheap clouds, it should be quite easy to set up, though it would require some funding to provide it to people for free. Google Analytics does not innovate that much – not in the social media tracking area at least. They are more interested in developing new things in the “how can I make people buy more crap from me” category for web shop owners.

What’s next?

Do with this idea whatever you like – expand, implement, trash or forget. Just remember, that if you use it in anyway make sure to attribute me according to the Creative Commons Attribution 3.0 License, that all these 365 Social Ideas are published under.

Related posts:

1. Social Subway – January 2010 Ideas
2. Comment On Everything – January 2010 Ideas
3. Coordinate-Proxy – January 2010 Ideas

This is still fairly simple, but then imagine automatic integration with social networks, so you simply connect via Facebook, Twitter or any other interesting friendship services and you can pick between your friends, recent updates etc. and it would automatically try to create this game.

Or what about having it automatically parse articles etc. for creating games about anything. Say this blogpost – it would automatically recognize names of persons, places and interactable items and then generate the game. It could be used for all sorts of fun things and the great thing would be, that anything could happen. You could re-enact Obama’s presidential campaign victory, the Algerian War or Romeo and Juliet – simply by using the right characters, places and items combined with the right storyline.

Why?

Because it is fun. And putting news and other items in a new perspective adds to the fun of information sharing. Plus, having fun with your friends and family the same way would be an added benefit.

What’s next?

Do with this idea whatever you like – expand, implement, trash or forget. Just remember, that if you use it in anyway make sure to attribute me according to the Creative Commons Attribution 3.0 License, that all these 365 Social Ideas are published under.

Related posts:

1. Game Console Progress API for Social Connectivity – January 2010 Ideas
2. A Twitter Gaming Mechanic – January 2010 Ideas
3. Facebook Notes and Images for Competition Results – January 2010 Ideas

Well, I have implemented a very simple demo of the first steps. So far, the script only makes sure to add some extra text to the current selection when ever the mouse button is released (which is how most users select most text) and it only works in Firefox (tested in 3.6). Next steps include making the link direct to the actually selected content, record text copying in Google Analytics, add cross-browser checks etc.

The script is published under the same license as these ideas, CC-BY 3.0.

Why?

Copy-paste is another quite common way of interacting with websites and allowing people to easily spread the word about your website in a new way ensures you credit where such is due. Creating a full-featured jQuery-plugin from this should be fairly easy and then making sure it integrates with Google Analytics if present – and then we’re actually done.

What’s next?

Do with this idea whatever you like – expand, implement, trash or forget. Just remember, that if you use it in anyway make sure to attribute me according to the Creative Commons Attribution 3.0 License, that all these 365 Social Ideas are published under.

Related posts:

1. Social Traffic Analyzer – January 2010 Ideas
2. Comment On Everything – January 2010 Ideas
3. App Idea Store – January 2010 Ideas

This got me thinking, when do I then turn e.g. 1 billion seconds? (that’s around 31 years and 251/252 days plus some). Or some round number of minutes, hours, weeks, or other more or less exotic units of time? Then I thought, why not build a more general purpose for-the-fun-of-it website, where you can enter you birth date and time and it will output which round number is your next birthday in which unit.

For that purpose I bought mynextbirthday.com, which is still a nice blank website, as I as usual did not get any further than the invention. Oh, and if you decide this could be fun, I’ll throw in the domain for free as well ;).

Why?

Because it’s fun, it will create a short hype and everyone can relate to it.

What’s next?

Do with this idea whatever you like – expand, implement, trash or forget. Just remember, that if you use it in anyway make sure to attribute me according to the Creative Commons Attribution 3.0 License, that all these 365 Social Ideas are published under.

Related posts:

1. Audio-based GPS Navigator – January 2010 Ideas
2. A Twitter Gaming Mechanic – January 2010 Ideas
3. App Idea Store – January 2010 Ideas