發表文章

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

Windows作業系統-PHP安裝tidy

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


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

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

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


如何確認是否有安裝tidy?

Node.js初探

自從上周去了一次 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…

ubuntu安裝node.js

圖片
今天在家裝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套件的錯誤

在我的Fedora安裝node.js

圖片
從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。


安裝VirtualBox + 安裝ubuntu

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

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

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


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

Email 寄信-css/html 排版,跑版問題

繼上次我寫過一篇筆記 : 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,設寬度然後顏色透明)


Javascript忍之道2-百謎決戰

圖片
活動官網 : 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的意…

Perl初學筆記(4)-關於Reference(參照)-2

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初學筆記(4)-關於Reference(參照)-1

是說,停頓了幾天沒有寫什麼東西了,一來是忙,二來是我最近也是很不務正業的在看一些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…

git基本流程筆記

圖片
首先先在自己的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 …

如何刪除自己github上面的Repository

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

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


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


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

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

Perl初學筆記(3)-關於Hash

今天在家看了一小段的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初學筆記(2)-關於Dumper

圖片
前幾天同事又教我東西了,重點是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 八分目網站解析

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初學筆記

哼哼,剛好有同事教我的啦,加減學摟!
大部分的題目是練習自歐萊禮的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練習 -  通訊錄
使用codeigniter的MVC架構Source Code : 之後再擺gitDemo URL : http://yiying2.ueuo.com/address_book/練習成果用途,所以都是假資料,規模很小,但至少具有增,修,刪,讀
但是我沒有特別的去做什麼驗證or SQL injection

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

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