香港人製作的出色XNA遊戲

微軟的XNA推出了幾年，甚少見到亞洲區有作品，其實國外一樣都不算多，始終開發一隻遊戲，粗略去做都要一年半載，程式加美術還要種種功夫，人力物力不會少，寫完出來即使自己有滿足感，但沒有人玩都好像沒有太大意思。
而且正如早前我聽過一句話:( 起香港，搞High Tech就High o野，Low Tech就真係撈o野)，咁既情況下，要香港還有人去寫Game真係難上加難。

不過今日見到一個Blog，有幾個幾高質素的XNA遊戲 (當然你不能搵商業作品去比較...)，一開始我見到個Blog是繁體中文，以為是台灣人。
最後看多幾下至知道原來係香港人出品!!!
其實香港已經很少熱心的人非謀利咁去做開發了，值得支持一下。

Zephyr[XNA] : 遊戲設計 X 遊戲開發
http://koetap.mysinablog.com/
Hong Kong Indie Game Development Blog
http://percytse.blogspot.com/

Object Oriented CSS Framework For ASP.NET & PHP

無論你是寫網頁程式還是網頁設計，近幾年應該經常聽到Framework這個字。
Javascript有Framework (jQuery, ExtJS, Prototype...) ; PHP有Framework (Zend , CodeIgniter , CakePHP ...) ; ASP.NET本身屬.NET Framework，最近又有MVC Framework等等。

或者很多Web Designer看到"Framework"這個字，都會避之則吉，看似都是和Programming有關，但如果你忽略了的話就走寶了。

近這一年，CSS Framework慢慢冒出來，在delicious.com都開始很多同類Bookmark，亦有很多討論區開始比較各種CSS Framework。

如果你想了解什麼是CSS Framework，建議先看看這幾篇文章。
Definitive List of CSS Frameworks – Pick Your Style
CSS Frameworks: Pros and Cons
CSS framework 利弊淺見

現時CSS Framework大概分兩種，大多數的一種是本身已經定義了很多Style，例如Grid式的Table Template，Header或Footer Style，甚至排板方面都可以直接套用CSS Framework而快速建立完整Design。由於現時CSS Framework定義其實沒有很統一，不同的CSS Framework提供不同的"功能"，但肯定的是，全部都輔助你快速建立Layout。

提供一個CSS Framework選擇參考連結:
10 Promising CSS Framework That Worth A Look

至於另一種亦是我有興趣的是Object Oriented CSS Framework，這種Framework是針對編寫CSS方面，和之前講的一種相反，本身並沒有包含"罐頭"的"即食"樣式。
CSS加上Object Oriented，本身兩種在網頁開發上沒有關係的字詞，很難想像到會是什麼，但看到以下例子後，如果加上少少Programming知識，你就明白箇中奧妙。

Variables
把@brand_color設定成變數重覆使用，假若日後要更改的話，只需要修改一行就可以。

@brand_color: #4D926F;

#header {
color: @brand_color;
}

h2 {
color: @brand_color;
}

Mixins
Define 名稱為rounded_corners 的 Property後，可以整個打包去其他的style中使用。

.rounded_corners {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}

#header {
.rounded_corners;
}

#footer {
.rounded_corners;
}

Operations
在CSS中直接進行加減乘除計算。

@the-border: 1px;
@base-color: #111;

#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}

#footer { 
color: (@base-color + #111) * 1.5; 
}

Nested Rules
這類似是OOP的中Class。

#header {
color: red;
a { 
font-weight: bold; 
text-decoration: none; 
} 
}

使用OO寫法的CSS可以簡潔很多，而且可以重覆使用或者承繼。不過暫時OO的CSS選擇並不多。
ASP.NET 的話可以試試.less CSS就有齊以上的功能，PHP的話可以試試xCSS，兩隻都是很容易使用和Setup的。

ASP.NET使用Throw中止頁面

通常新接觸ASP.NET的朋友，都會把程式碼放進Page_Load事件中，如果因為不符合某條件而要中止網頁運行的話(例如一些要檢查登入的頁面)，可能會用Exit Sub(VB)或者return(C#)退出Page_Load事件。

當然如果整個載入過程只有Page_Load的話，這個做法都還可以的。但假如還有其他Stage，例如Page_Init , Page_LoadComplete... (可參考ASP.NET Page Life Cycle Overview)，單純地退出Page_Load事件就可以為你帶來一些程式上的錯誤。

當然概念上，大家要注意，即使你沒有寫上其他Stage的程式碼，但Runtime時，ASP.NET都會經過的，所以不要認為只把程式碼放進Page_Load事件中，便不會觸發其他Stage Event。

以下面段Code為例，網頁載入的過程會經過三個Stage : Page_Init => Page_Load => Page_LoadComplete

假如我使用return;(Exit Sub)的話 :

partial class DefaultPage : System.Web.UI.Page
{
protected void Page_Init(object sender, System.EventArgs e)
{
object intNum = "abcde";
int _intNum = 0;
if (!Int32.TryParse(intNum, _intNum)) {
return;
}
System.Diagnostics.Debug.Print("Page_Init is Loaded.");
}

protected void Page_Load(object sender, System.EventArgs e)
{
System.Diagnostics.Debug.Print("Page_Load is Loaded.");
}

protected void Page_LoadComplete(object sender, System.EventArgs e)
{
System.Diagnostics.Debug.Print("Page_LoadComplete is Loaded.");
}
}

Output Window便會顯示出

Page_Load is Loaded.
Page_LoadComplete is Loaded.

換句話說，return並不會中止其後的事件。但如果我們使用throw的話:

partial class DefaultPage : System.Web.UI.Page
{
protected void Page_Init(object sender, System.EventArgs e)
{
object intNum = "abcde";
int _intNum = 0;
if (!Int32.TryParse(intNum, _intNum)) {
throw;
}
System.Diagnostics.Debug.Print("Page_Init is Loaded.");
}

protected void Page_Load(object sender, System.EventArgs e)
{
System.Diagnostics.Debug.Print("Page_Load is Loaded.");
}

protected void Page_LoadComplete(object sender, System.EventArgs e)
{
System.Diagnostics.Debug.Print("Page_LoadComplete is Loaded.");
}
}

這樣Page_Load和Page_LoadComplete都不會執行，而頁面會轉去錯誤信息頁。

當然throw也是一個決定性的做法，正常未必需要因為不符合要求就把瀏覽者轉向錯誤頁面。
但大家從這個範例也可以看出一些ASP.NET Page Cycle上要注意的地方。

Hornil StylePix - 超強的Portable Image Editor

我在這Blog介紹過的免費Image Editor都有好幾次，之前曾經介紹過Artweaver / PicPick，不過前者開始商業化，後者就不支援Layer而且功能比較少，雖然Paint.NET前幾天終於推出3.5版本，不過Paint.NET的Lasso Tool依然沒有改進，很難使用，所以我再物色一下有什麼新軟件。

今次介紹這個叫Hornil StylePix，韓國人出品。
這個Software幾好用的，介面很似Photoshop，除了基本應該有的修圖功能。
更支援Filter，Layer，和Batch processing，這幾個功能都是很多免費軟件都缺乏的，中文字支援方面我試過沒有問題。
Hornil StylePix更有Portable版本供選擇。

Download Hornil StylePix
http://hornil.com
Hornil StylePix功能說明
http://hornil.com/en/products/stylepix/features.html
Hornil StylePix Screen Shot
http://hornil.com/en/products/stylepix/screenshots.html

Javascript - Passing arguments as Function

在Javascript中，Call Function絕對不會陌生，但如果有若干數量的Function因應不同的情況才Call怎麼辦呢?
當然有很多可能性，其中最常見的亦是傳統做法不外乎

if..(condition)..then...
function1();
function2();
function3();
...

而我的做法就是自行寫一個Helper，用Array以arguments型式去呼叫Function。

function SayGoodBye()
{
   $('#hello').html('GoodBye');
}

function SeeYou()
{
   $('#hello').html($('#hello').html() + ',' + 'See you next time!');
}

function caller(aryfunc)
{
   $.each(aryfunc,function(i,n) //用jQuery的each
     {  Function.call(n());  }
   );
}

$(document).ready(function() { 
  //if..(condition)..then...
  var myFunc = new Array(SayGoodBye,SeeYou); //and more...
  caller(myFunc); //Print out : GoodBye,See you next time!
}); 
<div id="hello"></div>

這就可以把 condition 移至外部，用Helper去呼叫Function更加靈活。而且Array中的項目,Function的arguments不只是資料型態(String,Int...)，更可以是function()吧。

PhotoImpact正式死亡

今晚上Corel睇下有冇新版本，誰不知完全找不到產品介紹頁，連Download都沒有了。
再去Corel的官方討論區，連PhotoImpact的版塊都刪除了，已經心知不妙~回到Ulead的官方討論區看，果然Corel已經停止開發PhotoImpact，而且是想PI消失於世上，連未代的X3版本都不再出售。
可以看看這Post，Ulead前公司的人員都証實了 -
Photoimpact Dead ?
http://phpbb.ulead.com.tw/EN/viewtopic.php?t=35779
Corel已經前後殺死幾個好用的軟件，例如COOL 3D, GIF Animator, MediaStudio Pro...

其實我都不知Corel收購Ulead幹什麼，我又不覺得Corel的PaintShop Pro好用過PhotoImpact。(而且PaintShop Pro都是收購自Jasc)

PI我由第5代用到最後的X3，前前後後都有10年有多的時間，軟件來說都算是有感情的一個。

jQuery - 當Javascript Ajax遇上Loop

之前已經略略打過一篇jQuery 的Async和sync的問題:
jQuery – Why Ajax return blank data?

近日我再次遇上近似的問題，我把一段jQuery.ajax 放在一段For...Loop中運行，發現同樣會出現同步問題。
再次上網查證一下，發現原來這不是jQuery的問題，問題在於Javascript原生的XMLHttpRequest和Synchronous問題。

出現問題的程式碼如下:
ASP.NET 2.0 Web Service :

<WebMethod()> _
Public Function returnString(ByVal inputString As String) As String
Return inputString
End Function

網頁上的jQuery Ajax CallBack :

<script type="text/javascript">
$(document).ready(function () { 
for (var i = 1 ;i <= 10;i++)
{
var Options= {
type: "POST",
url: "webservice/DataService.asmx/returnString",
data:'{ inputString: ' + i +'}',
async: "true",
contentType: "application/json; charset=utf-8",
dataType: "JSON",
success: function(response)  { alert(response);  } 
} 
$.ajax(Options); 
}
});
</script>

運行程式後,得出的alert不是順序的12345678910，有可能是4231789...或者9714523。
最後把async設成false就可以解決問題，但是運行時，Browser會呈現硬直狀態。
解決方法雖然是找到了，但是為什麼會這樣?
可以睇睇國外高手的Blog文:
Ajax and javascript don't use threads
Ajax, javascript and threads : the final truth

睇過之後，不難理解為什麼會出現這個同步問題。