[WordPress 外掛] wp-fb-autoconnect 整合Facebook 單點登入

由於Facebook佔有可怕的用戶數，
因此現在的網站服務都希望讓使用者不用在重新填寫註冊即能成為會員。
這類的技術可稱為單點登入(Single Sign On, SSO)，
wp-fb-autoconnect 外掛可以快速滿足我們的需求。

先前準備

使用前需先申請一個Facebook 應用程式
https://developers.facebook.com/apps


填入應用程式資料： 顯示名稱與類別即可

之後填入安全驗證碼即可成功建立完成

[WordPress 外掛] Pie Register 使用者註冊神器

每個網站一定都需要會有使用者註冊功能。
搜尋了一下google，發現有 Pie Register 這個好用的神器，
包含避免垃圾帳號註冊、驗證信通知、欄位驗證、帳號邀請碼等等。

安裝完畢後，側欄選單即可看到Pie Register的功能列了。

別忘了在設定->一般設定，打開成員資格設定!!

下載位址：
http://wordpress.org/plugins/pie-register/

也有網友依簡體中文的檔案改寫了繁體中文版，
有需要的話就下載我已經安裝好的這包吧
https://drive.google.com/file/d/0BwHz8c9SZ2F2ZUFnX1RXT0R6TVk/view?usp=sharing

[WordPress 外掛] codestyling-localization 協助你快速建立外掛的多國語言檔

下載了woocommerce之後發現有的地方的中文化尚未完全，
查了一下，原來有支援多國翻譯的工作外掛：codestyling-localization

安裝過後會在工具裡面多了一個本地化的功能，接下來就可以看到你想要翻譯的外掛目前的語言資訊!!

下載位址：
http://wordpress.org/plugins/codestyling-localization/installation/

[測試工具] Browserstack 雲端測試平台

做web專案需要使用不同的作業系統與瀏覽器來組合測試，

現在可以透過browser stack來快速完成我們的需求:D 

Live, Web-Based Browser Testing

Instant access to all desktop and mobile browsers.
Say goodbye to your setup of virtual machines and devices.

http://www.browserstack.com/

不過免費帳號只有二十分鐘的試用限制!! 殘念

[Eclipse] 設定Tomcat的JVM Heap size

記錄一下JVM heap size的設定方法：

Step1: 點擊二下你要設定的Tomcat server

Step2: Ecipse會開啟一個Overview的設定，接著點擊Open Launch configuration

Step3: 點擊在Arguments 的tab，可看到VM arguments的設定區塊，填入你要的JVM參數。

結論：
原本裡面已有一個預設的${build_files:-Xms256m -Xmx512m}，一開始有試著填這裡面的大小來看Heap size有沒有改變，結果好像無效，就把它砍了，自已設定。
不過跑Memory leak的測試程式，竟然跑不爆XD，殘念!!還是回到部署到Tomcat Server做測試Orz

[Java] Java heap: Shallow and retained sizes

最近在試MAT工具找客戶的問題，快速筆記一下:D


參考：
Memory Analyzer tool(MAT)分析内存泄漏---理解Retained Heap、Shallow Heap、GC Root
<实战> 通过分析Heap Dump 来了解 Memory Leak ,Retained Heap,Shallow Heap
Shallow and retained sizes

[PHP] virtPHP讓一個機器可以裝很多不同版本的php

virtPHP is a tool to create isolated PHP environments.

https://github.com/virtphp/virtphp

[Tomcat] Windows Tomcat6 記憶體設定

簡單記錄tomcat6 cmd操作的過程，適用於tomcat7。

操作說明
安裝完tomcat6後，你可以在bin路徑看到 tomcat6.exe與 tomcat6w.exe。

tomcat6.exe負責啟動Tomcat service application
tomcat6w.exe則提供許多cmd指令來監控tomcat，請使用管理員權限打開命令提示字元，即可正常使用指令集。

編輯組態檔

tomcat6w.exe //ES// 

[WordPress 外掛] 本地端手動安裝WooCommerce

不透過FTP Server來安裝wp外掛

下載wooCommerce
http://www.woothemes.com/woocommerce/

將檔案放至你的wp的外掛資料夾
wordpress->wp-content->plugins->woocommerce

登入後台，點選安裝外掛，啟用woocommerce即可

安裝後會新增相關的woocommerce的資料表，如下圖

Log rotation 機制

查資料發現的tool，如果你的log檔愈來愈大的時候，就需求實作log rotation的機制。
cronolog就是幫我們解決這件事。 詳細資料請參考官網: http://cronolog.org/

***

參考:
使用 cronolog 作 Apache log 的分割處理

[Eclipse] Windows 啟動tomcat時，偵測port已被其他tomcat server 佔用

可以透過cmd line的指令，哪些process id佔了8080 port，指令如下:

$>netstat -o -a -n | findstr :8080

[Eclipse] 新增Tomcat Servers 的檢視TAB

記錄一下如何新增一個view tab，以
window -> Show view -> Other (會彈出更多的選項)

[TOMCAT] 利用Eclipse Memory Analyzer 來分析heap dump file

記錄一下MAT的操作心得

如何取得java heap dump

請再catalina.sh啟動Java heap dump的設定

JAVA_OPTS="$JAVA_OPTS -XX:+HeapDumpOnOutOfMemoryError -XX:HeapDumpPath=/usr/local/TOMCAT/logs/heap-$(date +%Y-%m%d-%H%M).dump"

-XX:+HeapDumpOnOutOfMemoryError 打開heap dump
-XX:HeapDumpPath heap dump要產生的路徑

[Wordpress] 解決資料庫連線錯誤安裝設定

為了幫朋友架一個簡單的購物車系統只好下海玩一下了，由於好久沒有裝wordpress了，

預設的DB的主機位址打了localhost:3306一直讓我拿到資料庫連線失敗的錯誤呀，還好改了127.0.0.1就正常了，太腦了記錄一下:D

***

直接改wp-config.php會比較快一點，還有不要隨便拿root來使用 XD

XAMPP 快速安裝PHP開發環境

好像大家都用這套XAMPP快速安裝呀XD，虧我還一個一個設定。

http://www.apachefriends.org/zh_tw/index.html

[MySQL] ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/usr/local/MYSQL/var/lib/mysql/mysql.sock' (2)

今天使用了以下指令無法要登進去mysql時噴出了錯誤

mysql -h 127.0.0.1 -u root -ppassword

錯誤訊息
ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/usr/local/MYSQL/var/lib/mysql/mysql.sock' (2)

結果加個-h參數就正常了XD，真奇怪
mysql -h 127.0.0.1 -u root -ppassword

[Blogger HACK] 提供使用者閱讀方便的"回到上層"按鈕整合

很多部落格的文章的內容愈來愈長時，
都會提供回到最上層的按鈕供使用者快速捲到最上層。
想要快速整合嗎?
可以參考這篇文章
http://www.allbloggertricks.com/2013/04/scroll-to-top-jquery-button-for-blogger.html (這網站超多blogger的技巧可以參考!!)

[Javascript] javascript 的 logger system

利用javascript寫出類JAVA的log4j 元件

http://log4javascript.org/
持續有在維護的專案，基於Java log4j設計而成

http://log4js.berlios.de/ => 已死
作者改放到github上啦 http://stritti.github.io/log4js/

之後再來補個範例:D

[Blogger HACK] 套用Bootstrap的選單導航列

這周把網誌多加了選單導航列功能，感覺比較有助於使用者查詢資料。
由於美編設計不是很在行XD，所以就找了Bootstrap來套。
記錄一下修改方法，有興趣的朋友可以試試。

開始修改

Step1: 首先進到管理介面，點選範本 => 編輯HTML，如下圖示

Step2: 在範本內容搜尋字串結尾，置入bootstrap CSS樣式的URL

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"></link>

[AngularJS] AngularJS Directive 整合 jQuery plugin

之前都寫很多的jquery外掛蠻想了解跟Angular到底整合的程度。
雖然蠻多人都說要丟掉jquery才對XD，基於好奇還是找了相關資料來讀一讀。

Correct way to integrate Jquery plugins in Angular.js
Combining AngularJS with existing Components
An approach to use jQuery Plugins with AngularJS

AngularJS Directives Tutorial

[jQuery Plugins] 影片在bootstrap carousel中時，當影片播放時如何停止carousel

很多網站的banner都會使用bootstrap carousel這個外掛，
當使用者點擊carousel的影片播放時，需要暫停carousel自動換頁的動作。

目前影片是採用Vimeo，所以你可以使用Froogaloop這個元件來取得Vimeo的控制。
完整範例可參考:http://developer.vimeo.com/player/js-api

一開始在用的時候，沒有認真看文件的說明，導致AddEvent的事件完全無動作，大家要注意嵌入的影片格式要包含api=1與player_id=


相關範例如下：

        var $myCarousel = $("#carousel-iangel");
        $myCarousel.on("slide.bs.carousel", function(event) {
            $.console("change slide");
            var $currentSlide = $myCarousel.find(".active iframe");
            // exit if there"s no iframe, i.e. if this is just an image and not a video player
            if (!$currentSlide.length) { return; }
            
            // pass that iframe into Froogaloop, and call api("pause") on it.
            var player = Froogaloop($currentSlide[0]);
            player.api("pause");
        });

        
        var iframe = $("#videoIntro")[0],
            player = $f(iframe); //$f 這是Froogaloop提供的方法

        // When the player is ready, add listeners for pause, finish, and playProgress
        player.addEvent("ready", function() {
            player.addEvent("play", function(id) {
                // $.console("id:" + id + " play");
                $myCarousel.carousel("pause");
            });
            player.addEvent("pause", function(id) {
                // $.console("id:" + id + " pause");
                $myCarousel.carousel("pause");
            });
            player.addEvent("finish", function(id) {
                // $.console("id:" + id + " finish");
                $myCarousel.carousel("cycle");
            });
            player.addEvent("loadProgress", function(data, id) {
                // $.console(data.seconds + "s played");
            });
        });

[VIM] 如何做全選+複製

常常會用的VIM指令

Reference:

http://stackoverflow.com/questions/1620018/vi-editor-copy-all-the-lines-to-clipboard

You should yank the text to the * or + registers:

gg"*yG

Explanation:

• gg
  • gets the cursor to the first character of the file
• "*y
  • Starts a yank command to the register * from the first line, until...
• G
  • go the end of the file

[Shell] 利用 Shell Script 製作選單

如果想要用shellscript寫出程式執行選單可參考以下範例。 拿來寫一些每天常常會打的指令蠻方便的:D

#!/bin/bash
# Bash Menu Script Example

PS3='Please enter your choice: '
options=("Option 1" "Option 2" "Option 3" "Quit")
select opt in "${options[@]}"
do
    case $opt in
        "Option 1")
            echo "you chose choice 1"
            ;;
        "Option 2")
            echo "you chose choice 2"
            ;;
        "Option 3")
            echo "you chose choice 3"
            ;;
        "Quit")
            break
            ;;
        *) echo invalid option;;
    esac
done

[Chrome APP] POSTMAN - multipart/form-data 上傳檔案

postman是一個好用的reset client app，
如果你要透過他來測試相關上傳api時，
記得content-type要設multipart/form-data(久久用一次都會漏掉，筆記)。
不然server會回傳415的http status

[HTML] 加了上標與下標字體

有產品的LOGO需要顯示plus的符號，也可以應用在數字公式上
順便筆記一下

上標文字或符號，英文是 superscript => HTML 標籤
下標文字或符號，英文是 subscript => HTML 標籤 <sub>

範例:

$("body").append("A+");

[Javascript] js寫的拉霸機遊戲

可應用在抽獎介面的拉霸機遊戲 http://odhyan.com/slot/

[MSSQL] SQL JOIN 圖文說明

在FB看到人家的分享文，值得好好收藏:D

[JSP] IE8 無法下載檔案

最近客戶遇到在IE8不能下載檔案的問題，需要加了一些cache的header即可解決。
請參考微軟的說明:http://support.microsoft.com/kb/316431 範例如下：

String ua = request.getHeader("User-Agent");
         if(ua != null){
          //System.out.println("user-agent:" + ua);
          if(ua.indexOf("MSIE 8.0") > 0){
           response.setHeader("Cache-Control","private");
                    response.setHeader("Pragma","private");
          }
         }

[Java] 如何將上傳streaming透過Http Client再上傳到另外一個Server

目前有一個需求是要將上傳api拿到的Stream再透過REST API上傳至另一個儲存空間。

採用的架構是透過Java Jersey + Apache HttpClient 4.3

測試範例如下：

[Java] 下載檔案的中文編碼錯誤如何解決

當透過瀏覽器下載檔案時，需要處理不同瀏覽器對檔案名稱該如何正確編碼的問題。
可以參考[2]的實驗結果。

目前針對IE採用UrlEncode，chrome與firefox採用Mimetype base64編碼，其他未偵到的也都採用base64 :D，base64編碼可直接使用 MimeUtility.encodeText(fileName, "UTF-8", "B");即可。

範例碼如下：

String userBrowser = request.getHeader(HEADER_USER_AGENT);
       
       if(userBrowser != null){
        
        log.debug(String.format("User agent: %s", userBrowser));
        if(userBrowser.toLowerCase().indexOf("mozilla") > -1
          && userBrowser.toLowerCase().indexOf("msie") < 0 
          && userBrowser.toLowerCase().indexOf("chrome") < 0){
         
         log.debug("Detect 'FireFox' browser");
//         Mozilla/5.0 (Windows NT 6.1; WOW64; rv:25.0) Gecko/20100101 Firefox/25.0

         fileName = MimeUtility.encodeText(fileName, "UTF-8", "B");
         
        }else if(userBrowser.toLowerCase().indexOf("msie") > -1){
        
         log.debug("Detect 'IE' browser");
//         Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/6.0; MATP)
         //cosa url encoder

         fileName = URLEncoder.encode(fileName);  
         
        }else{
        
//         Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.57 Safari/537.36
         log.debug("Common attachment");
         
         fileName = MimeUtility.encodeText(fileName, "UTF-8", "B");
        }
       }
       else{
        
        log.debug("Cannot find User-Agent header");
        
//        encoding - the encoding to be used. Currently supported values are "B" and "Q".
//        If this parameter is null, then the "Q" encoding is used if most of characters to be encoded are in the ASCII charset, otherwise "B" encoding is used.
        fileName = MimeUtility.encodeText(fileName, "UTF-8", "B");

       }
       
       log.debug("Filename encoded:" + fileName);
       String contentDisposition = String.format("%s ;filename=\"%s\"", valOfDisposition, fileName);

       log.debug("Content diposition:" + contentDisposition);
       builder.header(HEADER_CONTENT_DISPOSITION,contentDisposition);

測試檔案:
ライセンス期限切中文中文kumokura_010507.exe

Base64編碼:

=?UTF-8?B?44Op44Kk44K744Oz44K55pyf6ZmQ5YiH5Lit5paH5Lit5paHa3Vt?= =?UTF-8?B?b2t1cmFfMDEwNTA3LmV4ZQ==?=

參考:
[1] 錯誤訊息：「Internet Explorer cannot download a file (Internet Explorer 無法下載檔案)」

[2] Unicode网页中上传下载文件时发生文件名乱码的问题

[jQuery plugin] jQuery validatation 文件

寫網站如果使用jquery的話，一定對jquery validation這個外掛很熟。 今天寫一些功能的時候，找到了一個介紹如何使用的網站:D 有興趣的人可以參考： http://jqueryvalidation.org/

[jQuery API] 如何使用$ajax進行 multiple-part/form-data 傳輸

這幾天整合summernote編輯器的上傳，
順便記錄一下如何使用jquery $ajax進行multiple-part的上傳方式

var formdata = new FormData();
//指定欄位的name與binary string
    formdata.append("fileToUpload", file);
    $.ajax({
        data: formdata,
        type: "POST",
        url: "your_api/upload_imgur/" + uid,
        // cache: false,
        contentType: false,
        // dataType: "json",//用這個叫api會404
        processData: false,
        success: function(rJSON) {
            $.console("send file callback:");
}
});

參考https://github.com/HackerWins/summernote/issues/72

[jQuery] 如何控制scroll到指定的元素位置

今天剛好用到順便記錄一下，這個方法不用在使用任何外掛 :D 來源位址: http://stackoverflow.com/questions/832860/how-to-scroll-the-window-using-jquery-scrollto-function

$('html, body').animate({scrollTop: $("#page").offset().top}, 2000);

jQuer

Twitter 上面的前端神人列表XD

剛從google上找到的Twitter神人列表：

https://twitter.com/frontendrescue/cool-people/members

[jQuery] beforeunload 踩到雷

由於在處理某個議題了，加入監聽beforeunload事件，目前由於有透過window.location.href進行檔案下載的動作，好死不死在chrome，也會因為這個指令而跑到beforeunload的事件。

google找到了對岸的實驗結果(http://www.w3help.org/zh-cn/causes/BX2047)，如下表，不過應該在這瀏覽器會更新的時代只能僅供參考，要自已實驗XD

执行结果汇总入表：

	IE	Firefox	Chrome Safari	Opera
关闭当前浏览器窗口	事件被触发	事件被触发	事件被触发	不支持该事件
导航到另一个进入一个新的地址或选择一个喜欢的位置	事件被触发	事件被触发	事件被触发	不支持该事件
单击后退，前进，刷新，或主页按钮	事件被触发	事件被触发	事件被触发	不支持该事件
点击一个链接到新页面	事件被触发	事件被触发	事件被触发	不支持该事件
调用 anchor.click方法	事件被触发	不支持此方法1	不支持此方法1	不支持该事件
调用 document.write方法	事件被触发	事件被触发	事件未触发	不支持该事件
调用 document.open方法	事件被触发	事件被触发	事件未触发	不支持该事件
调用 document.close方法	事件未触发	事件未触发	事件未触发	不支持该事件
调用 window.open方法，窗口名称设置值为 _self	事件被触发	事件被触发	事件被触发	不支持该事件
调用 window.navigate	事件被触发	不支持此方法2	不支持此方法2	不支持该事件
调用 NavigateAndFind方法	事件被触发	不支持此方法3	不支持此方法3	不支持此方法3
调用 location.replace 方法	事件被触发	事件被触发	事件被触发	不支持该事件
调用 location.reload 方法	事件被触发	事件被触发	事件被触发	不支持该事件
指定一个 location.href 属性的新值	事件被触发	事件被触发	事件被触发	不支持该事件
使用 submit 按键提交表单	事件被触发	事件被触发	事件被触发	不支持该事件
调用 form.submit 方法	事件被触发	事件被触发	事件被触发	不支持该事件
调用 javascipt: 伪协议	事件被触发	事件未触发	事件未触发	不支持该事件
调用 mailto: 伪协议	事件未触发	事件未触发	事件被触发	不支持该事件
调用自定义伪协议	事件被触发	事件被触发	事件被触发	不支持该事件

[Shell] 監控JVM使用狀態

為了測試目前記憶體佔用的狀態所寫的shell。

cosa-memory.sh

#!/bin/sh

#author: ken tsai
#date: 2013/7/11

TOMCAT_PID=$(ps aux | grep /bin/java |grep -v grep | grep 'logging' |awk '{print $2}') 

echo "tomcat pid :$TOMCAT_PID"
echo "######################memory monitor##################"
jstat -gcutil -h 10 $TOMCAT_PID 1000

-gcutil Option

Summary of Garbage Collection Statistics

列名	描述
S0	survivor 0区利用率。 Survivor space 0 utilization as a percentage of the space’s current capacity.
S1	survivor 1区利用率。 Survivor space 1 utilization as a percentage of the space’s current capacity.
E	eden区利用率。 Eden space utilization as a percentage of the space’s current capacity.
O	年老代空间利用率。 Old space utilization as a percentage of the space’s current capacity.
P	永生代空间利用率。Permanent space utilization as a percentage of the space’s current capacity.
YGC	young gc次数。 Number of young generation GC events.
YGCT	young gc耗时。 Young generation garbage collection time.
FGC	full gc次数。 Number of full GC events.
FGCT	full gc耗时。 Full garbage collection time.
GCT	GC总耗时。 Total garbage collection time.

參考資料
http://itzoo.info/?p=256

[Mongodb] child process failed, exited with error number 100 無法啟動monogo

在做硬碟塞爆測試的時候，為了將新的build丟上去機器後重開機，
結果會死在monogo無法啟動。

錯誤訊息如下

kill: usage: kill [-s sigspec | -n signum | -sigspec] pid | jobspec ... or kill -l [sigspec]
about to fork child process, waiting until server is ready for connections.
forked process: 11871
all output going to: //storage/COSA//Mongo//log/mongodb.log
ERROR: child process failed, exited with error number 100

追了一下Monog噴的log

死在Insufficient free space for journal files 的錯誤，不過也是噴child process failed, exited with error number 100，這個錯誤的產生說是不正常的mongo db關機所造成。

可以參考這篇 http://f.dataguru.cn/thread-107361-1-1.html

[ShellScript] 用dd指令做硬碟塞爆測試

最近需要透過塞爆硬碟測試一些API，找到了網路上dd指令的介紹。
順便寫了一個簡單的shell script做測試。

of:檔案要存放的位置

//做1G
dd if=/dev/zero of=/tmp/1gb count=1024 bs=1M

//做10G
dd if=/dev/zero of=/tmp/10gb count=10240 bs=1M

//做100G
dd if=/dev/zero of=/tmp/100gb count=102400 bs=1M


//做100G
dd if=/dev/zero of=/tmp/100gb count=100 bs=1G

包裝成shell script使用

目前先都將產生的檔案產生在tmp的目錄下

#!/bin/bash

dummy_path="/tmp/"
count=$1
block_size=$2
block_count=$3

if [ -z "$count" ] || [ -z "$block_size"] || [ -z "$block_count"]
then
echo "Please input paramters for creating dummy file"
else

for ((index=0;index<$count;index++))
do
#echo "file index: $index"
now=$(date +"%m-%d-%Y-%H-%M-%S")
filename="dummyfile_no_${index}_${now}"
echo "create dummy file($index):$filename"
dd if=/dev/zero of="$dummy_path/$filename" count=$block_count bs=$block_size
done
fi

exit 0

$>./dummy_creator 10 1M 1024 # 產生十個1G的檔案

[jQuery] 如何控制textbox按enter後往下一個textbox移動

在提供使用者使用表單填寫資料時，如果欄位爆多的時候，
通常使用者會習慣打完資料按enter鍵後能自動往下一個欄位移動。
如果你有這個需求可以參考以下這個範例。
http://jquerybyexample.blogspot.com/2011/05/how-to-set-focus-on-next-textbox-on.html

實作方法透過偵測現在有多少input textbox，再透過遞增textbox index方式即可簡單做到
$('input:text')[nextIndex].focus();

把它改成外掛會更好使用。

[AngularJS] 如何重設表單

最近透過Angular在送出表單時，想要清除表單資料，於是將綁定欄位的model重設時，
會造成表單欄位有設require屬性，會丟出相對應的錯誤訊息。
因為在1.0.x版本時，這樣並沒有將整個表單的狀態重設。

可以參考這篇
http://stackoverflow.com/questions/12603914/reset-form-to-pristine-state-angularjs-1-0-x

不過在1.1.x版提供一行簡單的指令可以解決重設表單的問題

 $scope.你的表單id.$setPristine();

範例
                             
 $scope.signup_form.$setPristine();
                             

[jQuery] IE8踩雷: 使用$('element')建立元素未加入結尾

最近寫了一個dropbox like breadcrumbs的外掛，
結果在IE8測試下有個地方沒反應，
查了一下是建立元素的時候沒有結尾。

//會爆掉!!
//  var $anchor = $("<a data-id='" + nodeData.id + "'>");
  var $anchor = $("<a data-id='" + nodeData.id + "'></a>");