<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Feet Have Been &#187; Featured</title>
	<atom:link href="http://wheremy.feethavebeen.com/category/featured/feed/" rel="self" type="application/rss+xml" />
	<link>http://wheremy.feethavebeen.com</link>
	<description>Sometimes, you just go where your feet take you</description>
	<lastBuildDate>Tue, 17 Aug 2010 13:40:50 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Old Spice steps up the game</title>
		<link>http://wheremy.feethavebeen.com/2010/03/old-spice-steps-up-the-game/</link>
		<comments>http://wheremy.feethavebeen.com/2010/03/old-spice-steps-up-the-game/#comments</comments>
		<pubDate>Mon, 01 Mar 2010 16:09:28 +0000</pubDate>
		<dc:creator>xangelo</dc:creator>
				<category><![CDATA[Featured]]></category>
		<category><![CDATA[Thoughts]]></category>

		<guid isPermaLink="false">http://wheremy.feethavebeen.com/?p=379</guid>
		<description><![CDATA[When was the last time you&#8217;ve seen a commercial? Probably about a week if you watch tv. Most times you either jump to a different channel or if you TIVO, you just skip them. Of course, there isn&#8217;t anything WRONG with that, at least from our point of view. Our TV Shows (however strange and [...]]]></description>
			<content:encoded><![CDATA[<p>When was the last time you&#8217;ve seen a commercial? Probably about a week if you watch tv. Most times you either jump to a different channel or if you TIVO, you just skip them. Of course, there isn&#8217;t anything WRONG with that, at least from our point of view. Our TV Shows (however strange and drab) can be considered works of art, simply because they are. Someone has a vision for the show and they set about assembling all the pieces so that they (hopefully) fit together and portray the directors/writers vision. That&#8217;s why we love shows. They follow a story line, they allow us to connect to the characters because they mirror us as hyperboles.</p>
<p>But then again, they do have a minimum of 30 minutes to do so. Commercials &#8211; they don&#8217;t get the same treatment. Marketers and Advertising agencies have a maximum of 30 seconds to wow us, pull us in and convince us we need something. The only thing commercials have is that you can see them every 15 minutes.</p>
<p>So we can see, commercials clearly have a hard time doing what they&#8217;re supposed to do. But they make it even harder on themselves by sticking to the standard flow of commericals. For example, any commercial for hair-care products for women have the same formula</p>
<ol>
<li>Girl with not shiny hair</li>
<li>Girl with non shiny hair uses *INSERT PRODUCT*</li>
<li>Girl with non shiny hair now has shiny hair which she ties into a knot (why?)</li>
<li>Girl flips her hair over her shoulder, smiles at the camera and the commercial ends.</li>
</ol>
<p>This pattern has been presented so many times to us that we don&#8217;t need to see the whole thing anymore. At any of the steps we can quickly identify the type of commercial. Of course, it&#8217;s not just womens commercials that follow this. Think of beer commercials aimed at men</p>
<ol>
<li>Girls</li>
<li>Girls with less clothes</li>
<li>Party with girls with less clothes</li>
<li>Average Joe</li>
</ol>
<p>They&#8217;re all the same, every commercial will follow the pattern of another commercial done before it.</p>
<p>There are of course a few who try and separate themselves, but most times they fall flat. Some notable ones of course, include Pepsi&#8217;s commercial featuring Jimmy Fallon and Parker Posey&#8217;s dancing through the street.</p>
<p><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/P37WgPmkOuM&#038;hl=en_US&#038;fs=1&#038;"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/P37WgPmkOuM&#038;hl=en_US&#038;fs=1&#038;" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object></p>
<p>And now, out of the blue, Old Spice throws its hat into the ring. Creative agency Wieden and Ross (widen and Ross)  have created what I think is one of the best (if not THE best) commercials on TV. Not only do I not mind watching it, but I actually Youtube it because it&#8217;s great. It&#8217;s nonsensical in an awesome way. Just.. just watch.</p>
<p><object width="560" height="340"><param name="movie" value="http://www.youtube.com/v/owGykVbfgUE&#038;hl=en_US&#038;fs=1&#038;"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/owGykVbfgUE&#038;hl=en_US&#038;fs=1&#038;" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed></object></p>
]]></content:encoded>
			<wfw:commentRss>http://wheremy.feethavebeen.com/2010/03/old-spice-steps-up-the-game/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Blagging about the iPad</title>
		<link>http://wheremy.feethavebeen.com/2010/02/blagging-about-the-ipad/</link>
		<comments>http://wheremy.feethavebeen.com/2010/02/blagging-about-the-ipad/#comments</comments>
		<pubDate>Thu, 11 Feb 2010 06:07:10 +0000</pubDate>
		<dc:creator>xangelo</dc:creator>
				<category><![CDATA[Featured]]></category>
		<category><![CDATA[Thoughts]]></category>

		<guid isPermaLink="false">http://wheremy.feethavebeen.com/?p=365</guid>
		<description><![CDATA[At the request of a friend I decided to put up my pre-hands-on review of the iPad. I thought about getting it, but then I figured a magnifying glass and an iPod would be cheaper. But then I realized, I&#8217;m not a fan of iPods, so I did the next best thing. Look for reasons [...]]]></description>
			<content:encoded><![CDATA[<p>At the request of a friend I decided to put up my pre-hands-on review of the iPad. I thought about getting it, but then I figured a magnifying glass and an iPod would be cheaper. But then I realized, I&#8217;m not a fan of iPods, so I did the next best thing. Look for reasons not to like it. And boy were there a ton.</p>
<p><strong>What&#8217;s in a name</strong></p>
<p>Everything. Bill had it wrong. When you meet someone, you ask for their name. In your mind, it will forever be their name. When you see someone with similar characteristics you will say &#8220;Hey, thats like [NAME]&#8221; or &#8220;Hey, that isn&#8217;t what [NAME] would do at all&#8221;. When you first hear about a new product, they call it by name. When you talk to your friends about that great new feature of ____, you need to use it&#8217;s name. Names are about building associations, so why does it seem like your naming convention for your big &#8220;game-changing&#8221; product follows a Munroe <a href="http://xkcd.com/148/">comic</a> about mispronouncing words? Not to mention the fact that images of various feminine products swim through my head whenever I hear or see someone talking about it.</p>
<div id="attachment_366" class="wp-caption aligncenter" style="width: 510px"><a href="http://wheremy.feethavebeen.com/wp-content/uploads/2010/02/iPad.png"><img class="size-full wp-image-366" title="iPad" src="http://wheremy.feethavebeen.com/wp-content/uploads/2010/02/iPad.png" alt="If I can't see your hands when you're using your iPad, stay away" width="500" height="500" /></a><p class="wp-caption-text">If I can&#39;t see your hands when you&#39;re using your iPad, stay away</p></div>
<p>There, now you&#8217;ll forever be scarred by the iPad. The funny thing is, I didn&#8217;t even think about this particular definition of the iPad. I saw the Munroe jokes about blagging. A friend pointed this out and now it&#8217;s the only thing I can think of.</p>
<p><strong>Features<br />
</strong></p>
<p><strong> </strong></p>
<p><strong> </strong></p>
<p><strong> </strong></p>
<p><strong> </strong></p>
<p><strong> </strong></p>
<p><strong> </strong></p>
<div id="attachment_367" class="wp-caption alignright" style="width: 321px"><a href="http://wheremy.feethavebeen.com/wp-content/uploads/2010/02/ipadFeature.png"><img class="size-full wp-image-367 " title="ipadFeature" src="http://wheremy.feethavebeen.com/wp-content/uploads/2010/02/ipadFeature.png" alt="So you can enjoy your Home Screen, because it's a feature." width="311" height="406" /></a><p class="wp-caption-text">I heard you like Home Screens, so we put Home Screens in your Home Screens.</p></div>
<p>The iPad actually really shines in this department. As much as I rail on Apple, I always say I can hand it to them when they do something good. The iPad runs Safari no problems, has a mail app, can play videos (obviously not HD but not even laptops can do that for a decent price) and it can Youtube (since.. I guess that&#8217;s different from videos). It also &#8220;iPods&#8221;..which I&#8217;m guessing is some sort of fancied up classic iPod interface, or dumbed down iTunes interface. It has a notes app for jotting down quick tidbits of thought (such as &#8220;Why the hell did I buy this?&#8221;), a calendar (for such appointments as &#8220;throw iPod at mailman @ 8:30am&#8221;, a contact app and my personal favourite the Home Screen! That&#8217;s right, apple took what I loved about the <a href="http://www.apple.com/ca/ipad/features/">home screens</a> (namely that they exist) and put it front and center on the iPad!</p>
<p>Now, let me just cross off the ones on that list that I can&#8217;t run on my Blackberry and what you&#8217;re left with is a cornucopia of&#8230; wait. You&#8217;re left with..iPod and Home Screens.</p>
<p>iPod was sort of a given, considering it&#8217;s your iPad, but the Home Screens were something no one expected Apple to flaunt.</p>
<p>In Apples&#8217; defence they are touting the iPad as a happy medium between phone and laptop. You get all the portability of a laptop, with all the features of a phone. And Home Screens. You get Home Screens.</p>
<p>However, for all their pluses, Apple gets a few (more) negative points as well.  You can only run two of these apps at any time. And it has to be the Mail app and another app. That&#8217;s it. You don&#8217;t get to listen to music while watching a how-to video about how to set up the Mail app properly.</p>
<p>It also shits on the face of standards (it&#8217;s Apple, did you expect any different?) You&#8217;ll find no USB port here for hooking your iPad up to your desktop. You&#8217;re stuck with a &#8220;30-pin dock connector&#8221;. Of course there isn&#8217;t a webcam on it, but I can&#8217;t really complain about that. My laptop doesn&#8217;t have a webcam. And it does have to make concessions to fit that multi-touch screen into it&#8217;s very thin packaging. It doesn&#8217;t have any expandable memory slots and it&#8217;s LED-backlit which is just geek talk for &#8220;good luck using it outdoors&#8221;.</p>
<div id="attachment_368" class="wp-caption aligncenter" style="width: 394px"><a href="http://wheremy.feethavebeen.com/wp-content/uploads/2010/02/4b62f5bcb949b.jpg"><img class="size-full wp-image-368 " title="4b62f5bcb949b" src="http://wheremy.feethavebeen.com/wp-content/uploads/2010/02/4b62f5bcb949b.jpg" alt="Oh how we have evolved" width="384" height="256" /></a><p class="wp-caption-text">Oh how we have evolved</p></div>
<p><strong><br />
The Apps!</strong></p>
<p>This is where Apple will REALLY be making its money. It pretty much has the final say in whether or not your app makes it to the public and that can be a good thing. After all how many booby apps can one person purchase right? Since this is where Apple really shines they really pulled out all the stops on development. Not only did they make it so that you can use the old iPod/iPhone apps on your iPad, you can scale it up to full screen and they run even better because of the great new hard-ware! Too bad, you can still only run mail and one other app.</p>
<p>In all seriousness however, I will commend Apple on this. Good job developing the API for the iPhone/iPod/iPad line. It was a genius move on their part and hopefully they will continue to ride on its success!</p>
<div id="attachment_369" class="wp-caption aligncenter" style="width: 432px"><a href="http://wheremy.feethavebeen.com/wp-content/uploads/2010/02/ipadboobs.png"><img class="size-full wp-image-369" title="ipadboobs" src="http://wheremy.feethavebeen.com/wp-content/uploads/2010/02/ipadboobs.png" alt="" width="422" height="337" /></a><p class="wp-caption-text">The official iPad ad campaign</p></div>
<p><strong><br />
The Verdict</strong></p>
<p>The price is win. At 499$ it puts it right at that &#8220;I need a new laptop but I&#8217;m just going to be using it for work&#8221; price point that most people seem to be at. As well, the fact that it advertises itself as portable means that users are definitely going to attempt to lug it around leading to increases in iPad theft rates and thus generating news about the iPad.</p>
<p>Apart from that though, it&#8217;s a fail. It touts it self as cheap and easy to use but that puts it in a niche that you and I don&#8217;t occupy. The iPad isn&#8217;t for you the blog reader, or me the blog writer. Or to anyone who knows how to work a computer. You know who it IS for? Old people. Because they can&#8217;t see, so the bigger iPhone interface makes it easier on the eyes. And that have terrible motor control so poking at icons on the great Home Screen is easier than navigating a mouse.</p>
<div id="attachment_370" class="wp-caption aligncenter" style="width: 330px"><a href="http://wheremy.feethavebeen.com/wp-content/uploads/2010/02/cheapipad.png"><img class="size-full wp-image-370 " title="cheapipad" src="http://wheremy.feethavebeen.com/wp-content/uploads/2010/02/cheapipad.png" alt="" width="320" height="400" /></a><p class="wp-caption-text">I left my Home Screen in my other sweater...</p></div>
]]></content:encoded>
			<wfw:commentRss>http://wheremy.feethavebeen.com/2010/02/blagging-about-the-ipad/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Aggro Detection with Javascript</title>
		<link>http://wheremy.feethavebeen.com/2009/12/aggro-detection-with-javascript/</link>
		<comments>http://wheremy.feethavebeen.com/2009/12/aggro-detection-with-javascript/#comments</comments>
		<pubDate>Mon, 21 Dec 2009 14:00:35 +0000</pubDate>
		<dc:creator>xangelo</dc:creator>
				<category><![CDATA[Concepts]]></category>
		<category><![CDATA[Featured]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Tutorials]]></category>

		<guid isPermaLink="false">http://wheremy.feethavebeen.com/?p=358</guid>
		<description><![CDATA[So you want to make some games? Sure it sounds easy, but until you dive into it you&#8217;ll never notice all the little things that go into the backend of it that make or break your game. While this isn&#8217;t as big a deal in current browser-based games (they&#8217;re either muds, flash or static maps) [...]]]></description>
			<content:encoded><![CDATA[<p>So you want to make some games? Sure it sounds easy, but until you dive into it you&#8217;ll never notice all the little things that go into the backend of it that make or break your game. While this isn&#8217;t as big a deal in current browser-based games (they&#8217;re either muds, flash or static maps) things are changing in the browser. Everything is getting faster, and things like javascript based animation is actually feasible! So what is an aspiring game developer to do except buckle in and start programming their games?</p>
<p>Once you begin researching you&#8217;ll notice that while a lot of browser-based text games take into account Collision detection, they seem to be missing Aggro detection. Aggro stands for either aggravation or aggression and is essentially a way to tell if a monster will attack you or not.. As you&#8217;ve probably noticed some monsters tend to rush at you from across the map, while others seem to completely ignore you until you attack them. This is Aggro.</p>
<p>One of the easiest ways to detect aggro is to simply add a variable to your monsters to signify &#8220;sight&#8221;. This sight variable will dictate how far away you need to be before a monster will attack you. Set this to 100 to have a monster rush at you from across your map or set it to 0 so that it will never attack unless you attack first.</p>
<p>Detection aggro is as simple as following two formula&#8217;s. The first will be to figure out the distance between you and the monster and the second will simply be a quick check to see if you fall within the monsters aggro radius. To start off, you need to grab the <a href="http://www.jquery.com">jQuery</a> javascript framework. While you CAN do this from scratch, jQuery lets you do it a lot easier, plus you can probably add a bit more jazz to your current game if you&#8217;re not already using it. If you&#8217;re unsure of how jQuery works, take a look at our quick <a href="http://wheremy.feethavebeen.com/2009/11/jquery-primer-an-intro-to-client-side-functionality/">intro to jQuery</a> or just check out the <a href="http://docs.jquery.com/Main_Page">jQuery documentation</a>. Now just cobble together a quick webpage and include the jQuery library. I&#8217;m using the minified version 1.3.2 of jQuery, so if you&#8217;re not using the same one, make sure you replace that line.</p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;html&gt;
&lt;head&gt;
	&lt;title&gt;Collision Detection&lt;/title&gt;
	&lt;style type=&quot;text/css&quot;&gt;
	table#grid{
		border-style: solid; 
		border-width: 0px 1px 1px 0px; 
		border-color: #CCC; 
		padding: 0px;
	}
	table#grid tr th{
		border-style: solid; 
		border-width: 1px 0px 0px 1px; 
		border-color: #CCC; 
		text-align: center; 
		color: #333; 
		font-size: 0.7em; 
		font-weight: bold; 
		font-family: &quot;Arial&quot;;
		background-color: #EDEDED;
	}
	table#grid tr th.run{
		width: 12px;
	}
	table#grid tr td{
		width: 50px; 
		height: 50px; 
		border-style: solid; 
		border-width: 1px 0px 0px 1px; 
		border-color: #CCC; 
		text-align: center; 
		color: #E0E0E0; 
		font-size: 0.7em; 
		font-weight: normal; 
		font-family: &quot;Arial&quot;;
	}
	table#grid tr td:hover{
		color: #333;
		background-color: #F3F3F3;	
	}
	.player{
		background-color: #333; 
	}
	.monsterA{
		color: #333; 
		background-color: #AA0000;
	}
	div#debug{
		border-style: solid; 
		border-color: #333; 
		border-width: 1px; 
		float: right; 
		border-color: #EDEDED;
		text-align: left; 
		color: #333; 
		font-size: 0.9em; 
		font-weight: normal; 
		font-family: &quot;Arial&quot;;
		width: 300px; 
		padding: 10px;
	}
	.monsterN{
		background-color: #00AA00;
	}
	&lt;/style&gt;
	&lt;script type=&quot;text/javascript&quot; src=&quot;jquery-1.3.2.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&nbsp;
&lt;/body&gt;
&lt;/html&gt;</pre></div></div>

<p>You&#8217;ll notice a bunch of CSS in there, but you can ignore that. It&#8217;s pretty straight forward and really it&#8217;s just meant to pretty things up a little. Now we&#8217;re going to add a quick grid so that you can get an easy visual representation of where you are and where your monsters are and if they will aggro or not. You can copy and paste the following line a few times, and change the y coordinate (x,y) to match which row you&#8217;re on.</p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;tr&gt;
	&lt;td&gt;0,1&lt;/td&gt;&lt;td&gt;1,1&lt;/td&gt;&lt;td&gt;2,1&lt;/td&gt;&lt;td&gt;3,1&lt;/td&gt;&lt;td&gt;4,1&lt;/td&gt;&lt;td&gt;5,1&lt;/td&gt;&lt;td&gt;6,1&lt;/td&gt;&lt;td&gt;7,1&lt;/td&gt;&lt;td&gt;8,1&lt;/td&gt;&lt;td&gt;9,1&lt;/td&gt;
&lt;/tr&gt;</pre></div></div>

<p>Finally, I&#8217;ve just added a &#8220;debug&#8221; section, so you can get a textual representation of what&#8217;s going on. It&#8217;s just a div placed above the grid.</p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;div id=&quot;debug&quot;&gt;
	&lt;b&gt;Debug&lt;/b&gt;&lt;br&gt;&lt;br&gt;
&lt;/div&gt;</pre></div></div>

<p><strong>The Code</strong><br />
Now for the code that will give us a visual representation of our player and our monsters. First off we are going to initiate a few variables that we will be using throughout our script. They&#8217;re pretty self explanatory.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> playerPlaced <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span> 
<span style="color: #003366; font-weight: bold;">var</span> monster <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span> 
<span style="color: #003366; font-weight: bold;">var</span> player <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Now we&#8217;re going to set it up so that when we click a square it will check if our player is already placed or not. If he is NOT placed, then we are going to place him and update our &#8220;debug&#8221; section.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#grid tr td'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> distance<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>playerPlaced<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	player<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'loc'</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">split</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">','</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
	player<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'sight'</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> 
	$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'@'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
	$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'player'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
	playerPlaced <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span> 
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#debug'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">append</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Player: '</span><span style="color: #339933;">+</span>player<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'loc'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">+</span><span style="color: #3366CC;">'&lt;br&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>Notice that we&#8217;ve set player['sight'] to 0. Why? Simply because your player doesn&#8217;t have an aggro radius. He may or may not attack at your discretion, so it&#8217;s irrelevant. A monster however, will ALWAYS attack if you get within its aggro radius (assuming no other modifiers).</p>
<p>The next bit will just place our monsters if there is already a player on the field. When we do, however, we are going to call some functions that will take care of calculating distance and checking if the monster will aggro. We&#8217;ll go over those first, since they&#8217;re more complicated.</p>
<p><strong>Distance</strong><br />
To calculate the distance of two points we are simply going to take the x,y coordinates of both our monster and player and perform some math on them. The formula that we will be using is actually the distance formula between two points (and you wondered when you would ever use it&#8230;) and something that&#8217;s been drilled into us in every math class. The formula itself is a basically sqrt(sq(x1-x2)+sq(y1-y2)) so translating that to our game code it will look more like</p>
<p>sqrt(sq(player[x]-monster[x])+sq(player[y]-monster[y]))</p>
<p>The squaring and square rooting would take us a lot more work, if JavaScript didn&#8217;t already have those built in! Our actual distance formula in JavaScript (after being placed in a function) will look like this:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> getDistance<span style="color: #009900;">&#40;</span>from<span style="color: #339933;">,</span>to<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	distance <span style="color: #339933;">=</span> Math.<span style="color: #660066;">floor</span><span style="color: #009900;">&#40;</span>Math.<span style="color: #660066;">sqrt</span><span style="color: #009900;">&#40;</span>Math.<span style="color: #660066;">pow</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>from<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">-</span>to<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> Math.<span style="color: #660066;">pow</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>from<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">-</span>to<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
	<span style="color: #000066; font-weight: bold;">return</span> distance<span style="color: #339933;">;</span> 
<span style="color: #009900;">&#125;</span></pre></div></div>

<p><strong>Intersection</strong><br />
Basically intersection in our scenario will take a look at the player and see if he falls within the aggro radius of the monster. It&#8217;s a very simple check that just goes if (distance &lt; aggroRad) then it will aggro.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> willAggro<span style="color: #009900;">&#40;</span>aggro<span style="color: #339933;">,</span>distance<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>distance <span style="color: #339933;">&gt;</span> aggro<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span> 
	<span style="color: #009900;">&#125;</span>
	<span style="color: #000066; font-weight: bold;">else</span><span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p><strong>Monster Insertion</strong><br />
Finally, we&#8217;re going to do our check to see if a monster will aggro a player or not depending on its distance to the player.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">monster<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'loc'</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">split</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">','</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
monster<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'sight'</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span> 
$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'X'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
distance <span style="color: #339933;">=</span> getDistance<span style="color: #009900;">&#40;</span>player<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'loc'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>monster<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'loc'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>willAggro<span style="color: #009900;">&#40;</span>monster<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'sight'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>distance<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'monsterA'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #000066; font-weight: bold;">else</span><span style="color: #009900;">&#123;</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'monsterN'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#debug'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">append</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;b&gt;Monster:&lt;/b&gt; '</span><span style="color: #339933;">+</span>monster<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'loc'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#debug'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">append</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">' &lt;b&gt;Distance:&lt;/b&gt; '</span><span style="color: #339933;">+</span>distance<span style="color: #339933;">+</span><span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#debug'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">append</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">' &lt;b&gt;Aggro:&lt;/b&gt; '</span><span style="color: #339933;">+</span>willAggro<span style="color: #009900;">&#40;</span>monster<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'sight'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>distance<span style="color: #009900;">&#41;</span><span style="color: #339933;">+</span><span style="color: #3366CC;">'&lt;br&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>And that&#8217;s all there is to it. If you run this page and take a look, you&#8217;ll notice that clicking a grid will place your player and clicking anywhere else will cause the monsters to appear in either green (if too far away to aggro) or red (if it will aggro). This is also noted in the debug section!</p>
<p>Here is our completed javascript section</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> playerPlaced <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span> 
	<span style="color: #003366; font-weight: bold;">var</span> monster <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span> 
	<span style="color: #003366; font-weight: bold;">var</span> player <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#grid tr td'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> distance<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>playerPlaced<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			player<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'loc'</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">split</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">','</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
			player<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'sight'</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> 
			$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'@'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
			$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'player'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
			playerPlaced <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span> 
			$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#debug'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">append</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Player: '</span><span style="color: #339933;">+</span>player<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'loc'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">+</span><span style="color: #3366CC;">'&lt;br&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
		<span style="color: #000066; font-weight: bold;">else</span><span style="color: #009900;">&#123;</span>
			monster<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'loc'</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">split</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">','</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
			monster<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'sight'</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span> 
			$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'X'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
			distance <span style="color: #339933;">=</span> getDistance<span style="color: #009900;">&#40;</span>player<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'loc'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>monster<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'loc'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
			<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>willAggro<span style="color: #009900;">&#40;</span>monster<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'sight'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>distance<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'monsterA'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
			<span style="color: #000066; font-weight: bold;">else</span><span style="color: #009900;">&#123;</span>
				$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'monsterN'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#debug'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">append</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;b&gt;Monster:&lt;/b&gt; '</span><span style="color: #339933;">+</span>monster<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'loc'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
			$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#debug'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">append</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">' &lt;b&gt;Distance:&lt;/b&gt; '</span><span style="color: #339933;">+</span>distance<span style="color: #339933;">+</span><span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
			$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#debug'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">append</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">' &lt;b&gt;Aggro:&lt;/b&gt; '</span><span style="color: #339933;">+</span>willAggro<span style="color: #009900;">&#40;</span>monster<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'sight'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>distance<span style="color: #009900;">&#41;</span><span style="color: #339933;">+</span><span style="color: #3366CC;">'&lt;br&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
		<span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
&nbsp;
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> getDistance<span style="color: #009900;">&#40;</span>from<span style="color: #339933;">,</span>to<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	distance <span style="color: #339933;">=</span> Math.<span style="color: #660066;">floor</span><span style="color: #009900;">&#40;</span>Math.<span style="color: #660066;">sqrt</span><span style="color: #009900;">&#40;</span>Math.<span style="color: #660066;">pow</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>from<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">-</span>to<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> Math.<span style="color: #660066;">pow</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>from<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">-</span>to<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
	<span style="color: #000066; font-weight: bold;">return</span> distance<span style="color: #339933;">;</span> 
<span style="color: #009900;">&#125;</span>	
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> willAggro<span style="color: #009900;">&#40;</span>aggro<span style="color: #339933;">,</span>distance<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>distance <span style="color: #339933;">&gt;</span> aggro<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span> 
	<span style="color: #009900;">&#125;</span>
	<span style="color: #000066; font-weight: bold;">else</span><span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>This is a very simple way to check aggro and the reason I placed it in its own function was incase you needed to modify it in any way (for example if a monster was under 10 levels its aggro would be 0 always). <strong> </strong></p>
]]></content:encoded>
			<wfw:commentRss>http://wheremy.feethavebeen.com/2009/12/aggro-detection-with-javascript/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>ChromeOS &#8211; Revolution or Bust!</title>
		<link>http://wheremy.feethavebeen.com/2009/11/chromeos-revolution-or-bust/</link>
		<comments>http://wheremy.feethavebeen.com/2009/11/chromeos-revolution-or-bust/#comments</comments>
		<pubDate>Mon, 23 Nov 2009 14:00:41 +0000</pubDate>
		<dc:creator>xangelo</dc:creator>
				<category><![CDATA[Browsers]]></category>
		<category><![CDATA[Featured]]></category>
		<category><![CDATA[Thoughts]]></category>
		<category><![CDATA[chromeOS]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[Microsoft]]></category>

		<guid isPermaLink="false">http://wheremy.feethavebeen.com/?p=354</guid>
		<description><![CDATA[Everyone seems to be going a little over board with the newly announced Chrome OS. Don&#8217;t get me wrong, I love all new shiny things &#8211; I&#8217;m a shiny-new-thing-lover, but people are not only blowing this out of proportion, they&#8217;re not even talking about the right things. Let&#8217;s break it down shall we? What IS [...]]]></description>
			<content:encoded><![CDATA[<p>Everyone seems to be going a little over board with the newly announced Chrome OS. Don&#8217;t get me wrong, I love all new shiny things &#8211; I&#8217;m a shiny-new-thing-lover, but people are not only blowing this out of proportion, they&#8217;re not even talking about the right things. Let&#8217;s break it down shall we?</p>
<p><strong>What IS Chrome OS?<br />
</strong>Simply put, Chrome OS is Google&#8217;s take on the PC. They essentially stripped out the actual operating system and you&#8217;re running a slightly glorified browser. Why slightly? Well, because they&#8217;re essentially using Google Chrome with a few added tweaks. Want to know how it will run? Just pop open Google Chrome and hit the maximize button. Sure there will be a few UI tweaks and a couple of additions here and there, but that&#8217;s essentially what you are looking at.</p>
<p><strong>What&#8217;s the big deal then?<br />
</strong>The big deal here is two-fold. First off, it&#8217;s by Google! For die hard Googlers (me and damn near everyone else -.-) nothing Google can do is wrong! And even if they put out something questionable, they either fix it, or kill it and explain why. Google is also huge on the internet. Their applications either enjoy huge successes, or bomb and are killed quickly. Therefore, people come to expect a certain level of awesome from Google, and they expect that by Google officially calling Chrome OS it&#8217;s own project that they will get awesome. Secondly they used the word &#8220;cloud&#8221; multiple times, and right now that word is a game changer.</p>
<p><strong>I&#8217;m confused.<br />
</strong>Don&#8217;t worry, you&#8217;re not alone, a lot of tech bloggers seem to think that Google tipping its toe into the PC market will result in a revolution. Some people even think that Microsoft should watch out. They&#8217;re wrong. Google is trying something different, sure, but it won&#8217;t have much of an impact on people who aren&#8217;t tech savvy. Let&#8217;s examine this idea a bit more, with the use of some average customers.</p>
<p><strong>Customer 1 &#8211; Just want it to work</strong><br />
I worked for a while as a sales associate at a fairly large computer store. Customers would come in daily looking for a computer that they could use just for checking their email, browsing the internet and listening to some music. They didn&#8217;t do anything fancy, and were therefore not looking for anything overly expensive. Sadly, Chrome OS only satisfies 2.5 of their results, and even then, it clobbers them into something they&#8217;re not quite comfortable with. Web based email is something that is finally catching on to the main stream. It&#8217;s the newer generation that are really making strides with the cloud. Older <strong>generations</strong> are more comfortable with Outlook Express. That isn&#8217;t to say that won&#8217;t get used to a web-based client. It will just take some time. It took me a few months to move my parents away from Outlook Express and to Gmail. My father handled the move fairly well, but my mother found it a hassle. In fact, to this day she will delete and email rather than archive it, even if there is a chance she will use it later. The internet is what Chrome will excel at. But &#8220;browsing the internet&#8221; usually translates into 25-30 pages that a user will visit frequently. The last bit is where users will really get confused. Since ChromeOS doesn&#8217;t have a native file-system, there isn&#8217;t any way to store your files on it. That means that all your music on your old PC will stay on your old PC. If you have an mp3 player you can definitely hook it up and look at your music, but you can&#8217;t play it. Of course, if you have an iPod you&#8217;re just out of luck. iPod&#8217;s will require iTunes which requires a hard-drive. If you want to listen to music now, you&#8217;re stuck going with online services like Lala, Pandora and Last.fm. Of course, Pandora doesn&#8217;t work in most places, and that extensive library that they&#8217;ve build up won&#8217;t work.</p>
<p><strong>Customer 2 &#8211; The Gamer/Hardware Guru<br />
</strong>They know exactly what they are looking for and won&#8217;t waste your time. They&#8217;ll have a list of things they want and they&#8217;ll just run through your store and pick them up, stopping you only if they can&#8217;t find something. They&#8217;re veterans. They already know ChromeOS won&#8217;t let them play games or download movies and music or even let them tinker about with some music editing software that they need and they won&#8217;t waste time thinking about it.</p>
<p><strong>Customer 3 &#8211; The self-proclaimed guru<br />
</strong>These customers generally have some idea of what they&#8217;re looking for, but have no clue about specifics. They think of themselves as better than the average user and tend to have idea&#8217;s about systems that they&#8217;ve just picked up from others. They don&#8217;t know if ChromeOS is right for them, but once you mention that it doesn&#8217;t have a hard-drive they&#8217;ll be a little skeptic.</p>
<p><strong>Customer 4 &#8211; Curious<br />
</strong>This is the only customer that will pick up ChromeOS. They have an idea of what ChromeOS is about, and they know that it won&#8217;t replace a desktop or laptop, but still, they&#8217;re curious about it. These customers will come in looking specifically for ChromeOS and if you don&#8217;t have it, they&#8217;ll move right on to the next place.</p>
<p>And that is why ChromeOS isn&#8217;t going to go up against any of the big OSes. It&#8217;s not designed to. At its core, ChromeOS is meant for a very niche set of users. People who like Google&#8217;s products and are looking for a hassle free way to access them. It&#8217;s not meant to replace your current machine, it&#8217;s a supplement, something that Google themselves has tried to make clear. If you&#8217;re interested in reading up some more on Googles ChromeOS, I&#8217;ve included a couple links to some articles that I think address the situation rather well.</p>
<p><a href="http://gizmodo.com/5408712/what-google-needs-for-the-chrome-os-to-succeed">http://gizmodo.com/5408712/what-google-needs-for-the-chrome-os-to-succeed</a><br />
<a href="http://arstechnica.com/open-source/news/2009/11/chromeos-announcement.ars/">http://arstechnica.com/open-source/news/2009/11/chromeos-announcement.ars/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://wheremy.feethavebeen.com/2009/11/chromeos-revolution-or-bust/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Feature Friday &#8211; Google Wave Preview &#8211; Rarst.net</title>
		<link>http://wheremy.feethavebeen.com/2009/11/feature-friday-google-wave-preview-rarst-net/</link>
		<comments>http://wheremy.feethavebeen.com/2009/11/feature-friday-google-wave-preview-rarst-net/#comments</comments>
		<pubDate>Fri, 20 Nov 2009 14:00:24 +0000</pubDate>
		<dc:creator>xangelo</dc:creator>
				<category><![CDATA[Featured]]></category>
		<category><![CDATA[Tech Tip]]></category>

		<guid isPermaLink="false">http://wheremy.feethavebeen.com/?p=349</guid>
		<description><![CDATA[I&#8217;ve been really apprehensive about posting my own review of Google Wave simply because I don&#8217;t see how the general public will be affected by it yet. Long term, I&#8217;m hoping Google Wave will become the method of choice for collaboration, but short term, it&#8217;s still too early to tell. Some people are gushing over [...]]]></description>
			<content:encoded><![CDATA[<p>I&#8217;ve been really apprehensive about posting my own review of Google Wave simply because I don&#8217;t see how the general public will be affected by it yet. Long term, I&#8217;m hoping Google Wave will become the method of choice for collaboration, but short term, it&#8217;s still too early to tell. <a href="http://lifehacker.com/search/wave/">Some people</a> are gushing over it, while others are a little wary. <a href="http://www.rarst.net/web/google-wave-preview/">This post is a great introduction to wave</a> and an easy way to see just what the hype is about. As always, I have reserved a couple invites to wave for FHB readers.</p>
<blockquote><p>By now there is enough stuff on Wave posted to confuse anybody, so for for those who have access to preview version or not either – let’s carefully <strong>go over established facts and look at what is defined for sure</strong>.</p></blockquote>
<p><a href="http://wheremy.feethavebeen.com/wp-content/uploads/2009/11/wave.png"><img class="aligncenter size-full wp-image-308" title="wave" src="http://wheremy.feethavebeen.com/wp-content/uploads/2009/11/wave.png" alt="wave" width="732" height="481" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://wheremy.feethavebeen.com/2009/11/feature-friday-google-wave-preview-rarst-net/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Feature Friday &#8211; David Walsh &#8211; When Webmasters Attack</title>
		<link>http://wheremy.feethavebeen.com/2009/11/feature-friday-david-walsh-when-webmasters-attack/</link>
		<comments>http://wheremy.feethavebeen.com/2009/11/feature-friday-david-walsh-when-webmasters-attack/#comments</comments>
		<pubDate>Fri, 13 Nov 2009 14:00:43 +0000</pubDate>
		<dc:creator>xangelo</dc:creator>
				<category><![CDATA[Featured]]></category>

		<guid isPermaLink="false">http://wheremy.feethavebeen.com/?p=334</guid>
		<description><![CDATA[David Walsh Blog is something that I&#8217;ve been following for some time now. While he predominantly focuses on Mootools related functionality (I&#8217;m jQuery) he does have some good posts about design and development on all aspects of the web. Definitely a website worth adding to your Feed list. This particular post is something that I [...]]]></description>
			<content:encoded><![CDATA[<p>David Walsh Blog is something that I&#8217;ve been following for some time now. While he predominantly focuses on Mootools related functionality (I&#8217;m jQuery) he does have some good posts about design and development on all aspects of the web. Definitely a website worth adding to your Feed list.</p>
<p>This particular post is something that I feel puts in perspective the problems of crowd-sourcing your way to success.</p>
<p><a href="http://davidwalsh.name/when-webmasters-attack">http://davidwalsh.name/when-webmasters-attack</a></p>
]]></content:encoded>
			<wfw:commentRss>http://wheremy.feethavebeen.com/2009/11/feature-friday-david-walsh-when-webmasters-attack/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Simple Website Instant Messenger &#8211; Client-side Functionality</title>
		<link>http://wheremy.feethavebeen.com/2009/11/simple-website-instant-messenger-client-side-functionality/</link>
		<comments>http://wheremy.feethavebeen.com/2009/11/simple-website-instant-messenger-client-side-functionality/#comments</comments>
		<pubDate>Tue, 10 Nov 2009 05:22:58 +0000</pubDate>
		<dc:creator>xangelo</dc:creator>
				<category><![CDATA[Featured]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Tutorials]]></category>

		<guid isPermaLink="false">http://wheremy.feethavebeen.com/?p=319</guid>
		<description><![CDATA[This is part two of the Simple Website Instant Messenger (SWIM for short, I love it when acronyms just work themselves out) and will cover adding some client-side functionality to our system. For part 1, click here. Client-side functionality essentially translates itself to &#8220;using JavaScript to do some funcy (eh? get it? Funcy? Functional?) things&#8221;. [...]]]></description>
			<content:encoded><![CDATA[<p>This is part two of the Simple Website Instant Messenger (SWIM for short, I love it when acronyms just work themselves out) and will cover adding some client-side functionality to our system. <a href="http://wheremy.feethavebeen.com/2009/11/simple-website-instant-messenger-the-static-prototype/">For part 1, click here.</a></p>
<p>Client-side functionality essentially translates itself to &#8220;using JavaScript to do some funcy (eh? get it? Funcy? Functional?) things&#8221;. It will allow us to add a level of interaction that users are familiar with and that they come to expect from applications. We want them to have the ability to minimize or maximize the windows, as well as close them. We also want to do all of this without page refreshes. Since actions like this are on a per-session basis, we don&#8217;t need to have any server-side code to handle it. We can let the browsers do all the work for us.</p>
<p>For this section we&#8217;ll be making some heavy use of jQuery and some rather complex DOM manipulation. I&#8217;ve also opted to use the long-hand version of everything instead of shorthand. This is so that you guys will be able to read the code and such. I&#8217;ve opted to use the production version of jQuery, but if you&#8217;re just getting started, you may as well download the development version. The bonus of this is that if you&#8217;re just learning you can easily pop in to the jQuery code and see how things are done. As well, if you are using an advanced IDE (such as Dreamweaver) you&#8217;ll get full code hinting. You can do this by heading to <a href="http://jquery.com/">this website</a> and downloading the appropriate version. I also recommend that you bookmark the documentation for jQuery (<a href="http://docs.jquery.com">http://docs.jquery.com</a>) as you&#8217;ll end up using it a lot.</p>
<p>Setup jQuery in whatever folder you&#8217;ve stored the HTML/CSS file from the previous tutorial (setup is actually just copy/paste). You&#8217;ll then need to link the script in your HTML by adding the following line of code to your HTML file in the head section of the code</p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;script src=&quot;jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre></div></div>

<p>Note the src attribute contains the name of the jquery file that I am using. You may have to edit it so that the name of the file matches the name of the file you downloaded.</p>
<p>Directly below that you can add this line as well</p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;script src=&quot;im.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre></div></div>

<p>That line of code will link to our not-yet-created javascript file which will hold all the client-side functionality for our IM script. Once that&#8217;s done you can pop open your editor and get started with the actual jQuery code. However, before we continue with the tutorial note that this is NOT a jQuery primer. This tutorial is expecting you to have some knowledge of jQuery and javascript syntax. If you do not, please read this <a href="http://wheremy.feethavebeen.com/2009/11/jquery-primer-an-intro-to-client-side-functionality/">jQuery primer tutorial</a> first before continuing.</p>
<p>The first thing we are going to do is ensure that our &#8220;information&#8221; window has a toggle-state. Instead of using jQuery&#8217;s built in toggle() method, I&#8217;ve decided to go with a simple boolean check.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
<span style="color: #003366; font-weight: bold;">var</span> windowOpen <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.info'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>windowOpen<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.more'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">fadeOut</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'fast'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">children</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'span'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">children</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'img'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'src'</span><span style="color: #339933;">,</span><span style="color: #3366CC;">'/icon/bullet_arrow_up.png'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				windowOpen <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
			<span style="color: #000066; font-weight: bold;">else</span><span style="color: #009900;">&#123;</span>
				$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.more'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">fadeIn</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'fast'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">children</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'span'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">children</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'img'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'src'</span><span style="color: #339933;">,</span><span style="color: #3366CC;">'/icon/bullet_arrow_down.png'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				windowOpen <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Basically, this will apply the &#8220;onclick&#8221; event to our main window launching button. When clicked it will check if the window is already open and depending on the value of windowOpen, it will close/open it accordingly.</p>
<p>This next section of code will handle opening the chat windows. Since we want to make sure that only windows that AREN&#8217;T opened can be opened (redundant? yes, but completely necessary). This will ensure that if a window is already open, it won&#8217;t open it again.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.contacts span'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">live</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'click'</span><span style="color: #339933;">,</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> id <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'id'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
		<span style="color: #003366; font-weight: bold;">var</span> <span style="color: #000066;">name</span> <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'name'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
		<span style="color: #003366; font-weight: bold;">var</span> found <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span> 
		<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span>i <span style="color: #000066; font-weight: bold;">in</span> openWindows<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>openWindows<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span> <span style="color: #339933;">==</span> id<span style="color: #339933;">+</span><span style="color: #000066;">name</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				found <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
		<span style="color: #009900;">&#125;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>found<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.im-bar'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">prepend</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;span class=&quot;task&quot; id=&quot;'</span><span style="color: #339933;">+</span>id<span style="color: #339933;">+</span><span style="color: #3366CC;">'&quot;&gt;&lt;div class=&quot;convo&quot;&gt;&lt;img src=&quot;/icon/cancel.png&quot; id=&quot;close-win&quot; alt=&quot;Cancel&quot;&gt;&lt;span class=&quot;system&quot;&gt;You have entered a conversation with '</span><span style="color: #339933;">+</span><span style="color: #000066;">name</span><span style="color: #339933;">+</span><span style="color: #3366CC;">'&lt;/span&gt;&lt;textarea name=&quot;message&quot; id=&quot;message&quot;&gt;&lt;/textarea&gt;&lt;/div&gt;&lt;div class=&quot;win&quot; name=&quot;'</span><span style="color: #339933;">+</span><span style="color: #000066;">name</span><span style="color: #339933;">+</span><span style="color: #3366CC;">'&quot;&gt;'</span><span style="color: #339933;">+</span><span style="color: #000066;">name</span><span style="color: #339933;">+</span><span style="color: #3366CC;">'&lt;/div&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#'</span><span style="color: #339933;">+</span>id<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">children</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.convo'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'display'</span><span style="color: #339933;">,</span><span style="color: #3366CC;">'inline'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			openWindows<span style="color: #009900;">&#91;</span>openWindows.<span style="color: #660066;">length</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> id<span style="color: #339933;">+</span><span style="color: #000066;">name</span><span style="color: #339933;">;</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#'</span><span style="color: #339933;">+</span>id<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">children</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.win'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'padding-top'</span><span style="color: #339933;">,</span><span style="color: #3366CC;">'50px'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			convoOpen <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
			<span style="color: #003366; font-weight: bold;">var</span> offset <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>openWindows.<span style="color: #660066;">length</span><span style="color: #339933;">*</span><span style="color: #CC0000;">50</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">+</span><span style="color: #009900;">&#40;</span>openWindows.<span style="color: #660066;">length</span><span style="color: #339933;">*</span><span style="color: #CC0000;">15</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#'</span><span style="color: #339933;">+</span>id<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">children</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.convo'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'right'</span><span style="color: #339933;">,</span>offset<span style="color: #339933;">+</span><span style="color: #3366CC;">'px'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#'</span><span style="color: #339933;">+</span>id<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">children</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">children</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'textarea'</span><span style="color: #009900;">&#41;</span>.<span style="color: #000066;">focus</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
&nbsp;
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.more'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">fadeOut</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'fast'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.info'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">children</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'span'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">children</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'img'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'src'</span><span style="color: #339933;">,</span><span style="color: #3366CC;">'/icon/bullet_arrow_up.png'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		windowOpen <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>The code itself remains fairly straightforward albeit long. First it does some variable assignment and then checks the openWindows array to see if it can find this particular window. If it can&#8217;t, it simply continues with the code. First it creates the new window and places it at the front of the open-window list. Then it just adds it to the openWindows array and does a bit more manipulation to create a text-box and align it properly with the current tab. It also opens the window and focuses on the text area. Finally it fades out the main information window and resets the image and boolean var. </p>
<p>Something to note here: Since we want openWindows and convoOpen to be accessible to ALL our functions, we can place it next to the &#8220;openWindow&#8221; declaration at the top of the script. It would look like this:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> openWindows <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Array<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
<span style="color: #003366; font-weight: bold;">var</span> convoOpen <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span></pre></div></div>

<p>This next bit will just pop open the window if you click on the tab, and minimize it again if you click again.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.task .win'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">live</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'click'</span><span style="color: #339933;">,</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>convoOpen<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">prev</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'display'</span><span style="color: #339933;">,</span><span style="color: #3366CC;">'none'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
			$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'padding-top'</span><span style="color: #339933;">,</span><span style="color: #3366CC;">'5px'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
			convoOpen <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
		<span style="color: #000066; font-weight: bold;">else</span><span style="color: #009900;">&#123;</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">prev</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.convo'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'display'</span><span style="color: #339933;">,</span><span style="color: #3366CC;">'block'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
			$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'padding-top'</span><span style="color: #339933;">,</span><span style="color: #3366CC;">'50px'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			convoOpen <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>		   
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>We&#8217;re nearing the end of our code. This block of code will handle the &#8220;Close&#8221; button on a conversation window. If it is clicked, the window is removed from the tab bar and the openWindows array and the remaining positions are re-calculated.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.task .convo #close-win'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">live</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'click'</span><span style="color: #339933;">,</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> id <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">parent</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">parent</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'id'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> <span style="color: #000066;">name</span> <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">parent</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">next</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'name'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span>i <span style="color: #000066; font-weight: bold;">in</span> openWindows<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>openWindows<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span> <span style="color: #339933;">==</span> id<span style="color: #339933;">+</span><span style="color: #000066;">name</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				openWindows.<span style="color: #660066;">splice</span><span style="color: #009900;">&#40;</span>i<span style="color: #339933;">,</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #000066; font-weight: bold;">break</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
		<span style="color: #009900;">&#125;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">parent</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">parent</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">remove</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
		convoOpen <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> i <span style="color: #339933;">=</span> openWindows.<span style="color: #660066;">length</span><span style="color: #339933;">;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.im-bar'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">children</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">children</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.convo'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			<span style="color: #003366; font-weight: bold;">var</span> offset <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>i<span style="color: #339933;">*</span><span style="color: #CC0000;">50</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">+</span><span style="color: #009900;">&#40;</span>i<span style="color: #339933;">*</span><span style="color: #CC0000;">15</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'right'</span><span style="color: #339933;">,</span><span style="color: #009900;">&#40;</span>offset<span style="color: #009900;">&#41;</span><span style="color: #339933;">+</span><span style="color: #3366CC;">'px'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			i<span style="color: #339933;">--;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>	
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>This last block of code will take any text in our textarea and submit it to the server when you press enter. The AJAX portion of this tutorial will be following, so in the mean-time everything else is showed here. The message is sent to the server, and then it is also automatically placed into the conversation window. We also strip out all tags from the code to ensure that nothing breaks our layout or is able to get through.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.task .convo #message'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">live</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'keyup'</span><span style="color: #339933;">,</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>e.<span style="color: #660066;">which</span> <span style="color: #339933;">==</span> <span style="color: #CC0000;">13</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			data <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			data <span style="color: #339933;">=</span> data.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/&lt;\/?[^&gt;]+&gt;/gi</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #006600; font-style: italic;">// Send message</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">prev</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'text'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">prev</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hasClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'system'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">prev</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">removeClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'system'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">prev</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">text</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
			<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>data <span style="color: #339933;">!=</span> <span style="color: #3366CC;">''</span> <span style="color: #339933;">&amp;&amp;</span> data <span style="color: #339933;">!=</span> <span style="color: #3366CC;">'<span style="color: #000099; font-weight: bold;">\n</span>'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">prev</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">append</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;p&gt;&lt;b&gt;'</span><span style="color: #339933;">+</span>yourName<span style="color: #339933;">+</span><span style="color: #3366CC;">':&lt;/b&gt; '</span><span style="color: #339933;">+</span>data<span style="color: #339933;">+</span><span style="color: #3366CC;">'&lt;/p&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">prev</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span> scrollTop<span style="color: #339933;">:</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">prev</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;scrollHeight&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
		<span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>That is the basics of our Client-Side functionality to our Simple Website Instant Messenger system. The next installment will cover adding the AJAX function and modifying this last section sightly to reflect it.</p>
]]></content:encoded>
			<wfw:commentRss>http://wheremy.feethavebeen.com/2009/11/simple-website-instant-messenger-client-side-functionality/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Microsoft WebsiteSpark</title>
		<link>http://wheremy.feethavebeen.com/2009/11/microsoft-websitespark/</link>
		<comments>http://wheremy.feethavebeen.com/2009/11/microsoft-websitespark/#comments</comments>
		<pubDate>Fri, 06 Nov 2009 14:00:57 +0000</pubDate>
		<dc:creator>xangelo</dc:creator>
				<category><![CDATA[Featured]]></category>
		<category><![CDATA[Tech Tip]]></category>
		<category><![CDATA[Windows]]></category>

		<guid isPermaLink="false">http://wheremy.feethavebeen.com/?p=330</guid>
		<description><![CDATA[While I initially decided that Fridays would be posts from my favourite blogs, this was something that I realized not a lot of people are aware of. If you&#8217;re looking to get into ASP.NET I recommend you check out this great offering from Microsoft. There are a few stipulations, but definitely worth it if you&#8217;re [...]]]></description>
			<content:encoded><![CDATA[<p>While I initially decided that Fridays would be posts from my favourite blogs, this was something that I realized not a lot of people are aware of. If you&#8217;re looking to get into ASP.NET I recommend you check out this great offering from Microsoft. There are a few stipulations, but definitely worth it if you&#8217;re interested in building up your knowledge base.</p>
<p><a href="http://www.microsoft.com/web/websitespark/">http://www.microsoft.com/web/websitespark/</a></p>
<p><a href="http://wheremy.feethavebeen.com/wp-content/uploads/2009/11/wbs.png"><img class="aligncenter size-full wp-image-331" title="wbs" src="http://wheremy.feethavebeen.com/wp-content/uploads/2009/11/wbs.png" alt="wbs" width="623" height="128" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://wheremy.feethavebeen.com/2009/11/microsoft-websitespark/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Google Wave</title>
		<link>http://wheremy.feethavebeen.com/2009/11/google-wave/</link>
		<comments>http://wheremy.feethavebeen.com/2009/11/google-wave/#comments</comments>
		<pubDate>Mon, 02 Nov 2009 13:00:23 +0000</pubDate>
		<dc:creator>xangelo</dc:creator>
				<category><![CDATA[Featured]]></category>
		<category><![CDATA[Thoughts]]></category>

		<guid isPermaLink="false">http://wheremy.feethavebeen.com/?p=307</guid>
		<description><![CDATA[If you&#8217;ve been keeping up with latest Google news, you&#8217;ll know that Google Wave is the latest and greatest thing. Or so they claim. After spending a few days playing around with Wave I&#8217;ve come to a rather disappointing conclusion. Unless you&#8217;re a developer, Wave will be useless. First off, let me highlight what Google [...]]]></description>
			<content:encoded><![CDATA[<p>If you&#8217;ve been keeping up with latest Google news, you&#8217;ll know that <a href="http://wave.google.com/help/wave/about.html">Google Wave</a> is the latest and greatest thing. Or so they claim. After spending a few days playing around with Wave I&#8217;ve come to a rather disappointing conclusion. Unless you&#8217;re a developer, Wave will be useless.</p>
<p>First off, let me highlight what Google Wave provides</p>
<ul>
<li>Real time collaboration, and I mean real time &#8211; people can see as you type letter by letter.</li>
<li>A new way to organize your email</li>
<li>A convergence of both traditional email and instant messaging</li>
</ul>
<p>As a developer and a computer geek I&#8217;m incredibly excited by this. Not only is it something new and fancy, but it could potentially replace existing email and IM systems and provide a platform for developers to integrate these features into their own websites. That&#8217;s amazing right?!</p>
<p>Wrong.</p>
<p>Google Wave undermines certain benefits that traditional email comes with. I never thought about the implications of real-time email until I was trying to write an email to a client and I realized that at numerous times I just stopped and re-read what I was writing, and even went back and changed certain sections of it. I realized that if my client could see what I was typing as I was typing it, they might get a little impatient and call me just to find out what I was talking about quickly. However, my writing took place over several days. And that is the benefit of email. You have the ability to refine your response over any number of days before sending it, and once you sent it you can sit back and relax knowing that your client received an email with exactly the tone that you were trying to imply.</p>
<p>Google wave even claims it will be a good way to IM with multiple people, but that isn&#8217;t the case. As with emails, instant messaging provides you with a certain set of tools that Google Wave can not provide. Things like statuses (which are implemented somewhat vaguely in Wave), emoticons, and even the ability to write out your message and spell check it before sending it are built into IM clients. By providing people direct access to your thought process as you compose your messages, Google strips away a necessary barrier that these clients require to be successful. A friend once asked me how I cope with being so connected. I read hundreds of feeds a day, respond to numerous emails, keep up with contacts over my Blackberry and even make use of Friendfeed and Twitter when necessary. For an average user that alone is too much. I can&#8217;t imagine how I would be able to cope with all of it if I could watch people writing their content in real time.</p>
<p>As a collaboration tool however, Google Wave will serve its purpose. In a corporate setting, working with numerous people on documents is something that occurs fairly frequently, and the ability to open a single copy and edit it (with revisions saved) is a huge bonus. In that respect, I think Google definitely hit the nail on the head.</p>
<p>But what they provide to developers is much bigger than what they provide to users. The ability to access these real-time components and integrate them into their own web applications is something that developers everywhere are waiting to be able to do. Imagine utilizing Google Wave to write your own web-based editor, ala <a href="https://bespin.mozilla.com/">Bespin</a>, but with collaboration and versioning built right in to it. Imagine being able to instantly set up a collaboration between other bloggers to work on a common post.</p>
<p>To developers Google Wave represents the future of the web. It represents the future of JavaScript as it finally becomes welcomed by developers. It forces browsers to push their JS engines to perform faster while lowering their system resources at the same time. To regular users? Google Wave is useless.</p>
<p style="text-align: center;"><a href="http://wheremy.feethavebeen.com/wp-content/uploads/2009/11/wave.png"><img class="aligncenter size-full wp-image-308" title="wave" src="http://wheremy.feethavebeen.com/wp-content/uploads/2009/11/wave.png" alt="wave" width="722" height="474" /></a></p>
<p>If you are interested in Google Wave, I have about 10 invites left. Please leave a comment with your name and the email address you would like me to send it to. The first 10 comments left will get invites.</p>
]]></content:encoded>
			<wfw:commentRss>http://wheremy.feethavebeen.com/2009/11/google-wave/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Feature Friday &#8211; Rarst.net &#8211; PDF Creator</title>
		<link>http://wheremy.feethavebeen.com/2009/10/feature-friday-rarst-net-pdf-creator/</link>
		<comments>http://wheremy.feethavebeen.com/2009/10/feature-friday-rarst-net-pdf-creator/#comments</comments>
		<pubDate>Fri, 30 Oct 2009 13:00:30 +0000</pubDate>
		<dc:creator>xangelo</dc:creator>
				<category><![CDATA[Featured]]></category>
		<category><![CDATA[Windows]]></category>

		<guid isPermaLink="false">http://wheremy.feethavebeen.com/?p=303</guid>
		<description><![CDATA[Whenever you need to make sure that something is going to look the same cross-platform (Linux, Windows, Mac) your best is always PDF&#8217;s. Most computers come with Adobe Reader or some equivalent to handle PDF files, and even gMail has incorporated its own online PDF reader. However, for some strange reason, windows doesn&#8217;t come with [...]]]></description>
			<content:encoded><![CDATA[<p>Whenever you need to make sure that something is going to look the same cross-platform (Linux, Windows, Mac) your best is always PDF&#8217;s. Most computers come with Adobe Reader or some equivalent to handle PDF files, and even gMail has incorporated its own online PDF reader. However, for some strange reason, windows doesn&#8217;t come with a way to change your files to PDF&#8217;s. There are numerous applications that do this, and PDF Creator is one of them. <a href="http://www.rarst.net/software/pdfcreator/">Check out the full post on Rarst.net</a></p>
<blockquote><p>PDFCreator – virtual printer to create documents</p>
<p>I had thought for some time how should I organize jump from my report at work (beautiful mess of MySQL, PHP and my Google Charts class) to consolidated document.</p>
<p>I am no fan of PDFs, but they supposed to be made for such occasions. And aside from expensive editors fastest way to get PDF document is to use virtual printer like PDFCreator.</p></blockquote>
]]></content:encoded>
			<wfw:commentRss>http://wheremy.feethavebeen.com/2009/10/feature-friday-rarst-net-pdf-creator/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
