2013年11月18日 星期一

Node.js 開發環境的好工具 Nodemon

此圖截自 Nodemon 官網




今天要來推薦一個還不錯的工具給大家,Nodemon 這個工具非常適合在開發環境使用,可以隨時監控你檔案的儲存動作,然後幫你重啟 server,可以避免讓你一直 node ... node ... node ... 某一隻檔案,某種程度上我認為他跟 grunt-contrib-watch 一樣好用。相見恨晚啊...另外他也可以監控其他類型的檔案,像是 coffee-script 等等。



安裝方式:
npm install -g nodemon

-g 是全域的安裝方式,通常我也這麼做,這樣就不用在意一定要在特定的 folder 才能使用 nodemon,任何電腦的資料夾底下都可以用。


nodemon 某隻檔案:
nodemon [your node app]

Example:
nodemon app.js


最基本的用法大概是這樣,他應該還有其他有用的功能,只是我現在主要只有用最基本的這種。不過我記得我剛學 node 時好像還有另外一套叫做什麼 forever 的,忘記了 xdd
NPM 有很多工具常常會讓我驚訝 :)


使用 Node.js + SQLite3




SQLite 算是比較輕便型的資料儲存方式,適合開發時的時候使用,但如果是真的 Production 的環境就沒這麼適合。其實我以前沒想過 SQLite 這麼方便,大學還在學 PHP 時看到 SQLite 的章節是直接跳過的,因為當時的公司也沒使用 SQLite :P

SQLite 有以下幾點的特質:

  • 輕薄短小,使用簡單
  • 沒有資料庫的伺服器,它是用檔案或是 memory 的方式儲存
  • 適合開發階段使用,儲存少量資料
  • 帶資料存在硬碟,存取速度稍慢
  • 沒有 user 權限設定的功能,較不適合儲存個人或私密資料

2013年11月11日 星期一

Node Knockout TW 2013 參賽心得

活動官網:http://nodeknockout.nodejs.tw/
時間 : 2013/11/9 ~ 2013/11/10


今年至今報了兩次黑客松,yahoo 的沒上,還好 node.js knockout tw 不需要審核,就在網路上跟別人組隊報名了。

人生的第一場黑客松


黑客松如果不知道自己為什麼要參加,或是不熟那項技能,腦袋的想法就會有點乾渴,今年的我就是這種心情,關於 node.js 我也僅僅用過 socket.io ,除此之外,我只會 frontend,然後...沒了。
( 其實出去比賽不是什麼難事,我自己個人比較擔心自己的能力沒有辦法 match 到自己的組員 )

2013年11月2日 星期六

安裝 Compass

compass簡介:

Compass 使用 Sass,而 sass 是一種 Css Preprocessor / Css Extension,
Compass & Sass 都是需要 Ruby 編譯
Compass 是一個 css 編寫 Framework (css authoring framework)
(題外話,像 Sass 這種透過編譯的方式就可以產出 Css 的 通常稱之為 CSS 預處理器(css preprocessor),當然世界上不止 Sass,很多人也聽過 less, stylus 等等的,可以看看 8 CSS preprocessors to speed up development time)

通常大家都會 Sass 搭配 Compass 做使用,為什麼?因為 Sass 搭配 Compass 更強大,這也是為什麼很多網路上的教學都會把這兩個一起做教學。

比方說 Compass 讓我覺得最主要的功能是 @import ,比方說我們需要用到 border-shawow,會幫你寫好所有的 css 前綴,像這樣:

@import 'compass/css3/box-shadow'
h1
    @include box-shadow(3px)

而編譯後會得到的結果是:

h1 {
  -moz-box-shadow: 3px;
  -webkit-box-shadow: 3px;
  box-shadow: 3px;
}

要開始用 Compass 以及想要擁有 import, sprites 等等的功能,你必須要有可以編譯 compass 的環境,或者是一些現成的工具,以下是介紹用 CLI 安裝 Compass。
compass 有很多很神奇之處,之後再聊 :) 我歡迎有人陪我一起學習。

Setup Compass Environment

Vue multiselect set autofocus and tinymce set autofocus

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