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>");

[AngularJS] 整理一下學習資源

目前很熱的NG框架，記錄一下找資料蒐集的東東。

電子書

AngularJS O'REILLY 中文翻譯 (保哥)
https://github.com/doggy8088/angularjs-tw

AngularJS-Learning
https://github.com/justjavac/AngularJS-Learning-zh_CN

文章

AngularJS-學習資源匯集
https://github.com/justjavac/AngularJS-Learning-zh_CN

三十天新手教學文系列
http://ithelp.ithome.com.tw/profile/share?id=20071512&page=1

用MAN架構打造超人般的網頁應用程式http://ithelp.ithome.com.tw/ironman6/player/blackie1019/alll/1

AngularJS 社群

http://angularjs.cn/#/

範例:

AngularJS book sample
https://github.com/shyamseshadri/angularjs-book

Angular seed
https://github.com/iambigd/angular-seed

Angular + RequireJS seed
https://github.com/iambigd/angular-requirejs-seed

ng-option (directive)
https://github.com/doggy8088/TWZipCode-AngularJS

right-click (directive)
http://jsfiddle.net/bcaudan/vTZZ5/

drag and drop (directive)
https://github.com/codef0rmer/angular-dragdrop

context menu (directive)
http://plnkr.co/edit/qPL2w1?p=preview

currency format (directive)
http://jsfiddle.net/WsRcc/

網站設計參考

bm.S5-style.com 這個網站有蒐集很多設計的很不錯的網站，可以供設計師模仿參考 :D

[工具] htaccess 產生器

懶人htacess產生器

http://cooletips.de/htaccess/

[jQuery] 如何新增plugin的 public method

寫了很多外掛用了很多外掛，一直再找覺得看起來順利的寫作pattern，Stackoverflow也有人提到jQuery官方如何擴充公用方法的實踐方法!!

統一整理到以下這篇:D

[jQuery Plugin] 撰寫jQuery plugin的一些寫作樣式

[jQuery] 搞懂 jquery plugin 與 jquery widget

對於jquery plugin與widget字義上有不清楚可以看一下stackoverflow解釋可以有助理解xd

jQuery plugins vs widgets

You can either write a jQuery plugin or a jQuery UI widget.

Depends on what you want to do. Neither of these is outdated. If you write a widget, it will depend on jQuery UI (and jQuery of course), if you write a plugin, it will only depend on jQuery. Really, it depends on what you want to achieve.

Jquery Widget vs Jquery Plugin, Differences, When to use which?

I've never heard of a jQuery widget. I imagine some people might use the term to describe a... widget... that has been made with jQuery. Certainly there are widgets in jQuery UI, for example. It's an odd question.

A widget is a widget (always includes a visual element, sometimes includes reusable functionality), and can be a subset of a plugin or a plugin in and of itself.

A plugin extends jQuery directly and may or may not have a visual component.

[PHP] Assetic 初探

Assetic是一個Asset的管理工具，可以把網站的靜態資源(js.css)打包在一起。

前置工具：
要獲得這個工具，請安裝composer，方便又快速

1.在你的專案下面建立一個composer.json
{
        "require":{
                "kriswallsmith/assetic": "1.1.*"
        }
}


2.安裝套件
$>composer install

裝完會在目錄下看到一個vendor的資料夾：

                                                                                                                          
vendor下面放的東西

3.建立一個測試頁面


  include_once 'vendor/autoload.php'; //記得要呼叫autoload.php

  use Assetic\Asset\AssetCollection;
  use Assetic\Asset\FileAsset;
  use Assetic\Asset\GlobAsset;
  use Assetic\Filter\GoogleClosure\CompilerApiFilter;

  $APP_FOLDER = dirname(dirname(__FILE__)) . "/flicklinkr";


  $js = new AssetCollection(array(
       // new GlobAsset($APP_FOLDER '/js/*'),
       new FileAsset($APP_FOLDER . '/js/plugins/jquery.logger.js'),
  ), array(
    new CompilerApiFilter()
  ));
 
  //the code is merged when the asset is dumped
  header("Content-Type: text/javascript");
  echo $js->dump();
?>

4.輸出結果

(function(a){a.console=function(a){"undefined"!=typeof window.console&&console.log(a)}})(jQuery);

[PHP] 安裝 composer套件

記錄一下composer的安裝步驟

安裝流程

1. Change into a directory in your path like cd /usr/local/bin 
2. Get Composersudo curl -sS https://getcomposer.org/installer | sudo php
3. Make the phar executable sudo chmod a+x composer.phar 
4. Change into a project directory cd /path/to/my/project 
5. Use Composer as you normally would composer.phar install 
6. Optionally you can rename the composer.phar to composer to make it easier
1. sudo mv composer.phar composer

[RequireJS] requireJS 中文資料

今天在測試RequireJS相關功能時，
找到竟然有人翻簡體中文:

RequireJS API中文版

比照官方文件翻譯，有興趣的人可以參考。

[Alfresco] 原始碼解讀

對岸同胞解讀alfresco代碼的網站，對alfresco有興趣的人可以看一下: D
http://www.ecmkit.com/zh-hans

[Mac] 砍掉MAC網路磁碟產生的暫存檔"._"

掛載網路硬碟時，不小心把一些噁心的finder產生的暫存檔 ._ 丟到git上XD，
可參考這篇教學:How to remove all Mac "._" files from a Network Drive

可以透過find的指令把相關檔案找出來

$>find <路徑> -name "._*"

然後就會看到相關的暫存檔

要砍掉的話就加個 -delete 參數即可


$>find <路徑> -name "._*" -delete

好用的Effeckt css動畫效果

為了強調良好的UX，
透過一些動畫效果讓使用者清楚的知道頁面有哪些元素變動是非常重要的。現在除了Animation CSS之外又多了一個 Effeckt CSS，
可以適需求導入自已的專案中喔XD

http://h5bp.github.io/Effeckt.css/dist/

bootstrap

火紅很久的BootstrapUI框架，看來工程師要靠這個救一下自已了XD

英文
http://twitter.github.io/bootstrap/

繁體中文
http://kkbruce.tw/