2013年10月29日 星期二

前端工作流程筆記

最近剛好在看一些前端工作流程 (Frontend Workflow) 的文章或是 slide,說到前端的工作流程,不外乎就是想要做到自動化,要『省時, 省力, 省麻煩...』,不過以我自己的認知,一個團隊,有人是負責 follow 這些流程的人,當然也有制定流程跟規則的人,不知道為什麼,以最近接觸 Grunt 的程度來說,我覺得一個團隊負責處理這些自動化流程的人真是挺不簡單,以 Grunt 來說,有這麼多 plugin,身為制定自動化流程的人,或許要很熟悉什麼套件做什麼事情,才會更適合某個專案使用。算了,其實我現在也沒到這個等級 ,這邊就不多談了xdd

以下是筆記的部分:
關於自動化工作流程,幾乎網路上的文章,都會提到 Bower, Grunt, Yeoman

Grunt 與 Bower

  • Bower 是 Twitter 開發的前端套件管理工具 (Frontend Package Manager)。
  • Bower 需要 node.js 環境以及 npm。
  • 安裝: npm install -g bower。
  • bower.json 可以先設定一些預設的相依性套件 ( bower 在 0.9.0 以前是使用 component.json , 0.9.0 之後使用 bower.json )
    (這個跟 npm install 時要用的 package.json 很像)。
  • 如果編輯完 bower.json 之後還有其他相依性套件 (dependencies) 要使用,可以重新下指令:bower install 或是使用 bower install packagename --save。
  • Grunt,一個可以處自動化工作流程的工具,如同 bower 一樣需要 node.js 環境以及使用 npm。
  • Gruntfile.js 通常會放在你的根目錄下。
  • 這時候我有點疑惑...,有點分不清楚 Grunt 跟  Bower 的差別,上網找了一下解答 

2013年10月28日 星期一

Sass 線上編輯器 : Sass meister

功能:
  • 線上編輯 Sass, SCSS
  • 使用如 Compass 等 Extension
  • 可 github 登入,可 Save Gist

像我昨天在寫 for 迴圈,只透過自己本機 watch 跟 compiler 效率很低,這種工具真的是太方便了。真是學習 Sass 的利器 :)


改變 yii 的 registerScriptFile/registerCoreScript 的檔案出現位置...

通常在 yii 載入其他 JavaScript 或是 CSS 檔案,都會用
Yii::app()->clientScript->registerCoreScript('jquery'); 
或是
Yii::app()->clientScript->registerScriptFile(Yii::app()->request->baseUrl.'/js/admin/bootstrap.min.js');

但是用這兩種方法載入 JavaScript 或是 CSS 的位置都很讓我頭疼...,完全插入在 <head>標籤之後。



這樣的安插位子有時候實在很讓人不解,因為這樣瀏覽器要 render 我的頁面的時候是這樣:

[快快樂樂學SASS系列] 四種 Sass 編譯後的風格(Output Style)

說明網址

Sass 編譯的風格總共有四種:

  • nested (預設的樣式) : 巢狀顯示
  • expanded : 不要巢狀
  • compact : 簡潔樣式,縮進成一行
  • compressed :壓縮模式
實測:

2013年10月26日 星期六

[快快樂樂學SASS系列] Sass v.s SCSS

這兩個名詞實在有夠饒舌,
Sass 跟 SCSS 對我來說只是寫法不同,
或許有些人習慣 css 寫法有 { } ,結尾有 ; 分號 ,
那麼你可能會喜歡用 SCSS。
簡單來說 SCSS 可以讓你直接使用 CSS 的寫法,
但附檔名是名是 .scss,也有人說這是 Sassy CSS。

如果要寫 Sass,要用縮排 ( indented syntax ) 表示,
我比較喜歡這種,我比較懶 :P,懶得一直補 { }... xd,
如果第一次寫 sass 要小心別踩到雷,可能需要練習,
( 結尾不能有 ; 分號,width:100% 編譯不會過,:後面要有一個空格,改成 width: 100%)
初學者可以選擇先從 SCSS 上手,
會用一些技巧之後轉用縮排的寫法,
也就是改用 Sass。

剛剛實驗了一下同樣的效果用 sass 跟 scss 寫的差別:
style.sass:
 $primary_color : #fff  
 $content_width : 980px  
 body  
   color : $primary_color  
   width : $content_width - 20px  
 a   
   color : $primary_color  

style.scss:
 $primary_color : #fff;  
 $content_width : 980px;  
 body{  
   color : $primary_color;  
   width : $content_width - 20px;  
 }  
 a{  
  color : $primary_color;  
 }  


不過編譯出來的結果都一樣:
 body {  
  color: white;  
  width: 960px;  
 }  
 a {  
  color: white;  
 }  

大概是這樣子,這種東西還真的不知道能寫什麼,真的是多寫才知道...
不過,這類的 CSS extension 實現了讓你用變數, 程式邏輯去控制 css 撰寫,的確是蠻有趣的。

雖然說當了一年多的前端現在才開始接觸這樣的 CSS extension,
不過不知道為什麼沒有相見恨晚的感覺,
我還是覺得手刻有手刻的好,
畢竟要在這些 CSS extension 大展身手也需要經過基本的手刻過程,
再者,依照團隊與個人的習慣而定 :)
如果什麼都想擁抱,只會讓自己辛苦。

[快快樂樂學SASS系列] Sass 開發環境設定 (搭配 Grunt)

  
(Grunt img source : http://gruntjs.com/img/grunt-logo.png)
(Sass img source :http://sass-lang.com/assets/img/logo-235e394c.png)

SASS 開發環境設定,搭配 Grunt 

SASS 需要 Ruby 才能編譯。
所以你一定要有 Ruby 的環境,若只裝 Grunt 是無法編譯的。
Grunt 只是 Task Runner,別誤會一定要用 Grunt...。
SASS 是 CSS 的 Extension Language,可以用比較靈活, 寫 SASS,最後透過 Grunt,幫你去處理編譯的工作 (猜測 Grunt 會請 ruby 編譯),最後產出 css 檔案。

當初選擇 Grunt 是考慮到整個開發方式最後也需要使用 Grunt 進行 css 壓縮等整合的功能,所以選擇 Grunt。對了,不是說一定要 Grunt 才能編譯 SASS,再次強調它只是幫你做事情的工具。
若你以透過 ruby 安裝 SASS :

  1. sudo gem install sass

你可以直接透過 command line 編譯 sass 產出 css 檔案:
  1. sass style.scss output_style.css

就先談到這裡,剩下的留到之後再講,SASS 太多人在用了,歡迎大家上網爬好文。


環境必需品 (我是 Mac)
每種作業系統有不同的裝法,可參考 http://sass-lang.com/install(你也可以選擇使用一些現有的 Application)。

  • 安裝 ruby  ( Mac本來就有 ruby的環境 )
  • 安裝 sass ( sudo gem install sass) 
  • 要有 node.js 環境並且安裝 NPM (node package manager)
    注意,如果你安裝的 Grunt 版本大於 0.4.x , 那你的 node.js 版本要高於 0.8.0
  • 安裝 Grunt
  • 註:
    • 檢測是否有ruby : ruby -v
    • 檢測使否有node: node -v
    • 檢測是否有裝 npm: npm -v 
    • 檢測使否有 grunt : grunt -V (大寫V)
    • 若以上帶 -v 有檢視版本訊息,應該不會有問題,至少我是這樣看的...。

編輯器語法變色設定



以一個網站的資料夾為例

這是我的網站目錄:
style.css 不會是我要編輯的 css 檔,style.sass 才是,我會讓 style.sass 編譯後去蓋掉 style.css 這個檔案。

 demo_web    
   |-index.html       
   |-style.css    
   |-style.sass
   |-README.md  


接著新增 package.json 以及 Gruntfile.js 這兩個檔案:
這兩個檔案我都寫得很基本,除了這個範例,也就是 sass 會用到的東西之外,也沒加入什麼其他的相依性套件了,通常,Gruntfile.js 會用到很多套件,像是 cssmin, uglify 等等,只是在這邊簡單化。

 demo_web    
   |-index.html       
   |-style.css    
   |-style.sass
   |-README.md     
   |-Gruntfile.js  
   |-package.json  

package.json:
package.json 的相依性除了要有 grunt 之外,也要包含 grunt 的 sass 的套件,也就是 grunt-contrib-sass
Gruntfile.js:

接著在 command line 到資料夾根目錄,以我來說是 /Users/win/Sites/demo_web。

接著下 npm install ,把會用到的相依性套件下載下來,接著就會產生 node_modules 目錄。

 npm install  

接著編輯我的 style.sass:
寫一些簡單的 sass
 $primary_color : #fff  
 body  
   color : $primary_color  
 a   
   color : $primary_color  

編輯完 sass 之後,下 Grunt 指令,就開始幫你工作了:)

Done, without errors,沒有任何編譯的 error 就會出現這句,接著再去看 style.css 編譯後的結果就可以了。


這是 before 跟 after 的結果:


實在挺方便的,接著就是好好看熟 SASS 怎麼用。
其實網路上的教學看一看,不難上手。


可以參考一些好文:




2013年10月23日 星期三

Jekyll 到 Semantic UI 三天完成公司 Blog

最近的 Task 就是完成公司的 blog 架設。
其實 blog 的部署方式非常多,現成的像是 Blogger, Wordpress, 自己架設的像是 Joomla 等等都是很好的選擇。

不過這次選擇使用  Jekyll ,Jekyll 可以讓你用 Markdown 的方式寫完文章,再幫你產生靜態的 HTML 頁面(最主要是因為公司也用 Markdown 寫內部技術文章),並且有很多現成的變數可以用,不論你是要取得 文章列表 , 上一篇, 下一篇, 等等...,其實以 Blog 的功能來說也已經夠用了。
(有機會再寫個 Jekyll 教學 :P,還蠻值得接觸看看的)


Jekyll 官網


使用 Jekyll ,需要 Ruby 的環境,以 Mac 來說,比較 friendly,之前曾經陪我朋友一起在 windows 安裝 Jekyll,發現困難重重,除了 ruby 之外,也需要裝一些 Python 的套件。

通常不會只需要 Jekyll ,你還會想要有現成的 Theme (畫面樣式), 可以考慮這套 jekyllbootstrap ,http://jekyllbootstrap.com/usage/jekyll-quick-start.html (不過他畫面改版了我不太會用....)。

用 Jekyll 的好處是沒有任何 Database 的事情需要處理,基本上都是靜態頁面,而且只需要用 Markdown 編輯。另外也可以 Host 到自己的 github,使用 github.io 專頁,部署自己的 Blog 。


像公司之前使用 jekyllbootstrap.com 的 Theme,用起來的 UI 大概是像這樣:
不過因為是內部文件,不方便公開內容。

以我的自己 host 在 github.io 的 blog 使用 jekyllbootstrap 來說,我有改過一些 css 樣式,部署起來像這樣:



不過,因為樣式很難脫離現在在線上找得到的 Theme ,我自己還蠻想要一些不太一樣的感覺,因此我才會想到用個 Semantic UI 來另外寫個 Theme 來套用。



Semantic UI
http://semantic-ui.com/


Semantic UI,我第一次用,有種相見恨晚的感覺,也許是之前太常用 bootstrap,突然換個口味,感覺不錯,如果你要問我他像什麼,其實就是另外一種前端 html/css Framework 的選擇,如果你的 team 或公司沒有特別找 UI 設計 blog 樣式,這些 framework 就很常被 developer 拿來使用。

接下來的工程就是整合 UI 到 jekyll build 出來的 theme , 大部份是搬移 css / js ,然後整頓一下畫面的 UI,麻煩的是整合,好看的 css 樣式就算不用這些 Framework 也能上網輕鬆找到現成的 html/css,只是整合很耗時間。


將 Theme 都設計好之後,Jekyll Build 出來的網站架構有些 Config 可以設定,把預設的 theme 切到自己做的 Theme 就大功告成了。在不影響架構之下的情況,這種做法有個好處就是既能保留最原始的 Theme,也能有一份自己開發的 Theme,當公司今天不想使用這個 Theme 的時候,也能透過切換 Theme ,變回原本的樣子。




這個是做完之後的成果,UniSharp Blog

我做好的 Theme 很容易辨識就是 Semantic(xdd)的 UI。左側的選單可以收合,這是 Semantic UI 本來就有的效果。


接著是文章內文的 layout,嵌入一些 social link/share 的功能,已經是 blog 的基本配備了。



文章還要有留言的功能,如果要使用 DISQUS 的話,只要去申請 account,取得 blog 的代碼,嵌入到自己的 blog 就可以了。



接著再調整一下再其他 device 上的樣子:
就差不多完成了80% (剩下的20%等 bug 出現就知道是什麼了xdd)





Hosting

當 blog 整個 layout 都整頓好之後,公司給了我一個 ubuntu 的空間去設定網站,是一個乾淨無暇的 linux 空間,也給我機會練練架設 apache 之類的服務,還蠻有趣的,等我弄好再把網址貼上來。

2013年10月16日 星期三

[AngularJS] ch01:Introduction to AngularJS 讀書筆記

書目資訊
* ch01 : Introduction to AngularJS
* 網址:AngularJS
[更新,文章有些error,可搭配errata觀看。]

說到 angularJS,身邊的朋友都已經 an 很久了,我現在正起步...,打算把英文原書慢慢看過,不想急著看...,到底會不會看完我也不能保證 :P。第一章內容還算客氣了,至少我還看得懂70%,而且只有 9 頁。可是講的觀念也夠多了。
希望大家能夠自己去發掘書中的內容跟表達的意思,畢竟這只是我的個人筆記(不是教學哦...只是筆記...),如果有錯誤就請糾正我唄!


第一章主要分成幾個部分
  • Concepts 概念 
  • MVC Pattern MVC架構
  • Data Binding  資料綁定
  • Dependency Injection(DI) 相依性注入
  • HTML Directives HTML的 (Attritube) 的擴充
  • 還有一個範例(Shopping Cart)


Concepts 概念
  • AngularJS 可以說是一個具有 MVC 架構的 Framework。
  • AngularJS 神奇的地方之處:
    • 可以不用透過 HTML 的 id 或是 class 去附加任何的事件。
    • 可以不用註冊事件也可以不用寫 callback。
  • 使用的觀念跟過去所學的 jQuery 不太一樣,以前 jQuery 所學的觀念都是從抓到 DOM 的觀念開始...,而 Angular 給我的感覺是縱觀整個 Web Application,以及資料的部分,不單單只有 DOM selector / 事件綁定等等。
  • Client-side Template 的觀念,個人覺得這裡要講的事情其實跟後面的 Data Binding 很像。

MVC架構

前面講到 MVC 最核心的精神就是 資料/試圖/控制器 ,分別處理資料 ( Model ); 頁面的邏輯 ( Controller ); 以及視圖 ( view )。

當要處理資料面時,controller 就會出來幫忙,做些回應,再跟 view 說,決定最後呈現給user的資料跟畫面。這樣子的 MVC 架構其實挺熟悉的,讓我想到 PHP Framework 像是 Codeigniter, Yii 好像也是差不多這樣子的運作方式。



然而,AngularJS 的 MVC 是這樣運作的:
對 AngularJS來說,View 的部分,就是指整個 DOM;
Controller 部分,指的是 JavaScript 的 Classes;
Model 部分,指的是 Object 的內容,key 跟 value 的對應。


圖片請看 docs.angularjs.org :


Data Binging 資料綁定
這個部分提到的事情還蠻妙的,想到過去 web 對於處理 HTML 顯示的部分,通常會是組字串的方式,不過我記得很久以前已經有一些 template engine 可以做到不用組字串的事情。

不過這也不重要了,在 AngularJS,將某個 UI(DOM) 綁在某個定義好的 JavaScript 屬性,就可以非同步的更新該 DOM 的內容,算了這裡有點難講,當我沒說好了...。

Angular 結合了 HTML template 的觀念,將結果組塞回去到該 HTML element,這也是他的特色之一,這種做法可以讓你的前端語言變個更純粹/乾淨。



Dependency Injection(DI) 相依性注入

參考網址:
http://docs.angularjs.org/guide/di
這個聽起來很抽象...
頁面上的 data binding 是透過 $scope 這個物件,來達到自動更新畫面的資料。
我們不用透過任何 function 去呼叫他,但有個唯一的要求是你一定要把 $scope 加到該
Constructor。但是,除了 $scope 之外,還有其他的,後面章節會介紹到。

Angular 的 dependency injection system,符合 Law of Demeter (低藕合) 的設計。


HTML Directives HTML的 (Attribute) 的擴充

使用 AngularJS 時你會在 HTML 元素加入很多他專屬的屬性 (Attribute),像是 ng- 為首的 Attribute。
Directives 是一個可以讓你擴充 html attribute 屬性及功能的特性。
Angular 已經有很多現成的 Attribute 可以使用,讓你定義你的 view 該如何呈現,但是這些 Attribute 不一定是 HTML spec 有的。
你也可以自己擴充 HTML template 的功能,做你想做的事。


最後的部分是個簡單的練習,有興趣可以翻書來看:P


  • ng-app 宣告 angular 可以控管的範圍。
  • ng-controller 設定某個 controller 可以控制的範圍 (資料綁定...等等)。
  • ng-repeat 在 ng-repeat 裡面的 Dom 會依資料的數量而重複呈現。
  • {{item.title}} 透過{{ }},angular 可以知道這裡要擺什麼資料,而且keep it in sync。
  • <input ng-model="item.quatity"> ng-model 綁定輸入跟呈現的值。
  • {{item.price | currency}}  這個 | (pipeline) 是做什麼的,後面章節應該會講到。


2013年10月15日 星期二

JavaScript 抓 ID 對上(v.s) jQuery 抓 ID

我以為,document.getElementById('AAA') 會跟 jQuery 的 selector 抓到一樣的東西,換句話說...我以為他們會指到一樣的東西,但是我錯了(慚愧,當了一年多的前端現在才懂...)。


這種事情發生在我在 maintain 原生 JavaScript 跟 jQuery 並存的 js 檔。
比方說我把原本的 $player 改成用 jQuery 的 selector:
 $player = document.getElementById('player');  
 $player = $('#player');  
但如果真的這樣改就毀了。


因為...
getElementById 抓到的是 HTML DOM Object;
jQuery 的 selector 抓到的是 jQuery Object

如果要把 jQuery 抓到的東西變成 HTML DOM Object,必須明確的指到該 jQuery Object 的第一個元素,像這樣:
 var $player = $('#player')[0];  


截一下 console.log 的比較:


不知道以上的解釋o不ok,
不過學習就這樣樣,答案就是找出來的,而我目前只找到這樣的解法,
如果錯誤還麻煩大大們幫忙指正:)



參考:
document.getElementById vs jQuery $()

利用 onerror 事件偵測圖片沒出現

JavaScript 有個事件叫做 onerror,是說我也是今天才知道,可以用在當你圖片沒抓到時,出現叉燒包及 server responded status 403,可以做一些事情。

通常在網路上爬到的範例,都是將 onerror 的事件偵測寫在行內,像下面這一行這樣,
以這個例子來說,當 demo.jpg 找不到時,就會去做寫在 onerror 裡面的事情,當然啦,假如有 demo.jpg,應該不會觸發 onerror 事件。
<img src="demo.jpg" onerror="alert('no image');"/>


那麼像我不習慣把事件綁在 HTML tag 上,
所以用 jQuery 的事件綁定 (bind) 來做:
當抓到 error 時,把該 img 標籤的 src 取代成預設的圖片。

有趣的是,上面的做法只適合非 Ajax 產生的 img ,我只有第一次載入畫面的時候,會做這件事情,當我點按是用 ajax 處理的分頁時,這下 high 了, 怎麼處理呢?

這時候想到 jQuery 有個 ajaxStop,可以偵測到當你切換頁面,也就是透過 ajax 切換畫面時且在 AJAX 請求結束後執行ajaxStop() 。

真有趣 :)


參考網址:

2013年10月12日 星期六

關於 JavaScript 清空 Array 的方法

[觀念更正]
Array = [ ] 其實不能算是清空Array的方式,只能說有人會這樣做,
但是意義並不是清空的意思。
詳情就參考我 po 在 ithelp 的文章吧!
感謝 fillano 指正文章內容:)

2013年10月11日 星期五

[國慶連假交作業] Shell Script 練習 - BMI 計算

剛開始練習 shell 時不是很習慣

  • 常常不小心行尾加 ; 分號。
  • 不然就是=左右加空白。
    比方說 m=100 跟 m = 100 是不一樣,看顏色變化就知道。




BMI 值計算
  • 運用 read 指令取得 stdin 的值,存到變數,參數 -p 是提示文字。(ex: read -p "你的名字是" your_name)
  • 做簡單的加減乘除計算 BMI,雖然要做到加減乘除要利用 expr,可是 expr 只能取到整數,因此改用 echo scale=2...的方式去做。 scale 的值表示要取到小數第幾位。

執行結果:

2013年10月7日 星期一

[媽!我上台了] 從 PHPConf 2013 Lighting Talk 學到的事


今年 PHPConf 2013 ,很高興被大大們推坑xd,講了一場 Lighting Talk,本來覺得自己有點害羞,一直不知道該講什麼,想了好一陣子,最後還是不好意思拒絕,於是也就答應了。

其實難的不是主題,因為只要能跟 PHP 有關係,什麼主題都能講,而是我不知道怎麼講,怎麼把情境帶到我最後想要表達的事情,跟以前大學在報告專題是完全不一樣的方式。

經過這次的 Lighting Talk,發覺以前在學校的自己根本沒什麼改進。
  • 先有企劃書,然後才有 PowerPoint,這個步驟好奇怪...。
  • 就算上台報告了,竟然是 PowerPoint 帶領自己要講什麼,主角變成了 PPT ,而不是講者自己內心想講的事情,我發覺我以前講話好像都沒有先釐清自己要講什麼...。
最後的結論就是,為了五分鐘的 Lighting Talk,花了好多時間在家學講話,實在很搞笑,但也很真實,這就是需要訓練表達能力的開始...。

雖然我不能說自己講的不錯,不過我也盡力了,希望大家有機會也可以多嘗試這樣上台說說話的機會,當你從一個  Listener 到  sharer ,我不敢說會讓你大開眼界,但絕對有另外一層體會。
接著我朋友在youtube發現有人錄下了Lighting Talk,真是太好了,雖然我完全沒有勇氣聽自己的聲音...(影片來源網址:https://www.youtube.com/watch?v=pQFIvqknnrY | 作者: locy69)








Vue multiselect set autofocus and tinymce set autofocus

要在畫面一進來 focus multiselect 的方式: 參考: https://jsfiddle.net/shentao/mnphdt2g/ 主要就是在 multiselect 的 tag 加上 ref (例如: my_multiselect), 另外在 mounted...