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.js 的 Viz() 可以接收三種 format，分別是：

   • dot
   • svg
   • ps

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

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

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，所以就沒有實際去試試看了……

以上簡單報告……

關於無名小站的碎念們

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

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

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

徵短期 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 繞不出來，只能請你自行吸收。

以上，歡迎來信 [淚目]

我值多少錢？

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

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

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

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

你要四分鐘還是四小時？

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

蘋果日報

（標題）幾分鐘可解決的故障 高鐵竟停擺4小時

台灣大學電機工程學系特聘教授郭斯彥說，電子系統雖存有許多無法意料狀況，但搞到全台停駛，「很令人訝異」，其實重開機對系統安全影響不大，只需幾分鐘，高鐵太沒經驗了。

聯合報

台日工程師四小時搶修無效下，最後竟然只靠「重開機」一個簡單的動作，就讓系統順利運行。

正系統與備用系統更同時「掛點」，連在場的日籍原廠顧問也無法排除，前後折騰四小時，直到上午九時決定重開機，沒想到這樣就解決了。

說真的，我不懂為甚麼記者（喔... 居然還有教授）可以寫出這種話，誰來給我翻譯翻譯.......

《讓子彈飛》真好用......

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

Google 開始 Blink

最近一個可能不會太熱門的話題是 Google Chrome 開始搞自己的 browser rendering engine。還不知道的人可以看一下這幾個 reference：

• OIO's Developer Blog：The web starts to blink: Chrome drops WebKit as its rendering engine – announces Blink
• DontCare Blog：網路開始「閃爍（Blink）」（是上一篇的中文翻譯 \囧/）
• 36氪：历史在重演：从KHTML到WebKit，再到Blink

我想在今年年初 Opera 宣佈改用 WebKit 的時候，應該有不少搞網頁前端的人鬆了一口氣。雖然不可能完全不用測試就保證一定正常，但是至少炸掉的機率小了很多。結果隔了兩個月左右，Google 宣佈開始搞 Blink，然後 Opera 也會跟著跳槽。