Display remote Node.JS service logs on Chrome Console

In recent years, we got plenty of PaaS services which provide very simple and easy way to deploy our Node.JS services.

Usually after deploying my service, I have to use the command line tools or visit some very slow web pages to access the server logs. It’s really waste my time.

But today, I want to introduce a tool, Chrome Logger, it provides a way to display server logs into Chrome Developer Tool’s Console.

Install it, then visit my sample project on Heroku to see what’s going on.

  • Sample Test Project on Github

Update 06/25 00:40:

  • If you’re using ExpressJS, you can simple log your error like following error handling middleware

Update 06/25 01:50:

Pull requests sent : chromelogger & express-chrome-logger.

Good luck to myself.

取得中華電信(Hinet)光世代Wifi基地台內的密碼

最近申辦了中華電信光世代50M/10M,並且申請了免費附贈的Wifi。

拿到的機器是D-Link 的 WBR-2200

剛剛參考一些網路上的文章,把固定IP申請好,連入基地台

  • 連入基地台的方法
    Normal User:user/user
    Super User:cht/chtap

卻發現裡面有一個神祕的帳號:xxxxxxxx@wifi.hinet.net ?!

找了一下Mobile01,這一組帳號的密碼,居然要打電話自己去跟中華電信要…… orz
礙於懶得打電話,就只好靠自己來。

步驟1.
我用的是谷歌(Chrome)瀏覽器,對這密碼欄位點選右鍵(Right Click),然後選檢查元素(Inspect Element)。

然後就會看到在跳出的視窗中,有著以下類似的東西…

<input value="123456" />

我想這個號碼應該可能大概不是那個密碼,就把它複製下來試試看,

接下來… 如有雷同純屬巧合。

謝謝。

_可能_僅適用於Hinet(中華電信)光世代附贈的家用Wi-Fi機器 WBR-2200

Responsive Media Query Quick Reference

media-query

Just a reminder which helps me doing responsive design’s Media Query.

  • @media (max-width: 767px)
  • @media (max-width: 480px) 
  • @media (min-width: 768px) and (max-width: 979px)
  • @media (min-width: 980px)
  • @media (min-width: 1200px)

注意 :上面的順序是有意義的 更改順序會導致CSS被蓋掉

Get current location and city name

1. Add CoreLocation.framework to your project

2. Add CLLocationManagerDelegate to your viewController

3. Initialize CLLocationManager in viewDidLoad

4. Get current location in  the delegate method
- (void)locationManager:(CLLocationManager)managerdidUpdateLocations:(NSArray)locations;


5. Use CLGeocoder to reverseGeocodeLocation

Full Code here

My Mac App List V1.1

更新了一下軟體列表,請參考。有*的是要付費才能好好使用的。
  • 生產力軟體(Productivity)

  • SizeUp:多視窗管理,很方便 (免費使用,會跳Demo視窗,但不礙事)

  • Mou:Markdown 即時預覽編輯器
  • Dash:快速Snippets與文件查詢工具 (2012之後會一直叫你花NT300買不然就會一直干擾…請謹慎) 瀏覽器(Browser)

  • Firefox

  • Chrome
  • Chrome Canary : For Web Developer Only, power new future chrome* 儲存(Storage)

  • Dropbox : Best Cloud File Storage

  • SkyDrive:Microsoft Cloud File Storage 因為有之前活動獲得的25G,所以還是用一下。
  • Google Drive : Google Cloud File Storage* 開發與編輯器(Development & Editor)

  • Sublime Text:我最愛的純文字編輯器,設定可以參考這篇

  • SmartGit:目前覺得最好用的Git Client (SourceTree把我repo搞爛過…)
  • Evernote : 日常生活必備的筆記App
  • HTTP Client* : 視覺模擬HTTP Request用
  • XCode:iOS Development* 網路與多媒體(Network & Mutimedia)

  • 好照片:方便的照片特效處理軟體

  • FireAlpaca : 免費的圖像編輯軟體
  • Skitch:螢幕截圖軟體,附上基本畫筆可以標記
  • KKBox* : 到處聽音樂,不用下載占空間 (支持台灣軟體發展!高雄Oh~Ya)
  • VLC Player : 目前找到最通用的Video Player
  • HandBrake : 步驟很簡單的影片轉檔軟體
  • iGetter : 續傳軟體* 終端機相關(Terminal)

  • Go2Shell:可以直接在Finder上開啟該目錄的Terminal

  • iTerm2:加強版Terminal,自動完成/畫面切割對於CLI愛好者很適合* 社交軟體(Social)

  • TweetDeck:Twitter Client, 管理多帳號的時候很方便(我還有jsdc.tw的帳號…)

  • Skype : 微軟沒了MSN,只剩下他了
  • Line : 目前最夯的即時通訊App* 系統軟體

看Steve Jobs - The Lost Interview 後感

因為週末實在太忙,下週又都排滿了,所以就很趕時髦的,在這部電影上映的今天就去看了。

結果… 不得不讓我再次覺得,Steve Jobs 真的是非常非常厲害。

(以下有部分電影內容 不喜者請勿繼續看)


Steve Jobs 在受訪時,顯得有點緊張,當時是1995年(隔年NeXT才被Apple買下),其中很多他的觀點,在現今的公司(不管是大企業或是新創公司)都可以作為參考。

以下,就以我理解的話來闡述這些觀點,如果有什麼問題,歡迎指教。

行銷跟業務只有在非獨佔性的事業(像是可樂公司)會領導整個企業,因為產品本身沒有更新的很快,在這部份著手才是上策,但科技業並不是這樣。
如果有些公司要copy國外的點子來做,卻將重點放在技術研發,那只能說,失敗率會很高,因為放錯重點…

獨佔性的企業不見得是大公司,可能只是一個小點子但沒人做(出來),或者是擁有特定的技術與架構的科技。執行面上,我相當認同EZTABLE CEO所說的,專注在產品細節

很多人認為好的點子就占了90%,但實際上執行是非常重要的。
頂尖的點子跟頂尖的產品之間,有著頂尖的技術。點子會在開發(執行)的過程中逐漸進化,並且變的更好;
所以必須雇用A咖,這些頂尖人才,會互相激勵,有時候還會爭論,吵架;但這對團隊目標是好的。

但這些A咖是最難管理的,所以他們需要一個領導者(就是講Steve Jobs自己)
要好管的A咖是絕對不可能的,訪問者也提到Apple中一堆跟隨Steve Jobs的人後來都跑了XDDDD 一個好的軟體公司,就一定會希望建立好的文化,帶起整個團隊的正向循環,從不斷的嘗試與失敗中,做出最好的產品。只是很常見的是用錯了人,只懂得執行或者沒有辦法在細節上琢磨思考,最後只為了遵循原本粗略的規格與規範,反而被限制,無法在產品中真正的去帶給使用者想要傳遞的價值。

時常有人認為Steve Jobs是獨裁者,但在影片中他不斷強調,公司是員工的不是老闆的。回家路上,我想起前幾天看到很喜歡的一篇文章:為什麼我們常愛說外國人「個人英雄主義」,但又常說「外國人比臺灣人懂得團隊合作」

我們可以說,Steve Jobs是一個擁有強勢領導到風格的領導者。他樂於受到團隊成員的遲疑,不妥協的團員對他而言是助力,不是阻力。他也很能夠直來直往的與團員們溝通,甚至進而說服自己的團員讓彼此一起往同一個方向走,是很正確的作法。訪談中,Steve Jobs認為:“真正的頂尖人才,是不需要去呵護(Baby Care)他們的自尊心”。只有暢所欲言的領導人,才有暢所欲言的團隊成員。

上面那篇文章中,所提到台灣的產業中,有著”一群不敢發問,大家沉默,排擠跳出來思考、發問的人,一群冷漠的寒蟬便形成了妥協而安靜的團隊”,問題可能不只是台灣的教育教出不發問的小孩,而是團隊領導者沒有辦法接受不妥協(原因?顧慮團員面子/太愛面子/官僚保位/思考紊亂/脾氣不好/…自行想像)。最終下場都是採取高壓政策,請下面的人閉嘴。這樣的團隊,甭說是好產品,可能連產品都還沒做出來就被終止了。

產品的內容(Content)遠比程序(Process)來的重要,真正的靈魂是內容,不是那些程序。
這跟前一陣子XDiteㄉㄉ寫的文章 也許你該停下來聽聽工程師怎麼說 不謀而合。常見的像是一個只懂得管理進度不在乎內容文化的Project Manager,就很有可能搞爛一整個產品。

當然,反過來說,R&D懂得的內容,也不能僅止於技術部分,而是將需求/人性等納入考量,並以技術的邏輯實現。最後,將文化帶入產品,讓使用者親身感受到。(再次呼應上面,A咖才做的到這些)

真正的懂得內容的人,也才能將產品所需的成本給估算清楚。
有些主管or老闆認為,R&D只是資產,今天寫了這些Code能動就好,不要太在乎架構,進度比較重要。

過一陣子,換了一批新的<del>肝</del>R&D,所花費的維護成本卻高的嚇人,這也是理所當然的,因為前人考量的少,後人就多花點功砍掉重練再加再改。這些成本,都是隱性的,只有從內容的角度去了解,才不會傻傻的花費額外的時間精力,最終導致產品失敗或錯失良機。

Programming將在未來十年大行其道,每個人都該寫程式。

寫程式這件事情是訓練人們的釐清自己的思考。人們寫程式是因為想分享他們的感覺,想用這個工具創造出自己的世界。
1995年的Steve Jobs… 預言了2012年的 Code Year 這趨勢正夯。訪問中也提到了他對未來十年的看法,當時Jobs非常看好網路的發展,認為不管是印表機還是個人電腦都會因為網路而讓整個產業大變動。他還順便裱了一下Micro$oft,說還好網路技術不是被這個不會創新的公司所擁有。最後,他甚至預言,網路會成為未來社交的重要媒介。

今天,2012年,事實證明,Facebook/Twitter,

到後來Apple的 Air Print 都仍然是在他的視野內發展,真的不得不佩服他的先知灼見。

順手打打心得居然三點多了… 剩下想到再補上…

Update Enterprise Apps for iOS Devices only ONE TAP ! (faster OTA)

We all know that Apple provides an easy way(OTA - Over The Air) to distribute your in-house application through a simple web link like following.

<a href="itms-services://?action=download-manifest&url=http://example.com/maniifest.plist">Install App</a> 

Sure, we can use the same way to update the app. That means we have to send a email or url to our device owner, then they can click it. But in my case, we serve some people who are very busy. Thus we need a faster to update the app.

Usage : 
Simply One Tap on the AutoUpdate Icon


Then the browser will show up and ask you to update the app

How to : 
1. Create a html file with following code

2. Add it to the home screen.

Remember to update the apple-touch-icon link 

Demo:
Use you iOS device browser : http://goo.gl/HNJuV

Download:
ota-test.zip - This zip include the sample app-touch-icon, sample-plist, and sample html.

推薦 XCode Plug-in - ColorSense + CodePilot


以目前來說,iOS的Developer大部分都還是使用XCode來做為主要的開發工具。
但只要用過就知道,XCode充滿了許多神祕的問題:

XCode WTF http://xcodewtf.tumblr.com/  Text from XCode http://www.textfromxcode.com/
* @wtfxcode https://twitter.com/wtfxcode 
嗯… 其實XCode真的很需要釋出開發Plug-in的API,就算有廣大的回響,官方目前似乎對於這件事情還是沒有什麼反應
一山還有一山高還是有很多高手,弄出了一些好用的Plug-In,也就是今天要介紹的內容。

第一套:ColorSense 

說明
一般我們在Objective-C裡面,時常會使用到UIColor,不過每次都要請視覺設計師大大給或是自己去找詳細的RGBA實在很麻煩。加入這個Plug-In,一個正常的UIColor Syntax(例如: [UIColor redColor]) 上面就會出現色塊,點擊之後就會出現Mac OS X的Color Panel供選擇,非常方便。


上面是我自己的螢幕截圖,身為一個Web Developer,我另外裝了Hex Color Picker,使得我的Color Panel還可以得到Hex值。
安裝方式:

  1. 到官方的Git Repo,下載整個Project (git clone)
  2. 用XCode開啟ColorSense專案
  3. Build ColorSense專案
  4. 重啟XCode
    這樣就完成了!!
    官方網址(Git Repo) 
    https://github.com/omz/ColorSense-for-Xcode

第二套:CodePilot

說明
XCode有自己的一套檔案管理方式,並不是按照實際的資料夾排列,而是使用群組的觀念,讓檔案在開發環境中看起來是整齊的。但是開發久了專案大了,或是加了很多其他Library,還是難免會有找不到檔案的情形。一直都很希望XCode可以像是Sublime Text 2 或是 Alfred 一樣有個快速簡便的尋找檔案方式。於是我找到了CodePilot 這個Plug-in。


以上是截圖。
安裝方式

  1. 將下載下來的檔案解壓
  2. 把 CodePilot2.xcplugin 放到 “~/Library/Developer/Xcode/Third-Party Plug-ins” (目前我是使用App Store抓下來的Xcode 4.5.1)
  3. 重啟XCode
    啟動的快捷健是Shift + Command + X (X)
    是不是很好找呢~?
    官方網址
    http://codepilot.cc/

在ViewController 之間傳值

在iOS的開發中,我們經常會使用ViewController來控制每一個畫面的行為,
剛開始的時候最常遇到的問題就是

“怎麼在兩個ViewController之間傳遞資訊”這篇文章中我列出了幾種常見的方法,提供給大家做參考。

1. 透過實體(Instance)傳遞資訊

我們都知道,每一個ViewController 的類別(Class),不管是用Storyboard還是Nib的方式,都要先初始化(alloc + init),然後再透過這些實體(Instance)物件做操作。所以,要在彼此之間傳遞資訊,必須要取得這些實體

如果傳遞的資訊比較簡單,或是傳遞資訊的動作只有一次的時候,透過物件的實體是比較簡單的方式

範例A: 透過 Nib 的方式,取得ViewController2 的實體,傳遞資訊,指定user的值

範例B:在StoryBoard中,透過Segue 取得的實體,傳遞資訊,指定user的值

**2.透過單例(Singleton)物件傳遞** 透過物件的實體來傳遞固然很方便,但是很多時候,資訊的共享並不只存在於兩個ViewController之間,例如這個應用程式的作者資訊、目前登入者的暫存資料等等,應該是在一個共通的地方,每個人都是去同一個地方存取共通的資訊。這時我們就可以透過Singleton的方式,讓資訊傳遞更簡單。
[![](http://3.bp.blogspot.com/-_ivnC4oFHjU/UGvy1U3Z79I/AAAAAAAACUM/3HjhOjMIaxg/s640/blog2.png)](http://3.bp.blogspot.com/-_ivnC4oFHjU/UGvy1U3Z79I/AAAAAAAACUM/3HjhOjMIaxg/s1600/blog2.png)
以下是範例程式碼

My Sublime Text 2 Plug-in V2

Sublime Text 2  is one of my favorite plain text editor. It supports hundred of plugin(still growthing) with highly productivity features.

I have listed my plugin on Windows 7 64bit in previous post. This is the updated version of my MacBook Air.

Productivity

  • SublimeLinter

  • automatically show potential error of code after saving * Http Requester

  • Direct request url on new tab

  • [Cmd] + [Option] + [R]* LiveReload

  • reload web page directly after saving (need browser extension)* DocBlockr

  • Doc block generator 

  • [Tab]* AdvancedNewFile

  • Quick folder/file creator, even with path.

  • [Cmd] + [Option] + [N]* All Autocomplete

  • Enable all opened file complete

  • [Tab]* Gist
  • Terminal
  • SublimeCodeIntel
  • ZenCoding
    Code Operation (Align, format, encode)

  • Alignment

  • EncodingHelper

  • Enable reopen file in different encoding* HtmlTidy

  • Indent XML
  • JsFormat
  • Prefixr

  • Useful css formatter with prefix complete feature

  • [Ctrl] + [Cmd] + [X]* SideBarEnhancements
  • SmartMarkdown
  • Sublime-HTMLPrettify
    Syntax & Snippets

  • CSS Snippets

  • EJS
  • HTML5
  • Jade
  • jQuery
  • jQuery Snippets pack
  • jQuery Mobile Snippets
  • LESS
  • Plist Binary
  • Stylus