Jekyll2023-11-05T00:20:13+00:00https://mattj.io/feed.xmlMatt JosephMatt Joseph - Engineering leader, geek, photographer, cook, creator, and more.
Quirks of the Page Visibility API2023-02-01T00:00:00+00:002023-02-01T00:00:00+00:00https://mattj.io/posts/page-visibility-api<h1 id="quirks-of-the-page-visibility-api">Quirks of the Page Visibility API</h1>
<p>Wednesday, February 1, 2023</p>
<p><a href="/posts/">Click here to go to all posts</a>.</p>
<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API" target="_blank" rel="noopener">Page Visibility API</a> is a useful tool for web developers to detect whether a page is visible to a user or not, as well as understand when transitions between those states take place.</p>
<p>When using this API, it is important to understand the limitations in what you can/cannot detect. There are many situations where a developer might consider a page to be “hidden” yet the API will not detect the state as such.</p>
<p>I did some lightweight testing on a few operating systems and browsers, covering scenarios on each that are common for users.</p>
<h2 id="testing-methodology">Testing methodology</h2>
<p>This is not a rigorous lab test. There is a convenient testing page located <a href="https://testdrive-archive.azurewebsites.net/Performance/PageVisibility/Default.html" target="_blank" rel="noopener">here</a>.</p>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2023-02-01-page-visibility/page-visibility-api.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2023-02-01-page-visibility/page-visibility-api.avif" />
<source type="image/jpeg" srcset="/images/posts/2023-02-01-page-visibility/page-visibility-api.jpg" />
<img src="/images/posts/2023-02-01-page-visibility/page-visibility-api.jpg" width="1000" height="750" alt="Screenshot of the Page Visibility API tool" class="responsive" />
</picture>
</a>
<figcaption class="center">Screenshot of the Page Visibility API tool</figcaption>
</figure>
</div>
<p>The page was visually inspected to ascertain whether or not the visibility change was detected. In this demo, green segments of the line indicate a visible page and red segments indicate a hidden page, according to the Page Visibility API.</p>
<h2 id="testing">Testing</h2>
<h3 id="macos-131">macOS 13.1</h3>
<p><strong>Chrome 109</strong></p>
<ul>
<li><strong>Detected via Page Visibility API</strong>: Browser window minimized, browser window covered by another window that is larger, tab hidden in an active browser window, docking/undocking a tab to a browser window, switched to a different desktop,</li>
<li><strong>Not detected via Page Visibility API</strong>: Browser window covered by another browser window that is the same size or smaller, show desktop via F11 or swipe on touchpad, opening Launchpad, opening Mission Control, dragging the window in Mission Control, browser dialogs (print, save, etc.), during animation to/from full screen</li>
</ul>
<p><strong>Safari 16.2</strong></p>
<ul>
<li><strong>Detected via Page Visibility API</strong>: Browser window minimized, browser window covered by another window that is larger, tab hidden in an active browser window, switched to a different desktop, during animation to/from full screen</li>
<li><strong>Not detected via Page Visibility API</strong>: Browser window covered by another browser window that is the same size or smaller, show desktop via F11 or swipe on touchpad, opening Launchpad, opening Mission Control, dragging the window in Mission Control, browser dialogs (print, save, etc.), docking/undocking a tab to a browser window, tab overview</li>
</ul>
<h3 id="windows-10-pro">Windows 10 Pro</h3>
<p><strong>Chrome 109</strong></p>
<ul>
<li><strong>Detected via Page Visibility API</strong>: Browser window minimized, browser window covered by another window that is larger, browser window covered by another browser window that is the same size, tab hidden in an active browser window, docking/undocking a tab to a browser window</li>
<li><strong>Not detected via Page Visibility API</strong>: Browser window covered by another browser window that is smaller, browser dialogs (print, save, etc.), during animation to/from full screen, during Task View</li>
</ul>
<h3 id="android-13">Android 13</h3>
<p><strong>Chrome 109</strong></p>
<ul>
<li><strong>Detected via Page Visibility API</strong>: Another app is active on the screen, another Chrome tab is active on the screen, screen is off, Chrome tab overview as an inactive tab, split screen: entering split screen, going to other features in Chrome (Downloads, Settings, etc.)</li>
<li><strong>Not detected via Page Visibility API</strong>: Android overview mode, Chrome tab overview while the active tab, split screen: redrawing when split changes, split screen: exiting split screen, Assistant overlay on screen, URL entry mode, during the swipe between tabs, while covered by the notification shade</li>
</ul>
<h3 id="ipad-os-163">iPad OS 16.3</h3>
<p><strong>Chrome 109</strong></p>
<ul>
<li><strong>Detected via Page Visibility API</strong>: Another app is active on the screen, another Chrome tab is active on the screen, screen is off, Chrome tab overview (all times), going to other features in Chrome (Downloads, Settings, etc.)</li>
<li><strong>Not detected via Page Visibility API</strong>: Some dialogs (Bookmarks, Reading List, Password Manager, etc.), iPad OS overview screen (swipe up), Control Panel covering screen, Notification Center down, split view: selecting another app, split view: redrawing when split changes, split view: exiting split view, accessing camera from the Notification Center</li>
</ul>
<p><strong>Safari 16.3</strong></p>
<ul>
<li><strong>Detected via Page Visibility API</strong>: Another app is active on the screen, another Safari tab is active on the screen, screen is off, Safari tab overview as an inactive tab</li>
<li><strong>Not detected via Page Visibility API</strong>: Some dialogs (Bookmarks, Reading List, Password Manager, etc.), iPad OS overview screen (swipe up), Control Panel covering screen, Notification Center down, split view: selecting another app, split view: redrawing when split changes, split view: exiting split view, Safari tab overview as the active tab, accessing camera from the Notification Center</li>
</ul>
<p><strong>Note</strong>: for testing purposes, I did not use an iOS device, but iPad OS is a reasonable proxy for what might be encountered on iOS.</p>
<h2 id="noteworthy-observations">Noteworthy observations</h2>
<p>There are a few interesting results in this testing:</p>
<ul>
<li>On iPad OS, you can access the camera and take photos from the Notification Center, and none of this will be detected as hiding the page in Chrome or Safari.</li>
<li>Operating system-level overview generally isn’t considered hiding the page.</li>
<li>Whether or not a page will be considered “hidden” in the tab overview depends on the tab’s active/inactive state and which browser you’re using.</li>
<li>Split screen/split view has OS-specific nuances.</li>
</ul>
<h2 id="video-demo-on-android">Video demo on Android</h2>
<p>I recorded a demo of some of the cases I tested on Android 13:</p>
<div class="center width30">
<figure class="fill-parent">
<video playsinline="" autoplay="" loop="" muted="" width="332" height="720" class="responsive" title="Demo of the Page Visibility API on Android 13">
<source src="/images/posts/2023-02-01-page-visibility/demo_video_vp9.webm" type="video/webm" />
<source src="/images/posts/2023-02-01-page-visibility/demo_video_h264.mp4" type="video/mp4" />
<div fallback="">
<p>This browser does not support the video element.</p>
</div>
</video>
<figcaption class="center">Demo of the Page Visibility API on Android 13</figcaption>
</figure>
</div>Exploring the quirks of the Page Visibility API across platforms and browsers.Talk - Contributing to open source: Taking your first (empathetic) step2022-04-07T00:00:00+00:002022-04-07T00:00:00+00:00https://mattj.io/posts/comcast-sstx-open-source-presentation<h1 id="talk---contributing-to-open-source-taking-your-first-empathetic-step">Talk - Contributing to open source: Taking your first (empathetic) step</h1>
<p>Thursday, April 7, 2022</p>
<p><a href="/posts/">Click here to go to all posts</a>.</p>
<p>On April 7, 2022, I gave a talk titled <em>Contributing to open source: Taking your first (empathetic) step</em> at an internal Comcast event called SSTx, which is an event for the Software Strategy & Transformation (SST) organization. The theme of the event was “Breaking out of your shell”.</p>
<div class="center width70">
<figure class="fill-parent">
<a href="/dl/2022-04-07/2022-04-07%20-%20Matt%20Joseph%20-%20Contributing%20to%20open%20source%20Taking%20your%20first%20(empathetic)%20step.pdf" target="_blank" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2022-04-07/2022-04-07-slides-title.avif" />
<source type="image/jpeg" srcset="/images/posts/2022-04-07/2022-04-07-slides-title.jpg" />
<img src="/images/posts/2022-04-07/2022-04-07-slides-title.jpg" width="1920" height="1080" alt="Title slide of the presentation" class="responsive" />
</picture>
</a>
<figcaption class="center">Title slide of the presentation</figcaption>
</figure>
</div>
<p>The slides from this talk are available as <a href="/dl/2022-04-07/2022-04-07%20-%20Matt%20Joseph%20-%20Contributing%20to%20open%20source%20Taking%20your%20first%20(empathetic)%20step.pdf" target="_blank">a PDF download</a>.</p>
<p>Note: these slides are a visual aid intended to accompany a spoken talk, so they may not include the full context at all times.</p>Talk - Contributing to open source: Taking your first (empathetic) stepCustom foam for the Drop CTRL keyboards (SVG file download)2021-12-29T00:00:00+00:002021-12-29T00:00:00+00:00https://mattj.io/posts/drop-ctrl-foam-layout<h1 id="custom-foam-for-the-drop-ctrl-keyboards-svg-file-download">Custom foam for the Drop CTRL keyboards (SVG file download)</h1>
<p>Wednesday, December 29, 2021</p>
<p><a href="/posts/">Click here to go to all posts</a>.</p>
<p>I decided to create custom foam for the Drop CTRL high profile and Drop CTRL low profile cases that I had on hand. I have previously hand-cut foam, but to speed things up, I decided to laser cut the foam.</p>
<ul>
<li>Material: 3mm EVA foam (you can probably use 4mm foam but with different speed/power settings)</li>
<li>Laser settings on a 100w CO<sub>2</sub> laser:
<ul>
<li>Cutting: 70mm/s 15% power</li>
<li>Engraving (text): 250mm/s 10% power</li>
</ul>
</li>
<li>Software used: Inkscape and Lightburn</li>
</ul>
<p><strong>NOTE: I designed these using Drop CTRL keyboards purchased in 2020. Drop may change the design of these keyboards in the future and these files may no longer be accurate.</strong></p>
<h2 id="svg-downloads">SVG downloads</h2>
<p>I chose to design my own layouts for the foam. I did not find any online that met my requirements.</p>
<p>These SVGs are available for you to use to cut your own foam. I designed these layouts based on the physical keyboards and my handy calipers. The SVGs are licensed under a <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>.</p>
<p>By downloading these files, you agree to the CC BY-NC-SA 4.0 license. If you use or modify these files, link to this page.</p>
<ul>
<li><a href="/dl/2021-12-29-foam/Drop%20CTRL%20High%20Profile%20Case%20Foam.svg" target="_blank">Download the Drop CTRL High Profile Case Foam Layout</a></li>
<li><a href="/dl/2021-12-29-foam/Drop%20CTRL%20High%20Profile%20Plate%20Foam.svg" target="_blank">Download the Drop CTRL High Profile Plate Foam Layout</a></li>
<li><a href="/dl/2021-12-29-foam/Drop%20CTRL%20Low%20Profile%20Case%20Foam.svg" target="_blank">Download the Drop CTRL Low Profile Case Foam Layout</a></li>
<li><a href="/dl/2021-12-29-foam/Drop%20CTRL%20Low%20Profile%20Plate%20Foam.svg" target="_blank">Download the Drop CTRL Low Profile Plate Foam Layout</a></li>
</ul>
<h2 id="end-result">End result</h2>
<p>The foam turned out decently. It’s not perfect by any means, but it does the job. In particular, the plate foam is challenging to design due to the additional wavy mid-plate cutouts needed.</p>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-12-29-foam/CTRL-Foam-03.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-29-foam/CTRL-Foam-03.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-29-foam/CTRL-Foam-03.jpg" />
<img src="/images/posts/2021-12-29-foam/CTRL-Foam-03.jpg" width="3000" height="2000" alt="Plate foam in the Drop CTRL High Profile" class="responsive" />
</picture>
</a>
<figcaption class="center">Plate foam in the Drop CTRL High Profile</figcaption>
</figure>
</div>
<p>The hotswap sockets worked well.</p>
<div class="flex-horizontal">
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-29-foam/CTRL-Foam-01.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-29-foam/CTRL-Foam-01.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-29-foam/CTRL-Foam-01.jpg" />
<img src="/images/posts/2021-12-29-foam/CTRL-Foam-01.jpg" width="3000" height="2000" alt="Case foam in the Drop CTRL High Profile" class="responsive" />
</picture>
</a>
<figcaption class="center">Case foam in the Drop CTRL High Profile</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-29-foam/CTRL-Foam-02.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-29-foam/CTRL-Foam-02.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-29-foam/CTRL-Foam-02.jpg" />
<img src="/images/posts/2021-12-29-foam/CTRL-Foam-02.jpg" width="3000" height="2000" alt="Case foam in the Drop CTRL High Profile - no diffuser" class="responsive" />
</picture>
</a>
<figcaption class="center">Case foam in the Drop CTRL High Profile - no diffuser</figcaption>
</figure>
</div>
</div>
<div class="flex-horizontal">
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-29-foam/CTRL-Foam-04.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-29-foam/CTRL-Foam-04.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-29-foam/CTRL-Foam-04.jpg" />
<img src="/images/posts/2021-12-29-foam/CTRL-Foam-04.jpg" width="3000" height="2000" alt="Plate foam in the Drop CTRL High Profile" class="responsive" />
</picture>
</a>
<figcaption class="center">Plate foam in the Drop CTRL High Profile</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-29-foam/CTRL-Foam-05.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-29-foam/CTRL-Foam-05.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-29-foam/CTRL-Foam-05.jpg" />
<img src="/images/posts/2021-12-29-foam/CTRL-Foam-05.jpg" width="3000" height="2000" alt="Plate foam by itself" class="responsive" />
</picture>
</a>
<figcaption class="center">Plate foam by itself</figcaption>
</figure>
</div>
</div>
<p>You’ll notice that the pieces of foam in the middle of the bottom case are not pictured, but they are included in the layout file. For the low profile version of the keyboard, the foam is very similar, but there are differences.</p>A post that covers custom laser-cut foam for the Drop CTRL keyboards and includes SVG downloads for the layouts.Modding the $35 Redragon K552 TKL (80%) keyboard2021-12-18T00:00:00+00:002021-12-18T00:00:00+00:00https://mattj.io/posts/redragon-k552-mod<h1>Modding the $35 Redragon K552 TKL (80%) keyboard</h1>
<p>Saturday, December 18, 2021</p>
<p><a href="/posts/">Click here to go to all posts</a>.</p>
<p><em>With several modifications, you can turn the Redragon K552 TKL (80%) into a pretty solid keyboard</em></p>
<p><strong>Table of contents</strong></p>
<ul id="markdown-toc">
<li><a href="#introduction" id="markdown-toc-introduction">Introduction</a></li>
<li><a href="#starting-point" id="markdown-toc-starting-point">Starting point</a></li>
<li><a href="#the-mods" id="markdown-toc-the-mods">The mods</a></li>
<li><a href="#parts-and-prerequisites" id="markdown-toc-parts-and-prerequisites">Parts and prerequisites</a> <ul>
<li><a href="#digital-files" id="markdown-toc-digital-files">Digital files</a></li>
</ul>
</li>
<li><a href="#detachable-usb-cable-modification" id="markdown-toc-detachable-usb-cable-modification">Detachable USB cable modification</a></li>
<li><a href="#design-modifications" id="markdown-toc-design-modifications">Design modifications</a></li>
<li><a href="#finished-board-and-sound-test" id="markdown-toc-finished-board-and-sound-test">Finished board and sound test</a></li>
<li><a href="#thoughts-and-future-modifications" id="markdown-toc-thoughts-and-future-modifications">Thoughts and future modifications</a></li>
</ul>
<h2 id="introduction">Introduction</h2>
<div class="center width70">
<figure class="fill-parent">
<div class="videowrapper">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/gCaAEuVqOsQ" title="Sound test video on YouTube" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>
<figcaption class="center">Before and after sound test</figcaption>
</figure>
</div>
<p>The Redragon K552 is an extremely popular, medium-low cost mechanical keyboard. It comes in a few variations with different mechanical switches and LED configurations.</p>
<p>“Modding” a mechanical keyboard means a variety of things in the keyboard community. In the context of this post, I’m primarily talking about design modifications that don’t change the features of the keyboard. There’s one exception to that, which you’ll note later.</p>
<p>There are likely other—perhaps better—ways to categorize the keyboard experience, but let’s work with this for now!</p>
<p>I decided to start with this medium-low cost keyboard and to try to improve it based on mods I’ve performed on other keyboards, as well as one that I’ve never done before. Note: I’m describing this as medium-low cost as there are certainly less expensive keyboards (e.g., $10) and way more expensive keyboards ($200-2000+).</p>
<h2 id="starting-point">Starting point</h2>
<p>I chose to purchase the linear switch (Red) version of this keyboard with RGB LED lighting. You can find it via this (non-affiliate) <a href="https://smile.amazon.com/gp/product/B016MAK38U/" target="_blank" rel="noopener">Amazon Smile link</a>. Generally, this keyboard goes for about $35. Previously, it has dropped to $20 during sales and I encourage you to check second-hand sites like eBay, as it seems to go for as low as $10-15.</p>
<p>Out of this box, this keyboard has a couple really noticable issues:</p>
<ul>
<li>It has an attached USB cable. Design aside, this means that you can’t pick a cable of the ideal length for your setup and, should something happen to the cable, makes it so you cannot replace it easily.</li>
<li>It doesn’t sound great. This keyboard uses Outemu Red switches.</li>
</ul>
<p>The good points about this keyboard:</p>
<ul>
<li>It uses standard plate-mount stabilizers. Other, more expensive keyboards that I’ve modded, such as the Das Keyboard, use Costar stabilizers, which is less ideal.</li>
<li>It is pretty easy to open, as it uses only Phillips-head screws.</li>
<li>It has a metal switch plate, which, while not particularly amazing, is better than lower-quality plastic one.</li>
</ul>
<p>The mixed points about this keyboard:</p>
<ul>
<li>The switches are <em>sort of</em> hotswap. Specifically, it uses tight sockets soldered to the PCB that only work with Outemu switches, as their metal legs are thinner than other MX-style switches.</li>
</ul>
<h2 id="the-mods">The mods</h2>
<p>Most importantly, I wanted to address the lack of removable USB cable functionality. More on that later!</p>
<p>I also chose to do many common design modifications:</p>
<ul>
<li>Add silicon to the bottom case to create a heavier feel and dampen the sound.</li>
<li>Lubricate and modify the stabilizers to create a smoother feel and quieter sound.</li>
<li>Place pads on the PCB to dampen the sound of the stabilizers.</li>
<li>Remove the switches and
<ul>
<li>lubricate the springs to eliminate the high-pitch ping sound, and</li>
<li>lubricate the stem and bottom housing to create a smoother feel and quieter sound.</li>
</ul>
</li>
<li>Create and add custom EVA foam between the PCB and the switch plate to dampen the sound.</li>
</ul>
<h2 id="parts-and-prerequisites">Parts and prerequisites</h2>
<p>To do the design modification, you will need:</p>
<ul>
<li>Something with which to cut EVA foam. Examples:
<ul>
<li>Common but time-consuming: a sharp knife, like a hobby knife</li>
<li>Less common but faster (what I used): a laser engraver</li>
<li>Untested: an automated cutting machine, but machines like a Cricut may not work with foam of 3mm thickness</li>
</ul>
</li>
<li>Silicon mold making kit: <a href="https://smile.amazon.com/gp/product/B08QD8Y8Z3" target="_blank" rel="noopener">Amazon</a> - ~$9 (only used ~30% of the kit)</li>
<li>Something to mix the silicon in. I used a plastic takeout container and a wood mixing stick</li>
<li>3mm EVA foam: <a href="https://smile.amazon.com/gp/product/B07BT1W62K/" target="_blank" rel="noopener">Amazon</a> - ~$3 (only used about ~25% of this roll)</li>
<li>Lubricant for the stabilizers. I used Krytox 205g0 (various sellers) and Permatex grease <a href="https://smile.amazon.com/Permatex-22058-Dielectric-Tune-Up-Grease/dp/B000AL8VD2" target="_blank" rel="noopener">Amazon</a> - ~$3 (estimated based on the amount I used)</li>
<li>Lubricant for the switches. I used Krytox 205g0 (various sellers) - ~$2 (estimated based on the amount I used)</li>
<li>Pads or cut-up bandages to place where the stabilizers may hit the PCB. I used pads from <a href="https://kbdfans.com/products/kbdfans-stabilizers-foam-sticker" target="_blank" rel="noopener">KBDfans</a> - ~$1</li>
</ul>
<p>To do the detachable USB cable modification, you will need:</p>
<ul>
<li>Access to a 3D printer</li>
<li>Soldering iron, solder, and basic soldering skills</li>
<li>1x 3D printed part: <a href="#digital-files">Download files</a> - ~$2 (in material cost)</li>
<li>2x M2.5 4mm screws: <a href="https://smile.amazon.com/gp/product/B081DWD7N3/" target="_blank" rel="noopener">Amazon</a> - ~$0.05</li>
<li>1x Micro USB receptacle: <a href="https://smile.amazon.com/gp/product/B07W6T97HZ/" target="_blank" rel="noopener">Amazon</a> - ~$0.85
<ul>
<li>Note: you can do USB-C as well, but that’s up to you!</li>
</ul>
</li>
<li>1x Detachable cable (any) - likely $0</li>
</ul>
<p><strong>Parts total cost: ~$21</strong></p>
<h3 id="digital-files">Digital files</h3>
<p>Here are the digital files for these modifications parts:</p>
<ul>
<li>STL to print: <a href="/dl/2021-12-18-k552/K552-piece-m2.5.stl" target="_blank">.stl file</a>
<ul>
<li>Backup download of the STL on <a href="https://www.thingiverse.com/thing:5167481" target="_blank" rel="noopener">Thingiverse</a></li>
</ul>
</li>
<li>Blender project if you want to directly modify this in Blender: <a href="/dl/2021-12-18-k552/K552-piece-m2.5.blend" target="_blank">.blend file</a></li>
</ul>
<p>If you plan on using a laser engraver to cut the EVA foam, here is a Lightburn file: <a href="/dl/2021-12-18-k552/K552Foam.lbrn2" target="_blank">Lightburn file</a>. Note: Remember to adjust the power/speed settings for your machine. There are two problems with this file: it doesn’t have fully straight lines since it was done from a hand tracing and it’s missing some standoffs that you will have to cut out by hand. I may fix this in the future.</p>
<h2 id="detachable-usb-cable-modification">Detachable USB cable modification</h2>
<p>For cost and familiarity purposes, I chose to go with a Micro USB receptacle, rather than the more modern USB-C. For a future keyboard, I’ll likely try USB-C instead. Feel free to try as well!</p>
<p>On the K552, the attached USB cable is held in plate with two points:</p>
<ul>
<li>A molded plastic piece on the case to hold the cable to the case</li>
<li>A connector to plug into the receptacle on the keyboard PCB</li>
</ul>
<p>I wanted a pretty clean look to the keyboard, so I decided to try my hand at using Blender to model a new piece for the case from scratch.</p>
<p>Fortunately, a set of digital calipers came in handy here! I chose to do the time-tested method of sketching this out on paper as I was going, which I highly recommend.</p>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-12-18-k552/K552Sketch.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-18-k552/K552Sketch.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-18-k552/K552Sketch.jpg" />
<img src="/images/posts/2021-12-18-k552/K552Sketch.jpg" width="3000" height="2000" alt="Sketch of the part to print" class="responsive" />
</picture>
</a>
<figcaption class="center">Sketch of the part to print</figcaption>
</figure>
</div>
<p>From there, I modeled the part in Blender. This is my second time doing precision modeling in Blender, so it was a fun learning experience and a mostly straightforward part to begin with. A more advanced modeler could probably create a version that uses less material and prints faster while retaining sufficient structural integrity, but I’m content with where I landed.</p>
<div class="flex-horizontal">
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-18-k552/BlenderInterior.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-18-k552/BlenderInterior.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-18-k552/BlenderInterior.jpg" />
<img src="/images/posts/2021-12-18-k552/BlenderInterior.jpg" width="3000" height="2000" alt="Interior of the part in Blender" class="responsive" />
</picture>
</a>
<figcaption class="center">Interior of the part in Blender</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-18-k552/BlenderExterior.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-18-k552/BlenderExterior.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-18-k552/BlenderExterior.jpg" />
<img src="/images/posts/2021-12-18-k552/BlenderExterior.jpg" width="3000" height="2000" alt="Exterior of the part in Blender" class="responsive" />
</picture>
</a>
<figcaption class="center">Exterior of the part in Blender</figcaption>
</figure>
</div>
</div>
<p>I printed a couple initial versions to gauge corner rounding, part height, and screw hole dimensions. By the third print, I felt it was sufficiently accurate to proceed. Here are the prints side-by-side, along with the original part.</p>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-12-18-k552/RedragonK552-11.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-18-k552/RedragonK552-11.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-18-k552/RedragonK552-11.jpg" />
<img src="/images/posts/2021-12-18-k552/RedragonK552-11.jpg" width="3000" height="2000" alt="Comparison of the parts" class="responsive" />
</picture>
</a>
<figcaption class="center">Comparison of the parts</figcaption>
</figure>
</div>
<p>Check the <a href="#digital-files"><strong>Digital files</strong></a> section earlier to download the STL and Blender project for this part.</p>
<p>3D print settings I used:</p>
<ul>
<li>Material: PETG</li>
<li>Line height: 0.16mm</li>
<li>Infill: 20%</li>
<li>Supports: Yes</li>
<li>Raft: up to you</li>
<li>Orientation of the part: I recommend orienting the part so the angled screw wells face down. This makes it easier to remove the tiny supports.</li>
</ul>
<p>You can likely use most common materials, such as PLA, PETG, and ABS. I have only printed this with PETG.</p>
<p>Once you have 3D printed the part, you’re ready to go. To perform this modification, you’ll need to disassemble the keyboard and detach the cable from the PCB, like this:</p>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-12-18-k552/RedragonK552-02.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-18-k552/RedragonK552-02.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-18-k552/RedragonK552-02.jpg" />
<img src="/images/posts/2021-12-18-k552/RedragonK552-02.jpg" width="3000" height="2000" alt="Detached cable from PCB" class="responsive" />
</picture>
</a>
<figcaption class="center">Detached cable from PCB</figcaption>
</figure>
</div>
<p>Next, you’ll need to cut the USB cable at a good spot. I chose to cut it near where the cable was previously held by the case.</p>
<p>Once you strip the individual wires, they can be soldered to the receptacle. Here are some photos of that.</p>
<div class="flex-horizontal">
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-18-k552/RedragonK552-03.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-18-k552/RedragonK552-03.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-18-k552/RedragonK552-03.jpg" />
<img src="/images/posts/2021-12-18-k552/RedragonK552-03.jpg" width="3000" height="2000" alt="Wires waiting to be soldered" class="responsive" />
</picture>
</a>
<figcaption class="center">Wires waiting to be soldered</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-18-k552/RedragonK552-04.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-18-k552/RedragonK552-04.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-18-k552/RedragonK552-04.jpg" />
<img src="/images/posts/2021-12-18-k552/RedragonK552-04.jpg" width="3000" height="2000" alt="Soldered wires view from top" class="responsive" />
</picture>
</a>
<figcaption class="center">Soldered wires view from top</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-18-k552/RedragonK552-05.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-18-k552/RedragonK552-05.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-18-k552/RedragonK552-05.jpg" />
<img src="/images/posts/2021-12-18-k552/RedragonK552-05.jpg" width="3000" height="2000" alt="Soldered wires view from beneath" class="responsive" />
</picture>
</a>
<figcaption class="center">Soldered wires view from beneath</figcaption>
</figure>
</div>
</div>
<p>From there, you’ll mount the receptacle to the printed part with the M2.5 4mm screws. I chose these as the right balance of length, width, and head size. Here’s what this looks like when mounted.</p>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-12-18-k552/RedragonK552-12.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-18-k552/RedragonK552-12.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-18-k552/RedragonK552-12.jpg" />
<img src="/images/posts/2021-12-18-k552/RedragonK552-12.jpg" width="3000" height="2000" alt="Receptacle mounted to printed part" class="responsive" />
</picture>
</a>
<figcaption class="center">Receptacle mounted to printed part</figcaption>
</figure>
</div>
<p>You should now do a test fit on the keyboard to make sure that the part fits and the USB cable can successfully plug into the receptacle. You may need to slightly adjust the receptacle, given that there’s room around the screws.</p>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-12-18-k552/RedragonK552-13.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-18-k552/RedragonK552-13.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-18-k552/RedragonK552-13.jpg" />
<img src="/images/posts/2021-12-18-k552/RedragonK552-13.jpg" width="3000" height="2000" alt="Mounted in the keyboard case" class="responsive" />
</picture>
</a>
<figcaption class="center">Mounted in the keyboard case</figcaption>
</figure>
</div>
<p>At this point, you can optionally choose to do the design modifications!</p>
<h2 id="design-modifications">Design modifications</h2>
<p>I didn’t take photos of all the modifications, but here are a few.</p>
<p>I took out all of the Outemu switches and lubricated the springs and stems. There are enough videos and guides for this online already! Some videos:</p>
<ul>
<li>Guide to stabilizer tuning: <a href="https://youtu.be/usNx1_d0HbQ" target="_blank" rel="noopener">https://youtu.be/usNx1_d0HbQ</a></li>
<li>Guide to bandaid modding (starts at 309 seconds): <a href="https://youtu.be/cD5Zj-ZgMLA?t=309" target="_blank" rel="noopener">https://youtu.be/cD5Zj-ZgMLA?t=309</a></li>
<li>Silicone mod example tutorial (starts at 210 seconds): <a href="https://youtu.be/5FynctdZqZw?t=210" target="_blank" rel="noopener">https://youtu.be/5FynctdZqZw?t=210</a></li>
</ul>
<p>I cleaned the stabilizers and tuned them up using Krytox 205g0 and Permatex grease. I clipped them and placed pads where the stabilizers may hit the PCB.</p>
<div class="flex-horizontal">
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-18-k552/RedragonK552-07.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-18-k552/RedragonK552-07.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-18-k552/RedragonK552-07.jpg" />
<img src="/images/posts/2021-12-18-k552/RedragonK552-07.jpg" width="3000" height="2000" alt="Pads on PCB" class="responsive" />
</picture>
</a>
<figcaption class="center">Pads on PCB</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-18-k552/RedragonK552-10.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-18-k552/RedragonK552-10.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-18-k552/RedragonK552-10.jpg" />
<img src="/images/posts/2021-12-18-k552/RedragonK552-10.jpg" width="3000" height="2000" alt="Tuned stabilizers" class="responsive" />
</picture>
</a>
<figcaption class="center">Tuned stabilizers</figcaption>
</figure>
</div>
</div>
<p>Here’s the cured silicon mold in the bottom case. I used a similar mold for the Keychron C2 in <a href="/posts/2021-06-02-keychron-c2-mods/" target="_blank">this post</a>.</p>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-12-18-k552/RedragonK552-15.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-18-k552/RedragonK552-15.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-18-k552/RedragonK552-15.jpg" />
<img src="/images/posts/2021-12-18-k552/RedragonK552-15.jpg" width="3000" height="2000" alt="Silicon mold in the bottom case" class="responsive" />
</picture>
</a>
<figcaption class="center">Silicon mold in the bottom case</figcaption>
</figure>
</div>
<p>Next up is the custom-cut EVA foam. I chose to use a laser engraver for this. However, I traced this out using the switch plate and…that definitely did not include all of the standoffs from the bottom case!</p>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-12-18-k552/RedragonK552-01.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-18-k552/RedragonK552-01.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-18-k552/RedragonK552-01.jpg" />
<img src="/images/posts/2021-12-18-k552/RedragonK552-01.jpg" width="3000" height="2000" alt="Tracing the switch plate" class="responsive" />
</picture>
</a>
<figcaption class="center">Tracing the switch plate</figcaption>
</figure>
</div>
<p>I ended up using a hobby knife to trim the foam in a few places to let the standoffs poke through.</p>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-12-18-k552/RedragonK552-08.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-18-k552/RedragonK552-08.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-18-k552/RedragonK552-08.jpg" />
<img src="/images/posts/2021-12-18-k552/RedragonK552-08.jpg" width="3000" height="2000" alt="Foam on PCB" class="responsive" />
</picture>
</a>
<figcaption class="center">Foam on PCB</figcaption>
</figure>
</div>
<p>Here’s another photo with the PCB, foam, and bottom case.</p>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-12-18-k552/RedragonK552-09.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-18-k552/RedragonK552-09.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-18-k552/RedragonK552-09.jpg" />
<img src="/images/posts/2021-12-18-k552/RedragonK552-09.jpg" width="3000" height="2000" alt="Foam on PCB in bottom case" class="responsive" />
</picture>
</a>
<figcaption class="center">Foam on PCB in bottom case</figcaption>
</figure>
</div>
<p>From there, it was a matter of assembly.</p>
<div class="flex-horizontal">
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-18-k552/RedragonK552-16.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-18-k552/RedragonK552-16.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-18-k552/RedragonK552-16.jpg" />
<img src="/images/posts/2021-12-18-k552/RedragonK552-16.jpg" width="3000" height="2000" alt="Foam on PCB in bottom case" class="responsive" />
</picture>
</a>
<figcaption class="center">Another photo of the foam on PCB in bottom case</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-18-k552/RedragonK552-17.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-18-k552/RedragonK552-17.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-18-k552/RedragonK552-17.jpg" />
<img src="/images/posts/2021-12-18-k552/RedragonK552-17.jpg" width="3000" height="2000" alt="Switch plate mounted with stabilizers and a few switches in" class="responsive" />
</picture>
</a>
<figcaption class="center">Switch plate mounted with stabilizers and a few switches in</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-18-k552/RedragonK552-18.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-18-k552/RedragonK552-18.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-18-k552/RedragonK552-18.jpg" />
<img src="/images/posts/2021-12-18-k552/RedragonK552-18.jpg" width="3000" height="2000" alt="All switches in and some keycaps mounted" class="responsive" />
</picture>
</a>
<figcaption class="center">All switches in and some keycaps mounted</figcaption>
</figure>
</div>
</div>
<h2 id="finished-board-and-sound-test">Finished board and sound test</h2>
<p>The finished board looks pretty much the same, minus the detachable USB cable. Many folks either erase the Redragon logo using a pencil eraser or 3D print a replacement part.</p>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-12-18-k552/RedragonK552-19.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-18-k552/RedragonK552-19.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-18-k552/RedragonK552-19.jpg" />
<img src="/images/posts/2021-12-18-k552/RedragonK552-19.jpg" width="3000" height="2000" alt="Photo of the finished K552" class="responsive" />
</picture>
</a>
<figcaption class="center">Photo of the finished K552</figcaption>
</figure>
</div>
<p>I chose to use white PETG filament for the part to make the change super visible for this post. I recommend choosing the color that meets your needs, such as black to blend in, or another color to have a bit of pop on the back of the keyboard.</p>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-12-18-k552/RedragonK552-14.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-18-k552/RedragonK552-14.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-18-k552/RedragonK552-14.jpg" />
<img src="/images/posts/2021-12-18-k552/RedragonK552-14.jpg" width="3000" height="2000" alt="USB receptacle and 3D printed part" class="responsive" />
</picture>
</a>
<figcaption class="center">USB receptacle and 3D printed part</figcaption>
</figure>
</div>
<p>If you didn’t catch it at the beginning of the post, here is the sound test video again.</p>
<div class="center width70">
<figure class="fill-parent">
<div class="videowrapper">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/gCaAEuVqOsQ" title="Sound test video on YouTube" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>
<figcaption class="center">Before and after sound test</figcaption>
</figure>
</div>
<h2 id="thoughts-and-future-modifications">Thoughts and future modifications</h2>
<p>Overall, this was a pretty fun project. It took the mods I’ve done for other keyboards and combined them with some new skills, such as laser-cut foam and custom printed parts. A great learning experience for sure!</p>
<p>Was it worth it? I think so. I think there’s an entire market of folks who are willing to purchase a keyboard around $50-70 provided it gives them a substantially improved experienced compared to a $35 purchase. With these modifications, it provides pretty compelling value.</p>
<p>I chose not to do further modifications like tape, PE foam, completely replaced switches, etc., but a dedicated hobbyist could surely perform these as well for even more improvement, albeit at further time/materials cost.</p>
<p>One area of particular note: the software configurability of the Redragon K552 is pretty lacking compared to other popular keyboards. QMK is one of the most popular open-source firmware for keyboards.</p>
<p>Interestingly, there’s a port of QMK for keyboards like the K552: <a href="https://github.com/SonixQMK" target="_blank" rel="noopener">SonixQMK</a>.</p>
<p>In theory, this brings all of the power of QMK to this keyboard. I haven’t tried it yet, but I plan to do that as a next step.</p>Modding the $35 Redragon K552 TKL (80%) keyboardUnboxing the KL-90 FE keyboard from Kiko’s Lab2021-12-16T00:00:00+00:002021-12-16T00:00:00+00:00https://mattj.io/posts/kikos-lab-kl-90-fe-unbox<h1 id="unboxing-the-kl-90-fe-founders-edition-keyboard-from-kikos-lab">Unboxing the KL-90 FE (Founder’s Edition) keyboard from Kiko’s Lab</h1>
<p>Thursday, December 16, 2021</p>
<p><a href="/posts/">Click here to go to all posts</a>.</p>
<p><em>A breakdown of what’s included with the KL-90 FE (Founder’s Edition) keyboard from Kiko’s Lab</em></p>
<p>The Kl-90 is a 75% keyboard with macro columns, rotary encoder, and either second rotary encoder or OLED screen support.</p>
<p>The KL-90 aluminum edition group buy ran from November 21, 2020 to December 2, 2020 via <a href="https://kikoslab.com" target="_blank" rel="noopener">the Kiko’s Lab website</a>. The original interest check can be <a href="https://geekhack.org/index.php?topic=108645.0" target="_blank" rel="noopener">found on Geekhack</a>.</p>
<p>The machining and coating of the case parts for this KL-90 aluminum edition is done in the U.S.</p>
<p>In addition to the aluminum edition group buy, a limited number of Founder’s Edition KL-90 keyboards were available via a raffle.</p>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-12-16-kl-90/KL-90-02.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-16-kl-90/KL-90-02.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-16-kl-90/KL-90-02.jpg" />
<img src="/images/posts/2021-12-16-kl-90/KL-90-02.jpg" width="3000" height="2000" alt="Switch plate inside of the case" class="responsive" />
</picture>
</a>
<figcaption class="center">Switch plate inside of the case</figcaption>
</figure>
</div>
<p>The KL-90 FE includes:</p>
<ul>
<li>1 x Custom splash cerakoted OLED top case</li>
<li>1 x Custom splash cerakoted dual encoder top case</li>
<li>1 x Black or purple anodized bottom case</li>
<li>2 x KL-90 PCBs (hotswap and/or solder)</li>
<li>1 x KL-90 titanium anodized switch plate</li>
<li>1 x Titanium badge</li>
<li>2 x Zircuti encoder knobs (blend of titanium and zirconium)</li>
<li>3 x EC-12 encoders</li>
<li>1 x SSD1306 128x32 OLED screen</li>
<li>1 x Switch plate foam (from Stupidfish)</li>
<li>1 x Coiled cable with a custom splash cerakoted FEMO connector (from VoxelMods)</li>
<li>Gaskets for mounting</li>
<li>Stickers</li>
</ul>
<p>Let’s take a look at all the parts! If you click or tap on the images, they will open in a new tab.</p>
<h2 id="included-with-the-kl-90">Included with the KL-90</h2>
<p>The KL-90 FE includes two types of top cases: one that supports two encoders and one that supports an encoder on the left and an OLED screen on the right.</p>
<p>Here is the top case with dual encoder support.</p>
<div class="flex-horizontal">
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-16-kl-90/KL-90-22.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-16-kl-90/KL-90-22.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-16-kl-90/KL-90-22.jpg" />
<img src="/images/posts/2021-12-16-kl-90/KL-90-22.jpg" width="3000" height="2000" alt="Dual encoder top case exterior" class="responsive" />
</picture>
</a>
<figcaption class="center">Dual encoder top case exterior</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-16-kl-90/KL-90-23.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-16-kl-90/KL-90-23.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-16-kl-90/KL-90-23.jpg" />
<img src="/images/posts/2021-12-16-kl-90/KL-90-23.jpg" width="3000" height="2000" alt="Dual encoder top case interior" class="responsive" />
</picture>
</a>
<figcaption class="center">Dual encoder top case interior</figcaption>
</figure>
</div>
</div>
<p>Here is the top case with encoder and OLED support.</p>
<div class="flex-horizontal">
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-16-kl-90/KL-90-19.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-16-kl-90/KL-90-19.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-16-kl-90/KL-90-19.jpg" />
<img src="/images/posts/2021-12-16-kl-90/KL-90-19.jpg" width="3000" height="2000" alt="Encoder and OLED top case exterior" class="responsive" />
</picture>
</a>
<figcaption class="center">Encoder and OLED top case exterior</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-16-kl-90/KL-90-20.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-16-kl-90/KL-90-20.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-16-kl-90/KL-90-20.jpg" />
<img src="/images/posts/2021-12-16-kl-90/KL-90-20.jpg" width="3000" height="2000" alt="Encoder and OLED top case interior" class="responsive" />
</picture>
</a>
<figcaption class="center">Encoder and OLED top case interior</figcaption>
</figure>
</div>
</div>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-12-16-kl-90/KL-90-21.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-16-kl-90/KL-90-21.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-16-kl-90/KL-90-21.jpg" />
<img src="/images/posts/2021-12-16-kl-90/KL-90-21.jpg" width="3000" height="2000" alt="A closer view of the interior of the top case" class="responsive" />
</picture>
</a>
<figcaption class="center">A closer view of the interior of the top case</figcaption>
</figure>
</div>
<p>These top cases feature a custom splash cerakote finish. Each one of the KL-90 FE top cases is unique as a result.</p>
<p>Here is a close up of the top case design:</p>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-12-16-kl-90/KL-90-10.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-16-kl-90/KL-90-10.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-16-kl-90/KL-90-10.jpg" />
<img src="/images/posts/2021-12-16-kl-90/KL-90-10.jpg" width="3000" height="2000" alt="Macro shot of the top case design" class="responsive" />
</picture>
</a>
<figcaption class="center">Macro shot of the top case design</figcaption>
</figure>
</div>
<p>The switch plate is made of anodized titanium.</p>
<div class="flex-horizontal">
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-16-kl-90/KL-90-17.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-16-kl-90/KL-90-17.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-16-kl-90/KL-90-17.jpg" />
<img src="/images/posts/2021-12-16-kl-90/KL-90-17.jpg" width="3000" height="2000" alt="Front of the switch plate" class="responsive" />
</picture>
</a>
<figcaption class="center">Front of the switch plate</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-16-kl-90/KL-90-18.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-16-kl-90/KL-90-18.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-16-kl-90/KL-90-18.jpg" />
<img src="/images/posts/2021-12-16-kl-90/KL-90-18.jpg" width="3000" height="2000" alt="Back of the switch plate" class="responsive" />
</picture>
</a>
<figcaption class="center">Back of the switch plate</figcaption>
</figure>
</div>
</div>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-12-16-kl-90/KL-90-34.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-16-kl-90/KL-90-34.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-16-kl-90/KL-90-34.jpg" />
<img src="/images/posts/2021-12-16-kl-90/KL-90-34.jpg" width="3000" height="2000" alt="Switch plate close up" class="responsive" />
</picture>
</a>
<figcaption class="center">Switch plate close up</figcaption>
</figure>
</div>
<p>The switch plate fits well into the top case.</p>
<div class="flex-horizontal">
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-16-kl-90/KL-90-12.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-16-kl-90/KL-90-12.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-16-kl-90/KL-90-12.jpg" />
<img src="/images/posts/2021-12-16-kl-90/KL-90-12.jpg" width="3000" height="2000" alt="Switch plate in the top case" class="responsive" />
</picture>
</a>
<figcaption class="center">Switch plate in the top case</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-16-kl-90/KL-90-13.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-16-kl-90/KL-90-13.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-16-kl-90/KL-90-13.jpg" />
<img src="/images/posts/2021-12-16-kl-90/KL-90-13.jpg" width="3000" height="2000" alt="Closer shot of the switch plate in the top case" class="responsive" />
</picture>
</a>
<figcaption class="center">Closer shot of the switch plate in the top case</figcaption>
</figure>
</div>
</div>
<p>The contrast of the switch plate against the top case is really great.</p>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-12-16-kl-90/KL-90-02.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-16-kl-90/KL-90-02.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-16-kl-90/KL-90-02.jpg" />
<img src="/images/posts/2021-12-16-kl-90/KL-90-02.jpg" width="3000" height="2000" alt="Switch plate inside of the case" class="responsive" />
</picture>
</a>
<figcaption class="center">Switch plate inside of the case</figcaption>
</figure>
</div>
<p>The bottom case is made from black anodized aluminum.</p>
<div class="flex-horizontal">
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-16-kl-90/KL-90-16.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-16-kl-90/KL-90-16.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-16-kl-90/KL-90-16.jpg" />
<img src="/images/posts/2021-12-16-kl-90/KL-90-16.jpg" width="3000" height="2000" alt="Bottom case interior" class="responsive" />
</picture>
</a>
<figcaption class="center">Bottom case interior</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-16-kl-90/KL-90-15.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-16-kl-90/KL-90-15.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-16-kl-90/KL-90-15.jpg" />
<img src="/images/posts/2021-12-16-kl-90/KL-90-15.jpg" width="3000" height="2000" alt="Bottom case exterior" class="responsive" />
</picture>
</a>
<figcaption class="center">Bottom case exterior</figcaption>
</figure>
</div>
</div>
<p>Starting with the interior of the bottom case, you can see the signatures of Kiko’s Lab and the case manufacturers. You can also see the well-designed plate cutouts.</p>
<div class="flex-horizontal">
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-16-kl-90/KL-90-35.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-16-kl-90/KL-90-35.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-16-kl-90/KL-90-35.jpg" />
<img src="/images/posts/2021-12-16-kl-90/KL-90-35.jpg" width="3000" height="2000" alt="Kiko and AF signature" class="responsive" />
</picture>
</a>
<figcaption class="center">Kiko and AF signature</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-16-kl-90/KL-90-36.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-16-kl-90/KL-90-36.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-16-kl-90/KL-90-36.jpg" />
<img src="/images/posts/2021-12-16-kl-90/KL-90-36.jpg" width="3000" height="2000" alt="CadLab signature" class="responsive" />
</picture>
</a>
<figcaption class="center">CadLab signature</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-16-kl-90/KL-90-37.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-16-kl-90/KL-90-37.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-16-kl-90/KL-90-37.jpg" />
<img src="/images/posts/2021-12-16-kl-90/KL-90-37.jpg" width="3000" height="2000" alt="Plate cutouts" class="responsive" />
</picture>
</a>
<figcaption class="center">Plate cutouts</figcaption>
</figure>
</div>
</div>
<p>Going to the exterior of the bottom case, you’ll find the anodized titanium badge.</p>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-12-16-kl-90/KL-90-03.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-16-kl-90/KL-90-03.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-16-kl-90/KL-90-03.jpg" />
<img src="/images/posts/2021-12-16-kl-90/KL-90-03.jpg" width="3000" height="2000" alt="Badge in the bottom case" class="responsive" />
</picture>
</a>
<figcaption class="center">Badge in the bottom case</figcaption>
</figure>
</div>
<p>This is a great looking badge, so here are a couple close-up photos.</p>
<div class="flex-horizontal">
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-16-kl-90/KL-90-08.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-16-kl-90/KL-90-08.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-16-kl-90/KL-90-08.jpg" />
<img src="/images/posts/2021-12-16-kl-90/KL-90-08.jpg" width="3000" height="2000" alt="Close of the badge logo" class="responsive" />
</picture>
</a>
<figcaption class="center">Close of the badge logo</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-16-kl-90/KL-90-09.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-16-kl-90/KL-90-09.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-16-kl-90/KL-90-09.jpg" />
<img src="/images/posts/2021-12-16-kl-90/KL-90-09.jpg" width="3000" height="2000" alt="Close up of the badge texture" class="responsive" />
</picture>
</a>
<figcaption class="center">Close up of the badge texture</figcaption>
</figure>
</div>
</div>
<p>A keyboard doesn’t do much without a PCB, so let’s take a look at both the hotswap and solder PCBs.</p>
<p>First, the hotswap PCB.</p>
<div class="flex-horizontal">
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-16-kl-90/KL-90-24.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-16-kl-90/KL-90-24.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-16-kl-90/KL-90-24.jpg" />
<img src="/images/posts/2021-12-16-kl-90/KL-90-24.jpg" width="3000" height="2000" alt="Hotswap PCB front" class="responsive" />
</picture>
</a>
<figcaption class="center">Hotswap PCB front</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-16-kl-90/KL-90-25.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-16-kl-90/KL-90-25.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-16-kl-90/KL-90-25.jpg" />
<img src="/images/posts/2021-12-16-kl-90/KL-90-25.jpg" width="3000" height="2000" alt="Hotswap PCB back" class="responsive" />
</picture>
</a>
<figcaption class="center">Hotswap PCB back</figcaption>
</figure>
</div>
</div>
<p>Next, the solder PCB.</p>
<div class="flex-horizontal">
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-16-kl-90/KL-90-26.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-16-kl-90/KL-90-26.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-16-kl-90/KL-90-26.jpg" />
<img src="/images/posts/2021-12-16-kl-90/KL-90-26.jpg" width="3000" height="2000" alt="Solder PCB front" class="responsive" />
</picture>
</a>
<figcaption class="center">Solder PCB front</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-16-kl-90/KL-90-27.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-16-kl-90/KL-90-27.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-16-kl-90/KL-90-27.jpg" />
<img src="/images/posts/2021-12-16-kl-90/KL-90-27.jpg" width="3000" height="2000" alt="Solder PCB back" class="responsive" />
</picture>
</a>
<figcaption class="center">Solder PCB back</figcaption>
</figure>
</div>
</div>
<p>Here are a few close-up photos of the PCB.</p>
<div class="flex-horizontal">
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-16-kl-90/KL-90-31.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-16-kl-90/KL-90-31.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-16-kl-90/KL-90-31.jpg" />
<img src="/images/posts/2021-12-16-kl-90/KL-90-31.jpg" width="3000" height="2000" alt="OLED and encoder spots on the hotswap PCB" class="responsive" />
</picture>
</a>
<figcaption class="center">OLED and encoder spots on the hotswap PCB</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-16-kl-90/KL-90-32.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-16-kl-90/KL-90-32.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-16-kl-90/KL-90-32.jpg" />
<img src="/images/posts/2021-12-16-kl-90/KL-90-32.jpg" width="3000" height="2000" alt="Kiko logo on the PCB" class="responsive" />
</picture>
</a>
<figcaption class="center">Kiko logo on the PCB</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-16-kl-90/KL-90-33.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-16-kl-90/KL-90-33.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-16-kl-90/KL-90-33.jpg" />
<img src="/images/posts/2021-12-16-kl-90/KL-90-33.jpg" width="3000" height="2000" alt="Close up of the MCU on the PCB" class="responsive" />
</picture>
</a>
<figcaption class="center">Close up of the MCU on the PCB</figcaption>
</figure>
</div>
</div>
<p>Finally, we can take a look at some of the additional components that come with the KL-90 FE.</p>
<p>Most awesomely, it comes with two zircuti encoder knobs. This is a beautiful blend of titanium and zirconium.</p>
<div class="flex-horizontal">
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-16-kl-90/KL-90-04.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-16-kl-90/KL-90-04.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-16-kl-90/KL-90-04.jpg" />
<img src="/images/posts/2021-12-16-kl-90/KL-90-04.jpg" width="3000" height="2000" alt="Encoder knob against a light background" class="responsive" />
</picture>
</a>
<figcaption class="center">Encoder knob against a light background</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-16-kl-90/KL-90-05.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-16-kl-90/KL-90-05.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-16-kl-90/KL-90-05.jpg" />
<img src="/images/posts/2021-12-16-kl-90/KL-90-05.jpg" width="3000" height="2000" alt="Encoder knob against a dark background" class="responsive" />
</picture>
</a>
<figcaption class="center">Encoder knob against a dark background</figcaption>
</figure>
</div>
</div>
<p>Even the interior of this part looks great.</p>
<div class="flex-horizontal">
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-16-kl-90/KL-90-06.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-16-kl-90/KL-90-06.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-16-kl-90/KL-90-06.jpg" />
<img src="/images/posts/2021-12-16-kl-90/KL-90-06.jpg" width="3000" height="2000" alt="Encoder knob interior" class="responsive" />
</picture>
</a>
<figcaption class="center">Encoder knob interior</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-16-kl-90/KL-90-07.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-16-kl-90/KL-90-07.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-16-kl-90/KL-90-07.jpg" />
<img src="/images/posts/2021-12-16-kl-90/KL-90-07.jpg" width="3000" height="2000" alt="Encoder knob on the side" class="responsive" />
</picture>
</a>
<figcaption class="center">Encoder knob on the side</figcaption>
</figure>
</div>
</div>
<p>Another part is the custom coated coiled USB cable. It goes well with the case.</p>
<div class="flex-horizontal">
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-16-kl-90/KL-90-28.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-16-kl-90/KL-90-28.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-16-kl-90/KL-90-28.jpg" />
<img src="/images/posts/2021-12-16-kl-90/KL-90-28.jpg" width="3000" height="2000" alt="Custom coiled cable" class="responsive" />
</picture>
</a>
<figcaption class="center">Custom coiled cable</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-16-kl-90/KL-90-29.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-16-kl-90/KL-90-29.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-16-kl-90/KL-90-29.jpg" />
<img src="/images/posts/2021-12-16-kl-90/KL-90-29.jpg" width="3000" height="2000" alt="A closer photo of the cable" class="responsive" />
</picture>
</a>
<figcaption class="center">A closer photo of the cable</figcaption>
</figure>
</div>
</div>
<p>As mentioned at the beginning of this post, the KL-90 FE comes with other parts as well, shown in these photos.</p>
<div class="flex-horizontal">
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-16-kl-90/KL-90-30.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-16-kl-90/KL-90-30.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-16-kl-90/KL-90-30.jpg" />
<img src="/images/posts/2021-12-16-kl-90/KL-90-30.jpg" width="3000" height="2000" alt="Accessories laid out" class="responsive" />
</picture>
</a>
<figcaption class="center">Accessories laid out</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-12-16-kl-90/KL-90-38.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-16-kl-90/KL-90-38.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-16-kl-90/KL-90-38.jpg" />
<img src="/images/posts/2021-12-16-kl-90/KL-90-38.jpg" width="3000" height="2000" alt="Switch plate foam" class="responsive" />
</picture>
</a>
<figcaption class="center">Switch plate foam</figcaption>
</figure>
</div>
</div>
<h2 id="final-thoughts">Final thoughts</h2>
<p>The KL-90 FE from Kiko’s Lab is a 75% keyboard with both an interesting layout and unique design. I’m excited to build and try out this keyboard, especially the macro columns and encoders.</p>
<p>One note: the colors on this case make it particularly important to color balance the photos, so if you are interested in comparing this keyboard against a reference palette, here’s a photo that includes one!</p>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-12-16-kl-90/KL-90-01.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-12-16-kl-90/KL-90-01.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-12-16-kl-90/KL-90-01.jpg" />
<img src="/images/posts/2021-12-16-kl-90/KL-90-01.jpg" width="3000" height="2000" alt="KL-90 FE top case with a color palette" class="responsive" />
</picture>
</a>
<figcaption class="center">KL-90 FE top case with a color palette</figcaption>
</figure>
</div>Unboxing the KL-90 FE keyboard from Kiko's LabOverview of Stadia’s TV app architecture2021-08-20T00:00:00+00:002021-08-20T00:00:00+00:00https://mattj.io/posts/overview-of-stadia-tv-app-architecture<h1 id="overview-of-stadias-tv-app-architecture">Overview of Stadia’s TV app architecture</h1>
<p>Friday, August 20, 2021</p>
<p><a href="/posts/">Click here to go to all posts</a>.</p>
<p>I recently wrote a post for the Stadia Dev Blog titled <a href="https://stadia.dev/blog/overview-of-stadias-tv-app-architecture/" target="_blank" rel="noopener"><em>Overview of Stadia’s TV app architecture</em></a>. In the post, I cover the history of Stadia on TVs, detail some of our implementation decisions, and share a summary of our app architecture for Android TV.</p>
<p>You can read the post on the <a href="https://stadia.dev/blog/overview-of-stadias-tv-app-architecture/" target="_blank" rel="noopener">Stadia.dev blog</a>.</p>
<p>A backup of the post is also available from the <a href="https://web.archive.org/web/20210823223710/https://stadia.dev/blog/overview-of-stadias-tv-app-architecture/" target="_blank" rel="noopener">Internet Archive</a>.</p>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-08-20/2021-08-20-tv.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-08-20/2021-08-20-tv.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-08-20/2021-08-20-tv.jpg" />
<img src="/images/posts/2021-08-20/2021-08-20-tv.jpg" width="1920" height="1280" alt="Photo of CCwGTV on a Stadia desk mat" class="responsive" />
</picture>
</a>
<figcaption class="center">Photo of CCwGTV on a Stadia desk mat</figcaption>
</figure>
</div>Overview of Stadia’s TV app architectureSneakbox Disarray 70% with WoB keycaps2021-07-24T00:00:00+00:002021-07-24T00:00:00+00:00https://mattj.io/posts/sneakbox-disarray-wob<h1 id="sneakbox-disarray-70-with-wob-keycaps">Sneakbox Disarray 70% with WoB keycaps</h1>
<p>Saturday, July 24, 2021</p>
<p><a href="/posts/">Click here to go to all posts</a>.</p>
<p>The Sneakbox Disarray started shipping a couple months ago, and I received mine about a month ago. I did an unboxing post with many photos. If you haven’t checked it out, you might want to read that post first: <a href="/posts/2021-06-20-disarray-unboxing/" target="_blank"><em>Unboxing the Sneakbox Disarray 70% keyboard</em></a>.</p>
<p>I ended up building mine with the following configuration (no affiliation for any of the links):</p>
<ul>
<li>PCB: Staggered: Special Edition FR4 with Mill-Max 7305 sockets to support hot swapping the switches</li>
<li>Plate: Brass</li>
<li>Switches: <a href="https://mkultra.click/boba-tactile-u4t-switches/" target="_blank" rel="noopener">Boba U4T 68g tactiles (Pearl)</a></li>
<li>Stabilizers: Durock v2 with Krytox 205g0 and dielectric grease</li>
<li>Keycaps: <a href="https://kbdfans.com/products/enjoypbt-abs-doubleshot-mechanical-keyboard-keycaps-set-2" target="_blank" rel="noopener">EnjoyPBT WoB (white-on-black) ABS</a></li>
<li>Foam: <a href="https://stupidfish.design/products/discipline65-case-and-plate-foam-set" target="_blank" rel="noopener">Stupidfish foam</a> between the plate and PCB, stock foam between the PCB and the case</li>
</ul>
<h2 id="soldering-the-sockets">Soldering the sockets</h2>
<p>If you’re not familiar with Mill-Max sockets, they are essentially small, friction-based metal tubes that will hold the metal legs of the switch in place. They are soldered into the PCB instead of the switches. They’re not as optimal as Kailh or other purpose-built switch sockets, but they get the job done. There are some issues with switches with larger legs.</p>
<p>More info here:</p>
<ul>
<li><a href="https://www.mill-max.com/products/receptacle/7305/7305-0-15-15-47-27-10-0" target="_blank" rel="noopener">Mill-Max website for the 7305 socket</a></li>
<li><a href="https://www.mouser.com/ProductDetail/Mill-Max/7305-0-15-15-47-27-10-0?qs=QVz7UnnaAAGZJgZDI7Hd%2FA%3D%3D" target="_blank" rel="noopener">Order the 7305 socket from Mouser</a></li>
</ul>
<p>The process of soldering the Mill-Max sockets doesn’t take much longer than soldering switches. However, you need to be careful not to get any solder into the socket, otherwise the switch will be stuck! A solder sucker is very useful for when that happens.</p>
<div class="center width30">
<figure class="fill-parent">
<video playsinline="" autoplay="" loop="" muted="" width="540" height="960" class="responsive" title="Soldering Mill-Max 7305 sockets on the PCB (looped)">
<source src="/images/posts/2021-07-24-disarray/disarraysoldering.webm" type="video/webm" />
<source src="/images/posts/2021-07-24-disarray/disarraysoldering.mp4" type="video/mp4" />
<div fallback="">
<p>This browser does not support the video element.</p>
</div>
</video>
<figcaption class="center">Soldering Mill-Max 7305 sockets on the PCB (looped)</figcaption>
</figure>
</div>
<h2 id="final-build">Final build</h2>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-07-24-disarray/SneakboxDisarrayBuilt-07.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-07-24-disarray/SneakboxDisarrayBuilt-07.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-07-24-disarray/SneakboxDisarrayBuilt-07.jpg" />
<img src="/images/posts/2021-07-24-disarray/SneakboxDisarrayBuilt-07.jpg" width="3000" height="2000" alt="Final build on a desk mat" class="responsive" />
</picture>
</a>
<figcaption class="center">Final build on a desk mat</figcaption>
</figure>
</div>
<p>Some of the best aspects of this case are the rotary encoder and the visible internal components. It’s more expensive, both in terms of design and cost, to have the components visible like this, but the result is quite beautiful.</p>
<div class="flex-horizontal">
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-07-24-disarray/SneakboxDisarrayBuilt-02.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-07-24-disarray/SneakboxDisarrayBuilt-02.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-07-24-disarray/SneakboxDisarrayBuilt-02.jpg" />
<img src="/images/posts/2021-07-24-disarray/SneakboxDisarrayBuilt-02.jpg" width="3000" height="2000" alt="Rotary encoder up closer" class="responsive" />
</picture>
</a>
<figcaption class="center">Rotary encoder up closer</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-07-24-disarray/SneakboxDisarrayBuilt-03.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-07-24-disarray/SneakboxDisarrayBuilt-03.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-07-24-disarray/SneakboxDisarrayBuilt-03.jpg" />
<img src="/images/posts/2021-07-24-disarray/SneakboxDisarrayBuilt-03.jpg" width="3000" height="2000" alt="USB-C port" class="responsive" />
</picture>
</a>
<figcaption class="center">USB-C port</figcaption>
</figure>
</div>
</div>
<div class="flex-horizontal">
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-07-24-disarray/SneakboxDisarrayBuilt-04.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-07-24-disarray/SneakboxDisarrayBuilt-04.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-07-24-disarray/SneakboxDisarrayBuilt-04.jpg" />
<img src="/images/posts/2021-07-24-disarray/SneakboxDisarrayBuilt-04.jpg" width="3000" height="2000" alt="ATmega 32U4 visible" class="responsive" />
</picture>
</a>
<figcaption class="center">ATmega 32U4 visible</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-07-24-disarray/SneakboxDisarrayBuilt-05.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-07-24-disarray/SneakboxDisarrayBuilt-05.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-07-24-disarray/SneakboxDisarrayBuilt-05.jpg" />
<img src="/images/posts/2021-07-24-disarray/SneakboxDisarrayBuilt-05.jpg" width="3000" height="2000" alt="Another angle on the rotary encoder" class="responsive" />
</picture>
</a>
<figcaption class="center">Another angle on the rotary encoder</figcaption>
</figure>
</div>
</div>
<p>Here are a couple more images of the final build in different light:</p>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-07-24-disarray/SneakboxDisarrayBuilt-06.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-07-24-disarray/SneakboxDisarrayBuilt-06.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-07-24-disarray/SneakboxDisarrayBuilt-06.jpg" />
<img src="/images/posts/2021-07-24-disarray/SneakboxDisarrayBuilt-06.jpg" width="3000" height="2000" alt="Final build with a plain white background" class="responsive" />
</picture>
</a>
<figcaption class="center">Final build with a plain white background</figcaption>
</figure>
</div>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-07-24-disarray/SneakboxDisarrayBuilt-01.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-07-24-disarray/SneakboxDisarrayBuilt-01.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-07-24-disarray/SneakboxDisarrayBuilt-01.jpg" />
<img src="/images/posts/2021-07-24-disarray/SneakboxDisarrayBuilt-01.jpg" width="3000" height="2000" alt="Final build with natural sunlight" class="responsive" />
</picture>
</a>
<figcaption class="center">Final build with natural sunlight</figcaption>
</figure>
</div>
<h3 id="a-note-on-the-usb-c-port">A note on the USB-C port</h3>
<p>I noticed that only some of my cables worked with this keyboard, as there is a ~1.2mm gap between the edge of the USB-C receptacle and the interior case well. This normally wouldn’t be an issue, but the case also has a relatively small space to accommodate the molding on the cable.</p>
<p>My solution was to purchase a relatively inexpensive USB-C extender to make it so any of my current or future cables will work. I purchased <a href="https://smile.amazon.com/gp/product/B07MBWH7QG/" target="_blank" rel="noopener">this one from Amazon (no affiliation)</a>.</p>
<h2 id="final-thoughts">Final thoughts</h2>
<p>This is a fantastic case, and despite the fact that all of the Disarray boards were declared as B-stock, I nonetheless found the design, materials, and process to be great. I’m looking forward to more keyboards from Sneakbox in the future!</p>
<p>Related posts on Sneakbox keyboards:</p>
<ul>
<li><a href="/posts/2021-06-20-disarray-unboxing/" target="_blank"><em>Unboxing the Sneakbox Disarray 70% keyboard</em></a></li>
<li><a href="/posts/2021-07-24-sneakbox-mga-sa-mizu/" target="_blank"><em>Sneakbox MGA Standard with SA Mizu (unboxing and final build)</em></a></li>
</ul>Build of the Sneakbox Disarray 70% with WoB keycapsSneakbox MGA Standard with SA Mizu (unboxing and final build)2021-07-24T00:00:00+00:002021-07-24T00:00:00+00:00https://mattj.io/posts/sneakbox-mga-sa-mizu<h1 id="sneakbox-mga-standard-with-sa-mizu-unboxing-and-final-build">Sneakbox MGA Standard with SA Mizu (unboxing and final build)</h1>
<p>Saturday, July 24, 2021</p>
<p><a href="/posts/">Click here to go to all posts</a>.</p>
<p>The <a href="https://sneakbox.com/products/mga-standard" target="_blank" rel="noopener">Sneakbox MGA Standard</a> is an Alice-layout keyboard case. Sneakbox offers USB-Mini and USB-C variants of the case to go along with the <a href="https://sneakbox.com/collections/frontpage/products/sneakbox-alice-hotswap-pcbs" target="_blank" rel="noopener">Alice-layout PCBs</a> offered from the same store.</p>
<p>If you are not familiar, the <em>TGR Alice</em> was a very limited run ergo-style keyboard that went through a group buy in 2018. The Geekhack thread with information is <a href="https://geekhack.org/index.php?topic=95054.0" target="_blank" rel="noopener">here</a>. Also noteworthy is the fact that the designer offered the plate, PCB, and acrylic case design files as well, which are found <a href="https://geekhack.org/index.php?topic=95054.msg2661499#msg2661499" target="_blank" rel="noopener">here on the Geekhack thread</a>.</p>
<p>The Reddit post announcing the MGA Standard can be found <a href="https://www.reddit.com/r/MechanicalKeyboards/comments/gskxdn/alice_pcb_mga_standard_hotswap/" target="_blank" rel="noopener">here</a>.</p>
<p>With Sneakbox offering a 2021 summer sale, I decided to order a B-stock black MGA Standard to try out the Alice layout, as I have never used one before. Let’s start by taking a look at the components!</p>
<h2 id="mga-standard-components">MGA Standard components</h2>
<h3 id="the-case">The case</h3>
<p>The case is an Alice-style case. It’s sturdy, machined well, and doesn’t have many flourishes. This case is technically B-stock, which is due to “anodizing mismatch”. I don’t notice unless it’s the right light and I’m looking for it.</p>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-07-24-mga/SneakboxMGA-01.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-07-24-mga/SneakboxMGA-01.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-07-24-mga/SneakboxMGA-01.jpg" />
<img src="/images/posts/2021-07-24-mga/SneakboxMGA-01.jpg" width="3000" height="2000" alt="Top of the case" class="responsive" />
</picture>
</a>
<figcaption class="center">Top of the case</figcaption>
</figure>
</div>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-07-24-mga/SneakboxMGA-02.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-07-24-mga/SneakboxMGA-02.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-07-24-mga/SneakboxMGA-02.jpg" />
<img src="/images/posts/2021-07-24-mga/SneakboxMGA-02.jpg" width="3000" height="2000" alt="Back of the case" class="responsive" />
</picture>
</a>
<figcaption class="center">Back of the case</figcaption>
</figure>
</div>
<p>The machining on the case is solid. I didn’t spot any obvious defects.</p>
<div class="flex-horizontal">
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-07-24-mga/SneakboxMGA-07.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-07-24-mga/SneakboxMGA-07.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-07-24-mga/SneakboxMGA-07.jpg" />
<img src="/images/posts/2021-07-24-mga/SneakboxMGA-07.jpg" width="3000" height="2000" alt="Logo on the back of the case" class="responsive" />
</picture>
</a>
<figcaption class="center">Logo on the back of the case</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-07-24-mga/SneakboxMGA-08.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-07-24-mga/SneakboxMGA-08.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-07-24-mga/SneakboxMGA-08.jpg" />
<img src="/images/posts/2021-07-24-mga/SneakboxMGA-08.jpg" width="3000" height="2000" alt="The split in the middle of the case" class="responsive" />
</picture>
</a>
<figcaption class="center">The split in the middle of the case</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-07-24-mga/SneakboxMGA-19.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-07-24-mga/SneakboxMGA-19.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-07-24-mga/SneakboxMGA-19.jpg" />
<img src="/images/posts/2021-07-24-mga/SneakboxMGA-19.jpg" width="3000" height="2000" alt="Close macro of the LED holes" class="responsive" />
</picture>
</a>
<figcaption class="center">Close macro of the LED holes</figcaption>
</figure>
</div>
</div>
<h3 id="the-pcb">The PCB</h3>
<p>This is an Alice-layout PCB. It uses Kailh hotswap sockets and support stepped caps lock.</p>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-07-24-mga/SneakboxMGA-04.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-07-24-mga/SneakboxMGA-04.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-07-24-mga/SneakboxMGA-04.jpg" />
<img src="/images/posts/2021-07-24-mga/SneakboxMGA-04.jpg" width="3000" height="2000" alt="Top of the PCB" class="responsive" />
</picture>
</a>
<figcaption class="center">Top of the PCB</figcaption>
</figure>
</div>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-07-24-mga/SneakboxMGA-03.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-07-24-mga/SneakboxMGA-03.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-07-24-mga/SneakboxMGA-03.jpg" />
<img src="/images/posts/2021-07-24-mga/SneakboxMGA-03.jpg" width="3000" height="2000" alt="Back of the PCB" class="responsive" />
</picture>
</a>
<figcaption class="center">Back of the PCB</figcaption>
</figure>
</div>
<p>It uses an ATmega 32U4, which can be seen in one of the photos below. Note the Sneakbox information on the PCB as well.</p>
<div class="flex-horizontal">
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-07-24-mga/SneakboxMGA-09.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-07-24-mga/SneakboxMGA-09.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-07-24-mga/SneakboxMGA-09.jpg" />
<img src="/images/posts/2021-07-24-mga/SneakboxMGA-09.jpg" width="3000" height="2000" alt="ATmega 32U4 on the PCB" class="responsive" />
</picture>
</a>
<figcaption class="center">ATmega 32U4 on the PCB</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-07-24-mga/SneakboxMGA-10.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-07-24-mga/SneakboxMGA-10.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-07-24-mga/SneakboxMGA-10.jpg" />
<img src="/images/posts/2021-07-24-mga/SneakboxMGA-10.jpg" width="3000" height="2000" alt="Sneakbox logo on the PCB" class="responsive" />
</picture>
</a>
<figcaption class="center">Sneakbox logo on the PCB</figcaption>
</figure>
</div>
</div>
<div class="flex-horizontal">
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-07-24-mga/SneakboxMGA-11.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-07-24-mga/SneakboxMGA-11.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-07-24-mga/SneakboxMGA-11.jpg" />
<img src="/images/posts/2021-07-24-mga/SneakboxMGA-11.jpg" width="3000" height="2000" alt="PCB revision information" class="responsive" />
</picture>
</a>
<figcaption class="center">PCB revision information</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-07-24-mga/SneakboxMGA-12.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-07-24-mga/SneakboxMGA-12.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-07-24-mga/SneakboxMGA-12.jpg" />
<img src="/images/posts/2021-07-24-mga/SneakboxMGA-12.jpg" width="3000" height="2000" alt="Top of the PCB up close" class="responsive" />
</picture>
</a>
<figcaption class="center">Top of the PCB up close</figcaption>
</figure>
</div>
</div>
<h3 id="the-plate">The plate</h3>
<p>The brass plate is sturdy, clean, and fits the various stabilizers I have. It’s also polished, which looks great on the keyboard, as the gaps between keycaps in some spots is greater than on a non-ergo/Alice layout.</p>
<div class="flex-horizontal">
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-07-24-mga/SneakboxMGA-05.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-07-24-mga/SneakboxMGA-05.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-07-24-mga/SneakboxMGA-05.jpg" />
<img src="/images/posts/2021-07-24-mga/SneakboxMGA-05.jpg" width="3000" height="2000" alt="Top of the brass plate" class="responsive" />
</picture>
</a>
<figcaption class="center">Top of the brass plate</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-07-24-mga/SneakboxMGA-06.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-07-24-mga/SneakboxMGA-06.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-07-24-mga/SneakboxMGA-06.jpg" />
<img src="/images/posts/2021-07-24-mga/SneakboxMGA-06.jpg" width="3000" height="2000" alt="Back of the brass plate" class="responsive" />
</picture>
</a>
<figcaption class="center">Back of the brass plate</figcaption>
</figure>
</div>
</div>
<h2 id="the-build">The build</h2>
<p>I chose to build the MGA Standard with the following components:</p>
<ul>
<li>Case: <a href="https://sneakbox.com/products/mga-standard" target="_blank" rel="noopener">Sneakbox MGA Standard</a> - Black B-stock</li>
<li>PCB: <a href="https://sneakbox.com/collections/frontpage/products/sneakbox-alice-hotswap-pcbs" target="_blank" rel="noopener">Sneakbox Alice Hotswap PCB - USB-C underside</a></li>
<li>Plate: Brass</li>
<li>Switches: <a href="https://mkultra.click/gazzew-boba-silent-tactile-u4-switches" target="_blank" rel="noopener">Boba U4 68g silent tactiles (Pearl)</a></li>
<li>Stabilizers: Durock v2 with Krytox 205g0 and dielectric grease</li>
<li>Keycaps: <a href="https://cannonkeys.com/products/gb-sa-mizu" target="_blank" rel="noopener">SA Mizu (uniform R3 SA profile, produced by Signature Plastics)</a></li>
<li>Foam: <a href="https://sneakbox.com/collections/frontpage/products/alice-layout-foam-pack" target="_blank" rel="noopener">Sneakbox EVA foam</a> between the PCB and plate as well as between the PCB and case</li>
</ul>
<p>The SA Mizu keycaps were recently delivered and the uniform profile made it so I didn’t have to worry much about having the exact keycaps I needed. The color against the black case also worked out really well.</p>
<p>Here is the final build against a black background:</p>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-07-24-mga/SneakboxMGA-14.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-07-24-mga/SneakboxMGA-14.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-07-24-mga/SneakboxMGA-14.jpg" />
<img src="/images/posts/2021-07-24-mga/SneakboxMGA-14.jpg" width="3000" height="2000" alt="MGA Standard with SA Mizu" class="responsive" />
</picture>
</a>
<figcaption class="center">MGA Standard with SA Mizu</figcaption>
</figure>
</div>
<p>Another shot of the final build against a colorful desk mat:</p>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-07-24-mga/SneakboxMGA-13.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-07-24-mga/SneakboxMGA-13.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-07-24-mga/SneakboxMGA-13.jpg" />
<img src="/images/posts/2021-07-24-mga/SneakboxMGA-13.jpg" width="3000" height="2000" alt="MGA Standard with SA Mizu on a desk mat" class="responsive" />
</picture>
</a>
<figcaption class="center">MGA Standard with SA Mizu on a desk mat</figcaption>
</figure>
</div>
<p>The SA Mizu caps really work well on this case. Here are a few more photos of this build.</p>
<div class="flex-horizontal">
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-07-24-mga/SneakboxMGA-15.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-07-24-mga/SneakboxMGA-15.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-07-24-mga/SneakboxMGA-15.jpg" />
<img src="/images/posts/2021-07-24-mga/SneakboxMGA-15.jpg" width="3000" height="2000" alt="Another angle of the final build" class="responsive" />
</picture>
</a>
<figcaption class="center">Another angle of the final build</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-07-24-mga/SneakboxMGA-16.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-07-24-mga/SneakboxMGA-16.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-07-24-mga/SneakboxMGA-16.jpg" />
<img src="/images/posts/2021-07-24-mga/SneakboxMGA-16.jpg" width="3000" height="2000" alt="Closer view of the SA Mizu keycaps" class="responsive" />
</picture>
</a>
<figcaption class="center">Closer view of the SA Mizu keycaps</figcaption>
</figure>
</div>
</div>
<div class="flex-horizontal">
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-07-24-mga/SneakboxMGA-17.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-07-24-mga/SneakboxMGA-17.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-07-24-mga/SneakboxMGA-17.jpg" />
<img src="/images/posts/2021-07-24-mga/SneakboxMGA-17.jpg" width="3000" height="2000" alt="Close up of the modifiers and the case" class="responsive" />
</picture>
</a>
<figcaption class="center">Close up of the modifiers and the case</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-07-24-mga/SneakboxMGA-18.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-07-24-mga/SneakboxMGA-18.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-07-24-mga/SneakboxMGA-18.jpg" />
<img src="/images/posts/2021-07-24-mga/SneakboxMGA-18.jpg" width="3000" height="2000" alt="Even closer view of the keycaps" class="responsive" />
</picture>
</a>
<figcaption class="center">Even closer view of the keycaps</figcaption>
</figure>
</div>
</div>
<h2 id="final-thoughts">Final thoughts</h2>
<p>The MGA Standard is great value for an Alice-style ergo keyboard. It’s solid, well-designed, and has support from a great vendor. Additionally, the hotswap sockets and simple case design make building this a breeze.</p>
<p>Related posts on Sneakbox keyboards:</p>
<ul>
<li><a href="/posts/2021-06-20-disarray-unboxing/" target="_blank"><em>Unboxing the Sneakbox Disarray 70% keyboard</em></a></li>
<li><a href="/posts/2021-07-24-sneakbox-disarray-wob/" target="_blank"><em>Sneakbox Disarray 70% with WoB keycaps</em></a></li>
</ul>Sneakbox MGA Standard (Alice-style) with SA Mizu (unboxing and final build)Unboxing the Sneakbox Disarray 70% keyboard2021-06-20T00:00:00+00:002021-06-20T00:00:00+00:00https://mattj.io/posts/disarray-unboxing<h1 id="unboxing-the-sneakbox-disarray-70-keyboard">Unboxing the Sneakbox Disarray 70% keyboard</h1>
<p>Sunday, June 20, 2021</p>
<p><a href="/posts/">Click here to go to all posts</a>.</p>
<p>A keyboard with the aesthetic of FM radios of the past? What’s not to love? The Disarray is a 70% keyboard from Sneakbox with a unique form factor.</p>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-06-20/Disarray-26.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-06-20/Disarray-26.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-06-20/Disarray-26.jpg" />
<img src="/images/posts/2021-06-20/Disarray-26.jpg" width="3000" height="2000" alt="Disarray logo on the back of the case" class="responsive" />
</picture>
</a>
<figcaption class="center">Disarray logo on the back of the case</figcaption>
</figure>
</div>
<p>The Disarray group buy ran from August 1, 2020 to September 5, 2020 via <a href="https://sneakbox.com/products/disarray" target="_blank" rel="noopener">the Sneakbox website</a>. For folks who already had Discipline65 PCB, a retrofit option was also available via <a href="https://sneakbox.com/products/retrofit-kit-for-discipline65-case-only" target="_blank" rel="noopener">the Sneakbox website</a>. The original interest check was on <a href="https://geekhack.org/index.php?topic=107036.0" target="_blank" rel="noopener">geekhack</a>.</p>
<p>Includes:</p>
<ul>
<li>Case: Anodized aluminum</li>
<li>Mount: Top mount</li>
<li>Plate: Brass (custom)</li>
<li>PCB: Disarray PCB (solder only, see options below). Can also be used with Discipline65 PCB via retrofit option. Disarray PCB options:
<ul>
<li>Staggered: Black with White details</li>
<li>Staggered: White with Black details</li>
<li>Staggered: Special Edition FR4 - uses a black FR4 substrate with clear solder mask, which enables the you to see the real copper traces</li>
<li>Ortho: Black with White Details</li>
<li>Ortho: White with Black Details</li>
</ul>
</li>
<li>Also includes:
<ul>
<li>Polycarbonate window</li>
<li>EVA case foam (under PCB)</li>
<li>Rotary encoder</li>
<li>Brass knob</li>
<li>Screws, LEDs, and rubber strips for feet</li>
</ul>
</li>
</ul>
<p>I selected the black case and two PCBs: one black with white details, and one special edition FR4. Real copper traces? Sign me up.</p>
<p>Let’s open up this box!</p>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-06-20/Disarray-01.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-06-20/Disarray-01.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-06-20/Disarray-01.jpg" />
<img src="/images/posts/2021-06-20/Disarray-01.jpg" width="3000" height="2000" alt="Disarray shipping box" class="responsive" />
</picture>
</a>
<figcaption class="center">Disarray shipping box</figcaption>
</figure>
</div>
<h2 id="packaging-and-box">Packaging and box</h2>
<p>Packaging is great here. Custom tape and a well-packed box are the first things you notice.</p>
<div class="flex-horizontal">
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-06-20/Disarray-02.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-06-20/Disarray-02.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-06-20/Disarray-02.jpg" />
<img src="/images/posts/2021-06-20/Disarray-02.jpg" width="3000" height="2000" alt="Custom Sneakbox packing tape" class="responsive" />
</picture>
</a>
<figcaption class="center">Custom Sneakbox packing tape</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-06-20/Disarray-03.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-06-20/Disarray-03.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-06-20/Disarray-03.jpg" />
<img src="/images/posts/2021-06-20/Disarray-03.jpg" width="3000" height="2000" alt="Packaging inside the shipping box" class="responsive" />
</picture>
</a>
<figcaption class="center">Packaging inside the shipping box</figcaption>
</figure>
</div>
</div>
<p>We get our first look at the Disarray box itself, sitting without any damage in the box!</p>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-06-20/Disarray-04.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-06-20/Disarray-04.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-06-20/Disarray-04.jpg" />
<img src="/images/posts/2021-06-20/Disarray-04.jpg" width="3000" height="2000" alt="Disarray box in shipping box" class="responsive" />
</picture>
</a>
<figcaption class="center">Disarray box in shipping box</figcaption>
</figure>
</div>
<p>Pulling the custom box out, it’s really a lot of fantastic attention to detail. If I saw this on a retail shelf, I’d absolutely assume there was a design team behind it. Here’s the front of the box:</p>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-06-20/Disarray-05.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-06-20/Disarray-05.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-06-20/Disarray-05.jpg" />
<img src="/images/posts/2021-06-20/Disarray-05.jpg" width="3000" height="2000" alt="Disarray box, front" class="responsive" />
</picture>
</a>
<figcaption class="center">Disarray box, front</figcaption>
</figure>
</div>
<p>And the back:</p>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-06-20/Disarray-06.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-06-20/Disarray-06.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-06-20/Disarray-06.jpg" />
<img src="/images/posts/2021-06-20/Disarray-06.jpg" width="3000" height="2000" alt="Disarray box, back" class="responsive" />
</picture>
</a>
<figcaption class="center">Disarray box, back</figcaption>
</figure>
</div>
<p>There are a lot of fun details on this product box. Here are a couple macro shots:</p>
<div class="flex-horizontal">
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-06-20/Disarray-07.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-06-20/Disarray-07.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-06-20/Disarray-07.jpg" />
<img src="/images/posts/2021-06-20/Disarray-07.jpg" width="3000" height="2000" alt="Up close photo of the box graphics" class="responsive" />
</picture>
</a>
<figcaption class="center">Up close photo of the box graphics</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-06-20/Disarray-08.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-06-20/Disarray-08.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-06-20/Disarray-08.jpg" />
<img src="/images/posts/2021-06-20/Disarray-08.jpg" width="3000" height="2000" alt="Logo on the side of the box" class="responsive" />
</picture>
</a>
<figcaption class="center">Logo on the side of the box</figcaption>
</figure>
</div>
</div>
<p>Onto the keyboard!</p>
<h2 id="included-in-the-box">Included in the box</h2>
<div class="center width30">
<figure class="fill-parent">
<video playsinline="" autoplay="" loop="" muted="" width="1280" height="720" class="responsive" title="Opening the Disarray product box (looped)">
<source src="/images/posts/2021-06-20/DisarrayOpeningBox.webm" type="video/webm" />
<source src="/images/posts/2021-06-20/DisarrayOpeningBox.mp4" type="video/mp4" />
<div fallback="">
<p>This browser does not support the video element.</p>
</div>
</video>
<figcaption class="center">Opening the Disarray product box (looped)</figcaption>
</figure>
</div>
<p>Immediately, you’ll see a few things: the aluminum case and some of the accessories.</p>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-06-20/Disarray-09.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-06-20/Disarray-09.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-06-20/Disarray-09.jpg" />
<img src="/images/posts/2021-06-20/Disarray-09.jpg" width="3000" height="2000" alt="Opened Disarray product box" class="responsive" />
</picture>
</a>
<figcaption class="center">Opened Disarray product box</figcaption>
</figure>
</div>
<p>Let’s start by taking a closer look at the aluminum case. I chose the anodized black option for the case, since I wanted to maximize the number of keycap sets with which it would work well. Here’s the front of the case:</p>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-06-20/Disarray-10.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-06-20/Disarray-10.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-06-20/Disarray-10.jpg" />
<img src="/images/posts/2021-06-20/Disarray-10.jpg" width="3000" height="2000" alt="Front of the case" class="responsive" />
</picture>
</a>
<figcaption class="center">Front of the case</figcaption>
</figure>
</div>
<p>And the back:</p>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-06-20/Disarray-11.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-06-20/Disarray-11.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-06-20/Disarray-11.jpg" />
<img src="/images/posts/2021-06-20/Disarray-11.jpg" width="3000" height="2000" alt="Back of the case" class="responsive" />
</picture>
</a>
<figcaption class="center">Back of the case</figcaption>
</figure>
</div>
<p>This is a top-mount keyboard when using the Disarray PCB. Here’s the top part of the case where the plate is fastened:</p>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-06-20/Disarray-12.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-06-20/Disarray-12.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-06-20/Disarray-12.jpg" />
<img src="/images/posts/2021-06-20/Disarray-12.jpg" width="3000" height="2000" alt="Interior of the top of the case" class="responsive" />
</picture>
</a>
<figcaption class="center">Interior of the top of the case</figcaption>
</figure>
</div>
<p>Here are a few macro shots showing the interior parts of the case.</p>
<div class="flex-horizontal">
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-06-20/Disarray-13.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-06-20/Disarray-13.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-06-20/Disarray-13.jpg" />
<img src="/images/posts/2021-06-20/Disarray-13.jpg" width="3000" height="2000" alt="Mounting threads in the top of the case" class="responsive" />
</picture>
</a>
<figcaption class="center">Mounting threads in the top of the case</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-06-20/Disarray-14.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-06-20/Disarray-14.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-06-20/Disarray-14.jpg" />
<img src="/images/posts/2021-06-20/Disarray-14.jpg" width="3000" height="2000" alt="Rotary encoder through-hole" class="responsive" />
</picture>
</a>
<figcaption class="center">Rotary encoder through-hole</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-06-20/Disarray-15.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-06-20/Disarray-15.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-06-20/Disarray-15.jpg" />
<img src="/images/posts/2021-06-20/Disarray-15.jpg" width="3000" height="2000" alt="Interior corner of the case" class="responsive" />
</picture>
</a>
<figcaption class="center">Interior corner of the case</figcaption>
</figure>
</div>
</div>
<p>If you have a Discipline65 PCB, the keyboard also includes the holes and screws to tray mount the Discipline65 PCB. Here’s another photo of the bottom of the case where you could tray mount that PCB:</p>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-06-20/Disarray-16.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-06-20/Disarray-16.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-06-20/Disarray-16.jpg" />
<img src="/images/posts/2021-06-20/Disarray-16.jpg" width="3000" height="2000" alt="Interior of the bottom of the case" class="responsive" />
</picture>
</a>
<figcaption class="center">Interior of the bottom of the case</figcaption>
</figure>
</div>
<p>You also receive EVA foam, a rotary encoder, a brass knob, rubber strips for feet, screws, and LEDs.</p>
<div class="flex-horizontal">
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-06-20/Disarray-17.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-06-20/Disarray-17.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-06-20/Disarray-17.jpg" />
<img src="/images/posts/2021-06-20/Disarray-17.jpg" width="3000" height="2000" alt="EVA foam" class="responsive" />
</picture>
</a>
<figcaption class="center">EVA foam</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-06-20/Disarray-20.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-06-20/Disarray-20.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-06-20/Disarray-20.jpg" />
<img src="/images/posts/2021-06-20/Disarray-20.jpg" width="3000" height="2000" alt="Knob, screws, LEDs, encoder, and rubber strips" class="responsive" />
</picture>
</a>
<figcaption class="center">Knob, screws, LEDs, encoder, and rubber strips</figcaption>
</figure>
</div>
</div>
<p>The plate is brass, which was the only option. The stiffness of the brass plate is necessary to support the PCB, as there are no standoffs or fasteners (apart from the switches) holding the plate and PCB together in this design.</p>
<div class="flex-horizontal">
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-06-20/Disarray-18.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-06-20/Disarray-18.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-06-20/Disarray-18.jpg" />
<img src="/images/posts/2021-06-20/Disarray-18.jpg" width="3000" height="2000" alt="Front of the brass plate" class="responsive" />
</picture>
</a>
<figcaption class="center">Front of the brass plate</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-06-20/Disarray-19.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-06-20/Disarray-19.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-06-20/Disarray-19.jpg" />
<img src="/images/posts/2021-06-20/Disarray-19.jpg" width="3000" height="2000" alt="Back of the brass plate" class="responsive" />
</picture>
</a>
<figcaption class="center">Back of the brass plate</figcaption>
</figure>
</div>
</div>
<p>Speaking of brass, the knob for the rotary encoder is a thing of beauty. It’s hefty and well machined.</p>
<div class="flex-horizontal">
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-06-20/Disarray-22.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-06-20/Disarray-22.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-06-20/Disarray-22.jpg" />
<img src="/images/posts/2021-06-20/Disarray-22.jpg" width="2000" height="3000" alt="Brass knob and grub screw" class="responsive" />
</picture>
</a>
<figcaption class="center">Brass knob and grub screw</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-06-20/Disarray-38.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-06-20/Disarray-38.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-06-20/Disarray-38.jpg" />
<img src="/images/posts/2021-06-20/Disarray-38.jpg" width="3000" height="2000" alt="2:1Close up of the knob showing the machining" class="responsive" />
</picture>
</a>
<figcaption class="center">Close up of the knob showing the machining</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-06-20/Disarray-23.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-06-20/Disarray-23.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-06-20/Disarray-23.jpg" />
<img src="/images/posts/2021-06-20/Disarray-23.jpg" width="2000" height="3000" alt="Interior of the brass knob" class="responsive" />
</picture>
</a>
<figcaption class="center">Interior of the brass knob</figcaption>
</figure>
</div>
</div>
<p>Next up, let’s take a look at the two PCBs!</p>
<h2 id="pcb">PCB</h2>
<p>As I mentioned above, I chose two Disarray PCB options: one white on black and one FR4 copper special edition. Both are in a staggered layout.</p>
<p>Here is the front of both PCBs:</p>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-06-20/Disarray-27.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-06-20/Disarray-27.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-06-20/Disarray-27.jpg" />
<img src="/images/posts/2021-06-20/Disarray-27.jpg" width="3000" height="2000" alt="Front of the Disarray PCBs" class="responsive" />
</picture>
</a>
<figcaption class="center">Front of the Disarray PCBs</figcaption>
</figure>
</div>
<p>And here is the back:</p>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-06-20/Disarray-28.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-06-20/Disarray-28.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-06-20/Disarray-28.jpg" />
<img src="/images/posts/2021-06-20/Disarray-28.jpg" width="3000" height="2000" alt="Back of the Disarray PCBs" class="responsive" />
</picture>
</a>
<figcaption class="center">Back of the Disarray PCBs</figcaption>
</figure>
</div>
<p>The Disarray PCB is powered by an ATmega 32U4 and has QMK support. It features a USB-C port. The staggered PCB supports ISO, split backspace, stepped capslock, left ISO shift+JIS, and small shift.</p>
<p>Here’s a graphic showing the various layouts that that the PCB supports (solder only):</p>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-06-20/DisarrayStaggeredKeyConfig.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-06-20/DisarrayStaggeredKeyConfig.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-06-20/DisarrayStaggeredKeyConfig.jpg" />
<img src="/images/posts/2021-06-20/DisarrayStaggeredKeyConfig.jpg" width="1713" height="1068" alt="Disarray staggered PCB layout options. Image courtesy of mujimanic at Sneakbox" class="responsive" />
</picture>
</a>
<figcaption class="center">Disarray staggered PCB layout options. Image courtesy of mujimanic at Sneakbox</figcaption>
</figure>
</div>
<p>Support is one thing, but the PCB itself is well annotated to assist during the building process. Again, attention to detail is fantastic here.</p>
<div class="flex-horizontal">
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-06-20/Disarray-29.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-06-20/Disarray-29.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-06-20/Disarray-29.jpg" />
<img src="/images/posts/2021-06-20/Disarray-29.jpg" width="3000" height="2000" alt="PCB instructions for mounting" class="responsive" />
</picture>
</a>
<figcaption class="center">PCB instructions for mounting</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-06-20/Disarray-33.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-06-20/Disarray-33.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-06-20/Disarray-33.jpg" />
<img src="/images/posts/2021-06-20/Disarray-33.jpg" width="3000" height="2000" alt="PCB instructions for LED placement" class="responsive" />
</picture>
</a>
<figcaption class="center">PCB instructions for LED placement</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-06-20/Disarray-34.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-06-20/Disarray-34.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-06-20/Disarray-34.jpg" />
<img src="/images/posts/2021-06-20/Disarray-34.jpg" width="3000" height="2000" alt="PCB instructions for layout options" class="responsive" />
</picture>
</a>
<figcaption class="center">PCB instructions for layout options</figcaption>
</figure>
</div>
</div>
<p>Part of the Disarray design is that the internals are visible via a polycarbonate window at the top of the case. This is a fanastic design choice, because the details on the PCB look great, especially on the FR4 special edition with the visible copper traces.</p>
<div class="flex-horizontal">
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-06-20/Disarray-35.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-06-20/Disarray-35.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-06-20/Disarray-35.jpg" />
<img src="/images/posts/2021-06-20/Disarray-35.jpg" width="3000" height="2000" alt="ATmega 32U4 at the top of the PCB" class="responsive" />
</picture>
</a>
<figcaption class="center">ATmega 32U4 at the top of the PCB</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-06-20/Disarray-36.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-06-20/Disarray-36.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-06-20/Disarray-36.jpg" />
<img src="/images/posts/2021-06-20/Disarray-36.jpg" width="3000" height="2000" alt="Components at the top of the PCB" class="responsive" />
</picture>
</a>
<figcaption class="center">Components at the top of the PCB</figcaption>
</figure>
</div>
</div>
<h2 id="measurements">Measurements</h2>
<p>I took a few measurements of some of the parts in case I, or anyone else, has a need for them:</p>
<ul>
<li>Brass knob:
<ul>
<li>Diameter: 23.0mm</li>
<li>Interior: 6.1mm</li>
<li>Height: 14.0mm</li>
</ul>
</li>
<li>PCB:
<ul>
<li>White on black thickness: 1.6mm</li>
<li>FR4 (copper) thickness: 1.5mm</li>
</ul>
</li>
<li>EVA foam:
<ul>
<li>Thickness: ~2.4mm</li>
</ul>
</li>
<li>Brass plate:
<ul>
<li>Thickness: 1.5mm</li>
</ul>
</li>
</ul>
<h2 id="final-thoughts-and-more-photos">Final thoughts and more photos</h2>
<p>I’m really excited to build this keyboard. 😁</p>
<p>As with many smaller-scale custom products, the manufacture of the Disarray was not 100% easy. However, mujimanic (Bryan) was extremely communicative, transparent, thoughtful, and empathetic with the community through the entire process. It’s been an awesome experience to be part of this group buy.</p>
<p>With that, here are a few more macro shots to close out this post.</p>
<div class="flex-horizontal">
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-06-20/Disarray-30.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-06-20/Disarray-30.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-06-20/Disarray-30.jpg" />
<img src="/images/posts/2021-06-20/Disarray-30.jpg" width="3000" height="2000" alt="Sneakbox logo on the PCB" class="responsive" />
</picture>
</a>
<figcaption class="center">Sneakbox logo on the PCB</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-06-20/Disarray-31.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-06-20/Disarray-31.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-06-20/Disarray-31.jpg" />
<img src="/images/posts/2021-06-20/Disarray-31.jpg" width="3000" height="2000" alt="Copper traces on the FR4 special edition PCB" class="responsive" />
</picture>
</a>
<figcaption class="center">Copper traces on the FR4 special edition PCB</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-06-20/Disarray-32.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-06-20/Disarray-32.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-06-20/Disarray-32.jpg" />
<img src="/images/posts/2021-06-20/Disarray-32.jpg" width="3000" height="2000" alt="Disarray name and version on the PCB" class="responsive" />
</picture>
</a>
<figcaption class="center">Disarray name and version on the PCB</figcaption>
</figure>
</div>
</div>
<div class="flex-horizontal">
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-06-20/Disarray-24.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-06-20/Disarray-24.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-06-20/Disarray-24.jpg" />
<img src="/images/posts/2021-06-20/Disarray-24.jpg" width="2000" height="3000" alt="Rotary encoder standing up" class="responsive" />
</picture>
</a>
<figcaption class="center">Rotary encoder standing up</figcaption>
</figure>
</div>
<div class="flex-item-horizontal">
<figure class="fill-parent">
<a href="/images/posts/2021-06-20/Disarray-25.jpg" target="_blank" rel="noopener" class="text-decoration-none">
<picture>
<source type="image/avif" srcset="/images/posts/2021-06-20/Disarray-25.avif" />
<source type="image/jpeg" srcset="/images/posts/2021-06-20/Disarray-25.jpg" />
<img src="/images/posts/2021-06-20/Disarray-25.jpg" width="2000" height="3000" alt="Underside of the rotary encoder" class="responsive" />
</picture>
</a>
<figcaption class="center">Underside of the rotary encoder</figcaption>
</figure>
</div>
</div>
<p>Related posts on Sneakbox keyboards:</p>
<ul>
<li><a href="/posts/2021-07-24-sneakbox-disarray-wob/" target="_blank"><em>Sneakbox Disarray 70% with WoB keycaps</em></a></li>
<li><a href="/posts/2021-07-24-sneakbox-mga-sa-mizu/" target="_blank"><em>Sneakbox MGA Standard with SA Mizu (unboxing and final build)</em></a></li>
</ul>Unboxing the Sneakbox Disarray 70% keyboardImplementing site navigation with the <details> element2021-06-07T00:00:00+00:002021-06-07T00:00:00+00:00https://mattj.io/posts/site-navigation-html-css-only<h1 id="implementing-site-navigation-with-the-details-element">Implementing site navigation with the <details> element</h1>
<p>Monday, June 7, 2021</p>
<p><a href="/posts/">Click here to go to all posts</a>.</p>
<p><em>Create a fast, responsive, clean, and accessible site navigation using HTML and CSS</em></p>
<h2 id="demo">Demo</h2>
<p><strong><a href="/demos/details-nav/" target="_blank" rel="noopener">Click here for a demo page</a></strong></p>
<p>If you want to edit the demo live, you can try the version hosted <a href="https://codepen.io/devadvance/pen/bGBvvWv" target="_blank" rel="noopener">here on CodePen</a>.</p>
<h2 id="background">Background</h2>
<p>When it comes to content-focused websites, I often align with the concept of <a href="https://en.wikipedia.org/wiki/Progressive_enhancement" target="_blank" rel="noopener">progressive enhancement</a>, which allows users with different access requirements, such as screen size, physical ability, and bandwidth limitations, to access the same base content fluidly. So, when I looked for opportunities to eliminate nonessential JavaScript from my sites, I decided that the JavaScript-dependent site navigation needed to go.</p>
<p>In overhauling the navbar, I prioritized four areas of design: it should be fast, responsive, clean, and accessible. Visual styles come and go, so prioritizing a “clean” implementation provides a platform for those iterative developments.</p>
<p>Although there are numerous ways of approaching this problem, a few stand out for their popularity and/or efficiency. Some of the most popular methods involve CSS. In particular, they use the <code class="language-plaintext highlighter-rouge">:hover</code> selector or <code class="language-plaintext highlighter-rouge">:checked</code> pseudo-class. However, I found these to be suboptimal due to the challenge of making them accessible for all users, especially those using assistive technologies, including those <a href="https://www.w3.org/WAI/people-use-web/tools-techniques/" target="_blank" rel="noopener">covered by W3C in its Web Accessibility Initiative</a>.</p>
<p><a href="https://medium.com/@heyoka" target="_blank" rel="noopener">Mark Caron</a>, in his post, <a href="https://medium.com/@heyoka/responsive-pure-css-off-canvas-hamburger-menu-aebc8d11d793" target="_blank" rel="noopener"><em>Responsive, Pure CSS Off-Canvas Hamburger Menu</em></a>, suggests using the <code class="language-plaintext highlighter-rouge"><details></code> element.</p>
<p>While that approach provided a great starting point, it focused on the fundamentals, rather than a fully responsive experience. When in a desktop view, it is often detrimental to both the user and the site creator to hide navigational elements in a side menu, as it is inherently less discoverable. This is why I established responsiveness as one of my key focuses at the outset of this process.</p>
<p>With these requirements in mind, I put together a working demo that is responsive, works on a variety of devices and browsers, works reasonably well with screen readers, and does not interfere with any of my sites’ existing implementation.</p>
<h2 id="testing">Testing</h2>
<p>You’ll notice that I didn’t mention cross-platform compatibility above in my goals. Similar to readable code, I felt that this one goes without saying 😁. To that end, I have tested this implementation on the following devices/browser:</p>
<ul>
<li>Chrome on Windows 10, macOS, and Android 11 (v90)</li>
<li>Firefox on Windows 10 (v86)</li>
<li>Safari (on macOS 11 and iOS 14)</li>
</ul>
<p>I have also tested this with the system screen reader turned on for Windows 10, macOS, and Android (TalkBack).</p>
<h2 id="screenshots">Screenshots</h2>
<p>A few screenshots on differently sized devices:</p>
<div class="center width30">
<figure class="fill-parent">
<a href="/images/posts/2021-06-07/03-iphone-se-open.png" target="_blank" rel="noopener" class="text-decoration-none">
<img src="/images/posts/2021-06-07/03-iphone-se-open.png" width="320" height="568" alt="Screenshot on an iPhone SE-sized layout with the menu open" class="responsive" />
</a>
<figcaption class="center">Screenshot on an iPhone SE-sized layout with the menu open</figcaption>
</figure>
</div>
<div class="center width30">
<figure class="fill-parent">
<a href="/images/posts/2021-06-07/04-ipad.png" target="_blank" rel="noopener" class="text-decoration-none">
<img src="/images/posts/2021-06-07/04-ipad.png" width="576" height="768" alt="Screenshot on an iPad-sized layout" class="responsive" />
</a>
<figcaption class="center">Screenshot on an iPad-sized layout</figcaption>
</figure>
</div>
<p>Here is a visual demo of the menu in use on an Android 11 mobile device:</p>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-06-07/05-gif-android.gif" target="_blank" rel="noopener" class="text-decoration-none">
<img src="/images/posts/2021-06-07/05-gif-android.gif" width="540" height="1170" alt="Demo on an Android 11 device" class="responsive" />
</a>
<figcaption class="center">Demo on an Android 11 device</figcaption>
</figure>
</div>
<p>This still functions without any CSS, though it certainly could look better:</p>
<div class="center width70">
<figure class="fill-parent">
<a href="/images/posts/2021-06-07/01-no-style.png" target="_blank" rel="noopener" class="text-decoration-none">
<img src="/images/posts/2021-06-07/01-no-style.png" width="1254" height="620" alt="Screenshot without any CSS" class="responsive" />
</a>
<figcaption class="center">Screenshot without any CSS</figcaption>
</figure>
</div>
<h2 id="future-enhancements">Future enhancements</h2>
<p>Feedback is greatly appreciated. I am sure many improvements could be made to this implementation. There are also likely enhancements that will further improve the experience with screen readers, as well as other assistive technologies to which I do not have immediate access. Feedback from the community always goes a long way in helping to cover the wide variety of devices out there!</p>Create a fast, responsive, clean, and accessible site navigation using HTML and CSS