Refactor article

.prettierrc

@@ -13,6 +13,12 @@
       "options": {
         "printWidth": 53
       }
+    },
+    {
+      "files": ["snippets/snippets/**/ignoreWidth/*.ts"],
+      "options": {
+        "printWidth": 120
+      }
     }
   ]
 }

README.md

@@ -1,11 +1,29 @@
 # [TypeScript for Beginner Programmers](https://ts.chibicode.com)
 
-### This is the repository for the TypeScript tutorial website called **[TypeScript for Beginner Programmers](https://ycombinator.chibicode.com/)**.
+This is the repository for the TypeScript tutorial website called **[TypeScript for Beginner Programmers](https://ycombinator.chibicode.com/)**.
 
 <p>
   <a href="https://ts.chibicode.com/"><img src="public/images/og-index.png" width="600" /></a>
 </p>
 
+## Article 3: [Your Coding Tutorial Might Need Some Refactoring](https://ts.chibicode.com/refactor)
+
+<p>
+  <a href="https://ts.chibicode.com/refactor"><img src="public/images/og-refactor.png" width="600" /></a>
+</p>
+
+## Article 2: [TypeScript Tutorial for JS Programmers Who Know How to Build a Todo App](https://ts.chibicode.com/todo)
+
+<p>
+  <a href="https://ts.chibicode.com/todo"><img src="public/images/og-todo-v2.png" width="600" /></a>
+</p>
+
+## Article 1: [TypeScript Generics for People Who Gave Up on Understanding Generics](https://ts.chibicode.com/generics)
+
+<p>
+  <a href="https://ts.chibicode.com/generics"><img src="public/images/og-generics.png" width="600" /></a>
+</p>
+
 ## License & Credits
 
 - For emojis, I’m using [Twemoji](https://github.com/twitter/twemoji) by Twitter (CC-BY 4.0 license).
@@ -16,6 +34,6 @@
 
 **Shu Uesugi**
 
-- Twitter: [@chibicode](https://twitter.com/chibicode)
 - [Website](https://chibicode.com)
+- Twitter: [@chibicode](https://twitter.com/chibicode)
 - Email: [shu@chibicode.com](mailto:shu@chibicode.com)

snippets/bin/generateSnippetsBundle.ts

@@ -2,18 +2,29 @@ const glob = require('glob')
 const fs = require('fs')
 const chokidar = require('chokidar')
 
+const filePathToKey = (file: string) =>
+  file
+    .replace(/\.\/snippets\/snippets\/\w+\//, '')
+    .replace(/longerWidth\//, '')
+    .replace(/ignoreWidth\//, '')
+    .replace(/\.ts/, '')
+
 const regenerate = () => {
   glob('./snippets/snippets/**/*.ts', (_: any, files: readonly string[]) => {
+    if (
+      new Set(files.map(filePathToKey)).size !== files.map(filePathToKey).length
+    ) {
+      throw new Error('Duplicate file name')
+    }
+
     const result = files
       .map(file => {
         const contents = fs.readFileSync(file, 'utf8')
-        return `export const ${file
-          .replace(/\.\/snippets\/snippets\/\w+\//, '')
-          .replace(/longerWidth\//, '')
-          .replace(/\.ts/, '')} = \`${contents
+        return `export const ${filePathToKey(file)} = \`${contents
           .trim()
           .replace(/^;/m, '')
-          .replace(/`/g, '\\`')}\``
+          .replace(/`/g, '\\`')
+          .replace(/\$/g, '\\$')}\``
       })
       .join('\n\n')
 

snippets/snippets/refactor/bxzx.ts

@@ -0,0 +1,5 @@
+// It could have been useful if you could pass
+// both number AND string, and have it repeat
+// the string the specified number of times
+padLeft('Hello world', 4, '#')
+// → "####Hello world"

snippets/snippets/refactor/crgn.ts

@@ -0,0 +1,6 @@
+// If the second parameter is string, then
+// that string is appended to the left side
+padLeft('Hello world', 'Jim: ')
+// → "Jim: Hello world"
+
+// Ask yourself: Would you EVER do this?

snippets/snippets/refactor/hfdq.ts

@@ -0,0 +1,16 @@
+function paddingLeftCss(val: number | string) {
+  if (typeof val === 'number') {
+    return `padding-left: ${val * 0.25}rem;`
+  } else {
+    return `padding-left: ${val};`
+  }
+}
+
+// padding-left: 0.25rem;
+paddingLeftCss(1)
+
+// padding-left: 0.5rem;
+paddingLeftCss(2)
+
+// padding-left: 10%;
+paddingLeftCss('10%')

snippets/snippets/refactor/ignoreWidth/mvsz.ts

@@ -0,0 +1 @@
+function makePair<F extends number | string, S extends boolean | F>() {}

snippets/snippets/refactor/ignoreWidth/zgvn.ts

@@ -0,0 +1 @@
+type Todo = Readonly<{ id: number; text: string; done: boolean; place: Place }>

snippets/snippets/refactor/lcfe.ts

@@ -0,0 +1,9 @@
+// If the second parameter is number, then that
+// number of spaces is added to the left side
+padLeft('Hello world', 4)
+// → "    Hello world"
+
+// If the second parameter is string, then
+// that string is appended to the left side
+padLeft('Hello world', 'Jim: ')
+// → "Jim: Hello world"

snippets/snippets/refactor/longerWidth/riis.ts

@@ -0,0 +1,19 @@
+/**
+ * Takes a string and adds "padding" to the left.
+ *
+ * If 'padding' is a number, then that number of
+ * spaces is added to the left side.
+ *
+ * If 'padding' is a string, then 'padding' is
+ * appended to the left side.
+ */
+function padLeft(
+  value: string,
+  padding: number | string
+) {
+  if (typeof padding === 'number') {
+    return Array(padding + 1).join(' ') + value
+  } else {
+    return padding + value
+  }
+}

snippets/snippets/refactor/lplh.ts

@@ -0,0 +1 @@
+console.log(1 + 2)

snippets/snippets/refactor/onux.ts

@@ -0,0 +1,37 @@
+function extend<First, Second>(
+  first: First,
+  second: Second
+): First & Second {
+  const result: Partial<First & Second> = {}
+  for (const prop in first) {
+    if (first.hasOwnProperty(prop)) {
+      ;(result as First)[prop] = first[prop]
+    }
+  }
+  for (const prop in second) {
+    if (second.hasOwnProperty(prop)) {
+      ;(result as Second)[prop] = second[prop]
+    }
+  }
+  return result as First & Second
+}
+
+class Person {
+  constructor(public name: string) {}
+}
+
+interface Loggable {
+  log(name: string): void
+}
+
+class ConsoleLogger implements Loggable {
+  log(name) {
+    console.log(`Hello, I'm ${name}.`)
+  }
+}
+
+const jim = extend(
+  new Person('Jim'),
+  ConsoleLogger.prototype
+)
+jim.log(jim.name)

snippets/snippets/refactor/vnfq.ts

@@ -0,0 +1,13 @@
+type Person = { name: string }
+type Loggable = { log: (name: string) => void }
+
+// Use & to make jim BOTH Person AND Loggable
+const jim: Person & Loggable = {
+  name: 'Jim',
+  log: name => {
+    console.log(`Hello, I'm ${name}.`)
+  }
+}
+
+// "Hello, I’m Jim."
+jim.log(jim.name)

snippets/snippets/refactor/xwbz.ts

@@ -0,0 +1,4 @@
+function makePair<
+  F extends number | string,
+  S extends boolean | F
+>() {}

src/components/BubbleQuotes.tsx

@@ -5,7 +5,7 @@ import useTheme from 'src/hooks/useTheme'
 import { allColors } from 'src/lib/theme/colors'
 
 interface BubbleQuoteProps {
-  type: keyof typeof emojiToComponent
+  type?: keyof typeof emojiToComponent
   children: React.ReactNode
   backgroundColor?: keyof typeof allColors
 }
@@ -39,21 +39,23 @@ const BubbleQuotes = ({
             display: flex;
           `}
         >
-          <div
-            css={css`
-              font-size: ${size === 'lg' ? fontSizes(2) : fontSizes(1.6)};
-              margin-right: ${size === 'lg' ? spaces(0.5) : spaces(0.25)};
-              padding-top: ${spaces(0.5)};
+          {type && (
+            <div
+              css={css`
+                font-size: ${size === 'lg' ? fontSizes(2) : fontSizes(1.6)};
+                margin-right: ${size === 'lg' ? spaces(0.5) : spaces(0.25)};
+                padding-top: ${spaces(0.5)};
 
-              ${ns} {
-                padding-top: ${size === 'lg' ? spaces(0) : spaces(0.25)};
-                margin-right: ${size === 'lg' ? spaces(1) : spaces(0.75)};
-                font-size: ${size === 'lg' ? fontSizes(4) : fontSizes(2)};
-              }
-            `}
-          >
-            <Emoji type={type} />
-          </div>
+                ${ns} {
+                  padding-top: ${size === 'lg' ? spaces(0) : spaces(0.25)};
+                  margin-right: ${size === 'lg' ? spaces(1) : spaces(0.75)};
+                  font-size: ${size === 'lg' ? fontSizes(4) : fontSizes(2)};
+                }
+              `}
+            >
+              <Emoji type={type} />
+            </div>
+          )}
           <div
             css={css`
               background: ${colors(backgroundColor)};

src/components/Card.tsx

@@ -12,10 +12,11 @@ export interface CardProps {
   color?: 'default' | 'pink' | 'green' | 'darkGreen'
   slideNumber?: number
   slideCount?: number
-  isLast?: boolean
+  isFirst?: boolean
   title?: React.ReactNode
   heading?: React.ReactNode
   subtitle?: React.ReactNode
+  anchor?: string
   footer?: {
     content: React.ReactNode
     color?: CardProps['color']
@@ -42,19 +43,39 @@ const Card = ({
   children,
   slideNumber,
   slideCount,
-  isLast,
+  isFirst,
   footer,
   heading,
-  subtitle
+  subtitle,
+  anchor
 }: CardProps) => {
-  const { ns, colors, fontSizes, spaces, radii, lineHeights } = useTheme()
+  const {
+    ns,
+    colors,
+    fontSizes,
+    spaces,
+    radii,
+    lineHeights,
+    letterSpacings
+  } = useTheme()
   return (
     <>
+      {!isFirst && (
+        <div
+          id={anchor}
+          css={css`
+            width: 1.25rem;
+            height: 2rem;
+            margin: 0 auto;
+            background: ${colors('paleGreen')};
+          `}
+        />
+      )}
       <div
         css={css`
           position: relative;
-          margin-left: ${spaces('-0.75')};
-          margin-right: ${spaces('-0.75')};
+          margin-left: -0.6rem;
+          margin-right: -0.6rem;
 
           ${ns} {
             margin-left: ${spaces('-1.5')};
@@ -80,7 +101,7 @@ const Card = ({
             <>
               <span
                 css={css`
-                  color: ${colors('white85')};
+                  color: ${colors('white70')};
                 `}
               >
                 Slide{' '}
@@ -94,7 +115,7 @@ const Card = ({
               </span>{' '}
               <span
                 css={css`
-                  color: ${colors('white85')};
+                  color: ${colors('white70')};
                   font-weight: bold;
                 `}
               >
@@ -189,7 +210,7 @@ const Card = ({
                 padding: ${spaces(0.75)};
 
                 ${ns} {
-                  padding-top: ${spaces(1.25)};
+                  padding-top: ${spaces(1)};
                   padding-left: ${spaces(1.5)};
                   padding-right: ${spaces(1.5)};
                   padding-bottom: ${spaces(1)};
@@ -199,21 +220,26 @@ const Card = ({
                 border-bottom-left-radius: ${radii(0.5)};
               `}
             >
+              <h4
+                css={css`
+                  text-align: center;
+
+                  margin: ${spaces(0.25)} 0 ${spaces(0.75)};
+                  line-height: ${lineHeights(0.85)};
+                  font-size: ${fontSizes(0.85)};
+
+                  letter-spacing: ${letterSpacings('wide')};
+                  text-transform: uppercase;
+                  color: ${colors('brown')};
+                `}
+              >
+                Side Note
+              </h4>
               {footer.content}
             </div>
           )}
         </div>
       </div>
-      {!isLast && (
-        <div
-          css={css`
-            width: 1.25rem;
-            height: 2rem;
-            margin: 0 auto;
-            background: ${colors('paleGreen')};
-          `}
-        />
-      )}
     </>
   )
 }

src/components/CardTitleText.tsx

@@ -3,14 +3,14 @@ import { css, jsx } from '@emotion/core'
 import useTheme from 'src/hooks/useTheme'
 
 const CardTitleText = (props: JSX.IntrinsicElements['h3']) => {
-  const { fontSizes, lineHeights, ns, spaces } = useTheme()
+  const { fontSizes, lineHeights, ns, spaces, letterSpacings } = useTheme()
   return (
     <h3
       css={css`
         margin: 0 0 ${spaces(1, true)};
         font-size: ${fontSizes(1.2)};
         line-height: ${lineHeights(1.2)};
-
+        letter-spacing: ${letterSpacings('titleSmall')};
         ${ns} {
           line-height: ${lineHeights(1.4)};
           font-size: ${fontSizes(1.4)};