Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

site update

  • Loading branch information...
commit 11fc682ff5614347b738fe6978a80d941d4f9e1f 1 parent 54e0215
@cgack authored
Showing with 1,506 additions and 293 deletions.
  1. +4 −4 Projects/index.html
  2. +181 −10 atom.xml
  3. +4 −4 blog/2011/02/10/home-in-the-cloud/index.html
  4. +4 −4 blog/2011/02/12/cloud-anywhere/index.html
  5. +4 −4 blog/2011/02/13/want-a-chrome-os-notebook-there-is-still-a-chance-you-could-get-one/index.html
  6. +4 −4 blog/2011/02/14/to-the-cloud/index.html
  7. +4 −4 blog/2011/02/18/coding-in-the-cloud-part-i/index.html
  8. +4 −4 blog/2011/02/20/coding-in-the-cloud-part-ii/index.html
  9. +4 −4 blog/2011/03/03/coding-in-the-cloud-part/index.html
  10. +4 −4 blog/2011/03/03/remotely-coding/index.html
  11. +4 −4 blog/2011/03/10/rad-with-wavemaker/index.html
  12. +4 −4 blog/2011/03/15/a-beatbox-in-the-sky/index.html
  13. +4 −4 blog/2011/03/23/javascript-heaven-with-jsfiddle/index.html
  14. +4 −4 blog/2011/03/26/a-better-web-based-ide/index.html
  15. +4 −4 blog/2011/04/03/cloud9-revisited/index.html
  16. +4 −4 blog/2011/04/09/shiftedit-web-based-ide/index.html
  17. +4 −4 blog/2011/04/16/chrome-os-everyday/index.html
  18. +4 −4 blog/2011/04/27/changing-old-habits/index.html
  19. +4 −4 blog/2011/05/02/duostack-cloud-platform-as-a-service/index.html
  20. +4 −4 blog/2011/05/12/chromebooks/index.html
  21. +4 −4 blog/2011/05/25/duostack-acquired-by-dotcloud/index.html
  22. +4 −4 blog/2011/06/02/chromebook-first-dibs/index.html
  23. +4 −4 blog/2011/06/07/i-cloud/index.html
  24. +4 −4 blog/2011/07/08/chrome-dev-tools-as-an-ide/index.html
  25. +4 −4 blog/2011/08/25/github-goes-ace-and-demos/index.html
  26. +4 −4 blog/2011/09/02/cloud-9-adds-heroku-support/index.html
  27. +4 −4 blog/2011/10/22/snakes-in-the-cloud/index.html
  28. +4 −4 blog/2011/11/08/moving-to-octopress/index.html
  29. +4 −4 blog/2011/12/19/canvas/index.html
  30. +4 −4 blog/2011/12/23/book-review-the-tangled-web/index.html
  31. +4 −4 blog/2011/12/28/collision-detection-on-canvas/index.html
  32. +4 −4 blog/2012/01/07/widget/index.html
  33. +444 −0 blog/2012/01/27/deviceorientation-events/index.html
  34. +15 −5 blog/archives/index.html
  35. +210 −39 blog/index.html
  36. +35 −35 blog/page/2/index.html
  37. +36 −34 blog/page/3/index.html
  38. +240 −0 blog/page/4/index.html
  39. +210 −39 index.html
  40. +4 −4 old_index.html
  41. +7 −3 sitemap.xml
View
8 Projects/index.html
@@ -175,6 +175,10 @@ <h1 class="entry-title">Projects</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/2012/01/27/deviceorientation-events/">DeviceOrientation Events</a>
+ </li>
+
+ <li class="post">
<a href="/blog/2012/01/07/widget/">Widget</a>
</li>
@@ -190,10 +194,6 @@ <h1 class="entry-title">Projects</h1>
<a href="/blog/2011/12/19/canvas/">Canvas, History, LocalStorage and More</a>
</li>
- <li class="post">
- <a href="/blog/2011/11/08/moving-to-octopress/">Moving to Octopress</a>
- </li>
-
</ul>
</section>
View
191 atom.xml
@@ -4,7 +4,7 @@
<title><![CDATA[cgack]]></title>
<link href="http://cgack.github.com/atom.xml" rel="self"/>
<link href="http://cgack.github.com/"/>
- <updated>2012-01-21T23:03:51-05:00</updated>
+ <updated>2012-01-27T18:35:27-05:00</updated>
<id>http://cgack.github.com/</id>
<author>
<name><![CDATA[Cory Gackenheimer]]></name>
@@ -14,6 +14,186 @@
<entry>
+ <title type="html"><![CDATA[DeviceOrientation Events]]></title>
+ <link href="http://cgack.github.com/blog/2012/01/27/deviceorientation-events/"/>
+ <updated>2012-01-27T18:04:00-05:00</updated>
+ <id>http://cgack.github.com/blog/2012/01/27/deviceorientation-events</id>
+ <content type="html"><![CDATA[<p>The Mozilla Dev Derby is a pretty cool thing. Developers from around the world can openly add any demo to the site, and if their demo lines up with the prescribed derby for the month, they are automatically entered to win a prize (t-shirt, cool bag, android device). I decided I would enter again for the January 2012 derby based on Orientation. I made two demos.</p>
+
+<h3>catch</h3>
+
+<p>The first one called &#8220;Catch&#8221; which you are attempting to catch a randomly generated ball in the shortest amount of time possible. I have personally found it incredibly addicting to get the perfect game, or at least my best attempt at it and I even wrote the source code. What I learned in developing this app was a couple of things. One, there isn&#8217;t a ton of documentation on the web about the DeviceOrientationEvent. Two, its pretty straightforward to detect the orientation and utilize it to move an object. Here is the basic of my app:</p>
+
+<pre><code> /*orientation stuffs*/
+var initOrientation = function() {
+ var count = 0, gam = 0, bet = 0;
+ if (window.DeviceOrientationEvent) {
+ window.addEventListener("deviceorientation", function(e) {
+ //gamma = left to right
+ //beta = front back
+ //alpha = compass dir
+ count = count + 1;
+ gam += e.gamma;
+ bet += e.beta;
+
+ if (count === 0 || count % 10 === 0) {
+ orientationYo(gam, bet);
+ gam = 0;
+ bet = 0;
+ }
+ }, false);
+ }
+};
+
+//handle orientation
+var orientationYo = function(ltr, ftb) {
+ coor.x = coor.x + ltr;
+ coor.y = coor.y + ftb;
+ if (!gameState.victory &amp;&amp; gameState.playing) {
+ tgt.move(coor);
+ }
+};
+</code></pre>
+
+<p>so that handles the detection of the orientation event, next I simply added the move call to my target (tgt) which looks like this:</p>
+
+<pre><code>var tgt = {
+ isDrawing: false,
+ collided: false,
+ start: function(coordinates) {
+ this.drawIt(coordinates);
+ this.isDrawing = true;
+ },
+ drawIt: function (coordinates) {
+ ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+ ctx.fillStyle = b2_color;
+ ctx.beginPath();
+ ctx.arc(coordinates.x, coordinates.y, 25, 0, Math.PI * 2, true);
+ ctx.fill();
+ },
+ move: function(coordinates) {
+ if (this.isDrawing) {
+ this.checkBounds(coordinates);
+ this.drawIt(coordinates);
+ }
+ },
+ finish: function(coordinates) {
+ this.isDrawing = false;
+ ctx.lineTo(coordinates.x, coordinates.y);
+ ctx.stroke();
+ ctx.closePath();
+ },
+ checkBounds: function(coordinates) {
+ if (coordinates.y &gt; bound.y2) {
+ coordinates.y = bound.y2;
+ } else if (coordinates.y &lt; bound.y1) {
+ coordinates.y = bound.y1;
+ } else if (coordinates.x &gt; bound.x2) {
+ coordinates.x = bound.x2;
+ } else if (coordinates.x &lt; bound.x1) {
+ coordinates.x = bound.x1;
+ }
+ }
+};
+</code></pre>
+
+<p>collision detection is handled by my randomly placed bouncing ball, which detects when the target ball moves into its path:</p>
+
+<pre><code>checkObjectCollisions: function() {
+ var imgData = ctx.getImageData(this.position.x + this.velocity.x1, this.position.y + this.velocity.x2, r, r),
+ pix = imgData.data;
+ for (i = 0, n = pix.length; i &lt; n; i += 4) {
+ if (pix[i] !== 0) {
+ this.collided = true;
+ if (Math.abs(this.velocity.x1) &gt; Math.abs(this.velocity.x2)){
+ this.velocity.x1 = -this.velocity.x1 * drag;
+ } else {
+ this.velocity.x2 = -this.velocity.x2 * drag;
+ }
+ break;
+ } else {
+ this.collided = false;
+ }
+ }
+}
+</code></pre>
+
+<p>I am pretty happy with the game, its clean and works nicely. You can check it out <a href="https://developer.mozilla.org/en-US/demos/detail/catch">here</a></p>
+
+<h3>compass</h3>
+
+<p>The other is a simple web compass where I utilize the DeviceOrientationEvent to get the <a href="https://developer.mozilla.org/en-US/demos/detail/simple-compass">cardinal direction your phone or device is facing</a>. There are two cool (in my opinion) things that happened here. One is that to me it seems the device orientation event as defined states that the DeviceOrientationEvent.alpha ranges from 0 to 360 which to me is a 361 degree circle. The second is that I was able to utilize the offline caching capabilities of the modern web to make the compass available to a device event when not connected to the internet. This is done in minimal lines of code. The HTML and JavaScript are as follows:</p>
+
+<pre><code>&lt;!-- This Source Code Form is subject to the terms of the Mozilla Public
+License, v. 2.0. If a copy of the MPL was not distributed with this file,
+You can obtain one at http://mozilla.org/MPL/2.0/. --&gt;
+
+&lt;!DOCTYPE html&gt;
+&lt;html manifest="compass.appcache"&gt;
+&lt;head&gt;
+&lt;meta charset=utf-8 /&gt;
+&lt;title&gt;Cardinal Direction Compass&lt;/title&gt;
+&lt;style&gt;
+ .pointer {
+ height: 0;
+ width: 0;
+ border-left: 3em solid transparent;
+ border-right: 3em solid transparent;
+ border-bottom: 12em solid black;
+ margin: -10px 0 0 -40px;
+ top: 40%;
+ left: 50%;
+ position: absolute;
+ }
+ .n {
+ top: 20%;
+ left:50%;
+ position:absolute;
+ font:8em Helvetica;
+ margin: 0 0 0 -40px;
+ }
+ &lt;/style&gt;
+ &lt;script src="js/jquery.js"&gt;&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+ &lt;div class="n"&gt;N&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;S&lt;/div&gt;
+ &lt;div class="pointer"&gt;&lt;/div&gt;
+&lt;script&gt;
+ $(document).ready(function() {
+
+ var rotate = function (deg) {
+ $(".n").css({ "-moz-transform": "rotate(0deg)"});
+ $(".n").css({ "-moz-transform": "rotate(" + deg + "deg)"});
+
+ $(".n").css({ "-o-transform": "rotate(0deg)"});
+ $(".n").css({ "-o-transform": "rotate(" + deg + "deg)"});
+
+ $(".n").css({ "-ms-transform": "rotate(0deg)"});
+ $(".n").css({ "-ms-transform": "rotate(" + deg + "deg)"});
+
+ $(".n").css({ "-webkit-transform": "rotate(0deg)"});
+ $(".n").css({ "-webkit-transform": "rotate(" + deg + "deg)"});
+
+ $(".n").css({ "transform": "rotate(0deg)"});
+ $(".n").css({ "transform": "rotate(" + deg + "deg)"});
+ };
+ if (window.DeviceOrientationEvent) {
+ window.addEventListener("deviceorientation", function (e) {
+ rotate(360 - e.alpha);
+ }, false);
+ }
+
+ });
+ &lt;/script&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</code></pre>
+
+<p>The final point I&#8217;d like to make is that due to what I thought was minimal documentation, I participated in a Mozilla Doc Sprint last weekend to update the Documentation surrounding the DeviceOrientationEvent. Doing my part in the web development community was both rewarding and a learning experience. I encourage anyone to try it out as well.</p>
+]]></content>
+ </entry>
+
+ <entry>
<title type="html"><![CDATA[Widget]]></title>
<link href="http://cgack.github.com/blog/2012/01/07/widget/"/>
<updated>2012-01-07T21:20:00-05:00</updated>
@@ -521,13 +701,4 @@ Each of these templates could be either a good launching point or reference for
]]></content>
</entry>
- <entry>
- <title type="html"><![CDATA[JavaScript Heaven with jsFiddle]]></title>
- <link href="http://cgack.github.com/blog/2011/03/23/javascript-heaven-with-jsfiddle/"/>
- <updated>2011-03-23T00:00:00-04:00</updated>
- <id>http://cgack.github.com/blog/2011/03/23/javascript-heaven-with-jsfiddle</id>
- <content type="html"><![CDATA[I may have finally found the perfect tool to build and test JavaScript concoctions on the fly (or at least a really cool one). I have been utilizing Kodingen (which is awesome) to code on my Cr48 and then flipping between the JavaScript code, css, html (I know I could put these all in the same document but navigating that is more exhausting to me that toggling windows) and rendered pages to test my script, styles, and html quickly.  This can get a bit cumbersome, and flipping between tabs or workspaces can get old very quickly. <br /><div><br /></div><div>So I was reading through the Chromium blog and I watched a video of Paul Irish, a developer advocate for the Chrome team, discussing some of the cool tools using Google Chrome to <a href="http://www.youtube.com/watch?v=nOEw9iiopwI&amp;feature=player_embedded">develop quicker</a>.  This sparked my interest in <a href="http://paulirish.com/">Paul Irish</a> and the first post I saw on his site had an embedded example from jsFiddle.  This led me to <a href="http://jsfiddle.net/">jsFiddle.net</a>.  Perfect.  Clean.  Awesome. </div><div><br /></div><div>The setup of the editor reminds me of the <a href="http://playground.html5rocks.com/">HTML5 playground</a> at HTML5Rocks, only without the need to switch between views of CSS, HTML, and JavaScript.  In jsFiddle the concurrent views of HTML, CSS, JavaScript, and the current render are all visible because they are each contained in their own iframe.  I decided to try it out with a quick &#8220;hello world&#8221; test which due to the ease of use and another Paul Irish contribution <a href="http://css3please.com/">CSS3Please</a>, I was able to quickly generate this little fiddle:</div><a href="http://jsfiddle.net/corygack/9gw3k/embedded/result/">http://jsfiddle.net/corygack/9gw3k/embedded/result/</a><br /><div><br />Another great feature is the &#8216;TidyUp&#8217; button which will clean up your code&#8217;s indents and spacing, which is super handy if you are like me and you have moved things around or copied text in from outside sources (css3please).  Also included is <a href="http://www.jslint.com/">JSLint</a> which is a great utility that will examine the quality of your code and &#8220;will hurt your feelings&#8221; as it tells the user exactly what is wrong with their JavaScript.  I used jQuery as my JavaScript library of choice, but also included are Mootools, YUI, Prototype, Dojo, Glow, Procession.js, ExtJS, RightJS,  Raphael, and No Library (pure JS)&#8230; so just about any flavor you might care for.   I am sold on jsFiddle and I will likely be using it as my primary tool to fiddle with JavaScript.</div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7333770831047956364-5181953116803374?l=go-cloud-go.blogspot.com' alt='' /></div>
-]]></content>
- </entry>
-
</feed>
View
8 blog/2011/02/10/home-in-the-cloud/index.html
@@ -192,6 +192,10 @@ <h1 class="entry-title">Home in the Cloud</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/2012/01/27/deviceorientation-events/">DeviceOrientation Events</a>
+ </li>
+
+ <li class="post">
<a href="/blog/2012/01/07/widget/">Widget</a>
</li>
@@ -207,10 +211,6 @@ <h1 class="entry-title">Home in the Cloud</h1>
<a href="/blog/2011/12/19/canvas/">Canvas, History, LocalStorage and More</a>
</li>
- <li class="post">
- <a href="/blog/2011/11/08/moving-to-octopress/">Moving to Octopress</a>
- </li>
-
</ul>
</section>
View
8 blog/2011/02/12/cloud-anywhere/index.html
@@ -192,6 +192,10 @@ <h1 class="entry-title">Cloud Anywhere</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/2012/01/27/deviceorientation-events/">DeviceOrientation Events</a>
+ </li>
+
+ <li class="post">
<a href="/blog/2012/01/07/widget/">Widget</a>
</li>
@@ -207,10 +211,6 @@ <h1 class="entry-title">Cloud Anywhere</h1>
<a href="/blog/2011/12/19/canvas/">Canvas, History, LocalStorage and More</a>
</li>
- <li class="post">
- <a href="/blog/2011/11/08/moving-to-octopress/">Moving to Octopress</a>
- </li>
-
</ul>
</section>
View
8 ...2011/02/13/want-a-chrome-os-notebook-there-is-still-a-chance-you-could-get-one/index.html
@@ -192,6 +192,10 @@ <h1 class="entry-title">Want a Chrome OS Notebook? There Is Still a Chance You C
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/2012/01/27/deviceorientation-events/">DeviceOrientation Events</a>
+ </li>
+
+ <li class="post">
<a href="/blog/2012/01/07/widget/">Widget</a>
</li>
@@ -207,10 +211,6 @@ <h1 class="entry-title">Want a Chrome OS Notebook? There Is Still a Chance You C
<a href="/blog/2011/12/19/canvas/">Canvas, History, LocalStorage and More</a>
</li>
- <li class="post">
- <a href="/blog/2011/11/08/moving-to-octopress/">Moving to Octopress</a>
- </li>
-
</ul>
</section>
View
8 blog/2011/02/14/to-the-cloud/index.html
@@ -192,6 +192,10 @@ <h1 class="entry-title">To the Cloud?</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/2012/01/27/deviceorientation-events/">DeviceOrientation Events</a>
+ </li>
+
+ <li class="post">
<a href="/blog/2012/01/07/widget/">Widget</a>
</li>
@@ -207,10 +211,6 @@ <h1 class="entry-title">To the Cloud?</h1>
<a href="/blog/2011/12/19/canvas/">Canvas, History, LocalStorage and More</a>
</li>
- <li class="post">
- <a href="/blog/2011/11/08/moving-to-octopress/">Moving to Octopress</a>
- </li>
-
</ul>
</section>
View
8 blog/2011/02/18/coding-in-the-cloud-part-i/index.html
@@ -192,6 +192,10 @@ <h1 class="entry-title">Coding in the Cloud: Part I</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/2012/01/27/deviceorientation-events/">DeviceOrientation Events</a>
+ </li>
+
+ <li class="post">
<a href="/blog/2012/01/07/widget/">Widget</a>
</li>
@@ -207,10 +211,6 @@ <h1 class="entry-title">Coding in the Cloud: Part I</h1>
<a href="/blog/2011/12/19/canvas/">Canvas, History, LocalStorage and More</a>
</li>
- <li class="post">
- <a href="/blog/2011/11/08/moving-to-octopress/">Moving to Octopress</a>
- </li>
-
</ul>
</section>
View
8 blog/2011/02/20/coding-in-the-cloud-part-ii/index.html
@@ -192,6 +192,10 @@ <h1 class="entry-title">Coding in the Cloud: Part II</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/2012/01/27/deviceorientation-events/">DeviceOrientation Events</a>
+ </li>
+
+ <li class="post">
<a href="/blog/2012/01/07/widget/">Widget</a>
</li>
@@ -207,10 +211,6 @@ <h1 class="entry-title">Coding in the Cloud: Part II</h1>
<a href="/blog/2011/12/19/canvas/">Canvas, History, LocalStorage and More</a>
</li>
- <li class="post">
- <a href="/blog/2011/11/08/moving-to-octopress/">Moving to Octopress</a>
- </li>
-
</ul>
</section>
View
8 blog/2011/03/03/coding-in-the-cloud-part/index.html
@@ -192,6 +192,10 @@ <h1 class="entry-title">Coding in the Cloud: Part ?</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/2012/01/27/deviceorientation-events/">DeviceOrientation Events</a>
+ </li>
+
+ <li class="post">
<a href="/blog/2012/01/07/widget/">Widget</a>
</li>
@@ -207,10 +211,6 @@ <h1 class="entry-title">Coding in the Cloud: Part ?</h1>
<a href="/blog/2011/12/19/canvas/">Canvas, History, LocalStorage and More</a>
</li>
- <li class="post">
- <a href="/blog/2011/11/08/moving-to-octopress/">Moving to Octopress</a>
- </li>
-
</ul>
</section>
View
8 blog/2011/03/03/remotely-coding/index.html
@@ -192,6 +192,10 @@ <h1 class="entry-title">Remotely Coding</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/2012/01/27/deviceorientation-events/">DeviceOrientation Events</a>
+ </li>
+
+ <li class="post">
<a href="/blog/2012/01/07/widget/">Widget</a>
</li>
@@ -207,10 +211,6 @@ <h1 class="entry-title">Remotely Coding</h1>
<a href="/blog/2011/12/19/canvas/">Canvas, History, LocalStorage and More</a>
</li>
- <li class="post">
- <a href="/blog/2011/11/08/moving-to-octopress/">Moving to Octopress</a>
- </li>
-
</ul>
</section>
View
8 blog/2011/03/10/rad-with-wavemaker/index.html
@@ -192,6 +192,10 @@ <h1 class="entry-title">RAD With WaveMaker</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/2012/01/27/deviceorientation-events/">DeviceOrientation Events</a>
+ </li>
+
+ <li class="post">
<a href="/blog/2012/01/07/widget/">Widget</a>
</li>
@@ -207,10 +211,6 @@ <h1 class="entry-title">RAD With WaveMaker</h1>
<a href="/blog/2011/12/19/canvas/">Canvas, History, LocalStorage and More</a>
</li>
- <li class="post">
- <a href="/blog/2011/11/08/moving-to-octopress/">Moving to Octopress</a>
- </li>
-
</ul>
</section>
View
8 blog/2011/03/15/a-beatbox-in-the-sky/index.html
@@ -192,6 +192,10 @@ <h1 class="entry-title">A Beatbox in the Sky</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/2012/01/27/deviceorientation-events/">DeviceOrientation Events</a>
+ </li>
+
+ <li class="post">
<a href="/blog/2012/01/07/widget/">Widget</a>
</li>
@@ -207,10 +211,6 @@ <h1 class="entry-title">A Beatbox in the Sky</h1>
<a href="/blog/2011/12/19/canvas/">Canvas, History, LocalStorage and More</a>
</li>
- <li class="post">
- <a href="/blog/2011/11/08/moving-to-octopress/">Moving to Octopress</a>
- </li>
-
</ul>
</section>
View
8 blog/2011/03/23/javascript-heaven-with-jsfiddle/index.html
@@ -192,6 +192,10 @@ <h1 class="entry-title">JavaScript Heaven With jsFiddle</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/2012/01/27/deviceorientation-events/">DeviceOrientation Events</a>
+ </li>
+
+ <li class="post">
<a href="/blog/2012/01/07/widget/">Widget</a>
</li>
@@ -207,10 +211,6 @@ <h1 class="entry-title">JavaScript Heaven With jsFiddle</h1>
<a href="/blog/2011/12/19/canvas/">Canvas, History, LocalStorage and More</a>
</li>
- <li class="post">
- <a href="/blog/2011/11/08/moving-to-octopress/">Moving to Octopress</a>
- </li>
-
</ul>
</section>
View
8 blog/2011/03/26/a-better-web-based-ide/index.html
@@ -192,6 +192,10 @@ <h1 class="entry-title">A Better Web-Based IDE</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/2012/01/27/deviceorientation-events/">DeviceOrientation Events</a>
+ </li>
+
+ <li class="post">
<a href="/blog/2012/01/07/widget/">Widget</a>
</li>
@@ -207,10 +211,6 @@ <h1 class="entry-title">A Better Web-Based IDE</h1>
<a href="/blog/2011/12/19/canvas/">Canvas, History, LocalStorage and More</a>
</li>
- <li class="post">
- <a href="/blog/2011/11/08/moving-to-octopress/">Moving to Octopress</a>
- </li>
-
</ul>
</section>
View
8 blog/2011/04/03/cloud9-revisited/index.html
@@ -192,6 +192,10 @@ <h1 class="entry-title">Cloud9 Revisited</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/2012/01/27/deviceorientation-events/">DeviceOrientation Events</a>
+ </li>
+
+ <li class="post">
<a href="/blog/2012/01/07/widget/">Widget</a>
</li>
@@ -207,10 +211,6 @@ <h1 class="entry-title">Cloud9 Revisited</h1>
<a href="/blog/2011/12/19/canvas/">Canvas, History, LocalStorage and More</a>
</li>
- <li class="post">
- <a href="/blog/2011/11/08/moving-to-octopress/">Moving to Octopress</a>
- </li>
-
</ul>
</section>
View
8 blog/2011/04/09/shiftedit-web-based-ide/index.html
@@ -192,6 +192,10 @@ <h1 class="entry-title">ShiftEdit Web-based IDE</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/2012/01/27/deviceorientation-events/">DeviceOrientation Events</a>
+ </li>
+
+ <li class="post">
<a href="/blog/2012/01/07/widget/">Widget</a>
</li>
@@ -207,10 +211,6 @@ <h1 class="entry-title">ShiftEdit Web-based IDE</h1>
<a href="/blog/2011/12/19/canvas/">Canvas, History, LocalStorage and More</a>
</li>
- <li class="post">
- <a href="/blog/2011/11/08/moving-to-octopress/">Moving to Octopress</a>
- </li>
-
</ul>
</section>
View
8 blog/2011/04/16/chrome-os-everyday/index.html
@@ -192,6 +192,10 @@ <h1 class="entry-title">Chrome OS Everyday</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/2012/01/27/deviceorientation-events/">DeviceOrientation Events</a>
+ </li>
+
+ <li class="post">
<a href="/blog/2012/01/07/widget/">Widget</a>
</li>
@@ -207,10 +211,6 @@ <h1 class="entry-title">Chrome OS Everyday</h1>
<a href="/blog/2011/12/19/canvas/">Canvas, History, LocalStorage and More</a>
</li>
- <li class="post">
- <a href="/blog/2011/11/08/moving-to-octopress/">Moving to Octopress</a>
- </li>
-
</ul>
</section>
View
8 blog/2011/04/27/changing-old-habits/index.html
@@ -192,6 +192,10 @@ <h1 class="entry-title">Changing Old Habits</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/2012/01/27/deviceorientation-events/">DeviceOrientation Events</a>
+ </li>
+
+ <li class="post">
<a href="/blog/2012/01/07/widget/">Widget</a>
</li>
@@ -207,10 +211,6 @@ <h1 class="entry-title">Changing Old Habits</h1>
<a href="/blog/2011/12/19/canvas/">Canvas, History, LocalStorage and More</a>
</li>
- <li class="post">
- <a href="/blog/2011/11/08/moving-to-octopress/">Moving to Octopress</a>
- </li>
-
</ul>
</section>
View
8 blog/2011/05/02/duostack-cloud-platform-as-a-service/index.html
@@ -192,6 +192,10 @@ <h1 class="entry-title">Duostack: Cloud Platform as a Service</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/2012/01/27/deviceorientation-events/">DeviceOrientation Events</a>
+ </li>
+
+ <li class="post">
<a href="/blog/2012/01/07/widget/">Widget</a>
</li>
@@ -207,10 +211,6 @@ <h1 class="entry-title">Duostack: Cloud Platform as a Service</h1>
<a href="/blog/2011/12/19/canvas/">Canvas, History, LocalStorage and More</a>
</li>
- <li class="post">
- <a href="/blog/2011/11/08/moving-to-octopress/">Moving to Octopress</a>
- </li>
-
</ul>
</section>
View
8 blog/2011/05/12/chromebooks/index.html
@@ -192,6 +192,10 @@ <h1 class="entry-title">Chromebooks!</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/2012/01/27/deviceorientation-events/">DeviceOrientation Events</a>
+ </li>
+
+ <li class="post">
<a href="/blog/2012/01/07/widget/">Widget</a>
</li>
@@ -207,10 +211,6 @@ <h1 class="entry-title">Chromebooks!</h1>
<a href="/blog/2011/12/19/canvas/">Canvas, History, LocalStorage and More</a>
</li>
- <li class="post">
- <a href="/blog/2011/11/08/moving-to-octopress/">Moving to Octopress</a>
- </li>
-
</ul>
</section>
View
8 blog/2011/05/25/duostack-acquired-by-dotcloud/index.html
@@ -192,6 +192,10 @@ <h1 class="entry-title">Duostack Acquired by dotCloud</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/2012/01/27/deviceorientation-events/">DeviceOrientation Events</a>
+ </li>
+
+ <li class="post">
<a href="/blog/2012/01/07/widget/">Widget</a>
</li>
@@ -207,10 +211,6 @@ <h1 class="entry-title">Duostack Acquired by dotCloud</h1>
<a href="/blog/2011/12/19/canvas/">Canvas, History, LocalStorage and More</a>
</li>
- <li class="post">
- <a href="/blog/2011/11/08/moving-to-octopress/">Moving to Octopress</a>
- </li>
-
</ul>
</section>
View
8 blog/2011/06/02/chromebook-first-dibs/index.html
@@ -192,6 +192,10 @@ <h1 class="entry-title">Chromebook First Dibs</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/2012/01/27/deviceorientation-events/">DeviceOrientation Events</a>
+ </li>
+
+ <li class="post">
<a href="/blog/2012/01/07/widget/">Widget</a>
</li>
@@ -207,10 +211,6 @@ <h1 class="entry-title">Chromebook First Dibs</h1>
<a href="/blog/2011/12/19/canvas/">Canvas, History, LocalStorage and More</a>
</li>
- <li class="post">
- <a href="/blog/2011/11/08/moving-to-octopress/">Moving to Octopress</a>
- </li>
-
</ul>
</section>
View
8 blog/2011/06/07/i-cloud/index.html
@@ -192,6 +192,10 @@ <h1 class="entry-title">I Cloud</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/2012/01/27/deviceorientation-events/">DeviceOrientation Events</a>
+ </li>
+
+ <li class="post">
<a href="/blog/2012/01/07/widget/">Widget</a>
</li>
@@ -207,10 +211,6 @@ <h1 class="entry-title">I Cloud</h1>
<a href="/blog/2011/12/19/canvas/">Canvas, History, LocalStorage and More</a>
</li>
- <li class="post">
- <a href="/blog/2011/11/08/moving-to-octopress/">Moving to Octopress</a>
- </li>
-
</ul>
</section>
View
8 blog/2011/07/08/chrome-dev-tools-as-an-ide/index.html
@@ -192,6 +192,10 @@ <h1 class="entry-title">Chrome Dev Tools as an IDE</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/2012/01/27/deviceorientation-events/">DeviceOrientation Events</a>
+ </li>
+
+ <li class="post">
<a href="/blog/2012/01/07/widget/">Widget</a>
</li>
@@ -207,10 +211,6 @@ <h1 class="entry-title">Chrome Dev Tools as an IDE</h1>
<a href="/blog/2011/12/19/canvas/">Canvas, History, LocalStorage and More</a>
</li>
- <li class="post">
- <a href="/blog/2011/11/08/moving-to-octopress/">Moving to Octopress</a>
- </li>
-
</ul>
</section>
View
8 blog/2011/08/25/github-goes-ace-and-demos/index.html
@@ -193,6 +193,10 @@ <h1 class="entry-title">Github Goes Ace (and Demos)</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/2012/01/27/deviceorientation-events/">DeviceOrientation Events</a>
+ </li>
+
+ <li class="post">
<a href="/blog/2012/01/07/widget/">Widget</a>
</li>
@@ -208,10 +212,6 @@ <h1 class="entry-title">Github Goes Ace (and Demos)</h1>
<a href="/blog/2011/12/19/canvas/">Canvas, History, LocalStorage and More</a>
</li>
- <li class="post">
- <a href="/blog/2011/11/08/moving-to-octopress/">Moving to Octopress</a>
- </li>
-
</ul>
</section>
View
8 blog/2011/09/02/cloud-9-adds-heroku-support/index.html
@@ -192,6 +192,10 @@ <h1 class="entry-title">Cloud 9 Adds Heroku Support</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/2012/01/27/deviceorientation-events/">DeviceOrientation Events</a>
+ </li>
+
+ <li class="post">
<a href="/blog/2012/01/07/widget/">Widget</a>
</li>
@@ -207,10 +211,6 @@ <h1 class="entry-title">Cloud 9 Adds Heroku Support</h1>
<a href="/blog/2011/12/19/canvas/">Canvas, History, LocalStorage and More</a>
</li>
- <li class="post">
- <a href="/blog/2011/11/08/moving-to-octopress/">Moving to Octopress</a>
- </li>
-
</ul>
</section>
View
8 blog/2011/10/22/snakes-in-the-cloud/index.html
@@ -197,6 +197,10 @@ <h1 class="entry-title">Snakes in the Cloud</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/2012/01/27/deviceorientation-events/">DeviceOrientation Events</a>
+ </li>
+
+ <li class="post">
<a href="/blog/2012/01/07/widget/">Widget</a>
</li>
@@ -212,10 +216,6 @@ <h1 class="entry-title">Snakes in the Cloud</h1>
<a href="/blog/2011/12/19/canvas/">Canvas, History, LocalStorage and More</a>
</li>
- <li class="post">
- <a href="/blog/2011/11/08/moving-to-octopress/">Moving to Octopress</a>
- </li>
-
</ul>
</section>
View
8 blog/2011/11/08/moving-to-octopress/index.html
@@ -192,6 +192,10 @@ <h1 class="entry-title">Moving to Octopress</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/2012/01/27/deviceorientation-events/">DeviceOrientation Events</a>
+ </li>
+
+ <li class="post">
<a href="/blog/2012/01/07/widget/">Widget</a>
</li>
@@ -207,10 +211,6 @@ <h1 class="entry-title">Moving to Octopress</h1>
<a href="/blog/2011/12/19/canvas/">Canvas, History, LocalStorage and More</a>
</li>
- <li class="post">
- <a href="/blog/2011/11/08/moving-to-octopress/">Moving to Octopress</a>
- </li>
-
</ul>
</section>
View
8 blog/2011/12/19/canvas/index.html
@@ -350,6 +350,10 @@ <h1 class="entry-title">Canvas, History, LocalStorage and More</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/2012/01/27/deviceorientation-events/">DeviceOrientation Events</a>
+ </li>
+
+ <li class="post">
<a href="/blog/2012/01/07/widget/">Widget</a>
</li>
@@ -365,10 +369,6 @@ <h1 class="entry-title">Canvas, History, LocalStorage and More</h1>
<a href="/blog/2011/12/19/canvas/">Canvas, History, LocalStorage and More</a>
</li>
- <li class="post">
- <a href="/blog/2011/11/08/moving-to-octopress/">Moving to Octopress</a>
- </li>
-
</ul>
</section>
View
8 blog/2011/12/23/book-review-the-tangled-web/index.html
@@ -198,6 +198,10 @@ <h1 class="entry-title">Book Review: The Tangled Web</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/2012/01/27/deviceorientation-events/">DeviceOrientation Events</a>
+ </li>
+
+ <li class="post">
<a href="/blog/2012/01/07/widget/">Widget</a>
</li>
@@ -213,10 +217,6 @@ <h1 class="entry-title">Book Review: The Tangled Web</h1>
<a href="/blog/2011/12/19/canvas/">Canvas, History, LocalStorage and More</a>
</li>
- <li class="post">
- <a href="/blog/2011/11/08/moving-to-octopress/">Moving to Octopress</a>
- </li>
-
</ul>
</section>
View
8 blog/2011/12/28/collision-detection-on-canvas/index.html
@@ -249,6 +249,10 @@ <h1 class="entry-title">Collision Detection on Canvas</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/2012/01/27/deviceorientation-events/">DeviceOrientation Events</a>
+ </li>
+
+ <li class="post">
<a href="/blog/2012/01/07/widget/">Widget</a>
</li>
@@ -264,10 +268,6 @@ <h1 class="entry-title">Collision Detection on Canvas</h1>
<a href="/blog/2011/12/19/canvas/">Canvas, History, LocalStorage and More</a>
</li>
- <li class="post">
- <a href="/blog/2011/11/08/moving-to-octopress/">Moving to Octopress</a>
- </li>
-
</ul>
</section>
View
8 blog/2012/01/07/widget/index.html
@@ -302,6 +302,10 @@ <h1 class="entry-title">Widget</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/2012/01/27/deviceorientation-events/">DeviceOrientation Events</a>
+ </li>
+
+ <li class="post">
<a href="/blog/2012/01/07/widget/">Widget</a>
</li>
@@ -317,10 +321,6 @@ <h1 class="entry-title">Widget</h1>
<a href="/blog/2011/12/19/canvas/">Canvas, History, LocalStorage and More</a>
</li>
- <li class="post">
- <a href="/blog/2011/11/08/moving-to-octopress/">Moving to Octopress</a>
- </li>
-
</ul>
</section>
View
444 blog/2012/01/27/deviceorientation-events/index.html
@@ -0,0 +1,444 @@
+
+<!DOCTYPE html>
+<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
+<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]-->
+<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
+<head>
+ <meta charset="utf-8">
+ <title>DeviceOrientation Events - cgack</title>
+ <meta name="author" content="Cory Gackenheimer">
+
+
+ <meta name="description" content="The Mozilla Dev Derby is a pretty cool thing. Developers from around the world can openly add any demo to the site, and if their demo lines up wit...">
+
+
+ <!-- http://t.co/dKP3o1e -->
+ <meta name="HandheldFriendly" content="True">
+ <meta name="MobileOptimized" content="320">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
+
+ <link rel="canonical" href="http://cgack.github.com/blog/2012/01/27/deviceorientation-events/">
+ <link href="/favicon.png" rel="icon">
+ <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
+ <script src="/javascripts/modernizr-2.0.js"></script>
+ <script src="/javascripts/ender.js"></script>
+ <script src="/javascripts/octopress.js" type="text/javascript"></script>
+ <link href="/atom.xml" rel="alternate" title="cgack" type="application/atom+xml">
+ <!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
+<link href="http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
+<link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
+
+</head>
+
+<body >
+ <header role="banner"><hgroup>
+ <h1><a href="/">cgack</a></h1>
+
+ <h2>Software Physicist | JavaScript Enthusiast</h2>
+
+</hgroup>
+
+</header>
+ <nav role="navigation"><ul class="subscription" data-subscription="rss">
+ <li><a href="/atom.xml" rel="subscribe-rss" title="subscribe via RSS">RSS</a></li>
+
+</ul>
+<form action="http://google.com/search" method="get">
+ <fieldset role="search">
+ <input type="hidden" name="q" value="site:cgack.github.com" />
+ <input class="search" type="text" name="q" results="0" placeholder="Search"/>
+ </fieldset>
+</form>
+<ul class="main-navigation">
+ <li><a href="/blog">Blog</a></li>
+ <li><a href="/blog/archives">Archives</a></li>
+ <li><a href="/Projects">Projects</a></li>
+</ul>
+
+</nav>
+ <div id="main">
+ <div id="content">
+ <div>
+<article class="hentry" role="article">
+
+ <header>
+
+ <h1 class="entry-title">DeviceOrientation Events</h1>
+
+
+ <p class="meta">
+
+
+
+
+
+
+
+
+
+
+<time datetime="2012-01-27T18:04:00-05:00" pubdate data-updated="true" >Jan 27<span>th</span>, 2012</time>
+
+ </p>
+
+ </header>
+
+
+<div class="entry-content"><p>The Mozilla Dev Derby is a pretty cool thing. Developers from around the world can openly add any demo to the site, and if their demo lines up with the prescribed derby for the month, they are automatically entered to win a prize (t-shirt, cool bag, android device). I decided I would enter again for the January 2012 derby based on Orientation. I made two demos.</p>
+
+<h3>catch</h3>
+
+<p>The first one called &#8220;Catch&#8221; which you are attempting to catch a randomly generated ball in the shortest amount of time possible. I have personally found it incredibly addicting to get the perfect game, or at least my best attempt at it and I even wrote the source code. What I learned in developing this app was a couple of things. One, there isn&#8217;t a ton of documentation on the web about the DeviceOrientationEvent. Two, its pretty straightforward to detect the orientation and utilize it to move an object. Here is the basic of my app:</p>
+
+<pre><code> /*orientation stuffs*/
+var initOrientation = function() {
+ var count = 0, gam = 0, bet = 0;
+ if (window.DeviceOrientationEvent) {
+ window.addEventListener("deviceorientation", function(e) {
+ //gamma = left to right
+ //beta = front back
+ //alpha = compass dir
+ count = count + 1;
+ gam += e.gamma;
+ bet += e.beta;
+
+ if (count === 0 || count % 10 === 0) {
+ orientationYo(gam, bet);
+ gam = 0;
+ bet = 0;
+ }
+ }, false);
+ }
+};
+
+//handle orientation
+var orientationYo = function(ltr, ftb) {
+ coor.x = coor.x + ltr;
+ coor.y = coor.y + ftb;
+ if (!gameState.victory &amp;&amp; gameState.playing) {
+ tgt.move(coor);
+ }
+};
+</code></pre>
+
+<p>so that handles the detection of the orientation event, next I simply added the move call to my target (tgt) which looks like this:</p>
+
+<pre><code>var tgt = {
+ isDrawing: false,
+ collided: false,
+ start: function(coordinates) {
+ this.drawIt(coordinates);
+ this.isDrawing = true;
+ },
+ drawIt: function (coordinates) {
+ ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+ ctx.fillStyle = b2_color;
+ ctx.beginPath();
+ ctx.arc(coordinates.x, coordinates.y, 25, 0, Math.PI * 2, true);
+ ctx.fill();
+ },
+ move: function(coordinates) {
+ if (this.isDrawing) {
+ this.checkBounds(coordinates);
+ this.drawIt(coordinates);
+ }
+ },
+ finish: function(coordinates) {
+ this.isDrawing = false;
+ ctx.lineTo(coordinates.x, coordinates.y);
+ ctx.stroke();
+ ctx.closePath();
+ },
+ checkBounds: function(coordinates) {
+ if (coordinates.y &gt; bound.y2) {
+ coordinates.y = bound.y2;
+ } else if (coordinates.y &lt; bound.y1) {
+ coordinates.y = bound.y1;
+ } else if (coordinates.x &gt; bound.x2) {
+ coordinates.x = bound.x2;
+ } else if (coordinates.x &lt; bound.x1) {
+ coordinates.x = bound.x1;
+ }
+ }
+};
+</code></pre>
+
+<p>collision detection is handled by my randomly placed bouncing ball, which detects when the target ball moves into its path:</p>
+
+<pre><code>checkObjectCollisions: function() {
+ var imgData = ctx.getImageData(this.position.x + this.velocity.x1, this.position.y + this.velocity.x2, r, r),
+ pix = imgData.data;
+ for (i = 0, n = pix.length; i &lt; n; i += 4) {
+ if (pix[i] !== 0) {
+ this.collided = true;
+ if (Math.abs(this.velocity.x1) &gt; Math.abs(this.velocity.x2)){
+ this.velocity.x1 = -this.velocity.x1 * drag;
+ } else {
+ this.velocity.x2 = -this.velocity.x2 * drag;
+ }
+ break;
+ } else {
+ this.collided = false;
+ }
+ }
+}
+</code></pre>
+
+<p>I am pretty happy with the game, its clean and works nicely. You can check it out <a href="https://developer.mozilla.org/en-US/demos/detail/catch">here</a></p>
+
+<h3>compass</h3>
+
+<p>The other is a simple web compass where I utilize the DeviceOrientationEvent to get the <a href="https://developer.mozilla.org/en-US/demos/detail/simple-compass">cardinal direction your phone or device is facing</a>. There are two cool (in my opinion) things that happened here. One is that to me it seems the device orientation event as defined states that the DeviceOrientationEvent.alpha ranges from 0 to 360 which to me is a 361 degree circle. The second is that I was able to utilize the offline caching capabilities of the modern web to make the compass available to a device event when not connected to the internet. This is done in minimal lines of code. The HTML and JavaScript are as follows:</p>
+
+<pre><code>&lt;!-- This Source Code Form is subject to the terms of the Mozilla Public
+License, v. 2.0. If a copy of the MPL was not distributed with this file,
+You can obtain one at http://mozilla.org/MPL/2.0/. --&gt;
+
+&lt;!DOCTYPE html&gt;
+&lt;html manifest="compass.appcache"&gt;
+&lt;head&gt;
+&lt;meta charset=utf-8 /&gt;
+&lt;title&gt;Cardinal Direction Compass&lt;/title&gt;
+&lt;style&gt;
+ .pointer {
+ height: 0;
+ width: 0;
+ border-left: 3em solid transparent;
+ border-right: 3em solid transparent;
+ border-bottom: 12em solid black;
+ margin: -10px 0 0 -40px;
+ top: 40%;
+ left: 50%;
+ position: absolute;
+ }
+ .n {
+ top: 20%;
+ left:50%;
+ position:absolute;
+ font:8em Helvetica;
+ margin: 0 0 0 -40px;
+ }
+ &lt;/style&gt;
+ &lt;script src="js/jquery.js"&gt;&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+ &lt;div class="n"&gt;N&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;S&lt;/div&gt;
+ &lt;div class="pointer"&gt;&lt;/div&gt;
+&lt;script&gt;
+ $(document).ready(function() {
+
+ var rotate = function (deg) {
+ $(".n").css({ "-moz-transform": "rotate(0deg)"});
+ $(".n").css({ "-moz-transform": "rotate(" + deg + "deg)"});
+
+ $(".n").css({ "-o-transform": "rotate(0deg)"});
+ $(".n").css({ "-o-transform": "rotate(" + deg + "deg)"});
+
+ $(".n").css({ "-ms-transform": "rotate(0deg)"});
+ $(".n").css({ "-ms-transform": "rotate(" + deg + "deg)"});
+
+ $(".n").css({ "-webkit-transform": "rotate(0deg)"});
+ $(".n").css({ "-webkit-transform": "rotate(" + deg + "deg)"});
+
+ $(".n").css({ "transform": "rotate(0deg)"});
+ $(".n").css({ "transform": "rotate(" + deg + "deg)"});
+ };
+ if (window.DeviceOrientationEvent) {
+ window.addEventListener("deviceorientation", function (e) {
+ rotate(360 - e.alpha);
+ }, false);
+ }
+
+ });
+ &lt;/script&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</code></pre>
+
+<p>The final point I&#8217;d like to make is that due to what I thought was minimal documentation, I participated in a Mozilla Doc Sprint last weekend to update the Documentation surrounding the DeviceOrientationEvent. Doing my part in the web development community was both rewarding and a learning experience. I encourage anyone to try it out as well.</p>
+</div>
+
+
+ <footer>
+ <p class="meta">
+
+
+
+<span class="byline author vcard">Posted by <span class="fn">Cory Gackenheimer</span></span>
+
+
+
+
+
+
+
+
+
+
+
+<time datetime="2012-01-27T18:04:00-05:00" pubdate data-updated="true" >Jan 27<span>th</span>, 2012</time>
+
+
+
+ </p>
+
+ <div class="sharing">
+
+ <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://cgack.github.com/blog/2012/01/27/deviceorientation-events/" data-via="cgack" data-counturl="http://cgack.github.com/blog/2012/01/27/deviceorientation-events/" >Tweet</a>
+
+
+ <div class="g-plusone" data-size="medium"></div>
+
+</div>
+
+
+ </footer>
+ <script type="text/javascript"><!--
+google_ad_client = "ca-pub-9193213214746362";
+/* cgack_small */
+google_ad_slot = "3954454515";
+google_ad_width = 234;
+google_ad_height = 60;
+//-->
+</script>
+<script type="text/javascript"
+src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
+</script>
+</article>
+
+</div>
+
+<aside class="sidebar">
+
+
+<section>
+ <h1>Github Repos</h1>
+ <ul id="gh_repos">
+ <li class="loading">Status updating...</li>
+ </ul>
+
+ <a href="https://github.com/cgack">@cgack</a> on Github
+
+ <script type="text/javascript">
+ $.domReady(function(){
+ if (!window.jXHR){
+ var jxhr = document.createElement('script');
+ jxhr.type = 'text/javascript';
+ jxhr.src = '/javascripts/libs/jXHR.js';
+ var s = document.getElementsByTagName('script')[0];
+ s.parentNode.insertBefore(jxhr, s);
+ }
+
+ github.showRepos({
+ user: 'cgack',
+ count: 0,
+ skip_forks: true,
+ target: '#gh_repos'
+ });
+ });
+ </script>
+ <script src="/javascripts/github.js" type="text/javascript"> </script>
+</section>
+
+
+<section>
+ <h1>Latest Tweets</h1>
+ <ul id="tweets">
+ <li class="loading">Status updating...</li>
+ </ul>
+ <script type="text/javascript">
+ $.domReady(function(){
+ getTwitterFeed("cgack", 4, false);
+ });
+ </script>
+ <script src="/javascripts/twitter.js" type="text/javascript"> </script>
+
+ <a href="http://twitter.com/cgack" class="twitter-follow-button" data-width="208px" data-show-count="false">Follow @cgack</a>
+
+</section>
+
+<section>
+ <h1>Recent Posts</h1>
+ <ul id="recent_posts">
+
+ <li class="post">
+ <a href="/blog/2012/01/27/deviceorientation-events/">DeviceOrientation Events</a>
+ </li>
+
+ <li class="post">
+ <a href="/blog/2012/01/07/widget/">Widget</a>
+ </li>
+
+ <li class="post">
+ <a href="/blog/2011/12/28/collision-detection-on-canvas/">Collision Detection on Canvas</a>
+ </li>
+
+ <li class="post">
+ <a href="/blog/2011/12/23/book-review-the-tangled-web/">Book Review: The Tangled Web</a>
+ </li>
+
+ <li class="post">
+ <a href="/blog/2011/12/19/canvas/">Canvas, History, LocalStorage and More</a>
+ </li>
+
+ </ul>
+</section>
+
+
+
+</aside>
+
+
+ </div>
+ </div>
+ <footer role="contentinfo"><p>
+ Copyright &copy; 2012 - Cory Gackenheimer -
+ <span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
+</p>
+
+</footer>
+
+
+
+
+ <script type="text/javascript">
+ (function() {
+ var script = document.createElement('script'); script.type = 'text/javascript'; script.async = true;
+ script.src = 'https://apis.google.com/js/plusone.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(script, s);
+ })();
+ </script>
+
+
+
+ <script type="text/javascript">
+ (function(){
+ var twitterWidgets = document.createElement('script');
+ twitterWidgets.type = 'text/javascript';
+ twitterWidgets.async = true;
+ twitterWidgets.src = 'http://platform.twitter.com/widgets.js';
+ document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
+ })();
+ </script>
+
+
+
+ <script type="text/javascript">
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-26504938-1']);
+ _gaq.push(['_trackPageview']);
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+ </script>
+
+
+
+
+
+</body>
+</html>
View
20 blog/archives/index.html
@@ -9,7 +9,7 @@
<meta name="author" content="Cory Gackenheimer">
- <meta name="description" content=" Blog Archive 2012 WidgetJan 07 2012 2011 Collision Detection on CanvasDec 28 2011 Book Review: The Tangled WebDec 23 201...">
+ <meta name="description" content=" Blog Archive 2012 DeviceOrientation EventsJan 27 2012 WidgetJan 07 2012 2011 Collision Detection on CanvasDec 28 2011 B...">
<!-- http://t.co/dKP3o1e -->
@@ -76,6 +76,16 @@ <h1 class="entry-title">Blog Archive</h1>
<article>
+<h1><a href="/blog/2012/01/27/deviceorientation-events/">DeviceOrientation Events</a></h1>
+<time datetime="2012-01-27T18:04:00-05:00" pubdate><span class='month'>Jan</span> <span class='day'>27</span> <span class='year'>2012</span></time>
+
+
+</article>
+
+
+
+<article>
+
<h1><a href="/blog/2012/01/07/widget/">Widget</a></h1>
<time datetime="2012-01-07T21:20:00-05:00" pubdate><span class='month'>Jan</span> <span class='day'>07</span> <span class='year'>2012</span></time>
@@ -436,6 +446,10 @@ <h1 class="entry-title">Blog Archive</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/2012/01/27/deviceorientation-events/">DeviceOrientation Events</a>
+ </li>
+
+ <li class="post">
<a href="/blog/2012/01/07/widget/">Widget</a>
</li>
@@ -451,10 +465,6 @@ <h1 class="entry-title">Blog Archive</h1>
<a href="/blog/2011/12/19/canvas/">Canvas, History, LocalStorage and More</a>
</li>
- <li class="post">
- <a href="/blog/2011/11/08/moving-to-octopress/">Moving to Octopress</a>
- </li>
-
</ul>
</section>
View
249 blog/index.html
@@ -9,7 +9,7 @@
<meta name="author" content="Cory Gackenheimer">
- <meta name="description" content="I have lately been looking to become more involed with open source projects and for starters I have been looking at jQuery UI and jQuery Mobile. B...">
+ <meta name="description" content="The Mozilla Dev Derby is a pretty cool thing. Developers from around the world can openly add any demo to the site, and if their demo lines up wit...">
<!-- http://t.co/dKP3o1e -->
@@ -67,6 +67,211 @@
<header>
+ <h1 class="entry-title"><a href="/blog/2012/01/27/deviceorientation-events/">DeviceOrientation Events</a></h1>
+
+
+ <p class="meta">
+
+
+
+
+
+
+
+
+
+
+<time datetime="2012-01-27T18:04:00-05:00" pubdate data-updated="true" >Jan 27<span>th</span>, 2012</time>
+
+ </p>
+
+ </header>
+
+
+ <div class="entry-content"><p>The Mozilla Dev Derby is a pretty cool thing. Developers from around the world can openly add any demo to the site, and if their demo lines up with the prescribed derby for the month, they are automatically entered to win a prize (t-shirt, cool bag, android device). I decided I would enter again for the January 2012 derby based on Orientation. I made two demos.</p>
+
+<h3>catch</h3>
+
+<p>The first one called &#8220;Catch&#8221; which you are attempting to catch a randomly generated ball in the shortest amount of time possible. I have personally found it incredibly addicting to get the perfect game, or at least my best attempt at it and I even wrote the source code. What I learned in developing this app was a couple of things. One, there isn&#8217;t a ton of documentation on the web about the DeviceOrientationEvent. Two, its pretty straightforward to detect the orientation and utilize it to move an object. Here is the basic of my app:</p>
+
+<pre><code> /*orientation stuffs*/
+var initOrientation = function() {
+ var count = 0, gam = 0, bet = 0;
+ if (window.DeviceOrientationEvent) {
+ window.addEventListener("deviceorientation", function(e) {
+ //gamma = left to right
+ //beta = front back
+ //alpha = compass dir
+ count = count + 1;
+ gam += e.gamma;
+ bet += e.beta;
+
+ if (count === 0 || count % 10 === 0) {
+ orientationYo(gam, bet);
+ gam = 0;
+ bet = 0;
+ }
+ }, false);
+ }
+};
+
+//handle orientation
+var orientationYo = function(ltr, ftb) {
+ coor.x = coor.x + ltr;
+ coor.y = coor.y + ftb;
+ if (!gameState.victory &amp;&amp; gameState.playing) {
+ tgt.move(coor);
+ }
+};
+</code></pre>
+
+<p>so that handles the detection of the orientation event, next I simply added the move call to my target (tgt) which looks like this:</p>
+
+<pre><code>var tgt = {
+ isDrawing: false,
+ collided: false,
+ start: function(coordinates) {
+ this.drawIt(coordinates);
+ this.isDrawing = true;
+ },
+ drawIt: function (coordinates) {
+ ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+ ctx.fillStyle = b2_color;
+ ctx.beginPath();
+ ctx.arc(coordinates.x, coordinates.y, 25, 0, Math.PI * 2, true);
+ ctx.fill();
+ },
+ move: function(coordinates) {
+ if (this.isDrawing) {
+ this.checkBounds(coordinates);
+ this.drawIt(coordinates);
+ }
+ },
+ finish: function(coordinates) {
+ this.isDrawing = false;
+ ctx.lineTo(coordinates.x, coordinates.y);
+ ctx.stroke();
+ ctx.closePath();
+ },
+ checkBounds: function(coordinates) {
+ if (coordinates.y &gt; bound.y2) {
+ coordinates.y = bound.y2;
+ } else if (coordinates.y &lt; bound.y1) {
+ coordinates.y = bound.y1;
+ } else if (coordinates.x &gt; bound.x2) {
+ coordinates.x = bound.x2;
+ } else if (coordinates.x &lt; bound.x1) {
+ coordinates.x = bound.x1;
+ }
+ }
+};
+</code></pre>
+
+<p>collision detection is handled by my randomly placed bouncing ball, which detects when the target ball moves into its path:</p>
+
+<pre><code>checkObjectCollisions: function() {
+ var imgData = ctx.getImageData(this.position.x + this.velocity.x1, this.position.y + this.velocity.x2, r, r),
+ pix = imgData.data;
+ for (i = 0, n = pix.length; i &lt; n; i += 4) {
+ if (pix[i] !== 0) {
+ this.collided = true;
+ if (Math.abs(this.velocity.x1) &gt; Math.abs(this.velocity.x2)){
+ this.velocity.x1 = -this.velocity.x1 * drag;
+ } else {
+ this.velocity.x2 = -this.velocity.x2 * drag;
+ }
+ break;
+ } else {
+ this.collided = false;
+ }
+ }
+}
+</code></pre>
+
+<p>I am pretty happy with the game, its clean and works nicely. You can check it out <a href="https://developer.mozilla.org/en-US/demos/detail/catch">here</a></p>
+
+<h3>compass</h3>
+
+<p>The other is a simple web compass where I utilize the DeviceOrientationEvent to get the <a href="https://developer.mozilla.org/en-US/demos/detail/simple-compass">cardinal direction your phone or device is facing</a>. There are two cool (in my opinion) things that happened here. One is that to me it seems the device orientation event as defined states that the DeviceOrientationEvent.alpha ranges from 0 to 360 which to me is a 361 degree circle. The second is that I was able to utilize the offline caching capabilities of the modern web to make the compass available to a device event when not connected to the internet. This is done in minimal lines of code. The HTML and JavaScript are as follows:</p>
+
+<pre><code>&lt;!-- This Source Code Form is subject to the terms of the Mozilla Public
+License, v. 2.0. If a copy of the MPL was not distributed with this file,
+You can obtain one at http://mozilla.org/MPL/2.0/. --&gt;
+
+&lt;!DOCTYPE html&gt;
+&lt;html manifest="compass.appcache"&gt;
+&lt;head&gt;
+&lt;meta charset=utf-8 /&gt;
+&lt;title&gt;Cardinal Direction Compass&lt;/title&gt;
+&lt;style&gt;
+ .pointer {
+ height: 0;
+ width: 0;
+ border-left: 3em solid transparent;
+ border-right: 3em solid transparent;
+ border-bottom: 12em solid black;
+ margin: -10px 0 0 -40px;
+ top: 40%;
+ left: 50%;
+ position: absolute;
+ }
+ .n {
+ top: 20%;
+ left:50%;
+ position:absolute;
+ font:8em Helvetica;
+ margin: 0 0 0 -40px;
+ }
+ &lt;/style&gt;
+ &lt;script src="js/jquery.js"&gt;&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+ &lt;div class="n"&gt;N&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;S&lt;/div&gt;
+ &lt;div class="pointer"&gt;&lt;/div&gt;
+&lt;script&gt;
+ $(document).ready(function() {
+
+ var rotate = function (deg) {
+ $(".n").css({ "-moz-transform": "rotate(0deg)"});
+ $(".n").css({ "-moz-transform": "rotate(" + deg + "deg)"});
+
+ $(".n").css({ "-o-transform": "rotate(0deg)"});
+ $(".n").css({ "-o-transform": "rotate(" + deg + "deg)"});
+
+ $(".n").css({ "-ms-transform": "rotate(0deg)"});
+ $(".n").css({ "-ms-transform": "rotate(" + deg + "deg)"});
+
+ $(".n").css({ "-webkit-transform": "rotate(0deg)"});
+ $(".n").css({ "-webkit-transform": "rotate(" + deg + "deg)"});
+
+ $(".n").css({ "transform": "rotate(0deg)"});
+ $(".n").css({ "transform": "rotate(" + deg + "deg)"});
+ };
+ if (window.DeviceOrientationEvent) {
+ window.addEventListener("deviceorientation", function (e) {
+ rotate(360 - e.alpha);
+ }, false);
+ }
+
+ });
+ &lt;/script&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</code></pre>
+
+<p>The final point I&#8217;d like to make is that due to what I thought was minimal documentation, I participated in a Mozilla Doc Sprint last weekend to update the Documentation surrounding the DeviceOrientationEvent. Doing my part in the web development community was both rewarding and a learning experience. I encourage anyone to try it out as well.</p>
+</div>
+
+
+
+
+ </article>
+
+
+ <article>
+
+ <header>
+
<h1 class="entry-title"><a href="/blog/2012/01/07/widget/">Widget</a></h1>
@@ -705,40 +910,6 @@ <h1 class="entry-title"><a href="/blog/2011/07/08/chrome-dev-tools-as-an-ide/">C
</article>
-
- <article>
-
- <header>
-
- <h1 class="entry-title"><a href="/blog/2011/06/07/i-cloud/">I Cloud</a></h1>
-
-
- <p class="meta">
-
-
-
-
-
-
-
-
-
-
-<time datetime="2011-06-07T00:00:00-04:00" pubdate data-updated="true" >Jun 7<span>th</span>, 2011</time>
-
- </p>
-
- </header>
-
-
- <div class="entry-content">Earlier today Apple announced a revolutionary set of services called <a href="http://www.apple.com/icloud/">iCloud</a>.  I must say it sounds incredible to be able to edit a <a href="http://docs.google.com/">document</a>, sync <a href="http://mail.google.com/">contacts</a>, view my <a href="http://www.google.com/calendar">calendar</a>, listen to <a href="http://music.google.com/">music</a>, read my electronic <a href="http://books.google.com/">books</a>, view my <a href="http://www.google.com/picasa">photos</a>, and access my <a href="http://mail.google.com/">email</a> from any internet enabled device. , It does seem like a great advantage to not have to upload to a cloud music service like the Amazon Cloud Player or Google Music, which iCloud offers via iTunes &#8220;scan and match&#8221; and I&#8217;m certain it will be another service I try in my attempt to find the best cloud experience.   I&#8217;ve been happily clouding for some time now, and hope that Apple does good things in the space.  Happy clouding.<div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7333770831047956364-747140899803548158?l=go-cloud-go.blogspot.com' alt='' /></div>
-</div>
-
-
-
-
- </article>
-
<nav class="pagination">
<div>
@@ -803,6 +974,10 @@ <h1 class="entry-title"><a href="/blog/2011/06/07/i-cloud/">I Cloud</a></h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/2012/01/27/deviceorientation-events/">DeviceOrientation Events</a>
+ </li>
+
+ <li class="post">
<a href="/blog/2012/01/07/widget/">Widget</a>
</li>
@@ -818,10 +993,6 @@ <h1 class="entry-title"><a href="/blog/2011/06/07/i-cloud/">I Cloud</a></h1>
<a href="/blog/2011/12/19/canvas/">Canvas, History, LocalStorage and More</a>
</li>
- <li class="post">
- <a href="/blog/2011/11/08/moving-to-octopress/">Moving to Octopress</a>
- </li>
-
</ul>
</section>
View
70 blog/page/2/index.html
@@ -9,7 +9,7 @@
<meta name="author" content="Cory Gackenheimer">
- <meta name="description" content="Being a test pilot has some perks.  The latest of which is a special invitation to early released Chromebooks via the Gilt Groupe.  Below is the em...">
+ <meta name="description" content="Earlier today Apple announced a revolutionary set of services called iCloud.  I must say it sounds incredible to be able to edit a document, sync c...">
<!-- http://t.co/dKP3o1e -->
@@ -67,7 +67,7 @@
<header>
- <h1 class="entry-title"><a href="/blog/2011/06/02/chromebook-first-dibs/">Chromebook First Dibs</a></h1>
+ <h1 class="entry-title"><a href="/blog/2011/06/07/i-cloud/">I Cloud</a></h1>
<p class="meta">
@@ -81,14 +81,14 @@ <h1 class="entry-title"><a href="/blog/2011/06/02/chromebook-first-dibs/">Chrome
-<time datetime="2011-06-02T00:00:00-04:00" pubdate data-updated="true" >Jun 2<span>nd</span>, 2011</time>
+<time datetime="2011-06-07T00:00:00-04:00" pubdate data-updated="true" >Jun 7<span>th</span>, 2011</time>
</p>
</header>
- <div class="entry-content">Being a test pilot has some perks.  The latest of which is a special invitation to early released Chromebooks via the Gilt Groupe.  Below is the email I received earlier today inviting me to Gilt&#8217;s privileged offering of the newest Chromebook.<br /><br /><blockquote><span class="Apple-style-span" style="font-family:arial, sans-serif;font-size:13px;"></span><br /><table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="20" style="font-family:arial, sans-serif;font-size:13px;width:400px;"><tbody><tr><td colspan="2" style="font-family:arial, sans-serif;margin:0;"></td></tr><tr><td height="60" style="font-family:arial, sans-serif;margin:0;" valign="top" width="50%"><div style="margin:0;"><img border="0" src="http://www.google.com/chromebook/static/images/email/chrome-173x63.png" /></div></td><td align="right" height="60" style="font-family:arial, sans-serif;margin:0;" valign="top" width="50%"><div style="margin:0;"><img border="0" src="http://www.google.com/chromebook/static/images/email/giltgroupe-110x63.png" /></div></td></tr><tr><td colspan="2" height="30" style="font-family:arial, sans-serif;margin:0;" valign="top"><div style="margin:0;"><span style="font-family:Arial, sans;font-size:x-large;"><strong>Be the first to get a Chromebook.</strong></span></div></td></tr><tr><td colspan="2" style="font-family:arial, sans-serif;margin:0;"><div style="margin:0;"><span style="font-family:Arial, sans;font-size:x-small;">Since we announced the Chrome Notebook Pilot Program back in December, we’ve been humbled by the amount of interest that we’ve received from users like you.</span></div><div style="margin:0;"><span style="font-family:Arial, sans;font-size:x-small;">We’re excited about the brand-new Samsung Chromebook that goes on sale on June 15. Fortunately, we’ve managed to get our hands on a few machines a little earlier, and we’d like to make these available to you, our biggest enthusiasts.</span></div><div style="margin:0;"><span style="font-family:Arial, sans;font-size:x-small;">When you buy your Chromebook, you’ll also be getting a limited edition, custom-fit Chrome sleeve designed by Rickshaw so you can carry your new Chromebook in style.</span></div><div style="margin:0;"><span style="font-family:Arial, sans;font-size:x-small;">Our good friends over at Gilt, the premier invitation-only shopping site, have agreed to put these Chromebooks up for sale &#8211; but only for a very limited time.</span></div><div style="margin:0;"><img alt="Samsung Series 5 Chromebook" src="http://www.google.com/chromebook/static/images/email/samsung-series5-300x246.png" /></div><div></div></td></tr></tbody></table></blockquote><div class="blogger-post-footer"><img width='1' height='1' src='' alt='' /></div>
+ <div class="entry-content">Earlier today Apple announced a revolutionary set of services called <a href="http://www.apple.com/icloud/">iCloud</a>.  I must say it sounds incredible to be able to edit a <a href="http://docs.google.com/">document</a>, sync <a href="http://mail.google.com/">contacts</a>, view my <a href="http://www.google.com/calendar">calendar</a>, listen to <a href="http://music.google.com/">music</a>, read my electronic <a href="http://books.google.com/">books</a>, view my <a href="http://www.google.com/picasa">photos</a>, and access my <a href="http://mail.google.com/">email</a> from any internet enabled device. , It does seem like a great advantage to not have to upload to a cloud music service like the Amazon Cloud Player or Google Music, which iCloud offers via iTunes &#8220;scan and match&#8221; and I&#8217;m certain it will be another service I try in my attempt to find the best cloud experience.   I&#8217;ve been happily clouding for some time now, and hope that Apple does good things in the space.  Happy clouding.<div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7333770831047956364-747140899803548158?l=go-cloud-go.blogspot.com' alt='' /></div>
</div>
@@ -101,7 +101,7 @@ <h1 class="entry-title"><a href="/blog/2011/06/02/chromebook-first-dibs/">Chrome
<header>
- <h1 class="entry-title"><a href="/blog/2011/05/25/duostack-acquired-by-dotcloud/">Duostack Acquired by dotCloud</a></h1>
+ <h1 class="entry-title"><a href="/blog/2011/06/02/chromebook-first-dibs/">Chromebook First Dibs</a></h1>
<p class="meta">
@@ -115,14 +115,14 @@ <h1 class="entry-title"><a href="/blog/2011/05/25/duostack-acquired-by-dotcloud/
-<time datetime="2011-05-25T00:00:00-04:00" pubdate data-updated="true" >May 25<span>th</span>, 2011</time>
+<time datetime="2011-06-02T00:00:00-04:00" pubdate data-updated="true" >Jun 2<span>nd</span>, 2011</time>
</p>
</header>
- <div class="entry-content">A few weeks ago I wrote about utilizing the Duostack platform as a service to host a Node.js application on the cloud.  Today Duostack announced they were joining forces with dotCloud, another platform as a service provider.  Here is the announcement as I received it:<br /><br /><blockquote><table border="0" cellpadding="0" cellspacing="0" style="background-color:#3b5998;border-bottom:5px solid rgb(59,89,152);width:500px;"><tbody><tr><td style="color:#96a6c5;font-family:Arial;font-size:24px;font-weight:bold;line-height:100%;text-align:center;vertical-align:middle;padding:0;"> Duostack Announcement - May 24, 2011<br /><br /></td> </tr><tr> <td> </td> </tr></tbody></table><div style="color:#505050;font-family:Arial;font-size:14px;line-height:150%;text-align:left;"> We are pleased to announce that Duostack is joining forces with DotCloud.</div><div style="color:#505050;font-family:Arial;font-size:14px;line-height:150%;text-align:left;">  </div><div style="color:#505050;font-family:Arial;font-size:14px;line-height:150%;text-align:left;"> DotCloud is a Platform as a Service that provides unsurpassed flexibility. Developers have the freedom to assemble their own deployment environment by selecting stack components on DotCloud, instead of being restricted to a limited stack configuration typical of cloud platforms. Supported components include PHP, Ruby, Python, Perl, Java, Node.js, MySQL, Redis, RabbitMQ, Solr, PostgreSQL, and now MongoDB.</div><div style="color:#505050;font-family:Arial;font-size:14px;line-height:150%;text-align:left;">  </div><div style="color:#505050;font-family:Arial;font-size:14px;line-height:150%;text-align:left;"> As part of DotCloud, we will continue to raise the bar for cloud platforms and further our commitment as the best place to deploy apps.</div><div style="color:#505050;font-family:Arial;font-size:14px;line-height:150%;text-align:left;">  </div><div style="color:#505050;font-family:Arial;font-size:14px;line-height:150%;text-align:left;"> See the full acquisition announcement here:</div><div style="color:#505050;font-family:Arial;font-size:14px;line-height:150%;text-align:left;"> <a href="http://duostack.us2.list-manage2.com/track/click?u=54f3e2020e67b0ac9e68cd450&amp;id=06ed5b37c4&amp;e=f3943c1bc8" style="color:#3b5998;font-weight:normal;text-decoration:underline;" target="_blank">DotCloud Acquires Duostack, Expands Footprint in PaaS Market to Further &#8220;One Platform, Any Stack&#8221; Vision</a></div><div style="color:#505050;font-family:Arial;font-size:14px;line-height:150%;text-align:left;">  </div><div style="color:#505050;font-family:Arial;font-size:14px;line-height:150%;text-align:left;"> <strong>What does this mean for apps hosted on Duostack?</strong></div><div style="color:#505050;font-family:Arial;font-size:14px;line-height:150%;text-align:left;"> Current Duostack developers will receive immediate access to DotCloud. Invite codes will be delivered by email.</div><div style="color:#505050;font-family:Arial;font-size:14px;line-height:150%;text-align:left;">  </div><div style="color:#505050;font-family:Arial;font-size:14px;line-height:150%;text-align:left;"> Apps currently hosted on Duostack will remain online through the end of June 2011. We will provide assistance for migrating apps to DotCloud. More information about the transition will be available this week.</div><div style="color:#505050;font-family:Arial;font-size:14px;line-height:150%;text-align:left;">  </div><div style="color:#505050;font-family:Arial;font-size:14px;line-height:150%;text-align:left;"> The Duostack name will be phased out. However, the best parts of the Duostack platform and the feedback from our beta program will be incorporated into DotCloud. This starts today as DotCloud launches support for MongoDB, and there is plenty more to come.</div><div style="color:#505050;font-family:Arial;font-size:14px;line-height:150%;text-align:left;">  </div><div style="color:#505050;font-family:Arial;font-size:14px;line-height:150%;text-align:left;"> We are very happy to welcome you to DotCloud.</div></blockquote><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7333770831047956364-6112486245904442994?l=go-cloud-go.blogspot.com' alt='' /></div>
+ <div class="entry-content">Being a test pilot has some perks.  The latest of which is a special invitation to early released Chromebooks via the Gilt Groupe.  Below is the email I received earlier today inviting me to Gilt&#8217;s privileged offering of the newest Chromebook.<br /><br /><blockquote><span class="Apple-style-span" style="font-family:arial, sans-serif;font-size:13px;"></span><br /><table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="20" style="font-family:arial, sans-serif;font-size:13px;width:400px;"><tbody><tr><td colspan="2" style="font-family:arial, sans-serif;margin:0;"></td></tr><tr><td height="60" style="font-family:arial, sans-serif;margin:0;" valign="top" width="50%"><div style="margin:0;"><img border="0" src="http://www.google.com/chromebook/static/images/email/chrome-173x63.png" /></div></td><td align="right" height="60" style="font-family:arial, sans-serif;margin:0;" valign="top" width="50%"><div style="margin:0;"><img border="0" src="http://www.google.com/chromebook/static/images/email/giltgroupe-110x63.png" /></div></td></tr><tr><td colspan="2" height="30" style="font-family:arial, sans-serif;margin:0;" valign="top"><div style="margin:0;"><span style="font-family:Arial, sans;font-size:x-large;"><strong>Be the first to get a Chromebook.</strong></span></div></td></tr><tr><td colspan="2" style="font-family:arial, sans-serif;margin:0;"><div style="margin:0;"><span style="font-family:Arial, sans;font-size:x-small;">Since we announced the Chrome Notebook Pilot Program back in December, we’ve been humbled by the amount of interest that we’ve received from users like you.</span></div><div style="margin:0;"><span style="font-family:Arial, sans;font-size:x-small;">We’re excited about the brand-new Samsung Chromebook that goes on sale on June 15. Fortunately, we’ve managed to get our hands on a few machines a little earlier, and we’d like to make these available to you, our biggest enthusiasts.</span></div><div style="margin:0;"><span style="font-family:Arial, sans;font-size:x-small;">When you buy your Chromebook, you’ll also be getting a limited edition, custom-fit Chrome sleeve designed by Rickshaw so you can carry your new Chromebook in style.</span></div><div style="margin:0;"><span style="font-family:Arial, sans;font-size:x-small;">Our good friends over at Gilt, the premier invitation-only shopping site, have agreed to put these Chromebooks up for sale &#8211; but only for a very limited time.</span></div><div style="margin:0;"><img alt="Samsung Series 5 Chromebook" src="http://www.google.com/chromebook/static/images/email/samsung-series5-300x246.png" /></div><div></div></td></tr></tbody></table></blockquote><div class="blogger-post-footer"><img width='1' height='1' src='' alt='' /></div>
</div>
@@ -135,7 +135,7 @@ <h1 class="entry-title"><a href="/blog/2011/05/25/duostack-acquired-by-dotcloud/
<header>
- <h1 class="entry-title"><a href="/blog/2011/05/12/chromebooks/">Chromebooks!</a></h1>
+ <h1 class="entry-title"><a href="/blog/2011/05/25/duostack-acquired-by-dotcloud/">Duostack Acquired by dotCloud</a></h1>
<p class="meta">
@@ -149,14 +149,14 @@ <h1 class="entry-title"><a href="/blog/2011/05/12/chromebooks/">Chromebooks!</a>
-<time datetime="2011-05-12T00:00:00-04:00" pubdate data-updated="true" >May 12<span>th</span>, 2011</time>
+<time datetime="2011-05-25T00:00:00-04:00" pubdate data-updated="true" >May 25<span>th</span>, 2011</time>
</p>
</header>
- <div class="entry-content">Yesterday, at Day 2 of Google I/O, it was officially announced that <a href="http://www.google.com/chromebook/#">Chromebooks</a> will be available in retail locations worldwide starting June 15th.  Perhaps even more exciting news was the mention that for Educational institutions (and businesses) these would be available at $20/month/user ($28/mo/user for business) which could be a huge savings (70% over traditional PCs according to the graphic <a href="http://www.google.com/chromebook/#business-education">here</a>). <br /><br />Here is the Keynote from Google I/O day two for those who missed it:<br />[youtube http://www.youtube.com/watch?v=MiYND_zvIc0]<div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7333770831047956364-771895672650425206?l=go-cloud-go.blogspot.com' alt='' /></div>
+ <div class="entry-content">A few weeks ago I wrote about utilizing the Duostack platform as a service to host a Node.js application on the cloud.  Today Duostack announced they were joining forces with dotCloud, another platform as a service provider.  Here is the announcement as I received it:<br /><br /><blockquote><table border="0" cellpadding="0" cellspacing="0" style="background-color:#3b5998;border-bottom:5px solid rgb(59,89,152);width:500px;"><tbody><tr><td style="color:#96a6c5;font-family:Arial;font-size:24px;font-weight:bold;line-height:100%;text-align:center;vertical-align:middle;padding:0;"> Duostack Announcement - May 24, 2011<br /><br /></td> </tr><tr> <td> </td> </tr></tbody></table><div style="color:#505050;font-family:Arial;font-size:14px;line-height:150%;text-align:left;"> We are pleased to announce that Duostack is joining forces with DotCloud.</div><div style="color:#505050;font-family:Arial;font-size:14px;line-height:150%;text-align:left;">  </div><div style="color:#505050;font-family:Arial;font-size:14px;line-height:150%;text-align:left;"> DotCloud is a Platform as a Service that provides unsurpassed flexibility. Developers have the freedom to assemble their own deployment environment by selecting stack components on DotCloud, instead of being restricted to a limited stack configuration typical of cloud platforms. Supported components include PHP, Ruby, Python, Perl, Java, Node.js, MySQL, Redis, RabbitMQ, Solr, PostgreSQL, and now MongoDB.</div><div style="color:#505050;font-family:Arial;font-size:14px;line-height:150%;text-align:left;">  </div><div style="color:#505050;font-family:Arial;font-size:14px;line-height:150%;text-align:left;"> As part of DotCloud, we will continue to raise the bar for cloud platforms and further our commitment as the best place to deploy apps.</div><div style="color:#505050;font-family:Arial;font-size:14px;line-height:150%;text-align:left;">  </div><div style="color:#505050;font-family:Arial;font-size:14px;line-height:150%;text-align:left;"> See the full acquisition announcement here:</div><div style="color:#505050;font-family:Arial;font-size:14px;line-height:150%;text-align:left;"> <a href="http://duostack.us2.list-manage2.com/track/click?u=54f3e2020e67b0ac9e68cd450&amp;id=06ed5b37c4&amp;e=f3943c1bc8" style="color:#3b5998;font-weight:normal;text-decoration:underline;" target="_blank">DotCloud Acquires Duostack, Expands Footprint in PaaS Market to Further &#8220;One Platform, Any Stack&#8221; Vision</a></div><div style="color:#505050;font-family:Arial;font-size:14px;line-height:150%;text-align:left;">  </div><div style="color:#505050;font-family:Arial;font-size:14px;line-height:150%;text-align:left;"> <strong>What does this mean for apps hosted on Duostack?</strong></div><div style="color:#505050;font-family:Arial;font-size:14px;line-height:150%;text-align:left;"> Current Duostack developers will receive immediate access to DotCloud. Invite codes will be delivered by email.</div><div style="color:#505050;font-family:Arial;font-size:14px;line-height:150%;text-align:left;">  </div><div style="color:#505050;font-family:Arial;font-size:14px;line-height:150%;text-align:left;"> Apps currently hosted on Duostack will remain online through the end of June 2011. We will provide assistance for migrating apps to DotCloud. More information about the transition will be available this week.</div><div style="color:#505050;font-family:Arial;font-size:14px;line-height:150%;text-align:left;">  </div><div style="color:#505050;font-family:Arial;font-size:14px;line-height:150%;text-align:left;"> The Duostack name will be phased out. However, the best parts of the Duostack platform and the feedback from our beta program will be incorporated into DotCloud. This starts today as DotCloud launches support for MongoDB, and there is plenty more to come.</div><div style="color:#505050;font-family:Arial;font-size:14px;line-height:150%;text-align:left;">  </div><div style="color:#505050;font-family:Arial;font-size:14px;line-height:150%;text-align:left;"> We are very happy to welcome you to DotCloud.</div></blockquote><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7333770831047956364-6112486245904442994?l=go-cloud-go.blogspot.com' alt='' /></div>
</div>
@@ -169,7 +169,7 @@ <h1 class="entry-title"><a href="/blog/2011/05/12/chromebooks/">Chromebooks!</a>
<header>
- <h1 class="entry-title"><a href="/blog/2011/05/02/duostack-cloud-platform-as-a-service/">Duostack: Cloud Platform as a Service</a></h1>
+ <h1 class="entry-title"><a href="/blog/2011/05/12/chromebooks/">Chromebooks!</a></h1>
<p class="meta">
@@ -183,14 +183,14 @@ <h1 class="entry-title"><a href="/blog/2011/05/02/duostack-cloud-platform-as-a-s
-<time datetime="2011-05-02T00:00:00-04:00" pubdate data-updated="true" >May 2<span>nd</span>, 2011</time>
+<time datetime="2011-05-12T00:00:00-04:00" pubdate data-updated="true" >May 12<span>th</span>, 2011</time>
</p>
</header>
- <div class="entry-content">I have been using and trying many of the all-in-one solutions for web-based development on my Cr-48, but what happens when your favorite editor does not deploy directly to where you want your app to live (<a href="http://c9.io/">cloud9</a>)?  I tried this recently with a <a href="http://nodejs.org/">NodeJS</a> app and a cloud platform (currently in beta) called <a href="https://www.duostack.com/">Duostack</a>.  For my NodeJS app, just as everyone else toying with Node, I <strike>reinvented</strike> reworked the wheel and used Ryan Dahl&#8217;s (creator of NodeJS) basic chat application.  All I did was partition the client to act like it had multiple rooms rather than one group room as in <a href="http://chat.nodejs.org/">the original</a>.  That is not what this post is about. This post is about how easy it is to get a node instance up and running on Duostack.<br /><div><br /></div><div>Duostack is a super easy to use cloud platform as a service for Node and Ruby apps.  Databases that are available by default are MySQL, MongoDB, and Redis (the documentation states external DBs are welcome).  The deployments live on the Amazon EC2 by default, but there is &#8216;cross-cloud reliability&#8217; that will allow for fail over to the Proactive Cloud in case of a <i>possible</i> Amazon outage.  Deployment is as simple as it could get with a cloud platform (well it could get simpler, but its super easy as you can read below). </div><div><br /></div><div>To setup Duostack I had to move away from Chrome OS and into Ubuntu on my Cr-48.  I followed the <a href="http://docs.duostack.com/node/command-line-client#setup">simple steps</a> to get the command line interface installed.  I used the curl method versus the node package manager install and had my Duostack instance configured shortly thereafter.  So now to create a Duostack app.  This is even easier then setup of the command line client, simply type &#8216;duostack create &#8217; and you have it. Duostack uses Git to control deployment so deploying is also a snap, just feed the command &#8216;git push duostack master&#8217; from your git repository, wait a few seconds while Duostack works the deployment magic, and you have your Duostack application deployed.  Mine lives <a href="http://noderooms.duostack.net/">here</a>.  So far I am more than pleased with my Duostack beta access and invite anyone with interest in deploying a Node or Ruby app to a cloud platform to <a href="https://www.duostack.com/signups/new">signup</a> and give it a try.  I have a few other betas for platform as a service solutions to check out, but Duostack got first dibs by granting me beta access before the others.</div><div><br /></div><div><br /></div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7333770831047956364-6022969820459559969?l=go-cloud-go.blogspot.com' alt='' /></div>
+ <div class="entry-content">Yesterday, at Day 2 of Google I/O, it was officially announced that <a href="http://www.google.com/chromebook/#">Chromebooks</a> will be available in retail locations worldwide starting June 15th.  Perhaps even more exciting news was the mention that for Educational institutions (and businesses) these would be available at $20/month/user ($28/mo/user for business) which could be a huge savings (70% over traditional PCs according to the graphic <a href="http://www.google.com/chromebook/#business-education">here</a>). <br /><br />Here is the Keynote from Google I/O day two for those who missed it:<br />[youtube http://www.youtube.com/watch?v=MiYND_zvIc0]<div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7333770831047956364-771895672650425206?l=go-cloud-go.blogspot.com' alt='' /></div>
</div>
@@ -203,7 +203,7 @@ <h1 class="entry-title"><a href="/blog/2011/05/02/duostack-cloud-platform-as-a-s
<header>
- <h1 class="entry-title"><a href="/blog/2011/04/27/changing-old-habits/">Changing Old Habits</a></h1>
+ <h1 class="entry-title"><a href="/blog/2011/05/02/duostack-cloud-platform-as-a-service/">Duostack: Cloud Platform as a Service</a></h1>
<p class="meta">
@@ -217,14 +217,14 @@ <h1 class="entry-title"><a href="/blog/2011/04/27/changing-old-habits/">Changing
-<time datetime="2011-04-27T00:00:00-04:00" pubdate data-updated="true" >Apr 27<span>th</span>, 2011</time>
+<time datetime="2011-05-02T00:00:00-04:00" pubdate data-updated="true" >May 2<span>nd</span>, 2011</time>
</p>
</header>
- <div class="entry-content">I have been doing a lot of development on my Cr-48 lately.  And as I sit here coding away I wanted to note how useful chrome is to me as a developer.  As I have written about previously there is a <a href="http://www.youtube.com/watch?v=_QI8nj6PSPI">plethora</a> of web-based IDEs to develop with in Chrome OS.  So what I have been finding particularly useful regardless of the development environment is something any chrome user (I&#8217;m talking browser now, not OS) can utilize&#8230;the <a href="http://code.google.com/chrome/devtools/docs/overview.html">Chrome Developer Tools</a>.  Before I received my Cr-48, the majority of my browser based debug sessions lived in Firefox with the amazing and powerful tool <a href="http://getfirebug.com/">Firebug</a>, but thanks to Google I was forced to try something new.  I thought nothing else compared to Firebug (I am not going to speak out against Firefox or Firebug as both are spectacular), but as I have familiarized myself with the Chrome tools I find they are just as powerful and robust.  I love how easy it is to inspect an element on the page and edit CSS and JavaScript, check network events, record a timeline, or just drill through local variables in the console.  So if you are like I was, before you move from chrome to some other tool just to step through your JavaScript in the console, stop and give the Chrome Developer Tools a try, you might decide to stay.<div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7333770831047956364-5974311961422618634?l=go-cloud-go.blogspot.com' alt='' /></div>
+ <div class="entry-content">I have been using and trying many of the all-in-one solutions for web-based development on my Cr-48, but what happens when your favorite editor does not deploy directly to where you want your app to live (<a href="http://c9.io/">cloud9</a>)?  I tried this recently with a <a href="http://nodejs.org/">NodeJS</a> app and a cloud platform (currently in beta) called <a href="https://www.duostack.com/">Duostack</a>.  For my NodeJS app, just as everyone else toying with Node, I <strike>reinvented</strike> reworked the wheel and used Ryan Dahl&#8217;s (creator of NodeJS) basic chat application.  All I did was partition the client to act like it had multiple rooms rather than one group room as in <a href="http://chat.nodejs.org/">the original</a>.  That is not what this post is about. This post is about how easy it is to get a node instance up and running on Duostack.<br /><div><br /></div><div>Duostack is a super easy to use cloud platform as a service for Node and Ruby apps.  Databases that are available by default are MySQL, MongoDB, and Redis (the documentation states external DBs are welcome).  The deployments live on the Amazon EC2 by default, but there is &#8216;cross-cloud reliability&#8217; that will allow for fail over to the Proactive Cloud in case of a <i>possible</i> Amazon outage.  Deployment is as simple as it could get with a cloud platform (well it could get simpler, but its super easy as you can read below). </div><div><br /></div><div>To setup Duostack I had to move away from Chrome OS and into Ubuntu on my Cr-48.  I followed the <a href="http://docs.duostack.com/node/command-line-client#setup">simple steps</a> to get the command line interface installed.  I used the curl method versus the node package manager install and had my Duostack instance configured shortly thereafter.  So now to create a Duostack app.  This is even easier then setup of the command line client, simply type &#8216;duostack create &#8217; and you have it. Duostack uses Git to control deployment so deploying is also a snap, just feed the command &#8216;git push duostack master&#8217; from your git repository, wait a few seconds while Duostack works the deployment magic, and you have your Duostack application deployed.  Mine lives <a href="http://noderooms.duostack.net/">here</a>.  So far I am more than pleased with my Duostack beta access and invite anyone with interest in deploying a Node or Ruby app to a cloud platform to <a href="https://www.duostack.com/signups/new">signup</a> and give it a try.  I have a few other betas for platform as a service solutions to check out, but Duostack got first dibs by granting me beta access before the others.</div><div><br /></div><div><br /></div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7333770831047956364-6022969820459559969?l=go-cloud-go.blogspot.com' alt='' /></div>
</div>
@@ -237,7 +237,7 @@ <h1 class="entry-title"><a href="/blog/2011/04/27/changing-old-habits/">Changing
<header>
- <h1 class="entry-title"><a href="/blog/2011/04/16/chrome-os-everyday/">Chrome OS Everyday</a></h1>
+ <h1 class="entry-title"><a href="/blog/2011/04/27/changing-old-habits/">Changing Old Habits</a></h1>
<p class="meta">
@@ -251,14 +251,14 @@ <h1 class="entry-title"><a href="/blog/2011/04/16/chrome-os-everyday/">Chrome OS
-<time datetime="2011-04-16T00:00:00-04:00" pubdate data-updated="true" >Apr 16<span>th</span>, 2011</time>
+<time datetime="2011-04-27T00:00:00-04:00" pubdate data-updated="true" >Apr 27<span>th</span>, 2011</time>
</p>
</header>
- <div class="entry-content">Writing code in the browser with Chrome OS is an important item for me as a developer and there are a growing number of apps available to get your geek on in the cloud, but what else is awesome on Chrome OS?  Tons of things.  I have been <i>almost</i> exclusively utilizing my Cr-48 since early February at home, with the exception of my taxes (chrome beta/dev wasn&#8217;t supported),  some photo management, the time when the developer build rendered the OS impossible to use (hooray for being a test pilot), and the occasional connection to my remote work computer.  So it is promising that I am able to find a replacement for everything I do on a computer in Chrome OS with limited exceptions.  What else?<br /><div><br /></div><div>I recently have been running some rigorous durability tests on my Cr-48, or I guess I should say Preschooler compatibility tests.  I realized this was needed when I arrived at my son&#8217;s daycare to see a dozen preschoolers huddled around a computer clicking things and learning their letters, numbers, and sequences.  At home my son enjoys the stock windows Paint&#8230; a bunch.  What could I use on the Cr-48?  <a href="http://muro.deviantart.com/">deviantArt muro</a> is a cool choice although it took us a bit to get used to the track pad.  Of course the Chrome web store has many options like <a href="https://chrome.google.com/webstore/detail/mcbkbpnkkkipelfledbfocopglifcfmi">Poppit</a>, a balloon popping game which really tests the durability of the track pad.  But one of my favorite apps is <a href="https://chrome.google.com/webstore/detail/jhfhmaajajcjoijfaceafiembkmhcddc">MeeGenius! Children&#8217;s Books</a>, which reads classic children&#8217;s books out loud and highlights the words as it reads.  Our favorite kid friendly site is and has been the <a href="http://pbskids.org/">PBS kids site</a> which as an avid PBS kids family is full of friendly educational games from our most familiar characters. <br /><br />For me, I have recently been utilizing my Cr-48 to read books on <a href="http://books.google.com/">Google Books</a>.  It may not read super easy in direct sunlight, but I can read at night without a light.  There are tons of books, &#8220;over 3 million&#8221;, which is enough to keep any reader busy for a while.  So there is plenty for everyone on Chrome OS, especially for everyday computer needs.</div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7333770831047956364-4704811775203935933?l=go-cloud-go.blogspot.com' alt='' /></div>
+ <div class="entry-content">I have been doing a lot of development on my Cr-48 lately.  And as I sit here coding away I wanted to note how useful chrome is to me as a developer.  As I have written about previously there is a <a href="http://www.youtube.com/watch?v=_QI8nj6PSPI">plethora</a> of web-based IDEs to develop with in Chrome OS.  So what I have been finding particularly useful regardless of the development environment is something any chrome user (I&#8217;m talking browser now, not OS) can utilize&#8230;the <a href="http://code.google.com/chrome/devtools/docs/overview.html">Chrome Developer Tools</a>.  Before I received my Cr-48, the majority of my browser based debug sessions lived in Firefox with the amazing and powerful tool <a href="http://getfirebug.com/">Firebug</a>, but thanks to Google I was forced to try something new.  I thought nothing else compared to Firebug (I am not going to speak out against Firefox or Firebug as both are spectacular), but as I have familiarized myself with the Chrome tools I find they are just as powerful and robust.  I love how easy it is to inspect an element on the page and edit CSS and JavaScript, check network events, record a timeline, or just drill through local variables in the console.  So if you are like I was, before you move from chrome to some other tool just to step through your JavaScript in the console, stop and give the Chrome Developer Tools a try, you might decide to stay.<div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7333770831047956364-5974311961422618634?l=go-cloud-go.blogspot.com' alt='' /></div>
</div>
@@ -271,7 +271,7 @@ <h1 class="entry-title"><a href="/blog/2011/04/16/chrome-os-everyday/">Chrome OS
<header>
- <h1 class="entry-title"><a href="/blog/2011/04/09/shiftedit-web-based-ide/">ShiftEdit Web-based IDE</a></h1>
+ <h1 class="entry-title"><a href="/blog/2011/04/16/chrome-os-everyday/">Chrome OS Everyday</a></h1>