diff --git a/src/components/Card.tsx b/src/components/Card.tsx index 206d82396..f8d4fb525 100644 --- a/src/components/Card.tsx +++ b/src/components/Card.tsx @@ -111,7 +111,7 @@ const Card = ({ <> {' '} @@ -125,7 +125,7 @@ const Card = ({ {' '} diff --git a/src/components/ContentTags/Inline.tsx b/src/components/ContentTags/Inline.tsx index 7b786b13d..754e987d6 100644 --- a/src/components/ContentTags/Inline.tsx +++ b/src/components/ContentTags/Inline.tsx @@ -27,7 +27,7 @@ const HighlightContext = React.createContext( const mix = (color: CardProps['color'], base: string) => Color(base) - .mix(Color(backgroundColor(color)), color === 'grey' ? 0.2 : 0.4) + .mix(Color(backgroundColor(color)), 0.4) .hsl() .string() diff --git a/src/components/YoutubeEmbed.tsx b/src/components/YoutubeEmbed.tsx index 42da9e797..9dc1bd4bf 100644 --- a/src/components/YoutubeEmbed.tsx +++ b/src/components/YoutubeEmbed.tsx @@ -12,7 +12,7 @@ const YoutubeEmbed = ({ src: string width: number height: number - caption: React.ReactNode + caption?: React.ReactNode }) => (
( + <> +

+ Also, for programmers: This course is written in TypeScript + and React, and{' '} + + the source is available on GitHub + + . Please ★ star it! 😉 +

+ +) export default () => ( ( 🤔{' '} If you want to read the introduction before you get started, scroll down and keep reading! The - introduction only takes a few minutes to read. + introduction shouldn’t take much time to read.

(

Let’s now talk about this course!

- ) + ), + footer: { + content: ( + <> +

+ If you just want to get started: Press the button + below to go to the next page! +

+ +

+ Or, if you want to keep reading the introduction, + scroll down below! +

+ + ) + } }, { title: <>Why teach Y Combinator for non-programmers?, @@ -350,31 +379,272 @@ export default () => ( } /> +

+ First: I studied computer science at Carnegie Mellon + University (one of the top schools), and I can also say that{' '} + + Y Combinator is one of the coolest concepts in computer science + I learned. + +

+

+ So:{' '} + From non-programmers’ point of view, by + taking this course,{' '} + + they can learn one of the coolest ideas in computer science as + quickly as possible + + , without having to learn to code or study other boring stuff + along the way. It could be the fastest way for non-programmers to + understand why computer science is interesting. 😉 +

+ 😒, + , + 😮 + ]} + description={ + <> + Non-programmers can quickly understand +
+ why computer science is interesting + + } + /> +

But that’s not the only reason.

+

+ Y Combinator is a difficult concept. If you ask a + random programmer in San Francisco to write the Y Combinator + program without looking it up,{' '} + I bet 95% of them won’t be able to do it.{' '} + It’s not easy. +

+ + Most programmers won’t be able to +
+ write the Y Combinator program +
+ without looking it up + + } + /> +

+ 🤔 So I thought: If I could teach a + difficult computer science concept like Y Combinator to + non-programmers in 2 to 3 hours, that means{' '} + + I’d be able to teach{' '} + other difficult computer science concepts to + non-programmers too. + +

+

+ And that’s important because… I know that{' '} + + many of my non-programmer friends want to{' '} + actually understand difficult computer science + concepts + + , such as AI or blockchain. They genuinely want + to understand how the software they’re using works. +

+

+ But they can’t learn it because{' '} + + they don’t have necessary programming knowledge + + . Pretty much all learning resources that teach difficult computer + science concepts assume that you know + programming. +

+
+

+ 😠 I want to change this.{' '} + + I want to make it easier for non-programmers to learn difficult + computer science concepts as quickly as possible + {' '} + - without having to learn to code. This course is my first step in + this direction. +

+ + I want to make it easier for +
+ non-programmers to learn +
+ difficult computer science concepts + + } + /> +

+ Downside: 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 “wild” introduction to + computer science. +

+

+ The ideal way to teach computer science would be to{' '} + teach programming first. However, learning + to code takes time, and{' '} + + most people - especially adults - won’t ever learn to code. + {' '} + As{' '} + + software is eating the world + + , I believe there needs to be more ways to teach computer science + without requiring programming knowledge -{' '} + even if they’re not ideal. +

), footer: { content: ( - <> -

For programmers

-

Please ★ star it on GitHub!

- + Continue reading, + content: ( + <> +

+ For programmers: This course is optimized for + non-programmers,{' '} + + so if you’re a programmer and want to learn Y + Combinator, there are other better resources. + {' '} + Press “Continue reading” below to learn more. +

+ + ), + afterText: + }} + > +
+

+ + For programmers interested in learning about Y Combinator, I + recommend this video: + {' '} + + “Y Not- Adventures in Functional Programming” + + . +

+

+ This is a talk by{' '} + + Jim Weirich + + , a legendary Ruby programmer who passed away in 2014. He gave + this talk at RubyConf 2012, and I was in the audience. It was an + amazing talk. +

+ +
+ +
) } }, { title: <>How to teach Y Combinator for non-programmers, - content: <>, - footer: { - content: ( - <> -

Travel

- - ) - } + content: ( + <> +

+ Puzzles, not programming: In this course, I will + teach you Y Combinator using{' '} + puzzles. There’s no programming + involved. +

+ + Learn Y Combinator using puzzles. +
+ No programming required! + + } + /> +

+ The puzzles look like this: I’ll explain how it works + on the next page, but for now,{' '} + + try pressing the button. + {' '} + It will calculate {' '} + . +

+ + You’ll be solving puzzles like this: +
+ Try pressing ! +
+

+ These puzzles are great also because{' '} + they are optimized for smartphones. A lot + of “learn to code” resources are either (1){' '} + great, but not smartphone-ready or (2){' '} + smartphone-ready, but not great. I tried to fix + that. 😉 +

+ + Puzzles are optimized for smartphones. +
+ They can be done on a computer too. + + } + /> +

+ 100% free, takes 2 to 3 hours: Finally, this course + is 100% free (no signup required) + and should take about 2 to 3 hours{' '} + to read for most people. +

+ 100% free!} + /> +

+ I had to pack a lot of materials so it can be read in under 3 + hours, so it’s fast-paced and challenging.{' '} + You might find it difficult if you don’t enjoy puzzles, but{' '} + you’ll never get stuck. I made it so that + you can keep reading even if you don’t understand everything. +

+ + ) }, { - title: <>Let’s begin!, - content: <>, + title: <>Let’s get started!, + content: ( + <> + +

+ Let’s get started!{' '} + + Press the button below to go to the next page! + +

+ + + ), footer: { content: ( <> diff --git a/src/lib/theme/colors.ts b/src/lib/theme/colors.ts index e959bdee8..2c92b22f9 100644 --- a/src/lib/theme/colors.ts +++ b/src/lib/theme/colors.ts @@ -50,8 +50,8 @@ export const allColors = { pink600: pink[600], transparent: 'transparent', white: 'white', - white66: Color('#fff') - .alpha(0.66) + white75: Color('#fff') + .alpha(0.75) .hsl() .string(), green50: green[50],