hoorayimhelping · September 19, 2015 14:01
diff --git a/foo.diff b/foo.diff
 diff --git a/_includes/2015-09-20/hello_world.html b/_includes/2015-09-20/hello_world.html
 new file mode 100644
 index 0000000..991edd0
 --- /dev/null
 +++ b/_includes/2015-09-20/hello_world.html
 @@ -0,0 +1,34 @@
 +<div id="container" style="border: 1px dodgerblue solid; max-height: 200px;">
 +  <canvas id="canvas">Sorry, this little bit of content requires a modern browser</canvas>
 +</div>
 +<script type="text/javascript">
 +    var pixel_ratio = 2;
 +
 +    var initCanvas = function($canvas, $container) {
 +        var border_width = parseInt(getComputedStyle($container)['border-left-width'], 10) + parseInt(getComputedStyle($container)['border-right-width'], 10);
 +
 +        $canvas.width = ($container.offsetWidth - border_width) * pixel_ratio;
 +        $canvas.height = ($container.offsetHeight - border_width) * pixel_ratio;
 +
 +        $canvas.style.width = $container.offsetWidth;
 +        $canvas.style.height = $container.offsetHeight;
 +    };
 +
 +    var drawText = function(context) {
 +        context.font = "20px helvetica";
 +        context.fillStyle = "#000";
 +        context.fillText("Hello, World!", $canvas.width / (2.5 * pixel_ratio), $canvas.height / (1.5 * pixel_ratio));
 +    };
 +
 +    var $canvas = document.getElementById('canvas');
 +    var $container = document.getElementById('container');
 +    var context = $canvas.getContext('2d');
 +
 +    initCanvas($canvas, $container);
 +    drawText(context);
 +
 +    window.addEventListener('resize', function(event) {
 +        initCanvas($canvas, $container);
 +        drawText(context);
 +    }, false);
 +</script>
 diff --git a/_posts/2015-09-20-animation-with-javascript.md b/_posts/2015-09-20-animation-with-javascript.md
 new file mode 100644
 index 0000000..0ec906e
 --- /dev/null
 +++ b/_posts/2015-09-20-animation-with-javascript.md
 @@ -0,0 +1,71 @@
 +---
 +layout: post
 +title: Animation With JavaScript
 +---
 +
 +I've been fascinated with animation and motion and their interaction with time. This post will explore a few basic animation concepts using the HTML5 `canvas` element and JavaScript. A basic understanding of JavaScript and some familiarity with how to use Canvas is helpful for this post but not necessary.
 +
 +First things first, create a canvas element and get a handle to a 2d rendering context:
 +
 +```html
 +<div id="container" style="border: 1px dodgerblue solid">
 +  <canvas id="canvas" width="400" height="400">Sorry, this little bit of content requires a modern browser</canvas>
 +</div>
 +```
 +
 +```javascript
 +var $canvas = document.getElementById('canvas');
 +var context = canvas.getContext('2d');
 +```
 +
 +And just to test that everything works out:
 +
 +```javascript
 +context.font = "20px helvetica";
 +context.fillStyle = "#000";
 +context.fillText("Hello, World!", 270, 200);
 +```
 +
 +{% include 2015-09-20/hello_world.html %}
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +### Built on Poole
 +
 +Poole is the Jekyll Butler, serving as an upstanding and effective foundation for Jekyll themes by [@mdo](https://twitter.com/mdo). Poole, and every theme built on it (like Lanyon here) includes the following:
 +
 +* Complete Jekyll setup included (layouts, config, [404](/404), [RSS feed](/atom.xml), posts, and [example page](/about))
 +* Mobile friendly design and development
 +* Easily scalable text and component sizing with `rem` units in the CSS
 +* Support for a wide gamut of HTML elements
 +* Related posts (time-based, because Jekyll) below each post
 +* Syntax highlighting, courtesy Pygments (the Python-based code snippet highlighter)
 +
 +### Lanyon features
 +
 +In addition to the features of Poole, Lanyon adds the following:
 +
 +* Toggleable sliding sidebar (built with only CSS) via **☰** link in top corner
 +* Sidebar includes support for textual modules and a dynamically generated navigation with active link support
 +* Two orientations for content and sidebar, default (left sidebar) and [reverse](https://github.com/poole/lanyon#reverse-layout) (right sidebar), available via `<body>` classes
 +* [Eight optional color schemes](https://github.com/poole/lanyon#themes), available via `<body>` classes
 +
 +[Head to the readme](https://github.com/poole/lanyon#readme) to learn more.
 +
 +### Browser support
 +
 +Lanyon is by preference a forward-thinking project. In addition to the latest versions of Chrome, Safari (mobile and desktop), and Firefox, it is only compatible with Internet Explorer 9 and above.
 +
 +### Download
 +
 +Lanyon is developed on and hosted with GitHub. Head to the <a href="https://github.com/poole/lanyon">GitHub repository</a> for downloads, bug reports, and features requests.
 +
 +Thanks!
 diff --git a/_posts/canas-draft.md b/_posts/canas-draft.md
 new file mode 100644
 index 0000000..45f5f22
 --- /dev/null
 +++ b/_posts/canas-draft.md
 @@ -0,0 +1,3 @@
 +**It's a good idea to explicitly specify width and height attributes on your canvas.** These attributes will be used to set the dimensions of the canvas you're drawing to and will keep the content in the canvas sharp and unscaled. In general, it's preferable to set canvas width and attributes first, then canvas CSS attributes second.
 +
 +Next, in JavaScript, get a reference to the canvas element (I conventionally use `$` at the front of variable names to denote DOM or jQuery elements, feel free to skip this convention if it's not your thing) and then get a 2d rendering context.
	diff --git a/_includes/2015-09-20/hello_world.html b/_includes/2015-09-20/hello_world.html
	new file mode 100644
	index 0000000..991edd0
	--- /dev/null
	+++ b/_includes/2015-09-20/hello_world.html
	@@ -0,0 +1,34 @@
	+<div id="container" style="border: 1px dodgerblue solid; max-height: 200px;">
	+ <canvas id="canvas">Sorry, this little bit of content requires a modern browser</canvas>
	+</div>
	+<script type="text/javascript">
	+ var pixel_ratio = 2;
	+
	+ var initCanvas = function($canvas, $container) {
	+ var border_width = parseInt(getComputedStyle($container)['border-left-width'], 10) + parseInt(getComputedStyle($container)['border-right-width'], 10);
	+
	+ $canvas.width = ($container.offsetWidth - border_width) * pixel_ratio;
	+ $canvas.height = ($container.offsetHeight - border_width) * pixel_ratio;
	+
	+ $canvas.style.width = $container.offsetWidth;
	+ $canvas.style.height = $container.offsetHeight;
	+ };
	+
	+ var drawText = function(context) {
	+ context.font = "20px helvetica";
	+ context.fillStyle = "#000";
	+ context.fillText("Hello, World!", $canvas.width / (2.5 * pixel_ratio), $canvas.height / (1.5 * pixel_ratio));
	+ };
	+
	+ var $canvas = document.getElementById('canvas');
	+ var $container = document.getElementById('container');
	+ var context = $canvas.getContext('2d');
	+
	+ initCanvas($canvas, $container);
	+ drawText(context);
	+
	+ window.addEventListener('resize', function(event) {
	+ initCanvas($canvas, $container);
	+ drawText(context);
	+ }, false);
	+</script>
	diff --git a/_posts/2015-09-20-animation-with-javascript.md b/_posts/2015-09-20-animation-with-javascript.md
	new file mode 100644
	index 0000000..0ec906e
	--- /dev/null
	+++ b/_posts/2015-09-20-animation-with-javascript.md
	@@ -0,0 +1,71 @@
	+---
	+layout: post
	+title: Animation With JavaScript
	+---
	+
	+I've been fascinated with animation and motion and their interaction with time. This post will explore a few basic animation concepts using the HTML5 `canvas` element and JavaScript. A basic understanding of JavaScript and some familiarity with how to use Canvas is helpful for this post but not necessary.
	+
	+First things first, create a canvas element and get a handle to a 2d rendering context:
	+
	+```html
	+<div id="container" style="border: 1px dodgerblue solid">
	+ <canvas id="canvas" width="400" height="400">Sorry, this little bit of content requires a modern browser</canvas>
	+</div>
	+```
	+
	+```javascript
	+var $canvas = document.getElementById('canvas');
	+var context = canvas.getContext('2d');
	+```
	+
	+And just to test that everything works out:
	+
	+```javascript
	+context.font = "20px helvetica";
	+context.fillStyle = "#000";
	+context.fillText("Hello, World!", 270, 200);
	+```
	+
	+{% include 2015-09-20/hello_world.html %}
	+
	+
	+
	+
	+
	+
	+
	+
	+
	+
	+
	+### Built on Poole
	+
	+Poole is the Jekyll Butler, serving as an upstanding and effective foundation for Jekyll themes by [@mdo](https://twitter.com/mdo). Poole, and every theme built on it (like Lanyon here) includes the following:
	+
	+* Complete Jekyll setup included (layouts, config, [404](/404), [RSS feed](/atom.xml), posts, and [example page](/about))
	+* Mobile friendly design and development
	+* Easily scalable text and component sizing with `rem` units in the CSS
	+* Support for a wide gamut of HTML elements
	+* Related posts (time-based, because Jekyll) below each post
	+* Syntax highlighting, courtesy Pygments (the Python-based code snippet highlighter)
	+
	+### Lanyon features
	+
	+In addition to the features of Poole, Lanyon adds the following:
	+
	+* Toggleable sliding sidebar (built with only CSS) via ☰ link in top corner
	+* Sidebar includes support for textual modules and a dynamically generated navigation with active link support
	+* Two orientations for content and sidebar, default (left sidebar) and [reverse](https://github.com/poole/lanyon#reverse-layout) (right sidebar), available via `<body>` classes
	+* [Eight optional color schemes](https://github.com/poole/lanyon#themes), available via `<body>` classes
	+
	+[Head to the readme](https://github.com/poole/lanyon#readme) to learn more.
	+
	+### Browser support
	+
	+Lanyon is by preference a forward-thinking project. In addition to the latest versions of Chrome, Safari (mobile and desktop), and Firefox, it is only compatible with Internet Explorer 9 and above.
	+
	+### Download
	+
	+Lanyon is developed on and hosted with GitHub. Head to the <a href="https://github.com/poole/lanyon">GitHub repository</a> for downloads, bug reports, and features requests.
	+
	+Thanks!
	diff --git a/_posts/canas-draft.md b/_posts/canas-draft.md
	new file mode 100644
	index 0000000..45f5f22
	--- /dev/null
	+++ b/_posts/canas-draft.md
	@@ -0,0 +1,3 @@
	+It's a good idea to explicitly specify width and height attributes on your canvas. These attributes will be used to set the dimensions of the canvas you're drawing to and will keep the content in the canvas sharp and unscaled. In general, it's preferable to set canvas width and attributes first, then canvas CSS attributes second.
	+
	+Next, in JavaScript, get a reference to the canvas element (I conventionally use `$` at the front of variable names to denote DOM or jQuery elements, feel free to skip this convention if it's not your thing) and then get a 2d rendering context.