一些平鋪直敘技術相關文

最近真的是挺忙的...，每次下定決心要做什麼之後就一直被外來突然的事情給打斷。
好吧，今天要寫的筆記就是在windows作業系統下的php安裝tidy。


為什麼要安裝tidy呢，簡單來講呢就是，你的網站的後台，或者是前台的討論區等等，如果有加載一般的文字編輯器(或者是 wysiwyg )，供他人編輯，然後送出資料的那種，我們必須要去設想，使用者未必會正常的使用文字編輯器，或者，編輯器也未必是完美的，不可能沒有bug，當使用編輯完之後，按下送出的那一刻，使用者不可能知道編輯器所送出去的字串(也就是html)，是不是符合常理的，比方說編輯器送出去之後的html變成:

<p>我是一段文字</i></table>
要是真的送出這種荒腔走板的html格式，會導致顯示頁面的破版，當然也有可能是有心人士故意要導致網頁破板而來亂的也是有。

所以，我們要做的事情就是，防止頁面跑版或者破版，以及讓輸出的html碼，盡量符合常理的出現，tidy能幫你把缺少的tag補滿。


如何確認是否有安裝tidy?

自從上周去了一次 Node.js TW 的聚會，這兩天有稍微花點時間看看node.js，不過很克難的是....，我的電腦是window，這個環境下跑node.js並不是這麼的順暢，後來只好改用其他linux的環境了。

不過，環境不是個問題，我還是打算嘗試一下node.js，決定在window下裝VM去跑linux作業系統了，我只求大概有個基礎，畢竟我還是志在前端...，也希望有心看完這篇文章的人不要用太嚴厲的角度，若我有寫錯的地方也歡迎拍磚。

接下來談一下node.js，台灣已經有很多人在涉略一塊了，inside竟然也出現了node.js後端程式的職缺，漸漸地，該不會前端後端都需要了解javascript了?! 那真是太驚人了...，天那不要這麼逼迫><，不過越來越多人涉略也是很好的跡象，如果有任何問題，得到答案的機會越大。


怎麼學 node.js?
目前node好像沒有繁體書出版(說不定這是一個商機?!)，所以呢，建議看一下 Node.js 台灣社群協作電子書，是少循序漸進，有秩序的編排，我以前試過上網找文章學，不過總是斷斷續續，很片段式的，後來我自己覺得這樣很麻煩，東學一點，西學一點，最後要自己兜出一個脈絡好像很困難xd(不過我也正在努力做這件事情)，好吧，這可能因人而異，每個人學習方不同。當然如果要看國外的介紹，先去官網繞繞吧


node.js 是甚麼?
node.js 是一種可以運作 JavaScript 的平台，不過那跟我們平常看到的，寫在web上，運行在browser上的javascript不太一樣，簡而言之就是運行在server端的javascript，PHP,Perl,Python能做的事情，他也能做到，而且做的也不差，可以參考這篇nuttus+ Node.js for Beginners ，這是一篇好文可以看一下，該作者比較了PHP跟node.js，有個小表格，裡面有些簡單的數據。

node.js是平台也是語言，但是千萬別把它當作javascript的framework，他不是，他的地位真的就跟PHP差不多，但是他又比PHP來的更直接，因為node.js本身內建http的服務，所以她不需要像php那樣需要擁有一個apache這樣的橋樑。

Node.js 與 JavaScript
說到javascript，大家就會想到瀏覽器，或者jquery…

今天在家裝node.js裝了一個上午Orz....
以下是我的基本安裝：
sudo apt-get install curl
sudo apt-get install g++
sudo apt-get install libssl-dev

然後我發現我在ubuntu用sudo apt-get install nodejs
根本裝不起來.起初還以為是ubuntu版本問題
一直出現 無法安裝git套件的錯誤

從git上面克隆node下來:
git clone git://github.com/joyent/node.git

在Linux作業系統底下，要用g++來編譯node.js:
yum install gcc-c++

使用OpenSSL或SSL/TLS會用到的:
yum install openssl-devel

安裝後node會在usr/node資料匣(先去user底下找node這個資料夾)
到node跟目錄資料夾，下指令
./configure
make
sudo make install
以上三句都要，會等一陣子...大約10~20分鐘
安裝完之後會顯示...
symlinking ../lib/node_modules/npm/bin/npm-cli.js->/usr/local/bin/npm
updating shebang of /usr/local/bin/npm to usr/local/bin/node..
(我發現好像連npm都裝好了)
安裝完成後，輸入node，確認使否安裝成功，若進入>指令模式，應該就是成功了。





若要退出這個(>)模式(這種模式好像叫做REPL模式，read eval print loop)，連續按兩次ctrl+c，就可以退出這種模式。






接下來我輸入node --help 進一步確認是否有安裝到。
這個node --help會顯示關於node的一些用法。



來一句hello world:
輸入node，進入>(REPL模式)，輸入console.log('Hello World!!!!!');



log出來的內容除了有hello world之外，下面還會出現undefined，不用緊張
，這個undefined是console.log的return value。

常常每次參加聚會看別人下linux指令而我是window就很麻煩，今天終於打算要來好好安裝一下VirtualBox，有人都說這是VM，恩...不管，總之呢.. 如果是跟我一樣在windows下要另外運行linux當作練習的話，就裝這個吧!

然後我選擇的作業系統是ubuntu，剛好在今年的webconf有到ubuntu的櫃位拿了安裝光碟。

另外我所安裝的VirtualBox是Oracle這家公司的，首先先到官網:
https://www.virtualbox.org/
然後按下左邊選單的downloads
https://www.virtualbox.org/wiki/Downloads


安裝過程會等個幾分鐘，
安裝到電腦後就跟平常在安裝軟體一樣..
下面的安裝因為我都沒裝過，也沒什麼了解，基本上都是照著預設值再走.
(我的安裝順序不一定是準的，建議多到網路爬文，畢竟我也是趕時間灌好的...)

繼上次我寫過一篇筆記 : HTML製作edm的技巧與問題
最近發現即便我遵守一些製作edm或是email信件的規則，一樣會有在各大mail system(各大信箱，ex:Microsoft outlook, gmail, hotmail, Yahoo mail....)出現各種零零總總的問題，我真是受夠了這個問題...，埃..為了處理這種UI在各個信箱顯示不同結果的問題，我下定決定我一定要找到方法。

說實話起初我不覺得信件的CSS在一兩種信箱中跑版沒有甚麼奇怪
(好吧，就當作我能力不好吧)
但基本上大部分的信件信筒為了防止事件監聽會有些行為上的限制
以及css的部分送到信箱後又會被重新解析過
Microsoft outlook就更不用說了
這雖然是信件收發軟體但他畢竟不是瀏覽器
一般信件寄到是用瀏覽器開啟的信箱就已經有很多css跟html排版的限制了

後來呢就做各種嘗試，每種失敗我都記錄起來，多試還是有用的xd。

Gmail /  Hotmail / Yahoo Mail
我發現信箱的排版行內樣式 hotmail / outlook 不支援Margin，所以如果需要設邊界寬度，縮排，用padding可以支援幾乎全部。
(我同事建議用border，設寬度然後顏色透明)

活動官網 : http://ithelp.ithome.com.tw/js-ninja/quiz2013/#main

話說這兩天有個非常重要的活動就是"Javascript忍之道2-百謎決戰"，我也不免俗參加了一下，題目沒有很簡單....，一定需要google一下的xd! 雖然我好想要得到今年JSDC的門票，不過我最大的野心是當工作人員xd。

以下網址當個參考:

The Top 10 Javascript MVC Frameworks Reviewed
查詢哪些Javascript MVC Framework有沒有支持UI data binding

ECMAScript 5 compatibility table
查詢ECMAScript5在各個瀏覽器的支援程度

淺談 ECMAScript 5 嚴格模式 (Strict Mode)

 (上圖截圖自yahoo台灣)

我上週在想一件事情就是，我看過一些網站，如Yahoo台灣首頁或是..健保局等等之類的網站，有類似換網站色系的功能，然後我自己也稍微猜測了一下要怎麼處理這樣的效果，但是這件事情很小，如果沒興趣就跳過別看了xd，因為我也不是說很花時間的去了解這件事情。

 *而且我到現在還不是很了解這樣的功能是因為甚麼原因而來的? 有人可以告訴我嗎 ><

先來說我看了yahoo的心得好了，css的結構還Ok，但是javascript....，恩...那是壓縮過的，但是我還是有看，[詳見下方題外話]，只是看那種壓縮過的code真的很受打擊，很難懂xd，然後我就放棄了繼續去想這件事情，不過我能確定的是，在yahoo上換色系，每換一種顏色就送出好幾個http request，還有css檔案等... 好像是一種色系就是一個css file。


題外話 :

yahoo換色系功能整排是個ul>li*6的架構，每種顏色的li分別有自己的class name
然後控制顏色的js是一個物件的setter(好籠統的說法xd )，我只能看到這裡，實作上我就不懂了xd

set___什麼什麼___，就是設定什麼的意思，通常稱之為"取值器(Setters)"。
get___什麼什麼___，意思就是去取得什麼值，通常稱之為"設值器(Getters)"。

Setter與Getter是個很有趣的概念，應該說是個大學問，通常這兩個方法的出現是相輔相成的，我曾經在codecademy練習Javascript Object時有遇到，但我也不常寫Object(其實是我也不太會寫:P)，所以有興趣可以上網google一下。

就拿jQuery的height()方法來說好了: 當我要取得body的高度時，我會這樣寫:

$('body').height();//會得到當下body標籤的高度

當.height(); (不傳入任何引數)
括弧裡面沒有東西的時候，jQuery就會當做你是要取得值，而且你會得到他回傳body的高度給你，這樣就是類似於Getter的意思。

那如果是$('body').height('100');
括弧裡面有傳引數的時候，jQuery就會當做你是要設定值，這樣就是類似於Setter的意…

NOTE:
Perl一直到Perl5才出現reference(在perl還沒有reference的概念之前，想要產生二維的陣列是挺困難的)，當初為了讓perl5能夠擁有OOP(物件導向/面對對象)的概念，需要有reference的幫助，因此他也叫做物件參考指標。Reference產生很複雜的資料結構 ，對資料的處理有蠻好的彈性。Reference的種類 :硬性 :
存記憶體位置(常見)軟性(aka symbolic reference象徵性參考指標)  :
用變數名稱作為替代(少見) 參照的寫法: 一般來講reference的變數可以是純量變數,陣列跟雜湊存取一個變數的作為reference只需要在變數前面加 "\" ,ex:
%my_hash = qw/name Win want_job Frontend age 24/;
$ref = \%my_hash取得reference的值取得reference的值其實就是取得他在記憶體位置中的內容要取得reference只需要在變數前面加上被參照的資料型態符號,ex:以純量作為例子，純量的資料型態符號是$，所以若要取得$scalar的 值只需要在$scalars_reference前面再加一個$
$$scalars_reference = $scalar;以陣列作為例子，陣列的資料型態符號是@，所以若要取得$myarray的值只需要在$myarray_ref前面加一個@
@$myarray  = $myarray;以雜湊為例子就是
%$my_hash_ref = %my_hash;另外以上的三個例子:
 $$scalars_reference
@$myarray
%$my_hash_ref

也可以這樣寫.....(加個{ }而已xd)
$$scalars_reference =  ${$scalars_reference}
@$myarray                 = @{$myarray }
%$my_hash_ref        =  %{$my_hash_ref}常數可以被參考嗎? ans : 可以 Example:取得一個array的reference: my $ref = \@array;

print "將\@array的參照存在\$ref,print結果:\n";

print $r…

是說，停頓了幾天沒有寫什麼東西了，一來是忙，二來是我最近也是很不務正業的在看一些Perl的東西，但是...這樣也好啦，因為很可惜的，近期之內 JavaScript應該是不會有什麼進步，偶爾看看別的也好，而且其實我覺得我趁現在身邊同事可以讓我問些問題，也是很不錯。

這兩天有看一些參照的東西，我的朋友有出一個作業讓我寫，挺有趣的，在我以前所學，沒碰過reference這種存在記憶體空間的有趣事情xd，參照的筆記會有兩篇，這篇就先放作業的題目吧! 下一篇可能會寫的比較清楚，而且我發現我的註解比程式碼多好多，呵~有一種又回到一兩年前我剛學PHP那種初學者的感覺。

練習怎麼初始化Hash, Array, Hash的reference, Array的reference:
#!/usr/bin/perl -w
usestrict;

my%hash= ();
#這是hash的初始化
#hash的初始化不能用{}，否則會報以下的錯誤
#will popup alert msg Reference found where even-sized list expected at practice_hash_array_reference.pl line 5.

my $hash_ref= {};
#這是hash reference的初始化

my @array= () ;
#這是array的初始化

my $array_ref = [];
#這是array reference的初始化

%hash = qw/car audi price 20000000 birth_year 1990/;
#指定一些值到%hash

$hash_ref  = \%hash;
#取得%hash的reference

@array     = (1990...1999);
#指定一些值到@array

$array_ref = \@array;
#取得@array的reference


print "this is \$hash_ref:  $hash_ref \n";
#印出hash reference的記憶體位置
#印出的結果: this is $hash_ref:  HASH(0x162f8bc)

print"this is \$array_ref : $array_ref \n";
#印出arr…

首先先在自己的github新增一個Repository

開git bash:
簡單說明整個流程就是，從github下載一個repo到自己的本機，然後新增幾個檔案，然後commit，在push上去。


user@USER-PC /d
$ git clone https://github.com/winwu/fitness_80_practice.git
把剛剛新建立的repo 克隆下來

Cloning into 'fitness_80_practice'...
remote: Counting objects: 3, done.
remote: Compressing objects: 100% (2/2), done.
Unpacking objects: 100% (3/3), done.
remote: Total 3 (delta 0), reused 0 (delta 0)


(=====手動複製要加入的檔案到/d/fitness_80_practice/=======)

user@USER-PC /d
$ cd fitness_80_practice/

user@USER-PC /d/fitness_80_practice (master)
$ git status
# On branch master
# Untracked files:
#   (use "git add <file>..." to include in what will be committed)
#
#       SOURCE/
#       index.html
nothing added to commit but untracked files present (use "git add" to track)

user@USER-PC /d/fitness_80_practice (master)
$ git add .
warning: LF will be replaced by CRLF in SOURCE/jquery.min.js.
The file will have its original line endings in your working directory.
warning: LF will …

做個紀錄，以免下次忘記怎麼刪，因為有些練習怎麼用git的repo必須刪掉阿...
不過我怎麼覺得這似乎是個很危險的動作(所以沒什麼問題的話盡量不要亂刪)，我當初以為刪掉一個repo應該沒有什麼，應該會很好找到機關把他刪掉，殊不知我找了幾分鐘有..

首先先到自己想要刪掉的那個repo頁面，找到右邊有個Settings按鈕，按下去就對了
然後按下setting後會看到下面這一頁，先把滑鼠滾到下方紅紅的區域。


在紅色的這個Danger Zone的地方有個"Delete this repository"的按鈕，
按下去會出現警告視窗。


警告視窗詢問是否要刪掉，並且你要填入一些資訊

填入要刪除的repo名子，再按下下方I understand the.... 就成功了。

今天在家看了一小段的hash
因為我沒有linux的環境，所以我用komodo跟activePerl模擬perl的執行環境
(題外話，說到komodo，前幾天我在家裡試，完全跑不起來，今天不知道怎麼搞的就好了?!)
也正因為這樣，我才有辦法在code寫中文註解，用vim開只會是亂碼xd

ch01.pl
#!/usr/bin/perl -w
use strict;
use Data::Dumper;

#hash是一組純量的集合(hash就是雜湊的意思)
#純量在雜湊中是無序的，也就是須透過key來得到value
#定義一個名為about_win的hash可以這樣寫
#另外雜湊命名以%表示
my%about_win = (
                 'name'=>'Win',
                 'age'=>'24',
                 'job'=>'f2e',
                 'sex'=>'female'
                );
#當然這種key=>value的寫法不是定義hash的唯一方式
#也可以這樣寫
#my %about_win = ('name','win','age','24','job','f2e','sex','female');
#以上的寫法也可以被perl解釋成hash的key跟value，perl會把2N項看成是key(像是0,2,4,6...)

#dump出整個hash
print Dumper \%about_win;

#單獨取出hash的值
print "這是about_win的name: $about_win{name}\n";
print "這是about_win的age: $about_win{age}\n";

#動態增加hash的值
$about_win{is_like_dog}='yes';
print "動態增加一個is_like_dog…

前幾天同事又教我東西了，重點是Perl的Dumper，
Dumper對我來說就是一種debug的東西，可以知道backend傳了什麼變數給f2e，
然後f2e可以知道backend傳了甚麼變數與值給f2e，進而可以做些判斷決定做些甚麼事。

當然我對perl還沒有很熟，只是說， 如果我們可以知道backend定義的某個hash的key跟value，算是一種很不錯的合作模式，如果有什麼判斷不到的事情，f2e可以自己先debug。

然後Dumper就是可以把很複雜或是一般的hash顯示出來，恩... 我自己用起來感覺很像PHP的 print_r或是var_dump，總之很像輸出陣列的感覺。

這個練習其實是從網路上看來的，事情是這樣的這樣子的...
我一直不知道Data:Dumper是Perl本來就有的模組(應該是吧!?)
我看過比方說寫
use AAA::BBB
(use 使用模組的名稱)
(use 使用模組的名稱::使用模組裡面的函式)
，然後我就有辦法找到package AAA:BBB的檔案，或是找到AAA.pm檔之類的。然後我就傻傻地在專案中尋找package是Data::Dumper的檔案，好笑的是，我找不到XD，那應該是在某個特定的路徑下，從cpan或是哪裡下載下來的package吧?!。


好了，不管，總之呢，要使用Dumper就是寫use Data::Dumper;就是了
用的時候可以寫print Data::Dumper->Dump([\%你的hash名稱]);
或是寫print Dumper \%co_worker;




參考:
關於Dumper的實做方式關於Dumper的實做方式232.10. Data::Dumper第十三章 模組與套件

MUJI 八分目網站解析

MUJI 物的八分目網站的風格我很喜歡
原網站網址: http://www.muji.net/lab/fitness80/zh-tw/
截圖也是從上面的網址所截的。
恩...因為這個網站用了兩個我很有興趣的技巧，一個就是畫面捲動，另一個就是Muji在網頁上表現八分目的技巧。其實看這個網站的時候心理也大概有的底，經過我不是很精密的研究之下，還是有research到一點東西。
使用HTML5
是否為響應式設計
Ans:No 用了RWD測試的時候，

發現這個網站不是RWD(不過我並不確定他否另有手機版:P)
-用滑的效果比較不靈巧，要點按導覽列的小點感應是最好的
-順序上由上到下很順暢，由下到上還好，但我後來發現PC版也是這樣Javascript Plugin部分:
-jQuery,
-localScroll,
-scrollorama,
-jquery.belatedPNG,
(這個東西我第一次看過，我搜尋到一篇網路文章可以看看解決IE6不支持PNG絕佳方案)從100到80......
在Muji fitness80的HTML結構中，
右邊導覽列的ID叫做skipNav，點按skipNav會使畫面捲動
我看了原始碼之後，發現這個Muji網站使用了localScroll()這個方法，使畫面產生捲動的效果。
若把localScroll()這個拿掉，動作就會像錨點連結(<a href="#example">example</a>)一樣用跳的。
請參考以下網址或搜尋"localScroll":(這感覺跟jquery的scrollTop等方法很像)
jQuery.LocalScroll
另外這個網站所常使用的還有scrollorama 
scrollorama有個方法叫做 onBlockChange以及animate(scrollorama.animate())。 模擬....就是Plugin Plugin Plugin... :
我後來也嘗試模擬製作同Muji fitness80的練習，其實這個網站很好demo，因為我發現fitness80並無特別去做js/css的壓縮，是很好回推的網站。
基本上HTML結構都是參考fitness80，精簡了一些外掛檔(我不需要的我就拿掉了)，
Demo Link : http://yiyin…

哼哼，剛好有同事教我的啦，加減學摟!
大部分的題目是練習自歐萊禮的Perl學習手冊裡面的練習題。

取得使用者輸入的值的練習，並且印出Welcome + 人名 :
#!/usr/bin/perl #thisn is a comment print "what\'s your name\?"; print "\n"; $line = <STDIN>; if($line eq "\n"){     print "nothing"; }else{     print "Welcome  $line !"; }

執行結果:
[winwu@XXXXX (00:05:44) ~/my_perl]$ perl ch01.pl what's your name? win wu Welcome  win wu

計算圓周長(半徑是12.5): #!/usr/bin/perl -w $radius = 12.5; $pi = 3.141592654; $circum = $radius*(2*$pi); print "The circumference is  : $circum";
執行結果:
[winwu@XXXXX (00:13:23) ~/my_perl]$ perl ch02_1.pl
The circumference is  : 78.53981635


檔名 ch02_2.pl(練習第二章的第2跟第3題)
#!/usr/bin/perl -w
print "Please Enter the radius";
print "\n";
$your_radius = <stdin>;
if($your_radius lt 0){
$your_radius = 0;
}
#if the the user enter < 0, than we use 0
$pi = 3.1415926;
$result = $your_radius*(2*$pi);
print "\n"."The Circumference is $result\n";
執…

CodeIgniter練習 -  通訊錄
使用codeigniter的MVC架構Source Code : 之後再擺gitDemo URL : http://yiying2.ueuo.com/address_book/練習成果用途，所以都是假資料，規模很小，但至少具有增,修,刪,讀
但是我沒有特別的去做什麼驗證or SQL injection

首頁: 可以看到所有已經新增的連絡人資訊 |  可以新增連絡人 | 可以查詢人名
上方有個upload photo可以不用管他，只是用來測試ci怎麼上傳圖片

新增連絡人可以上傳個人圖片。 點按人名會跳出fancybox，並顯示個人資訊。
大概就這樣了。