The Wook Book

CloudFront Invalidator | Wildcards, Resubmission and Credentials Saving

2012-02-19T16:41:00.000Z

While I had a lot of fun writing my little tool up, it was not too heartening to see that my hours of work almost seemed rather useless.

Today however, I was able to get some motivation thanks to Toby who was the first user to comment on my little tool.

Toby had two suggestions:

Wildcard path submissions
Re-submitting previous invalidations

I immediately set off on a mission to get them done.

Wildcard Paths

The first sounded impossible at first since Amazon CloudFront does not accept wildcards as paths. I was able to add a similar feature however - searching through previous paths and matching those with the wildcard.

Here's what you can do now:

Type something like *.js and add all JavaScript files (ending with .js) from history.

That's it, just one step!

Credentials (Cookies) Wiping

There was one aspect of my Invalidator that I was concerned about, the storing of data. I felt that users should have an easy way of opting out and wiping all traces.

Those who have used my lovely little tool before will notice a new red box on the image above. This box lets you do two things:

Enable the saving of history and credentials
Disable the saving of anything and wipe all previous traces

If you have used the Invalidator before, the checkbox will be un-checked but the text fields will be filled in for you.

To wipe all data, simply leave the checkbox unchecked and refresh.
To keep all data, simply click on the checkbox.

If you are a new user, note that data will only be saved once you have made use of your credentials once (one example is clicking Refresh on the Get Invalidations tab.

Re-submitting Previous Invalidations

This job is now much easier thanks to the glaringly obvious Submit this Invalidation again button.

While viewing the list of invalidations, simply click on an invalidation to get more details about it, then click Submit this Invalidation again to submit the invalidation again.

Actively re-try Get Invalidations requests on failure

An extra feature I added is the retrying of GET requests for Invalidation Lists.

Depending on the status of the YQL server and/or CloudFront server, you may sometimes get failed requests. This can get annoying when you are trying to look at the list for an overview.

I therefore made it so that the tool tries to pull the Invalidation List again in 10 seconds.
This behaviour is cancelled once you switch to a new tab.

Extra

Thanks to my hours of work wrestling with Javascript, the whole website in general is much faster as well, both to load and to switch pages.
(Hover your mouse over the search box for a hidden feature!)

If you have any more suggestions, please do not hesitate to ask.
Do use my Online CloudFront Invalidator and share it with your co-workers, family and friends!

Blogger | Statistics with AJAX

2012-02-13T05:49:00.001Z

Blogger has been receiving numerous updates in the past few months, mainly in the new templates called Dynamic Views. I first rejected the option seeing how little customisability it offered, but it seems like my own template is quickly converging towards what Google's Dynamic Views is like in its core: full of JavaScript and depending on the blog's RSS feed.

I started my journey by writing some JavaScript which would let users navigate through pages without having the page refresh fully via some AJAX calls and DOM replacement.

The instant search, with a scrollable results box

Then I designed the top bar that you can see floating above this post and thought how nice it could be if I could have a semi-instant search (Blogger's search is quite slow). I then thought of a way which involved downloading the RSS feed for the blog, and parsing all text in the feed. I wrote an occurrence based points algorithm which allows for basic search.

Back when I was implementing the instant search, I found that with the RSS feed in my hands, I could load full pages as well! This would allow me to flick through pages on my site almost instantly.

This week, I got around to doing that very job, and if you navigate around a little bit, you will see that page loads are almost instant.

There was one problem though, Blogger statistics were not getting updated...

Pageviews Increase with Dynamic Views?

I remembered claims from various sources that pageviews had increased by twofolds or more with Dynamic Views enabled. Here's what I found from Google's support page:

If you enable Dynamic Views for your blog, you might notice an increase in pageviews. The reason for this is that Dynamic Views provides more specific information about actions on your blog. Specifically, every click to a post is recorded as a pageview. If a reader clicks on 10 posts, you’ll see those clicks recorded as 10 pageviews. In a traditional Blogger template, if a reader enters your blog once, they can scroll through ten blog posts in a single pageview. So while it may appear that traffic to your blog has increased, it's more likely that Blogger is simply recording more accurate data about your blog than was possible in the past.

Hmm interesting...

Naturally, I felt that there must be some JavaScript trickery going on to allow for this to happen. Dynamic Views afterall, is mostly JavaScript!

The 'Hacking'

abcdefasdjnasdlaksmdaljadxyz

As expected, the JavaScript source used has been compiled using Google's very own closure compiler, and therefore has been made uglified and obfuscated. A bit of magic with the Online JavaScript Beautifier alleviated that issue somewhat and I started combing through the code to see any evidence of statistics reporting.

Soon enough, I was able to find a piece of code which seemed to be doing the job:

function Rt(a, b) {
    var c = Q.decode(b).normalize().encode();
    b && !a.Lc[c] && !Q.isCrossDomain(c) && (a.Lc[c] = j, Q.decode(b).path != Q.decode(Pt).path && setTimeout(function () {
        $.ajax({
            type: Ng,
            async: j,
            url: Q.decode(b).param(Ml, 1).param(Uq, 0).encode()
        })
    }, 1E3), window._gaq && b && window._gaq.push([Mj, Q.decode(b).path]))
};

The window._gaq && b && window._gaq.push([Mj, Q.decode(b).path])) bit is for Google Analytics. The documentation mentions that this is the way to update Analytics for dynamic sites.

The other large piece of code can be translated into the following:

setTimeout(function () {
    $.ajax({
        type: 'GET',
        async: true,
        url: document.URL+'?dynamicviews=1&v=0'
    })
}, 1000)

This code basically submits an AJAX GET request for the new page, a second after it has been loaded.

I had a good laugh.

Conclusion

If you have not caught on yet, the solution for reporting Blogger statistics on dynamic sites, is simply requesting the page behind your backs! (The delay is to reduce impact on 'loading times')

I have a feeling that while this is the sensible thing to do at the moment - while Dynamic Views is still in development - I find that the quick loading illudes users into thinking either that less bandwidth is being used and/or that their connection is magically fast!

Loading the RSS feeds in the first place, is basically like loading the content of the blog in its entirety and therefore could be almost equivalent to downloading the blog. This would be awesome if you did not have to make all these requests later on while browsing the website!

I would make a careful assumption that the appended parameters, ?dynamicviews=1&v=0 was intended to allow the script to request an empty version of the page. Unfortunately, it does not seem so at the moment.

Ah well, for now I shall use Google's own trick.

Oh, and if you wish to do the same, simply run the last snippet once you've updated the browser history with History.pushState or equivalent.

jQuery | Easy TeX Equations

2012-01-24T09:55:00.000Z

Anyone who has used TEX will agree that no other method of typesetting mathematical equations look nicer. (Thank you Dr. Knuth)

While TEX typesetting can be done easily on your desktop via your favourite program based on the idea, it isn't so on the web.

Of course, there are ways to get this done. You could use the popular jsMath, a JavaScript package which transforms your TEX code into beautiful equations using various fonts and images. You could also use sites such as Code Cogs where you can produce equation images which can then be included into your blog post. These methods however, often require extra processing client-side, and/or more time spent on producing the intended result.

I will talk about a very easy method of doing an equivalent of the above.

Here's the Schrödinger equation for a taster:
i\hbar\frac{\partial\psi}{\partial t} = \frac{\hbar^2}{2m}\nabla^2\psi + V(\mathbf{r})\psi

The method I am about to introduce, uses one of Google's many resources: The Infographics Tool, based on the Chart API.
As mentioned in the API information page, all you need to do to get an equation image, is to get the image from a specific URL where Google does all of the complicated processing.

The Code

The following script does the job, assuming that you have jQuery installed.

function TeXify () {
    $('code.tex').each(function(i, e) {
        e = $(e);
        e.replaceWith('<img class="tex" src="http://'+
                      +(i % 10)
                      +'.chart.apis.google.com/chart?cht=tx&chf=bg,s,000000&chl='
                      +encodeURIComponent(e.text())+'"/>');
    });
}
$(document).ready(TeXify);

For example, it converts the following declaration of TEX code:

<code class="tex">e^{i\pi}+1=0</code>

into this, once the page is loaded:
e^{i\pi}+1=0

That small script also parallelizes the downloading of your equation images, reducing impact on page load times.

Styling

If you want to make your image blend in, simply declare a set of CSS styles as follows:

img.tex {
  display: block;
  margin: 5px auto;
  border: none !important;
  box-shadow: 0 0 0 !important;
  background-color: transparent !important;
}

Conclusion

While this solution has the downside (as all JavaScript solutions do) that it won't work if your user does not have JavaScript enabled, it is definitely one of the fastest solutions available as you do not have to leverage client resources, but Google's, and we all know Google is blazing fast.

Now, it's time to show off your newly prettified math pages!

Examples

E=mc^2

<code class='tex'>E=mc^2</code>

\Delta x \Delta p \geq h

<code class='tex'>\Delta x \Delta p \geq h</code>

\oint\limits_c \, \mathbf{A}\cdot\mathbf{dl} = \iint\limits_s \, \nabla\times\mathbf{A}\cdot\mathbf{ds}

<code class='tex'>
\oint\limits_c \, \mathbf{A}\cdot\mathbf{dl} = \iint\limits_s \, \nabla\times\mathbf{A}\cdot\mathbf{ds}
</code>

Blogger | RSS for Labels

2012-01-16T07:35:00.000Z

Sometimes, your reader wants to keep up to date with your tips and tricks about tweaking a Blogger blog.
The reader however does not want to listen to your rants about Facebook, nor about those annoying kittens.
All he/she wants to subscribe to is your posts which are labelled, Blogger.

There is a solution for that as mentioned in one of Blogger's FAQs.

The question is, how do you get these links onto your blog's label pages?

An example for the tag, Blogger (Visit)

There is a solution for this, though you do have to touch a slight bit of templating code to get it working.

First, open up your Blog's dashboard.

Find the Template menu and click the Edit HTML button under your Live on Blog theme screenshot.
Click on the Expand Widget Templates checkbox near to the top of your dialog window.

Search for status-msg-body with the find tool which is usually available via F3 or CTRL-F.

You should have something like this on your screen:

Currently, the code should look like the following:

<b:includable id='status-message'>
  <b:if cond='data:navMessage'>
  <div class='status-msg-wrap'>
    <div class='status-msg-body'>
      <data:navMessage/>
    </div>
    <div class='status-msg-border'>
      <div class='status-msg-bg'>
        <div class='status-msg-hidden'><data:navMessage/></div>
      </div>
    </div>
  </div>
  <div style='clear: both;'/>
  </b:if>
</b:includable>

What we'll do is add a link to the end of the 'status message', which is the message that usually reads:

Showing posts with label Blogger. Show all posts

We'll turn this into this:

Showing posts with label Blogger. Show all posts Subscribe (RSS)

(Skip to the bottom to get the final code, and read on for more explanation.)

To do this, we must detect if the page is a label page.
We do that with the following code:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
  <b:if cond='data:blog.searchLabel'>
  </b:if>
</b:if>

This code checks if the page is an index of posts, and if a label has been specified.

Now we can construct the link:

<a class='noajax' type='application/rss+xml' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default/-/&quot; + data:blog.searchLabel + &quot;?alt=rss&quot;'>Subscribe (RSS)</a>

Note the concatenation (adding) done between the expressions and strings - the + operator requires spaces.
The class='noajax' bit is for Ajaxified Blogger blogs.

This is what it should look like once you've put everything together:

<b:includable id='status-message'>
  <b:if cond='data:navMessage'>
  <div class='status-msg-wrap'>
    <div class='status-msg-body'>
      <data:navMessage/>
      <b:if cond='data:blog.pageType == &quot;index&quot;'>
        <b:if cond='data:blog.searchLabel'>
          <a class='noajax' type='application/rss+xml' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default/-/&quot; + data:blog.searchLabel + &quot;?alt=rss&quot;'>Subscribe (RSS)</a>
        </b:if>
      </b:if>
    </div>
    <div class='status-msg-border'>
      <div class='status-msg-bg'>
        <div class='status-msg-hidden'><data:navMessage/></div>
      </div>
    </div>
  </div>
  <div style='clear: both;'/>
  </b:if>
</b:includable>

The Naming of Sting

2012-01-15T11:52:00.000Z

There was the usual dim grey light of the forest-day about him when he came to his senses. The spider lay dead beside him, and his sword-blade was stained black. Somehow the killing of the giant spider, all alone by himself in the dark without the help of the wizard or the dwarves or of anyone else, made a great difference to Mr. Baggins. He felt a different person, and much fiercer and bolder in spite of an empty stomach, as he wiped his sword on the grass and put it back into its sheath.

“I will give you a name,” he said to it, “and I shall call you Sting.”

Source: http://www.theonering.net/torwp/2012/01/14/52695-la-times-new-pic-of-martin-freeman-as-bilbo-surfaces-the-naming-of-sting/

It's here! The first Online CloudFront Invalidator

2011-12-15T17:45:00.000Z

Two blog posts ago, I talked about my discovery of the Amazon CloudFront invalidation service and how I decided to go about getting a tool made for it using JavaScript. Read my early musings over here.

After much deliberation and man-hours, I have finally completed what I set out to do when I entered the JavaScript ranges, armed with a YQL guide published by Yahoo.

I present to you, the Online CloudFront Invalidator!

Read on for more information...

YQL, what?

Thank you Yahoo!

If you have ever come across SQL, the name will ring a bell. YQL is basically what SQL is with the difference being the actual data tables which you can access.

As the slogan, "Query the Web!" implies, YQL was designed to allow for developers to access and manipulate data from many different available tables.

To allow for this 'querying', YQL has to perform various HTTP requests. These requests include GET/POST/PUT requests which are usually done using server-side web programming with languages such as PHP.

With effective use of Open Data Tables however, one can create their own tables to perform GET/POST requests. This is amazing as it allows one to perform these requests via JavaScript. These requests are usually impossible due to the Same Origin Policy.

You might be wondering how I can receive and send data to the YQL servers in the first place. This is because the communication is done using JSONP, which was created specifically for cross-domain communication.

Here's the open data table I created for my purpose. I won't go into the specifics but you can find out how everything works from the useful documentation.

Why YQL?

"Okay great, but why didn't you simply create a server-side proxy? The code already exists here (for PHP), here (for Python), here (for Ruby) and probably at several places more so why re-invent the wheel?"

The answer is performance, security, and scalability.

By not relying on my $3.74/mo VPS, I make sure that the tool does not slow down due to the number of users using it. Also, query times are significantly increased as it is handled by Yahoo!'s network. This increases scalability and performance.

Security is greatly increased since all code is open to you, the user. All handling of data is transparent and you can easily see how sensitive credentials are dealt with on the client, and the signature, sent only to Yahoo!'s YQL server. If any data was being sent to a proxy server of mine, it would be difficult for users to determine whether I am leaking sensitive information.

However, even after implementing client-side signature generation, YQL querying and HTTPS encoded requests, I was accused of trying to steal user credentials. Ah well...

Convenient Features

My invalidator has a few features for your convenience.

When viewing the Get Invalidations tab, the invalidation list will be reloaded every 30 seconds if there are invalidations in progress.
Your access key, secret key and distribution ID will be filled in for you when you visit the page again, after having performed an invalidation GET or POST request using your details.
Also, file names which have been invalidated before are cached, letting you add them back to your new request easily.
Amazon states that you have to provide correct paths which start with /. With the Online CloudFront Invalidator, you can paste in full URLs as well as paths which have invalid characters such as spaces in them.

Now that you know that the Online CloudFront Invalidator is safe and easy to use, what are you waiting for?

AS2 | Long Click Detection (Fixed)

2011-12-15T08:37:00.000Z

A few weeks ago, I blogged about writing an easy-to-use long click detection for Flash ActionScript 2.
You can find the post here.

The Bug

Recently Kizune, a respected Cowon UCI developer and designer informed me that my implementation had a bug which rendered it useless.

What happens is that when you apply my code, only the highest level parent MovieClips respond to onPress, onDragOut, and onRelease events.

This occurs due to the events being assigned to all MovieClips via the MovieClip.prototype.addProperty calls.

In ActionScript 2, MovieClips only become clickable when a MovieClip.onPress function is defined. If it is defined for a parent MovieClip, further declarations of the same event for child MovieClips do not work. Simply because the parent takes priority.
My clever code had defined replacement methods for all these events... for all MovieClips.

The Fix

The fix is simple, don't assign the replacement event listeners via addProperty to all MovieClips when they don't need it!
Only hijack the events when needed, ie. when .onShortClick or .onLongClick is registered.

The following code should fix the issue:

var LongClickHandler = {};
LongClickHandler.DELAY = 350;
LongClickHandler.INTERVAL = 150;

LongClickHandler.Init = function ( func ):Void {
    // NOTE: this == MovieClip
    if ( this.LongClick != undefined ) return;

    if ( this.onPress ) this.onPress_ = this.onPress;
    this.addProperty( "onPress",
                      function ():Function {
                          return LongClickHandler.onPress;
                      },
                      function ( func:Function ):Void {
                          this.onPress_ = func;
                      } );

    if ( this.onDragOut ) this.onDragOut_= this.onDragOut;
    this.addProperty( "onDragOut",
                      function ():Function {
                          return LongClickHandler.onDragOut;
                      },
                      function ( func:Function ):Void {
                          this.onDragOut_ = func;
                      } );

    if ( this.onRelease ) this.onRelease_ = this.onRelease;
    this.addProperty( "onRelease",
                      function ():Function {
                          return LongClickHandler.onRelease;
                      },
                      function ( func:Function ):Void {
                          this.onRelease_ = func;
                      } );

    this.LongClick = {};
    this.LongClick.mc = this;
    this.LongClick.onEnterFrame = LongClickHandler.onEnterFrame;
}

LongClickHandler.cleanUp = function ():Void {
    // NOTE: this == MovieClip
    delete this.LongClick.last_t;
    delete this.LongClick.trail_done;
    MovieClip.removeListener( this.LongClick );
}

LongClickHandler.onEnterFrame = function ():Void {
    // NOTE: this == MovieClip.LongClick
    var dt:Number = Time.Ticks - this.start_t;
    if ( this.last_t ) {
        var ivl:Number = LongClickHandler.INTERVAL;
        if ( !this.trail_done ) {
            var inc:Number = ( ivl * 100000 / dt / dt ) >> 0;
            if ( inc < 10 ) this.trail_done = true;
            ivl += inc;
        }

        dt = Time.Ticks - this.last_t;
        if ( dt >= ivl ) {
            this.last_t = Time.Ticks;
            this.func_long.call( this.mc );
        }
        return;
    }
    else if ( dt > LongClickHandler.DELAY ) {
        this.last_t = Time.Ticks;
        this.func_long.call( this.mc );
    }
}


// Replace onPress
LongClickHandler.onPress = function ():Void {
    // NOTE: this == MovieClip
    if ( this.LongClick.func_long ) {
        this.LongClick.start_t = Time.Ticks;
        MovieClip.addListener( this.LongClick );
    }
    this.onPress_();
}


// Replace onDragOut
LongClickHandler.onDragOut = function ():Void {
    // NOTE: this == MovieClip
    LongClickHandler.cleanUp.call( this );
    this.onDragOut_();
}


// Replace onRelease
LongClickHandler.onRelease = function ():Void {
    // NOTE: this == MovieClip
    if ( !this.LongClick.last_t ) this.LongClick.func_short();
    LongClickHandler.cleanUp.call( this );
    this.onRelease_();
}


MovieClip.prototype.addProperty( "onLongClick",
                                 function ():Function {
                                     return this.LongClick.func_long;
                                 },
                                 function ( func:Function ):Void {
                                     LongClickHandler.Init.call( this );
                                     this.LongClick.func_long = func;
                                 } );

MovieClip.prototype.addProperty( "onShortClick",
                                 function ():Function {
                                     return this.LongClick.func_short;
                                 },
                                 function ( func:Function ):Void {
                                     LongClickHandler.Init.call( this );
                                     this.LongClick.func_short = func;
                                 } );

Usage of the code has not changed and can be found in my original post.
If there are any further problems or bugs, please do not hesitate to comment below!

Lesson Learnt

MovieClip.prototype is evil. Be careful when you mess with it!

JS | Creating a CloudFront Authorization Signature

2011-12-08T04:41:00.001Z

I started using Amazon CloudFront to serve some static files for my blog... and I noticed that there was no easy way for me to 'refresh' files which have been copied to Edge locations.

The CloudFront management console offered me the most minimal options of adding and removing distributions and nowhere could I find a nice little button which looked remotely like it would let me reload/refresh my files.

Then I stumbled across Amazon CloudFront Invalidation and 'Oh Joy! There MUST be an online invalidator somewhere!' was what I thought, only to be proven wrong by the almighty Google seconds later.

But I told myself that it's all alright since there's an API. Someone must have written an implementation of it!
Yes, there were a few but all of them were commandline tools, written in Ruby, PHP, and Python. I wanted an online invalidator and that could be easily achieved by using these tools with them being hosted on a server. I had to think twice about that though since if I am right and there are thousands of people who'd want to use an online invalidator, my little VPS would simply keel over and die. It wasn't a sustainable idea.

Then I turned to look towards the mighty hills of JavaScript-dom and lo there was a solution to satisfy my needs. The lush green hills also bordered the busy trading posts of YQL, which let JavaScript fairies talk to other JavaScript fairies from different domains. Everything was going to be alright.

The Authorization Signature

To communicate with Amazon CloudFront, one must generate a signature with which Amazon can verify that you are indeed who you claim to be.

This requires you to have a few details:

Access Key ID
Secret Access Key

both, which could be created and acquired at the AWS account management page.

The instructions are here.

Doing it in JavaScript

After reading through carefully, it was clear what I had to do. I was to send along a header containing a date in GMT, provided by new Date().toGMTString() as well as an authorization header formatted in the following way:

AWS [Access Key ID]:[Base64(HMAC-SHA1(UTF8([Date String]), UTF8([Secret Access Key])))]

I looked up a JavaScript encoding libraries for HMAC-SHA1, UTF8 and ended up with the following signature code:

date = 'Thu, 14 Aug 2008 17:08:48 GMT';
secretkey = '/Ml61L9VxlzloZ091/lkqVV5X1/YvaJtI9hW4Wr9';
signature = btoa(Crypto.HMAC(Crypto.SHA1, utf8Encode(date), utf8Encode(secretkey)));

The code however, did not yield the correct signature! The used sample keys from the documentation should have yielded 4cP0hCJsdCxTJ1jPXo7+e/YSu0g= but was instead yielding ZTFjM2Y0ODQyMjZjNzQyYzUzMjc1OGNmNWU4ZWZlN2JmNjEyYmI0OA==.

I scratched my head, then scratched it again.

Smirk!

I could feel Amazon smirk at me from America.

At first, I was convinced that Amazon was wrong. Their example could not be right!
I tried out doing the encoding in IPython and it was the same as what I had got. I tried using online hmac tools, base64 tools and the result was always consistent.

Then I found InsidePro. I keyed in the sample key and date and lo, there were hundreds of hashes for me to observe.
I quickly scrolled down to the line marked with SHA-1(HMAC) and found 4 unique hashes, the second one being equal to Amazon's result and the first being equal to mine. The key mentioned that it was hashed to base 64 and nothing more.
But then, maybe the hashing in JavaScript was being faulty, I should try putting my calculated hash into the generator! And so I did, but with the hash produced by Crypto's HMAC-SHA1 encoding.

To my surprise, Amazon's result was staring at me in the face, down at the bottom of the page on the row marked Hex -> Base64. Oh dear... I had spent hours searching for a solution and that's it?

If you haven't noticed yet, all I had to do was to add an extra call to decode my hmac-sha1 hash from hex string to ascii string then encode it to base 64 using JavaScript's btoa().
The final code is something like this:

function hex2a(hex) {
    var str = '';
    for (var i = 0; i < hex.length; i += 2)
        str += String.fromCharCode(parseInt(hex.substr(i, 2), 16));
    return str;
}

date = 'Thu, 14 Aug 2008 17:08:48 GMT';
secretkey = '/Ml61L9VxlzloZ091/lkqVV5X1/YvaJtI9hW4Wr9';
signature = btoa(hex2a(Crypto.HMAC(Crypto.SHA1, utf8Encode(date), utf8Encode(secretkey))));

The Moral of the Story

The moral of the story?
Check what your hashing function outputs and what your next one takes.

This is especially important with JavaScript since the encoding functions are not native and thus implementations vary.
In this scenario, only the base 64 function, btoa() is native.
This whole problem was caused due to the hash function for HMAC-SHA1 returning the hexadecimal as a string and not as a JavaScript hexadecimal.

Code Used

Ajax-ifying Blogger No. 2: Keeping content updated

2011-12-02T11:32:00.001Z

As mentioned in my first post about Ajax-ifying Blogger, I talked about my jQuery plugin which lets you load your blog pages without a flicker. I also talked about how different components needed to be updated or reloaded manually.

I'll now talk about the components which caused problems, and how I dealt with them.

jquery.ajaxify.js

If you don't know about this plugin, you can visit the plugin page and/or read my post about its development.

Install it in the following way:

<b:if cond='data:blog.isMobile'>
<b:else/>
  <script src='https://raw.github.com/swook/jquery-ajaxify-plugin/master/jquery.ajaxify.min.js' type='text/javascript'/>
</b:if>

This is to avoid problems on mobile phones, where using AJAX would be slower.

Here's my configuration:

$.Ajaxify.container = [
    '#Blog1',          // Main Column Content
    '.Label',          // Labels
    '#topbar-social'   // The Social icons in my custom top bar (Will be dealt with in No.3)
];

This isn't all though and I'll be doing a few more tricks to keep your site consistent.
I'll be using jQuery and that shouldn't be a problem since you'd be using my jQuery plugin.

"View Mobile Version" Link

In your template, there is the following code:

<b:if cond='data:mobileLinkUrl'>
  <div class='blog-mobile-link'>
    <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
  </div>
</b:if>

add the noajax class to the link:

<b:if cond='data:mobileLinkUrl'>
  <div class='blog-mobile-link'>
    <a class='noajax' expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
  </div>
</b:if>

This allows for a refresh when a user clicks on the button, 'View Mobile Version'.

Tab bar

Your tab bar displays in a different way depending on whether you are on a page which is listed on the bar.
The bar could easily be updated by simply adding the tab bar identifier, .tabs-inner to the list of selectors which you can see in my configuration.
This method however, can show un-necessary flickers.

$.Ajaxify.pageChange(function() {
    $('.tabs-inner li').each(function() {
        var target = $('a',$(this)).attr('href');
        if (target) {
            if (target == document.location.href)
                $(this).addClass('selected');
            else $(this).removeClass('selected');
        }
    });
});

This snippet updates the links' classes to show them as being selected or not depending on the new page.

Lightbox

Do you use lightboxes for your images?
You can enable them at your Blogger panel in Settings - Posts and comments - Showcase images with Lightbox. Lightboxes let your user view a post's image enlarged, in a nice full screen overlay.

Update them with this:

$.Ajaxify.pageChange(function() {
    _WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', null, document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'http://www.blogger.com/static/v1/jsbin/1146871538-lbx_en-GB.js', 'lightboxCssUrl': 'http://www.blogger.com/static/v1/v-css/3429760955-lightbox_bundle.css'}, 'displayModeFull'));
});

Google Analytics

Use Google Analytics?
Check that your Analytics code looks like this:

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-22477387-1']);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script');
    ga.type = 'text/javascript';
    ga.async = true;
    ga.src = (document.location.protocol == 'https:' ?
             'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);
})();

The _gaq.push(['_trackPageview']); line is crucial.

If it isn't like the above, find

<b:include data='blog' name='google-analytics'/>

in Template - Edit HTML and remove it then place the custom analytics code into a JavaScript file or snippet of your choice.
Remember to use your own Analytics Account ID! (ie. Modify the snippet above so that it reports to your account!)

Then enter this into your JavaScript:

$.Ajaxify.pageChange(function() {
    _gaq.push(['_trackPageview', $.Ajaxify.current_url.relative]);
});

Google AdSense

I would post my solution which works but I will wait for Google's approval, which I have asked via e-mail a few days ago.
This solution lets you refresh your ad depending on context and does not require manual declaration of keywords like this solution.
I was very excited when I found my solution but unfortunately it will have to wait!

Comment Form

Note: Does not work with latest threaded comments
You'll need to add this to get your comment form working:

var commentShown = false;

// Initiate comment form only when about to be visible
$(window).bind('scroll', function(){
    var pos = $(this).scrollTop();
    if (commentShown) return;
    if (pos < ($('.comment-form').offset().top-800)) return;
    if (($('.comment-form > iframe').attr('src') > '') || ($('.comment-form').length == 0)) commentShown = true;
    else BLOG_CMT_createIframe('http://www.blogger.com/rpc_relay.html', '16182952069663634409');
});

$(document).ready(function() {
    commentShown = false;
    if ($('.comment-form').length == 0) commentShown = true;
});
$.Ajaxify.pageChange(function() {
    commentShown = false;
    if ($('.comment-form').length == 0) commentShown = true;
    else {
        // Comment iFrame
        var jsO, target;
        jsO = document.createElement("script");
        jsO.type = "text/javascript";
        jsO.src = 'http://www.blogger.com/static/v1/jsbin/884844084-comment_from_post_iframe.js';
        target = document.getElementsByClassName('comment-form');
        for (var i = 0; i < target.length; i++) {
            target[i].appendChild(jsO);
        }
    }
});

This snippet checks if a comment form exists, then loads it only when your user scrolls down near to the comment form. You will have to tweak it though the tweak is simple. Visit a page with your comment form showing, right click and select 'View Source' or similar. Press CTRL-F and find a place where you see something like the following:

<script type="text/javascript" src="http://www.blogger.com/static/v1/jsbin/884844084-comment_from_post_iframe.js"></script>
<script type='text/javascript'>
    BLOG_CMT_createIframe('http://www.blogger.com/rpc_relay.html', '16182952069663634409');
</script>

Get the massive numbers, 884844084 and 16182952069663634409 and replace accordingly in the snippet.

Ajax-ifying Blogger No. 1: Flickerless Page Loads

2011-12-01T18:10:00.001Z

No... not the detergent.

One of the problems I experienced while messing around with this blog was the fact that the experience as a whole was not polished enough. Many web services nowadays make extensive use of AJAX (and JavaScript) to add and remove content from your screen as you browse the website. What this achieves is an experience where your screen always has content on it, and flickers are never evident.

I wanted that on my blog.

First Thoughts

Since Blogger is a proprietary service with many of its doors closed, I realised that I cannot go the conventional way and ask for Google to give me a url where I can request certain bits of data.

I would instead need to pull all of the data for the next page, and cherry-pick what I need from it.

I decided to create a jQuery plugin which would do this for me. It would hijack all links which point back to the blog, and instead of taking the user to that page after showing them a gaping pit of whiteness, it would load bits of data from the clicked target page onto the current page.

I had not done much JavaScript or AJAX before so on my way to the result, I had to encounter many baffling moments.

URL Parsing

It didn't take long for me to get to my first hurdle. Parsing the target URLs from the internal links.
I soon found James Padolsey's parseURL which uses a genius method: Letting your browser do most of the work by using the DOM. The method was great and all potential problems related to URL parsing was gone.

I do use Steve's parseUri now though due to its faster speed from only using regexes. I had to add a few more checks to certain parameters but I'm sure the speed benefit helps for webpages which contain many internal links.

Retrieving the right elements for the next page.

jQuery selectors are awesome. I myself do use it for parsing elements out of data pulled from target links. However, there are problems with one being crucial. That is the ignoring of javascript entries which look like this:

<script src='http://www.domain.tld/js/script.js' type='text/javascript'></script>

This was a proper blow and while it could be remedied by adding the $.Ajaxify.pageChange() method which lets users register functions which are run when new pages are loaded, it made everything un-necessarily difficult. For example, I have so far had to add code to update and refresh software such as Google Analytics, AdSense, AddThis, the Blogger comment form and various other elements which display page data. How inconvenient is this? The process of keeping these components in time with the context of the page also requires some reverse engineering of the components depending on the amount of documentation available.

While I have tried out other methods, such as using iframes to let the DOM parse html, they have proved to be much slower, triggering all JavaScript initiations as well as rendering all DOM elements which do not have to be loaded onto the page at all. If anyone finds a nice method which keeps script elements and comments intact while selecting specific elements from a chunk of html, please let me know!

History

After having successfully swapped the shown content for new content, I felt satisfied and was starting to think that my work was almost done. How wrong I was!

All web browsers have this feature called history which lets you traverse between pages you have been to. Pages like mine, which change content without actually moving to a whole new page, do not actually add entries into your browsers history unless the JavaScript does that for you.

W3C's specifications regarding session history helped a lot and I was able to get history working after a while. If you press the 'back' button now, you'll notice that you'll be taken back to the previous page smoothly (if you were already on my website).

Final Product

You can find my final work here: http://www.swook.net/p/jquery-ajaxify-plugin.html together with instructions on installation and configuration.

Simply install the script along with jQuery, and configure it, and off you go with a nice AJAX-ified Blogger.
There are some tweaks that you'll have to perform to keep everything updated as your page changes but that should be discussed in another post.

If you want a demo, you have probably already used the plugin on your way to this page! This blog sports my Ajaxify jQuery plugin and you'll notice if you look carefully for blank-outs or whole-screen flickers when you click on a link which points to another page in my blog.

To read the next article in this series, click below:
Ajax-ifying Blogger No. 2: Keeping Content Updated

Notch vs Yogscast

2011-11-23T03:20:00.001Z

There has been much drama lately over in the Minecraft community due to a series of Twitter posts by Markus Persson. Read the thread at Minecraft Forum and TotalBiscuit's reply to get an idea about what's going on.
There have been several points made and I'd like to comment on a few:

Notch owes Yogscast vs Yogscast owes Notch

Neither owes the other.
Either could have done without the other.
However, the fact is that both co-exist and both are important in maintaining the community.

People mention often that it wasn't the Yogscast which drew them to Minecraft.
That is true, Yogscast videos are not aimed at drawing new users but they are aimed at maintaining the community by sharing mods, new features, texture packs, adventure maps, and skins.
They maintain a certain 'freshness' by having a casual and honest approach (sometimes unfair) to new content, allowing for continued interest in the community.
They could do without Minecraft however, as they were well established before entering the Minecraft community. However, it is a fact that they now co-exist with the community.

The Yogscast were correct to demand payment

Notch could have done without the Yogscast and yes, Notch has no obligation to pay the Yogscast.
The Yogscast do make a living out of their videos.

However, what is Minecon? Is it not a convention in Mojang's interest?
Is it not a hype machine which has been un-necessarily spamming the otherwise useful news updates with the glam prospect of a party in Las Vegas?

If Mojang had the community's benefit in its highest interest, it would have held an online convention, open and available to all Minecraft fans. They would work on proper documentation and proper, clear information about their releases.
They however, chose Las Vegas as Notch wished so. Having chosen Las Vegas, the emphasis for Minecon was definitely placed on the hype it can produce, the attention it can acquire, and the glamour with which Mojang could exhibit its greatness.

With the purpose of the convention in mind, it is not hard to come to a conclusion that the Yogscast, as part of the hype-machine should have been paid for their part in it.
Minecon benefited from their attendance but the Yogscast did not as they already have maximum exposure through Youtube.

Unprofessional Behaviour

A similar situation to this one is when Notch challenged Bethesda to a Quake match to settle the court dispute regarding a supposed trademark infringement from Mojang, with their new game Scrolls, with Bethesda's Elder Scrolls Series.

Utilising the community to his benefit, Notch successfully gained the support of millions with his flamboyant attitude.
You may be arguing, "but he really did challenge Bethesda!" but I'd like to ask: "Would Mojang have wanted to change the name of Scrolls to something you’re fine with."? No.

This strategy works marvellously when dealing with corporates like Bethesda.
Why use the same strategy towards a large part of your own community though?

Professional behaviour is not about suits, ties and the common set of boring phrases. It is about being wary about the responsibilities one can take as a result of one's actions.
Notch's introduction of this issue through his personal Twitter account was not professional.

British Humour

There are many mentions with regards to how Simon and Lewis' supposed remarks are examples of British dark humour.
There are also comparisons of British and Swedish humour.
This is irrelevant to the situation.

The joke (proposing to cross out Notch's signature and replace it with a Fuck Off) was most likely a failed attempt. Face it, the Yogscast, while good performers in the space of edited Youtube videos, are not real-time entertainers (for the most part) and such a failed attempt at humour should be ignored with respect or merely used for entertainment.

The issue is whether this was a joke or whether it was simply being rude.
I will wait for the Yogscast to give their own statement as there is currently only one side to the story.
However, I fail to imagine a situation where this was not a failed joke attempt.

Yogscast = Celebrity?

There are many comments about how the Yogscast have become full of themselves, how they are rude and do not deserve to feel as if they are real celebrities.
Real celebrities.

The platform for entertainment has shifted and expanded over the years and continuously does so.

Minecraft is an indie game, produced by an independent and small company.
The Yogscast is an indie production, run by a small company as well.

Both have garnered much attention and both are recognised in the community but both have also not gone through traditional methods of gaining attention. The internet has changed much and it is time we not only observe but also accept that fact.

Push Blogger's Sidebar Ad Down to the Bottom

2011-11-22T08:26:00.000Z

Good Bye Old Design!

While changing the design of my blog from the old copper themed mess to this new clean template, I was carrying out numerous changes to the CSS of the template.

I made myself busy changing the colours of everything, enlarging and shrinking text, and tapping the refresh button on my browser to check things were peachy.

Hello New Design!

After having gone through many templates, I settled on the design which you can see on this page. 'Clean', I thought and I especially made sure that I praised myself enough for the ninja page buttons which were done so that it didn't form a boring old bar. As my eyes roamed around the screen, I gasped when I took a glimpse of the AdSense advertisement at the bottom of the sidebar.

There were a few problems to it:

The advertisement was placed right below the last widget, with no breathing space.
Having the advertisement in an easy-to-view location is beneficial for increased exposure of the ad but I prefer a more discreet placement. At the time, my sidebar ad was glaring at me in the face!

What I wanted was for the advertisement to be placed at the bottom of the sidebar pane and effectively at the bottom of the page, disregarding the height of the page (which changes depending on content). This would allow ads to be viewed after the reader finishes reading a post, not before.

Usually, the easiest method of placing an element at the bottom of a div is by doing something like the following:

#elementId {
  bottom: 0px;
}

Unfortunately, the sidebar div does not extend down to fill up the full length of the page. Therefore, when using the code above, it does not affect the position of the advertisement.

Googling around brought my attention to faux columns which allow for divs which extend as I wish mine to do. On inspecting the template code of my site, I found that this was already being done. However, the faux columns were not actually holding the sidebar widgets and therefore I had to find a way to apply the height of the faux columns to my sidebar.

There were mentions of using position: absolute somewhere and setting height: 100% for the container and so on but none of it seemed feasible enough as the template code is rather confusing and there are at least 10 parent divs for the ad div.

What I could do though, was to write a piece of JavaScript which lets me move the ad down. This would actually be the easiest solution since calculating the height of the flexible page can only be done client-side. Here's the code I ended up with:

<script type="text/javascript">
//<![CDATA[
  onload = function(){
    var sidebar = document.getElementById('sidebar-right-1');
    var newheight = document.getElementsByClassName('fauxcolumns')[0].clientHeight;
    var oldheight = sidebar.clientHeight;
    sidebar.style.height = newheight+'px';
    document.getElementById('AdSense1').style.top = (newheight - oldheight)+'px';
  }
//]]>
</script>

To use this code, place it anywhere in your template (before </body>). You can edit your template for Blogger via the menu accessible through: Dashboard - Template - Edit HTML.

The div class and id names used will vary depending on your Blogger template, but should not differ too much as long as you are using Blogger's classic templates (not the odd 'Dynamic' ones). This small piece of code runs once the page is loaded and carries a few jobs out. It first gets the height of the fully extended sidebar from the faux columns, then it sets the sidebar to be that height so that it can extend downwards fully. The code then calculates where the ad should be using the previous height of the sidebar and places the ad there using the CSS property top.

If you have any problems, let me know and I will try to help.
Also, if you found this post helpful, please share it and if you wish to, flattr me.

AS2 | Long Click Detection

2011-11-15T07:21:00.000Z

This article deals with Long Click (aka Long Press aka Press and Hold) detection implementation using ActionScript 2.
Prerequisite: AS2 | Object.addProperty

When working with a touch screen UI, one has to often consider what someone else would intuitively do when dealing with the UI. Naturally, people tend to fall back to experience from older analogue devices which provide tactile feedback.

Think back to a few years ago, when the first Walkmans were becoming hip. You'd see teenagers walking down the street with a pair of earphones in their ears, clutching onto a small grey device. Looking closer, you would notice the spinning wheels of a cassette tape. These devices were in no way complex but they did what they were built to do: play music from cassette tapes.

Part of the playback relied on seeking which was done by pressing the fast forward or rewind keys. If you pressed the keys for a short time, the tape would rewind or fast forward just a little bit. If you held on for a longer moment, hearing the whirring in your earphones, you would be sent further back or forwards in the cassette.

The Need for better Long Click Detection

When designing a music UI, it is often expected that pressing the fast forward or rewind keys briefly will change the track being played. It is also expected that holding onto the forward or rewind keys will let you seek within the current track.

This feature is by no means difficult to write with ActionScript 2. In fact, I will do that now for a MovieClip button named mcPrev:

var count:Number = 0;

mcPrev.onPress = function (Void):Void
{
    this.onEnterFrame = function (Void):Void
    {
        if ( count < 10 ) {
            ext_fscommand("Rewind");
        }
        count++;
    }
}

mcPrev.onRelease = function (Void):Void
{
    if ( count <= 10 )
    {
        ext_fscommand("PreviousTrack");
    }
    count = 0;
    delete this.onEnterFrame;
}

The code above starts counting up to 10 once you press the button. When it reaches 10, it starts rewinding the current track. When the button is released, the code checks if the counting had been done above 10 and if not, changes the current track to the previously played track.

It's all very simple and Just Works.

What happens though when you want to get that working for 10 different clips?

First off, you can't use the variable count like I do, it must be tied to the MovieClip since it would be over-written by other actions.
Secondly, you would end up with hundreds of un-necessary lines of code.
Thirdly, you would get confused about how and when you should be using MovieClip.onEnterFrame. This is because the code above relies on the said event.
Fourthly, you would get tired of writing this piece of code, having to alter it ever so slightly as you increase the usage of it.

Would it not simply rock for you to be able to do the following?

mcPrev.onLongClick = function (Void):Void
{
    ext_fscommand("Rewind");
}

mcPrev.onShortClick = function (Void):Void
{
    ext_fscommand("PreviousTrack");
}

The Long Click Detection

To start off, we need to find a way to listen to the onEnterFrame event which occurs for every rendered frame in your flash movie. This is so that we can wait for a certain amount of time (delay) until we start announcing that a long click is occuring. This is also so that we can periodically announce when to run the onLongClick function.

The solution is to use a hidden Flash MX class called OnEnterFrameBeacon. This class has a single method called init() which starts listening to a ghost MovieClip's onEnterFrame event.
It relays the event to all listening Objects, allowing you to have an onEnterFrame listener anywhere in your code. OnEnterFrameBeacon is initiated in the following way:

import mx.transitions.OnEnterFrameBeacon;
OnEnterFrameBeacon.init();

Now let's consider what sort of events we have to listen to. There's the onPress, onRelease events as well as the onDragOut event. Afterall, the UI should stop rewinding once your fingers leave the button! Let's hijack these events and replace it with our own handler object.
This can be done via MovieClip.prototype.EVENT which lets you add methods to the default MovieClip class.

var LongClickHandler:Object = {};

MovieClip.prototype.addProperty( "onPress",
                                 function ():Function {
                                     return LongClickHandler.onPress;
                                 },
                                 function ( func:Function ):Void {
                                     this.onPress_ = func;
                                 } );

MovieClip.prototype.addProperty( "onRelease",
                                 function ():Function {
                                     return LongClickHandler.onRelease;
                                 },
                                 function ( func:Function ):Void {
                                     this.onRelease_ = func;
                                 } );

MovieClip.prototype.addProperty( "onDragOut",
                                 function ():Function {
                                     return LongClickHandler.onDragOut;
                                 },
                                 function ( func:Function ):Void {
                                     this.onDragOut_ = func;
                                 } );

This code basically creates a proxy for the mentioned events, making ActionScript go through our own methods first (LongClickHandler.EVENT). Compatibility is kept by putting all user-defined functions to the side (onPress_) so that we can run them after our own handler is done.

We can now add those onLongClick and onShortClick events:

MovieClip.prototype.addProperty( "onLongClick",
                                 function ():Function {
                                     return this.LongClick.func_long;
                                 },
                                 function ( func:Function ):Void {
                                     LongClickHandler.Init.call( this );
                                     this.LongClick.func_long = func;
                                 } );

MovieClip.prototype.addProperty( "onShortClick",
                                 function ():Function {
                                     return this.LongClick.func_short;
                                 },
                                 function ( func:Function ):Void {
                                     LongClickHandler.Init.call( this );
                                     this.LongClick.func_short = func;
                                 } );

These methods cache the functions which we set to them, and initialises the MovieClip's Long Click handler.

Let's start writing the handler now.

LongClickHandler.Init = function ( func ):Void {
    // NOTE: this == MovieClip
    if ( this.LongClick != undefined ) return;

    this.LongClick = {};
    this.LongClick.mc = this;
    this.LongClick.onEnterFrame = LongClickHandler.onEnterFrame;
}

We cache some data into a new Object which we need to use to listen to the onEnterFrame event. We also register the onEnterFrame event that we will write for our LongClickHandler.

We now write the proxy function for the event onPress which lets us start the Long Click handling.

LongClickHandler.onPress = function ():Void {
    // NOTE: this == MovieClip
    if ( this.LongClick.func_long ) {
        this.LongClick.start_t = getTimer();
        MovieClip.addListener( this.LongClick );
    }
    this.onPress_();
}

As you can see, the handling is initiated only if a function is defined for the long click handling (onLongClick). If it is defined, a starting ticks value is saved and we start listening to the onEnterFrame event which fires the function assigned to MovieClip.LongClick.onEnterFrame which is equal to LongClickHandler.onEnterFrame.

Now let's write the real deal.

// DELAY: Delay until LongClick handling is started
// INTERVAL: Interval at which LongClick should be called
// Both values are in milliseconds
LongClickHandler.DELAY = 350;
LongClickHandler.INTERVAL = 150;

LongClickHandler.onEnterFrame = function ():Void {
    // NOTE: this == MovieClip.LongClick
    // Calculate elapsed time (ms) since onPress
    var dt:Number = getTimer() - this.start_t;

    // this.last_t: last registered LongClick event
    //              exists once
    if ( this.last_t ) {
        var ivl:Number = LongClickHandler.INTERVAL;

        // this.trail_done: tells whether the trail-off for
        //                  the interval has been finished.
        if ( !this.trail_done ) {

            // Calculate trail-off
            var inc:Number = (ivl * 100000 / dt / dt) >> 0;

            // If trail-off changes are less than 10ms,
            // consider it done
            if ( inc < 10 ) this.trail_done = true;

            // Increase interval by trail-off change
            ivl += inc;
        }

        // Calculate elapsed time (ms) since last LongClick
        dt = getTimer() - this.last_t;

        // If greater than calculated interval
        if ( dt >= ivl ) {

            // Remember this time
            this.last_t = getTimer();

            // Call the function registered to onLongClick
            this.func_long.call( this.mc );
        }
        return;
    }

    // If LongClick not called before, and time elapsed
    // larger than defined DELAY
    else if ( dt > LongClickHandler.DELAY ) {
        this.last_t = getTimer();
        this.func_long.call( this.mc );
    }
}

As you can see in the chunk of code above, I have coded a 'trail-off' which lets your interval decrease to your target interval defined in LongClickHandler.INTERVAL. This gives an effect of a speed-up due to the longer duration of pressing-the-button.

We can't perpetually detect LongClicks though and need to end it at some point. The following code does that as well as adding onShortClick handling:

LongClickHandler.cleanUp = function ():Void {
    // NOTE: this == MovieClip
    delete this.LongClick.last_t;
    delete this.LongClick.trail_done;
    MovieClip.removeListener( this.LongClick );
}

LongClickHandler.onRelease = function ():Void {
    // NOTE: this == MovieClip
    if ( !this.LongClick.last_t ) this.LongClick.func_short();
    LongClickHandler.cleanUp.call( this );
    this.onRelease_();
}

LongClickHandler.onDragOut = function ():Void {
    // NOTE: this == MovieClip
    LongClickHandler.cleanUp.call( this );
    this.onDragOut_();
}

Usage

I have been very rough with explaining how it all works but there's a reason for it. You don't need to know! Like I mentioned before, you simply have to do something like the following to make use of my code (full code provided at the end).

mcPrev.onLongClick = function (Void):Void
{
    ext_fscommand("Rewind");
}

mcPrev.onShortClick = function (Void):Void
{
    ext_fscommand("PreviousTrack");
}

How convenient is that!

Full Code

var LongClickHandler:Object = {};
LongClickHandler.DELAY = 350;
LongClickHandler.INTERVAL = 150;

LongClickHandler.Init = function ( func ):Void {
    // NOTE: this == MovieClip
    if ( this.LongClick != undefined ) return;

    this.LongClick = {};
    this.LongClick.mc = this;
    this.LongClick.onEnterFrame = LongClickHandler.onEnterFrame;
}

LongClickHandler.cleanUp = function ():Void {
    // NOTE: this == MovieClip
    delete this.LongClick.last_t;
    delete this.LongClick.trail_done;
    MovieClip.removeListener( this.LongClick );
}

LongClickHandler.onEnterFrame = function ():Void {
    // NOTE: this == MovieClip.LongClick
    var dt:Number = getTimer() - this.start_t;
    if ( this.last_t ) {
        var ivl:Number = LongClickHandler.INTERVAL;
        if ( !this.trail_done ) {
            var inc:Number = ( ivl * 100000 / dt / dt ) >> 0;
            if ( inc < 10 ) this.trail_done = true;
            ivl += inc;
        }

        dt = getTimer() - this.last_t;
        if ( dt >= ivl ) {
            this.last_t = getTimer();
            this.func_long.call( this.mc );
        }
        return;
    }
    else if ( dt > LongClickHandler.DELAY ) {
        this.last_t = getTimer();
        this.func_long.call( this.mc );
    }
}


// Replace onPress
LongClickHandler.onPress = function ():Void {
    // NOTE: this == MovieClip
    if ( this.LongClick.func_long ) {
        this.LongClick.start_t = getTimer();
        MovieClip.addListener( this.LongClick );
    }
    this.onPress_();
}

MovieClip.prototype.addProperty( "onPress",
                                 function ():Function {
                                     return LongClickHandler.onPress;
                                 },
                                 function ( func:Function ):Void {
                                     this.onPress_ = func;
                                 } );


// Replace onDragOut
LongClickHandler.onDragOut = function ():Void {
    // NOTE: this == MovieClip
    LongClickHandler.cleanUp.call( this );
    this.onDragOut_();
}

MovieClip.prototype.addProperty( "onDragOut",
                                 function ():Function {
                                     return LongClickHandler.onDragOut;
                                 },
                                 function ( func:Function ):Void {
                                     this.onDragOut_ = func;
                                 } );


// Replace onRelease
LongClickHandler.onRelease = function ():Void {
    // NOTE: this == MovieClip
    if ( !this.LongClick.last_t ) this.LongClick.func_short();
    LongClickHandler.cleanUp.call( this );
    this.onRelease_();
}

MovieClip.prototype.addProperty( "onRelease",
                                 function ():Function {
                                     return LongClickHandler.onRelease;
                                 },
                                 function ( func:Function ):Void {
                                     this.onRelease_ = func;
                                 } );


MovieClip.prototype.addProperty( "onLongClick",
                                 function ():Function {
                                     return this.LongClick.func_long;
                                 },
                                 function ( func:Function ):Void {
                                     LongClickHandler.Init.call( this );
                                     this.LongClick.func_long = func;
                                 } );

MovieClip.prototype.addProperty( "onShortClick",
                                 function ():Function {
                                     return this.LongClick.func_short;
                                 },
                                 function ( func:Function ):Void {
                                     LongClickHandler.Init.call( this );
                                     this.LongClick.func_short = func;
                                 } );

Please reply below if you need help with understanding the code!

Edit: This code does not work. Click here for an updated version of the code.

AS2 | Object.addProperty

2011-11-15T03:22:00.001Z

The most useful method I have thus far encountered while programming in ActionScript 2.0, is Object.addProperty. I would like to explain why this is so and how the method works.

Objects (and Arrays)

In ActionScript, the Object type/class is used frequently. An Object is used differently in different situations. In the object-oriented programming sense, Objects are instances of a Class. In a very basic sense, Objects are Arrays where the indices are named.

In both Arrays and Objects, any data type can be put into a new slot. In an Array, you must pick a spot based on the available integer index slots while in an Object, you must specify the String index.

function Three (Void):Number
{
    return 3;
}

var my_array:Array = [
                       1,                 // Number
                       "Two",             // String
                       Three              // Function
                     ];

var my_object:Object = {
                         one: 1,          // Number
                         two: "Two",      // String
                         three: Three     // Function
                       };

Both arrays and objects are useful in different ways.

Since the integer indices are important for arrays, it is essentially an ordered stack where you can .push or .sort the elements among other methods. This is very useful for queues for example, where the order of a list is very important.

Objects on the other hand have the advantage that the elements can be referred to very easily.

trace( my_object[ "two" ] );
// Traces "Two"

trace( my_object.two );
// Traces "Two"

As you can see in the example above, you can refer to objects like you do in an array and also as a "." concatenated string where you have some sort of a tree structure starting from the top object. When you use any method in ActionScript, you are using this tree-like structured syntax and this syntax is simply wonderful. At the most basic level, it gives your code a more modular feeling, letting you differentiate between associated bits of code. At a more advanced level, you are able to use the same methods or properties for many different objects, making programming in general easier.

Detecting Variable Changes

Once you start using Objects, you will at some point start wondering about this:

How do I detect when my property is changed?

Your code is riddled with copy-pasted code and you find that while you have hundreds of lines of code, most of them are repetitive.
You wonder what you should do and start wishing that you could monitor all of those variables which do the same things after they are set.

Take for example, the setting of a variable:

var myapples:Number = 10;

Whenever you change the number stored in myapples, you want to set a TextField called applesnum to show the number of your apples.
This is what you would do:

var myapples:Number = 10;
applesnum.text = myapples;

But doing this every single time you set a value to myapples would make your code messy. This is when you need getters and setters.

Object.addProperty

var myapples_:Number;

function setmyapples (num:Number):Void
{
    myapples_ = num;
    applesnum.text = myapples_;
}

function getmyapples (Void):Number
{
    return myapples_;
}

this.addProperty("myapples", getmyapples, setmyapples);

The code above seems rather long at first glance, but it allows you to simply do:

myapples = 10;

and still get the TextField updating as we need it to. This lets you reduce the amount of code you repeat drastically.

Another way of writing the code above is:

var myapples_:Number;

this.addProperty("myapples",
                 function (Void):Number
                 {
                     return myapples_;
                 },
                 function (num:Number):Void
                 {
                     myapples_ = num;
                     applesnum.text = myapples_;
                 } );

using un-named functions.

Usefulness of Object.addProperty()

Being able to 'detect' changes in the variable is just one way of using Object.addProperty and the method is truly useful for many different purposes.
For example, if you are writing a music interface in ActionScript 2, and wish to set the volume, you will most likely have to use a method similar to this:

function getVolume ():Number {
    return ext_fscommand("GetVolume");
}

function setVolume ( newvol:Number ):Void {
    ext_fscommand("SetVolume", newvol);
}

Sometimes though, you'd want to do something like:

var vol:Number = getVolume();
vol++;
setVolume(vol);

If you use the following code, everything is so much neater and elegant:

this.addProperty( "volume",
                  function ():Number {
                      return ext_fscommand("GetVolume");
                  },
                  function ( newvol:Number ):Void {
                      ext_fscommand("SetVolume", newvol);
                  }

this lets you do:

volume++;

So, a bit of effort ends up letting you save a significant amount of time!

Skyrim and musings about putting The Matrix in an MMO

2011-11-10T07:30:00.000Z

Note: These are just the musings of an idiot. If you find the ideas ridiculous, please pass by.

Skyrim

I am by no means a gamer.

Yes, I have played a few games and have enjoyed them as well. However, I have never gone too far into any game. Any game, at some point in time, bores me and I was wondering why this could be.

Bethesda Softworks' Skyrim is being publicly released tomorrow (aka Korea's Peppero Day). Skyrim has been one of the most awaited games of the year and Bethesda was able to generate lots of hype about this new release. The hype is well deserved though since their previous release of Elder Scrolls, Oblivion, was a truly amazing game.

Though I have not played Oblivion and Morrowind long enough, these are the few properties which I personally think, puts the Elder Scrolls series (as well as the Fallout series) apart from all other games:

Truly immersive play - Players are able to make decisions which have lasting effect. These lasting effects can change the landscape, your relationship with every other character in the game, the destiny of the world and more. Simply put, you matter, as a player, to the world of the Elder Scrolls.

Multi-ended plot - Due to the previous point, the plot changes in hundreds of different ways for each player and leads to a different ending every time.

Massive landscape - The landscape allows players to play in 'sandbox mode' whereby side-quests can be done and all sorts of skills honed. If you were to aim for the completion of the plot, it would take around 10 hours (with difficulty adjusted), but if you were to play through Oblivion at a moderate pace, pursuing a moderate amount of side-quests, it would take you at least 200 hours.

Skyrim brings in several aspects which have put gamers on their toes, waiting anxiously.

Dragons

Okay okay, that's not all of course. The graphics are better and there are all sorts of skills and the world's more beautiful etc., but above all, the dragons represent best what's exciting about Skyrim.

Unlike traditional NPCs (Non-Player Characters), these dragons are not scripted. The dragons fly in and destroy villages randomly causing the player distress in the most unexpected places. Other hostile NPC mobs are also done in this way, letting you have a more lively world. No doubt, I would expect the game to be rather resource intensive. The idea is truly awesome but it is still limited to your single player world.

I started wondering about what it would be like, if an MMO could exist where what you do actually matters, like in the Elder Scrolls series. Guild Wars 2 is a pioneer in this aspect. Ever since I viewed the GW2 Manifesto Trailer, I have been looking forward to trying the game out. The most exciting idea is what I stated earlier: a world where every single thing done by a player affects the world as a whole. They tagged this a 'dynamic world' and this, would truly bring about the most immersive gaming experience known to man.

Designing a MMO

This is all rosy and up till now I have not mentioned anything new. Now I'll let you into my train of thoughts...

Designing games is great but there is a much standardised procedure for MMOs and it is difficult for new directions to be adopted in game development. This is because there are just too many elements to a game and each element takes a colossal amount of work and time to be done. There's the whole artworks bit which alone takes up many man hours. Then there's the music which is a key part of gameplay. There's also the story writing which has to be altered all the time as it affects and gets affected by all of the other elements. There's the promotion as games do not work without players, as well as working on maintaining your previous games' fans who make up for a large percentage of your new game's publicity and purchases.
All of the elements mentioned so far are non-technical and where the works of the technical hermits go, more complications arise. Modern games are required to be attractive and realistic. This pushes for the need for a realistic and high performance Physics engine, as well as a high performance graphics engine which are worth years and years of work. Then there's the game interface design and coding, the multiplayer networking support, the website for all extra-game features such as trading and usage of markets, and one of the most important bits: the carrying out of the plot, which requires the coding of all NPCs, towns, quests, items, and more.

The previous paragraph is not even the whole scene!

As you can witness, creating a modern game is definitely a challenging job. I would like to shift my focus on a few elements and look back to a movie which I greatly enjoyed watching, The Matrix.

The Matrix

I shouldn't need to explain what The Matrix is about and why it was such a success. If you would like to know more about The Matrix Trilogy, visit the wiki article. As we all know, The Matrix which is shown in the movie, is a system which the machines built to harvest our body's energy with heat being named as the main source (ridiculous, but not the point). Apart from being a human farm, The Matrix is also a system into which humans are 'plugged' into, allowing them to live a virtual life with others which are plugged in. The Matrix decides what happens in the world but those that are 'plugged in', including not only the humans but programs as well, are able to make lasting changes to the world, much like our real world.

I was wondering what it would be like if The Matrix was applied to game design. A sandbox world with some basic terrain, such as the Earth could be created and the players would be logged into the world and allowed to make changes to it. Now of course, the available tools, the culture, the settlements and many other elements of the world must be created to provide a completed starting world. But I would like to focus more on the act of 'plugging in' here.

The Matrix in MMOs

MMO games work in the following way. You download most of the necessary graphics and quest details then log into the world where there are scripted entities standing around (NPCs), urging you to do the most random acts. The act of the NPCs are dealt by the server but the movements and actions of your own character is controlled by yourself. Since the only control you have is on your own player, the control over the NPCs, time, weather and such are done by a central governor. Players are in a way, 'plugged in' to the world which is run by this governor. This one governor has many tasks to deal with including full control over NPCs.

In the perspective of The Matrix, NPCs are merely programs. They can think and act freely but are restricted by a set of laws of Physics which is defined by the architect. Some programs however, are able to break through these set of rules and seize control over elements of the world. This, I believe is how a MMO world could be constructed.

A central governor would still be necessary, but NPCs would be 'plugged in'. They would calculate their own actions and reactions which are limited by a set of rules set down by the governor. Their acts would be conveyed to the governor, who would in turn broadcast it to selected other NPCs and players who are affected. One would be able to produce a very modular game architecture in this way.

Selecting a game server to connect to would be completely un-necessary. You would merely connect to different in-game regional nodes and your actions would be processed individually by entities which are affected. One central server or cluster would not need to calculate the Physics of several thousand NPCs, but would instead tell the NPCs about interactions which the NPC should register and react to.

It isn't just NPCs where this Matrix idea can be implemented. Trees could also be put into a separate server and/or process where each individual tree is told the flow of air around it. The tree would the only need to tell the players in the vicinity which way it is swaying. An orc could roll down the hill, getting damaged in various spots while dropping some gear. The player and governor would not need to calculate any part of this process since the orc would determine what happens on its own, in an isolated process/server, basing all calculations on the rules set out by the governor.

Last Words

I may, of course, be stating what is already being done. I am in no way knowledgeable of NPC architecture and how MMOs work under-the-hood. It is still interesting however, to consider what could potentially be possible if NPCs could be dealt in a similar way as human players are dealt with. Yes, we do possess intelligence and AI has a long way to go. However, even simple intelligence, when implemented to each element of a MMO world in an isolated manner, would bring about a much more lively and interesting world for gamers to play in.

I do realise that this is not an easy task in reality and the capital required to run a large enough cluster of servers for a small enough world would make the implementation infeasible in many ways. One can still wonder what possibilities there are though...

Benefits of a Custom UCI Launcher

2011-11-04T05:50:00.000Z

In my previous post concerning the way UCIs are implemented in Cowon's mp4 players, I touched upon the potential of the UCI launcher movie (or rather, the shortcomings). I would like to discuss more about what the launcher does and would like to introduce to you what one could do to improve your Cowon experience.

The different default UCIs of the Cowon J3, served to you by the launcher (Image courtesy of Cowon)

As you probably are aware of by now, a launcher.swf file located in \\System\Flash UI\ allows you to load a custom launcher. The launcher loads your UCIs for you and also lets you change between UCIs.

An additional hidden feature is the changing of the wallpaper, which could be misunderstood as being done by the firmware.
The wallpaper choosing menu for the picture UI for the Cowon J3 is shown on the right, marked with a red box.

A few functions are shown as being available via Cowon's sample UCI sources. These functions deal with detecting key inputs (buttons on your player), scroll `TextField`s, set popup `MovieClip`s and all sorts of jazz.
There are however many many undocumented functions available via the launcher which one can only find out by decoding the default launcher.swf which requires quite a few steps.
By writing a custom launcher, the minimal benefit would be that these functionalities would be exposed for new UCIs to make use of. This would increase UCI development speed and allow for less coding and more design.

"Surely though", you're thinking, "those few things aren't worth a blog post?".

Well of course not.

Yes, to the left of this chunk of text, you are seeing the next generation of UCI switching. This demo flash movie is unfortunately not a reality yet and is simply a mockup. However, I hope that it shows you what could be done effectively.

There are a total of 7 transition effects on display of which about 2 are repeats. This is because the moving left/right up/down would depend on the 'level' of the UCI. (ie. mainmenu UCIs would be of a 'higher' level and would move left/up.)

Hopefully, this small clip has got you excited. "What else? Tell me more!" I hear you shout.

Apart from giving you a smoother experience between UCIs, a modified launcher can also provide some shared elements such as a shared header bar for the player status, a shared notification system, a shared settings interface and more.
You would also get a significant boost in UCI loading. This is because UCIs coded with the launcher's framework would be able to skip the time-consuming steps of checking states.

In the perspective of a developer, you would have a vast array of simple methods to use without worry of performance loss. You would also receive more tools as the launcher receives added features. Widget sets could be shared across different UCIs as well. Simply put, you can do anything more easily and quickly.
What does this mean for users? More UCIs, More Choice, a Better Experience.

Now... getting that launcher is something we'd want to get onto doing right?

If you wish to take a look at the source for the mockup movie, download it here.

Cowon's Flash UCI Structure

2011-11-02T10:13:00.000Z

As mentioned in my previous post about Cowon's support for UCIs and the need for a UCI framework, users of Cowon's mp4 players can apply community-made custom user interfaces to their players with a few easy steps. Designing those interfaces requires a lot of work, however.

Cowon's UCI File Structure

If you have used any of the UCIs, or CCUIs (Community-Created User Interfaces) as I like to say, you will know that you can usually install your own UCIs by simply dropping a few .swf files into the folder, System/Flash UI/ and that the UCI settings can usually be found in System/Flash UI/SOL/ as files ending with the extension, .sol.

If you have been around for a while, you may also know about the existence of launchers which are named as launcher.swf and placed in System/Flash UI/. However, you may not know what they do precisely and I'll try to explain that in this post.

A diagram omnipresent in Cowon's UCI guides

The Graphical User Interface (GUI) system for UCI-supported Cowon devices are structured in the way shown in the diagram to the left.

There's the 'real code' done in C, which does all of the important jobs such as making the music play - making sure that your player does what it should.

Then there's the bit which deals with user input and what the user gets to see on his/her screen, which is done by the Flash Engine.

Then on top of that flash engine, you find several flash movies running which help you communicate with the actual machine, letting you control playback, display brightness, etc.

The smart thing which Cowon did, was to let users create their own flash movies to use as their own custom interfaces. The silly bit they did was to provide their source code in an incomprehensibly confusing and unstructured format, making the learning curve very steep for aspiring UCI developers.

Another smart thing that Cowon has done, is to split the flash level into two bits. The launcher flash movie and the UI movies. The splitting on its own cannot be called the smartest thing done by man, but by putting the 'launcher' as a flash movie, they allowed themselves to code more quickly and unintentionally gave power to the users to change the way their UIs are loaded and handled. The silly thing about this is that there is no documentation about writing a launcher, and the source cannot be obtained without decoding the launcher.swf which sits in the firmware update resource binary. This is why there have not been any custom launchers so far, apart from a few which only had their framerates tweaked.

All this launcher and UI jibber jabber is probably boring you out of your mind. What I was trying to tell you about is the way to view how the UI is dealt with in these players.

To put it in simple terms, there's a massive machine which we cannot see the inside of called the 'Low Level' code. Then there's another machine which talks to the massive 'Low Level code machine' called the 'Flash Engine'. The flash engine has a screen attached to it and when you switch the player on, the 'Low Level code machine' hums waking the 'Flash Engine' up. Then the 'Flash Engine' hums and loads up launcher.swf.

From then on, the launcher is the one dealing with you, the user, directly.

In the end, every so-called UCI becomes a full-screen widget which the launcher loads and unloads.

"So what?", you ask me.

Well... you see, when people write their UCIs, they have to write it as if it's a standalone application. They write code which talks to the flash engine directly and every UCI ends up having to do a few things inevitably:

Check the state of the player by calling a gazillion commands to make sure you're showing it right.
Write a billion functions and methods which are used by everyone anyway.

"But... what about the launcher??"

Well it sits there... loads and unloads UCIs... and it also has a few functions which Cowon's UCIs use. Yeah it could know everything and save the hassle of no. 1 by telling the UCIs what it should display when it loads up, but it just sits there like it should, y'know.

"Well uhm... I suppose that's what it should do. It's called a launcher afterall..."

Linux | Tweak and save your Synaptics Settings

2011-10-31T08:57:00.000Z

Those who use a Synaptics touchpad on Linux may experience some problems. Most likely, you will not be able to access any of those advanced features such as emulating two finger scrolling. Recently, support was added so that you can choose that option but the more detailed settings of minimum finger pressure (EmulateTwoFingerMinZ) and the minimum touch detection width for two finger emulation (EmulateTwoFingerMinW) for example cannot be changed.

The fore-mentioned settings are just a couple settings among many which should be tweaked for optimal computing comfort, which all Linux users strive to achieve. The road towards this can vary and there are solutions which are easier than others. I'd like to explain to you, the easy solution.

The easy solution is to use synclient, a programme which lets you edit Synaptics settings on the fly. synclient has the advantage of being ridiculously easy to use and the disadvantage of not making your changes persistent (permanent). I have written a script to solve this problem.

synclient Settings Saver

Enter the synclient Settings Saver, a script which saves your synclient settings and applies it on startup.
The following are the steps needed to use this script.

First, install synclient if you have not done so:

sudo apt-get install synclient

View your current settings with:

synclient -l

and edit your settings with:

synclient <setting>=<value>

If you want to change the value of MinSpeed to 0.1 for example, do:

synclient MinSpeed=0.1

Once you're happy with your settings, go to your favourite folder and download and run my script using:

wget https://raw.github.com/swook/synclient-settings-saver/master/update-synclient-settings.sh
bash update-synclient-settings.sh

From now on, your settings will be applied when you login to your Linux session.
If you ever make any changes via synclient, run my script again.
For a detailed set of descriptions for the available options, visit this site.
If you have doubts about my script, view the source at GitHub.

Happy two-finger-scrolling!

Being Human

2011-10-30T10:00:00.000Z

I've been reading through a trilogy called The Hitchhiker's Guide to the Galaxy. Seeing how it is a must-read for all budding Physics applicants for UK universities, I am a few years late in reading the books and it really shows that I was in some ways rather unprepared for my course.

While a bit late, reading these few books by Douglas Adams has truly been a remarkably enjoyable experience. I do not want to reveal any spoilers so I won't go into specifics but would rather like to talk about some musings I had while thinking about the series.

I have yet to finish the 5-books trilogy and have gone up to almost finishing the third book, Life, The Universe and Everything, but I have still been able to grasp what usually seems to happen. There is a man called Arthur Dent, a Beltegeusean hitch-hiker named Henry Ford, a pompous two-headed man called Zaphod Beeblebrox who happens to be Ford's cousin, and a few other characters who somehow end up working towards saving the whole universe while having no idea at all about what and why they are doing what they are doing. The books are riddled with obvious and implicit humour and there are often times where I just cannot stop smiling. The smiling is often caused by the odd acts the characters put on. They are all rather selfish and often desert each other, they also have very strong opinions causing them to fight and mess things up, and most of them are very nonchalant about most of the odd situations they are put in. But apart from all of these odd behaviours, the most commonly used bit of humour is how these main characters, when meeting and being threatened by enemies, respond by posing some seemingly obvious logic questions, with the targeted enemy becoming instantly confused.

While the traits of all of the characters in the series is most likely set up to make the story most enjoyable, when you think twice about them, you will notice that us human beings share all if not most of their traits. We merely hide them well (or we think so). Selfishness, laziness, idiocy, and while not mentioned often, comradeship, love and such are all portrayed by the participating organisms of the series. Since the book is written for us human beings to read and relate to, all aliens and humans act like humans. I say this lightly, but what do we mean when we say 'human'?

The word human is used in many different words, situations and context. There's the word humanity which refers to the human species. It is however also used in exclamations such as: Oh the humanity! where it is used in a similar meaning to humane, which is often understood as having compassion. There's also humanoid, a word used often in The Hitchhiker's Guide to the Galaxy to describe organisms which have human-like physical features. There's also the popular word superhuman which refers to fictional beings which have spectacular powers (those should really be called extra-human since the super in superhuman does not work like super does in supersonic since supersonic refers to speeds greater than the speed of sound while superhuman refers to beings which are not necessarily greater or better than others.).

What is being human then? I hear you say that it is tightly related to being humane. Then what's being humane? Oh you're telling me something again... ah so it's having human traits? So what are human traits? Compassion only? No, not at all, human traits must include so much more! We often encourage 'good' acts by promoting acts of love and selflessness but as we all know people are very evil in general. Surely, with so many evil people around, being 'bad' must also be part of standard human traits?

"But this is just rubbish!", I hear you say, "surely you must accept the commonly accepted meaning of being human which refers to being a loving, caring, compassionate person? Surely by such extreme generalisations you are clearly making ANYTHING human!". Well I see what you mean. If my argument was to carry on, any living and thinking creature could be human. The flaw in this rebuttal however, is that we do not yet know if there are creatures which have our human traits as a subset of their own traits. We do not know also, that all of our traits combined are the only possible traits available for all thinking creatures. I hear you choke at my mention of thinking creatures but that's a debate for another time...

As for the matter at hand of defining what a human is, I believe that it is impossible to continue further. Afterall, we do not know much about ourselves. It is also impossible to enforce any different meaning onto the connotations of being human when it is the most abused reason for condemning the bad guys: those who perform inhuman behaviours to the disadvantage of others. There are also thousands of the so-called traits which I could list and the flaw with doing so would be that it would be almost every emotion or property we have ever thought of. In the end, all words which we use and know come from us!

To stop the endless loop of confusion, I must stop this post here right now.

[Blogger's Missing Files Host's Missing Characters]

2011-10-26T11:00:00.000+01:00

Previously, while talking about the setting up of this blog, I mentioned how Blogger's "Missing Files Host" feature was of great appeal.

It is wonderful really since it lets you seemingly 'host' files on your blog while actually being able to keep it elsewhere. It lets you upload files in your preferred method then lets you share links which seemingly originate from your blog. This helps you drive traffic to your blog and also gives the reader a more integrated feeling. Coupled with CDN, it is just wonderful.

There are quite a few massive caveats however.

302 Redirect

What Blogger does is that it coughs up the HTTP status code 302 when you request a file which does not exist on yourblog.blogspot.com. This code used to be called "Moved Temporarily" and is now called "Found". What does this mean?

What search engines will do when they encounter this code is that they will discard the 'link' 99% of the time. They are right in doing so though! Afterall, this link is temporary right? Surely the importance of a temporary link is not very high! The owner of the link probably wants it hidden.

The problem this causes is that you cannot have content hosted in your 'Missing Files Host' 'linked' to your blog. When I say 'link' I mean, linked in the search engine database ecosystem and this is the only linking which is really valid.

Is this truly a terrible problem? Not really if you are only serving files for people to download... but yes if you are trying to serve content. For example, a pdf file with your research paper should be connected tightly with your blog post announcing that paper.

I do understand the thought behind using a 302 redirect. Let's assume for a moment that Blogger uses code 301 (Moved Permanently) to serve the 'missing files'. A user could possibly upload a file named My-Diary into a directory called 2011/10 in their missing files host. Once someone tries to access that file, the browser will receive the HTTP status code, 301. The browser remembers that all requests for http://blog.tld/2011/10/My-Diary should be redirected to the missing files host. A few days later, the user writes a post called My Diary which can be accessed via http://blog.tld/2011/10/My-Diary. Uh-oh... the post does not show up since the browser continues to redirect you to the file called My-Diary!

However, I believe that this is really not a big problem. Surely the software can simply return different status codes for the different requests? If a requested file is or could be part of Blogger, return a 302. If a request URL has nothing to do with Blogger, return 301! Simple! Just a simple file extension check even, would help with the situation.

Missing Files Redirection cannot deal with strange characters

What? I hear you wonder.

Yes, not all files can be part of this wonderful scheme called "Missing Files Host". For some reason, Blogger's redirection code has flaws! If I have a file named !2#$![].zip, I would very much like it redirected but no, Blogger throws an error.

The page shown when accessing http://www.swook.net/lunar/Metro/[j3]metro_2_5.zip

This error can be confirmed since trying to access the same file, renamed to j3_metro_2_5.zip worked perfectly.

Error 400 is stated as being:

The request could not be understood by the server due to malformed syntax. The client SHOULD NOT repeat the request without modifications.

So yes, basically, Blogger cannot handle the URL!
Why shouldn't it though?

Slow NTFS-3G with Oneiric

2011-10-24T11:00:00.000+01:00

This is a short post to inform anyone if ntfs-3g I/O has been painfully slow after upgrading to Oneiric Ocelot (Ubuntu 11.10).

I have always relied rather heavily on the NTFS filesystem. This is because I am not 100% free from using Windows. While Windows is rather annoying to use, some programs such as Microsoft Office simply do not work on Linux. To keep the environment as similar as possible, I have always mounted my Windows partition and have used ntfs-3g, a NTFS driver for Linux to access my 'shared' files.

My $HOME/Desktop/ folder for instance, is symlinked to /mnt/windows/Users/Wookie/Desktop/ so that my desktop can contain the same files on both *buntu and Windows. Now I do admit that this is not in any way an ideal method of doing what I wish to do, and I should really be using rsync for a safer 'syncing'. This has worked thus far though so I felt that I could keep it as it is.

The problem arose when I noticed after almost a full week of Oneiric, that all of my browser downloads (which were downloading to $HOME/Desktop/) were painfully slow. I was getting around 50kBps when I would usually get 500kBps. My write speed was somehow incredibly slow (read speeds were fine). It turned out that the problem was with ntfs-3g.

I tried the following:

chkdsk via Windows
Disk Defragmenter for all NTFS partitions
Many hours of Googling for similar cases

Not one of my Google results showed terrible write speeds with good read speeds. I did fortunately, find this forum post from the Gentoo Forums. It was here that I found a link to http://www.ntfs-3g.org/support.html#slow which was invalid. A quick Google got me the correct link: http://www.tuxera.com/community/ntfs-3g-faq/#slow.

One of the suggested problems was the usage of the sync option while loading the partition. As can be seen in my Oneiric Update post, I had used the option, sync in my ntfs partition entry for /etc/fstab.

/dev/sda2    /mnt/windows    ntfs-3g    sync,rw,user,auto,exec,utf8,uid=1000,gid=100    0    2

Changing the entry to:

/dev/sda2    /mnt/windows    ntfs-3g    rw,user,auto,exec,utf8,uid=1000,gid=100    0    2

and re-mounting the partition with:

sudo umount /mnt/windows
sudo mount /mnt/windows

fixed the problem. I was getting fast speeds of around 40MBps again!

You may be wondering why this has happened with an upgrade. This is because ntfs-3g introduced the 'sync' option only in a recent update! It is mentioned in the changelog:

STABLE Version 2011.1.15 (January 23, 2011)
        New: implemented the ‘sync’ mount option.

So silly me had been using a ghost option without realising it.
Just to make everything clearer, let me tell you about the sync option itself. The Linux man page for mount tells us this:

sync
    All I/O to the file system should be done synchronously. In case of media with limited number of write cycles (e.g. some flash drives) "sync" may cause life-cycle shortening.

So there we go, it's a matter of how often 'write'-ing occurs and obviously, writing speeds in general would decrease if every single byte had to be written immediately (instead of in chunks). As Tuxera's support page mentions: "do not use sync unless you have a good reason".

Blogger + $3.74 VPS + Speedy Mirror CDN = Bliss

2011-10-19T12:57:00.001+01:00

When I set about to get this blog ready, I had a few decisions to make.
I'd like to explain why I have made the decisions I have made.

Own Hosting vs Blogging Service

First off, I had to decide between own-hosting and service hosting. What do I mean by those terms? Simply put, this was whether I wanted to host the blog software with my own hardware/software or rely on a company for the maintenance of my blog.
I had previously tried hosting my own Wordpress blog and while maintenance was not too much of an issue and I was very happy, I quickly noticed that with greater freedom, I had the hassle of having too many choices. Among the many things I had to care about were:

Web server performance (inclusive of PHP performance) - Does my blog load up quickly enough? Does it cause too much load?
Reliability - Let's set up backups every hour just in case I need them. My server could burn, the hard drive could corrupt, anything could happen and the worst will always happen to my blog.

I found myself messing about with plugins and setting half of the time, adding this and that then eventually stripping most plugins out to increase performance.

With the previous experience in mind (as well as previous forum hosting etc), I decided that I wanted my blog to be hassle-free. Sure, setting up and tweaking web servers is fun. It's fun bragging about my knowledge in Nginx vs. Apache and similar topics as well as boasting how my system is relatively fast compared to someone else's billion-dollar setup. However, the point of having a blog is to blog! There are literally hundreds of companies out there, asking you to jump into their arms for hassle free blogging. There were a few options I had yet again.

Tumblr, I had tried out very briefly in its early days but I was soon frustrated by the lack of functionality and extreme emphasis on looks. Yes, this was not too much of an issue since afterall, the content and delivery of content is of utmost importance right?
Sadly, Tumblr failed to satisfy in those aspects.

This message could be seen almost daily

The above image was routine for my Tumblr blog and I quickly got fed up. I was not too much of a fan of the Twitter-like blogging system as well.

Wordpress.com was a likely choice after Tumblr. They seemed to be doing things well and with their hopping onto Nginx (my webserver of choice), I had more of a reason to move in right-away. There were a few hurdles and it did not seem likely that they would to be fixed or removed in the foreseeable future.

Custom domain support is not free.
Content is not deployed via CDN.
Caching configuration, backups etc is still user-side.
Wordpress is coded in PHP (elaborated on later).

You may be wondering: "You're getting it for free, you can't ask for too much!". It turns out I can.

Blogger is what I ended up going with. Being Google hosted meant that my blog would be maintained (for free) by the most skilled professionals and maintenance would be done well since publishers (bloggers) bring in revenue via AdSense. It also meant that my blog would be served as speedily as possible via Google's network of servers which far outperform any CDN service.

Another decision-making fact was that Blogger is coded by Google. This means that the software consists mainly of C++ and Python in the back-end. Having stayed with a friend who is a Python fanatic as well as a Google intern, I had been affected and had started caring about the language used to write back-end softwares. (Not that I will be able to poke through the source-code.)

$3.74 VPS + Speedy Mirror CDN

While setting my Blogger blog up with my personal domain, I noticed an interesting feature which only Google engineers would be kind enough to include, a "missing files host". This feature basically allows one to have files hosted on the blog domain as Blogger will redirect requests to the missing files host if the requested static file does not exist on the blog.

Currently not working in the new interface, to set a missing files host you must switch to the old interface

While setting this feature up required me to switch away from the new glittering interface, I was impressed by the fact that it was being offered and was also glad since it was exactly what I had hoped for but not looked for. If I had wanted an equivalent feature, I would have had to setup a try_files entry in my Nginx server, making people go through my small VPS in Chicago in order to access my site.

With one of the few 1gbps bandwidth budget VPSes provided by host90.com serving my files, I could have all the features of a 'perfect' setup with a monthly cost of $3.74! (It had to be 1gbps bandwidth. No, I do not have a few million requests per second but yes, do I obsess about performance...)

While thinking about ways to increase performance, I decided that I needed a good CDN service. This was because most of my latency was coming from the SyntaxHighlighter files hosted on my VPS that I was using to highlight code as I did in my Oneiric Ocelot upgrade experience post. A brief search gave me quite a few CDN services I could make use of but many were costly for a small blog like mine.

The service I settled for, Speedy Mirror provides 5GB of free CDN traffic for new users and lets you top-up for reasonable prices. I decided to settle for Speedy Mirror as I concluded that the free traffic would not compromise their performance. This is because of their reasonably priced upgrades. A few clicks with their simple interface and I was set. I had the following setup:

Missing Files Host - http://cdn.swook.net/
http://files.swook.net/ serving my files from my VPS
A CNAME entry for cdn.swook.net pointing towards swookfiles.speedymirror.com.

The Future

Most likely, I will find some aspect of my blog that I do not quite like but for now, with a monthly operating cost of $3.74 (ignoring domain, future CDN costs) I cannot be more content.

If you are just starting a blog like myself, I recommend my current setup. You do not even need a VPS actually, you could go with a free webhost such as 000webhost.com or x10hosting since your CDN is the one serving files and will do so swiftly (apart from the first 'Pull'er who has to wait for the CDN to pull files from the origin server). What I am saying is that you can have one of the fastest blogs in the world with minimal or no cost.

I guess the next step will be to populate this blog with as much content as possible.
Happy Blogging!

Upgrading to Oneiric Ocelot

2011-10-16T11:30:00.000+01:00

The long awaited Ubuntu 11.10 (codename 'Oneiric Ocelot') was out a few days ago. I say 'long awaited' but to be honest, I was not looking forward to it at all. Being a Kubuntu user, Ubuntu releases do not mean too much to me as functionalities with KDE are mostly decided by KDE itself and Kubuntu does a very good job at keeping KDE as vanilla as possible.

Still, I wanted to try out the new and polished Unity as well as Gnome3 with an upgrade to 11.10 (from 11.04). ~~I found out later that Gnome 3 is only available via PPA (shame on you Canonical)~~ but nevertheless, upgrading is always fun... or not.

Upgrading

When upgrading to a new release of *ubuntu, one must consult the upgrade page. The upgrade page is very helpful in telling you to run 'update manager'. If you are using Kubuntu, as I am doing so, make sure to get the instructions for Kubuntu! Run kpackagekit. (It really does not matter but it's nicer to view a qt4-ed window with your upgrade progressing than a fudgy gtk widget set which feels alien)

There is an alternate way to doing this upgrade via the commandline:

sudo apt-get update
  sudo do-release-upgrade

This lets you view the upgrade progress in a neater way.

Problem 1: 'E:Error, pkgProblemResolver::Resolve generated breaks, this may be caused by held packages.'

My first hurdle occurred pretty quickly. I was greeted by KPackageKit with the error stated in the heading above every time I tried the upgrade. I poked about /var/log and found a directory called /var/log/dist-upgrade.

My main.log contained the following last lines:

ERROR Dist-upgrade failed: 'E:Error, pkgProblemResolver::Resolve generated breaks, this may be caused by held packages.'

while my apt.log had the following lines among many:

...
  Holding Back cpp:i386 rather than change cpp-4.6:i386
  Holding Back virtualbox-dkms:amd64 rather than change dkms:amd64
  Holding Back libmtp-common:amd64 rather than change libmtp8:amd64
  Holding Back nspluginwrapper:amd64 rather than change nspluginviewer:amd64
  Holding Back libmtp-runtime:amd64 rather than change libmtp-common:amd64
  Holding Back libmtp9:amd64 rather than change libmtp-common:amd64
  Holding Back banshee:amd64 rather than change libmtp9:amd64
  Holding Back banshee-extension-soundmenu:amd64 rather than change banshee:amd64
  Holding Back nspluginwrapper:amd64 rather than change nspluginviewer:amd64
  Holding Back banshee-extensions-common:amd64 rather than change banshee:amd64
  Holding Back banshee-extension-awn:amd64 rather than change banshee-extensions-common:amd64
  Holding Back banshee-extension-ubuntuonemusicstore:amd64 rather than change banshee:amd64
  Holding Back nspluginwrapper:amd64 rather than change nspluginviewer:amd64
  ...

To be honest, I had no idea what was going on and I promptly Googled and was welcomed with many posts on ubuntuforums.org. Naturally, I started panicking since I had removed several PPAs without ppa-purge-ing them and my system was starting to look like it had no way of fixing itself.

The following steps fixed my situation:

Remove all files from /etc/apt/sources.list.d/.
Remove all third-party repository entries in /etc/apt/sources.list.
Remove ia32-libs

Yes, remove ia32-libs! This may be a specific issue for me since I was being rather liberal with my PPA entries but as this was my solution and no solution was available online, I'd like to share it. Here's the magic recipe:

sudo apt-get remove ia32-libs
sudo apt-get update
sudo do-release-upgrade

Ta-dah! Your upgrade proceeds (painfully slowly for a few hours).

Problem 2: KDE and fglrx disappeared

I was rather puzzled when on reboot, I could not choose KDE from the lightdm screen! I told myself, "This should be a trivial issue, let's try Unity out in the meanwhile!". Try Unity I did but when I logged onto Unity by choosing 'Ubuntu' from lightdm, I was greeted with a desktop consisting of a full-screen nautilus window lacking all toolbars and titlebars as well as Unity itself! The best I could do was to run the terminal automagically via the still functional hotkeys and logout of nautilus-hell.

This was when I realised that I had forgotten one important rule: Always blame fglrx. A few commands and I was back on track with Unity and KDE working.

sudo apt-get install fglrx kubuntu-desktop

Problem 3: Windows partitions

My next reboot to check fglrx is working surprised me. My Windows partitions were refusing to mount correctly!

fsck: Error 2 while executing fsck.ntfs-3g for /dev/sda2
mountall: fsck /mnt/windows [328] terminated with status 8

"Oh god", I thought, "now my NTFS partitions must be somehow messed up. I rebooted promptly to Windows 7 and tried to schedule a chkdsk to check and fix errors for my Windows partitions. For some reason that failed but I really was not in the mood to deal with Windows 7. I simply assumed that the partitions were fine since they were fine just before they were loaded the last time I booted my laptop.

The obvious next step was to check /etc/fstab, my personalised recipe for mounting partitions. The following were the troublesome entries:

/dev/sda2    /mnt/windows    ntfs    sync,rw,user,auto,exec,utf8,uid=1000,gid=100    0    2

Go on, take a look and tell me what's wrong. That's right, I did not read the manual for fstab properly when I set that up! Take a look at the following from man fstab:

The sixth field (fs_passno).
This field is used by the fsck(8) program to determine the order in which filesystem checks are done at reboot time. The root filesystem should be specified with a fs_passno of 1, and other filesystems should have a fs_passno of 2. Filesystems within a drive will be checked sequentially, but filesystems on different drives will be checked at the same time to utilize parallelism available in the hardware. If the sixth field is not present or zero, a value of zero is returned and fsck will assume that the filesystem does not need to be checked.

That's right folks, silly me had written 2 thinking it would not matter since his other entries worked fine with 2 as the pass number! The pass number of 2 must not be used for ntfs file systems since fsck.ntfs does not exist! The previous version of ubuntu had somehow not had a problem with this issue.

Fixing the entry to the following did the trick:

/dev/sda2    /mnt/windows    ntfs    sync,rw,user,auto,exec,utf8,uid=1000,gid=100    0    0

Hopefully someone will find this post useful, otherwise it shall go down in my history as a 4-hour period full of annoyances. Do share your experiences with upgrading to Oneiric as well!

Cowon and UCI design

2011-10-12T07:10:00.002+01:00

Cowon is without doubt my favourite PMP and mp4 player manufacturer. The company has not disappointed even once since the first time I heard of them which was back when the iAUDIO 4 was selling furiously well. Having been influenced heavily by a friend, I got the Cowon G3, my first mp3 player which I still keep and use from time to time. Acquiring the D2 and J3 in the following years did not require any difficult decisions as can be seen from my reasoning below.

iAUDIO F1 - This intriguingly designed mp3 player sported a F1 car design with 2x3.5mm jacks as exhausts and a speedometer GUI.

Devices which were made by Cowon have always had a common set of specification differences to all other mp3 manufacturers:

Superior and honest battery life
Good sound quality
Support for almost any (audio) codec
Durable design
High pricing

The high quality has since made Cowon the leading company in mp4 manufacturing in Korea and has allowed Cowon to have a certain amount of international recognition as well as love from non-iPod communities such as anythingbutipod. Currently there exists a 'cafe' or forum dedicated to Cowon's MP4 players boasting a member count of about 600,000 Korean users. For a small country with a population of approximately 50 million, this number is staggeringly large. There also is a dedicated overseas community known as iAudiophile.net maintained by fans of Cowon's products featuring the latest content from modders and designers as well as casual users.

While the build and sound quality of all Cowon devices are great and have catapulted the company above most other non-iPod competitors, there is one aspect which has been criticised from time to time, the graphical user interface. This has been dealt with skilfully by the introduction of User Created Interfaces (UCIs).

The introduction of UCIs

A 'hacked' user theme named 'iTouch' by Fishfutter

UCIs were first introduced for the Cowon D2. It was a proper success and user created flash interfaces sprung out everywhere aided indirectly by Cowon's own UCI contest. The UCI implementation was somewhat lacking. There were only a handful of FS commands which could be called, the backend was seriously outdated and thus used Flash 7 which relies on Actionscript 2.0 but has less features than Flash 8. Even more frustrating was the lack of persistent data storage support and music indexing support which skilled UCI developers circumvented in various ways. The music UI was the only customisable UI as well and the only other way to change the look of the overall UI was to 'hack' a resources binary into the player with substituted images.

Sense by Kizune, a Music UCI for the S9, J3, X7 - One of the most popular UCIs in existence currently

The release of the Cowon S9 brought about many changes to the UCI front. Full UCI support for every bit of the player was supported with documentation. Persistent storage via FS commands and shared objects was supported and the number of FS commands was increased many folds to allow for a 'Full UCI support'. This meant that one could now edit EQs, change every single setting and create whole new widget sets by simply knowing how to design and code using Adobe Flash. This was not without woes however. UCIs tended to take up more memory and therefore were slower than the stock UIs. Interfacing with the firmware was still done via raw FS commands and code sharing was not common at all in the communities which meant that some UIs were less optimised and therefore slower to load and run.

For the users this did not matter at all and many Cowon product users thereafter (J3, X7, i9 and now the i10) could make use of the many attractive user interfaces which many skilled flash developers were churning out. The UCIs truly helped towards extending the feeling of 'hype' for the users' new players and added a certain freshness to the players for every UCI release. By handing UI design choice to their users, Cowon had been able to shift the load of updating and satisfying users to the community, at least partially.

The developers however had to face the frustration of careful and tedious optimisations. This was because the only tool Cowon had provided was the list of FS commands, a short guide about the software structure, and some badly written sample UIs. Some readers may be questioning how I am referring to the UCI samples as 'badly written' since the stock UIs run well. This is because the UCI samples do not get updated and the code is barely legible and is not object-oriented.

The way I see it, UCI designers, and I repeat, designers, should not have to deal with tedious optimisations as well as direct usage of FS commands. Even today, most designers are having to use Cowon's sample UCIs to create their versions by modifying the code. The usage of raw FS commands which can be found in every bit of the code often requires that one truly understand when a certain call should occur and which values should be updated. Often this is not the most simple matter, requiring hours and hours of plugging and unplugging the mp4 players while modifying and re-arranging code. Since the code is not object-oriented and non-modular, one always finds himself/herself getting rather confused with bits of code ending up here and there.

UCI Framework

The solution I have for this problem is the introduction of a so-called 'UCI Framework'. I envision a set of actionscript scripts which can be #include-ed in a modular fashion to enable access to objects and methods which allow UCI designers to simply flick the switch without any worry or hassle. One would not need to worry about how the repeated usage of certain FS commands would impact their UI's performance. Statistics and values of certain settings should not have to be retrieved from slow FS command calls directly but would be cached and updated internally. Designers would do what they can do best, designing and writing code for lavish effects aimed both towards ease of use and visual appeal.

Now I admit that I am in no way an experienced Actionscript 2.0 developer, nor have I been part of creating truly complicated UCIs. However, I have encountered numerous situations of frustration which I hope future designers will not have to deal with. Also, there are many skilled developers who are still toiling daily without any incentive for the better experience of the users. These developers have the know-how and experience with dealing with Cowon's players in the most efficient manner.

The acronym UCI is commonly mis-interpreted as standing for 'User Created Interface'. In the most strict sense, this is definitely true and Cowon itself has introduced the term years ago. I would however like to use a new acronym, 'CCUI', 'Community Created User Interface'. Of course, 'UCI' is an easier acronym to use and is definitely what all users will identify custom flash interfaces as. My point is not that the acronym should be changed, but that the approach to UCI design should be changed. Code should be shared between developers as well as know-how. Afterall, surely this would allow for more designers to actually 'design' various interfaces instead of giving up after months of hard labour. Would open-source contributions prevent your own UI from gaining more popularity? Would spending time on helping the knowledge and skill-level of the general developer community rise affect you, the experienced UCI developer negatively? I think not. There may be style differences and there may be philosophy differences but surely getting the annoying and tedious bits out of the way would let you do what you can do best?

For the reasons I have mentioned above, I would like to propose a community-created effort to code a UCI framework for current and future Cowon flash interfaces. I myself will be aiming to release a basic version for all developers to make use of and edit in the following months hoping to spring off a truly community created base for designers who would gladly not deal with the efficiency problems. A post will be written in the future to outline the features and philosophy of the framework to aid the understanding of anyone who is interested in using or working on the framework. The general aim is to be able to provide simple control based on objects as well as some heuristics for features such as device identification and millisecond seek positions.

In the meanwhile, if any of you flash developers have any suggestions or ideas, please do comment below (you do not need to login) and express interest.

(While I claim to know much about what I have written here, I really do not so please feel free to correct me on various bits and pieces!)