在 Toptal Blog 看到 JavaScript Cheat Sheet: ES6 And Beyond 及另外一篇 A Practical CSS Cheat Sheet by Toptal Developers，這兩篇提供了一些 JavaScript ES6 及 CSS 的基礎寫法及教學，蠻適合前端工程師將 PDF 印出來貼在座位前面，cheat sheet 內提供的語法幾乎都是天天在用，像是在 ES2015 內 let vs var 語法差別，什麼時候要用 const 或 let，或 Template String，預設參數 .. 等功能，其實非常不賴。CSS 則是介紹基本的 Box Model、Selectors、Pseudo-selectors .. 等。
專案開始前，要決定好前端或後端各用什麼語言及制定符合團隊的 Coding Style，統一團隊 Style 是非常重要的，尤其是專案需要經過 Code Review 步驟，不要造成 Reviewer 困擾。底下寫了一份投影片介紹 PHP & JavaScript 及 CSS 的基本 Coding Style 及該如何透過工具來改善 Coding Style。
[Read More]
Compass 是一套 CSS Authoring Framework，也是基於 Sass 語法的一套 Framework，先前寫了 Gulp 的 Compass Plugin，在針對自動化測試時候出現版本相依性不同，造成無法自動測試成功。自動化測試目前跟 Github 最常搭配的就是 Travis CI 或者是 Codeship，當然如果非 Open source 專案可能就要自己架設 CI 伺服器，個人推薦就是 Jenkins。這次遇到的問題其實跟 Ruby Gem 版本相依性有關，由於要測試 Compass 所有 Command 語法，所以使用了 Susy + sass + compass，如果在 .travis.yml 內直接寫
2014 年第一篇文章來寫前端工程師必須要瞭解的 [CSS] 技巧，此篇其實來自於 KidsIL Blog 內的一篇 10 Great CSS Tips for every Web Developer，裡面作者紀錄了十大 CSS 技巧，看完這十大後，發現有些技巧曾經出現在 Even Wu 給網頁設計師的建議一文，這些技巧都算是蠻基本的，對於前端工程師有很大的幫助，如果尚未瞭解或還沒開始使用的開發者，也可以建議團隊開始使用。底下內容來自於原網站，在加上筆者的一些補充。
[Read More]
看到 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 專案。
[Read More]今天非常開心看到 Twitter 團隊發佈 Bootstrap 3 RC1 版本，Twitter 這次是大動作的改版，連官網都換掉了，如果你還在使用 2.3.2，Twitter 也提供之前的網站版本，讓使用者可以繼續使用，當然希望各開發者可以盡快轉換到 3 RC1，此版本超過 1600 commits 修正。Twitter 也另外開了 Github Organization，如果要找範例的話，可以到 bootstrap-examples 來看看。另外大家最關心的是效能，底下影片介紹 Bootstrap 3 vs Bootstrap 2.3.2 版本差異。
相信網頁設計師並不陌生 Chrome DevTools，善用 DevTools 可以減少很多 Debug 時間，今天來介紹如何在 Chrome 瀏覽器上直接編輯程式，並且存檔，重新整理網頁後便可看到結果。聽到這裡大家一定會很好奇，不就開系統編輯器 (sublime, pspad, vim …) 工具，直接修改 => 存檔 => 重新整理嘛？但是這並不稀奇阿，重點是 Chrome 瀏覽器可以直接支援 線上編輯檔案，而不是透過系統工具做編輯。這就是 Chrome 強大的地方，今天就來介紹 Chrome workspace。
Web CSS Programer 在撰寫 Responsive CSS Style 時，手邊一定會有一堆 Device，來測試當畫面小於 480 px 或大於 768 px 時，呈現的版面是否有亂掉，公司也花費許多成本來測試，現在不需要這樣了，我們可以透過線上 Tool 或者是 Plugin 來測試 Responsive Web Page，首先來介紹
Viewport resizer，此工具用法很簡單，進入官網後，將官網 Javascript 連結加入到我的最愛或 bookmarks，之後打開您的測試網站，再點選該 bookmark，你會發現網站上面多了一條 tool bar，可以自訂或調整 view size，預設也給了平板手機等多種畫面調整，讓您測試 Media Queries 是否有錯誤。
[Read More]