聚會時間公告: 因應COSCUP 2011, Kalug 8月份休會一次

三月 11, 2014

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» Ruby Compass and Sass Auto Testing Environment

Compass Home   Compass Documentation

Compass 是一套 CSS Authoring Framework,也是基於 Sass 語法的一套 Framework,先前寫了 GulpCompass Plugin,在針對自動化測試時候出現版本相依性不同,造成無法自動測試成功。自動化測試目前跟 Github 最常搭配的就是 Travis CI 或者是 Codeship,當然如果非 Open source 專案可能就要自己架設 CI 伺服器,個人推薦就是 Jenkins。這次遇到的問題其實跟 Ruby Gem 版本相依性有關,由於要測試 Compass 所有 Command 語法,所以使用了 Susy + sass + compass,如果在 .travis.yml 內直接寫

language: node_js
node_js:
    - "0.10"
before_install:
    - gem update --system
    - gem install sass
    - gem install compass
    - gem install susy
    - gem install modular-scale

這樣編譯出來的結果會噴底下錯誤訊息

/home/rof/.rvm/rubies/ruby-1.9.3-p327/lib/ruby/site_ruby/1.9.1/rubygems/core_ext/kernel_require.rb:55:in `require’: cannot load such file — sass/script/node (LoadError) from /home/rof/.rvm/rubies/ruby-1.9.3-p327/lib/ruby/site_ruby/1.9.1/rubygems/core_ext/kernel_require.rb:55:in `require’ from /home/rof/.rvm/gems/ruby-1.9.3-p327/gems/compass-0.12.2/lib/compass/sass_extensions/monkey_patches/browser_support.rb:1:in `‘ from /home/rof/.rvm/rubies/ruby-1.9.3-p327/lib/ruby/site_ruby/1.9.1/rubygems/core_ext/kernel_require.rb:55:in `require’

會造成這樣的原因就是目前 sass、compass、susy 都不能安裝最新版本。Compass 目前版本是 0.12.3 只有支援 Sass 3.2.14 版本,但是 Sass 前幾天剛推出 3.3.1 版本,另外 Susy 也是一樣問題,由於 Susy 推出 2.0.0 版本需要 Sass 3.3.0 版本以上才可以使用,所以針對 Compass 變成只能指定版本測試,否則會得到上述錯誤訊息,請將 .travis.yml 修正為

language: node_js
node_js:
    - "0.10"
before_install:
    - gem update --system
    - gem install sass --version 3.2.14
    - gem install compass --version 0.12.3
    - gem install susy --version 1.0.9
    - gem install modular-scale

這樣就可以正常跑出測試結果。

一月 3, 2014

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» 前端工程師必看: 十大 CSS 技巧

css3

2014 年第一篇文章來寫前端工程師必須要瞭解的 [CSS] 技巧,此篇其實來自於 KidsIL Blog 內的一篇 10 Great CSS Tips for every Web Developer,裡面作者紀錄了十大 CSS 技巧,看完這十大後,發現有些技巧曾經出現在 Even Wu 給網頁設計師的建議一文,這些技巧都算是蠻基本的,對於前端工程師有很大的幫助,如果尚未瞭解或還沒開始使用的開發者,也可以建議團隊開始使用。底下內容來自於原網站,在加上筆者的一些補充。

用 firebug 或 console 來除錯

Firefox 還沒有推出 Developer Tools 時,大家一定是用 Firebug 來除錯,2006 年 Firebug 第一版 release 出來,讓 web 開發者可以更快速的瞭解網站除錯,也可以透過 Firebug 來瞭解網站的 performance。但是現今,Firefox 推出了自家 Developer Tools,而 Chrome 也是有很多好用的 Tool tips 及強大的 Workspace,對 Workspace 不熟悉的,可以參考之前我寫的一篇: Coding on workspace of Chrome Developer tools

Float or Inline-Block css

先來看看範例1,中間有三個 column,分別用 float: left 方式來排列

<div class="wrapper">
    <div class="column">test</div>
    <div class="column">test</div>
    <div class="column">test</div>
</div>

CSS 寫法:

.wrapper {
    width: 400px;
    min-height: 50px;
    background-color: red;
}

.column {
    float: left;
    width: 100px;
    height: 100px;
    background-color: blue;
    margin-left: 20px;
}

會發現背景紅色 .wrapper 區塊被砍了一半,原因就是沒使用 clear: both,正確解法請看範例2,如果不是用此解法,也可以將 float 取代成 display: inline-block,解法請看範例3。上述兩種解法是最常見的,終極解法可以透過 pseudo-class :after 來解決此問題,晚點會提到此解法

用 CSS animation 取代 Javascript

原文作者寫了一篇 CSS3 Transitions to replace JavaScript animations 文章,就是要告訴前端工程師盡可能將原本使用的 jQuery animation 取代成 CSS 作法,原因在於 CSS animation 的效能遠大於 JavaScript Native Language 效能,請參考 http://www.cssanimate.com/ 網站。

Form 表單請使用 Label input

上面的例子,只要點選 NameEmail 會發現瀏覽器游標自然會移動到 text input 欄位上,設定方式很簡單,只要將 labelfor attribute 設定為 input id 即可

<label for="username">Name:</label><input type="text" id="username" />
<label for="email">Email:</label><input type="text" id="email" />

Performance: Spiriting everything

每個網站一定會有很多小 icon 圖,不管是直接使用在 html 或者是寫在 CSS 內,在網路傳輸的時候,如果 10 張 icon 就會建立 10 條 connection,然而 css_spite 就是解決了此問題,將所有的小圖集結成一張大圖,透過 css 設定來減少網路連線數,網路上很多工具來達成此目的,像是 CSS Sprite Generator,如果熟悉 Compass 工具,可以直接使用 Spriting with Compass

.my-icons-sprite,
.my-icons-delete,
.my-icons-edit,
.my-icons-new,
.my-icons-save   { background: url('/images/my-icons-s34fe0604ab.png') no-repeat; }

.my-icons-delete { background-position: 0 0; }
.my-icons-edit   { background-position: 0 -32px; }
.my-icons-new    { background-position: 0 -64px; }
.my-icons-save   { background-position: 0 -96px; }

不修改 image width & height attribute

這點其實蠻重要的,現在網站架構的瓶頸,說實在的 80% 以上都是在讀取圖檔,有時候 UI 設計師切出一張大圖,前端工程師拿去使用,結果圖檔很大,工程師就直接透過 css width height 修改圖片大小,這樣看起來是沒問題,但是網站就開始很慢,使用者開始不爽,網站自然就不會有人繼續用。正確方式就是將 image resize 成各種版本,可以直接參考這篇 Tools for image optimization

使用 max width and height 來調整 image 比例

這招其實還蠻好用的,我們先來看看例子

我們看到這張圖本來的比例大小為寬 228 高 320,但是經過底下 CSS 語法

img {
    width: 228px;
    height: 228px;
}

圖片就變成上述的例子,但是如果我們把 CSS 改成底下呢

img {
    max-width: 228px;
    max-height: 228px;
}

出來的結果就是

css3

善用 :before and :after

在前面有提到 float: left 後要加上一個 element clear: both 現在我們可以透過 :after 來解決這問題

.wrapper:after {
    content: ' ';
    clear:both;
    display:block;
}

減少 CSS 程式碼

這部份就是減少不必要的程式碼

.class {
    margin-top:5px;
    margin-right:10px;
    margin-bottom:15px;
    margin-left:20px;
}

可以寫成

.class {
    margin:5px 10px 15px 20px;
}

CSS color 部份 #RRGGBB 可以寫成 #RGB

SASS or Compass

團隊內尚未使用 SASSCompass 嗎?個人建議儘快導入這兩套工具,還不熟悉這兩套工具,建議將底下投影片看完

十二月 29, 2013

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» The streaming build system Gulp

gulp

看到 Yeoman 作者之一 Addy Osmani 開始 review Gulp build system,由於 Yeoman framework 跟 GruntJS 是很緊密結合的,但是 GruntJS 套件愈來愈多,漸漸的執行 GruntJS 後,開始吃了系統 CPU 及記憶體,這對於開發環境而言,會是一大負擔阿,大家不知道有無發現,跑 Nodejs GruntJS 時,每當存檔的時候,CPU 就開始哀嚎了,我自己是有這方面的體會,加上團隊內並不是每位同仁的電腦都是很 powerful,原本是好意讓團隊開發更遵守 coding style 及統一開發環境,但是 Grunt 的肥大,讓整個 Client 環境 Loading 飆高。所以 Yeoman 看到了 Gulp。也有考慮如何將 Gulp 整合到 Yeoman 專案。

Gulp 簡介

大家可以把 Gulp 跟 Grunt 用途想成一樣,只是處理 Task 的原理不相同。Grunt 是透過 Task 的概念下去實作,JS 程式存檔後,Grunt 會依序處理使用者定義的 task,例如執行 jslint task 接著 uglify task,最後將檔案搬到您想的目錄。而 Gulp 則是平行處理,假設有5個 js 檔案,Gulp 則是透過 pipeline 方式處理檔案,所以 Gulp 會加速處理結果。

Grunt 原理:

Grunt jslint task -> Grunt uglify task -> Grunt copy task
  ---處理5個檔案--- ->  ---處理5個檔案---   -> ---處理5個檔案---

Gulp 原理

Grunt jslint task -> Grunt uglify task -> Grunt copy task
  ---處理檔案(1)--- ->  ---處理檔案(1)---  -> ---處理檔案(1)---
  ---處理檔案(2)--- ->  ---處理檔案(2)---  -> ---處理檔案(2)---
  ---處理檔案(3)--- ->  ---處理檔案(3)---  -> ---處理檔案(3)---
  ---處理檔案(4)--- ->  ---處理檔案(4)---  -> ---處理檔案(4)---
  ---處理檔案(5)--- ->  ---處理檔案(5)---  -> ---處理檔案(5)---

Gulp 用法

我們假設寫 Coffeescript 程式,通常寫完會經過 coffeelint 檢查 coffee script 的 Coding style 語法,最後才透過 coffee command 轉換成 javascript 檔案。

在 Grunt 套件,我們會這樣寫

coffeelint:
    options:
        'force': true
        'no_trailing_whitespace':
            'level': 'error'
        'max_line_length':
            'level': 'ignore'
        'indentation':
            'value': 4
            'level': 'error'
    dev: ['**/*.coffee', '!**/node_modules/**', '!**/vendor/**']
watch:
    coffee:
        files: ['**/*.coffee', '!**/node_modules/**', '!**/vendor/**'],
        tasks: ['coffeelint']

如果是用 Gulp 寫法會非常簡單

gulp.task('coffee', function() {
    gulp.src('app/assets/coffeescript/**/*.coffee')
        .pipe(coffeelint({"indentation": {
            "name": "indentation",
            "value": 4,
            "level": "error"
        }}))
        .pipe(coffeelint.reporter())
        .pipe(coffee({bare: true}))
        .pipe(gulp.dest('app/assets/js/'))
        .pipe(refresh(server));
});

有沒有變得很容易閱讀?設定方式也變得很容易,執行速度更不用說了,不會吃太多記憶體及 CPU 了,但是我覺得要取代 Grunt 實在很困難,Grunt 能處理大部分的事情,包含 Deploy 及驗證等等,我覺得 Gulp 就專門用在 RD 開發環境的建置,RD 平時會用到哪些套件?CoffscriptCompass or sasslivereloadwatch event,大致上這些就已經很足夠了。

由於沒找到 Compass Gulp plugin,只看到 sass plugin,所以我寫了簡易的 Gulp plugin,有用 compass 務必安裝

$ npm install gulp-compass --save-dev

使用方式可以參考 Readme

十月 17, 2013

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» Drone.io 搭配 Ruby 環境測試

相信現在 Git 已經是大家共通的版本控制工具,每當專案有新的 commit,我們可以透過 Travis 來幫忙做測試,但是 Travis 真的只有支援測試而已,如果測試成功想要進一步 Deploy 到任何機器或者是繼續做任何動作,這些都不支援的,那國外有些 Service 可以整合 GithubBitbucket Project 幫忙做到自動測試及 Deploy,比較常見的就是 Codeship,這服務非常強大,整合了 HerokuApp EngineNodejitsu .. 等服務,Deploy 也支援 Fabric, Puppet, Shell script 等等,這家的收費是看每個月做了多少次編譯測試動作,最便宜的方案每個月 $9 美金,只能編譯 50 次。

這時候就要找看看有沒有窮人編譯 + Deploy 的服務,看到網路上也有人推薦 Drone.io 服務,雖然沒有像 Codeship 支援這麼強大,但是最基本的功能還是有啦,最主要免費專案是 Unlimited Builds,看到這個就超爽了,主要收費來源就是看你的專案是不是 Private,如果都是開放原始碼,就可以持續使用免費服務,此網站一樣支援 Github 或 Bitbucket 專案導入,另外也支援 SSH Deploy,Heroku,AppEngine 等。

Drone.io Ruby 編譯環境是透過 rbenv 來管理,如果安裝了任何 Ruby 工具,像是 Compass 等,要使用 Compass command 就必須加上底下指令

$ gem install compass
$ rbenv rehash

其實這還蠻不方便的,因為同樣的測試環境,在 Travis 是可以編譯成功的,由於現在專案內會用到大量工具,像是 CoffeeScriptCompassHandlebars 等,所以這些工具產生的 js, css, *.handlebars 檔案,都不應該放到專案裡面,而是在開發專案的時候,自動幫忙產生,可以透過 GruntJS 工具來整合。整合方式可以參考 2013 Javascript Conference: 你不可不知的前端開發工具

可以參考編譯的過程,如果編譯過程有點多,會造成 Browser 有點小當,所以建議還是關掉,等跑完,不管成功或失敗,都是寄信通知,如果成功就會繼續跑 Deploy 流程。

五月 25, 2013

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» 高雄 KSDG 分享: 打造團隊共同開發環境

gruntlogogruntlogo

很高興受到高雄 KSDG 邀請,分享上禮拜在 JSDC 所介紹主題: 你不可不知的前端開發工具,在 JSDC 現場只有半小時可以講,這次在高雄有一個半小時可以講,如果想詳細了解前端工具,可以參考上禮拜的投影片,底下是在高雄軟體科技園區所分享。謝謝 Eric Bi 及工作人員可以讓我分享這次議題。

最後附上 Github 專案,歡迎大家 fork。

五月 19, 2013

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» 2013 Javascript Conference: 你不可不知的前端開發工具

JSDC 2013JSDC 2013

台灣第 2 屆 JavaScript 研討會在 5/18, 5/19 登場,今年報到率到 95% 了,我也給了一場 Talk,關於前端工具介紹,包含 CoffeeScript, Compass, Livereload, Bower Package Manager .. 等,最後介紹主軸 Grunt.js 來整合這些工具。

最後附上 Github 專案,歡迎大家 fork。

九月 13, 2012

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» CSS layout 好幫手 Compass scss version of normalize.css

我相信網頁程式設計師都知道,網站一開始必須先使用 CSS Rest 將所有的 browser layout 初始化,這樣可以讓以後 CSS debug 速度增加,也解決了很多跨瀏覽器的問題,昨天使用 Compass-h5bp 來自動產生 html5 template,但是發現版本並非是 html5 boilerplate 所提供的 V4.0.0 版本,專案裡面的 Normalize.css 也是舊版的,雖然有其他開發者提交 pull request,但是作者似乎還沒 merge 到主分支,只是我好奇這個 tool 除了幫忙產生 html5 boilerplate,另外多了 Compass 檔案,讓寫 Compass 前端工程師更加方便,由於 Normalize.css 還沒更新,所以我 fork 了 normalize.css 專案,並且將 v2.0.1(IE 8+, Firefox 4+, Safari 5+, Opera, Chrome) 跟 v1.0.1 (Includes legacy browser support) 整合在同一支 scss 檔案,歡迎大家取用。

如果要支援 IE6/7 的話,請將 $legacy_browser_support 設定為 true 即可。檔案可以由底下專案取得

SCSS version of normalize.css

Related View

十一月 11, 2011

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» Sass language 和 Compass 教學投影片

Compass Home   Compass Documentation

Speakerdeck 發現一篇不錯的 SassCompass 投影片教學 Sass & Compass: The future of stylesheets now.,此教學把 Sass Language 以及 Compass 基礎撰寫方式及進階用法都介紹完畢了,非常實用,推薦給剛入門的網頁設計師,這樣一來可以減少開發時間,二來可以解決討厭的跨瀏覽器問題。

Related View

十月 13, 2011

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» 在 CentOS 上面安裝 Ruby 環境

centos

目前開發網站都傾向於用 Compass 這套 CSS Framework 來 develop,開發之前必須把環境先弄好,就是要有 Ruby 套件才可以安裝 Compass,網路上的教學幾乎都在是 Ubuntu 底下用 apt-get 方式來安裝,其實相當方便,但是 FedoraCentOS 就是要用 yum 方式來安裝,這次碰到 CentOS 竟然 yum search git 出來的結果是空的,所以決定全部都透過 tar 的方式來安裝全部套件了。由於 Fedora 幾乎都可以找到套件,但是碰到 rubygems 需要用到 ruby 1.8.7 以上版本,所以還是乖乖的用 tar 方式吧。

大家可以試試看透過底下 yum 方式安裝:

yum install -y ruby ruby-devel rubygems

雖然 Fedora 透過上面可以安裝成功,可是 ruby 跟 rubygems 的版本根本是…太舊了吧 …

安裝 git

yum 方式:

yum install git

利用 tar 方式,先到 git download 專區 找到 1.7.7 版本

$ yum install curl-devel
$ wget http://git-core.googlecode.com/files/git-1.7.7.tar.gz
$ tar -zxvf git-1.7.7.tar.gz && cd git-1.7.7
$ ./configure
$ make && make install

安裝 Ruby

透過 yum 安裝好的 Ruby 版本太舊,乾脆直接衝最新版

$ wget ftp://ftp.ruby-lang.org//pub/ruby/1.9/ruby-1.9.2-p0.tar.gz
$ tar -zxvf ruby-1.9.2-p0.tar.gz
$ cd ruby-1.9.2-p0
$ ./configure
$ make && make install

安裝好打入 ruby -v 你會發現還是舊的版本,那是因為新版裝在 /usr/local/bin 底下,而 yum 方式安裝的會在 /usr/bin 底下,所以改變一下 $PATH 變數順序即可

$ export PATH=/usr/local/bin:$PATH
$ ruby -v
ruby 1.9.2p0 (2010-08-18 revision 29036) [x86_64-linux]

安裝 RubyGems

一樣到 RubyGems 下載最新版本

$ wget http://production.cf.rubygems.org/rubygems/rubygems-1.8.10.tgz
$ unzip rubygems-1.8.10.tgz
$ tar -zxvf rubygems-1.8.10.tgz
$ cd rubygems-1.8.10
$ ruby setup.rb

接著可以透過 gem 來安裝 Compass。Windows 請參考之前寫的 在 Windows 底下安裝 Compass CSS Authoring Framework

參考文章:
在CentOS 5上安裝Git

Related View

十月 5, 2011

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» 在 Windows 底下安裝 Compass CSS Authoring Framework

Compass Home   Compass Documentation

Compass 是一套 base on Sass Language 的一套 CSS Framework,它提供了豐富的 CSS3 原件,讓您可以加速開發 CSS,也繼承 Sass Language 的開發方式,支援 variables, mixins, selector inheritance…等,今天就來介紹如何在 Windows 底下快速安裝開發環境。如果想更瞭解 Sass 可以參考之前的文章: 加速開發 CSS 工具: Sass

安裝步驟 (Install Compass)

在安裝 Compass 之前,您必須要先安裝 Ruby 開發環境,在 Ubuntu 或 Debian 底下可以透過 apt 的方式安裝:

$ sudo apt-get install ruby1.9.1-full

如果你想裝 ruby 1.8 可以透過底下:

$ sudo apt-get install ruby-full

在 Windows 底下安裝 Ruby

其實在 Ruby 下載官網有製作好懶人包了,我們只要下載 RubyInstaller 網站別人包好的執行檔即可。首先到 RubyInstaller Download Page 選擇 Ruby 1.9.2-p290,下載之後直接執行,然後很簡單直接下一步按到最後,整個 Ruby 環境就建立好了。

透過 Ruby gem 安裝 Compass

安裝好上述執行檔,你會發現在 C 槽多了 C:\Ruby192,接著我們按開始->執行->打入 cmd->Enter,會跳出一個命令列視窗,接著我們利用底下步驟來安裝 compass:

# 切換到 ruby 執行目錄
cd c:\\ruby192\bin
# 先更新 gem (類似 apt-get update)
gem update --system
# 安裝 compass 套件
gem install compass

這樣直接在原來目錄下底下指令: compass -h 就可以看到底下畫面,這樣 Windows 底下大致完成了

compass_windows

大家一定會覺得每次都要切換到 C:\Ruby192 才可以執行 compass,大家可以把 C:\Ruby192 加入到個人 PATH 裡面,只要到環境變數里面設定即可,請參考下圖

compass_windows2

Related View

support:

biggo.com.tw

biggo.sg

A Django site.