Web Development 的學習之旅

2007/06/29

Blogger Template 筆記

[隨時記錄關於 blogger template 方面的事]


基本 widget 的格式


<b:widget id="Header1" locked="true" title="孚力資訊 (標頭)" type="Header">

id 為識別名稱, locked 用於 Template-Page Elements 頁面表示此 widget 是否被鎖定, type 為 widget 的種類. widget 目前觀察的結果, 裡面都會有一個名為 <b:includable id="main"> 的 tag, 表示widget 執行的進入點.



* 在 template 加了一些像 b:if 的 code 之後, 再更換另一個內建的 template, 發現 template 已更新, 但我加的 code 卻還能保留, 實在佩服.



* <data:blog.pageType/> 在首頁值是 "INDEX", 在文章內值是 "ITEM"(xxxx.html), 在 Archive 的年份值是 "INDEX", 在月份值是 "ARCHIVE"(年份用 search, 月份則用yyyy_mm_dd.html), 在 Label Vew 值是 "INDEX"(label 使用的是 search)



* 修改 template 的過程, 有時會下載到本機做修改再上傳, 有時會直接使用"網頁元素"做修改, 若兩者交互使用時, 記得在使用"網頁元素"做修改後, 一定要下載最新的 template 至本機修改, 以免發生覆蓋的情形.



* 只要加入 b:section tag 即可在"網頁元素"內新增一塊 dockable(可停駐)的區域.




* 用來判斷是否為單一文章的頁面:

<b:if cond='data:blog.pageType == "item"'>

* 需要針對特定文章做處理的話, 可以用下面指令判斷:(nnnnnnnnnn 是指 blogID)

<b:if cond='data:post.id != "nnnnnnnnnn"'>

* 尚不知何時有值:

<data:pageTitle>






[Blogger Help]

* Google 太強了, 有些用在 code 裡的單字都翻成中文了(那怎麼用呀?), 可能會需求要對照英文版.

版面配置的網頁元素標記

版面配置的小裝置標記

版面配置資料標記

版面配置的字型和顏色標記

如何才能將第三方網頁元素加入我的版面配置?

為他人建立新的迷你組件,供他們加入其版面配置




[Blog Resource]

Template 的基本內容和結構

Beta Template 版面改造

2007/06/28

超漫長的開機時間與慘不忍睹的速度

忍了一段時間, 終於受不了啦. 今天檢查了一下到底裝了那些東西, 結果發現令我意外的一些東西. 原來我們的 HP Color LaserJet 2840 裝了這些東西呀...快昏了:


1. 它的 ToolBox 是以 Java 開發的 Web 版, 安裝了 Java Runtime, Apache Tomcat 4.0

2. Digital Imaging 是以 .NET 安裝了, 所以安裝了 .NET Framework 1.1 環境(這部份是我本來就知道的)

3. 各式的 driver 與應用程式.

4. 當然, Install 與 Update 程式是少不了的.



那麼這台全方位宇宙超級無敵的一流機器在電腦開機時啟動了那些服務呢 ?

1. HP Digital Imaging Monitor

2. HP ImageZone 快速啟動

3. TomcatStartup 2.5

4. HPUsage Tracking -> 令人覺得恐怖的名字, 竟大剌剌地寫出來.

5. HP Software Update

6. 未在自動執行清單內的 driver



將上述的服務在啟動時關閉的話, 開機速度感覺提昇約 1/3, 後續的整體速度我不知道, 但可以感覺得到速度提昇. 以我使用電腦的時間來看, 這是無價的呀...



HP Color LaserJet 2840 這台機器用得還不錯, 只是沒想到它的軟體竟是那麼龐雜, 而在安裝時沒有完整的選擇性安裝方式, 變成一股腦兒全裝進去. 在解除這個部份後, 也就暫時不須要找別的可疑份子了.



感想: 除了安裝/移除的功能外, 廠商應該要提供一個總開閉, 讓使用者在暫時不用時, 可以做一次關閉的動作, 才不會將電腦的速度拖慢. 或是做更好易用的整合.



update: 後來又發現在 firefox 內速度明顯地慢, 因此又只好忍痛將一些比較用不著的 plugin 拿掉了


Ruby & Rails 常用的命令列

[更新中]


xx@xx.xx [~/path]# ruby -cw [filename.rb] <-- -c=check, -w=warning
xx@xx.xx [~/path]# ruby -v <-- version
xx@xx.xx [~/path]# ruby -e 'puts "Code demo!"' <-- -e=execute code
xx@xx.xx [~/path]# irb
xx@xx.xx [~/path]# ruby -r profile [filename.rb]
xx@xx.xx [~/path]# ri
xx@xx.xx [~/path]# erb
xx@xx.xx [~/path]# rails /path/to/your/app
xx@xx.xx [~/path]# ruby script/generate model [model_name]
xx@xx.xx [~/path]# ruby script/generate controller [controller_name] [method_name]
xx@xx.xx [~/path]# ruby script/server
xx@xx.xx [~/path]# ruby script/console

2007/06/27

Code Spot

底下的 code 摘自 Ruby for Rails:

class Customer < ActiveRecord::Base
def nice_name
title + " " + first_name + " " +
(if middle_initial then middle_initial + ". " else "" end) +
last_name
end
end

粗體字的部份是一段 if 語法會傳回一個字串, 所以意思就是若 middle_initial 不是空字串時則傳回 middle_initial+". ", 否則傳回一個空字串. 整個判斷語法被當成一個字串使用, 不需要像一般的 language 這樣寫:
def nice_name
if middle_initial then m=middle_initial+". " else m=""
title + " " + first_name + " " + m + last_name
end

這種用法在適當的時候可以讓 code 做更好的呈現, 我覺得更適合人類閱讀.

2007/06/26

Web 工具箱

FireFox plugin: WebDeveloper, Firebug, IE Tab
感謝這些 plugin 讓我可以過得輕鬆一點~

NsLookup - 輸入 domain 可以查詢 NS 相關資料的網站

ColorBlender

ColorSchemes - 各式的色彩組合瀏覽

Color Schemer Online - 線上調色盤

2007/06/23

jQuery

最近其實也在為學習 javascript 傷腦筋, 不過今天找到了 jQuery, 是一個 javascript framework, 提供新的開發 js 的方式, 感覺上不但可以降低學習曲線, 提昇工作效率, 還可以解決跨瀏覽器的問題. 我想再花點時間深入 survey, 沒什麼問題就先學 jQuery 吧

jQuery - 官方網站

INTERFACE ELEMENTS for jQuery - Demo - 可以到這裡看看使用 jQuery 能做到那些效果.

jQuery中文入門指南,翻譯加實例,jQuery的起點教程 - 網友 Keel 翻譯自 Gtting Started with jQuery 的文章

Keel's blog

Racklin's 阿土伯程式大觀園

2007/06/20

Crossing Border(跨越邊界)系列文章

Beyond Java 的作者 Bruce Tate 在 IBM dW 裡有一個 Crossing Borders系列的文章, 寫得非常不錯. 雖然被歸類在 Java technology 裡, 但其實裡面的主角是 Ruby & Rails. 可惜沒有繁體版本, 不過幸運的是至少還有簡體版, 簡體版整體上的翻譯水準不錯, 但專業術語用對岸的話來翻譯, 在閱讀時還是覺得生硬呀.

這系列文章針對許多重要技術關鍵點都有深入的說明, 即使沒有直接使用 Ruby or Rails, 也能在裡面獲得許多很好的概念, 進而更瞭解 Ruby & Rails.

不過目前每篇文章我都只是概略地瀏覽一遍(這是個人的閱讀習慣), 待日後再找機會深入研讀.

2007/06/19

Silverlight

Silverlight 是 MS 最新推出的技術平台, 大家都知道這是要與 Adobe 的 Flash 打對台的東西. MS 正式發佈的中文消息我目前只有找到香港的:
http://www.microsoft.com/hk/presspass/chinese/2007/06/20070605.mspx

較深入的介紹可以看這裡:
http://msdn.microsoft.com/msdnmag/issues/07/06/Silverlight/default.aspx?loc=zx

相關的討論在網路上可以找到很多. 個人的角度來看, 最有利之一是 Silverlight 跨瀏覽器的支援, 包含InternetExplorer, FireFox, Safari等, 如此才有機會與 Flash 一較長短. 看來 MS 一開始鎖定的方向就是從 Web 技術人員開始. 不過 MS 是否能公平地一直持續地支援各種瀏覽器, 也有待觀察(MS 過去的記錄實在不好呀). 之二是 Silverlight 似乎不像 Flash 只是一個獨門工具而已, 有點像個集合眾家技術的平台, 它使用了 DOM 的模式, 以 XAML做為描述語言, 並可使用 javascript 做更動態的運用, 也支援其他的語言. 這點我想也是從技術人員下手的吧...不得不佩服 MS, 真是厲害.

記得好幾年前 Macromedia 在推廣 RIA 的架構時, 其實我是被吸引的. 不過當時沒時間學習 Web 開發方面的技術. 而 Flash 一直以來也證明了它在使用者互動上的地位. 若能與後端資料庫系統結合, 實在是很棒的組合.

對 Ruby 而言, IronRuby 被公開宣布納入支援的語言, 證明了 Ruby 受到重視的程度不是只有在 Linux 而已, 我想未來一定會有更好的 Ruby 支援出現在 Windows or .NET 平台(不論是官方支援或是 open-source 的支援). 據說 IronRuby 目前還無法完全執行 Rails, 就表示移植得還不夠.

雖然我理解在不同的平台實作面上會有差異, 但我仍希望 Ruby 在未來不要因為不同平台而造成太大的差異, 這不是使用者之福呀, 要想辦法盡力消除這之間的差異, 否則反而是發展上的阻礙了.

2007/06/16

莫名的 require 問題

為了在 rails 使用全文檢索, 因而使用了"雪貂" -> ferret & acts_as_ferret.

由於不能用 svn, 所以無法以 script/plugin 安裝 acts_as_ferret, 只好以 gem 安裝.
在 gem 安裝完畢後, 結果發生了在 environment.rb 裡 require 找不到 acts_as_ferret 的問題.

$GEM_HOME, $GEM_PATH 設定檢查過了, 連 .bashrc 檔也檢查過, Google 大神也拜了, 應該沒問題才對...但問題還是存在. 在絕望時想想乾脆重來算了, 將一些自己安裝的 gem 全部 uninstall, 重新安裝. 安裝一個就測試一次, 結果發現 require 檔案找不到的問題不見了.

問題來得莫名, 消失的也莫名, 浪費了不少時間.

2007/06/13

讀書心得: Ruby on Rails 專業網站案例實作

目前閱讀進度是完成 Ch3. 這裡的進度不是指用看的, 而是一步步完全依書裡的步驗實作出來.

書中的內容是以一個網路書店的案子來貫穿全場, 搭配 Scrum(輕量級的開發流程), 並運用 Rails 的 test framework, 實踐 TDD.

Ch1. 簡短地介紹環境及安裝, 利用 Rails 快速建立網路書店的基本框架, 介紹 Rails 的 MVC 概念, 運用 generate 指令完成一個 About 的頁面.

Ch2. 作者管理(CRUD, 單一Table). 建立 ActiveRecord 模型(Model), 及 controller&view, 搭配單元測試及功能測試, 運用 rake, migration, validation. 全場完全實踐 TDD.

Ch3. 書庫管理(CRUD, 關聯性模型). 使用 scaffold 快速產生 CRUD 程式碼, 建立 fixture 資料, 建立1對多,多對多關聯的 ActiveRecord Model, 建立整合測試, 安裝 RedCloth gem, file_column plugin. 不完全 TDD, 重點在整合測式.

目前的感覺是這本書可能不適合"完全"的初學者. 不過若是開發環境已經備妥(mysql, ruby, ror, editor...等), 可以進行 coding 的話, 遇到的狀況會較少些.

由於大部份都是自己 coding, 所以不時遇到因為疏忽而漏了字母, 或多打了字母, 造成 test 失敗, 怎麼看就是看不到那個錯誤的地方. 不過幸好使用 TDD, 加上使用了 BeyondCompare, 使整個過程尚稱順利, 許多問題都蠻快解決了.

這本書翻得還不錯, 不過目前還是發現少數地方有錯誤, 不知是原文錯還是中文版錯. 這本書確實是以實作教學為導向, 不是以概念教學為導向, 因此遇到一些不瞭解的概念, 需要自行找答案.

大體來說這本書我覺得蠻適合我的, 它可以讓我很快速地瞭解整個實作的過程...在沒用過 ruby 及 rails 的情形下, 並確實地把網站做出來.(即使很多概念還不甚瞭解)

目前為止除了在 migration 裡使用到建立 constraint(foreignkey) 的 SQL 外, 其餘完全使用 ActiveRecord, 沒有用到 SQL command, 讓我覺得輕鬆多了. 在做整合測試時建立 DSL 使用到的語法, 也令我印象深刻, 這是我目前為止見過最接近的 use case 的 code, 非常地"平易近人".

Rails 讀取 Gem 需要的設定

問題: 在安裝 RedCloth 後, rails 仍無法使用.

即使執行 xxx@xxx.xxx [~/path]# gem install GEM_NAME成功後, rails 仍然無法使用, 解決的方式是在 ./config/environment.rb 內增加下面設定, 告訴 rails 那裡可以找到 gems:

ENV['GEM_PATH'] = '/home/[account_name]/.gems:/usr/lib/ruby/gems/1.8'


下面 HM 裡的文章可以參考之, 不過目前我還沒有更改 .bashrc 檔案, 也沒有 install local gem directory, 只改了 environment.rb 後 rails 就讀得到了.

update: 後來似乎還是有問題, 最後我還是改了 .bashrc 檔案

==========

How do I install my own Gems?

Problem:
The easiest and fastest way to install Ruby gems is to install them in your local directory, you will need shell access. To install your own gems use the following steps:

Solution:
1) Using File Manager in your cPanel make a copy of the .bashrc file in your root directory, name it .bashrc.bak.
2) Now edit the .bashrc file and add the following to the end of the file:
export PATH="$PATH:$HOME/packages/bin:$HOME/.gems/bin"
export GEM_HOME="$HOME/.gems"
export GEM_PATH="$GEM_HOME:/usr/lib/ruby/gems/1.8"
export GEM_CACHE="$GEM_HOME/cache"


3) Using your favorite SSH client connect to your site.

4) at the prompt type:

xxx@xxx.xxx [~/path]# cp /usr/lib/ruby/gems/1.8/cache/sources-0.0.1.gem ./
xxx@xxx.xxx [~/path]# gem install sources-0.0.1.gem
xxx@xxx.xxx [~/path]# gem update -y

This will update rails to the latest version and install it to your local gem directory.


5) When using a rails application, make sure you add the following to your ./config/environment.rb:
ENV['GEM_PATH'] = '/path/to/your/home/.gems:/usr/lib/ruby/gems/1.8'

將 fixtures 資料匯入 Development database


xxx@xxx.xxx [~/path]# rake db:fixtures:load

上述語法可以將 test 裡面 fixtures 的資料匯入 Development 專用的 Database

不過由於 table 複雜之後就會有許多的 constraint 出現, 必須按照特定的順序匯入, 否則很容易出現 mysql 的 error.

要指定順序必須要在後面加上 FIXTURES=yml_file1,yml_file2 做為參數, 例子如下:

xxx@xxx.xxx [~/path]# rake db:fixtures:load FIXTURES=authors,publishers,books,authors_books

那麼就會依照指定的順序將資料匯入 Database.

2007/06/11

Coding work

在進行 MVC 方面的 coding 時, 經常性會接觸到的就是 \app 及 \test 兩個資料夾內的檔案, 當進行某個 model (例如: Author class)及 Controller(例如: admin/author)相關的作業時, 由於 Rails 預先建好的資料夾目錄, 相關檔案分別會在:

\app\model
\app\controllers\admin
\app\views\admin\author
\test
\test\functional\admin\author

產生的各種檔案可能超過十個以上, 在不同的資料夾切換開啟檔案, 實在沒有效率. 使用 SciTE 的 Session 功能將相關檔案清單儲存起來(ex: Session_Author.ses), 再接照自己的喜好調整開啟的順序. 這樣在修改 Author model 時, 就比較輕鬆了.

接著使用 BC, 建立一個獨立的 Session, 將不須用到的 folder 列在排除的資料夾內, 畫面就清爽許多. 要找出特定檔案 FTP 上傳, 也就容易許多.

我的 Editor 選擇

之前由於使用 PieTTY, 遠端編輯器只好使用純文字的 emacs, 雖然據說 emacs 功能很強大, 但純文字的模式加上一堆的 Ctrl, Alt 的組合用起來實在很難過, 也很不熟, 可能需要蠻長一段時間來適應. 不過若能完全適應, 其實也不賴, 直接 remote coding 根本不須再靠 FTP.

接著在 Client 端使用 PSPad, 這款用了一陣子了, 還蠻順手的, 最重要的是支援 FTP edit, 這一點很方便, 也支援 ruby syntax highlight. 整體上我覺得是很不錯的工具, 但是希望它能在 FTP edit 的方面再加強些, 不然同時編輯多個檔案時, 不太方便. (例如沒有 folder tree, favorite 不能加入 ftp file, 也不能 save as 指定要存入的 folder) 另外一個遺憾是程式碼瀏覽器無法使用在 ruby code 上, 可能要寫點什麼加進去, 目前我也還沒有能力做這件事.

因為在 Client coding, 所以 ftp 方面的 support 就非常重要了, 看來看去只有 Beyond Compare 可以用, 有了 BC, PSPad 的 FTP 功能就不太需要了.

edtior 我最後的選擇是 SciTE. Ruby Installer 內建的編輯器, 支援相當多的語言, 由於體積非常小, 速度相當的快, 也提供了相當多 programmer 會用到的功能, 像 Auto Complete, Abbrevation, Block Comment, Folding(代碼折疊, 可惜 PSPad 沒有提供) 等.

遺憾的是 SciTE 雖然支援 Ruby, 雖沒有支援到 RHTML(Ruby in HTML), Google 之後發現也有人問了這個問題, 但似乎沒有看到有人提供解法. 不過幸好 SciTE 的自訂能力很強, 硬著頭皮勉強將 html.properties 拿出來參照並稍微修改一下, 另存成 rhtml.property. 最後調整一下 SciTEGlobal.properties 內的參數就可以暫時拿來用了. (最後是覺得 SciTE 或許以後會需要更深入瞭解一下)

* PSPad 的擴充能力應該也很強, 只是目前是以 SciTE 為主, PSPad 為輔, 也就不研究下去.


結論:

  • Server 端使用 emacs => 純文字模式, 非常不能適應, 需長期抗戰.
  • Client 端使用 SciTE + BeyondCompare => 適應期較短, 在 client coding 畢竟還是比較方便的啦. 像有時還需要 compare 之類的情形, 在 server 端就麻煩了.
  • 若是要整批 FTP 上傳, 還是用 FileZilla 會比較快.

2007/06/09

Ruby.NET compiler

Gardens Point Ruby.NET Compiler
Group: http://groups.google.com/group/RubyDOTNET

雖然的版本是 0.8,還在發展中,不過看起來已經有相當的基礎了。

我想透過這個 project, 最大的好處在享受 ruby 的簡潔語外, 還能立刻擁有強大的 IDE 及 .NET Framework 的豐富資源,像是在 ruby 內 create 一個 C# 物件等等。

不過自己目前是沒有意願深入 .NET 啦,興趣不是沒有,但目前先專注在 Ruby&Rails 應該是比較有效率的方向,未來再看有沒有機會進 .NET 吧。

Embedding Ruby in Kylix/Delphi

Embedding Ruby in Kylix/Delphi

內嵌於 Delphi 程式內呼叫 Ruby 的元件, 就像以前用的 script component 一樣, 可以擴充程式的動態能力.

2007/06/06

目前版本

下面是目前使用的版本:

xxx@xxx.xxx [~/path]# ruby -v
ruby 1.8.5 (2006-12-04 patchlevel 2) [x86_64-linux]
xxx@xxx.xxx [~/path]# gem -v
0.9.2
xxx@xxx.xxx [~/path]# rails -v
Rails 1.2.3

底下使用 script/about 來顯示:
xxx@xxxx.xxx [~/path]# script/about
About your application's environment
Ruby version 1.8.5 (x86_64-linux)
RubyGems version 0.9.2
Rails version 1.2.3
Active Record version 1.15.3
Action Pack version 1.13.3
Action Web Service version 1.2.3
Action Mailer version 1.3.3
Active Support version 1.4.2
Application root /home/(...)
Environment development
Database adapter mysql

emacs

經過一番折騰, 總算啟用了 SSH(我使用 PieTTY). 根據 HM 簡單的指引, 建立了第一個 RoR 網站. 看到頁面上 "You're riding the Rails!" 的字樣, 還有點感動哩.

不過現在要修改 yml 檔案, 才發現需要文字編輯器, 現在連 emacs 都還沒用過, 傷腦筋.

目前模式已大致確立, 後端使用 Linux+Apache+MySQL+Ruby+RoR, 完全使用虛擬主機, 自己不安裝也不管理後台的主機及系統, 單純使用 SSH 連線, 瞄準 Web App 的開發.

不過目前 HM 並不提供 Subversion hosting 的功能, 所以未來或許還是有需要轉移.

2007/06/02

RoR 1.2.3

原本一直以為 HM 支援 RoR的版本是 1.1, 還一直有點小鬱卒, 昨天實際詢問過後才知道是 1.2.3 版. 這樣實在太帥了, 才可以跟書的版本一致. 接下來只要解決 SSH 的連線就可以實際來 try 了.

目前仍仰賴 xoops 來架站, php 仍放手不得, 所以也要抽時間 study 一下, 起碼要能對多數的 code 看得懂才行.

update: 看了本 PHP+MySQL 書的 2/3 後, 就不由得想喊暫停了. 目前在有限的時間裡, 必須要集中火力比較好, 所以 PHP 研究工作目前暫停.