[講座|分享-snippet note] 2014 Windows Azure Bootcamp 2014 TW

 [請小心服用] 這是昨天參加聚會的一些筆記，只是個人一些片段的內容小筆記，不一定完全正確，只是當個參考。

• Date: 2014/03/29 13:00
• 活動詳情 : http://study4-tw.kktix.cc/events/2014march
• 參與人數 : 約 60 人

Agenda

Time	Agenda
1:00 - 1:30	笑CC讓網站上雲端 - KKBruce
1:35 - 2:05	由本地應用到雲端應用：構思與實現 - 小朱
2:45 - 3:15	被雲搞死的天空 - Sky
3:20 - 3:50	資訊服務輕鬆做 - Chia Chi
4:30 - 5:00	在VM上面玩VM - 卡神
5:05 - 5:35	Azure - 加速你的創業夢 - James

[Head First Note] Ch02 - IOS 應用程式設計模式 筆記

[深入淺出 iPhone 與 iPad 開發(第二版)] Ch02 筆記

Ch02 - IOS 應用程式設計模式

這篇筆記除了是 Head First 第二章的心得之外，還包含一些延伸的學習筆記。算是非常片段的筆記，建議看過 Head First 之後再來看吧 :P :P :P

• Q: 如何規劃你的應用程式配置?
  A: 一切從草圖開始 -> 建立 GUI -> 規劃如何使用畫面的控制項 -> 處理資料。
  使用性跟美感是 iPhone 的成功關鍵。

IOS HIG 應用程式設計規則

ios Human Interface Guide (HIG，人機介面指南)

• Apple 公司有發佈一份文件作為指導如何開發要在 App Store 要賣的 APP，當你要準備送審 APP 時，你必須同意你的 APP 符合 HIG 規範。

[不專業的開箱文] Superdry Scuba 深潛探險矽膠腕錶

今天去買了自己喜歡很久的一隻手錶，極度乾燥系列。

極度乾燥不是只有賣衣服, 耳機, 手錶也都有賣，然而手機的代理跟賣衣服的代理似乎是分開的? 我還沒有在賣極度乾燥衣服的門市有看到手錶。

我很少買這種形式的手錶，但是因為色彩非常的跳，就想說買一隻來戴戴看，這隻手錶的特色如下，其實也是跟一般手錶差不多啦 xd

• 淺藍綠/38mm (SYL120m)
• 10ATM防水功能 
• 矽膠包覆錶帶 
• 日本機芯 

[聽演講的 snippet 筆記] GDG Taipei #2 - Introduction to Google App Engine for PHP

離上次聽這個活動有好一陣子了，不過還是把筆記留起來，雖然很片段...，可能各位客官看不懂，抱歉了...，可以看看簡報網址的內容 :)

• 活動詳細: GDG Taipei #2 - Introduction to Google App Engine for PHP
• 時間 : 2014/02/12
• 講者 : Nevin Chen
• 簡報網址 : http://goo.gl/i9eDKx

活動照片:

html2jade 初次見面以及使用

* 這個工具感謝先前在製作 Node.js Taiwan 靜態頁時由 Poying 以及 Caesar 介紹。

要講 html2jade 這個工具之前，我必須先講一下 Jade 是在做什麼的。
html2jade 的 github 連結

Jade 是一個 Node Template Engine ，如果你用過 Express，那麼你或許聽過 ejs，ejs 也是一種 Template Engine，硬要說成中文的話，也可以說是樣板引擎，如果你是寫 PHP 的人，那麼就像 Smarty 之於 PHP 一樣。

你可以想像 Jade 只是把一般的 HTML 轉換成用比較簡單的方式所寫成的樣板，透過 Node 的環境，進行編譯 (編譯成 HTML)，當然還有一些蠻特別的功能，比方說一些基本的樣板能夠有 includes 功能, block, mixin, filter 等等...，不過這都不是我這邊所要表達的事情，若真的要講 Jade，或許到時候再分另外一篇寫也不遲。

目的

幫你把 html 轉成 Jade。之所以介紹 html2jade 這個工具，是因為假如一個專案已經進行中，要把過去已經完成的 HTML 轉換成 Jade 來使用，只要透過這個工具，就可以幫助你直接做把 HTML 轉換成 Jade 的工作，但是對於轉換的結果，只能盡善盡美，不能抱持能夠 100% 轉換的很完整的心情去使用，就像 github 專頁上寫的一樣 『Converts HTML to Jade template. Not perfect but useful enough for non-daily conversions.』，雖然不夠完美但也夠用，至少你不需要一個一個 html 頁面自己手動轉換成 Jade。

你可能看不懂我在寫什麼的 JavaScript 的物件導向基礎筆記...

前言

這篇筆記，其實要感謝 Jace Ju (小鐵) 的細心教導，

講義: https://github.com/jaceju/javascript-notes/blob/master/object-oriented.md

在此做一下當天學習的心得跟領悟，其實我不太寫物件導向教學文，因為網路資源已經夠多了，二來自己也不夠熟，不知道從何說起...，不過由於小鐵的教學讓我有更多的體會，突然有頓悟的感覺xd，且有些地方也讓我心有戚戚焉...，在此用語言記錄下來。

第一段，建立一個 Object

(1)物件 (Object) 表達式:

其實在 JavaScript 的世界中，『Everything is an Object』，此外，JavaScript 也允許你定義自己的 Object。在了解一些物件導向之前，先了解 JavaScript 的物件 (Object) 是如何表示的:

1 2 3 4

var Object = { property1 : true, method1 : function (msg) { alert(msg) } };

• Object 的定義格式就是 property : value 或是 method : function( )....，在物件的定義，只有屬性（property） 或是方法 (method) 這兩種定義。
• 你會發現方法的定義跟定義函式 (function) 一樣，沒錯，只是定義在物件的函式，稱為方法(method)。

以下為一個人類的物件:

1 2 3 4 5 6 7 8 9

var frontendGirl = { name : 'Win Wu', gender : 'girl', age : 18, //forever 18 XD sayHello: function(){ alert('Hello'); } };

• frontendGirl 這個物件有 name, gender, age 這些屬性以及一個 sayHello 方法。
  

[講座摘要] 台灣新創環境的布局與挑戰

這是上週 2014/02/24 去聽的演講，講者是 Ken Hsu，以下是我自己個人紀錄的一些摘要。

台灣新創環境的布局與挑戰

• 活動網址 [BELP] 主題講座 #14 - 台灣新創環境的布局與挑戰
• 地點: CLBC

SWOT

人多的地方不要去

• 思考:舉例: 為什麼你需要做這個 App?
• 潛在性威脅
• 愛評網/巷弄
• 大眾點評網會不會來台灣?
• 人多的地方不要去，台灣市場萎縮
• 領域在切更多的領域，人就會少
• 創業，儘量不要去 try 人多的地方

絕對困境

• 強大專業能力，但沒有會做生意的人 (買&談判&不知道要跟他要什麼?&你什麼時候可以賺到錢?)
• 創業之中你應該要想怎麼賺錢? 廣告怎麼下? 廣告收入怎麼算? 下一個 business model?
• 你怎麼跟 user 要到錢?
• 你就算是假日去擺攤都可以，了解成本的概念，你就會做生意
• 賣東西卻不知道自己的東西值多少錢?

Legal First

• 沒有一個國家的法律是沒有漏洞的
• 台灣是租稅天堂
• 會計跟律師是創業必備的夥伴，尤其在網際網路業，尤其個資法, 版權, 授權
• 如果一開始就選擇軟弱，之後就站不起來

沒種? 鄉愿心態?

• 你好我也好，那就不會有真正的好...
• 大家按贊支持，請幫我下載
• 不要想線上，而要想線下

jQuery 解決 IE11 不支援 $.browser.msie

$.browser.msie 在 IE11 好像不管用，因此我上網找了一下解決方法，如果你的 web 需要判斷『如果是 IE，那就怎樣怎樣的...』，那麼你應該會用到 $.browser.msie，需要判斷到 IE11的話，只要再補上 (!!navigator.userAgent.match(/Trident\/7\./)) 的判斷就可以了:

1 2 3

if ($.browser.msie || (!!navigator.userAgent.match(/Trident\/7\./))) { //do something :) }

參考: Jquery fail to detect IE 11

git clean 清除不需要加入版本控制的資料或是檔案夾

* 本篇要感謝教我這個小技的同事 Isac

因為工作的需要，我常常需要在一個 repository 不斷的嘗試一些新的 extension 或是 plugin (白話一點就是會一直安裝新的東西進 repo)，以至於常常需要下 git reset --hard ，還原到 commit 之前的版本，但是新增的檔案還是必須自己一個一個坎，這時候就可以下 git clean -f -d 來把不需要的檔案都清掉。

git clean -f -d

-f : force 強迫
-d : 資料夾



如果你只有下 git clean -f 那麼只會把不需要的檔案的刪掉，但是如果是資料夾可能刪不掉，因此需要再帶個 -d ，當然如果沒有資料夾的話就不需要 -d 了。

解決 jQuery 的 animate scrollTop 方法在 Firefox 沒有作用的問題

最近發生在自己手邊上的案子，發生了這個問題，jQuery 的 scrollTop 是一個很常用的功能，常常我們會在某些 link 上面綁定 click 事件，觸發 scrollTop，然後畫面就會捲到適當的位置，而我發現在 Firefox 卻無法捲動，為什麼呢?

這是因為當 animate 的 scrollTop 方法，其他瀏覽器會作用在 body 元素上，而 FireFox 卻是作用在 html 元素之上，所以本來我的寫法是這樣:

$('element').click(function(e){
    $('body').animate({
            scrollTop:  $('element').offset().top},'slow');
});

因為 animate 只綁到 body，因此就會漏掉 Firefox 沒有作用到，只要加上綁定在 html 上就可以解決:

$('element').click(function(e){
    $('body, html').animate({
            scrollTop:  $('element').offset().top},'slow');
});

參考: Animate scrollTop not working in firefox

2014 年的 Why Not

wow...，好久沒寫文章了，這篇算是為寫而寫吧...，讓有在看我 blog 的人感受到我的存在(恩...確定有人看嗎？)，本來去年年底想要跟風一起寫一篇『2013之我做了哪些事』等等之類的文章，想了想又覺得自己根本也沒做什麼事，完全寫不出個什麼。

臺北啊... 真是個讓人又愛又恨的城市，自從來到臺北之後覺得自己快要變成藥罐子了，從去年下半年開始身體小毛病還蠻多的，真不喜歡這樣不健康的自己。幸好，心情一直保持很優良的狀態，謝謝陪伴我的大學同學, 前男友, 還有社群, 朋友以及程式們!


隨著年紀的增長，覺得青春好重要，然後，雖然只有養不起的未來，但有養得起能力，2014年最大的願望就是不要抗拒任何可能性跟機會，Why Not? 想做什麼就去實現吧!

AngularJS and jQuery 近期專案開發心得

最近好久沒寫文章了，因為這陣子遇到的事情太多太雜...，但是學到很多...，可是我沒有辦法一一記錄下來，...一時也提不起勁啊，這篇只好用一種當作日記的心情來寫寫了，請大家看看就好，不用太認真 xd，真的。

還有我不想跟大家筆戰，我只是分享一個專案同時使用 AngularJS 跟 jQuery 的感覺是什麼，是『AngularJS and jQuery』，而不是『AngularJS v.s jQuery』，更何況每個專案的體質本來就不同。

AngularJS  (logo來源)
前陣子社群非常活躍的一套 JavaScript Framework，我一直很想嘗試看看使用 AngularJS 是什麼感覺，但是我想一路走來的人都能理解，有時候寫玩具跟真正用在專案上是真的不太一樣的感覺 (當然自己的玩具也叫做專案xd)，只是有客戶的苛求，比較能夠往更多地方鑽研，如果什麼事情都照著工程師的想法做，那當然做什麼都比較順，因為我們都知道，『怎麼做對自己比較方便，而且可以達到一樣的功能』，恩...有點離題了。

所以這次用在工作的專案上，因為專案的需求，會使用到較多的 Ajax 的 Request，來替換頁面上的內容，因為 AngularJS 順暢的 Data Binding 的特性，以及 View Template，因此感覺蠻適合使用 AngularJS 作為這次專案想用的 Framework，從學習怎麼用 $http 到串到專案的功能，大約不會超過4天。 （我必須說明這次真的有太多的時間花在學習 AngularJS 的架構)。

說實在的，如果我今天很熟練 AngularJS，我想時間開支不會超過4天，以開發速度來說，AngualarJS 真的是不錯的選擇，再加上我第一次認真用過MV* 架構的 Framework，寫起來程式碼真的有架構許多，說實在的，如果還有機會，我是一定會再使用 AngularJS，或是學習其他 Framework，工具雖然學不完，但是這些架構跟 Framework 的設計真的蠻值得學習。

不過從 jQuery 寫到 Angular，一定要完全忘記 DOM 這件事情，剛開始用 Angular 有點不習慣，動不動我就想要用 selector，但是... 真的，要學會『綁手綁腳』的使用 Angular，我現在也正在努力適應這件事。:)



jQuery
jQuery 算是我比較熟的，從大學在程式設計公司打工時就是寫 jQuery，中間從來沒換過，至於他的優，我就不再多介紹了，但是就以這次專案遇到的功能，我真的是蠻想捨棄 jQuery 的...，(因為覺得 AngularJS 的 Temlate 太好用了...)，可是最後我還是把整個 AngularJS 改成 jQuery code 了，原因詳見下方轉折點。




轉折點
因為整個專案並不是公司自己開發的產品，因此要考慮到客戶想支援的瀏覽器程度，最後還是改用 jQuery 了，說實話心裡覺得有點杯具，3天內把整個之前用 Angular 寫好的功能改成用 jQuery 寫，還包含要不斷的測試。

• 最大的問題是 IE 瀏覽器版本的支援

為了符合客戶的 IE 瀏覽器的支援性，我自己測試是 AngularJS 在 IE7 完全沒辦法(我怎麼找都沒找到解法，如果有歡迎告訴我，謝謝～)，所有的表達式 {{expression }} 都會暴露在畫面上，並且也抓不到 Ajax 吐回來的資料，IE8 是有解法，就像官方網站上寫的那幾招。

還有一些 Angular 本來就很方便的功能，像是 $filter, $watch ...，使用 jQuery 全部要自己來，而且瀏覽器反應的速度真的有差。

遺憾的是，因為趕時程的關係，好像留下不少程式負債，總覺得不知道 jQuery 到底要怎麼寫，才會比較有架構，比較好讓人維護，這次很汗顏沒有寫的很好，而且我覺得我的 code 真的有夠『得體』(Dirty)。

好玩的是，平常沒有這麼多閒功夫，因為這次的教訓，一樣的功能用 jQuery 跟 AngularJS 各寫一次，真的很有感覺...。也算是長知識了。能夠靠專案學到這些，感覺也是挺過癮的。

[Node.js Web Framework] Sails 檔案目錄結構

上一篇 [Node.js Web Framework] Sails 介紹與安裝 提到，如何安裝 sails 。
這一篇會接續上一篇所建立的 sails 的 web 目錄做一些簡單的說明。

1. sails new newProject
2. cd newProject

上次第一個步驟我們使用 sails new 專案名稱，初始化一個新的專案，叫做 yourNewProjectName ， 不過在今天這個範例我是把我的 project name 叫做 newProject。接著我們打開 (cd) 這個 newProject 資料夾。

[Node.js Web Framework] Sails 介紹與安裝

官網連結：sailsjs.org

Sails 是一套執行在 Node 環境下的 Web Framework，其實它主要提供的功能跟 Express 是蠻類似的，一樣具有 MVC 架構，快速架設等優點，如果你平常都使用 Express，不仿試試看 Sails。

Sails 的優勢

具有自動產生 RESTful JSON API 的功能（REST Blueprints）。預設的情況下，當你每次 gen (產生，我都用 gen 代表 generate) 一個 controller 的時候，都是預設產生 CRUD 的方法 (method)，當然也可以自己客製化 controller 裡面所有的 method。

而且可以利用指令的方式就可以產生 controller 以及 model 的 files，有些人認為這種 scaffolding 的方式跟 ROR 很像，不過這個就讓有學過 ROR 的朋友來感覺看看了，因為我沒寫過 ROR。

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

此圖截自 Nodemon 官網

• Nodemon 官網：http://remy.github.io/nodemon/
• Nodemon github：https://github.com/remy/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 有很多工具常常會讓我驚訝 :)