Refactor article (#17)

* Start refactor page

* Start writing refactor article

* Add emojis

* Wordsmith

* Finish intro

* Start tip 1

* Wordsmith

* Wordsmith

* Slide 2 start

* Refactor

* Continue w/ slide 2

* Wordsmith

* Wordsmith

* Wordsmith

* Simplify

* Slide 2

* Finish tip 1

* Rewrite 1

* Improve slide 2

* Start slide 3

* Remove run button text and simplify

* Rewrite 1 again

* Simplify the conclusion

* Simplify slide 2

* Add prettier

* Finish slide 2

* Simplify slide 1

* Wordsmith

* Change slide 3

* Fix cursor: pointer

* Keep text decoration on read more

* Wordsmith

* ScaryCat

* Wordsmith

* Finish slide 3

* Wordsmith, left align emojiSeparator

* Wordsmith

* Wordsmith, add remaining titles

* Make emojis clickable

* Add remaining cards

* Wordsmith

* Wordsmith

* Wordsmith

* Extra credit

* Revert "Extra credit"

This reverts commit f5aa813.

* Add all emojis

* Update bad example icon

* Start slide 3

* Update description

* Wordsmith

* Simplify

* Add official website doc

* Start slide 3

* Test slide 3

* Continue with slide 3

* Wordsmith

* Wordsmith

* Add comment

* Adjust spacing

* Finish slide 3

* Add rocket

* Update og image

* Highlight refactor

* Highlight text

* Continue with tip 3

* Continue with tip 3

* Continue with tip 3

* Wordsmith

* Add total number of tips

* Remove part 7

* Finish tip 3

* Enhance paddingLeftCss

* Add monkeys

* Revert "Add monkeys"

This reverts commit cc40ce7.

* Start slide 6

* Finish tip 5

* White70

* Wordsmith

* Wordsmith

* Wordsmith

* Continue with tip 6

* Continue with slide 7

* Finish tip 6

* Done with first draft

* Add hr

* Add a note about translation

* Update README.md

* Wordsmith

* Finish tip 4

* Add blockquote

* Move ...

* Wordsmith conclusion

* Wordsmith tip 6

* Wordsmith tip 3

* Finish wordsmith

* Adjust spacing

Author: chibicode

.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)

public/images/og-refactor.png

@@ -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')
 

public/images/refactor/asOfWriting.png

@@ -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"

public/images/refactor/tsdoc.gif

@@ -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/bin/generateSnippetsBundle.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/bxzx.ts

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