2013年6月18日星期二

[Mac] ssh remote server through socks proxy - 經由socks proxy ssh到遠端Server

1. Install ProxyChains

$ wget https://gist.github.com/allenhuang/3792521/raw/bb52568695f9d745004eee87b892637f9d17a771/proxychains4_formula.rb
$ mv proxychains4_formula.rb /usr/local/Library/Formula/Proxychains.rb
$ brew install --HEAD proxychains

2. Modify ProxyChains conf

$ vim /usr/local/etc/proxychains.conf

set this line to conf:

socks4 127.0.0.1 8888

3. Open socks

ssh -vND 8888 user@socks.server

4. Settings Socks Proxy on Mac Network Preference

5. Connect to remote server

$ /usr/local/bin/proxychains4 ssh user@remote.server

2013年6月15日星期六

[Vim] vim configuration

我其實很少用vim ... 不過有時候在Mac用一下、Linux用一下，覺得沒存一下設定檔不行... 所以慢慢整理一份出來

See Also

http://vim.wikia.com/wiki/Example_vimrc

2013年6月3日星期一

F2E前端工程師面試問題集 - Front-end Job Interview Questions

前端工程師面試問題集

@版本 2.0.0

譯注：此翻譯版，主要給不能流利的讀英文的人看，相關專有名詞還是保留原文。翻譯不好地方請協助pull request.

此repository包含了一些前端開發的面試問題，來審查一個有潛力的面試者。這並不是建議你對同一個面試者問上所有的問 (那會花費好幾小時)。從列表中挑幾個題目，應該就夠幫助你審查面試者是否擁有你需要的技能。

Rebecca Murphey 的 Baseline For Front-End Developers 也是一篇很棒且值得讀的文章在你開始面試之前。

注意： 請記住一點，很多問題都是隨情況而變化，能引發很多有趣的討論，比直接的標準答案更能讓你瞭解此人的能力。

參考文獻

多數的問題都是從 oksoclap 上的一個討論串截取出來，原創作人為 Paul Irish (@paul_irish) 並由以下的人員所貢獻：

@bentruyman - http://bentruyman.com
@cowboy - http://benalman.com
@ajpiano - http://ajpiano.com
@SlexAxton - http://alexsexton.com
@boazsender - http://boazsender.com
@miketaylr - http://miketaylr.com
@vladikoff - http://vladfilippov.com
@gf3 - http://gf3.ca
@jon_neal - http://twitter.com/jon_neal
@wookiehangover - http://wookiehangover.com
@darcy_clarke - http://darcyclarke.me
@iansym

常見問題：

你昨天或這週學習了什麼？
寫程式的哪部份最讓你感到很興奮或是有興趣？
說說你喜好的開發環境 (作業系統, 編輯器, 瀏覽器, 開發工具 … 之類)
你可以描述你在開發一個網站時的工作流程嗎？
你可以描述漸進增強 (progressive enhancement) 和優美退化 (graceful degradation) 間的差異嗎？
- 加分題：描述這兩項的特色？
描述什麼是"Semantic HTML"？
你怎麼優化一個網站的靜態檔案 (assets) 和資源 (resources)？
- 可能的解決方法包含如下：
  - File concatenation (檔案合併)
  - File minification (最小化文檔)
  - CDN Hosted (CDN託管)
  - Caching (快取)
  - …之類
為什麼用多個域名來放置網站資源會比較好？
- 瀏覽器一次能在同一個域名下載多少資源？
說出三種能加快網頁讀取速度的方法？ (感覺上的速度或是真正的讀取時間)
如果你加入了一個專案，但是他們的程式碼用tabs，但是你習慣用spaces (空白鍵)，你會怎麼做？
- 建議此專案使用，例如：EditorConfig (http://editorconfig.org)
- 訂定一個公約 (保持一致)
- issue :retab! command (retab! 在vim中用來把所有spaces換成tabs)
寫一個簡易的投影片頁面
- 加分如果沒有用到 JavaScript
你用什麼工具來測試你的程式碼效能？
- Profiler, JSPerf, Dromaeo
如果今年你能精通一項技術，那會是什麼？
描述標準和製定標準機構的重要性？
什麼是 FOUC？你怎麼避免 FOUC?

HTML 規格問題集:

doctype 做什麼用的？
standards mode 和 quirks mode 有什麼不同？
使用 XHTML 有什麼限制？?
- 如果網頁使用 application/xhtml+xml 會有問題嗎？
你怎麼做一個需要支持多國語言的網頁？
- 當開發和設計一個多國語言網站時，有什麼需要小心的？
data- 屬性的好處在哪？
考慮 HTML5 作為一個開放式的網站平台。HTML5 的 building blocks 有哪些？
請描述 cookies, sessionStorage 和 localStorage 的不同？

JS 規格問題集

描述 event delegation
描述 this 如果運作在 JavaScript 中
描述 prototypal inheritance 如何運作？
你如何測試你的 JavaScript？
AMD vs. CommonJS?
什麼是 hashtable?
什麼是 undefined 和 undeclared 變數？
什麼是 closure, 如何/為什麼使用?
- 你最喜愛並習慣用的 pattern 是怎樣的? argyle (Only applicable to IIFEs)
anonymous functions 典型的使用時機？
描述 "JavaScript module pattern"，你什麼情況會用到？
- 加分題：清楚地提到 namespacing.
- 如果你的 module 沒有命名空間怎辦？
你如何架構你的程式碼？ (module pattern, classical inheritance?)
host objects 和 native objects 有何不同？
有何不同: javascript function Person(){} var person = Person() var person = new Person()
.call 和 .apply 有何不同？
描述 Function.prototype.bind?
你什麼時候優化你的程式？
你可以描述 inheritance 如何運作在 JavaScript？
你什麼情況會使用 document.write()？
- 多數的廣告產生仍然使用 document.write() 雖然這樣用會令人皺眉
feature detection, feature inference, 和使用 UA string 有什麼不同？
盡可能的詳述描述 AJAX
描述 JSONP 如何運作 (且為何它不是真正的 AJAX)
你是用過 JavaScript templating (樣板) ？
- 如果有的話，你有用過哪些 libraries？ (Mustache.js, Handlebars … 等)
描述 "hoisting"
描述 event bubbling.
"attribute" 和 "property" 的不同？
為什麼擴展 JavaScript 內建的 objects 不是個好方法？
為什麼擴展 JavaScript 插件是個好方法？
document load event 和 document ready event 有什麼不同？
== 和 === 有什麼不同？
描述你如何取得一個 query string 的 parameter 從瀏覽器的網址列。
描述 JavaScript 的 same-origin policy (同源策略)
描述 JavaScript 的 inheritance patterns (繼承模式)
實作如下程式: javascript [1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5]
描述一個 memoization (避免重複運算) 的策略在 JavaScript 中
Ternary expression 怎麼來的, "Ternary" 的意思是什麼？
function 的 arity 是什麼？
什麼是 "use strict";? 使用他的優點和缺點是什麼？

JS 程式範例：

javascript ~~3.14 問: 上述的statement(陳述式)會回傳什麼？ 答: 3

javascript "i'm a lasagna hog".split("").reverse().join(""); 問: 上述的statement(陳述式)會回傳什麼？ 答: "goh angasal a m'i"

javascript ( window.foo || ( window.foo = "bar" ) ); 問: window.foo 的值是什麼？ 答: "bar" 只有在 window.foo 是 falsey 時會回傳此答案，否則的話會回傳window.foo

javascript var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); 問: 上述的兩個alerts的結果會是什麼？ 答: "Hello World" & ReferenceError: bar is not defined

javascript var foo = []; foo.push(1); foo.push(2);

問: foo.length 的值是什麼？ **答： 2

javascript var foo = {}; foo.bar = 'hello'; 問: foo.length 的值是什麼？ **答： undefined

jQuery 規格問題集：

描述 "chaining"
描述 "deferreds"
你知道哪些實作 jQuery 的優化方式？
.end() 做些什麼？
如何給一個綁定的 event handler 命名空間？為什麼這樣做？
說出四種可以傳到 jQuery 方法的值
- Selector (string), HTML (string), Callback (function), HTMLElement, object, array, element array, jQuery Object … 等。
什麼是 effects (or fx) queue?
.get(), [], 和 .eq() 有何不同？
.bind(), .live(), 和 .delegate() 有何不同？
$ 和 $.fn 有何不同？或什麼是 $.fn？
優化這個 selector: javascript $(".foo div#bar:eq(0)")
'delegate()' 和 'live()' 有何不同？

CSS 規格問題集：

描述 "reset" 在 CSS 中做什麼, 如何用？
描述 Floats 並解釋如何運作
有哪些不同的 clearing 技術？哪個適用在哪種內容上？
描述 CSS sprites, 你如何實作在網頁或網站上？
你最喜愛的圖片取代技術是什麼？你什麼時候會用到？
CSS 屬性 hacks, 也條件引用 .css 檔案, 或是… 其他的？
你怎麼讓你的網頁支援有功能限制的瀏覽器？
- 你會使用什麼樣的技術/流程？
有什麼方法來隱藏網頁的內容？ (只顯示在 screen readers)？
你使用過 grid system 嗎？如果有的話？你較推薦哪個？
你曾經實作 media queries 或是 mobile specific (手機規格的) layouts/CSS?
你熟悉任何有關 SVG 嗎？
你如何優化你的網頁以利於列印？
在寫高效的 CSS 時，有什麼要注意的？
使用 CSS preprocessors 的優點和缺點是什麼？ (SASS, Compass, Stylus, LESS)
- 如果是這樣, 描述你使用過的喜歡和不喜歡的 CSS preprocessors
你如何使用非標準字體來實作網頁設計？
- Webfonts (font services 像是: Google Webfonts, Typekit …等等)
姐是瀏覽器如何按照 CSS selector 找到對應的element？

可選的有趣問題：

你寫過最酷的程式是什麼？你最自豪的是什麼？
你使用的開發工具中，你最喜歡的部分是什麼？
你有任何的 pet projects (個人開發的小專案)？什麼樣的？
你最喜歡 IE 瀏覽器的什麼特點？

[OSX] dotfiles - zsh based Terminal editor and configuration files.

My dotfiles: https://github.com/hankwang/dotfiles

Image 1

Image 2

[OSX] copy last command by pbcopy - 複製上一個指令到剪貼簿

例如測試一行command是不是正確的, 確認之後我想複製起來做筆記或是貼到別地方, 這時候就可以透過pbcopy達到快速複製的效果, 不用再用滑鼠去框。


$ ps -awx

把上一個指令複製到剪貼簿


$ echo "!!" | pbcopy

把上一個指令的最後一個參數複製到剪貼簿


$ echo "!$" | pbcopy

2013年6月2日星期日

[git] Syncing a fork - 同步原本repo的修改到fork出來的repo

加入新的遠端repo
取回遠端repo
合併repo到master
解決conflict的commits

列出目前的遠端repo

$ git remote -v 
origin https://github.com/user/repo.git (fetch)
origin https://github.com/user/repo.git (push)

加入一個新的遠端repo

$ git remote add upstream https://github.com/otheruser/repo.git

註: upstream 為加入的遠端repo名稱, 可以自取

查看新加入的遠端repo

$ git remote -v

origin https://github.com/user/repo.git (fetch)
origin https://github.com/user/repo.git (push)
upstream https://github.com/otheruser/repo.git (fetch)
upstream https://github.com/otheruser/repo.git (push)

取回新加入的遠端repo的所有分支(branches)

$ git fetch upstream

remote: Counting objects: 75, done.
remote: Compressing objects: 100% (53/53), done.
remote: Total 62 (delta 27), reused 44 (delta 9)
Unpacking objects: 100% (62/62), done.
From https://github.com/otheruser/repo
 * [new branch]      master     -> upstream/master

查看目前本機和遠端的所有分支(branches)

$ git branch -va

* master                  a422352 My local commit
  remotes/origin/HEAD     -> origin/master
  remotes/origin/master   a422352 My local commit
  remotes/upstream/master 5fdff0f Some upstream commit

合併upstream的master到目前repo的master

$ git merge upstream/master

Updating 34e91da..16c56ad
Fast-forward
README.md                 |    5 +++--
1 file changed, 3 insertions(+), 2 deletions(-)

如果merge時遇到conflict, 例如README.md conflict

$ git status

# You have unmerged paths.
#   (fix conflicts and run "git commit")
#
# Changes to be committed:
#
#   new file:   run.sh
#
# Unmerged paths:
#   (use "git add <file>..." to mark resolution)
#
#   both modified:      README.md

編輯README.md處理conflict的地方後, 重新commit

$ git add README.md
$ git rebase --continue

Hank to hanker - Learning Note

網頁