發表文章

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

小練習:用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]的參數,取得最新的頁面結果。 其實我最不懂的地方是不知道怎麼從php丟資料回來給index.php,結論: google搜尋關鍵字 "json_encode" ,可以參考這篇文章 PHP 讓 json_encode() 指定回傳格式


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&…

在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

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)將它下載下來。


蒐集的教學&介紹連結:

初學者可看的getting start
https://github.com/gruntjs/grunt/blob/0.3-stable/docs/getting_started.md
Meet Grunt: The Build Tool for JavaScript
http://net.tutsplus.com/tutorials/javascript-ajax/meeting-grunt-the-build-tool-for-javascript/Introducing Grunt
http://benalman.com/news/2012/03/introducing-grunt/Introducing Grunt
http://weblog.bocoup.com/introducing-grunt/
相關影片:

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



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


這一部有講到Grunt的部分比較少,雖然片…

ipad mini 32GB 開箱圖

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

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









工作半年多心得

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