網頁開發 on G. T. Wang

Google AdSense 廣告放送量受限問題記錄

Sat, 02 Jan 2021 10:52:15 +0800

這篇是本站的 Google AdSense 廣告出現「廣告放送量受限」問題的處理過程記錄。

就在 2021 年的第一天，收到這則 Google AdSense「廣告放送量受限」的通知，難得放假休息還要處理這種事。:(

VTK.js 網頁顯示 DICOM 3D 生醫影像程式開發流程教學

Tue, 17 Dec 2019 14:57:35 +0800

本篇介紹如何使用 VTK.js 在網頁上顯示三維的 DICOM 生醫 volume 影像。

VTK.js 是 JavaScript 版本的 VTK 函式庫，架構與概念都跟傳統的 VTK 函式庫非常類似，而且功能也都非常齊全，用來再往業上顯示 3D 的科學或生醫影像非常好用。

Ubuntu Linux 安裝 Laravel + Nginx + MariaDB 開發環境教學

Sun, 13 Jan 2019 16:32:56 +0800

本篇介紹如何在 Ubuntu Linux 18.04 的環境中，安裝 Nginx 網頁伺服器、MariaDB 資料庫，打造簡單實用的 Laravel PHP 架構開發與佈署環境。

安裝 Laravel 相依性工具

在安裝好 Ubuntu Linux 18.04 之後，首先更新一下系統的套件：

Angular 網頁應用程式 Hello World 教學

Wed, 17 Oct 2018 15:41:06 +0800

本篇介紹 Angular 網頁應用程式的 Hello World 程式。

安裝 Node.js、NPM 與 Angular CLI

開發 Angular 應用程式需要 Node.js 8.x 與 NPM 5.x 以上的環境，先安裝最新的 Node.js：

# 安裝 Node.js
sudo apt-get install nodejs

再安裝最新的 NPM：

PhotoSwipe 畫廊函式庫，網頁展示照片

Fri, 04 May 2018 16:20:06 +0800

本篇介紹如何使用 PhotoSwipe 畫廊函式庫，建立好用的網頁看圖介面，方便電腦與手機使用者在網頁上瀏覽圖片。

PhotoSwipe 是一套開放原始碼的 JavaScript 畫廊函式庫，可以讓我們在網頁中建立直覺的看圖介面，方便瀏覽大量的圖片，而且也支援手機的觸控操作，是一套很不錯的圖片展示工具函式庫。

React 入門教學與 Hello World 基礎範例

Wed, 28 Mar 2018 07:19:05 +0800

本篇是 React 這套 JavaScript 函式庫的入門教學，介紹如何使用 React 開發互動式的網頁應用程式。

React 是 facebook 官方所維護的開放原始碼 JavaScript 函式庫，可以降低互動式網頁應用程式開發難度，自動處理各種複雜 UI 組件與資料間的連動關係，改善應用程式執行效能。

JavaScript 實作簡易網頁表格資料搜尋與篩選功能

Wed, 14 Mar 2018 08:53:17 +0800

這裡介紹如何在網頁中加入簡單的 JavaScript 程式碼，讓表格擁有基本的資料搜尋與篩選功能。

在設計網頁時，若遇到表格資料比較多的情況，可以適時加入輕量化的 JavaScript 程式碼，讓表格具有簡易的資料搜尋與篩選功能，讓使用者更方便尋找資料，而這種做法不會使用到 jQuery 等大型函式庫，對於整個網頁的效能幾乎沒有影響。

Coinhive 網頁 JavaScript 挖礦程式使用教學

Tue, 19 Dec 2017 19:57:29 +0800

這裡介紹如何使用 Coinhive 建立一個挖礦網頁，以網頁瀏覽者的電腦 CPU 進行挖礦。

加密貨幣（Cryptocurrency）是現今非常熱門的話題，以往大家都是使用自己的 CPU 或 GPU 來挖礦賺錢（例如 MinerGate），而現在已經有使用 JavaScript 實作的挖礦程式出現，可以直接放在網頁上，使用網頁瀏覽者的 CPU 挖礦。

解除 PHP 上傳大檔案限制，修改 php.ini 設定檔

Thu, 24 Aug 2017 09:57:08 +0800

這裡介紹如何修改 php.ini 設定檔，解除 PHP 上傳大檔案限制。

編輯 PHP 的 php.ini 設定檔，放寬檔案上傳大小相關的設定：

; 上傳檔案大小上限（單一檔案大小）
upload_max_filesize = 50M

; POST 大小上限（所有檔案大小加總）
post_max_size = 200M

; 記憶體用量上限
memory_limit = 512M

這三個設定值可以依照自己的需求來調整，大原則就是「記憶體用量上限」一定要比「POST 大小上限」更大，而「POST 大小上限」則要比「上傳檔案大小上限」更大，也就是這樣：

網頁 input 使用 accept 限制上傳檔案類型

Wed, 23 Aug 2017 15:36:27 +0800

這裡整理了一些網頁 <input> 上傳檔案時，使用 accept 限制上傳檔案類型的用法與範例。

網頁表單的 <input> 可以用來上傳檔案，如果想要限制使用者只能上傳某些特定的檔案類型，可以使用 accept 屬性來調整可接受的檔案類型。

Guetzli 開放原始碼 JPEG 圖片壓縮編碼器

Tue, 21 Mar 2017 14:44:34 +0800

本篇介紹如何使用 Guetzli 壓縮大量圖片，並比較 Guetzli 與 TinyPNG 的壓縮結果。

Guetzli 是一套由 Google 所開發的 JPEG 圖片壓縮演算法，與現有的 libjpeg 相比，可將高品質的圖片大小減少 20% 至 30% 左右，並且完全相容於現有的瀏覽器與各種應用程式，因此若應用於網頁的圖片壓縮上，可以大幅降低資料傳輸量，增進網頁載入速度。

修改 Chrome 瀏覽器安全性設定，解決網頁開發階段 Access-Control-Allow-Origin 問題

Fri, 02 Dec 2016 14:11:18 +0800

本文敘述如何修改Chrome 瀏覽器安全性設定，讓網頁開發階段避免 Access-Control-Allow-Origin 的問題。

架構比較複雜的網頁，可能會同時使用多台主機的資源（也就是所謂的 CORS），像是以 Ajax 的技術連線至其他台伺服器，但是因為安全性的因素，瀏覽器預設不允許 JavaScript 任意存取其他伺服器的資源，導致出現類似這樣的錯誤：

PHP 呼叫 R 整合教學，線上資料分析與繪圖工具開發

Tue, 01 Nov 2016 21:32:00 +0800

這裡介紹如何在 PHP 的程式中呼叫 R 語言進行各式的統計分析語資料繪圖，並將結果顯示於網頁之中。

PHP 是現今很熱門的程式語言之一，有非常多的網頁應用程式都是使用 PHP 來開發的（例如 WordPress 等），而 R 語言則是一種功能強大的統計分析工具，拜大資料的風潮所賜，目前 R 語言已經是資料科學領域最熱門的分析工具。

Google AdSense 廣告數量限制解除，可放超過 3 個以上的廣告！

Thu, 29 Sep 2016 07:07:30 +0800

最近 Google AdSense 修改廣告刊登位置的政策，解除以往每張網頁只能放 3 個廣告的限制，現在網頁中一次可以放 3 個以上的廣告！

長久以來 Google AdSense 的廣告刊登政策中都有內容廣告單頁數量上限的規定，一張網頁只能放置 3 個內容廣告單元、3 個連結單元與 2 個搜尋框，這個規定從我開始寫網站以來一直都存在，下面這張圖是我從 WayBack Machine 抓出來的，這是 2014 年的 Google AdSense 廣告刊登位置政策內容。

Leaflet 互動式 JavaScript 地圖繪製工具，適用手機、平板與電腦

Thu, 04 Aug 2016 21:28:53 +0800

Leaflet 是一套適用於各種平台的 JavaScript 地圖繪製工具，可以呈現類似 Google 地圖的效果。

要在網頁上呈現地圖，除了大多數人所熟知的 Google 地圖之外，Leaflet 也是一套很不錯的工具，它是一套開放原始碼的輕量級 JavaScript 網頁地圖函式庫，其所呈現的效果與 Google 地圖非常相似，主要的特色是使用簡單、速度快，並且跨平台，許多知名網站（如 GitHub 與 Flickr 等）都是使用 Leaflet 來呈現地圖。

酷比 Scupio 廣告使用心得（2016 年）

Tue, 19 Jul 2016 10:31:00 +0800

酷比 Scupio 廣告是台灣的一家網路廣告商，這裡分享一下我的使用心得。

酷比 Scupio 廣告類似 Google AdSense 廣告，可以讓網站透過放置廣告獲利，其對象以繁體中文網站為主，單月網頁瀏覽頁次達 30 萬次以上才能申請（不過似乎不是硬性規定），最近我拿 G. T. Wang 部落格去申請之後，試用了一陣子，以下是一些重點整理，如果您也有考慮在網站放置廣告的話，可以參考一下。

使用簡單的 JavaScript 與 Cookies 進行 A/B 測試，改善網站廣告收益

Wed, 01 Jun 2016 08:14:03 +0800

這裡介紹如何使用一般的 JavaScript 程式與 cookies 進行 A/B 測試，改善網站的 Google AdSense 與 DFP 廣告收益。

A/B 測試是一般網站很常使用的最佳化方式，其原理是將訪客分為兩群，然後分別給予不同的網頁內容，比較兩者之間的差異，最後選擇表現比較好的那一種，重複透過這樣的流程，不斷改善網站的轉換效率（例如廣告收益等）。

標準網址使用教學，讓 Google 搜尋呈現正確的網站

Wed, 27 Apr 2016 12:00:26 +0800

這裡介紹如何設定標準網址（canonical link），讓自己網站可以在 Google 搜尋結果上呈現正確的網址，達到搜尋引擎最佳化的效果。

在一個網站中使用不同的網址來呈現同一個頁面的內容是很常見的情況，舉例來說，有些網頁會有閱讀用與列印用兩種網址，這樣的設計可以讓使用者更便利，但是對於網路搜尋引擎（如 Google 等）而言，可能會無法判別那一個網址才是最正式的網址，如果在搜尋結果中顯示了列印用的版本就不是很恰當。

延遲載入 JavaScripts 的實務作法，加速網頁顯示速度

Tue, 19 Apr 2016 21:25:00 +0800

這裡介紹實務上延遲載入各種 JavaScript 的作法，包含 facebook、Google+ 與 twitter 等各類工具。

在網頁中我們可以使用 async 或 defer 的方式來引入外部的 JavaScript 檔案，這樣可以減輕外部 JavaScript 檔對 HTML 解析的效能影響，而這裡我們要介紹另一種在實務上延遲載入各種 JavaScript 程式碼的作法，包含常見的社群按鈕以及各種 JavaScript 工具，例如 facebook、Google+ 與 twitter 等。

WordPress 設定 JavaScript 使用 Async 與 Defer 載入，網站校調技巧教學

Thu, 14 Apr 2016 09:08:14 +0800

本篇介紹如何將 WordPress 網站的 JavaScript 改以 async 與 defer 的方式載入，改善網站的效能。

網站在建置的後期階段都會進行一些效能的校調，而 PageSpeed Insights 是 Google 所提供的網頁效能分析工具，輸入網址即可立即測試網站效能，並且還有列出各種問題以及解決方案。

JavaScript 操作瀏覽器 Cookie 範例教學與 API 工具

Fri, 11 Mar 2016 11:53:34 +0800

這裡介紹如何使用 JavaScript 管理瀏覽器的 cookie，並且提供範例教學以及簡單易上手的 API 工具。

瀏覽器的 cookie 可以讓網頁的 JavaScript 程式將少量的資料儲存起來，最常用於儲存網頁的設定值與一些程式 session 相關的資料。

設定 Android 手機版 Chrome 瀏覽器工具列顏色，配合網頁佈景主題

Mon, 07 Mar 2016 21:49:01 +0800

Android 手機版的 Chrome 瀏覽器可以透過網頁設定工具列的顏色，讓手機的畫面與網頁的佈景主題一致，看起來更美觀。

一般手機瀏覽器的工作列顏色都是固定的，而現在 Android 手機版的 Chrome 瀏覽器從第 39 版之後，開始支援從網頁中指定佈景主題顏色的功能，這個簡單的小功能可以讓網站看起來更專業，也更漂亮，以下是設定的方法教學。

設定各種解析度大小的網站圖示 Favicon.ico

Sat, 30 Jan 2016 14:02:47 +0800

這裡介紹如何設定各種解析度的網站圖示檔 favicon.ico，讓各種平板與手機也可以正常顯示網站的 logo 圖示。

一個正式的網站都會有一個代表網站的 logo 圖示，把代表網站的圖示設定好，對於網站的形象建立會有很大的幫助，如果使用者看到一個網站沒有正確的顯示 logo 圖示，很直覺就會認為這個網站不夠專業，甚至懷疑網站的真實性。

PHP 使用 MongoDB 資料庫入門範例教學

Fri, 20 Nov 2015 07:45:53 +0800

這裡介紹如何在 PHP 中使用 MongoDB 資料庫，包含插入新增、修改更新與刪除資料等各種詳細範例教學。

MongoDB 除了基本的 MongoDB Shell 使用方式之外，它也提供了各種程式語言的 driver，以下我們介紹在 PHP 中的 MongoDB 資料庫使用方式。

網址 URL 英文大小寫是否有差別？

Tue, 10 Nov 2015 07:21:11 +0800

有些人會對於網址的英文大小寫問題有些混淆，搞不清楚到底 URL 中的英文大小寫的差別在哪裡，這裡有詳盡的實測與說明。

在成立網站時，都會需要申請一個網址，許多人都會希望自己的品牌名稱可以直接呈現在網址上，最好英文的大小寫也都可以完全符合，一目暸然，以下我們有完整的網址大小寫說明，告訴您網址到底可不可以使用大寫的英文字母？大小寫的字母是否有差異？以及到底該選擇哪一種表示方式比較好？

Devd 輕量級 HTTP 網頁伺服器，網頁開發與測試用工具

Tue, 03 Nov 2015 15:02:42 +0800

Devd 是一個輕量級的 HTTP 網頁伺服器，可以讓網頁開發者快速建立一個測試網頁用的環境。

網頁開發者在撰寫網頁時，通常都會需要一個網頁伺服器進行一些測試，尤其是在網頁牽涉到 AJAX 這類的技術時，如果只是單純用瀏覽器打開網頁，沒有一個真正的網頁伺服器的話，就無法讓網頁的程式正常運作。

reveal.js：用網頁製作簡報的 HTML5 架構

Thu, 22 Oct 2015 10:34:23 +0800

reveal.js 是一個使用網頁製作簡報的 HTML5 架構，讓您隨時隨地上網即可播放簡報。

製作簡報大家通常都會使用 Office 的 PowerPoint，而現在您有另外一種選擇，就是使用網頁來製作簡報，reveal.js 是一個專門用來製作高品質網頁簡報的 HTML5 架構，使用它來製作的簡報非常漂亮，功能也很強大，品質不會輸 PowerPoint，而且完全免費，

將 WordPress 網站轉移至 LEMP 伺服器

Wed, 21 Oct 2015 10:10:09 +0800

本篇是將 WordPress 網站從舊的共享主機轉移至 Linode VPS LEMP 伺服器的過程紀錄。

前陣子因為舊網站空間的 MySQL 資料庫出問題，所以從 Linode 買了一個新的 VPS 主機空間，安裝並設定好 Ubuntu Linux 系統之後，架設了一個 LEMP 伺服器，接下來就是要將既有的 WordPress 網站搬到新的 VPS 主機空間了。

Ext JS 使用 Ext.Ajax 與伺服器溝通

Wed, 09 Sep 2015 16:07:55 +0800

Ext.Ajax 是 Ext.data.Connection 的一個 singleton 實體，可以用來跟伺服器上面的程式溝通。

以下是一個簡單的範例：

Ext.Ajax.request({
  url: 'ajax_demo/sample.json',

  success: function(response, opts) {
    var obj = Ext.decode(response.responseText);
    console.dir(obj);
  },

  failure: function(response, opts) {
    console.log('server-side failure with status code ' + response.status);
  }
});

Ext.Ajax.request 在執行時會以非同步（asynchronous）的方式送出請求，然後馬上回傳（return），回傳值並不會包含與伺服器連線的任何資訊或結果，當成功連現取得資料時，Ext.Ajax.request 會執行 success 所指定的函數，若失敗則執行 failure 所指定的函數。另外也可以使用 requestcomplete 事件來處理完成請求時的動作。

Ext JS 的 Controller 使用教學

Tue, 08 Sep 2015 09:26:00 +0800

這裡介紹 Ext JS 架構中的 Controller 的使用方式。

在 MVC 架構中，Controller 是一個很重要的角色，以下是 Ext JS 的 Ext.app.Controller 使用教學。

建立基本 Controller

Controller 是 Ext JS 中連接各個應用程式組件的媒介，它主要的作用是傾聽事件（events）然後執行對應的動作，以下是 Controller 的建立方式：

在 DreamHost 空間自己架設 Piwik 網站流量統計分析工具

Fri, 14 Aug 2015 09:25:04 +0800

這裡介紹如何在 DreamHost 主機空間中，使用 Piwik 架設一個自己的網站流量統計分析工具。

大部份的網站或是部落格在架設完成之後，通常都會加上網站流量的統計分析工具，這類的工具可以幫助站長瞭解自己網站的流量狀況，市面上這類的免費工具非常多，例如 Google Analytics 與 Yahoo 站長工具就是很常被使用的兩個免費服務，我個人也是偏好使用 Google Analytics，不但功能豐富、速度快，而且完全不用自己維護伺服器，非常方便。

付費刊登 Facebook 廣告，增加粉絲專頁的人氣

Sat, 08 Aug 2015 21:29:17 +0800

這裡介紹如何在 Facebook 上面付錢打廣告，吸引更多人加入自己的粉絲專頁。

這兩天剛好在進行部落格的效能校調，花了一整天把 WordPress 中安裝的每一個外掛都檢查一次，刪掉影響效能太嚴重的（順便一提，WP-SpamShield Anti-Spam 這個外掛雖然評價是五顆星，不過它會讓你的網站變得比蝸牛還慢！），另外也改寫了相關文章（related posts）的功能，加上 Facebook 推文的按鈕，現在整個部落格效能水準比之前好多了。

Coverr：免費下載美化網站首頁用的影片

Thu, 09 Jul 2015 11:04:12 +0800

Coverr 提供了許多美化網站首頁用的免費影片，使用這些影片可以讓您的首頁看起來更專業。

以往的網站背景大都是以靜態的圖型為主，而現在由於網路速度大幅提升，再加上 HTML5 的技術，已經有越來越多的網站直接使用影片來作為網站的背景，這樣的效果完全不同於過去的網站，看起來會非常吸引人。

五個測試網站效能的免費工具

Tue, 26 May 2015 09:39:06 +0800

這裡整理了五個可以測試與分析網站載入速度的免費線上工具。

一個網站的速度會直接影響到使用者體驗，在開啟網站時，如果讓訪客等待的時間過長，除了給人不好的觀感之外，也還會造成訪客流失的問題。

CC Search：創用 CC 搜尋工具，尋找免費圖庫、影片與音樂

Sun, 24 May 2015 07:27:08 +0800

CC Search 是創用 CC 官方網站所提供的搜尋工具，可以用來尋找免費的圖庫、影片與音樂。

一般的部落客或是網站設計者在撰寫文章時，為了提升文章整體的感覺，通常都會放一些插圖或是示意用的照片，但是一般人都不會有那麼多的圖片或照片可以放，上網下載的圖又會擔心著作權問題，自己拍照那更是曠日廢時。

Google Maps JavaScript API 入門使用教學與範例

Fri, 22 May 2015 16:37:36 +0800

這裡透過簡單的 Hello, World 範例，介紹 Google Maps JavaScript API 的基本使用方式。

Google Maps JavaScript API 是設計給網頁開發者所使使用的開發工具，您可以使用這個 API 將 Google 地圖安插在自己的網頁中，並且將自己的資料放在地圖上面呈現。

從 Google Developers Console 取得開發者用的 API 金鑰

Fri, 22 May 2015 08:47:50 +0800

這紀錄從 Google Developers Console 取得開發者用的 API 金鑰的流程。

Google 提供了各式各樣的服務，幾乎每一種服務都有提供一個以上的 API 讓開發者使用，這些 API 常常與 ajax、javascript、xml 或 json 等技術結合，除了自行開發程式之外，部分的 API 還有附帶一些輔助性的服務，讓使用者透過簡單的設定即可使用這些 API 功能。

產生 CSS 置中程式碼，輕鬆排版網頁元素

Thu, 21 May 2015 12:12:50 +0800

這裡介紹一個產生 CSS 置中程式碼的線上工具，讓您輕鬆排版網頁元素。

有設計網頁的人應該都遇過需要置中排版的狀況，如果您對於 CSS 的使用方式不夠熟悉，通常要置中排版一個元素，都會被它搞得七葷八素的，因為雖然看起來很簡單的動作，但是用 CSS 寫起來卻不是那麼單純。

使用 Google DFP 刊登廣告，解決 AdSense 廣告數量上限問題

Thu, 21 May 2015 09:29:37 +0800

這裡示範如何使用 Google DFP 來刊登廣告，突破 AdSense 最多只能放三個廣告的限制。

許多的網站都會放置一些廣告，透過廣告收益來維持網站的運作，甚至用這樣的模式把網站當作一個事業來經營，而 Google 的 AdSense 是目前最熱門的網路廣告商，一般網站上的廣告大多數都是藉由 AdSense 來刊登的。

免費產生與下載無縫圖案（Seamless Pattern）網站整理

Fri, 15 May 2015 08:31:23 +0800

這裡整理了一系列可以免費產生與下載無縫圖案（seamless pattern）的網站，對於網頁的背景設計很有幫助。

設計網站時所使用的背景圖對於網站的整體視覺效果有非常大的影響，在過去網際網路剛剛發展出來的年代，許多網頁的背景都是使用一般的圖片重複排列，手法粗糙而且反而讓網站更雜亂。

如何在 WordPress 設定 Favicon 網站圖示？

Thu, 23 Apr 2015 10:04:06 +0800

這裡介紹如何在 WordPress 中設定網站的小圖示，幫助網站建立好的品牌形象。

一般的正式網站都會自己設計一個代表該網站的小圖示（favicon），這個圖示在使用者瀏覽網頁時，會出現在瀏覽器的網址會是標題列上，對於網站的形象有加分的作用。

內容傳遞網路（CDN）對於手機瀏覽網頁的加速效果不好？

Thu, 23 Apr 2015 08:01:42 +0800

這裡解釋內容傳遞網路（CDN）對於手機在瀏覽網頁時的影響，告訴您到底該不該將 CDN 使用在手機版的網頁上。

近年來使用行動裝置瀏覽網頁的比例與日俱增，最近 Google 也針對行動裝置的網頁搜尋規則進行了調整，讓行動裝置在使用 Google 搜尋時，可以獲得更好的結果，在未來網站的設計上，除了考慮一般的桌機版本之外，手機與平板電腦的網頁也是非常重要的一環。

在 WordPress 網站中加入 Google AdSense 廣告賺取收益

Tue, 21 Apr 2015 12:12:24 +0800

這裡介紹如何在 WordPress 的網站中放置 Google AdSense 廣告，讓網站產生額外的收益。

AdSense 是 Google 所提供的網路廣告服務，加入 AdSense 之後，你就可以在自己的網站上刊登 AdSense 所提供的廣告，有許多網站都是使用這樣的方式，靠著廣告的收入來維持網站的營運。

CloudFlare 免費 CDN 伺服器使用教學，加速網站載入速度，阻擋惡意流量

Sat, 11 Apr 2015 22:19:03 +0800

這裡介紹 CloudFlare 這個免費的 CDN 服務，它可以有效加速網站載入速度，並且阻擋惡意流量，還可以代管 DNS。

如果要讓網頁的載入速度更快，除了使用快取技巧（如 WordPress 的 ZenCache plugin）、減少動態網頁與資料庫查詢之外，還有一個很常見的方式就是使用內容傳遞網路（content delivery network，簡稱 CDN）伺服器，分散網頁伺服器的負載，縮短資料傳送距離，達到加速的目的。

Google 行動裝置相容性測試工具，檢測網站是否適合手機瀏覽

Wed, 01 Apr 2015 11:09:50 +0800

Google 所提供的行動裝置相容性測試工具可以幫助網站設計者測試自己的網站是否適合手機瀏覽，並且列出各種問題與改善方案。

Google 日前宣佈一項新的搜尋引擎規則，從今年的 4 月 21 日開始，網站是否有提供適用於行動裝置瀏覽的網頁，會大大影響網站在 Google 搜尋上的排名，也就是說如果 Google 搜尋引擎認為您的網站沒有提供手機版的網頁，您的網站在一般行動裝置上面的搜尋排名從 4 月 21 日開始就會往後掉。

Quill：輕巧的 Rich Text 編輯器，在網頁中進行各種圖文排版

Fri, 03 Oct 2014 20:07:01 +0800

Quill 是一個以 JavaScript 開發的獨立 rich text 編輯器，可以在網頁中進行各種圖文排版，不需要依賴其他的 JavaScript 函式庫。

TinyMCE 是一個很熱門的 rich text 編輯器，它有非常多的功能，許多 Word 常用的功能它都有，不過許多使用者都抱怨它的檔案大小太大了，會讓網頁載入的速度變慢。

申請 No-IP 動態 DNS 服務，以浮動 IP 架站教學

Wed, 24 Sep 2014 07:47:51 +0800

這裡介紹如何申請 No-IP 的動態 DNS 服務，透過 TP-LINK 路由器所提供的自動更新動態 DNS 功能，輕鬆使用浮動 IP 架站。

非固定制的 ADSL 網路環境中，如果想要自行架設網站或是 FTP 站，但又只有浮動的 IP 位址，只要 IP 一改變，使用者就連不上伺服器了，該怎麼辦呢？如果遇到這個問題，可以申請 No-IP 這類的動態 DNS 服務來解決。

用程式控制 TP-LINK 路由器的 ADSL 連線，自動更換 IP 位址

Mon, 22 Sep 2014 07:52:11 +0800

本文以 TP-LINK 的 TL-WR741ND 路由器（router）為例，示範如何使用各種程式語言與工具遠端控制路由器的 ADSL 連線（斷線並重新連線），自動更換網路的 IP 位址。

現在市面上大部分的路由器（或是 IP 分享器）都有網頁管理的介面，使用者可以透過網頁登入之後，管理路由器中的各種功能，而如果要更換 ADSL 的 IP 位址，最簡單的方式就是在網頁管理介面中，手動重新連線，由於非固定制的 ADSL 每次連線都會配發不同的 IP 位址，這樣自然就可以獲得一個新的 IP 位址了，這就是一般更換 IP 位址的原理。

HTML5 的日期輸入功能教學

Thu, 18 Sep 2014 10:56:05 +0800

HTML5 中提供了一項新的日期輸入功能，可以提供使用者一個很方便選擇日期的介面，開發者也可以不必再依靠 jQuery 等 JavaScript 來實作這樣的功能。

在網頁中若要讓使用者輸入日期，傳統上的做法都是使用 jQuery 或是類似的 JavaScript 工具，另外寫一個日期選擇功能，而現在 HTML5 提供了一項原生的日期輸入功能，讓開發者可以不用再使用額外的工具就可以達到同樣的功能。

WebRTC 入門教學（一）：多媒體影像串流擷取

Wed, 17 Sep 2014 11:17:55 +0800

這裡介紹如何使用 WebRTC 在網頁中擷取本地端的多媒體影像串流，包含聲音與影像。

在過去有許多的網頁應用程式都有即時溝通（real time communication，簡稱 RTC）的需求，也就是遠端視訊聊天的功能，例如早先的 Google Talk 的視訊聊天、Facebook 聊天與後來發展的 Google Hangouts 等，這些都是用來讓人及時溝通的工具，但是在以前若要使用這樣的功能都要另外下載與安裝一些外掛程式，而安裝這些外掛的程序通常都很麻煩，甚至容易出問題，而最重要的問題是使用者可能一開始就不想安裝它了。

WebRTC 入門教學（二）：以 RTCPeerConnection 建立 Peer-to-peer 連線

Wed, 17 Sep 2014 11:07:20 +0800

上一篇文章中我們已經可以使用 MediaStream 擷取本地端的多媒體串流，現在我們要利用 RTCPeerConnection 建立連線，準備將串流傳送出去。

ICE 架構

在建立連線之前，我們要先討論一下，peer-to-peer 連線建立上的問題，理論上來說只要電腦都有連上網路，就可以透過網路建立一條連線直接溝通，不過很多時候因為 NAT 或是防火牆等問題，會讓您無法直接建立這樣的連線，這時候可以使用 ICE 的架構來幫助我們建立一個 peer-to-peer 的連線。

使用 CSS 的 ::before 自訂 HTML Ordered Lists 的編號樣式

Tue, 16 Sep 2014 11:21:42 +0800

這裡介紹如何使用 CSS 的 ::before selector 自訂 HTML ordered lists（ol）的編號樣式。

一般 HTML 的 ordered lists（ol）呈現的效果是這樣：

這是第一個項目
這是第二個項目
這是第三個項目
這是第四個項目
這是第五個項目

我們這裡介紹如何使用 CSS 自訂每一個項目的編號：

Composer：PHP 專用的套件相依性管理程式

Wed, 10 Sep 2014 17:22:24 +0800

Composer 是一個 PHP 專用的套件相依性管理程式，它可以依照套件相依性的設定檔，自動下載與安裝或升級各種 PHP 套件。

安裝 Composer

Linux 與 Mac OS X

如果是在 Linux 或是 Mac OS X 中，可以使用簡單的指令來將 Composer 安裝在自己的目錄中：

Timesheet.js：在網頁上繪製甘特圖（Gantt Plot）的 JavaScript 工具

Thu, 28 Aug 2014 18:33:55 +0800

這裡介紹一個可以在網頁上繪製甘特圖（Gantt Plot）的 JavaScript 工具，畫面簡潔，使用上也很簡單。

甘特圖是一種用來顯示專案進度或是其他時間相關資訊的條狀圖，一般的專案管理軟體（例如 Microsoft Project 或 Mr. Project）也都可以繪製這樣的圖形。

rabbit.js：在 Node.JS 中使用 RabbitMQ 實作訊息佇列（Message Queue）

Fri, 30 May 2014 21:01:05 +0800

rabbit.js 是一個專門為 RabbitMQ 所設計的 JavaScript API 函式庫，可以讓你在 Node.js 中很輕鬆的實作各種類型的訊息佇列（Message Queue）。

rabbit.js 以 amqplib 為基礎，將原本複雜的設定又再簡化，讓一般性的使用者更方便，如果是使用一般常見的模式（pattern），只要幾行程式碼就可以運作了。

YUI Compressor： JavaScript 與 CSS 壓縮工具，產生最小化的網頁

Wed, 21 May 2014 21:06:14 +0800

YUI Compressor 是由 Yahoo 所發展的一套 JavaScript 與 CSS 壓縮工具，可以協助網頁開發者產生最小化的網頁。

網頁大小跟載入的速度有很大的關係，如果要降低網頁的大小，除了可以使用 Google Closure Compiler 編譯器將 JavaScript 最小化之外，也可以使用 Yahoo 所發展的 YUI Compressor，它除了可以處理 JavaScript 之外，也可以一併將 CSS 檔最小化。

以 Google Analytics 內容實驗（Content Experiments）API 進行 A/B 測試（A/B Testing）

Mon, 12 May 2014 07:35:35 +0800

Google Analytics 的內容實驗（Content Experiments）功能可以幫助網站進行 A/B 測試，比較不同網頁版本的成效，這裡介紹不需要重新導向網頁的測試方式。

Sharrre：可以自己設計社群分享按鈕的 jQuery Plugin

Wed, 07 May 2014 08:28:48 +0800

Sharrre 是一個可以讓你自己設計社群分享按鈕的 jQuery plugin，透過 CSS 的設定讓按鈕可以符合網站整體風格。

現在的網站都會放置一些社群網站的分享按鈕，例如 facebook 、 twitter 或 Google+ 等，不過因為各家的分享按鈕都有些差異，而且也不見得可以跟自己的網站風格搭配。

Broken Link Checker：網頁無效超連結線上檢查工具

Sat, 03 May 2014 08:54:14 +0800

Broken Link Checker 是一個無效超連結的線上檢查工具，可以自動找出網站上有問題的超連結。

一般的網頁或是部落格文章，經過一段時間的後很容易出現一些無效的超連結，最常發生的就是連結的網頁或圖片搬家了，或是整個網站都關閉了，造成使用者點下去就會出現 404 的錯誤訊息或是根本找不到網站。

新 Blogger 部落格網址登錄搜尋引擎，並提交網站地圖（Sitemap）

Fri, 02 May 2014 09:01:47 +0800

這裡介紹如何將新的 Blogger 部落格網址登錄至各大搜尋引擎並提交網站地圖（sitemap），增加網站的曝光率。

如果是新成立或是剛剛變更網址的網站，在搜尋引擎中是找不到到，這時候就要將網站的網址登入至各大搜尋引擎，才能夠讓網站出現在一般的搜尋引擎中。以下整理了一些各大搜尋引擎登錄網站的資訊，以及如何提交 Blogger 部落格網站地圖的教學。

GoDaddy 申請購買網域名稱（Domain Name）教學

Thu, 24 Apr 2014 09:48:46 +0800

這裡介紹如何在 GoDaddy 網站上申請與購買網域名稱（Domain Name），並介紹優惠碼的取得與使用方式。

如果你想要架設一個較正式的網站或部落格，通常申請一個比較正式的網址會比較好，如果有一個簡短、具有代表性的網址，可以讓使用者更容易記住，而且可以創造自己的品牌。

Blogger 部落格自定網域名稱（Domain Name）與網址教學（使用 Godaddy）

Thu, 24 Apr 2014 09:30:34 +0800

這裡介紹如何自己設定 Google Blogger 部落格的網域名稱，讓部落格使用自己的網址。

如果是使用一般性的部落格架站，通常網站都會掛在這些部落格的網域底下，例如 Blogger 就會是 *.blogspot.com，原本的網址就已經不短了，加上自己的部落格名稱之後，整個網址就顯得非常長，對於一般的使用者來說要記那麼長的網址實在不容易。

Eclipse 安裝與設定 GlassFish 伺服器教學（Java EE 7 Application Server）

Thu, 17 Apr 2014 14:00:27 +0800

這裡介紹如何在 Eclipse 中安裝 GlassFish Application Server，建立 Java EE 開發環境。

GlassFish 是一個開放原始碼的 Java EE Application Server，這裡以 Eclipse Kepler 為例，示範如何在 Eclipse 的環境下安裝 GlassFish，作為開發 Java EE 應用程式的伺服器。這裡所使用的作業系統為 Mac OS X，不過不同的作業系統在安裝上應該都差不多。

JSHint：自動檢查 JavaScript 程式碼，偵測錯誤的線上工具

Sat, 12 Apr 2014 14:34:06 +0800

JSHint 是一個可以自動檢查 JavaScript 程式碼的工具，讓程式設計者在專案開發初期就可以即時修正潛在的錯誤。

由於 JavaScript 這個程式語言的語法與結構非常彈性，不像 Java 或 C 語言那樣嚴謹，對於程式設計者而言，一開始會感覺很方便，不管怎麼寫都可以執行，但是當整個程式發展到一定規模的大小之後，JavaScript 這樣鬆散的結構會讓程式很容易出現一些 bugs，而且除錯與修正的工作也會變得非常困難。

HTML5 的 Server-Sent Events 串流使用教學

Sat, 12 Apr 2014 14:28:57 +0800

Server-Sent Events 是一個已經被 W3C 納入 HTML5 標準的 API，它可以讓伺服器透過一般的 HTTP 協定主動更新瀏覽器的資料。

傳統的網頁架構下，如果瀏覽器要持續接收來自於伺服器端的新資料時，通常都是透過 Polling、Long-Polling 或 Streaming 等方式來達成，而後來出現的 WebSocket 徹底解決了這個問題，不過除此之外，在 HTML5 標準中還有一個 Server-Sent Events 也可以處理這類型的問題。

TodoMVC：選擇 MVC 網頁開發架構（Framework）的好工具

Mon, 03 Mar 2014 15:43:55 +0800

TodoMVC 是一個協助網頁應用程式開發者挑選 MVC 架構工具，透過範例程式讓你可以很快的比較各種架構之間實質上的差異所在。

拜網路雲端化的趨勢所賜，全世界有非常多的開發者陸續發展出非常多適用於網頁應用程式的 MVC 架構（framework），其中更有許多優質的開放原始碼架構，無論是功能性與穩定性都非常好，網頁開發者可以利用這些豐富又免費的資源開發各種應用程式，省去自己設計架構的精力與時間。

EJS：Client 端嵌入式（Embedded）JavaScript

Tue, 25 Feb 2014 16:05:15 +0800

EJS 是一個 client 端的 JavaScript template library，可以讓整個網頁程式碼結構更清楚、更整潔。

一般的網頁程式設計師在開發網頁時，多多少少都會遇到這樣的 JavaScript 程式：

var html = "<h1>"+data.title+"</h1>"
html += "<ul>"
for(var i=0; i<data.supplies.length; i++) {
    html += "<li><a href='supplies/"+data.supplies[i]+"'>"
    html += data.supplies[i]+"</a></li>"
}
html += "</ul>"

這裡為了動態產生網頁內容，所以使用 JavaScript 來產生 HTML 程式碼，在傳統上如果是要在 client 產生這樣的動態內容都是這樣做的，但這樣的缺點就是程式碼架構比較雜亂，而且這樣的程式在修改上也比較不容易。

Stylus：Node.js 架構下的 CSS 前處理器

Mon, 24 Feb 2014 16:08:19 +0800

Stylus 是一個 Node.js 架構下的 CSS 前處理器，這裡介紹它的基本使用方式。

Stylus 是一種用來產生 CSS 的程式語言，其語法基本上是從傳統的 CSS 簡化而來，所以跟 CSS 的寫法類似，但是更精簡，另外也加入一些函數與運算的功能，讓使用上更彈性。

Chrome V8 引擎使用 JavaScript 背景編譯技術大幅提升執行效能

Fri, 14 Feb 2014 07:25:42 +0800

Google 將 Chrome 的 JavaScript 編譯動作放在背景執行，改善瀏覽器的整體效能。

一直以來 Chrome 都不斷進行效能的改進，V8 引擎透過編譯 JavaScript 的方式，加速 JavaScript 的執行速度，在以前這個編譯動作是放在主要執行序（main thread）上來處理的，但是這樣的做法會對於 JavaScript 的執行效能有一些影響。

DevDocs.io：網頁應用程式開發專用的技術文件查閱工具

Mon, 10 Feb 2014 07:48:31 +0800

DevDocs.io 整合了一般網頁應用程式開發過程中常會用到的各種官方技術文件，可以讓網頁應用程式開發者快速查閱，加速開發流程。

現今的網頁技術琳琅滿目，一般的網頁應用程式都會需要結合各種技術，而程式開發者在開發時就會常常需要查詢各種技術的相關文件，最常見的就是要查詢某個函數的語法或參數如何使用，以及找尋簡單的範例讓自己可以很快的用在自己的程式中，但是一般這種情況如果使用 Google 這樣的搜尋引擎的話，要在搜尋結果中找到自己要的網頁或文件，通常都會浪費很多時間。

JavaScript 記憶體洩漏（Memory Leak）問題

Fri, 24 Jan 2014 07:59:11 +0800

這裡我們將解釋為什麼 JavaScript 會產生記憶體洩漏的問題，並示範會產生這個問題的程式寫法，讓大家知道該如何處理這類的問題。

JavaScript 是一種功能強大的語言，在現今許多的網頁中都扮演著重要的角色，雖然其語法簡單、撰寫容易，但是在某些瀏覽器上會產生記憶體洩漏（memory leak）的問題，卻很讓人頭痛。

WebSocket 通訊協定簡介：比較 Polling、Long-Polling 與 Streaming 的運作原理

Thu, 16 Jan 2014 09:05:09 +0800

這裡介紹 HTML5 的 WebSocket 概念，並且跟傳統的即時性網頁技術 Polling、Long-Polling 與 Streaming 做比較。

HTML5 的 WebSocket 是一種建立在單一 TCP 連線上的全雙工（full-duplex）通訊管道，可以讓網頁應用程式與伺服器之間做即時性、雙向的資料傳遞。

WebSocket 跟以往實作全雙工的技術比起來，改進了非常多，不但減低網路頻寬的使用，也降低了網路延遲的時間。（關於網路的頻寬與延遲可參考這裡）

HINT.css：以 CSS3 與 HTML5 實作的提示訊息方塊（Tooltip）工具

Thu, 16 Jan 2014 08:58:18 +0800

HINT.css 是一個使用 CSS3 與 HTML5 實作的 tooltip 函式庫，可以在網頁中呈現漂亮的提示訊息方塊。

一般在網頁中若要顯示提示訊息，可以使用 title 這個 HTML 屬性，像上面這張圖將 title 設定為 "HTML.css Logo"，所以當你將滑鼠移到圖片上面時，停留一段時間他就會顯示這行提示訊息。

自製中文網頁字形（Web Font）並內崁至網頁中（使用 CSS @font-face）

Thu, 02 Jan 2014 11:08:04 +0800

這裡教大家如何自己製作中文的字形檔，並轉為網頁用的字型格式，藉由 CSS 的 @font-face 功能在網頁中使用。

現在大部份的瀏覽器都可以支援 @font-face 這樣的自定網頁字型功能，但是到目前為止這項技術大部份都是應用於英文的字型上，而中文的字型檔由於大小通常都很大，如果讓使用者在看網頁文字時還要再下載好幾 MB 的字型檔，通常都會讓整個網頁效率大幅下降，所以大部份的網頁中的中文字都比較少使用自定的字型。

Bigfoot.js：以對話方塊顯示網頁文章註解的 jQuery Plugin

Tue, 31 Dec 2013 11:45:42 +0800

Bigfoot.js 是一個可以使用對話方塊顯示網頁文章註解的 jQuery Plugin，讓讀者在閱讀時不用捲動網頁即可即時閱讀註解。

一般在網頁或是部落格中撰寫文章時，有時後會遇到需要加入註解（註腳）的情況，而讀者在閱讀含有註解的文章時，通常會需要使用捲軸（或是以超連結的方式）往下捲動網頁到下方的註解處來閱讀，閱讀完註解再回到本文繼續閱讀。

CSS 網頁字型 @font-face 使用教學與範例

Tue, 31 Dec 2013 11:31:10 +0800

這裡介紹 CSS 的 @font-face 使用方式與範例，讓網頁設計者可以在網頁的字型使用上更有彈性。

@font-face 這個 CSS 的 at-rule 可以讓網頁設計者可以使用網路上的字型檔來顯示網頁中的文字，甚至還可以讓設計者使用自己所提供的字型檔，讓網頁的設計更具有彈性，在選擇字型時就可以不需要考慮一般的電腦是否有安裝，凡是放在網路上的任何字型檔都可以使用。而 @font-face 除了在 CSS 的頂層設定上使用之外，在任何 CSS 條件群組（conditional-group）at-rule 中也可以使用。

網路的延遲（Latency）與頻寬（Bandwidth）是什麼？

Fri, 27 Dec 2013 13:10:59 +0800

這裡介紹網路的延遲（Latency）與頻寬（Bandwidth）是什麼，以及它們對於我們的網路有什麼影響。

在過去幾年中，網路效能最佳化（web performance optimization，簡稱 WPO）這個產業快速成長，這個現象也顯示了網路速度對於使用者而言也越來越重要，如果一個網站可以提供比較快速的網路服務，除了改善使用者經驗之外，連同網站的流量與其附帶的效益也都會跟著增加。

HTML5 Please：提供各種 HTML5 與 CSS 語法在瀏覽器相容性問題上的使用建議

Fri, 20 Dec 2013 13:43:37 +0800

HTML5 Please 整理了各種新的 HTML5 與 CSS 語法在各種瀏覽器上的相容性狀況，並提供使用上的建議。

在開發網頁的應用程式時，開發者所撰寫的 HTML5 或 CSS 程式碼通常都要面對許多不同瀏覽器的相容性問題，而 HTML5 Please 是一個可以查詢各種 HTML5 與 CSS 的語法在各種瀏覽器中被支援的狀況，並且建議你是否應該使用，你可以依據哪一些瀏覽器支援哪一些語法來選擇要使用的語法。

Grunt：自動化網頁應用程式開發流程的 Node.js 工具

Thu, 19 Dec 2013 14:07:51 +0800

Grunt 是一個以 Node.js 為基礎所開發的命令列工具，在經過適當的設定之後，它可以幫助程式開發者將一些重複性的工作自動化，減輕開發者與開發團隊的負擔。

Grunt 可以處理的事情很多，例如精簡 CSS 程式或網頁的大小、編譯 CoffeeScript、unit test、linting 等，舉凡一般性的重複動作多半都可以使用這個工具來處理。

Flickr 現在可以讓你把照片內崁至網頁中了

Thu, 19 Dec 2013 14:04:06 +0800

Flickr 最近推出了內崁照片的功能，現在你可以直接把 Flickr 上的照片直接放進網頁中顯示了。

現在如果你想要在一般的網站或部落格中顯示 Flickr 的照片，可以使用 Flickr 最新的照片內崁功能，將產生的 HTML 程式碼複製起來再貼在網頁上，就可以直接顯示 Flickr 的照片了。

Adaptive Backgrounds：一個可以依照圖片主題顏色動態調整背景的 jQuery Plugin

Thu, 19 Dec 2013 13:51:28 +0800

這裡介紹 Adaptive Backgrounds 這個 jQuery plugin，它可以依照圖片的主題動態更改背景顏色。

Adaptive Backgrounds 是一個 jQuery 的 plugin，它可以取出一張圖片中最主要的顏色，並將該顏色套用在圖片的上一層網頁元素上，藉此製作出一個跟圖片主題相似的背景。

Ghost 開放原始碼部落格平台開始提供付費主機空間服務了

Wed, 18 Dec 2013 14:44:13 +0800

Ghost 這個開放原始碼的部落格平台，目前已經準備好開始提供主機空間服務了，不過這個服務是要付費的。

Ghost 是一個以 Node.js 為基礎的開放原始碼部落格平台，在今年十月份才釋出其第一個版本，而現在他已經準備好開始提供主機空間服務了。

Google AdSense 回應式廣告單元（自動偵測版面大小）

Mon, 16 Dec 2013 15:26:14 +0800

Google 的 AdSense 回應式廣告單元現在可以自己偵測網頁的版面，自動選擇最適合的廣告大小。

Google AdSense 廣告前一陣子才支援回應式網頁設計，讓 Google AdSense 廣告配合瀏覽器版面動態變更大小，但是之前的版本使用者必須自己透過 CSS 的設定來規劃版面寬度與廣告大小的組合，其實使用起來並不是很方便。

Vim.js：一個使用 JavaScript 實作的 Vim 編輯器

Sat, 14 Dec 2013 06:37:53 +0800

Vim.js 是一個使用 JavaScript 實作的 Vim 編輯器，不過實用性不高，只適合學習與研究使用。

Vim.js 是把傳統 Linux 上的 Vim 編輯器以 JavaScript 實作在一般的瀏覽器中，不過目前還在發展當中，還不是很穩定，而且這種編輯器大概只適合比較資深的 UNIX/Linux 使用者作為「娛樂」使用。

使用 CSS Animation 製作網頁上的動畫（只要 CSS3，不用 JavaScript！）

Mon, 09 Dec 2013 07:21:32 +0800

這裡介紹如何使用 CSS3 的 animation 功能在網頁上製作動畫，而且不需要使用到 JavaScript。

CSS3 所提供的動畫（animation）功能可以讓網頁元素的 CSS 樣式（style）從一個設定轉換到另外一個，藉著這樣的方式產生動畫的效果。CSS 的再設定動畫時包含兩個部份，一個是用來設定 CSS 動畫的樣式，另外一個則是指定動畫開始、結束或中途路徑的關鍵影格（keyframes）設定。

Colorpeek：查看與分享 CSS 色碼的線上工具

Fri, 06 Dec 2013 07:41:24 +0800

Colorpeek 是一個查看與分享 CSS 色碼的線上工具，除了顯示 CSS 顏色還可以自動取出圖片的主要顏色。

一般在設計網頁時，一定常常會需要查看某項網頁元素的顏色，或是為某一個網頁元素選擇一個適當的顏色，如果是團隊開發的情況，在多個網頁開發者之間討論顏色時，也會碰到需要互相交流顏色選擇的看法，當然你可以直接將 hex triplet 貼上 Photoshop 這類的會提軟體，看看這個顏色的感覺，調整好顏色之後，再把這個 hex triplet 貼在 Email 寄給另外一位開發者，跟他說這個顏色不錯，但是這樣每次調整顏色時都要開啟 Photoshop 這樣的軟體，其實不太方便。

Google Chrome 的 DevTools 現在支援手機平台的網頁開發了

Wed, 04 Dec 2013 07:54:56 +0800

Google Chrome 的最新版加入了手機網頁應用程式開發功能，現在你可以直接使用 DevTools 進行手機網頁應用程式的開發與除錯了。

Google 最近釋出了 Windows、Mac、Linux 與 Android 平台的 Chrome 32 beta 版，並且針對 DevTools 加入了手機平台的網頁開發功能，現在手機的開發人員可以利用這個功能對手機版的網頁應用程式（web apps）進行開發與除錯的動作，當你在設計應用程式時，新的 DevTools 可以在開發環境中直接看到手機的畫面，以下是它的操作過程。

使用 ScrollUp jQuery Plugin 在網頁與部落格中加入回到頁首（Back To Top）按鈕

Mon, 02 Dec 2013 08:02:22 +0800

這裡介紹如何使用 scrollUp jQuery Plugin，在網頁與部落格中加入回到頁首（Back To Top）的按鈕。

有些網頁設計者會在一些內容比較長的網頁中加入回到頁首（Back To Top）的按鈕，這種按鈕在一開始載入網頁時並不會顯示，而在使用者往下捲動網頁內容時就會自動出現在畫面的角落，只要使用者用滑鼠點一下這個按鈕，就會自動將捲軸拉到最上方，是一個可以讓使用者更方便瀏覽網頁的小功能。

自定 Google Chrome 網頁開發人員工具（DevTools）佈景主題教學

Wed, 27 Nov 2013 08:20:07 +0800

這裡教大家如何自定 Google Chrome 瀏覽器的網頁開發人員工具（Chrome Developer Tools）佈景主題。

在 Google Chrome 瀏覽器中有提供了一個 DevTools 網頁開發人員工具，它可以讓網頁開發者非常方便的在上面開發網頁或除錯，而這個工具在預設的情況下是使用白底灰字的布景主題，如果你是需要長時間使用這個工具開發的人，這樣的配色可能會讓眼睛很吃力。

在 Google Chrome 中使用 console.table() 函數進行 JavaScript 程式除錯（Debug）

Sat, 23 Nov 2013 08:51:16 +0800

這裡介紹如何在 Google Chrome 瀏覽器中使用 console.table() 函數進行 JavaScript 程式的除錯（Debug）。

在 Web Developer Conference 2013 這個研討會中，Marcus Ross 提供大家各種在 Google Chrome 特有的 JavaScript 除錯（debug）方法，這裡我們介紹其中一種使用 console.table() 函數的方式。

更改 Google AdSense 廣告程式碼進行 A/B 測試（A/B Testing）

Wed, 20 Nov 2013 09:18:05 +0800

這裡介紹如何更改 AdSense 廣告程式碼進行 A/B 測試，增加網站的廣告效益。

A/B 測試是網站在做最佳化時常用的手法，尤其是在調整廣告的擺放方式時，非常有用。舉個例子來說，假設你想在網站首頁上放置一個 Google AdSense 廣告，而一般的廣告有好多種形式，例如圖形的廣告與文字的廣告，而文字的廣告又可以自由選擇配色，到底該選擇哪一種廣告樣式才會有比較好的效益是個很複雜的問題。

Ghost 部落格平台（Blogging Platform）：以 Node.js 為基礎的開放原始碼部落格

Fri, 18 Oct 2013 15:40:14 +0800

Ghost 是一個開放原始碼的部落格平台，以一個全新的設計概念，試圖創造下一代的部落格。

Ghost 是一個新一代的部落格平台，目前還正在發展當中，在今年的 10 月 14 日它釋出了第一個版本（可以從它的官方網站註冊後下載），這個版本目前只包含一些比較基本的功能，其餘比較進階的功能還在開發中，未來 Ghost 也會仿照 WordPress 的方式，除了使用者下載安裝之外，也可以直接在線上申請一個免費的部落格空間來使用（類似現有的 *.blogspot.tw 這樣的網站）。

在選擇網頁空間時應該注意哪些重點？

Thu, 03 Oct 2013 07:12:53 +0800

現在網路上有許多免費或付費的網頁空間，這裡列出在選擇的時候，應該要考慮的一些重點。

網頁空間最基本的就是伺服器不能老是當機或是故障，這個部分就要看它的 uptime。

使用 DATA URI 將圖片以 Base64 編碼並內崁至網頁中，加速載入速度

Thu, 12 Sep 2013 08:04:29 +0800

這裡介紹如何使用 Data URI 的方式減少 HTTP 的請求（Request）數量，讓網頁載入速度變得更快。

為什麼要使用 Data URI？

網頁的載入速度對於一個網站而言是很重要的，在載入一張網頁時，瀏覽器會針對網頁中的每一個元素都產生一個 HTTP 請求（request），使用這些請求來跟伺服器取得這些元素，而網頁中的圖片就是最常見的例子，如果網頁中包含很多圖片，那麼網頁在載入時就會產生很多的請求，情況就會像這樣：

asm.js 架構與 Emscripten 編譯器：Mozilla 在網頁上發展出接近原生（Native）程式效能的 JavaScript 程式（一）

Tue, 02 Jul 2013 11:14:10 +0800

Mozilla 為了讓 JavaScript 執行得更快，因此發展了 asm.js 這個架構，在這個架構下，可以讓 JavaScript 的程式執行的效率提升很多，甚至可以很接近原生（native）程式的執行效能！

asm.js 架構與 Emscripten 編譯器：Mozilla 在網頁上發展出接近原生（Native）程式效能的 JavaScript 程式（二）

Tue, 02 Jul 2013 11:10:01 +0800

上一篇我們介紹了 asm.js 架構的說明，這裡我們直接來看以實際的程式所測試出來的標竿分析（benchmarking）。

標竿分析（Benchmarking）

標竿分析（benchmarking）是一個棘手的問題，在實際的問題中有很多應用程式可以用來做標竿分析，但是因為我們的瀏覽器環境有許多限制，像是有限制的網路環境、儲存空間、顯示卡語音效裝置等等，所以我們這裡只選擇一些比較單純的程式來測試。

asm.js 架構與 Emscripten 編譯器：Mozilla 在網頁上發展出接近原生（Native）程式效能的 JavaScript 程式（三）

Tue, 02 Jul 2013 11:03:24 +0800

上一篇的測試報告中，我們分析過基本的 asm.js 程式執行效能，大致上還不錯，這裡我們繼續討論更進階的主題。

進階測試結果

但很不幸的，實際情況往往會比較複雜，在你要使用 asm.js 架構開始開發程式或是跟同事大力推銷 asm.js 之前，你必須先注意幾個問題。

使用 MathJax 把 LaTeX 或 MathML 數學式子放進網頁

Tue, 11 Jun 2013 07:59:36 +0800

MathJax 這個 JavaScript 工具可以讓你直接使用 LaTeX、MathML 或 AsciiMath 的語法把數學式子寫進網頁中，它會自動幫你排版並產生 HTML、SVG 或是 MathML 的方程式，讓各種瀏覽器都可以看，效果幾乎跟傳統上的 LaTeX 一樣，非常厲害。

Java Servlet 的 HttpSessionListener 的使用方式：監控與統計伺服器的所有 session 狀態

Thu, 16 May 2013 15:14:07 +0800

網頁的 session 概念是現在網路應用程式都會使用的技術，而在 Java Servlet 中如果想要監控伺服器所有產生的 session，並做一些統計分析或記錄，可以透過實作 HttpSessionListener 這個介面（interface）的方式來達到。

使用 Tomcat 7 與 Java Servlet 3.0 API 實作 Asynchronous Servlets：提升伺服器效率的方案

Wed, 15 May 2013 15:17:05 +0800

在 Java Servlet 3.0 標準推出之前，如果想要實作 asynchronous 的 servlet 必須使用像 Comet 這樣的架構，而現在 Servlet 3.0 API 直接支援 asynchronous 與 synchronous 兩種模式，而因為這是公開的標準，所以寫好的 Servlet 可以很方便的移植到各種符合 Servlet 3.0 的 app server 中（例如 Tomcat 7 或是 GlassFish 3.x）。

用 Python 的 SimpleHTTPServer 模組快速建立一個臨時網頁伺服器（Web Server）

Sun, 12 May 2013 15:47:12 +0800

如果你需要一個簡單的 Web 伺服器做一些臨時性的工作，但又不想花很多時間去安裝像 Apache 這樣完整的網頁伺服器，那你可以試試看 Python 的 SimpleHTTPServer 模組，使用這個模組可以讓任何的目錄中的資料立即放上網路，而且不需要安裝其餘任何軟體，只需要 Python 就夠了。

以 iframe 解決 BloggerAds 部落格廣告載入卡住、拖慢網頁的問題

Tue, 02 Apr 2013 09:30:21 +0800

以華人的部落格來說，主要的廣告商除了 Google 龍頭的 AdSense 之外，就屬 BloggerAds 與 BlogAD 最普遍，而 BloggerAds 也是我的部落格常會放置的廣告，但是 BloggerAds 最令人詬病的一點就是，當網頁載入時，因為 BloggerAds 的 JavaScript 載入速度很慢（可能是因為 BloggerAds 的伺服器的問題），導致網頁中所有放在 BloggerAds 之後的東西都出不來。

使用 Vim 將程式碼排版並產生彩色的 HTML 網頁

Sat, 16 Mar 2013 09:54:38 +0800

如果想在網頁上貼上程式碼，最簡單的方式就是使用 <pre> 這個 HTML 標籤，但是這樣貼上去的程式碼會比較不好看，我們可以利用 Vim 裡面的一些功能，將程式碼自動排版之後，再轉換為 HTML 碼，這樣貼上網頁後比較容易閱讀，而且也可以自動處理一些 HTML 中的特殊字元。

修正 Google 部落格 Blogger 文章圖片超出邊框的問題

Wed, 06 Mar 2013 10:57:35 +0800

如果有在使用 Google 部落格 Blogger 的人應該會發現，在寫文章時貼上的圖片如果選的大小太大，就會超過文章的邊框，造成排版上的錯誤，這裡介紹如何加上簡單的 CSS 設定，自動修正這個問題。

在 Google 部落格 Blogger 加入「相關文章」（Related Posts）小工具教學

Tue, 05 Mar 2013 13:18:42 +0800

網路上許多部落格的文章結尾處，都會列出相關的其他文章，方便讀者閱讀與搜尋，這裡介紹如何在 Google 的部落格 Blogger 中加入「相關文章」（Related Posts）這個小工具。

如何在 Blogger 部落格放置 Google AdSense 廣告賺取收益

Mon, 18 Feb 2013 08:53:48 +0800

Google 的 AdSense 是一個可以讓網站或部落格透過廣告賺錢的一個計畫，只要從 Google AdSense 中註冊之後，就可以將 AdSense 的廣告放進自己的網站或部落格中，只要有人點擊網站或部落格中的廣告，Google AdSense 就會支付廣告的費用，大部分的網站與部落格都是靠著這樣的方式在賺錢的。

iconmonstr 免費圖示：簡單、時尚、創意的設計

Thu, 04 Oct 2012 07:10:45 +0800

iconmonstr 這個網站提供了很多黑白的圖示，然只使用黑白兩種顏色，但是卻充滿了時尚的設計創意，使用者可以自由下載這個網站裡所提供的任何圖示，並使用到自己開發的軟體或網頁上。

Tomcat 設定 SSL（HTTPS 加密）

Tue, 20 Mar 2012 09:35:13 +0800

記錄如何讓 Tomcat 支援 SSL 加密，因為工作太忙了，現在沒時間寫的那麼詳細，所以只記錄重點。

Tomcat SSL 設定

這是最直接的做法，首先產生 keysotre：

cd /usr/share/tomcat7
keytool -genkey -alias tomcat

再編輯 /etc/tomcat7/server.xml，開啟 SSL 功能：

Apache 設定 Proxy 功能

Wed, 08 Feb 2012 09:38:13 +0800

Apache 伺服器有一個 proxy 模組，可以讓網頁伺服器同時擁有 proxy 或 gateway 的功能，使用這個模組就不需要在安裝另一個 proxy 伺服器了。

這個功能分成好幾個模組，最基本的模組是 mod_proxy，其餘的依照其通訊協定分為 mod_proxy_http、mod_proxy_ftp、mod_proxy_ajp、mod_proxy_balancer 與 mod_proxy_connect，因此若是要使用其中一個或多個協定時，就先載入 mod_proxy 之後，在依照所需要的協定載入對應的模組，例如要使用 HTTP 網頁的 Proxy 就載入 mod_proxy_http 模組。