From c19c83bf9bf78f613a33e0ebe9ea20d98bd9848a Mon Sep 17 00:00:00 2001 From: Shu Uesugi Date: Sat, 4 Jan 2020 03:54:36 -0800 Subject: [PATCH] Remove highlights from blog --- pages/functional-programming-emojis.tsx | 446 ++++++++---------------- src/components/H.tsx | 100 +++--- src/contents/4.en.tsx | 77 ++-- 3 files changed, 237 insertions(+), 386 deletions(-) diff --git a/pages/functional-programming-emojis.tsx b/pages/functional-programming-emojis.tsx index e3e285999..90cb5c46b 100644 --- a/pages/functional-programming-emojis.tsx +++ b/pages/functional-programming-emojis.tsx @@ -33,7 +33,6 @@ import { ExternalLink, P, Italic, - HighlightBold, Bold, InternalLink, Highlight, @@ -89,9 +88,7 @@ const Ads = ({ shareId }: { shareId?: string }) => ( I’d love it if you could share this on Twitter.{' '} - - Click here to Tweet this article. - + Click here to Tweet this article. @@ -109,13 +106,6 @@ const Ads = ({ shareId }: { shareId?: string }) => ( height="30px" > - - You can also discuss this on{' '} - - Hacker News - - . - {shareId && ( <> @@ -602,27 +592,22 @@ export default () => { >

- - Last month, I published a free online course called “ - - Y Combinator for Non-programmers - - ”. - {' '} - In this 17-page course, I explain functional programming concepts - such as lambda calculus, Church encoding, and Y combinator in a - way such that people{' '} + Last month, I published a free online course called “ + + Y Combinator for Non-programmers + + ”. In this 17-page course, I explain functional programming + concepts such as lambda calculus, Church encoding, and Y + combinator in a way such that people{' '} who have zero programming knowledge can understand.

- I didn’t use any code to explain these concepts. Instead,{' '} - - I created something called “emoji puzzles” that can{' '} - visualize functional code. - {' '} - In this article, I’ll explain how my emoji puzzles can represent - and execute functional code visually. + I didn’t use any code to explain these concepts. Instead, I + created something called “emoji puzzles” that can{' '} + visualize functional code. In this article, I’ll + explain how my emoji puzzles can represent and execute functional + code visually.

Quick Demo @@ -675,8 +660,6 @@ export default () => { combinator. -

Some announcements:

-
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 () => (