bundle-fu

via:bundle-fu

這個RoR的plugin看起來很棒。我們一般在寫網頁的時候都會依照每一個網頁的需求include 不同的css/js 檔案。例如說,我們有一個main.css 掌控基本的設定,但是在產品檢視頁面可能要include 特定的 product.css/js

不過如果檔案一多的話,connection 開開關關的就會讓網頁變得比較慢才下載完成(不管大小)。所以最佳化的手冊都會告訴我們減少額外include 的檔案數量。

簡單的說,他會把你在網頁中include 的 js/css 各包成一個檔。使用上也很簡單,原本是這樣寫:

<%= javascript_include_tag “prototype" %>
<%= stylesheet_link_tag “basic.css" %>
<%= calendar_date_select_includes “red" %>
<script src="javascripts/application.js" type="text/javascript"></script>

裝了這個plugin之後,只要改成這樣寫:

<% bundle do %>
<%= javascript_include_tag “prototype" %>
<%= stylesheet_link_tag “basic.css" %>
<%= calendar_date_select_includes “red" %>
<script src="javascripts/application.js" type="text/javascript"></script>
<% end %>

最後html的頁面就會被個包成一個檔。像是這樣:

<script src="javascripts/cache/application_bundle.js?1193283359″ type="text/javascript"></script>
<link rel=’stylesheet’ href="javascripts/cache/application_bundle.css?1193283359′ type=’text/css’ />

看起來真的很棒阿 😛

AptURL

via: http://tombuntu.com/index.php/2007/10/22/the-apturl-protocol-handler-in-ubuntu-710/ 

這功能出現在Ubuntu 7.10版。 可以讓你透過網頁上的link 來觸發 sudo apt-get install xxxx 這樣。

安全性應該沒啥問題,因為他是去你系統裡的檔案庫找套件。

這實在是非常方便,對於撰寫(觀看)安裝xxx教學文章的朋友們,應該有很大的幫助。就是點一下點一下這樣,不用打指令就把該裝的裝的好好的了呢~~~

找個時間來重灌 Ubuntu 7.10吧 😛

在ROR中產生RSS

其實很簡單,請參考 HowtoGenerateARSSFeed 這篇。我是用第一種用法,看起來大致上就夠了。不過有幾點要注意一下。

1. @headers[“Content-Type"] = “application/xml" 要改成 headers[“Content-Type"] = “application/xml"

2. 如果有中文字都會被escaped掉。

例如標題是:測試,直接打開xml來看就會變成:escaped.png

瀏覽器打開來看是正常啦,可是我個人不是很喜歡這樣…,所以有幾種可行的方式可以處理。

1)第一種就是封在CDATA! ex:

xml.title{ xml.cdata!(“測試") }

那生出來的內容就不會幫你做處理(阿就都包在[[CDATA! 裡了阿)。

2)第二種就是使用 << 運算子 讓ror 內帶的rexml Builder知道要掠過這段處理。 ex:

xml.title do
xml.<<“測試"
end

這樣就可以了,不知道還有沒有更好的方法@@,原本xml builer 裡面是寫可以建立的時候給定 escape_attrs 這個參數。不過嘛…裡面也說這個參數不建議使用了。 其實這兩個方法應該可以一起使用,一般來說(RSS2.0),title的值都是已經濾掉html tag 的東東,所以就可以使用第二種方法。

description中的話,也可以自己濾掉後用CDATA封起來。但是在<content:encoded>中濾掉html tag 的話就不是很好了阿….,所以就可以使用第一種方法來維持原有的樣式。

我說ie 6

最近一直在整修手上的網站,尤其被前端的ie 6.0搞到七葷八素。

幾天前翻資料的時候,看到這篇:Trash All IE Hacks。裡頭提到:

Let’s admit it, we all hate Internet Explorer 6. About 80% of our CSS debug
time are spend on IE6.

所言不虛阿… 如果把手上兩個網站的使用者瀏覽器分佈圖拿來看:

(圖一 學術性的網站)

imedia.pngimedia.png

(圖二 面對一般大眾、設計師的網站)

ideastorming.png

學術性的網站看起來還可以。不過面對一般大眾的網站就…. ,不過第二個網站好歹是面對具有一定有電腦程度的人。我很難想像那種更加大眾型的網站佔有率會到多少…。

在台灣,一般大眾使用ie 的佔有率還是處於壟斷的狀態,這迫使著網頁程式設計師花費更多的工時來處理ie 6.0的問題(當然 如果你的網站堅持只做到ie 6.x only,那就不是問題囉:P)。誠如文中所提,為什麼一般使用者都沒有感覺到這點呢? 因為,設計師花了非常多的功夫(加班啦~~)在避開這些問題。當然,還是有些問題完全無法解決的,像是select 的橫躺8 的zindex。

應該要來 推廣一個活動叫做是:

珍惜網路程式設計師,拒用ie 6.0 (及其相關產品)。

😛

ie6 中的 select 元件

今天利用一點空閒時間找一下目前在做的網站的奇怪bug。就是視窗在拖曳的時候,整個畫面會閃動。ㄟ 肯定不是沒用 doubled buffer啦…。

原本的環境是:

jquery + interface。

後來一個個元件找,才發現是 select 惹的禍。 select在ie6.0中是視窗元件而不是html元件。所以很多css的屬性都上不上去。ex: z-index,或是background-image。也就是說,它的zindex無限大,所以會發生下列的冏境:

ie6.png

唔,它真的很不喜歡人家蓋它台 😛

不過閃爍的問題不只跟這個東東有關,還跟interface實做方式有關,把環境換成:
jquery+ jqury UI

就解決了閃爍的問題。改天再來看看他們實做的方式到底有何不同