高見龍

iOS app/Ruby/Rails Developer & Instructor, 喜愛非主流的新玩具 :)

當jQuery遇上CoffeeScript

上週的PHPConf Taiwan,有幾位朋友在會後問我CoffeeScript要怎麼樣跟jQuery之類的framework整合在一起,會不會打架? 基本上是不會的,CoffeeScript寫出來的東西就是JavaScript,如果會打架,那表示你即使不用CoffeeScript來寫也一樣打架了。

我們來看看要怎麼把jQuery跟CoffeeScript放一起。

簡單的說,就跟你平常在用jQuery沒什麼兩樣,例如你要取得頁面上某個元素:

1
$pokemon = $('#pikachu')

就可以取得頁面上某個id叫做pikachu的元素(這例子是從那本CoffeeScript的書上借來的 orz)。

再來,你可能寫過這樣的程式:

1
2
3
$().ready = function(){
  alert("hello, jQuery");
};

就是在頁面載入完成後跟你打聲招呼的程式,在CoffeeScript裡你就這樣寫:

1
2
$().ready = ->
  alert "hello jQuery"

如果你是用這種寫法:

1
2
3
$(function() {
  alert("hello, jQuery");
});

改成CoffeeScript則是:

1
2
$ ->
  alert "hello, jQuery"

其實寫法跟原來的寫法沒什麼兩樣,就一樣$給它用下去吧。

你可能也寫過類似這樣的東西:

1
2
3
4
5
$(function(){
  $('h1').click(function() {
      $(this).html('I am clicked');
  });
});

意思是「點擊h1元素之後改變它的內容」,改成用CoffeeScript寫的話:

1
2
3
$ ->
  $('h1').click ->
    $(@).html 'I am clicked'

好像已經簡單到我都不好意思要寫這篇了..

如果要寫jQuery的Plugin呢? 舉個簡單的例子,例用Regular Expression來檢查Email格式的小程式,原本可能會長得像這樣:

1
2
3
4
5
6
7
(function($){
  $.fn.extend({
    isEmail: function(email){
      return /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(email);
    }
  });
})(jQuery);

改成用CoffeeScript寫會長這樣:

1
2
3
4
5
$ = jQuery

$.fn.extend
  isEmail: (email) ->
    /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test email

少了一些不必要的大括號跟小括號以及分號,看起來真的清爽多了 :)

另外也有朋友問到,如果CoffeeScript這麼威的話,要不要乾脆把之前寫的JavaScript程式碼全部port成CoffeeScript嗎? 我想這問題的答案就由各位自己評估了。我是因為自己爾後的案子應該會用到Rails 3.x居多,所以會把自己之前寫的一些東西也慢慢的轉過來(但其實也沒多少程式碼),順便當做練功。

閒聊投影片製作與上台表演

請注意,本文有許多個人自以為是的內容,不一定適合每個人,所以請謹慎服用。

我之前工作的某個老闆跟我說過「每次的上台簡報就是一場表演」,這句話我一直記在心裡。既然是表演,表演內容固然很重要,但"說故事"的方法也很重要,不然內容也許真的很棒,但台下卻睡成一團。

不久前看了我的偶像之一Lindsay Fallow(a.k.a Stray)的一份簡報Robotlegs 2 and your brain,真的感覺會做投影片的人就是不一樣,即使人不在現場聽演講,簡報裡也沒有太多的文字說明,光看簡報就能大概知道作者想要表達的意思,這很酷!

所以這回在第一屆的PHPConf Taiwan上用的投影片,我也想來試一下不同的簡報風格。

投影片準備

設定方向

因為我的場次只有20分鐘,要講很詳細是不可能的,而且我猜聽眾們對這個主題應該有些陌生,所以我把投影片設定在入門簡介等級的,目的是讓大家知道或認識這個主題就好。

軟體選擇

其實軟體不是重點,沒有什麼"用XX軟體來做簡報才是王道"這回事,只要選擇自己順手的工具來做就行了。前面幾場我選擇用HTML5 + Deck.js來做,我覺得效果滿ok的。基於自以為自己是個閃客,本來想用Flash來做,但時間有點趕,而且我想做的內容可能會需要更精準的控制元素的位置,所以最後我選擇了Keynote。

製作概念

用圖片來取代我想講的話,讓聽眾看到圖片之後能自行腦補我想表達的意思,這是我這回想要試驗的目標。

例如我想表達CoffeeScript因為是最近才出來的,會不會被大家認為"嫩"、"年輕"、"不成熟"的感覺,本來想找嗷嗷待哺的幼鳥,但因為幼鳥的皮膚顏色並不好看,所以最後找了小鴨:

image

再來例如我想表達的是「JavaScript看起來很容易學、很容易寫,但要寫到夠好卻很不容易」。閃過腦袋的「簡單」是「a piece of cake」:

image

但即使是一片蛋糕,也是有人可以吃的很難看,滿嘴都是:

image

圖片真的有達到我想表達的意思嗎? 不確定,如果沒有,表示我還有很大的努力空間。

整體而言,我準備投影片的內容大概只佔了30%的時間,60%的時間在找圖,剩下的10%在順投影片。值得嗎? 我覺得這是不同的嘗試,並沒有值不值得的問題。

自我介紹

上台表演是個讓大家認識你的好機會,所以在投影片裡放個自我介紹是很重要的。這是我本來的自我介紹頁:

image

整個都是字,密密麻麻的感覺好像感覺很強大、有幾百年功力的樣子。但我其實並不想在個人頁停留太久,而且寫了一堆,別人也不見得想看,還可能被覺得是在吹噓當年有多勇。真正厲害的角色只要一句:

I'm CEO, Bitch

輕描淡寫的一句話,大家就知道他的趴數了。

為了讓自己更快讓別人知道我的比較熟悉的技能,所以我做了這張,跟大家說我是寫Flash的:

image

然後把前面那個都是字的內容縮減成這樣:

image

其實字還是滿多的,所以我不會全部照著唸,在這頁我大概只會停留10秒鐘以內就會離開。至於網站或是聯絡資訊,反正也不會有人想看,所以我在放在最後一張。我把它放在最後一張並不表示不讓它登場。我大概計算過,在我跟大家說謝謝準備下台之後,從我原本站的位置走到我的電腦、關掉投影片,大概有5秒左右的時間,這個時間我預計大家都在拍手,然後我會在這個時候從倒數第二張的QA畫面,切換到最後一張投影片:

image

字型

全英文投影片? 英文是很厲害是嗎?

當然不是! 不得不說,中文字型的筆畫多,如果想走精緻路線很吃虧,所以除了我的名字是中文的之外,其它的我選用英文來寫。

為了不讓字型搶了圖片的風采,所以我想找細一點的字型,但如果太細到時候播放出來又擔心看不清楚,所以字型的樣式跟粗細在用的時候是要很注意的。系統裡的字型沒有我看喜歡的,所以我上網找找看有沒有漂亮的字型,後來找到Rawengulk這套字型,樣子看起來像這樣:

image

免費而且可商業使用。雖然它不是等寬字,不過這套字型從最細到最粗看起來都滿舒服的,在視覺上跟圖片應該會滿搭的(個人感覺)。

順便也備份了一下。

圖片來源

一開始我是使用Google的圖片搜尋功能,但圖片的尺寸、品質好壞很難控制,而且授權也不見得都有標示清楚。後來才發現Flickr是個很棒的圖片來源,照片多,而且有很多CC(Creative Commons)授權的圖片,只要搜尋的時候加勾選就行了。

image

CC授權的作品大多只要在使用的時候標記作者姓名、出處,而且不做為商業用途的話,幾乎可以無限制的使用,感謝這些人無私的奉獻。

然後因為我還沒辦法做到完全只靠圖片就說故事給大家聽,還是需要一些簡單的字比較容易說明,所以在選擇照片的時候我會特別選擇有適當的留白區塊可以讓我填字的照片。

上台表演

上台前準備

我大概花了10%的時間在練習講自己的投影片,我儘量要求自己記得所有投影片的順序,這樣我才能不用回頭看一下投影片就可以繼續講下去,腦袋裡本來預計要講的故事不會因為這樣中斷,在講的過程中因為自己知道下一頁要講什麼,也比較不會緊張。

站的位置

我不喜歡選擇站在講桌後面講話,除非是要操作電腦。

雖然不是第一次來中研院的這個會議廳,但以前都是當聽眾,不知道前面的舞台有多長多寬、視野如何,所以我一早到會場,試了一下投影機沒問題之後就先去試一下舞台,看看哪個位置是我可以看得到我目前簡報播到哪一頁,還可以看到全部的聽眾,也可以讓大家都看得到我。

image photo by othree @PHPConf Taiwan 2011

簡報器

Wii手把真的是個很不錯的簡報器。

Apple雖然有出一隻長得像ipod的遙控器,但它是紅外線的,缺點就是距離短,而且有指向性,只要站太遠或指的角度不對,就沒辦法用。而Wii是使用藍芽跟電腦連結的,不僅距離長,而且不用太刻意指向電腦就可以操作簡報。

有些手機的App可以做到類似的事,但因為手機是平的,不像Wii手把的十字鍵是凸起來的,所以我如果我對這個App不熟的話,可能得先低頭看一下手機的畫面才能操作,而且可能還得一手拿著、另一手來操作,但Wii手把的話則是只要一隻大姆指就可以輕鬆操作了。

除此之外,Wii手把在"視覺上"還有某種程度的娛樂效果 :)

image
photo by othree @PHPConf Taiwan 2011

麥克風

因為拿一般的無線麥克風的話,會讓我兩隻手都被佔用,沒辦法有其它手勢,所以我最後跟會場借了小蜜蜂來用。

其實我本來想去找像豬哥亮那種可以把麥克風吊在脖子上的東西,然後把自己搞得像夜市叫賣的,我很愛這種不協調的感覺,只是不知道要去哪邊買就是了。

與台下聽眾互動

有些人喜歡在演講過程透過問台下聽眾問題來增加與聽眾的互動,但就我觀察,台灣的聽眾普遍都比較害羞,很容易在問問題的時候會遇到沒人要鳥你的情況。所以問問題就要有用一點小技巧,例如「請問台下有沒有人平常的工作是寫JavaScript呢?」這個問題,我用了反面的問法:「請問台下有沒有人平常的工作是"不用"寫JavaScript呢?」,即使大家不捧場,也滿容易再接下去講,場面比較不會僵掉或是中斷原本的流程。

眼睛看哪裡?

當然要看正妹啊!!(誤)

上台表演難免會抖,而我自己消除緊張的方法,是在講的過程中,快速掃瞄台下對我講的內容有反應的聽眾,反應包括微笑、點頭等表示聽得懂或認同的,然後把比較多的視線停留在這些人身上來增加自己的一些自信,當自信增加到一定程度之後就比較不會抖了。

結論

記得要預先盤算你要做的每個動作的目的以及台下聽眾可能會有的反應(也許是笑、也許是問問題,或是丟雞蛋)。每次的表演結束後,如果有錄影的話,請再花點時間看看自己的表演,看看哪邊是有問題的。不要覺得不好意思,別人眼中的你才是真正的你,鏡子裡的那個自己並不是。看看自己的動作、語調,然後利用每次的演講就改掉一些缺點,才會越來越進步。

我一直相信,只要用心的準備每次的表演,台下的聽眾也會用心的回應你的,即使不是當面跟你說,也會在社群網路上看到正面的回應。

一些個人的想法,與大家分享。

自己要檢討的地方:

  • 講話依舊有些抖
  • 無謂的手勢太多
  • 時間的掌控不足

CoffeeScript on PHPConf Taiwan 2011

這是我在第一屆的PHPConf Taiwan講的主題

image
View on Speaker Deck
Download PDF

內容是入門等級的介紹,沒有現場實作,只是希望大家可以試著用不同的工具,體會不同的感覺。這次同時也試著用不同的風格來做投影片,不過沒有太多有趣的梗,希望大家會喜歡。

不是我愛撈英文,而是中文字型就真的很吃虧,要做精緻路線的投影片比較麻煩。

話說,Speaker Deck的設計其實很不錯,沒有廣告,上傳很簡單,而且播放器也不需要Flash Player,就可惜目前少了個全螢幕播放的功能,在電腦上看還不錯,但在公開場合要播放就很吃虧了。

Octopress的Canonical URL問題

自從把Blog從Wordpress搬到Octopress之後,對我這種愛敲鍵盤的人來說,寫東西真的順手不少。不過最近我發現在要把網址貼到Facebook的時候發現這個情況:

image

原本以為會自動抓該網頁的摘要,但卻出現了301 Moved Permanently的字樣,但只要把最尾巴的斜線拿掉就正常了。不過一樣的網址貼到Google+是ok的,於是我把網址丟到Facebook的Debug工具看看是哪邊出了問題:

image

出現了Circular redirect path detected的錯誤訊息,畫面往下捲看看是什麼狀況:

image

大概猜到是怎麼回事了,但很好奇到底是哪邊造成的,看了一下我的_config.ymlpermalink設定:

permalink: /:year/:month/:day/:title/

看起來尾巴有斜線的。接著再翻了一下其它的source才發現,原來在source/_includes/head.html裡有這行:

(source_includes_head.html) download
1
{% capture canonical %}{{ site.url }}{% if site.permalink contains '.html' %}{{ page.url }}{% else %}{{ page.url | remove:'index.html' | strip_slash }}{% endif %}{% endcapture %}

最後面加了個strip_slash的filter,看起來就是會把slash給脫掉的,我把這個filter拿掉之後,原本的canonical url就會留下/了,整個重新發佈一次之後,再貼到Facebook就沒301的問題了。

似乎不只這樣,原來Disqus的identifier也是用canonical url(請見source/_includes/disqus.html)。之前一直很好奇為什明明我在Wordpress的留言已經匯入Disqus,從Disqus的dashboard也都看得到,但就是無法顯示在blog文章裡,原來就是這個canonical url差了一個斜線,造成disqus_identifier不同而讀不到.. orz。

剛把它修正之後重新發佈之後,之前在Wordpress的留言就可以正常顯示了。但因為換過來之後沒注意到這點,所以從我換到Octopress之後有來留言的大大們真的很不好意思,您的留言其實還在Disqus裡,只是因為identifier不同而暫時只能留在dashboard裡了。

其實我也不知道為什麼這邊要strip_slash這個filter的存在,也許有它的用意吧,不過我拿掉之後就可以解決我的問題了。

以上,若有哪邊有錯再請跟我說 :)

第八回AS讀書會之Hello Robotlegs

時間很快,已經到第八回了,雖然這回是在週末舉辦,依舊還是相當多的朋友來捧場,相當感動 :)

image

這回我的主題是Robotlegs的入門介紹,投影片可以在這邊找得到 http://www.eddie.com.tw/slides

除了原定我跟另一位講者(阿邪哥)之外,這回還有另一位佳賓,是Papervision3D Essentials一書的作者Jeff Winder剛好最近來台灣玩,也一起加入我們一起同樂。(聽說他來台灣騎腳踏車環島,真厲害)

image Jeff幫忙補充了一些Robotlegs的東西,也分享他最近做的一些東西。

image 果然,穿M號的衣服還是太勉強,減肥之路還得繼續努力! 更多照片請見 Picasa相本

如同Jeff跟我說的:

"It is always so nice to meet people who share the same passion."

嗯,我覺得那就是當初辦這個聚會的目的了。

最後要再感謝一下來參加的各位朋友,以及臨時被我拉來當攝影師的鐵哥,咱們下回見 :)

PS: 話說我發現其實開口講英文雖然還是不太習慣,但比我想像中的簡單,似乎常看影集果然多少還是有些幫助(幫自己愛看影集找藉口)。