請記得投票

繳稅、守法並不代表你同意這個政府的作為,但是沉默與不行使公民權力是。請記得本週末去投票

I managed to squeeze this into 140 chars:

Paying taxes and obey the law does not mean consent to the current administration, but silent and not acting [your] citizen right is. PLEASE VOTE.

This Has Been a Public Service Announcement.

2011 報告

一年又過去了,是該報告一下近況。

Mozilla Corporation 新工作

11 月底的時候換了工作。新工作在 Mozilla 的台北新辦公室,加入的研發團隊做 B2G 專案相關的研發。一開始,MozTW 的我們接到 Mozilla 私下告知關於在台北設點的計畫。起初雙方的交流僅止於公司和社群未來在行銷面上的合作方式,並沒有特別聊到什麼工作機會;事後才知道 B2G 除了 System Engineer 之外還有 Front-end Engineer 的職務,才投了履歷,做了面試。這算是一個角色的轉換,畢竟社群和工作是不一樣,而且在某個層次是不相容的;也就是基於這樣的心情,11 月的 MozCamp Asia,我以社群志工的身分最後一次參加 Mozilla 活動,對抓火狐網站的數據和心得做一個報告

對於 Mozilla,感覺一直都是千絲萬縷的。就如之前的文章提到的,一切一切都是個往回看的過程:那個跑去 MozTW 的大學生一定沒有想到,Mozilla 後來對他職涯的意義……從因為參加志工活動開始,認識了厲害的同輩,還有認同理念的朋友,到現在實質進入了 Mozilla 本身變成員工,開發下一代的 Mozilla 其中一項自己也曾想過的產品。在 MoCo-TW 的同伴都很優秀,但開始工作之後也深切體認到自己因為盜版非資工出身導致的基本知識不足;寫程式時每每總是想著,如果我知道更多資料結構和演算法的知識就好了。當然我不是那種跑去面試會跟面試官說「願意在公司努力學習」的人(這樣是找不到工作的),只是實際工作時能這樣覺得,然後開始讀書,應該算是成長吧。

喔,我好像忘記提到為了找工作,我把 Portfolio個人網站Blog、CV 全部都改版了?在新工作的第一個星期就被 iThome 邀請了訪問,順勢就拿了 Adopt Mozilla 娃娃拍了照,哈。

Relationship

2011 年的另一個美麗的意外就是新的感情。女友是高中同學,在畢業前夕一起籌備畢業典禮的朋友之一。不是同班同學,所以當時也不是真的很熟,這幾年就保持著線上媒體(Facebook、Plurk、BBS)的聯繫,偶而她的樂團有演出的時候才會見到面這樣。一直都是欣賞著對方,後來因為某個奇怪的原因見面(此處保留),就這樣開始了一切。

在知道對方心意那刻除了很訝異,也覺得自己很幸運。能得到這種純粹的喜歡,要讓自己更好,值得得到才行。

一直在 Facebook 上面閃大家就不好意思了 :P

Convergence

當一切都匯集,要更努力拉住才行。大家新年快樂。

American Censorship Day

Note: If you are reading this on the site, you will see the banner censored.

The US Congress is currently discussing a bill that will give the power of government to shut down websites, prosecute social network users (i.e. you and me) for making minor non-commercial copyright violation (e.g. singing a pop song on Facebook), etc. This is the end of free speech on Internet as we know it, and is an attempt to build national firewall and censorship system much like the one in China.

Please join us for the fight to preserve freedom on Internet. More information can be found at americancensorship.org.

Animate.css

Animate.css 是一組好玩的 CSS animation keyframe,提供很多誇張的 DOM 動畫效果。使用方法根據網頁是用 Script 在想要做動畫的元素上面加上 class,然後就會觸發 CSS transition。以 jQuery 為例:

$('.bouncy').addClass('bounceInDown');

但這個作法有個問題,在他的範例頁面上也是,就是在動畫結束之後沒有辦法再跑一次(因為要先拿掉 Class 再加才會有 transition)。所以最基本的,應該要在動畫跑完(預設是 1 秒鐘)之後把 class 偷偷拿掉。我還有其他的需求像是 *Out 的 transition 跑完之後就把元素藏起來、callback、如果不支援的瀏覽器就跑 jQuery 動畫這樣,最後就變成這樣一個小小的 helper plug-in 了。

jQuery.fn.animateCSS = function (className, callback) {
	var that = this;
	if (!Modernizr.csstransforms || !Modernizr.csstransitions) {
		// for old browsers we use jQuery animation
		// only fadeIn and fadeOut for now
		if (/In/.test(className)) this.fadeIn(1000);
		if (/Out/.test(className)) this.fadeOut(1000);
	}
	if (/In/.test(className)) this.show();
	setTimeout(
		function () {
			that.removeClass(className);
			if (/Out/.test(className)) that.hide();
			if (typeof callback === 'function') callback.apply(that, that);
		},
		950
	);
	return this.addClass('animated ' + className);
}

有需要請隨意複製貼上到自己的專案去囉。

jQuery 的 live() 被 Deprecate 了

在 jQuery 1.7,live() 方法被標示為 deprecate (不建議使用),意思就是不建議新的專案使用這個方法,另外下個版本的 jQuery 可能會拿掉這個方法,到時候如果要升級 jQuery 的話有用到就要改寫。jQuery 建議的寫法是用 1.4.2 之後就存在的 delegate() 或是 1.7 提供的 on()

on() 統合了 bind()live()delegate() 等方法,用這個方法可以取代前述方法的功能。不過這就好玩了:如果 on() 可以取代 bind()live(),原本的程式碼應該要分別怎麼改寫?

看了半天文件才得到下面的結論:

// 舊
$('#myid').bind(event, fn);
// 新 (改名字就好)
$('#myid').on(event, fn);

// 舊
$('#not_in_dom_yet').live(event, fn)
// 新
$(document).on(event, '#not_in_dom_yet', fn);

另外也是寫下來之後才發現之前 live() 語法的問題:

  1. live() 的原理是把事件綁在上層的元素,事件 bubble 上去之後再去檢查從下面上來的事件是不是符合之前設定的 selector。這個原理在 on()(或是 delegate())才會被暴露出來(有發現那個 document 嗎?)。如果只寫 live() 的話等於是不求甚解的用法,最明顯的問題是無法掌握事件觸發的順序,常常在 bind() 裡面有用的 ev.stopPropagation() 改成 live() 就沒用了。
  2. live() 把事件掛在 document,雖然比每個元素都 bind() 有效率,但是還是要過濾很多傳上來的無關事件。用 delegate() 或是 on() 才能指定要把事件 bind 在哪裡。
  3. live() 的語法不合邏輯。一個用 $('#not_in_dom_yet') 選元素的 jQuery 物件,裡面明明就沒有 DOM 元素,那照理說後面接上的方法都不應該做任何事情。結果 live() 反而是這樣運作的。

所以,就如 jQuery blog 所說的,這的確是一個瘦身計畫:只提供一個簡單的 API 來處理所有事情可以簡化程式碼的設計,也可以幫大家腦袋裡存的文件瘦身。那篇文章,還有 1.7 新功能的介紹,建議大家有空可以看看。

Looking Backwards, Connecting the Dots

So the day came.

I have not much to say like everyone else on the web and mess media. I don’t want to go on skin-depth things like how he transformed the computer industry and the world – I didn’t even agree most of the tactics he used (like, all closed-source, closed and single distributor model for the iOS platform, etc.).

I want to share something personal with you here, instead.

I did a lot of things that didn’t make sense to my parents, nor to myself at the time. Ever since mid-school, I spent countless hours making websites. I was the computer guru to my high school classmates because the guestbook/chatroom service I built was practically the online social network to them. When I went to college, I chose to take physics as major instead of computer science because I thought there were more wonders in the mechanics of the physical world instead of inside a computer. That turned out to be true, and the wonders unfortunately succumbed me; my grades in physics classes were never higher than the one and only computer science class I took. I didn’t know what to do at the time; I didn’t want to, and couldn’t go for the regular career a physics-major in Taiwan would usually do, that is go to graduate school, and to TSMC/UMC or other semiconductor companies straight from school, the flagship industry of Taiwan – The promise land with dicent salary and social recognition.

Nevertheless, I got my B.Sc. anyway. I stall a bit by deliberately not to meet the graduation requirement (which is, ironically, English requirement) and stayed for a fifth year. I joined MozTW and took care of Firefox localization, started to get to know people in the technology circle, many of whom are big names I admired. I gave lectures at meet-ups and events, wrote web application for Firefox promotion. I co-organized events, designed event websites. I built a paper toss game in the IE9 hackathon event and was awarded an XBox 360 + Kinect. Eventually, I am recognized by people as a qualified front-end developer.

(Full text of Steve Jobs’ 2005 Stanford Commencement Address)

I don’t actually remember when I see the speech for the first time. At first it didn’t make an impression. It was not until some day, I realized “connecting the dots by looking backwards” is exactly what I did, and do right now: Without these “personal homepage” I wrote before college, I wouldn’t know how server-client architecture works. Without my college projects in the physics department, I wouldn’t have any idea how to organize a full-scale rich-content website, nor the chance to improve my communication skill. Without MozTW I wouldn’t be known by my talented peers. Even physics has a part when I looked backwards – The paper toss game I wrote at the IE9 event is actually based on physics simulation skill I learned in school. I hated that class, but without the knowledge the game wouldn’t have such animation effect.

Indeed, Steve was right all along. “You can’t connect the dots looking forward; you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your future. … This approach has never let me down, and it has made all the difference in my life.”, he said. By looking backwards, I found everything I did somehow makes who I am today, and they surely made all the difference.

This is what Mr. Jobs meant to me. Nothing technological nor innovative, purely personal. So long, Steve, you lived a good life. This post is my tribute to you, and you will certainly be missed.