It is not easy to see how our design will look on various browsers.
Browsershots.org to the rescue!
All you need to do is to enter your public (i.e. accessible from Internet) website address.
I didn’t even know that Iceape is actually a browser. 
I found a good website that I can use to compare fonts.
Even better, Typetester website allows me to download the CSS!
There are three different sections to display different font formats including size, alignment, color, background color (among other settings).
Once you have selected the formatting, scrolling down will reveal the fonts in various styles (e.g. regular, bold, italic).
Good website to bookmark!
I’ve been working on integrating AJAX into my project. It wasn’t easy, but I got the data to load dynamically.
Depending on how much data to load, it may take a while especially over a slow connection (or an overloaded server). It is a good practice to have some progress indicator.
I found a really cool website that can help to build the progress indicator.
Even better, the images are free for use!
Feel free to post other websites that offer the same feature.
I am sure at some point web applications will require an entry form.
I just notice that Rails does not make the ‘Reset’ button available. Here is an example of an HTML form with a reset button:
Google helps me again!
I found a post from mc-kenna.com to describe what needs to be done.
<%= submit_tag "Start over", :name => ‘reset’, :type => ‘reset’, :id => ‘task_reset’ %>
Upon further research, I found an interesting discussion/ticket about making the reset button available in Rails. Making the button available is considered as a bad practice.
The ticket refers to Jacob Nielsen’s useit.com. A little blurb:
The Web would be a happier place if virtually all Reset buttons were removed. This button almost never helps users, but often hurts them.
I agree with the opinion that the button should be removed!
Every developers need debuggers now and then. I have been using ruby-debug for a while now.
You can check whether you have ruby-debug installed:
gem list ruby-debug
If you do not have ruby-debug installed, you can run the following command:
gem install ruby-debug
I have been using Mongrel for my development. To enable debugging, you should start your server with –debug option:
ruby script/server –debug
To stop at a certain point in your code, all you need to do is to add a ‘debugger’ line:
def edit
@task = Task.find(params[:id])
debugger
current_user_id = find_current_user_id()
end
Once your application reach the ‘debugger’ line, the server window will turn into:
(rdb:10)
To check for a variable value, type:
pp @task
You can explore other commands easily by typing ‘help’.
(rdb:10) help
ruby-debug help v0.10.1
Type ‘help <command-name>’ for help on a specific command
Available commands:
backtrace delete enable help next quit show trace
break disable eval info p reload source undisplay
.
.
Happy debugging!
Update 5/31/2008: Use ActiveSupport::CoreExtensions::Date::Conversions::DATE_FORMATS
I have invested some time to get Rails date validation to work (whoo hoo!).
Without further ado, here are the step by step instructions:
1. Download Rails Date Kit from my site. Note that I got the original kit from http://www.methods.co.nz/rails_date_kit/rails_date_kit.html.
Extract the files in rails_date_kit_1.2.0.tar.gz to <your application>/vendor/plugins/rails_date_kit.
2. Get the Validates Date Time plugin by running the following command in your application directory:
script/plugin install http://svn.viney.net.nz/things/rails/plugins/validates_date_time
You should have a new directory in your <your application>/vendor/plugins/validates_date_time
3. Put the necessary files in the right places.
Copy vendor/plugins/rails_date_kit/calendar.js to public/javascripts
Copy vendor/plugins/rails_date_kit/calendar.css to public/stylesheets
Copy vendor/plugins/rails_date_kit/calendar_prev.png to public/images
Copy vendor/plugins/rails_date_kit/calendar_next.png to public/images
Copy vendor/plugins/rails_date_kit/date_helper.rb to app/helpers
4. Include the css and javascript files for the calendar in your page header (e.g. view/layout/tasks.html.erb):
<%= stylesheet_link_tag ‘calendar.css’ %>
<%= javascript_include_tag ‘calendar’ %>
My application uses application.rhtml, thus I just added the lines there.
5. Create a new file called date_formats.rb in config/initializers. All you need to add is:
ActiveSupport::CoreExtensions::Date::Conversions::DATE_FORMATS.merge!(:default_date => ‘%m/%d/%Y’)
Note the capital Y in ‘%m/%d/%Y’. Obviously, you can add more date formats as needed.
Update: Adjust the date format accordingly to your locale. For example, use ‘%d/%m/%Y’ for displaying date/month/year.
6. Use the following code to add the date field in your input form (e.g. view/tasks/new.html.erb):
<%= date_field :task, :due_date, :format => ActiveSupport::CoreExtensions::Date::Conversions::DATE_FORMATS[:default_date], :value => @task.due_date %>
You can also wrap the whole ‘ActiveSupport::CoreExtensions::Date::Conversions::DATE_FORMATS[:default_date]‘ into a function in app/helpers/application_helper.rb.
6. Tell your model to use en-us date format by adding the following line:
ValidatesDateTime.us_date_format = true #use mm/dd/yyyy format
Update: Set ValidatesDateTime.us_date_format to ‘false’ if your date format is not month/date/year.
7. Validate away! Here’s an example of my model validation:
Class Task < ActiveRecord::Base
.
.
validates_date :due_date, :allow_nil => true
.
.
End
Enjoy!
Post any questions in the comment.
My web application was using Rails 1.2.6. I decided to upgrade my application to use Rails 2.0.2.
I simply changed ‘1.2.6′ to ‘2.0.2′ in config/environment.rb:
RAILS_GEM_VERSION = ‘2.0.2′ unless defined? RAILS_GEM_VERSION #*handy - Use Rails 2.0.2 now from 1.2.6
It was time to fire up my application and I got the following warning:
*******************************************************************
* config.breakpoint_server has been deprecated and has no effect. *
*******************************************************************
I fixed the problem by commenting out the line in config/environments/development.rb:
# Enable the breakpoint server that script/breakpointer connects to
#config.breakpoint_server = true #*handy - Unused for Rails 2.0.2
Obviously, I put my comment there at the end…
One down… I fired up the server and got a hard error:
/!\ FAILSAFE /!\ Thu Apr 03 18:57:55 -0500 2008
Status: 500 Internal Server Error
A secret is required to generate an integrity hash for cookie session data. Use config.action_controller.session = { :session_key => “_myapp_session”, :secret => “some secret phrase of at least 30 characters” } in config/environment.rb
There was a little hint in the error message. I added the suggested line in config/environment.rb:
…
Rails::Initializer.run do |config|
#*handy - Needed for Rails 2.0.2
config.action_controller.session = { :session_key => “_myapp_session”, :secret => “some secret phrase of at least 30 characters” }
…
There was a :secret symbol which I changed to (obviously) something secret.
I recommend GRC’s Ultra High Security Password Generator for a good random string.
If you have a saved session before, be sure to clear it up by running “rake tmp:sessions:clear”.
Post in the comments if you have any question.
I have seen how convenient it is to have your own svn repository. For example, if my code changes broke one of the AJAX features that I am working on, I can easily restore everything to my previous working revision.
If you are not familiar with svn, there is a good free (yes! FREE) book about svn from svnbook.red-bean.com.
I followed Jeff’s tutorial to have my local svn repository (recall that I am using a Mac and it has Subversion by default).
I modified the tutorial a bit to store my repository in my home directory (e.g. /Users/my_user/Projects/svn). In addition to changing the directory creation steps, I also need to change one line in the svn.conf file:
SVNParentPath /Users/my_user/Projects/svn
Everything works great so far!
I created a repository for my Ruby-on-Rails projects in localhost/svn/rails.
To list my repository:
svn list http://my_user_name@localhost/svn/rails
Obviously, change my_user_name with the user name that you define in Jeff’s tutorial and change the path to you repository path.
You can also add as many repositories as you want. For example:
- By programming language: localhost/svn/java, localhost/svn/dotnet.
- By projects: localhost/svn/depot.
- By version: localhost/svn/2007 or localhost/svn/summer2005.
To initially import a project:
cd /path_to_your_project
svn import -m “Initial project import” . http://my_user_name@localhost/svn/rails/project_name
Yep! You need to have the dot before the http://….
Note that svn can be used for any type of documents including Word or Excel documents!
Have fun with svn! I am sure you will find it worth your time to install it.
Post a comment if you have any questions and I will try to answer them as much as I can.
There is a good usability guidelines document that one can read from w3.org.
It is not a long document but it is a dense one and contains good guidelines. For example, “Don’t rely on color alone.”
It is worth an hour (or more) of your time if you are into web design and usability.
I know I will put this in my future reading.
It is very important to understand symbols and how it behaves in Rails. Symbols concept was very confusing for me before. Again, Google to the rescue!
I found a good article from Gluttonous that explains how symbols work.
As I progress through Agile Web Development with Rails, I notice that symbols and strings can be used interchangeably in most cases. For example:
redirect_to(:action => “index”)
redirect_to(:action => :index)
I just upgraded to Rails 2.0.2 by running:
$gem update rails
I started my new Rails project. The content of config/database.yml surprised me!
development:
adapter: sqlite3
database: db/development.sqlite3
timeout: 5000
I used Google to search for the change and found Rob’s post.
Here I am using MAMP as my MYSQL database provider so far. So, I have to try it out.
I quickly whipped up a test project and created a new model.
$rails test
$ruby script/generate model product
I modified db/migrate/001_create_products.rb to add one column only:
create_table :products do |t|
t.column :name, :string
end
Finally…
$rake db:migrate
== CreateProducts: migrating ==================================================
– create_table(:products)
-> 0.0033s
== CreateProducts: migrated (0.0035s) =========================================
The first thing that came to my mind is “SWEET!!!”
Although Mac has SQLite3 by default, Windows users may not. The good news is that Rob also has the solution.
I think this is a good news for users that have sqlite3 installed by default because there is one less thing to setup. Also, using SQLite3 makes the development directory more compartmentalized.
After playing around with the database a little bit, I don’t like how data is shown in the query. Each field is delimited by a pipe character.
$sqlite3 db/development.sqlite3
sqlite> select * from products;
1|Test Product
I can’t seem to find a Mac-based tools to maintain SQLite3 database. Also, I don’t want to install/configure web-based tools if one is available.
I’ve decided that I’m going to stay with MYSQL for now due to more mature tools (that I can use to view my MYSQL database).
rails -d mysql myapp
I recently purchased Bulletproof Web Design book and I like it!
I am still learning CSS and this book take my learning to a different level. There are some techniques in the book that I actually use already (ehm… sidebar).
I am a fan of fluid website design and Dan Cederholm (the book author) shows how it can be done.
I highly recommend the book!
I’ve updated the sidebar to be a bit nicer.
I’m planning of improving my theme a little bit at a time with various techniques that I observe and learn from other websites and books.
I’m beginning to enjoy web design now.
Update May 26th, 2008: I have posted new instructions to validate dates in Rails.
I am working on my Rails project and need a date validation in the model.
I found Validates Date Time Plugin.
According to RailsLodge Plugin page, I can automatically download the whole branch by issuing the following command:
ruby script/plugin install http://svn.viney.net.nz/things/rails/plugins/validates_date_time/
The resulting files should be stored in the vendor/plugins/validates_date_time.
Once I have more time, I’ll be sure to give it a spin.
I set an instance variable by running the following query:
@some_list = Model.find_by_column_name(nil)
I tried to interate the content of @some_list and received the following error:
NoMethodError in Controller#action
Showing app/views/model/list.rhtml where line [line number] raised:
undefined method `each’ for #…
Apparently, I just need to add “_all_” in the query:
@some_list = Model.find_all_by_column_name(nil)
Easy solution, eh?
Update: I found the solution after I looked at the back-end SQL query.
Task Load (0.000354) SELECT * FROM table WHERE [some condition] LIMIT 1
After I added “_all_” in the statement, I finally get the right query.
Task Load (0.000332) SELECT * FROM table WHERE [some condition]
I finally start to create my own Rails application and it is not easy to remember all the RoR conventions.
Raaum.org has a very good database conventions that RoR (*cough*) “recommends.”
Obviously, I use Locomotive for my Rails development.
Thank you, Ryan!
I did an investigation on how to improve HTML rendering. I found general recommendations from Yahoo! web site.
I also read Steve Sounders’ High Performance Web Site site and found good examples! Here’s the link to the main site.
Here’s an interesting rule from Steve Sounders’ site:
Put your stylesheets in the document HEAD using the LINK tag.
The rule makes sense after I thought about it, but I wouldn’t know about the rule unless I did some testing and benchmarking.
I like to customize my blog page that is running on Wordpress. Obviously, I would like to replicate the setup in my Mac.
I will go through a step-by-step instructions on installing Wordpress in my Mac.
1. Download MAMPS. I choose the non-pro version. You should get a .dmg file.
2. Download Wordpress. I choose to download the .tar.gz file. It does not really matter which one you choose.
(more…)
I just noticed that my theme passes the W3C CSS validation!
I can also easily validate my future themes easily.
Update: My theme also passes the W3C HTML validation!
I was working on chapter 9 from the Agile Web Development with Rails. I noticed that clicking on the “Add to Cart” button did not work. I checked my code a few times and found that the code was fine.
I could not find anything useful using the Google search.
I remembered a quote from one of the Sherlock Holmes adventures, “When you have eliminated all which is impossible, then whatever remains, however improbable, must be the truth.”
I started going through the potential issues that I could think of:
1. I thought I incorrectly typed the code. I even tried to copy and to paste the code from the book. Problem was still there… 
2. I checked the logs and thought that the database was not working. I saw the database query worked correctly. I even restarted the MySQL server.
3. I tried using Safari to access the project (I usually use Firefox). I wanted to make sure that I could reproduce the problem with a different browser. The problem was there. “Interesting” was the word that came to mind.
4. I restarted Mongrel and the problem persisted. Hmmm… OK.
5. I restarted my Mac. Silly me…
6. Finally, I thought that I might have used an older version of Rails since I created the depot project and Rails defaulted the version to 1.1.6.
(more…)
book and I like it!