griddle.it:幫助網頁設計與排版的小工具

griddle.it 是一個可以幫助網頁排版的小工具,讓您在設計版面時可以比較方便的對齊各個網頁元素。


在設計網頁的排版時,通常都會需要控制版面的寬度,並且讓不同元素保持對齊,而 griddle.it 就是一個很簡單的輔助小工具,他可以動態產生一個參考用的背景圖,圖上面會標明各種不同的像素寬度,讓您在設計網頁時,可以更方便掌握不同網頁元素的位置。

Apple 官方釋出 Mac OS X 的 Bash CVE-2014-6271 漏洞修補更新程式

Apple 官方已經釋出了 Bash 漏洞 CVE-2014-6271 的修補程式,請儘速更新您的 Mac OS X 系統。


蘋果官方針對這次的 Bash 漏洞,提供了一個適用於 Mac OS X Lion、Mountain Lion 與 Mavericks 修補程式,不過這次的更新程式不是透過 App Store,而是要自行下載。

適合兒童觀賞的教育性免費卡通動畫整理

這裡我篩選了一些比較具有教育性的卡通動畫,這類的卡通比較適合讓小朋友來看。


現在許多的電視節目與卡通動畫,都不太適合小朋友觀看,因為孩童很容易模仿,所以應該要挑選適合的動畫給小朋友看,才不會讓小孩子學習到不好的習慣。

Google Chrome 隱藏版小遊戲,網路斷線時才會出現

最新版的 Google Chrome 新增了一個隱藏的小遊戲,而這個遊戲只有在離線的狀態下才會出現。


Google 在 Chrome Canary 這個開發人員測試版中加入了一個有趣的小遊戲,這個遊戲只有在網路斷線的狀況下才會出現,不知道是不是要讓我們在沒有網路時可以打發時間。

從 Wordpress 匯入 Blogger 的文章,部落格搬家過程紀錄

這裡紀錄我如何從 WordPress 中匯入 Blogger 部落格上面的文章,更換部落格平台的過程。


如果您是使用 Blogger 寫文章的部落客,想要嘗試更換部落格平台的話,WordPress 是一個不錯的選擇,其使用者族群廣大,支援的套件也很多,以下是我個人嘗試自己架設 WordPress 部落格,將 Blogger 搬家至 WordPress 的過程。

檢查自己的 Ubuntu Linux 系統是否還在官方維護期之內

這裡教大家如何檢查自己的 Ubuntu Linux 系統是否還在官方的維護期之內,如果使用官方已經停止維護的舊版本,就很容易會有安全性的問題。


Ubuntu 是一個很熱門的 Linux 發行版,大約每半年就會釋出一個新版本,而當舊的版本到達其維護期限之時候,就會停止更新,而不同版本的 Ubuntu 其維護期限也不同。

Bash 嚴重漏洞 CVE-2014-6271 的修補方式

這兩天 Bash Shell 被發現有一個嚴重的漏洞,可以讓一般使用者輕易取得管理者權限,這會讓大部份的 Linux 與 Mac OS X 系統都有被入侵的高風險。


在今年 4 月初爆發的 HeartBleed Bug 在當時造成了很大的風波,不過現在 Bash Shell 又出了一個更嚴重的大漏洞,這個漏洞可以讓一般使用者在 Bash 指令設定環境變數時,可以越過權限檢查,直接執行夾帶的命令,駭客可以利用這樣的方式輕易取得主機的管理者(root)權限,非常危險。

由於目前幾乎所有的 Linux 與 Mac OS X 都是使用 Bash 作為預設的 Shell,所以這項漏洞所影響的範圍會非常大,基本上可以說所有的 Linux 與 Mac OS X 都會有影響,如果您有任何 Linux 或是 Mac OS X 的主機,請立即進行修補。

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

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


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

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

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

TP-LINK 的 TL-WR741ND 路由器(router)

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

不過如果您需要時常更換 IP 位址,老是使用手動的方式也不是辦法,這時候就可以寫一個小程式,模擬手動斷線與重新連線的動作,達到自動更換 IP 位址的功能,以下是各種語言的實作方式。

Linux 忘記密碼?以 GRUB 開機進入單機模式(Single User Mode)修改 root 密碼

Linux 忘記登入的密碼怎麼辦?以 GRUB 開機進入單機模式,即可輕鬆修改密碼,不用重灌,這裡有詳細的教學。


忘記 Linux 密碼導致無法登入是一個很常見的問題,如果是初學者不會處理,最後無可奈何大都只好重灌,其實重設 Linux 密碼的過程並不難,以下我們以 Ubuntu Linux 為例,示範如何以 GRUB 開機進入單機模式(Single User Mode),用指令重新設定 Linux 的密碼。

只花 202 元買完所有紅米 1S 的手機配件!

最近小米連續兩天促銷紅米的配件,兩天花了 202 元買完所有紅米 1S 的手機配件。


最近運氣不錯,剛好碰到小米在促銷紅米的配件,第一天紅米座充與電池加上保護貼只要 1 元,第二天則是保護套加上耳機也是 1 元,兩天我都買到,加上運費總共花了 202 元,就把所有該買的都買齊了。

Memtest86+ 使用教學:測試記憶體是否有問題的軟體工具

這裡介紹如何使用 Memtest86+ 這個最熱門的記憶體測試程式來檢測記憶體,檢查記憶體是否有損壞。


一般如果電腦使用了一段時間之後,常常發生莫名其妙的當機(死當,連滑鼠鍵盤都失效)、或是自己重開機等不穩定現象,這樣的狀況就有可能是記憶體損壞所造成的,可以先測試一下記憶體,如果是記憶體壞了,通常換一下記憶體就好了。

另外當我們在採購新電腦時,剛買來的記憶體通常也都會先進行一下記憶體測試,看看記憶體是否有損壞,如果發現新的記憶體有問題,可以立即跟商家反應換貨。

用 Skype 解決智慧型手機無法撥打 0800 免付費電話的問題

這裡教大家如何使用智慧型手機以 Skype 直接撥打 0800 免付費電話,既方便而且完全免費。


市面上許多 0800 免付費電話都限制只能使用市內電話來撥打,如果出門在外不方便使用市話的時候,就很麻煩了。

不過這個問題可以使用 Skype 來解決,只要您的智慧型手機安裝了 Skype,就可以直接使用 Skype 撥打 0800 的免付費電話,而且同樣是免費的,Skype 也不需要預先儲值,很方便。

HTML5 的日期輸入功能教學

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


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

紙藝網站整理:摺紙、紙模型等素材與教學

這裡整理了許多關於紙藝的教學網站,包含摺紙、紙模型等教學,適合家長帶著小朋友一起來製作。

紙鶴

WebRTC 入門教學(二):以 RTCPeerConnection 建立 Peer-to-peer 連線

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


ICE 架構

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

ICE 靠著 STUNTURN 協定來處理 NAT 穿透(NAT traversal)與其他棘手的問題。

WebRTC 入門教學(一):多媒體影像串流擷取

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


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

在另一方面,對於開發者而言,這樣的外掛程式在開發、除錯與維護的難度會比一般的程式還要高,相較於一般的網頁應用程式而言,通常會需要引入許多額外的技術才能達成這樣的需求。

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

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


一般 HTML 的 ordered lists(ol)呈現的效果是這樣:
  1. 這是第一個項目
  2. 這是第二個項目
  3. 這是第三個項目
  4. 這是第四個項目
  5. 這是第五個項目
我們這裡介紹如何使用 CSS 自訂每一個項目的編號:
  1. 這是第一個項目
  2. 這是第二個項目
  3. 這是第三個項目
  4. 這是第四個項目
  5. 這是第五個項目

從 Windows 中找回忘記的 WiFi 無線網路密碼

這裡教大家如何在 Windows 中查看儲存在電腦中的 WiFi 無線網路密碼,這在忘記密碼時很好用。


通常我們自己家中的 WiFi 無線網路都會設定一組密碼來保護網路的安全,不過通常一般人都會將密碼直接儲存在電腦或是手機中,這樣才不用每次連上網路時都要打密碼。雖然這樣將密碼儲存起來讓電腦自動登入無線網路很方便,不過時間一久也很容易把密碼忘記,如果有一天突然有新的設備要輸入密碼時,就比較頭痛了。

啟用 Windows 7 內建的 Telnet 功能,不用安裝軟體即可連上 BBS 站

這裡介紹如何啟用 Windows 7 內建的 Telnet,在不需要下載或安裝任何軟體的情況下,連上一般的 BBS 站。

批踢踢(PTT)BBS 站

在以前 Windows XP 中,我們如果在命令提示字元(cmd)下,直接執行
telnet ptt.cc
就可以連上 PTT BBS 站,不過在 Windows 7 中,由於預設的情況下沒有開啟 Telnet 的功能,所以執行這行指令會出現這樣的錯誤訊息:
'telnet' 不是內部或外部命令、可執行的程式或批次檔。
而解決的方法就是將系統的「Telnet 用戶端」功能啟用即可,以下是操作步驟。

將 64GB 的 MicroSD 卡格式化為 FAT32 給手機使用

這裡介紹如何在 Windows 中將 64GB 的 MicroSD 卡格式化為 FAT32,給不支援 ExFAT 格式的手機使用。


最近我剛買了一隻紅米 1S 手機,雖然在官方網站上的規格表標明其記憶卡可以支援到 64GB。

Color Thief:取得圖片中的主要顏色與色盤(Palette)

Color Thief 是一個有趣的網頁小工具,透過 JavaScript 將圖片的主要顏色整理出來,顯示其色盤(palette)。


Color Thief 是一個開放原始碼的網頁小工具,它可以透過簡單的 JavaScript 就取得圖片中的主要顏色與色盤,您可以直接透過其官方網站的範例,來了解它的功能。

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

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


安裝 Composer


Linux 與 Mac OS X

如果是在 Linux 或是 Mac OS X 中,可以使用簡單的指令來將 Composer 安裝在自己的目錄中:
curl -sS https://getcomposer.org/installer | php
如果這個方式無法成功安裝的話,可以再嘗試另外一個方式:
php -r "readfile('https://getcomposer.org/installer');" | php
在預設的狀況下,它會檢查一些 PHP 的相關設定,並且下載一個 composer.phar 檔案到目前的目錄中,這個檔案是一個 PHAR(PHP archive)檔,包含了所有 Composer 執行所需要的檔案。

各種範例圖片產生器,網頁版面設計的好工具

這裡介紹各種範例圖片產生器,可以讓網頁設計師在設計版面時,快速產生任意大小的範例圖片。


當我們在設計網頁版面時,常常會因為調整版面而需要不同大小的圖檔來測試整體的視覺效果,在整個設計過程中,通常會不斷地反覆變動版面與圖片大小,如果每次測試都要針對不同的大小來切圖,是一件很費工的事情,以下我們介紹一些好用的工具,可以幫助我們克服這樣的問題。

Whiteboard Fox:免費的線上白板,即時同步分享手繪圖表

Whiteboard Fox 是一個線上白板,可以讓您在上面直接畫圖,即時跟任何人分享,而且對方也可以及時修改您所繪製的圖形。


現在網際網路非常發達,大多數人都會使用 LINE 或 Skype 等聊天軟體來溝通,既方便又經濟,不過這類的軟體大概都只能使用語音或是視訊等方式來溝通,如果要討論一些比較複雜的計劃或架構圖時,只用打字或是直接用講可能會不太清楚,如果有個白板可以把整個討論內容畫下來,就很方便了。

使用 Vimdiff 比較檔案間的差異

這裡介紹如何使用 Vimdiff 來比較兩個檔案之間的差異,這個小工具可以讓開發者在檢查不同版本的程式碼時輕鬆很多。


一般在 Linux 系統中,如果要比較兩個文字檔案的差異,最常見的方式就是使用 diff 指令:
diff FILE_LEFT FILE_RIGHT
不過因為 diff 的功能有限,要靠 diff 來辨識檔案之間的差異處也不是很方便,如果您會使用 Vim 這個編輯器,那麼改用 vimdiff 會方便許多。