新一代戰神 Yarn 終於在昨天出爐了,Yarn 跟 Npm 一樣都是 JavaScript 套件版本管理工具,但是 Npm 令人詬病的是安裝都是非常的慢,快取機制用起來效果也不是很好,所以 Yarn 的出現解決了這些問題,透過 Yarn 安裝過的套件都會在家目錄產生 Cache (目錄在 ~/.yarn-cache/
),也就是只要安裝過一次,下次砍掉 node_modules
目錄重新安裝都會從 Cache 讀取。Yarn 詳細的功能架構可以參考 Facebook 發表的 Yarn: A new package manager for JavaScript,本篇不會教大家怎麼使用 Yarn,因為指令實在是太容易了,可以參考官方提供的如何從 npm 轉換到 yarn,底下則是來測試比較兩者安裝套件的速度。
用一行指令加速 npm install
不久之前寫過一篇 提升 npm install 安裝速度,但是發現速度還是沒有變快,在 DevOps 的流程花在 npm install
的時間非常冗長,造成每次測試或 Deploy 都要花大量時間等待,且吃掉很多機器的資源,本篇要提供一個小技巧改善 npm install 安裝時間,其實簡單來說就是 cache 第一次安裝好的 node_modules
目錄,之後每次安裝就拿 cache 目錄來新增或減少 packages 即可。
基礎 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 .. 等。
來聊聊 PHP & JavaScript & CSS 的 Coding Style
專案開始前,要決定好前端或後端各用什麼語言及制定符合團隊的 Coding Style,統一團隊 Style 是非常重要的,尤其是專案需要經過 Code Review 步驟,不要造成 Reviewer 困擾。底下寫了一份投影片介紹 PHP & JavaScript 及 CSS 的基本 Coding Style 及該如何透過工具來改善 Coding Style。
[Read More]JavaScript in 2015
在這幾年的趨勢看來,JavaScript 已經環繞在各領域了,不管在 Web 前端或後端,上層或下層,都充滿了 JavaScript,其實都是托 Node.js 的福,網路上看到這篇 JavaScript in 2015,裡面講到 JavaScript 所有的工具,不管前端到後端,每一年都有新的工具跟新的 Framework,從以前寫 Backbone 到 Angular.js 到現在 React.js 改變了整個 JavaScript View 的生態,工具流程整合從 Grunt.js 到 Gulp.js 的出現,整個生態又轉換了,大家陸續將工具全都轉到 Gulp,最後又出來一套 Webpack,Webpack 出現基本上不會影響 gulp 發展,因為 Webpack 還是有很多限制,在前端或後端在上 Production 前的一些流程像是 copy 檔案等,這些是 webpack 無法整合的,看到這些工具一一出現,也不知道明年或現在會不會又跑出一套新的玩具,讓整個 JavaScript 生態整個改變。寫上層的同時,看到同事在寫底層,同事就會跑過來拍拍我肩膀說:『好險我是搞 Kernel,搞上層就要跟你們一樣天天追新技術,永遠沒有停止的一天』。看一下全世界 Job Trends
[Read More]用一張圖學習 JavaScript
2015.07.03 作者出了 GitHub Page 線上版
在 GitHub 上的 javascript-in-one-pic 作者將 JavaScript 一些基本用法整理成 PDF, PNG .. 等版本,讓開發者可以一目了然學習基本 JavaScript 用法,這專案啟動沒多久就一堆人 Star 了,看到作者是參考之前我有參與翻譯的 JavaScript Garden 及 Professional JavaScript for Web Developers 這本書,目前尚未全部整理完整,已經整理的目錄如下
[Read More]簡介 JavaScript ES6 物件及陣列
今年 2015 六月 17 號 Ecma International 已經同意 ECMA-262 6th edition 版本,這是在 ECMAScript 2015 Has Been Approved 看到的消息,而現在主流就是以 Babeljs 為主,將 ES2015 語法直接轉換成 ES5,讓各大瀏覽器可以繼續支援 ES2015 寫法。今天來介紹 ES2015 內如何使用物件 (Object) 或陣列 (Array)。
[Read More]Git Flow and JavaScript Coding Style
Git 已經是每日必備使用的指令,在平常工作上常常使用到 git rebase 或 git merge,發現很多工程師不知道什麼時候該用 rebase 什麼時候該用 merge,所以做了底下投影片來清楚描述 git rebase 及 merge 的優缺點及使用時機。
[Read More]您不可不知的 io.js
io.js 至今已經成立了快三個月,目前也快速推出到 1.2.0 版本了,相信很多人都不太知道為什麼會多一個 io.js 組織,這組織是 fork 自 Joyent’s Node.js 相容於 npm 原始平台。
[Read More]CoffeeScript 轉 ES6
開始嘗試 ES6
最近有時會看看 JavaScript ECMAScript 6 的相關文件,今年也是時候將新專案用 ES6 來撰寫,在還沒使用 ES6 以前,我個人比較偏好使用 CoffeeScript 或 LiveScript,如果嚐試過 CoffeeScript 後,你會發現轉換成 ES6 是相當容易。網路上可以直接看 6to5 專案,提供 Sprockets, Broccoli, Browserify, Grunt, Gulp, Webpack ..等,要嘗試 ES6 語法轉成 Javascript 可以透過 ES6 repl 介面來嘗鮮。
[Read More]