聚會時間公告: 因應COSCUP 2011, Kalug 8月份休會一次

九月 9, 2015

小惡魔AppleBOY
AppleBOY
小惡魔 – 電腦技術 – 工作筆記 – AppleBOY is about »

tag cloud

» JavaScript in 2015

Screen Shot 2015-09-09 at 2.03.34 PM

在這幾年的趨勢看來,JavaScript 已經環繞在各領域了,不管在 Web 前端或後端,上層或下層,都充滿了 JavaScript,其實都是托 Node.js 的福,網路上看到這篇 JavaScript in 2015,裡面講到 JavaScript 所有的工具,不管前端到後端,每一年都有新的工具跟新的 Framework,從以前寫 BackboneAngular.js 到現在 React.js 改變了整個 JavaScript View 的生態,工具流程整合從 Grunt.jsGulp.js 的出現,整個生態又轉換了,大家陸續將工具全都轉到 Gulp,最後又出來一套 Webpack,Webpack 出現基本上不會影響 gulp 發展,因為 Webpack 還是有很多限制,在前端或後端在上 Production 前的一些流程像是 copy 檔案等,這些是 webpack 無法整合的,看到這些工具一一出現,也不知道明年或現在會不會又跑出一套新的玩具,讓整個 JavaScript 生態整個改變。寫上層的同時,看到同事在寫底層,同事就會跑過來拍拍我肩膀說:『好險我是搞 Kernel,搞上層就要跟你們一樣天天追新技術,永遠沒有停止的一天』。看一下全世界 Job Trends

Screen Shot 2015-09-09 at 2.28.21 PM Screen Shot 2015-09-09 at 2.28.28 PM

結論就是,大家快邁向全端工程師,活到老學到老。對於 Grunt 或 Gulp 的基礎介紹可以參考我分享的 Slide:

PS. 圖片來源:JavaScript in 2015

七月 20, 2014

小惡魔AppleBOY
AppleBOY
小惡魔 – 電腦技術 – 工作筆記 – AppleBOY is about »

tag cloud

» Automating your workflow with Gulp.js

gulp

今年 2014 COSCUP 在 7/19,20 中研院舉辦,由於 JSDC 今年比往年還要晚半年舉辦,所以本來想投在 JSDC 的議程,就先拿到投到 COSCUP 議程。去年 JSDC 講了 Javascript command line tool GruntJS 介紹,講完經過半年,Gulp.js 就出來了,我馬上跳過去嘗試,用過之後,就像變了心的女朋友,回不來了,底下是 Gulp.js Slides。

Automating your workflow with Gulp.js from Bo-Yi Wu

最後提到 Slush.js 這套 streaming scaffolding system,我寫了 html5 template engine generator,產生最簡單的開發環境以及 Gulp.js 設定檔,大家可以透過底下安裝嘗試:

$ npm install -g slush bower
$ npm install -g slush-html5-template

產生專案檔案

$ slush html5-template

這套 Slush html5 generator 程式檔來自 html5-template-engine

六月 12, 2014

小惡魔AppleBOY
AppleBOY
小惡魔 – 電腦技術 – 工作筆記 – AppleBOY is about »

tag cloud

» 用 Google PageSpeed Insights 計算 Desktop 或 Mobile 網站分數

new-google-logo-knockoff

相信工程師在調整網站效能一定會使用 Google PageSpeed Insights 來得到測試效能數據報表,但是這僅限於使用 Chrome 或 Firefox 瀏覽器。每次跑 PageSpeed 時候,Chrome 就會出現哀號,並且吃下許多記憶體。有沒有 command line 可以直接用 Google PageSpeed Insights 測試 Desktop 或 Mobile 的分數。Google 工程師 @addyosmani 寫了一套 PageSpeed Insights for Node – with reporting 稱作 PSI,可以直接透過 Node 來產生基本 report,這 report 真的算很基本,跟 Chrome 的 extension 跑起來的 report 是不一樣的。這工具可以用來紀錄每次 deploy 網站時的一些數據變化。底下附上 Google 網站報告

google_psi_report

此工具是透過 gpagespeed 完成,如果你有用 GruntJS 可以直接參考 grunt-pagespeed。使用 psi command line 非常簡單,透過底下指令就可以正確產生出上面報表

$ npm install -g psi
$ psi http://www.google.com

如果有用 GulpJS 可以寫成兩個 Task 來跑

var gulp = require('gulp');
var psi = require('psi');
var site = 'http://www.html5rocks.com';
var key = '';

// Please feel free to use the `nokey` option to try out PageSpeed
// Insights as part of your build process. For more frequent use,
// we recommend registering for your own API key. For more info:
// https://developers.google.com/speed/docs/insights/v1/getting_started

gulp.task('mobile', function (cb) {
  psi({
    // key: key
    nokey: 'true',
    url: site,
    strategy: 'mobile'
  }, cb);
});

gulp.task('desktop', function (cb) {
  psi({
    nokey: 'true',
    // key: key,
    url: site,
    strategy: 'desktop'
  }, cb);
});

上面程式碼來自 psi-gulp-sample,psi 有提供 callback function

function(err, data){
  console.log(data.score);
  console.log(data.responseCode);
  console.log(data.id );
}

上面的 Task 可以改成

gulp.task('desktop', function (cb) {
  psi({
    nokey: 'true',
    // key: key,
    url: site,
    strategy: 'desktop'
  }, function(err, data){
    console.log(data.score);
    console.log(data.responseCode);
    console.log(data.id );
    cb();
  });
});

用此工具來紀錄每次網站更新後的測試數據,對於調整 Web Performance 來說是一個可以參考的指標。如果 API 使用量很大,請記得申請 Google API Key。

五月 23, 2014

小惡魔AppleBOY
AppleBOY
小惡魔 – 電腦技術 – 工作筆記 – AppleBOY is about »

tag cloud

» Gulp.js 工具包

gulp

本篇來整理關於 Gulp.js 的一些 GUI 工具,對於不瞭解 Gulp.js 可以參考之前我寫的 The streaming build system Gulp,會紀錄這篇最主要是看到有人在 Github 發了這篇 Is there any GUI tool for Gulp? 而 Gulp.js 底層作者 @robrich 跳出來列出了很多工具,整理如下

如果開發環境為 Apple Mac 你可以直接裝 @sindresorhus 寫的 gulp-app,或者是 g0v 作者 clkao 開發的 gullet。看大家喜歡哪些工具,請自行安裝。我比較推薦 Gulp Dev Tools for Chrome,可以在瀏覽器上直接執行 Gulp 所有 Task,如果之前有玩過 Grunt.js 大家應該都知道也有 Grunt Devtools

有使用 CoffeeScript 寫 Gulp.js 請務必在 gulpfile.coffee 加上

module.exports = gulp

接著修改 gulpfile.js 如下

require('coffee-script/register');
var gulp = require('./gulpfile.coffee');
module.exports = gulp;

程式碼可以直接參考 html5-template-engine

support:

biggo.com.tw

A Django site.