2015-11-25

Git repo 之間的 sync 操作步驟

這篇文章是 GitHub 作為 repo host,不過下列操作都沒有 depend on GitHub。或著說,就是不希望用 GitHub 的功能,所以才要有這些步驟,不然 pull request 應該可以解決大部分的狀況。

2015-11-17

試論述 Listbox 的 check 與 Image id 的關係

ZK 版本:6.5.3

故事是這樣開始的:畫面上有一個設定 checkmark=true 的 Listbox。每個 item 除了自動生出來的 checkbox 之外就是 Image,src 是用 data URI(所以基本上沒有 loading 時間的問題),也有設定 height 讓 Listbox 不會長得太可怕。也因此,使用者希望點圖片可以看到夠大的圖、但是又不希望出現 scroll bar。

所以當使用者點圖片的時候,就用 Executions.createComponents() 製造出一個 Window,然後設法讓圖片等比例縮小到長或寬撐滿整個 Window。Window 的程式碼長這樣(VM 就不附了):

<window apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('ScaleImageViewModel')" 
    closable="true" title="Image" width="90%" height="90%">

    <vlayout vflex="1" hflex="1">
        <div id="cave" vflex="1" hflex="1" style="overflow:auto;">
            <image id="image" src="@load(vm.image)" />
        </div>
        <hlayout hflex="1">
            <button label="Fit Window" w:onClick="resetRatio()" />
            <slider id="scale" hflex="1" w:onScroll="changeRatio()"/>
            <button label="Pre." onClick="@command('prev')" disabled="@load(vm.start)"/>
            <button label="Next" onClick="@command('next')" disabled="@load(vm.end)"/>
        </hlayout>
    </vlayout>
    <script defer="true"><![CDATA[
    zk.Widget.$("$cave").onAfterSize = function() {
        this.$super("onAfterSize");
        resize();
    }

    scaleWgt = zk.Widget.$("$scale");
    caveElmt = $("$cave")[0];
    imageElmt = $("$image")[0];
    imageOriginWidth = imageElmt.width;
    imageOriginHeight = imageElmt.height;

    resetRatio();
    ]]></script>
</window>

<script><![CDATA[
    var scaleWgt;
    var caveElmt;
    var imageElmt; 
    var imageOriginWidth;
    var imageOriginHeight;
    var ratio;

    function resetRatio() {
        var wRatio = caveElmt.offsetWidth / imageOriginWidth;
        var hRatio = caveElmt.offsetHeight / imageOriginHeight;
        setRatio(
            Math.min(
                (wRatio > 1) ? 1 : wRatio,  //不能比 100% 還大,所以最多壓成 1
                (hRatio > 1) ? 1 : hRatio
            )
        );
        scaleWgt.setCurpos(ratio * 100);
    }

    function resize() {
        imageElmt.width = imageOriginWidth * ratio;
        imageElmt.height = imageOriginHeight * ratio;
        console.log("[after] " + imageElmt.width + "x" + imageElmt.height);
    }

    function setRatio(value) {
        ratio = Math.min(1, value); //不能比 100% 還大,所以最多壓成 1
        resize();
    }

    //其實應該要可以直接 call setRatio(),只是 ZK 我實在...
    function changeRatio() {
        setRatio(scaleWgt.getCurpos() / 100);
    }
]]></script>

我想盡量讓事情都只停在 client side 就處理完成,是說我也不確定調整圖片大小這件事情在 server side 能不能順利解。總之,程式碼可能不夠精煉,而且有些莫名其妙地方是靠 trial and error 得到的可行解、完全不明所以…… 只能說我對 ZK 完全沒有愛,能在零零落落毫無章法的 ZK 文間當中湊出這些,我都覺得減壽三天了…… Zzz

好的,前情提要終於講完了,要開始進入正題了。用實際資料測試的時候發現,有些圖片就是無法改變大小(slider 也沒反應)。原本以為是圖片的問題,但是拿 data URI 的值直接塞 browser 能得到正確的 size……

在經過一番折騰之後,終於發現規律:

Listbox 有一個(以上)item 勾選,就會無法改變大小

既然確定是 ZK 搞出來的問題,那要懷疑的東西就少了一點。又一輪的 trial and error 後,終於發現:Image 的 id 不能是 “image”,不然 $("$iamge") 不知道會 select 到哪個 element 去。

是的,只要換個 id,一切統統都沒事了(為了保險起見,我試過 fullImagescaleImage,不保證其他值不會有問題 Zzz)。

WTF?這到底什麼鬼東西?為什麼 Listbox 有沒有 item 被勾選會影響到 $("$image") 的結果?那個 node 還是在 Window 裡頭(不是說 Window 有自己的 id space?)?而為什麼 ZUL 設定的 id 值對應到 JS / DOM 當中居然不是 unique 的?以後開發人員要自己讓 id 值 unique 嗎(不然有 bug 連要從哪裡開始懷疑起都不知道?)

雖然平常就有在 blame ZK,但是沒遇到過這麼令人傻眼的,這件事情足足讓我笑了十分鐘… lol

教練我想寫 GWT…… [淚目]


後來要修正其他功能的 bug,所以重寫了一次,關鍵部份還是一樣,只是程式碼變得清爽一點,茲更新如下:

<window apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('ScaleImageViewModel')" 
    closable="true" title="Image" width="90%" height="90%">

    <vlayout vflex="1" hflex="1">
        <div id="cave" vflex="1" hflex="1" style="overflow:auto;">
            <image id="scaleImage" src="@load(vm.image)">
                <attribute w:name="setSrc">
                function (src) {
                    this.$setSrc(src);
                    resetRatio();
                }
                </attribute>
            </image>
        </div>
        <hlayout hflex="1">
            <button label="Fit Window" w:onClick="resetRatio()" />
            <slider id="scale" hflex="1" w:onScroll="changeRatio()"/>
            <button label="Pre." onClick="@command('prev')" disabled="@load(vm.start)"/>
            <button label="Next" onClick="@command('next')" disabled="@load(vm.end)"/>
        </hlayout>
    </vlayout>
    <script defer="true">
    //第一次 Image.setSrc() 不會真正 resetRatio(),所以得在 defer 的 script 指定來一次
    resetRatio();
    </script>
</window>

<script><![CDATA[
function resetRatio() {
    var imageElmt = $("$scaleImage")[0];

    if (!imageElmt) { return; }

    var tempImage = new Image();
    tempImage.src = imageElmt.src;

    var caveElmt = $("$cave")[0];
    var wRatio = caveElmt.offsetWidth / tempImage.width;
    var hRatio = caveElmt.offsetHeight / tempImage.height;
    setRatio(
        Math.min(
            (wRatio > 1) ? 1 : wRatio,  //不能比 100% 還大,所以最多壓成 1
            (hRatio > 1) ? 1 : hRatio
        )
    );
    zk.Widget.$("$scale").setCurpos(ratio * 100);
}

function resize() {
    var imageElmt = $("$scaleImage")[0];
    var tempImage = new Image();
    tempImage.src = imageElmt.src;
    imageElmt.width = tempImage.width * ratio;
    imageElmt.height = tempImage.height * ratio;
}

/** value 的值域理論上是 [0,1] **/
function setRatio(value) {
    ratio = Math.min(1, value); //不能比 100% 還大,所以最多壓成 1
    resize();
}

//其實應該要可以直接 call setRatio(),只是 ZK 我實在無法... Orz
function changeRatio() {
    setRatio(zk.Widget.$("$scale").getCurpos() / 100);
}
]]></script>

2015-04-23

C / C ++ 程式設計師使用 JS 的四個階段

原文網址:http://games.greggman.com/game/the-4-stages-of-a-cc-programmer-using-javascript/

第一階段:三年前

這是什麼愚蠢的 script 語言啦?我才沒有用過咧… 但是它是一個 script 語言、然後 script 語言就是爛。除了作 form 驗證之外根本沒啥鳥用。誰在乎阿?我永遠不會用它… 除非我的個人網站打算防止 submit 兩次之類的事情。

第二階段:現在

唉… 這個 project 必須用 JS 作一些東西。幹他媽的爛語言,全域變數是什麼鬼?大括號不能定義變數 scope 又是哪招?好吧,至少我還找到一些愚蠢的方法可以弄出 class 跟繼承行為。

第三階段:三~五年間

哇靠… 如果到處都用 closure、而且用對方法,JS 實在超有趣的你都不知道。非同步的功能直接可以用、所有 API 都是這樣運作的。我可以把一個東西放到螢幕上而不需要 14 個 library、也不用搞了一個禮拜才找到取得一個 window 並顯示出來的方法。我不用搞清楚如何在 7 個不同的平台上用 17 個語言顯示字型。我可以下載圖片、用 canvas 跟 WebGL 畫出東西、播放聲音、存取攝影機跟麥克風… 都花不了什麼功夫。只要 refresh 馬上可以得到回應。外觀設計就丟給設計師,我不用寫一卡車的程式碼;要展示東西給別人看也只要丟個連結給他就好。這實在是太棒啦~

第四階段:五年後

我要重新回去寫一些 C / C++ 的程式。靠北阿… 沒辦法 compile 了?為什麼 IDE 沒辦法再載入這個 project 了?應該是有人改了格式?馬的咧… 為什麼不用 libglfobar link(譯註:原文就是這個字,意義不明 @_@)?搞什麼阿… 寫一個泛用的 callback 要 200 行 meta-template 程式碼?幹他媽的為什麼要搞這麼複雜?阿?你想看看發生啥事情喔?抱歉,我沒辦法 compile 成 Mac 版給你耶… 他媽的 C / C++ 去死吧……

2014-11-29

評即時開票網站

選舉日的下午剛好沒事,所以找點事情作,於是就想來分析比較一下各個即時開票網站的 UI / UX / whatever… [逃]

選了六個網站,分別是:

前面是電視媒體的網站、後面是平面媒體的網站,至於其他先後順序完全無意義。

觀察時間從 16:2x~18:2x,環境為 Win7 + Chrome 39(沒有任何 plugin),螢幕解析度是 1920 * 1080。基本上只評論輸入網址後看到的東西,沒有參雜其他操作。

TVBS

  • 首頁顯示範圍:台北市長
  • 顯示台灣地圖:無
  • 手動更新按鈕:有
  • 最後更新時間:有
  • 得票比率的文字或圖表:無
  • 資料來源:沒有明確列出

提供的資訊量很少,完全沒打算提供其他圖表輔助。layout 簡單到差點以為看的是放大過後的手機版(說不定還真的是 XD)。

三立

  • 首頁顯示範圍:台北市長
  • 顯示台灣地圖:無
  • 手動更新按鈕:無
  • 最後更新時間:無,但有顯示幾秒後刷新。
  • 得票比率的文字或圖表:無
  • 資料來源:三立、TVBS、民視、中視、中選會

提供「xx 秒後刷新」的資訊遠比顯示「最後更新時間」來得好(根本沒列出最後更新時間的網站,去死吧 [指])。提供的資訊貌似很多,但只是列出不同資料來源的開票數,實在沒太大意義。

layout 中規中矩,不太能吐槽、但是也找不出可以稱讚的部份。

東森

  • 首頁顯示範圍:六都、每區最多顯示三位候選人得票數
  • 顯示台灣地圖:無
  • 手動更新按鈕:有
  • 最後更新時間:應該沒有
  • 得票比率的文字或圖表:無
  • 資料來源:應該是多家,挑某一家的資料顯示

網頁技術大概是六個網站當中最落後的,PHP 不意外 [喂]。懶得用一些工具檢測,純粹肉眼觀察可能不太準確,但大抵上「資料更新」是整個頁面重新 refresh(WTF),然後 server 似乎又不夠強壯、static resource 可能也沒塞 cache 相關 header(WTF),常常 CSS 沒 load 進來導致頁面裸奔、圖檔出不來。甚至看到好幾次某一塊區域資料出不來還出現很 raw 也很 low 的 database error 訊息。

layout 也一無可取之處,藍綠色底圖固定在最上頭、高度居然只有大概 800px 左右,以下全部留白。真不知道到底是哪家網頁公司可以在這年頭做出這樣子的作品而且東森居然還讓他驗收過……

自由時報

  • 首頁顯示範圍:基隆、台北、台中、彰化、雲林、嘉義、澎湖。每區均顯示全部候選人得票數
  • 顯示台灣地圖:有
    • 移到各縣市會跳出 tooltip 顯示該區全部縣市長候選人的得票數
    • 點選後列出八個資料來源的得票數、轄內行政區地圖
  • 手動更新按鈕:無
  • 最後更新時間:有,而且是各區各自獨立的更新時間
  • 得票比率的文字或圖表:無
  • 資料來源:七都資料來源不盡相同,例如台北市用 TVBS、台中市用中天。

整體看起來挑不出什麼毛病,畫面乾淨、運作正常、layout 簡單但是一目了然…… 都在正常水準之上。唯一的問題就是為什麼要列那七個縣市?既不是六都、好像也不是激烈戰區,完全看不出選擇依據…… [抓頭]

聯合報

  • 首頁顯示範圍:直轄市、縣市候選人全部列出
  • 顯示台灣地圖:有
    • 移到各縣市會跳出 tooltip 顯示該區全部縣市長候選人的得票數
    • 無法點選
    • 地圖可以放大縮小,但是沒啥變化。
  • 手動更新按鈕:無
  • 最後更新時間:無
  • 得票比率的文字或圖表:長條圖
  • 資料來源:沒有明確列出

聯合報最大的敗筆就是那張地圖。有一堆無謂的功能(DnD、縮放)沒有給予對應的效果,然後操作反應緩慢、縮放之後 DnD 還有可能自己跳回去 default 的縮放 level…… WTF

聯合報的亮點在於他有提供長條圖、還幫忙算出 / 畫出「預估當選門檻」的灰色虛線,讓開票不是只有數字 / 比率跳動,還能讓人體會到「還剩多遠」的目標感。

中國時報

  • 首頁顯示範圍:六都目前最高票的候選人
  • 顯示台灣地圖:有
    • 移到各縣市會跳出 tooltip,顯示領先的候選人以及政黨得票率
    • 點選後列出前三名候選人得票長條圖、政黨得票圓餅圖、轄內行政區地圖
  • 手動更新按鈕:無
  • 最後更新時間:無
  • 得票比率的文字或圖表:文字顯示得票率
  • 資料來源:沒有明確列出

唯一徹底以政黨為呈現角度的網站、也是唯一用即時開票資訊在地圖上顯示領先政黨顏色的網站。是好是壞很難講,也許對於台灣民眾來講反而直覺有效?另外只顯示領先者的得票數、得票比率,我覺得不是很好的設計。

資料更新似乎也是整頁 refresh(有 blink、relayout 的現象),但呈現效果沒有像東森那樣悲劇就是了。

其他

自由時報跟中國時報的地圖都是用 SVG 作的(聯合報懶得看),我們終於徹底脫離 Flash 了嗎? XD

2014-06-01

[新手止難] 為什麼有些東西要弄得那麼複雜?

昨日驚見一文〈「互相之臉」所謂何用〉 [註1],
討論文章數目,為數月來爪哇連線版鮮見現象。
拜讀過各家之言後,回顧提問者之疑……

此時夜半人靜、身困馬桶不得其門而出
沉吟許久,上下交迫間,腦中浮現劣思緒緒
顧不得少年得痔之慮,返回書桌振鍵急敲,以求一吐為快
乃成於此篇陋文,敗筆處處
還望各方高人雅士撥冗指點一二,以正方家


敝痞在資訊領域打混唬爛多年
整理出〈資訊三大唬爛金句〉
其中首要綱領,為挪用錢鍾書所言:

道不虛明,有為而發  

或用俗語釋之

殺頭生意有人作  
賠本生意沒人幹  

雖凡天下學問,約莫均可套用此理
但惟資訊領域,可全然貫穿通透

只因此門學問均屬人為打造,鮮少摻雜自然現象
間或參雜不確定性,也可用機率模型解釋
又因效率為首,一切循規蹈矩最為便利
是謂「資訊領域少例外,規格讀通各處行」

所以,當吾人遇一理論或一設計,艱澀難懂
正當唸之無味棄之被當,國罵聲不絕與耳時
不妨憶此金句,自問之:

懶惰乃人類之美德  
若發明者不夠懶惰,安可流傳至今?

抱此想法續讀,不僅情緒平復、易於心領神會
倘使發現更懶惰之法,圖林獎豈非垂手可得?


今吾人已瞭解其所敘述之架構
但僅見「超頭」處處 [註2]
再三盤算依然覺得:此乃蝕本生意,作不得! 作不得!
莫非敝痞之虎爛金句有誤? 非也…

在此,逆舉老子之說,搭配程式設計為例:

小國寡民,使有什佰之器而不用,使民重死而不遠徒。  
雖有舟輿,無所乘之;雖有甲兵,無所陳之;使民復結繩而用之。  
甘其食,美其服,安其居,樂其俗。  
鄰國相望,雞犬之聲相聞,民至老死不相往來。

將「國」類比至「程式規模」
將「民」類比至「程式設計師」
將「舟輿」、「甲兵」類比至各式軟體架構

若是程式規模小彼此之間關係簡單
又或是無須與其他程式設計師往來
吾人可任意而為之,無所窒礙
此時亦難窺得舟輿甲兵之利,也就無從了解軟體架構之妙

禪宗分南北,北宗主漸修,南宗主頓悟
若漸修之途不可得,何妨留至來日機到緣成,自然頓悟?

敝痞此說,並非低漸修而貴頓悟
漸修之途不可省,則來日方能有頓悟之緣
即便汝輩天縱英名,亦不能自恃而於此處偷懶
以免淪於「重新再造輪」之窘境,慎之! 慎之!

[註1] 「互相之臉」亦有人美譯為「臉間」
其原文為 interface,常見地球語稱之「介面」 \囧/

[註2] 「超頭」其原文為 overhead \囧/


原文寫於 2006.04.15 PTT Java 版。

嗯… 那個時候國文比較好 [笑]