Pages

2013-11-23

多國語言的選單設計

以下是Agoda訂房網站的多國語言選單,面對外國人訂房的服務,多國語言的資訊顯示是必要的。Agoda語言選單顯示國旗及各國的語言文字,立意雖好(各看各的),但我發現這樣有個盲點,就是要複製該國旅館地址原文字時(以便讓當地計程車司機了解),若不熟該國的國旗圖示及文字,這樣的選單切換就不容易選擇了。

Multilingual Menu

英語(English)目前是國際共通語言,個人覺得還是選單項目文字仍是以「英文+當地文字」(例如:Taiwan - 台灣)會更貼心些。

2013-11-18

線上傳真MyFax免費試用

若家裏沒有傳真機又懶得去便利商店傳真(每頁15元),可以透過MyFax網站的線上傳真免費試用服務,每個Email郵件一天可傳2份文件。

http://www.myfax.com/free/ (使用此網址而不要從官方首頁進入)

MyFax Free Trial

其中在輸入傳真號碼時,記得要使用它的下拉提示選單,選擇Taipei項目才允許輸入9碼 (預設只有8碼)。按傳送後,它會寄確認信到你填入的Email信箱,點擊後它才開始傳真到此號碼。

MyFax Confirm

無論傳真成功與否,它都會寄封Email通知你,由於是國外服務Email來信慢了些,約5分鐘內。以下是我第一次傳就遇到失敗的通知訊息:

MyFax Transfer Failed

似乎它在處理PDF轉印成TIF似乎有問題,為了相容性,我就把PDF先轉成GIF再傳(有10M檔案Size限制,因此我選擇存成GIF檔案較小),減少對方轉換失敗機率。最後,我終於成功了。

MyFax Transfer Succeed

2013-11-07

快速螢幕擷圖貼在LINE對話

一般的通訊對話軟體,對話裏都能傳送圖檔,但就是無法像word一樣,直接Ctrl+V直接貼圖,更別說提供擷取螢幕畫面的工具。而且傳送的圖片還得存成圖檔後才能打開,而不是對讓方直接預覽,這些繁瑣分享圖片的麻煩,在大陸QQ通訊軟件裏卻完全不存在,因為QQ對話提供螢幕擷圖工具,甚至能分享遠端畫面、語音通話等互動功能。

QQ Image Snap

LINE軟體是目前很流行手機通訊軟體,但其電腦版本的對話貼圖仍不夠直覺,必須選擇檔案傳送,而非直接Ctrl+V貼圖。為了能快速在LINE上擷螢幕畫面,我透過QQ軟體對話框裏的擷圖工具,將其圖片直接用滑鼠拖曳至LINE的對話框,就達到相同的功能了。

QQ Image To LINE

希望LINE日後能提供像QQ方便的螢幕擷圖或Clipboard貼圖的功能,見賢思齊吧!

2013-11-06

解決VM裏迅雷下載CPU滿載100%問題

我習慣將大陸軟件裝在VM裏,以避免「一鍵完成」軟件文化背後的暴力強植問題(亂裝一堆東西)。在預設VMware設定下,常發現迅雷開始快速下載時,CPU會飆升至100%,我誤以為VM Guest OS是XP的關係(可能對網路下載多執行緒管理失當),陸續換了Win2003及Win2008依然不見好解,因此排除是OS世代問題。

發現VMware預設的Processors是1,以我的電腦實體CPU是Intel i7-3630QM而言,規格為1 Processor , 4 Cores, 8 Threads,應該調整成下圖方框Processor VM配置才對。

VM CPU Settings

我在x64平台下,實體CPU能到8個Threads,不過VM Guest能有4個Threads也行,留一點給VM外的系統使用。發現迅雷高速下載時,CPU已不會卡在100%滿載了。

 XunLei CPU Usage

最後,我的VM Guest使用Windows 2003 OS, 配置2GB RAM,跑4核CPU下運作,一切正常。不禁聯想到以前使用預設值跑VM,估計只發揮到實體CPU的25%效能而己(磨刀霍霍ing)。

2013-09-29

清除Android的檔案關聯

若你有勾選Android下預設開檔的應用程式時,若要清除這樣的檔案關聯:

Default Open

可以在「設定/應用程式/項目內容」清除這樣的檔案關聯。

Default Clean

2013-09-23

SQL去除欄位前後空白及斷行字元

SQL 中的 TRIM 函數是用來移除掉一個字串中的字頭或字尾。最常見的用途是移除字首或字尾的空白。這個函數在不同的資料庫中有不同的名稱:

MySQL: TRIM(), RTRIM(), LTRIM()
Oracle: RTRIM(), LTRIM()
SQL Server: RTRIM(), LTRIM()

SQL Server及Oracle沒有TRIM()函數,因此可用下列的語法清除:

-- SQL去除斷行字元 (1st)
UPDATE [Donor]
SET [DonorList] = REPLACE(([DonorList]), CHAR(13) + CHAR(10), '');

-- SQL去除前後空白 (2rd)
UPDATE [Donor]
SET [DonorList] = LTRIM(RTRIM([DonorList]));

而UI裏該欄位也要在異動資料時,自動去除斷行及空白字元。

// C#去除斷行及空白字元
this.ctrlDonorList.Text = this.ctrlDonorList.Text.Trim('\r', '\n', ' ');

如此內服外敷,即可藥到病除。

2013-09-12

VMware Gateway IP為指定網段.2

VMware的NAT設定,其虛擬子網段的Gateway IP應該要指定為.2,而設定從.1開始,就會發生間歇性DNS斷線的靈異現象。當然,這是經過自己血淚的測試後,才會去找官方文件一探究竟。

Gateway IP

原來VMware虛擬網段的規則是:「The range from 192.168.x.3 - 127 can be used for static ip. 128-254 is the default VMware DHCP range, .1 is the host adapter and .2 is the NAT device.」。既然VMware官方風格約定成俗,若自己硬要自行規劃,就容易跟內定的值相衝突,踩到地雷而自悶了。

2013-09-01

中文數字國字大寫轉換

財務報表程式常會遇到將金額轉換成中文國字大寫的需求,這類的處理邏輯直接上網搜尋別人寫的程式碼比較快,連研究裏頭的程式邏輯都懶了。

Chinese Number

微軟有提供「Microsoft Visual Studio International Feature Pack 2.0」元件可以處理這一塊,但它有301轉換語意的bug,而且是2009年的作品,沒再更新了。

網上找了別人分享的語法,測試後可行。但裏頭邏輯寫得很複雜難懂,暫時將就。

Mess Code

待後來有時間研究想整理上面的程式碼時,覺得應該有更好的作法,搜尋下發現更洗鍊優美的寫法。看到這樣優美的Code,很難說服自己「將就」使用混亂的Code。

Good Code

作者的原始轉換程式碼在處理大金額時單位呈現有些小問題,我修正後回饋至其回文串裏。為了搭配合作者優美的程式寫法,修正碼中的搜尋移除重複的演算法,也特別洗鍊。

2013-08-28

快速登入Wi-Fi熱點 (Taiwan)

我常使用台北市的免費WiFi服務,但它每次都得開瀏覽器登入帳密,雖說現在都能自動轉址登入,但是開啟Browser這動作是免不了,非常地麻煩又不直覺。

幸好有人開發這快速連入這些熱點的APP,請至這兒下載:

WiFi Taiwan

編輯好帳密,以後只要一鍵就能連入,多麼方便呀! 台北市最理想是應該要開放WiFi免登入,若堅持要實名制可以利用連線時取得的網卡MAC Address及註冊地點來辨識,只要能Session連線時間及Location,事後要追查也都容易。

即使為了管制不得不每次連線得登入帳密,官方也該提供快速登入的機制以便民,不能老是靠民眾自己來呀! 畢竟要開發這些快速登入的配套措施,由原廠商來做是最容易的。

值得注意的是,若同時NB及手機要使用同一熱點,同一帳號是無法同時登入使用的。高度使用人士同時擁有多帳號,也是必須的。

2013-08-25

取消NotePad++內Link字串連結

在NotePad++ 6.2.3之前,文件中的link字串會自動產生底線連結,導致編輯時要選取文字,常常會誤點擊而磞出瀏覽器,相當討人厭。

Clickable Link

在偏好設定裏找不到取消的方式,如今發現新版本都有取消的選項:

Disable Link

世界從此變得更美好。

NotePad++主要用途就是編輯文字,而非觀看文章為主。作者以前的UI立意雖良善,卻造成用戶的困擾。記得在以往不少程式專案裏的功能,開發者的觀點常常也和用戶相左,我覺得讓它變成一個可選擇的參數是最好。微軟Windows 8.x的Start Menu不出現以往熟悉的階層程式選單,及VS.NET 2012上方選單Menu全大寫的莫名堅持,充份反應出公司內部某些失心瘋者的偏見,當不顯著違反設計精神時,讓用戶能自由選擇是件好事。

2013-08-16

RadAsyncUpload的上傳檔案Size檢查

Telerik RadAsyncUpload控件要檢查上傳檔案Size,通常是使用其OnClientValidationFailed(sender, args)事件,當選取的檔案不符合副檔名或超過MaxFileSize時,就會觸發進入此Client事件。

function onClientValidationFailed(sender, args) {
if (sender.isExtensionValid(args.get_fileName())) {
alert("File size is exceeded!");
}
else {
alert("File type is different than allowed!")
}
}
要取出選取上傳檔案的副檔名,只需要對fileName做處理即可,但奇怪的就是,選取檔案的長度,此函式卻不提供! 官方說明指出控件實作上沒有此FileSize資訊,不過可以透過下面的JS語法取得html element內的值。
var jQueryRowObject = $telerik.$(args.get_row());
var fileSize = jQueryRowObject.find("input")[0].files[0].size;
既然能觸發Invalid事件,為何無法提供FileSize值呢?且不深究,能解決就好!

FileUpload Size

2013-08-11

Chrome下擋廣告視窗AdBlock

若是使用Google Chrome,要擋線上廣告Popup視窗,最常見的就屬以下兩套Extension擴件:

  1. AdBlock
  2. Adblock Plus (簡稱ABP)

AD Block

選擇哪一個比較好呢?考慮的角度通常是:擋廣告效果及載入速度。

有些廣告視窗無法自動擋住,就必須手動加入讓擋廣告擴件學習,以操作介面及載入速度來看,ABP都是屬於較佳的,詳見這篇比較文章

Manual Block

而我,兩套都裝。

2013-07-31

Motorola Milestone2智能手機刷機流程

我的第一部智能手機是Motorola Milestone2,於2011年2月1日上市時預購買的,有實體鍵盤的手機(1Ghz, 512MB Ram, 8GB ROM)。Moto官方對於系統的升級很不積極,所以自己靠一些付費型APK打造系統友善操作環境(Android 2.2),不過隨著時間推移,老Moto不死,只是凋零了。

原本也就想這樣用到此手機壞掉就好,無奈系統隨著升級一些APP新版本後又呈現卡頓,也為了跑一些自己學習Android軟體開發的小程式,加上對刷機的相關名詞及流程熟悉後,就興起刷的第3方ROM的想法。

Android版本市佔統計,v2.3.x與v4.0.x的Android手機佔75%以上,所以鎖定在這兩版本的ROM上。國外XDA的ROM版本很多,不過Moto硬體已老禁不住折騰,因此還是選擇大陸的MIUI整合版本。為了效能流暢,我先試裝了v2.3.7的MIUI ROM,但發現在整合google帳戶時有程式錯誤問題,直到找到v4.0.4這版本,才一切順利。用了幾天下來,覺得這ROM的版本挺好。


刷机包ROM下载-ROM之家官网
http://www.romzhijia.net/romdetail/93F1B372-BA96-4BDE-A186-671F0D4DE5D2

這次刷機,也發現很多ROM資源,因此就把整個Moto刷機流程及找ROM作了比較詳盡的文件記錄,算是圖文並茂,分享出享給大家。目前MIUI + Android v4.0.4版本ROM我挺滿意的,或許是我對智能手機並不倚賴,為了避免卡頓,對於沒必要的APP一律就不升級新版本。Moto硬體已老,畢竟是不爭的事實,須時時銘記在心。

若你手上有此手機,也厭煩了舊系統,就給它一個升級機會吧! 所需要工具包都幫你收集好了,依照我的教學PDF文件去嘗試,應該都可成功的。要移除不要的預設APP,用RE管理器移除/system/app/下的*.apk (可先搬移目錄,萬一有問題還能移回),例如此ROM的MIUI市集程式是有問題的。

Motorola Milestone2智能手機刷機流程_20140228 (百度空間分享目錄)




讓手機透過USB使用PC網路連線

教學文章:

[需ROOT]讓Android手機透過USB連線,使用電腦網路訊號上網 | 就是教不落
http://steachs.com/archives/2712

重點提示:

  1. XDA網站下載最新版。
  2. 安裝「Tracetool service.apk」至手機,它的名稱是「Usb tunnel」,它必須取得Root權限。很多人發現沒有Root權限提示視窗,可以裝SuperUser等授權軟體去看,一定要確定有Root權限才行。
  3. 手機要Root很簡單,只要確定目前的Rom沒有鎖死,用360一鍵ROOT程式即可簡單取得最高權限了。
  4. 手機開啟Usb tunnel程式,PC端啟動下面的程式,記得DNS也要指定,這樣一些app才能順利解析DNS。按「Connect」時它會跑25個Script,跑完後就能連線了。

ART 3.7

2013-07-26

IIS應用程式與虛擬目錄的差別

IIS站台裏,存在Application(應用時式)與Virtual Directory(虛擬目錄)兩者非常類似,但其中的差別可參考此文章:

Huan-Lin 學習筆記: IIS 7 基礎觀念:網站、應用程式、與虛擬目錄
http://huan-lin.blogspot.com/2011/04/iis-7-site-application-and-virtual.html

其中指出,如果還是覺得應用程式和虛擬目錄這兩個東西很容易搞混的話,試試看先記住這個差異:應用程式可以設定其所屬之應用程式集區,虛擬目錄則沒有這項功能。

IIS Site Directory

簡單地說,假如你的網頁目錄是跑一些.NET程式的,為了讓彼此的NET版本不衝突,就得指定不同的應用集區(Application Pool),這時就得轉換成「應用程式」,而不能用「虛擬目錄」了。

2013-05-29

程式端之DB樹狀資料查詢Helper物件

要在資料庫取得具有樹狀結構的資料查詢結果,若是使用SQL Server,可以使用內建的CTE(Common Table Expression)查詢指令,但其他資料庫大都不支援這語法,雖然也可以利用DB Stored Procedure或自訂Function/View來取得遞迴式資料,但總是綁DB太深。

不管是寫在DB或Program兩端,這種遞迴式資料都挺耗效能的,隨著指定Level愈大,所執行的SQL命令總數更多。因此若是目標資料並沒有很大量,其實應該一次全取回,再於Client端利用程式作Recurisve建立樹狀結構。

為了能跨不同DB,也為了簡化Recursive查詢,我寫了一個Helper物件,可以遞迴執行所需的DB查詢指令,若是資料量及階層數不多(如2層內),總DB執行次數不會太多,算是比較獨立且簡單的實作方式。
Class Code

在2階內,DB查詢只下了3次,取得資料如下表:
Result GridView

2013-05-11

使用Chrome下載YouTube影片

由於YouTube政策反對任何影片下載,因此Google Chrome的Extensions相關的軟件都被下架,使用其他影片下載工具雖然也能達到目的,但每次還得開啟,太過麻煩且不直覺。

官方雖然不能上架,但還是有工具允許你自行安裝,以下推薦這套:
Chrome Youtube Downloader

1. 下載並解壓縮成*.crx檔。
2. 打開Chrome的Extension管理介面,把該crx檔用滑鼠拖拉過去。
3. 安裝完成,支援FLV, MP4, MP4 HD 720p, MP4 Full-HD 1080p, MP4 (2K), MP3.
4. 打開YouTube的影片頁面,你會發現多了一個「Download」下拉選單,可選擇多種品質的影片。

YouTube Download

2013-04-05

VS2012 Update2離線下載包(ISO)

Visual Studio 2012 Update 2在2013/04/04釋出RTM版,線上安裝版可於官方下載。
http://www.microsoft.com/en-us/download/details.aspx?id=38188

網頁下方說明可利用指令/layout下載離線安裝檔,因此我把它下載並製成ISO檔(1.81GB),上傳至空間分流:

  • 百度盤:(1.81GB, ISO) Download
  • Hinet個人雲 (因上傳Size限制切分兩RAR壓縮檔):Part1(1GB)  Part2(682MB)

下載後執行目錄內的「VS2012.2.exe」即可,省去了從遠端下載安裝檔的時間。安裝過程不用重新開機,更新時間約在半小時內。

Acquiring Screen

Installed Version

2013-03-18

迅雷付費會員的優勢差異

迅雷是大陸地區流行的一套P2P下載工具,它支援了Emule, EDonkey, BT,Http等P2P下載方式。用過BT的人大概曉得網速快慢不一,差的時候每秒2KB不到,這要下載到何時?即使用迅雷工具來下載,也是差不多,但只要是付費會員,卻可以獲得迅雷主機的加速,台灣地區最慢是每秒400-500KB,最快是2-3MB/秒的速度,驚不驚人?

XunLei VIP

付費會員主要有兩個功能:

  1. 高速通道:每月固定配發高速流量Quota,當你BT下載時,迅雷主機方可以特別給你較高的下載優先權,畢竟這BT種子別人肯定下載過,檔案也會有一份在其主機暫存上,它只要seeding並針對你的ip給予高下載流速,每秒上MB不是問題。每月流量quota用完,得等下個月才能配給。
  2. 離線空間:配定雲主機離線空間(如10GB),它讓你免掛線自動幫你下載BT至主機,完成後你再下載至本地端,每秒流速至少500KB以上。這磁碟空間的Quota可用完後清除即可回收再使用。當你下載BT種子時,同時啟用離線加速,那麼官方代為下載資料同時也會回傳至你這邊,你的當下流速就會至少增速300KB以上。

所以,免費註冊的會員只是純BT下載工具,下載一部戲劇檔,不知何時能完成!但只要是付費會員,至少都是百倍的流速。付費的會員等級費用不一樣(但只要是付費會員下載就夠快了),整個會員福利以年費會員較佳,但一般少下載的人,可以去淘寶租個24小時的臨時VIP會員帳號就好(租金在1RMB以下,但此分租營利方式違反迅雷官方規定,可私下分享)。

我個人適合方案,是租用10G流量+10GB離線的VIP會員帳戶,淘寶上這樣的方案30天租金約3RMB以下,相當便宜。只要具有付費VIP資格,就可獲得下載加速,絕對是很棒的下載體驗。具有付費VIP會員的,記得使用官方的VIP下載版,它的介面簡潔又適合離線空間管理。

2013-03-16

解決水星Mercury MW310R熱當問題

當初住處升級網速50M方案,但中華電信小烏龜無線速度只支援到802.11g(均速20MB/sec),因此網上買了這台便宜的無線AP(802.11n, 300M)。它的三根天線無法拆卸(固定型),所以包裝盒超大,Very Stupid,不過信號挺佳。實際上線運作發現無線傳大檔時,它常常會熱當而整個SSID消失,因此上陣服役不久就被我勒令下崗,心中不禁想,便宜沒好貨。

Mercury MW310R

後來接觸DD-WRT這Open Wireless軔體設定調校,也發現水晶官方網站有新版Firmware可下載,就決定死馬當活馬一試:

  1. 升級「MW310R V1/V2_120201標準版」(2012.07.06)版本,它使用tftpd方式上傳,比一般用Web Upload方式稍更複雜一點。
    Firmware Version
  2. 調整MTU值從預設1500變成1492。(PPPoE使用1492,這值調整為適當值對穩定度很有幫助)
    MTU

如此設定後,我再測試無線下載20GB的檔案,只發生過一次熱當(SSID消失),其餘就蠻穩定了。後來陸續傳過101GB的資料,也再沒熱當過了。

結論,當初購買的動機是便宜+訊號佳,因此才買這一台,沒想到禁不起大檔+環境測試。建議日後還是選購TP-Link等有品牌的無線路由為佳,畢竟無線傳輸的穩定度最重要,而且最好是選擇可刷DD-WRT的機種更佳,進可攻退可守。

2013-03-11

ReNamer:檔名抽出數字排序補零

堆壘式規則的更名軟件,雖然沒像CKRename工具那樣直覺操作,但其實它更適合複雜的批次更名程序,更名的規則辛苦一次就可存起來成為一個Preset程序,下次類似的更名動作可直接套用,其中以ReNamer這工具為佼佼者。

例如,下載的File檔名常有需要重新命名的需求,我們可用下圖的更名規則,可抽出原檔名中集數number,再排序補0對齊。

ReNamer Rule

規則解釋如下(以下皆不含副檔名.mp4):

  1. 檔名「屋塔房王世子-第1集(120712)」去除非數字,成為「1120712」。
  2. 檔名最前面插入6個零,1120712 => 0000001120712 (加零是為了補齊0,數量滿足該數字的位數mask即可)
  3. 檔名由左至右移除6個字,0000001120712 => 0000001 (此規則移除位數依右側數字群位數而變動)
  4. 檔名再由左至右的第3個字起(含)移除掉至左邊最後,留下01數字。

以上規則,可依實際狀況小調整即可,通常原檔名數字是集數+日期的變化,位數都是固定的,需變動的機率不高。

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控制項的呈現控制,相當有意思。

2013-01-31

RadGrid欄位排序引發的Script Error

在IE10裏,預設的RadGrid在欄位排序按第3次時會發現Script Error如下: (Firefox, Maxthon不會觸發Error)
Script 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">

2013-01-30

PayPal付款貼心從餘額先扣除

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

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

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

2013-01-29

TeamViewer主機聯絡清單記憶

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

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

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

2013-01-28

USB To LPT轉接線

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

凡涉及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虛擬列印埠驅動,當你接上該線時,裝置管理員會出現下圖類似的裝置。
    USB Device
  4. 接著在印表機的「屬性->Ports」內容裏,你可看到以「USB」開頭的裝置,勾選它即可。
    Printer Port
  5. 如此一來,即可將文件順利寄至LPT印表機了。雖然它不會形成虛擬的LPT埠,但你依然可以透過Printer Win API去傳送byte[]資料給USB虛擬印表埠,跟直接用File IO寫入LPT埠是一樣的效果。
  6. 若是要模擬更多LPT相關標準,我就沒再深入研究了,建議新的週邊裝置,還是儘量買USB或COM埠比較常見。

2013-01-27

ShortcutStrip移除捷徑的附加命名

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

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

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

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