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

網址：http://sassmeister.com/
功能：
  • 線上編輯 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 有檢視版本訊息，應該不會有問題，至少我是這樣看的...。

編輯器語法變色設定



以一個網站的資料夾為例

這是我的網站目錄:
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 之類的服務，還蠻有趣的，等我弄好再把網址貼上來。

於 2 則留言:
標籤： , ,

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 ：
http://docs.angularjs.org/guide/dev_guide.mvc.understanding_view


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）








於 沒有留言:
標籤： ,
訂閱： 文章 (Atom)

Vue multiselect set autofocus and tinymce set autofocus

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