Vantage Point of Queens

Today, I had a Hack-a-thon day at my work. Basically, no meeting, just do whatever you wanna do. It should be related to the work, but it doesn’t have to (am I right?). So I have been thinking that I wanted work on something 3D by using canvas and my Meetup.Tweener. I read lots of articles (which I have done before as well..), and gosh, I forgot so much about matrix transformation. But anyway, let me show you what I did. It’s only half done but it’s still sort of interesting how much you can do with canvas.

Fliping picture

Click on picture, it will flip around.

This is even worse than CSS transformation because it only works for x-axis scaling as opposed to, CSS transformation, you can do 3d, at least more 3D-ish, flipping animation. BUT ANYWAY, this just fire on my heart to learn 3D again.

Are you excited to get a new iPhone 3GS? I dunno.. But I got excited because Safari 4 is already pushed out to the world..! Not sure it’s good yet, but it has HTML5 thing, it has CSS-animation thing, lots of features of futures.

But well, if you wanna use Safari, you need a 1password! The following procedure still works with Safari 4. Only difference is that since Safari 4 comes as build 5530.17, you need to set MaxBundleVersion as 5531 or something.

CrunchGear: Want to enable 1password in the Safari 4 Beta? Here’s how.

So far it works well with me too!

P.S.
I just tweeted that 1password doesn’t work on Safari 4, then I got a message from 1password..!

@beatak Grab my latest beta for Safari 4 compatibility: Preferences > Updates > enable betas > Check Now.

I’ll try that too. Pretty cool!

最近また実験的なアプリを JavaScript で書いているんですが、node walker を書く必要にかられ、デザインパターン入門をまた開いてみました。以下のページを開いて、Firebug の console で、例えば window.d = new DOMNodeDest(document.body); d.accept(new Visitor()); などとすれば、各ノードを列挙してくれます。

Viistor Pattern

実際、頭を悩ましたのは、Visitor パターンというより、むしろ Iterator パターンでした。結構面白いと思うんですけど、どうでしょう？

Iterator = function (obj) {
  var i, chld, len, pub, mth,
      result  = {},
      BIND    = Iterator.bind;
  if (obj instanceof Array) {
    this.children = obj;
  }
  else if (typeof(obj) === 'object' && obj !== null) {
    this.children = [];
    chld = this.children;
    for (i in obj) {
      if (obj.hasOwnProperty(i)) {
        chld[chld.length] = obj[i];
      }
    }
  }

  pub = Iterator.publics;
  for (i = 0, len = pub.length; i < len; ++i) {
    mth = pub[i];
    result[mth] = BIND(this[mth], this);
  }
  return result;
};

Iterator.publics = ['next', 'hasNext', 'rewind'];
Iterator.prototype.index    = -1;
Iterator.prototype.children = null;

Iterator.prototype.next = function () {
  if (this.children === null) {
    return null;
  }
  var CHLD    = this.children,
      len     = CHLD.length,
      result  = null;
  ++this.index;
  if (len !== 0 && this.index < len) {
    result = CHLD[this.index];
  }
  return result;
};

Iterator.prototype.hasNext = function () {
  if (this.children === null) {
    return false;
  }
  var result  = false,
      len     = this.children.length;
  if (len !== 0 && this.index < (len - 1)) {
    result = true;
  }
  return result;
};

Iterator.prototype.rewind = function () {
  this.index = -1;
  var it,
      i     = 0,
      CHLD  = this.children,
      len   = CHLD.length;
  if (len) {
    for (;i < len; ++i) {
      it = CHLD[i].iterator;
      if (it) {
        it.rewind();
      }
    }
  }
};

Iterator.bind = function (func, context) {
  return function () {
    return func.apply(context, arguments);
  };
};

Google recently introduced a Firebug extension, called Google Page Speed. Simply, it’s a Google version of YSlow. I heard the author of YSlow, Steve Souders moved to Google, so I thought it’s a bit awkward corporate feeling but he himself said that he is not involved with this project. But even so, Yahoo has a hard time anyway.

As other Google’s products, Google Page Speed is also open source project, hosted on Google Code. So I was curious to browse their code. I don’t really read anything but JavaScript, and I found very familiar code on their internal library: /src/js/closure/base.js.

Do you remember when I talked about Google’s bad contamination on google_service.js before?

The problem is fixed now but you can find very identical code to the code I quoted on the post (well, it’s obfuscated, but you can imagine). I have strong feeling that the one I accused, “google_service.js” contains the google closure, or maybe it was just a google closure.

And I also found a project named Google Closure. It’s empty so far, and its founder is… ExplorerCanvas guy!

I originally had a very difficult feeling about so-called Google Closure, because it potentially breaks lots of other library as I stated on the post. But if it’s open sourced and I will definitely be more interested in. What it does so far is very… engineering smart. Somethng you must need on JavaScript. It comes with lots of lots of comments, and its abstraction level is very clear. Maybe I should do drill down series of blog post about it?

本日 IFC にて Objectified を観てきました。

インタビューを受ける人の多くが英国英語を話すので、やや聞きづらいのですが、それでも Jonathan Ive の一言にはすごく頷きました。一通りアルミを削りだす新しい MacBook Pro の製作行程やデザインのプロセスを説明して後で『それって偏執狂だよねぇ？』と。でも“設計”（日本語でデザインというとファッションな感じがするので design の訳語として）に関わる人はみんな偏執にならざるを得ないと思います。

ソフトウェア開発と工業製品の開発は多くの違いがありますが、間違いなく一つ云えるのは、深い洞察のなされていない製品があふれている、という事実です。初心に戻って、それは肝に銘 じないといけません。

現在 NYC 近郊にお住まいの方は是非、お勧めです。

I watched Objectified today at IFC with Lia.

Lots of interviewees are English, or at least Queen’s English speakers. That makes me a little hard to listen to.. But anyway, Jonathan Ive’s saying “That’s obsessive, right?” Right. People, who got involved with design, need to be obsessive.

I have to say, there are several differences between software development and product development, but one thing I’m sure in common, is there are lots of not fully considered design decision everywhere (in face not at all). Very inspiring, and resetting my own original goal experience.

Whatever you do, if you think, you’re creative, you can find something in it. At the bottom, you’re only loose $10+ and 1h+. Go to IFC tomorrow, if you’re in NYC.

courtesy of Telstar Logistics / Todd Lappin

After finishing Meetup.Tweener, I started to do lots of animation by JavaScript. In JavaScript, all animation happens by built-in timer. You can call either window.setTimeout or window.setInterval. So it’s all about how accurate the timer is fired, if you want to do precise animation.

I guess I have read somewhere before, but I just made up tiny JavaScript page here.

Timer Check @ archive.nydd.org

My observation:

• Firefox 3 is not that accurate. The interval tends to be much more wobbling than others. My Firefox is significantly slow.. Maybe because theme (Gray Modern 2), Firebug or something else.
• Safari is not bad. Sometimes, it does GC? it takes 10 times more than usual. But mostly, the performance is constant.
• Google Chrome is supreme. It has the best accuracy. If I cut counter update, I guess it can do much more.
• IE 6 is actually very good too. It never hits less than certain point, but the interval is very steady.
• Opera is also not too bad too. I don’t understand why, but it sometimes hits double time, very periodically.
• IE7, IE8, I will take a look at it soon.

Try the page! Questions and comments are all welcomed, And let me know if you find something interesting.

So, I was at work in this morning, tried to start to work on the task I’ve been working on a while. I looked up my task note (wiki) and run some code (on browser, naturally, I’m a JavaScript geek), then I realized that it stopped because of unfamiliar errors. Wait. It was working last night. Then I ran some debuggers, then I found weird functions on each function. I asked people on the internal IRC channel. And I figured this:

http://partner.googleadservices.com/gampad/google_service.js

Let me just quote its high light here:

  if (t.MODIFY_FUNCTION_PROTOTYPES = f) {
    Function.prototype.bind = function(a) {
      if (arguments.length > 1) {
        var b = Array.prototype.slice.call(arguments, 1);
        b.unshift(this, a);
        return t.bind.apply(c, b)
      } else return t.bind(this, a)
    };
    Function.prototype.partial = function() {
      var a = Array.prototype.slice.call(arguments);
      a.unshift(this, c);
      return t.bind.apply(c, a)
    };
    Function.prototype.inherits = function(a) {
      t.inherits(this, a)
    };
    Function.prototype.mixin = function(a) {
      t.mixin(this.prototype, a)
    }
  };

It looks even different from what I saw at the office, actually. but I believe it’s the very same result since variable f is actually assigned for “true” in the very beginning.

And I googled a while and found this:

Question: google_service.js conflicts with prototype.js

Good job jimthoburn! Google usually doesn’t listen to outside voice.

I really hope that Google will stop doing this very very soon. I mean like tomorrow. It’s not only about Prototype.js, in face I don’t use Prototype.js at work. But IT IS REALLY BAD practice to contaminate Standard Global Objects in JavaScript. Please please do not do this.

まだ正式なアナウンスなどをしていないんですが、Github 上で Meetup.Tweener の開発を始めました。サンプルなどを充実させられたらと思っています。コメントは NaturalDocs でパース可能な状態になっていますので、ドキュメントに必要な方は NaturalDocs を使ってみてください。NaturalDocs のスタイル化が出来たらそれも package に含めようと思っています。

Not really announcing yet, but I started a repository Meetup.Tweener on Github. Check it out, if you’re interested in. I will write more samples soon. Comments are all written in NaturalDocs compatible style in its source code. Once I finish styling for it, I will include that in the repository, which, I wish, will happen soon…