2013年3月31日 星期日

Windows作業系統-PHP安裝tidy


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


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

<p>我是一段文字</i></table>

要是真的送出這種荒腔走板的html格式,會導致顯示頁面的破版,當然也有可能是有心人士故意要導致網頁破板而來亂的也是有。

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


如何確認是否有安裝tidy?

2013年3月29日 星期五

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等一些用在前端部分的事情,但是不能用前端寫javascript的角度去看node.js,他們有些不一樣,比方說javascript有BOM與DOM的概念,後端javascript(node.js)不會有這種概念,為甚麼呢? Node.js不會再瀏覽器上面運作,所以也不需要去抓DOM,也沒有BOM。
那麼node.js所指的javascript是甚麼呢,其實寫node.js的javascript是很原生的javascript code,也有人說core javascript或者ECMAScript。

還有node.js的引擎是V8,到底V8是甚麼呢? 請上 維基百科


參考:
node.js.org
Node.js Taian
PHP+Apache vs. Node.js大車拼
V8 (JavaScript引擎)


先忙去...

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。


2013年3月28日 星期四

安裝VirtualBox + 安裝ubuntu

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

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

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


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

2013年3月19日 星期二

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的意思。執行後就真的會給<body>標籤高度100px的值:
                 
$('body').height('100');
$('body').height();
100
 有興趣的話可以在console.log玩玩看。


如果一個特性同時有getter跟setter,那就是可讀也可寫;
只有getter=>唯獨
只有setter=>只能寫入







然後又看了健保局的換色系的功能,一樣是會送出http request,但是很少,只有送圖,沒有其他css file等等,看來呢複雜一點的網站若要走換色系這件事情很難不送出http請求....



最後我覺得換色系的方法非常多....,可能需要按照實際手上的要實作的網站規模去決定要用甚麼方法或者使用效能較好的方法。

上方Change color因為HTML結構很簡單,所以我在每個換顏色的btn加了color-role的屬性,當按下btn之後會去抓需要改變色系的DOM,然後加CSS。
或者考慮操作document.styleSheets,
或者就參考如yahoo,健保局等作法。


2013年3月14日 星期四

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 $ref."\n";
印出 $ref可得到  ARRAY<0x4c70c8>  -->0x4c70c8就是記憶體位置

Example:怎麼解開參照?   以一個陣列為例,解開參照,並使用陣列取得某個索引值:Ans: 用{}號將reference的變數包起來
my @friends = qw/Tree Bri May/;
my $fri_ref = \@friends;
print @{$fri_ref};

#利用陣列取得某個索引值:
print @{$fri_ref}[2];   #會得到May

Example:以Hash為例,解開參照,請以某個Key來取得值:
my %resume = qw/name Win want_job Frontend age 24/;

my $resume_ref = \%resume;

print ${$resume_ref}{name};        #得到win

print ${$resume_ref}{want_job};  #得到Frontend

print ${$resume_ref}{age};           #得到24

#將%resume當作一般的hash使用for印出

for (keys %{$resume_ref}){
    print ${$resume_ref}{$_}."\n";
}

2013年3月13日 星期三

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

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

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

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

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";
#印出array reference的記憶體位置
#印出的結果: this is $array_ref : ARRAY(0x1f5b384)

print "My hash's car is ".${$hash_ref}{car}."\n";
#取得reference的car的值
#印出的結果是: My hash's car is audi

for(keys %{$hash_ref}){
  print "this value is ". ${$hash_ref}{$_}.".\n";
}
#分別印出Hash裡每個value
#印出的結果是:
#this value is audi.
#this value is 1990.
#this value is 20000000.

print @{$array_ref}[2]."\n";
#印出array_ref第二個元素  ==>取得1992

然後...其實Perl的基本語法疑似乎...沒有這麼難理解,他只是符號很多,很簡短,但是要去trace 別人的code,那才是真的亂碼阿xd

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 be replaced by CRLF in SOURCE/jquery.scrollorama.js.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in index.html.
The file will have its original line endings in your working directory.

user@USER-PC /d/fitness_80_practice (master)
$ git add .

user@USER-PC /d/fitness_80_practice (master)
$ git commit -m "add new file"
[master 9bc5274] add new file
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 be replaced by CRLF in SOURCE/jquery.scrollorama.js.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in index.html.
The file will have its original line endings in your working directory.
 15 files changed, 994 insertions(+)

 create mode 100644 SOURCE/sweet80.png
 create mode 100644 index.html

user@USER-PC /d/fitness_80_practice (master)
$ git push
warning: push.default is unset; its implicit value is changing in
Git 2.0 from 'matching' to 'upstream'. To squelch this message
and maintain the current behavior after the default changes, use:

  git config --global push.default matching

To squelch this message and adopt the new behavior now, use:

  git config --global push.default upstream

See 'git help config' and search for 'push.default' for further information.

Username for 'https://github.com':
Password for 'https://winwu@github.com':
To https://github.com/winwu/fitness_80_practice.git
   ac2b662..9bc5274  master -> master

如何刪除自己github上面的Repository

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

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


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


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


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

2013年3月10日 星期日

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之後的about_win的Dumper結果是".Dumper \%about_win;

#刪除雜湊的值(value)就是把它清空,讓他釋放記憶體空間
%about_win = ();
print Dumper \%about_win;
#這時dump出來的值就會是空值;



#雜湊和陣列不一樣的是,雜湊沒有按照順序排列
#那要如何知道一個hash有什麼key?
#可以使用Keys(%hash名)取得一個回傳陣列,該陣列會取得該hash裡面的所有key name
my %car = ('label'=>'audi',
           'price'=>'1000000');

print "印出car的key跟value:\n";
while ((my $key, my $value) = each(%car)){
     print $key.", ".$value."\n";
}

#刪除雜湊有兩個方式
(1)delete:一次刪除一個key
(2)undef :刪除整個hash 或是用剛剛提到的%about_win = (); 將hash設定為空值

delete $car{label};
print Dumper \%car;
#結果只剩price

undef(%car);
print Dumper \%car;
#甚麼都沒有了


#如何判斷一個hash有沒有某個key
my %dinner = (
            'food'=>'rice',
            'price'=>'200',
            'drink'=>'green tea'
             );

print exists $dinner{food};
#結果是1 就是true的意思,表示dinner有food這個key



以上ch01.pl的執行結果:
$VAR1 = {
          'name' => 'Win',
          'sex' => 'female',
          'age' => '24',
          'job' => 'f2e'
        };
這是about_win的name: Win
這是about_win的age: 24
動態增加一個is_like_dog之後的
about_win的Dumper結果是$VAR1 = {
          'is_like_dog' => 'yes',
          'name' => 'Win',
          'sex' => 'female',
          'age' => '24',
          'job' => 'f2e'
        };
$VAR1 = {};
印出car的key跟value:
price, 1000000
label, audi
$VAR1 = {
          'price' => '1000000'
        };
$VAR1 = {};
1

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;




參考:

2013年3月6日 星期三

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://yiying2.ueuo.com/8cent/
    但是我對於對Demo實在很卡關,詞窮也沒啥素材,只是我很少這樣拆解一個網站,只能說Muji fitness80網站製作簡單,設計美感也很有美滿。

-End

2013年3月4日 星期一

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";

執行結果:
[winwu@XXXXXXX (00:24:52) ~/my_perl]$ perl ch02_2.pl
Please Enter the radius
12.5
The Circumference is 78.539815



檔名ch02_4.pl(練習第二章的第4題)
讓使用者分別輸入兩個號碼,並且相乘

#!/usr/bin/perl -w
print "Please Enter the First Number\n";
chomp($first_num = <STDIN>);
print "\nPlease Enter the Second Number\n";
chomp($sec_num = <STDIN>);
$result = $first_num*$sec_num;
print "\nThe Result is $result";

執行結果:
[winwu@XXXXXXX (00:32:47) ~/my_perl]$ perl ch02_4.pl
Please Enter the First Number
10
Please Enter the Second Number
20
The Result is 200


檔名 ch02_5.pl(練習第二章的第5題)
#!/usr/bin/perl -w
print "\nPlease Enter an String\n";
$your_str = <STDIN>;
#chomp($your_str);
print "\nPlease Enter an Number\n";
chomp($your_num = <STDIN>);
$result = $your_str x $your_num;
#use X to replace *
print "\n$result";

執行結果:
[winwu@XXXXXX (00:49:12) ~/my_perl]$ perl ch02_5.pl
Please Enter an String
wggw
Please Enter an Number
3
wggw
wggw
wggw

  • 用#!/usr/bin/perl -w時,變數最好要用my宣告
  • windows下可安裝 Komodo IDE來練習Perl

--------------------這是華麗的分隔線---------------



(以下)的練習很多都是參考自簡信昌先生所寫的Perl學習手札而來的:
請參考以上網址,謝謝。

印出'\n' :
#!/usr/bin/perl -w
use strict;

print "\\n";

執行結果:
\n



取出陣列所有大於50的值 :
#!/usr/bin/perl -w
use strict;
my @array = qw/6 -4 8 10 -22  30 40 60 70 60 40 60/;
my @positive = grep{$_>40 } @array;
print "$_\n" for @positive;

執行結果:
[XXXXX@XXXXX (19:26:35) ~/my_perl]$ perl ch201301.pl
60
70
60
60


建立一個陣列(10 15 20 25 30 35),並讓使用者輸入索引值,並且印出陣列中相對應的值:  
#!/usr/bin/perl -w
use strict;
my @array = qw/10 15 20 25 30 35/;
print "Please enter which Key's value you want to see(enter 0~6)?\n";
my $your_value = <STDIN>;
chomp($your_value);
print "the \@array[$your_value] is : \n";
print $array[$your_value]."\n";

執行結果:
[XXXX@XXXXX(19:33:48) ~/my_perl]$ perl ch201301.pl
Please enter which Key's value you want to see(enter 0~6)?
5
the @array[5] is :
35

把這個陣列(4 -4 5 -6 7 -8 9 -10)做排序,並且印出結果 :  
#!/usr/bin/perl -w
use strict;
my @array = qw/4 -4 5 -6 7 -8 9 -10/;
@array = sort @array;
print join ' < ', @array;

執行結果:
[XXXX@XXX (19:41:34) ~/my_perl]$ perl ch201301.pl
-10 < -4 < -6 < -8 < 4 < 5 < 7 < 9



將陣列(4 -4 5 -6 7 -8 9 -10)中所有的值除以2然後print出來:

#!/usr/bin/perl -w
use strict;
my @array = qw/4 -4 5 -6 7 -8 9 -10/;
@array = map{$_/2} @array;
print join "\n", @array;

執行結果:
[XXXXX@XXXXX (19:44:24) ~/my_perl]$ perl ch201301.pl
2
-2
2.5
-3
3.5
-4
4.5


2013年3月1日 星期五

codeigniter練習 - 通訊錄


CodeIgniter練習 -  通訊錄

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



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

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

Vue multiselect set autofocus and tinymce set autofocus

要在畫面一進來 focus multiselect 的方式: 參考: https://jsfiddle.net/shentao/mnphdt2g/ 主要就是在 multiselect 的 tag 加上 ref (例如: my_multiselect), 另外在 mounted...