require+Backbone initial project

最近用requirejs用的很頻繁,因此把平常開發的架構拉出來成一個project template, 若以後要開發就只要fork出來,或者是move a repo

由於require.js 的架構很容易擴充,因此非常適合模組化的開發,模組化的開發優點就是可大可小, 對於程式的相依關係也可以處理的很清楚, 非常建議在開發初期就導入模組化的開發方式。要接手或者維護都可以很快速的轉換。

分享一下我自己的開發流程:

1. clone initialProject


  $  git clone git@github.com:blackbing/initialProject.git
  
2. change to your repository

  $  git remote set-url origin [Your git repo url]
  
3. watch coffee

  $ ./compileScript.sh
  
4. Run Server(optional) 直接run一個http server作為開發用。若你自己有開發環境可以跳過。

  $ ./runSimpleServer.sh
  
5. main.coffee main.coffee是程式的進入點,可以作為開發的起點。所以就可以透過require來做模組化的導入。 例如:main.coffee
6. Build 模組化開發的最重要的事情就是要能夠將程式打包,不然分散的檔案並沒有好處。 打包的部分交給r.js,因此只要設定好相依性, build.js,並執行

  $ ./build.sh
  
即可。

最後附上一個範例專案photoPicker, 就是一個用此架構開發的一個小專案,若有不清楚的部分可以對照看,程式碼並不重要, 重要的是架構本身非常好彈性地開發。

bye bye wordpress and Hello Jekyll

Migration wordpress to Jekyll

用了Wordpress幾年了,最初的動機是不喜歡外面的blog server綁手綁腳,限制一堆, 要什麼沒什麼,於是就自己架自己的wordpress, 另外一個原因也是想要練習管理server,熟悉一下各種設定。 而中間隨著一些時間的演進也搬了好幾次主機,基本上對於這些可以做自定義的功能也還算滿意。

但隨著年紀的增長也越來越懶,越來越不想要再做這麼多客制化, 看到大家紛紛都改用Jekyll, 並且直接host在github pages上, 讓我蠻心動的。 不過之前一直沒有花時間去搞懂這個東西,也因為這樣,讓我更懶得寫文章, 因為一直想說要換掉wordpress,所以懶得寫在wordpress上面。 每次想寫點東西一開啓wordpress就又放棄了,真的是很懶。

最近終於花點時間研究了一下,並且成功的轉換過來了,關於網址之類的部分就之後再慢慢轉換吧。 Migrate的部分我要求不多,因此只有參考BLog Migrations作轉換,網址什麼的就不管了, 我想反正以後放在免費的server上也是我主要的考量。

參考資料:

Charles Web Debugging Proxy

Charles Web Debugging Proxy是個非常好用的debugging tool,我很常用的功能是Map-LocalMap-Remote,以及監看Http的request/response。甚至修改request or response的內容,這在debug上非常的有用,也能很快釐清到底是哪一層的問題。不過我一直以為他只能run在某個系統上,所以我在每個VM上都要安裝一次Charles,結果強者我同事看到說不用這麼麻煩,只要指定proxy就什麼都解決了,所以你只要在Local安裝好,每個VM裡頭指定好Proxy,就可以錄到所有的request/response,尤其是在debug IE,因為IE6/7/8沒有Net 監控,所以用Charles可以幫忙除錯,非常好用,特此記錄一下。

 安裝好Charles之後,首先確認Proxy Setting:

接著指定好你的Charles要run的port,預設為8888

進到你的VM,我這裡Demo的是windows XP IE8,打開網際網路設定->區域網路設定

填入你Local的ip位址,以及Charles設定的port

按下確定,Refresh 瀏覽器,成功,你可以看到Charles開始抓到所有的request了。

更酷的是,你可以設break point,在你想check的request上按右鍵 -> Breakpoints

再Refresh 瀏覽器,你會發現Charles在你剛剛設為中斷的request停住了

接著看右邊,你可以修改request,修改完按Execute

接著出現Response,中斷,你可以修改reponse的任何內容,包括header

我修改了response ,加上一個alert(‘charles!!!’)

再refresh 瀏覽器,成功修改response,跳出alert視窗。

這樣Debug多方便,Charles真是太優秀了,記得要購買一下支持喔,另外也感謝PC TAO無私的分享。


more anchor

Older Archive

  1. logger.js for switching production and development

  2. 國四無雙之下台一鞠躬

  3. Download FB album (for high resolution pictures)

  4. 批量AJAX query 系統(友邁科技定址程式)

  5. 繼續保持又笨又餓

  6. 那些年,回到過去特效文字

  7. 俄羅斯方塊with Canvas

  8. javascript UTF-8 繁體中文筆劃排序 解決之道

  9. Auto play in Facebook Theater Mode

  10. 情人節APP

  11. CSS3 font

  12. Google plus: Social Network in My View

  13. Resize picture before submitting form

  14. block subtitle(Chrome Extension)

  15. window.open and print problem in Evil IE

  16. Tetris Game(javascript 俄羅斯方塊)

  17. 淺談 MySql geom

  18. 利用Chrome Extension創造所見即所得的管理工具

  19. LazyPhotosOrganizer

  20. Download Facebook album's photos

  21. 匿名函式(Anonymous Function)

  22. nodejs intro

  23. Disable Facebook Theater Mode

  24. Google Spreadsheet Gantt Chart

  25. Browser version detect

  26. HTML5 Placeholder type="password" jQuery Plugin - Final Solution

  27. IE bug 情報

  28. How to Build Complicated Web Application by Using AJAX

  29. commonJS and RingoJS

  30. kml color format note

  31. Test Auto Posting to Facebook

  32. 不是CSS的錯

  33. javascript Talk

  34. python Django install notes

  35. O3D Intro

  36. jQuery clone object plugin

  37. Closure Template

  38. 2009 Hackday- Urbar

  39. Javascript Debug

  40. What is "this" in Javascript(上)

  41. ie6 Memory Leak的解決方式

  42. UrMap、GMap、YMap電子地圖圖示比一比

  43. Stay Hungry, Stay Foolish

  44. jQuery element.toggle的陷阱

  45. Google Maps API v3 Announced

  46. jQuery plugin 收集

  47. Javascript in IE Mobile 6.0

  48. Flash 移動特效

  49. 取得目前的Time stamp,以及「+」運算符的特性

  50. 取得script的Root路徑

  51. UrMap 地圖一指通 DEMO

  52. 線上排版工具

  53. 使用jQuery來批次下載

  54. (偽)IE8加速器

  55. safari4 bug?

  56. MySQL Workbench(mySQL 資料關聯圖)

  57. 動態載入Javascript

  58. IE8 features preview

  59. 地址與SEO

  60. 撰寫javascript的規範 (Code Conventions for the JavaScript Programming Language)

  61. 隨需載入UrMap (include on demand)

  62. Javascript 型態

  63. 我人生的第一雙慢跑鞋

  64. Javascript練功房(序)

  65. URMAP API 2.0 推出

  66. 最近~爆肝~

  67. UrMaPainter beta 你的地圖小畫家

  68. Javascript parseInt的奇怪現象

  69. 書店和連鎖飲料店的完美結合

  70. jQuery & -1072896658錯誤

  71. 網頁開發工具(Web developing Tool)

  72. (筆記)從 HTTP Request Header 取得行動裝置的 Profile

  73. (筆記)撰寫jQuery的工具

  74. 我不喜歡預設的marker mouseover的style,可以改嗎?

  75. (筆記)安裝phplist

  76. jQuery-眼力測驗

  77. Firefox下自動斷行的究級解決方案

  78. 迷上jQuery

  79. 打拼

  80. new Object() vs {} and new Array() vs [] 效能比較