有時上網；電腦用一用常常會忘記時間的流逝。

KuKu Klock 提供了線上鬧鐘的服務，操作相當簡單，易用。

DOM 操作範例

下拉式選單

要在 select 或是 dropdown 元件中加入新的項目：

optionItem = new option(text, value, defaultSelected,
                         selected)

或是

  var opt = document.createElement(‘option’);
  opt.value=value;
  opt.text=text;
  select.options.add(opt, index);

動態建立表格

下面的程式碼示範如何取得表格目前的列數（row）。
若是表格目前沒有任何一列，則設定為 0。

   var lastRow = tbl.rows.length;
   var row = tbl.insertRow(lastRow);
   var cellLeft = row.insertCell(0);

接著下面示範如何動態加入表格內容：

  var totalRows='1'; //假設要完成的總列數為 1 列
  var totalCols='2'; //            總行數為 2 行
  var intRow;
  var intCol;
  for(intRow=0;intRow<totalRows;intRow++)
  {
     var row = tbl.insertRow(intRow);
     for(intCol=0;intCol<totalCols;intCol++)
     {
        var cellLeft = row.insertCell(intCol);
     }
  }

TextArea

下面示範如何動態建立一個文字區塊，並設定列數和行數

  var sample=document.getElementById('sample');
  var el = document.createElement('textarea');
  el.id="sample";
  el.rows=20; // 列數
  el.cols=20; // 行數
  el.style.backgroundColor="#FFFFFF";
  el.style.width="120px" ;
  el.style.height="120px";
  sample.appendChild(el);

動態加入文字

利用 text node 來加入文字內容：

 var textNode = document.createTextNode('hi');
 document.appendChild(textNode);

線上影音轉檔服務

現在越來越多的網站提供多元化的服務，也許哪天真的硬碟裡甚麼軟體都不用安裝，只要裝個網路卡驅動，加上瀏覽器就好了。

Movavi Online Video Converter 就提供了免費的線上合併、轉檔的服務，支援相當多的格式，並能直接將轉檔合併好的結果寄送到指定的 EMail 信箱，相當的方便

將排版後的程式碼轉換成 HTML 輸出

藉由 Hightlight Code Coverter 可將一般 IDE 或程式碼編輯器撰寫好的程式，轉換成 HTML 的輸出，並維持排版以及 highlight。

一個應用是用來貼在目前不支援程式碼 highlight 的 Blogger 上。

不要在伺服器上儲存圖檔了

利用 The data: URI kitchen 吧。 產生的字串類似：

var src="<a href="data:image/png,%89PNG%0D%0A%1A%0A%0DIHDR
%10%08%06%1F%F3%FFa%02%A4IDAT8%8D%A5RMkSA%14%3Do%E6%E5%7D%A4I
%8CIj%954j%2B%ADE%B1-%B8%90%AA%20%A2%B8%90%20%8A%8B%82hWn%0AU
%04%C5b%DDt%A5%9B%FE%02%B1%08BtQp%A1%2B7B%09%8A%18%85%12%84BA
lMJcb%9A%F7%F2%F1%5E%DE%D7%8C%8B%B4%86%D0%EE%1C%18%98%7B9%9Cs
%E6%DE%23p%CE%F1%3FG%DC%B5%BB0%28%C1%2C%9D%E5%9C%F7%0B%02L%10
%FA%197%CB%3Fv%83%0A%1D%0E%DE_%26%CE%EA%C7%7B%96%D5%F3%98%85O
F%B8%BC%1F%E0.%88%B1%02Z%FD%B6%A8F%D8%5Dab3%BB%2B%01%7Bw%81%D
8%3F3%AF%EC%E0%A5qq%28%09%A2%86A%A3%87a%D6*%F0%D5%F2%60%D5%02
%BC%EF%CF%1A%FE%60%E9%8Ax%5B%FB%B0M%40%B6%1FN%EE%EB%03%5B%19%
1B%97%8E%9E%83%E4%AFC%8A%8A%F0%25FQ%A6a%C8A%1DRT%01%3D%3E%D1%
D5%D4%D4%05w%BE%BB%BB%83%C0%99%EFU%1D%2B0%A3%0C%9D%82%1C%D2%2
1%8A%1A%08%ABoA%18%08%D7%E0%93u%A8%FB%1C8%13q%1B%F6%FD%0E%02%
D6%AC%9D%27%D1%81%3D%BE%80%01%C1%D1%5B%03%DCF%0B%C1%19%60i%80
%A5%810%1Dj%7F%02%9E%A7%5C%ED%D8%02s1%E0%8B%86%218U%60%7B%A6%
96%DE%D2w%9B%40%23%0F8%3A%40%7C%A0r%0Fh%28r%04%F5%1C%10Hl%AD%
END%AEB%60%82</a>

直接利用

var icon=document.createElement('img');
icon.src=src;

即可（注意 IE 不支援）

escape、encodeURI、encodeURICompoent 方法的差異

最近在進行一個小的 FF Greasemonkey project。發現用 encodeURI 後在 POST 出去的資料只要遇到 < 符號就會被截斷，直覺上就是編碼的關係。 查了一下 Google，才發現 escape、encodeURI、encodeURICompoent 方法上的差異（可參考 http://xkr.us/articles/javascript/encode-compare/）

• escape： 採用 ISO Latin 字符集對指定的字符串進行編碼。所有的空格符、標點符號、特殊字符以及其它非 ASCII 字符都將被轉化成 %xx 格式的字符編碼（xx 等於該字符在字符集表裡面的編碼的 16 進制數字）。比如，空格符對應的編碼是 %20。unescape方法與此相反。不會被此方法編碼的字符： @ * / +
• encodeURI： 把 URI 字符串採用 UTF-8 編碼格式轉化成 escape 格式的字符串。不會被此方法編碼的字符： ! @ # $& * ( ) = : / ; ? + '
• encodeURIComponent： 把 URI 字符串採用 UTF-8 編碼格式轉化成 escape 格式的字符串。與 encodeURI 相比，這個方法將對更多的字符進行編碼，比如 / 等字符。所以如果字符串裡面包含了 URI 的幾個部分的話，不能用這個方法來進行編碼，否則 / 字符被編碼之後 URL 將顯示錯誤。不會被此方法編碼的字符： ! * ( )

王建民成長紀實影片

元智學生座位配置 [By using floor planner]

元智學生在實驗室的位置配置圖

常用的 FF 套件

趁著拿到 X61 資料移轉的機會，把我常用的 FF 套件整理如下：

• PMOG：將普通的網頁瀏覽的動作變成一種社交性質的遊戲
• IE Tab：從此擺脫 IE 的監牢
• FireGesture：好用的滑鼠手勢
• Adblock Plus：擺脫彈出式的廣告
  • Adblock Filterset.G Updater：定期更新的列表；搭配使用
• NoScript：擋掉網站的 script
• Easy DragToGo：拖拉某段文字在新分頁中開啟
• All-in-One Sidebar：整合型的側邊工具列
• Zotero：取代 EndNote 的工具
• TinyPaste Uploader：快速分享大量文字的好方法
• TinyUrl Creator：建立網址縮址的工具
• PCMan Plug-in：上 BBS 用
• 新同文堂：簡繁互轉
  • 安裝時遭遇錯誤訊息：「不相容的擴充套件，因為此元件未提供經由加密連線的更新」(Does not provide secure updates)
  • 解決方法：
    1. 網址列輸入「about:config」
    2. 滑鼠按右鍵，新增「真假（Boolean）值」
    3. 名稱輸入：extensions.checkUpdateSecurity
    4. 真假值的值，選擇 false，重新啟動 Firefox 即可順利安裝擴充套件
• Speed Dial：利用快速鍵 1-9 開啟網頁的工具
• Greasemonkey：支援多種加強瀏覽功能的 script 引擎
  • Better Gmail 2
  • Better GReader
• Aardvark：修改網頁內容用
• Remove It Permanently：修改網頁內容用
• Evernote Web Clipper：筆記工具
• Tab Catalog：檢視開啟的所有分頁於單一頁面中
• Organize Status Bar：幫助您移除不必要的狀態列圖示
• Download Statusbar：取代預設的下載管理員
• Menu Editor：幫助您移除不必要的右鍵選單項目
• Organize Search Engines：管理您的搜尋引擎
• Add to Search Bar：將搜尋引擎加入到 FF 裡
• Context Search：選取文字後直接選擇要用哪個搜尋引擎搜尋
• PicLens：瀏覽網路上圖片及影像的超炫套件
• Read It Later：記錄以後才想看的網頁
• dragdropupload：支援利用拖拉方式指定上傳檔案的欄位
• View Dependencies：檢視網頁跟哪些網站有相依性
• ColorZilla：網頁取色工具
• DownloadHelper：下載內嵌在網頁中的各種影像、圖片。現在也支援將下載後的檔案，轉換為特定的格式；如將 FLV 轉成 mp4
• Abduction!：將網頁轉存成圖檔
• ScribeFire：離線編輯部落格工具
• Tab Kit：分頁管理
• Wired-Marker：替網頁加上註記
• FoxyTunes：利用 FF 直接控制撥放軟體（支援 Yahoo! Media Player）
• MeasureIt：量測 HTML 的 pixel
• Clipmarks：即刻複製、分享選取的網頁內容
• CustomizedGoogle：客制化 Google 的搜尋結果
• DownThemAll!：批次下載連結
• Fireshot：擷取畫面，並且加以注記
• Gmail Space：把 GMail 當作免費空間使用
• Hide Menubar：隱藏選單列
• iMacros for Firefox：讓 FF 自動化的做某些制式動作
• Image Zoom：隨意放大、縮寫網頁上的圖片
• Stop-or-Reload Button：將停止跟重新整理的按鈕合併
• TableTools：讓我們可以對網頁上的任意表格啟用排序等功能
• Taboo：依據日期將網頁加入稍後再讀的列表
• ViewSourceWith：指定用順手的外部編輯器檢視原始碼

Bookmark Tools

• Delicious Bookmarks：存取在 delicious.com 上的書籤
• Foxmarks Bookmark Synchronizer：利用伺服器分散同步不同電腦上的書籤
• StumbleUpon：隨機您推薦有趣的網站

Developmenet Tools

• DOM Inspector：檢視網頁 DOM tree 的工具
• Firebug：網站開發除錯工具
  • YSlow：搭配 Firebug 檢查網站開啟緩慢的原因
  • Firecookie：檢視管理網站的 cookie
• HTML Validateor：HTML 標準檢測
• Pencil：協助您快速建立程式的 prototye
• Web Developer：好用的 HTML、CSS、JavaScript 等資訊檢視工具
• Live HTTP headers：檢視送出的 HTTP 標頭資訊
• RefControl：修改送出的 HTTP Referer 標頭資訊
• Poster：直接指定送出的 HTTP POST 方法內容

Privacy Information

• InFormEnter：快速填寫表單
• Sxipper：好用的密碼管理工具
• FEBE：FF 設定組態、密碼等備份工具 [參考]
  • CLEO：將 FEBE 備份打包成單一安裝檔

網頁時光機

這個網站讓我們可以重溫以前的舊網頁...

下面都要選用「Big5」編碼文字才能正常顯示

• 1998 年的東海大學首頁：那時候的我才剛進大學。HTML 4.0 才推出不久，還記得暑假的時候拿了一本 HTML 的語法書試著用記事本在章魚網（1998）上製作第一個個人網站；現在連帳號密碼都忘了...
• 奇摩站 kimo：那時候必逛的奇摩...現在已經變成 Yahoo 奇摩了
• 2000 年的史萊姆的第一個家：大學時另一個必逛的軟體下載網站；到現在還持續存活，而且，版面也都維持一樣，真是「很厲害」（2007 年的史萊姆和現在的史萊姆）
• 1997 年的中央研究院
• 1996 年的清華大學

人都是念舊的...看看這些東西喚起一些遺忘的回憶

I Can Has Cheezburger?

玩 pmog 的好處就是會經由 portal 轉換到你可能從來不曾去過、或是想去逛的網站。這圖是從 pmog 的 Badges. We has them Badge 來的。這部落格裡充滿了許多可愛的動物相片（超 cute）

更多喵咪的相片：點我