Extra credit

Author: chibicode

src/pages/refactor.tsx

@@ -11,8 +11,7 @@ import {
   UlLi,
   ForegroundHighlight,
   A,
-  Code,
-  Hr
+  Code
 } from 'src/components/ContentTags'
 import * as snippets from 'src/lib/snippets'
 import TwitterLink from 'src/components/TwitterLink'
@@ -26,6 +25,7 @@ import InternalLink from 'src/components/InternalLink'
 import { articlesData } from 'src/lib/articles'
 import { baseUrl } from 'src/lib/meta'
 import { SourceAvailableText } from 'src/components/GitHubButton'
+import RunButtonText from 'src/components/RunButtonText'
 
 const techniques = [
   {
@@ -303,9 +303,18 @@ const Page = () => (
                 <Code>letter-spacing</Code> to fit more characters.
               </UlLi>
             </Ul>
-            <Hr />
             <P>
-              <strong>Why is this necessary?</strong>{' '}
+              <strong>Extra Credit:</strong>{' '}
+              <Highlight>
+                It’d be ideal if you can easily <strong>run (or test)</strong>{' '}
+                code examples on mobile.
+              </Highlight>{' '}
+              My tutorials support this—you can run code by pressing{' '}
+              <RunButtonText /> on mobile or desktop.
+            </P>
+            <CodeBlock snippet={snippets.lplh} result="3" />
+            <P>
+              <strong>Now, why is mobile reading experience important?</strong>{' '}
               <Highlight>
                 Because many people <em>actually</em> read coding tutorials on
                 their phone.
@@ -455,7 +464,6 @@ const Page = () => (
               be solved by generics…without using generics. And fail. Then, I
               use generics to successfully solve the problem.
             </P>
-            <Hr />
             <P>
               In a way, this is similar to{' '}
               <strong>test driven development (TDD)</strong>. In TDD, you write