<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Idea Grapes &#187; Webdev</title>
	<atom:link href="http://blog.yoren.info/category/webdev/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.yoren.info</link>
	<description>Think Different</description>
	<lastBuildDate>Sat, 15 May 2010 13:17:40 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>[jQuery] .ajax 在 IE7 中無法執行 success 函式</title>
		<link>http://blog.yoren.info/2010/05/jquery-ajax-ie7-success/</link>
		<comments>http://blog.yoren.info/2010/05/jquery-ajax-ie7-success/#comments</comments>
		<pubDate>Sat, 15 May 2010 13:17:40 +0000</pubDate>
		<dc:creator>yoren</dc:creator>
				<category><![CDATA[Webdev]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[ie7]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[XML]]></category>

		<guid isPermaLink="false">http://blog.yoren.info/?p=854</guid>
		<description><![CDATA[如果使用 jQuery .ajax 時發現在 IE7 內無法執行 success 函式，可以使用以下方法解決：

js 的部份，請在 dataType 加上判斷式如下：
dataType: (jQuery.browser.msie) ? "text/xml" : "text"
後端程式如 php 的部份，使用 header 宣告文件的 Content-type 為 xml：
header('Content-type: text/xml');

相關的問題在 jQuery 官方文件有一篇 Using the right MIME type 可以參考。但我自己遇到的狀況是將 dataType 宣告為 text 時，在 IE7 內仍然無法成功執行 success 函式，改為 text/xml 才解決了問題。
]]></description>
			<content:encoded><![CDATA[<p>如果使用 <span class='bm_keywordlink'><a href="http://jquery.com/">jQuery</a></span> .ajax 時發現在 IE7 內無法執行 success 函式，可以使用以下方法解決：</p>
<ol>
<li>js 的部份，請在 dataType 加上判斷式如下：</li>
<p><code>dataType: (<span class='bm_keywordlink'><a href="http://jquery.com/">jQuery</a></span>.browser.msie) ? "text/xml" : "text"</code></p>
<li>後端程式如 php 的部份，使用 header 宣告文件的 Content-type 為 xml：</li>
<p><code>header('Content-type: text/xml');</code>
</ol>
<p>相關的問題在 <span class='bm_keywordlink'><a href="http://jquery.com/">jQuery</a></span> 官方文件有一篇 <a href="http://docs.jquery.com/Specifying_the_Data_Type_for_AJAX_Requests">Using the right MIME type</a> 可以參考。但我自己遇到的狀況是將 dataType 宣告為 text 時，在 IE7 內仍然無法成功執行 success 函式，改為 text/xml 才解決了問題。</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.yoren.info/2010/05/jquery-ajax-ie7-success/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[jQuery UI] 讓每個 Tab 擁有獨立網址</title>
		<link>http://blog.yoren.info/2010/02/jquery-ui-tab-%e7%8d%a8%e7%ab%8b%e7%b6%b2%e5%9d%80/</link>
		<comments>http://blog.yoren.info/2010/02/jquery-ui-tab-%e7%8d%a8%e7%ab%8b%e7%b6%b2%e5%9d%80/#comments</comments>
		<pubDate>Fri, 05 Feb 2010 18:32:19 +0000</pubDate>
		<dc:creator>yoren</dc:creator>
				<category><![CDATA[Webdev]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[jQuery Tools]]></category>
		<category><![CDATA[jQuery UI]]></category>

		<guid isPermaLink="false">http://blog.yoren.info/?p=847</guid>
		<description><![CDATA[使用 jQuery UI 的 Tabs 套件時，有兩個缺點：

瀏覽器的上一頁、下一頁按鈕沒有作用，也就是 history 的紀錄失效。
每個 Tab 沒有獨立的網址，所以無法將某個指定的 Tab 內容加到書籤。

目前找到比較簡單的解決辦法有二：

改用 jQuery Tools 的 Tabs，參見 Handling browsers back button。（認真地說，我覺得 jQuery Tools 的 Tabs 比較好用）
搭配 scrollTo 和 localScroll 這兩隻外掛的解法，來自 Mule Design Studio Blog：請直接參考他們的範例網頁，從原始碼就可以很清楚得到解答了。

]]></description>
			<content:encoded><![CDATA[<p>使用 <a href="http://jqueryui.com/demos/tabs/">jQuery UI 的 Tabs</a> 套件時，有兩個缺點：</p>
<ul>
<li>瀏覽器的上一頁、下一頁按鈕沒有作用，也就是 history 的紀錄失效。</li>
<li>每個 Tab 沒有獨立的網址，所以無法將某個指定的 Tab 內容加到書籤。</li>
</ul>
<p>目前找到比較簡單的解決辦法有二：</p>
<ul>
<li>改用 <a href="http://flowplayer.org/tools/tabs.html">jQuery Tools 的 Tabs</a>，參見 <a href="http://flowplayer.org/tools/demos/tabs/ajax-history.html">Handling browsers back button</a>。（認真地說，我覺得 <span class='bm_keywordlink'><a href="http://jquery.com/">jQuery</a></span> Tools 的 Tabs 比較好用）</li>
<li>搭配 scrollTo 和 localScroll 這兩隻外掛的解法，來自 <a href="http://weblog.muledesign.com/2009/05/bookmarkable_tabs_with_jquery_ui.php">Mule Design Studio Blog</a>：請直接參考他們的<a href="http://muledesign.com/demo/tabs/bookmark-tabs.html">範例網頁</a>，從原始碼就可以很清楚得到解答了。</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://blog.yoren.info/2010/02/jquery-ui-tab-%e7%8d%a8%e7%ab%8b%e7%b6%b2%e5%9d%80/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>將字串改為小寫的方法</title>
		<link>http://blog.yoren.info/2009/09/%e5%b0%87%e5%ad%97%e4%b8%b2%e6%94%b9%e7%82%ba%e5%b0%8f%e5%af%ab%e7%9a%84%e6%96%b9%e6%b3%95/</link>
		<comments>http://blog.yoren.info/2009/09/%e5%b0%87%e5%ad%97%e4%b8%b2%e6%94%b9%e7%82%ba%e5%b0%8f%e5%af%ab%e7%9a%84%e6%96%b9%e6%b3%95/#comments</comments>
		<pubDate>Mon, 28 Sep 2009 09:11:58 +0000</pubDate>
		<dc:creator>yoren</dc:creator>
				<category><![CDATA[Webdev]]></category>
		<category><![CDATA[programming]]></category>

		<guid isPermaLink="false">http://blog.yoren.info/?p=823</guid>
		<description><![CDATA[來自 Pete Freitag，將字串改為小寫，在不同的程式語言中是這樣的處理的：


函式
語言


LCase()
ColdFusion / CFML, ASP, Visual Basic


lower()
SQL, Python


toLowerCase()
Java, JavaScript, ActionScript


strtolower()
PHP


tolower()
ANSI C/C++


toLower()
C#


downcase
Ruby


lower-case()
XQuery


lowercaseString
Objective C / NSString


lc()
Perl


帥呀，Perl！
]]></description>
			<content:encoded><![CDATA[<p>來自 <a href="http://www.petefreitag.com/item/713.cfm">Pete Freitag</a>，將字串改為小寫，在不同的程式語言中是這樣的處理的：</p>
<table>
<tr>
<th>函式</th>
<th>語言</th>
</tr>
<tr>
<td>LCase()</td>
<td>ColdFusion / CFML, ASP, Visual Basic</td>
</tr>
<tr>
<td>lower()</td>
<td>SQL, Python</td>
</tr>
<tr>
<td>toLowerCase()</td>
<td>Java, JavaScript, ActionScript</td>
</tr>
<tr>
<td>strtolower()</td>
<td>PHP</td>
</tr>
<tr>
<td>tolower()</td>
<td>ANSI C/C++</td>
</tr>
<tr>
<td>toLower()</td>
<td>C#</td>
</tr>
<tr>
<td>downcase</td>
<td>Ruby</td>
</tr>
<tr>
<td>lower-case()</td>
<td>XQuery</td>
</tr>
<tr>
<td>lowercaseString</td>
<td>Objective C / NSString</td>
</tr>
<tr>
<td>lc()</td>
<td>Perl</td>
</tr>
</table>
<p>帥呀，Perl！</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.yoren.info/2009/09/%e5%b0%87%e5%ad%97%e4%b8%b2%e6%94%b9%e7%82%ba%e5%b0%8f%e5%af%ab%e7%9a%84%e6%96%b9%e6%b3%95/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>在有序清單（ordered list）的編號和內文使用不同字型</title>
		<link>http://blog.yoren.info/2009/05/ol-%e7%b7%a8%e8%99%9f-%e5%ad%97%e5%9e%8b/</link>
		<comments>http://blog.yoren.info/2009/05/ol-%e7%b7%a8%e8%99%9f-%e5%ad%97%e5%9e%8b/#comments</comments>
		<pubDate>Fri, 15 May 2009 16:57:29 +0000</pubDate>
		<dc:creator>yoren</dc:creator>
				<category><![CDATA[Webdev]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[xhtml]]></category>

		<guid isPermaLink="false">http://blog.yoren.info/?p=810</guid>
		<description><![CDATA[
來自Web Designer Wall的一篇舊文「Style Your Ordered List」，介紹如何讓有序清單（ordered list，ol元素）的編號和內文使用不同的字型。
方法很簡單，編號的字型設定在ol的CSS樣式裡面，內文的字型則設定在ol p裡面（我之前一直沒想到可以這樣設）：

ol {
  font: italic 1em Georgia, Times, serif;
  color: #999999;
}


ol p {
  font: normal .8em Arial, Helvetica, sans-serif;
  color: #000000;
}

最後的成品就會長成這樣（編號的數字是用Georgia字型，內文則是Arial）：

]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.webdesignerwall.com/tutorials/style-your-ordered-list/"><img src="http://blog.yoren.info/wp-content/uploads/2009/05/ol-overview.gif" alt="Style Your Ordered List" title="Style Your Ordered List" width="480" height="132" class="alignnone size-full wp-image-811" /></a></p>
<p>來自<a href="http://www.webdesignerwall.com/">Web Designer Wall</a>的一篇舊文「<a href="http://www.webdesignerwall.com/tutorials/style-your-ordered-list/">Style Your Ordered List</a>」，介紹如何讓有序清單（ordered list，ol元素）的編號和內文使用不同的字型。</p>
<p>方法很簡單，編號的字型設定在<code>ol</code>的CSS樣式裡面，內文的字型則設定在<code>ol p</code>裡面（我之前一直沒想到可以這樣設）：</p>
<pre class="brush: css">
ol {
  font: italic 1em Georgia, Times, serif;
  color: #999999;
}
</pre>
<pre class="brush: css">
ol p {
  font: normal .8em Arial, Helvetica, sans-serif;
  color: #000000;
}
</pre>
<p>最後的成品就會長成這樣（編號的數字是用Georgia字型，內文則是Arial）：<br />
<img src="http://blog.yoren.info/wp-content/uploads/2009/05/ol-3.gif" alt="stylish ordered list" title="stylish ordered list" width="132" height="87" class="alignnone size-full wp-image-812" /></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.yoren.info/2009/05/ol-%e7%b7%a8%e8%99%9f-%e5%ad%97%e5%9e%8b/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Firefinder for Firebug</title>
		<link>http://blog.yoren.info/2009/05/firefinder-for-firebug/</link>
		<comments>http://blog.yoren.info/2009/05/firefinder-for-firebug/#comments</comments>
		<pubDate>Wed, 13 May 2009 16:10:44 +0000</pubDate>
		<dc:creator>yoren</dc:creator>
				<category><![CDATA[Webdev]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[extensions]]></category>
		<category><![CDATA[firebug]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[xpath]]></category>

		<guid isPermaLink="false">http://blog.yoren.info/?p=806</guid>
		<description><![CDATA[
Firefinder是Firebug的擴充套件，用來快速找到網頁中，符合特定CSS選擇器或是XPath表達式的HTML元素。
Firefinder的面板內會顯示符合的筆數並將這些元素條列出來，在網頁中也會用紅色虛線框將他們標示出來；當滑鼠指向面板內列出的某個元素時，網頁內相應的元素則會用藍色虛線框標示。
安裝完畢後，開啟Firefinder面板的快捷鍵是Ctrl（Command）+ Shift + V。
]]></description>
			<content:encoded><![CDATA[<p><a href="http://robertnyman.com/firefinder/"><img src="http://blog.yoren.info/wp-content/uploads/2009/05/firefinder-500x308.png" alt="firefinder" title="firefinder" width="500" height="308" class="alignnone size-large wp-image-807" /></a></p>
<p><a href="http://robertnyman.com/firefinder/">Firefinder</a>是Firebug的擴充套件，用來快速找到網頁中，符合特定CSS選擇器或是XPath表達式的HTML元素。</p>
<p>Firefinder的面板內會顯示符合的筆數並將這些元素條列出來，在網頁中也會用紅色虛線框將他們標示出來；當滑鼠指向面板內列出的某個元素時，網頁內相應的元素則會用藍色虛線框標示。</p>
<p>安裝完畢後，開啟Firefinder面板的快捷鍵是Ctrl（Command）+ Shift + V。</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.yoren.info/2009/05/firefinder-for-firebug/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>TimThumb：PHP縮圖程式</title>
		<link>http://blog.yoren.info/2009/05/php%e7%b8%ae%e5%9c%96%e7%a8%8b%e5%bc%8f-timthumb/</link>
		<comments>http://blog.yoren.info/2009/05/php%e7%b8%ae%e5%9c%96%e7%a8%8b%e5%bc%8f-timthumb/#comments</comments>
		<pubDate>Wed, 06 May 2009 17:22:06 +0000</pubDate>
		<dc:creator>yoren</dc:creator>
				<category><![CDATA[Webdev]]></category>
		<category><![CDATA[images]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[programming]]></category>

		<guid isPermaLink="false">http://blog.yoren.info/?p=791</guid>
		<description><![CDATA[
TimThumb原本是應用在Mimbo Pro這套WordPress佈景主題裡面的PHP縮圖程式，後來開發團隊將它獨立為一個開放原始碼專案，造福更多的使用者。
TimThumb用更精簡的程式碼來達成phpThumb的功能，並且加入PNG和GIF圖檔的支援，也使用快取來提高程式的效能。
使用時請將TimThumb.php引入後，使用以下語法載入網站上的圖片：

&#60;img src=&#34;/scripts/timthumb.php?src=/images/whatever.jpg&#38;h=150&#38;w=150&#38;zc=1&#34; alt=&#34;&#34;&#62;

參數的意義如下：

w: 縮圖寬度
h: 縮圖高度
zc: 是否裁切圖片 (0 或 1)
q: 壓縮品質 (預設為 75，最大值為 100)

而其他需要注意的事項有：

請開啟主機上的GD library。
程式會在所在位置建立名為「cache」的子資料夾，如果主機權限不允許的話，請手動建立同名資料夾，並將此資料夾權限設定為 777。
此外，TimThumb所在的資料夾，其權限也需要開到 777。
如同範例網頁顯示，請使用絕對路徑來表示程式和圖片的位置。
想要更加快圖片載入速度的話，請將這些規則加到你的 .htaccess檔案中。

]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.darrenhoyt.com/2008/04/02/timthumb-php-script-released/"><img src="http://blog.yoren.info/wp-content/uploads/2009/05/picture-1-500x390.png" alt="TimThumb" title="TimThumb" width="500" height="390" class="alignnone size-large wp-image-792" /></a></p>
<p><a href="http://timthumb.googlecode.com/svn/trunk/timthumb.php" title="放在GoogleCode的程式原始碼">TimThumb</a>原本是應用在<a href="http://www.darrenhoyt.com/2009/03/15/mimbo-pro-20-released/">Mimbo Pro</a>這套<span class='bm_keywordlink'><a href="http://wordpress.org">WordPress</a></span>佈景主題裡面的PHP縮圖程式，後來開發團隊將它獨立為一個開放原始碼專案，造福更多的使用者。</p>
<p><a href="http://timthumb.googlecode.com/svn/trunk/timthumb.php" title="放在GoogleCode的程式原始碼">TimThumb</a>用更精簡的程式碼來達成<a href="http://phpthumb.sourceforge.net/">phpThumb</a>的功能，並且加入PNG和GIF圖檔的支援，也使用快取來提高程式的效能。</p>
<p>使用時請將TimThumb.php引入後，使用以下語法載入網站上的圖片：</p>
<pre class="brush: xhtml">
&lt;img src=&quot;/scripts/timthumb.php?src=/images/whatever.jpg&amp;h=150&amp;w=150&amp;zc=1&quot; alt=&quot;&quot;&gt;
</pre>
<p>參數的意義如下：</p>
<ul>
<li>w: 縮圖寬度</li>
<li>h: 縮圖高度</li>
<li>zc: 是否裁切圖片 (0 或 1)</li>
<li>q: 壓縮品質 (預設為 75，最大值為 100)</li>
</ul>
<p>而其他需要注意的事項有：</p>
<ul>
<li>請開啟主機上的GD library。</li>
<li>程式會在所在位置建立名為「cache」的子資料夾，如果主機權限不允許的話，請手動建立同名資料夾，並將此資料夾權限設定為 777。</li>
<li>此外，TimThumb所在的資料夾，其權限也需要開到 777。</li>
<li>如同<a href="http://www.darrenhoyt.com/demo/timthumb/">範例網頁</a>顯示，請使用絕對路徑來表示程式和圖片的位置。</li>
<li>想要更加快圖片載入速度的話，請將<a href="http://code.google.com/p/timthumb/source/browse/trunk/.htaccess">這些規則</a>加到你的 .htaccess檔案中。</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://blog.yoren.info/2009/05/php%e7%b8%ae%e5%9c%96%e7%a8%8b%e5%bc%8f-timthumb/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>多行 JavaScript</title>
		<link>http://blog.yoren.info/2009/05/javascript-multiline/</link>
		<comments>http://blog.yoren.info/2009/05/javascript-multiline/#comments</comments>
		<pubDate>Tue, 05 May 2009 11:19:27 +0000</pubDate>
		<dc:creator>yoren</dc:creator>
				<category><![CDATA[Webdev]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[programming]]></category>

		<guid isPermaLink="false">http://blog.yoren.info/?p=777</guid>
		<description><![CDATA[在Snook.ca看到的，在寫JavaScript的時候，脫逸字元「\」也可以用來讓程式碼換行：

var a = &#039;You can start here \
and continue here \
and then finish it up here.&#039;;

— I can&#8217;t believe I didn&#8217;t know that. 筆記&#8230;
]]></description>
			<content:encoded><![CDATA[<p>在<a href="http://snook.ca/archives/javascript/multi-line-javascript" title="Multi-line JavaScript">Snook.ca看到的</a>，在寫JavaScript的時候，脫逸字元「\」也可以用來讓程式碼換行：</p>
<pre class="brush: javascript">
var a = &#039;You can start here \
and continue here \
and then finish it up here.&#039;;
</pre>
<p>— I can&#8217;t believe I didn&#8217;t know that. 筆記&#8230;</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.yoren.info/2009/05/javascript-multiline/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>解析jQuery Selectors的效能</title>
		<link>http://blog.yoren.info/2009/05/jquery-selectors-%e6%95%88%e8%83%bd/</link>
		<comments>http://blog.yoren.info/2009/05/jquery-selectors-%e6%95%88%e8%83%bd/#comments</comments>
		<pubDate>Thu, 30 Apr 2009 17:50:13 +0000</pubDate>
		<dc:creator>yoren</dc:creator>
				<category><![CDATA[Webdev]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://blog.yoren.info/?p=772</guid>
		<description><![CDATA[
Stéphane Caron在解析jQuery Selectors的效能這篇文章中，比較了三種selector的執行效能，有以下的發現：

$(’.element’) > $(’div.element’) > $(’div.element:first’)，表示使用selector的時候，越簡單（層級越少）越好。
在position selectors的部份，也有相同的結果（越簡單越好）：$(’.sample-elements:first’) > $(’.sample-elements .last:last’), $(’.sample-elements div.last:last’) > $(’.sample-elements div:first’) > $(’.sample-elements div:eq(2)’)。
ID selectors 如 $(’#second’) 效能遠大於 class selectors，不但執行時間最短，呼叫次數也是最少的。

]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.no-margin-for-errors.com/projects/how-to-optimize-jquery-selectors/"><img src="http://blog.yoren.info/wp-content/uploads/2009/05/graph_3.gif" alt="pictures from http://www.no-margin-for-errors.com/" title="pictures from http://www.no-margin-for-errors.com/" width="462" height="251" class="alignnone size-full wp-image-773" /></a></p>
<p>Stéphane Caron在<a href="http://www.no-margin-for-errors.com/2009/04/28/demystifying-the-jquery-selectors-optimization/" title="Demystifying the jQuery selectors optimization">解析jQuery Selectors的效能</a>這篇文章中，<a href="http://www.no-margin-for-errors.com/projects/how-to-optimize-jquery-selectors/" title="How to: Optimize your jQuery selectors by: Stéphane Caron">比較了三種selector的執行效能</a>，有以下的發現：</p>
<ol>
<li>$(’.element’) > $(’div.element’) > $(’div.element:first’)，表示使用selector的時候，<strong>越簡單（層級越少）越好</strong>。</li>
<li>在position selectors的部份，也有相同的結果（越簡單越好）：$(’.sample-elements:first’) > $(’.sample-elements .last:last’), $(’.sample-elements div.last:last’) > $(’.sample-elements div:first’) > $(’.sample-elements div:eq(2)’)。</li>
<li><strong>ID selectors</strong> 如 $(’#second’) 效能遠大於 class selectors，不但執行時間最短，呼叫次數也是最少的。</li>
</ol>
]]></content:encoded>
			<wfw:commentRss>http://blog.yoren.info/2009/05/jquery-selectors-%e6%95%88%e8%83%bd/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
