2013年2月27日 星期三

小練習:用PHP+MySQL+Ajax做模仿yahoo首頁的新聞Tab


用PHP+MySQL+Ajax做模仿yahoo首頁的新聞Tab 


Demo URL : http://yiying2.ueuo.com/news_board/
(免費空間還沒被砍之前應該都看得到)
My GitHub: https://github.com/winwu/AjaxPractive-NewsBoard_Tab.git  (有需要的話可以參考)


我今天試做了一個仿yahoo首頁(台灣版)的新聞消息Tab,我是說操作起來很像,但是實作方向有點不太一樣,因為我想要練習ajax...所以我用ajax去要資料,我後來發現yahoo好像是一開始就把資料load出來了,而我這個做法變成是會一直去做http request的請求,不是很符合前端優化的標準,我知錯了...但是我的本意只是想要知道到怎麼用ajax的到想要的資料,這只是一個練習(不要這麼嚴肅><)。


畫面上簡單來說就是,左邊欄我做了一個顯示新聞的區塊,並且依照category去分幾個Tab。
右欄是一個form,可以送一筆完整的新聞資料到database,而去觸發左邊欄位的Tab會更新最新的兩筆該category的資料。
每觸發一次Tab,就可以看到送出一筆請求。(如下圖)






並且可以看到成功要到的資料:




page speed檢查:

用page speed檢查一下,竟然還有86分,可能是資料量少吧xdd




心得與結論:
  • 滑鼠滑過tab的行為要用mouseover而不能用hover,因為hover會產生兩次request,而mouseover只會產生一次
  •  $.ajaxSetup({ cache: true });//其實這行有沒有寫都一樣,只是一個題外話,順便測試一下而已,基本上cache的值,本來就預設是true,設定false表示你不想讓瀏覽器去抓cache。
    這個畫面,是$.ajaxSetup({cache:false});時所產生的request:
    當cache是false時,送出去的request會自動產生_=[TIMESTAMP]的參數,取得最新的頁面結果。



CGI的練習之怎麼接到GET的值

小練習: 用CGI送出一個form。
接到form get出來的值,並顯示在頁面上。

其實這個練習的成功非常的詭異,首先我是把檔案放在XAMPPcgi-bin裡面,檔名是ch01.cgi,但是用來解譯的perl是另外用activePerl裝的perl,而且cgi檔,打錯一行,後面就都不會執行。

執行頁面沒有特別的困難,就像平常在localhost一樣,只要在瀏覽器打上localhost\cgi-bin\ch01.cgi就可以成功執行,但若程式有問題,很容遇到Server Error...

ch01.cgi
 #!c:\perl64\bin\perl.exe -w  
 #上面這行表示用哪一隻程式來解譯  
 #有的書寫說,在window系統下有沒有這行都無所謂  
 #恩..不過在我的windows下,這行一定要有,如果忘記這行會顯示Server Error....  
 use CGI;  
 #use 表示使用後面的模組  
 print  "Content-type: text/html\n\n";  
 print  '<html>';  
 print  '<head>';  
 print  '<meta name="author" content="Kay Vogelgesang">';  
 print  '</head>';  
 print  "<body>This is my first CGI<br>";  
 print  "<form>  
 <input type='hidden' name='action' value='learn_perl'>  
 <input type='hidden' name='status' value='good'>  
 Please Enter your name:<input type='text' name='user'>  
 <input type='submit' value='送出'/></form>";  
 print  "<strong>以下是get的資料</strong><hr>";  
 my $query = CGI->new;  
 my %data = $query->Vars;  
 #get data use name=>value, this will "export" the form values  
  foreach my $param (keys %data) {  
    print "$param = $data{$param}"."<br>";  
  }  
 #純量變數(scalar)是$開頭 $query  
 #陣列(Array)是@開頭 ex:@myarray   
 #雜湊(Hash)是%開頭 ex:%hash  
 print  "<br>直接把\$query print出來是: <strong>" . $query ."</strong><br>";  
 print  "<br><strong>把個別的get欄位print出來</strong><hr>";  
 print  "GET的user值為". $data{'user'} ."<br>";  
 print  "GET的action的值為". $data{'action'} ."<br>";  
 print  "GET的status的值為".$data{'status'} ."<br>";  
  if ($data{'user'} ne ' '){  
   print "<h1>hello <span style='color:tan'>". $data{user} ."</span>,Welcome!</h1>";   
   #也可以這樣寫<h1>hello$data{user}</h1>,  
  }else{  
   print "<h1>please enter your name!</h1>";  
  }  
 
 print "</body></html>";  

要取的這個cgi送出去的get參數值
建立一個$query的變數,將CGI->new指定給$query
將$query->Vars指定給%data這個hash(雜湊)
接著再將%data foreach出來,可得所有get的值跟value

  • Demo 畫面 (未送出input值)


  • Demo 畫面 (送出input值後)





 才學疏淺,若有錯誤還麻煩糾正我一下,謝謝。

2013年2月26日 星期二

在windows下執行Perl的-ActivePerl!

在windows作業系統下,我想要執行Perl
可是我本身已經有裝XAMPP在我的電腦上,其實XAMPP已經配有perl了,可是我怎麼練習都失敗,後來我在網路上爬文,發現很多人都介紹ActivePerl所以就安裝了ActivePerl了。
ActivePerl真的很猛又很好用,值得一試。

下載網址在這裡http://www.activestate.com/activeperl



安裝步驟一如往常就是一直"下一步",詳情我就不介紹了


因為我沒有什麼額外特別的設定,我相信大部分的使用者也是差不多跟我一樣,總之安裝完之後你會在你的C:\看到perl的目錄,(除非你安裝在其他槽),我的目錄是在C:\Perl64\  (32位元的會看到Perl資料夾,64位元的會看到Perl64的資料夾)

安裝後檢查perl的版本
打開CMD,輸入perl -v
可以看到版本說明,作者Larry Wall等資訊。


指令 start c:\perl64\html\index.html
可以開啟ActivePerl User Guide的網頁



另外安裝過ActivePerl之後也會安裝Perl Pcakage Manager
你可以在程式集找到他。



純手工製作圖片popup效果

自己做圖片popup的感覺挺好玩的,
雖然現在網路上有很好用的fancybox,
可是我很想知道如果自己做要怎麼做,然後我就用個超級簡略版!
有空再來把它改進成一個plugin,我也很想挑戰寫plugin,只是我想會很low而已。><

我把整個範例檔都放到我的github了
https://github.com/winwu/Handmade-image_popup
可以看到完整的html跟js檔案

功能說明:

  • 點選任何一張圖都會呈現popup效果
  • popup效果出來時,點選關閉或是頁面其他地方,也會關閉popup效果

其實想到這個popup的效果,我當初唯一想到的一件事情就是,當我按下頁面中的任何一張圖片,我要讓他有跳(彈)出來的效果,所以我想說我必須要準備一個容器(div),當作圖片popup時的容器,(當然也有其他做法),一開始沒有點選任何圖片時,這個容器是display:none,也就是不需要顯示他,當我按下某一張圖片時,這個容器就必須顯示出來,不但要display:block,而且有些相關的css設定,還有背景要壓灰等等,這些都透過javascript來達成。

附圖javascript部分: (截圖下來比較快)

只是個人平常的練習,看看就好:P

2013年2月16日 星期六

Grunt- Javascript Project的建置工具

Grunt- javascript project的建置工具
(不知道這樣翻會不會很奇怪~"~)
英文是: Grunt is a task-based command line build tool for JavaScript projects

這是我最近在網路上看到的一個工具,想說來了解一下,看看之後發現想要用這個工具其實需要一定的門檻,雖然我很想嘗試不過我好像沒這個機會...只好了解先!

上面的官方網站點進去之後發現頁面很單純,要嘛就是去參觀github,不然就是看看他們的Document, 左邊攔可以看到"Getting Started"的小標,裡面寫著你可以用npm去安裝,看到npm就讓人想到node.js javascript...,如果我的推斷沒錯的話Grunt就是以node.js去建立的,被包成一個package,經由npm(Node package manager)將它下載下來。


蒐集的教學&介紹連結:


相關影片:

(上面這部非常基礎 約4分鐘)
此影片引用自:http://www.youtube.com/watch?feature=player_embedded&v=LdqUiDyhzt8



(這片我覺得還不錯!)
此影片引用自:http://www.youtube.com/watch?feature=player_embedded&v=LoStSbRRA3I


這一部有講到Grunt的部分比較少,雖然片長很長,但是也很精采
此影片引用自:http://www.youtube.com/watch?v=vDbbz-BdyYc&list=PLg9HYGREnFM72iFbTWcRQeU44Wi2mLwLi&feature=player_embedded



此影片引用自:http://www.youtube.com/watch?feature=player_embedded&v=q3Sqljpr-Vc




20130513補充:
Grunt.js用在前端開發上 作者:vitaminx

2013年2月3日 星期日

ipad mini 32GB 開箱圖

 長話短說先來講一下感言好了 :

  1. 終於買到了 終於捨得花錢買了
  2. 很傷荷包,真的很傷.... 但是很開心,心情複雜的不知道該如何形容
  3. 然後我應該會更努力工作吧,賺的都不夠花了Orz
  4. 我買的是wifi版,我想在台北應該夠用
  5. 考慮了一個多月,沒想到還守不住阿.... 










2013年2月1日 星期五

工作半年多心得


  • 每個人都喜歡去訂規則,但總要有人配合他人的規則。
  • 每個人的code style不一樣,所以並沒有甚麼是最好。
  • 分享。
  • 想的久不一定做的久,做得快不一定做得好。
  • 厲害的人不一定會得到尊重,重點是要先沾到厲害的邊。
  • 說要是來當前端,後半期有60%都在寫codeigniter的php,雖然說這也不錯,但有點小失望就是...,可惜的是一進來的時候網站已經被規劃完了,我所接觸到的,幾乎只有換皮跟js部份而已。
  • 如果每個人都只想挑想做的,那這個辦公室豈不是天下大亂!? 
  • 每個人都想做簡單的,那這個辦公室豈不是天下大亂!? 
  • 員工獎懲寫好玩的,那這個辦公室豈不是天下大亂!? 
  • 雖然我笨,但我不懶阿,我自己認為懶跟聰明在工作上其實是需要一定的平衡
    1. 懶,但很聰明=>safe=>因為公司需要你
    2. 不懶,但不聰明=>soso=>但要想辦法變強
    3. 又懶又不聰明=>danger,除非有隱情,不然你只是沒被發現而已
  • 每個都覺得自己最認真,最努力,貢獻最多,但那看在長官的眼裡應該是自以為是,那是因為你不是主管,所以你看不出整體的差異化,所以別傻傻地去要求甚麼,要想自己的把握什麼
  • 如果沒有事情,可以想一下能為大家做什麼,而不是在座位上玩自己的!?
  • 雖然我沒經過IE6,7,8的年代(我是說自從我開始接觸前端之後),但是我還是討厭IE,他唯一的優點就是測試剛上線的網站沒有cache測起來還蠻準的這樣
  • 工作範軸&email發信之必殺技巧,整個部門的人都拉到cc名單就對了!
  • 可以學一點linux的指令還不錯,但我不夠靈巧,必殺技: grep -nr "XD".
  • 天吶!,原來php是這樣寫
  • 天吶!,原來javascript是這樣寫
  • 天吶!,原來網站是這樣規劃的
  • 天吶!,我來這裡半年了
  • 天吶!,我好想加薪
  • 天吶!,可不可以讓我多寫一點javascript
  • 最後....天吶!,我尾牙只有抽到500元禮券><



Vue multiselect set autofocus and tinymce set autofocus

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