發表文章

目前顯示的是 六月, 2013的文章

Tags Directive -- AngularJS

Github: https://github.com/CarterTsai/tags_directive

CodePen : http://codepen.io/CarterTsai/pen/hLdwf


我簡單設計了一個tags的directive,但這是第一版而已,未來會慢慢增加他的功能
AngularJS真的滿不錯用。


Check out this Pen!
<div ng-app="app"> <div ng-controller="BcCtrl"> <div> <input type="input" tags="m_tags" /> </div> </div> Check out this Pen!
@import url(http://fonts.googleapis.com/css?family=Titillium+Web:400,700); $tag_padding : 3px 3px 3px 3px; .wrapper_tag{ margin-top : 20px; } .tags_type{ width:100%; height:100%; margin-right: 5px; padding: $tag_padding; background-color: #caca1a; font-family: 'Titillium Web', sans-serif; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }Check out this Pen!
var app = angular.module('app', []); …

指令筆記 -- GDB

這篇只是我自己學習GDB的指令的紀錄,應該不會太多內容

1. info proc mapping

顯示process的記憶體映射表,GDB會顯示目前除錯對象的/proc//maps的資訊



Mapped address spaces:

          Start Addr           End Addr       Size     Offset objfile
            0x400000           0x401000     0x1000        0x0 /home/xxx/document/c_code/stack/argms/argms
            0x600000           0x601000     0x1000        0x0 /home/xxx/document/c_code/stack/argms/argms
            0x601000           0x602000     0x1000     0x1000 /home/xxx/document/c_code/stack/argms/argms
      0x7ffff7a12000     0x7ffff7bd0000   0x1be000        0x0 /lib/x86_64-linux-gnu/libc-2.17.so
      0x7ffff7bd0000     0x7ffff7dcf000   0x1ff000   0x1be000 /lib/x86_64-linux-gnu/libc-2.17.so
      0x7ffff7dcf000     0x7ffff7dd3000     0x4000   0x1bd000 /lib/x86_64-linux-gnu/libc-2.17.so
      0x7ffff7dd3000     0x7ffff7dd5000     0x2000   0x1c1000 /lib/x86_64-linux-gnu/libc-2.17.so
      0x7ffff7dd5000     0x7ffff7dda000     0x5000        0x0
      0x7ffff7dda000     0x7ffff7dfd000    0x23000       …

ngRepeat範例 -- AngularJS

References: http://docs.angularjs.org/api/ng.directive:ngRepeat

以下是ngRepeat的範例:
有興趣可以連到CodePen看結果 http://codepen.io/CarterTsai/pen/mdxDI
不知道為什麼這個範例嵌入到Google Blogger會看到不結果

簡單講一下這個範例是作什麼,首先我有很多messages(格式是name : detail info)要秀
name在left的div中,任何一個name被點擊後會將details_info顯示在rigth的div中

而我這個範例也用到兩次ng-repeat,因為我的資料是由陣列包住多個物件,所以我為了將
資料正確拿出來,所以要用到兩次ng-repeat。

第一個ng-repeat是用來將每個陣列的資料拿出來。
第二個ng-repeat是用來將物件分成name跟val

HTML:
<div ng-app ng-controller='Ctrl' > <div class="left"> <div class="box" ng-repeat="msg in messages"> {{$index+1}}. <span ng-repeat="(name, val) in msg"> <a href="#" ng-click="show(val)"> {{name}} </a> </span> </div> </div> <div class="right" >{{detail}}</div> </div> Check out this Pen!


JAVASCRIPT:
function Ctrl($scope){ $scope.messages =[ {'a':'a info'}, {'b':'b info&#…

解釋scope.$apply用來做什麼? -- AngularJS

References: http://jimhoskins.com/2012/12/17/angularjs-and-apply.html


1.  $apply and $digest

$scope.$digest()其實是用來檢查binding的值有沒有被改變。但是這個方法通常是不會直接拿來用,所以會去使用$scope.$apply()來取代,因為$scope.$apply()就會去呼叫使用$scope.$digest()了。  

 $scope.$apply() 會做以下兩件事:

* 執行function或是Angular Expression。
* 呼叫$scope.$digest() 來更新任何的bindings或watchers。

    什麼時候需要去使用$scope.$apply()呢?其實也很少會用到,在AngularJS中幾乎你的code都會包在$scope.$apply()中,Events像是ng-click, controller initialization, $http callbacks 全部都是被$scope.$apply() 給包住的。所以你不需要自己去呼叫 $scope.$apply() 。而且在$scope.$apply() 中呼叫$scope.$apply() 會出現錯誤。

    所以真正會用到$scope.$apply()的情況是瀏覽器DOM events, setTimeout, XHR(XMLHttpREquest) 或是第三方套件。

範例:
setTimeout


<div ng-app ng-controller='Ctrl' > {{message}} </div>Check out this Pen!
function Ctrl($scope){ $scope.message = "This message will updated after 1000ms" setTimeout(function(){ $scope.$apply( function() { $scope.message = "Update Message"; }); }, 2000); }Check out this Pen!如果你…

64位元變數在32位元跟64位元的不同 -- 從assemble的角度來看

OS: Ubuntu x86_64
gcc: gcc version 4.7.3 

最近看了一本關於Debug的書,把好久沒看的Assembly也看了一下。對於以前寫C語言其實都不太會去看gcc會把你的code轉成什麼樣的assembly都不太關心。那也剛好最近比較有空(空了好久了 XD)就看到書上有寫有關64位元的變數在這兩個架構上的assembly會有不同,但書上也只是寫個簡單的敘述。

我也想說直接Dump Assembly直接看會更清楚。所以我做了以下的簡單的實驗。

1. Source Code

這是我要看的source code主要只是看64位元的變數在32位元跟64位元架構的assembly有什麼不同。所以只有只有簡單的兩行。所以我assemble只有專注於gcc會怎樣處理這個 變數。

首先我定義了一個unsigned long long 64位元的變數,並且給他一個64位元的值。

#include <stdio.h>

int main(int argc, const char *argv[])
{
unsigned long long val64 = 0;
    val64 = 0xffffeeeeddddcccc;

    return 0;
}


2. 32位元Assembly 
因為我的電腦是x86_64的OS,所以要編譯32位元的assembly要在gcc的參數輸入-m32來讓gcc知道我們要編譯成32位元

$> gcc -Wall -m32 -O0 main.c -o assemble32 $> objdump -d --no-show-raw-insn assemble32
080483ec <main>:                                                                       80483ec:   push   %ebp                                                                80483ed:   mov    %esp,%ebp                                                           80483ef:   and    $0xf…

Tasks with Arguments -- Rakefile

1. Arguments and Default Values

下面的程式碼,主要是在task中加入參數跟預設值
說實在的還滿好懂的,我就不細講了 :P


task :name, [:first_name, :last_name] do |t, args|                
    args.with_defaults(:first_name => "Carter", :last_name => "Tsai")            
    puts t                                                                      
    puts "First Name is #{args.first_name}"                                      
    puts "Last  Name is #{args.last_name}"                                      
end



* 沒有參數就會帶入預設值
$> rake name
name
First Name is Carter
Last  Name is Tsai



* 有參數的時候

$> rake name[A,B]
name
First Name is A
Last  Name is B


2.  Prerequisites 

這部份的話就是加入 => [:pre_name],就是說在執行這個任務之前你要先做的事(就是先去執行:pre_name這個任務)


task :pre_namedo
    puts "test..."                                                              
end  

task:name, [:first_name, :last_name] => [:pre_name] do |t, args|                
    args.with_defaults(:first_name => "Carter"…

ng-click 按鈕變換簡單教學 -- AngularJS

以下是ng-click 按鈕變換的code

有興趣的可以直接看Result的部份,然後點選edit按鈕後他會變成done的按鈕,反之點選done會變成edit。

利用AngularJS可以很快就完成這件事,請點選HTML來看一下
code怎麼寫。

這邊只會用到AngularJS的ng-click和ng-show的指令來完成。

1. ng-click : 這邊的用途是當使用者點下span這個標籤後會將showDelete這個變數等於 !showDelete

2. ng-show : 只要expression是"ture"的話就會將DOM給顯示出來
http://docs.angularjs.org/api/ng.directive:ngShow


Check out this Pen!

在第80個字元的位置顯示顏色-- Vim

圖片
References : http://stackoverflow.com/questions/235439/vim-80-column-layout-concerns


為什麼要在第80個字元的位置顯示顏色呢?主要是為了寫程式的時候提醒自己不要寫太長

所以 將下面的程式碼加入在.vimrc最後面就可以在第80個字元的位置顯示顏色:
if exists('+colorcolumn') set colorcolumn=80 else au BufWinEnter * let w:m2=matchadd('ErrorMsg', '\%>80v.\+', -1) endif
效果就會像下圖一樣:







Notification Icon with SVG and AngularJS

圖片
1. Description

I use SVG and AngularJS ( references : http://dailyjs.com/2013/06/07/angular-svg/) to do a Notification Icon. Youdon't need too more CSS to finish it.

That look like following picture :










You can change the number using range input on DEMO


2. Demo and Source code.


DEMO : http://cartertsai.github.io/

github : https://github.com/CarterTsai/cartertsai.github.com







存取Global物件

References : Javascript Patterns

在瀏覽器中,任何程式碼可以經由windows property來存取Global物件(除非你做了很特殊和出乎意料的事來重新宣告一個local的window的物件)。但是在別的環境中可能是用別的方式來存取,所以如果你需要存取Global物件,但是又不想很麻煩的方式來驗證window,你可以用下面的方法來存取這種方式可以在任何地方確保你拿到Global物件。

var global = (function () { return this; }());

這個方法你總是可以得到Global物件。

上面的方法不在ECMAScript 5的strict mode的例子,所以你在strict mode必須用別的方法來取得Global物件。

Rake -- Namespaces用法

1. Namespaces

Rake支援namespaces的觀念,讓你可以群組化你的任務(task)

如果你用過rails應該對這個不陌生,例如要產生database

$> rake db:migrate

db就是namespace, migrate就是任務



以下是Rakefile的範例:

namespace:morningdo
task:turn_of_alarmdo
        puts "Good morning!!"
end
end

namespace:afternoondo
task:turn_of_alarmdo
        puts "Good afternoon!!"
end
end



$> rake morning:turn_of_alarm
Good morning!!

$> rake afternoon:turn_of_alarm
Good afternoon!!

2. Default Task

如果你有想過只有執行rake那他會發生什麼事,那rake會直接給你Error訊息
叫你要去建立default的task

所以你應該在Rakefile建立default的task

例如:

task:default => 'morning:turn_of_alarm'

$> rake
Good morning!!

來寫Rakefile吧 -- 第一步

Rakefiles (rake's version of Makefiles)

$> touch Rakefile
$> vim Rakefile

1. 首先最簡單的範例:

task :one do
     puts "One Step"
end

這個範例就是建立one這個任務,至於怎麼使用看下面的指令

$> rake one
One Step


2. 多個任務由一個任務全部執行

 task :one do
      puts "One Step"
 end
 task :two do
     puts "Two Step"
 end
 task :three do
      puts "Three Step"
 end

 task :all =>[:one, :two, :three] do
      puts "Run All"
 end

$> rake all
One Step
Two Step
Three Step
Run All

當然如果你要執行順序改變的話,就將[]中的變數換成位置就好

看起來要寫Rakefile其實滿容易上手,這篇只是簡單說明Rakefile怎麼寫而已之後我會在繼續寫新的東西。

刪除游標所在的單字 -- Vim

假設你的檔案有以下的文字

Delete the word under the cursor  

然後你的游標在黃色的範圍 按下"Esc"跳到 command mode

輸入daw就會刪掉word這個單字

輸入caw就會刪除word這個單字後,進入編輯模式

多行註解 -- Vim

References :
http://www.linuxask.com/questions/comment-out-multiple-lines-using-vim?utm_source=feedburner&utm_medium=twitter&utm_campaign=Feed%3A+linuxask+%28Linux+Ask%21%29



Steps: 1. Change to command mode
2. Enable visual block editing by pressing Ctrl + V
3. Select the line(s)
4. Press "I", enter the character you needed, e.g. "#"
5. Press "Esc", then "Enter"

Steps: 1. 先轉回到command mode (按ESC) 2.  Ctrl + V 換到visual block editing 3. 選擇多行(用上下鍵選擇你要註解的區塊) 4. 按 "I"(shift + i) , 然後按下你需要的任何字元,例如. "#" 5. 最後按"Esc"再按 "Enter"