Pages

2013-02-25

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

 

其他Extension

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

2013-02-21

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.");
}

W3CSchool TryIt

2013-02-08

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 CodeSnipet

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

FixedBitArray UI

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