這篇文章只提供用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時必要的指令,若很確定自己的狀態,可以略過。
this blog records some issues I faced when I was developing my program. Hope these articles may help someone who faced the same problem.
2012年8月26日 星期日
2012年5月4日 星期五
用 jquery 實做 更多/減少 文字
本文主要參考jQuery More/Less Text一文。
首先,請在html中增加下列 elements
<div class=\"more-less\">
<div class=\"more-block\" ></div>
<a href=\"#\" class=\"adjust\"></a>
</div>
接著是 js:
<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是原文中用來增加 [...] 字串的。
我自己覺得不需要,所以註解掉了。
2012年2月14日 星期二
讀取下一頁或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」的資訊,直到下一頁出現。
使用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,可以挑自己喜歡的套用。
2011年12月15日 星期四
檢視 ruby 和 python 的變數型態
ruby和python這兩個script language分別有內建的函式可以讀取變數的型態,只是用法不太一樣。
自己常常搞混,特此紀錄一下:
自己常常搞混,特此紀錄一下:
#python s='ww' type(s)
#ruby s='qq' s.type()
2011年11月30日 星期三
將ruby script編譯成exe檔
網路上有幾個將ruby script編譯成windows可執行的exe檔的工具,常見的包括exerb、rubyscript2exe,可是我自己實際使用,這兩個工具都有一些難解的bug,用了一下就放棄了。
最後找到ocra這個工具,它其實也有bug,但很好解決。
首先,請在command line用gem安裝ocra(我是用linux系統,windows下指令可能會有點不一樣,但應該大同小異,請自己變通)
第二個錯誤訊息我自己其實沒碰到,是google時發現別人有這個問題。不過依法修改它的date format應該就沒問題了。
接著,重新執行第二個指令,應該就會產生一份example.exe
這份.exe檔在沒有安裝ruby的windows上也可以執行。
ps, 我用的ruby是1.8.7
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
2011年11月25日 星期五
讓html中的元素隨著捲軸移動
如題,這個功能在比較動態的網頁應該都很常用,以前要用長的可怕的js code才有辦法達成,現在用jquery,幾行code就輕鬆搞定
當然,要使用這個功能,務必在html的head中讀入jquery,此處不贅言,直接切入script
以下code主要參考Keep element in view while scrolling using jQuery這篇文章
有幾行值得特別說明
2.因為捲軸一移動,就會用到這個function,假如直接把這個DOM選取的動作存成一個jquery object,可以省去每次都尋找element的運算,效率會比較好
6.捲軸轉動的幅度可能很大,在第7行調整元素位置前,要先確保上個動作停止
7.animate是jquery內建調整css的函式;scrollTop是計算捲軸位置的函式。此處讓選取到的div的top margin隨著捲軸位置增加30px,即可確保這個div永遠距離頁面頂端30px
當然,要使用這個功能,務必在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
2011年11月23日 星期三
訂閱:
文章 (Atom)

