<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>CoffeeScript on 小惡魔 - AppleBOY</title><link>https://blog.wu-boy.com/tags/coffeescript/</link><description>Recent content in CoffeeScript on 小惡魔 - AppleBOY</description><generator>Hugo</generator><language>en-us</language><managingEditor>appleboy.tw@gmail.com (Appleboy)</managingEditor><webMaster>appleboy.tw@gmail.com (Appleboy)</webMaster><lastBuildDate>Wed, 11 Jun 2014 03:42:00 +0000</lastBuildDate><atom:link href="https://blog.wu-boy.com/tags/coffeescript/feed.xml" rel="self" type="application/rss+xml"/><item><title>安全使用 JavaScript Global Variables</title><link>https://blog.wu-boy.com/2014/06/safely-reference-javascript-global-variables/</link><pubDate>Wed, 11 Jun 2014 03:42:00 +0000</pubDate><author>appleboy.tw@gmail.com (Appleboy)</author><guid>https://blog.wu-boy.com/2014/06/safely-reference-javascript-global-variables/</guid><description>&lt;p&gt;剛開始學習 &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript"&gt;JavaScript&lt;/a&gt; 時候，一定會大量使用 Global Variables。但是使用 Global Variables 的同時，請務必使用 &lt;code&gt;var&lt;/code&gt; 宣告，而不是直接使用阿，否則會常常遇到 &lt;code&gt;ReferenceError&lt;/code&gt; 的錯誤。&lt;/p&gt;
&lt;div&gt;
 &lt;pre class="brush: jscript; title: ; notranslate" title=""&gt;function addToBlockList (item) {
 block_List.push(item);
}
&lt;p&gt;addToBlockList (&amp;ldquo;add 127.0.0.1&amp;rdquo;);&lt;/pre&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;p&gt;執行後你可以發現 console 噴出 &lt;code&gt;Uncaught ReferenceError: block_List is not defined&lt;/code&gt;，加上一個判斷試試看。程式碼改成底下&lt;/p&gt;
&lt;div&gt;
 &lt;pre class="brush: jscript; title: ; notranslate" title=""&gt;function addToBlockList (item) {
 if (block_list) {
 block_List.push(item);
 }
}
&lt;p&gt;addToBlockList (&amp;ldquo;add 127.0.0.1&amp;rdquo;);&lt;/pre&gt;&lt;/p&gt;
&lt;/div&gt;</description></item><item><title>The streaming build system Gulp</title><link>https://blog.wu-boy.com/2013/12/streaming-build-system-gulp/</link><pubDate>Sun, 29 Dec 2013 08:25:22 +0000</pubDate><author>appleboy.tw@gmail.com (Appleboy)</author><guid>https://blog.wu-boy.com/2013/12/streaming-build-system-gulp/</guid><description>&lt;div style="margin:0 auto; text-align:center"&gt;
 &lt;a href="https://www.flickr.com/photos/appleboy/11616755494/" title="gulp by appleboy46, on Flickr"&gt;&lt;img src="https://i0.wp.com/farm8.staticflickr.com/7354/11616755494_06ef5c0fa5.jpg?resize=197%2C388&amp;#038;ssl=1" alt="gulp" data-recalc-dims="1" /&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;p&gt;看到 &lt;a href="https://github.com/yeoman" target="_blank"&gt;Yeoman&lt;/a&gt; 作者之一 &lt;a href="https://github.com/addyosmani" target="_blank"&gt;Addy Osmani&lt;/a&gt; 開始 &lt;a href="https://github.com/yeoman/yeoman/issues/1232" target="_blank"&gt;review Gulp build system&lt;/a&gt;，由於 Yeoman framework 跟 &lt;a href="http://gruntjs.com/" target="_blank"&gt;GruntJS&lt;/a&gt; 是很緊密結合的，但是 GruntJS 套件愈來愈多，漸漸的執行 GruntJS 後，開始吃了系統 CPU 及記憶體，這對於開發環境而言，會是一大負擔阿，大家不知道有無發現，跑 &lt;a href="http://nodejs.org/"&gt;Nodejs&lt;/a&gt; GruntJS 時，每當存檔的時候，CPU 就開始哀嚎了，我自己是有這方面的體會，加上團隊內並不是每位同仁的電腦都是很 powerful，原本是好意讓團隊開發更遵守 coding style 及統一開發環境，但是 Grunt 的肥大，讓整個 Client 環境 Loading 飆高。所以 Yeoman 看到了 &lt;a href="https://github.com/gulpjs/gulp" target="_blank"&gt;Gulp&lt;/a&gt;。也有考慮如何將 Gulp 整合到 Yeoman 專案。&lt;/p&gt;</description></item><item><title>Drone.io 搭配 Ruby 環境測試</title><link>https://blog.wu-boy.com/2013/10/drone-io-with-runy-compass-setup/</link><pubDate>Thu, 17 Oct 2013 02:54:54 +0000</pubDate><author>appleboy.tw@gmail.com (Appleboy)</author><guid>https://blog.wu-boy.com/2013/10/drone-io-with-runy-compass-setup/</guid><description>&lt;p&gt;相信現在 &lt;a href="http://git-scm.com/" target="_blank"&gt;Git&lt;/a&gt; 已經是大家共通的版本控制工具，每當專案有新的 commit，我們可以透過 &lt;a href="https://travis-ci.org/" target="_blank"&gt;Travis&lt;/a&gt; 來幫忙做測試，但是 Travis 真的只有支援測試而已，如果測試成功想要進一步 Deploy 到任何機器或者是繼續做任何動作，這些都不支援的，那國外有些 Service 可以整合 &lt;a href="https://github.com/" target="_blank"&gt;Github&lt;/a&gt; 或 &lt;a href="https://bitbucket.org/" target="_blank"&gt;Bitbucket&lt;/a&gt; Project 幫忙做到自動測試及 Deploy，比較常見的就是 &lt;a href="https://www.codeship.io" target="_blank"&gt;Codeship&lt;/a&gt;，這服務非常強大，整合了 &lt;a href="https://www.heroku.com/" target="_blank"&gt;Heroku&lt;/a&gt;，&lt;a href="https://appengine.google.com/" target="_blank"&gt;App Engine&lt;/a&gt;，&lt;a href="https://www.nodejitsu.com/" target="_blank"&gt;Nodejitsu&lt;/a&gt; .. 等服務，Deploy 也支援 &lt;a href="https://github.com/fabric/fabric" target="_blank"&gt;Fabric&lt;/a&gt;, &lt;a href="http://puppetlabs.com/" target="_blank"&gt;Puppet&lt;/a&gt;, Shell script 等等，這家的收費是看每個月做了多少次編譯測試動作，最便宜的方案每個月 $9 美金，只能編譯 50 次。&lt;/p&gt;</description></item><item><title>高雄 KSDG 分享: 打造團隊共同開發環境</title><link>https://blog.wu-boy.com/2013/05/how-to-integrate-front-end-tools-via-gruntjs/</link><pubDate>Sat, 25 May 2013 13:28:21 +0000</pubDate><author>appleboy.tw@gmail.com (Appleboy)</author><guid>https://blog.wu-boy.com/2013/05/how-to-integrate-front-end-tools-via-gruntjs/</guid><description>&lt;div style="margin: 0 auto; text-align: center;"&gt;
 &lt;a title="gruntlogo by appleboy46, on Flickr" href="https://www.flickr.com/photos/appleboy/8591850168/"&gt;&lt;img alt="gruntlogo" src="https://i2.wp.com/farm9.staticflickr.com/8244/8591850168_ca0e125ffa_n.jpg?resize=200%2C200&amp;#038;ssl=1" data-recalc-dims="1" /&gt;&lt;/a&gt;
&lt;/div&gt; 很高興受到高雄 
&lt;p&gt;&lt;a href="https://www.facebook.com/groups/KSDGroup/" target="_blank"&gt;KSDG&lt;/a&gt; 邀請，分享上禮拜在 &lt;a href="http://jsdc.tw/2013/" target="_blank"&gt;JSDC&lt;/a&gt; 所介紹主題: &lt;a href="http://blog.wu-boy.com/2013/05/2013-javascript-conference-front-tool-grunt-js/" target="_blank"&gt;你不可不知的前端開發工具&lt;/a&gt;，在 JSDC 現場只有半小時可以講，這次在高雄有一個半小時可以講，如果想詳細了解前端工具，可以參考上禮拜的投影片，底下是在高雄軟體科技園區所分享。謝謝 &lt;a href="https://www.facebook.com/hsuani.bi" target="_blank"&gt;Eric Bi&lt;/a&gt; 及工作人員可以讓我分享這次議題。&lt;/p&gt;</description></item><item><title>2013 Javascript Conference: 你不可不知的前端開發工具</title><link>https://blog.wu-boy.com/2013/05/2013-javascript-conference-front-tool-grunt-js/</link><pubDate>Sun, 19 May 2013 05:56:03 +0000</pubDate><author>appleboy.tw@gmail.com (Appleboy)</author><guid>https://blog.wu-boy.com/2013/05/2013-javascript-conference-front-tool-grunt-js/</guid><description>&lt;div style="margin:0 auto; text-align:center"&gt;
 &lt;img src="https://i1.wp.com/farm6.staticflickr.com/5454/7238452668_82262e37dc_o.png?w=840&amp;#038;ssl=1" alt="JSDC 2013" data-recalc-dims="1" /&gt;
&lt;/div&gt;
&lt;p&gt;台灣第 2 屆 JavaScript 研討會在 5/18, 5/19 登場，今年報到率到 95% 了，我也給了一場 Talk，關於前端工具介紹，包含 &lt;a href="http://coffeescript.org/" target="_blank"&gt;CoffeeScript&lt;/a&gt;, &lt;a href="http://compass-style.org/" target="_blank"&gt;Compass&lt;/a&gt;, &lt;a href="http://livereload.com/" target="_blank"&gt;Livereload&lt;/a&gt;, &lt;a href="http://bower.io/" target="_blank"&gt;Bower&lt;/a&gt; Package Manager .. 等，最後介紹主軸 &lt;a href="http://gruntjs.com/" target="_blank"&gt;Grunt.js&lt;/a&gt; 來整合這些工具。&lt;/p&gt;</description></item><item><title>Backbone.js rewrite into CoffeeScript?</title><link>https://blog.wu-boy.com/2013/03/backbone-js-rewrite-into-coffeescript/</link><pubDate>Fri, 01 Mar 2013 13:56:59 +0000</pubDate><author>appleboy.tw@gmail.com (Appleboy)</author><guid>https://blog.wu-boy.com/2013/03/backbone-js-rewrite-into-coffeescript/</guid><description>&lt;div style="margin:0 auto; text-align:center"&gt;
 &lt;a href="https://www.flickr.com/photos/appleboy/7059615321/" title="backbone by appleboy46, on Flickr"&gt;&lt;img src="https://i1.wp.com/farm6.staticflickr.com/5338/7059615321_097833dea8.jpg?resize=451%2C80&amp;#038;ssl=1" alt="backbone" data-recalc-dims="1" /&gt;&lt;/a&gt;
&lt;/div&gt; 看到 
&lt;p&gt;&lt;a href="https://github.com/gsamokovarov" target="_blank"&gt;@gsamokovarov&lt;/a&gt; 提出將 &lt;a href="http://backbonejs.org/" target="_blank"&gt;Backbone.js&lt;/a&gt; 改寫成 &lt;a href="http://coffeescript.org/" target="_blank"&gt;CoffeeScript&lt;/a&gt; 架構的 &lt;a href="https://github.com/documentcloud/backbone/pull/2317" target="_blank"&gt;Pull request&lt;/a&gt;，結果官方團隊其中一位開發作者回應了一張圖，代表他的心情 XD，各位有興趣可以點上面連結看看，後來有其他人回應說，為什麼官方不用 CoffeeScript 來寫了，發此 Pull Request 的作者也有說，他只是將架構改成 CoffeeScript 讓大家參考看看而已，沒有真的希望可以納入整個 Backbone.js 專案，如果有其他開發者需要的話，一樣可以 fork 此&lt;a href="https://github.com/gsamokovarov/backbone.coffee" target="_blank"&gt;專案&lt;/a&gt;，說明文件也用 &lt;a href="http://jashkenas.github.com/docco/" target="_blank"&gt;docco&lt;/a&gt; 產生好了，可以參考此&lt;a href="http://gsamokovarov.github.com/backbone.coffee/" target="_blank"&gt;連結&lt;/a&gt;，官方作者也提到，大部份的第3方 Library 還是不會使用 CoffeeScript 來當作基底開發，畢竟並非所有人都知道 CoffeeScript，如果官方想這麼開發的話，早就再 2010 年丟釋出 Backbone.js 的時候就直接採用了，不會拖到現在還沒出來，當然最後官方也希望將此 pull request 寫到 wiki 裡面給大家參考，等待原作者補開發動機及細節。&lt;/p&gt;</description></item><item><title>在 git Commit 之前檢查 PHP 是否有錯誤</title><link>https://blog.wu-boy.com/2013/02/git-hooks-parse-php-error-before-commit/</link><pubDate>Fri, 08 Feb 2013 07:12:00 +0000</pubDate><author>appleboy.tw@gmail.com (Appleboy)</author><guid>https://blog.wu-boy.com/2013/02/git-hooks-parse-php-error-before-commit/</guid><description>&lt;div style="margin:0 auto; text-align:center"&gt;
 &lt;a href="https://www.flickr.com/photos/appleboy/8455538800/" title="Git-Logo-2Color by appleboy46, on Flickr"&gt;&lt;img src="https://i0.wp.com/farm9.staticflickr.com/8523/8455538800_30f65954f8.jpg?resize=500%2C209&amp;#038;ssl=1" alt="Git-Logo-2Color" data-recalc-dims="1" /&gt;&lt;/a&gt;
&lt;/div&gt; 在 commit code 之前，程式設計師必須確保程式碼的正確性，包含不要放入 debug message 到 
&lt;p&gt;&lt;a href="http://git-scm.com/" target="_blank"&gt;git&lt;/a&gt; server，寫了一個簡單的 pre-commit 程式，來確保 PHP 是否有 Parse error，或者是在寫 CoffeeScript 及 JavaScript 時，常常會用到 console.* 來當作中斷點或者是顯示變數資料，這也是需要盡量避免 commit 到伺服器，你可不想要長官 review 的時候看到這麼多 debug 訊息吧。這時候就是需要 &lt;a href="http://git-scm.com/book/en/Customizing-Git-Git-Hooks" target="_blank"&gt;git-hooks&lt;/a&gt; 的 &lt;strong&gt;&lt;span style="color:red"&gt;pre-commit&lt;/span&gt;&lt;/strong&gt; 幫忙檢查這些 Syntax 語法，可以直接參考&lt;a href="https://github.com/appleboy/git-hooks"&gt;我的 git-hooks 專案&lt;/a&gt;。安裝方式很簡單:&lt;/p&gt;
&lt;pre class="brush: bash; title: ; notranslate" title=""&gt;$ git clone https://github.com/appleboy/git-hooks.git
$ chmod +x bin/hooks.sh pre-commit
$ ./bin/hooks.sh your_project_path&lt;/pre&gt; 如果使用 git commit 之前，就會檢查 .js、.coffee、.php 等副檔名。</description></item><item><title>Node.js Version Management 多版本管理</title><link>https://blog.wu-boy.com/2011/11/node-version-management/</link><pubDate>Tue, 29 Nov 2011 05:37:19 +0000</pubDate><author>appleboy.tw@gmail.com (Appleboy)</author><guid>https://blog.wu-boy.com/2011/11/node-version-management/</guid><description>&lt;div style="margin: 0 auto;text-align:center"&gt;
 &lt;a href="https://www.flickr.com/photos/appleboy/6033708087/" title="nodejs-light by appleboy46, on Flickr"&gt;&lt;img src="https://i1.wp.com/farm7.static.flickr.com/6199/6033708087_ff1a02a337_o.jpg?resize=260%2C71&amp;#038;ssl=1" alt="nodejs-light" data-recalc-dims="1" /&gt;&lt;/a&gt;
&lt;/div&gt; 相信大家對於 
&lt;p&gt;&lt;a href="http://nodejs.org" target="_blank"&gt;Node.js&lt;/a&gt; 版本 Release 太快而感到困擾，每次新版出來，就要開始升級原本的版本，加上測試及修改，一定會浪費不少時間在上面，不管是任何語言我都希望能有一套 Version Management 來管理各版本之間的差異，以及讓使用者可以隨時切換版本來使用測試。那今天來介紹一套 &lt;a href="https://github.com/visionmedia/n" target="_blank"&gt;Node.js Version Management&lt;/a&gt;，這隻程式是用 shell script 下去撰寫，可以安裝多版本在 Linux 本機上面，隨時都可以切換不同版本測試。此作者也是 &lt;a href="http://expressjs" target="_blank"&gt;expressjs Framework&lt;/a&gt; 發起者。&lt;/p&gt;</description></item></channel></rss>