Update blog

beaufortfrancois · Dec 7, 2018 · f5e74ce · f5e74ce
1 parent a6cfa60
commit f5e74ce
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 5 deletions.
diff --git a/blog/index.html b/blog/index.html
@@ -1,9 +1,25 @@
 <meta name="viewport" content="width=device-width">
 <style>
   html {
-    max-width: 800px;
+    max-width: 640px;
     margin: 0 auto;
   }
+  body {
+    margin: 0 12px;
+  }
+  header {
+    position: fixed;
+    height: 1px;
+    background-color: #8ac3f1;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 800px;
+    margin: 0 auto;
+  }
+  article {
+    margin-top: 42px;
+  }
   code {
     background: #F0F0F0;
     display: block;
@@ -16,9 +32,9 @@
 </style>
 <!--<a id="anchor" href="sample2.html">Another article</a>-->
 <body>
-<header>Francois Beaufort wrote</header>
+<header></header>
 <article>
-  <h1 id="title">Machine Learning Explained in Three Easy Steps</h1>
+  <h1 id="title">&lt;canvas> and &lt;video></h1>
   <canvas id="canvas"></canvas>
   <section id="article"></section>
 </article>
@@ -55,6 +71,7 @@ <h1 id="title">Machine Learning Explained in Three Easy Steps</h1>
     canvas.hidden = false;
   }, 200);
   const response = await fetch(url);
+/*
   const textDecoder = new TextDecoder();
   for await (const chunk of streamAsyncIterator(response.body)) {
     await setTimeoutAsync(500);
@@ -66,7 +83,7 @@ <h1 id="title">Machine Learning Explained in Three Easy Steps</h1>
     }
     article.innerHTML += textDecoder.decode(chunk, { stream : true });
   }
-/*
+*/
   const text = await response.text();
   clearInterval(id);
   article.animate([
@@ -79,7 +96,6 @@ <h1 id="title">Machine Learning Explained in Three Easy Steps</h1>
   article.innerHTML = text;
   canvas.hidden = true;
   highlightCode();
-*/
 }
 
 async function* streamAsyncIterator(stream) {

diff --git a/blog/sample.html b/blog/sample.html
@@ -3,6 +3,7 @@
     You’ve probably heard the term “machine learning” and how it’s <a href="https://www.nytimes.com/2016/12/14/magazine/the-great-ai-awakening.html">changing everything</a>
     . In this article, I’m going to explain the fundamental concept behind machine learning. 
 </p>
+
 <p>There will be no math or programming. There will be no scary diagrams. You won’t need a background in computer science or engineering. All you need is the ability to read and think, which you obviously already have if you’ve made it this far. Well done on that reading and thinking! Onward…</p>
 <h3 id="foxes-and-dogs">Foxes and Dogs</h3>
 <p>There’s a nice sequence of words which is famous for containing every letter in the english language in one short sentence. Have you seen it?</p>
@@ -26,6 +27,17 @@ <h3 id="foxes-and-dogs">Foxes and Dogs</h3>
     <li>Purpose or qualifier</li>
 </ol>
 <p>Since quick is a quality/opinion and brown is a color, “quick brown” is the proper order, not “brown quick”. To give an extreme example, this is fine: “one really big old antique American car” but perturb that sequence of adjectives in any way you like and the results sound very wrong.</p>
+<pre>
+  <code class="javascript">
+
+// Stream canvas to a video.
+video.srcObject = canvas.captureStream();
+// Play automatically.
+video.muted = true;
+video.play();
+
+  </code>
+</pre>
 <p>
     The amazing thing about this sequence is that nearly every native english speaker knows it, but <strong>very few people know they know it</strong>
     . In my audience of 200 professional CS and IT people, not a single person could tell me this sequence.