Tools

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.

推薦 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/

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

Simple one-step web(http) Server

We all know Mac OS has a powerful sharing feature called AirDrop, but it too simple to share to multiple users. Sometimes we really need a simple web server for sharing our static resource, For instance,  HTML file, simple folder,  or some multimedia files.
 We can use Python on Ubuntu…

Python

Usage : 

python -m SimpleHTTPServer [port]

And I have to work under Micro$oft Windows sometimes…

F5 

http://www.getf5.com/

Install : 

  • Download the F5 application

Usage : 

  • Simply drag your folder or file into the application, it will shows the browsable URL.

But i prefer nodejs based…

NodeJS 

Simple http server

Install : 

npm install simple-http-server -g

Usage : 
nserver

My Sublime Text 2 on Windows 7 64bit

Sublime, the awesome, amazing editor.1. Get 64bit portable version

  • Official Website : http://www.sublimetext.com/22. Install Package Control
    This is the most complex step.
    _Type Ctrl + ` and enter following python code _

    import urllib2,os; pf=‘Package Control.sublime-package’; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),‘wb’).write(urllib2.urlopen(‘http://sublime.wbond.net/'+pf.replace(‘ ‘,‘%20’)).read()); print ‘Please restart Sublime Text to finish installation’
    3. Install Packages (All from package control)

  • Alignment

  • Format shortcut – Ctrl + Alt + a* BracketHighlighter

  • CoffeeScript
  • Display Functions (Java)

  • Edit History

  • Jump to next/previous edit location

  • Add Key Binding* FileDiffs

  • Usage

  • Right click on tab (Or use command popup then search “Diff”)* Install KDiff3

  • Modify Code (file_diffs.py)

    Under WINMERGEif not WINMERGE:
    if os.path.exists(“%s\KDiff3\KDiff3.exe” % os.environ[‘ProgramFiles(x86)’]):
    

    WINMERGE = <span class="str">'"%s\KDiff3\KDiff3.exe"'</span> % os.environ[<span class="str">'ProgramFiles(x86)'</span>]

    else:
    

    WINMERGE = <span class="str">'"%s\KDiff3\KDiff3.exe"'</span> % os.environ[<span class="str">'ProgramFiles'</span>]

    ……
    _End of run_diff function_
    if from_file == ‘from_file’ or to_file == ‘to_file’:
    

    cmd_line = <span class="str">'%s "%s" "%s"'</span> % (WINMERGE, from_file, to_file)
print <span class="str">"KDiff3 command: "</span> + cmd_line
Popen(cmd_line)</pre></pre>*   [Git](https://github.com/kemayo/sublime-text-2-git/wiki)

  • Call git command quickly – Need Git (mysysgit on Win7)

  • Usage : Command search “git”* HTML5

  • Snippets* IndentGuides

  • Indent line for editors* jQuery

  • Snippets* jQuery Snippets pack

  • Hint : Need enable jQuery support by command

  • Snippets* JS Minifier

  • Minify shortcut – Ctrl + Alt + m* JsFormat

  • Format shortcut – Ctrl + Alt + f* Pretty JSON

  • Format shortcut – Ctrl + Alt + j* Prefixr

  • Format shortcut – Ctrl + Alt + x (For CSS)* SideBarGit

  • SideBarEnhancement

  • SublimeCodeIntel (Must Have)

  • Autocomplete (Popup)* Tag

  • “/”to end tag

  • Format shortcut – Ctrl + Alt + f

  • Features : Edit –> Tag …* Terminal

  • Open file shortcut – Ctrl + Shift + t

  • Open folder shortcut – Ctrl + Shift + Alt + t* Tortoise

  • Need  TortoiseGit or TortoiseSVN

  • Update : 20120314 - **error: [Error 2] The system cannot find the file specified*** WinMerge

  • Compare shortcut – Ctrl + Alt + d (Current file with previous edit file)

  • Modify Code (WinMerge.py)

    WINMERGE = “F:\WinMerge-2.12.4\WinMergeU.exe”
    * ZenCoding (AWESOME!!)**Editor Shortcut**

  • Toggle sidebar (file explorer) – Ctrl + K then B

  • Command List - Ctrl + Shift + P

  • File Search – Ctrl + P

    Right Click Menu Support

  • Modify the Path of following regestries

  • Save following text into a .reg file then double click on it to apply
Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\\shell\SublimeText]
@=“Edit With Sublime Text2”
“Icon”=“D:\WindowsApp\Sublime\sublime_text.exe”
“Position”=“Bottom”

[HKEY_CLASSES_ROOT\\shell\SublimeText\command]
@=“D:\WindowsApp\Sublime\sublime_text.exe %1”