2013年11月19日 星期二

拆解使用純 CSS 做的碼表

難得看到一個簡單的純 CSS 卻含控制功能的網頁 Stopwatch in CSS, 分析了一下怎麼做到的, 才發覺 CSS 有許多神奇的語法:

顯示

1. 時分秒的內容一個由 00 ~ 59 共60個文字數字組成的長方形, 用 overflow:hidden + line height 只顯示第一列; 毫秒則是 00 ~ 99

2. 文字內容用 content 產生, 不用圖片的好處是可以用 CSS 做出更多微調 http://www.w3schools.com/cssref/pr_gen_content.asp

3. 設定 position: relative, 然後用 animation 控制 top offset。 各區塊用不同長度循環播放, 比方說秒是以 60s 為單位, 將60列文字用 60 步逐步往上捲出畫面 http://www.w3schools.com/css/css3_animations.asp

控制

1. 用 selector ":target" 改變 CSS 的屬性, 藉此控制 animation-play-state http://www.w3schools.com/cssref/sel_target.asp

#start:target 對到running, 其它 (包含預設) 對到 paused

在 CSS 中要做出點擊控制效果的關鍵可能就是 :target。由 URL 的 anchor 記錄狀態, 不同狀態提供不同 CSS 屬性, 就能切換不同畫面了。

2. stop 則是連結, 直接重新載入同一頁面

2013年11月18日 星期一

gdb "backtrace full" 不會停的可能原因

當程式有狀況的時候, 可以用下面的指令取得所有 thread 的 backtrace 含帶區域變數的資訊:

gdb --batch --quiet -ex 'thread apply all backtrace full' -p PID

但是以前遇過幾次下完指令後不會結束的狀況, 不知道確切原因為何。最近剛好遇到一個容易重製的情境, 總算找到一種可能的原因。答案是: 有區域變數使用 reference 指向 dangle pointer, 於是 gdb 讀不出區域變數的資訊, 變成輸出到這個 reference 的時候, 持續輸出一堆 "Cannot access memory ..." 而不會結束。

若區域變數是指標, gdb 只會輸出指標的值。但 reference 等同於一般變數 (不知「非指標非參考」的正式名稱是什麼), gdb 會輸出整個變數 (物件) 的值, 於是 reference 指向 dangle pointer 就成了糟糕的組合。

我遇到的情況 dangle pointer 剛好含有 vector, 可能因此找不到 vector 的結束點而不會停止。Btw, 原本想說試看看用 python gdb 看看能不能自己寫個 backtrace 不會卡住, 可惜用 python gdb 一樣會卡住, 沒有丟出 exception。

為什麼無法轉型 char ** 為 const char ** ?

參見 Why am I getting an error converting a Foo** --> Foo const**?, C++ FAQ。這裡摘錄文中附的例子。

class Foo {
public:
  void modify();  // make some modification to the this object
};

int main()
{
  const Foo x;
  Foo* p;
  Foo const** q = &p;  // q now points to p; this is (fortunately!) an error
  *q = &x;             // p now points to x
  p->modify();         // Ouch: modifies a const Foo!!
  ...
}

C/C++ 的轉型實在是一個我總是以為我搞清楚了, 但其實我從來沒搞清楚的東西 ...。想必過沒多久又會忘了原因吧。

2013年11月3日 星期日

LICEcap: 錄制桌機操作輸出 GIF 的工具

原本想找錄制 terminal 操作輸出成 GIF 檔的工具, 一直找不到。結果找到一個更完整更好用的工具: LICEcap, 可以錄 Windows 或 Mac OS X 的操作。安裝和使用都超簡單的。下載執行就會用了。

gj: 閱讀 C/C++ 原始碼的好幫手

兩年前剛開始接觸大型 C++ 專案時, 研究了一下尋找 symbol 相關位置的工具。最後依自己的需求, 做了一個小工具 gj。經歷了近兩年的使用和改進, gj 已成為我工作環境裡不可或缺的一塊了。

gj 的特點是:

  • 建立索引和找尋 symbol 的時間極短, 沾 ID Utils 的光, 不費任何力氣就有這樣的成果。
  • 盡可能不要漏掉可能的相關檔案, 並提供互動過濾的機制, 方便找出目標。
  • 和 vim 整合一起使用。

這裡有 gj demo 的畫面。

雖說目前已可應付我自己的九成需求, 還是有不少可改進的地方, 只是用到的情境較少就懶得補了。大家若有興趣使用, 歡迎提供建議。愈多人有需求, 愈有動力來改。或是用過 gj 後, 覺得有其它和 vim 整合得好工具, 也歡迎推薦。

在 Fedora 下裝 id-utils

Fedora 似乎因為執行檔撞名,而沒有提供 id-utils 的套件 ,但這是使用 gj 的必要套件,只好自己編。從官網抓好 tarball ,解開來編譯 (./configure && make)就是了。 但編譯後會遇到錯誤: ./stdio.h:10...