javascript

mobile web debug tool(jsconsole)

如果要在android的browser debug，最早期的方式，是使用adb logcat然後過濾掉其他訊息，只顯示browser的log，而ios上的Safari，則是可在設定，直接在mobile上觀看log(在mac上，可以使用類似chrome同樣的除錯介面)。但是這種除錯方式不易，只能單方面看到browser訊息，並沒辦法直接從pc上對瀏覽器下指令，而jsconsole剛好可以解決這個問題。

jsconsole提供了一個console page(jsconsole.com)，會產出一個listen key，同時test page(開發者寫得測試頁面)也會include一隻script，在透過server讓test page和console page溝通。

step 1 在console page輸入以下code：

:listen

server會回傳

Creating connection...
Connected to "2A049E81-520B-4074-BB06-45BE8ADBE9E1"
<script src="http://jsconsole.com/remote.js?2A049E81-520B-4074-BB06-45BE8ADBE9E1"></script>

step 2 將回傳的script貼到test page:

<html>
  <head>
     <script src="http://jsconsole.com/remote.js?2A049E81-520B-4074-BB06-45BE8ADBE9E1"></script>
  </head>
<body>

</body>
</html>

這樣就配置完成，可以直接在console page，輸入javascript，也能同時接收test page裡的console.log。

step 3 在console page輸入:

alert("test");

就會看到在mobile上，跑出訊息視窗。技術猜測應該是使用long polling或server push之類技術。

 

mobile chrome debug：

那如果使用chrome browser，可以直接在mobile選項，點選設定→開發人員工具→啟用usb網頁偵錯。

接著只要在終端機鍵入以下指令：

adb forward tcp:9222 localabstract:chrome_devtools_remote

然後在到pc上，打開chrome，在網址上輸入localhost:9222，就可以直接使用pc上的除錯工具了，比起jsconsle，對於開發者相對於友善多了。可以參考remote debugging

java

tomcat install apr and tomcat-native

今天將tomcat6換成tomcat7時，出現以下的資訊。

The APR based Apache Tomcat Native library which allows optimal performance in production environments was not found on the java.library.path: /usr/lib/jvm/java-6-sun-1.6.0.26/jre/lib/amd64/server:/usr/lib/jvm/java-6-sun-1.6.0.26/jre/lib/amd64:/usr/lib/jvm/java-6-sun-1.6.0.26/jre/../lib/amd64:/usr/java/packages/lib/amd64:/usr/lib64:/lib64:/lib:/usr/lib

找尋解決方法，發現可透過apr和tomcat native解決。apr主要是為了提高靜態檔案的處理性能，以apache2.0為核心的http service，除了前面所提的，還有改變加密方式等…。

依照官方說明，需先安裝：

debain based
    apt-get install libapr1.0-dev libssl-dev

rpm based
    yum install apr-devel openssl-devel
 
**接著去官方[download apr](http://apr.apache.org/download.cgi)[ and apr-util](http://apr.apache.org/download.cgi)：** 
wget http://ftp.mirror.tw/pub/apache/apr/apr-1.4.6.tar.gz
wget http://ftp.mirror.tw/pub/apache//apr/apr-util-1.4.1.tar.gz
 
**解壓縮和編譯apr：** 
tar zxvf apr-1.4.6.tar.gz   
cd apr-1.4.6.tar.gz  
./configure  
make  
make install
 
**解壓縮和編譯apr-util：** 
tar zxvf apr-util-1.4.1.tar.gz  
cd apr-util-1.4.1.tar.gz  
./configure --with-apr=/usr/local/apr  
make  
make install
 
**安装 tomcat-native：** 
cd /usr/local/apache-tomcat-7.0.30/bin  
tar zxvf tomcat-native.tar.gz  
cd tomcat-native-1.1.14-src/jni/native  
./configure --with-apr=/usr/local/apr --with-java-home=/usr/java/jdk1.6.0_26  
make  
make install
 
**配置apr的環境：** 
vi /etc/profile  
# 在檔案最後面，加入以下内容  
export LD_LIBRARY_PATH=$LD_LIBRARY_PATH:/usr/local/apr/lib  
# 使profile生效
source /etc/profile
 
**啟動tomcat和顯示資訊：** 
bin/startup.sh  
head logs/catalina.out
javascript

translate and left top

常常在chrome發現一些奇怪的現象，工作上會接觸到一些地圖相關的東西，在windows7的chrome拖拉map時，會發現某些marker會漂移，而且在每次會漂移的marker，都不一定是同一個，有點像是random。並且漂移時，是沒辦法click(css的pointer也指標消失了)，ipad上的safari也有相同問題，但是同樣的在linux上的chrome卻不會有此現象，於是就試了一下google map，發現在windows7上是正常的，於是就把left和top，改用translate取代，發現就可以正常顯示了。

以下html結構：

<div class="container" style="position:relative;overflow:hidden;">
    <div id="dragContainer" style="left:101px;top:25px;position:absolute;">
        <div class="map-image" style="position:absolute;">
            <img src="..." style="position:absolute;top:0px;left:0px;"/>
            <img src="..." style="position:absolute;top:256px;left:0px;"/>
            <img src="..." style="position:absolute;top:512px;left:0px;"/>
            ....
        <div>
        <div class="overlay" style="position::absolute;">
            <div style="width:25px;height:25px;position:absolute;left:50px;top:50px;cursor:pointer;">
                <img src="..." style="width:25px;height:25px;" />
            </div>
            ...
        </div>
    </div>
</div>

實際上在移動的是dragContainer，map-image是顯示地圖圖片，overlay則是顯示相關marker。

linux

linux tree(樹狀檔案結構)

安裝tree：

sudo apt-get install tree

tree command：

-L 顯示最大到第幾層。(ex:tree -L 3)
-p 顯示權限。
-D 最後更改時間。
-i 不以階層狀顯示。
-d 只顯示目錄。

example：

tree -L 2

result：

.
|-- backbone.js
|-- backbone-min.js
|-- docs
|   |-- backbone.html
|   |-- backbone-localstorage.html
|   |-- docco.css
|   |-- images
|   |-- jsl.conf
|   `-- todos.html
|-- examples
|   |-- backbone-localstorage.js
|   `-- todos
|-- index.html
|-- index.js
|-- LICENSE
|-- package.json
|-- Rakefile
|-- README.md
`-- test
    |-- collection.js
    |-- events.js
    |-- model.coffee
    |-- model.js
    |-- noconflict.js
    |-- router.js
    |-- setdomlibrary.js
    |-- speed.js
    |-- sync.js
    |-- test-ender.html
    |-- test.html
    |-- test-zepto.html
    |-- vendor
    `-- view.js

轉換成html：

command:
    tree -H {domain}
ex:
    tree -H http://www.sparrowflyer.co.cc/ > tree.html
scss

使用yaml編譯scss

安裝scss_tool

sudo easy_install -U distribute
sudo pip install scss_tools

style.scss：

$width:1308px
$leftWidth:200px
#content {                                                                                                                                                                   
    width: 1308px;

    .left {
        float: left;
        width:$leftWidth;    
    }   
    .right {
        float: left;
        width:$width-$leftWidth;
    }   

}

配置scss.yaml：

---

monitor:
    # path to Scss directory for monitoring
    scss_dir:
        scss

compiler:
    # verbosity of message output
    verbosity: 2

    # compress
    compress: True

    # debug info
    debug_info: False

    # root of static files
    static_root:
        static

    # directory to output sprite images
    asset_root:
        static/asset

    # paths to import
    load_paths: [
        static/scss
    ]

    # path of input files and path of file to output
    scss_files: [
        [scss/style.scss, static/style.css],
    ]

...

將scss編譯成css：

scss_monitor -c scss.yaml