MongoDB學習資源列表

MongoDB感覺是個很特別的資料庫，目前，還沒有時間好好研究....

網站 : 

• 維基百科對Mongo的說明
• MongoDB官方網站
• MongoDB 授權的分析與探討（雙重授權模式 2.0）
• NoSQL Database - MongoDB & Node.js
• Mongodb 文件式的NoSQL系統 ＆ Windows、Linux安裝教學
• [教學] mongoDB phpMoAdmin GUI 管理介面安裝
• [引用]MongoDB入門簡介
• MongoDB資料匯總專題 [<--很推薦]

書目:

• MongoDB技術手冊 [請支持正版!]
• 50 Tips and Tricks for MongoDB Developers

影片:

• O'Reilly Webcast: Introduction to MongoDB

PDF & docs:

• Introduce to MongoDB
• http://dl.mongodb.org/dl/docs/

解決IE邊框閃爍有時出現 有時未出現的問題

解決ie邊框閃爍有時出現 有時未出現的問題
在Table外在加一個div
{width:913px;border: 1px solid #F1D03D;min-height:97px}

不要將border設定給table
把border移出來 給外面的div去顯示

這樣講實在很抽象，但我一時也不曉得該怎麼取得到範例跟截下圖片說到我遇到的這個奇怪現象，網路上有些類似情況，請參考 :
IE中奇怪的左右border断线现象_Div+CSS教程
IE加浮动（float）后，滚动时边框(border)消失解决办法
在IE下拖动滚动条时border消失的解决方法

2013 WebConf Taiwan

活動網址 : http://www.webconf.tw/index.html

WebConf Taiwan
專為網站開發者舉辦的大型研討會


預計12月初開放報名，
才來北部生活不到半年，就可以遇到這樣的活動，太幸運了
講師群實在太驚人了，希望到時候能報名成功。

[個人資料蒐集] 2012-11月份前端工程師所需技能統計

我不知道為什麼我心血來潮做了這件事情(是不是有點無聊!?)，但是也該做，這本來就是我未來想要做的工作，本來就該了解，自從看了掏寶UED的網站之後，我打算有機會也要統計一下對岸的前端技能要求是如何，不能只看台灣，要看世界。

下面的表格我從人力銀行搜到有的前端工程師，以及front-end職缺的公司，以及該職缺所必須有具有的技能，恩...目前, 有稍微打個馬賽克(對不起...我知道這樣看有點不舒服...)，不太好意思直接公布，感覺不太恰當><

但並不是全台灣所有有前端的公司都在這裡，只是碰巧人力銀行有刊登職缺，才被我搜到，若沒公布職缺的公司，其實我沒刻意去找有哪些。
當然啦，有些公司的前端的技能需求有點偏差甚至是太誇張，根本不像前端再做的事，那一兩家我就沒有算在我的統計選項之一了。

統計數量總共22間 (點圖可放大)

上面的圖比較不重要，直接看圓餅圖 (或雷達圖):

前端技能最大的三個part剛好是 HTML + CSS + Javascript ，恩..不意外，很正常，如果不是這三個我可能會嚇到...xd。  

說實話我還是第一次仔細統計過這件事情，不過很特別的事情是
HTML 跟 Javascript 兩者都是完全100%的必須技能，(恩,好像也沒甚麼好特別的，本來就要會)
但CSS卻不是每家都要這個技能，不知道是忘記寫還是覺得那是基本，所以沒寫，不然就是...我..我看到眼花了@@。

有一家公司很直接的寫需要會MVC，其他家到是挺含蓄的寫如果具有server-side的語言會更好(其中又以php最多)，看在我的眼裡，只要包含 "最好" , "加分項目"，其實都是必須.....。

然後也越來越多公司需要你具有使用 Facebook API 這樣的技能，恩..這個..我還不太會(淚奔)

Ajax是第四名

版本控制Git , svn..等，看起來有慢慢浮出在技能所需的'加分'條件裡了

下次關注這些職缺的時候可能是
明年 年前年後的時後，如果有甚麼特別的發現，會再做紀錄。

安裝JDK+window7下設定Java環境+學著用yui

會想要設定java環境主要是想要跑yui compressor。

從安裝jdk在設定環境變數再跑yui的過程非常多步驟，再扣掉失敗又失敗的時間，2hr 

只能說非常需要耐心阿。。

首先，先安裝JDK

因為我還是Win7 32位元的電腦所以我選x86

下載完畢後按執行

接下來就有如所有安裝過程一樣...我接受...我同意...下一步.這樣的步驟...

安裝好了後先確認版本 ， 在系統管理員輸入java -version

接下來，設定window下的java環境，因為我要跑yui :P

點選電腦按右鍵-->選擇 "內容 "

接著點選左選單 "系統保護"

選擇"進階" 頁籤--->點選 "環境變數"

先到c:\找到剛才安裝JDK的路徑，並且複製路徑

接下來繼續回到設定環境變數的地方，選擇"新增"

新增一個使用者變數，變數值貼上剛才的jdk路徑 ，接著按確定

接下來複製jdk\bin的路徑 

選擇系統變數的path-->點選編輯

在path的變數值最後面加上;再貼上路徑 (中間不能有空白)
接著按確定-->再按確定

測試java，打開CMD, 鍵入javac 

若正確執行，表示完成初步的java環境設定

再來，下載yui compressor

下載後，解壓縮，這裡我自己是解壓縮到H:\槽

然後可以在\builder\componebtbuild\lib\yuicompressor這個目錄下，看到.jar的執行檔

然後實驗，

我想壓縮H:\waterfull\style.css的檔案

就可以這樣打

C:\Users\Administrator>java -jar H:\builder\componentbuild\lib\yuicompressor\yui

compressor-2.4.2.jar H:\waterfull\style.css -o H:\waterfull\style-min.css --char

set urf-8 --type css

指令的部分我是參考:http://blog.longwin.com.tw/2009/10/use-yui-compress-css-js-2009/

我命名解壓縮後的檔名為style-min.css

這是解壓縮後的結果

哈，少了1KB，實際打開檔案來看看，果然真的壓了

可參考 :

http://developer.yahoo.com/yui/compressor/

http://blog.longwin.com.tw/2009/10/use-yui-compress-css-js-2009/

CSS選取其他倍數的元素

承上篇  CSS選取奇數/偶數改變背景色
假如今天以三色為一組，反複顯示，該怎麼做 ?

:nth-of-type( { number expression | odd | even } ) {   //add css}

:nth-of-type 有個number expression就可以拿來表現除了奇數和偶數的情況。
為了讓結果看起來更明顯，我把tr多增加幾列。

三種顏色為單位做為循環的css:

tr:nth-of-type(3n+1){

  background:pink;

}

tr:nth-of-type(3n+2){

  background:#EDF1CB;

}

tr:nth-of-type(3n+3){

  background:#EE9A00;

}

結果:

因為第一列是th標題用，因此不讓3n+1做用到th的這一列tr
因此再用tr:first-of-child去蓋掉第一列的樣式 :

tr:nth-of-type(3n+1){

  background:pink;

}

tr:nth-of-type(3n+2){

  background:#EDF1CB;

}

tr:nth-of-type(3n+3){

  background:#EE9A00;

}

tr:first-of-type{

  background:#333;

  color:#fff;

  /*因為第一列是th標題用，因此不讓3n+1做用到th的這一列tr*/
}

結果 :

Please Refer:
http://zero.css-happylife.com/selectors/nth-of-type.shtml

CSS選取奇數/偶數改變背景色

之前曾經在php的書上看過用php判斷tr是不是整除於2，再另外替tr加class的方式，去產生兩色相間的變化，因為php的書不會特地介紹到css的技巧，所以那時候也沒發現，後來才知道原來已CSS控制奇數/偶數的樣式即可。

這是table標籤結構 :

<table>
  <tr><th>ID</th><th>BOOK NAME</th><th>AUTHOR</th><th>DATE</th></th></tr>
  <tr>
    <td>5112</td><td>Pro Javascript</td><td>TEST</td><td>YYYY-MM-DD</td>
  </tr>
  <tr>
    <td>5113</td><td>jQuery-and-HTML5</td><td>TEST</td><td>YYYY-MM-DD</td>
  </tr>
  <tr>
    <td>5114</td><td>MongoDB</td><td>TEST</td><td>YYYY-MM-DD</td>
  </tr>
  <tr>
    <td>5115</td><td>MySQL</td><td>TEST</td><td>YYYY-MM-DD</td>
  </tr>
</table>

方法一 :

tr:nth-child(odd){
  background:pink;
}

tr:nth-child(even){
  background:#EDF1CB;
}

方法二 :

tr:nth-of-type(odd){
  background:pink;
}

tr:nth-of-type(even){
  background:#EDF1CB;
}

方法二的

:nth-of-type( { number expression | odd | even } ) {
declaration block
}
IE8以下不支援。

Plz Refer:

http://reference.sitepoint.com/css/pseudoclass-nthoftype

http://www.w3schools.com/cssref/sel_nth-of-type.asp

聽演講的心得&筆記 (WebDev Party)

WebDev Party 現代化網站前端基礎
時間：2012 11/17~11/18
地點：恆逸
內容：http://www.openfoundry.org/tw/activities/details/347

主講者: 朱建志 http://www.jaceju.net/blog/ (<--這是他的blog，一看才發現原來我以前逛過xd)

這是由OSSF主辦的一場演講，來台北總算是聽到一場跟前端有關的演講，真是太興奮太感動了...，為期雖然只有短短兩天，不過也因此學到一些前端的工具跟技巧。

之所以想聽，最想知道的部分還是 HTML5 跟 Responsive Web Design(響應設計) ，就是說...Responsive Design一直在我心目中是很模糊地帶，因為我想要去實作，但好像沒什麼機會去弄他，雖然說有些原理是知道的，但是因為沒有做過，所以覺得不真實，聽了朱老師的介紹之後，我才發現要在網頁實踐Responsive是不難的，技巧原理很簡單(@media query)，但因為市面上有太多種行動裝置，只能盡量以某些大部分人使用的行動裝置去做Responsive的設定，並沒有辦法符合所有裝置都設計到的這種期待。

這篇文章介紹到附有Responsive的css framework :

15+ Responsive CSS Frameworks to Kickstart Your Responsive Website Project

做Responsive Design要注意 :

• 同一頁面 檔案大小不會改變 (只是針對手機去調整頁面，他還是下載全部的東西)
• 畫面越小 字體越大 (手機的解析度其實也不高。。)
• 畫面越大 字體也越大
• 畫面小時盡可能用百分比
• 畫面大時則改用固定寬度

另外分享的幾個實用的網站 :

CSS3 Generator

-非常實用的網站，css3有些特別的語法很長，會忘記，用這個來產生倒是挺不錯的。

http://livereload.com/

更適合使用雙螢幕的開發者，可以一邊編輯網站，一邊看到效果，livereload這個挺酷的但我還沒試過，使用windows作業系統的話，要另外安裝其他東西。

CSS-TRICKS

這個網站都只用一個css做出很多不同的圖形，用了大量的:before, :after等元素去寫出不同圖案

挺厲害的，可以好好研究...。

http://nmsdvid.com/snippets/

這個網站提供一些常見的手持裝置會用到的@media Query, 很好用，可直接copy

http://mediaqueri.es/

如果不知道怎麼設計各種行動裝置的版面可以參考這個網站，提供大量的範例給您參考，看看別人的網站是怎麼做的，或許可看出更多的心得。

http://responsive.victorcoulon.fr/

這個網站實在太讓人大開眼界了，把中間那個button拖到你的書籤列，可以應用在其他網站看，觀看該網站在某些裝置下的長相，太方便了@@ 

還有另外一個網站也是類似的功能 http://codebomber.com/jquery/resizer/

當然課程之中也不只介紹這些工具or網站，應該還有其他，只是這些是讓我比較印象深刻的。
希望下次還能遇到類似的課程，當然報名也要搶的到才算...，自從上次的git講座我只是晚5分鐘進去網站而已，名次已經滿了@@，太驚人了.
還有說一下恆逸的環境，若以我見過的電腦學習機構的環境來說，整體來講非常舒服，用餐區實在太高級了。

[讀書記]facebook臉書效應

(圖片來自博客來網路書店)
自從不久前在HBO看到關於facebook的電影- "社群網戰" 之後，後來又看到這本書，想說....恩...了解一下電影演得跟書寫的有甚麼不同，順便做個紀錄吧

這本書雖然不厚，但是字有夠多，我真難理解怎麼有人可以一看就不想闔上書本?

總之，書裡的介紹，跟電影多多少少還是有落差的，可能是為了效果吧?!~

還是需要親自翻翻這本書比較好，不過書裡細節，很少部分是跟電影有所重疊的，我覺得電影所要表現的方向跟書是完全不太一樣的，這本書看下就是fb的源起，中間祖克伯如何與他的夥伴合作,找到幫助領導fb的軍師，以及商業談判的過程，還有遇到一堆創投,投資者邀約等等之類的過程

• 其實臉書也是PHP+MySQL做出來的
• facebook的成功跟天時地利人和有很大的因素
• 社群網站的歷史40多前就有了，為什麼會挨告?
• 若要說起社群網站，追溯至今，從Usenet, 六度分離網站(sixdegress.com), 等等，很多社群網站早在facebook甚至是'哈彿連結'就出現了。
• 六度分離網站的經費非常高昂(購買伺服器,甲骨文的資料庫等等)，而facebook幾乎使用開放原始碼，相對省錢。
• 六度分離網站的出現在當時網路還不這個發達的情況下，最後慢慢走下坡，(比方說網路連結速度慢，個人資料需要照片但當時網路相機並不發達)
• 未來將會有更多的廣告經營轉向網路這個媒體
• 臉書效應: 內容就是廣告(p.245)

想知道就翻翻這本吧。
看完之後覺得...其實祖克柏自己也很有商業手腕~

假內文產生工具(網站)

http://www.lipsum.com/ (上圖截圖自http://www.lipsum.com/網站)
這個網站挺有趣的，
可以用在.... 做網站的prototype,需要塞一段看起來很像真實文章的文字
可以用這個網站來產生很多的文章段落，
雖然是沒有什麼意義的內文，
但是看來有是有幾分逼真，
(總比用手key出一堆奇奇怪怪世界上不存在的單字，還要來的真實)
我覺得這挺實用的，還多國語系~

[讀書記]台積DNA

這兩天火速地把這本書看完，只是昨天順手借的一本書，一看就看好久
雖然我對半導體產業一點都不熟，但是這本書寫著的是世界級的公司-台積電
我只是想多了解這間很多菁英聚集的公司，到底具有什麼樣的企業文化，果真... 看了這本書之後，的確讓我覺得，這麼會賺錢的公司不是空穴來風(用對成語了嗎?!xdd )

• 對台積電來說新人進去前一年半都是適應期 ，通常要上手要兩三年後
   (不過好像沒有談到有沒有試用期...)
• 裡面盡是滿滿的天才，以及來自各個領域的人才，如果不喜歡溝通以及與他人合作，可能會很難熬..，當然也有人因為熬不下去而走人..，對於學業一路走綠燈的人才來說，進去可能會有適應不良的情況
• 每個人手上要同時做很多事情，學會作時間控管非常重要
• 上頭的人可能都很忙，當一件事情交代下來的時候，如果不懂可以當下問清楚，可以節省花時間在做一些不是主管要的東西上面，多與上級溝通。
• 晶片的製程是非常謹慎的，一不小心容易使公司賠上好幾十萬甚至百萬的程度，台積允許新人犯錯，但幾乎是沒有第二次犯同樣錯誤的機會

雖然說，書中提到很多，新人如何適應這樣企業文化的例子，但我這樣整本看來下來，我還是覺得，裡面是很拚的....，社會真競爭阿...(發抖... ><)

[隨手一記] datapicker 前後日期判斷

[隨手一記]
今天寫好久的...
jQuery datapicker 前後日期判斷 (不過最後沒用到..)，但還是留著。

需求 :

• format date格式(將datapicker 日期欄位的值-取代為/，如2012-11-02取代為2012/11/02)
• 判斷日期，form日期不能大於end日期。

原 code:

/*定義*/
function formate_str_to_date(val){
 var result = new Date(Date.parse(val.replace(/-/g,"/")));
 return result;/* replace "-"" to "/""  */
};

function compare(from,end,alertmsg){
 var f = from,
  e = end;
 if(f.getYear()>e.getYear()){
  alert(alertmsg); return false;
 }else{
  if((f.getMonth()+1)<=(e.getMonth()+1)){
     if(f.getDate()<e.getDate()){return true;}else{alert(alertmsg);return false;}
  }else{alert(alertmsg);return false;}
 }  
}

/*使用*/
 var $data_picker_from_date_str = $('from欄位').val();
 var $data_picker_end_date_str = $('end欄位').val();

 var format_from_date = formate_str_to_date($data_picker_from_date_str);
 var format_end_date = formate_str_to_date($data_picker_end_date_str);

$('某按鈕').click(function(){
  compare(format_from_date,format_end_date,"from date不能大於end date");
})