chibicode · chibicode · Oct 30, 2019 · Oct 29, 2019 · Oct 29, 2019 · Oct 29, 2019
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 > A Wild Introduction to Computer Science
 
-![Y Combinator for Non-programmers](public/static/images/og-image-en.png)
+[![Y Combinator for Non-programmers](public/static/images/og-image-en@2x.png)](https://ycombinator.chibicode.com/)
 
 This is the repository for the website: **[Y Combinator for Non-programmers](https://ycombinator.chibicode.com/)** by Shu Uesugi.
 
@@ -18,9 +18,8 @@ yarn dev:en
 
 ## Stack
 
-- [TypeScript](https://www.typescriptlang.org/), [React](https://reactjs.org/), and [Next.js](https://nextjs.org/).
+- [TypeScript](https://www.typescriptlang.org/), [React](https://reactjs.org/), [Emotion](https://emotion.sh/) and [Next.js](https://nextjs.org/).
 - [Netlify](https://netlify.com/) for deployment
-- No Google Analytics!
 
 ## License & Credits
 

diff --git a/public/static/images/og-image-en@2x.png b/public/static/images/og-image-en@2x.png
diff --git a/scripts/lib/runnerConfigs.ts b/scripts/lib/runnerConfigs.ts
@@ -17,6 +17,13 @@ export const qxob: ExpressionRunnerShorthandConfig = {
   showPriorities: true
 }
 
+export const bcgp: ExpressionRunnerShorthandConfig = {
+  runner: 'simple',
+  initialExpressionContainer: initialExpressionContainers.pisd,
+  initialState: 'showFuncUnbound',
+  showPriorities: true
+}
+
 export const pbhg: ExpressionRunnerShorthandConfig = {
   runner: 'simple',
   initialExpressionContainer: initialExpressionContainers.pisd,

diff --git a/src/components/ContentTags/Inline.tsx b/src/components/ContentTags/Inline.tsx
@@ -27,7 +27,7 @@ const HighlightContext = React.createContext<HighlightContextProps>(
 
 const mix = (color: CardProps['color'], base: string) =>
   Color(base)
-    .mix(Color(backgroundColor(color)), 0.4)
+    .mix(Color(backgroundColor(color)), color === 'grey' ? 0.25 : 0.4)
     .hsl()
     .string()
 

diff --git a/src/components/EpisodeCardList.tsx b/src/components/EpisodeCardList.tsx
@@ -155,6 +155,14 @@ const EpisodeCardList = ({
                         content: (
                           <>
                             <H args={{ name: 'aboutMe' }} />
+                            {episodeNumber <= numEpisodesExceptFirstAndLast && (
+                              <>
+                                <P>
+                                  To go to the next page, press this button:
+                                </P>
+                                <NextLessonButton />
+                              </>
+                            )}
                           </>
                         )
                       }

diff --git a/src/components/EpisodePageFooter.tsx b/src/components/EpisodePageFooter.tsx
@@ -5,7 +5,7 @@ import H from 'src/components/H'
 import Emoji from 'src/components/Emoji'
 import { spaces, colors, fontSizes } from 'src/lib/theme'
 import locale from 'src/lib/locale'
-import { githubRepo } from 'src/lib/meta'
+import { githubRepo, jpBaseUrl } from 'src/lib/meta'
 
 const linkClasses = css`
   text-decoration: none;
@@ -30,7 +30,7 @@ const EpisodePageFooter = () => {
         font-size: ${fontSizes(0.7)};
       `}
     >
-      {locale === 'jp' && (
+      {locale === 'jp' ? (
         <>
           <ExternalLink
             href={`${githubRepo}/tree/master/docs/privacy-policy-jp.md`}
@@ -40,6 +40,13 @@ const EpisodePageFooter = () => {
           </ExternalLink>{' '}
           &middot;{' '}
         </>
+      ) : (
+        <>
+          <ExternalLink href={jpBaseUrl} css={linkClasses}>
+            Japanese Site (日本語版)
+          </ExternalLink>{' '}
+          &middot;{' '}
+        </>
       )}
       <ExternalLink
         href={`${githubRepo}/tree/master/README${

diff --git a/src/components/GlobalStyles.tsx b/src/components/GlobalStyles.tsx
@@ -22,7 +22,7 @@ const GlobalStyles = ({ children }: { children: React.ReactNode }) => {
             html {
               font-size: 18px;
               color: ${colors('grey900')};
-              line-height: ${lineHeights(1.5)};
+              line-height: ${lineHeights(1.55)};
             }
 
             body {

diff --git a/src/components/H.tsx b/src/components/H.tsx
@@ -38,7 +38,7 @@ import EmojiNumber from 'src/components/EmojiNumber'
 import TwitterEmbed from 'src/components/TwitterEmbed'
 import { shareId, shareVisible } from 'src/lib/twitter'
 import { dateString, dateSchemaString } from 'src/lib/date'
-import { githubRepo, jpBaseUrl } from 'src/lib/meta'
+import { githubRepo, jpBaseUrl, enBaseUrl } from 'src/lib/meta'
 import CustomEmoji from 'src/components/CustomEmoji'
 import InlinePrioritiesLabel from 'src/components/InlinePrioritiesLabel'
 import { VariableNames } from 'src/types/VariableNames'
@@ -1206,9 +1206,9 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
             <br />
             <Bold>ソースコード:</Bold>{' '}
             <ExternalLink href={githubRepo}>GitHubで公開中</ExternalLink>
-            {/*<br />
+            <br />
             <Bold>英語版:</Bold>{' '}
-            <ExternalLink href={enBaseUrl}>英語版はこちら</ExternalLink>*/}
+            <ExternalLink href={enBaseUrl}>英語版はこちら</ExternalLink>
             {args.includeTwitter && (
               <>
                 <br />
@@ -1829,30 +1829,47 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
                   Twitter: <Bold>@chibicode</Bold>
                 </Highlight>
               </ExternalLink>
-              . I’d also appreciate it if you could read until the end of this
-              course before emailing me - let me know what you think!
+              .
             </P>
             <Ul>
               <UlLi>
                 <Bold>I’m mainly looking for</Bold>{' '}
                 <Highlight>a senior engineering position</Highlight>. But I’m
-                also interested in product-leaning positions (Product design,
+                also interested in product-leaning positions (product design,
                 PM, DevRel, etc.) for developer-facing products. I’m better at
                 front-end than back-end, but can do both.
               </UlLi>
               <UlLi>
                 <Bold>Location preference:</Bold>{' '}
                 <HighlightBold>Remote</HighlightBold> would be ideal. 2nd
                 preference is <Highlight>Los Angeles</Highlight>. I’m currently
-                in SF Bay Area, but my wife and I are looking to relocate to LA
-                or other more affordable places.
+                in SF Bay Area (3rd preference), but my wife and I are looking
+                to relocate to LA or other more affordable places.
+              </UlLi>
+              <UlLi>
+                <Bold>Other preferences:</Bold> My last full-time job was in
+                edtech/media, but{' '}
+                <Highlight>I’m looking at a wide range of areas</Highlight>. I
+                like companies that think machine learning is the new SQL (see{' '}
+                <ExternalLink href="https://www.ben-evans.com/benedictevans/2019/10/4/machine-learning-deployment">
+                  this article
+                </ExternalLink>{' '}
+                and{' '}
+                <ExternalLink href="https://www.ben-evans.com/benedictevans/2018/06/22/ways-to-think-about-machine-learning-8nefy">
+                  this article
+                </ExternalLink>{' '}
+                by Benedict Evans). I don’t like whiteboard interviews, but{' '}
+                <Italic>
+                  if you ask me to implement Y Combinator on a whiteboard
+                </Italic>
+                , I think I’ll do well. <Emoji>😉</Emoji>
               </UlLi>
             </Ul>
             <Hr />
             <P>More about me:</P>
             <Ul>
               <UlLi>
-                <Bold>Work experience (2010-2017):</Bold>{' '}
+                <Bold>Work experience (pre-2017):</Bold>{' '}
                 <Highlight>
                   I worked as a lead full-stack (Rails) developer at{' '}
                   <ExternalLink href="https://www.edsurge.com/">
@@ -1863,7 +1880,9 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
                 . I was the first engineering hire and was involved in
                 architecting pretty much all of the projects. Before that, I was
                 a product designer at Quora (2011-2012) and an engineer at
-                Palantir (2010-2011).
+                Palantir (2010-2011). I studied Computer Science (undergrad) and
+                Human-Computer Interaction (grad) at Carnegie Mellon and won the
+                best teaching assistant award upon graduation.
               </UlLi>
               <UlLi>
                 <Bold>In 2017:</Bold> After 4.5 years at EdSurge, I spent almost
@@ -1879,9 +1898,9 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
                 <Highlight>
                   I co-translated a book called{' '}
                   <ExternalLink href="https://www.amazon.com/dp/B0756J1LLV/ref=cm_sw_r_tw_dp_U_x_256TDbEEVPQ98">
-                    “Factfulness”
+                    <Bold>“Factfulness”</Bold>
                   </ExternalLink>{' '}
-                  by Hans Rosling and others into Japanese.
+                  (by Hans Rosling and others) into Japanese.
                 </Highlight>{' '}
                 It went on sale in 2019 and became one of Japan’s top-selling
                 nonfiction books of the year. It’s a great book -{' '}
@@ -1897,9 +1916,7 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
                 src="/static/images/shu-uesugi-factfulness-square.jpg"
                 caption={
                   <>
-                    <Bold>The Japanese edition of “Factfulness”:</Bold>
-                    <br />
-                    Photo taken at Bạch Mai Hospital in Hanoi, Vietnam,
+                    Me at Bạch Mai Hospital in Hanoi, Vietnam,
                     <br />
                     where Hans Rosling (the author) had worked.
                   </>
@@ -1909,19 +1926,21 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
             <Ul>
               <UlLi>
                 <Bold>In 2019:</Bold> I spent time marketing the Japanese
-                edition of “Factfulness”, freelancing (Rails dev), and working
-                on this course. I got married and spent a lot of time with my
-                wife, who moved to the U.S. from Japan. And I’m now looking for
-                a full-time job.
+                edition of “Factfulness”, freelancing (Rails dev for small
+                startups), and working on this course. I got married and spent a
+                lot of time with my wife, who moved to the U.S. from Japan. And
+                I’m now looking for a full-time job.
               </UlLi>
               <UlLi>
-                <Bold>Things I enjoy:</Bold>{' '}
-                <Highlight>Expository writing</Highlight> (like this course) and{' '}
+                <Bold>Things I’m pretty good at:</Bold>{' '}
+                <Highlight>Expository writing</Highlight> (like this course),{' '}
                 <Highlight>React/TypeScript</Highlight> (
                 <ExternalLink href="https://github.com/chibicode/ycombinator">
                   see the repo for this course
                 </ExternalLink>
-                )
+                ), and <Highlight>product design</Highlight> (but not visual
+                design). I’ve also worked with <Highlight>Rails</Highlight> from
+                version 1 to version 6.
               </UlLi>
               <UlLi>
                 <Bold>Current interests:</Bold> As a professional EN → JP
@@ -1930,12 +1949,12 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
                 <ExternalLink href="https://distill.pub/2017/aia/">
                   using AI to augment human intelligence
                 </ExternalLink>
-                .
+                . I try to read about deep learning in my spare time.
               </UlLi>
             </Ul>
             <Hr />
             <P>
-              <Bold>Again:</Bold> Contact me at{' '}
+              <Bold>If you’re interested:</Bold> Contact me at{' '}
               <ExternalLink href="mailto:shu@chibicode.com">
                 <Highlight>shu@chibicode.com</Highlight>
               </ExternalLink>{' '}

diff --git a/src/components/Runners/Bcgp.tsx b/src/components/Runners/Bcgp.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import ExpressionRunnerPrecomputed from 'src/components/ExpressionRunnerPrecomputed'
+import config from 'src/lib/runners/bcgp.json'
+
+const Bcgp = ({ children }: { children?: React.ReactNode }) => (
+  // @ts-ignore
+  <ExpressionRunnerPrecomputed {...config}>
+    {children}
+  </ExpressionRunnerPrecomputed>
+)
+
+export default Bcgp
diff --git a/src/components/Runners/fakeIndex.ts b/src/components/Runners/fakeIndex.ts
@@ -1,5 +1,6 @@
 export { default as Aaov } from 'src/components/FakeRunner'
 export { default as Qxob } from 'src/components/FakeRunner'
+export { default as Bcgp } from 'src/components/FakeRunner'
 export { default as Pbhg } from 'src/components/FakeRunner'
 export { default as Wwtl } from 'src/components/FakeRunner'
 export { default as Vdhd } from 'src/components/FakeRunner'

diff --git a/src/components/Runners/index.ts b/src/components/Runners/index.ts
@@ -1,5 +1,6 @@
 export { default as Aaov } from 'src/components/Runners/Aaov'
 export { default as Qxob } from 'src/components/Runners/Qxob'
+export { default as Bcgp } from 'src/components/Runners/Bcgp'
 export { default as Pbhg } from 'src/components/Runners/Pbhg'
 export { default as Wwtl } from 'src/components/Runners/Wwtl'
 export { default as Vdhd } from 'src/components/Runners/Vdhd'

diff --git a/src/contents/0.en.tsx b/src/contents/0.en.tsx
@@ -60,7 +60,7 @@ export default () => (
                   It’s <HighlightBold>100% FREE</HighlightBold>, and you can do
                   it from
                   <br />
-                  your smartphone, tablet, or computer.
+                  your smartphone, tablet, or computer
                 </>
               }
             />
@@ -242,8 +242,8 @@ export default () => (
               <ExternalLink href="https://www.ycombinator.com/faq">
                 FAQ page
               </ExternalLink>
-              , they say they chose the name “Y Combinator” because it’s{' '}
-              <Italic>“one of the coolest ideas in computer science.”</Italic>
+              , they say they chose the name “Y Combinator” because it’s “
+              <Italic>one of the coolest ideas in computer science.</Italic>”
             </P>
             <P>
               <Bold>Furthermore:</Bold>{' '}
@@ -275,8 +275,8 @@ export default () => (
                           “That’s so cool. They’re named after the Y Combinator.
                           There must be something going on here.”
                         </Italic>{' '}
-                        And <Bold>suits</Bold> would look at it and think,{' '}
-                        <Italic>“Y Combinator, what’s that?”</Italic>
+                        And <Bold>suits</Bold> would look at it and think, “
+                        <Italic>Y Combinator, what’s that?</Italic>”
                       </P>
                       <P>
                         That was what we wanted. We wanted hackers to notice us,
@@ -425,9 +425,8 @@ export default () => (
               }
             />
             <P>
-              <Emoji>🤔</Emoji> <Bold>So I thought:</Bold> If I could teach a
-              difficult computer science concept like Y Combinator to
-              non-programmers in 2 to 3 hours, that means{' '}
+              <Emoji>🤔</Emoji> <Bold>So I thought:</Bold> If I could teach Y
+              Combinator to non-programmers, that means{' '}
               <Highlight>
                 I’d be able to teach{' '}
                 <Italic>other difficult computer science concepts</Italic> to
@@ -459,8 +458,8 @@ export default () => (
               <Highlight>
                 I want to make it easier for non-programmers to learn difficult
                 computer science concepts as quickly as possible
-              </Highlight>{' '}
-              - without having to learn to code. This course is my first step in
+              </Highlight>
+              —without having to learn to code. This course is my first step in
               this direction.
             </P>
             <EmojiSeparator
@@ -478,23 +477,22 @@ export default () => (
             <P>
               <Bold>Downside:</Bold> I admit that this is not the best way to
               introduce computer science to non-programmers. That’s why I’m
-              calling this course a <Italic>“wild”</Italic> introduction to
+              calling this course a “<Italic>wild</Italic>” introduction to
               computer science.
             </P>
             <P>
               The ideal way to teach computer science would be to{' '}
               <Highlight>teach programming first.</Highlight> However, learning
               to code takes time, and{' '}
               <Highlight>
-                most people - especially adults - won’t ever learn to code.
+                most people—especially adults—won’t ever learn to code.
               </Highlight>{' '}
               As{' '}
               <ExternalLink href="https://a16z.com/2011/08/20/why-software-is-eating-the-world/">
                 software is eating the world
               </ExternalLink>
               , I believe there need to be more ways to teach computer science
-              without requiring programming knowledge -{' '}
-              <Italic>even if they’re not ideal.</Italic>
+              without requiring programming knowledge.
             </P>
           </>
         )
@@ -545,9 +543,9 @@ export default () => (
               emojis={['📱', '🧩', '💻']}
               description={
                 <>
-                  Puzzles are optimized for smartphones.
+                  The puzzles are optimized for smartphones.
                   <br />
-                  They can be done on a computer too.
+                  They can be done on a computer too
                 </>
               }
             />
@@ -564,9 +562,9 @@ export default () => (
             <P>
               I had to pack a lot of materials so it can be read in under 3
               hours, so <Highlight>it’s fast-paced and challenging.</Highlight>{' '}
-              You might find it difficult if you don’t enjoy puzzles, but{' '}
-              <Highlight>you’ll never get stuck</Highlight>. I made it so that
-              you can keep reading even if you don’t understand everything.
+              However, <Highlight>you’ll never get stuck</Highlight>—I made it
+              so that you can finish the course even if you don’t understand
+              everything (and that’s okay! <Emoji>🤗</Emoji>).
             </P>
           </>
         ),
@@ -639,7 +637,10 @@ export default () => (
         footer: {
           content: (
             <>
+              <P>Also, sorry for not introducing myself earlier…</P>
               <H args={{ name: 'aboutMe' }} />
+              <P>To go to the next page, press this button:</P>
+              <NextLessonButton />
             </>
           )
         }