Opera 改用 WebKit 與 Chromium

如題,本日最大消息,Twitter 與 Blogsphere(如果你還覺得這個「地方」存在的話,笑)都爆炸了,如同當年 Google 宣布 Chrome 時的反應一樣。Twitter 可以看搜尋以及 Mozilla CTO Brendan Eich 的訊息。

在 Mozilla 工作,看到的反應比較多是負面的,像是在擔心 monoculture/diversity,尤其是 Mobile Web 的部份。例如,Mozilla 的 layout 魔術師 roc 在「And Then There Were Three」就說(節譯):

Opera 對 Web 標準的影響會大幅的降低,尤其是當他們和 Apple 與 Google 有不同想法的時候。佈局引擎的多元性又更加降低,尤其是 Mobile Web 的部份 … Mozilla 會更難推廣網路標準,相較於「coding for Webkit」… 網路標準會失去他的重要性,標準制定的過程會被 WebKit 這個開源專案的內部決定與政治取代。WebKit 的程式錯誤會反過來變成標準 … 無法分辨佈局引擎的行為是程式錯誤還是設計。

最近一年倒是多少有跟別人聊到類似的假設:「假如 WebKit 變成 de-facto web standard 會怎樣」這樣的問題,尤其是之前跟 Kenny 大大MozTW Labs 的路口討論。不管是好是壞,我們離那個假設又更近一步了。

台北當然是春節休假。Mountain View 剛開始上班,不知道公司會不會發什麼聲明出來。

Les Misérables the Movie/電影《悲慘世界》

Les Misérables

I finally was able to see Les Misérables last Friday. A few notes, from a person who had enjoyed the musical recently. No spoiler here.

  • The movie and the musical are the different realizations of the same story, although they share the songs and (of course) the characters. I highly recommend anyone who have see either of them to see another.
  • Pace: Movie features slower pace, more dialogs, which gives a better explanation of the story. However it made the story less intensive.
  • Song selection: The song “Suddenly” appeared to be a new song composed exclusively for the movie. However, all of the original songs are either trimmed or shorten in the movie, except “I dreamed a dream” (featured in the teaser), where Anne Hathaway gave the breathtaking (and heartbreaking) performance. I would expect a director’s cut version coming within an year or so.
  • Javert: As you may know, the essence of Les Misérables story is about the struggle between two aspects of justice — instead of justice v.s. evil. It’s a pity that will all the trimming, the storytelling of the movie failed to tell people Javert’s justice in great detail, resulting a unbalanced view of the two main characters.
  • Sound mixing: Just like what you’ve heard in the teaser and the highlight sound track album, the songs are all mixed with vocal at the front position and lower volume of music. For me, it kind of prevent me from enjoy the sound track with earphone, but it allow the song to blend into movie scene and seamlessly go with the dialogs. It also allow more expression for the performer.
  • Vocal scenes: Another unique aspect about the movie is how the vocal scenes if filmed. Basically, all the songs are filmed nothing but the actor/actress’s face and the blurry background. This allowed the viewer to concentrate on the expression of the performer.
  • Live recording: As explained here in the extend first look intro, all of the vocal voices are recording live. All the effort on that has paid off, judging by the immense feeling it delivered to the audience.
  • Mandarin Chinese subtitle: the movie wasn’t released until last Friday, which angered a lot of local Les Mis fans, including me. However, I can see that with the pushed back date, the translation is a lot better compare to literal translation I usually see in the theater. Subtitle was also carefully applied to the screen to avoid obscuring the performer’s face, something unseen in the theater previously too.

I might come up different thought if I could finish the novel itself; In the mean time, I highly recommend people going to the theater to at least know the story, and dive deeper if you would like know more.


終於在台灣上映的第一天去看了電影《悲慘世界》。在這裡寫一些感想和與之前看的音樂劇的比較:

  • 雖然歌和角色是一樣的,電影和音樂劇是同一個故事的不同的呈現方式。強烈建議看過音樂劇的人去看電影,或是看過電影之後找機會看音樂劇。
  • 步調:電影的步調比音樂劇慢,還有對話,所以故事解釋的比較清楚。但是感覺就沒有這麼緊湊。
  • 選曲:《Suddenly》這首歌是電影的新曲,但其他音樂劇原有的音樂都被剪裁或是縮短了。唯一的例外是安.海瑟威的《I dreamed a dream》(這部預告用的曲)令人心碎的演出。之後應該會有導演完整版吧。
  • Javert:熟悉故事的人會知道《悲慘世界》的精隨在於兩個「正義」代表的對抗,而不是一般的正邪對抗。電影很失敗的對故事的剪裁沒有把 Javert 心中的正義講的很清楚,導致兩個角色的不平衡。
  • 混音:如果去電影院之前就看過預告或是聽過原聲帶專輯,就會發現歌曲的人聲都混得很前面,音樂也相對比較小聲。對我來說這樣的音樂用耳機聽起來很怪,但是到電影院就會發現它和對白以及電影運鏡很合。這種混音也讓演出者能表現更多表情。
  • 運鏡:電影很獨特的一點是獨唱曲的運鏡方式。基本上畫面上只有表演者的臉,背景全部都是模糊的。看起來是故意讓聽眾能夠更專心的看演出者的表現。
  • 現場錄音:在搶先看的影片有介紹,所有的歌曲都是拍攝現場錄音的。我覺得從電影帶來的感覺,這些功夫都達到了它的用意。
  • 中文字幕:雖然說電影在台灣比其他國家慢,招致了很多粉絲(包含我)的抱怨,但是感覺起來因為這段時間,才讓代理商有機會把中文字幕修好:其他的電影都是上很粗淺的字面翻譯:可以看出來《悲慘世界》的字幕是精心處理過的。字幕在某些畫面也很小心的避開角色的臉,從來沒看過其他電影做過這種處理。

或許看完小說之後會有不同的想法。如果你沒有看過電影的話,強烈建議趁這個機會去看一下,至少了解一下故事,有興趣的話再看其他的。

CSS Classes State Machine Puzzle

It is quite nature to code CSS classes as “states” in a web applications. Say if you have three <div class="view">s within the <body> tag, you can easily toggle the class of the body to show/hide the views, with one-off CSS animations as view-to-view transitions, right? Wrong.

It turns out, it works with two states even with transition/animation, but not so much if there are three states. For two states like A & B, there is only one possible route to get into each state, A→B for B, and B→A for A. However, if there are three states, A would have routes B→A and C→A, and so on. It’s basically n*(n-1) for n states.

How do you specify two different CSS animations for the two routes? This doesn’t sounds like a common question, but I have personally encountered twice in different projects, and I bet sooner or later this would happen to everyone as we moved from DOM animation to CSS and rely more and more on browser to run the animation smoothly.

One way to look at it would be that this is a design flaw of the CSS language. There should be some pseudo-class like :was() to specify what exact route to match against. However, inventing a pseudo-class just for the animation property doesn’t sound like a great idea.

The other way, and a more practical approach is to look for solution with what we have right now. Inevitably, to distinguish route B→A and route C→A, one should introduce immediate states, making the routes B→A’→A and C→A”→A. Yet, this further complicate things if one would like the scripting part stay as a clean finite-state machine: First, the transition of A’→A will depend on animationend event, which couples the CSS code with Javascript code. Second, and the bummer that makes the solution incomplete, is that the animationend event will never fire if the state changes again during the A’ or A” state, which make it necessary to handling the changing in Javascript code again ourselves. Good luck on codify all the A’→B, A”→C, A’→C, … transitions.

Now you know how hard it is to write a mobile OS window manager with Javascript + CSS. There might be some obvious answers I overlooked, if you would like to give your solutions, feel free to comment here or post it on your own blog.