2014年4月23日 星期三

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/


2014年4月18日 星期五

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),端看需求而定。

2014年4月17日 星期四

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 的結果了。


2014年4月8日 星期二

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});
}



2014年4月2日 星期三

Objective-C 學習筆記連結

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

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

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





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

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

Vue multiselect set autofocus and tinymce set autofocus

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