2012/12/25

展望 HTML5 未來新趨勢

關心網路發展趨勢的朋友一定知道, W3C 聯盟 (World Wide Web Consortium) 己在近日 (2012/12/17) 宣布完成了 HTML5 和 Canvas 2D 的規格定義, 接著將展開互通性 (Interoperability) 與效能方面的測試, 來確保 HTML5 能與各大瀏覽器達到最大的相容。W3C 除了在這一天推出 HTML5 規格的侯選推薦版本 ((Candidate Recommendation, CR) 之外, 並將按計畫於 2014 年推出 HTML5 最終規範, 正式讓 HTML5 成為網頁撰寫標準語言。不過, 為避免不同標準對推出的時程造成交互影響, Canvas、Web Sockets 和 Web 儲存等技術將會被獨立出來, 各自訂定計畫, 將不再納入 HTML5.x 發佈計畫裡面。

2012/10/31

個人密碼管理技巧分享

身處於網路時代, 到哪裡都需要使用帳號與密碼。我曾經小小估算了一下, 我曾經註冊過的網站至少有一百多個, 經常使用的也有將近五十個。這麼多的網站, 你要如何記得住密碼? 別說五十個了; 只要五個, 如果你不是每天都需要登入的話, 恐怕就會經常搞混。

2012/9/24

在 jQuery 自訂函式中實作 Optional Parameters

jQuery 的自訂函式事實上就是 jQuery 的外掛 (Plugin), 宣告的方式很簡單, 如下範例所示:

jQuery.f2c = function(fahrenheit) 
{ 
 return (fahrenheit-32) * 5/9; 
}

如此, 我們就建立了一個名字叫做 f2c 的外掛, 而且馬上就可以使用 $.f2c 予以呼叫:

2012/9/2

JavaScript 字串處理效能分析

作為一個前端語言, JavaScript 天生就註定要比其它任何一種語言要處理更多的字串。如何才能更有效地處理字串, 想必也是每個程式設計師最關心的問題。最近, 我看到有人很堅持地在程式中把個別的字串以陣列元素方式宣告, 然後把它們 join 起來, 說這樣才能達到最佳的效能, 其速度遠比使用字串的加號運算來得快! 起初我也半信半疑, 直到我寫了一個程式來仔細分析為止。

如果你沒有耐心的話, 我可以先把我的結論寫出來。如果你對我的分析過程有興趣, 可以再往下閱讀。

我的結論就是, 使用陣列的 join() 並不一定比使用字串的加號運算來得快; 二者的運算速度坦白說差異並沒有很大, 而且跟瀏覽器有絕對的關係。

2012/8/20

JavaScript 中的 Delegation

在物件導向理論中, 關於 Delegation (委託) 的概念, 有人說是由麻省理工學院 Media Lab 的首席研究員 Henry Lieberman 於 1986 年在 OOPLSA '86 Conference 中發表的一篇文章 ("Using prototypical objects to implement shared behavior in object-oriented systems") 裡面提出來之後, 才逐漸發揚光大。其實在這篇文章中, Lieberman 不只談到了委託, 他也談到了繼承。他同時提出了這兩種方法, 主要還是為了解決同一種問題 (亦即處理 "Shared Behavior" 的問題)。

2012/6/8

從 LinkedIn 密碼外洩事件看網站的保密策略

根據 Macworld 在 2012/6/6 所發表的一篇文章, 一位駭客聲稱已駭進 LinkedIn 的資料庫並盜走帳號資料, 然後把六百五十萬 (實際數字為 6,458,020) 個密碼公布在一個俄羅斯的論壇中作為證據 (僅公布密碼資料, 並無關連的帳戶名稱及其它資料) 並請求其他網友協助破解。這些密碼事實上並不是明文, 而是已經過 SHA-1 方式加密的。SHA 是 Secure Hash Algorithm 的縮寫, 中文翻譯為安全雜湊演算法; SHA-1 是在 1995 年發表, 另有 SHA-224、SHA-256、SHA-384 和 SHA-512 等演算法 (後四者常被併稱為 SHA-2)。

在這篇文章中, 也提及另一起關於 LinkedIn 的 iOS App 的個人隱私外洩事件。不過我認為那是單純的程式邏輯問題, 跟我在這裡想談的網站安全策略無關, 所以就此略過。

2012/6/5

引領潮流的 Windows 8

最近在閱讀 Charles Petzold 的 "Programming Windows 6th Edition", 看到作者回顧自己在撰寫 "Programming Windows" 第一版時, 他使用了一部裝了 80286 的 IBM PC/AT, CPU 時脈為 8MHz, 記憶體是 512KB, 另外配上一部 30MB 的硬碟。對現代的年輕人而言, 這種配備應該是不可思議的, 因為現在連一般手持裝置所使用的微處理器的規格, 恐怕都遠遠超越那個時代的 PC。

2012/5/14

使用 Timeline 自製噗浪式河道

Timeline 是一個 JavaScript 程式庫, 它並不是 jQuery 套件, 所以無需另外載入 jQuery 主程式(不過我檢查它的程式碼, 發現它實際上有調用 jQuery 1.7.1)。要如何解釋 Timeline 的功用, 這實在有點難; 但如果你是噗浪的愛用者, 那麼你馬上就可以心領神會。因為它使用起來幾乎跟噗浪一模一樣(只差不能留言跟按讚而已)!

基本上, 這個套件可以做出一個可以由左而右捲動的捲軸(以噗浪的術語稱為「河道」, 我以下也將稱之為河道), 並在其中顯示從你所給定的資料來源。當你選取一個資料時, 河道上方就會顯示較詳細的資料。不過它的時間軸方向跟噗浪相反。

2012/4/13

[VS11] VS11 對 Find/Replace 功能的增強

為因應使用者的意見反映, VS11 開發團隊在最近的 Beta 版本中, 針對 Find/Replace 功能做了一點小小的功能增強。如果你已經更新到最新的版本, 那麼你已經可以開始使用這些新功能。

或許你已經發現, 在 VS11 中, 要搜尋一段文字, 你不必在輸入搜尋字樣後按下 Enter; 當你一邊打字, VS11 就已經在同步進行搜尋。而且, 你可以使用滑鼠滾動程式區域, 而不是像 VS2010 一般在歷史搜尋字串之間巡迴。而所有搜尋到的字串, 會同時在 IDE 畫面中標示底色。光憑這一點便利性, 已經是過去所有版本的 VS 無可望其項背的了。

2012/4/10

[ASP.NET] 自訂 Server Control 的 CSS3 屬性

ASP.NET 到底有沒有支援 CSS3? 嚴格地說, 既然我們可以在 ASP.NET 專案及網頁中毫無障礙地自訂 Style, 那麼它當然有支援 CSS3。雖然在 Visual Studio 的 IDE 裡面, 或許它不能識別 CSS3 的 tag, 也不提供 intellisense, 但是那並不是 ASP.NET 的問題。

其實, 就像 ASP.NET Control 既有的 Font, ForeColor, Height, Width... 一樣, 這些屬性也都可以使用 CSS Style 來設定, 但是在 ASP.NET 中仍然把它們特別拉出來實作為屬性。在本文中, 我要做的就是同樣的事情。

2012/3/30

認清測試的本質與目的

作為一個由技術支援工程師和 QA 轉任 Developer 的資訊從業者, 我從很早就認識到一件殘酷的事實, 那就是測試是個苦差事 - 至少比多數軟體主管和部份軟體開發者所以為的還要辛苦。我不想倚老賣老, 但是我發現很多沒有真正從事過測試工作的開發者, 好像並沒有真正思考過測試工作的難度。在他們心中, 如果談到測試, 雖然會理所當然的認為一定要做測試, 但是真正分配來做測試的人, 遠比所需要的少。

測試到底是怎麼一回事? 又應該如何做才算適當?

2012/3/29

[CSS3] 使用 CSS3 製作 HTML 小時鐘

在 CSS3 中, 增加了一個 transform 功能, 使得我們可以對網頁元件進行放大、縮小、平移、旋轉、扭曲等等效果。我在本文中要介紹的是其中的 rotate 效果, 而且運用它來製作一個完全使用 HTML 標籤加上 CSS3, 不使用任何圖片的小時鐘。

在我開始介紹這個時鐘小工具之前, 你不妨往本網頁的右邊看一下, 在側邊欄的 jlClock 就是我的作品 (僅適用於 IE10、Chrome、FireFox、Opera 與 Safari 等瀏覽器; IE9 及以下版本不適用)。

2012/3/6

使用 XML 當作單元測試中的測試資料來源

MSDN 對單元測試的介紹中, 對單元測試的做了基本的介紹。站在我這個 former QA 的角度來看, 一般人如果只是照著上面的簡單介紹去做單元測試, 然後就以為單元測試只不過是這樣而已的話, 未免把單元測試看得太單純。事實上「使用資料驅動的單元測試」才是真正實用的。怎麼說呢? 因為, 如果我們不是餵給測試單元很多預先知道結果的測試資料去進行測試的話, 所謂的「自動化測試」只是空談罷了。為什麼團隊裡面必須有 QA 存在? 就是因為我們需要 QA 站在開發者的對立面, 試圖去找出開發者沒注意或甚至沒想到的弱點; 有攻有防, 才能確保產品的品質。

2012/3/3

(CSS3) text-shadow 詳解

text-shadow 是 CSS3 中一個蠻有趣的屬性。加上這個屬性之後, 文字馬上變得多彩多姿起來。簡單的講, 就如同它的字義, text-shadow 意思就是給文字加上陰影。以前我們必須使用繪圖軟體才能為文字套上這些特殊效果, 而且還要把它轉變成圖形。現在, 只要方便地賦予它 "text-shadow" 這個 CSS 屬性, 馬上就可以看到效果。

很可惜的, 並不是所有瀏覽器都支援 CSS3, 所以這個功能並不一定適用於每個使用者或每種瀏覽器(例如 IE6)。如果你的瀏覽器不支援 CSS3 的話, 你可能看不出以下每個範例所展現的各種效果。不過你可以先預覽一下以下這個截圖 -

2012/2/29

(WPF) 在 WPF 視窗中找到所有控制項

在 WPF 視窗裡, 控制項模型和 Windows Form 或 Web Form 之間都有或大或小的差異。就以巡覽控制項這件事來說吧, 你可能會和我一樣, 對於容器(包括視窗本身)都沒有提供 Controls 或 Items 屬性可用而深感不方便。它甚至也不提供像 XML 和 LINQ to XML 之下的各種巡覽功能, 像是 Descendants 屬性。

我最近打算在我的 WPF 程式中把某個 StackPanel 裡面的所有 TextBox 一次 Disable 或 Enable。在我最熟悉的 ASP.NET 中, 這是很簡單的一件事。如果是客戶端程式的話, 我甚至可以使用 jQuery 來輕鬆的辦到。很可惜, 在 WPF 程式中., 似乎並沒有提供現成的類似功能。

2012/2/9

(WPF) 在 WPF 視窗中開啟對話視窗 STEP BY STEP

在 WPF 程式中, 要開啟一個對話視窗的方法和在 Windows Form 裡面不太一樣。最顯著的差異, 在於 WPF 的 Button 控制項中並沒有 DialogResult 屬性可用。不過他們的基本原理還是差不多的。

以下我將示範如何在 WPF 加入對話視窗的祥細步驟。