六月 8, 2015
» JSDoc generator in Gaia



Last week I've post on dev-gaia to notice the change of JSDoc generator.

Now gaia's jsdoc generator takes standard jsdoc config format from each app's jsdoc.json file. And app owner could customize its look and feel if they prefer to do so.
http://usejsdoc.org/about-configuring-jsdoc.html

Here's the working jsdoc for Firefox OS settings app http://gasolin.github.io/gaia/settings/ .



The trick is done by gulp and shell commands, which can be apply on any other projects. Here's how I did it.


First of all is install required packages

$ npm install gulp gulp-shell jsdoc --save-dev

Then open `gulpfile.js` and add following scripts:

var gulp = require('gulp');
var shell = require('gulp-shell');

gulp.task('jsdoc', shell.task([
  './node_modules/jsdoc/jsdoc.js -c jsdoc.json'
]));

(It's an simplified version because gaia contains 20+ web apps in it, so I add some tree-walking code to create bunch of gulp tasks. But basically its the same)
The simplified version is now available for reuse in webapplate.


Bonus section:

Here's how I upload jsdoc (http://gasolin.github.io/gaia/settings/ , http://gasolin.github.io/gaia/system/) to github gh pages.

Add another section in gulpfile.js with following script

var gulp = require('gulp');
var ghPages = require('gulp-gh-pages');

...

gulp.task('github', ['jsdoc'], function() {
  return gulp.src('./docs/**/*')
    .pipe(ghPages());
});

Run `gulp github` command and the build tool will generate jsdoc and upload to github page automatically.


三月 1, 2015
» Future proved Javascript and CSS



This time, its different. The transpilers are build-time polyfills that fill the gap of current browser/server implementation and the newest JS/CSS specs.

Transpilers trans-compile Javascript and CSS to current workable version, so developers could be more productive with JS/CSS latest features and transpilers would translate them into current supported version of code.

From my opinion the most useful es6 feature is arrow functions (=>) which comes from coffeescript. This syntax sugar bind the this value automatically, so developer wont forgot the binding anymore.

The original code is

(function() {
  'use strict';
  document.addEventListener('DocumentLocalized', function() {             
     // App.init();
  }.bind(this));
}());

We can use arrow function to replace `function() {}.bind(this)` to `() => {}`

(function() {
  'use strict';
  document.addEventListener('DocumentLocalized', () => {             
     // App.init();
  });
}());
Currently the arrow functions only default enabled on Firefox. So developer could not use this directly on their project. With babel javascript transpiler the js could be translated to current workable version automatically.

(function() {
  'use strict';
  document.addEventListener('DocumentLocalized', function() {             
     // App.init();
  });
}());
The transpiler will know the content does not need 'this' reference and skip the binding. Note the Javascript transpiler still stick into vanilla javascript. It does not invent new syntax, but it make new specs could be used or experiment in current environment.

From CSS perspective,  CSS variables brings variables into CSS. Pre-define some color and use everywhere on project is possible.

The origin style is

a {
  color: #847AD1;
}

pre {
  padding: 10px;
}
It's frustrated when the stylesheets expand larger and we need to change the new color or size everywhere.

We can use CSS variables to predefine the changeable stuff into pseudo ':root' element.

:root {
  --maincolor: #847AD1;
  --size: 10px;
}

a {
  color: var(--maincolor);
}

pre {
  padding: var(--size);
}
Looks good. But the same situation occurred. Currently the CSS variables only support on Firefox. So developer could not use this directly on their project. With myth CSS transpiler the CSS could be translated to current workable version automatically.
a {
  color: #847AD1;
}

pre {
  padding: 10px;
}
Note the CSS transpiler still stick into CSS specs. It does not invent new syntaxes like LESS or SASS does. It just make new CSS specs could be used or experiment in current environment.

Besides the feature polyfill, running transpiler before deploy also help developer catch out the error since transpiler will traverse the source and parsing syntaxes. Transpiler will bark you when any error in your source.

You may wonder setup an environment with above JS/CSS transpiler seems take some time. webapplate 2.3.0 already integrated with babel  and myth grunt tasks to auto transpile your JS/CSS code to current workable version. webapplate jshint/githook also support es6 syntax validation (yes the .jshintrc is exactly borrowed from gaia project), so your project is future proved and keep maintainable.

一月 13, 2015
» Material Design(物質設計)是什麼?

物質設計(Material Design)

「物質設計」有人翻作材質設計,但我很容易把「材質」聯想到3D遊戲的材質貼圖去,這跟 Material Design 所想要表達的意涵差了十萬八千里。而從相關的英文詞彙聯想,「Material Girl」或譯為拜金女孩或物質女孩,那種對於追求「摸的到的實際東西」有所迷戀的意涵,似乎與 「Material Design」的內在涵義更為貼近,所以我更願意稱之為「物質設計」。

註:官方後來定名為「實感設計」。

物質設計(Material Design)是什麼?

簡而言之,Material Design(物質設計)是 Google 公佈的一套同時適用於Android、iOS、Web 等各種平台,同時能適用於手機、平板、電視、電腦螢幕等不同裝置的跨平台/裝置的設計規則(仍需為各裝置設計,但鼓勵共用更多相同元素)。

讀者也可以透過觀看 Google I/O 2014 - Keynote(從14:18分開始,由 Matias Duarte 介紹 Material Design)https://www.youtube.com/watch?v=wtLJPvx7-ys  可以得到對於 Material Design 最精巧的介紹。

我不是設計師,僅從開發者角度分享一些個人想法,如果還有興趣請繼續看下去。


從擬物化、扁平化、到物質化的 App 設計

自從 2007 年 iOS 重新發明手機之後,「擬物」化(Skeuomorphism)一直是 iOS App 的設計原則。「擬物」化的設計,讓新接觸「智慧手機」、「智慧平板」的使用者得以沿用過去實物的使用經驗,愉悅地使用新的數位化工具。

但是這幾年智慧手機/平板實在太成功,軟體App 漸漸吞噬了實體世界的各種工具,造成原本「擬物」所參照的物品已紛紛變成老古董,要年輕人畫出電話的形狀,可能畫的卻是手機的模樣...總而言之,許多擬物的參照物已經漸漸被時間淘汰了。

微軟的設計師們很早看出這個趨勢,在2010年推出的 Window Phone 中使用了極端「扁平」化(Flat)的設計風格。
經過幾年來的大膽嘗試,最後也由市占極高的 iOS/Android 定調了使用者界面「扁平」化的發展潮流。「扁平」化的設計,讓使用者得以減少在使用 App 過程中,辨識「擬物」化界面所產生的認知疲勞。

不管是「擬物」化或者「扁平」化,在每個平台的設計指南中,都明確指出設計的App要提供最佳的使用者經驗,必須要符合該平台的風格。iOS還分別為手機與平板提供不同的設計指南,並指出手機與平板是不同的設備,App設計必須要符合該設備的使用情境。

其實平台們的意思很簡單:現在開發者必需要對應每個平台,針對平台不同的風格提出相符的設計。對於同平台的不同裝置,也請分開處理。

於是現在開發者(或提出 Material Design 的 Google,別忘了他們得支援多少種平台與裝置)要面對的,是針對不同裝置、多重平台開發設計 App 時所需面對的各種問題。

「物質設計」(Material Design)就是 Google 整理出的新跨平台、跨裝置適用 (For every screen, and for all devices) 的設計指南。並將首先套用到 Android 的最新版本「L」上。


物質化的 App 設計

「物質設計」是以「扁平」化的 App 設計為基礎,加上紙質分層的概念(即以「Google Now」為代表的卡片式設計),整理出字體、色彩、圖標等設計模式,並加入佈局(Layout)、圖像,與動畫效果(effect)等設計模式。紙質分層與「動畫效果」產生出的設計模式,就我所知,是在之前的各種介面設計中所未特別強調的。

想進一步了解Material Design上的動畫效果,可由 Google I/O 2014 - Keynote(從18.25分開始,由 Matias Duarte 介紹 Material Design Animation)https://www.youtube.com/watch?v=wtLJPvx7-ys  查看。

物質設計(Material Design)工具

看完這些大片的色彩、轉場、動畫效果,不知道身為開發者的你臉綠不綠,反正我綠了。 這樣該如何應用於 app 開發哩? 整個開發成本還了得?

還好 Google 還提供了一些配套工具(但卻不是出現在 Android L)。

(未完待續)

參考資料


七月 18, 2014
» 遷移個人首頁經驗分享


在DNS代管商網站上輸入要切換的CNAME

在Openshift中輸入domain name alias

遷移成功!


趁週末將個人首頁 www.gasolin.idv.twGoogle App Engine(GAE) 遷移至 OpenShift. 從2009年開始使用 GAE 架設個人首頁,從剛開始 (python, GAEO),2012(Java, play framework),到今天遷移到 OpenShift(Node.js, webapplate / Express),使用了三種 Server SIde 技術。最近的這次遷移只用了兩天,就完成整個申請/移植/部署的過程。遷移的主因是 GAE 最近不再支援 Java 1.6,使得無法繼續使用 Play Framework 1.2.x 來部署。Play Framework 1.2.x 已經被完全改寫的 2.x 取代許久,而新版並未支援GAE。加上近年開始使用js的機會更多,於是乾脆搜尋了一下,選擇 OpenShift 作為最新的遷居點。

除了 Play Framework 例外,GAEO我有參與開發,webapplate 則乾脆是自己弄來撰寫 Web App 的樣板。透過實際使用,目前可無痛部署到 HerokuAppFogOpenShift 上,而不需修改程式碼。所以雖然說遷移只用了兩天,但其實為了弄好 webapplate,也準備了快一年。

由於 webapplate server side 使用 express 4搭配 swig (Django-like) 樣板(template)引擎使用,與原本使用的樣板架構一致,所以遷移上並沒有遇到什麼問題。

webapplate server side 已做過伺服器效能最佳化,使用yslowpagespeed都可以測到相當高分的結果。


一月 13, 2014
» template.js

From Template library from Messages app now available in shared/js

Rick Waldron post the new template.js library that works originally for gaia/cummunication apps. Now it's widely adopted for other apps such as settings.

The template.js library is pretty small and stable for general use. just copy it and put in your library to use it.

The syntax is no magic, just inject an single id tag into main html file. And the 'template' is just the commented code. It allows general parameters replacement and prevent innerHTML pollution.

Here's the post from Rick:


Using the Template library is simple:

1. Add <script src="shared/js/template.js"></script> to your index.html

2. Create your template as a comment node inside of any type of element,
place in index.html:

  <span id="emphasis-template">
  <!-- <${tag}>${value}</${tag}> -->
  </span>

  <span id="greeting-template">
  <!-- Hello ${name}! -->
  </span>

3. In your JavaScript code, initialize an instance of this template:

  // Template will accept either an id string or a node!
  var emphasis = new Template('emphasis-template');
  var greeting = new Template(document.getElementById('greeting-template'));


4. Generate a safe markup string with specified values by calling the `interpolate` method of the template object:

  greeting.interpolate({
    name: 'World'
  });

  // Hello World!

Simple partial nesting is supported, just tell `interpolate` which properties are "safe":

  var name = emphasis.interpolate({
    tag: 'b',
    value: 'World'
  });

  // we know that the value of 'name' has already been escaped :)
  greeting.interpolate({ name: name }, { safe: ['name'] });

  // Hello <b>World</b>!


Markup strings produced by Template are innerHTML safe (unless explicitly
marked otherwise, as shown above):

  greeting.interpolate({
    name: '<script>alert("hi!")' + '</script>'
  });

  // &lt;script&gt;alert(&quot;hi!&quot;)&lt;/script&gt;


Template instances disallow modification of the template string once the
object is initialized, but the toString() method will return the raw
template as a string:

  greeting.toString();

  // Hello ${name}!

  emphasis.toString();

  // <${tag}>${value}</${tag}>



It's important to remember that Template and WebComponent are not at odds
with each other and exist to serve to different purposes; read more here:
https://bugzilla.mozilla.org/show_bug.cgi?id=908950#c6

七月 25, 2011
» 使用Play! Framework在GAE上架網站


今年自己在網站開發方面做了很多改變。

第一件是Domain name續約並全面採用 gasolin.idv.tw 系列網址。

本如部落格網址可由 blog.gasolin.idv.tw 連結,
Android書籍/應用相關訊息可由 android.gasolin.idv.tw 連結。

第二件是使用的網頁框架改變。

個人的首頁 www.gasolin.idv.tw 仍然架在Google App Engine上頭,
但背後使用的技術,也從Python based的 GAEO ,改為使用Java based的 Play! Framework

使用 Play! Framework 的好處是它並不像GAEO一樣完全捆綁在Google App Engine上,而是隨時可以搬離GAE獨立運作。

再者Play!的專案架構和使用方法很接近TurboGearsDjango等現代的網頁框架,因此熟悉現代網頁框架的開發者應該能很快地上手。開發的時候可以在本地端開發,而且修改後的結果也能即時自動編譯並顯示,用起來非常接近使用動態語言開發的使用經驗。(Play!的命令行工具是用Python寫的:))

Play! 的另一個好處是有很好的模組(Module)架構。要將網站發佈在Google App Engine上時,透過GAE模組和搭配Siena(提供ORM層)、crudsiena(提供自動Admin管理頁面)模組,可以不被Google App Engine的一堆限制所制約,從而得到完整的開發經驗。

Play! 的官方網站上有很齊全的文件可供參考。所謂的「齊全」到了什麼地步呢?
除了簡介、教學、模組介紹之外,甚至還有cheatsheet !


要從頭開始建立一個Play網頁程式到發佈在GAE,要做以下6幾點

1. 建立專案

$ play new  [project name]

2. 安裝相關模組

執行

$ play install gae-版本
$ play install siena-版本
$ play install crudsiena-版本

3. 修改模組依存關係

進入專案目錄, 修改 conf/dependencies.yml 檔案


# Application dependencies

require:    - play -> play [1.2.1,)
    - play -> secure
    - play -> siena [2.0.0,)
    - play -> crudsiena [2.0.0,)
    - play -> gae 1.4
4. 自動檢查模組依存關係

執行

$ play deps

5. 修改GAE相關設定

根據GAE模組提供的文件做相應的GAE發佈設定(指定要deploy的GAE代號)

6. 發佈

執行

$ play gae:deploy --gae=[app engine java sdk path]

如此即完成整套使用Play!  + Google App Engine 的配置流程。


Update 2011/7/20: 在Taipei GTUG活動中和大家分享了Play! on GAE的相關經驗,並公開投影片

三月 8, 2011
» 理解Open ID

Open ID簡而言之,就是在瀏覽到某個網站時,不用在這個網站先註冊帳號,
只要透過OpenID機制用自己現成的Yahoo、Google等大網站的帳號登入,
就可以開始使用這個網站所提供的個人化服務。而且自己Yahoo、Google等帳號的密碼也不會透露給這個網站知道。讓使用者可以更放心嘗試各種新的網站應用服務。

在使用者登入這個網站後,這個網站還是可以在自己的資料庫中記錄關於這個使用者的各種訊息。

對應到現實世界的例子,就好比我們只要持有台灣護照,到日本、加拿大遊玩時免填簽證,就可以進入該國家。只要在該國海關前出示護照,表明我們是來自台灣的遊客,海關確認護照後即准予通行,於是我們就可以進入他們的國家。

回到網路的世界,舉Google為例,我們也可以查看Google提供的各種外部網站(外國)接取Google帳號(Google護照)來登入的方式

Third-party web sites and applications can now let visitors sign in using their Google user accounts.

http://code.google.com/apis/accounts/docs/OpenID.html

Facebook Connect 也是使用類似的機制,提供外部網站可以使用Facebook帳號登入,有五億潛在使用者(Facebook國民)可以更容易地使用這個網站(外國)提供的應用服務.
http://www.facebook.com/help/?page=730

http://developers.facebook.com/docs/guides/web/

三月 6, 2007
» Python 社群的 web 框架開發

框架介紹 Python 社群中各種 web 框架開發路線都有. Django 目前 Django 框架吸引的使用者最多, 一方面原因是 Django 團隊的性質, Django 有一個像 Rails 那樣的專職團隊在維護, 保證了專案的持續性. 同時不錯的指引文件, 對初學者友善的 Admin 介面, 開發者 Adrian 四處不遺餘力的宣傳也是吸引人的原因. 除了持續框架維護的承諾, 宣傳之外, Django 框架傑出的效能也屢屢在網頁框架評比中勝出. python 創造者 Guido 也將 Django 視為 Python 語言的首選網頁框架. Django 網頁框架的每個部份都是 Django 開發團隊自行建置. 但是在 Django 之外, python 社群其實早已有各式各樣的網頁開發工具. TurboGears 與 pylons

biggo.com.tw

A Django site.