contents: add interviewer cheatsheet

contents/interviewer-cheatsheet.md

@@ -0,0 +1,75 @@
+---
+id: interviewer-cheatsheet
+title: Cheatsheet (Interviewer)
+---
+
+This is a straight-to-the-point, distilled list of technical interview Do's and Don'ts **for interviewers**, mainly for algorithmic interviews. Some of these may apply to only phone screens or whiteboard interviews, but most will apply to both. I revise this list before each of my interviews as an interviewer to remind myself of them and eventually internalized all of them to the point I do not have to rely on it anymore.
+
+**If you are a candidate you probably do not need to know this section well. You may read this to get a better sense of what an interviewer is supposed to do during an interview.**
+
+#### Legend
+
+- ✅ = Do
+- ❌ = Don't
+- ⚠️ = Situational
+
+### Before interview
+
+|  | Things |
+| --- | --- |
+| ✅ | Make sure your surroundings are well-lit. |
+| ✅ | Find a quiet environment with good Internet connection. |
+| ✅ | Ensure webcam and audio are working. Test that your VC app is working well. |
+| ✅ | Prepare two to three questions and be familiar with the different approaches for solving the questions. |
+| ✅ | Familiarize yourself with the coding environment (CoderPad/CodePen). Set up the coding shortcuts, turn on autocompletion, tab spacing, etc. |
+
+### Introduction
+
+|  | Things |
+| --- | --- |
+| ✅ | Check if candidate wants to use the restroom or take a break. |
+| ✅ | Give an overview of the interview format (introduction, duration, programming languages available, 5 min at the end for Q&A). |
+| ✅ | Do a self-introduction and get the candidate to introduce themselves. |
+| ✅ | Explain to candidate that they do not have to finish all questions and you might interrupt them abruptly. |
+| ❌ | Allow the candidate to spend too long introducing themselves. |
+
+### Upon delivering the question
+
+|  | Things |
+| --- | --- |
+| ✅ | Ask if the candidate has seen the question before. |
+| ✅ | Give a small example for the question and the desired output. |
+| ✅ | Get the candidate to talk through the solution first before diving into coding. |
+| ✅ | Provide hints where appropriate. |
+| ✅ | If candidate is still stuck after providing hints, provide the solution and move to coding so that you can get coding signals. |
+
+### During coding
+
+|  | Things |
+| --- | --- |
+| ✅ | If whiteboard interview, stand alongside candidate but also giving them space, instead of being distant, e.g seated down. |
+| ✅ | Take note of all the positive and negative signals. |
+| ❌ | Check the time in an overly-obvious manner. |
+
+### After coding
+
+|  | Things |
+| --- | --- |
+| ✅ | Ask for candidate to provide test cases and run through the code with them. |
+| ✅ | Point out edge cases candidate missed and ask the candidate to address them. |
+| ✅ | Ask for time complexity and space analysis. |
+| ✅ | Preserve the code somewhere - take a picture or copy the code out. |
+| ✅ | Stop the candidate when there is 5 minutes left. e.g. ("I'll stop you here and let's go to the next section") |
+
+### Wrap up
+
+|  | Things |
+| --- | --- |
+| ✅ | Allow candidate to ask questions and answer them to the best of your ability. |
+| ✅ | Thank the candidate and wish them all the best. |
+
+### Post interview
+
+|     | Things                                                    |
+| --- | --------------------------------------------------------- |
+| ✅  | Write feedback as soon as possible to not forget details. |

website/sidebars.js

@@ -21,6 +21,7 @@ module.exports = {
           'cheatsheet',
           'coding-signals',
           'mock-interviews',
+          'interviewer-cheatsheet',
         ],
       },
       {

website/src/pages/index.js

@@ -140,9 +140,48 @@ function Home() {
           className={classnames(
             'margin-vert--lg',
             'padding-vert--lg',
-            'text--center',
             styles.sectionAlt,
           )}>
+          <div className="container">
+            <div className="row">
+              <div className="col col--6 col--offset-3">
+                <h2
+                  className={classnames(
+                    'margin-vert--lg',
+                    'text--center',
+                    styles.sectionTitle,
+                  )}>
+                  Success Stories
+                </h2>
+                {successStories.map((user) => (
+                  <div className="card margin-vert--lg" key={user.name}>
+                    <div className="card__body">
+                      <p className={styles.quote}>"{user.quote}"</p>
+                    </div>
+                    <div className="card__header">
+                      <div className="avatar">
+                        <img className="avatar__photo" src={user.thumbnail} />
+                        <div className="avatar__intro">
+                          <h4 className="avatar__name">{user.name}</h4>
+                          <small className="avatar__subtitle">
+                            {user.title}
+                          </small>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div
+          className={classnames(
+            'margin-vert--lg',
+            'padding-vert--lg',
+            'text--center',
+          )}>
           <div className="container">
             <div className="row">
               <div className="col col--8 col--offset-2">
@@ -212,40 +251,6 @@ function Home() {
             </div>
           </div>
         </div>
-        <div className={classnames('margin-vert--lg', 'padding-vert--lg')}>
-          <div className="container">
-            <div className="row">
-              <div className="col col--6 col--offset-3">
-                <h2
-                  className={classnames(
-                    'margin-vert--lg',
-                    'text--center',
-                    styles.sectionTitle,
-                  )}>
-                  Success Stories
-                </h2>
-                {successStories.map(user => (
-                  <div className="card margin-vert--lg" key={user.name}>
-                    <div className="card__body">
-                      <p className={styles.quote}>"{user.quote}"</p>
-                    </div>
-                    <div className="card__header">
-                      <div className="avatar">
-                        <img className="avatar__photo" src={user.thumbnail} />
-                        <div className="avatar__intro">
-                          <h4 className="avatar__name">{user.name}</h4>
-                          <small className="avatar__subtitle">
-                            {user.title}
-                          </small>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        </div>
       </div>
     </Layout>
   );