Permalink
Browse files

site update

  • Loading branch information...
1 parent 54e0215 commit 11fc682ff5614347b738fe6978a80d941d4f9e1f @cgack committed Jan 27, 2012
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
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
Oops, something went wrong.

0 comments on commit 11fc682

Please sign in to comment.