english

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!

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?

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.

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…

Now I really started to use Emacs as a daily life. Well, I only use it at home at this point, but I actually am getting used to it slowly but surely. Here’s the list of commands I most frequently use. By using search and tag jump, Emacs makes me so happy. The code completion runs a bit weird right now. I will try to figure out and will share with you.

Key Stroke	Command Name	Action
C-s	isearch-forward	Do incremental Search forward. After typing some, it gets modal. You should see C-h k RET C-s to what you can do.
C-r	isearch-backward	Do incremental search backward.
M-g g	goto-line	Go to line.
C-x k	kill-buffer	It’s equivalent to “close” of usual editors.
M-.	find-tag	Find tag (in current tags table) whose name contains TAGNAME.
	tags-apropos	Display list of all tags in tags table REGEXP matches.
C-x o	other-window	Select next window on the frame
C-x b	switch-to-buffer	Select buffer BUFFER in the current window
C-x C-b	list-buffers	Display a list of names of existing buffers.

After Mac OS X 10.4, Mac has Spotlight, which is automatic metadata indexing for your data. By using its metadata, you can do grep, but only for JavaScript files. The command called mdfind (Meta Data FIND) does the job for you. I wrote a shell script, not to remember all the tedious options.

#!/bin/sh
/usr/bin/mdfind "kMDItemContentTypeTree == 'public.source-code' && kMDItemFSName == '*.js' && kMDItemTextContent == '$1'"

It’s just verbose, but easy to understand, right? So, what if you want to do the same thing for… Ruby? Just find a ruby script you’re using, or make “test.rb” on your home directory. do “mdls test.rb”, which will probably give you something like follows:

% mdls test.rb
kMDItemContentCreationDate     = 2009-04-XX XX:XX:XX -XXXX
kMDItemContentModificationDate = 2009-04-XX XX:XX:XX -XXXX
kMDItemContentType             = "public.ruby-script"
kMDItemContentTypeTree         = (
    "public.ruby-script",
    "public.shell-script",
    "public.script",
    "public.source-code",
    "public.plain-text",
    "public.text",
    "public.data",
    "public.item",
    "public.content"
)
kMDItemDisplayName             = "test.rb"
kMDItemFSContentChangeDate     = 2009-04-XX XX:XX:XX -XXXX
kMDItemFSCreationDate          = 2009-04-XX XX:XX:XX -XXXX
kMDItemFSCreatorCode           = ""
kMDItemFSFinderFlags           = 0
kMDItemFSHasCustomIcon         = 0
kMDItemFSInvisible             = 0
kMDItemFSIsExtensionHidden     = 0
kMDItemFSIsStationery          = 0
kMDItemFSLabel                 = 0
kMDItemFSName                  = "test.rb"
kMDItemFSNodeCount             = 0
kMDItemFSOwnerGroupID          = 20
kMDItemFSOwnerUserID           = 501
kMDItemFSSize                  = 13
kMDItemFSTypeCode              = ""
kMDItemKind                    = "Ruby Source File"
kMDItemLastUsedDate            = 2009-04-XX XX:XX:XX -XXXX
kMDItemUsedDates               = (
    2009-04-XX XX:XX:XX -XXXX
)

So it should be like…

mdfind "kMDItemContentTypeTree == 'public.ruby-script' && kMDItemFSName == '*.rb' && kMDItemTextContent == 'SEARCH_QUERY'"

mdfind gives you many advantages of metadata search. You should definitely give a shot.

Here’s a list of commands I learned from Learning GNU Emacs, Third Edition Chapter 2.

Chpater 2 — Editing

Key Stroke	Command Name	Action
C-x	Control-X-prefix	Try C-h v and type ctl-x-map
M-x	execute-extended-command	Run a function by name. Try C-h f for each specific function name and what it does.
C-f	forward-char	Move point one character right
C-b	backward-char	Move point one characer left
C-p	previous-line	Move point vertically up
C-n	next-line	Move point vertically down
M-f	forward-word	Move point forward by a word
M-b	backward-word	Move point backward by a word
C-a	move-beginning-of-line	Move point to beginning of current line as displayed
C-e	move-end-of-line	Move point to end of current line as displayed
M-a	backward-sentence	Move point backward to start of sentence
M-e	forward-sentence	Move point forward to next "sentence-end". (The variable "sentence-end" is a regular expression)
M-}	forward-paragraph	Move point forward to end of paragraph
M-{	backward-paragraph	Move point backward to start of paragraph
C-x ]	forward-page	Move pointforward to page boundary
C-x [	backward-page	Move point backward to page boundary
C-q	quoted-insert	Read next input character and insert it. This is useful for inserting control characters. For example, if you want to insert \?, you'll type C-q DEL
C-v	scroll-up	Scroll text of current window upward
M-v	scroll-down	Scroll text of current window down
M->	end-of-buffer	Move point to the end of the buffer; leave mark at previous position.
M-<	beginning-of-buffer	Move point to the beginning of the buffer; leave mark at previous position.
M-g M-g	goto-line	Goto line ARG, counting from line 1 at beginning of buffer.
	goto-char	Set point to POSITION, a number or marker.
M-(number)	digit-argument	Repeat following command (number) times. For example: M-3 C-f will move point 3 characters forward.
C-u	universal-argument	Begin a numeric argument for the following command. For example: C-u 9 C-q DEL will insert nine \? at point, C-u 3 C-f will move point 3 chars forward.
C-l	recenter	Center point in window and redisplay frame.
C-d	delete-char	Delete the following character. Defaultly assigned on delete button
M-d	kill-word	Kill characters forward until encountering the end of a word.
M-DEL	backward-kill-word	Kill characters backward until encountering the beginning of a word
C-k	kill-line	Kill the rest of the current line; if no nonblanks there, kill thru newline.
C-y	yank	Reinsert ("paste") the last stretch of killed text.
C-SPC or C-@	set-mark-command	Set the mark where point is, or jump to the mark.
C-x C-x	exchange-point-and-mark	Put the mark where point is now, and point where the mark is now
M-h	mark-paragraph	Put point at beginning of this paragraph, mark at end
C-x h	mark-whole-buffer	Put point at beginning and mark at end of buffer
C-x C-p	mark-page	Put mark at end of page, point at beginning
M-y	yank-pop	After C-y, Rotate Kill Ring. Let's say, you have ['latest', '2nd', '3rd'] as Kill Ring. When you do C-y, Emacs inserts latest at point. Then M-y will change latest to 2nd, and type M-y again, 2nd will be 3rd. M-y again, 3rd will be back to latest.
C-t	transpose-chars	Interchange characters around point, moving forward one character
M-t	transpose-words	Interchange words around point, leaving point at end of them
C-x C-t	transpose-lines	Exchange current line and previous line, leaving point after both
C-g	keyboard-quit	Signal a quit condition.
C-x u	advertised-undo	Undo some previous changes

Notes

Like other editors in Mac/Windows or even in vi… You know, when you start to select characters, background and foreground colors are inverted. In order to visualize where you are selecting (in Emacs way, it should say… make a region by using set-mark command), you have to add the following line in your .emacs.el. I just wonder why this is not default configuration… Anyway.

(setq-default transient-mark-mode t)

I’ve started my unix career with vi, like 1997? Even the first information technology class in my college taught me to use emacs, I liked vi better because, in that class, I think we have around 100 ~ 200 students one class, and all of them were connecting to “Clay Super Computer” with a few giga-bytes of memory space… It was just insane, to use a “memory sucker Emacs” with that terminal.

So, I still, when I did something wrong on editor, I type ESC! ESC! ESC!.. but instead, I should start to do C-g! C-g! C-g!!

Clipboard-Pasetboard interoperability/synchronization doesn’t work in my environment, Mac OS X 10.5 with Terminal Emacs 22.1.

Changing capital, Overwrite and Customization doesn’t seem to be important to me so I skipped it for now.