• Javascript Weekly
• HTML5 Weekly
• Web Design Weekly

這些 newsletter 也其實就是一周網摘了，對於沒有太多時間看 rss 或跟 tweets 的人來說，這個每周精華很有用，能令你貼緊技術進展。也並不只是一堆連結，還附有一些介紹，分類上也有編排過，感覺用心。

雖說大同小異，但實作時仍然會有分別，這裏特別說說一些個人經驗。例如專案有用到其他的 CSS Framework 如 jquery-ui 時，想配合這些 CSS Pre-processor 用時，有時會索性將這些檔案直接導入，然後你就可以隨便 extend 這些 CSS Framework 的 class。以 SASS 為例，要首先將 jquery-ui 的 CSS 轉成 SCSS 檔，可用 sass-convert 工具：

sass-convert --from css --to scss \
  jquery-ui-1.8.2.custom.css > _jquery_ui.scss

然後 import

@import "jquery_ui"

在此以前，你寫一件新的元件要 jquery-ui themeable 的，就要寫類似這樣 class 滿天飛的 code:

<div class="banner-box ui-widget ui-corner-all">
    <div class="title ui-widget-header">header</div>
    <div class="content ui-widget-content">
        Lorem ipsum dolor sit amet, consectetur 
        adipisicing elit, sed do eiusmod
    </div>
</div>

用了 SCSS 就可以這樣了：

.banner-box{
    @extend .ui-widget;
    @extend .ui-corner-all;
    border: 1px solid #ccc;
    .title{
        @extend .ui-widget-header;
        font-weight: bold;
        background-color: #eee;
    }
    .content{
        @extend .ui-widget-content;
        color: #333;
    }
}

HTML 就可以變得清減了:

<div class="banner-box">
    <div class="title">header</div>
    <div class="content">
        Lorem ipsum dolor sit amet, consectetur 
        adipisicing elit, sed do eiusmod
    </div>
</div>

對於那些非常不滿如 blueprint 那些 CSS Grid 搞到一地都是 presentational class 的人，應該會相當高興。

LESS 雖然沒有 @extend，但也可以將普通的 CSS 直接導入(改成 .less就可以了)，將那些 class 當是 mixins 使用：

.banner-box{
    .ui-widget;
}

不過問題就在於，要成功導入 less 檔，裏面的 CSS Rule 必需正確，即是說不可以有 hack 出現。當然 LESS 也讓你可以 escape hack (用 ~ prefix)，但若你要導入人家一整個如 jquery-ui 般龐大的 file，難道要自己手動找這些 hack 出來 escape 嗎？這方面 sass-convert 就更勝一籌。

而且 sass 之外，還有更強大的 compass ，已有很多預設配方，如 spriting 、 layout 等等，都能大大免去 developer 之憂。

• 將 source code 搬了過 github
• 以前的寫法有點累贅了，沒有充足使用較新的 API (如 querySelectorAll)，所以重新 Refactor 過，減減肥
• 因為 chrome 沒有 DOMAttrModified，所以用 timer 寫了加 marker 的部份
• siteParser 部份改成簡單的 selector 描述就可以了
• 輔以 test case
• 其實之前都放棄支持 bloglines，就索性徹回了 (其實就沒幾個在用… bloglines 或這個 script 本身 :p)

最近版本，按此安裝。

Treesaver 的原理是用 absolute position 的方法，幫你自動排好 column、figure (heading、圖片)。Treesaver 是 size-sensitive 的，會就著當前的 browser size，選用不同的 grid 做排版，而這些 grid、column 等都可以在一個 resources.html 和 styles.css 裏定義好。也可以製訂文件目錄，Treesaver 會自動讀取，連續閱讀。

理論上，寫內容的大概知道了一些 Treesaver 的規則，就可以直接寫 html，放上 server 就可以了，不用碰到 script 的部份。但如果想做特別排版，就要連帶修改 resources.html 和 styles.css ，這就比較難。

Treesaver 算是能簡單幫你做到一個 web 版的 magazine，效果算不錯，花點心力還可以支持 mobile device。不過中文網頁的硬傷，還是字型吧，看來看去都好醜。

Google J/K [gist]

例如，少用一點膠袋，自備購物袋，拒絕過度包裝。

例如，晚上關上不必要的燈、電器，節省電力，減少光害。

例如，每 星期一不吃肉 ，減少碳排放。

例如，拒看低俗無益的八卦雜誌，拒看公式電視劇。

例如，幫趁小商店， 拒絕大地產商生意 。

會需要大家一人一小步，是想每人都做一點點，以改變現有的習慣、風氣、市場。要這樣做，皆因這些固有東西，都已經成為一種架構，將每個人潛而默化了。架構太堅固，太難改變，只能靠人們自己自覺，一人一小步。

這一小步雖然看起來簡單，但行起來卻難。有人會說，這真的有用嗎？會有效嗎？還是只是宣傳技倆？有人會說，最終還不是只得一小撮人做，有甚麼用？有人會說，沒有配套怎行啊？有人會說，那麼多東西要一小步，其實還不是一大步？然後，我們自困於架構當中。

想起寫軟件也會越寫越像怪獸，架構越大越難動，這叫 Software Entropy。結果就是開發到一個地步，再沒有人碰得了，或者砍掉重練，或者被迫繼續使用。近年 (其實也十幾年) 提倡寫軟件應要敏捷 (Agile)，時時聆聽客戶需求，用工具簡化開發步驟，縮短開發循環，輕身上路。軟件不是一開始寫好藍圖建設，而是「成長」出來的，會隨環境需求而變化。

軟件特別在於「少有材料可有如此彈性，易於重建優化，又容易實現偉大的概念和結構。」¹ 然而現實社會的機器架構，卻沒有那麼容易，改變更要靠大家的恒心耐力。但另一面看，現在虛擬與現實漸融和，也將虛擬世界的可朔性帶進了現實，配合網絡發揮作用，改變不必由上而下，可以由下而上。

架構巨獸之下，人覺得小步無用，是可以理解的。不強求人人齊走小步，只想大家知道當大家有得選擇時，便要珍惜，小心明智地選擇。巨獸放著不管，最終還是會發臭崩壞的，這是熱力學第二定律。

¹ 見 編程之樂

Twitter Quick Links [gist]

你可以選擇直接 include 這兩個 script，或者自己 build 一個 Modernizr 連 Yepnope 的檔。找你要用的 script，例如 inputPlaceholder 。然後，在需要的地方這樣寫:

Modernizr.load({
	test: Modernizr.input.placeholder,
	nope: ['inputplaceholder.js'],
	callback: function(){
		inputPlaceholder(document.getElementById("top-search-box"), '#333333');
	}
})

就這樣子。Modernizr 會偵察你的 browser 是否支援 placeholder 屬性，如果是 ‘nope’ 的話，就會載入 inputplaceholder.js，再在成功載入後執後 callback。很簡單吧！

當然這只是舉個例，如果只是要載入如 inputplaceholder.js 這小 script，用 Modernizr 配 Yepnope 分明是用牛刀殺雞 (用多於 5K 的 loader 去 load 1K 的 script)。但當要載入較大的 library 時，才值得用這些 loader。

後話：其實這陣子推出了很多 js loader： LABjs 、 HeadJS 、 RequireJs 、 ControlJs 、 load.js … 身形功能大小不同，這裏有個 Comparison matrix 可以參考一下。

• create an inline block to wrap the <select> up
• set width and height of the inline block the same as the original select
• set position ‘relative’ for inline block
• set position ‘absolute’ for <select>
• when mouse over, set <select> width as ‘auto’
• when mouse click, toggle a flag ‘clicked’ (using $.data)
• when mouse out and flagged as ‘clicked’, reset <select> width
• when blur or change, reset <select> width

The reason for wrapping an inline block is that when <select> set/reset width, it would not affect the layout of other elements.

The ‘clicked’ flag is used to indicate if the <select> is ‘expanded’. If it is, the mouseout event should not reset the width.

Here is the code (and of course only effective in IE6/7):

成書至今 35 年的《The Mythical Man-month》 (人月神話)，至今讀來仍然不老，可見書對程式設計和軟件工程有透徹的了解，明白這一項工作的本質、涉及人事、流程等等，有什麼特質和局限，所以才能直擊要害，成為經典。

我們通常會說「這項目一共花了十個月的 man-month」，可是 Man-month 是一個神話，其估計永遠不準確。因為編寫程式不同耕田種菜，那些工作只要技巧上了手，工人們就可以獨立工作，所以要增加生產力，直接加人就可以了。可是編寫軟件卻不能這樣算，因為除了技巧，溝通也很重要。軟件涉及不同部份互相合作，各部份資料如何傳遞、格式如何，需要成員間的溝通。在一個趕頭趕命的軟件項目裏增加人手，並不能加快生產，反而要花更多時間作訓練、溝通。「人」與「月」是不可互換的。

寫程式是一項心智活動，程式員有很大的自由，能將意念化成文字指令讓機器執行。偉大的建築或音樂，可以只有一個設計者，作品強烈反映個人意志。但軟件通常時間迫切，總是需要很多人手加入規劃設計。如何將不同人的設計意念統一、實作、測試、付運，就成為軟件工程的最大課題。這裏面，要訂立很多不同架構、規則、流程、工具、文件等等。

此書亦收錄後來作者一篇《No Silver Bullet》，引起爭議最大。書中預測：十年內沒有任何技術，可以幾何級數增加軟件生產力。這預言是應驗了。這當中，作者討論軟件開發的本質：複雜、不一致、易變、無形。軟件各部份各異，無一相似，又有超多狀態，所以複雜。軟件開發總是要面對不一樣的問題，帶來不一樣的複雜，這並無任何一致性可言。因為軟件本身很容易被修改，引至用戶要求、排程、實作、測試等等活動，都經常處於改變之中。與實物不同，軟件是無形的，結構不受空間限制，也沒有任何一大圖表能夠代表整體 (要多張才可以)。

而在那時一些技術，如高階語言、時間分享、統一開發環境等等，都不能直擊這些本質問題。及至日後的一些技術，如 OO、AI、圖形編程等等，也沒有成為 silver bullet。

雖然如此，還是有些東西可以做到的。作者預測了一系列改變也正在發生，如由買軟件代替開發專用的 (組合使用 spreadsheet、word 等解決問題)、以不斷修正需求快速試作來開發、「生長」軟件等等，都可以減輕我們開發軟件的負擔。我讀此書是二十週年版，也就附有一篇作者在二十年後的回顧，詳細地察看自己的預測的異同及其因。

Software is hard。寫程式如寫詩一樣，自由度很大，卻又可以做出實際的東西， 猶如魔法 。可是自由越大，也越易出錯，加上要協調不同人事，就更複雜。我們需要各種各樣的規則流程方法，才能做出可靠的產品，這在現在越來越依賴電腦的世界，尤其重要。