XRAY cross browser web inspector

The Firefox Web Developer extension is a must-have extension for any web developer. Yet, this developer is a bit of a Safari freak. Till a couple of minutes ago, I was torn between both browsers. Safari is not perfect, but I prefer it to Firefox and with the addition of the Free, XRAY bookmark applet I am extremely happy. Sure I still need Firefox, just for checking web browser issues, but Safari does pretty much everything I want now.

Thanks, once again, to Mr Zeldman, for the heads up!

New Array on the Block

An Array is a container, which holds values in an ordered fashion.

(If you're using Mac OS X open up Terminal and type irb, then hit enter, to play along at home)

How to create a an Array

my_array = ['Ferrari', 'McLaren', 'Williams']

Get the value of an Array element

my_array[0]

Will return, "Ferrari"

my_array[1]

Will return, "McLaren"

my_array[2]

Will return, "Williams"

my_array.first

Will return, "Ferrari"

my_array.last

Will return, "Williams"

Arrays on the Block

A Block can loop through things. i.e:

my_array.each do |an_element|
puts an_element
end

Returns:

Ferrari
McLaren
Williams

Second Block Example

my_array.each {|an_element| puts an_element}

Returns:

Ferrari
McLaren
Williams

Block example with index

my_array.each_with_index do |an_element, index|
puts "#{an_element} is number: #{index}"
end

Returns:

Ferrari is number: 0
McLaren is number: 1
Williams is number: 2

A fast dash with the Ruby Hash

A Hash or Hash Table as it is sometimes called is used throughout Ruby and Ruby on Rails development. A Hash is a data structure that can hold keys and values. Similar to an array, but not ordered.

(If you're using Mac OS X open up Terminal and type irb, then hit enter, to play along at home)

How to create a Hash

my_hash = {:car => "McLaren", :driver => "Fernando Alonso", :engine => "Mercedes-Benz"}

Get the value of a key

my_hash[:driver]

Will return, "Fernando Alonso"

Set a new value for a key

my_hash[:driver] = "Lewis Hamilton"

Return the Hash

my_hash

Will return:

{:car => "McLaren", :driver => "Lewis Hamilton", :engine => "Mercedes-Benz"}

Add a new key value pair to the hash

my_hash[:tyres] = "Bridgestone Potenza"

Return the Hash

my_hash

Will return:

{:car => "McLaren", :driver => "Lewis Hamilton", :engine => "Mercedes-Benz", :tyres => "Bridgestone Potenza"}

Scratching with PeepCode

My quest for knowledge about this mysterious and elusive Ruby and her Rails friends, has led me to bookshops, online movie libraries, Railscasts and has resulted in a fair bit of Googling.

PeepCode

PeepCode is a set of movies, which do help shed light on Ruby on Rails, TextMate and other groovy stuff. Well recorded, and packed with juicy goodness, which makes them strangely addictive. PeepCode is another great tool for learning. The Ruby on Rails from Scratch series are particularly brilliant. Best of all they have some free examples, which will give you a good idea, if PeepCode is for you.

TextMate shortcuts for noobies

I have been using TextMate as my text/html/rails editing for a week or two now. It has largely replaced BBEdit, and for the most part I am extremely happy that I switched. I have been struggling with a few aspects of TextMate though. For example, if I used the bundle to insert a <br /> tag. (Keyboard Shortcut: ctrl + return), I got a <br> tag, not ideal when working on an xhtml file.

Setting up TextMate

This is easily fixed though thanks to Soryu's excellent TextMate Setup Tutorial

" The most important one for anyone who uses HTML will be TM_XHTML. Setting it to / will make all the HTML Bundle Snippets insert correct XHTML by closing single tags like <hr /> and <img /> "

TextMate Basics

Soryu has also written a TextMate Basics Tutorial, which is just the ticket for TextMate noobs like my self.

Cheating with TextMate

G Design's TextMate Cheat Sheet is a welcome addition to any TextMate users interior decor, or if like me your wife feels that pasting key commands on your walls spoils the interior design. Then why not put this Cheatsheet on your desktop instead.

Ruby on Rails Pluralize Tool

Came across a great tool to find out the correct pluralization for Ruby on Rails apps. Check out Geoffrey Grosenbach's Pluralization Tester. Which will give you the correct pluralizations for your RoR models, controllers and database tables.

Octopussy

For example, if you wanted to build a web app to hold your collection of stuffed octopi. You could load in octopus to Geoffrey's tester and will get a table showing the right names for each object.

This is extremely useful for a Ruby on Rails noobie like me. Nice one Geoffrey!

Rails params

Working with PHP, I developed a fondness for using the URL as a means of querying my MySQL database. Often using the $_POST and $_GET commands to retrieve the names and values from the URL's query string. With Ruby on Rails we use the params method.

params

I have just had the pleasure of watching the Rails from Scratch Pt1 movie from PeepCode. They have a good section in the movie describing params, and how we can use it to create a hash to pass data to the view.

Rails by convention uses the following path in it's URL path:
/:controller/:action/:id

This makes it very easy to create links either dynamically or with static queries, and we have the params method which we can use to grab stuff from the URL query string. Here are some examples which can be pasted into a :controller and then the results will be magically available in your view.

#place this in your controller which sets the id from the URL into the @message_from_params instance variable @message_from_params = params[:id]

Then place the @message_from_params instance variable in your view:

<%= @message_from_params %>

So with a url of /machines/index/1, the message from params would be: 1.
Yet, Rails is clever enough to accept strings as well. So, /machines/index/1-Robots, we would get 1-Robots.
Get the idea? If not check out the PeepCode!

Grabbing Query Strings

So if we have a query string like this: /machines/index/robots?name=R2D2. We could then create an instance variable in our Machines Controller like this:

@name = params[:name]

Then place something like this in our view: Name: <%= @name %> and your web browser will return: "Name: R2D2".

Use params, NOT @params

According to the people that should know, it is important to avoid calling @params, as this is now deprecated. Learn More.

Fingers and thumbs on the iPhone

I am itching to get my iFingers on the Apple iPhone. I can't wait, but will have to till Apple release it in Blighty. I am also keen to start developing web pages for the iPhone too, which is a lot of fun, according to Daniel Burka.

Digg on an iPhone

Daniel helped design a special part of Digg, custom made for the iPhone - digg.com/iphone. Not only that, he has kindly shared his thoughts on the design process - Digg on an iPhone.

Honkin' Fat Finger

"Even more fun is developing specifically for the user input quirks of the iPhone. When your primary input device is a honkin' fat finger, it changes the way you think about links and buttons. Everything's got to be bigger... way bigger. The yellow digg box and Digg It button are about twice as large on the iPhone as on the normal website. I also made the clickable area of the Digg It button even larger than the button itself so if you click on the edge of it, you'll still get a press. You also have to make sure buttons aren't too close together so that you don't mash one when you intend to hit the other."

No relation

No, Honkin' Fat Finger is no relation to me, but until I can get my iFingers on the iPhone, this is about as close as I will get to experiencing it.

A touch too much

Apple have created a site for iPhone web development too, which is worth touching on too.

Railscasts - free Ruby on Rails screencasts

In my ongoing quest to master Ruby on Rails, I found another great resource to augment my limited knowledge - Railscasts.com.

Thrice weekly, Ryan Bates hosts a new podcast focused on a small aspect of Ruby on Rails. Short and sweet these Railcasts are a fantastic way to get to grips with Ruby on Rails, either by just watching them all, or to answer and help solve specific problems.

Highly recommended.

I discovered Railscasts from the Rails Forum, so I thought it would be a good idea to mention this too, so, there you have it.

Ruby on Rails Beginners Tip Sheet

If, like me, you are getting up to speed with Ruby on Rails. I am sure you are doing everything you can to reinforce your learning. I am a bit of a slow learner, but am gradually coming to terms with Rails, with the help of video tutorials, .pdfs and the internet. I fell upon the Tip Sheet for Beginners from the Rails Wiki. The Tip Sheet is a useful tool for helping to remember the core concepts of Ruby on Rails.

Subversion Perversions

I normally work alone. Creating a web project from start to finish in a completely self-contained manner. If I make a mistake, then it's my problem. However, I am just starting a new project, with another developer. So already my previous working model is out of sync, it should read, "we are starting a project". See the difference? Our project is also my first Ruby on Rails Web App, so it is vital that my noobie mistakes don't rock our team boat too greatly. Already even the way I approach the venture is different. My iron fist needs to unclench and open up like a lotus flower to welcome my new collaborator warmly. So that our sparks of creativity, will flow freely and easily. We need to allow a creative exchange that allows us both to express ourselves in harmony. So, how do we do it, how can we create and manage this collaborative utopia?

Subversion

Well in the first example of the benefits of working as a team, my co-worker suggested we use Subversion, a magical "time machine" to harness and direct our creativity without damping or stifling our efforts. Once set up, Subversion will be the conduit that tracks and controls our work. Allowing me to make mistakes, but then swap back to any previous untainted revision. If I had a bad day on Tuesday, I can start again from Monday's version.

Subversion Concepts

What follows are some notes, that I have scavenged from the online Subversion Manual. Just pointers to the concepts and terminology used by the open source version control system, that will hopefully help lead me safely in my first tentative steps with Subversion. If you too are just starting out with Subversion, I hope you find them useful, but be warned, I have no real idea where this is going to take me. So if you are feeling brave, floor your Delorean and brace yourself as we hit the critical 88mph.

Subversion, the book

I am getting to grips with Subversion using the online book.. So, my first suggestion is to download it and get reading. Seems like a good place to start.

The Repositry

This is the hub of the project, this is the databank where all your work is deposited and maintained. Files are checked in and out of here. Kept magicaly in sync by Subversion

Check out

This is process of grabbing a set of files from your central Repositry and "checking them out" to your local working copy. i.e: $ svn checkout http://svn.example.com/repos/calc

Commit/ Checking in

The act of publishing your changes is known as committing (or checking in) changes to the repository. i.e: $ svn commit
button.c -m "Fixed a typo in button.c."

Update

So how does my partner, update their working copy with my changes? By using the "update" command, they can update their working copy to the same state as my last commit. $ svn update
U button.c
Updated to revision 57.

Revisions

From the manual: "An svn commit operation publishes changes to any number of files and directories as a single atomic transaction. In your working copy, you can change files' contents, create, delete, re-name and copy files and directories, and then commit a complete set of changes as an atomic transaction. By 'atomic transaction', we mean simply this: either all of the changes happen in the repository, or none of them happen." And: "Each time the repository accepts a commit, this creates a new state of the filesystem tree, called a revision. Each revision is assigned a unique natural number, one greater than the number of the previous revision. The initial revision of a freshly created repository is numbered zero, and consists of nothing but an empty root directory."

The Four States

By talking to the repository, Subversion can tell which of the following four states a working file is in:

1. Unchanged, and current The file is unchanged in the working directory, and no changes to that file have been committed to the repository since its working revision. An svn commit of the file will do nothing, and an svn update of the file will do nothing.
2. Locally changed, and current The file has been changed in the working directory, and no changes to that file have been committed to the repository since you last updated. There are local changes that have not been committed to the repository, thus an svn commit of the file will succeed in publishing your changes, and an svn update of the file will do nothing.
3. Unchanged, and out-of-date The file has not been changed in the working directory, but it has been changed in the repository. The file should eventually be updated, to make it current with the latest public revision. An svn commit of the file will do nothing, and an svn update of the file will fold the latest changes into your working copy.
4. Locally changed, and out-of-date The file has been changed both in the working directory, and in the repository. An svn commit of the file will fail with an “out-of-date” error. The file should be updated first; an svn update command will attempt to merge the public changes with the local changes. If Subversion can't complete the merge in a plausible way automatically, it leaves it to the user to resolve the conflict.

Getting Data into your Repository

From the manual: "There are two ways to get new files into your Subversion repository: svn import and svn add."

Import

"The svn import command is a quick way to copy an unversioned tree of files into a repository, creating intermediate directories as necessary. svn import doesn't require a working copy, and your files are immediately committed to the repository. This is typically used when you have an existing tree of files that you want to begin tracking in your Subversion repository. For example:" $ svnadmin create /usr/local/svn/newrepos $ svn import mytree file:///usr/local/svn/newrepos/some/project \ Note that after the import is finished, the original tree is not converted into a working copy. To start working, you still need to svn checkout a fresh working copy of the tree.

Recommended Repositry Layout

It is recommend that one creates a:

1. trunk directory to hold the 'main line' of development.
2. branches directory to contain branch copies.
3. tags directory to contain tag copies.

example:
$ svn list file:///usr/local/svn/repos
/trunk
/branches
/tags

Important Note

This looks like being an important point to bear in mind: "You must tell Subversion about everything else that you do. For example, if you want to copy or move an item in a working copy, you should use svn copy or svn move instead of the copy and move commands provided by your operating system."

Basic Work Cycle

• Update your working copy svn update
Make changes svn add svn delete svn copy svn move
• Examine your changes svn status svn diff
• Possibly undo some changes svn revert
• Resolve Conflicts (Merge Others' Changes) svn update svn resolved
• Commit your changes svn commit

Status

Apparently the most frequently used Subversion command is status: "svn status will give you all the information you need regarding what has changed in your working copy-without accessing the repository or potentially incorporating new changes published by other users." When you run the command, you get a list of the changes, and each line is given a letter to denote the state of the change:

• A - The file, directory, or symbolic link item has been scheduled for addition into the repository.
• C - The file item is in a state of conflict. That is, changes received from the server during an update overlap with local changes that you have in your working copy. You must resolve this conflict before committing your changes to the repository.
• D - The file, directory, or symbolic link item has been scheduled for deletion from the repository.
• M - The contents of the file item have been modified.

Dealing with Conflicts

Do one of three things:

1. Merge the conflicted text 'by hand' (by examining and editing the conflict markers within the file).
2. Copy one of the temporary files on top of your working file.
3. Run svn revert to throw away all of your local changes.

Once resolved, let Subversion know by running svn resolved

Commit Your Changes

Finally! Your edits are finished, you've merged all changes from the server, and you're ready to commit your changes to the repository. The svn commit command sends all of your changes to the repository. When you commit a change, you need to supply a log message, describing your change. Your log message will be attached to the new revision you create. If your log message is brief, you may wish to supply it on the command line using the --message (or -m) switch: $ svn commit -m "Corrected number of cheese slices." Sending sandwich.txt Transmitting file data . Committed revision 3.

Conclusion

The above concepts all come from the online manual, and now I understand a little of the theory, I am ready to practice Subversion. As I develop on a Mac, I decided my first task is to download a copy of SVNx, which is Subversion with a GUI, and built for Mac OS X. I'll post back with my experience of using SVNx at a later time.

Ruby, Ruby, Ruby, Ruby

No, I am not going to explore the lyrics of the Kaiser Chiefs latest sing-a-long. Instead I am going to explore something that is more RoR, than Rock and Roll. I have for the last week or so been exploring Ruby on Rails. Chances are you are already developing on it. But, if you too are thinking about building your own Rails web apps, here are some useful resources to getting to know Ruby on Rails.

RubyonRails.org

The 'Mecca' for all Rails freaks. Ruby on Rails was created by David Heinemeier Hansson, from 37 Signals. Rails was created in 2004, and was built using Ruby, an open-source scripting language, created by Yukihiro "matz" Matsumoto, from Japan and released in 1995. (Mental Note: Must get a longer name for myself!) The Ruby on Rails site is a natural place to start, when delving into this constrained but natural platform.

• Ruby on Rails
• Ruby on Rails Core
• Ruby on Rails API
• Ruby on Rails Wiki
• Ruby on Rails Talk

Ruby, Tie me up.

The idea of constraints might be a little offputting, but in practice, I am finding these "guides" and conventions extremely useful. It only just occured to me what the "Rails" moniker means, well I haven't confirmed this yet, but to me it can be taken literally. Your application benefits, just like the mythical Ruby train as it steams out of the Ruby station from these fixed tracks. Without the rails, the Ruby engine could lose it's way, plough through a bunch of html pedestrians or flatten the litte MySQL kid playing with his select statements. Conventions and constraints are what has made Rails my new scripting platform. Sure, I know enough PHP to do some damage, but the structured platform and conventions, makes it very powerful and surprisingly natural.

Learning Ruby on Rails

http://www.rubyonrails.org/docs will point you in the right direction, in your quest to become a master of Ruby and it's dominatrix, Rails. I really had a lot of fun learning Ruby with help from the poignant, cartoon foxes. Have purchased the pdfs of Agile web development with Rails and when I get my act together will have a few Gordon Ramsay like Rails Recipes that I can serve up to my visitors.

Ruby on Rails Video Learning

I am a subscriber to the VTC movie learning who have a good Rails title and also have spent the last few days learning RoR with my new Guru, Kevin Skoglund, and his fantastic Rails video, Ruby on Rails Essential Training from Lynda.com.

Anyway, I'll leave you with the following Ruby workout:

Repeat this phrase 100 times on your blackboard/aurally/mentally.

"Don't Repeat Yourself
Don't Repeat Yourself
Don't Repeat Yourself
Don't Repeat Yourself
Don't Repeat Yourself
Don't Repeat Yourself
Don't Repeat Yourself
"...

Hang on a minute, "Ruby, am I missing the point here?"

MySQL on Mac OS X Tiger

I have been toying with the idea of starting to develop using Ruby on Rails. To begin with, I knew I had the ordeal of installing MySQL on my MacBook Pro. Well, I assumed it would be a bit of a 'mare...

So, Where do I start?

Anyone who has had any experience of Mac OS X and MySQL will have heard of Marc Liyanage. Marc has published fabulous Mac friendly MySQL Binaries for a few years now So that's where I headed for first. However, Marc no longer builds these binaries, "the people at MySQL started to provide very nice official binary packages". So I trundled along and downloaded the Mac OS X 10.4 (x86) Package. I double clicked everything on the disk image, but couldn't see the database server from my old copy of the superb CocoaMySQL, so I grabbed a new copy.

I also paid special attention to Marc's important statement:

" You should at least run this command in order to secure the open master account in the default installation:"

/usr/local/mysql/bin/mysqladmin -u root password new_password_here

Well it was the least I could do! But wait, there is more:

"In recent distributions of MySQL, you can also run the script

mysql_secure_installation

instead of just changing the root password." You know what? I typed that in, restarted my Mac OS X 10.4.9, and presto, I could connect to my shiny new MySQL database server. Job Done, next stop Ruby on Rails...

Erm, don't try this home

The above is in no way any kind of proof-read, tried and tested tutorial. It's just a virtual piece of string, so that I can remember how to do it next time.

Apple iPhone web development

With much fanfare, the Apple iPhone is finally available to buy (in the USA). This much anticipated gadget is expected to sell like hot cakes, so Apple have published a guide to Optimizing Web Applications and Content for iPhone.

Apple says, " Safari on iPhone uses the same Web Kit engine as Safari on the computer desktop. With the Safari Web Kit engine, you can develop sophisticated Web 2.0 sites and applications that will impress and delight iPhone users. To design a web application that shines on iPhone and ensures a great user experience, you'll want to:"

• Understand the capabilities of iPhone.
• Follow established design practices for the web.
• Adopt iPhone-specific design principles.

Time will tell how successful the iPhone is. Will it have the revolutionary effect of the iPod? I think so.

Get the last record from mysql using php

While developing a new web app, I found a nice little php function that will get the record number of the last inserted record.

The manual states that mysql_insert_id will, "Get the ID generated from the previous INSERT operation", and in my experience, it does exactly what it says on the tin.

mysql_insert_id Examples

$link = mysql_connect('localhost', 'mysql_user', 'mysql_password');
if (!$link) {
    die('Could not connect: ' . mysql_error());
}
mysql_select_db('mydb');

mysql_query("INSERT INTO mytable (product) values ('kossu')");
printf("Last inserted record has id %d\n", mysql_insert_id());

 printf("View Last inserted record id %d\n", mysql_insert_id());

Get the last id

$last_id = mysql_insert_id();