October 9, 2008
近期心得
我想我是個很理想化，但又不夠聰明的人。有許多的機會在那兒等著我去掌握，但我常任其流去，徒留遺憾。
離職後的這幾個月，我開始了我個人的系統計畫。在過去煩悶地上班、下班無意義地遊樂的生活中，常常在思考「為什麼現在在用、在開發的系統這麼不人性？這麼沒有彈性？」當然，這是指過去上班時公司主要在用的那套系統。
為了將所有資料解構，就必須先知道資料的共通點。這是 system 'node' 的出發點：掌握資料的共通點，解析為不同種類的 node，再將所有的 node 如堆積木般地組合、堆疊起來，最後成為一個完整的系統。這種概念來自 Unix：小功能的組合，以完成大型功能。
然而，在網站系統（實際上，我相信在其他領域亦同，尤其是硬體）的設計上，這樣的系統通常會被視為「瑣碎」且難以整理。因此由幾種 node 可整合成一種 node group，再將此 node group 的設定方式以人性化方式打包，便能成為一個便利的互動介面。雖然這樣的互動介面，也間接犧牲了某些 node 的特性，但 node group 與 node group 彼此間又能以同樣方式互動，也產生了專屬於 node group 的屬性。此時將 node group 也視為一個 node，此 node 與其他同級的 node 再組合成更大、功能性更專一的 node group...像細胞一層層地群聚組合，最後組為器官、器官之上的系統，系統構成的生物體這樣一層層建構上來的，就是我的 system 'node'。
有這樣的構想，加上已不用打卡上班，給自己兩三個禮拜重新整理房間與心情後，與美術設計朋友們開始合作，每天到他家報到，著手規畫、設計這套系統。
構想有了底，開始撰寫系統時，也給自己訂下幾個系統開發原則與走向。然而，這樣的走向，相當於將我這三年來工作的程式設計經驗通通拋到腦後。模板、完全 CSS 取向，以及各種 node 的解構分析等等，三年來在那公司經手寫過的程式，沒有一樣有達到這些水平（大概只有那個用 VB 6.0 開發，內容混亂至極的電話值機系統客服端能相比。）為了讓美術設計的朋友未來能銜接這套系統的美術設計，在剛開始合作的期間，硬逼他開始接觸 HTML & CSS，用 Dreamweaver CS3 把他的公司網站給寫出來了。一個程式設計師要求美術設計師別再用業界舊方法設計版面，改以 CSS 進行設計，的確讓他吃足了苦頭，因為已經習慣的舊觀念相當難打破。他能打破這些觀念，在我看來是擁有十足的勇氣，而他也真的做出成績了。
但此時，輪到我開始卡住了。
在舊公司上班時，已經相當習慣使用當時系統的函式庫來節省時間，流程概念也被定死了。因此，在沒有舊公司函式庫支援的情況下，相當於要重新學習，重新建立觀念，以及最重要的：有自己的一套寫作方式以及函式庫。當這些一應俱缺時，「要敲下什麼鍵作為完成想法的開始」竟然成為一道高牆，阻隔在「我」與「想法」之間。「這樣寫是對的嗎？會不會寫到後面發現問題太多要重修？」「有沒有更簡便的寫法？」等等雜念常常浮現，令人心煩意亂，無法專心。
開發卡住，代表著另外一層意義：外來的壓力紛湧而至。房租、電費、網路費等等使得錢包快速變輕（前陣子還弄丟了一個錢包，）每個關心我的人都在問系統開發進度，家人也擔心我沒賺錢吃不好營養不良。在這期間，兩個案子無疾而終，也令我陷入更深層的憂慮中。
但我得坦承一點：在看過海角七號後，我重拾對自己的信心。電影中的每個人物都有自己的故事，但他們都有自己的理想，而且掌握住機會，燃燒自己的熱血，投入自己喜愛的事物中。雖然是小人物，雖然都有自己的煩惱與過去，但努力、把握當下向前行，總有一天能看見引頸期盼的彩虹。
回過頭來檢視自己的現況：其實現在初期系統幾個關鍵性的 node 已經完成，目前進度已經到了開始整合 node 成為 node system 的階段。在案件處理上，幾次與朋友促膝長談的結論，我也調整我對接案的金額、心態與應對方式。
我不會放棄我對 system 'node' 的開發，也不會因為案件不順利而喪氣。女友的支持，美術設計界朋友們給于的協助，以及家人的期待，銘感五內。
家人曾幫我算過命，說我三十歲時會遇到貴人。
我真的遇到了，而且不止一人。
三十歲的奮鬥之路，在你們的陪伴下，我會抬頭挺胸，繼續朝著理想、朝著我人生的彩虹彼方走去。
September 30, 2005
語錄（1）
「美工人員為了畫面美觀而造出的慘烈 html 語法，是壓死網頁程式設計師的最後一根稻草。」
以上，致所有有心走網頁美工排版的美工朋友。
請你們在用強大的 DreamWeaver 做完美麗的版面後，關掉 DreamWeaver，開啟記事本，將那些要交給網頁程式設計師放程式碼的網頁內 html 碼縮個排吧！你們的一點細心，是讓我們這種最容易過勞死、肝病死、心血管疾病死掉的資訊人能活久一點的救贖…
September 28, 2005
javascript 中檢查輸入值是否為空
資料來源：CodeToad.com : Javascript Form Validate Empty Field function
example:
function IsEmpty(aTextField) {
if ((aTextField.value.length==0) ||
(aTextField.value==null)) {
return true;
}
else { return false; }
}
檢查兩項：value 的長度與內容是否為 null。只要滿足其中一個條件便可認定為無值。
在同一頁下方，有人提出更強力的檢查：
function isEmpty($mytext) {
var re = /^\s{1,}$/g; //match any white space including space, tab, form-feed, etc.
if ((mytext.value.length==0) || (mytext.value==null) || ((mytext.value.search(re)) > -1)) {
return true;
} else {
return false;
}
}
不過，前端用 javascript 檢查，後端一樣要用程式檢查，以防 cracker 與 javascript 未能檢查到（或關閉 javascript）空值。光是靠瀏覽器的 javascript 檢查是不夠的…
September 12, 2005
再度被 IE 打敗
好不容易把可以無限階層的選單項目寫出來了（啊，這是 PHP 去 database 抓資料做下拉式選單啦），然後想說用 javascript + CSS 去控制下拉式選項可以選擇的項目。最後寫出來了，在 Firefox（Deer Park alpha2）跑起來完全沒問題，我很滿意。可是一到 IE …為什麼所有的項目都跑出來了！？
簡單地說，我在 <option> 中寫了「style="display :block" 」，準備拿來用 javascript 進行 block ←→ none 的切換來控制可選擇的項目，但試了很久就是無用。最後終於在網路上找到答案：IE 的現行版本（4,5,5.5,6）沒一個有支援 <select> 與 <option> 的 CSS 語法處理，sh*t！
我要再罵一次腦殘的 M$ 員工！對 CSS 的支援這麼差，是要我們這種寫程式跟寫網頁的程設（美工）去撞牆嗎？混蛋～～～！然後那個口口聲聲說要出的 IE7 竟然不能在 Windows XP 以前的 Windows 上跑，你們當每個人都有那個閒錢去買一套 WinXP 回家殘害自己的電腦嗎？混蛋！
要不是為了 case，為了什麼都不懂的客戶，誰要用這種既不安全又爛到家的瀏覽器啊？sh*t!
罵完了，繼續趕 case.....
September 3, 2005
我不會寫程式
說不會寫也不對，因為我會寫。
然而，在公司寫程式，用公司內系統函式庫寫久了，真正自己動手寫函式時反而覺得綁手綁腳。因為自己的環境清一色都是 PHP5（公司系統仍用 PHP4），我開始以 OOP 撰寫程式，一開始寫時沒想太多，都是用以前 PHP4 時的物件導向概念來寫，但中途翻書一看，發現 define constructor & destructor 的方式不同，回過頭來一改，又將手上的程式翻改一大半。然後在寫 SQL 語法時，不確定資料庫中日期範圍的查詢方式如何，又花了不少時間在翻文件（英文）跟測試上...
也許我真的不會寫程式吧。也可能只是在轉型的過程中接連遭遇困難，一時間難以適應而已。要是跳不過這些火山，我自學程設的白日夢大概也可以醒了...不行，這不是夢，這是我的生活。生活的動力不可放棄呀！
PS. 為什麼會生這篇出來呢？因為我又遇到困難了。用寫作轉移（逃避）問題，真是糟呀 :(
November 21, 2004
網頁嵌入多媒體物件的標準作法
本文是在 Sayya 資訊站幾個個人板中的資料抽取而出，僅紀錄我會忘的部份。
如果要讓所有現代的瀏覽器可讀 (Internet Explorer、Firefox、Mozilla、Safari、
Opera)，應使用標準語法： <object type="video/x-ms-wmv" data="資料來源">。
這裡有範例
使用類似 <object classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"> 的語法，會讓非 IE 瀏覽器（如 Mozilla、Safari 等）無法辨認。
March 20, 2004
XHTML 1.0 網頁設計需知
本篇是翻譯自 Casey Kochmer 的「USING XHTML IN JSP, ASP AND PHP WEB SITES」一文。因該文原網址已遺失，我只貼上我之前看完後稍加整理的部份。
原則：
- HTML 標籤統一用小寫，千萬別動到大寫英文字母。
ex. 錯誤的示範：<P>,<TABLE>
（印象中某 M 牌出品的「前頭頁」會犯這種錯誤）
ex. 正確的示範：<html>,<p>,<div>
（印象中另一個 M 牌出品的「織夢者」會自動用這個正確用法） - 別亂擺 HTML 標籤。有的瀏覽器還是可以看到正確內容，但在 XHTML 中可是會出問題的。
ex. 錯誤的示範：<form action="test.htm">
很明顯地，</form> 放錯地方了，但有的瀏覽器還是排除萬難秀出了表單。通常只有手賤的網頁設計者才會犯這種錯誤。
<table>
<tr><td>hi
</form></td></tr>
</table>
ex. 正確的示範：<form action="test.htm">
很明顯地，這次都放對了地方，也能確定所有的圖形介面瀏覽器都讀得到正確的表單。用網頁編輯器的，或是細心一點的網頁設計師都辦得到。
<table>
<tr><td>hi</td></tr>
</table>
</form> - 所有屬於該標籤的屬性，其指定值一定要加雙引號。
ex. 錯誤的示範：<form action=test.htm>
action 這個屬性，其指定值 test.htm 應當用雙引號括起來。
ex. 正確的示範：<form action="test.htm">
看！被雙引號括起來的 test.htm 是符合 XHTML 規定的指定值了，很棒吧！ - 所有的標籤都是封閉性的。
ex. 錯誤的示範：
<p>這是一段示範
<p>標籤門戶大開，不合 XHTML 規格；<br> 雖然看起來合法，但我們還是需要他自閉（？）來滿足 XHTML 規格。
<br>一段錯誤的示範
ex. 正確的示範：<p>這是一段示範<br />一段正確的示範</p>
標籤要有頭有尾，這是一定要的原則。至於像 <br> 啦，<input> 這種本來就是單獨存在的標籤呢？當然你可以再加個 </br> 或 </input> 把內容給關起來，只是有人研究過單獨用 <br /> 跟 <input />會讓網頁處理速度快一點（吧？） - 在一個標籤中，同樣的招式不能對聖鬥士使用兩……同樣的屬性不能出現兩次。
寫法：
- 第一行一定要是這個標籤：<!DOCTYPE>！（註）
這個標籤將告訴瀏覽器這個網頁是如何描述 XHTML 規格。有下列三種：- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""DTD/xhtml1-strict.dtd">
若要寫一個「純」XHTML 的網頁，請用這個。 - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
若要寫個能與大部份 HTML 4.01 相容（就是一般常見的舊網頁標準）的網頁，請用這個……大概也只會用這個了吧 XD - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "DTD/xhtml1-frameset.dtd">
若要寫一個有框頁的網頁，請用這個。
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""DTD/xhtml1-strict.dtd">
- 第二行一定要用 <html> 這個標籤，並在裡面加上 xmlns 這個屬性。
例子：<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8" lang="utf-8">
上面的 xmlns 是指 XML 文件（以後有空再去了解吧）使用的腳本（大概是這樣解釋的吧…有錯再來改）是 http://www.w3.org/1999/xhtml（別亂改）， 而這個 XML 文件（好啦，XHTML 是 XML 的一種）用的語言是萬國碼（utf-8）。 - 在 XHTML 中一定要加入 <title> 這個標籤。
例子：<html>
<head>
<title>網頁標題</title>
</head>
<body>
- <form>標籤一定要有一個 action 屬性，指定接收資料的網頁。
例子：<form action="test.html"></form>
- 關於網頁上與樣式∕排版有關的標籤，如 <font>、<center> 等等都不該再使用，改以 CSS 語法設定。
- 所有文字內容都要包在標籤內。
例子：<p>我被包圍啦</p>
如上例，「我被包圍啦」被 <p> 與 </p> 包圍，就符合 XHTML 的規格。 - 所有行內標籤內都不能含有區塊標籤。
例子：<a href="http://www.w3.org">
超鏈結標籤<a>是個行內標籤，不能將區塊標籤<table>給包起來。
<table>
<tr>
<td>這是個完全錯誤的例子</td> </tr>
</table>
</a> - 所有的 <img> 標籤都要有個 alt 屬性，作為圖檔的說明。例子：
<img src="http://www.istudio.idv.tw/pic/tux-small.gif"
這樣一來，使用文字瀏覽器或圖讀不出來時，就會出現打給 alt 屬性的內容，最起碼可以讓人知道這張是在這裡是要秀什麼的。
alt="Tux，電腦界的救星，拯救長年被 M$ 帝國壓榨的可憐電腦使用者" /> - 所有的 <style> 標籤都要有 type 屬性。
例子：<style type="text/css">
這樣使用 CSS 語法，可以讓整個背景變成黃色，只要不用底圖的話。
body {background-color:yellow;}
</style> - 以前的 HTML 語法允許屬性的指定值單獨存在，現在不行了。要使用這個指定值，就用同名的指定值當作屬性。
例子：<input type="checkbox" value="公雞" checked>公雞
在以前（HTML 4.01 規格）中，這樣做時會出現一個已經勾選的 check box（勾選框），但在 XHTML 中我們要改成這樣：<input type="checkbox" value="公雞" checked="checked" />公雞
- 使用 <script> 標籤時最好將 script 內容另外以檔案呼叫進來。例子：
<script type="text/javascript" language="Javascript"
這個例子中，是將 javascript.js 這段 javascript 抓進網頁中。當然，這樣子並非完全符合 XHTML 規格，但你不會想知道合乎規則的寫法的 XD
src="javascript.js"></script>
以上兩大項目，給大家參考，也給我自己速查 :-)
<?xml version="1.0" encoding="Big5"?>
「version="1.0"」表示這是依循 XML 1.0 規格，「encoding="Big5"」表示這份文件的文字編碼為大五碼（正體中文）。
March 19, 2004
Moziila 1.7beta
Mozilla 1.7beta 的新功能不少 :-)
不過我很懶，所以只說瀏覽器的部份：
- 檔案大小變小、執行速度更快
- 看過把滑鼠右鍵功能表鎖住的網頁吧？現在可以在設定中關掉這段 javascript，恢復右鍵的功能
- 列出本地端檔案列表時，可以依檔案關聯性顯示代表的 icon
- 密碼管理員可以顯示記憶下來的密碼，不過必需要以「主密碼」（Master Password）
- 現在可以在喜歡的圖上使用「設為桌布」的功能了！
- Linux GTK2 版本的介面可以套用 Gnome 的佈景主題
- Cookie 管理功能重製
- 日期管理更精確。（In fact, I don't know what this feature does :P ）
不過，最讓我興奮的是下面的 Under the Hood：CSS3 的 opacity 功能正式納入支援了！這麼一來，網頁中就可以使用透明區塊，網頁設計魔術又有得玩了 :-)
等到 1.7 正式 release、FireFox 也正式支援 opacity 後，就來設計更有趣的版面。
March 10, 2004
CSS Menu on Mozilla Firefox works!
過去曾經說過，CSS Menu 在 Firebird 中似乎仍然無法正常使用。但剛剛用 Firefox (Debian GNU/Linux offical package) 測了一下 Eric A.Meyer 的 Pure CSS Menus，發現上面的鏈結已經可以正常使用了！
這麼一來，我就可以把我的版面再改得簡潔一點。Mozilla Team 太棒啦
中文版的 Mozilla Firefox 請到 Piaip 的 Mozilla 正體中文化官方網站下載。
February 24, 2004
DevEdge 裡的好東西
在 DevEdge 發現 Multibar，可直接在 Sidebar 中開啟該鏈結的 bookmark 查詢相關語法，包括 XSLT 1.0、CSS 2.1 與 Javascript 1.5！
這個 bookmark 只能在 Mozilla、Firefox 與 Netscape 7.x 中使用。還在用 IE？快換掉吧！ :-)
