Just another WordPress.com weblog

Its a bit hard to describe what Google Wave is because it has so many features and it dabbles in so many areas. Let me address some of the key features that I think really make Google Wave a serious game changer on the web today.

1) Robot, meet human.

For those who haven’t watched the video – Wave allows you to build robots that can parse what you type and basically write text back (its a bit more complex than that – you’ll have to look at how they structure messaging).
With Wave robots, you have a framework for the real semantic web – humans communicating to robots (and vice versa). The goal of the semantic web was for each element of the web to contain some metadata on it for software to parse and make additional meaning out of. The real problem is with the current web structure – how does the robot receive the information? (you can’t just scrape every website). Because of this, robots are currently hard to build, hard to communicate to and from, and not part of everyday life. Google wave will change that.

2) Human, meet human.

Real time, instant keystroke by keystroke updates.
Google Wave takes away the lag time between conversations, resulting in something that feels like you’re talking. Etherpad did this, but not in such a large scale and without the multimedia element. This restores some more of the human element of socializing that has been lost through text – very important. It makes Google Wave almost compete in the social sphere. Almost. We’ll see what Robots and Gadgets come out.

3) Work Collaboration and Group Productivity.

Wave implements version control on all documents – called playback.
Collaboration is one area that Google Wave dominates almost instantly. Seeing and making changes real time in a versioned environment cuts out the collection process and speeds up group workflow tremendously. Expand version control from coding to everything other document that you make, and you’ve just hit the Wave.

4) Embedding Wave will take over comment systems.

You can embed Wave elements on any external site, and it will include all the wave user functionality (like instant keystroke transmission).
No matter where you are on the web, you can socialize with others using Wave in a way that can provide instant feedback and real time discussions (which is much better than comment systems of today). Or, just use wave like one of the existing comment systems of today.

5) Robots. Oh so many robots.
There are so many custom robots that you can think of to make your personal data accessible to you from the web. Create a robot sitting on your machine that acts like an SSH command line (pm that robot script/generate model and have it reply to you the output). Create a robot can give you every document you have on your computer in Gadget-formatted text. Create a robot to message you whenever something happens to your webservers. It reminds me of the old IRC bots, only much better. So many possibilities that make Google Wave a great protocol for Web based browser applications.

6) Extensability and Openness.

What more do I say? Open source, and specifically open sourcing Wave rocks.

7) Messaging.
Ok, so sure, it does messaging differently too. It merges threads, version control, and instant messaging together in a way that is interesting, to say the least. Its more convenient than email, but nothing I couldn’t live without (We’ll see once I try it). I doubt its an email killer – unless you count the human to human interaction part.

In short, Google Wave is much more than just email – its fundamentally changing the way we interact – with people, software, data, and more.

I’m excited to try it out and to build something with it, and I think that every developer needs to consider a Wave world and what that means.

Tables and pure CSS are not the only choices for layout management.

Grid based css libraries have the benefits of rapid design, an easy learning curve, good consistency and minimal markup. They also come with a reset.css (clears default styles), free you from working in pixels and promote thinking about structure, proportions, white space, and scalability.

As an introduction, we’ll look at how to create a 3 column layout in blueprint. Lets get started.

Download blueprint.css from http://www.blueprintcss.org/ (zip next to the logo). extract it and put the blueprint folder into your css folder.

• Create an index.html file and link it up to blueprint.css:

<head>
<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">
<!--[if IE]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
<style>
.g {background-color:green;}
.b {background-color:blue;}
//g and b to visualize what we're doing and can be removed at any time.
</style>
</head>


• Add a container to the body:

<body>
<div class="container showgrid"> <!--the class showgrid is for debugging and can be removed at any time -->
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <!-- all further code goes in this container!!! -->
</div>
</body>


just a normal blueprint grid.

This is our grid. You can see 24 columns, some space in between each column, and some rows corresponding to the breaks that we’ve put in.

• Lets create a header. In the container after the breaks add this div:
  

<div class="span-24 last g">This is a header.</div>


span-24 means this div spans 24 columns. last means its the last one in that row, and is used to let blueprint know when to go to the next row.

a simple header to our simple website

• Lets create a 3 column layout. Since we have 24 columns, lets try 6/12/6 proportions.

<div class="span-6 g">column1</div>
<div class="span-12 b">column2</div>
<div class="span-6 last g">column3</div>

3 column layout, without many hacks, tables, or difficulties.

• Now add a footer:

<div class="span-24 last b">footer</div>


And the layout is finished.

There. The layout is done, but we still have to use css to stylize things, add in content, etc. I’ll show that in a bit, but that’s really all you need to know in order to dive into blueprint.

Before you go off playing around with it, you should look into blueprint/src, and read each of the css files, especially grid.css – they’re tremendously helpful in telling you what blueprint can do for you. Make sure you try out the push, pull, append, prepend, box, border, colborder, and hr classes, as they’re used often. Feel free to add in your own classes – I like to keep my colors as classes so that I don’t get tempted to go color picking for an hour or two.

Do note that blueprint may break if you try to stylize in the same div that you do layouts with. So, don’t do:

<div class="span-10" style="border 1px solid black;"> some content</div>

and instead do:

<div class="span-10"><div style="border 1px solid black;">some content</div></div>

an extra layer, but overall still nothing as bad as tables.

I’ll leave you with a somewhat stylized form of what we had previously. Blueprint has great samples and test pages that show you exactly what it can do for you, so you should check that out. Their sample page shows just how trivially easy it is to nest columns within columns, creating as complex a layout as you want.

Final look: I added in a simple list on the left, a table on the right, a box class for the header, some hr’s, and some lorem ipsum.

Final look of the site! Simple stuff, really...


<head>
<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">
<!--[if IE]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
<style>
.g {background-color:green;}
.b {background-color:blue;}
#g and b to visualize what we're doing.

</style>
</head>
<body>
<div class="container">
<div class="span-24"><h2 class="box">This is a header.</h2></div>
<hr>
<div class="span-6"><ul style="text-align:right;">
<li><a href="#">This</a></li>
<li><a href="#">is</a></li>
<li><a href="#">my</a></li>
<li><a href="#">friendly</a></li>
<li><a href="#">navigation</a></li>
<li><a href="#">bar.</a></li>
</ul></div>
<div class="span-12"><div style="padding:20px;border:1px solid #d6d6d6;"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse est justo, tincidunt eu, ornare ornare, vehicula id, augue. Proin eu elit. Curabitur dignissim blandit augue. Nam dui nisi, convallis ac, hendrerit at, commodo et, dui. Maecenas consequat, felis eleifend gravida pellentesque, neque purus venenatis tellus, a rhoncus tortor lectus non nisi. Proin sodales, ante faucibus tempor tincidunt, risus leo iaculis velit, sed aliquet sem lacus eget purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec vestibulum turpis ac neque. Maecenas suscipit orci non nibh. Donec tristique. Donec nec diam ut odio fermentum auctor. Nullam molestie sapien.
</p><p>
Nullam vel quam nec nisi luctus bibendum. Praesent lobortis dui eu augue. Phasellus consectetur, erat a condimentum hendrerit, sem massa elementum neque, sit amet elementum justo ligula vitae nunc. Cras rhoncus libero id purus. Aenean nulla enim, placerat nec, tincidunt id, gravida sit amet, erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam eleifend dolor. Integer massa magna, dignissim ut, semper sit amet, laoreet id, magna. Cras convallis ligula sit amet sapien. Mauris blandit elit sit amet leo.</p> </div></div>
<div class="span-6 last">
<table>
<tr><td><a href="#">This</a></td></tr>
<tr><td><a href="#">is</a></td></tr>
<tr><td><a href="#">Navigation</a></td></tr>
<tr><td><a href="#">Done</a></td></tr>
<tr><td><a href="#">in</a></td></tr>
<tr><td><a href="#">Tables</a></td></tr>
</table>
<div class="box">This is an advertisement!!!<br/><br/><br/><br/><br/><br/><br/><br/><br/></div>
</div>
<hr>
<div class="span-24 last"><div style="text-align:right" class="large">and finally a footer. (c) 2009 by... wait this took less than 15 minutes.</div></div>
</div>

Now, the hospital that admitted arch in for intensive care had no idea what to do with him. Who could blame them; dried off and arch merely looked like a kid with chicken pox, only unconscious and barely breathing. Intensive care was confused over his status – normally, his concussion, bee stings, and partial drowning weren’t life threatening by themselves, but put together and they had no idea what it would cause.
It turns out, of course, that he was in no danger of passing on. What a sorry book this would be if he did. The doctors took no chances, though – they put a breather on him, did an MRI scan, filled him up with antitoxins, and set him on a feeding tube. They also gave him a sticker – he was, after all, just a kid.

Arch woke up with the painful realization that he was still alive. He was fine with that – he enjoyed being alive – but it felt as if every nerve on his body was on fire. He nudged his hand upward, felt the pain shoot up his arm, and decided he was better off not moving. He opened his eyes to a well lit hospital room; sun shone through the window, highlighting a flower vase on the sill, and in the far corner, a doctor was looking at a clipboard, back turned talking quietly to a couple sitting next him. The couple looked to be in their mid 40′s – probably the family that rescued me, Arch thought.

“I must have been hit by a truck or something,” Arch mumbled as he acknowledged his consciousness.
The doctor turned to look at him, and the couple stood up.
“Not quite, Arch.” the doctor said. “You’ve suffered a concussion, 15 bee stings, partial drowning and a sprained ankle. You have a slight fever right now, but nothing serious. Give it a week or two and you should be back to normal.”
“Arch, do you feel ok?” the woman asked.
“Just hurting. What am I drugged up on?” Arch asked.
The doctor flipped a page up and scanned his clipboard. “Just an IV. We’ll get you on painkillers shortly if you’re hurting a lot.”
“Please do.” Arch stared blankly into the ceiling. He tried to recall the events that caused his current state, but nothing came up. He looked at the couple in the corner.
“Oh. You’re my parents, right?” he asked. His father and mother stared at him incredulously.
“Doc, I think I have some memory loss – all of it actually. Also, can I get something to eat? I’m really hungry.”

If you haven’t dabbled in git, ssh, or the command line much, getting Heroku to be deployed locally on Windows can be a real pain. Here are the steps that I did to make that magic happen.

The software you need:

rails, of course.

msysgit – git for Windows

Putty (use this installer)

Step 1: Install heroku gem

open up your command line and type “gem install heroku“

Step 2: create your public and private rsa keys

This is part you may have to google random errors that you find – follow the directions and you should be (mostly) fine.

Open puttygen (from Putty)

Click generate.

Generate some randomness as per instructions.

Add a passphrase.

Click “Save private key” and save it as “heroku_key.ppk“

now, create a new file called C:\documents and settings\(username)\.ssh\id_rsa.pub

open that new file in Notepad (or some other text editor)

paste the contents of the greyed out box (under public key for pasting…) into id_rsa.pub

save and close it.

Now, open pageagent.exe in PuTTY

add a key and browse to heroku_key.ppk.

type in your password.

You’re almost done.

Finally, right click on My Computer, and goto properties, advanced, environmental variables.

Click “new” in system variables.

Add this in:

Variable name: GIT_SSH

Variable value: “C:Program Files\PuTTY\plink.exe”

Phew. Step 2 complete.

Step 3: testing GIT

Open git_bash first, and goto your rails application folder

type “git init“ to initialize a git repo (its just standard procedure)

type heroku create <throwawaytestapp>

heroku will give you a git link

type git clone <link> — it will be something like git@heroku.com:appname.git

IF you get errors:

Error 1) fatal: can not fork (or something like that)

open up git gui and try to add a new repository (URL= link, directory= your rails directory)

if that fails, you need to tweak your system variables. Try lots of things; try adding the putty directory to the PATH variable, or try adding GIT_SSH to your username variables

git gui to test until it works

2) It leads you to a page where you have to type y/n and you can’t TYPE!!!

Don’t panic. open up a console and type “plink git@heroku.com“

enter y

retry it in the git bash.

if all works well, you’re connected to heroku on windows! pat yourself on the back.