tag:blogger.com,1999:blog-57439439029368206572024-03-13T13:41:50.730+08:00WanCW's BlogWanCWhttp://www.blogger.com/profile/13751196708825083166noreply@blogger.comBlogger39125tag:blogger.com,1999:blog-5743943902936820657.post-25144451015027708372014-11-05T12:14:00.000+08:002014-11-05T12:15:43.620+08:00Google Calendar 與 Gmail 5.0<p>為了配合 Android Lollipop 的推出,Gmail 跟 Google Calendar 也翻新成 Material Design 的界面,順便加了一些新功能。</p>
<p>
Google Calendar 5.0<br />
<ol><li>跟 Google Now、Inobx、Google Keep 的 reminder 整合了。不知道Google Tasks哪時會被徹底關掉?<br /></li>
<li>App 可以顯示國家、宗教節慶但跟 Web 版的節慶行事曆無關。App 看得到 Web 的,反之不然。App 跟 Web 版的聯絡人生日是同一份,沒有上面這問題。<br /></li>
<li>不知道為啥日期的顯示模式是「1天」跟「5天」,沒有「7天」或「工作日」模式。</li></ol>
</p>
<p>Gmail 5.0…… 除了界面翻新、支援 IMAP、POP3 ,好像沒什麼特點。</p>
<p>
想提早嘗鮮的可以從 APKMirror 下載(,這非 Google 官方途徑、後果請自負。)<br />
<ul><li><a href="http://www.apkmirror.com/apk/google-inc/calendar/calendar-5-0-1554015-apk/" rel="nofollow">Google Calendar 5.0</a></li>
<li><a href="http://www.apkmirror.com/apk/google-inc/gmail/gmail-5-0-1556543-apk/">GMail 5.0</a></li></ul>
</p>
<p>
是說,Google 的 app 界面設計可以一致點嗎?Gmail 的「設定」為什麼不像 Google Calendar、Inbox 一樣固定在側欄、永遠可見呢?(←單純因為label太多,捲到生氣、惱羞成怒)<br />
</p>
WanCWhttp://www.blogger.com/profile/13751196708825083166noreply@blogger.com0tag:blogger.com,1999:blog-5743943902936820657.post-69898924479702532552012-03-02T16:15:00.000+08:002012-04-12T08:48:25.939+08:00[Android] 替 TextView 加上圖示<p>Android 的 TextView 除了顯示文字,還可以在上、下、左、右加上圖示。<br/>
透過程式,有三種方法:</p>
<pre><code class="prettyprint lang-java">TextView#setCompoundDrawablesWithIntrinsicBounds(int, int, int, int);
TextView#setCompoundDrawablesWithIntrinsicBounds(Drawable, Drawable, Drawable, Drawable);
TextView#setCompoundDrawables(Drawable, Drawable, Drawable, Drawable);</code></pre>
<p>前兩個方法會完整顯示指定的 drawable;若使用最後一個方法記得要先呼叫 <code>Drawable#setBounds()</code> 指定 drawable 的顯示範圍。像這樣:
<pre><code class="prettyprint lang-java">aDrawable.setBounds(0, 0, 60, 60);
textView.setCompoundDrawables(aDrawable, null, null, null);</code></pre></p>WanCWhttp://www.blogger.com/profile/13751196708825083166noreply@blogger.com0tag:blogger.com,1999:blog-5743943902936820657.post-22307535463042272492012-02-21T05:07:00.001+08:002012-04-12T08:58:28.173+08:00[Android] 圓角框的陷阱<h3><strong>陷阱 1.</strong> 只有特定角落要圓角效果</h3>
<p>作法:<br/>
指定預設值(「android:radius」)為大於 1 的值,再把不需要圓角的角落指定為「0dp」;
<br/>而且預設值不可以跟特定角落的圓角半徑值相同。</p>
<a name='more'></a>
<pre><code class="prettyprint lang-xml"><corners android:radius="1dp"
android:bottomRightRadius="2dp"
android:bottomLeftRadius="0dp"
android:topLeftRadius="2dp"
android:topRightRadius="0dp"/></code></pre>
<h3><strong>陷阱 2.</strong> 左下角跟右下角相反</h3>
<p>API Level 12(Android 3.1)以前,<br/>
「android:bottomRightRadius」跟「android:bottomLeftRadius」的意義相反了。<br/>
解法是將正確的資源檔放在「res/drawable-v12」;<br/>
再另外在「res/drawable」裡放兩者值互換的資源檔。<p>WanCWhttp://www.blogger.com/profile/13751196708825083166noreply@blogger.com0tag:blogger.com,1999:blog-5743943902936820657.post-73826186065834297662012-01-09T13:02:00.003+08:002012-04-12T09:32:03.576+08:00密碼應該怎麼存?<p>最近明文密碼的話題很紅,<br/>
決定來重貼以前關於密碼編碼(password hashing)的筆記:<br />
<ul>
<li>編碼(hash)時請記得加<a href="http://en.wikipedia.org/wiki/Salt_(cryptography)">鹽(salt)</a>。</li>
<li>不要整個系統都用一樣的 salt,請每次都以亂數方式產生。 </li>
<li>把 salt 跟 hash 放一起,不要分開存。 </li>
<li>結合方式最好可以有變化,<br/>
例如:由明碼長度決定 salt 的插入位置。</li>
</ul></p>
<p>用 PHP 寫起來大概像這樣:</p>
<pre class="code"><code class="prettyprint">$salt = substr(hash_func(uniqid(rand(), true)), 0, $saltLen);
$hash = hash_func($salt . $plain);
$saltStart = strlen($plain);
return substr($hash,0,$saltStart) . $salt . substr($hash,$saltStart+1);</code></pre>
<p>另外,理想狀況是客戶端跟伺服器端間以加密方式(如,SSL)傳遞密碼。但是事情往往沒有這麼美好,沒辦法用 SSL 的話,可以參考〔延伸閱讀〕第 3 篇提到的「瀏覽器端 hash」。</p>
<p><a href="https://twitter.com/yllan">@yllan</a> <a href="https://twitter.com/#!/wancw/status/156243971562143744">補充</a>:
<blockquote>密碼不要用 md5 比較好,要找比較難算的 hash function 例如 bcrypt 可以參數調整難易度。否則就算加了鹽,md5 還是很容易 crack</blockquote></p>
<p><a href="https://twitter.com/yunglinho">@yunglinho</a> <a href="https://twitter.com/#!/yunglinho/status/156319331049930754">補充</a>:
《<a href="http://codahale.com/how-to-safely-store-a-password/">How To Safely Store A Password</a>》
<ul><li>Salts Will Not Help You</li>
<li>Use bcrypt</li></ul></p>
<p>延伸閱讀:<br />
<ol>
<li><a href="http://plainpass.com/2011/11/never-save-your-password-in-plaintext.html">密碼為什麼不能存「明文」?</a> | 我的密碼沒加密</li>
<li><a href="http://seanmonstar.com/post/707158385/a-basic-lesson-in-password-hashing">A Basic Lesson in Password Hashing</a> - seanmonstar</li>
<li>hoamon's sandbox: <a href="http://hoamon.blogspot.com/2012/01/blog-post_09.html">不應該在資料庫中紀錄使用者的明碼密碼</a></li>
</ol></p>WanCWhttp://www.blogger.com/profile/13751196708825083166noreply@blogger.com0tag:blogger.com,1999:blog-5743943902936820657.post-64665852181022510692011-06-24T18:33:00.005+08:002012-04-12T06:57:08.144+08:00Radix Sort 搭配 Sleep Sort(Ruby 版)<p>看了 fcamel 的<a href="http://fcamel-life.blogspot.com/2011/06/radix-sort-sleep-sort.html">〈運用 radix sort 的概念加速 sleep sort〉</a>,下午試著用 Ruby 改寫,順便拿掉暫存檔。但是相同 digit 的 thread 不一定照原本的順序結束,而變成 unstable sorting;我只好又加上「依 digit 分組」來避開這問題。<br /></p>
<a name='more'></a>
完整的程式碼如下:<br/><script src="https://gist.github.com/1044476.js"> </script>
<noscript>請啟用 JavaScript 或連到 <a href="https://gist.github.com/1044476" title="Mix of radix sort and sleep sort. (inspired by @fcamel)">Gist</a>。</noscript>WanCWhttp://www.blogger.com/profile/13751196708825083166noreply@blogger.com0tag:blogger.com,1999:blog-5743943902936820657.post-62936072600835475172010-06-29T04:24:00.000+08:002012-04-12T09:48:35.830+08:00IE Bug:JavaScript 字串中有 HTML 註解<p>IE(5.5 ~ 8.0)會將下列片段中的灰色部分視為 HTML 註解而無法得到正確的 DOM:</p>
<a name='more'></a>
<pre><code class="prettyprint lang-html"> <script type="text/javascript">
alert(</code><code style="color: #999;">'<!--');
</script>
<span>Will be ignored</span>
<!-- whatever -->
</code></pre>
<p>解法——<br/>養成好習慣,把 <script> 中的 JavaScript 用 HTML 註解包起來:</p>
<pre><code class="prettyprint lang-html"> <script type="text/javascript">
<!--
alert('<!--');
//-->
</script>
<!-- whatever -->
</code></pre>WanCWhttp://www.blogger.com/profile/13751196708825083166noreply@blogger.com0tag:blogger.com,1999:blog-5743943902936820657.post-33970572966495206662010-06-23T13:23:00.000+08:002012-04-12T09:45:51.422+08:00[Android] 威寶 A688 在 Market 上找不到應用程式<p>最近在 Android Market 上了一支應用程式,<br />
但是某些手機(如:威寶 A688)卻無法搜尋到此程式。</p>
<p>原來是因為這隻程式用到相機功能,<br />
所以產生出來的 APK 檔被自動地加上「自動對焦」的需求。<br />
導致缺乏此功能的手機「莫名地」無法在 Market 上找到此應用程式。</p>
<p>解法很簡單,<br />
在 AndroidManifest.xml 裡明確地將「自動對焦」設為非必須即可:</p>
<pre><code class="prettyprint lang-xml"><uses-feature
android:name="android.hardware.camera.autofocus"
android:required="false" />
</code></pre>
<p>由於 2.0 以上的 SDK 才支援「android:required」屬性,<br />
所以要改用 2.0 以上的 SDK 來編譯,並設定正確的「minSdkVersion」。</p>
<hr/>
<p>P.S. SDK 工具中的 aapt 可以查看 APK 檔實際上的 manifest 內容:</p>
<pre><code class="prettyprint lang-sh">aapt dump badging $APK_PATH</code></pre>WanCWhttp://www.blogger.com/profile/13751196708825083166noreply@blogger.com0tag:blogger.com,1999:blog-5743943902936820657.post-58512517732953914812010-05-25T11:13:00.001+08:002012-04-12T09:11:56.397+08:00僅匯出 SVN 修改過的的檔案<p>今天同事提出這個問題,把解法記下來備忘<br />
<ul><li>Shell script one-liner (via <a href="http://perassi.org/2007/08/30/exporting-changed-only-files-with-subversion/">Exporting changed only files with Subversion</a>)<br />
<br/>
<code class="prettyprint lang-sh">for i in `svn log -r HEAD -v | grep "^ [MA]" | awk '{print $2}'`; do rsync -avR $i /basedir_of_your_export/; done</code>
</li>
<li><a href="http://blog.miniasp.com/post/2008/09/Using-TortoiseSVN-to-Export-Only-Added-Modified-Files.aspx">TortoiseSVN 解法</a></li>
</ul></p>
<p>我也用 <code class="prettyprint lang-sh">svn diff --summarize</code> 寫了個 one-liner;<br />
但是沒想到要用 <code class="prettyprint lang-sh">rsync</code>,後半段長很醜。</p>WanCWhttp://www.blogger.com/profile/13751196708825083166noreply@blogger.com0tag:blogger.com,1999:blog-5743943902936820657.post-41439162405399893742010-01-12T18:37:00.000+08:002012-04-12T06:57:36.312+08:00讓 Nokia S40 手機與 Google 通訊錄同步<h3>同步設定</h3>功能表 → 設定 → 組態 → 個人組態設定 → <strong>新增</strong>一個「同步處理」<br />
<ul><li>帳號名稱: 隨你高興 ———(1)</li><li>伺服器位址: 「https://m.google.com/syncml」</li><li>用戶名稱/密碼: Google 帳號與密碼</li><li>通訊錄資料庫:<ul><li>資料庫位址: 「contacts」</li><li>用戶名稱、密碼: Google 帳號與密碼</li></ul></li><li>使用首選連聯結點: 確認</li></ul><h3>開啟自動同步</h3>功能表 → 設定 → 同步處理與備份 → 數據傳送 → <strong>編輯</strong>「伺服器同步」<br />
<ul><li>同步處理資料: 通訊錄</li><li>同步處理設定<ul><li>組態: 個人組態</li><li>帳號: 步驟(1)設定的帳號名稱</li><li>用戶名稱、密碼: Google 帳號與密碼</li></ul><li>自動同步處理: 選擇你要的同步週期</li></ul><h3>手動同步</h3>如果不需要常常同步,那有兩種方式手動同步的方法:
<ol><li>功能表 → 設定 -> 同步處理與備份 -> 數據傳送 ->伺服器同步</li><li>功能表 → 通訊錄 -> 同步處理全部</li></ol><br />
註:同步處理只影響手機記憶體裡的通訊錄,不會影響 SIM 卡上的資料。WanCWhttp://www.blogger.com/profile/13751196708825083166noreply@blogger.com0tag:blogger.com,1999:blog-5743943902936820657.post-16579291178290488722009-12-10T13:12:00.000+08:002012-04-12T06:57:19.111+08:00檢查 Google 未讀訊息的 Google Chrome 外掛<h4>粒粒分明組</h4><ul><li><a href="https://chrome.google.com/extensions/detail/aphncaagnlabkeipnbbicmcahnamibgb">Google Wave Notifier</a><br/></li><li><a href="https://chrome.google.com/extensions/detail/mihcahmgecmbnbcchbopgniflfhgnkff">Google Mail Checker</a><br/></li><li><a href="https://chrome.google.com/extensions/detail/gimgcofdoijbpkkhhlepagbdcfafkehp">TPGoogleReader</a><br/>可以不必進 Google Reader,自動開啟新文章。</li></ul><h4>節省空間組</h4><ul><li><a href="https://chrome.google.com/extensions/detail/cfkohgkpafhkpdcnfadadcibfboapggi">One Number</a><br/>只用一格顯示 GMail、Google {Reader,Voice,Wave} 的未讀訊息總數。</li><li><a href="https://chrome.google.com/extensions/detail/nlbjncdgjeocebhnmkbbbdekmmmcbfjd">RSS Subscription Extension</a><br/>補足 One Number 缺乏的「訂閱 RSS」功能。</li></ul><p>不過根據 LiveScience 的文章<sup>1</sup>,應該完全不要裝這些通知外掛才對。 :p</p><hr /><ol><li><a href="http://www.livescience.com/technology/091207-visual-alerts.html">Workers Should Turn Off Visual Alerts, Study Finds</a> | LiveScience</li></ol>WanCWhttp://www.blogger.com/profile/13751196708825083166noreply@blogger.com0tag:blogger.com,1999:blog-5743943902936820657.post-58906973744369196682009-11-25T03:30:00.001+08:002012-04-12T06:57:12.643+08:00Gmail 與 Google Reader 近日更新<h4>離線版 Gmail 支援附檔</h4><p>原本離線使用 Gmail 的時候無法上傳附件<sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup>,但最近加上了這項支援。<br/>所以要寄檔案時不必先注意自己是不是處於連線狀態了。</p><p>還沒有開啟離線功能的人,可以從<a href="http://mail.google.com/mail/?ui=2&fs=1&view=pu&st=labs" title="Gmail Labs">這裡</a>開啟。</p><p><strong>消息來源</strong>:<a href="http://gmailblog.blogspot.com/2009/11/send-attachments-while-offline.html" target="_blank">Official Gmail Blog: Send attachments while offline</a></p><h4>Google 閱讀器(Google Reader)可顯示 favicon</h4><p>一圖勝千文:<div style="text-align:center;"><img height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguVqzL5JeulVcoHcW0H5wxdIdXCfJiLVMJjUa4WANUDK0oYiMMkoNd90hG6h4X1MutKNasgVJFLLzD5rBKxUXTrJIeDkz7WRVBiuJ1mSpvWuaBTBYHwBVIC3tiefbc6SY1xJeh-WmlaRQ/s320/2009-11-25%20Google%20Reader%20favicon.png" width="245" /></div></p><p><strong>消息來源</strong>:<a href="http://googlereader.blogspot.com/2009/11/let-your-subscriptions-personality-come.html" target="_blank">Let your subscriptions' personality come through</a></p><hr/><ol><li id="fn:1">我沒有實際試過,這是轉述官方文章的內容。<a href="#fnref:1" rev="footnote">↩</a></li></ol>WanCWhttp://www.blogger.com/profile/13751196708825083166noreply@blogger.com0tag:blogger.com,1999:blog-5743943902936820657.post-56132582642707434382009-11-09T16:34:00.122+08:002012-04-12T09:59:03.091+08:00什麼是 metaprogramming?<p>剛剛在 <a href="http://blog.roodo.com/rocksaying/archives/10624583.html">JavaScript的中介編程與反射能力示範</a> 讀到兩個 metaprogramming 的範例。
<br/>我覺得其中 <code class="prettyprint lang-js">foreach()</code> 的例子怪怪的。</p>
<p>先來看看維基百科上對 metaprogramming 的定義:<br />
<blockquote cite="http://en.wikipedia.org/wiki/Metaprogramming">Metaprogramming is the writing of computer programs that <strong><em>write or manipulate</em></strong> other programs (or themselves) as their data, ......</blockquote></p>
<p>回過頭來看該篇文章所實作的 <code class="prettyprint lang-js">foreach()</code>:<br/>
它接受並調用一個函數(<code class="prettyprint lang-js">f</code>)以及存取一個物件(<code class="prettyprint lang-js">this.props</code>),但是並未產生或是修改到任何「程式」。<br/>
我不懂作者怎麼會拿它當作 metaprogramming 的例子。</p>
<p>不過文章中另外一個例子——<code class="prettyprint lang-js">accessor()</code>——就是個很典型的 metaprogramming 範例。WanCWhttp://www.blogger.com/profile/13751196708825083166noreply@blogger.com2tag:blogger.com,1999:blog-5743943902936820657.post-5908447672450043322009-09-28T19:33:00.000+08:002012-07-17T00:22:32.548+08:00[Android] 待辦事項(to-do)應用程式<div><p>最近買了<a href="http://www.htc.com/tw/product/hero/overview.html">新手機</a>,第一件事情就是找<del>好玩的遊戲</del>趁手的工作事項管理軟體,若是針對 <a href="http://zh.wikipedia.org/zh-tw/GTD">GTD</a> 設計的更好。<br/>
以下是我這兩天的試用心得:</p>
<p><a href="http://www.cyrket.com/package/com.timsu.astrid">Astrid Task/Todo List</a> - 單純的工作清單(task),可以設定 priority 與 tag。</p>
<ul>
<li><b>優點</b>
<ul>
<li>支援工作時間預估與追蹤(time estimation/tracking)</li>
<li>到期日分為軟性與硬性兩種(absolute/goal due)</li>
<li>單一 task 除了特定時刻的提醒(reminder)外還可以有週期性提醒(periodic reminder)</li>
<li>支援重複性 task</li>
<li>可以跟 <a href="http://www.rememberthemilk.com/">RTM</a> 同步</li>
</ul>
<li><b>缺點</b></li>
<ul>
<li>其實沒有什麼太大的缺點,只差在它不是專門針對 GTD 的概念設計。</li>
</ul>
</ul>
<p><a href="http://www.cyrket.com/package/iode.olz">OpenLoopz Free</a></p>
<ul>
<li><b>優點</b>
<ul>
<li>位置、時間、聯絡人三種特別的情境(context),<br />
可以根據手機現在的時間地點調整工作項目(action)的顯示順序。</li>
<li>支援階層式 action ,有子項目的 action 會自動被視為 project。</li>
</ul>
<li><b>缺點</b></li>
<ul>
<li>Action 是新增順序排列,且無法調整</li>
<li>被刪除的 action 不會真正被清除,有時候會干擾正常操作</li>
</ul>
</ul>
<p><a href="http://www.cyrket.com/package/org.dodgybits.android.shuffle">Shuffle</a> - 典型的 GTD 工具,有 inbox、project、context 三種主要檢視模式。</p>
<ul>
<li><b>優點</b>
<ul>
<li>會自動挑選 project 內到期日最早的項目為 next action,不必特別設定</li>
<li>畫面比較好看,可以設定 context 的顏色與 icon,一目瞭然。</li>
<li>「Due actions」 檢視模式,列出今天、一週內,一個月內的工作項目。</li>
<li>「Save and new」可快速新增多筆 action</li>
<li>可將資料同步到 Google Calendar</li>
</ul>
<li><b>缺點</b></li>
<ul>
<li>Project 只能用來作 action 的分類 ,沒有太多細節可以設定</li>
<li>一個 action 只能指定一個 context。</li>
<li>無法只設定 due date,一定要同時指定 start date。</li>
</ul>
</ul>
<p>最後是 Shuffle 以使用流暢性取勝!</p>
<hr/>
<p>另外還有兩套我沒有花很多時間試的:
<dl>
<dt><a href="http://www.cyrket.com/package/com.burnayev.actioncomplete.android">ActionComplete</a></dt>
<dd>還沒多人推薦的 GTD 軟體,搭配 <a href="http://www.cyrket.com/package/com.burnayev.android.inbox">AC Inbox</a> 應該會很方便;但是我完全看不懂它介面上的中文詞彙,所以就放棄了。</dd>
<dt><a href="http://www.cyrket.com/package/com.google.android.myGTD">myGTD</a></dt>
<dd>介面太花,我連功能都沒試就關掉了。</dd>
</dl>
<a href="http://risumfiriri.blogspot.com/2009/09/android-todo_27.html">這邊</a>還有其他軟體的簡介。</p></div>WanCWhttp://www.blogger.com/profile/13751196708825083166noreply@blogger.com2tag:blogger.com,1999:blog-5743943902936820657.post-29008756586578281022009-08-17T10:30:00.002+08:002012-04-12T06:57:21.824+08:00政治指南針:政治偏左,經濟偏右剛剛做了<a href="http://www.youpai.org/big5/compass/index.php">政治指南針</a>這個測驗。<br />
傾向跟我自己的認知差不多,不過程度比我想像中的低很多。<br />
<br />
<div class="separator" style="clear: both; margin-left: 2em; text-align: left;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjull9IBtnds4uPy5HoQnNj6ct1mEVfYGw-wWv0ZKHbnp1akl4w4RuhfE_P23nX6KJIRnS4nnCGIlGob0pOCDq3mg8sCjsdB046eeVdWapVyhEohhVpVnQ5zlbVeMNv7FwdC5KPBbHxzQ0/s320/%E6%94%BF%E6%B2%BB%E5%82%BE%E5%90%91.PNG" style="border:none;" /></div><br />
就某種意義來說,我其實是個騎牆派。 :pWanCWhttp://www.blogger.com/profile/13751196708825083166noreply@blogger.com0tag:blogger.com,1999:blog-5743943902936820657.post-85530455085673551932009-08-16T11:32:00.003+08:002012-04-12T06:57:40.251+08:00[Plurk] 透過 MSN 收發噗浪不知道為什麼 Plurk 把即時通訊機器人(IM Bot)的設定藏在很奇怪的地方。<br />
我簡單地整理了一下,提供給有需要的人。 :)<br />
<br />
首先點左上的的通知<br />
<br />
<div class="separator" style="clear: both; text-align: left; margin-left: 2em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3NbPf17PsTbRAPIwcEnvN3AaRc6aPmBq1kzTSPosTtafPwERqMoIgPHuLM4ZhpdCWWD9vuhRYV-XOZ9ebyWTiAyGym7rqkTtu-MB5e_t19piyEUmi-HWOqgOHvmQAu-wgvZCK-rkiZKc/s320/Plurk+IM+bot+(1).png" /></div><br />
然後切換到「提示2」<br />
<br />
<div class="separator" style="clear: both; text-align: left; margin-left: 2em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitkjoBYl5wAkdPW_3xyx_ZPICcy69EL34OcaEMV4jcw5sveok0Cz4C-bcZWwDe0aiWvQdZ82ejDjx76Gs_3OtJ9_vfJSMNfzZf89sJ7UOCyMIwHiDNxcGPNlBFVDNLiMfKsjpu_PwIirg/s320/Plurk+IM+bot+(2).png" /></div><br />
「現在就開始吧」!<br />
<br />
<div class="separator" style="clear: both; text-align: left; margin-left: 2em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEJzM3NKLMAjqdMGLsENShix0SOOLjWUgKN3z9cYe6WMhSgfMT014z66VprIWG63b9GTsGByMu5JC213f_0c-hZdNsr9UB43P8SI0u3Ib8YwdJJA4BPr78cN-7nzzhwpZtcIo0jRx4atA/s320/Plurk+IM+bot+(3).png" /></div><br />
選取一個即時通訊服務(MSN、Yahoo 即時通、Google Chat等)<br />
<br />
<div class="separator" style="clear: both; text-align: left; margin-left: 2em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwQwiNyqkPwXjju_P6GA8iRP0Gd0Teh-CewY9sIaOyf5pORbJCcReGEE9wbqeOJsTZw3i74e2b6tZap3wXE6QpGgdvSeRdCtjZ0YDX_OLr36XisqbU6ufWU-srOyeZ1i2D8fNeK9Ijwwk/s320/Plurk+IM+bot+(4).png" /></div><br />
選擇好後,別忘了輸入你的帳號,然後按下「Sign Up」!<br />
<br />
<div class="separator" style="clear: both; text-align: left; margin-left: 2em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguNCMxPXwc1hdq2qPAC69CxAGWCZATukV61I802Q1jI0TjlgERvZwhdgqZVLsOKYKkPeuIG08RmUla2tLS8HgUp5-zFxGUCqhUqlXZypB7HNwZ1D7IirzeqzybIRFDdUDdN7MUuR8WErM/s320/Plurk+IM+bot+(5).png" /></div><br />
<br />
一切沒問題的話,你會收到噗浪機器人加你為好友的通知。<br />
將它加為好友,並告訴它你的噗浪帳號(以 MSN 送出你的 Plurk 帳號),就大功告成了!<br />
<br />
以後你只要傳 MSN 訊息給這個機器人,它就會將你的訊息發佈到噗浪上;<br />
有新的噗它人也會即時通知你。<br />
<br />
後續使用細節可以參考:<br />
<ul><li>重灌狂人的<a href="http://briian.com/?p=5968">[MSN噗浪機器人] 免開網頁,用MSN收發Plurk訊息!</a></li>
<li>Plurk 官方的<a href="http://www.plurk.com/imhelp">說明</a></li>
</ul>WanCWhttp://www.blogger.com/profile/13751196708825083166noreply@blogger.com1tag:blogger.com,1999:blog-5743943902936820657.post-73459902095091287912009-08-06T14:02:00.003+08:002012-04-12T06:56:56.226+08:00[Design Patterns] 論 Template Method 與 Strategy (下)<a href="http://blog.wancw.idv.tw/2009/08/design-patterns-template-method.html">前一篇文章</a>提到:採用 <i>Design Patterns</i> 書中對 <strong>Template Method</strong> 跟 <strong>Strategy</strong> 的(形式)定義,很難在動態語言中區隔兩者的不同。<br />
是因為這兩個 pattern 在本質上是相同的呢,或者是有其他的判斷方式?讓我們回過頭去看看先前被我忽略掉的部分--pattern 的目標/意圖--能不能回答這個問題。<br />
<br />
根據 C2 Wiki,Template Method 的目標為「定義一個演算法的骨架,將其中的某些步驟延遲到子類別才決定」(*1)。也就是說此 pattern 應該要具備「(固定的)演算法骨架」與「(未決定/可變動)的演算法步驟」兩個要素,其中「步驟」的主要作用在於實現該演算法,且其具體內容應該要遵循「骨架」的規範或限制。<br />
<br />
Template Method 的「骨架」除了抽象類別的形式,也可以由定義了「步驟」規範的介面與使用該介面的 client 所組成;而原本由子類別提供的具體「步驟」內容則由實作該規範介面的類別提供。事實上,這樣的形式反而更接近 Wikipedia 上的描述(*2)。<br />
那麼這種非抽象類別的形式,會不會也是 Strategy pattern 呢?<br />
<br />
C2 Wiki 對於 Strategy 的目標描述是「定義多個演算法,各別封裝這些演算法,並讓它們可以互換」(*3)。所以其特徵為「一組彼此獨立且可互換的演算法」,至於使用這些演算法的 client 部分並不在此 pattern 討論的範圍內。<br />
<br />
在前述非抽象類別形式的 Template Method pattern 中實作了「步驟」規範介面的類別其實可以視為 Strategy pattern 的一種;不過「骨架」部分則不在 Strategy pattern 範圍中。所以兩個 pattern 在這種形式下是互相合作,而非表示相同的概念。<br />
<br />
結論呢?上面就寫了半天,我實在沒辦法做什麼有力的結論了。<br />
簡單說一下心得:雖然 pattern 的說明與呈現通常著重在形式上,但在學習形式的同時,應該要瞭解其中每個部分所扮演的角色與具備的特性。最好可以再進一步瞭解 pattern 隱含的精神。就像張無忌學太極一樣,學到把招式都忘記你就成功了!!(開始亂掰了……)<br />
<br />
<hr/>1. <a href="http://www.c2.com/cgi/wiki?TemplateMethodPattern">Template Method Pattern</a> (C2 Wiki)<br />
2. <a href="http://en.wikipedia.org/wiki/Template_method_pattern">Template Method Pattern</a> (Wikipedia)<br />
3. <a href="http://www.c2.com/cgi/wiki?StrategyPattern">Strategy Pattern</a> (C2 Wiki)WanCWhttp://www.blogger.com/profile/13751196708825083166noreply@blogger.com0tag:blogger.com,1999:blog-5743943902936820657.post-17918469713680833752009-08-06T07:34:00.002+08:002012-04-12T06:56:56.038+08:00[Design Patterns] 論 Template Method 與 Strategy (上)昨天在 Plurk 上面回了 <a href="http://www.plurk.com/user/fcamel">fcamel</a> 一段話(*1):<br />
<blockquote>我以為 "template method" 改用組合就是 "strategy" 了 :p<br />
不過我想會分成兩種 pattern ㄧ部分也是因為靜態語言的特性使然吧</blockquote>由於 Plurk 會限制字數,不太適合發表長篇大論。所以我打算透過這系列文章把想說的東西表達清楚一點,並且討論一下這兩個 pattern。<br />
<br />
<a href="http://en.wikipedia.org/wiki/Design_Patterns_(book)"><em>Design Patterns</em></a> 對這兩個 pattern 的描述如下:<br />
<dl><dt>Template method</dt>
<dd> defines the skeleton of an algorithm as an abstract class, allowing its subclasses to provide concrete behavior.</dd>
<dt>Strategy</dt>
<dd> allows one of a family of algorithms to be selected on-the-fly at runtime.</dd> </dl>在這樣的定義下,如果採用組合(composition)的形式,自然不會是 <strong>Template Method Pattern</strong>。而不論在靜態或動態語言中組合關係都是可以在執行時期才決定的。所以我認為(在上述的定義下):「"template method" 改用組合就是 "strategy" 了」。<br />
<br />
在靜態語言中,類別的內容必須在執行時期前就確定。因此提供 <strong>Template Method Pattern</strong> 中具體行為的子類別自然不會落在 <strong>Strategy Pattern</strong> 的範疇中。反之,由於動態語言允許執行時期修改類別定義,而讓一個類別有可能同時被用來實現這兩個 pattern。這是我回文後半段所沒說清楚的部分。<br />
<br />
當然,前面論述採用了比較狹義的 pattern 定義;而且我只討論了 pattern 的形式,而忽略套用 pattern 的動機(也就是 pattern 所想解決的問題)。但這些已經超過原本 Plurk 回文想說的內容,所以我將這部分留在後續文章中討論。(謎之音:擺明就是要拖稿嘛)<br />
<br />
<hr/>1. 這則 plurk 在<a href="http://www.plurk.com/p/1h3r1b">此</a>。WanCWhttp://www.blogger.com/profile/13751196708825083166noreply@blogger.com0tag:blogger.com,1999:blog-5743943902936820657.post-63405412932711169202009-07-20T13:23:00.004+08:002012-04-12T06:57:16.510+08:00利用 Posterous 記錄閱讀網站時的筆記與心得這次要來介紹一個 blog 系統—<a href="http://posterous.com/">Posterous</a>。<br />
<br />
它主打的特點是:不用註冊,只要發 E-mail 就可以張貼網誌。詳細步驟與功能介紹請參考重灌狂人的<a href="http://briian.com/?p=6380"><Posterous 用Email寫部落格,自動貼圖、嵌入音樂、影片></a>。<br />
<br />
我只補充一個比較少被提到的功能:<b>書籤列小工具(bookmarklet)</b>。它可以將你選取(或是它自己偵測到)的圖片、影片、文字加到你要張貼的文章中。所以我現在都利用它在瀏覽網頁時作筆記或整理心得。<br />
<br />
不過 Posterous 的 bookmarklet 連結與說明有一點難找,懶得找的人可以直接點<a href="http://posterous.com/help/bookmarklet">這裡</a>。<br />
<br />
如果你不知道怎麼把 bookmarklet 加到你的瀏覽器,請參考該頁右邊綠色區塊的說明;<br />
實際使用方式,請點該頁左邊三個「Show me how」。<br />
(請原諒我懶得製作圖文並茂的教學 :P)<br />
<br />
因為 Posterous 實在太方便了,我又懶得把<a href="http://wancw.posterous.com/">我放在 Posterous 的內容</a>再整理到這邊來,所以看來這邊又要乾一陣子了。 :PWanCWhttp://www.blogger.com/profile/13751196708825083166noreply@blogger.com0tag:blogger.com,1999:blog-5743943902936820657.post-73023864464625790082009-07-11T11:28:00.003+08:002012-04-12T06:56:56.218+08:00網頁瀏覽紀錄 7/8 ~ 7/10嗯...我懶得分類。我盡量把類似的主題放在比較靠近的地方。<br />
<ul><li><a href="http://googletesting.blogspot.com/2009/07/why-are-we-embarrassed-to-admit-that-we.html">Google Testing Blog: Why are we embarrassed to admit that we don't know how to write tests?</a><br />
重點:<b>The secret in tests is in writing testable code.</b><br />
為什麼測試程式不好寫,是因為你寫出很難測的東西。<br />
<br />
所以我們應該要鼓勵所有開發者都養成 TDD 的思維。<br />
<br />
</li>
<li><a href="http://app.arat.us/blog/?p=159">The importance of unit testing and functional testing</a><br />
<b> 單元測試</b>測量應用程式所使用的原料品質;<br />
<b> 功能測試</b>測量應用程式的結構強度。<br />
<br />
</li>
<li><a href="http://www.engineyard.com/blog/2009/5-ways-to-speed-up-your-rails-app/">5 Ways to Speed Up Your Rails App</a><ul><li><a href="http://www.engineyard.com/blog/2009/5-ways-to-speed-up-your-rails-app/"></a>Eager Load Associations - 減少對資料庫進行查詢的次數</li>
<li>Do Database Work In the Database</li>
<li>Do as Little as Possible During the HTTP Request Cycle</li>
<li>Know Your Gems and Plugins</li>
<li>Avoid Creating Unnecessary Objects</li>
</ul><br />
</li>
<li><a href="http://www.zetcode.com/">ZetCode, tutorials for programmers</a><br />
許多的程式教學,目前以 GUI 為主。<br />
語言包括:Java 、Ruby、Python、C# 等...。<br />
<br />
</li>
<li><a href="http://www.sizovpoint.com/2009/03/java-mock-frameworks-comparison.html">Java Mock Frameworks Comparison</a><br />
我還沒有寫過用到 Mock 的測試碼,先留著以後參考用。<br />
<br />
</li>
<li><a href="http://www.jtraining.com/">jTraining</a> - Java knowledge community<br />
<br />
</li>
<li><a href="http://jeremy.zawodny.com/blog/archives/002194.html">Database Abstraction Layers Must Die!</a><br />
作者覺得 Database Abstraction Layer 根本是癡人說夢。<br />
因為當你選擇一套資料庫系統時,必然會使用一些該套系統獨有的功能;<br />
若是為了不必要的移植性,只使用大部份資料庫系統共有的特性,那就本末倒置了。<br />
<br />
但是,沒有 DAL 不表示你就必須將「存取資料庫的操作」散布在整個系統中。<br />
我想這就是 <a href="http://www.martinfowler.com/eaaCatalog/dataMapper.html">Data Mapper pattern</a> 的精髓所在。<br />
<br />
</li>
<li>一些 PHP 程式碼工具<ul><li><a href="http://pear.php.net/package/PHP_CodeSniffer">phpcs</a> - PHP Code Sniffer: 找出程式碼中不符合規範(coding standard)之處</li>
<li><a href="http://github.com/sebastianbergmann/phpcpd/tree/master">phpcd</a> - Copy/Paste Detector (CPD) for PHP code</li>
<li><a href="http://pdepend.org/">pdepend</a> - PHP Depend: 程式碼度量工具</li>
<li><a href="http://phpmd.org/">PHPMD</a> - PHP Mess Detector: PHP 版本的 <a href="http://pmd.sourceforge.net/">PMD</a></li>
</ul><br />
</li>
<li><a href="http://www.devirtuoso.com/2009/07/10-must-have-cheat-sheets-for-developers/">10 Must Have Cheat Sheets for Developers</a><br />
10 份給開發者看的小抄。包括:<br />
jQuery、CSS、JavaScript、Regex、HTML 字元表、<br />
design patterns、PHP、MySQL、SVN、mod_rewrite。<br />
<br />
對了,我覺得 <a href="http://www.cafepress.com/codergear">design pattern 的 T-shirt</a> 不錯,有沒有人也想買? :p<br />
<br />
</li>
<li><a href="http://geek.michaelgrace.org/2009/06/jquery-cheat-sheet/">jQuery cheat sheet</a><br />
<br />
</li>
<li><a href="http://www.webreference.com/programming/javascript/rg36/">Understanding JavaScript closures</a><br />
用簡單的例子說明 closures 在 JavaScript 的用法(與用途)。<br />
<br />
</li>
<li><a href="http://www.bbc.co.uk/glow/">BBC - Glow JavaScript library</a> - BBC 網站所使用的 JavaScrtip library<br />
<br />
</li>
<li><a href="http://docs.jquery.com/QUnit">QUnit</a> - jQuery 的測試工具<br />
<br />
</li>
<li><a href="http://9lessons.blogspot.com/2009/07/9-interesting-jquery-projects-with.html">9 Interesting jQuery Projects with Demos</a><br />
<br />
</li>
<li><a href="http://www.sweetvision.com/2009/07/09/quick-tip-dont-use-links-with-javascript-unless-the-link-goes-some-where/">Quick Tip: don't use links with JavaScript unless the link goes some where</a><br />
只有真的需要連結的時候才使用連結標籤;<br />
單純的畫面效果請利用 CSS 達成。<br />
<br />
</li>
<li><a href="http://www.unwrongest.com/blog/why-are-we-typing-passwords-twice/">Why are we typing password twice?</a><br />
重新檢視註冊表單中「確認密碼」的必要性,<br />
順便附上 <a href="http://www.unwrongest.com/projects/show-password/">show password</a> 這個 jQuery plugin。<br />
<br />
</li>
<li><a href="http://www.thefloatingfrog.co.uk/web-design/5-second-usability-test/">5 Second Usability Test</a><br />
介紹線上 usability 檢測工具 <a href="http://fivesecondtest.com/">fivesecondtest</a><br />
<br />
</li>
<li><a href="http://tools.mozilla.com/">Open Web Tools Directory</a>(<a href="http://tools.mozilla.com/simple.html">純 HTML 版</a>)<br />
Mozilla Labs 整理的網頁開發工具目錄<br />
<br />
</li>
<li><a href="http://www.devcurry.com/2009/07/4-simple-tools-to-find-broken-links-in.html">4 Simple Tools to Find Broken Links in Your Site</a><ul><li><a href="http://validator.w3.org/checklink">W3C Link Checker</a><br />
</li>
<li><a href="http://home.snafu.de/tilman/xenulink.html">Xenu's Link Sleuth</a></li>
<li><a href="https://addons.mozilla.org/en-US/firefox/addon/532">Link Checker Firefox AddOn</a></li>
<li><a href="http://www.dead-link-checker.com/en/">Dead-Link-Checker</a><br />
</li>
</ul><br />
</li>
<li><a href="http://www.sitepoint.com/blogs/2009/07/08/10-web-apps-to-build-the-next-big-thing-without-writing-any-code/">10 Web Apps To Build The Next Big Thing Without Writing Any Code</a><br />
用來 <b>"開發"</b> 網站的網站<br />
<br />
</li>
<li><a href="http://9lessons.blogspot.com/2009/07/9-interesting-jquery-projects-with.html"></a><a href="http://sass%20-%20syntactically%20awesome%20stylesheets/">Sass - Syntactically Awesome Stylesheets</a>(<a href="http://lab.hamptoncatlin.com/play/with/sass">線上版</a>)<br />
Sass = CSS + 巢狀規則 + 變數 + ...。<br />
<br />
</li>
<li><a href="http://astuteo.com/slickmap/">SlickMap CSS</a><br />
一套將 HTML 無序列表(ul)顯示為網站地圖(site map)的 CSS 規則。<br />
<br />
</li>
<li><a href="http://www.nealgrosskopf.com/tech/thread.asp?pid=53">How To Create CSS Text/Font Gradients With CSS</a><br />
<br />
</li>
<li>幾種時間表(timeline)的做法<ul><li><a href="http://mattbango.com/notebook/web-development/pure-css-timeline/">Pure CSS Timeline</a> - 用純 CSS 的方法做出時間表</li>
<li><a href="http://www.katemonkey.co.uk/article/18/a-css-based-timeline">A CSS-based Timeline</a> - 垂直的時間軸</li>
<li><a href="http://meyerweb.com/eric/thoughts/2008/01/21/structured-timeline/">Structured Timeline</a> - 用 HTML 表格成線時間表</li>
</ul><br />
</li>
<li><a href="http://www.tripwiremagazine.com/design/design/60-free-fonts-for-big-bold-and-beautiful-headlines.html">60+ Free Fonts for Big, Bold and Beautiful Headlines</a><br />
<br />
</li>
<li><a href="http://softwareroxer.blogspot.com/2009/07/10-great-tips-for-googlechrome.html">10 Great Tips for GoogleChrome !</a><ul><li>控制 process 數量: <span style="font-family: 'Courier New', Courier, monospace;">-single-process</span> / <span style="font-family: 'Courier New', Courier, monospace;">-process-per-site</span> / <span style="font-family: 'Courier New', Courier, monospace;">process-per-tab </span><a href="http://www.ajaxonomy.com/deliciousspy/"></a></li>
<li>調整位址列的建議數量: <span style="font-family: 'Courier New', Courier, monospace;">-omnibox-popup-count=10</span></li>
<li>Firefox 的 tab 可以直接拖拉到 Chrome</li>
</ul><br />
</li>
<li><a href="http://www.ajaxonomy.com/deliciousspy/">Del.icio.us Spy</a> - 美味書籤的及時觀測站(這真是太誇張了...)<br />
<br />
</li>
<li><a href="http://executor.dk/">Executor</a> - 免費的 "執行" 替代品。<br />
我目前是用 <a href="http://www.launchy.net/">Launchy</a>,有空來再試試這個。</li>
</ul>WanCWhttp://www.blogger.com/profile/13751196708825083166noreply@blogger.com0tag:blogger.com,1999:blog-5743943902936820657.post-90608053730041953022009-07-08T05:39:00.005+08:002012-04-12T06:56:56.302+08:00[書摘] Don't make me think - 如何設計好網站我還沒真正看過<a href="http://findbook.tw/book/9789867199492/basic">《Don't make me think - 如何設計好網站》</a>這本書,<br />
以下內容是節錄自 <a href="http://www.uxbooth.com/blog/10-usability-lessons-from-steve-krug%E2%80%99s-dont-make-me-think/">10 Usability Lessons from Steve Krug’s Don’t Make Me Think</a>。<br />
<ul><li><b>易用性(usability)代表的是...<br />
</b>確保某樣事物可以正常地運作,讓經驗與能力在平均水準的人可以沒有困難地使用它並且達到被預期的功效。<br />
<br />
</li>
<li><b>網站(web application)要能自我詮釋</b><br />
網站的作用與使用方法應該要能夠不言自明、顯而易見。<br />
<br />
</li>
<li><b>不要讓我思考</b><br />
不要讓使用者去猜你的網站上有哪些功能、或是該怎麼用。<br />
<br />
</li>
<li><b>不要浪費我的時間<br />
<span style="font-weight: normal;">多數人是為了節省時間而使用網路。<br />
<br />
</span></b></li>
<li><b>使用者依戀著「上一頁」按鈕</b><br />
使用者在網站做了錯誤的操作,他們不會覺得有什麼大不了的,而會試著按幾次「上一頁」來修正錯誤。<br />
<br />
</li>
<li><b>我們是習慣的動物</b><br />
找到一個有效的方法,就算還有更好的方法也不要去改變。<br />
<br />
</li>
<li><b>沒有閒聊的時間</b><br />
使用者不是來閒聊的,使用者只想要立刻找到他們要的東西。<br />
<br />
</li>
<li><b>不要忘了搜尋功能</b><br />
有些使用者進到新網站的第一件事情就是找搜尋框在哪。<br />
<br />
</li>
<li><b>提供概念上的網站地圖(site-map)</b><br />
使用者不在乎網站上的功能與內容實際上放在哪裡;<br />
他們只想知道他們自己在概念上/流程上的哪個位置。<br />
<br />
</li>
<li><b>讓回到首頁變得容易</b><br />
這樣使用者迷路時才知道可以從哪邊從頭來過。</li>
</ul><br />
延伸閱讀<br />
<ul><li><a href="http://www.userfocus.co.uk/resources/guidelines.html">247 web usability guidelines</a></li>
</ul>WanCWhttp://www.blogger.com/profile/13751196708825083166noreply@blogger.com0tag:blogger.com,1999:blog-5743943902936820657.post-44173064585465040972009-07-08T04:40:00.004+08:002012-04-12T06:56:56.128+08:00網頁瀏覽紀錄 7/4 ~ 7/7<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><b>軟體設計與開發</b></div><ul><li><a href="http://hamletdarcy.blogspot.com/2009/06/forgotten-refactorings.html">Forgotten Refactoring</a></li>
<ul><li>重構是好事,但是請先確定你要修改的程式碼有對應的測試。</li>
<li>否則你不是在 "重構",只是在 "change some shit" (這有沒有比較好的中文翻譯?)</li>
</ul>
<li><a href="http://mcarthurgfx.com/blog/article/a-basic-lesson-in-password-hashing">A Basic Lesson in Password Hashing</a><a href="http://hamletdarcy.blogspot.com/2009/06/forgotten-refactorings.html"></a></li>
<ul><li>不要只對明碼做編碼動作,請記得加<a href="http://en.wikipedia.org/wiki/Salt_(cryptography)">鹽(salt)</a>。</li>
<li>不要整個系統都用一樣的 salt,請每次都以亂數方式產生。</li>
<li>把 salt 跟編碼後的密碼合在一起,不要存在分開的位置。</li>
<li>結合方式最好可以有變化(例如:由明碼程度決定 salt 的插入位置)。</li>
</ul></ul><ul></ul><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><b>網站開發</b></div><ul><li><a href="http://www.uxbooth.com/blog/how-to-increase-site-performance-through-ab-split-testing/">How To Increase Site Performance Through A/B Split Testing</a></li>
<ul><li>簡單的<a href="http://en.wikipedia.org/wiki/A/B_testing"> A/B testing</a> 入門</li>
</ul>
<li><a href="http://www.devirtuoso.com/2009/06/how-to-create-a-useful-404-page/">How To Create a Useful 404 Page</a></li>
<ul><li>較早版本的 IE 遇到小於 512 bytes 的 404 頁面會發生問題</li>
<li>可以透過 "robots" meta 標籤讓搜尋引擎可以正確處理你的 404 頁面</li>
</ul><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"></div>
<li><a href="http://www.codinghorror.com/blog/archives/000819.html">Create User Friendly 404 Pages</a></li>
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"></div><ul><li>不要寫 "404",那是技術面的東西,使用者看不懂。</li>
<li>讓系統可以自動提醒你:你的網站發生 404 的狀況。不要等使用者來通報。</li>
<li>試著推測使用者真正要找的東西("html" 打成 "htm"? 大小寫打錯?)</li>
<li>把 "熱門連結" 或是 "最新資訊" 放在 404 頁面上。</li>
<li>保持頁面簡單。使用者已經找不到他要的東西了,不要讓他更困惑。</li>
</ul><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"></div>
<li><a href="http://fab404.com/">Funny 404 Pages</a></li>
<ul><li>收集各式有趣的 404 頁面</li>
</ul>
<li><a href="http://weblogs.asp.net/jeff/archive/2009/07/01/304-your-images-from-a-database.aspx">304 Your images from database</a></li>
<ul><li>如果你的圖片不是靜態檔案,請處理 HTTP reuqest 中的 "If-Modified-Since",</li>
<li>並且適時地送出 304。</li>
</ul>
<li><a href="http://www.datalandsoftware.com/blog/2009/07/06/10-reasons-why-web-log-analyzers-are-better-than-javascript-based-analytics/">10 reasons why web log analyzers are better than JavaScript based analytics</a></li>
<ul><li>很多東西還是不能只靠 Google Analytics...</li>
</ul>
<li><a href="http://ferruh.mavituna.com/sql-injection-cheatsheet-oku/">SQL Injection Cheat Sheet</a></li>
<ul><li>整理出比較常見的 SQL injection 手法。</li>
<li>主要是針對 MySQL 與 Microsoft SQL Server 。</li>
</ul></ul><b>網頁設計</b><br />
<ul><li><a href="http://www.tripwiremagazine.com/tools/design/30-essential-tools-for-web-designers.html">30 Essential Tools for Web Designers</a></li>
<li><a href="http://guidesigner.net/casecade-style-sheet/best-tips-resources-and-tutorials-for-making-of-creative-forms-using-css/">Best Tips, Resources and Tutorials for making of Creative Forms using CSS</a></li>
<li><a href="http://eisabainyo.net/weblog/2009/07/02/some-simple-but-effective-css-rules-for-ie-6/">Some simple but effective CSS rules for IE 6</a></li>
<li><a href="http://www.queness.com/post/320/22-beautiful-icon-packs-for-web-design-and-development">22 Beautiful Icon Packs for Web Design and Development</a></li>
</ul><b>Ruby</b><br />
<ul><li><a href="http://blog.logeek.fr/2009/7/2/creating-small-unique-tokens-in-ruby">How to create small unique tokens in Ruby</a></li>
<li><a href="http://blog.rubybestpractices.com/posts/gregory/009-beautiful-blocks.html">Code Blocks: Ruby's Swiss Army Knife</a></li>
<ul><li>告訴你 Ruby 中 code block 有多好用,以及一些注意事項。</li>
</ul>
<li><a href="http://anemone.rubyforge.org/">Anemone</a></li>
<ul><li>Ruby Web Spider Framework</li>
</ul>
<li><a href="http://superjared.com/entry/ruby-daemons-using-robustthread/">Ruby daemons using RobustThread</a></li>
<ul><li>RobustThread 可以協助你寫 daemon 時必須處理 logger、exception 等問題</li>
</ul>
<li><a href="http://integrityapp.com/">Integrity</a></li>
<ul><li>Continuous Integration server (Ruby)</li>
</ul>
<li><a href="http://charlesmaxwood.com/9-resources-for-new-ruby-on-rails-developers/">9 Resources for New Ruby on Rails Developers</a></li>
</ul><b>Java</b><br />
<ul><li><a href="http://thegeekhead.blogspot.com/2009/07/top-question-asked-by-interviewers-for.html">Top Question asked by interviewers for Junior Java Developer Role.</a> - 嗯...我不會寫 Java</li>
<li><a href="http://findbugs.sourceforge.net/index.html">FindBug</a> - 靜態分析 Java 程式,並找出 bug 的工具</li>
<li><a href="http://incubator.apache.org/pivot/">Apache Pivot</a> - 用 Java 開發 RIA 的平台</li>
<li><a href="http://www.devx.com/getHelpOn/10MinuteSolution/20459/1954">Use JVM Shutdown Hooks to Optimize Resources</a></li>
<ul><li>重點:<span style="font-family: 'Courier New', Courier, monospace;">Runtime.addShutdownHook (Thread hook)</span></li>
</ul><li><span style="font-family: 'Courier New', Courier, monospace;"><span style="font-family: 'Times New Roman';"><a href="http://open-open.com/">Java 开源大全</a> - 各類 Java open source 專案的目錄</span></span></li>
<ul><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"></div></ul></ul><b>JavaScript</b><br />
<ul><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"></div><ul></ul><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"></div>
<li><a href="http://lanitdev.wordpress.com/2009/05/22/finding-real-body-height-using-jquery/">Finding real body height using jQuery</a></li>
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"></div><ul><li>IE: 建立一個暫時的 DIV,把 BODY 的東西塞進去之後再用 $().height() 取得高度。</li>
<li>其他瀏覽器: 直接用 $("body").height() 就可以了。</li>
</ul><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"></div>
<li><a href="http://jquery-howto.blogspot.com/2009/07/identifying-locating-mouse-position-in.html">Identifying & locating mouse position in jQuery</a></li>
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"></div><ul><li>用 event 的 pageX 跟 pageY 屬性取得滑鼠游標的位置。</li>
<li>搭配 element 的 offsetX 跟 offsetY 可以取得滑鼠游標在該 element 的位置。</li>
</ul><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"></div>
<li>非同步上傳檔案三部曲</li>
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"></div><ol><li><a href="http://hungred.com/2009/07/01/how-to/tutorial-easiest-asynchronous-upload-file-ajax-upload/">非同步上傳</a> - 開一個 iframe 做為 form 的 target</li>
<li><a href="http://hungred.com/2009/07/05/how-to/tutorial-determine-asynchronous-upload-completion-javascript-php/">確認上傳結果</a> - 檢查 iframe 是否包含特定訊息</li>
<li><a href="http://hungred.com/2009/07/05/how-to/tutorial-find-width-height-uploaded-image-javascript/">取得上傳成功的影像大小</a> - 利用 Image 物件取得正確大小</li>
</ol></ul><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><b>Scala</b></div><ul><li><a href="http://www.scala-lang.org/">Scala</a> - 官方網站</li>
<li><a href="http://blog.xebia.com/2009/07/03/starting-out-with-scala/">Starting out with Scala</a> - 學習 Scala 的資源</li>
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"></div><ul><li><a href="http://aperiodic.net/phil/scala/s-99/">S-99</a> - 99 道 Scala 問題,學習 Scala 的好途徑</li>
</ul><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"></div></ul><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"></div><b>其他程式語言</b><br />
<ul><li><a href="http://blog.logeek.fr/2009/7/2/creating-small-unique-tokens-in-ruby"></a><a href="http://www.lazarus.freepascal.org/">Lazarus</a> - Free Pascal 的 IDE,簡單說就是 <b>"偽-Delphi"</b></li>
<li><a href="http://www.icsharpcode.net/OpenSource/SD/">SharpDevelop</a> - 免費的 .NET IDE,支援 C#、VB.NET、IronPython、F#、Boo</li>
<li><a href="http://fandev.org/">Fan</a> - 有人說比 Scala 好的語言(出處找不到了...)</li>
<li><a href="https://prof.ti.bfh.ch/hew1/informatik3/prolog/p-99/">P-99</a> - 專為練習 logic programming (Prolog) 而設計的題目</li>
</ul><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"></div><ul><ul><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"></div></ul></ul><ul><ol></ol></ul><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><b>軟體介紹</b></div><ul><li><a href="http://blog.joaoko.net/archives/1504">重新排列工具列上視窗按鈕的位置-Taskbar Shuffle</a></li>
<li><a href="http://blog.joaoko.net/archives/1504"></a><a href="http://blog.vgod.tw/2009/07/06/chickenfoot/">Web 上的萬能瑞士刀: Chickenfoot</a></li>
<li><a href="http://www.synesketch.krcadinac.com/">Synesketch</a> - 辨識文字中的情緒並轉成圖像的軟體</li>
<li><a href="http://unkb.com/">小地方 - 免費軟體分享、交流園地</a></li>
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"></div></ul><b>工具網站</b><br />
<ul><ul></ul>
<li><a href="http://tohtml.com/">Online Syntax Highlighting</a> - 替程式碼上色(輸出 HTML)的工具網站</li>
<li><a href="http://0xcc.net/jsescape/">Text Escaping and Unescaping in JavaScript</a></li>
<ul><li>透過 JavaScript 立刻顯示各種編碼結果的工具</li>
</ul>
<li><a href="http://www.3site.eu/encode/">en-code</a></li>
<ul><li>幫你將程式碼中的 HTML 特殊字元轉成編碼的工具。</li>
<li>作者的<a href="http://webreflection.blogspot.com/2009/05/en-code-quickest-way-to-encode-your.html">文章</a>中還有 bookmarklet 版本。</li>
</ul></ul><b>其他</b><br />
<ul><li><a href="http://improvingsoftware.com/2009/07/03/an-sdk-for-your-brain/">An SDK for your brain</a> - 看起來就很有趣,好想弄一個來玩...</li>
<li><a href="http://sqlhelp.wordpress.com/2009/01/24/send-sms-using-at-command/">Send SMS using AT command</a> - AT 指令耶,好久沒聽到了...</li>
<li><a href="http://www.natpryce.com/articles/000748.html">What do Programmers Fell About their Software?</a></li>
<ul><li>利用 Synesketch 對一些專案中的註解進行情緒分析的結果。</li>
</ul></ul>--<br />
<div>終於,我把我的未讀文章清完了!!</div>WanCWhttp://www.blogger.com/profile/13751196708825083166noreply@blogger.com0tag:blogger.com,1999:blog-5743943902936820657.post-41854054792624642472009-07-01T01:56:00.000+08:002012-04-12T06:56:56.117+08:00乾淨程式碼的 4 個小秘訣原文-<a href="http://tiagofernandez.blogspot.com/2009/06/4-tips-for-clean-code.html">Tiago Fernandez: 4 Tips For Clean Code</a><br />
<ol><li><strong>寫短而簡潔的函式</strong><br />
<p>程式碼太長的後果是沒人知道這一大段東西到底在幹嘛,因而不敢(或不願意)去修正它。要怎麼判斷一個函式是否太長了呢?有個我很喜歡的簡單準則,大家可以參考一下:<br />
<blockquote>一個函式的長度不應該超過螢幕能顯示的範圍。</blockquote><p></li>
<li><strong>可以自我詮釋的變數與函式名稱</strong><br />
<p>變數或是函式的名稱應該要清楚地說出變數與函式的用途。現在的編輯器都支援<u>名稱提示</u>與<u>自動完成</u>的功能。不要為了想少打幾個字,而取那種過了一個星期之後連你自己都不知道是什麼意思的式名稱。</p></li>
<li><strong>只寫恰當的註解</strong><br />
<p>註解裡面只要指出程式碼裡面沒有的東西(參數格式、呼叫此函式前應該被滿足的條件等...)就好了。最好可以搭配一些文件產生工具(如 javadoc)自動地產生說明文件。</p></li>
<li><strong>保持程式碼易讀好懂</strong><br />
<p>不要用一些奇技淫巧來賣弄你的程度,因為日後可能連你自己都看不懂你在寫什麼。遵守 <em><a href="http://en.wikipedia.org/wiki/Keep_it_simple_stupid">"KISS" (Keep It Simple and Stupid)</a></em> 與 <em><a href="http://en.wikipedia.org/wiki/Don't_repeat_yourself">"DRY" (Don't Repeat Yourself)</a></em> 這兩個原則,自然就可以寫出易讀好懂的程式碼。</p></li>
</ol>--<br />
繼續用轉錄翻譯文章來充版面...WanCWhttp://www.blogger.com/profile/13751196708825083166noreply@blogger.com0tag:blogger.com,1999:blog-5743943902936820657.post-89440583187584313722009-06-17T04:15:00.009+08:002012-04-12T06:56:56.295+08:00Haskell 版分贓程式剛剛把<a href="http://blog.darkthread.net">黑暗執行緒</a>的<a href="http://blog.darkthread.net/blogs/darkthreadtw/archive/2009/06/11/about-money-distribution.aspx">分贓程式</a>改用 Haskell 重寫。<br />
演算法其實很簡單,就是不要先除完再來調整,而是一次算一個整數出來就好了。我覺得還蠻適合用 list 的概念來做所以拿來當作練習題目。<br />
另外,我也嘗試在這段程式碼中練習 <a href="http://en.wikipedia.org/wiki/Tail_recursion">Tail Recursion</a>。<br />
<br />
一開始的版本因為少了那兩個 <b>toRational</b> 害我花了好多時間除錯...應該要花時間好好研讀一下 Haskell 的型別系統了。<br />
<br />
程式碼如下:<br />
<script src="http://gist.github.com/130861.js"></script>WanCWhttp://www.blogger.com/profile/13751196708825083166noreply@blogger.com1tag:blogger.com,1999:blog-5743943902936820657.post-18379560470835424052009-06-09T21:18:00.000+08:002012-04-12T06:56:56.045+08:00本部落格的 feed 搬家基於我個人的潔癖,這個部落格的 feed 將換到 <a href="http://feeds2.feedburner.com/wancw/blog">http://feeds2.feedburner.com/wancw/blog</a><br />
舊的 feed 預計在 6 月底停用。WanCWhttp://www.blogger.com/profile/13751196708825083166noreply@blogger.com0tag:blogger.com,1999:blog-5743943902936820657.post-57214907296122428432009-06-07T04:44:00.006+08:002012-04-12T06:56:56.162+08:00命名的準則:關連性以下是 <a href="http://blog.rubybestpractices.com/posts/judofyr/symmetry.html">Name that method: Symmetry</a> 的摘要:<br />
<br />
我們已經知道要把相關的程式碼或概念放在相關的地方。<br />
所以我們會把程式切成類別與模組,也用相同的準則去管理程式檔案與目錄。<br />
然而比較少被提及的是:命名 method 時也可以依循類似的準則。<br />
<br />
文章中以 Merb、Rails 3 作例子。<br />
同樣的一組功能在 Merb 叫作 <span style="font-family: 'Courier New', Courier, monospace;">provides/display</span>,<br />
在 Rails 3 中則是 <span style="font-family: 'Courier New', Courier, monospace;">respond_to/respond_with</span>。<br />
若你從沒用過這兩個 method,<br />
Rails 3 的命名方式應該可以讓你一眼就看出兩個函式是相關的。<br />
所以<b>請替相關的 method 取相關的名稱</b>。<br />
<br />
文章中還有提到另一種不好的命名方式:<br />
Camping 提供兩個同名的 method 作相反的事情。<br />
<br />
註:上述 <a href="http://merbivore.com/">Merb</a>、<a href="http://rubyonrails.org/">Rails</a> 和 <a href="http://camping.rubyforge.org/">Camping</a> 都是 Ruby 的網頁應用程式框架。<br />
<br />
--<br />
後記:<br />
最近這個 Blog 好像都靠轉錄或翻譯文章來充數。<br />
另外,硬要全部都寫中文實在太痛苦了,<br />
以後還是不要做這種蠢事好了。WanCWhttp://www.blogger.com/profile/13751196708825083166noreply@blogger.com0