基礎 JavaScript ES6 和 CSS cheat sheet PDF 下載

在 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 .. 等。 Continue reading

簡介 JavaScript ES6 物件及陣列

今年 2015 六月 17 號 Ecma International 已經同意 ECMA-262 6th edition 版本，這是在 ECMAScript 2015 Has Been Approved 看到的消息，而現在主流就是以 Babeljs 為主，將 ES2015 語法直接轉換成 ES5，讓各大瀏覽器可以繼續支援 ES2015 寫法。今天來介紹 ES2015 內如何使用物件 (Object) 或陣列 (Array)。

6to5 JavaScript Transpiler 重新命名為 Babel

先前寫了一篇 CoffeeScript 轉 ES6，裡面有提到 6to5 專案，此專案幫助開發者可以直接寫 JavaScript ECMAScript 6，該專案則會將 ES6 轉成 ES5，但是目前瀏覽器對於 ES6 的支援度還沒有很高，可以直接參考 ECMAScript 6 compatibility table，但是看到專案名稱 6to5，就會覺得如果之後 ES7 出來，不就要多開一個 7to6 專案，果然官方在 Blog 宣佈將名稱正式轉為 Babeljs。Babel 也會持續使用最新 JavaScript Standard 開發 JavaScript transpiler 相關工具，讓各種平台程式都可以使用。

現在就可以透過 Babel 來開發 ES6

$ npm install --global babel

ES6 轉 ES5

$ babel script.js

一些來自 Mozilla, Esprima, jQuery Foundation, Acorn, 6to5, ESLint 組織成員，也合力開了 ESTree，而 Babel 以 ESTree 為基底來開發相關 Tool，所以最新的 Standard 也可以直接參考 ESTree。

CoffeeScript 轉 ES6

開始嘗試 ES6

最近有時會看看 JavaScript ECMAScript 6 的相關文件，今年也是時候將新專案用 ES6 來撰寫，在還沒使用 ES6 以前，我個人比較偏好使用 CoffeeScript 或 LiveScript，如果嚐試過 CoffeeScript 後，你會發現轉換成 ES6 是相當容易。網路上可以直接看 6to5 專案，提供 Sprockets, Broccoli, Browserify, Grunt, Gulp, Webpack ..等，要嘗試 ES6 語法轉成 Javascript 可以透過 ES6 repl 介面來嘗鮮。