2015年12月12日 星期六

[stackedit] 如何在讓程式碼區塊顯示行號

stackedit 是可以讓你用 markdown 寫 blog的工具,這裡有清楚的介紹:
http://blog.unicsolution.com/2013/08/logdown.html

但預設程式碼區塊是沒有行號的,我發現只要利用 special attribute (http://michelf.ca/projects/php-markdown/extra/#spe-attr)就可以產生行號。
步驟為:
1. 修改設定 Settings / extension / markdown extra / syntax highlighter / prettify
2. 在程式碼區塊上增加 CSS class {.linenums}
因此語法如下:

 ``` java {.linenums}
 public class Myclass{
 ...
 }
 ```

結果:

  1. public class Myclass{
  2. private int a;
  3. private int b;
  4. protected String str;
  5. public void method(){
  6. }

2015年12月4日 星期五

eclipse typescript 開發筆記

palantir typescript plugin

https://github.com/palantir/eclipse-typescript
需要 kepler (4.3)
要自動compile .ts 需要設定
1. Window / Preference / Typescript
preference
2. 右鍵點擊project, configure / enable Typescript builder
3. Project properties / 設定路徑
folder

遇到issue:

debug

source map 可以正常運作,但ts檔要放在 browser 可以存取的路徑。在chrome中設定 breakpoint在 ts檔上,該行不會有高亮度顯示

從其github repository的活躍來看,palantiir plugin 比typec要多人使用

typecs

http://typecsdev.com
需要 kepler (4.3)
設定:
1. add typescript support
ts-support.png
2. project properties / typescript 中,設定source, output路徑

兩個plugin同時安裝,project properties中的設定項目似乎會被覆蓋。

線上 IDE

http://fiddlesalad.com/typescript/

取得Definition

資源

2015年11月15日 星期日

讀取鍵盤輸入問題(keyup, keydown, keypress)

若要讀取使用者的鍵盤輸入通常會聽 Keydown 事件,如:
String.fromCharCode(keydownEvent.keycode)
但這方法會將數字鍵盤的 1 的 keycode 轉成字母 a

其實同一個按鍵的 keydown.keycode 在各瀏覽器的的值極不一致,這篇專文 JavaScript Madness: Keyboard Events 有深入討論。

The keypress events are generally the easiest to work with.

結論就是聽 kepress event,並使用 keypress.which

原因:
On keydown and keyup events, the keycodes are not character codes, and this conversion will give wild results for many keys. There is no general portable way to convert keycodes to characters.

這篇提到 keydown 跟 keypress 當初設計的用意不同。
http://stackoverflow.com/questions/11030532/keypress-and-keyup-why-is-the-keycode-different
The events are for completely different purposes. Use keyup and keydown for identifying physical keys and keypress for identifying typed characters. The two are fundamentally different tasks with different events; don’t try to mix the two. In particular, keyCode on keypress events is usually redundant and shouldn’t be used (except in older IE, but see the linked document below for more on that); for printable keypresses it’s usually the same as which and charCode, although there is some variation between browsers.

這裡有展示各個 event 的 keycode
http://www.w3.org/2002/09/tests/keys.html

在 ZK 元件上設定 HTML attribute - 文法檢查

有些 HTML attribute, ZK 元件並不支援,像 HTML5 spellcheck,這時用 Client Attribute 就可以輕易加上去。
<textbox xmlns:ca="client/attribute" ca:spellcheck="true"/>
這樣 textbox 就擁有 browser 提供的文法檢查能力了。
Client Attribute 是很不錯的設計。雖然 ZK 元件是一個 UI 抽象層,但像這麼簡單的功能就不用做在元件層,這個功能可以直接操作底層 DOM element,彌補抽象層的不足,或可直接得益於底層,不用耗費人力去做一個對應元件 attribute。

iframe DOM 被移動造成重新載入

如果用 javascript 去搬動 iframe DOM 的位置, 瀏覽器會將其內容重新載入,這是現有 HTML 規格
> When an iframe element is inserted into a document that has a browsing context, the user agent must create a nested browsing context, and then process the iframe attributes for the "first time".
範例:
http://jsfiddle.net/pZ23B/
測試結果:
* Safari 3.1 / Win: reload
* Opera 9.5 / Win: reload
* IE10: reload
* IE7 / IE8: not reload
(部份摘自 https://bugzilla.mozilla.org/show_bug.cgi?id=254144)
參考:
* https://bugzilla.mozilla.org/show_bug.cgi?id=254144

2015年10月30日 星期五

IE 中 AJAX 請求被取消的問題

http://stackoverflow.com/questions/13390189/do-ajax-applications-that-use-post-requests-always-fail-in-internet-explorer
簡言之,如果伺服器 keep-alive 設定小於 60 秒 (IE 預設值), IE 就會持續使用一個已經被伺服器關掉的 HTTP 連線,如此會造成 AJAX 請求被中止,從 developer tool 上可以看到請求的狀態是 aborted。 console 也可以看到如下的錯誤訊息:
XMLHttpRequest: Network Error 0x2ef3
你可透過這個頁面來重製這個問題 http://pubdev.hitech.com/test.post.php
目前唯一的解法是是調整伺服器 keep-alive 設定,例如 Tomcat https://tomcat.apache.org/tomcat-6.0-doc/config/http.html

2014年9月1日 星期一

什麼是data centric web application

資料中心的網頁應用程式 (data centric web application) 有幾個特性:
1. 程式功能主要是針對資料的操作 (CRUD)
2. 通常用資料庫儲存資料
3. 存取資料的邏輯與顯示邏輯分開
一般 web application 若照三層式架構 (presentation, business, persistence) 設計應該都符合上述特性,可能 data centric 是要強調這類程式的業務邏輯主要集中在資料操作上。
References:
1. http://xataface.com/assets/dataface/about/presentations/Introduction_to_Dataface.pdf
2. http://msdn.microsoft.com/en-us/magazine/cc794279.aspx#id0090007