[Ruby] Ruby autocomplete in VIM

http://www.cuberick.com/2008/10/ruby-autocomplete-in-vim.html

[IIS7] IIS7 執行 php專案以及phpMyAdmin

本篇記綠在IIS7上面執行php與phpMyAdmin的安裝心得。
最後可以正確在IIS7上架php的專案(可正常連接mysql)，
但目前IIS7執行phpMyAdmin專案在載入mysql.dll模組會錯誤，尚無解Orz~

安裝環境: 
Win7


前置工作：
Appserv安裝apache, php, phpmyadmin


如何在IIS7上執行php設定步驟

接著打開IIS管理工具

Step1:選擇 處理常式對應

Step2:接著點擊 新增模組對應

Step3:
在 要求路徑中 輸入 *.php

類型下拉 選擇 FastCgiModule

執行檔選擇 php5安裝目錄下的 php-cgi.exe

接著名稱取個 PHP for FCGI 即可

點確定，接著將剩餘的步驟都點確定即可完成設定。

Step4:
接著，請到php5安裝目錄下，把php.ini-recommended 改為 php.ini

Step5:
重新啟動www服務，即可運作PHP

[jQuery API] Html encode decode

利用jQuery簡單的完成html的編碼跟解碼

function htmlEncode(value){
  return $('<div/>').text(value).html();
}

function htmlDecode(value){
  return $('<div/>').html(value).text();
}

Reference:
JavaScript/jQuery HTML Encoding

[Javascript] 偵測上傳檔案的MIME Type

在前端偵測上傳檔案的MIME Type，不過不實用，因為使用者可以改副檔名來欺騙你。

var mimeType = document.getElementById("filedata").files[0].type; // e.g. image/png

[jQuery Plugin] 處理過長文字外掛(Truncate long string in web)

常常遇到在web上要處理文字過長的問題!!
參考了jquery text truncate寫的範例程式：

/**
 * Visual string trimming Trimming with pixel of container
 * 
 * change log:
 * 2012/12/06 use text function to avoid special characters let system crash
 * @author ken tsai 2012/04/06
 */
;
(function($) {

 function htmlEncode(value) {
  
  try{
   return $('<div/>').text(value).html();
  }catch(err){
   $.console("htmlEncode:" + err);
   return valeu;
  }
 }

 function htmlDecode(value) {
  try{
   return $('<div/>').html(value).text();
  }catch(err){
   $.console("htmlDecode:" + err);
   return valeu;
  }
 
 }
 
 $.tirmWithPixel = {};
 
 $.tirmWithPixelHTML = function(options){
  
  var opts = $.extend($.fn.trimWithPixel.defaults, options);
  
  var text = opts.text;
  var pixelLimitWidth = opts.limitPixelLength;
  var tailPattern = opts.tail;
  
  var $container = $("<div/>");
  
  var content = $container.append(
    $.tirmWithPixel({
       text:text,
       limitPixelLength:pixelLimitWidth,
       tail:tailPattern}
    ).clone()).html();
  
  return content;
 };
 
 $.tirmWithPixel = function(options) {

  var opts = $.extend($.fn.trimWithPixel.defaults, options);
  
  var text = opts.text;
  var pixelLimitWidth = opts.limitPixelLength;
  var tailPattern = opts.tail;
  
  var $container = $("<span></span>");
  
  //if element don't add to body
  //you can't get width from current element
  $container.text(text).appendTo("body");
  
//  $.console("original:" + $container.text());
  
  $container.trimWithPixel({
          limitPixelLength:pixelLimitWidth,
          tail:tailPattern});
  
  var $copyContainer = $container.clone();
  
  //remove from body
  $container.remove();
  
//  $.console("trim:" + $container.text());
  
  return $container;
 };

 $.fn.trimWithPixel = function(options) {

  // combine options
  var opts = $.extend($.fn.trimWithPixel.defaults, options);
  var pixelLimitWidth = opts.limitPixelLength;
  var tailPattern = opts.tail;
  var callback = opts.callback;
  
  this.each(function(i, obj) {

   var $strContainer = $(this);// current element
   
   var cText = $strContainer.text();// original text of container(without html encode)
   var oText = cText;// record original text(with html encode)
   
   //$.console("oText:" + oText);
   
   var $vistualSpan = $("<span style='white-space:nowrap;'></span>");
   $vistualSpan.text(cText);
   
   //$.console("span context:" + $vistualSpan.html());
   $strContainer.html($vistualSpan);
   
   //$.console("$strContainer html:" + $strContainer.html());
   
   var spanWidth = $vistualSpan.width();
   
   //$.console("spanWidth:" + spanWidth);
   
   // elem width is more than limit pixel length
   if (spanWidth > pixelLimitWidth) {
    var max = 0;
    while ((spanWidth = $vistualSpan.width()) > pixelLimitWidth) {
    
     cText = cText.substring(0, cText.length - 1);
     
     $vistualSpan.text(cText);
     cText = $vistualSpan.text();
     
     //debug
     /*
     max++;
     if(max > 100){
      $.console("[trimWithPixel] Exceed max limitation..");
      return;
     }*/
      
    }

    cText = cText + tailPattern;
    
    if (callback && typeof(callback) === "function") {
     callback({oText:oText,cText:cText});
    }else{
     $strContainer.attr("title", oText);
     $strContainer.text(cText);// using text fun to unescape html
    }
   } else {
    
    // not trimming
    //$.console("not trimming");
    
    if (callback && typeof(callback) === "function") {  
     callback({oText:oText,cText:cText});
    }else{
     $strContainer.attr("title",oText);
     $strContainer.text(oText);// using text fun to unescape html tag
    }
   }
  });
 };

 // default options
 $.fn.trimWithPixel.defaults = {
  limitPixelLength : 125,
  tail : "..."
 };

})(jQuery);

[TOMCAT] TOMCAT在WIN7自動啟動

最近在WIN7安裝了TOMCAT7，每次WIN7開機的時候都會跳這個視窗。


原來是WIN7安全性的問題，將CONFIGURE TOMCAT的特殊權限等級內的系統管理員的身分執行此程式打勾即可。

[Ruby] MacOSX 安裝Ruby

這篇文章記錄自已安裝Ruby環境的心得，
自已裝過一遍才會遇到不一樣的問題lol

系統環境:
Mac OSX 10.7.3

[SEO] Google Sitemap

Sitemap 範例

<urlset xmlns:image="http://www.sitemaps.org/schemas/sitemap-image/1.1" xmlns:video="http://www.sitemaps.org/schemas/sitemap-video/1.1" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url> 
    <loc>http://www.example.com/foo.html</loc> 
    <image:image>
       <image:loc>http://example.com/image.jpg</image:loc> 
    </image:image>
    <video:video>     
      <video:content_loc>http://www.example.com/video123.flv</video:content_loc>
      <video:player_loc allow_embed="yes" autoplay="ap=1">http://www.example.com/videoplayer.swf?video=123</video:player_loc>
      <video:thumbnail_loc>http://www.example.com/thumbs/123.jpg</video:thumbnail_loc>
      <video:title>適合夏季的燒烤排餐</video:title>  
      <video:description>完美排餐烹調秘訣</video:description>
    </video:video>
  </url>
</urlset>

Sitemap 標記定義

標記	是否必要	說明
	必要	包含與 Sitemap 所含網址相關的所有資訊。
	必要	包含與特定網址相關的所有資料。
	必要	指定網址。如果是圖片與影片，請指定到達網頁 (亦稱為播放網頁或參照網頁)。此網址必須是獨一無二的。
	選擇性	網址的最後更新日期，格式為 YYYY-MM-DDThh:mmTZD (時間值為選擇性)。
	選擇性	用於提示網頁大概多久更新一次。有效值如下： always：表示網頁每次遭到存取時皆會變更。 hourly daily weekly monthly yearly never：此值適用於封存的網址。
	選擇性	描述網站上某個網址相對於其他網址的優先順序。優先順序範圍介於 1.0 (非常重要) 到 0.1 (完全不重要) 之間。這項設定不會影響您的網站在 Google 搜尋結果的排名，因為這個值是相對性的，只能和您網站中的其他網頁比較，因此即使將某個網頁指定為高優先順序 (或將所有網址指定為相同的優先順序)，也不會提升您的網站在搜尋結果中的排名。此外，如果您將所有網頁的優先順序設定為相同的值，則設定不會產生任何作用。

[jQuery API] $.data()

很多時候我們會將物件的屬性值繫結在元素的屬性上面(我從以前就習慣這樣lol)。
然後再透過$('selector').attr('key') 拿取，

不過這個方法會造成dom過長( 也會降低seo的內容代碼比。 )，

不過常常遇到需求變更時又要多一個屬性，感覺很不方便。

建議使用jQuery提供的$.data()方法來儲存你的資料。
jQuery.data( element, key, value )

• element - 必要的參數，這個屬性就是我們要塞入資料的節點。
• key - 欲塞入資料的鍵值，往後取得資料使用。
• value - 欲塞入的資料，可為任何的資料型態。

jQuery.data(div, "test", { first: 16, last: "pizza!" });
$("span:first").text(jQuery.data(div, "test").first);
$("span:last").text(jQuery.data(div, "test").last);

如果你已經確定要綁定在某個元素上的話請用$.data()效能會比較好。
另外這方$.data()，也可以用在非元素上的資料存儲

var usersList = {};//store user list with key/value
$.data(usersList,user.userName,user);//user is json object

要取得資料的話也蠻方便的

var userData = $.data(usersList,userName);//userName is key
var userRowindex = userData.rowIndex;//某一個屬性值

Reference:
$.fn.data 與 $.data效率比較 
jQuery.data()
利用 jQuery 的 data 方法取數值時的陷阱

[Window7] Create symboic link in Window7

如何在Window7建立Symbolic link，參考至How to create symbolic link in windows 7

C:\Windows\system32>mklink
Creates a symbolic link.
 
MKLINK [[/D] | [/H] | [/J]] Link Target
 
/D      Creates a directory symbolic link.  Default is a file
symbolic link.
/H      Creates a hard link instead of a symbolic link.
/J      Creates a Directory Junction.
Link    specifies the new symbolic link name.
Target  specifies the path (relative or absolute) that the new link
refers to.

Example:

To create a symbolic link named MyDocs from the root directory to the \Users\User1\Documents directory, type:

mklink /D \MyDocs \Users\User1\Documents

[RoR] RoR 初探

最近開發接觸的語言，擷錄Ruby on Rails 實戰聖經心得 XD


Ruby on rails(ROR)
Rails的哲學包括以下指導原則：

• 不要重複自己(DRY: Don’t Repeat Yourself) – 撰寫出重複的程式碼是件壞事
• 慣例勝於設計(Convention Over Configuration) – Rails會預設各種好的設定跟慣例，而不是要求你設定每一個細節到設定檔中。
• REST是網站應用程式的最佳模式 – 使用Resources和標準的HTTP verbs(動詞)來組織你的應用程式是最快的方式(我們會在路徑一章詳細介紹這個強大的設計)

Rails是採用Ruby開發的網頁框架，David Heinemeier Hanson(DHH)在2004年發明，具有以下功能:

• MVC(Model-View-Control)模式
• 支援單元測試和整合測試
• 支援Ajax和RESTful介面
• ORM機制
• 支援各種最新的業界標準像是HTML5、JQuery

[Java] TOMCAT 啟動執行 Serverlet

1. Initialize your class in servlet's init() method. You may add  attribute to make sure your servlet is created at application startup and not on first access.
2. Add ServletContextListener and use contextInitialized() callback method. UseServletContext#setAttribute to store created object for future use.

[Tomcat] IIS + Tomcat + Apache 整合

tomcat+IIS整合說明

windows下iis，apache，tomcat共存共用80

在 Windows 2008 上運行 IIS7 + JSP

如何在Server 2008的IIS7安裝PHP

[jQuery API] ScrollTop 回傳值為0

遇到一個需求需要將body一開始先設style為display:none;

之後再適當時機的時候再將此屬性移除~

結果會導致IE8再擷取ScorllTop時回傳的值都為0，

原以為是ScorllTop api不支援IE8的問題，但結果是因為加了display:none;
在這篇討論中有人提到：http://api.jquery.com/scrollTop/
Warning: .scrollTop() will return 0 (and setting it to anything won't work) if the element, or a parent element, is set to "display:none;". I had to apply my .scrollTop() logic after the element was shown.

[jQuery plugin] element center

控制元素置中的center plugin，常用在跳出式的視窗，
如果遇到parent元素，設定style="display:none;"。
可能會造成置中不正常，可參考這篇：[jQuery API] ScrollTop 回傳值為0

IIS 主機標頭

要在IIS上分別不同的網站其實很簡單
有分3種
1. 用IP區分
2. 用PORT區分
3. 用主機標頭區分

這次介紹的是第三種, 用主機標頭區分
用主機標頭區分的方式需要跟DNS做配合
方法如下:
1. 進IIS主機, 在IIS上的"網站"按右鍵-->新增網站(EX.Web01)
2. 在此網站按右鍵-->內容-->網站-->進階-->編輯, 在主機標頭值那邊, 填上客戶要的網站名稱(EX.testa.com)
3. 重複1, 2步驟, 建另一個新的網站(Web02), 主機標頭值填上testb.com

4. 進DNS, 增加 testa.com, testb.com 兩個正項對應區域
5. 在testa.com上按右鍵-->新增主機-->增加一筆IP為IIS主機IP的資料, 名稱不用打(不用打代表使用父系網域名稱, 也就是testa.com)
6. 在testb.com上按右鍵-->新增主機-->增加一筆IP為IIS主機IP的資料, 名稱不用打(不用打代表使用父系網域名稱, 也就是testb.com)

設好之後, 進IIS按下"瀏覽", 就可以正常瀏覽之
(在本機也可以直接打網站名(ex.www.testa.com)去找到站台資料)



補充:

1. 用此法設定的網站, 要將client的dns指向同一台的dns, 閘道也要相同才能連到.
2. 網站使用SSL安全連線時, 就不能使用主機標頭值

[IIS 7] 500.21-無法辨識的模組

今天發生如主題所示的 500.21-無法辨識的模組的錯誤，
第一時間一定就請教G大神了，原來只是單純SERVER上未安裝.NETFramework 4.0。
另外這篇: 500.21-無法辨識的模組 的作者也發生同樣的問題。
主要是用命令提示字元來重新註冊就可以解決了。

路徑如下：
%windir%\Microsoft.NET\Framework\v4.0.21006\aspnet_regiis.exe -i

如果你想要自已寫批次檔來修正錯誤的話可以參考這篇
[Asp.Net] 重新註冊IIS .NET Framework
提供給同樣問題的朋友參考!!

[IIS 7] 解決 HTTP 404.2-Not found ISAPI和CGI限制方法

在將網站從IIS6移到IIS7後，
雖然已經重新安裝新的IIRF的模組
[IIS 7] IIS7 安裝 IIRF(Ionic's ISAPI Rewrite Filter)，
不過還是造成了HTTP 404.2-Not found的錯誤訊息(本機看的時候)。
主要是ISAPI和CGI的限制內的.net 4.0模組未設置允許!!

重新設定為允許就可以正常Rewrite了。


Reference:
http://www.qiandabao.com/wdgz/938.html

[jQuery plugin] spinner button

好用的Spinner Button的元件 https://github.com/btburnett3/jquery.ui.spinner

[Javascript] 偵測是否為iphone/ipod/ipad瀏覽器

簡單的用Regex來判斷是否為iphone/ipad/ipod的瀏覽器!!

//偵測是否為ipad   
if(/iPad/i.test(navigator.userAgent) {   
    // dosomething
}   
//如果所有的裝置要一起改變可以這樣用   
if (/(iPhone|iPad|iPod)/i.test(navigator.userAgent)) {   
    // dosomething  
}; 

[jQuery plugin] Masked Input Plugin

強大的textbox欄位驗證元件:Masked Input Plugin

[jQuery] 改善你的jQuery效能

愈大型的網站該考慮網站的效能：
本篇記綠一些找到提升jQuery效能的文章:)
Improve your jquery 25 excellent

加速前端網頁效能的14條規則

[IIS 7] IIS7 安裝 IIRF(Ionic's ISAPI Rewrite Filter)

如果你的asp.net的舊網站從IIS6升級至IIS7時，
如果你有用到IIRF模組，可參考這篇文章。
Installing IIRF on IIS7

不過現在已經提供方便的.msi檔了，可以無痛設定XD
下載IIRF 這裡

[IIS 7] 總該面對IIS 7了吧!!

一直都懶得來摸IIS 7，都出來這麼久了，也是該面對的時候了lol
今天在試的過程中找到的一些學習資源。記綠在此方便以後參考。


IIS 7 基礎觀念：網站、應用程式、與虛擬目錄
【潛盾機】列出IIS上所有ASP.NET網站應用程式
M$ IIS7 邊做邊學系列
如何部署 Asp.Net 4.0 應用程式於 IIS 7 x64 WSS 3.0 下

[IIS]IIS7.0/IIS6.0功能快速Mapping
[ASP.net WebForm] 在Windows7上架ASP.net網站(適用WinServer2008)

[Javascript] 使用pixel width來做truncate

Measuring the length of a string in pixels using JavaScript

[Javascript 茶包筆記] 變更JSON物件的屬性

//add a new property to JSON object

object["property"] = value; 

or

object.property = value; 

[Javascript] 取得完整路徑的檔名

今天在測試input box的檔案路徑時，
發現不同瀏覽器的取出的值不太一致，Chrome的是完整路徑，FF跟IE都是檔名。
要取得檔案的話可以使用以下的javascript範例，
取自 "Javascript - How to extract filename from a file input control"

To split the string ({filepath}/{filename}) and get the file name you could use something like this:

str.split(/(\\|\/)/g).pop()

"The pop method removes the last element from an array and returns that value to the caller." MOZILLA DEVELOPER NETWORK

Example:

from: "/home/user/file.txt".split(/(\\|\/)/g).pop()

you get: "file.txt"

[AJAX] 解決AJAX呼叫後的上下頁按鈕問題

使用AJAX來存取資料後，常常會遇到上下頁沒有辦法記錄歷程。
以下是建議解決這個議題的各種套件。

• Asual: http://www.asual.com/jquery/address/
• AJAX SEO Demo  http://lab.laukstein.com/ajax-seo/
• Events  http://www.asual.com/jquery/address/samples/events/#contact
• API  http://www.asual.com/jquery/address/samples/api/#
• jQuery BBQ: http://benalman.com/projects/jquery-bbq-plugin/
• History: http://plugins.jquery.com/project/history
• jQuery hashchange: http://benalman.com/projects/jquery-hashchange-plugin/
• ReallySimpleHistory: http://code.google.com/p/reallysimplehistory/

最後選擇Asual address套件:

範例如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery Address - Deep linking for the masses</title>
<script src="js/jquery-1.7.js"></script>
<script src="js/jquery.address-1.4.js"></script>
<script>

$(function(){
    
 $.address.change(function(event) {
     // do something depending on the event.value property, e.g.
     // $('#content').load(event.value + '.xml');
     console.log("address.change" + event.value);
 });
 
    $('a').click(function() {
     
     //record address
     var link = $(this).attr('href').replace(/^#/,'');;
     $.address.autoUpdate(false).value(link);
      
    });
});
</script>
</head>
<body>
<a href="#a" >a</a>
<a href="#b">b</a>
<a href="#c" >c</a>
</body>
</html>

此元件提供三種Callback Event，分別為change,externalChange,internalChange。
觀看你的使用情況，主要是externalChange可能你區別出是改變瀏覽器網址觸發的事件，非常好用，不過目前測試情況要多偵測出externalChange事件需要綁定每個link元素的click事件後加入