heroku 遇到 Push rejected, no Cedar-supported app detected 問題

因為我傳了一個純靜態頁面的網站上去，所以在 git push heroku master 時遇到了這個問題:

!     Push rejected, no Cedar-supported app detected

原因是因為我少了幾個關鍵的檔案，
(我上網查過其他人為什麼會遇到這樣的原因，不過我只是其中一種可能)

所以 heroku 無法判斷我的 app 是什麼樣的類別
(heroku 支援很多種開發環境，ex: node, Java, Ruby, PHP... 等等)，

所以我在猜想是不是因為我純靜態的頁面沒有一些主要的檔案讓他猜測我是要哪一種環境?!
果然多 touch 一個 index.php 就成功了 push 上去了。

$ git push heroku master
Fetching repository, done.
Counting objects: 5, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 629 bytes | 0 bytes/s, done.
Total 3 (delta 2), reused 0 (delta 0)

-----> PHP app detected
-----> Bundling mcrypt version 2.5.8
-----> Bundling Apache version 2.2.25
-----> Bundling PHP version 5.3.27
-----> Discovering process types
       Procfile declares types -> (none)
       Default types for PHP   -> web

-----> Compressing... done, 22.7MB
-----> Launching... done, v4
       http://YOUR_APP_NAME.herokuapp.com/ deployed to Heroku

所謂的關鍵檔案就是類似:
開發環境是 php 那就要給 index.php
開發環境是 python 那就要給 requirements.txt
開發環境是 ruby 那就要給 Gemfile...等等。 

我倒是第一次遇到這個問題，雖然純靜態網站用 heroku 有點浪費，但是 deploy 真的很快，也不用額外申請外面的免費空間，帶來一堆沒必要的廣告。xd

結論就是呢... 有問題的是我 :P

查詢用 WordPress 做的網站所使用的 Theme (Template)

使用 WPThemeDetector 反查 WordPress 的 Theme

因為要幫忙朋友查看網站使用哪個 Template (Theme)，但我不熟 WordPress，還好找到了這個好工具，只要輸入網址，就可幫你看該網站是使用哪個 Template (Theme)。
(但一定要是用 WordPress 做的網站哦 )

http://www.wpthemedetector.com/

ECMAScript6 on Node.js 環境

只是剛好想要研究一下 generator，才發現自己的環境不太ok。因為我的 node 環境只有 v0.10.x，沒有支援 generator。

如果想要讓 node 的環境支援更多的 ECMAScript6 的 Feature，建議更新到 v0.11.x 的版本，會支援更多，只不過 v0.11.X 的版本是 unstable，如果心臟不夠大顆，不敢亂升級版本，建議用 nvm 跑其他/切換 node 的版本。

版本你可以查看 http://blog.nodejs.org/release/。

以我目前的 node 的版本是 0.10.13 來說:

$ node -v
v0.10.13

Ruby on Rails 的 View 初學雜記

這篇筆記記錄了 Ruby on Rails (以下簡稱 ROR) 關於 view 的 render 的相關記錄。

新手上路，如果有寫錯，歡迎拍磚 :P

ROR 或是其他有遵循 MVC 架構的 Framework，像是 PHP 的 Framework 或是 Node.js 的 Express, Sails 等等，通常關於 view (MVC的V) 的部分，都可以使用 Template Engine 去編寫你的 HTML，並且在 Template 內可執行該語言的程式，進行資料的重複 render，甚至 template 再分出 template (有點像是 widget 或是 partials 的觀念)，主要是為了遵循 DRY 結構，模組化你畫面上的 HTML 結構等。

Ruby on Rails 的 Controller 初學雜記

新手上路，如果有寫錯，歡迎拍磚 :P

這篇筆記記錄了 Ruby on Rails (以下簡稱 ROR) 關於 Controller 的相關記錄。

熬夜看了 Code School 的 railsforzombies 之後，提到 controller 是一個 App 的 Brain 真是一點都沒錯。(我看的是 http://railsforzombies.org/ 系列)，這個系列的影片每打開一次就要聽一次片頭曲，有點煩就是了，都是一些殭屍的動畫，不過這個系列，免費觀看，讚。

接著又順便參考了 RailsGuides 的 Creating a New Rails Project，別怕，請服用。

MVC

Ruby on Rails 遵循 MVC 的架構，這章是在簡單的記錄 C 的部分。

Controller

controller 是用來接收某個 http request 之後決定做出什麼樣反應的功能，也跟你的 routing 設定有些關係， routing 設定能決定接收 request 之後，該由哪個 controller 處理。通常來說，每個 controller 有一個以上的 routing，不同的 routing 也可以對應到某個 controller 的某個 action，action 通常的用途則是去跟 model 要資料，然後把資料，丟給 view (也不一定完全都是要去資料，也可以單純地只是對應到某個呈現給 user 看的 view)，端看需求而定。

Ruby on Rails 之環境建立過程筆記

這篇算是去 2014 Ruby Conference 行前準備吧，一直以來沒碰過 ruby，很高興今年買到 Ruby Conf Taiwan 2014 的票，既然要去聽，還是做點功課，這篇其實就純粹是記錄安裝過程而已，如有需要，請多上網搜尋各式各樣的裝法 :)

我的電腦是 Mac
首先是環境的確定:

1. 確認有 Ruby & 如何在 Mac 跑 Ruby

確認有 ruby 的執行環境，
mac 預設有 ruby 的環境，
你可以輸入 ruby -v 看一下你所擁有的 ruby 版本:

$ ruby -v
ruby 2.0.0p247 (2013-06-27 revision 41674) [universal.x86_64-darwin13]

如果有看到版本的結果的話，
可以試著 touch 一個檔案，如 hello.rb

$ touch hello.rb

然後編輯 hello.rb，
寫入這段:

$ vi hello.rb

puts "Hi, i am win"


接著執行一下 hello.rb，
執行的話就是用 ruby 去執行:

$ ruby hello.rb
Hi, i am win

這樣就會印出 Hi, i am win 的結果了。

PHP 匯出 Excel 功能，所遇到的 SYLK 錯誤

今天在幫忙做 PHP 匯出 Excel 功能時，才發現微軟的微妙...
匯出 Excel 的過程沒有問題，可以卻在打開檔案的那一刻，出錯 error
其 SYLK 的錯誤就是檔案格式錯誤，雖然不影響觀看 Excel ，可是每次開這個 Excel 就要這樣被說一次，實在很麻煩。


說明在此:
開啟檔案時，出現「SYLK:檔案格式無效」的錯誤訊息

看了之後才知道解法不難，重點是匯出成 Excel 的前面兩個字元不可以是大寫的『I』 或 『D』，很不巧的我後端資料表的欄位，第一個 field 就是 ID...，最後只要把大寫的字轉成小寫就可以了 (我是使用 strtolower)。

使用 GreenSock 的 backgroundPosition 讓動畫在 FireFox 也能動

最近常常在使用  jQuery 的 Animation 發現，若想要對某個元素產生 animation 時，而且是更改其 css 的 background-position-x/y，在 Firefox 並不管用。雖然網路上有人也提了一樣的問題，不過我試了一樣是沒有成功。

這則 stackoverflow 的答案得到重點是

background-position-x/y is not really part of any CSS spec

以及

Opera and Firefox do not accept it

問題
因此後來為了不想繞路，後來我選擇了使用 GreenSock，去做任何某個 site 需要的 animation，而且 GreenSock 的寫法更直覺，效果更多，不料，一樣問題也發生了:

var leftPx = "100px 0px";
aniNav = $('#YOUR_ELEMENT');
 
TweenLite.to(aniNav, 1, {'background-position': leftPx, ease:Bounce.easeOut});

解決
一樣的問題發生在 background-position 在 FireFox 不管用，後來在 forums 得到了解法(FireFox animating background position)，
你可以改用 backgroundPosition，記住，沒有'-'，而且 P 大寫，就可以解決在 FireFox 的問題:

var leftPx = "100px 0px";
aniNav = $('#YOUR_ELEMENT');
 
TweenLite.to(aniNav, 1, {'backgroundPosition': leftPx , ease:Bounce.easeOut});

最後的寫法變成這樣 (我額外加上了 FireFox 的判斷):

var leftPx = "100px 0px";
aniNav = $('#YOUR_ELEMENT');
 
if( $.browser.mozilla ){
        TweenLite.to(aniNav, 1, {'backgroundPosition': leftPx , ease:Bounce.easeOut});
}else{
        TweenLite.to(aniNav, 1, {'background-position': leftPx, ease:Bounce.easeOut});
}

Objective-C 學習筆記連結

(這一本是前幾個月在學 Objective-C 的書，不過現在已經出到第六版嘍)

前陣子寫的 Objective-C 的筆記，暫時記錄在 github 上，有需要朋友歡迎到 github repo 下載，若有錯誤的地方，也歡迎開 issue。

主網址 : Obj-C 學習 - Win Wu's Note
筆記清單 :

• Ch01 - 簡單的歷史介紹跟 Objective-C 簡介
• Ch02 - 藉由 Xcode 來介紹第一支 Objective-C
• Ch03 - 介紹 Objective-C 的各種資料型別
• Ch04 - 介紹 Objective-C 的運算式以及一些運算子
• Ch05 - 介紹 Objective-C 迴圈
• Ch06 - 介紹 Objective-C 的流程控制
• Ch07 - 介紹 Objective-C 類別(1)
• Ch08 - 介紹 Objective-C 類別(2)
• Ch09 - 介紹 Objective-C 繼承

這些純粹學習 objective-C 的筆記或許會再增加，但也或許不會再增加...

不過由於之後於 Xcode 實作，會開始需要頻繁的上圖跟解說，所以之後的筆記會放回現在這個 blog (這個...因為一直 commit 到 github 動作有點多...)，po 這邊基礎的筆記作為一個開端，告訴大家，我正在悄悄的偷偷學習的 APP  的開發思維~ Let's GO

[講座|分享-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 方法。