node.js 之學習 Express 的筆記(3)-搭起資料庫的橋樑(使用MySQL)

恩! 睽違已久的第三篇，終於出現了!!

最近不是偷懶，是太忙(><)，

關於前面的幾集，還麻煩大家多多關照&指教。

• node.js 之學習 Express 的筆記(2)-安裝express
• node.js 之學習 Express 的筆記(1)
• node.js 一個package的檔案結構
• Node.js初探

既然node.js可以是一種使用JavaScript來做前端跟後端的事，那麼讓人開始思考如何使用Express跟資料庫做連結，昨天開始我起手做這件事情，沒想到接二連三的碰壁，這篇會介紹到基本的CURD的操作(是說...難的我也不會，我對SQL並沒有很熟)。 哦!對了，很多網路上的文章是使用MongoDB，不過因為我還是node.js新手，目前還是先選擇使用自己曾經用過的MySQL。




環境背景:

---

linux環境下(使用上週申請的MiCloud的smartOS作為練習用途的環境)
node.js Express + mysql(記得裝完Express之後要npm install mysql)
然後我的Express資料夾目錄名為miblog (只是個名稱)...

MiCloud-SmartOS測試免費30天體驗

今天申請了一個虛擬主機的服務XD
申請的是MiCloud的SmartOS的服務，現在有免費的一個月體驗期
所以就進去官網按下註冊鍵了
網站連結 : MiCloud




第一步是註冊頁，現在也提供了Sing Up With Google的功能。

註冊成功後，會請你信箱收信，按下信中的啟動帳號連結。

[閒聊] 回憶去年的我，是怎麼當上前端的...

如題，只是閒聊一下而已...
由於最近，又開始找房間租了，讓我想到去年這時的我，找工作的心情真是七上八下。

我想每個想要找工作的新鮮人，心情都是緊張的，既期待又怕受傷害不是嗎?
每個人畢業就像一張白紙，已經清楚自己要走什麼路的人，都會希望找到心儀的工作，

曾經我還以為大四那年在新一代的時候可以藉由畢業展得到一些工作機會，
現在回想起來覺得自己真傻，這個社會沒這麼單純:P
與其等工作機會，不如就直接出去面試吧，是的...，
我就是利用新一代那幾天自己沒有排班的時間溜出去面試工作的，呵呵。

當時我的背景 :

• 某國立大學剛畢業，有大約一年科技公司工讀經歷，當過一個學期多的網頁設計課助教。
• 念的是傳統工藝。
• 大三開始接觸網頁，所以也是從大三開始努力榨乾圖書館所有跟css/html/js/PHP有關的資源，看多少算多少。
• 大學的時候實習過很多2~3個地方，最後確定自己最喜歡的是web，喜歡什麼試過就知道了。
• 有曾經想要跨修資管或資工的課，可惜的是想修都跟自己系上的必修課衝突
• 對於畢業的起薪沒有任何概念，(這件事情有好有壞)，因為我不是本科，所以我沒有預設，只希望求得相關工作。
• 大四心無旁鶩，沒有打算準備研究所，只想做好畢業製作然後順利畢業，工讀等等。
• 五月準備履歷，開104跟518，五月中前接到的面試通知大約有8~9間，但有興趣的公司只有兩間，因此就只面試兩間(都在台北)
• 兩間面試都很緊張，因為很少面試經驗...
• 兩間面試後都在隔2~3天後拿到offer，後來選擇了某家。
• 畢業後一周馬上就要報到，找房子找的很急...
• 我非常愛看工具書，這點我到是還蠻推薦的，畢竟課堂上學到的東西有限，有時候借幾本PHP回家看看也好，重點是不要發懶，該動手實作的時候就是要，如果說前面幾章節那種基本的事情都不願意做了，後面我想應該也很難看下去了吧?! 除非是已經很熟悉了。

心得:

• 達到夢想的感覺簡直像做夢，開心的不得了! 要感謝公司願意給我機會
• 當時找工作完全不考慮南部，個人是覺得台北的機會多，願意給新人的機會也多，聚會多，資源多，conference多，當時的前端職缺也是北部大於南部。
• 我想兩間的面試會過有很大的原因是剛畢業的我有相關的工讀經驗，其中一家有看大學成績，兩間的筆試應該都沒有太差吧?!(可是我都不知道成績xd)，考的都是基本的網頁設計概念題，以及基本的程式邏輯; 另外有可能是因為我的志向很堅定吧?! 我不會為了找到工作而把自己的履歷寫的我什麼都會。
• 新鮮人的履歷寫起來真的很複雜，因為大學什麼都教，不過還是要取捨，不然就是要分好幾份履歷寫?!。
• 大學所學跟社會要的，的確很有差別，所以能夠想辦法在大學實習的時候就實習吧，我是從實習當中，發現自己最喜歡A，然後也會恍然大悟，原來我沒有這麼喜歡B之類的感覺。
• 老實講大三大四我過得還蠻辛苦的，當時很緊張地想要把程式的基礎學起來，更希望自己有實戰經驗...，還有自己課內的事情要處理，不過也是能學多少算多少，最糟的情況也不過就是失業幾個月好好找工作之類的，但是該學的還是要學，當時是希望自己可以達到資管系的水準...。
• 學歷跟科系，的確有點影響，因為有些前端職缺我根本沒辦法丟，已經標榜要資訊相關科系了，這點至今仍然是吃虧的Orz..，老實說，籌碼太少了，當時學歷不高也沒經歷。
• 不要捨不得花錢，該投資自己的時候，就是該花錢...

(以上僅供參考...)

每個人要的不同，很多事情，不能一下子就想要得到，還沒學會好好走路的時候，別想著飛，到現在我還有很多地方要學，我有時候也覺得很受挫，並不是找到工作了就輕鬆了，還是要一步一步來..。

本文純粹心情抒發，><

建立github.io專頁

最近看到好多人都有這樣的網址:

Http://[username].github.io/[repo name]

上網搜了一下，原來這是github提供的一種功能，如果你的Repositories有html頁面，可以利用github.io，轉換成html頁面，至於怎麼轉換，其實就是另開一個叫做gh-pages的branch，而不只是在github上看code。恩..不過它到底能做多少事情，我並沒有仔細研究。

P.S:自從會了這個東西我對git的敬畏程度又大加分了!><

• 情境一: 以前的Repository也可以匯出成github.io頁面
  手動建立的網頁(以前就開過的Repository)，只要在該repo上，開gh-pages的branch，內容同 master (不是開了就沒事xd), git push上去即可。
  
  Ex:http://winwu.github.io/fitness_80_practice/
       https://github.com/winwu/fitness_80_practice   
      這個範例是我前陣子的一個臨摹練習，原本的repo只有涵蓋index.html,js/css等等
      可以看看該repo的branch差異。
  
  走情境一方法的民眾可以參考這頁(Creating Project Pages manually)
  我是用上頁方法試出來的。

• 情境二: 為了開github.io而開新的Repository
  
  這種方法就是官網help頁面上面寫的Automatic Generator，也就是自動幫你產生好html頁面，走情境二方法的民眾可以看看這一頁(Creating Pages with the automatic generator)
  
  我只需要做:
  1. 在自己的github頁面，開新的repo，並且設定該repo的setting為Automatic Generator，接下來就是ㄧ連串奇妙的事情...
  2. 選樣版(Layouts)
  3. publish 發佈他...
  4. 我是發佈之後，在git clone下來修改html，然後再git push。
  
  Ex: http://winwu.github.io/resume/ 
  (<--這個UI很明顯的我是用github上面有的樣板來套用xd)

參考:
http://pages.github.com/
如何在 GitHub 建立个人主页和项目演示页面

[小嘗試] 畫組織圖..

最近我看到一些網站，很多地方都是字，唯獨組織圖是用"圖"，然後就在放大/縮小頁面之間，顯得很不協調，因為字太清楚，而圖卻模糊了，而且這代表著，如果人事有改變，就要有人負責去maintain那張圖，重繪，然後上傳到網站嗎?，然後我心裡就想說，試試看用html去畫組織圖，於是就做了這件事情xd

只是想嘗試一下而已，至於有沒有人這樣做過，我想應該是一定有..，只是我就想要自己來試一下:P，然後感覺起來還不錯，至少字很清晰的，我比較習慣於看的清楚的畫面xd

Check out this Pen!

不過一開始我沒有自己畫mock-up(很久沒碰photoshop..)， 就直接開notepad寫了><
這個Demo畫面，都是寫hard code，刻ul>ol的格式，
然後困難度的部分，我想要畫到很複雜的組織圖，會需要很多時間研究，

如果想要從後端接資料來顯示，
那個json的格式，很容易走到一個誇張的境界，應該沒有這麼簡單(我猜的

Demo圖:若有個人詳細資料時，hover時會出現

Demo圖:hover到整個department時，框線改變


其實是蠻有趣的，值得花時間研究更多方法，呵呵

[雜記]使用JavaScript對DOM進行新增/複製/修改/移除/取代

只是一個小練習，當然一定有更好的寫法，請別鞭我><。

• 新增: appendChild
• 複製: cloneNode
• 修改: innerHTML
• 移除: removeChild
• 取代: replaceChild

appendChild:

Check out this Pen!

cloneNode:

Check out this Pen!

innerHTML:

Check out this Pen!

removeChild:

Check out this Pen!

replaceChild:
example:http://www.maht0x0r.net/library/computing/replaceChildExample.htm


還不錯的學習網站:

• IT學院
• Javascript入门到高阶

準備TQC+ HTML5之讀書筆記

因為最近沒有專案可以涉略到html5的領域，剛好有看到TQC有出HTML5的考試，就很高興地報名了，藉此好好push自己多了解html5-->理解-->當未來有機會碰到時，就不會太過於茫然。

老實說證照對求職沒有太大幫助，不過重要的是好好靜下來看書決心。

整體狀況:
TQC+ HTML5的考題比之前的HTML4反而感覺還要簡單一點，或許是因為我已經比以前更上手了吧，畢竟我已經完全脫離使用dreamweaver到使用notepad++..。然後我個人認為比較有困難的部分是第四類，第六類，第七類。

嚴格來講應該不能說是'難'，而是因為平常少接觸，然後第七類的考題我認為太少了，整個第七類都可以說是HTML5最重要的部分，比方說web Worker, local storage, Index db, WebSocket，Geo location等等，這麼重要的content竟然只有一類的考題(驚)，有一種沒有搔到癢處的感覺xdd。
以下只是自己個人的note，若有問題還麻煩多多指正!

有個有趣的網站可以先玩玩，首先先知道自己知道多少個html5標籤吧!
http://thehtml5quiz.com/

第一類:

• 1-02 : JavaScript是單執行緒的
• 1-09 : ===三個等號是嚴格相等運算子(測試嚴格相等性)
• 1-30 : 這題的答案C我認為有點怪，JavaScript也可以跑在server-side(Ex:node.js)
• 1-31 :  B跟C的答案JavaScript跟CSS剛好顛倒過來
• 1-32 :  HTML的元素名稱並沒有大小寫之分 (PS:其實元素跟屬姓名都沒有大小寫之分，但是我自己認為要盡量統一，還有屬性值有些是有區分大小寫的，比方說id跟class就有區分大小寫)
• 1-33 : (A)AccessKey要搭配Alt鍵
• 1-34 : 既然css已經分出去到另外的XXX.css檔案，就不需要加style標籤了
• 1-37 : title就算沒有放到head標籤也可以作用，不信就實驗看看就可以了:P
• 1-39 : for/in是循環遍歷對象的屬性，自己做個小練習就可以多了解:
  

  var obj = {"湯類"   : "酥皮玉米濃湯", 
             "小菜"   : "炒杏胞菇", 
             "麵類"   : "泰式酸辣麵", 
             "主菜"   : "香菇山藥枸杞粥", 
             "副主菜" : "天香火鍋" 
            };
  for(var k in obj){
     console.log("菜色編號: " + k + " 名稱: " +obj[k]);
  }   
  
  console.log("請問今天有主菜嗎?");
  
  if(obj.hasOwnProperty("主菜")){
        console.log('Yap,今天有主菜!');
  }
  console.log("那今天有飲料嗎?");
  
  if(obj.hasOwnProperty("飲料")){
        console.log("有");
  }else{
        console.log("沒有");
  }Check out this Pen!

• 1-46 : shift是將陣列第一個元素取出來
              push是堆疊，reverse是順序顛倒排序的意思
• 1-47 : C應該是72

第二類: 
第二類其實只要多看看w3c school就好了，但過來人的經驗請不要輕忽基本的問題，因為通常都會敗在最簡單的問題XD

• 2-10 : cite標籤適合拿來做為文獻的引用，書名等標題
• 2-11 : dfn標籤通常拿來放一些術語，比方說<dfn>HTML</dfn>
• 2-20 : 順帶一提，q跟blockquote的差別有點像是:
  q適合比較短的文字，幾乎是一行就可以解決的引用;
  而blockquote適合比較長的一段內容

第三章:

• 3-04 :用for屬性 ex: <label for="XXX"></label>
• 3-07 :是max而不是maxlength
• 3-39 : input type="file" 若要可以多選的屬性可以這樣寫:
  multiple 或是 multiple="multiple" 或 multiple=""

第四章:

• 4-14 : audioElement沒有stop()這種方法 (我沒找到stop過，只看過pause() )
• 4-34 : canvas的linejoin有以下這三種屬性: bevel | mitter | round，預設是mitter
             (linejoin是用來 當兩條線交會的時候建立一個圓形的邊角)
• 4-54: 我自己個人的理解是，如果要畫一條線，需要這三個步驟
  
  
  

第五章:
搜尋w3c

第六章:
搜尋w3c

• 6-01 : 這題跟考SVG的大寫有甚麼兩樣? SVG (Scalable Vector Graph)
• 6-18 : Marquee-style所允許的value情況有 : Scroll | slide | alternate

第七章:

• Web儲存方面: HTML5提供server-side兩種儲存資料的方式
  
  1.   localStorage (7-01的解答)
  2.   sessionStorage
  localStorage 與 sessionStorage 的差別是，localStorage可以永久儲存(沒有時間的限制)，而sessionStorage針對單一的session做儲存
  
  localStorage跟以往的cookie的差別是，cookie能夠儲存的容量有限(每筆cookie不可以超過4KB，超過會被裁掉)，localStorage較能儲存大量的資料
• 應用程序緩存方面:  為什麼需要mainfest?
  
  • 讓用戶可以離線時也能瀏覽
  • 將ㄧ些資料做cache，加快速度
  • 減少跟server互動，只需要去跟server要更新過的資料，白話ㄧ點就是減少server的負擔
   
•  Web Worker是屬於外部的js，不能存取window, document, parent。
• 7-03 : 關於Navigator.geolocation.getCurrentPosition，如果使用者不願意被知道所在的地點，error.code會有三種情況
• PERMISSION_DENIED=> 1
• POSITION_UNAVAILABLE => 2
• TIMEOUT=> 3
• 應該沒有0這個error.code，所以答案不會是D
• 可以參考這個網站 : http://dev.w3.org/geo/api/spec-source.html#position_error_interface ，裡面有error.code發生的情況解釋。
• 7-10 : 我想題目有錯字...
• 7-53 : WebSocket有ws或是wss的協定，ws就相當於http，wss則是相當於https。

總結:
第七章才是精華，要注意關鍵字，是問server-side還是client-side。
加油:)



後記:
考後成績98，證照get!

IE9的window.open的神秘問題..

情境:

我下了一句a標籤onclick時的window.open事件，

在IE10可以開啟新的window，在IE9卻不行

(被其他Developer發現..，然後我的IE，默默的被更新到ie10我也沒發現><)

以下是簡陋版demo:

<a href="javascript:;" 

onclick="window.open('http://tw.yahoo.com','This-is-yahoo',config='height=480,width=600')">Go to yahoo</a>

想想看為什麼不行?

在console並無任何的錯誤，

明明照著規格寫，怎麼沒辦法window.open呢？

規格我是參考Mozilla Developer的網站

window.open(strUrl, strWindowName[, strWindowFeatures]);

我的問題出在第二個參數strWindowName

規格只有限制strWindowName不能有任何的空白(The name should not contain any blank space-引用自Mozilla Developer Network)

我的'This-is-yahoo'問題出在連 '-' 都不能有，'_'反而可以

結論:

將'-'改成"_'，就可以work了，神奇吧!

<a href="javascript:;" onclick="window.open('http://tw.yahoo.com','This_is_yahoo',config='height=480,width=600')">Go to yahoo</a>

BTW，其實我的strWindowName也可以用'_blank'之類的取代，只是這樣可能會違背我原先的意思，因為我可能需要判斷被window.open頁面是否有window.name而去做不同的事情或是UI顯示元件的不同。

解決windows下vim中文亂碼

在window底下的vim，打開檔案發現中文亂碼了..
解決方法依舊是修改vimrc這個檔



我是參考:
解决VIM中文乱码
(可行!)
執行結果:

其他參考:
http://yanue.net/archives/442.html
http://www.cnblogs.com/hopeworld/archive/2011/04/20/2022331.html

Note:

在window下打開vimrc的兩種方法:

或是衝到目錄找檔案，打開後修改，也可以!

為了工作的方便，這種小技巧還是必備的!

JSDC2013心得

今年是我第一次參加JSDC，也是第一次當志工，雖然我認為今年的議程非常的不錯，蠻高的百分比都鎖定在JavaScript的部分，如果不當會眾或許會有點可惜，不過我希望自己明年看看自己的程度怎麼樣在來考慮要當會眾還是志工:P，好! 以上都不是重點，接下來我要聊的是我印象比較深刻的議程:

長頸鹿(liberation) / Ragic 
- Ragic Interface 設計經驗分享 的演講:

這場演講對我來說收穫非常的大，思考前端如何去開發一個產品而不只是一個網站或是一個專案，用產品的角度去做，會有非常多的細節跟問題可能不是做一般的web可以想像的，也有一些技巧的運用是我平常沒有去想到的。

講者也介紹很多他們如何開發Ragic的雲端資料庫前端介面，這個雲端資料庫其實是很像Microsoft access+Microsoft的excel的感覺，那我覺得能夠將網頁的介面做得像應用程式而且又有即時儲存(local storage)的功能背後應該有很多問題是需要去解決的，當然我最想知道的是在這個開發過程中有遇到甚麼"問題"，以及這些"問題"是如何被"解決"，如何去處data的部分。 不過，我想這是講者40分鐘內講不完的事情，如果有機會我希望我可以了解的更深..


今年的贊助商搬出很多紀念品，我也去amazon拿了一個小提袋:)

阿修的演講其實我不是很了解內情，因為我沒碰app >< ，不過大概知道他在講些甚麼。

然後在最後一個議程結束後馬上衝到前面找Josephj合照一張 ><
不知道為甚麼總覺得Josephj充滿了前端魂!

結尾，

連續兩天下來其實還蠻累的呢，好久沒有幫忙這種大型的活動

這兩天準備好好的閱讀講者們的slide，然後更精進自己的實力:P
期待活動影片摟!

alt與title標籤

其實我拿這兩個標籤來講本來就有點怪，
alt與title本質上就是不一樣的東西，
一個是替代文字，一個是tooltip，
只是前幾天在看ㄧ題HTML5考題的時候，
突然腦筋轉不過來有點忘記了，所以真是印象深刻。

先來看看這兩個題目的問法:

• A題: 問當圖片無法顯示的時候，要在圖片上顯示替代文字時，可使用哪種屬性?
• B題: 滑過滑過一個a標籤時要產生類似tooltip的提示文字可以使用哪種屬性?

要釐清的點是
1. title屬性是全域屬性，alt是給img標籤使用的
2. alt的作用是當圖片無法正常顯示的時候才會有

所以，搞清楚了嗎xd

20130613更新:
"An img element must have an alt attribute."使用img標籤時alt是必要的。

JavaScript-同源策略

同源策略又稱同源準則(same-origin policy)
(通常看書應該是不知道在說些什麼，遇到了才知道xd，我覺得這是需要經驗才知道的事...)
它的定義大概是，不同來源的script不能讀寫對方的script，(除非有明確的授權，ex:Access-Control-Allow-Origin)
這裡只寫script是因為client-side的語言不只JavaScript，還有可能有ActionScript, ECMAScript。

怎樣算是同源?
就是這樣...

所謂相同協議就是http://這種。
所謂域名就是(只是舉例) http://www.blogger.com跟http://test.blogger.com ，www跟test屬於不同域。
怎樣算是不同port呢，比方說在做網站開發時你有自己的sandbox，你的網址是http://www.wintest.com:1234而正式的developer環境是http://www.wintest.com:8080，1234跟8080屬於不同port。


舉例來說
你在你的頁面加入了Facebook的按讚功能的iframe，你想要使用google分析偵測使用者有沒有按下那個讚，這是不可能的，因為這個行為並沒有遵守同源準則，這是我以前犯的錯，我並不能存取那個facebook按讚的DOM。

http不能存取https，http跟https這兩個是不同協議。
還有更多的範例請參考wiki ，我發現wiki的例子非常不錯!。

前端工程師阿...

Frontend?
(喃喃自語ing...)
在我大學畢業後的一年來，一直持續關注著人力銀行上的前端職缺，並不是100%想要換工作的心態在做這件事情，而是我想要知道，到底需要什麼技能，好讓我有個方向，不要走歪，才剛踏入這行沒多久而已，至今我還覺得我算是半張白紙，還有好好認真的空間，畢竟我想以前端為職(當然也並沒有特別排斥了解後端的事情，只是更愛前端多一點xd)，殊不知...到現在，我還是覺得好像很多職缺，對前端的定義，並沒有很一致，大致上，分為三種情況 :

• 很偏UI的前端 (心理曾經OS到底是找UI還是找f2e?! xd)
• 很偏後端的前端
• 前端(略懂後端)

看來看去就是這樣情況，總之零零總總，我已經迷糊了。

現在這種地步讓我覺得，只要會用plugin，就好像誰都會寫javascript了 ?!
好像會jQuery，就是會javascript了?!
所以我最近一直在思考這個問題，到底該如何讓自己在眾多前端人員內擁有差異化?
這件事情也讓我困擾很久(<--也有可能是我想太多了...)，我也跟普通人一樣曾經上網爬文過什麼前端該具備的技能阿~，前端工程師該知道的事啊~ 什麼有的沒有超級多文章，我不知道為什麼我突然最近心裡很爆發，我再也不想管這些了，再這樣下去煩惱有的沒有的人生太辛苦了，就這樣吧，好好把握自己擁有的技術，想學甚麼就學，不用管太多了。好好跟自己的內心商量一下，就不會這麼困擾了。

好文 -jQuery最佳实践

jQuery最佳实践  作者 阮一峰
今天碰巧在網路上看到的文章，覺得很不錯，看完之後對jQuery有更深的認識，以及 更知道怎麼用，推薦給也正在用jQuery的朋友們! 不過我對於第一點，使用最新版的jquery還是挺害怕的，(自從我經歷過jquery1.9的版本之後有點嚇到)xdd
 

在apache啟動gzip功能

在apache啟動gzip壓縮的功能對網站的效能有蠻大的幫助。
今天我找到了幾個如何在apache設定gzip的文章
(我的作業是系統是windows下架設的apache)

• 修改Apache配置文件开启gzip压缩传输
• Apache2 使用 mod_gzip 增進傳輸效能
• [Apache]mod_deflate(gzip)

步驟並沒有很複雜，就是做個設定
效果還不差呢!
我用page speed比較有沒有裝gzip的前後差異後，還真的有不少的落差(不過還是依個案而有不同)