Google Chrome常用延伸模組Extensions

迄目前為止，個人覺得Browser的UI操作便利性，仍以Maxthon(前MyIE2)最優，主要內建優勢功能有:

• Tab頁面上的「Copy Title + URL」(對應至: TabInfoCopy2)
• 滑鼠手勢 (對應至: Pig Toolbox)
• BookMark多欄顯示及觀看時隨時建立BookMark (對應至：[尚無])
• 頁面靜音 (對應至: MuteTab)
• 設定/BookMarks雲端化 (Chrome已內建支援)
• 雲端文字筆記本 (對應至: Evernote Web Clipper)
• Portable版本: 皆有，但因兩者都設定資料雲端化了，安裝至系統比較不會有相容問題。

可惜Maxthon後來走自己的Browser核心，往往出現Web頁面標準不相容(尤其是金融頁面)，加上現在官方修正版本速度變慢，逐步移至Google Chrome Portable版本。其他的Browser也都留著其Portable免安裝版本，以備不時之需。

因為曾用過好的UI介面(曾經滄海難為水)，Chrome剛出來時延伸套件不多，雖然速度輕快但不好用。最近使用新版本發現外掛變好用了，因此重新使用它為預設瀏覽器，並以本文介紹必備的延伸套件，簡單直覺的外掛直接提及名稱，不重砲火力介紹了。

 

Chrome使用版本: Version 25.0.1364.97 (本文更新: 2013/02/25)

更改語系:
Notepad C:\Documents and Settings\[UserAccount]\Local Settings\Application Data\Google\Chrome\User Data\Local State
搜尋: 「intl」(約第9行)，修改想要的語系字詞「zh-TW, en-US」

 

滑鼠手勢 (Pig Toolbox)

• 基本網頁手勢: (線條寬設6，青綠色比較好看)
  
• Super Drag: 在Link處滑鼠左鍵拖拉，開啟該連結頁面
  
  預設值未啟用，拖拉時放上面/右邊是背景地開啟Tab(不影響目前頁面觀看位置)。
• Close Left All Tabs: 關閉左側所有Tab頁面
  
  須自行定義滑鼠手勢。
• Close Right All Tabs: 關閉右側所有Tab頁面
  
  須自行定義滑鼠手勢。
• 建立頁面短網址:(goo.gl)
  

 

其他Extension

• 頁面文字繁簡切換：New Tong Wen Tang
  我個人看簡體已很習慣，會裝這個純為了複製成繁體文字給別人。Orz..

JavaScript Regex應用實例 - Youtube影片網址擷取

我對於網頁應用的JavaScript(以下簡稱JS)一直沒投注很大的心力，因為覺得JS語言結構較鬆散又沒有源碼保護，雖然半天就能學會該程式語言，但深入投資下去就知道細節痛苦，因此只是用它來簡單為表單欄位作選取處理，或搜尋網上別人的Sample語法，來完成自己的工作需求就好了。

網頁表單程式裏，面對User輸入的字串往往需要作格式化處理，雖然知道JS有Regex物件能有效處理這類需求，但一直懶得去看那種又怪又亂的蝌蚪文，總是簡單使用String函式搜尋/取代字串而己。不過隨著程式邏輯複雜了，無法容忍自己使用這種偷雞的編程作法，因此抽空看了一下JS RegEx的語法。我對於JS語言的正規學習是N年前的事了，後來發現新式的JS語法變得不太一樣，因此建議大家重新複習這語言，有經驗的人大概1小時內就能補回失去的進度。

網上很多JS語言的教學網，但整體感覺就像JS語言，都很鬆散又隨便，我發現w3cschool這網站最適合有經驗的人複習JS語言。而且它提供一個線上測試的程式，很方便測試JS的效果。扯了一大堆JS歷史而不進主題，主要還是覺得JS不太值得投資(個人偏見)，遇到需求網上搜尋別人的Sample Code，再用JS正規語法改寫這樣就好了。只是發現很多人寫的JS語法還是舊思維不優美，自己若仍繼承在危樓之上而不思正源解決，日後勢必會造成嚴重的維護負擔。

進入主題，此文章範例需求是讓User貼入Youtube影片的網址，利用JS把影片的Key值抽取出來。然而Youtube URL常見有3種格式，因此需要建立3種Regex Pattern來比對輸入字串並擷取Key值。這JS解決方案若仍採用字串搜尋/擷取函式是挺對自己青春不夠負責任的作法，因為任何需求項目具有重複性(loop)的話，就該正規面對並結構化地妥善解決。

	
var url = document.getElementById("ctrlVideoUrl").value;
var key = document.getElementById("ctrlVideoKey").value;


// Youtube URL (Samples).
var arrUrl = [
'http://www.youtube.com/watch?v=gWwOmf8N9gY&feature=player_embedded',
'<iframe width="640" height="360" src="http://www.youtube.com/embed/gWwOmf8N9gY?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>',
'http://youtu.be/gWwOmf8N9gY'
];


// Youtube RegEx Patterns. (Key值為word(英數+底線)及-符號)
var arrRegex = [
	/v=(\[\w-]+)/,
	/\/embed\/([\w-]+)/,
	/\/youtu.be\/([\w-]+)/
];


// Matching
var arrFound = null;
for (var i = 0; i < arrRegex.length; i++) {
  var arrFound = arrRegex[i].exec(url);
  if (arrFound != null) {
    break;
  }
}


// Result
if (arrFound != null) {
  alert("Matched, the value = " + arrFound[1]);  // Key='gWwOmf8N9gY’
}
else {
  alert("Sorry, Youtube URL is invald or not supported yet.");
}

FixedBitArray的Bitwise位元與UI控項的整合設計

UI畫面上的CheckBox勾選狀態，可以用一個Int32變數記憶32種變化，處理這種Bit值一般會用到System.Collections.BitArray類別，它其實是List<bool>的代名詞，可以配置成任意長的陣列長度，記憶體空間是bool(1-byte) * N(長度)。要節省整體記憶體的耗損，底層核心可以使用System.Collections.Specialized.BitVector32類別替代，不過些Bitwise操作類別通常是用完即丟的性質，因此在此我們暫時不考慮記憶體優化的問題，而使用BitArray來承接多個Int32變數的連接運算。

由於BitArray類別是可以任意變化長度的，但裏頭的函式很陽春，若只想抽取某陣列局部的Bits，或從讀取一個Int32變數置放其陣列的某些元素，都得自己處理，而且BitArray陣列沒有直接輸出成Int32值的函式，網路上有使用BitArray.CopyTo()的範例，卻有可能在處理byte等小長度的時候超出陣列範圍。

為了避免每次處理這些冗煩的需求，我寫了一個FixedBitArray類別來優化.NET下的BitArray，它能提供陣列操作時長度超出的問題(透過Capacity的指定)，而且能讀取任一Int32值來改變自己的陣列元素值。這Helper類別本身沒啥特別技術含量，但在處理Bits陣列的操作非常便利。

要使用FixedBitArray來記憶UI中的多個CheckBox控制項勾選狀況，若用array[0] = true/false位置法不僅難以記憶且容易混洧，最好的方式是使用Enum列舉的項目，這些列舉項目會自動對號入座，不僅在程式上易於閱讀，也很方便維護。

如此一來，透過一些程式設計巧思及Enum列舉型別，將底層二進位的Bit位元技術，結合Mapping到上層UI控制項的呈現控制，相當有意思。

RadGrid欄位排序引發的Script Error

在IE10裏，預設的RadGrid在欄位排序按第3次時會發現Script Error如下: (Firefox, Maxthon不會觸發Error)

Line: 15
Error: Sys.WebForms.PageRequestManagerServerErrorException: Exception has been thrown by the target of an invocation.

原來是第3種SortMode=”No Sort”引發這client錯誤，其實應該要排除No Sort這狀況：<MasterTableView AllowNaturalSort="False">即可，詳細的排序可參考官方網站解說。

另外，你的DataSource之SQL語法含有JOIN語法，對於Join Table的欄位要明確給有Alias名稱指定：

SQL:
SELECT * FROM Table1 a LEFT JOIN Table2 b ON b.ItemId=a.SerialId

ASPX:
<telerik:GridBoundColumn HeaderText="序號" UniqueName="SerialId" DataField="SerialId" SortExpression="a.SerialId">

PayPal付款貼心從餘額先扣除

當初申請PayPal帳戶時，認證信用卡時它會先嘗試從銀行進行一筆扣款測試，所以PayPal帳戶裏就得到額餘點數。一直也沒機會花用這些餘額，後來發現付款時（經過N年後），若餘額款項不足以付款時，剩下的差額才會向信用卡銀行申請支付。

這樣蠻好的，畢竟PayPal要把虛擬點數存入銀行，得付些手續費。
 

目前實際使用過美金支付的PayPal及人民幣的支付寶(Alipay)，通常都是花在電子服務或贊助上，畢竟被取得網上更進階的服務，還是的花錢投資的。

TeamViewer主機聯絡清單記憶

當你使用TeamViewer作遠端桌面連線時，可曾抱怨怎麼沒有Bookmark基本的功能？把曾連線過的主機ID/PW記憶起來，不是很基本的該做的嗎？

原來官方把這功能做在它的線上帳戶（Account)的聯絡人下，所以你得先註冊線上帳號才行。
 

它除了幫你作記憶管理外，還能觀察遠端主機是否正常，算是一種另類的主機監看功能。

USB To LPT轉接線

現在新的微小電腦為了節省空間，有些甚至拿掉LPT Port (25-Pin母), 不過在某些領域還是會使用LPT來連結印表機。為了讓筆電NB能連接LPT埠印表機，因此購買了一條USB to LPT (Printer)的轉接線(NT$260)。


凡涉及USB轉接線，首先你必須關注是否驅動程式支援你的OS及32/64 Bit平台，因為它必須在裝置管理員裏，形成一個「USB虛擬列印埠」。不過當你在PChome或拍賣上詢問支援程度，總是看不到肯定的答案，愈便宜的極大可能會在64位元OS平台遇到驅動程式觸礁的狀況，而且穩定上是否OK也極擔心。既然賣家們對於安裝平台資訊都語焉不詳，我會強烈建議你在可退貨的購物平台上，購買有技術客服服務電話的廠家品牌，若真的不支援通常可以據此退貨。每次購買這種需配合平台支援性的商品，發現台灣的購物平台欠缺像大陸淘寶即時問答的溝通平台，覺得真的很糟糕。Sales或許因專業上常無法深入了解規格的適用性，但龐大的問與答及客戶測試回饋資訊，可以大大地輔助這方面的不足。
以下我就提供自己的使用回饋報告，提供給需要購買此類轉接線的人參考：

1. 選擇有良好驅動程式支援的品牌及可退貨的購物平台(貴一點沒關係，買到不能用才慘)。
2. 印表機的LPT接頭是36-Pin母，電腦的標準LPT埠是25-Pin母，所以正規的LPT連接線材是36-Pin公+25-Pin公。若你選擇USB to LPT接線，通常LPT的接頭就是36-Pin公(常見的)，若你懶得在印表機LPT埠拔來拔去，也可以買36-Pin母，再接上印表機既有的連線接即可，但要注意整體的長度，太長訊號會不穩(多長不穩我沒實務經驗，一般USB不超過3米，上限5米，超過要使用訊號加強器)。
3. 技術客服會跟你說這類產品不附驅動程式，其實也對，因為只要走IEEE 1284標準，Windows內建USB虛擬列印埠驅動，當你接上該線時，裝置管理員會出現下圖類似的裝置。
   
4. 接著在印表機的「屬性->Ports」內容裏，你可看到以「USB」開頭的裝置，勾選它即可。
   
5. 如此一來，即可將文件順利寄至LPT印表機了。雖然它不會形成虛擬的LPT埠，但你依然可以透過Printer Win API去傳送byte[]資料給USB虛擬印表埠，跟直接用File IO寫入LPT埠是一樣的效果。
6. 若是要模擬更多LPT相關標準，我就沒再深入研究了，建議新的週邊裝置，還是儘量買USB或COM埠比較常見。

ShortcutStrip移除捷徑的附加命名

Windows的下方Taskbar可以設定工具列，指定到一個資料夾內，假如我們在其內放置常見的程式捷徑，日後重灌系統就免除了建立麻煩。尤其現在很多Portable免安裝程式，固定的放置位置很需要好好管理這些程式捷徑。

當你建立捷徑(*.lnk)時，Windows預設會以原檔名加上「 - 捷徑」為命名方式，因此寫了一個小程式來移除這些附加的字串：
 

程式也允許自行管理欲搜尋清除的字串，在「File>Load/Create Custom Marks」可建立此文字檔，如此你也可以用這個工具作些檔名/目錄名稱的管理工作。

Download from Dropbox (NET 4.0, Portable, 46.42KB, 2013/01/27 updated)

RJ-45扁平網路線

在PChome購物得到了一個RJ-45 Cat.6的扁平網路線贈品，相較以前看過的捲尺式網線更為厚實，也比傳統的網路絞線更容易收納，雖然拉直時會呈現捲捲縐縐的，但綑綁起來就很細小。
 
傳統的網路絞線設計可以有效抗干擾，有品質的的扁平線也會有十字交疊設計，效果應該都還可以，目前扁平線價格約為傳統的2倍。

扁平線要自己壓接頭估計不容易，而且它也不容易佈線(線材容易縐)，而且長距離的穩定性也有待觀察。不過若是應用於個人攜帶上，我覺得它會比傳統線材更棒。至於下面這種設計很薄的捲尺線，收線雖容易，價格就不親民了，而且做得太薄，其接頭通常容易斷裂。

階層式項目(Hierarchy)網頁設計Pattern

網站後台管理UI設計裏，通常Table項目維護都使用「Grid」列表方式作列表維護，遇到階層式或Master-Details的顯示，傳統的子層跳頁或內嵌顯示方式，都會讓整個UI介面顯得不夠清爽。

對User而言，要表現出資料的階層式關係即可，介面上儘量力求簡單。對Programmer而言，頁面程式要好複製，利用DB Hierarchy架構可以共用相同的Table，而下方的UI設計Pattern可以求得平衡。

例如要開發Master-Details架構，只要複製ASPX頁面，設定好頁面的隱藏Key值, 設計好右側頁面的UI控件呈現，基本的CRUD架構就形成。

左側樹狀選單使用AJAX方式，動態取子層的項目列表，而且可以透過滑鼠左鍵拖曳讓Item在階層裏移動、改變顯示順序。遇到複雜的項目維護，拉到磞出的Window視窗再作操作。

此Pattern因採用樹狀選單UI來表達階層式視覺分類(若子項多的話，宜用Grid+條件搜尋來操作)，比起傳統的一層List顯示方式或Master-Details Grid，會更清楚，且支援更複雜的表單內容設計。

考量開發成本及Reuse效益，我習慣在ASPX頁面作很多隱藏參數設定，程式員只要調整其值，即可符合多數的資料維護管理需求。至於DB設計，所有網站只需要一個Table即可，即使為了資料維護便利拆分成不同Table，其實Schema架構都差不多。

至於是否要使用程式產生器(Code Generator)產生這些程式碼，其實DB及UI都一致，使用人工方式複製、修改+客製化校正，跟產生器設定時間上都差不多。除非有大量重複性客源開發需求，否則也不太需要。

總言之，UI的呈現還是要看客戶需求而定，這個Pattern只是少量分類項目Table維護的一種UI呈現而己，特別適合「分類項目」的資料維護。對沒耐心的程序員來說，這種小Table的CRUD程式很簡單，但卻是一再重複的Dirty Work，特別會扼殺編程樂趣。對客戶來說，傳統的Grid列表較無法簡單呈現資料分類設計，更無法視覺上讓項目在分類間裏移動，而這UI Pattern正因此而生。