JQuery Fail to Run in Firefox

I found a weird problem (?) with how Firefox process the “script” tag.

The following code works fine in Safari, but the code doesn’t get run in Firefox.

<html>
<head>
<title>Title</title>
<script src=”javascript/jquery.js” type=”text/javascript” />
<script type=”text/javascript”>
$(document).ready(function() {alert(“Ready to go!”);});
</script>
</head>
<body>
HTML body
</body>
</html>

I couldn’t find the solution through Google. But, I did look through various code examples and noticed that the “script” tag must be enclosed with “</script>” instead of “<script … />”.

Here’s the new HTML…

<html>
<head>
<title>Title</title>
<script src=”javascript/jquery.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(document).ready(function() {alert(“Ready to go!”);});
</script>
</head>
<body>
HTML body
</body>
</html>

No Comments »

Don’t Make Me Click

I was watching Aza Raskin‘s presentation about reducing user interactions.

Aza presented some interesting ideas. One way to reduce interactions is to make things to work automatically. For example, he showed how an RSS reader automatically loads additional data once the user reaches the end of the page, thus the user just needs to keep scrolling to see more news.

Another example is to use various gestures to interact with zooming in and out of a calendar.

If you’re remotely interested in Information Architecture (IA) or user interface design, do yourself a favor and spend about an hour to see the presentation.

One more thing… Aza did his presentation in Firefox! :)

No Comments »

Using Tab Bar and Navigation Controllers [iPhone]

I found a nice video tutorial about using Tab Bar and Navigation controllers in my application.

Be sure to download the sample code and the high resolution video. :)

Another resource that I highly recommend is one of Apple’s programming guides if you want to visualize the relationships between the controllers.

No Comments »

NameError after the Upgrade to Rails 2.3.2

I was upgrading my local rails version from 2.2.2 to 2.3.2 by running:

gem update

I changed config/environment.rb to:

RAILS_GEM_VERSION = ’2.3.2′ unless defined? RAILS_GEM_VERSION

Starting my local server and navigating to localhost:3000 produced the following error:

NameError in UsersController#login
uninitialized constant ApplicationController

Obviously, Google to the rescue (again)… :)

I found a post from http://giantrobots.thoughtbot.com/2009/4/15/rails-2-3-2-upgrade-gotchas

The solution is to rename controllers/application.rb to controllers/application_controller.rb.

Matt has a lot more tips for upgrade, so I recommend reading his post.

No Comments »

Preview Web Design Using Browsershots.org

It is not easy to see how our design will look on various browsers.
Browsershots.org to the rescue!

Browsershots

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. :)

No Comments »

Font Comparison Website

I found a good website that I can use to compare fonts.

Even better, Typetester website allows me to download the CSS! :)

Typetester

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! :)

No Comments »

AJAX Progress Indicator

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.

No Comments »

Reset Button in Rails

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! :)

No Comments »

How to Debug in Rails

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! :)

No Comments »

Rails Date Validation – Step by Step

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.
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
Validates Date Time-1

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.

17 Comments »

Rake DB:Migrate Error due to Foreign Key

I had so many junk/test records in my Rails project and thought “hey… rake DB:migrate is a quick way to wipe those records.”

I ran ‘rake db:migrate VERSION=0′ and MySQL was not too happy with me.

Here is the error:

rake aborted!
Mysql::Error: Error on rename of ‘./<database name>/#sql-bb3b_3′ to ‘./<database name>/contexts’ (errno: 150): ALTER TABLE `contexts` DROP `user_id`

Again… Google is my best friend to find these kind of errors. :)

The problem is caused by database foreign key.

If your migration has the following line:

class MigrationName < ActiveRecord::Migration
def self.up
  .
  .
  execute “alter table <table name> add constraint <foreign key name> foreign key (<column name>) references …”
end

The solution is to drop the foreign key first before removing the column:

def self.down
  execute “alter table <table name> drop foreign key <foreign key name>”
  remove_column …
end

No Comments »

Switch (Upgrade?) My Web Application to Use Rails 2 (2.0.2)

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.

No Comments »

Setup and Configure Subversion Repository Server

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.

No Comments »

Web Content Accessibility Guidelines (WCAG) 1.0

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. :)

No Comments »

RSS Fatigue

I think I have too many RSS feeds that I follow… :(

I have been cutting down the number of feeds, but it’s been difficult to do. Obviously, I still want to keep a few feeds about general news, business news, IT news, learning (self improvement, information architecture, web design), and (last but not least) tech news!
I think I have about 40 feeds that I follow everyday… I’m looking forward to cut them down even further. Again, it’s difficult to do so because I really enjoy following the news.

The good news is that I only skim through most of the feeds. :)

No Comments »

Rails Symbols

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)

No Comments »

Rails 2.0.2 Uses SQLite3 by Default?

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

No Comments »

Web Design Book: Bulletproof Web Design

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!

No Comments »

Updated Sidebar

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. :)

No Comments »

Ruby on Rails: Date and Time Validation

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. :)

No Comments »