Month: October 2012

IE9 JavaScript 註解之謎

Posted by – October 31, 2012

最近接手了一個不大的系統升級案,雖然是不大的案子,但客戶的 PM 對需求的描述有點不夠清晰,而我也不是原開發者,因此溝通的過程拖延了不少時間。不好容易完成了程式碼,在測試主機上持續修正調整了數週,客戶最終點頭 OK,佈署到正式主機的時候就爆炸了...

扣除一些交接時人為疏失所造成的錯誤外,處理到最後還是有一個奇妙的問題。在某個表單頁面上,客戶反應 IE 無法送出表單。不過因為公司主要開發機都是 Mac,僅有少數電腦是 Windows 平台,而且還被裝了剛出的 Windows 8,用 win8 內建的 IE10 切換相容性測試,7, 8 , 9 模式全部都沒有出現問題。

最後才又找了一台裝 Win7 的筆電,用純正血統的 IE9 做測試才重現了客戶反應的問題,看來是 JavaScript 出包了。出包點在這一段程式...

function CheckForm1(inForm){
	if(
		CheckA() && 
		CheckB() &&
		//CheckC() &&
		CheckD()
	){
		return true;
	}else{
		return false;
	}
}

這是前人留下的程式,其中 CheckC() 因為不再用到而被我很直覺地加了兩條斜線註解。這個寫法在 Chrome, Firefox 以及 IE 的相容模式都正常執行,所以沒想到 IE9 無法處理 If() 中的註解而掛了 XD

最終將 CheckC 那行刪除就正常了。

Mac OS X: Fix Duplicate Items on「Open With…」List

Posted by – October 22, 2012

在 Mac OS X 的 Finder 中,對檔案按右鍵會有一個 Open With 的選單,選擇用哪一個軟體開啟檔案。隨著系統安裝的軟體越來越多,當然選擇也增加了。但 Mac 卻有個鳥問題,當這些軟體版本更新後,選單項目不會自動更新,而會一直增加.... 超瞎...


在一張 .JPG 圖片上 Open With 的選項居然有這麼多重複的,這其實是在催眠我該重灌 Mac 了吧?

其實是有解法的,打開 Terminal 輸入以下指令:

/System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/\
LaunchServices.framework/Versions/A/Support/lsregister -kill -r -domain local\
 -domain system -domain user

執行需要幾秒的時間,然後在 Dock 上的 Finder 圖示上按下 Control + Option + 左鍵,選重新啟動 (Relaunch)。然後就會還你一個乾淨的 Open With 了,噢耶,又不用重灌了。

Objective-C: Use regular expression to replace string in NSString

Posted by – October 21, 2012

在寫一個關於字串處理的小作業時想到的,先留個紀錄。

NSString * strPNum2 = @"(886)02-3356873";

NSError *error = NULL;
// regex 用 \ 做跳脫,但是在 C 裡斜線本身也要跳脫,所以寫成 \\( 來跳脫左括號
NSRegularExpression * regex = [NSRegularExpression regularExpressionWithPattern:@"[\\(\\)-]" options:NSRegularExpressionCaseInsensitive error:&error];

NSString *modifiedString = [regex stringByReplacingMatchesInString: strPNum2 options:0 range: NSMakeRange(0, [strPNum2 length]) withTemplate:@""];

NSLog(@"%@", modifiedString);

電話號碼 (886)02-3356873 會改成 886023356873。

The correct meta viewport syntax

Posted by – October 19, 2012

根據 Apple Web Content Guide 的說明,在撰寫手機版或給特定裝置的網站時,可以在 <head> 中用 <meta> 標籤來設定 viewport 相關的設定。

不過通常這段設定都是 copy / paste,然後再根據需求調整參數。在開新專案的時候也貼了前人的 code,但是卻注意到 Chrome 裡會有錯誤訊息,無法識別這段設定。

Viewport argument value "device-width;" for key "width" not recognized. Content ignored.
Viewport argument value "1.0;" for key "initial-scale" was truncated to its numeric prefix.
Viewport argument value "1.0;" for key "maximum-scale" was truncated to its numeric prefix.
Viewport argument value "0;" for key "user-scalable" was truncated to its numeric prefix.

找了幾段網路上的設定檔,一比對才發現原來很多人把分隔的逗號打成分號,造成錯誤。

錯誤的寫法

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />

正確的寫法

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Creating Retina Images for Website

Posted by – October 15, 2012

最近在撰寫一個給 iOS UIWebView 用的迷你網站,在等待設計師繪製網站圖片的時候,好奇地看起來了一些關於視網膜螢幕 (retina display) 的資料。順便找了些用 CSS 顯示 retina image 的資料。

感謝行動平台上的瀏覽器對 CSS3 的普遍支援性,透過 CSS3 的 media queries 來分辨平台就可以切換內容了。

.navbar {
	background-image: url('../img/button01.png');
	background-size: 320px 49px;
}

/* -- for Retina Display -- */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and    (-moz-min-device-pixel-ratio: 2),
       only screen and      (-o-min-device-pixel-ratio: 2),
       only screen and         (min-device-pixel-ratio: 2) {
	.navbar {
		background-image: url('../img/button01@2x.png');
		background-size: 320px 49px;
	}
}

檔案命名依慣例在高解析度圖的檔名後面附加 @2x 文字做為辨識,小圖是 320px x 49px,大圖是 640px x 98px,後者指定為顯示一半大小。這樣的寫法會先累到設計師,各種圖示、影像,凡是要支援高解析度的素材都要準備兩套。要注意的是以上的寫法因為一般圖 (Line 1 ~ 4) 並沒有用 @media 包起來,所以要寫在 @media 前面,不然會因為 CSS 先後順序的關係造成只讀一般圖片。

WordPress: Stop changing the quotes

Posted by – October 2, 2012

WordPress 部落格系統有時候貼心過頭了,對於文章中出現的單引號、雙引號會自動轉換。一般文章中的引號被轉換不是什麼大不了的事情,而且往往看起來也比較美觀,但是在技術性文章中,單雙引號是有特別意義的,被自動轉換成別的符號,整串指令就不對盤了。例如.... 單引號....

輸入 McDonald's

會變成 McDonald’s

More

File type validation with Javascript

Posted by – October 1, 2012

前些時候寫的簡單版測試程式,在表單送出前用 JavaScript 檢查檔案副檔名。當然這只是第一步驗證,在 PHP 端還是要對 Content Type 做一次檢查。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>File Type Validation in JavaScript. ver 0.1</title>
    </head>
<body>

<form method="post" enctype="multipart/form-data" onsubmit="return checkAllFile();";>
    <input class="file-selector" type="file" name="userfile1" size="20"/></br>
    <input class="file-selector" type="file" name="userfile2" size="20"/></br>
    <input class="file-selector" type="file" name="userfile3" size="20"/></br>
    <input class="file-selector" type="file" name="userfile4" size="20"/></br>
    <input class="file-selector" type="file" name="userfile5" size="20"/></br>
    <input type="submit" value="upload"/>
</form>

<script type="text/javascript">
function checkAllFile(){
    var node_list = document.getElementsByTagName('input');
    var num_of_not_allowed_files = 0;

    for (var i = 0; i < node_list.length; i++){
        var node = node_list[i];
        if(node.getAttribute('type') == 'file'){
            var type = node.value;
            console.log(type);
            switch(type.substring(type.lastIndexOf('.') + 1).toLowerCase()){
                case 'gif': case 'jpg': case 'png':
                    //alert("an image");
                    // Do Nothing.
                    break;
                default:
                    num_of_not_allowed_files++;
                    break;
            }
        }
    }
    console.log('num_of_not_allowed_files: ' + num_of_not_allowed_files);
    if(num_of_not_allowed_files > 0){
        alert('檔案格式錯誤,只能上傳圖片哦');
        return false;
    } else return true;
}
</script>

</body>
</html>

ps. 這並不是一份最佳化過的程式碼,僅供參考。