install pygame on mac os x 10.8 (mountain lion)

I highly recommend you to use another way to install pygame:
http://stackoverflow.com/a/14098938/938380

________________ the original way is not recommended ____________
I have struggled to install pygame1.9.1 on my machine for a long time. there are so many dependencies issues.
fortunately, i solved all the issues finally.
I followed the instruction from pygame wiki, but the original step 7 was not working for me.
I have corrected step 7 as below:

1. Installed python but using visual python version. This is based on python 2.7.x
In my system this installs files under Applications and /Library/Frameworks/Python.framework

http://www.vpython.org
From this site:

First, download and install the pure 32-bit Python, Python-2.7.3
(VPython does not work with Mac 64-bit/32-bit Python, but this 32-bit version of Python works fine on 64-bit Macs)

Second, download and install VPython-Mac-Py2.7-5.74

This includes version 1.5.1 of numpy.

The download of Python-2.7.3 is from the vpython site and designed to work with vpython.
You can use the python installer from http://www.python.org. However, you will have to install numpy.
You can get numpy from http://sourceforge.net/projects/numpy/files/

2. Installed the SDL libraries from dmg
http://www.libsdl.org/

SDL  1.2.15
SDL_mixer 1.2.12
SDL_ttf  2.0.11
SDL_image 1.2.12

3. Installed the libjpeg and libpng libraries from dmg
http://ethan.tira-thompson.com/Mac_OS_X_Ports.html

libpng v1.5.4
libjpeg 8c

4. Installed Xcode 4.4 from Apple apps. Need to add command line tools.
To do this start Xcode and go to Preferences under Xcode menu. Choose the Download tab and select Components.
Then install the Command Line Tools.

5. Installed XQuartz. Mountain Lion OS X no longer includes the X11 window system library.
This is different from Lion OS X.
http://xquartz.macosforge.org/landing/

XQuartz-2.7.2.dmg

6. Downloaded pygame tar file from 
http://pygame.org/download.shtml

pygame-1.9.1release.tar.gz 

Decompressed and extracted to create directory pygame1.9.1release

6. Before compilation of pygame:

  a. SDL_x header files refer to SDL as  However, a SDL directory is not under
the include directory of SDL (SDL/Headers). To fix this in a simple way:

    i. Went to directory
          /Library/Frameworks/SDL.framework/Headers
     then made a link as follows:
          ln -s SDL ./

7. Changed to the pygame directory (normally pygame1.9.1release). Then switched to the super user.
However, you can use the sudo command instead.

I set the following compilation flags

export CC='/usr/bin/gcc'
export CFLAGS='-isysroot /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.8.sdk -I/opt/X11/include -arch i386'
export LDFLAGS='-arch i386'
export ARCHFLAGS='-arch i386'

ln -s /opt/X11/include/X11/ /usr/local/include/X11

edit src/scale_mmx64.c, and replace movsxl with movslq like this

8. Now execute:
   python config.py
This should find the SDL, jpeg, png, and numpy libraries

   python setup.py build
This will build in the directory before installing. It should complete with no errors.
then
   python setup.py install

9. Confirmed that it worked:

   Out of super user mode and in a terminal shell

   python
   and within python
   import pygame

   this gave no error and a simple pygame program ran fine.

hope this article is helpful

git commit 流程 極簡易教學

這篇文章只提供用git提交code最簡單的方式，不包含細節觀念和例外狀況(conflict等)處理。想要知道相關細節的，煩請自行google。
 要commit（提交）自己的code，分成4個階段，這件事要首先keep in mind：
 修改需要更動的code -> 把更動過且確定要提交的code放到stage（沒有要提交的就不要放） -> commit（提交這次要更動的code） -> 把提交的code push到遠端
注意！放到stage和commit是不一樣的！要commit前，一定要先放到stage。因為你不一定需要將自己所有更動過的code都提交，先放到stage，git才知道你這次到底要提交哪些code。push時只會把你commit的code（有放到stage的code）放到遠端。
這點我自己當初也搞不太清楚，撞了很多次牆。

有了上述大觀念後，以下是簡易流程
1. 為了避免不必要的conflict造成自己的麻煩，每次修改前都請先git pull，先把遠端最新版本的code抓回來
2. 修改code
3. git status 列出目前的狀態（最好在這個git repository的根目錄下這個指令，不然接著要add時會有一些路徑上的問題）

此處需要再知道一個觀念：git repository 下的檔案分成兩大類：tracked, untracked
簡單的說，git有紀錄過的是前者；反之是後者。
這張圖上半部紅色的，是已經被git追蹤，這次修改過的檔案（沒被修改過的就不會被列出）；下半部是這次新增，尚未被追蹤的檔案。
4. 把你這次要commit的檔案add到stage
你可以依序下 git add XXX/yyy（需要包含路徑），一個檔案一個檔案放
假如你這次更動的file全部都要提交，則可以下
git add .
或是直接在 commit 時加上 -a
git commit -a
不過需要特別注意的是，git commit -a 只會新增tracked file，亦即只會新增之前就存在、這次被修改的file；這次才新增的file不會被加入。要連這次才新增的file都加入，一定要用
git add .

add完後，再下git status
就會看到剛剛被add的檔案已經變成準備被commit的情況

5.提交這次要push到遠端的code
git commit -m "add aaa file"
-m 後面接的是這次commit的註解，可長可短，以你的夥伴看得懂為原則，一定要加！
若要搭配-a使用，則要下
git commit -am "add aaa file"

下完commit後，git 會在console上印出一些資訊，大致上是有哪幾份檔案被更動過、新增、刪除了幾行code
6. git push
基本上，這樣就完成你這次的提交了。git同樣會印出一些這次push的資料。
不過，假如你的同伴在你修改檔案時有push新的code到remote repository，這時候就需要merge你們各自的新code，git會要求你先pull你同伴的新code。
git pull後，運氣好的話，git會自動merge你們的新code；運氣不好時（通常是有對同一份檔案進行刪改），就會出現conflict的情形，需要手動解決conflict以merge檔案。
如何解決conflict超出本文討論範圍，請自行google。

ps,
git status只是列出目前的狀態，非commit時必要的指令，若很確定自己的狀態，可以略過。

用 jquery 實做 更多/減少 文字

本文主要參考jQuery More/Less Text一文。 首先，請在html中增加下列 elements
 <div class=\"more-less\">
   <div class=\"more-block\" ></div>
   <a href=\"#\" class=\"adjust\"></a>
 </div>
接著是 js:

  $(function(){                                                                   
                                                                                
// The height of the content block when it's not expanded                       
var adjustheight = 52;                                                          
// The "more" link text                                                         
var moreText = "+  More";                                                       
// The "less" link text                                                         
var lessText = "- Less";                                                        
                                                                                
// Sets the .more-block div to the specified height and hides any content that overflows
$(".more-less .more-block").css('height', adjustheight).css('overflow', 'hidden');
                                                                                
// The section added to the bottom of the "more-less" div                       
//$(".more-less").append("[...]");                                              
// Set the "More" text                                                          
$("a.adjust").text(moreText);                                                   
                                                                                
$(".adjust").toggle(function() {                                                
        $(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible');
        // Hide the [...] when expanded                                         
        //$(this).parents("div:first").find("p.continued").css('display', 'none');
        $(this).text(lessText);                                                 
    }, function() {                                                             
        $(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden');
        //$(this).parents("div:first").find("p.continued").css('display', 'block');
        $(this).text(moreText);                                                 
});                                                                             
});       

其中14,21,25是原文中用來增加 [...] 字串的。 我自己覺得不需要，所以註解掉了。

讀取下一頁或ajax局部更新時以jquery顯示 loading 訊息

不論是使用ajax局部更新或整頁換新，假如loading時間過長，都容易讓user以為網站掛點了。
使用blockUI這個jquery pulgin可以在讀取時顯示相關資訊，讓user知道正在讀取資料（其實類似的jquery plug in很多，但我只用過這個，也覺得blockUI使用簡單且功能夠強）
首先當然要在 html 的 head 中讀入 jquery 及這個plugin，此處不贅敘。（注意！要把jquery放在前面plugin放後面，否則會有bug導致無法執行。）
假設是要整頁換新，可以將負責換新的那個DOM設個id（此處為block），然後使用以下code，就可以在點擊該DOM後，以iphone的形式顯示「please wait」的資訊，直到下一頁出現。

            $('#block').click(function(){
                 $.blockUI({ css: { 
                            border: 'none', 
                            padding: '15px', 
                            backgroundColor: '#000', 
                            '-webkit-border-radius': '10px', 
                            '-moz-border-radius': '10px', 
                            opacity: .5, 
                            color: '#fff' 
                        } }); 
            });

blockUI的官網有很多DEMO和sample code，可以挑自己喜歡的套用。

檢視 ruby 和 python 的變數型態

ruby和python這兩個script language分別有內建的函式可以讀取變數的型態，只是用法不太一樣。

自己常常搞混，特此紀錄一下：

#python
s='ww'
type(s)

#ruby
s='qq'
s.type()

將ruby script編譯成exe檔

網路上有幾個將ruby script編譯成windows可執行的exe檔的工具，常見的包括exerb、rubyscript2exe，可是我自己實際使用，這兩個工具都有一些難解的bug，用了一下就放棄了。

最後找到ocra這個工具，它其實也有bug，但很好解決。

首先，請在command line用gem安裝ocra（我是用linux系統，windows下指令可能會有點不一樣，但應該大同小異，請自己變通）

gem install ocra

接著，用ocra compile你的.rb檔

ocra example.rb

第一次使用時，可能會產生下列錯誤（因為我已經解決下列錯誤，所以以下訊息是google來的）

Invalid gemspec in [c:/Ruby187/lib/ruby/gems/1.8/specifications/ocra-1.3.0.gemspec]: invalid date format in specification: "2011-06-19 00:00:00.000000000Z "
Invalid gemspec in [c:/Ruby187/lib/ruby/gems/1.8/specifications/win32-autogui-0.5.0.gemspec]: invalid date format in specification: "2011-08-17 00:00:00.000000000Z" 1.8.8

循著錯誤訊息的路徑（c:/Ruby187/lib/ruby/gems/1.8/specifications/）找到「ocra-1.3.0.gemspec」這分檔案後，把"2011-06-19 00:00:00.000000000Z"改成"2011-06-19"即可。
第二個錯誤訊息我自己其實沒碰到，是google時發現別人有這個問題。不過依法修改它的date format應該就沒問題了。

接著，重新執行第二個指令，應該就會產生一份example.exe
這份.exe檔在沒有安裝ruby的windows上也可以執行。

ps, 我用的ruby是1.8.7

讓html中的元素隨著捲軸移動

如題，這個功能在比較動態的網頁應該都很常用，以前要用長的可怕的js code才有辦法達成，現在用jquery，幾行code就輕鬆搞定
當然，要使用這個功能，務必在html的head中讀入jquery，此處不贅言，直接切入script
以下code主要參考Keep element in view while scrolling using jQuery這篇文章

 $().ready(function() {  
  var $scrollingDiv = $("#scrollingDiv"); // #scrollingDiv請改成自己要移動的元素
 
  $(window).scroll(function(){ 
   $scrollingDiv
    .stop()
    .animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow" );   
  });
 });

有幾行值得特別說明
2.因為捲軸一移動，就會用到這個function，假如直接把這個DOM選取的動作存成一個jquery object，可以省去每次都尋找element的運算，效率會比較好
6.捲軸轉動的幅度可能很大，在第7行調整元素位置前，要先確保上個動作停止
7.animate是jquery內建調整css的函式；scrollTop是計算捲軸位置的函式。此處讓選取到的div的top margin隨著捲軸位置增加30px，即可確保這個div永遠距離頁面頂端30px