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.