Jax 的工作紀錄: 2014-01

2014-01-30 20:46

[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 屬性
當不指定寬度、高度時，預設會內縮至所含文字所使用的空間

2014-01-30 20:41

[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

2014-01-30 20:33

[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");

//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.

2014-01-21 01:02

[JavaScript] 匿名 function 進階應用

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

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

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

JS 要如何宣告一個 function 呢？

function a(){
//...
}

function a(){
    //...
}

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

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

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

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

a();

a();

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

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

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

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

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

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

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

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

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 就固定下來，外部無法在異動內部所存取的參考點，這樣可以避免參考的變數內容被其他套件程式修改，而造成執行錯誤。

2014-01-21 00:23

[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);
}

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

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