sushi`}
I’ve added the button to the JS code
- snippet below. If you press it, you’ll see
- that the result is 'sandwich'.
+ snippet below. If you press it, you’ll see that the result is{' '}
+ 'sandwich'.
sushi`}
So, you can an emoji
- puzzle just as you can run a piece of JS code.{' '}
-
- This is how I taught functional programming to non-programmers
- in my course (
-
- Y Combinator for Non-programmers
-
- )—without showing any code.
-
+ puzzle just as you can run a piece of JS code. This is how I
+ taught functional programming to non-programmers in my course (
+
+ Y Combinator for Non-programmers
+
+ )—without showing any code.
Let’s take a look at another example. Here’s a piece
@@ -904,11 +884,8 @@ sushi => 'pizza'`}
On the other hand, most non-programmers don’t have a mental model
of how function evaluation works. To help them develop the mental
- model,{' '}
-
- I created a step-by-step visualization of
- function evaluation rules using emoji puzzles.
-
+ model, I created a step-by-step visualization of
+ function evaluation rules using emoji puzzles.
Let’s reuse the earlier example again:
'pizza'`}
Here are the four steps it displayed:
- Step 1.{' '}
-
-
-
+ Step 1.
- First, we label each emoji.{' '}
-
- The top item is labeled as{' '}
- (for
- “Top”), the left item is labeled as{' '}
- (for
- “Left”), and the right item is labeled as{' '}
- {' '}
- (for “Right”).
-
+ First, we label each emoji. The top item is labeled as{' '}
+ (for “
+ Top”), the left item is labeled as{' '}
+ (for “
+ Left”), and the right item is labeled as{' '}
+ (for
+ “Right”).
- Step 2.{' '}
-
-
-
+ Step 2.
Second, In this case, both the
@@ -963,10 +931,7 @@ sushi => 'pizza'`}
- Step 3.{' '}
-
-
-
+ Step 3.
Third, In this case, we copy the{' '}
@@ -976,10 +941,7 @@ sushi => 'pizza'`}
- Step 4.{' '}
-
-
-
+ Step 4.
Finally, We’re left with just the{' '}
@@ -1062,24 +1024,18 @@ sushi => 'pizza'`}
Here are the three steps it displayed:
- Step 1.{' '}
-
-
- —this is the same as before.
-
+ Step 1.
+ —this is the same as before.
- Step 2.{' '}
-
- This time, there’s no match between{' '}
- and{' '}
- .
- The bottom-left is , but the
- bottom-right is .
-
+ Step 2. This time, there’s no match{' '}
+ between {' '}
+ and .
+ The bottom-left is , but the
+ bottom-right is .
No match:{' '}
@@ -1088,16 +1044,11 @@ sushi => 'pizza'`}
❌
- If there’s no match,{' '}
-
- we skip step 3 () and go directly to step 4.
-
+ If there’s no match, we skip step 3 () and go
+ directly to step 4.
- Step 4.{' '}
-
-
-
+ Step 4.
@@ -1139,11 +1090,10 @@ sushi => 'pizza'`}
and see if they can be represented using an emoji puzzle.
- Check out the following JS expression, and
+ Check out the following JS expression, and try to guess what the
+ result would be before{' '}
- {' '}
- try to guess what the result would be before pressing the{' '}
- button.
+ pressing the button.
'pizza'`}
'hamburger'
)('chicken')`}
- Equivalently, in an emoji puzzle,{' '}
- we evaluate the bottom two rows first. We
- ignore the top row initially, which is shaded in blue.
+ Equivalently, in an emoji puzzle, we evaluate the bottom two rows
+ first. We ignore the top row initially, which is shaded in blue.
Focus on the bottom two rows, and
@@ -1237,22 +1186,17 @@ sushi => 'pizza'`}
two rows correspond to the pair of{' '}
1
’s. That’s how you know that you must start with the bottom two
- rows.{' '}
-
- In an emoji puzzle with 3 rows, you start with the pair of{' '}
- 1’s.
-
+ rows. In an emoji puzzle with 3 rows, you start with the pair of{' '}
+ 1’s.
Next, let’s label each item on the bottom two rows. This time, in
addition to{' '}
{' '}
{' '}
- ,{' '}
-
- we now have a new label{' '}
-
- {' '}
+ , we
+ now have a new label{' '}
+
for the .
@@ -1262,12 +1206,10 @@ sushi => 'pizza'`}
for the
- Here’s the rule:{' '}
-
- The middle item on the bottom row is labeled as{' '}
- {' '}
- (for “Middle”), and you can ignore it.
- {' '}
+ Here’s the rule: The middle item on the bottom row is
+ labeled as{' '}
+ {' '}
+ (for “Middle”), and you can ignore it.
You can pretend that{' '}
’s don’t exist.
@@ -1343,10 +1285,10 @@ sushi => 'pizza'`}
More examples (optional read): Here’s another
example that might be helpful for your understanding. Check out
- the following JS expression, and{' '}
+ the following JS expression, and try to guess what the result
+ would be before{' '}
- try to guess what the result would be before pressing the{' '}
- button.
+ pressing the button.
'pizza'`}
Next, here’s slightly different JS code. Compared to the last
- time,{' '}
-
- there’s an extra pair of parentheses around{' '}
- (spaghetti => spaghetti)('salad'),
- which changes the result.
-
+ time, there’s an extra pair of parentheses around{' '}
+ (spaghetti => spaghetti)('salad'),
+ which changes the result.
pizza`}
@@ -1394,12 +1333,10 @@ sushi => 'pizza'`}
(spaghetti => spaghetti)("salad")
)`}
- Let’s take a look at the equivalent emoji puzzle. This time,{' '}
-
- the pair of 1’s
- is on the top two rows
- {' '}
- instead. So we start with the top two rows this time.{' '}
+ Let’s take a look at the equivalent emoji puzzle. This time, the
+ pair of 1’s is on
+ the top two rows instead. So we start with the top two rows this
+ time.{' '}
Try pressing
{' '}
@@ -1417,18 +1354,15 @@ sushi => 'pizza'`}
In JavaScript, you can change the evaluation
- order of an expression by placing{' '}
- parentheses on different locations.
+ order of an expression by placing parentheses on different
+ locations.
In emoji puzzles, you can change the evaluation
- order by placing{' '}
-
- the numbers (e.g.{' '}
- 1’s and{' '}
- 2’s)
- {' '}
- on different locations.
+ order by placing the numbers (e.g.{' '}
+ 1’s and{' '}
+ 2’s) on
+ different locations.
@@ -1476,10 +1410,9 @@ sushi => 'pizza'`}
Now, suppose that we apply convert on
this function:{' '}
sushi => sandwich => sandwich. What would
- the result be?{' '}
+ the result be? Try to guess before{' '}
- Try to guess before pressing the {' '}
- button.
+ pressing the button.
b => a(a(a(b)))
// ...and so on...`}
Then, when the function is passed to{' '}
- convert(),{' '}
-
- it returns the number of times a is
- applied to b
- {' '}
+ convert(), it returns the number of
+ times a is applied to{' '}
+ b
in the function body.
{`convert(a => b => b) // 0
@@ -1572,13 +1503,9 @@ convert(a => b => a(a(a(b)))) // 3
// ...and so on...`}
- Important:{' '}
-
- These functions that can be converted to a number using{' '}
- convert() have a{' '}
- special name.
- {' '}
- They are called{' '}
+ Important: These functions that can be converted to a
+ number using convert() have a{' '}
+ special name. They are called{' '}
Church numerals
@@ -1600,10 +1527,8 @@ a => b => a(a(a(b))))
You might be wondering: “What’s the point of this?”
Don’t worry—I’ll tell you why Church numerals are interesting
- shortly. But before I do, let me explain{' '}
-
- how emoji puzzles can express Church numerals.
-
+ shortly. But before I do, let me explain how emoji puzzles can
+ express Church numerals.
Here’s an emoji puzzle that represents{' '}
@@ -1618,13 +1543,10 @@ a => b => a(a(a(b))))
(Church numeral 0)
- Here’s what’s new:{' '}
-
- We now have the “
- ” button below the puzzle which converts it to the corresponding
- Church number.
- {' '}
- Try pressing it:
+ Here’s what’s new: We now have the “
+ ” button below the
+ puzzle which converts it to the corresponding Church number. Try
+ pressing it:
@@ -1682,10 +1604,9 @@ a => b => a(a(a(b))))
What would the result be?
- Let’s take a look.{' '}
+ Let’s take a look. Try to guess before{' '}
- Try to guess before pressing the {' '}
- button.
+ pressing the button.
{`// Function from the above
@@ -1719,14 +1640,11 @@ convert(f(zero))`}
}
/>
- Here’s the secret:{' '}
-
- This function f we used actually{' '}
- adds 1 to the input Church numeral.
- {' '}
- When you apply f to a Church numeral, it
- returns a new Church numeral that’s 1 greater
- than before.
+ Here’s the secret: This function{' '}
+ f we used actually adds 1 to
+ the input Church numeral. When you apply{' '}
+ f to a Church numeral, it returns a{' '}
+ new Church numeral that’s 1 greater than before.
{`// If we apply this function to a
// Church numeral, it returns a new
@@ -1752,20 +1670,14 @@ convert(f(two))`}
-
- By using a Church numeral function that can be converted to{' '}
- someNumber…
-
+ By using a Church numeral function that can be converted to{' '}
+ someNumber…
-
- …and the function f we saw earlier,
-
+ …and the function f we saw earlier,
-
- You can calculate someNumber + 1.
-
+ You can calculate someNumber + 1.
}
/>
-
- Now, let’s see if we can explain this to non-programmers using
- emoji puzzles.
-
+ Now, let’s see if we can explain this to non-programmers using
+ emoji puzzles.
First, here’s an emoji puzzle representation of the Church numeral{' '}
@@ -1842,11 +1752,8 @@ convert(f(two))`}
margin-bottom: 0;
`}
>
- In other words:{' '}
-
- We can use an emoji puzzle to calculate{' '}
- someNumber + 1.
-
+ In other words: We can use an emoji puzzle to
+ calculate someNumber + 1.
@@ -1995,12 +1902,8 @@ const mul = sushi => sandwich => pizza =>
It turns out that if/else statements like
the above can also be expressed using Church numerals. To save
- time,{' '}
-
- I won’t show JS code this time and will only show the emoji
- puzzle.
- {' '}
- Check out the following:
+ time, I won’t show JS code this time and will only show the emoji
+ puzzle. Check out the following:
An emoji puzzle that represents
@@ -2010,16 +1913,12 @@ const mul = sushi => sandwich => pizza =>
The above emoji puzzle will become:
-
- if you put an emoji
- puzzle that can be converted to on
- the bottom
-
+ if you put an emoji
+ puzzle that can be converted to on
+ the bottom
-
- otherwise
-
+ otherwise
@@ -2033,12 +1932,9 @@ const mul = sushi => sandwich => pizza =>
can be converted to
- What just happened:{' '}
-
- We started out with
- , and it ended up with
- .
-
+ What just happened: We started out with{' '}
+
+ , and it ended up with .
Now, what if we started out with an emoji puzzle that can be
@@ -2051,11 +1947,9 @@ const mul = sushi => sandwich => pizza =>
can be converted to
- What just happened:{' '}
-
- We started out with , and it ended up
- with .
-
+ What just happened: We started out with{' '}
+ , and it ended up with{' '}
+ .
As you just saw, in addition to math expressions, we can also
@@ -2072,9 +1966,8 @@ const mul = sushi => sandwich => pizza =>
Wikipedia
), created by a mathematician Alonzo Church in 1930s. It only
- has two features:{' '}
- variables and anonymous functions. Here’s
- a piece of lambda calculus code:
+ has two features: variables and anonymous functions. Here’s a
+ piece of lambda calculus code:
sandwich => pizza =>
{`(sushi => sushi)(sandwich)`}
- You might have realized that{' '}
-
- all the functional JS code we represented using emoji puzzles
- can be expressed in lambda calculus.
- {' '}
- For example, the emoji puzzle that multiplies two Church
- numerals…
+ You might have realized that all the functional JS code we
+ represented using emoji puzzles can be expressed in lambda
+ calculus. For example, the emoji puzzle that multiplies two
+ Church numerals…
Emoji puzzle that multiplies
@@ -2111,13 +2001,10 @@ const mul = sushi => sandwich => pizza =>
>{`λsushi.λsandwich.λpizza
sushi (sandwich pizza)`}
- So, here’s the secret:{' '}
-
- My emoji puzzles are actually a visual representation of
- lambda calculus.
- {' '}
- And by using emoji puzzles, lambda calculus can be explained
- visually to non-programmers!
+ So, here’s the secret: My emoji puzzles are
+ actually a visual representation of lambda calculus. And by
+ using emoji puzzles, lambda calculus can be explained visually
+ to non-programmers!
sandwich => pizza =>
Finally: We saw that emoji puzzles, or lambda
calculus, can express not only numbers and arithmetic but also
- conditionals. In fact,{' '}
-
- lambda calculus can express pretty much anything any
- programming language can do—it’s Turing complete.
- {' '}
+ conditionals. In fact, lambda calculus can express pretty much
+ anything any programming language can do—it’s Turing complete.
And this method of encoding data and operators using lambda
calculus is called Church encoding (
@@ -2168,17 +2052,11 @@ const mul = sushi => sandwich => pizza =>
The answer is yes. We can express control flow using{' '}
-
- Y combinator
-
- .
+ Y combinator.
- Y combinator{' '}
-
- is a function that allows you to create a recursive function
- without using named functions.
- {' '}
+ Y combinator is a function that allows you to create
+ a recursive function without using named functions.
Y combinator is complex, so if we go into detail we’ll need
@@ -2247,11 +2125,9 @@ const mul = sushi => sandwich => pizza =>
}
}`}
- You’d usually use a named function to do recursion. However,{' '}
-
- if you use Y combinator, you can do recursion without using a
- named function.
- {' '}
+ You’d usually use a named function to do recursion. However, if
+ you use Y combinator, you can do recursion without using a named
+ function.
Let me show you how. Here’s the Y combinator function{' '}
@@ -2273,11 +2149,8 @@ const mul = sushi => sandwich => pizza =>
)`}
Now, we’ll apply yCombinator on another
- anonymous function.{' '}
-
- This time, fact is NOT a function name,
- but it’s a parameter name.
- {' '}
+ anonymous function. This time, fact is
+ NOT a function name, but it’s a parameter name.
We haven’t used any named function yet—we’ve only used anonymous
functions.
@@ -2325,13 +2198,10 @@ const mul = sushi => sandwich => pizza =>
5 * 4 * 3 * 2 * 1.
- So:{' '}
-
- By using the yCombinator function, you
- can create a recursive function without using named functions.
- {' '}
- It allows you to implement control flow (loops) using anonymous
- functions.
+ So: By using the yCombinator{' '}
+ function, you can create a recursive function without using named
+ functions. It allows you to implement control flow (loops) using
+ anonymous functions.
Of course, Y combinator can be represented using an emoji puzzle:
@@ -2358,11 +2228,8 @@ const mul = sushi => sandwich => pizza =>
factorials (I won’t show it here because it’s pretty complex).
- In any case,{' '}
-
- you can teach Y combinator to non-programmers using emoji
- puzzles.
-
+ In any case, you can teach Y combinator to non-programmers using
+ emoji puzzles.
@@ -2384,12 +2251,10 @@ const mul = sushi => sandwich => pizza =>
The emoji puzzles on this page run in the applicative order
- because I tried to compare it with JavaScript.{' '}
-
- However, in my course, the emoji puzzles actually run in the
- normal order instead,
- {' '}
- simply because Y Combinator would be visually less complex.
+ because I tried to compare it with JavaScript. However, in my
+ course, the emoji puzzles actually run in the normal order
+ instead, simply because Y Combinator would be visually less
+ complex.
The bottom line is that my emoji puzzles support both
@@ -2404,22 +2269,17 @@ const mul = sushi => sandwich => pizza =>
Conclusion
- One-line summary:{' '}
-
- By using emoji puzzles, you explain functional programming
- concepts such as lambda calculus, Church encoding, and Y
- combinator to non-programmers—without using any code.
-
+ One-line summary: By using emoji puzzles, you explain
+ functional programming concepts such as lambda calculus, Church
+ encoding, and Y combinator to non-programmers—without using any
+ code.
Why did I make emoji puzzles? As someone who is
- passionate about teaching,{' '}
-
- I wanted to challenge myself to explain a{' '}
- difficult computer science concept (like Y
- combinator) to non-programmers
- {' '}
- while satisfying the following constraints:
+ passionate about teaching, I wanted to challenge myself to explain
+ a difficult computer science concept (like Y
+ combinator) to non-programmers while satisfying the following
+ constraints:
Don’t use any code
diff --git a/src/components/H.tsx b/src/components/H.tsx
index 787abd9aa..0f5cd85d0 100644
--- a/src/components/H.tsx
+++ b/src/components/H.tsx
@@ -1847,19 +1847,15 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
content: (
<>
- 👨🏻💻 About me:{' '}
-
- I’m Shu Uesugi, a full-stack developer based
- in San Francisco Bay Area, USA.
-
+ 👨🏻💻 About me: I’m{' '}
+ Shu Uesugi, a full-stack developer based in San
+ Francisco Bay Area, USA.
- 👋 Available for hire:{' '}
-
- I’m looking for a{' '}
- full-time senior engineering position.
- {' '}
- Press “Continue reading” below to learn more about me!{' '}
+ 👋 Available for hire: I’m
+ looking for a{' '}
+ full-time senior engineering position. Press
+ “Continue reading” below to learn more about me!{' '}
😉
@@ -1878,36 +1874,32 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
Please read below and if you’re interested, contact me (
Shu Uesugi) at{' '}
- shu@chibicode.com
+ shu@chibicode.com
{' '}
or on{' '}
-
- Twitter: @chibicode
-
+ Twitter: @chibicode
.
- I’m mainly looking for{' '}
- a senior engineering position. But I’m
- 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.
+ I’m mainly looking for a senior engineering
+ position. But I’m 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.
- Location preference:{' '}
- Remote would be ideal. 2nd
- preference is Los Angeles. I’m currently
- in SF Bay Area (3rd preference), but my wife and I are looking
- to relocate to LA or other more affordable places.
+ Location preference: Remote would be ideal. 2nd
+ preference is Los Angeles. I’m currently in SF Bay Area (3rd
+ preference), but my wife and I are looking to relocate to LA or
+ other more affordable places.
Other preferences: My last full-time job was in
- edtech/media, but{' '}
- I’m looking at a wide range of areas. I
- like companies that think machine learning is the new SQL (see{' '}
+ edtech/media, but I’m looking at a wide range of areas. I like
+ companies that think machine learning is the new SQL (see{' '}
this article
{' '}
@@ -1926,15 +1918,13 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
More about me:
- Work experience (pre-2017):{' '}
-
- I worked as a lead full-stack (Rails) developer at{' '}
-
- EdSurge
-
- , an edtech media startup in Silicon Valley, from 2012 to 2017
-
- . I was the first engineering hire and was involved in
+ Work experience (pre-2017): I worked as a lead
+ full-stack (Rails) developer at{' '}
+
+ EdSurge
+
+ , an edtech media startup in Silicon Valley, from 2012 to 2017.
+ 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). I studied Computer Science (undergrad) and
@@ -1951,16 +1941,13 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
In 2018: While working as a freelance engineer in
- Silicon Valley,{' '}
-
- I co-translated a book called{' '}
-
- “Factfulness”
- {' '}
- (by Hans Rosling and others) into Japanese.
- {' '}
- It went on sale in 2019 and became one of Japan’s top-selling
- nonfiction books of the year. It’s a great book -{' '}
+ Silicon Valley, I co-translated a book called{' '}
+
+ “Factfulness”
+ {' '}
+ (by Hans Rosling and others) into Japanese. It went on sale in
+ 2019 and became one of Japan’s top-selling nonfiction books of
+ the year. It’s a great book -{' '}
take Bill Gates’s word for it
@@ -1989,20 +1976,17 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
I’m now looking for a full-time job.
- Things I’m pretty good at:{' '}
- Expository writing (like this course),{' '}
- React/TypeScript (
+ Things I’m pretty good at: Expository writing (like
+ this course), React/TypeScript (
see the repo for this course
- ), and learning new things quickly. I’m okay at{' '}
- product design. I’ve also worked with{' '}
- Rails from version 2 to version 6.
+ ), and learning new things quickly. I’m okay at product design.
+ I’ve also worked with Rails from version 2 to version 6.
Current interests: As a professional EN → JP
- translator, I’m interested in{' '}
- machine translation and{' '}
+ translator, I’m interested in machine translation and{' '}
using AI to augment human intelligence
@@ -2013,13 +1997,11 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
If you’re interested: Contact me at{' '}
- shu@chibicode.com
+ shu@chibicode.com
{' '}
or on{' '}
-
- Twitter: @chibicode
-
+ Twitter: @chibicode
. I’m also on{' '}
diff --git a/src/contents/4.en.tsx b/src/contents/4.en.tsx
index 4eea215f4..9037fc3b6 100644
--- a/src/contents/4.en.tsx
+++ b/src/contents/4.en.tsx
@@ -134,42 +134,51 @@ export const Unmatched = () => (
)
-export const InstructionTwo = ({ lowerCase }: { lowerCase?: boolean }) => (
- <>
-
- {lowerCase ? 'w' : 'W'}e check to see if some of{' '}
-
- ’s and
- ’s match.{' '}
-
- If they match, add the ✅ sign.
-
-
-
-)
+export const InstructionTwo = ({ lowerCase }: { lowerCase?: boolean }) => {
+ const Wrapper = lowerCase ? React.Fragment : Highlight
+ return (
+ <>
+
+ {lowerCase ? 'w' : 'W'}e check to see if some of{' '}
+
+ ’s and
+ ’s match.{' '}
+
+ If they match, add the ✅ sign.
+
+
+
+ )
+}
-export const InstructionThree = ({ lowerCase }: { lowerCase?: boolean }) => (
- <>
-
- {lowerCase ? 'w' : 'W'}e copy{' '}
-
- ’s to where the matched{' '}
-
- ’s are.
-
-
-)
+export const InstructionThree = ({ lowerCase }: { lowerCase?: boolean }) => {
+ const Wrapper = lowerCase ? React.Fragment : Highlight
+ return (
+ <>
+
+ {lowerCase ? 'w' : 'W'}e copy{' '}
+
+ ’s to where the matched{' '}
+
+ ’s are.
+
+
+ )
+}
-export const InstructionFour = ({ lowerCase }: { lowerCase?: boolean }) => (
- <>
-
- {lowerCase ? 'w' : 'W'}e remove{' '}
-
- ’s and
- ’s.
-
-
-)
+export const InstructionFour = ({ lowerCase }: { lowerCase?: boolean }) => {
+ const Wrapper = lowerCase ? React.Fragment : Highlight
+ return (
+ <>
+
+ {lowerCase ? 'w' : 'W'}e remove{' '}
+
+ ’s and
+ ’s.
+
+
+ )
+}
export default () => (