發表文章

目前顯示的是 十月, 2013的文章

前端工作流程筆記

最近剛好在看一些前端工作流程 (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 的差別,上網找了一下解答

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 :壓縮模式實測:

[快快樂樂學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 :

sudo gem install sass
你可以直接透過 command line 編譯 sass 產出 css 檔案:
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 有檢視版本訊息,應該不會有問題,至少我是這樣看的...。
編輯器語法變色設定

Sublime Text…

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,突然換個口味,感覺不錯,如果你要問我他像什…

[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 的…

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() 。

真有趣 :)


參考網址:

Detect AJAX requests in the browser (client side)Does a 403 response to an HTTP request for an image resource trigger the JavaScript error event?

關於 JavaScript 清空 Array 的方法

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

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

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

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



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

[媽!我上台了] 從 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)