Finger Tips - a fistful of handy web notes

Starting MySQL on Leopard

2008-07-09T09:08:00.003+01:00

For many, many months I have been seeking a website called "Angry Fly" and in particular the Fix for MySQL on Leopard page. It offered a quick and easy way for me to get MySQL started up on my Mac OS X 10.5 aka Leopard MacBook Pro. Worked ok on Tiger, but Leopard seems to be a bit more fussy.

I have just noticed a new comment today by Chris St.Germain.

"a new preference pane has been released from mySQL that actually works now! The file is: ftp://ftp.mysql.com/pub/mysql/download/gui-tools/MySQL.prefPane-leopardfix.zip "

This has made my day, a working MySQL preference pane in system preferences! Whoppee!

Leopard on Rails

2007-12-12T11:06:00.000Z

So, Apple Mac OS X Leopard comes pre-installed with Ruby on Rails. I am currently running 10.5.1, but till now haven't even played with RoR on the spotty cat, till now...

Found a great post, Ruby on Rails on Leopard: A N00b's view. This was just what the doctor ordered. I hadn't installed the X Code tools, so did that and pretty much followed Jeremy's example.

I did get one problem, when running the sudo gem update --include-dependencies, I got an error message: ERROR: While executing gem … (OpenURI::HTTPError). Googled it, and found this post, which suggested trying the command again, which I did.

Like Jeremy I navigated to an old Ruby project directory, typed: "script/server start" and then pointed my browser to 0.0.0.0:3000 and got the default "Welcome on board" welcome. Great stuff, now for MySQL...

How to Size Text in CSS

2007-11-22T18:46:00.000Z

Their may be an end in sight to the hard-fought web typography battle between designers and users, thanks to Richard Rutter and his A List Apart article - How to Size Text in CSS.

Peace.

Phone Fingers - no relation

2007-11-21T18:53:00.000Z

Great for burglars and iPhone users. These handy, finger sized receptacles will keep unwanted fingerprints and smudges off anything you touch.

I haven't actually tried Phone Fingers, as I do quite like the feel of naked skin on glass. Not every one is an iPhone naturist though, and I am sure they will be of real benefit when it's cold.

Give someone the finger this Christmas

I think with Christmas approaching, these would make an ideal present. And lets face it, it's not everyday one gets the opportunity to give someone the finger…

Disclaimer: Unfortunately, I didn't design these, and I am in no way related to the Phone Fingers corporation.

Future Of Mobile

2007-11-15T14:22:00.000Z

"What do Apple know about mobile phones anyway?" were the parting words of my mobile phone supplier as I told him that I wanted to move from him to 02 and the Apple iPhone. A good question and one that I hoped would be answered at yesterdays inaugural Future of Mobile event at London's iMax theatre.

Looking through the schedule just before the event, I had a horrible thought that maybe I had been duped by the hype of the iPhone, and maybe I should have saved my money. Maybe I should have waited for my Vodafone contract to expire, ditched the BlackBerry and got an Android from Google and the Open Handheld Alliance?

Meet Android

Google's Dave Burke gave a great demonstration of the open source coding of Android, which is expected to appear in the second half of '08. Built on Linux, the Android shows a lot of promise, but the emulator didn't match anything that my iPhone can do. I know it's early days, and by its open source nature should allow for some innovative features, when the SDK is released along with the first Android phones next year. Don't get me wrong, I fully approve and support the OHA initiative, but as many speakers pointed out the mobile industry is huge, so there is plenty of room for new devices.

Apple iPhone Fanboy Convention

The MC of the F.O.M was Brian Fling. A self confessed Apple fanboy but also the author of the .mobi developers guide, so I am pretty confident that he knows a thing or two about this thing called mobile. He gave a great talk on how the iPhone will change the mobile space, along with a demonstration of his Leaflets iPhone app.

Brian and the other speakers of the event all said great things about the iPhone. Even speakers from Vodafone and Sony Ericsson praised it. Sure it is not perfect, the built in camera is nowhere near as good as my Nikon D70 ;-) but it is a lot slimmer and portable. It is locked to just one operator - O2 in the UK, and you can't take the battery out like I can with my BlackBerry when it goes tits up.

Show Notes

This was one of the first events where I left my laptop at home. Figuring I could get by with my shiny new iPhone and my trusty Moleskine. My Moleskine has never crashed or got a virus, but I came a cropper to it's one weak link - the pen. My pen had run out of ink!

Cursing the fact that I had left my MacBook Pro at home, I tried out the notes feature of my iPhone. I am still getting used to typing on it, but as the day went on, my respect and love of the iPhone just grew and grew. On the way home I listened to the built in iPod, which fades out nicely when someone calls. It then hit me, what do Apple know about making phones - a lot! In a market where Nokia, Sony-Erricson, Samsung, and all the others throw hundreds of different devices at us. It seems the only innovation is the colour, Motorola's pink phone being one of the major innovations of the last couple of years.

Brian attended a mobile conference a couple of years ago. He came away with a list of conclusions and thoughts that a "Mobile 2.0" device should address or include.

2 years later, the iPhone ticks off nearly all the points from the list and also adds others that no one apart from Apple had even dreamed of!

A Smart phone for the masses

It is unique. A beautiful design that works for 3 and 93 year olds. It is not perfect, far from it, for a start it doesn't come in pink, but I believe Brian is correct, it is the smartphone for the masses. It's not cheap, but neither is my computer, tv or car. I don't mind paying for good design, you can keep your free phones, thanks.

Yes, I am glad I attended the first Future of Mobile, and just as glad I got the first iPhone.

Future of Mobile Notes

Apparently Carsonified will publish the slides from F.O.M at a later date. Until then check out my pics from the Future Of Mobile (taken on the iPhone), and here are my notes, as typed into my iPhone...

09:00 How are people using mobile today? Brian Fling Blue Flavor One fifth of people have mobile web LBS Location based services

09:10 Keynote: Tuning into mobile culture Tony Fish AMF Ventures Convergence is an out dated idea We are now creators The screen of life started with cinema, tv, of Mobile is a creator and consumer You are the author and the audience Mashups Digital footprint Why are google keen to make Android? How can others get value from your content? Focus on uniqueness Metadata is king

09:55 Cracking the code: developing for mobile devices Luca Passani Ad Mob XHTml advanced - eg background image of block elements Simple XHTML

11:30 Panel discussion: Will content be King on Mobile? Steve Page, Guillaume Peersman, Prashant Agarwal Submit sitemap to google & yahoo Google use a nokia user agent

13:30 The Future of Mobile Browsers Charles McCathieNeville, Opera

13:00 beyond WAP: Advanced browsing , Mobile AJAX, and the future of the Web Daniel Appelquist, Vodafone Check out dojo Ajax Soonr Facebook on iphone Deb.mobi

14:00 How the iPhone will change the mobile space Brian Fling, Blue Flavor Web 2.0

15:00 Android & the OHA Dave Burke, Google

XRAY cross browser web inspector

2007-07-30T16:26:00.000+01:00

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

2007-07-30T09:38:00.000+01:00

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

2007-07-30T07:20:00.000+01:00

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

2007-07-29T16:51:00.001+01:00

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

2007-07-29T13:51:00.000+01:00

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

2007-07-28T15:52:00.000+01:00

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

2007-07-28T11:31:00.000+01:00

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

2007-07-27T14:53:00.000+01:00

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

2007-07-27T14:23:00.000+01:00

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

2007-07-25T09:02:00.000+01:00

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

2007-07-23T10:19:00.000+01:00

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:

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

trunk directory to hold the 'main line' of development.
branches directory to contain branch copies.
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


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:

Merge the conflicted text 'by hand' (by examining and editing the conflict markers within the file).
Copy one of the temporary files on top of your working file.
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

2007-07-20T11:50:00.000+01:00

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, 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

2007-07-11T19:42:00.000+01:00

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

2007-07-05T14:08:00.000+01:00

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

2007-07-05T13:29:00.000+01:00

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();

Styling Attributes

2007-06-26T15:44:00.000+01:00

Styling web pages with CSS is never easy, but I found a way of styling attributes of tags. Very useful if you start dabbling with microformats or just want to style specific links in a certain way.

Examples


a[rel="tag"] { color: #F00; }
a[href="http://ifingers.com"] {color: #FFF; background-color: #00F; }

One Web Acid2 and CSS3 by Hakon Wium Lie

2007-06-13T10:38:00.000+01:00

CTO, Opera Software

howcome AT opera.com

First Part - One Web

WAP being an example of bad practice. The web should evolve.

Opera Web Devices

Started in 1995. Opera for Desktop for Windows. Then in 2000 Opera for Mobile - good for Opera. Opera for Devices - in the past 12 months.

Example is the Wii. Opera is the default Wii browser. A sharing experience, changing the web. One code base for all devices.

The $100 dollar laptop. Cheap machine, not for public. Think less, less, less, so a child can use it. Small keys for kids. Opera is perfect for it.

Similar to the Wii, no hardrive, wi-fi, mesh networking.
Foundation - One laptop per child.

mini.opera.com - mini is different. Small java app, abou 100k. Proxy server fetches data, compresses it to binary. Opera mini enables good surfing app. Free.

specifications

HTML5

WHAT WG and W3C
the element

CSS

CSS 2.1
CSS3 Values and Unites
CSS3 page units

Video on the web today

Obscure video coding. Video should be made a first class web citizen.

2 problems:

part 1 - the markup ie

part2 - video format

Right way of encoding. Most video formats are proprietory. Open standard for video.

Ogg Theora video is open format - similar to png, used by wiki.

Ogg Theora

Cousin of Ogg Vorbis from xiph.org generator - ffmpeg2theora

CSS

CSS 10 years old. Hakon worked with Tim Berners Lee at SERN. Hakon proposed CSS.

shows css zen garden as an example.

CSS3

CSS3 has been split into 30 modules. Work in progress.

Media Queries

Handheld modes is an example of a media query. Media Types include presentation mode - projector.

@media handheld and (max-width; 300px)

Multi column Layout

True multi column layout. - Mozilla implememnted it now. Scales images and adds columns depending on the size of the screen.

CSS3 Multi column Layout

define number and width of columns

body {
column-width: 14em;
column-count: 3
columns

Great for CSS for professional printing.

CSS3 Paged Media - crop marks, multi columns, footnotes, floating elements such as images to the bottom of a page

example

Headers and Footers

title { string-set: header content }
@page

Page Floats
div.figure { float: bottom page }

Cascading Style Sheets - Designing for the web - third edition. Used html and css to print the actual book. Using printsxml

A book microformat - boom!

set of class names:
titlepage
table of contents
preface
chapter
appendix

semantics - borrows names from DocBook.

Web fonts

Hopefully in the next 12 months... could be wrong...

Microsoft's core fonts

Andale Mono Arial Comic Sans MS Courier New Georgia

web fonts introduced css2 in 1998. Supported by Microsoft and Netscape.
No support for truetype

i.e.
@ import url (http://www.

Acid2

Acid2 was made to show if IE was valid or not. Acid1 tested for box model. Safari was first to get it right. Firfox 3 will pass Acid2 in 07. Microsoft IE7 still does not pass the Acid2 test.

Web Applications

Use web standards for web applications - contrary to Jeremys presentation! Opera have developed Opera Widgets. Almost 1000 widgets available.

Google Gears

A API framwork for javascript, adding sql database to the browser. Store data off and online. Off-line access to web pages. More robust operations!

How to be a creative sponge - John Hicks

2007-06-12T13:50:00.000+01:00

Hicksdesign, based in Witney outside Oxford.
Famous for Firefox and Thunderbird Logos

How do you do it? How do you get te ideas to actually design something?

Lots of parts of the design process - colour, grids.

"Designers need to be visual leeches, constantly cataloguing and recording information - Jason Santa Maria

Creative Sponges - collect creative juices

The 3 stages of the creative sponge

Collect
Catalog
Create

Collect

Everything you collect is relevant to the design progress
Observe life, how does the light reflect off the walls?

Collect Books
Penguin books - a design classic, good typeography - cheap!
Collect Magazines - weekend supplements - good ideas for quotes, headers and side boxes, typography.
Found Typography - Take pictures of signs
Stuff off the internet - very easy to drag and drop
Print and Pattern blog, johnsons thought of the day
Veer - good for type - try the flont
Freebies - Sign up for mailinglists - T26, Burbank
T Shirts - threadless t shirts, great t shirts, colour schemes
Leaflet Racks - oooh, lol they are the designers buffet lol take everything, one of each, take even the bad ones.
Clothing labels and tags
Packaging - breakfast cereal boxes - dorset cereals - american typewriter
Photos that go wrong: Photos using other objects - take photos through a beer glass
Doodles from you head - let out the stuff in your head
But, don't collect websites! Approach doesn't work.

Catalog

"Designers are magpies..."
The good old sketchbook - use Moleskine, and letraset, writing notes is as important as images

John Hicks used to spurn Moleskine but now actively uses landscape Moleskine Reporter notebooks. These have great paper, and fit nicely between you and your computer keyboard.

Binders
Box files
Not an easy way to get it out again
John Hicks uses iPhoto. Create hierarchical Scrapbook Folders
Yojimbo - takes everything

The "killer app" for the web creative sponge: flickr

For the first time peoples personal collections are being shared, great groups - Pictograms and Pucblic Space Typeography

Create

Peter Blake, famous for the sergeant pepper album - goes to markets, buys objects nad rearranges them.

The Fear : blank white paper

The process of collecting can stimulate

Creative Cataysets

Deadlines!
Change of environment - walk/drive
Go to bed!
Peace and quiet (go for a wee)
Take a shower - hot water stimulates the brain
Mind Mapping

Critique it!

Shows example of the London 2012 Olympics - and Daily Mail readers versions - any better?
Mood Boards are your friend!
Create a British Theme - not the empire and stuff. Italian Job, Mr Ben, Coldstream Guards, Sgt Pepper Album - look for common elements eg Red.
Someone else would do it and get a totally different mood board

Advantages of mood boards

Concentrates on the concept/mood
Stimulates concersation
Quick
Clients can make their own

Design Patterns

Patterns are optimal - collect design patterns - check out tab design patterns on flickr

Sample colors

Dodgy phtotos can create color patterns

Finally a couple of examples

Open Doors student site - slanted text, copied colors

"Soak up everything, you never know when you are going to need it"
- John Hicks

High Performance Web Sites by Nate Koechley

2007-06-08T00:29:00.000+01:00

One dozen rules for faster pages

1. Share results of our research in t Yahoo is firml committed to openness

Why talk about performance?

In the last 2 years, we do a lot more with web pages. Steve Souders - High Performance Two Performance Flavors: Response Time and System Efficiency The importance of front end performance!!! 95% is front end. Back0end vs. Front-end Until now we haveon 1 Perception - How fast does it feel to the users? Perceived response time It's in the eye of the beholder 2 80% of consequences Yahoo Interface Blog yuiblog.com 3 Cache Sadly the cache doesn't work as well as it should 40-60% of users still have an empty cache Therefore optimize for no-cache and with cache 4 Cookies Set scope correctly Keep sizes low, 80ms delay with cookies Total cookie size - Amazon 60 bytes - good example. 1. Eliminate unnecessary cookies 2. Keep cookie sizes low 3. 5 Parallel Downloads

One Dozen Rules

Rule 1 - Make fewer HTTP requests css sprites alistapart.com/articles/sprites Combine Scripts, Combined Stylesheets Rule 2 - Use a CDN amazon.com - Akamai Distribute your static content beofre distributing content Rule 3 Add an Expires Header Not just for images images, stylesheets and scripts Rule 4: Gzip Components You can addect users download times 90% of browsers support compression Gzip compresses more than deflate Gzip: not just for HTML for gzip scripts, Free YUI Hosting includes Aggregated files w Rule 5: Put CSS at the top stsylesheets use < link > not @import!!!!! Slower, but perceived loading time is faster Rule 6; Move scripts to the bottom of th te page scripts block rendering what about defer? - no good Rule 7: Avoid CSS Expressions Rule 8: Make JS and CSS External Inline: bigger HTML but no hhtp request External: cachable but extra http Except for a users "home page" Post-Onload Download Dynamic Inlining Rule 9: Reduce DNS Lookups Best practice: Max 2-4 hosts Use keep-alive Rule 10: Minify Javascript Take out white space, Two popular choices - Dojo is a better compressor but JSMin is less error prone. minify is safer than obstifacation Rule 11: Avoid redirects Redirects are worst form of blocking Redirects - Amazon have none! Rule 12: Tuen off ETags

Case Studies

Yahoo 1 Moved JS to onload 2 removed redirects 50% faster What about performance and Web 2.0 apps? Client-side CPU is more of an issue User expectations are higher start off on the right foot - care! Live Analysis IBM Page Detailer - windows only Fasterfox - measures load time of pages LiveHTTPHeaders firefox extension Firebug - Recommended! YSlow to be released soon.

Conclusion

Focus on the front end harvest the low hanging fruit reduce http requests

Links

nate.koechley.com/blog nate.koechley.com/talks/2007/atmedia-london

Beyond AJAX by Jesse James Garrett Notes

2007-06-07T23:06:00.000+01:00

Jesse James Garrett from Adaptive Path

Notes made at @media07, Islington, London

Their work:

Flickr, Creative Commons The elements of user experience - check it out book also available. jig.net - visual vocabulary Blog - comes from one of founders of adaptive path Jesse coined the word - "AJAX". Web 2.0 - need bright coloured logo - lol

What is the web good for (or at)?

Example, early TV, modeled on Radio, and Live theatre. As tv evolved, in the mid 1950's there was a flowering of activity and innovation. 10 years on the evolution of the web, similar flowering.

It'a a big web out there, be a part of it

We are contributing to the web when we put something out there. Most compelling example is Flickr - Because they acknowledged the existence of a larger web. i.e. Uploaders, Web tools and publishing, prints and yahho intergration.

Interfaces, not pages - applications, not sites

Allow people to manipulate data, away from the "page metaphor" model. KAYAK shown as an example - aggregating results from many web sites, and manipulate results

Products that get better with use

Web is most powerful when people are connected together. YouTube shown as an example. Showing the band, "OK Go" - Here it goes again. Made their own video, put it on YouTube, and the video endded up on MTV. It won a grammy! Not only did it further OK Go but also YouTube - then google bought it for 1billion dollars.

Delivering rich experiences

In ancient greece, Ajax was a mighty warrior, a missile from the cold war. First email was from a Dutch soccer fan. lol People want to define AJAX in a specific technical way - which misses the point. But can be characterised by two points:

asynchronous interaction model - we are not just trying to retrieve a page anymore
Browser-native technologies - If you asked someone to create a rich interaction on the web, all the caveats such as using windows xp, with service pack 2 - lol

Favourite metaphor for AJAX - "Roller skates for the web!" - Bruce Sterling Javascript creates a sense of fluidity. Replicate the feeling you get from using ggoogle maps. The story begins in 1886, Scientific American Supplement - a new photographic apparatus. Did not work, as George Eastman, who created a continuos roll of film, instead of plates. He said, "You press the button, we do the rest". He constructed technology to work with his film, he dubbed the product - "The Kodak". He reduced the 19 steps from the SAS article to 3 steps. Even the marketing experience was simplified. He hid the complexity from the user. It transformed the industry, unimaginable before. People didn't see the possibilities, map sites were as good as they were in 1998. GMail was the first AJAX app. This got Yahoos attention, felt threatened because of Yahoo mail. They called a meeting, compared their stuff to the dynamic interfaces of google. Yahoo maps was not on the list.

How do you create a transformative product?

What do you want users to say after you have developed - "Can't live without it." Steve Jobs given as an example. "Over simplified quote". When a new technology comes out. WordStar screen shot given as an example, and when compared to a typewriter. i.e. video cassette recorders, How do we get past technological mindset. Then you get into the problem, and you rely on product features - showing Microsoft word with all the tool bars turned on. The blinking unset clock "The really great person will keep on going - and create a beautiful elegant solution, that works." Steve Jobs, 1984 Stop relying on technology Stop relying on features Rely on user experience instead! Eastman could have replaced plates with film, but instead he stood back and created something special. TiVo shown as an example, they could have just replicated the Diamond Rio pmp300 - first mp3 player, modeled on a cassette player. The record industry tried to ban the pmp300. 3 years later, the Apple iPod, did less, cost more but then took over the market. The success is due to the fact that the iPod acknowledged the way that users interact with technology.

We respond to products as if they are people

Products are people too

We develop a powerful, emotional connection with the product. The products that work best, are ones that have a distinct personality. Shell is a term for user interface. Users only care about the user interface - the rest is magic.

The best Web 2.0 apps start with the user interface

"Designing from the outside in" - Tim O'Reily i.e.

Experience Strategy

Google calendar started out - fast, visually appealing, and joyous to use.
Drop dead simple to use.

Google Calendar has already overtaken the no2 player. They set a star to sail their ship buy Apple have created an end to end system, beyond what the ipod on it's own can deliver. Flickr experience - check out Flickr's about page! i.e. We want to help people ie, the role that the product plays in the lives of the users.