2013-11-20

viz.js 使用小心得

上一篇提到了我最後選擇了 viz.js,經過一段被炸飛的使用時間之後,來補充一些實戰上的其他心得…… [淚目]

  1. 用 viz.js 來 render DOT 碼時,如果 label 有 \,畫面上不會顯示出來。
  2. DOT 碼中有中文(或著說非 ASCII),在 GWT 當中執行時會一直炸 parse 錯誤。原本以為是 GWT 的問題、因為把同樣的 DOT 碼用純 HTML 來跑就(幾乎)沒遇到問題。後來爬了一下 viz.js 的 issue,發現這個 issue 14,原來這是一個已知的 bug。後頭有一個日本人提供了一個堪稱我看過最詭異的 work around。假如原本的 JS 要這樣寫:

    var dot = DOT_GENERATOR();
    var svg = Viz(dot, "svg");
    

    現在要改成:

    var dot = DOT_GENERATOR();
    var svg = Viz(dot + new Array(dot.lengh).join(" "), "svg");
    

    真的有效,但是也真 WTF 的不明所以 [死]。

  3. 有一個 repo RiveraGroup/viz.js 是從 viz.js fork 出去的。它有直接提供 viz.js 檔、README.MD 還有列出可以 support 哪些 GraphViz 的 layout、以及輸出的 format。不過在不嚴謹的測試之下,發現 RiveraGroup 的版本跟 viz.js 已經有所不同,至少 viz.js 不支援 fdp 這個 layout(例如這個範例),但是 RiveraGroup 的版本有(每次執行的結果還不一樣 ==”)。
  4. 承上,viz.jsViz() 可以接收三種 format,分別是:

    • dot
    • svg
    • ps

    在 browser 的環境下,好像只有 svg 這個 format 比較有意義……

至於其他關於 DOT 語言的炸點…… 就是另外一個故事了 [淚目]

2013-11-08

JS 版 GraphViz 初步 survey 結果

正在寫一個輔助工作的系統。需要把一堆有順序關係的資料轉換成圖表。

一開始先是找到 arborjs.org 的這個 showcase,我還蠻喜歡它的效果,看著 node 飄來飄去想要找一個比較舒服的位置,很有療癒的效果(謎之聲:WTF?)。但是這個 project 實在找不到文件,正在從 cdoe 裡頭試圖 farm 用法的時候, tkcn 大人給了一個關鍵字:「GraphViz」。

幹,原來有這種東西 [死]

GraphViz 弄了一個叫做 dot 的描述語言,來表達 node 跟 node 之間的關係、以及 node 的形式等等。至於圖會長得怎樣就看 rendering engine 怎麼噴(是說我也不是很 care 啦 XD)。既然知道了這個好東西,就開始找看看有沒有 JS 版的 rendering engine。

一開始找到的是 livizjs 這個 repo,也有 demo 頁面。不過一開始在 Chrome 上頭就炸了 exception 不能順利執行,倒是 Firefox 沒有這個問題。然後… 這也是一個沒有說明文件的東西… 而且一堆路徑、DOM id 還 hardcode 寫死。到這裡也都還撐得住。等到寫完資料轉成 dot 格式,然後用正式資料去 run 的時候就悲劇了。SVG 的大小不知道在那一行程式當中被限定住,node 數少的時候沒有問題,node 數一多就爆邊界、還不知道要怎麼調整。接連 combo 攻擊下我放棄了,重新 survey。

最後找到 viz.js 這個 repo,基本上也是顯示成 SVG,不過不像 livizjs 有提供運算過程、動畫之類的花俏功能。雖然依然沒有文件 [淚目],不過用起來很簡單,只要把 dot 碼傳進物件中就好:

<script src="viz/viz.js"></script>
<script>
    var svg = Viz("digraph { a -> b; }", "svg");
    document.getElementById("foo").innerHTML = svg;
<script>

是說不知道還支援什麼輸出 type?

viz.js 唯一的怪哏就是它沒有提供 viz.js 檔。作者把 viz.js 當作 binary 檔案…. [炸],估計是要自己跑 Makefile?不過也無所謂,直接連範例網頁,抓上頭的 viz.js 檔就可以正常執行。目前看起來都沒啥太大問題,只要你不考究畫出來的圖夠不夠好看…… [遠目]


Update v1:

要在 GWT 當中用也十分簡單,簡單到不想包一個 class 來處理 XD。首先,當然要在 host page 補上 viz.js 檔(同上),然後在 Java 中:

//JSNI 的 method
private native String genGraphViz(String dot) /*-{
    return $wnd.Viz(dot, "svg");
}-*/;

//準備一個 HTML widget,這裡直接用 UiBinder 寫了
@UiField HTML svg;

//某個神奇的角落
svg.setHTML(genGraphViz(DOC_CODE));

你看,是不是很簡單呢? [麥兜母調]


Update V2

另外找到這個純正 GWT 的 GraphicViz project:Exagraph,不過我(還)很滿意現在的 viz.js,所以就沒有實際去試試看了……

以上簡單報告……

2013-08-31

關於無名小站的碎念們

警告:這是一篇自艾自怨、自以為是的碎念文,更可怕的是內容還沒有經過嚴格考證,請小心服用。

今早的網路新聞看到這則消息:無名小站將在今年 12.26 正式收攤。

對於俗稱六年級尾~七年級頭(尤其有住過大學宿舍)的人而言,說「看著無名小站走完它的一生」應該不為過,甚至很多人都曾經參與其中。

2013-08-01

徵短期 Java / PHP programmer

一言以蔽之:分攤我的 coding 工作,coding 以外的雜事一律可以不用管、也不用負擔專案成敗。

老闆排的 schedule 被老闆自己搞爆了 [慘笑],但是九月中要跟合作廠商進行測試的時程不會變動,因此允許我找外援來試圖趕上期望目標。

雖然是徵救火隊,但並不是要救一個搞砸的案子,而是有很多東西根本還沒開始寫,需要人力去實做。也因為是徵救火隊、或著說老闆還沒(辦法)瞭解後續有一卡車的程式需要寫,所以暫時只能保障到 9 月底的薪水,想只作 8 月也可以、part-time 也可以(徵得到可用戰力我就謝天謝地了 [淚目])。

在家工作即可,理論上不需要去公司(我也沒有每天去),每週工作時間(40hr)自己分配,但需定期跟我 meeting,因此台北縣市較佳(我的極限是新竹以北 or 宜蘭),男性較佳(meeting 時間地點比較不受限)。

這個專案同時包括 Java 與 PHP 的程式,所以下面除了「共同必備能力」之外,也分別列出 Java 與 PHP 工作內容,但是不需要 Java / PHP 都會、實際上工只會寫其中一種語言、全部需求人數也只有一人


共同必備能力

  • 用 GMail、Google Document(Drive)
  • 有 Github 帳號、至少要會 fetch、commit、切換 branch
  • 基本程式設計能力與 OO 觀念
  • 中英文盲打

Java Programmer

  • (必備)要會使用 Eclipse
  • (必備)基礎 JSP / Servlet
  • GAE + Objectify
  • GWT(可能來不及用)

主要工作內容是撰寫 GAE(Google App Engine)上的程式,包含 Web API 與數據資料呈現。


PHP Programmer

  • (必備)會用 PDO
  • (必備)會用 CLI 執行 PHP 程式
  • (必備)會基礎 SQL 語法、至少 CRUD 沒問題
  • 熟 SQLite

主要工作內容是將數據寫進資料庫中、處理 socket server / websocket client 的通訊內容。可以解這個 issue 的話,私人另外發 3K 的獎金 [遮臉]。


有意應徵者,請來信 psmonkey@dontcareabout.us,請至少具備下列內容:
  • 本名 or 暱稱
  • 手機號碼
  • 預計工作一個月 or 兩個月
    • 希望 part-time 者請告知每個禮拜可付出的工時數
  • 什麼時候可以開始工作

如果信件內容沒有給上述資訊,就請原諒我不花時間回覆了。


待遇方面,我有建議權但沒有最終決定權,我只能保證全職(160hr/month)一定超過 30K/month,如果公司給的薪水低於我的建議值,我會私人另外補到 5K/month(最多)。

另外補充一下工時的計算方式。每個 task 會問你需要多少時間,然後再依開出的時間為依據來協議出一個雙方認可的預計工時,每週的工時計算就以此為基準。也就是說,如果 Task A 你開 10hr,我覺得只要 5hr,協議結果是 8hr,那麼即使最後花了 10hr 完成,我還是當 8hr 來計算。當然,萬一實做之後才發現有大坑大雷,我也不會不通情理硬是照算;如果只是單純的 logic error 繞不出來,只能請你自行吸收。

以上,歡迎來信 [淚目]

2013-06-16

我值多少錢?

我值多少錢? 22K? 220K?

已經好多年了,被這類的新聞 / 網路文章搞得很厭煩,前幾天不小心在陌生人的 G+ 上頭 murmur 了幾句,然後被另一個陌生人說:「你這人根本就是奴隸性格,被馴化的太好了。(大意,非原文)」我在營幕後頭只有苦笑了,這些年因為有女朋友的關係,開始有為五斗米靠腰折腰的傾向,但是,奴性重? lol

所以我決定把這件事情寫一寫。我通常寫完一個題目(短時間內)就不會再想它了,算是一種免錢(還可以賺廣告費)的心裡治療吧?最近腦袋要想的事情太多了,得清理一下 XD

註:以下不保證樣本代表性(可能只是我衰),但保證真人真事。另外我只知道資訊業(或著說軟體業)的狀況,其他行業不清楚,所以也未必能類推至其他行業。

2013-04-27

你要四分鐘還是四小時?

高鐵出現故障,然後偉大的台灣記者說出了下面這種話:

蘋果日報
(標題)幾分鐘可解決的故障 高鐵竟停擺4小時
台灣大學電機工程學系特聘教授郭斯彥說,電子系統雖存有許多無法意料狀況,但搞到全台停駛,「很令人訝異」,其實重開機對系統安全影響不大,只需幾分鐘,高鐵太沒經驗了。
聯合報
台日工程師四小時搶修無效下,最後竟然只靠「重開機」一個簡單的動作,就讓系統順利運行。
正系統與備用系統更同時「掛點」,連在場的日籍原廠顧問也無法排除,前後折騰四小時,直到上午九時決定重開機,沒想到這樣就解決了。
說真的,我不懂為甚麼記者(喔... 居然還有教授)可以寫出這種話,誰來給我翻譯翻譯.......
《讓子彈飛》真好用......

作工程、哪怕只是資訊工程 XD,最怕的就是驚喜了(除非系統能正常運作叫做驚喜 lol)。等等,我要請偉大的記者跟偉大的郭斯彥教授翻譯翻譯的不是驚喜,而是:「什麼叫做解決問題?」

2013-04-09

Google 開始 Blink

最近一個可能不會太熱門的話題是 Google Chrome 開始搞自己的 browser rendering engine。還不知道的人可以看一下這幾個 reference:
我想在今年年初 Opera 宣佈改用 WebKit 的時候,應該有不少搞網頁前端的人鬆了一口氣。雖然不可能完全不用測試就保證一定正常,但是至少炸掉的機率小了很多。結果隔了兩個月左右,Google 宣佈開始搞 Blink,然後 Opera 也會跟著跳槽。