手機瀏覽器捲軸的使用體驗

花了點時間研究在手機上使用 home/end 的操作方式, 這和切換分頁一樣, 各家瀏覽器都發揮不少創意

• ASUS Transformer 和 Padfone2 修改了內建瀏覽器, 在捲動時右側不只會有捲軸, 捲軸較大且有上下移動的箭頭 (參考圖片來源), 可以用手按住拖放到畫面上任何一個位置, 實際用起來還滿方便
• Opera Mobile 在捲動速度夠快時, 會出現一個箭頭的按鈕 (參考圖片來源), 點了以後會跑到畫面的邊緣。往上捲會出現向上的箭頭, 功能同桌機的 Home; 反之是向下箭頭, 功能同 End
• Dolphin 使用手勢, 點畫面左下角開始輸入手勢, 並內建 Home/End 的手勢

就我個人的偏好來說, 手勢不夠直覺, 雖然在用桌機 Firefox 時, 我有用 mouse gesture 來取代 Home/End, 但對大眾來說, 這個功能需要學習

Opera Mobile 的作法有些小問題, 箭頭按鈕太常出現會有一點惱人, 但捲動速度不夠快不會出來, 部份使用者怎麼用都不會察覺這功能。這一年來的經驗告訴我, 使用者點擊或捲動的速度, 快慢的差距還頗大的, 若只依自己使用習慣設計速度區間, 下場會很慘

ASUS 的作法最直覺, 也沒什麼副作用, 只是實作上辛苦一些就是了。

再回來看 Opera Mobile 的作法, 若需要的功能就只有 Home/End, 這個作法滿直覺易用的, 且會比 ASUS 的作法再好用一點點 (影響不大)。令我好奇的是, Opera Mobile 按下捲動按鈕後, 會快速地逐步捲到底, 而不像桌機按 Home/End 那般跳到底

琢磨了一陣子才想通, 原因是這個功能是捲動後才會浮現按鈕, 按下按鈕後繼續維持捲動的感覺, 但用飛快的速度捲到底, 才有一致的操作感。反之, 若按下去就跳到畫面底部, 會有一點突兀, 使用感覺稍微差了一點。使用者體驗有許多細節沒有搭好, 用起來的感覺就是怪怪的, 但又很難說出來, 滿特別的一門專業

查 C/C++ symbol 定義的方法

記一下目前習慣找 SYMBOL 定義的方法, 只是模糊的片段經驗, 日後再補充完整一些

用 gj

在命令列打: gj SYMBOL class 或 gj SYMBOL struct 找類別定義

找不到的話, 有可能 SYMBOL 是用 code-gen 或巨集產生的。

• 檢查一下 mkid 時有沒有漏掉 code-gen 的檔案, 再重建索引: $ mkid -m FILE_LIST ( 格式見 Language map - ID database utilities )
• 可用 $ g++ -E TARGET.cpp -IINCLUDE_DIR 展開檔案, 再回頭看 SYMBOL 是否是巨集產生的。

另外可用 gj SYMBOL void 找函式定義 (針對無傳回值的情況), 或是 gj SYMBOL 再用 ".h" 過濾只留 header 檔。

Btw, 要找 symbol 被使用的地方的話, 就直接 gj SYMBOL。

用 gdb

在 gdb 裡用 ptype VAR 會列出 VAR 的型別資訊

2013-12-08 更新

後來依自己使用習慣在 gj 加了一些功能, 像是用 gj -d1 SYMBOL 找定義或宣告, 用 gj -s LITERAL 找可能的 symbol 名稱, 詳見 gj 在 github 上的說明。

記得填好 html meta data 和之前踏過 mobile browser 的雷

雜亂記一下前陣子寫網頁的心得。

之前試了 "margin: auto;" 要做置中效果, 結果在 IE 9 無效, 看到 Margin auto doesn't work in IE? 才知道是忘了填 doctype

另外 一次Ajax查错的经历 提到沒填 http header 沒返回 charset=utf-8, 造成 AJAX 在 IE 上的錯誤。一些 meta data 記得要填好, 避免遇到神奇難解的錯。

順便記一下以前遇到其它的雷:

• Chrome on mobile 預設 viewport 用 980 來 render 網頁, 若最小頁寬為 1024 會看到畫面 render 後稍微超出畫面, 然後自動縮回螢幕寬, 但是右側邊緣畫面就破了, 最後只好改用 980 為最小頁寬
• Safari on mobile 不支援 1x1 的 png, 半透明效果會不對, 改用 2x2 就好了, 若不是看到 iphone - Alpha transparent PNGs not displaying correctly in Mobile Safari, 我怎麼也不會想到要這樣解 ...

以前作網站要跨 IE 6, 7, 8 很痛苦, 現在作網站少了 IE 6, 7 的困擾, 但多了 mobile browser 的困擾。只有長期做這行的人, 才知道其中的心酸吧。不過現在 Chrome on mobile 和 Safari on mobile (iOS 6) 都有提供搭配桌機 Chrome/Safari 使用 web inspector, 應該會輕鬆一些, 我還沒試用過就是了。

css 同欄高是件困難的事

若搜尋 css same column height 會看到很多解法, Equal Height Columns with Cross-Browser CSS and No Hacks 是我看到比較漂亮的解法, 並附有詳細說明為什麼如此複雜。

看完後第一印象是想到: Give Up and Use Tables。雖然用 table 好像很遜, 但是有時用 table 可省下不少工夫。為了不要用複雜的方法做同欄高, 也不要用感覺很遜的 table, 最後我是直接用 css 設死欄高 ..., 當然, 這招遇到欄高變化很大時就糗了, 等遇到再回來面對這問題吧。

svn merge 用到的一些指令

備忘一下

svn merge --accept postpone -r BEGIN:END FROM TO

• --accept 表示之後再處理 conflict, 別一個個問
• BEGIN:END 表示合併從 BEGIN 開始到 END 的變化, 比方 10:15 表示會含入 11 到 15 的 commits

svn revert -R DIR

放棄更新 DIR 目錄下的檔案, merge 到不知在做什麼時, 用這個全部重來

svn status | grep "^.\{0,6\}C"

• 找出有 conflict 的檔案

svn resolved FILE

• 注意是 resolved

https 到 http 沒有 referrer

筆記一下讀到 BobChao the Blogger: HTTPS 的 referrer 狀況筆記 的心得和延伸想法。

近年來強調安全瀏覽, 大網站倡導全程使用 https 連線, 但是從 https 連到 http 時不會傳 referrer, 原因應該是 https 全程加密, 若從 https 連到 http 時有加 referrer, 會讓原本外部不知道的網址流出去。比方我先點 https://a.b.c/, 然後點網頁內連結到 https:/a.b.c/secret.html, 再點連結到外部的 http://x.y.z/, 這樣 x.y.z 網站就會得知 https:/a.b.c/secret.html。

但令我不解的是 https 連到不同網域 https 時, 還是會送 referrer, 所以上述的推論要修正成: 防範的對像不是 x.y.z, 而是其它用 http 的網站 (??) 以及竊聽封包的人。全程使用 https 不會被竊聽到網址, 而最後一步從 https 到 http 時, 若有設 referrer, 就會被竊聽得知。這是我目前想得到唯一合理的解釋了, 雖說我還是覺得沒什麼道理, 挺多 a.b.c 要連到別的網站時, 即使有 https 可用, 仍可選擇 http 以避免送出 referrer, 但這顯然和現今大家關心的方向相反。

於是, 為了兼顧安全性, 以及網站能正確統計 referrer, Google 和 Facebook 會先跳到內部同網址的 http 連結, 再轉到外面 http 的連結。雖然會多加一個 click 增加內部成本, 但為了能讓其它網站了解本站 (Google / Facebook) 為他們帶來的可觀流量, 仍是值得花的代價。

apache 的 response time 很慢

注意到某台 web server 反應速度非常慢, 依序檢查相關資訊如下:

• tail -f /var/log/apache2/access.log 可知 request per second 頗高, 但不確定有多少
• vmstat 回報 ram, cpu, io 都沒什麼 load
• 用 chrome developer tool 看 (Network 頁), 幾乎都耗在 waiting, 傳資料時間仍然很短
• 家裡電腦 ping web server < 200ms
• wget localhost 也要等個數秒以上

綜合以上資訊可知, 機器應該可以負擔, 不是 CPU / RAM / disk IO / 頻寬 / 連線不穩等問題。

依照以前寫 network programming 的經驗, 當 concurrent new connection 量很高, 高出接收 connection 的 daemon 能負擔的量時, 得等一陣子才能連上線, 剩下的處理時間到不會增加多少。所以推測此時 web server 應該是類似的情況, 所以要從縮短受理新 connection 的時間下手。

參考 Apache Performance Tuning 的說明, 最後提高 MaxClients, 縮短 KeepAliveTimeout, 情況就變正常了。

文中提到計算 MaxClients 的相關指令挺方便的:

ps -ylC httpd --sort:rss: 得知 httpd 用的 memory
free -k: 得知目前記憶體用量

MaxClients = 可用記憶體 / 單一 httpd 用的記憶體

在 vim 內直接搜尋專案目錄下的字串

以前用 id-utils 為底, 寫了個小程式 gj, 用來搜索目錄下的關鍵字。基本上 gj 已滿足我八成的需求, 不過有時還是覺得若能在vim 內搜尋就更方便, 不用複製目前游標下的字串、開新視窗、貼上字串、執行 gj。

最近找到 ack.vim, 發現完全符合我的需求, 只不過它是用 ack 搜尋, 不是用 id-utils, 檔案多的時候搜尋速度較慢。ack.vim 用 vim 的 grep + quickfix 達成目的, 只要改用 id-utils 作索引和搜尋即可, 剩下部份可直接拿來用, 沒花多少工夫就改好了。

安裝方式如下:

1. sudo apt-get install id-utils
2. wget https://raw.github.com/fcamel/configs/master/.vim/plugin/ack.vim && mv ack.vim /.vim/plugin/
3. wget https://raw.github.com/fcamel/configs/master/bin/gid_with_col.py && chmod +x gid_with_col.py && mv gid_with_col.py /bin

4. $ cat << EOF >> ~/.vimrc
   let g:ackprg="gid_with_col.py"
   nnoremap <silent> <Leader>g :Ack<CR>
   EOF
   

5. $ cd /path/to/project && mkid # 建立索引

接下來在專案目錄下用 vim 編輯檔案, 按 \g 就會搜索目前游目標下的字串, 在下方開啟索尋結果。或是用 :Ack <pattern> <pattern2> ... 做更細的搜尋。

用法參見 ack.vim:

o    to open (same as enter)
go   to preview file (open but maintain focus on ack.vim results)
t    to open in new tab
T    to open in new tab silently
v    to open in vertical split
gv   to open in vertical split silently
q    to close the quickfix window

不過我將 t 的功能註解掉了, 需要的人請自行修改 ack.vim 去掉註解。

Ubuntu 遇錯誤訊息時畫面會閃礫並失去 focus

比方說在 bash 打 "ls alksjdkl" 再按 tab, 或在 Eclipse 裡搜不到字串時, 系統會閃礫一下然後失去 focus, 還得 alt-tab 切回來很麻煩。

狀況實在太難描述不知該怎麼 google, 只好自己想想到可能的原因, 還有亂搜一些關鍵字。最後發覺這和 PC 喇叭的嗶聲有關, bash 在 inputrc 裡關掉嗶聲後就好了。

但 Eclipse 不知要怎麼關掉嗶聲, 這個情況降低音量不會有效, 只要有觸發嗶聲就會發生這現象。換句話說, 在 bash 上打 echo -e '\a' 就會如此。

後來想到該不會是以前為了除錯移掉 pulse audio 的副作用, 試著重裝 pulse audio 沒效, 只好先還原 VM 到移除 pulse audio 之前。果真 echo -e '\a' 不會閃礫, 確認和 '\a' 以及聲音驅動有關。

下一步就是用 dpkg -l | grep audio和 dpkg -l | grep audio 找出以前裝過的套件, 然後安裝回目前的 VM:

sudo aptitude install gstreamer0.10-pulseaudio libcanberra-pulse libpulse-browse0 libpulse-dev libpulse-mainloop-glib0 libpulse0 libsdl1.2debian-pulseaudio pulseaudio pulseaudio-esound-compat pulseaudio-module-bluetooth pulseaudio-module-gconf pulseaudio-module-x11 pulseaudio-utils gstreamer0.10-pulseaudio libcanberra-pulse libpulse-browse0 libpulse-dev libpulse-mainloop-glib0 libpulse0 libsdl1.2debian-pulseaudio pulseaudio pulseaudio-esound-compat pulseaudio-module-bluetooth pulseaudio-module-gconf pulseaudio-module-x11 pulseaudio-utils

最後問題就解決啦!

ps. Gnome Linux Disable / Turn Off Hardware Beep Sound For Terminal:有提到各種關掉嗶聲的作法。