add keyboard post

kayleegeorge · Dec 30, 2024 · 10019ca · 10019ca
1 parent 511150c
commit 10019ca
Show file tree

Hide file tree

Showing 19 changed files with 227 additions and 0 deletions.
diff --git a/blog/keyboard-build.html b/blog/keyboard-build.html
@@ -0,0 +1,201 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+    <link rel="stylesheet" href="../style.css" />
+ </head>
+
+ <body>
+    <a href="/blog">Back to all writings</a>
+    <div class="blog-header">
+      Keyboard #1
+    </div>
+    <div class="blog-date">12/30/2024</div>
+
+    <div class="spacer"></div>
+    <div>
+      <p>
+        I'm a casual keyboard hobbyist who got into the craft two and a half years ago. Back when I was an intern at Uniswap, I started nerding out over keyboards with my
+        co-worker and co-intern and that evolved into a company-wide mechanical keyboard building workshop (led by the Team Clickity Clack trio). 
+        <br/>
+        <br/> 
+        This guide is an adapted version of that workshop. If you want to build your first mechanical keyboard, this is a great place to start because it's approachable and
+        you'll still get a really awesome keyboard out of it. 
+        <br/>
+        <br/>
+    </p>
+
+    <h3>I. Anatomy of a Keyboard</h3>
+    <div class="align-center">
+        <img src="../public/keyboard/parts-of-a-keyboard.jpg" width="500px"/>
+    </div>
+    This is the full stack of a mechanical keyboard. For your first keyboard, it's nice to choose 
+    a build pack that includes everything except the switches and the keycaps. This allows you to
+    go pretty far with customizing how your board looks and feels without too much effort and a reasonable price. 
+    <br/>
+    <br/>
+    That leaves four main design decisions: (1) size, (2) casing, (3) switches, and (4) keycaps. After that, it's bonus mods!
+    <br/>
+    <br/>
+
+    <div class="small-title">
+        Size
+    </div>
+
+    The different keyboard layouts are 60, 65, and 87. 
+    <div class="align-center">
+        <img src="../public/keyboard/keyboard-size.png" width="500px"/>
+    </div>
+    I'd say most people prefer the 65 because it's most similar to your laptop's built-in keyboard layout. 
+    <br/>
+    <br/>
+    The main difference between the 60 and the 65 is the arrow keys.  
+    As you can see, the 60 layout doesn't have arrow keys on layer 0 (i.e. what is written on the keycaps). Instead, you have to access them on layer 1 using the MO(1) key or Fn key. 
+    If you want to <i>visually</i> see your arrow keys, go with the 65.
+    <br/>
+    <br/>
+    Personally, I prefer the 60 layout. If you're a Vim user like me, the 60 layout is actually really nice because you're not using your arrow keys anyways so I feel like it's overall most efficient and compact. 
+    <br/>
+    <br/>
+
+    <div class="small-title">
+    Casing
+    </div>
+    Once you've chosen a size, it's time to choose what casing you want. This includes the main case plus things like the gaskets, plate, and PCB. 
+    <br/>
+    <br/>  
+    I use the term "casing" here because you can either choose a build that already has the bulk of this stack or you can choose to get all these
+    parts separately — it's up to you. But since this is (most likely) your first keyboard, I'd say choose the former. 
+    <br/>
+    <br/> 
+    I recommend getting a Bakaneko (<a href="https://cannonkeys.com/products/bakeneko-60">Bakaneko60</a>, <a href="https://cannonkeys.com/products/bakeneko65">Bakaneko65</a>). It's high quality and easy to assemble, making it a fantastic first board build.
+    These are also nice because while it comes with the bulk of the board stack, you can still change out specific parts if you really want (e.g. using different stabilizers). 
+    <br/>
+    <br/>
+    The Bakaneko Series come with hotswap PCB, which means you can insert and remove switches without soldering it onto the circuit board inside. Soldered PCB means you have to manually
+    solder each switch in place, which has benefits like moer reliable electrical connections but is more difficult to assemble and prone to error. 
+    I'd stick to hotswap for a fun first build.
+    <br/>
+    <br/>
+    For an 87, something like the <a href="https://novelkeys.com/products/nk87-aluminum-edition">NK87</a> is a good choice (I don't really recommend the 87 for most people though, it's quite bulky).
+    <br/>
+    <br/>
+    If you want to remap keys or are getting a 60 layout, make sure to choose a board that is VIA compatible (easy key remapping software).
+    <br/>
+    <br/>
+    <div class="small-title">
+       Switches 
+    </div>
+    My favorite part of the build... switches! Switches are responsible for the fundamental sound and feel of your board. 
+    <br/>
+    <br/>
+    There are three types of switches: linear, tactile, and clicky.
+    <div class="align-center">
+        <img src="../public/keyboard/switches.png" width="500px"/>
+    </div>
+    The reason why the clicky switch has a big X over it is because it's really noisy. It's fine if you want this to be your home keyboard but
+    it's certainly too loud for an in-office keyboard.
+    <br/>
+    <br/> 
+    So personally, I think you should choose between linear and tactile. The main difference is their "smoothness" — linear has no resistance on the 
+    downward stroke vs. tactile has a resistance bump (which offers a more distinct sensory experience). 
+    One is not "better" than the other; it's simple personal preference. The best way to know which switch is right for you is by trying them both 
+    and seeing which you like. 
+    <br/>
+    <br/>
+    If you can't compare switches by feel, here's a helpful <a href="https://www.youtube.com/watch?v=MbL9j06siA0">video</a> comparing switch sounds. 
+    <br/>
+    <br/>
+    <strong>My Recommendations:</strong>
+    <div class="small-spacer"></div>
+    <ul class="bullets">
+        <li>Tactile: Outemu Silent Sky, Boba u4t (68g is thockier), Zealios, Purple Pandas (<a href="https://www.youtube.com/watch?v=D-qpw4_QTM0">video comparison</a>)</li>
+        <li>Linear: Gatreon Milky Yellow Pro (<a href="https://www.youtube.com/watch?v=Z01pisakHDQ&t=5s">video comparison</a>)</li>
+    </ul>
+    <br/>
+
+    <div class="small-title">
+       Keycaps 
+     </div>
+    The keycaps you choose are mainly for aesthetic but there are also different profiles. Each is a different typing feel and experience. 
+    <br/>
+    <br/>
+    <div class="align-center">
+        <img src="../public/keyboard/keycaps.png" width="500px"/>
+    </div> 
+    <br/>
+    <br/>
+    I'd say sculpting is better than no sculpting (i.e. flat keys like a laptop built-in keyboard). The difference in heights and form feel and look nicer in my opinion.
+    <br/>
+    <br/>
+    Cherry and OEM are both cylindrical shape while SA is spherical and high profile. I think SA is a bit too tall for most people but it really depends on your preference (e.g. if you have larger hands for example).
+    DSA is uniform in height and low profile — which people say is great for gaming. 
+    Again, it's a personal choice.
+    <br/>
+    <br/>
+    You can buy keycaps anywhere (NovelKeys, aliexpress, etc). 
+    <br/>
+    <br/>
+    <h3>II. Mods</h3> 
+    You can go crazy with mods but I think the highest value-adding optimization is lubing your switches.
+    <br/>
+    <br/>
+    To lube your switches, you essentially need to open up each switch, add lube to certain parts, and then reassemble the switch. Do this before starting to assemble your keyboard.
+    <br/>
+    <br/> 
+    Steps:
+    <div class="small-spacer"></div>
+    1. Open all your switches. <br/>
+    2. Take your brush and add a litle bit of lube to it (thin coat, not globs). <br/>
+    3. Brush one end of each spring. <br/>
+    4. Brush the bottom housing (the two rails and the leaf). <br/>
+    5. Put your spring on your bottom housing. <br/>
+    6. Add a bit more lube to your brush. <br/>
+    7. Lube your stem (swipe each side of the stem twice). <br/>
+    8. Put the stem on the spring and bottom housing, close with the top housing. <br/>
+    <br/>
+    Watch this <a href="https://www.youtube.com/watch?v=_BG-8QrA-6c">video</a> for a straightforward tutorial. Here is another comprehensive <a href="https://docs.google.com/document/d/1MXrx8ddxSNVBCHFjNrUMt-8BxNHIVanFtn5v7nriAzg/edit?usp=sharing">guide</a> with pictures (brushing your springs + full-lube method). 
+    <br/>
+    <br/>
+    Another simple mod you can do is clipping and lubing your stabilizers (<a href="https://www.youtube.com/watch?v=usNx1_d0HbQ">video</a>). <a href="https://www.youtube.com/watch?v=aURfK9qBgmY">Here</a> are some other good mods if you're up for it (but not necessary for your first build).  
+    <br/>
+    <br/> 
+    <h3>III. Assembly</h3>
+    Now that you have all the necessary components, it's time to assemble your board. 
+    <br/>
+    <br/>
+    Different keyboards have different builds but for the sake of example, here is the Bakaneko assembly:
+    <div class="align-col">
+        <img src="../public/keyboard/prep.png" width="500px"/>
+        <img src="../public/keyboard/daughterboard.png" width="500px"/>
+        <img src="../public/keyboard/stabilizers.png" width="500px"/>
+        <img src="../public/keyboard/stabilizers-2.png" width="500px"/> 
+    </div> 
+
+   Now that you have your board, you can start adding your switches: 
+   <div class="align-col">
+        <img src="../public/keyboard/switches-board.png" width="500px"/> 
+        <img src="../public/keyboard/add-switches.png" width="500px"/>
+        <img src="../public/keyboard/push-switches.png" width="500px"/>
+        <img src="../public/keyboard/switch-gang.png" width="500px"/>
+   </div>
+   Next, navigate to <a href="https://usevia.app/#/test">VIA</a>. Go to the key tester
+   and test all of your switches to make sure they register inputs. You can also use VIA to remap your keys.
+
+   <div class="align-col">
+    <img src="../public/keyboard/broken.png" width="500px"/> 
+    <img src="../public/keyboard/rescrew.png" width="500px"/> 
+    <img src="../public/keyboard/keycaps-add.png" width="500px"/> 
+    <img src="../public/keyboard/remap.png" width="500px"/> 
+    <img src="../public/keyboard/congrats.png" width="500px"/> 
+   </div>
+   <br/>
+
+    <h3>IV. Appendix</h3>
+    If you don't want to build your own keyboard, check out <a href="https://www.reddit.com/r/mechmarket/">r/mechmarket</a> for people selling their old keyboards. Out-of-the-box keyboards
+    that I like are HHKBs. I really like the compact 60 layout and feel of the topre (see comparison of HHKBs <a href="https://seongminpark.com/hhkbs-compared/">here</a> and <a href="https://materialjournal.com/blog/hhkb-hybrid-review">here</a>). 
+    <br/>
+    <br/>
+    Enjoy your keyboard!
+    </div>
+ </body>
+</html>
diff --git a/public/keyboard/add-switches.png b/public/keyboard/add-switches.png
diff --git a/public/keyboard/broken.png b/public/keyboard/broken.png
diff --git a/public/keyboard/congrats.png b/public/keyboard/congrats.png
diff --git a/public/keyboard/daughterboard.png b/public/keyboard/daughterboard.png
diff --git a/public/keyboard/keyboard-size.png b/public/keyboard/keyboard-size.png
diff --git a/public/keyboard/keycaps-add.png b/public/keyboard/keycaps-add.png
diff --git a/public/keyboard/keycaps.png b/public/keyboard/keycaps.png
diff --git a/public/keyboard/parts-of-a-keyboard.jpg b/public/keyboard/parts-of-a-keyboard.jpg
diff --git a/public/keyboard/prep.png b/public/keyboard/prep.png
diff --git a/public/keyboard/push-switches.png b/public/keyboard/push-switches.png
diff --git a/public/keyboard/remap.png b/public/keyboard/remap.png
diff --git a/public/keyboard/rescrew.png b/public/keyboard/rescrew.png
diff --git a/public/keyboard/stabilizers-2.png b/public/keyboard/stabilizers-2.png
diff --git a/public/keyboard/stabilizers.png b/public/keyboard/stabilizers.png
diff --git a/public/keyboard/switch-gang.png b/public/keyboard/switch-gang.png
diff --git a/public/keyboard/switches-board.png b/public/keyboard/switches-board.png
diff --git a/public/keyboard/switches.png b/public/keyboard/switches.png
diff --git a/style.css b/style.css
@@ -48,6 +48,10 @@ a:visited {
   height: 24px;
 }
 
+.small-spacer {
+  height: 8px;
+}
+
 .blog-header {
   display: flex;
   flex-direction: column;
@@ -68,4 +72,26 @@ a:visited {
   flex-direction: column;
   gap: 10px;
   padding: 20px 0;
+}
+
+.align-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 16px;
+}
+
+.align-col {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  justify-content: center;
+  align-items: center;
+  margin: 16px;
+}
+
+.small-title {
+  font-size: 17px;
+  margin: 6px 0px;
+  text-decoration: underline;
 }