二月 13, 2015
» webapplate on jsfiddle


In short, here is the jsfiddle link.

In recent article on moztech (in Chinese) I've introduce ghapplate to develop and host web app directly on github. After the post is published, I'm still seeking for a more easier approach. Since github does not provide web preview while editing, you have to save your current work then view it later on browser to see if it's the expect result.

So jsfiddle comes to my mind. Here is a playground that preload the libraries used by ghapplate and webapplate.


It's possible to use jsfiddle to prototype web app as well. What you need is attach `/manifest.webapp` postfix after your jsfiddle link.

jsfiddle and ghapplate are good for quick experiment. If you want to get benefit from optimizer, lint check and more during serious web development, webapplate is still the more maintainable choice.

二月 4, 2015
» React Native

在看 Facebook 發表的 React Native 介紹的時候,講者提到為什麼現在 Web 沒辦法提供如他們做的 Paper App 一樣順暢的體驗,主要是三點:

1. Parallelize work 平行處理

在 Web 上雖然有 web worker,但能做的事很有限。

2. Gesture Handling

在 Web 上沒有一個好的如何使用手勢操作的指引

3. Access to Native Capabilities

在 Web 上沒有辦法使用所有在原生平台上可取用的 API。


於是 Facebook 發表了使用 React UI 來開發 iOS/Android App ,他們現在已用在了 Facebook Group App 上。React Native 不像 Cordova/Phonegap 用 WebView 來跑 HTML/JS/CSS,而是直接接上 Native UI widget。


雖然使用JS當controller,但用async的方式和Native UI做互動。並且互動時是將UI各改動一次性完成(原本 React 的 Virtual DOM 特性),從而避免 JS 程式運行阻塞住 UI 而影響效能。

當然兩個平台的 Native UI 元件名稱或參數多有不同,所以不能像 Cordova/PhoneGap 那樣「寫一次,跨多個平台」 ,而是「學一次,跨多個平台」(Learn Once,Write anywhere)。


原始演講內容可以查看




OS: 開發者大會都要留一些爆點啊

五月 6, 2014
» 來自未來的CSS - media 查詢

注意本篇提到的技巧僅適合用在特定平台的Webapp中,透過預處理器來針對特定使用平台做最佳化。但是在撰寫時仍然可以是完全跨平台的。


接續上一篇,我們繼續來重新發現一些對於有助於撰寫結構化CSS的一些CSS標準語法。


Media Query 是撰寫 Responsive design web 響應式網頁的重要元素之一。透過諸如

@media (min-width: 768px) {
...
}

這樣的語法, 瀏覽器可以根據條件,刪選並套用特定的規則來顯示。這邊需要注意的是桌面瀏覽器與移動設備瀏覽器/webapp的不同之處:在移動設備上看webapp時,除了基本Orientation之外,並不太需要調整螢幕大小。但是瀏覽器並不知道這之間的不同。瀏覽器看到@media 標簽時的運作模式,並不像一般條件式程式一般,若條件不符合時就不執行,而是一律讀進來並預先解析進 rendering tree。

在最近針對Gaia的一些load time performance measuring中,我們發現在Settings App中,每加入一行 @media 語句就會增加 100ms 左右的啟動延遲,很可能的原因就是每次瀏覽器看到@media標簽時就需要跑一次預先解析過程。因此在瀏覽器引擎本身有提供更好的方案之前,我們勢必得尋找中短期的解決方法來克服遇到的問題。


provecss 中我們嘗試提供了幾種預處理 media query 的方法。一種是搭配「Import」語法提供 filter,根據檔案名稱在 Import inlining 時將不符合條件的檔案拿掉。

例如上一篇中使用到的範例


@import url("app_mobile.css");
@import url("app_tablet.css");



我們傳入 import_filter = ["mobile"] ,則 Import Inlining 結果將只傳回「app_mobile.css」檔案中的內容:

headers {
background-color: orange;
}

「app_tablet.css」檔案中的內容就被濾掉了。這種方式可以部分解決問題,但使用上的彈性並不是很好。

另一個方式是使用標準CSS語法預處理器(Pre-processor)來查詢 CSS 檔案中的內容,只將符合條件的@media 查詢結果留下。

 我們傳入 { width: '240px', height: '320px' },則
@media (min-width: 768px)並不符合查詢條件,所以輸出的結果也會是 

headers {
background-color: orange;
}
這個方法能應對更複雜的情境。我們還能進一步 傳入「media_extract」參數,將輸出的 @media 標簽去除。

headers {
background-color: orange;
}
// was-@media condition
headers {
background-color: red;
}
於是原本@media標簽中的樣式將覆寫過原來的樣式,在特定機型中達成一樣的顯示效果。(目前主要目標是拿來用在Gaia內建App的編譯上)


如何安裝provecss
npm install -g provecss

使用命令行操作
provecss imprt.css imprt.out.css --import

加入「--import」參數即可啟用 import inlining 功能。

此外 provecss 還可以作為 node 函式庫或是 Grunt plugin 呼叫,更詳細的使用說明請參考 provecss 的 README。

» 來自未來的CSS - 匯入(Import)

接續上一篇,我們繼續來重新發現一些對於有助於撰寫結構化CSS的一些CSS標準語法。

對於比較複雜的CSS樣式,其實在CSS標準語法中,早已提供使用「import」語法來結構化地組織 CSS 樣式表。

語法如下:


@import url("app_mobile.css");
@import url("app_tablet.css");

瀏覽器在載入時會自動去「app_mobile.css」和「app_tablet.css」檔案中載入相應的CSS樣式。

有經驗的使用者在此會提出質疑:在CSS檔案中使用 import 語法將會拖慢載入速度,千萬別用!

是的,由於瀏覽器須先完全載入這個包含「import」語句的CSS檔案,然後才能再載入「import」語句中的檔案,整個載入流程會被阻塞住,需等待所有CSS檔案載入完成後才能繼續渲染(Render)過程,所以將比直接在檔案中平鋪CSS樣式的載入時間更長。

解決方法一樣是使用標準CSS語法預處理器(Pre-processor)來將使用到「import」語法的CSS檔案「扁平化」。即將「import」語法中讀到的檔案直接嵌入到原檔案中,以達到平鋪的目的。

如果 app_mobile.css 檔案的內容為

headers {
background-color: orange;
}
 
app_tablet.css 檔案的內容為
 
@media (min-width: 768px) {
headers {
background-color: black;
}
}
經過「Import Inlining」處理的檔案將變成如下
headers {
background-color: orange;
}

@media (min-width: 768px) {
headers {
background-color: black;
}
}
 
處理後原來共三個檔案會縮減為一個檔案,達成一樣使用效果的同時,還避免了效能上的疑慮。
 
在 provecss 專案,「Import Inlining」是其中一個主要與 myth 不同的特性。
如何安裝provecss
npm install -g provecss

使用命令行操作
provecss imprt.css imprt.out.css --import

加入「--import」參數即可啟用 import inlining 功能。

此外 provecss 還可以作為 node 函式庫或是 Grunt plugin 呼叫,更詳細的使用說明請參考 provecss 的 README。

五月 5, 2014
» 來自未來的CSS - CSS 變量

 CSS變量(CSS Variable)是我最近才注意到的新玩意。它要解決的問題其實跟已經行之有年的LESS或SASS相似,即讓 CSS 能用上變量(變數)。

語法像是這樣


:root {
  --main-color: orange;
}

body {
color: var(--main-color);
}
 
在一個 CSS 根元素中以「--」開頭定義CSS變量,在一般的CSS 樣式中使用「var(--)」來使用變量。

就如範例所示,只要改變一個變量的值,就可以改變整份CSS的參數。例如將「--main-color」變量的值改為「red」,則整個Body的color就會變成紅色。

這參考標準草案有多新?在目前所有的瀏覽器中,只有剛發佈的Firefox 29才有正式支援。

...對於暫時只有在特定瀏覽器上能運作的新功能,一般網頁開發者都是抱著敬謝不敏的態度。就算不提瀏覽器跨平台的支援不足,「CSS變量」一聽起來,跟原本的靜態CSS比起來,感覺就會有效能上的疑慮。

但是前陣子發現了 mythrework-vars工具,這些工具的作用是對使用標準/新 CSS 語法的 CSS 檔案預處理(pre-processing),將新的CSS變量語法轉換成向前相容的靜態語法。透過這樣的方式,開發者在開發時可以使用最新的CSS語法來撰寫更加結構化的CSS,而不需要使用額外的函式庫。同時在部署時可以透過標準CSS語法預處理器(Pre-processor)來將有瀏覽器相容/效能疑慮的 CSS 轉換成「現實版」的 CSS 語法,好讓現在的所有瀏覽器能識別來自未來的 CSS。

經過預處理後,CSS樣式表變成如下
body {
color: orange;
}
可以看見變量宣告與賦值的部分都直接被整合成靜態CSS了。

在開發 Gaia/webapp 的過程中,我們正遇到了類似的狀況:對於在 FIrefoxOS 平台上執行的 webapp 而言,1.4 版(對應Firefox 28)和以前的 FirefoxOS 版本也無法使用 CSS 變量,但是在未來的版本上卻肯定應該試試這些新網頁技術。對於一般的webapp開發者而言亦然。

於是我建立了 provecss 專案,provecss 專案吸收了 myth 的特性,但為 gaia 和 webapp 做了更多的調整。就 CSS 變量這特性而言,與 myth 不同的地方是 provecss 預設並不處理 CSS 變量。provecss 其他的功能,將在接下來的文章中進一步做說明。





如何安裝provecss

npm install -g provecss

使用命令行操作

provecss vars.css vars.out.css --vars

加入「--vars」參數即可啟用 CSS 變量取代功能。

此外 provecss 還可以作為 node 函式庫或是 Grunt plugin 呼叫,更詳細的使用說明請參考 provecss 的 README。

三月 19, 2014
» FoxBox and SummerOfCode14

FoxBox is the project that intent to provide a battery included Firefox OS build environment.


The goal of foxbox is to try any approach that make new user can do as less as possible to start the FirefoxOS development

Our first take is use vagrant with virtualbox to make major platform users can try FirefoxOS dev in VM.


It will be great to setup the current version of foxbox in your desktop environment
http://github.com/gasolin/foxbox

And record obstacles you encountered here https://github.com/gasolin/foxbox/issues?state=open.
There are some issues (but not the limit) that might be worth to do in the future version of foxbox.


Note that you require a desktop with INTEL VT-x/AMD-V hardware virtualization support(Windows8 or Mac already enabled it), at least 4GB RAM and about 10~40GB disk space(for gaia or full B2G development).


FoxBox has been approved by the Google Summer of Code administrator http://wiki.mozilla.org/Community:SummerOfCode14 , so its perfect time to step up, try FoxBox, fix issues that every others will encounter, save everybody's time and start make your own Firefox OS phone.

If you'd like to contribute FoxBox for SummerOfCode14. We expect you could find out the interesting topic you want to contribute or any other way that can better achieve FoxBox's goal.
 

一月 26, 2014
» 手機,平板,還是電腦?找出手邊設備隱藏的冨樫病毒

2013年過去,回顧過去幾年使用過不少設備。過去一年手頭上同時使用了Mac、Ubuntu、Firefox OS、Android、BlackBerry等系統的設備。Windows現在只有報稅時用到了。

到今年初,手上主要在使用的設備剩下了:

電腦:MacBook Air
閱讀器:Kindle Paper White
手機:多台切換中

因為工作性質,平常盯螢幕的時間太久了,因此在9月後買了功能更單純的 Kindle 閱讀器。

我的Kindle是登入Amazon.cn帳號,因此可以購買些簡體版書籍或消化一些透過Calibre上傳的電子書。但另外一個很重要的用途, 是搭配 Push to Kindle 瀏覽器插件,將原本會在電腦/平板上閱讀的長文章只留下文章本體並轉寄到Kindle中稍後閱讀。


說到我主力使用設備其中最主要的改變,還是整年中有意識地少使用平板


請不要誤會。我說的是「我」的情況。平板是非常適合接收、瀏覽訊息、遊戲的設備。比起PC,大多數人需要的其實是平板。它在許多情況下是更有生產力的選擇。


但對我來說,前年陸續使用了幾種作業系統的平板。平板比起PC無論是攜帶性還是操作性都非常方便,讓我在這段期間內多吸收了不少資訊。相對地在電腦前的時間也變少了。

相對地在電腦前的時間也變少了這是好事,也是壞事。
對於我的影響主要是表現地像樫病毒來襲,手上做的專案數目直線減少了。
偶而靈感來了的時候,由於手頭上沒有趁手的開發工具就錯過了。 

當我意識到這個情況,嘗試將手邊的平板處理掉後,今年各種想法的達成率確實提升許多。

當然計劃總是趕不上變化,去年參與了Firefox OS平板Demo版和開發者版的開發,其實平板還是用了不少阿 XD

十月 26, 2013
» e化政府怎麼做?提供行動版網頁,而不是App


台北市有個便民的服務叫 「1999台北市民當家熱線」,只要是跟公職部門有關的問題,如在公車上丟失東西、查詢號碼,甚至對公家機關服務不滿想投訴,只要拿起電話,撥「1999」,都會有人受理,找到適合的單位回覆,並追蹤處理狀況。一些透過「1999」反映的問題,還會轉化為上級單位的公文,正式行文要求負責單位回覆。

原來在公車上丟了東西,要先查對應客運公司服務中心電話/網站,找到電話號碼或網址,才能到對應窗口反映問題;對公家機關服務不滿意想投訴,要先查對應機關的電話或網址,或找到上一級機構聯絡窗口,才能反映問題,而且還要擔心會不會被「吃案」。整個過程的「交易成本」實在太高,讓大多數市民望而怯步,只能在私下抱怨政府不力。

有了「1999」服務之後,這些「交易成本」被政府吸收,市民只要

1. 拿起電話
2. 反映自己關心的問題
3. 等待回覆

即可,簡直就是人肉版的「Google Now」。

姑且不論弄這個服務所費幾何,又造成多少單位的額外負擔。至少就「便民」這結果而言,「1999」讓所有能夠打電話的市民,都有一個非常方便容易取得資訊、反映問題的管道。

這幾年政府單位開始大量產出各種App。由於政府並沒有相應技術,因此這些App多為外包。然而這些App的下載量似乎都不怎麼樣。這是什麼原因哩? 當然有很多可以抱怨的點,但如果要拿出一個大方向,我覺得一大部份原因也是「交易成本」的問題。

試想,一般民眾的日常生活中,政府單位的服務就像是自來水和電力一樣,除了停水停電外,不會特別意識到這些服務的重要性。當真的需要各單位的特定服務時,通常也只是非持續性的需求。

在這種使用情境下,該單位為了便民,提供了該單位的App。
使用者要用到該單位的服務,「只要」上應用商店搜尋,下載該服務App,開啓App後「就」可以使用了。

這樣的使用情境其實非常禁不起推敲:

1. 對於一年只使用幾次的服務,有需要先下載App才能使用嗎?更何況可能下載後打開App,才發現裡面提供的服務都不是我想要的,整個「交易成本」很高。

2.  使用者使用的系統平台不同。政府資源有限,使用尚未提供對應App系統平台的市民,難道就是二等市民嗎?萬一提供了該系統平台App,而該系統平台並未成功,負責發包的官員會不會哪天被追究圖利特定廠商?

簡而言之,對於使用頻率不高的服務,多數人還是寧願用行動裝置的瀏覽器直接連上機關的網頁查詢。於是這就牽扯到另一個問題:行動裝置連上政府網頁觀看的體驗不佳。

不少政府網頁還是上個10年的水準。大面積的圖片、Flash、塞滿整版面的資訊,完全沒考慮到使用行動設備瀏覽的體驗。根據今年的調查,台灣行動上網人口已經佔到全部上網人口的4成,而台北市的佔比應該更高。來自由心證一下,應至少5成使用者試過用行動裝置連上政府網站,而政府網站卻不能回應這近半受眾的需求,使得政府網站的功用大打折扣。

政府開發一款熱門平台的App,所達到的效果只是 854萬(4成上網人口,行動上網使用者) *  1/2(平台市佔率)* 應用商店到達率 (使用者搜尋到這款 App) * 應用安裝率 (不知乘起來有沒有1/100?) ~= 4萬+,於是除非追加預算特地推廣App,大多數政府App安裝數可能都小於這個數字...

與其如此,政府是否應顧好「便民」的根本,

1. 先提供基本款的「行動版網頁」,以服務逐年增加的使用行動設備/小螢幕的市民,
2. 並一併重新檢視原本桌面款網頁的機能,以提供更有效率的便民服務。
3. 對於使用頻率較高的政府服務,則可以透過「Open Data」,讓各平台開發者得以接取公開的API與資料,提供多樣性的服務。


十一月 23, 2009
» Enfin iPhone

R8077562
des feuilles.Central Park.New York.US

Enfin, j'ai acheté un iPhone à Taiwan. Quand j'étais aux etats-unis, j'utilisais souvent les portables qui sont fabriquées par ma compagnie. Bien que l'on ait bien travaillé sur eux, ils sont encore loins d'être parfaits.

Donc, j'ai décidé d'acheter un iPhone pour moi-même. Pour fabriquer de bons produits, on doit bien savoir les uns des competitors.Bah.... je sais c'est seulement un excuse pour mon achat. :p

l'iPhone est mieux que je le pense:  elegant, et rapide.

四月 5, 2009
» Introduction to 3G network

Introduction to 3G network.png

It's a shame not knowing common knowledge of 3G networks while working in a mobile phone manufacturer. Well, Obviously, some people do not think so. Here's the brief outline of radio network change: from first generation to 2G, 2.5G, and 3G. Although 4G is coming on its way, knowing current technologies will help catching up the new ones.

and here's the Introduction to 3G network in tree view for better reading.

biggo.com.tw

A Django site.