diff --git a/.eslintrc.js b/.eslintrc.js
index 22fdce865a3c3aef46d5aaaa19ab33907ca07da1..1ce7980cd4e21656b5b5f492e0a6dd2ec9da3329 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -8,13 +8,6 @@ module.exports = {
   env: {
     browser: true,
   },
-  extends: [
-    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
-    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
-    'plugin:vue/essential', 
-    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
-    'standard'
-  ],
   // required to lint *.vue files
   plugins: [
     'vue'
@@ -24,6 +17,11 @@ module.exports = {
     // allow async-await
     'generator-star-spacing': 'off',
     // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
-  }
+  },
+  extends: [
+    'plugin:vue/essential', 
+    'standard'
+  ]
 }
diff --git a/canvas-grad.html b/canvas-grad.html
new file mode 100644
index 0000000000000000000000000000000000000000..01c867fa985e8e47a950689c65e4cf2b7b88d147
--- /dev/null
+++ b/canvas-grad.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset=utf-8 />
+<title>Canvas Gradient</title>
+<style>
+body {
+  background: #000;
+}
+canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+}
+</style>
+</head>
+<body>
+<canvas height="600" width="600"></canvas>
+<script>
+var canvas = document.getElementsByTagName('canvas')[0],
+    ctx = null,
+    grad = null,
+    body = document.getElementsByTagName('body')[0],
+    color = 255;
+    
+if (canvas.getContext('2d')) {
+  ctx = canvas.getContext('2d');
+  ctx.clearRect(0, 0, 600, 600);
+  ctx.save();
+  // Create radial gradient
+  grad = ctx.createRadialGradient(0,0,0,0,0,600); 
+  grad.addColorStop(0, '#000');
+  grad.addColorStop(1, 'rgb(' + color + ', ' + color + ', ' + color + ')');
+
+  // assign gradients to fill
+  ctx.fillStyle = grad;
+
+  // draw 600x600 fill
+  ctx.fillRect(0,0,600,600);
+  ctx.save();
+  
+  body.onmousemove = function (event) {
+    var width = window.innerWidth, 
+        height = window.innerHeight, 
+        x = event.clientX, 
+        y = event.clientY,
+        rx = 600 * x / width,
+        ry = 600 * y / height;
+        
+    var xc = ~~(256 * x / width);
+    var yc = ~~(256 * y / height);
+
+    grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600); 
+    grad.addColorStop(0, '#000');
+    grad.addColorStop(1, ['rgb(', xc, ', ', (255 - xc), ', ', yc, ')'].join(''));
+    // ctx.restore();
+    ctx.fillStyle = grad;
+    ctx.fillRect(0,0,600,600);
+    // ctx.save();
+  };
+}
+</script>
+<a href="http://github.com/remy/html5demos"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" /></a>
+<script>
+var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
+document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
+</script>
+<script>
+try {
+var pageTracker = _gat._getTracker("UA-1656750-18");
+pageTracker._trackPageview();
+} catch(err) {}</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/canvas.js b/canvas.js
new file mode 100644
index 0000000000000000000000000000000000000000..803af68c645e9d499c8200fb3730f8b79427542b
--- /dev/null
+++ b/canvas.js
@@ -0,0 +1,64 @@
+<title>Canvas</title>
+    <article></article>
+<script>
+
+buildSpinner({ x : 50, y : 50, size : 20, degrees : 30 });
+
+function buildSpinner(data) {
+  
+  var canvas = document.createElement('canvas');
+  canvas.height = 100;
+  canvas.width = 300;
+  document.getElementsByTagName('article')[0].appendChild(canvas);
+  var ctx = canvas.getContext("2d"),
+    i = 0, degrees = data.degrees, loops = 0, degreesList = [];
+    
+  for (i = 0; i < degrees; i++) {
+    degreesList.push(i);
+  }
+  
+  // reset
+  i = 0;
+  
+  // so I can kill it later
+  window.canvasTimer = setInterval(draw, 1000/degrees);  
+
+  function reset() {
+    ctx.clearRect(0,0,100,100); // clear canvas
+    
+    var left = degreesList.slice(0, 1);
+    var right = degreesList.slice(1, degreesList.length);
+    degreesList = right.concat(left);
+  }
+  
+  function draw() {
+    var c, s, e;
+
+    var d = 0;
+
+    if (i == 0) {
+      reset();
+    }
+
+    ctx.save();
+
+    d = degreesList[i];
+    c = Math.floor(255/degrees*i);
+    ctx.strokeStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')';
+    ctx.lineWidth = data.size;
+    ctx.beginPath();
+    s = Math.floor(360/degrees*(d));
+    e = Math.floor(360/degrees*(d+1)) - 1;
+
+    ctx.arc(data.x, data.y, data.size, (Math.PI/180)*s, (Math.PI/180)*e, false);
+    ctx.stroke();
+
+    ctx.restore();
+
+    i++;
+    if (i >= degrees) {
+      i = 0;
+    }
+  }  
+}
+</script>
\ No newline at end of file
diff --git a/classlist.html b/classlist.html
new file mode 100644
index 0000000000000000000000000000000000000000..769218e0a546b7fd2d71fcfa8c22a927072a4eba
--- /dev/null
+++ b/classlist.html
@@ -0,0 +1,67 @@
+<title>Simple classList manipulation</title>
+<style>
+#classListTest {
+  padding: 5px;
+  border: 1px solid #ccc;
+  padding-bottom: 20px;
+  position: relative;
+}
+
+#classListTest:after {
+  content: 'class: ' attr(class);
+  position: absolute;
+  background: #c00;
+  bottom: 0;
+  right: 0;
+  padding: 5px;
+  color: #fff;
+}
+
+.big { font-size: 30px; line-height: 30px; }
+.bold { font-weight: bold; }
+.pink { background: #FF5E99; color: #fff; }
+
+#status {
+  background: #c00;
+}
+</style>
+<article>
+  <p>Clicking the buttons below will toggle the class on the <em>bacon ipsum</em> text below, assigning the class with the same name (styles seen below). This is done using the new <code>classList</code> API.</p>
+  <p id="status">Not supported :(</p> 
+  <pre><code>&lt;style&gt; 
+  .big { font-size: 30px; }
+  .bold { font-weight: bold; }
+  .pink { background: #FF5E99; color: #fff; }
+&lt;/style&gt;</code></pre>
+    <p id="classListTest">Bacon ipsum dolor sit amet pancetta bresaola tenderloin, swine meatball tongue ham boudin t-bone ribeye jerky sausage. Pork loin cow shankle drumstick tri-tip, chicken venison strip steak.</p>
+    <p id="toggleClass">Toggle a class: 
+      <input type="button" value="big" />
+      <input type="button" value="bold" />
+      <input type="button" value="pink" />
+    </p>
+</article>
+<script>
+// checkfor support
+
+var toggle = document.getElementById('toggleClass'),
+    test = document.getElementById('classListTest');
+
+if (toggle.classList) {
+  var supported = document.getElementById('status');
+  supported.parentNode.removeChild(supported);
+  // bit of event delegation otherwise we're binding to each input
+  toggle.addEventListener('click', function (event) {
+    if (event.target.nodeName == 'INPUT') {
+      test.classList.toggle(event.target.value);
+    }
+  }, false);
+} else {
+  // not supported
+}
+
+
+
+
+
+
+</script>
\ No newline at end of file
diff --git a/test00/.keep b/test00/.keep
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
