[C#] 用 LINQ 將字串切割成整數陣列

int id;
int[] idArray = "1,2,3,4,5".Split(',')
    .Where(idStr => Int32.TryParse(idStr, out id))
    .Select(Int32.Parse)
    .ToArray();

這裡用到將 Int32.Parse 這個一般 method 指向給 delegate 的技巧。

[C#] HttpUtility.ParseQueryString 的隱藏密技

在使用 Request.QueryString 發現 ToString 會產生 URL 的 query 字串，嘗試用 NameValueCollection 的 ToString 卻不是產生 URL 的 query 字串，這一整個就很奇怪，明明都是 NameValueCollection 確有不一樣的結果，透過 Reflector 發現 Request.QueryString 的 instance 型別是一個 HttpValueCollection，想說可以直接 new HttpValueCollection 出來使用，但 HttpValueCollection 卻是 System.Web 的內部 Class，外部是無法直接 new 出來使用，還好在又發現 HttpUtility.ParseQueryString 回傳的 NameValueCollection 的 instance 是 HttpValueCollection 這個型別，所以可以透過 HttpUtility.ParseQueryString 來建立 HttpValueCollection。

// using System.Web;

var qs1 = HttpUtility.ParseQueryString("id=5&type=1");
qs1.ToString(); // "id=5&type=1"

var qs2 = HttpUtility.ParseQueryString(String.Empty);
qs2["id"] = "11";
qs2["name"] = "Tom"; 

qs2.ToString(); // "id=11&name=Tom"

HttpValueCollection 的簽名

[Serializable]     
internal class HttpValueCollection : NameValueCollection     
{
}

ParseQueryString 的簽名

public static NameValueCollection ParseQueryString(string query, Encoding encoding)
{
    if (query == null)
    {
        throw new ArgumentNullException("query");
    }
    if (encoding == null)
    {
        throw new ArgumentNullException("encoding");
    }
    if ((query.Length > 0) && (query[0] == '?'))
    {
        query = query.Substring(1);
    }
    return new HttpValueCollection(query, false, true, encoding);
}

[CSS] float 與 clear

float

一開始是用來定義文繞圖的呈現，後來其浮動特性很適合用來排版佈局，所以大部分的網頁都用這種方式排版。

特性:

• 不佔用父元素的空間
• 寬高會內縮至子元素所呈現的大小
• 會排擠其他相鄰的 inline 元素
• 在所定位的空間不足時會自動換行

<div style="border:1px solid #f00; float:left;">div 1</div>
<div style="background:#0f0;">div 2</div>

div1

div2

透過上面的範例可以看出因為 div1 不佔用空間而讓 div2 的位子上移了，然而呈現與 div1 重疊的效果，以及可以看到 float 排擠文字的特性，而讓 div2 的文字被擠到 div1 之後。

clear

清除在元素相鄰邊上的 float 元素

屬性:

• none 不做任何 clear 動作
• left 將元素向下換行，來排除具有 float：left 的相鄰元素
• right 將元素向下換行，來排除具有 float：right 的相鄰元素
• both 將元素向下換行，來排除具有 float：left 或 float:right 的相鄰元素

<div style="border:1px solid #f00; float:left;">div1</div>
<div style="background:#0f0; clear:left;">div2</div>

div1

div2

這個範例在 div2 加上 clear:left 的屬性，讓 div2 根據前一個具有 float:left 元素之後向下換行,來排除具有 float:left 的相鄰元素。

<div style="border:1px solid #f00; float:left;">div1</div>
<div style="background:#0f0; clear:right;">div2</div>

div1

div2

這個範例則是將 div2 換成 clear:right，可以看到 div1 與 div2 仍舊重疊在一起，這是因為 div2 前一個具有 float:right 不存在，而 div1 的 float:left 不是 div2 clear:right 排除的對象。

[CSS] display inline, block 與 inline-block

inline 行內 (例如: <b>，<span>)，具有以下特性:

• 會連接在文字及 inline 元素之後
• 不具有 width, height 以及上下的 padding, margin (padding-top, padding-bottom, margin-top, margin-bottom)
• 寬度、高度會內縮至所含文字所使用的空間

block 區塊 (例如: <p>，<div>)，具有以下特性:

• 會獨佔父元素一整行的空間
• 具有完整 width, height 及 padding, margin 屬性
• 當不指定寬度時，預設寬度會擴張至一整列
• 當不指定高度時，預設高度會內縮至子元素所使用的空間

inline-block 行內-區塊 (例如: <img>，<button>)，同時具備 inline 與 block 的特性:

• 會連接在文字及 inline 元素之後
• 具有完整 width, height 及 padding, margin 屬性
• 當不指定寬度、高度時，預設會內縮至所含文字所使用的空間

[CSS] Selector Meaning

Selector	Meaning
AB	A and B
A, B	A or B
A B	foreach B whose parents contains A
A > B	foreach B whose parent is A
A + B	foreach B whose previous sibling is A
A ~ B	foreach B whose previous siblings contains A

[C#] 圖片縮圖

System.Drawing namespace 提供對 GDI+ 基本繪圖功能的存取，可以方便處理圖片的操作，下面是一個處理圖片縮圖的範例:

//using System.Drawing;

var image = Image.FromFile(@"D:\001.jpg");

int width = 120, height = 100;
float targetRatio = (float)width / (float)height;
float imageRatio = (float)image.Width / (float)image.Height;


if(imageRatio < targetRatio)
{
    width = Math.Max(1, height * image.Width / image.Height);
}
else
{
    height = Math.Max(1, width * image.Height / image.Width); 
}


var thumbnail = image.GetThumbnailImage(width, height, null, IntPtr.Zero);

thumbnail.Save(@"D:\thumb.jpg");

這個方式可以容易的做到圖片縮圖，但使用這個方式會很佔用記憶體，在處理尺寸大的圖片時有可能會出現 out of memory，而且在 MSDN 有以下的警示:

Classes within the System.Drawing namespace are not supported for use within a Windows or ASP.NET service. Attempting to use these classes from within one of these application types may produce unexpected problems, such as diminished service performance and run-time exceptions. For a supported alternative, see Windows Imaging Components.

[JavaScript] 匿名 function 進階應用

前幾天 JS 新手村的同事說看不懂下面的程式，下面用了幾個問句解釋了他的疑惑。

(function(model){
    //...
})(model || model={});

JS 要如何宣告一個 function 呢？

function a(){
    //...
}

那改成變數的方式宣告呢？

var a = function(){
    //...
};

要怎麼呼叫上面宣告的 function？

a();

再來把 a 換成等於右邊的 function 宣告。

function(){
    //...
}();

上面的寫法不符合語法，再加上 () 吧！

(function(){
    //...
})();

接著 model || model={} 是透過 or 判斷句的特性，遇到第一個為真就回傳，看看下面的例子：

var a = 1 || 2 || 3;  // 1
var a = 0 || 2 || 3;  // 2
var a = 0 || 0 || 3;  // 3

為什麼要用這種寫法呢？？

首先 JS 沒有所謂的 block 變數，在 for 內宣告的變數，外面也能直接存取，唯一能侷限變數存取域的只有 function，在 function 內宣告的變數只有內部能存取，外部是看不見的，所以透過這個方法可以避免變數命名衝突的問題。

再來透過傳入 function 的變數，外部是無法在更動的，變數的參考點在呼叫 function 就固定下來，外部無法在異動內部所存取的參考點，這樣可以避免參考的變數內容被其他套件程式修改，而造成執行錯誤。

[Less] 簡單做到背景漸層

對選顏色不擅長，又想在網頁做出 CSS 漸層效果，Less 提供了兩個方便的函數 lighten(加亮顏色)、darken(加深顏色)，透過這兩個函數就可以輕鬆產生漸層所需要的色差，然後調整百比值就可以控制漸層的色階。

.toolbar {
    @color: #914;
    @lighten: lighten(@color, 3%);
    @darken: darken(@color, 3%);

    background-color: @color;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@lighten), to(@darken));
    background-image: -webkit-linear-gradient(top, @lighten, @darken);
    background-image: -moz-linear-gradient(top, @lighten, @darken);
    background-image: -ms-linear-gradient(top, @lighten, @darken);
    background-image: -o-linear-gradient(top, @lighten, @darken);
    background-image: linear-gradient(to bottom, @lighten, @darken);
}

上面除了用 linear-gradient 來產生漸層，額外還加上了 background-color 這個保險，讓不支援 CSS3 的 browser 也能有基本的底色。


這樣寫還是有點麻煩，如果包成 mixin 會更方便，如下：

.bg-vertical-gradient(@color, @amount:3%) {
    @lighten: lighten(@color, @amount);
    @darken: darken(@color, @amount);

    background-color: @color;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@lighten), to(@darken));
    background-image: -webkit-linear-gradient(top, @lighten, @darken);
    background-image: -moz-linear-gradient(top, @lighten, @darken);
    background-image: -ms-linear-gradient(top, @lighten, @darken);
    background-image: -o-linear-gradient(top, @lighten, @darken);
    background-image: linear-gradient(to bottom, @lighten, @darken);
}

.toolbar {
    .bg-vertical-gradient(#914);
}

.banner {
    .bg-vertical-gradient(#702, 5%);
}