dwi2的碎念

不能只是曬網

開發Mobile Web的Remote Debugging工具

| Comments

Web developer應該都相當熟知Firebug, Chrome的開發人員工具以及Safari的Web Inspector這類工具, 無論是JavaScript除錯或是調整版面layout都非常實用, 但在開發mobile web app時, 行動裝置多半沒有提供這類原生開發輔助工具該怎麼辦呢?

Handlebars Precompile Template快速上手

| Comments

Handlebars是一個JavaScript template engine, 可以在pure front-end (瀏覽器內)或是back-end (Node.js)上運行.

類似的JavaScript template engine很多, 箇中差別或是優劣比較這裡就不著墨, 網路上應該可以找到很多分析, 例如這個stackoverflow討論串這個Quora問答或是這個網頁

我選擇Handlebars的原因只有一個: 可以使用precompile的template, 因此網頁上只要多帶約6KB大小的handlebars.runtime.js即可, 使用Handlerbars帶來的overhead不大, 畢竟JavaScript Library最重要的就是要輕●薄●短●小!

不過Handlebars的官方網頁對於如何precompile template以及如何使用precompile template的說明有點少, 很急的人如果照著作可能沒辦法馬上正常運作, 因此我寫了這篇quickstart guide來幫助大家快速地在網頁前端使用Handlebars precompile template. 如果只是想要知道怎麼在你的網站前端簡單地使用Handlebars, 不太在乎頁面讀取的效能, 看官方網站就足夠了.

JavaScript Wheel Event - 使用JavaScript處理瀏覽器的滑鼠滾輪事件

| Comments

之前跟大家介紹過了如何用JavaScript處理混亂的Keyboard Event (其1, 其2). 今天要跟大家介紹瀏覽器的滾輪事件wheel event. 滾輪事件不只是滑鼠滾輪會觸發, Macbook的觸控板上雙指滑動其實也是滾輪事件.

實際開發web application需要偵測wheel event的需求或情境也許不多, 網路上能找到的介紹也不多, 但各個瀏覽器對滾輪事件的實作卻是十分混亂, 處理滾輪事件一點都不輕鬆!

一般來說, 滾輪事件發生時, 我們關心的資料是

  1. 滾輪滾動事件發生與否
  2. 滾輪滾動的距離

大多數瀏覽器都有提供wheel event, wheel event內都有一個類似delta的屬性表示滾輪移動的距離, 不過delta的正負值在不同瀏覽器裡面代表的意義則有些許差異, 此外屬性名稱也不一定叫delta, 事件名稱也不一定叫wheel!

JavaScript KeyboardEvent 2

| Comments

之前介紹過JavaScript的KeyboardEvent, 經過這兩週我又有了一些新的血淚控訴心得跟大家分享!!

特殊鍵(modifier keys)的處理

特殊鍵指的是ctrl, alt, windows鍵(或是Mac的command鍵), capslock等等. 這些鍵沒有character對應(ASCII), 所以大部分瀏覽器不會送出特殊鍵的keypress事件, 因此寫程式時只能用keydown/keyup事件偵測處理這些特殊鍵, 大部分瀏覽器不會送出特殊鍵的keypress事件.

JavaScript KeyboardEvent

| Comments

最近我因為工作上的需要擷取user在網頁上所有keydown, keyup的事件, 過程中發現一些有趣的事情, 這裡特別跟大家介紹一下

KeyboardEvent裡的keycode/which

通常我們會用類似下面的event callback取得keycode

1
2
3
4
var keyboard_hook = function (eventt) {
  var key = event.keyCode || event.which;
   // do something
}

因為不是每個瀏覽器實作的KeyboardEvent都有keyCode這個properties, 所以通常會先偵測是否有keyCode, 沒有就取用which

當然更省事的作法就是直接用jQuery幫我們包好的event handler以及jQuery Event Object, jQuery會幫忙處理相容性問題, 直接拿jQuery Event Object的which即可

但這裡有個很奇妙的地方要注意, 當keypress發生時, event的keyCode或which的內容是該按鍵代表的char值(ASCII); 但在keydown或keyup事件中, keyCode或which的內容卻是瀏覽器給予按鍵定義的scancode(沿用微軟的稱呼), 而且scancode會因為瀏覽器不同而有不同的值.

在ubuntu 12.04上安裝gitorious

| Comments

前陣子好忙, 這次曬網曬到網子都變成網乾了! XDDD

上週因為工作需要建立一個操作類似Github的web-based git server, 稍微在網路上survey了一下, 最多人推的是gitoriousgitlabhq, 兩個都是用Ruby On Rails寫的, 相較起來gitlabhq比gitorious多了private repository的feature, 不過我的使用環境是在內網, 所以有沒有private repository對我而言並不是很重要, 而且聽朋友說在gitlabhq安裝時遇到不少問題, 所以直接選擇gitorious(雖然事後發現gitorious其實問題也不少).

EC2不只是VPS而已

| Comments

我之前都把EC2當成VPS在用, 但內心一直有個疑問, EC2比一般VPS貴上許多, 但是大家卻買它的帳, 顯然是我還沒有把EC2的玩法參透!(李組長眉頭一皺, 發現事情並不單純!)

serverfault上的這篇問答 - Amazon EC2, fastest way to get a node into an existing cluster寫得非常好, cyberx86的回答非常清楚的解釋VPS跟EC2不一樣的地方, 具體說明EC2以及其他AWS服務如何整合, 還有針對如何使用這些服務有個涵蓋廣泛的指引. 對於我這種剛接觸AWS還有雲端服務的人, 這篇是非常棒的指引!分享給大家

最近比較忙, 一不小心又曬起網了

| Comments

最近比較忙, 每天都是深夜回家, 早上8點不到又出門去上班, 週末也維持差不多的模式, 所以一不小心又曬起網了, 真是對不起呀! (其實對不起的是自己吧! 無言面對版標!!)

有時候我常常會懷疑自己這樣做值得嗎? 但質疑的當下我其實都無法知道答案, 只有時間能證明一切, 生活就是由苦澀跟甜美的事物堆積起來的, 而且通常苦澀的部份比較多, 現在辛苦地努力於某一件事, 結果還是有可能會很苦澀, 所以不管結果是好是壞, 最重要的就是不要愧對自己的心, 至少不要讓自己後悔!

自我犧牲不是一種美德

| Comments

前陣子kchiu大大推薦我閱讀Daniel Tenner寫的這篇文章 - Successful people are successful. 文章詳細內容就請各位點進去看了! 我自己讀完感觸還蠻深的, 這篇文章戳破我很多一直以來的迷思

簡單列出我的心得(其實也是作者強調的重點):

  1. 成功是由無數的小小成功累積的!

Play Framework FunctionalTest的POST有些問題!

| Comments

這問題花了我一整天的時間!

我寫了一個上傳檔案的controller, 接下來我想寫一個functional test去測它. Play的api裡面提供了1個POST function讓我(以為)可以很快的測試file upload

1
public static Response POST(Request request, Object url, Map<String, String> parameters, Map<String, File> files);

結果測了半天, 發現無論如何File接到的值都是null, 不管我怎樣改content-type都沒有用! 後來我在stackoverflow上發現這篇Functional tests and posting files in Play Framework?, 原來早就有人遇到同樣的問題, 但目前還沒有人回答!