webring 1.1.0 → 1.1.2

package/src/testdata/rss-12.xml

@@ -0,0 +1,4193 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">
+    <title>samwho.dev</title>
+    <subtitle>Personal website of Sam Rose.</subtitle>
+    <link href="https://samwho.dev/rss.xml" rel="self" type="application/atom+xml"/>
+    <link href="https://samwho.dev"/>
+    <generator uri="https://www.getzola.org/">Zola</generator>
+    <updated>2024-06-01T00:00:00+00:00</updated>
+    <id>https://samwho.dev/rss.xml</id>
+    
+        <entry xml:lang="en">
+            <title>A Commitment to Art and Dogs</title>
+            <published>2024-06-01T00:00:00+00:00</published>
+            <updated>2024-06-01T00:00:00+00:00</updated>
+            <author>
+            <name>Unknown</name>
+            </author>
+            <link rel="alternate" href="https://samwho.dev/dogs/" type="text/html"/>
+            <id>https://samwho.dev/dogs/</id>
+            
+            <content type="html">&lt;style&gt;
+.dog-line {
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  width: 100%;
+  height: 10rem;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
+.dog-line img {
+  flex-grow: 1;
+  height: auto;
+  margin: 0;
+  padding: 0;
+  object-fit: contain;
+}
+
+.dog-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 1rem;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+&lt;/style&gt;
+&lt;p&gt;Back in &lt;a href="/memory-allocation"&gt;Memory Allocation&lt;/a&gt;, I introduced Haskie.&lt;/p&gt;
+&lt;blockquote class="haskie"&gt;
+&lt;img src="/images/haskie-triumphant-200px.png" alt="A husky puppy looking triumphant" /&gt;
+&lt;p&gt;
+  Hello!
+&lt;/p&gt;
+&lt;/blockquote&gt;
+&lt;p&gt;The idea behind Haskie was to create a character that could ask questions the
+reader might have, and to "soften" the posts to make them feel less
+intimidating. I got some feedback from people that Haskie was a bit too
+childish, and didn't feel like he belonged in posts about serious topics.
+This feedback was in the minority, though, and most people liked him. So I kept
+him and used him again in &lt;a href="/hashing"&gt;Hashing&lt;/a&gt;.&lt;/p&gt;
+&lt;p&gt;Having a proxy to the reader was useful. I could anticipate areas of confusion
+and clear them up without creating enormous walls of text. I don't like it
+when the entire screen is filled with text, I like to break it up with images
+and interactive elements. And now dogs.&lt;/p&gt;
+&lt;p&gt;Then in &lt;a href="/bloom-filters"&gt;Bloom Filters&lt;/a&gt;, I found myself needing a
+character to represent the "adult in the room." If Haskie was my proxy to the
+reader, this new character would serve as a proxy to all of the material I
+learned from in the writing of the post. This is Sage.&lt;/p&gt;
+&lt;blockquote class="haskie"&gt;
+&lt;img src="/images/sage-happy-200px.png" alt="A husky looking happy" /&gt;
+&lt;p&gt;
+  Well met!
+&lt;/p&gt;
+&lt;/blockquote&gt;
+&lt;p&gt;I liked the idea of having a cast of characters, each with their own personality
+and purpose. But I had a few problems.&lt;/p&gt;
+&lt;h2 id="problems"&gt;&lt;a class="anchor" href="#problems"&gt;#&lt;/a&gt;
+Problems&lt;/h2&gt;
+&lt;p&gt;Both Haskie and Sage, because I have no artistic ability, were generated by AI.
+Back when I made them I was making no money from this blog, and I had no idea if
+I was going to keep them around. I didn't want to invest money in an idea that
+could flop, so I didn't feel bad about using AI to try it out.&lt;/p&gt;
+&lt;p&gt;Since then, however, I have been paid twice to write posts for companies, and I
+know that I'm keeping the dogs. &lt;strong&gt;It wasn't ethical to continue piggybacking on
+AI&lt;/strong&gt;.&lt;/p&gt;
+&lt;p&gt;While ethics were the primary motivation, there were some other smaller problems
+with the dogs:&lt;/p&gt;
+&lt;ol&gt;
+&lt;li&gt;The visual style of them, while I did like it, never felt like it fit
+with the rest of my personal brand.&lt;/li&gt;
+&lt;li&gt;It was difficult to get AI to generate consistent dogs. You'll notice
+differences in coat colouration and features between variants of the same dog.&lt;/li&gt;
+&lt;li&gt;The AI generated images look bad at small sizes.&lt;/li&gt;
+&lt;/ol&gt;
+&lt;p&gt;So I worked with the wonderful &lt;a href="https://www.andycarolan.com/"&gt;Andy
+Carolan&lt;/a&gt; to create a new design for my dogs. A design that would be
+consistent, fit with my brand, and look good at any size.&lt;/p&gt;
+&lt;h2 id="haskie-sage-and-doe"&gt;&lt;a class="anchor" href="#haskie-sage-and-doe"&gt;#&lt;/a&gt;
+Haskie, Sage, and Doe&lt;/h2&gt;
+&lt;div class="dog-line"&gt;
+&lt;img src="/images/dogs/haskie/default.svg" alt="A husky puppy called Haskie" /&gt;
+&lt;img src="/images/dogs/sage/default.svg" alt="A husky called Sage" /&gt;
+&lt;img src="/images/dogs/doe/default.svg" alt="A husky puppy called Doe" /&gt;
+&lt;/div&gt;
+&lt;p&gt;The redesigned dogs are consistent, use simple colours and shapes, and use the
+SVG file format to look good at any size. Each variant clocks in at around
+20kb, which is slightly larger than the small AI-generated images, but I'll be
+able to use them at any size.&lt;/p&gt;
+&lt;p&gt;Together the dogs represent a family unit: Sage as the dad, Haskie as the
+youngest child, and Doe as his older sister.&lt;/p&gt;
+&lt;p&gt;They also come in a variety of poses, so I can use them to represent different
+emotions or actions.&lt;/p&gt;
+&lt;div class="dog-grid"&gt;
+&lt;img src="/images/dogs/haskie/bored.svg" alt="A husky puppy called Haskie looking bored" /&gt;
+&lt;img src="/images/dogs/haskie/concerned.svg" alt="A husky puppy called Haskie looking concerned" /&gt;
+&lt;img src="/images/dogs/haskie/confused.svg" alt="A husky puppy called Haskie looking confused" /&gt;
+&lt;img src="/images/dogs/haskie/triumphant.svg" alt="A husky puppy called Haskie looking triumphant" /&gt;
+&lt;img src="/images/dogs/sage/caution2.svg" alt="A husky called Sage looking cautioning" /&gt;
+&lt;img src="/images/dogs/sage/caution.svg" alt="A husky called Sage looking cautioning" /&gt;
+&lt;img src="/images/dogs/sage/despair.svg" alt="A husky called Sage looking despaired" /&gt;
+&lt;img src="/images/dogs/sage/proud.svg" alt="A husky called Sage looking proud" /&gt;
+&lt;img src="/images/dogs/doe/amazed.svg" alt="A husky puppy called Doe looking amazed" /&gt;
+&lt;img src="/images/dogs/doe/mischief.svg" alt="A husky puppy called Doe looking mischievous" /&gt;
+&lt;img src="/images/dogs/doe/protective.svg" alt="A husky puppy called Doe looking protective" /&gt;
+&lt;img src="/images/dogs/doe/proud.svg" alt="A husky puppy called Doe looking proud" /&gt;
+&lt;/div&gt;
+&lt;p&gt;We were careful to make the dogs recognisable apart. They differ in colour, ear
+shape, tail shape, and collar tag. Sage and Doe have further distinguishing
+features: Sage with his glasses, and Doe with her bandana. Doe's bandana uses
+the same colours as the &lt;a
+href="https://en.wikipedia.org/wiki/Transgender_flag"&gt; transgender flag&lt;/a&gt;,
+to show my support for the trans community and as a nod to her identity.&lt;/p&gt;
+&lt;h2 id="going-forward"&gt;&lt;a class="anchor" href="#going-forward"&gt;#&lt;/a&gt;
+Going forward&lt;/h2&gt;
+&lt;p&gt;I'm so happy with the new dogs, and plan to use them in my posts going forward.
+I suspect I will, at some point, replace the dogs in my old posts as well.
+I don't plan to add any more characters, and I want to be careful to avoid
+overusing them. I don't want them to become a crutch, or to distract from the
+content of the posts.&lt;/p&gt;
+&lt;p&gt;I also haven't forgotten the many people that pointed out to me that you can't
+pet the dogs. I'm working on it.&lt;/p&gt;
+</content>
+            
+        </entry>
+    
+    
+    
+    
+        <entry xml:lang="en">
+            <title>Bloom Filters</title>
+            <published>2024-02-19T00:00:00+00:00</published>
+            <updated>2024-02-19T00:00:00+00:00</updated>
+            <author>
+            <name>Unknown</name>
+            </author>
+            <link rel="alternate" href="https://samwho.dev/bloom-filters/" type="text/html"/>
+            <id>https://samwho.dev/bloom-filters/</id>
+            
+            <content type="html">&lt;style&gt;
+.bf {
+  width: 100%;
+  height: 150px;
+}
+
+@media only screen and (min-width: 320px) and (max-width: 479px) {
+  .bf {
+    height: 200px;
+  }
+}
+
+@media only screen and (min-width: 480px) and (max-width: 676px) {
+  .bf {
+    height: 200px;
+  }
+ }
+
+@media only screen and (min-width: 677px) and (max-width: 991px) {
+  .bf {
+    height: 150px;
+  }
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: stretch;
+}
+
+input {
+    border: 1px solid rgb(119, 119, 119);
+    padding: 0.25rem;
+    border-radius: 0.25rem;
+    height: 2em;
+    line-height: 2em;
+}
+
+.aside {
+  padding: 2rem;
+  width: 100vw;
+  position: relative;
+  margin-left: -50vw;
+  left: 50%;
+  background-color: #eeeeee;
+
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.aside &gt; * {
+  flex-grow: 1;
+}
+
+.aside p {
+  padding-left: 1rem;
+  padding-right: 1rem;
+  max-width: 780px;
+  font-style: italic;
+  font-family: Lora, serif;
+  text-align: center;
+}
+
+&lt;/style&gt;
+&lt;noscript&gt;
+  &lt;div class=aside&gt;
+    &lt;p&gt;
+    This page makes heavy use of JavaScript to visualise the concepts discussed.
+    Viewing it without JavaScript will be a strange experience, as the text
+    talks about the visualisations. I strongly recommend either enabling
+    JavaScript, or not wasting your time.
+    &lt;/p&gt;
+  &lt;/div&gt;
+&lt;/noscript&gt;
+&lt;p&gt;Everyone has a set of tools they use to solve problems. Growing this set helps
+you to solve ever more difficult problems.  In this post, I'm going to teach you
+about a tool you may not have heard of before. It's a niche tool that won't
+apply to many problems, but when it does you'll find it invaluable.  It's called
+a "bloom filter."&lt;/p&gt;
+&lt;s-dog name=sage mode=warning&gt;
+  &lt;b style="color: #d08770"&gt;Before you continue!&lt;/b&gt; This post
+  assumes you know what a &lt;b&gt;hash function&lt;/b&gt; is, and if you don't it's going
+  to be tricky to understand. Sam has written a post about hash functions, and
+  recommendeds that you &lt;b&gt;&lt;a href="/hashing"&gt;read this first&lt;/a&gt;.&lt;/b&gt;
+&lt;/s-dog&gt;
+&lt;h3 id="what-bloom-filters-can-do"&gt;&lt;a class="anchor" href="#what-bloom-filters-can-do"&gt;#&lt;/a&gt;
+What bloom filters can do&lt;/h3&gt;
+&lt;p&gt;Bloom filters are similar to the &lt;code&gt;Set&lt;/code&gt; data structure. You can add items to
+them, and check if an item is present. Here's what it might look like to use
+a bloom filter in JavaScript, using a made-up &lt;code&gt;BloomFilter&lt;/code&gt; class:&lt;/p&gt;
+&lt;pre data-lang="javascript" style="background-color:#2e3440;color:#d8dee9;" class="language-javascript "&gt;&lt;code class="language-javascript" data-lang="javascript"&gt;&lt;span style="color:#81a1c1;"&gt;let &lt;/span&gt;&lt;span&gt;bf &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;= new &lt;/span&gt;&lt;span style="color:#8fbcbb;"&gt;BloomFilter&lt;/span&gt;&lt;span&gt;()&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;bf&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;add&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;Ant&amp;quot;&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;bf&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;add&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;Rhino&amp;quot;&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;bf&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;contains&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;Ant&amp;quot;&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;; &lt;/span&gt;&lt;span style="color:#616e88;"&gt;// true
+&lt;/span&gt;&lt;span&gt;bf&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;contains&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;Rhino&amp;quot;&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;; &lt;/span&gt;&lt;span style="color:#616e88;"&gt;// true
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;While this looks almost identical to a &lt;code&gt;Set&lt;/code&gt;, there are some key differences.
+Bloom filters are what's called a &lt;strong&gt;probabilistic data structure&lt;/strong&gt;.  Where a
+&lt;code&gt;Set&lt;/code&gt; can give you a concrete "yes" or "no" answer when you call &lt;code&gt;contains&lt;/code&gt;, a
+bloom filter can't. Bloom filters can give definite "no"s, but they can't be
+certain about "yes."&lt;/p&gt;
+&lt;p&gt;In the example above, when we ask &lt;code&gt;bf&lt;/code&gt; if it contains &lt;code&gt;"Ant"&lt;/code&gt; and &lt;code&gt;"Rhino"&lt;/code&gt;, the
+&lt;code&gt;true&lt;/code&gt; that it returns isn't a guarantee that they're present. We know that
+they're present because we added them just a couple of lines before, but it
+would be possible for this to happen:&lt;/p&gt;
+&lt;pre data-lang="javascript" style="background-color:#2e3440;color:#d8dee9;" class="language-javascript "&gt;&lt;code class="language-javascript" data-lang="javascript"&gt;&lt;span style="color:#81a1c1;"&gt;let &lt;/span&gt;&lt;span&gt;bf &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;= new &lt;/span&gt;&lt;span style="color:#8fbcbb;"&gt;BloomFilter&lt;/span&gt;&lt;span&gt;()&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;bf&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;add&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;Ant&amp;quot;&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;bf&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;add&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;Rhino&amp;quot;&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;bf&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;contains&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;Fox&amp;quot;&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;; &lt;/span&gt;&lt;span style="color:#616e88;"&gt;// true
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;We'll demonstrate &lt;em&gt;why&lt;/em&gt; over the course of this post. For now, we'll say that
+when bloom filters return &lt;code&gt;true&lt;/code&gt; it doesn't mean "yes", it means "maybe".  When
+this happens and the item has never been added before, it's called a
+&lt;strong&gt;false-positive&lt;/strong&gt;.&lt;/p&gt;
+&lt;p&gt;The opposite, claiming "no" when the answer is "yes," is called a
+&lt;strong&gt;false-negative&lt;/strong&gt;. A bloom filter will &lt;em&gt;never&lt;/em&gt; give a false-negative, and this
+is what makes them useful.&lt;/p&gt;
+&lt;s-dog name=haskie mode=confused&gt;
+  A data structure that lies to you?! How could that possibly be useful?
+&lt;/s-dog&gt;
+&lt;p&gt;It's not strictly lying, it's just not giving you a definite answer. Let's look
+at an example where we can use this property to our advantage.&lt;/p&gt;
+&lt;h3 id="when-bloom-filters-are-useful"&gt;&lt;a class="anchor" href="#when-bloom-filters-are-useful"&gt;#&lt;/a&gt;
+When bloom filters are useful&lt;/h3&gt;
+&lt;p&gt;Imagine you're building a web browser, and you want to protect users from
+malicious links. You could build and maintain a list of all known malicious
+links and check the list every time a user navigates the browser. If the link
+they're trying to visit is in the list, you warn the user that they might be
+about to visit a malicious website.&lt;/p&gt;
+&lt;p&gt;If we assume there are, say, 1,000,000 malicious links on the Internet, and each
+link is 20 characters long, then the list of malicious links would be 20MB in
+size. This isn't a huge amount of data, but it's not small either. If you have
+lots of users and want to keep this list up to date, the bandwidth could add up.&lt;/p&gt;
+&lt;p&gt;However, if you're happy to accept being wrong 0.0001% of the time (1 in a
+million), you could use a bloom filter which can store the same data in 3.59MB.
+That's an 82% reduction in size, and all it costs you is showing the user an
+incorrect warning 1 in every million links visited. If you wanted to take it
+even further, and you were happy to accept being wrong 0.1% of the time (1 in
+1000), the bloom filter would only be 1.8MB.&lt;/p&gt;
+&lt;p&gt;This use-case isn't hypothetical, either. Google Chrome used a bloom filter for
+this exact purpose until 2012. If you were worried about showing a warning when
+it wasn't needed, you could always make an API that has the full list of
+malicious links in a database. When the bloom filter says "maybe," you would
+then make an API call to check the full list to be sure. No more spurious
+warnings, and the bloom filter would save you from having to call the API for
+every link visited.&lt;/p&gt;
+&lt;h3 id="how-bloom-filters-work"&gt;&lt;a class="anchor" href="#how-bloom-filters-work"&gt;#&lt;/a&gt;
+How bloom filters work&lt;/h3&gt;
+&lt;p&gt;At its core, a bloom filter is an array of &lt;s-word&gt;bits&lt;/s-word&gt;. When it is
+created, all of the &lt;s-word&gt;bits&lt;/s-word&gt; are set to 0. We're going to represent
+this as a grid of circles, with each circle representing 1 &lt;s-word&gt;bit&lt;/s-word&gt;.
+Our bloom filters in this post are all going to have 32 &lt;s-word&gt;bits&lt;/s-word&gt; in
+total.&lt;/p&gt;
+&lt;p&gt;&lt;s-bloom-filter id=bf0 class="bf" hashes=sha1,sha256,sha512 bits=32&gt;&lt;/s-bloom-filter&gt;&lt;/p&gt;
+&lt;s-dog name=sam padding=false&gt;
+  I'm experimenting with alternate colour palettes. If you find the above
+  difficult to read, or just don't like it, please try &lt;a
+  href="?palette=tol#bf0"&gt;this one&lt;/a&gt; and let me know what you think.
+  &lt;a href="?palette=wong#bf0"&gt;Click here&lt;/a&gt; to go back to normal.
+&lt;/s-dog&gt;
+&lt;p&gt;To add an item to the bloom filter, we're going to hash it with 3 different hash
+functions, then use the 3 resulting values to set 3 &lt;s-word&gt;bits&lt;/s-word&gt;. If
+you're not familiar with hashing, I recommend reading &lt;a href="/hashing"&gt;my post&lt;/a&gt; about
+it before continuing.&lt;/p&gt;
+&lt;p&gt;For this post I'm choosing to use 3 of the
+&lt;a href="https://en.wikipedia.org/wiki/Secure_Hash_Algorithms"&gt;SHA&lt;/a&gt; family of hash
+functions: &lt;s-word&gt;sha1&lt;/s-word&gt;, &lt;s-word&gt;sha256&lt;/s-word&gt;, and
+&lt;s-word&gt;sha512&lt;/s-word&gt;. Here's what our bloom filter looks like if we add the
+value "foo" to it:&lt;/p&gt;
+&lt;s-bloom-filter id=bf1 class="bf" hashes=sha1,sha256,sha512 bits=32&gt;
+  &lt;add value="foo"&gt;
+&lt;/s-bloom-filter&gt;
+&lt;p&gt;The &lt;s-word&gt;bits&lt;/s-word&gt; in positions &lt;s-bitlink bfid=bf1
+highlight=true&gt;15&lt;/s-bitlink&gt;, &lt;s-bitlink bfid=bf1&gt;16&lt;/s-bitlink&gt; and &lt;s-bitlink
+bfid=bf1&gt;27&lt;/s-bitlink&gt; have been set. Other &lt;s-word&gt;bits&lt;/s-word&gt;, e.g.
+&lt;s-bitlink bfid=bf1&gt;1&lt;/s-bitlink&gt; have not been set. You can hover or tap the
+&lt;s-word&gt;bits&lt;/s-word&gt; in this paragraph to highlight them in the visualisation.
+We get to this state by taking the hash value of "foo" for each of our 3 hash
+functions and modulo it by the number of &lt;s-word&gt;bits&lt;/s-word&gt; in our bloom
+filter. Modulo gets us the remainder when dividing by 32, so we get 27 with
+&lt;s-word&gt;sha1&lt;/s-word&gt;, 15 with &lt;s-word&gt;sha256&lt;/s-word&gt; and 16 with
+&lt;s-word&gt;sha512&lt;/s-word&gt;. The table below shows what's happening, and you can try
+inputting your own values to see what &lt;s-word&gt;bits&lt;/s-word&gt; they would set if
+added.&lt;/p&gt;
+&lt;div style="display: flex; justify-content: center; margin-top: 1em"&gt;
+&lt;input
+  type="text"
+  value=foo
+  style="
+    width: 20em;
+    max-width: 100%;
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+  "
+  oninput="
+    let hv = document.getElementById('hv1');
+    hv.setAttribute('value', this.value);
+  "
+/&gt;
+&lt;/div&gt;
+&lt;hash-values id="hv1" bfid=bf1 value=foo mod=32&gt;&lt;/hash-values&gt;
+&lt;p&gt;Go ahead and &lt;s-word&gt;add&lt;/s-word&gt; a few of your own values to our bloom filter
+below and see what happens. There's also a &lt;s-word&gt;check&lt;/s-word&gt; button that
+will tell you if a value is present within the bloom filter. A value is only
+considered present if all of the &lt;s-word&gt;bits&lt;/s-word&gt; checked are set. You can
+start again by hitting the &lt;s-word&gt;clear&lt;/s-word&gt; button.&lt;/p&gt;
+&lt;p&gt;&lt;s-word-adder bfid=bf2&gt;&lt;/s-word-adder&gt;
+&lt;s-bloom-filter id=bf2 hashes="sha1,sha256,sha512" bits=32 class=bf&gt;&lt;/s-bloom-filter&gt;&lt;/p&gt;
+&lt;p&gt;You might occasionally notice that only 2, or even 1, &lt;s-word&gt;bits&lt;/s-word&gt; get
+set. This happens when 2 or more of our hash functions produce the same value,
+or we attempt to set a &lt;s-word&gt;bit&lt;/s-word&gt; that has already been set. Taking
+that a bit further, have a think about the implications of a bloom filter that
+has every &lt;s-word&gt;bit&lt;/s-word&gt; set.&lt;/p&gt;
+&lt;s-dog name=haskie mode=concerned&gt;
+  Hmm... If every &lt;s-word&gt;bit&lt;/s-word&gt; is set, then won't the bloom filter
+  claim it contains every item you check? That's a false-positive every
+  time!
+&lt;/s-dog&gt;
+&lt;p&gt;Exactly right. A bloom filter with every &lt;s-word&gt;bit&lt;/s-word&gt; set is equivalent
+to a &lt;code&gt;Set&lt;/code&gt; that always returns &lt;code&gt;true&lt;/code&gt; for &lt;code&gt;contains&lt;/code&gt;. It will claim to contain
+everything you ask it about, even if that thing was never added.&lt;/p&gt;
+&lt;h2 id="false-positive-rates"&gt;&lt;a class="anchor" href="#false-positive-rates"&gt;#&lt;/a&gt;
+False-positive rates&lt;/h2&gt;
+&lt;p&gt;The rate of false-positives in our bloom filter will grow as the percentage of
+set &lt;s-word&gt;bits&lt;/s-word&gt; increases. Drag the slider below the graph to see how
+the false-positive rate changes as the number of set &lt;s-word&gt;bits&lt;/s-word&gt;
+increases.&lt;/p&gt;
+&lt;s-graph id=graph1 style="width: 100%; aspect-ratio: 2/1;" drawupto=0&gt;
+  &lt;axes&gt;
+    &lt;x tics=0.2 ticformat="(tic * 100).toFixed(0) + '%'" label="Bits set" max=1&gt;
+    &lt;y tics=0.2 ticformat="(tic * 100).toFixed(0) + '%'" label="Chance of false-positive" max=1&gt;
+  &lt;/axes&gt;
+  &lt;lines&gt;
+    &lt;line y="Math.pow(x, 3)"&gt;
+  &lt;/lines&gt;
+&lt;/s-graph&gt;
+&lt;s-slider
+  value=0
+  min=0
+  max=1
+  step=any
+  onchange="
+    document.getElementById('graph1').setAttribute('drawupto', e.target.value)
+  "&gt;
+&lt;/s-slider&gt;
+&lt;p&gt;It grows slowly at first, but as we get closer to having all
+&lt;s-word&gt;bits&lt;/s-word&gt; set the rate increases. This is because we calculate the
+false-positive rate as &lt;code&gt;x^3&lt;/code&gt;, where &lt;code&gt;x&lt;/code&gt; is the percentage of set
+&lt;s-word&gt;bits&lt;/s-word&gt; and &lt;code&gt;3&lt;/code&gt; is the number of hash functions used. To give an
+example of why we calculate it with this formula, imagine we have a bloom filter
+with half of its bits set, &lt;code&gt;x = 0.5&lt;/code&gt;.  If we assume that our hash function has
+an equal chance of setting any of the bits, then the chance that all 3 hash
+functions set a bit that is already set is &lt;code&gt;0.5 * 0.5 * 0.5&lt;/code&gt;, or &lt;code&gt;x^3&lt;/code&gt;.&lt;/p&gt;
+&lt;p&gt;Let's have a look at the false-positive rate of bloom filters that use different
+numbers of hash functions.&lt;/p&gt;
+&lt;s-graph id=graph2 style="width: 100%; aspect-ratio: 2/1;" drawupto=0&gt;
+  &lt;legend position=top-left&gt;
+  &lt;axes&gt;
+    &lt;x tics=0.2 ticformat="(tic * 100).toFixed(0) + '%'" label="Bits set" max=1&gt;
+    &lt;y tics=0.2 ticformat="(tic * 100).toFixed(0) + '%'" label="Chance of false-positive" max=1&gt;
+  &lt;/axes&gt;
+  &lt;lines&gt;
+    &lt;line y="Math.pow(x, 1)" label="k=1"&gt;
+    &lt;line y="Math.pow(x, 2)" label="k=2"&gt;
+    &lt;line y="Math.pow(x, 3)" label="k=3"&gt;
+    &lt;line y="Math.pow(x, 4)" label="k=4"&gt;
+    &lt;line y="Math.pow(x, 5)" label="k=5"&gt;
+  &lt;/lines&gt;
+&lt;/s-graph&gt;
+&lt;s-slider
+  value=0
+  min=0
+  max=1
+  step=any
+  onchange="
+    document.getElementById('graph2').setAttribute('drawupto', e.target.value)
+  "&gt;
+&lt;/s-slider&gt;
+&lt;s-dog name=haskie&gt;
+  It looks like more hash functions we use, the better our false-positive rate
+  is.  Doesn't that mean we should always use lots of hash functions? Why don't
+  we use, like, 100?
+&lt;/s-dog&gt;
+&lt;p&gt;The problem that using lots of hash functions introduces is that it makes the
+bloom filter fill up faster. The more hash functions you use, the more
+&lt;s-word&gt;bits&lt;/s-word&gt; get set for each item you add. There's also the cost of
+hashing itself.  Hash functions aren't free, and while the hash functions you'd
+use in a bloom filter try to be as fast as possible, it's still more expensive
+to run 100 of them than it is to run 3.&lt;/p&gt;
+&lt;p&gt;It's possible to calculate how full a bloom filter will be after inserting a
+number of items, based on the number of hash functions used. The graph below
+assumes a bloom filter with 1000 &lt;s-word&gt;bits&lt;/s-word&gt;.&lt;/p&gt;
+&lt;s-graph id=graph3 style="width: 100%; aspect-ratio: 2/1;" drawupto=0&gt;
+  &lt;legend position=top-left&gt;
+  &lt;axes&gt;
+    &lt;x tics=100 label="Items added" max=1000&gt;
+    &lt;y tics=100 label="Bits set" max=1000&gt;
+  &lt;/axes&gt;
+  &lt;lines&gt;
+    &lt;line y="1000 * (1 - Math.pow(1 - 1/1000, 5 * x))" label="k=5"&gt;
+    &lt;line y="1000 * (1 - Math.pow(1 - 1/1000, 4 * x))" label="k=4"&gt;
+    &lt;line y="1000 * (1 - Math.pow(1 - 1/1000, 3 * x))" label="k=3"&gt;
+    &lt;line y="1000 * (1 - Math.pow(1 - 1/1000, 2 * x))" label="k=2"&gt;
+    &lt;line y="1000 * (1 - Math.pow(1 - 1/1000, 1 * x))" label="k=1"&gt;
+  &lt;/lines&gt;
+&lt;/s-graph&gt;
+&lt;s-slider
+  value=0
+  min=0
+  max=1000
+  step=any
+  onchange="
+    document.getElementById('graph3').setAttribute('drawupto', e.target.value)
+  "&gt;
+&lt;/s-slider&gt;
+&lt;p&gt;The more hash functions we use, the faster we set all of the bits. You'll notice that
+the curve tails off as more items are added. This is because the more
+&lt;s-word&gt;bits&lt;/s-word&gt; that are set, the more likely it is that we'all attempt to
+set a &lt;s-word&gt;bit&lt;/s-word&gt; that has already been set.&lt;/p&gt;
+&lt;p&gt;In practice, 1000 &lt;s-word&gt;bits&lt;/s-word&gt; is a very small bloom filter, occupying
+only 125 bytes of memory. Modern computers have a lot of memory, so let's crank this
+up to 100,000 &lt;s-word&gt;bits&lt;/s-word&gt; (12.5kB) and see what happens.&lt;/p&gt;
+&lt;s-graph id=graph4 style="width: 100%; aspect-ratio: 2/1;" drawupto=0&gt;
+  &lt;legend position=top-left&gt;
+  &lt;axes&gt;
+    &lt;x tics=100 label="Items added" max=1000&gt;
+    &lt;y tics=10000 ticformat="(tic / 1000).toFixed(0) + 'k'" label="Bits set" max=100000&gt;
+  &lt;/axes&gt;
+  &lt;lines&gt;
+    &lt;line y="100000 * (1 - Math.pow(1 - 1/100000, 5 * x))" label="k=5"&gt;
+    &lt;line y="100000 * (1 - Math.pow(1 - 1/100000, 4 * x))" label="k=4"&gt;
+    &lt;line y="100000 * (1 - Math.pow(1 - 1/100000, 3 * x))" label="k=3"&gt;
+    &lt;line y="100000 * (1 - Math.pow(1 - 1/100000, 2 * x))" label="k=2"&gt;
+    &lt;line y="100000 * (1 - Math.pow(1 - 1/100000, 1 * x))" label="k=1"&gt;
+  &lt;/lines&gt;
+&lt;/s-graph&gt;
+&lt;s-slider
+  value=0
+  min=0
+  max=1000
+  step=any
+  onchange="
+    document.getElementById('graph4').setAttribute('drawupto', e.target.value)
+  "&gt;
+&lt;/s-slider&gt;
+&lt;p&gt;The lines barely leave the bottom of the graph, meaning the bloom filter will
+be very empty and the false-positive rate will be low. All this cost us was
+12.5kB of memory, which is still a very small amount by 2024 standards.&lt;/p&gt;
+&lt;h2 id="tuning-a-bloom-filter"&gt;&lt;a class="anchor" href="#tuning-a-bloom-filter"&gt;#&lt;/a&gt;
+Tuning a bloom filter&lt;/h2&gt;
+&lt;p&gt;Picking the correct number of hash functions and &lt;s-word&gt;bits&lt;/s-word&gt; for a bloom
+filter is a fine balance. Fortunately for us, if we know up-front how many
+unique items we want to store, and what our desired false-positive rate is, we
+can calculate the optimal number of hash functions, and the required number of
+&lt;s-word&gt;bits&lt;/s-word&gt;.&lt;/p&gt;
+&lt;p&gt;The &lt;a href="https://en.wikipedia.org/wiki/Bloom_filter"&gt;bloom filter&lt;/a&gt; page on Wikipedia
+covers the mathematics involved, which I'm going to translate into JavaScript
+functions for us to use. I want to stress that you don't need to understand the
+maths to use a bloom filter or read this post. I'm including the link to it only
+for completeness.&lt;/p&gt;
+&lt;h3 id="optimal-number-of-bits"&gt;&lt;a class="anchor" href="#optimal-number-of-bits"&gt;#&lt;/a&gt;
+Optimal number of bits&lt;/h3&gt;
+&lt;p&gt;The following JavaScript function, which might look a bit scary but bear with
+me, takes the number of items you want to store (&lt;code&gt;items&lt;/code&gt;) and the desired
+false-positive rate (&lt;code&gt;fpr&lt;/code&gt;, where 1% == &lt;code&gt;0.01&lt;/code&gt;), and returns how many
+&lt;s-word&gt;bits&lt;/s-word&gt; you will need to achieve that false-positive rate.&lt;/p&gt;
+&lt;pre data-lang="javascript" style="background-color:#2e3440;color:#d8dee9;" class="language-javascript "&gt;&lt;code class="language-javascript" data-lang="javascript"&gt;&lt;span style="color:#81a1c1;"&gt;function &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;bits&lt;/span&gt;&lt;span&gt;(items&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span&gt;fpr) {
+&lt;/span&gt;&lt;span&gt;  &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;const &lt;/span&gt;&lt;span style="font-weight:bold;color:#d8dee9;"&gt;n &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;= -&lt;/span&gt;&lt;span&gt;items &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;* &lt;/span&gt;&lt;span style="color:#8fbcbb;"&gt;Math&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;.&lt;/span&gt;&lt;span style="font-style:italic;color:#88c0d0;"&gt;log&lt;/span&gt;&lt;span&gt;(fpr)&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;  &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;const &lt;/span&gt;&lt;span style="font-weight:bold;color:#d8dee9;"&gt;d &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;= &lt;/span&gt;&lt;span style="color:#8fbcbb;"&gt;Math&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;.&lt;/span&gt;&lt;span style="font-style:italic;color:#88c0d0;"&gt;log&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span style="color:#b48ead;"&gt;2&lt;/span&gt;&lt;span&gt;) &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;** &lt;/span&gt;&lt;span style="color:#b48ead;"&gt;2&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;  &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;return &lt;/span&gt;&lt;span style="color:#8fbcbb;"&gt;Math&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;.&lt;/span&gt;&lt;span style="font-style:italic;color:#88c0d0;"&gt;ceil&lt;/span&gt;&lt;span&gt;(n &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;/ &lt;/span&gt;&lt;span&gt;d)&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;}
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;We can see how this grows for a variety of &lt;code&gt;fpr&lt;/code&gt; values in the graph below.&lt;/p&gt;
+&lt;s-graph id=graph5 style="width: 100%; aspect-ratio: 2/1;" drawupto=0&gt;
+  &lt;legend position=top-left&gt;
+  &lt;axes&gt;
+    &lt;x tics=100 label="Items you plan to add" max=1000&gt;
+    &lt;y tics=1000 ticformat="(tic / 1000).toFixed(0) + 'k'" label="Bits required" max=10000&gt;
+  &lt;/axes&gt;
+  &lt;lines&gt;
+    &lt;line y="Math.ceil((-x * Math.log(0.01)) / (Math.log(2) ** 2))" label="fpr=0.01 (1%)"&gt;
+    &lt;line y="Math.ceil((-x * Math.log(0.05)) / (Math.log(2) ** 2))" label="fpr=0.05 (5%)"&gt;
+    &lt;line y="Math.ceil((-x * Math.log(0.10)) / (Math.log(2) ** 2))" label="fpr=0.1 (10%)"&gt;
+  &lt;/lines&gt;
+&lt;/s-graph&gt;
+&lt;s-slider
+  value=0
+  min=0
+  max=1000
+  step=any
+  onchange="
+    document.getElementById('graph5').setAttribute('drawupto', e.target.value)
+  "&gt;
+&lt;/s-slider&gt;
+&lt;h3 id="optimal-number-of-hash-functions"&gt;&lt;a class="anchor" href="#optimal-number-of-hash-functions"&gt;#&lt;/a&gt;
+Optimal number of hash functions&lt;/h3&gt;
+&lt;p&gt;After we've used the JavaScript above to calculate how many
+&lt;s-word&gt;bits&lt;/s-word&gt; we need, we can use the following function to calculate
+the optimal number of hash functions to use:&lt;/p&gt;
+&lt;pre data-lang="javascript" style="background-color:#2e3440;color:#d8dee9;" class="language-javascript "&gt;&lt;code class="language-javascript" data-lang="javascript"&gt;&lt;span style="color:#81a1c1;"&gt;function &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;hashFunctions&lt;/span&gt;&lt;span&gt;(bits&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span&gt;items) {
+&lt;/span&gt;&lt;span&gt;  &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;return &lt;/span&gt;&lt;span style="color:#8fbcbb;"&gt;Math&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;.&lt;/span&gt;&lt;span style="font-style:italic;color:#88c0d0;"&gt;ceil&lt;/span&gt;&lt;span&gt;((bits &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;/ &lt;/span&gt;&lt;span&gt;items) &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;* &lt;/span&gt;&lt;span style="color:#8fbcbb;"&gt;Math&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;.&lt;/span&gt;&lt;span style="font-style:italic;color:#88c0d0;"&gt;log&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span style="color:#b48ead;"&gt;2&lt;/span&gt;&lt;span&gt;))&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;}
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;Pause for a second here and have a think about how the number of hash functions
+might grow based on the size of the bloom filter and the number of items you
+expect to add. Do you think you'll use more hash functions, or fewer, as the
+bloom filter gets larger? What about as the number of items increases?&lt;/p&gt;
+&lt;s-graph id=graph6 style="width: 100%; aspect-ratio: 2/1;" drawupto=0&gt;
+  &lt;legend position=top-left&gt;
+  &lt;axes&gt;
+    &lt;x tics=1000 ticformat="(tic / 1000).toFixed(0) + 'k'" label="Bits in bloom filter" max=10000&gt;
+    &lt;y tics=1 label="Optimal hash functions" max=10&gt;
+  &lt;/axes&gt;
+  &lt;lines&gt;
+    &lt;line y="Math.ceil((x / 100) * Math.log(2))" label="items = 100"&gt;
+    &lt;line y="Math.ceil((x / 1000) * Math.log(2))" label="items = 1000"&gt;
+    &lt;line y="Math.ceil((x / 5000) * Math.log(2))" label="items = 5000"&gt;
+  &lt;/lines&gt;
+&lt;/s-graph&gt;
+&lt;s-slider
+  value=0
+  min=0
+  max=10000
+  step=any
+  onchange="
+    document.getElementById('graph6').setAttribute('drawupto', e.target.value)
+  "&gt;
+&lt;/s-slider&gt;
+&lt;p&gt;The more items you plan to add, the fewer hash functions you should use. Yet, a
+larger bloom filter means you can use more hash functions. More hash functions
+keep the false-positive rate lower for longer, but more items fills up the bloom
+filter faster. It's a complex balancing act, and I am thankful that
+mathematicians have done the hard work of figuring it out for us.&lt;/p&gt;
+&lt;h3 id="caution"&gt;&lt;a class="anchor" href="#caution"&gt;#&lt;/a&gt;
+Caution&lt;/h3&gt;
+&lt;p&gt;While we can stand on the shoulders of giants and pick the optimal number of
+&lt;s-word&gt;bits&lt;/s-word&gt; and hash functions for our bloom filter, it's important to
+remember that these rely on you giving good estimates of the number of items you
+expect to add, and choosing a false-positive rate that's acceptable for your
+use-case. These numbers might be difficult to come up with, and I recommend
+erring on the side of caution. If you're not sure, it's likely better to use a
+larger bloom filter than you think you need.&lt;/p&gt;
+&lt;h2 id="removing-items-from-a-bloom-filter"&gt;&lt;a class="anchor" href="#removing-items-from-a-bloom-filter"&gt;#&lt;/a&gt;
+Removing items from a bloom filter&lt;/h2&gt;
+&lt;p&gt;We've spent the whole post talking about adding things to a bloom filter, and
+the optimal parameters to use. We haven't spoken at all about removing items.&lt;/p&gt;
+&lt;p&gt;And that's because you can't!&lt;/p&gt;
+&lt;p&gt;In a bloom filter, we're using &lt;s-word&gt;bits&lt;/s-word&gt;, individual 1s and 0s, to
+track the presence of items. If we were to remove an item by setting its
+&lt;s-word&gt;bits&lt;/s-word&gt; to 0, we might also be removing other items by accident.
+There's no way of knowing.&lt;/p&gt;
+&lt;p&gt;Click the buttons of the bloom filter below to see this in action. First we will
+add "foo", then "baz", and then we will remove "baz". Hit "clear" if you want
+to start again.&lt;/p&gt;
+&lt;s-add-remove bfid=bf3&gt;
+  &lt;add value="foo"&gt;
+  &lt;add value="baz"&gt;
+  &lt;remove value="baz"&gt;
+  &lt;clear&gt;
+&lt;/s-add-remove&gt;
+&lt;s-bloom-filter id=bf3 hashes="sha1,sha256,sha512" bits=32 class=bf&gt;&lt;/s-bloom-filter&gt;
+&lt;p&gt;The end result of this sequence is a bloom filter that doesn't contain "baz",
+but doesn't contain "foo" either. Because both "foo" and "baz" set
+&lt;s-word&gt;bit&lt;/s-word&gt; &lt;s-bitlink bfid=bf3&gt;27&lt;/s-bitlink&gt;, we accidentally clobber
+the presence of "foo" while removing "baz".&lt;/p&gt;
+&lt;p&gt;Something else you might have noticed playing with the above example is that if
+you add "foo" and then attempt to remove "baz" before having added it, nothing
+happens. Even though &lt;s-bitlink bfid=bf3&gt;27&lt;/s-bitlink&gt; is set,
+&lt;s-word&gt;bits&lt;/s-word&gt; &lt;s-bitlink bfid=bf3&gt;18&lt;/s-bitlink&gt; and &lt;s-bitlink
+bfid=bf3&gt;23&lt;/s-bitlink&gt; are not, so the bloom filter cannot contain "baz".
+Because of this, it won't unset &lt;s-bitlink bfid=bf3&gt;27&lt;/s-bitlink&gt;.&lt;/p&gt;
+&lt;h3 id="counting-bloom-filters"&gt;&lt;a class="anchor" href="#counting-bloom-filters"&gt;#&lt;/a&gt;
+Counting bloom filters&lt;/h3&gt;
+&lt;p&gt;While you can't remove items from a standard bloom filter, there are variants
+that allow you to do so. One of these variants is called a "counting bloom
+filter," which uses an array of counters instead of bits to keep track of items.&lt;/p&gt;
+&lt;s-add-remove bfid=bf4&gt;
+  &lt;add value="foo"&gt;
+  &lt;add value="baz"&gt;
+  &lt;remove value="baz"&gt;
+  &lt;clear&gt;
+&lt;/s-add-remove&gt;
+&lt;s-bloom-filter id=bf4 counting=true hashes="sha1,sha256,sha512" bits=32 class=bf&gt;&lt;/s-bloom-filter&gt;
+&lt;p&gt;Now when you go through the sequence, the end result is that the bloom filter
+still contains "foo." It solves the problem.&lt;/p&gt;
+&lt;p&gt;The trade-off, though, is that counters are bigger than &lt;s-word&gt;bits&lt;/s-word&gt;.
+With 4 bits per counter you can increment up to 15. With 8 bits per counter you
+can increment up to 255. You'll need to pick a counter size sufficient to never
+reach the maximum value, otherwise you risk corrupting the bloom filter. Using
+8x more memory than a standard bloom filter could be a big deal, especially if
+you're using a bloom filter to save memory in the first place. Think hard about
+whether you really need to be able to remove items from your bloom filter.&lt;/p&gt;
+&lt;p&gt;Counting bloom filters also introduce the possibility of false-negatives, which
+are impossible in standard bloom filters. Consider the following example.&lt;/p&gt;
+&lt;s-add-remove bfid=bf5&gt;
+  &lt;add value="loved"&gt;
+  &lt;add value="your"&gt;
+  &lt;remove value="response"&gt;
+  &lt;clear&gt;
+&lt;/s-add-remove&gt;
+&lt;s-bloom-filter id=bf5 counting=true hashes="sha1,sha256,sha512" bits=32 class=bf&gt;&lt;/s-bloom-filter&gt;
+&lt;p&gt;Because "loved" and "response" both hash to the &lt;s-word&gt;bits&lt;/s-word&gt;
+&lt;s-bitlink bfid=bf5&gt;5&lt;/s-bitlink&gt;, &lt;s-bitlink bfid=bf5&gt;22&lt;/s-bitlink&gt;, and
+&lt;s-bitlink bfid=bf5&gt;26&lt;/s-bitlink&gt;, when we remove "response" we also remove "loved". If
+we write this as JavaScript the problem becomes more clear:&lt;/p&gt;
+&lt;pre data-lang="javascript" style="background-color:#2e3440;color:#d8dee9;" class="language-javascript "&gt;&lt;code class="language-javascript" data-lang="javascript"&gt;&lt;span style="color:#81a1c1;"&gt;let &lt;/span&gt;&lt;span&gt;bf &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;= new &lt;/span&gt;&lt;span style="color:#8fbcbb;"&gt;CountingBloomFilter&lt;/span&gt;&lt;span&gt;()&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;bf&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;add&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;loved&amp;quot;&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;bf&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;add&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;your&amp;quot;&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;bf&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;remove&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;response&amp;quot;&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;bf&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;contains&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;loved&amp;quot;&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;; &lt;/span&gt;&lt;span style="color:#616e88;"&gt;// false
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;Even though we know for sure we've added "loved" in this snippet, the call to
+&lt;code&gt;contains&lt;/code&gt; will return &lt;code&gt;false&lt;/code&gt;. This sort of false-negative can't happen in a
+standard bloom filter, and it removes one of the key benefits of using a bloom
+filter in the first place: the guarantee of no false-negatives.&lt;/p&gt;
+&lt;h2 id="bloom-filters-in-the-real-world"&gt;&lt;a class="anchor" href="#bloom-filters-in-the-real-world"&gt;#&lt;/a&gt;
+Bloom filters in the real-world&lt;/h2&gt;
+&lt;p&gt;Real-world users of bloom filters include &lt;a href="https://www.akamai.com/"&gt;Akamai&lt;/a&gt;, who
+use them to avoid caching web pages that are accessed once and never again. They
+do this by storing all page accesses in a bloom filter, and only writing them
+into cache if the bloom filter says they've been seen before. This does result
+in some pages being cached on the first access, but that's fine because it's
+still an improvement. It would be impractical for them to store all page
+accesses in a &lt;code&gt;Set&lt;/code&gt;, so they accept the small false-positive rate in favour of
+the significantly smaller bloom filter. Akamai released a
+&lt;a href="https://web.archive.org/web/20210814193152/https://www.akamai.com/us/en/multimedia/documents/technical-publication/algorithmic-nuggets-in-content-delivery-technical-publication.pdf"&gt;paper&lt;/a&gt;
+about this that goes into the full details if you're interested.&lt;/p&gt;
+&lt;p&gt;Google's
+&lt;a href="https://storage.googleapis.com/pub-tools-public-publication-data/pdf/68a74a85e1662fe02ff3967497f31fda7f32225c.pdf"&gt;BigTable&lt;/a&gt;
+is a distributed key-value store, and uses bloom filters internally to know what
+keys are stored within. When a read request for a key comes in, a bloom filter
+in memory is first checked to see if the key is in the database. If not,
+BigTable can respond with "not found" without ever needing to read from disk.
+Sometimes the bloom filter will say a key might be in the database when it isn't,
+but this is fine because when that happens a disk access will confirm the key in
+fact isn't in the database.&lt;/p&gt;
+&lt;h2 id="conclusion"&gt;&lt;a class="anchor" href="#conclusion"&gt;#&lt;/a&gt;
+Conclusion&lt;/h2&gt;
+&lt;p&gt;Bloom filters, while niche, can be a huge optimisation in the right situation.
+They're a wonderful application of hash functions, and a great example of making
+a deliberate trade-off to achieve a specific goal.&lt;/p&gt;
+&lt;p&gt;Trade-offs, and combining simpler building blocks to create more complex,
+purpose-built data structures, are present everywhere in software engineering.
+Being able to spot where a data structure could net a big win can separate you
+from the pack, and take your career to the next level.&lt;/p&gt;
+&lt;p&gt;I hope you've enjoyed this post, and that you find a way to apply bloom filters
+to a problem you're working on.&lt;/p&gt;
+&lt;p&gt;&lt;em&gt;Join the discussion on &lt;a href="https://news.ycombinator.com/item?id=39439505"&gt;Hacker News&lt;/a&gt; or &lt;a href="https://lobste.rs/s/gwyglz/visual_interactive_guide_bloom_filters"&gt;Lobste.rs&lt;/a&gt;!&lt;/em&gt;&lt;/p&gt;
+&lt;h2 id="acknowledgements"&gt;&lt;a class="anchor" href="#acknowledgements"&gt;#&lt;/a&gt;
+Acknowledgements&lt;/h2&gt;
+&lt;p&gt;Enormous thank you to my reviewers, without whom this post would be a shadow of
+what you read today. In no particular order:&lt;/p&gt;
+&lt;p&gt;&lt;a href="https://rylon.dev"&gt;rylon&lt;/a&gt;, &lt;a href="https://indy.codes"&gt;Indy&lt;/a&gt;,
+&lt;a href="https://twitter.com/AaronKalair"&gt;Aaron&lt;/a&gt;, Sophie, &lt;a href="https://dvsj.in"&gt;Davis&lt;/a&gt;,
+&lt;a href="https://eduardmoldovan.com"&gt;ed&lt;/a&gt;, &lt;a href="https://github.com/mike12345567"&gt;Michael
+Drury&lt;/a&gt;, &lt;a href="https://antonz.org/"&gt;Anton Zhiyanov&lt;/a&gt;,
+&lt;a href="https://appliedgo.net/"&gt;Christoph Berger&lt;/a&gt;, &lt;a href="https://github.com/aptkingston"&gt;Andrew Kingston&lt;/a&gt;, &lt;a href="https://thattommyhall.com"&gt;Tom Hall&lt;/a&gt;.&lt;/p&gt;
+</content>
+            
+        </entry>
+    
+    
+    
+    
+    
+    
+        <entry xml:lang="en">
+            <title>Hashing</title>
+            <published>2023-05-24T00:00:00+00:00</published>
+            <updated>2023-05-24T00:00:00+00:00</updated>
+            <author>
+            <name>Unknown</name>
+            </author>
+            <link rel="alternate" href="https://samwho.dev/hashing/" type="text/html"/>
+            <id>https://samwho.dev/hashing/</id>
+            
+            <content type="html">&lt;style&gt;
+  form {
+    padding-top: 0.5em;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+    display: flex;
+    justify-content: center;
+    gap: 0.3em;
+  }
+
+  form input[type=text] {
+    flex: 4 1 auto;
+    min-width: 0;
+    border-radius: 0.3em;
+    border: 1px solid #aaaaaa;
+    padding: 0.3em;
+  }
+
+  form button {
+    flex: 1 1 auto;
+    max-width: 140px;
+  }
+
+  form button:disabled {
+    opacity: 0.5 !important;
+  }
+
+  form button.add {
+    background-color: #009E73;
+    color: white;
+    border: 0;
+    border-radius: 0.3em;
+    cursor: pointer;
+  }
+
+  form button.check {
+    background-color: #56B4E9;
+    color: white;
+    border: 0;
+    border-radius: 0.3em;
+    cursor: pointer;
+  }
+
+  form button.clear {
+    background-color: #D55E00;
+    color: white;
+    border: 0;
+    border-radius: 0.3em;
+    cursor: pointer;
+  }
+
+  .grid-2x2 {
+    display: "grid";
+  }
+
+  .grid {
+    user-select: none;
+    cursor: pointer;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    border: 1px solid #009E73;
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+  }
+
+  .grid-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    aspect-ratio: 1/1;
+  }
+
+  .grid-active {
+    background-color: #009E73;
+    color: white;
+  }
+
+  .above-grid {
+    display: flex;
+    justify-content: center;
+  }
+
+  .hash-examples {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .hash-examples div {
+    margin: auto;
+  }
+
+  .hash-examples code {
+    display: block;
+    white-space: pre;
+    font-weight: bold;
+  }
+
+  .hash-examples p {
+    font-size: 0.75rem;
+    font-style: italic;
+    text-align: center;
+    font-family: Lora, serif;
+    width: 75%;
+  }
+
+  .blob {
+    cursor: pointer;
+    background: #CC79A7;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.5rem;
+    color: white;
+    border-radius: 50%;
+    margin: 10px;
+    height: 3rem;
+    width: 3rem;
+    min-width: 3rem;
+    max-width: 3rem;
+
+    box-shadow: 0 0 0 0 #CC79A7FF;
+    transform: scale(1);
+    animation: pulse 2s infinite;
+  }
+
+  @keyframes pulse {
+    0% {
+      transform: scale(0.85);
+      box-shadow: 0 0 0 0 #CC79A77F;
+    }
+
+    70% {
+      transform: scale(1);
+      box-shadow: 0 0 0 1rem rgba(0, 0, 0, 0);
+    }
+
+    100% {
+      transform: scale(0.85);
+      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+    }
+  }
+
+  .blob-click {
+    cursor: default;
+    animation: tick 1s linear;
+    background: #009E73FF;
+  }
+
+  @keyframes tick {
+    0% {
+      transform: scale(1);
+      box-shadow: 0 0 0 0 #009E73FF;
+    }
+
+    50% {
+      box-shadow: 0 0 0 1rem #009E737F;
+    }
+
+    100% {
+      box-shadow: 0 0 0 2rem #009E7300;
+    }
+  }
+
+  .aside {
+    padding: 2rem;
+    width: 100vw;
+    position: relative;
+    margin-left: -50vw;
+    left: 50%;
+    background-color: #eeeeee;
+
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+  }
+
+  .aside &gt; * {
+    flex-grow: 1;
+  }
+
+  .aside p {
+    padding-left: 1rem;
+    padding-right: 1rem;
+    max-width: 780px;
+    font-style: italic;
+    font-family: Lora, serif;
+    text-align: center;
+  }
+
+  .pct25 {
+    width: 100%;
+    height: 200px;
+  }
+
+  .datasets th {
+    text-align: left;
+  }
+
+  .datasets td {
+    text-align: left;
+  }
+
+  .datasets {
+    table-layout: fixed;
+  }
+
+&lt;/style&gt;
+&lt;noscript&gt;
+  &lt;div class=aside&gt;
+    &lt;p&gt;
+    This page makes heavy use of JavaScript to visualise the concepts discussed.
+    Viewing it without JavaScript will be a strange experience, as the text
+    talks about the visualisations. I strongly recommend either enabling
+    JavaScript, or not wasting your time.
+    &lt;/p&gt;
+  &lt;/div&gt;
+&lt;/noscript&gt;
+&lt;p&gt;As a programmer, you use hash functions every day. They're used in databases
+to optimise queries, they're used in data structures to make things faster,
+they're used in security to keep data safe. Almost every interaction you have
+with technology will involve hash functions in one way or another.&lt;/p&gt;
+&lt;p&gt;Hash functions are foundational, and they are &lt;strong&gt;everywhere&lt;/strong&gt;.&lt;/p&gt;
+&lt;p&gt;But what &lt;em&gt;is&lt;/em&gt; a hash function, and how do they work?&lt;/p&gt;
+&lt;p&gt;In this post, we're going to demystify hash functions. We're going to start by
+looking at a simple hash function, then we're going to learn how to test if a
+hash function is good or not, and then we're going to look at a real-world use
+of hash functions: the hash map.&lt;/p&gt;
+&lt;script&gt;
+  document.addEventListener("DOMContentLoaded", function () {
+      var blob = document.querySelector(".blob");
+      blob.addEventListener("click", function () {
+          blob.classList.add("blob-click");
+          blob.innerText = "✓";
+      });
+  });
+&lt;/script&gt;
+&lt;div class=aside&gt;
+  &lt;div class=blob&gt;
+  &lt;/div&gt;
+  &lt;p&gt;
+    This article has visualisations that can be &lt;span class="purple
+    bold"&gt;clicked&lt;/span&gt;.
+  &lt;/p&gt;
+&lt;/div&gt;
+&lt;h2 id="what-is-a-hash-function"&gt;&lt;a class="anchor" href="#what-is-a-hash-function"&gt;#&lt;/a&gt;
+What &lt;em&gt;is&lt;/em&gt; a hash function?&lt;/h2&gt;
+&lt;p&gt;Hash functions are functions that take an input, usually a string, and produce a
+number. If you were to call a hash function multiple times with the same input,
+it will always return the same number, and that number returned will always be
+within a promised range. What that range is will depend on the hash function,
+some use 32-bit integers (so 0 to 4 billion), others go much larger.&lt;/p&gt;
+&lt;p&gt;If we were to write a dummy hash function in JavaScript, it might look like
+this:&lt;/p&gt;
+&lt;pre data-lang="javascript" style="background-color:#2e3440;color:#d8dee9;" class="language-javascript "&gt;&lt;code class="language-javascript" data-lang="javascript"&gt;&lt;span style="color:#81a1c1;"&gt;function &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;hash&lt;/span&gt;&lt;span&gt;(input) {
+&lt;/span&gt;&lt;span&gt;  &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;return &lt;/span&gt;&lt;span style="color:#b48ead;"&gt;0&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;}
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;Even without knowing &lt;em&gt;how&lt;/em&gt; hash functions are used, it's probably no surprise
+that this hash function is useless. Let's see how we can measure how good a
+hash function is, and after that we'll do a deep dive on how they're used
+within hash maps.&lt;/p&gt;
+&lt;h2 id="what-makes-a-hash-function-good"&gt;&lt;a class="anchor" href="#what-makes-a-hash-function-good"&gt;#&lt;/a&gt;
+What makes a hash function good?&lt;/h2&gt;
+&lt;p&gt;Because &lt;code&gt;input&lt;/code&gt; can be any string, but the number returned is within some
+promised range, it's possible that two different inputs can return the same
+number. This is called a "collision," and good hash functions try to minimise
+how many collisions they produce.&lt;/p&gt;
+&lt;p&gt;It's not possible to completely eliminate collisions, though. If we wrote a hash
+function that returned a number in the range 0 to 7, and we gave it 9 unique
+inputs, we're guaranteed at least 1 collision.&lt;/p&gt;
+&lt;div class="hash-examples"&gt;
+  &lt;div&gt;
+    &lt;code&gt;hash("to")         == 3&lt;/code&gt;
+    &lt;code&gt;hash("the")        == 2&lt;/code&gt;
+    &lt;code&gt;hash("café")       == 0&lt;/code&gt;
+    &lt;code&gt;hash("de")         == 6&lt;/code&gt;
+    &lt;code&gt;hash("versailles") == 4&lt;/code&gt;
+    &lt;code&gt;hash("for")        == 5&lt;/code&gt;
+    &lt;code&gt;hash("coffee")     == 0&lt;/code&gt;
+    &lt;code&gt;hash("we")         == 7&lt;/code&gt;
+    &lt;code&gt;hash("had")        == 1&lt;/code&gt;
+  &lt;/div&gt;
+  &lt;p&gt;
+    Output values from a well-known hash function, modulo 8. No matter what 9
+    values we pass, there are only 8 unique numbers and so collisions are
+    inevitable.  The goal is to have as few as possible.
+  &lt;/p&gt;
+&lt;/div&gt;
+&lt;p&gt;To visualise collisions, I'm going to use a grid. Each square of the grid is
+going to represent a number output by a hash function. Here's an example 8x2
+grid. &lt;span class="purple bold"&gt;Click&lt;/span&gt; on the grid to increment the
+example hash output value and see how we map it to a grid square. See what
+happens when you get a number larger than the number of grid squares.&lt;/p&gt;
+&lt;script&gt;
+  document.addEventListener("DOMContentLoaded", () =&gt; {
+    let grid = document.getElementById("first-grid");
+    let hash = document.getElementById("grid-hash");
+    let modulo = document.getElementById("grid-modulo");
+    grid.addEventListener("click", (e) =&gt; {
+      e.preventDefault();
+      let number = parseInt(hash.innerText) + 1;
+      hash.innerText = number.toString();
+      modulo.innerText = (number % 16).toString();
+
+      grid.querySelector(".grid-active").classList.remove("grid-active");
+      grid.children[number % 16].classList.add("grid-active");
+      return false;
+    });
+  });
+&lt;/script&gt;
+&lt;div class=above-grid&gt;
+  &lt;code style="color: #009E73; font-weight: bold;"&gt;
+    &lt;span id="grid-hash"&gt;13&lt;/span&gt; % 16 == &lt;span id="grid-modulo"&gt;13&lt;/span&gt;
+  &lt;/code&gt;
+&lt;/div&gt;
+&lt;div class="grid" id="first-grid"&gt;
+  &lt;div class="grid-item"&gt;0&lt;/div&gt;
+  &lt;div class="grid-item"&gt;1&lt;/div&gt;
+  &lt;div class="grid-item"&gt;2&lt;/div&gt;
+  &lt;div class="grid-item"&gt;3&lt;/div&gt;
+  &lt;div class="grid-item"&gt;4&lt;/div&gt;
+  &lt;div class="grid-item"&gt;5&lt;/div&gt;
+  &lt;div class="grid-item"&gt;6&lt;/div&gt;
+  &lt;div class="grid-item"&gt;7&lt;/div&gt;
+  &lt;div class="grid-item"&gt;8&lt;/div&gt;
+  &lt;div class="grid-item"&gt;9&lt;/div&gt;
+  &lt;div class="grid-item"&gt;10&lt;/div&gt;
+  &lt;div class="grid-item"&gt;11&lt;/div&gt;
+  &lt;div class="grid-item"&gt;12&lt;/div&gt;
+  &lt;div class="grid-item grid-active"&gt;13&lt;/div&gt;
+  &lt;div class="grid-item"&gt;14&lt;/div&gt;
+  &lt;div class="grid-item"&gt;15&lt;/div&gt;
+&lt;/div&gt;
+&lt;p&gt;Every time we hash a value, we're going to make its corresponding square on the
+grid a bit darker. The idea is to create an easy way to see how well a hash
+function avoids collisions. What we're looking for is a nice, even distribution.
+We'll know that the hash function isn't good if we have clumps or patterns of
+dark squares.&lt;/p&gt;
+&lt;blockquote class="haskie"&gt;
+&lt;img src="/images/haskie-confused-200px.png" /&gt;
+&lt;p&gt;
+  You said that when a hash function outputs the same value for 2 different
+  inputs, that's a collision. But if we have a hash function that outputs values
+  in a big range, and we mapped those to a small grid, aren't we going to create
+  lots of collisions on the grid that aren't actually collisions? On our 8x2
+  grid, 1 and 17 both map to the 2nd square.
+&lt;/p&gt;
+&lt;/blockquote&gt;
+&lt;p&gt;This is a great observation. You're absolutely right, we're going to be creating
+"pseudo-collisions" on our grid. It's okay, though, because if the hash function
+is good we will still see an even distribution. Incrementing every square by 100
+is just as good a distribution as incrementing every square by 1. If we have a
+bad hash function that collides a lot, that will still stand out. We'll see
+this shortly.&lt;/p&gt;
+&lt;p&gt;Let's take a larger grid and hash 1,000 randomly-generated strings. You can
+&lt;span class="purple bold"&gt;click&lt;/span&gt; on the grid to hash a new set of random
+inputs, and the grid will animate to show you each input being hashed and placed
+on the grid.&lt;/p&gt;
+&lt;p&gt;&lt;heat-map
+  class="pct25"
+  iterations=1000
+  blockSize=20
+  valueFn=randomUUID
+  hashFn=murmur3
+  color=green&gt;
+&lt;/heat-map&gt;&lt;/p&gt;
+&lt;p&gt;The values are nice and evenly distributed because we're using a good,
+well-known hash function called &lt;code class="green"&gt;murmur3&lt;/code&gt;. This hash
+is widely used in the real-world because it has great distribution while also
+being really, really fast.&lt;/p&gt;
+&lt;p&gt;What would our grid look like if we used a &lt;em&gt;bad&lt;/em&gt; hash function?&lt;/p&gt;
+&lt;pre data-lang="javascript" style="background-color:#2e3440;color:#d8dee9;" class="language-javascript "&gt;&lt;code class="language-javascript" data-lang="javascript"&gt;&lt;span style="color:#81a1c1;"&gt;function &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;hash&lt;/span&gt;&lt;span&gt;(input) {
+&lt;/span&gt;&lt;span&gt;  &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;let &lt;/span&gt;&lt;span&gt;hash &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;= &lt;/span&gt;&lt;span style="color:#b48ead;"&gt;0&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;  &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;for &lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;let &lt;/span&gt;&lt;span&gt;c &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;of &lt;/span&gt;&lt;span&gt;input) {
+&lt;/span&gt;&lt;span&gt;    hash &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;+= &lt;/span&gt;&lt;span&gt;c&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;charCodeAt&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span style="color:#b48ead;"&gt;0&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;  }
+&lt;/span&gt;&lt;span&gt;  &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;return &lt;/span&gt;&lt;span&gt;hash &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;% &lt;/span&gt;&lt;span style="color:#b48ead;"&gt;1000000&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;}
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;This hash function loops through the string that we're given and sums the
+numeric values of each character. It then makes sure that the value is between 0
+and 1000000 by using the modulus operator (&lt;code&gt;%&lt;/code&gt;). Let's call this hash function
+&lt;code class="red"&gt;stringSum&lt;/code&gt;.&lt;/p&gt;
+&lt;p&gt;Here it is on the grid. Reminder, this is 1,000 randomly generated strings that
+we're hashing.&lt;/p&gt;
+&lt;p&gt;&lt;heat-map
+  class="pct25"
+  iterations=1000
+  blockSize=20
+  valueFn=randomUUID
+  hashFn=stringSum
+  color=red&gt;
+&lt;/heat-map&gt;&lt;/p&gt;
+&lt;p&gt;This doesn't look all that different from &lt;code class="green"&gt;murmur3&lt;/code&gt;.
+What gives?&lt;/p&gt;
+&lt;p&gt;The problem is that the strings we're giving to be hashed are random. Let's see
+how each function performs when given input that is not random: the numbers from
+1 to 1000 converted to strings.&lt;/p&gt;
+&lt;div style="display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: space-between; padding-top: 1rem; padding-bottom: 1rem"&gt;
+  &lt;heat-map
+    style="flex-grow: 1; width: 40%; min-width: 200px; aspect-ratio: 2/1;"
+    iterations=1000
+    blockSize=10
+    valueFn=intToStr
+    hashFn=murmur3
+    color=green&gt;
+  &lt;/heat-map&gt;
+  &lt;heat-map
+    style="flex-grow: 1; width: 40%; min-width: 200px; aspect-ratio: 2/1;"
+    iterations=1000
+    blockSize=10
+    valueFn=intToStr
+    hashFn=stringSum
+    color=red&gt;
+  &lt;/heat-map&gt;
+&lt;/div&gt;
+&lt;p&gt;Now the problem is more clear. When the input isn't random, the output of &lt;code
+class="red"&gt;stringSum&lt;/code&gt; forms a pattern. Our &lt;code
+class="green"&gt;murmur3&lt;/code&gt; grid, however, looks the same as how it looked with
+random values.&lt;/p&gt;
+&lt;p&gt;How about if we hash the &lt;a href="https://github.com/powerlanguage/word-lists/blob/master/1000-most-common-words.txt"&gt;top 1,000 most common English words&lt;/a&gt;:&lt;/p&gt;
+&lt;div style="display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: space-between; padding-top: 1rem; padding-bottom: 1rem"&gt;
+  &lt;heat-map
+    style="flex-grow: 1; width: 40%; min-width: 200px; aspect-ratio: 2/1;"
+    iterations=1000
+    blockSize=10
+    valueFn=commonWords
+    hashFn=murmur3
+    color=green&gt;
+  &lt;/heat-map&gt;
+  &lt;heat-map
+    style="flex-grow: 1; width: 40%; min-width: 200px; aspect-ratio: 2/1;"
+    iterations=1000
+    blockSize=10
+    valueFn=commonWords
+    hashFn=stringSum
+    color=red&gt;
+  &lt;/heat-map&gt;
+&lt;/div&gt;
+&lt;p&gt;It's more subtle, but we do see a pattern on the &lt;code class="bold
+red"&gt;stringSum&lt;/code&gt; grid. As usual, &lt;code class="green bold"&gt;murmur3&lt;/code&gt;
+looks the same as it always does.&lt;/p&gt;
+&lt;p&gt;This is the power of a good hash function: no matter the input,
+the output is evenly distributed. Let's talk about one more way to visualise
+this and then talk about why it matters.&lt;/p&gt;
+&lt;h3 id="the-avalanche-effect"&gt;&lt;a class="anchor" href="#the-avalanche-effect"&gt;#&lt;/a&gt;
+The avalanche effect&lt;/h3&gt;
+&lt;p&gt;Another way hash functions get evaluated is on something called the "avalanche
+effect." This refers to how many bits in the output value change when just a
+single bit of the input changes. To say that a hash function has a good
+avalanche effect, a single bit flip in the input should result in an average of
+50% the output bits flipping.&lt;/p&gt;
+&lt;p&gt;It's this property that helps hash functions avoid forming patterns in the grid.
+If small changes in the input result in small changes in the output, you get
+patterns. Patterns indicate poor distribution, and a higher rate of collisions.&lt;/p&gt;
+&lt;p&gt;Below, we are visualising the avalanche effect by showing two 8-bit binary
+numbers. The top number is the input value, and the bottom number is the &lt;code
+class="green bold"&gt;murmur3&lt;/code&gt; output value. &lt;span class="purple
+bold"&gt;Click&lt;/span&gt; on it to &lt;span class="purple bold"&gt;flip a single bit&lt;/span&gt;
+in the input. Bits that change in the output will be &lt;span class="green
+bold"&gt;green&lt;/span&gt;, bits that stay the same will be &lt;span class="red
+bold"&gt;red&lt;/span&gt;.&lt;/p&gt;
+&lt;p&gt;&lt;avalanche-effect
+  style="width: 100%; height: 200px;"
+  hashFn="murmur3"&gt;
+&lt;/avalanche-effect&gt;&lt;/p&gt;
+&lt;p&gt;&lt;span class="green bold"&gt;murmur3&lt;/span&gt; does well, though you will notice that
+sometimes fewer than 50% of the bits flip and sometimes more. This is okay,
+provided that it is 50% on average.&lt;/p&gt;
+&lt;p&gt;Let's see how &lt;span class="bold red"&gt;stringSum&lt;/span&gt; performs.&lt;/p&gt;
+&lt;p&gt;&lt;avalanche-effect
+  style="width: 100%; height: 200px;"
+  hashFn="stringSum"&gt;
+&lt;/avalanche-effect&gt;&lt;/p&gt;
+&lt;p&gt;Well this is embarassing. The output is equal to the input, and so only a single
+bit flips each time. This does make sense, because &lt;span class="bold
+red"&gt;stringSum&lt;/span&gt; just sums the numeric value of each character in the
+string. This example only hashes the equivalent of a single character, which
+means the output will always be the same as the input.&lt;/p&gt;
+&lt;h2 id="why-all-of-this-matters"&gt;&lt;a class="anchor" href="#why-all-of-this-matters"&gt;#&lt;/a&gt;
+Why all of this matters&lt;/h2&gt;
+&lt;p&gt;We've taken the time to understand some of the ways to determine if a hash
+function is good, but we've not spent any time talking about why it matters.
+Let's fix that by talking about hash maps.&lt;/p&gt;
+&lt;p&gt;To understand hash maps, we first must understand what a map is. A map is a data
+structure that allows you to store key-value pairs. Here's an example in
+JavaScript:&lt;/p&gt;
+&lt;pre data-lang="javascript" style="background-color:#2e3440;color:#d8dee9;" class="language-javascript "&gt;&lt;code class="language-javascript" data-lang="javascript"&gt;&lt;span style="color:#81a1c1;"&gt;let &lt;/span&gt;&lt;span&gt;map &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;= new &lt;/span&gt;&lt;span style="color:#8fbcbb;"&gt;Map&lt;/span&gt;&lt;span&gt;()&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;map&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;set&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;hello&amp;quot;&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;world&amp;quot;&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span style="color:#8fbcbb;"&gt;console&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;log&lt;/span&gt;&lt;span&gt;(map&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;get&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;hello&amp;quot;&lt;/span&gt;&lt;span&gt;))&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;Here we take a key-value pair (&lt;code&gt;"hello"&lt;/code&gt; → &lt;code&gt;"world"&lt;/code&gt;) and store it in the map.
+Then we print out the value associated with the key &lt;code&gt;"hello"&lt;/code&gt;, which will be
+&lt;code&gt;"world"&lt;/code&gt;.&lt;/p&gt;
+&lt;p&gt;A more fun real-world use-case would be to find anagrams. An anagram is when two
+different words contain the same letters, for example "antlers" and "rentals"
+or "article" and "recital." If you have a list of words and you want to find
+all of the anagrams, you can sort the letters in each word alphabetically and
+use that as a key in a map.&lt;/p&gt;
+&lt;pre data-lang="javascript" style="background-color:#2e3440;color:#d8dee9;" class="language-javascript "&gt;&lt;code class="language-javascript" data-lang="javascript"&gt;&lt;span style="color:#81a1c1;"&gt;let &lt;/span&gt;&lt;span&gt;words &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;= &lt;/span&gt;&lt;span&gt;[
+&lt;/span&gt;&lt;span&gt;  &lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;antlers&amp;quot;&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;,
+&lt;/span&gt;&lt;span&gt;  &lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;rentals&amp;quot;&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;,
+&lt;/span&gt;&lt;span&gt;  &lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;sternal&amp;quot;&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;,
+&lt;/span&gt;&lt;span&gt;  &lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;article&amp;quot;&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;,
+&lt;/span&gt;&lt;span&gt;  &lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;recital&amp;quot;&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;,
+&lt;/span&gt;&lt;span&gt;  &lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;flamboyant&amp;quot;&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;,
+&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;let &lt;/span&gt;&lt;span&gt;map &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;= new &lt;/span&gt;&lt;span style="color:#8fbcbb;"&gt;Map&lt;/span&gt;&lt;span&gt;()&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;for &lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;let &lt;/span&gt;&lt;span&gt;word &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;of &lt;/span&gt;&lt;span&gt;words) {
+&lt;/span&gt;&lt;span&gt;  &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;let &lt;/span&gt;&lt;span&gt;key &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;= &lt;/span&gt;&lt;span&gt;word&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;split&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;&amp;quot;&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;sort&lt;/span&gt;&lt;span&gt;()&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;join&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;&amp;quot;&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span&gt;  &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;if &lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;!&lt;/span&gt;&lt;span&gt;map&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;has&lt;/span&gt;&lt;span&gt;(key)) {
+&lt;/span&gt;&lt;span&gt;    map&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;set&lt;/span&gt;&lt;span&gt;(key&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span&gt;[])&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;  }
+&lt;/span&gt;&lt;span&gt;  map&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;get&lt;/span&gt;&lt;span&gt;(key)&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;push&lt;/span&gt;&lt;span&gt;(word)&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;}
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;This code results in a map with the following structure:&lt;/p&gt;
+&lt;pre data-lang="json" style="background-color:#2e3440;color:#d8dee9;" class="language-json "&gt;&lt;code class="language-json" data-lang="json"&gt;&lt;span&gt;{
+&lt;/span&gt;&lt;span&gt;  &lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;aelnrst&amp;quot;&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;: &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;antlers&amp;quot;&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;rentals&amp;quot;&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;sternal&amp;quot;&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;,
+&lt;/span&gt;&lt;span&gt;  &lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;aceilrt&amp;quot;&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;: &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;article&amp;quot;&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;recital&amp;quot;&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;,
+&lt;/span&gt;&lt;span&gt;  &lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;aabflmnoty&amp;quot;&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;: &lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;flamboyant&amp;quot;&lt;/span&gt;&lt;span&gt;]
+&lt;/span&gt;&lt;span&gt;}
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;h3 id="implementing-our-own-simple-hash-map"&gt;&lt;a class="anchor" href="#implementing-our-own-simple-hash-map"&gt;#&lt;/a&gt;
+Implementing our own simple hash map&lt;/h3&gt;
+&lt;p&gt;Hash maps are one of many map implementations, and there are many ways to
+implement hash maps. The simplest way, and the way we're going to demonstrate,
+is to use a list of lists. The inner lists are often referred to as "buckets" in
+the real-world, so that's what we'll call them here. A hash function is used on
+the key to determine which bucket to store the key-value pair in, then the
+key-value pair is added to that bucket.&lt;/p&gt;
+&lt;p&gt;Let's walk through a simple hash map implementation in JavaScript. We're going
+to go through it bottom-up, so we'll see some utility methods before getting to
+the &lt;code&gt;set&lt;/code&gt; and &lt;code&gt;get&lt;/code&gt; implementations.&lt;/p&gt;
+&lt;pre data-lang="javascript" style="background-color:#2e3440;color:#d8dee9;" class="language-javascript "&gt;&lt;code class="language-javascript" data-lang="javascript"&gt;&lt;span style="color:#81a1c1;"&gt;class &lt;/span&gt;&lt;span style="color:#8fbcbb;"&gt;HashMap &lt;/span&gt;&lt;span&gt;{
+&lt;/span&gt;&lt;span&gt;  &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;constructor&lt;/span&gt;&lt;span&gt;() {
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;this.&lt;/span&gt;&lt;span&gt;bs &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;= &lt;/span&gt;&lt;span&gt;[[]&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span&gt;[]&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span&gt;[]]&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;  }
+&lt;/span&gt;&lt;span&gt;}
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;We start off by creating a &lt;code&gt;HashMap&lt;/code&gt; class with a constructor that sets up 3
+buckets. We use 3 buckets and the short variable name &lt;code&gt;bs&lt;/code&gt; so that this code
+displays nicely on devices with smaller screens. In reality, you could have
+however many buckets you want (and better variable names).&lt;/p&gt;
+&lt;pre data-lang="javascript" style="background-color:#2e3440;color:#d8dee9;" class="language-javascript "&gt;&lt;code class="language-javascript" data-lang="javascript"&gt;&lt;span style="color:#81a1c1;"&gt;class &lt;/span&gt;&lt;span style="color:#8fbcbb;"&gt;HashMap &lt;/span&gt;&lt;span&gt;{
+&lt;/span&gt;&lt;span&gt;  &lt;/span&gt;&lt;span style="color:#616e88;"&gt;// ...
+&lt;/span&gt;&lt;span&gt;  &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;bucket&lt;/span&gt;&lt;span&gt;(key) {
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;let &lt;/span&gt;&lt;span&gt;h &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;= &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;murmur3&lt;/span&gt;&lt;span&gt;(key)&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;return this.&lt;/span&gt;&lt;span&gt;bs[h &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;% this.&lt;/span&gt;&lt;span&gt;bs&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;.&lt;/span&gt;&lt;span&gt;length]&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;  }
+&lt;/span&gt;&lt;span&gt;}
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;The &lt;code&gt;bucket&lt;/code&gt; method uses &lt;code class="bold green"&gt;murmur3&lt;/code&gt; on the &lt;code&gt;key&lt;/code&gt;
+passed in to find a bucket to use. This is the only place in our hash map code
+that a hash function is used.&lt;/p&gt;
+&lt;pre data-lang="javascript" style="background-color:#2e3440;color:#d8dee9;" class="language-javascript "&gt;&lt;code class="language-javascript" data-lang="javascript"&gt;&lt;span style="color:#81a1c1;"&gt;class &lt;/span&gt;&lt;span style="color:#8fbcbb;"&gt;HashMap &lt;/span&gt;&lt;span&gt;{
+&lt;/span&gt;&lt;span&gt;  &lt;/span&gt;&lt;span style="color:#616e88;"&gt;// ...
+&lt;/span&gt;&lt;span&gt;  &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;entry&lt;/span&gt;&lt;span&gt;(bucket&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span&gt;key) {
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;for &lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;let &lt;/span&gt;&lt;span&gt;e &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;of &lt;/span&gt;&lt;span&gt;bucket) {
+&lt;/span&gt;&lt;span&gt;      &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;if &lt;/span&gt;&lt;span&gt;(e&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;.&lt;/span&gt;&lt;span&gt;key &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;=== &lt;/span&gt;&lt;span&gt;key) {
+&lt;/span&gt;&lt;span&gt;        &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;return &lt;/span&gt;&lt;span&gt;e&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;      }
+&lt;/span&gt;&lt;span&gt;    }
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;return null&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;  }
+&lt;/span&gt;&lt;span&gt;}
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;The &lt;code&gt;entry&lt;/code&gt; method takes a &lt;code&gt;bucket&lt;/code&gt; and a &lt;code&gt;key&lt;/code&gt; and scans the bucket until it
+finds an entry with the given key. If no entry is found, &lt;code&gt;null&lt;/code&gt; is returned.&lt;/p&gt;
+&lt;pre data-lang="javascript" style="background-color:#2e3440;color:#d8dee9;" class="language-javascript "&gt;&lt;code class="language-javascript" data-lang="javascript"&gt;&lt;span style="color:#81a1c1;"&gt;class &lt;/span&gt;&lt;span style="color:#8fbcbb;"&gt;HashMap &lt;/span&gt;&lt;span&gt;{
+&lt;/span&gt;&lt;span&gt;  &lt;/span&gt;&lt;span style="color:#616e88;"&gt;// ...
+&lt;/span&gt;&lt;span&gt;  &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;set&lt;/span&gt;&lt;span&gt;(key&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span&gt;value) {
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;let &lt;/span&gt;&lt;span&gt;b &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;= this.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;bucket&lt;/span&gt;&lt;span&gt;(key)&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;let &lt;/span&gt;&lt;span&gt;e &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;= this.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;entry&lt;/span&gt;&lt;span&gt;(b&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span&gt;key)&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;if &lt;/span&gt;&lt;span&gt;(e) {
+&lt;/span&gt;&lt;span&gt;      e&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;.&lt;/span&gt;&lt;span&gt;value &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;= &lt;/span&gt;&lt;span&gt;value&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;      &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;return&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;    }
+&lt;/span&gt;&lt;span&gt;    b&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;push&lt;/span&gt;&lt;span&gt;({ key&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span&gt;value })&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;  }
+&lt;/span&gt;&lt;span&gt;}
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;The &lt;code&gt;set&lt;/code&gt; method is the first one we should recognise from our earlier
+JavaScript &lt;code&gt;Map&lt;/code&gt; examples. It takes a key-value pair and stores it in our hash
+map. It does this by using the &lt;code&gt;bucket&lt;/code&gt; and &lt;code&gt;entry&lt;/code&gt; methods we created earlier.
+If an entry is found, its value is overwritten. If no entry is found, the
+key-value pair is added to the map. In JavaScript, &lt;code&gt;{ key, value }&lt;/code&gt; is
+shorthand for &lt;code&gt;{ key: key, value: value }&lt;/code&gt;.&lt;/p&gt;
+&lt;pre data-lang="javascript" style="background-color:#2e3440;color:#d8dee9;" class="language-javascript "&gt;&lt;code class="language-javascript" data-lang="javascript"&gt;&lt;span style="color:#81a1c1;"&gt;class &lt;/span&gt;&lt;span style="color:#8fbcbb;"&gt;HashMap &lt;/span&gt;&lt;span&gt;{
+&lt;/span&gt;&lt;span&gt;  &lt;/span&gt;&lt;span style="color:#616e88;"&gt;// ...
+&lt;/span&gt;&lt;span&gt;  &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;get&lt;/span&gt;&lt;span&gt;(key) {
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;let &lt;/span&gt;&lt;span&gt;b &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;= this.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;bucket&lt;/span&gt;&lt;span&gt;(key)&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;let &lt;/span&gt;&lt;span&gt;e &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;= this.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;entry&lt;/span&gt;&lt;span&gt;(b&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span&gt;key)&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;if &lt;/span&gt;&lt;span&gt;(e) {
+&lt;/span&gt;&lt;span&gt;      &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;return &lt;/span&gt;&lt;span&gt;e&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;.&lt;/span&gt;&lt;span&gt;value&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;    }
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;return null&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;  }
+&lt;/span&gt;&lt;span&gt;}
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;The &lt;code&gt;get&lt;/code&gt; method is very similar to &lt;code&gt;set&lt;/code&gt;. It uses &lt;code&gt;bucket&lt;/code&gt; and &lt;code&gt;entry&lt;/code&gt; to find
+the entry related to the &lt;code&gt;key&lt;/code&gt; passed in, just like &lt;code&gt;set&lt;/code&gt; does. If an entry is
+found, its &lt;code&gt;value&lt;/code&gt; is returned. If one isn't found, &lt;code&gt;null&lt;/code&gt; is returned.&lt;/p&gt;
+&lt;p&gt;That was quite a lot of code. What you should take away from it is that our
+hash map is a list of lists, and a hash function is used to know which of the
+lists to store and retrieve a given key from.&lt;/p&gt;
+&lt;p&gt;Here's a visual representation of this hash map in action. &lt;span class="purple
+bold"&gt;Click&lt;/span&gt; anywhere on the buckets to add a new key-value pair using our
+&lt;code&gt;set&lt;/code&gt; method. To keep the visualisation simple, if a bucket were to "overflow",
+the buckets are all reset.&lt;/p&gt;
+&lt;p&gt;&lt;hash-map hashFn=murmur3 valueFn=intToStr&gt;&lt;/hash-map&gt;&lt;/p&gt;
+&lt;p&gt;Because we're using &lt;code class="green bold"&gt;murmur3&lt;/code&gt; as our hash
+function, you should see good distribution between the buckets. It's expected
+you'll see &lt;em&gt;some&lt;/em&gt; imbalance, but it should generally be quite even.&lt;/p&gt;
+&lt;p&gt;To get a value out of the hash map, we first hash the key to figure out which
+bucket the value will be in. Then we have to compare the key we're searching for
+against all of the keys in the bucket.&lt;/p&gt;
+&lt;p&gt;It's this search step that we minimise through hashing, and why &lt;code
+class="bold green"&gt;murmur3&lt;/code&gt; is optimised for speed. The faster the hash
+function, the faster we find the right bucket to search, the faster our hash
+map is overall.&lt;/p&gt;
+&lt;p&gt;This is also why reducing collisions is so crucial. If we did decide to use that
+dummy hash function from all the way at the start of this article, the one that
+returns 0 all the time, we'll put all of our key-value pairs into the first
+bucket. Finding anything could mean we have to check all of the values in the
+hash map. With a good hash function, with good distribution, we reduce the
+amount of searching we have to do to 1/N, where N is the number of buckets.&lt;/p&gt;
+&lt;p&gt;Let's see how &lt;code class="red bold"&gt;stringSum&lt;/code&gt; does.&lt;/p&gt;
+&lt;p&gt;&lt;hash-map hashFn=stringSum valueFn=intToStr&gt;&lt;/hash-map&gt;&lt;/p&gt;
+&lt;p&gt;Interestingly, &lt;code class="bold red"&gt;stringSum&lt;/code&gt; seems to distribute
+values quite well. You notice a pattern, but the overall distribution looks
+good.&lt;/p&gt;
+&lt;blockquote class="haskie"&gt;
+&lt;img src="/images/haskie-triumphant-200px.png" /&gt;
+&lt;p&gt;
+  Finally! A win for &lt;code class="bold red"&gt;stringSum&lt;/code&gt;. I knew it would
+  be good for something.
+&lt;/p&gt;
+&lt;/blockquote&gt;
+&lt;p&gt;Not so fast, Haskie. We need to talk about a serious problem. The distribution
+looks okay on these sequential numbers, but we've seen that &lt;code class="bold
+red"&gt;stringSum&lt;/code&gt; doesn't have a good avalanche effect. This doesn't end
+well.&lt;/p&gt;
+&lt;h2 id="real-world-collisions"&gt;&lt;a class="anchor" href="#real-world-collisions"&gt;#&lt;/a&gt;
+Real-world collisions&lt;/h2&gt;
+&lt;p&gt;Let's look at 2 real-world data sets: IP addresses and English words. What I'm
+going to do is take 100,000,000 random IP addresses and &lt;a href="https://github.com/dwyl/english-words"&gt;466,550 English
+words&lt;/a&gt;, hash all of them with both &lt;code class="bold green"&gt;murmur3&lt;/code&gt;
+and &lt;code class="red bold"&gt;stringSum&lt;/code&gt;, and see how many collisions we get.&lt;/p&gt;
+&lt;p&gt;&lt;b&gt;IP Addresses&lt;/b&gt;&lt;/p&gt;
+&lt;table class="datasets"&gt;
+  &lt;th&gt;
+  &lt;/th&gt;
+  &lt;th&gt;
+    &lt;code class="bold green"&gt;murmur3&lt;/code&gt;
+  &lt;/th&gt;
+  &lt;th&gt;
+    &lt;code class="bold red"&gt;stringSum&lt;/code&gt;
+  &lt;/th&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Collisions&lt;/td&gt;
+    &lt;td&gt;1,156,959&lt;/td&gt;
+    &lt;td&gt;99,999,566&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;&lt;/td&gt;
+    &lt;td&gt;1.157%&lt;/td&gt;
+    &lt;td&gt;99.999%&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+&lt;p&gt;&lt;b&gt;English words&lt;/b&gt;&lt;/p&gt;
+&lt;table class="datasets"&gt;
+  &lt;th&gt;
+  &lt;/th&gt;
+  &lt;th&gt;
+    &lt;code class="bold green"&gt;murmur3&lt;/code&gt;
+  &lt;/th&gt;
+  &lt;th&gt;
+    &lt;code class="bold red"&gt;stringSum&lt;/code&gt;
+  &lt;/th&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Collisions&lt;/td&gt;
+    &lt;td&gt;25&lt;/td&gt;
+    &lt;td&gt;464,220&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;&lt;/td&gt;
+    &lt;td&gt;0.005%&lt;/td&gt;
+    &lt;td&gt;99.5%&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+&lt;p&gt;When we use hash maps for real, we aren't usually storing random values in them.
+We can imagine counting the number of times we've seen an IP address in rate
+limiting code for a server. Or code that counts the occurrences of words in
+books throughout history to track their origin and popularity. &lt;code class="bold
+red"&gt;stringSum&lt;/code&gt; sucks for these applications because of it's extremely
+high collision rate.&lt;/p&gt;
+&lt;h2 id="manufactured-collisions"&gt;&lt;a class="anchor" href="#manufactured-collisions"&gt;#&lt;/a&gt;
+Manufactured collisions&lt;/h2&gt;
+&lt;p&gt;Now it's &lt;code class="bold green"&gt;murmur3&lt;/code&gt;'s turn for some bad news.
+It's not just collisions caused by similarity in the input we have to worry
+about. Check this out.&lt;/p&gt;
+&lt;p&gt;&lt;hash-map hashFn=murmur3 valueFn=murmur3Collisions&gt;&lt;/hash-map&gt;&lt;/p&gt;
+&lt;p&gt;What's happening here? Why do all of these jibberish strings hash to the same
+number?&lt;/p&gt;
+&lt;p&gt;I hashed 141 trillion random strings to find values that hash to the number
+&lt;code&gt;1228476406&lt;/code&gt; when using &lt;code class="green bold"&gt;murmur3&lt;/code&gt;. Hash functions
+have to always return the same output for a specific input, so it's possible to
+find collisions by brute force.&lt;/p&gt;
+&lt;blockquote class="haskie"&gt;
+&lt;img src="/images/haskie-concerned-200px.png" /&gt;
+&lt;p&gt;
+  I'm sorry, 141 &lt;b&gt;trillion&lt;/b&gt;? Like... 141 and then 12 zeroes?
+&lt;/p&gt;
+&lt;/blockquote&gt;
+&lt;p&gt;Yes, and it only took me 25 minutes. &lt;a href="https://computers-are-fast.github.io/"&gt;Computers are fast&lt;/a&gt;.&lt;/p&gt;
+&lt;p&gt;Bad actors having easy access to collisions can be devastating if your software
+builds hash maps out of user input. Take HTTP headers, for example. An HTTP
+request looks like this:&lt;/p&gt;
+&lt;pre data-lang="txt" style="background-color:#2e3440;color:#d8dee9;" class="language-txt "&gt;&lt;code class="language-txt" data-lang="txt"&gt;&lt;span&gt;GET / HTTP/1.1
+&lt;/span&gt;&lt;span&gt;Accept: */*
+&lt;/span&gt;&lt;span&gt;Accept-Encoding: gzip, deflate
+&lt;/span&gt;&lt;span&gt;Connection: keep-alive
+&lt;/span&gt;&lt;span&gt;Host: google.com
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;You don't have to understand all of the words, just that the first line is the
+path being requested and all of the other lines are headers. Headers are &lt;code&gt;Key: Value&lt;/code&gt; pairs, so HTTP servers tend to use maps to store them. Nothing stops us
+from passing any headers we want, so we can be really mean and pass headers we
+know will cause collisions. This can significantly slow down the server.&lt;/p&gt;
+&lt;p&gt;&lt;a href="https://cryptanalysis.eu/blog/2011/12/28/effective-dos-attacks-against-web-application-plattforms-hashdos/"&gt;This isn't
+theoretical, either&lt;/a&gt;.
+If you search "HashDoS" you'll find a lot more examples of this. It was a really
+big deal in the mid-2000s.&lt;/p&gt;
+&lt;p&gt;There are a few ways to mitigate this specific to HTTP servers: ignoring
+jibberish header keys and limiting the number of headers you store, for
+example. But modern hash functions like &lt;code class="bold green"&gt;murmur3&lt;/code&gt;
+offer a more generalised solution: randomisation.&lt;/p&gt;
+&lt;p&gt;Earlier in this post we showed some examples of hash function implementations.
+Those implementations took a single argument: &lt;code&gt;input&lt;/code&gt;. Lots of modern hash
+functions take a 2nd parameter: &lt;code&gt;seed&lt;/code&gt; (sometimes called &lt;code&gt;salt&lt;/code&gt;). In the case
+of &lt;code class="green bold"&gt;murmur3&lt;/code&gt;, this seed is a number.&lt;/p&gt;
+&lt;p&gt;So far, we've been using 0 as the seed. Let's see what happens with the
+collisions I've collected when we use a seed of 1.&lt;/p&gt;
+&lt;p&gt;&lt;hash-map hashFn=murmur3 valueFn=murmur3Collisions seed=1&gt;&lt;/hash-map&gt;&lt;/p&gt;
+&lt;p&gt;Just like that, 0 to 1, the collisions are gone. This is the purpose of the
+seed: it randomises the output of the hash function in an unpredictable way.
+How it achieves this is beyond the scope of this article, all hash functions do
+this in their own way.&lt;/p&gt;
+&lt;p&gt;The hash function still returns the same output for the same input, it's just
+that the input is a combination of &lt;code&gt;input&lt;/code&gt; and &lt;code&gt;seed&lt;/code&gt;. Things that collide with
+one seed shouldn't collide when using another. Programming languages often
+generate a random number to use as the seed when the process starts, so that
+every time you run your program the seed is different. As a bad guy, not knowing
+the seed, it is now impossible for me to reliably cause harm.&lt;/p&gt;
+&lt;p&gt;If you look closely in the above visualisation and the one before it, they're
+the same values being hashed but they produce different hash values. The
+implication of this is that if you hash a value with one seed, and want to be
+able to compare against it in the future, you need to make sure you use the same
+seed.&lt;/p&gt;
+&lt;p&gt;Having different values for different seeds doesn't affect the hash map
+use-case, because hash maps only live for the duration the program is running.
+Provided you use the same seed for the lifetime of the program, your hash maps
+will continue to work just fine. If you ever store hash values outside of your
+program, in a file for example, you need to be careful you know what seed has
+been used.&lt;/p&gt;
+&lt;h2 id="playground"&gt;&lt;a class="anchor" href="#playground"&gt;#&lt;/a&gt;
+Playground&lt;/h2&gt;
+&lt;p&gt;As is tradition, I've made a playground for you to write your own hash functions
+and see them visualised with the grids seen in this article. Click
+&lt;a href="/hashing-playground/"&gt;here&lt;/a&gt; to try it!&lt;/p&gt;
+&lt;h2 id="conclusion"&gt;&lt;a class="anchor" href="#conclusion"&gt;#&lt;/a&gt;
+Conclusion&lt;/h2&gt;
+&lt;p&gt;We've covered what a hash function is, some ways to measure how good it is,
+what happens when it's not good, and some of the ways they can be broken by
+bad actors.&lt;/p&gt;
+&lt;p&gt;The universe of hash functions is a large one, and we've really only scratched
+the surface in this post. We haven't spoken about cryptographic vs
+non-cryptographic hashing, we've touched on only 1 of the thousands of use-cases
+for hash functions, and we haven't talked about how exactly modern hash
+functions actually work.&lt;/p&gt;
+&lt;p&gt;Some further reading I recommend if you're really enthusiastic about this topic
+and want to learn more:&lt;/p&gt;
+&lt;ul&gt;
+&lt;li&gt;&lt;a href="https://github.com/rurban/smhasher"&gt;https://github.com/rurban/smhasher&lt;/a&gt; this repository is the gold standard
+for testing how good hash functions are. They run a tonne of tests against
+a wide number of hash functions and present the results in a big table. It
+will be difficult to understand what all of the tests are for, but this is
+where the state of the art of hash testing lives.&lt;/li&gt;
+&lt;li&gt;&lt;a href="https://djhworld.github.io/hyperloglog/"&gt;https://djhworld.github.io/hyperloglog/&lt;/a&gt; this is an interactive piece
+on a data structure called HyperLogLog. It's used to efficiently count the
+number of unique elements in very, very large sets. It uses
+hashing to do it in a really clever way.&lt;/li&gt;
+&lt;li&gt;&lt;a href="https://www.gnu.org/software/gperf/"&gt;https://www.gnu.org/software/gperf/&lt;/a&gt; is a piece of software that, when given
+the expected set of things you want to hash, can generate a "perfect" hash
+function automatically.&lt;/li&gt;
+&lt;/ul&gt;
+&lt;p&gt;Feel free to join the discussion on &lt;a href="https://news.ycombinator.com/item?id=36401747"&gt;Hacker News&lt;/a&gt;!&lt;/p&gt;
+&lt;h2 id="acknowledgements"&gt;&lt;a class="anchor" href="#acknowledgements"&gt;#&lt;/a&gt;
+Acknowledgements&lt;/h2&gt;
+&lt;p&gt;Thanks to everyone who read early drafts and provided invaluable feedback.&lt;/p&gt;
+&lt;ul&gt;
+&lt;li&gt;&lt;a href="https://delroth.net/"&gt;delroth&lt;/a&gt;, &lt;a href="https://twitter.com/Manon_Lef/"&gt;Manon&lt;/a&gt;, &lt;a href="https://medium.com/@AaronKalair"&gt;Aaron&lt;/a&gt;, &lt;a href="https://twitter.com/TheCoppinger"&gt;Charlie&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;
+&lt;p&gt;And everyone who helped me find &lt;code class="green bold"&gt;murmur3&lt;/code&gt; hash
+collisions:&lt;/p&gt;
+&lt;ul&gt;
+&lt;li&gt;&lt;a href="https://indy.codes/"&gt;Indy&lt;/a&gt;, &lt;a href="https://medium.com/@AaronKalair"&gt;Aaron&lt;/a&gt;, Max&lt;/li&gt;
+&lt;/ul&gt;
+&lt;h2 id="patreon"&gt;&lt;a class="anchor" href="#patreon"&gt;#&lt;/a&gt;
+Patreon&lt;/h2&gt;
+&lt;p&gt;After the success of &lt;a href="/load-balancing/"&gt;Load Balancing&lt;/a&gt; and &lt;a href="/memory-allocation/"&gt;Memory
+Allocation&lt;/a&gt;, I have decided to set up a Patreon page:
+&lt;a href="https://patreon.com/samwho"&gt;https://patreon.com/samwho&lt;/a&gt;. For all of these articles going forward, I am
+going to post a Patreon-exclusive behind-the-scenes post talking about
+decisions, difficulties, and lessons learned from each post. It will give you
+a deep look in to how these articles evolve, and I'm really stoked about
+the one I've written for this one.&lt;/p&gt;
+&lt;p&gt;If you enjoy my writing, and want to support it going forward, I'd really
+appreciate you becoming a Patreon. ❤️&lt;/p&gt;
+</content>
+            
+        </entry>
+    
+    
+    
+    
+    
+    
+        <entry xml:lang="en">
+            <title>Memory Allocation</title>
+            <published>2023-04-13T00:00:00+00:00</published>
+            <updated>2023-04-13T00:00:00+00:00</updated>
+            <author>
+            <name>Unknown</name>
+            </author>
+            <link rel="alternate" href="https://samwho.dev/memory-allocation/" type="text/html"/>
+            <id>https://samwho.dev/memory-allocation/</id>
+            
+            <content type="html">&lt;script src="/js/gsap/gsap.min.js"&gt;&lt;/script&gt;
+&lt;script src="/js/gsap/PixiPlugin.min.js"&gt;&lt;/script&gt;
+&lt;script type="module" src="/js/memory-allocation.js"&gt;&lt;/script&gt;
+&lt;style&gt;
+.memory {
+    width: 100%;
+    margin-bottom: 1.5em;
+    margin-top: 0.5em;
+}
+input[type=range]:focus {
+  outline: none;
+}
+a[simulation] {
+  cursor: pointer;
+}
+.size {
+  color: #0072B2 !important;
+  font-weight: bold;
+}
+.free {
+  color: #009E73 !important;
+  font-weight: bold;
+}
+.allocated {
+  color: #D55E00 !important;
+  font-weight: bold;
+}
+.usable-memory {
+  color: #E69F00 !important;
+  font-weight: bold;
+}
+&lt;/style&gt;
+&lt;p&gt;One thing that all programs on your computer have in common is a need for
+memory. Programs need to be loaded from your hard drive into memory before they
+can be run.  While running, the majority of what programs do is load values from
+memory, do some computation on them, and then store the result back in memory.&lt;/p&gt;
+&lt;p&gt;In this post I'm going to introduce you to the basics of memory allocation.
+Allocators exist because it's not enough to have memory available, you need to
+use it effectively. We will visually explore how simple allocators work. We'll
+see some of the problems that they try to solve, and some of the techniques used
+to solve them. At the end of this post, you should know everything you need to
+know to write your own allocator.&lt;/p&gt;
+&lt;h2 id="malloc-and-free"&gt;&lt;a class="anchor" href="#malloc-and-free"&gt;#&lt;/a&gt;
+&lt;code&gt;malloc&lt;/code&gt; and &lt;code&gt;free&lt;/code&gt;&lt;/h2&gt;
+&lt;p&gt;To understand the job of a memory allocator, it's essential to understand how
+programs request and return memory.  &lt;code&gt;malloc&lt;/code&gt; and &lt;code&gt;free&lt;/code&gt; are functions that were
+first introduced in a recognisable form in UNIX v7 in 1979(!). Let's take a look
+at a short C program demonstrating their use.&lt;/p&gt;
+&lt;blockquote class="haskie"&gt;
+&lt;img src="/images/haskie-concerned-200px.png" /&gt;
+&lt;p&gt;
+  Woah, hold on. I've never written any C code before. Will I still be able
+  to follow along?
+&lt;/p&gt;
+&lt;/blockquote&gt;
+&lt;p&gt;If you have beginner-level familiarity with another language, e.g. JavaScript,
+Python, or C#, you should have no problem following along. You don't need to
+understand every word, as long as you get the overall idea. This is the only
+C code in the article, I promise.&lt;/p&gt;
+&lt;pre data-lang="c" style="background-color:#2e3440;color:#d8dee9;" class="language-c "&gt;&lt;code class="language-c" data-lang="c"&gt;&lt;span style="color:#5e81ac;"&gt;#include &lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;lt;stdlib.h&amp;gt;
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;int &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;main&lt;/span&gt;&lt;span&gt;() {
+&lt;/span&gt;&lt;span&gt;  &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;void *&lt;/span&gt;&lt;span&gt;ptr &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;= &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;malloc&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span style="color:#b48ead;"&gt;4&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;  &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;free&lt;/span&gt;&lt;span&gt;(ptr)&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;  &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;return &lt;/span&gt;&lt;span style="color:#b48ead;"&gt;0&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;}
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;In the above program we ask for 4 bytes of memory by calling &lt;code&gt;malloc(4)&lt;/code&gt;, we
+store the value returned in a variable called &lt;code&gt;ptr&lt;/code&gt;, then we indicate that we're
+done with the memory by calling &lt;code&gt;free(ptr)&lt;/code&gt;.&lt;/p&gt;
+&lt;p&gt;These two functions are how almost all programs manage the memory they use.
+Even when you're not writing C, the code that is executing your Java, Python,
+Ruby, JavaScript, and so on make use of &lt;code&gt;malloc&lt;/code&gt; and &lt;code&gt;free&lt;/code&gt;.&lt;/p&gt;
+&lt;h2 id="what-is-memory"&gt;&lt;a class="anchor" href="#what-is-memory"&gt;#&lt;/a&gt;
+What is memory?&lt;/h2&gt;
+&lt;p&gt;The smallest unit of memory that allocators work with is called a "byte." A byte
+can store any number between 0 and 255. You can think of memory as being a long
+sequence of bytes. We're going to represent this sequence as a grid of squares,
+with each square representing a byte of memory.&lt;/p&gt;
+&lt;div class="memory" bytes="32" slider=false&gt;
+&lt;/div&gt;
+&lt;p&gt;In the C code from before, &lt;code&gt;malloc(4)&lt;/code&gt; allocates 4 bytes of memory. We're going
+to represent memory that has been allocated as darker squares.&lt;/p&gt;
+&lt;div class="memory" bytes="32" slider=false&gt;
+  &lt;malloc size="4" addr="0x0"&gt;&lt;/malloc&gt;
+&lt;/div&gt;
+&lt;p&gt;Then &lt;code&gt;free(ptr)&lt;/code&gt; tells the allocator we're done with that memory. It is returned
+back to the pool of available memory.&lt;/p&gt;
+&lt;p&gt;Here's what 4 &lt;code&gt;malloc&lt;/code&gt; calls followed by 4 &lt;code&gt;free&lt;/code&gt; calls looks like.  You'll
+notice there's now a slider.  Dragging the slider to the right advances time
+forward, and dragging it left rewinds. You can also click anywhere on the grid
+and then use the arrow keys on your keyboard, or you can use the left and right
+buttons. The ticks along the slider represent calls to &lt;code&gt;malloc&lt;/code&gt; and &lt;code&gt;free&lt;/code&gt;.&lt;/p&gt;
+&lt;div class="memory" bytes="32"&gt;
+  &lt;malloc size="4" addr="0x0"&gt;&lt;/malloc&gt;
+  &lt;malloc size="5" addr="0x4"&gt;&lt;/malloc&gt;
+  &lt;malloc size="6" addr="0x9"&gt;&lt;/malloc&gt;
+  &lt;malloc size="7" addr="0xf"&gt;&lt;/malloc&gt;
+  &lt;free addr="0x0"&gt;&lt;/free&gt;
+  &lt;free addr="0x4"&gt;&lt;/free&gt;
+  &lt;free addr="0x9"&gt;&lt;/free&gt;
+  &lt;free addr="0xf"&gt;&lt;/free&gt;
+&lt;/div&gt;
+&lt;blockquote class="haskie"&gt;
+&lt;img src="/images/haskie-confused-200px.png"&gt;
+&lt;p&gt;
+  Wait a sec... What is &lt;code&gt;malloc&lt;/code&gt; actually returning as a value?
+  What does it mean to "give" memory to a program?
+&lt;/p&gt;
+&lt;/blockquote&gt;
+&lt;p&gt;What &lt;code&gt;malloc&lt;/code&gt; returns is called a "pointer" or a "memory address." It's a number
+that identifies a byte in memory.  We typically write addresses in a form called
+"hexadecimal." Hexadecimal numbers are written with a &lt;code&gt;0x&lt;/code&gt; prefix to distinguish
+them from decimal numbers.  Move the slider below to see a comparison between
+decimal numbers and hexadecimal numbers.&lt;/p&gt;
+&lt;div
+  id="hexadecimal-demo"
+  style="display: flex; width: 100%; flex-direction: column;"
+&gt;
+  &lt;div style="width: 100%; font-size: 2.5rem; display: flex; justify-content: center;"&gt;
+    &lt;code id="decimal" style="min-width: 4rem; text-align: right"&gt;0&lt;/code&gt;
+    &lt;code style="min-width: 5rem; text-align: center"&gt;==&lt;/code&gt;
+    &lt;code id="hexadecimal" style="min-width: 7rem; text-align: left"&gt;0x0&lt;/code&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input
+      id="hexadecimal-slider"
+      type="range"
+      min="0"
+      max="32"
+      step="1"
+      value="0"
+      list="hexadecimal-demo-list"
+      style="width: 100%" /&gt;
+    &lt;datalist id="hexadecimal-demo-list"&gt;
+      &lt;option value=1&gt;&lt;/option&gt;
+      &lt;option value=2&gt;&lt;/option&gt;
+      &lt;option value=3&gt;&lt;/option&gt;
+      &lt;option value=4&gt;&lt;/option&gt;
+      &lt;option value=5&gt;&lt;/option&gt;
+      &lt;option value=6&gt;&lt;/option&gt;
+      &lt;option value=7&gt;&lt;/option&gt;
+      &lt;option value=8&gt;&lt;/option&gt;
+      &lt;option value=9&gt;&lt;/option&gt;
+      &lt;option value=10&gt;&lt;/option&gt;
+      &lt;option value=11&gt;&lt;/option&gt;
+      &lt;option value=12&gt;&lt;/option&gt;
+      &lt;option value=13&gt;&lt;/option&gt;
+      &lt;option value=14&gt;&lt;/option&gt;
+      &lt;option value=15&gt;&lt;/option&gt;
+      &lt;option value=16&gt;&lt;/option&gt;
+      &lt;option value=17&gt;&lt;/option&gt;
+      &lt;option value=18&gt;&lt;/option&gt;
+      &lt;option value=19&gt;&lt;/option&gt;
+      &lt;option value=20&gt;&lt;/option&gt;
+      &lt;option value=21&gt;&lt;/option&gt;
+      &lt;option value=22&gt;&lt;/option&gt;
+      &lt;option value=23&gt;&lt;/option&gt;
+      &lt;option value=24&gt;&lt;/option&gt;
+      &lt;option value=25&gt;&lt;/option&gt;
+      &lt;option value=26&gt;&lt;/option&gt;
+      &lt;option value=27&gt;&lt;/option&gt;
+      &lt;option value=28&gt;&lt;/option&gt;
+      &lt;option value=29&gt;&lt;/option&gt;
+      &lt;option value=30&gt;&lt;/option&gt;
+      &lt;option value=31&gt;&lt;/option&gt;
+      &lt;option value=32&gt;&lt;/option&gt;
+    &lt;/datalist&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;p&gt;Here's our familiar grid of memory. Each byte is annotated with its address in
+hexadecimal form. For space reasons, I've omitted the &lt;code&gt;0x&lt;/code&gt; prefix.&lt;/p&gt;
+&lt;div class="memory" bytes=32 slider=false&gt;
+  &lt;annotate type="text" addr=0x0 text=0&gt;&lt;/annotate&gt;
+  &lt;annotate type="text" addr=0x1 text=1&gt;&lt;/annotate&gt;
+  &lt;annotate type="text" addr=0x2 text=2&gt;&lt;/annotate&gt;
+  &lt;annotate type="text" addr=0x3 text=3&gt;&lt;/annotate&gt;
+  &lt;annotate type="text" addr=0x4 text=4&gt;&lt;/annotate&gt;
+  &lt;annotate type="text" addr=0x5 text=5&gt;&lt;/annotate&gt;
+  &lt;annotate type="text" addr=0x6 text=6&gt;&lt;/annotate&gt;
+  &lt;annotate type="text" addr=0x7 text=7&gt;&lt;/annotate&gt;
+  &lt;annotate type="text" addr=0x8 text=8&gt;&lt;/annotate&gt;
+  &lt;annotate type="text" addr=0x9 text=9&gt;&lt;/annotate&gt;
+  &lt;annotate type="text" addr=0xA text=A&gt;&lt;/annotate&gt;
+  &lt;annotate type="text" addr=0xB text=B&gt;&lt;/annotate&gt;
+  &lt;annotate type="text" addr=0xC text=C&gt;&lt;/annotate&gt;
+  &lt;annotate type="text" addr=0xD text=D&gt;&lt;/annotate&gt;
+  &lt;annotate type="text" addr=0xE text=E&gt;&lt;/annotate&gt;
+  &lt;annotate type="text" addr=0xF text=F&gt;&lt;/annotate&gt;
+  &lt;annotate type="text" addr=0x10 text=10&gt;&lt;/annotate&gt;
+  &lt;annotate type="text" addr=0x11 text=11&gt;&lt;/annotate&gt;
+  &lt;annotate type="text" addr=0x12 text=12&gt;&lt;/annotate&gt;
+  &lt;annotate type="text" addr=0x13 text=13&gt;&lt;/annotate&gt;
+  &lt;annotate type="text" addr=0x14 text=14&gt;&lt;/annotate&gt;
+  &lt;annotate type="text" addr=0x15 text=15&gt;&lt;/annotate&gt;
+  &lt;annotate type="text" addr=0x16 text=16&gt;&lt;/annotate&gt;
+  &lt;annotate type="text" addr=0x17 text=17&gt;&lt;/annotate&gt;
+  &lt;annotate type="text" addr=0x18 text=18&gt;&lt;/annotate&gt;
+  &lt;annotate type="text" addr=0x19 text=19&gt;&lt;/annotate&gt;
+  &lt;annotate type="text" addr=0x1A text=1A&gt;&lt;/annotate&gt;
+  &lt;annotate type="text" addr=0x1B text=1B&gt;&lt;/annotate&gt;
+  &lt;annotate type="text" addr=0x1C text=1C&gt;&lt;/annotate&gt;
+  &lt;annotate type="text" addr=0x1D text=1D&gt;&lt;/annotate&gt;
+  &lt;annotate type="text" addr=0x1E text=1E&gt;&lt;/annotate&gt;
+  &lt;annotate type="text" addr=0x1F text=1F&gt;&lt;/annotate&gt;
+&lt;/div&gt;
+&lt;p&gt;The examples we use in this article pretend that your computer only has a very
+small amount of memory, but in real life you have billions of bytes to work
+with. Real addresses are much larger than what we're using here, but the idea is
+exactly the same. Memory addresses are numbers that refer to a specific byte in
+memory.&lt;/p&gt;
+&lt;h2 id="the-simplest-malloc"&gt;&lt;a class="anchor" href="#the-simplest-malloc"&gt;#&lt;/a&gt;
+The simplest &lt;code&gt;malloc&lt;/code&gt;&lt;/h2&gt;
+&lt;p&gt;The "hello world" of &lt;code&gt;malloc&lt;/code&gt; implementations would hand out blocks of memory by
+keeping track of where the previous block ended and starting the next block
+right after.  Below we represent where the next block should start with a grey
+square.&lt;/p&gt;
+&lt;div class="memory" bytes="32"&gt;
+  &lt;allocator path="/js/allocators/stack.js"&gt;&lt;/allocator&gt;
+  &lt;malloc size="4" addr="0x0"&gt;&lt;/malloc&gt;
+  &lt;malloc size="5" addr="0x4"&gt;&lt;/malloc&gt;
+  &lt;malloc size="6" addr="0x9"&gt;&lt;/malloc&gt;
+  &lt;malloc size="7" addr="0xf"&gt;&lt;/malloc&gt;
+&lt;/div&gt;
+&lt;p&gt;You'll notice no memory is &lt;code&gt;free&lt;/code&gt;d. If we're only keeping track of where the
+next block should start, and we don't know where previous blocks start or end,
+&lt;code&gt;free&lt;/code&gt; doesn't have enough information to do anything. So it doesn't. This is
+called a "memory leak" because, once allocated, the memory can never be used
+again.&lt;/p&gt;
+&lt;p&gt;Believe it or not, this isn't a completely useless implementation.  For programs
+that use a known amount of memory, this can be a very efficient strategy.  It's
+extremely fast and extremely simple. As a general-purpose memory allocator,
+though, we can't get away with having no &lt;code&gt;free&lt;/code&gt; implementation.&lt;/p&gt;
+&lt;h2 id="the-simplest-general-purpose-malloc"&gt;&lt;a class="anchor" href="#the-simplest-general-purpose-malloc"&gt;#&lt;/a&gt;
+The simplest general-purpose &lt;code&gt;malloc&lt;/code&gt;&lt;/h2&gt;
+&lt;p&gt;In order to &lt;code&gt;free&lt;/code&gt; memory, we need to keep better track of memory.  We can do
+this by saving the address and size of all allocations, and the address and size
+of blocks of free memory. We'll call these an "allocation list" and a "free
+list" respectively.&lt;/p&gt;
+&lt;div class="memory" bytes="32" slider=false&gt;
+  &lt;allocator path="/js/allocators/freelist.js"&gt;
+    &lt;options coalesce=false&gt;&lt;/options&gt;
+  &lt;/allocator&gt;
+&lt;/div&gt;
+&lt;p&gt;We're representing free list entries as 2 grey squares linked together with a
+line. You can imagine this entry being represented in code as &lt;code&gt;address=0&lt;/code&gt; and
+&lt;code&gt;size=32&lt;/code&gt;.  When our program starts, all of memory is marked as free. When
+&lt;code&gt;malloc&lt;/code&gt; is called, we loop through our free list until we find a block large
+enough to accommodate it. When we find one, we save the address and size of the
+allocation in our allocation list, and shrink the free list entry accordingly.&lt;/p&gt;
+&lt;div class="memory" bytes="32" slider=false&gt;
+  &lt;allocator path="/js/allocators/freelist.js"&gt;
+    &lt;options coalesce=false&gt;&lt;/options&gt;
+  &lt;/allocator&gt;
+  &lt;malloc id=1 size=4&gt;&lt;/malloc&gt;
+&lt;/div&gt;
+&lt;blockquote class="haskie"&gt;
+&lt;img src="/images/haskie-confused-200px.png"&gt;
+&lt;p&gt;
+  Where do we save allocations and free list entries? Aren't we pretending our
+  computer only has 32 bytes of memory?
+&lt;/p&gt;
+&lt;/blockquote&gt;
+&lt;p&gt;You caught me. One of the benefits of being a memory allocator is that you're in
+charge of memory. You could store your allocation/free list in a reserved area
+that's just for you. Or you could store it inline, in a few bytes immediately
+preceding each allocation.  For now, assume we have reserved some unseen memory
+for ourselves and we're using it to store our allocation and free lists.&lt;/p&gt;
+&lt;p&gt;So what about &lt;code&gt;free&lt;/code&gt;? Because we've saved the address and size of the allocation
+in our allocation list, we can search that list and move the allocation back in
+to the free list. Without the size information, we wouldn't be able to do this.&lt;/p&gt;
+&lt;div class="memory" bytes="32"&gt;
+  &lt;allocator path="/js/allocators/freelist.js"&gt;
+    &lt;options coalesce=false&gt;&lt;/options&gt;
+  &lt;/allocator&gt;
+  &lt;malloc id=1 size=4&gt;&lt;/malloc&gt;
+  &lt;free id=1&gt;&lt;/free&gt;
+&lt;/div&gt;
+&lt;p&gt;Our free list now has 2 entries. This might look harmless, but actually
+represents a significant problem. Let's see that problem in action.&lt;/p&gt;
+&lt;div class="memory" bytes="32"&gt;
+  &lt;allocator path="/js/allocators/freelist.js"&gt;
+    &lt;options coalesce=false&gt;&lt;/options&gt;
+  &lt;/allocator&gt;
+  &lt;malloc id=1 size=4&gt;&lt;/malloc&gt;
+  &lt;malloc id=2 size=4&gt;&lt;/malloc&gt;
+  &lt;malloc id=3 size=4&gt;&lt;/malloc&gt;
+  &lt;malloc id=4 size=4&gt;&lt;/malloc&gt;
+  &lt;malloc id=5 size=4&gt;&lt;/malloc&gt;
+  &lt;malloc id=6 size=4&gt;&lt;/malloc&gt;
+  &lt;malloc id=7 size=4&gt;&lt;/malloc&gt;
+  &lt;malloc id=8 size=4&gt;&lt;/malloc&gt;
+  &lt;free id=1&gt;&lt;/free&gt;
+  &lt;free id=2&gt;&lt;/free&gt;
+  &lt;free id=3&gt;&lt;/free&gt;
+  &lt;free id=4&gt;&lt;/free&gt;
+  &lt;free id=5&gt;&lt;/free&gt;
+  &lt;free id=6&gt;&lt;/free&gt;
+  &lt;free id=7&gt;&lt;/free&gt;
+  &lt;free id=8&gt;&lt;/free&gt;
+&lt;/div&gt;
+&lt;p&gt;We allocated 8 blocks of memory, each 4 bytes in size. Then we &lt;code&gt;free&lt;/code&gt;d them all,
+resulting in 8 free list entries.  The problem we have now is that if we tried
+to do a &lt;code&gt;malloc(8)&lt;/code&gt;, there are no items in our free list that can hold 8 bytes
+and the &lt;code&gt;malloc(8)&lt;/code&gt; will fail.&lt;/p&gt;
+&lt;p&gt;To solve this, we need to do a bit more work. When we &lt;code&gt;free&lt;/code&gt; memory, we should
+make sure that if the block we return to the free list is next to any other
+free blocks, we combine them together. This is called "coalescing."&lt;/p&gt;
+&lt;div class="memory" bytes="32"&gt;
+  &lt;allocator path="/js/allocators/freelist.js"&gt;
+    &lt;options coalesce=true&gt;
+  &lt;/allocator&gt;
+  &lt;malloc id=1 size=4&gt;&lt;/malloc&gt;
+  &lt;malloc id=2 size=4&gt;&lt;/malloc&gt;
+  &lt;malloc id=3 size=4&gt;&lt;/malloc&gt;
+  &lt;malloc id=4 size=4&gt;&lt;/malloc&gt;
+  &lt;malloc id=5 size=4&gt;&lt;/malloc&gt;
+  &lt;malloc id=6 size=4&gt;&lt;/malloc&gt;
+  &lt;malloc id=7 size=4&gt;&lt;/malloc&gt;
+  &lt;malloc id=8 size=4&gt;&lt;/malloc&gt;
+  &lt;free id=1&gt;&lt;/free&gt;
+  &lt;free id=2&gt;&lt;/free&gt;
+  &lt;free id=3&gt;&lt;/free&gt;
+  &lt;free id=4&gt;&lt;/free&gt;
+  &lt;free id=5&gt;&lt;/free&gt;
+  &lt;free id=6&gt;&lt;/free&gt;
+  &lt;free id=7&gt;&lt;/free&gt;
+  &lt;free id=8&gt;&lt;/free&gt;
+&lt;/div&gt;
+&lt;p&gt;Much better.&lt;/p&gt;
+&lt;h2 id="fragmentation"&gt;&lt;a class="anchor" href="#fragmentation"&gt;#&lt;/a&gt;
+Fragmentation&lt;/h2&gt;
+&lt;p&gt;A perfectly coalesced free list doesn't solve all of our problems. The following
+example shows a longer sequence of allocations. Have a look at the state memory
+is in at the end.&lt;/p&gt;
+&lt;div class="memory" bytes="32"&gt;
+  &lt;allocator path="/js/allocators/freelist.js"&gt;
+    &lt;options coalesce=true&gt;
+  &lt;/allocator&gt;
+  &lt;malloc id=1 size=1&gt;&lt;/malloc&gt;
+  &lt;malloc id=2 size=2&gt;&lt;/malloc&gt;
+  &lt;free id=1&gt;&lt;/free&gt;
+  &lt;malloc id=3 size=2&gt;&lt;/malloc&gt;
+  &lt;malloc id=4 size=3&gt;&lt;/malloc&gt;
+  &lt;free id=3&gt;&lt;/free&gt;
+  &lt;malloc id=5 size=3&gt;&lt;/malloc&gt;
+  &lt;malloc id=6 size=4&gt;&lt;/malloc&gt;
+  &lt;free id=5&gt;&lt;/free&gt;
+  &lt;malloc id=7 size=4&gt;&lt;/malloc&gt;
+  &lt;malloc id=8 size=5&gt;&lt;/malloc&gt;
+  &lt;free id=7&gt;&lt;/free&gt;
+  &lt;free id=2&gt;&lt;/free&gt;
+  &lt;free id=4&gt;&lt;/free&gt;
+  &lt;malloc id=9 size=4&gt;&lt;/malloc&gt;
+  &lt;malloc id=10 size=4&gt;&lt;/malloc&gt;
+  &lt;malloc id=11 size=4&gt;&lt;/malloc&gt;
+  &lt;malloc id=12 size=5&gt;&lt;/malloc&gt;
+&lt;/div&gt;
+&lt;p&gt;We end this sequence with 6 of our 32 bytes free, but they're split into 2
+blocks of 3 bytes. If we had to service a &lt;code&gt;malloc(6)&lt;/code&gt;, while we have enough free
+memory in theory, we wouldn't be able to.  This is called "fragmentation."&lt;/p&gt;
+&lt;blockquote class="haskie"&gt;
+&lt;img src="/images/haskie-confused-200px.png" /&gt;
+&lt;p&gt;
+  Couldn't we rearrange the memory to get a block of 6 contiguous bytes? Some
+  sort of defragmentation process?
+&lt;/p&gt;
+&lt;/blockquote&gt;
+&lt;p&gt;Sadly not. Remember earlier we talked about how the return value of &lt;code&gt;malloc&lt;/code&gt; is
+the address of a byte in memory? Moving allocations won't change the pointers we
+have already returned from &lt;code&gt;malloc&lt;/code&gt;. We would change the value those pointers
+are pointed at, effectively breaking them. This is one of the downsides of the
+&lt;code&gt;malloc&lt;/code&gt;/&lt;code&gt;free&lt;/code&gt; API.&lt;/p&gt;
+&lt;p&gt;If we can't move allocations after creating them, we need to be more careful
+about where we put them to begin with.&lt;/p&gt;
+&lt;p&gt;One way to combat fragmentation is, confusingly, to overallocate.  If we always
+allocate a minimum of 4 bytes, even when the request is for 1 byte, watch what
+happens. This is the exact same sequence of allocations as above.&lt;/p&gt;
+&lt;div class="memory" bytes="32"&gt;
+  &lt;allocator path="/js/allocators/freelist.js"&gt;
+    &lt;options coalesce=true minsize=4&gt;
+  &lt;/allocator&gt;
+  &lt;malloc id=1 size=1&gt;&lt;/malloc&gt;
+  &lt;malloc id=2 size=2&gt;&lt;/malloc&gt;
+  &lt;free id=1&gt;&lt;/free&gt;
+  &lt;malloc id=3 size=2&gt;&lt;/malloc&gt;
+  &lt;malloc id=4 size=3&gt;&lt;/malloc&gt;
+  &lt;free id=3&gt;&lt;/free&gt;
+  &lt;malloc id=5 size=3&gt;&lt;/malloc&gt;
+  &lt;malloc id=6 size=4&gt;&lt;/malloc&gt;
+  &lt;free id=5&gt;&lt;/free&gt;
+  &lt;malloc id=7 size=4&gt;&lt;/malloc&gt;
+  &lt;malloc id=8 size=5&gt;&lt;/malloc&gt;
+  &lt;free id=7&gt;&lt;/free&gt;
+  &lt;free id=2&gt;&lt;/free&gt;
+  &lt;free id=4&gt;&lt;/free&gt;
+  &lt;malloc id=9 size=4&gt;&lt;/malloc&gt;
+  &lt;malloc id=10 size=4&gt;&lt;/malloc&gt;
+  &lt;malloc id=11 size=4&gt;&lt;/malloc&gt;
+  &lt;malloc id=12 size=5&gt;&lt;/malloc&gt;
+&lt;/div&gt;
+&lt;p&gt;Now we can service a &lt;code&gt;malloc(6)&lt;/code&gt;. It's worth keeping in mind that this is just
+one example. Programs will call &lt;code&gt;malloc&lt;/code&gt; and &lt;code&gt;free&lt;/code&gt; in very different patterns
+depending on what they do, which makes it challenging to design an allocator
+that always performs well.&lt;/p&gt;
+&lt;blockquote class="haskie"&gt;
+&lt;img src="/images/haskie-confused-200px.png" /&gt;
+&lt;p&gt;
+  After the first &lt;code&gt;malloc&lt;/code&gt;, the start of the free list seems to fall
+  out of sync with allocated memory. Is that a bug in the visualisation?
+&lt;/p&gt;
+&lt;/blockquote&gt;
+&lt;p&gt;No, that's a side-effect of overallocating.  The visualisation shows "true"
+memory use, whereas the free list is updated from the allocator's perspective.
+So when the first &lt;code&gt;malloc&lt;/code&gt; happens, 1 byte of memory is allocated but the free
+list entry is moved forward 4 bytes. We trade some wasted space in return for
+less fragmentation.&lt;/p&gt;
+&lt;p&gt;It's worth noting that this unused space that results from overallocation is
+another form of fragmentation. It's memory that cannot be used until the
+allocation that created it is freed. As a result, we wouldn't want to go too
+wild with overallocation. If our program only ever allocated 1 byte at a time,
+for example, we'd be wasting 75% of all memory.&lt;/p&gt;
+&lt;p&gt;Another way to combat fragmentation is to segment memory into a space for small
+allocations and a space for big ones. In this next visualisation we start with
+two free lists. The lighter grey one is for allocations 3 bytes or smaller,
+and the darker grey one is for allocations 4 bytes or larger. Again, this is
+the exact same sequence of allocations as before.&lt;/p&gt;
+&lt;div id="segmented-1" class="memory" bytes=32&gt;
+  &lt;allocator path="/js/allocators/segmented-freelist.js"&gt;
+    &lt;options
+      coalesce=true
+      smallfreelistthreshold=3
+      smallfreelistsize=6&gt;
+    &lt;/options&gt;
+  &lt;/allocator&gt;
+  &lt;malloc id=1 size=1&gt;&lt;/malloc&gt;
+  &lt;malloc id=2 size=2&gt;&lt;/malloc&gt;
+  &lt;free id=1&gt;&lt;/free&gt;
+  &lt;malloc id=3 size=2&gt;&lt;/malloc&gt;
+  &lt;malloc id=4 size=3&gt;&lt;/malloc&gt;
+  &lt;free id=3&gt;&lt;/free&gt;
+  &lt;malloc id=5 size=3&gt;&lt;/malloc&gt;
+  &lt;malloc id=6 size=4&gt;&lt;/malloc&gt;
+  &lt;free id=5&gt;&lt;/free&gt;
+  &lt;malloc id=7 size=4&gt;&lt;/malloc&gt;
+  &lt;malloc id=8 size=5&gt;&lt;/malloc&gt;
+  &lt;free id=7&gt;&lt;/free&gt;
+  &lt;free id=2&gt;&lt;/free&gt;
+  &lt;free id=4&gt;&lt;/free&gt;
+  &lt;malloc id=9 size=4&gt;&lt;/malloc&gt;
+  &lt;malloc id=10 size=4&gt;&lt;/malloc&gt;
+  &lt;malloc id=11 size=4&gt;&lt;/malloc&gt;
+  &lt;malloc id=12 size=5&gt;&lt;/malloc&gt;
+&lt;/div&gt;
+&lt;p&gt;Nice! This also reduces fragmentation. If we're strictly only allowing
+allocations of 3 bytes or less in the first segment, though, then we can't
+service that &lt;code&gt;malloc(6)&lt;/code&gt;. The trade-off here is that reserving a segment of
+memory for smaller allocations gives you less memory to work with for bigger
+ones.&lt;/p&gt;
+&lt;blockquote class="haskie"&gt;
+&lt;img src="/images/haskie-triumphant-200px.png" /&gt;
+&lt;p&gt;
+  Hey, &lt;a simulation="segmented-1" position=4&gt;the first allocation in the dark
+  grey free list&lt;/a&gt; is 3 bytes! You said this was for allocations 4 bytes and
+  up. What gives?
+&lt;/p&gt;
+&lt;/blockquote&gt;
+&lt;p&gt;Got me again. This implementation I've written will put small allocations in the
+dark grey space when the light grey space is full. It will overallocate when it
+does this, otherwise we'd end up with avoidable fragmentation in the dark grey
+space thanks to small allocations.&lt;/p&gt;
+&lt;p&gt;Allocators that split memory up based on the size of allocation are called
+"slab allocators." In practice they have many more size classes than the 2 in
+our example.&lt;/p&gt;
+&lt;h2 id="a-quick-malloc-puzzle"&gt;&lt;a class="anchor" href="#a-quick-malloc-puzzle"&gt;#&lt;/a&gt;
+A quick &lt;code&gt;malloc&lt;/code&gt; puzzle&lt;/h2&gt;
+&lt;p&gt;What happens if you &lt;code&gt;malloc(0)&lt;/code&gt;? Have a think about this before playing with
+the slider below.&lt;/p&gt;
+&lt;div class="memory" bytes=32&gt;
+  &lt;allocator path="/js/allocators/freelist.js"&gt;
+    &lt;options coalesce=true minsize=4&gt;&lt;/options&gt;
+  &lt;/allocator&gt;
+  &lt;malloc id=1 size=0&gt;&lt;/malloc&gt;
+  &lt;malloc id=2 size=0&gt;&lt;/malloc&gt;
+  &lt;malloc id=3 size=0&gt;&lt;/malloc&gt;
+  &lt;malloc id=4 size=0&gt;&lt;/malloc&gt;
+  &lt;malloc id=5 size=0&gt;&lt;/malloc&gt;
+  &lt;malloc id=6 size=0&gt;&lt;/malloc&gt;
+  &lt;malloc id=7 size=0&gt;&lt;/malloc&gt;
+  &lt;malloc id=8 size=0&gt;&lt;/malloc&gt;
+&lt;/div&gt;
+&lt;p&gt;This is using our free list implementation that mandates a minimum size of 4
+bytes for allocations. All memory gets allocated, but none is actually used.
+Do you think this is correct behaviour?&lt;/p&gt;
+&lt;p&gt;It turns out that what happens when you &lt;code&gt;malloc(0)&lt;/code&gt; differs between
+implementations. Some of them behave as above, allocating space they probably
+didn't have to. Others will return what's called a "null pointer", a special
+pointer that will crash your program if you try to read or write the memory it
+points to.  Others pick one specific location in memory and return that same
+location for all calls to &lt;code&gt;malloc(0)&lt;/code&gt;, regardless how many times it is called.&lt;/p&gt;
+&lt;p&gt;Moral of the story? Don't &lt;code&gt;malloc(0)&lt;/code&gt;.&lt;/p&gt;
+&lt;h2 id="inline-bookkeeping"&gt;&lt;a class="anchor" href="#inline-bookkeeping"&gt;#&lt;/a&gt;
+Inline bookkeeping&lt;/h2&gt;
+&lt;p&gt;Remember earlier on when you asked about where allocation list and free list
+information gets stored, and I gave an unsatisfying answer about how it's
+stored in some other area of memory we've reserved for ourselves?&lt;/p&gt;
+&lt;blockquote class="haskie"&gt;
+&lt;img src="/images/haskie-concerned-200px.png" /&gt;
+&lt;p&gt;
+  Yes...
+&lt;/p&gt;
+&lt;/blockquote&gt;
+&lt;p&gt;This isn't the only way to do it. Lots of allocators store information right
+next to the blocks of memory they relate to. Have a look at this.&lt;/p&gt;
+&lt;div class="memory" bytes=32 slider=false&gt;
+  &lt;allocator path="/js/allocators/inline.js"&gt;
+  &lt;/allocator&gt;
+&lt;/div&gt;
+&lt;p&gt;What we have here is memory with no allocations, but free list information
+stored inline in that memory. Each block of memory, free or used, gets 3
+additional bytes of bookkeeping information. If &lt;code&gt;address&lt;/code&gt; is the address of the
+first byte of the allocation, here's the layout of a block:&lt;/p&gt;
+&lt;ol&gt;
+&lt;li&gt;&lt;code&gt;address + 0&lt;/code&gt; is the &lt;span class="size"&gt;size&lt;/span&gt; of the block&lt;/li&gt;
+&lt;li&gt;&lt;code&gt;address + 1&lt;/code&gt; is whether the block is &lt;span class="free"&gt;free (1)&lt;/span&gt; or &lt;span class="allocated"&gt;used (2)&lt;/span&gt;&lt;/li&gt;
+&lt;li&gt;&lt;code&gt;address + 2&lt;/code&gt; is where the &lt;span class="usable-memory"&gt;usable memory&lt;/span&gt; starts&lt;/li&gt;
+&lt;li&gt;&lt;code&gt;address + 2 + size&lt;/code&gt; -- the &lt;span class="size"&gt;size&lt;/span&gt; of the block again&lt;/li&gt;
+&lt;/ol&gt;
+&lt;p&gt;So in this above example, the byte at &lt;code&gt;0x0&lt;/code&gt; is storing the value 29. This means
+it's a block containing 29 bytes of memory. The value 1 at &lt;code&gt;0x1&lt;/code&gt; indicates that
+the block is free memory.&lt;/p&gt;
+&lt;blockquote class="haskie"&gt;
+&lt;img src="/images/haskie-concerned-200px.png" /&gt;
+&lt;p&gt;
+  We store the &lt;span class="size"&gt;size&lt;/span&gt; twice? Isn't that wasteful?
+&lt;/p&gt;
+&lt;/blockquote&gt;
+&lt;p&gt;It seems wasteful at first, but it is necessary if we want to do any form of
+coalescing. Let's take a look at an example.&lt;/p&gt;
+&lt;div class="memory" bytes=32 slider=false&gt;
+  &lt;allocator path="/js/allocators/inline.js"&gt;
+  &lt;/allocator&gt;
+  &lt;malloc id=1 size=4&gt;&lt;/malloc&gt;
+&lt;/div&gt;
+&lt;p&gt;Here we've allocated 4 bytes of memory. To do this, our &lt;code&gt;malloc&lt;/code&gt; implementation
+starts at the beginning of memory and checks to see if the block there is used.
+It knows that at &lt;code&gt;address + 1&lt;/code&gt; it will find either a 1 or a 2. If it finds a
+1, it can check the value at &lt;code&gt;address&lt;/code&gt; for how big the block is. If it is big
+enough, it can allocate into it. If it's not big enough, it knows it can add
+the value it finds in &lt;code&gt;address&lt;/code&gt; to &lt;code&gt;address&lt;/code&gt; to get to the start of the next
+block of memory.&lt;/p&gt;
+&lt;p&gt;This has resulted in the creation of a used block (notice the 2 stored in the
+2nd byte), and it has pushed start of the free block forward by 7 bytes. Let's
+do the same again and allocate another 4 bytes.&lt;/p&gt;
+&lt;div class="memory" bytes=32 slider=false&gt;
+  &lt;allocator path="/js/allocators/inline.js"&gt;
+  &lt;/allocator&gt;
+  &lt;malloc id=1 size=4&gt;&lt;/malloc&gt;
+  &lt;malloc id=2 size=4&gt;&lt;/malloc&gt;
+&lt;/div&gt;
+&lt;p&gt;Next, let's &lt;code&gt;free&lt;/code&gt; our first &lt;code&gt;malloc(4)&lt;/code&gt;. The implementation of &lt;code&gt;free&lt;/code&gt; is where
+storing information inline starts to shine. In our previous allocators, we had
+to search the allocation list to know the size of the block being &lt;code&gt;free&lt;/code&gt;d.  Now
+we know we'll find it at &lt;code&gt;address&lt;/code&gt;. What's better than that is that for this
+&lt;code&gt;free&lt;/code&gt;, we don't even need to know how big the allocation is. We can just set
+&lt;code&gt;address + 1&lt;/code&gt; to 1!&lt;/p&gt;
+&lt;div class="memory" bytes=32 slider=false&gt;
+  &lt;allocator path="/js/allocators/inline.js"&gt;
+  &lt;/allocator&gt;
+  &lt;malloc id=1 size=4&gt;&lt;/malloc&gt;
+  &lt;malloc id=2 size=4&gt;&lt;/malloc&gt;
+  &lt;free id=1&gt;&lt;/free&gt;
+&lt;/div&gt;
+&lt;p&gt;How great is that? Simple, fast.&lt;/p&gt;
+&lt;p&gt;What if we wanted to free the 2nd block of used memory? We know that we want to
+coalesce to avoid fragmentation, but how do we do that? This is where the
+seemingly wasteful bookkeeping comes into play.&lt;/p&gt;
+&lt;p&gt;When we coalesce, we check to see the state of the blocks immediately before and
+immediately after the block we're &lt;code&gt;free&lt;/code&gt;ing. We know that we can get to the next
+block by adding the value at &lt;code&gt;address&lt;/code&gt; to &lt;code&gt;address&lt;/code&gt;, but how do we get to the
+previous block? We take the value at &lt;code&gt;address - 1&lt;/code&gt; and &lt;em&gt;subtract&lt;/em&gt; that from
+&lt;code&gt;address&lt;/code&gt;. Without this duplicated size information at the end of the block, it
+would be impossible to find the previous block and impossible to coalesce
+properly.&lt;/p&gt;
+&lt;div class="memory" bytes=32&gt;
+  &lt;allocator path="/js/allocators/inline.js"&gt;
+  &lt;/allocator&gt;
+  &lt;malloc id=1 size=4&gt;&lt;/malloc&gt;
+  &lt;malloc id=2 size=4&gt;&lt;/malloc&gt;
+  &lt;free id=1&gt;&lt;/free&gt;
+  &lt;free id=2&gt;&lt;/free&gt;
+&lt;/div&gt;
+&lt;p&gt;Allocators that store bookkeeping information like this alongside allocations
+are called "boundary tag allocators."&lt;/p&gt;
+&lt;blockquote class="haskie"&gt;
+&lt;img src="/images/haskie-concerned-200px.png" /&gt;
+&lt;p&gt;
+  What's stopping a program from modifying the bookkeeping information? Wouldn't
+  that completely break memory?
+&lt;/p&gt;
+&lt;/blockquote&gt;
+&lt;p&gt;Surprisingly, nothing truly prevents this. We rely heavily, as an industry, on
+the correctness of code. You might have heard of "buffer overrun" or "use after
+free" bugs before. These are when a program modifies memory past the end of an
+allocated block, or accidentally uses a block of memory after &lt;code&gt;free&lt;/code&gt;ing it.
+These are indeed catastrophic. They can result in your program immediately
+crashing, they can result in your program crashing in several minutes, hours, or
+days time. They can even result in hackers using the bug to gain access to
+systems they shouldn't have access to.&lt;/p&gt;
+&lt;p&gt;We're seeing a rise in popularity of "memory safe" languages, for example Rust.
+These languages invest a lot in making sure it's not possible to make these
+types of mistake in the first place. Exactly how they do that is outside of
+the scope of this article, but if this interests you I highly recommend giving
+Rust a try.&lt;/p&gt;
+&lt;p&gt;You might have also realised that calling &lt;code&gt;free&lt;/code&gt; on a pointer that's in the
+middle of a block of memory could also have disastrous consequences. Depending
+on what values are in memory, the allocator could be tricked into thinking it's
+&lt;code&gt;free&lt;/code&gt;ing something but what it's really doing is modifying memory it shouldn't
+be.&lt;/p&gt;
+&lt;p&gt;To get around this, some allocators inject "magic" values as part of the
+bookkeeping information. They store, say, &lt;code&gt;0x55&lt;/code&gt; at &lt;code&gt;address + 2&lt;/code&gt;.  This would
+waste an extra byte of memory per allocation, but would allow them to know when
+a mistake has been made. To reduce the impact of this, allocators often disable
+this behaviour by default and allow you to enable it only when you're debugging.&lt;/p&gt;
+&lt;h2 id="playground"&gt;&lt;a class="anchor" href="#playground"&gt;#&lt;/a&gt;
+Playground&lt;/h2&gt;
+&lt;p&gt;If you're keen to take your new found knowledge and try your hand at writing
+your own allocators, you can click &lt;a href="/allocator-playground"&gt;here&lt;/a&gt; to go to my
+allocator playground. You'll be able to write JavaScript code that implements
+the &lt;code&gt;malloc&lt;/code&gt;/&lt;code&gt;free&lt;/code&gt; API and visualise how it works!&lt;/p&gt;
+&lt;h2 id="conclusion"&gt;&lt;a class="anchor" href="#conclusion"&gt;#&lt;/a&gt;
+Conclusion&lt;/h2&gt;
+&lt;p&gt;We've covered a lot in this post, and if it has left you yearning for more you
+won't be disappointed. I've specifically avoided the topics of virtual memory,
+&lt;code&gt;brk&lt;/code&gt; vs &lt;code&gt;mmap&lt;/code&gt;, the role of CPU caches, and the endless tricks real &lt;code&gt;malloc&lt;/code&gt;
+implementations pull out of their sleeves. There's no shortage of information
+about memory allocators on the Internet, and if you've read this far you should
+be well-placed to dive in to it.&lt;/p&gt;
+&lt;p&gt;Join the discussion on &lt;a href="https://news.ycombinator.com/item?id=36029087"&gt;Hacker News&lt;/a&gt;!&lt;/p&gt;
+&lt;h3 id="acknowledgments"&gt;&lt;a class="anchor" href="#acknowledgments"&gt;#&lt;/a&gt;
+Acknowledgments&lt;/h3&gt;
+&lt;p&gt;Special thanks to the following people:&lt;/p&gt;
+&lt;ul&gt;
+&lt;li&gt;&lt;a href="https://chrisdown.name"&gt;Chris Down&lt;/a&gt; for lending me his extensive knowledge of real-world
+memory allocators.&lt;/li&gt;
+&lt;li&gt;&lt;a href="https://zemlan.in/"&gt;Anton Verinov&lt;/a&gt; for lending me his extensive knowledge of the web,
+browser developer tools, and user experience.&lt;/li&gt;
+&lt;li&gt;Blake Becker, Matt Kaspar, Krista Horn, Jason Peddle, and
+&lt;a href="https://joshwcomeau.com"&gt;Josh W. Comeau&lt;/a&gt; for their insight and constructive
+reviews.&lt;/li&gt;
+&lt;/ul&gt;
+&lt;!--
+## Real-world performance
+
+By making use of boundary tags, we saw that `free` can be made really fast.
+No list traversals required, just inspection and manipulation of a few bytes
+of bookkeeping information. But `malloc` still has to traverse the list of
+all blocks, free or used, to find one that can fit the current request.
+
+How do we make `malloc` fast?
+
+What we're asking here isn't for the fastest possible `malloc` implementation.
+We've already seen that, at the very start of the article. The `malloc` that
+can't `free`. That's not what we want. We want a `malloc` that gets close to
+that speed, without creating a fragmented heap. We want high throughput, low
+fragmentation.
+
+There's no one-size-fits-all solution here, so I will list a few ways real-world
+allocators try to achieve this.
+
+### Segmenting/binning memory
+
+We touched on this earlier, but a common approach to balancing throughput and
+fragmentation is by splitting memory up in to segments reserved for allocations
+of a specific size. In our example we had 2 segments: 1 for small allocations
+and 1 for big allocations.
+
+A `malloc` implementation called `dlmalloc` ("Doug Lea's `malloc`") splits
+memory up in to 64(!) different size classes that it calls "bins." Each size
+class has a linked list of free blocks of memory associated with it. These lists
+begin empty, and as memory is `free`d it gets added to the appropriate list.
+
+When there are no readily available free blocks in these bins, memory is
+allocated from what `dlmalloc` refers to as "the wilderness." This is just the
+free memory available to the program at the very beginning. `dlmalloc` takes
+from here when it needs to, but prefers to look in the size class bins first. It
+only takes from the wilderness when it can't take from anywhere else.
+
+If memory isn't available in the appropriate bin, but is available in the next
+bin up, `dlmalloc` will take a larger block, split it in 2, allocate one, and
+put the other in the appropriate bin for later use. Likewise, when `free`ing,
+`dlmalloc` will coalesce blocks with their neighbours and return the resulting
+block to the largest bin it can. These techniques help reduce fragmentation.
+
+### Caching
+
+Another cool trick `dlmalloc` uses is called the "designated victim." When
+`dlmalloc` takes a block from a bin larger than the current allocation, it
+caches the remainder block to be used as the preferred location for the next
+allocation that does not perfectly match to a bin size.
+
+`dlmalloc` also caches whether or not bins have blocks in them using a bitmap it
+calls the "binmap." This is a 32 bit value where each bit represents the state
+of a given bin. If it's a 1, the bin has blocks ready to use in it. If it's 0,
+it doesn't. This makes finding an appropriate bin really, really fast.
+
+`phkmalloc`, the spiritual predecessor to `dlmalloc`, maintains a counter of how
+many blocks are free in a given "arena" or memory. `phkmalloc` works on a tiered
+system, putting smaller blocks inside of larger blocks, in order to be able to
+return the larger blocks back to the operating system when they have been
+completely freed. It calls these larger blocks "arenas."
+
+### Locality
+
+I've not touched on this topic at all, but it is very important especially in
+more modern `malloc` implementations. Without going in to too much detail,
+memory access involves a hierarchy of caches. Retrieving a value from memory is
+slow, so between your CPU and your memory sit layers of caches.  Each layer
+closer to the CPU is faster but smaller. These caches can range in size from
+100MB at the largest layer to a few dozen kilobytes at the smallest. It's common
+for CPUs to have 3 layers.
+
+When you fetch a value from memory, your CPU will actually fetch more than
+needed. It does this because it is likely that memory close together is needed
+at the same time. This is called "spatial locality." Hard drives do the same
+thing.
+
+`malloc` is uniquely positioned to take advantage of this fact. If your `malloc`
+implementation intentionally places blocks close to blocks that were `malloc`ed
+around the same time, it will increase the chance that a single fetch from
+memory will hit multiple blocks of soon-needed memory.
+
+Locality is also an argument in favour of storing your bookkeeping information
+separate to allocated memory. The more tightly packed a program's in-use memory
+is, the more likely it is to get cached together. Also, if you need to traverse
+lists to find free blocks, and your list traversal works using boundary tags,
+you will be accessing memory that is unlikely to be used.  These accesses get
+cached, evicting potentially useful memory in the process.
+
+This is why `dlmalloc` maintains its "binmap" separate from the bins themselves.
+You can check the status of all bins with minimal cache disturbance.
+
+### Multithreading
+
+The last topic we're going to talk about is multithreading. It's very common for
+computers in 2023 to have many CPU cores, but this wasn't always the case. For
+example, when `phkmalloc` was written there was no consideration for
+multithreading in the implementation. `dlmalloc` is not thread-safe by default,
+but comes with an option to make it thread-safe at a huge performance cost.
+
+One of the first `malloc` implementations to optimise for multithreaded
+use-cases was `jemalloc` ("Jason Evans `malloc`"). Written around 2006,
+`jemalloc` makes the observation that is 2 CPU cores try to access the same
+area of the CPU cache, they will "fight" over the "ownership" of that area of
+the cache.
+
+What does this mean?
+
+CPU cache is split in to "lines." These lines are typically 64 bytes in size,
+and represent a 64 byte chunk of memory. Each CPU core has its own dedicated set
+of caches, so the same 64 byte chunk of memory could potentially be cached on
+multiple cores.
+
+When 2 threads running on 2 different cores try to access the same line of
+cache, by trying to access the same area of memory and finding it already
+cached, it can become a problem. If they both write to it, that will trigger the
+cache to be synchronised across CPU cores, and this can be really slow. Without
+this synchronisation, the same 64 byte region of memory could appear to hold
+different values depending on what core you see it from.
+
+To avoid this, `jemalloc` splits memory up in to 2MB chunks, and each chunk can
+only be accessed by 1 thread. Giving threads unique ownership of parts of memory
+guarantees that you will avoid this slow cache synchronisation. It also gives
+your `malloc` implementation thread-safety, because you know that all threads
+will be operating on memory they have sole ownership of.
+--&gt;
+</content>
+            
+        </entry>
+    
+    
+        <entry xml:lang="en">
+            <title>Load Balancing</title>
+            <published>2023-04-10T00:00:00+00:00</published>
+            <updated>2023-04-10T00:00:00+00:00</updated>
+            <author>
+            <name>Unknown</name>
+            </author>
+            <link rel="alternate" href="https://samwho.dev/load-balancing/" type="text/html"/>
+            <id>https://samwho.dev/load-balancing/</id>
+            
+            <content type="html">&lt;script type="module" src="/js/load-balancers.js"&gt;&lt;/script&gt;
+&lt;style&gt;
+.simulation {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 2.5em;
+}
+
+.load-balancer {
+    color: black;
+    font-weight: bold;
+}
+
+.request {
+    color: #04BF8A;
+    font-weight: bold;
+}
+
+.server {
+    color: #999999;
+    font-weight: bold;
+}
+
+.dropped {
+    color: red;
+    font-weight: bold;
+}
+
+.lds-dual-ring {
+  display: inline-block;
+  width: 80px;
+  height: 80px;
+}
+.lds-dual-ring:after {
+  content: " ";
+  display: block;
+  width: 64px;
+  height: 64px;
+  margin: 8px;
+  border-radius: 50%;
+  border: 6px solid #000;
+  border-color: #000 transparent #000 transparent;
+  animation: lds-dual-ring 1.2s linear infinite;
+}
+@keyframes lds-dual-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+&lt;/style&gt;
+&lt;p&gt;Past a certain point, web applications outgrow a single server deployment.
+Companies either want to increase their availability, scalability, or both! To
+do this, they deploy their application across multiple servers with a load
+balancer in front to distribute incoming requests. Big companies may need
+thousands of servers running their web application to handle the load.&lt;/p&gt;
+&lt;p&gt;In this post we're going to focus on the ways that a single load balancer might
+distribute HTTP requests to a set of servers. We'll start from the bottom and
+work our way up to modern load balancing algorithms.&lt;/p&gt;
+&lt;h2 id="visualising-the-problem"&gt;&lt;a class="anchor" href="#visualising-the-problem"&gt;#&lt;/a&gt;
+Visualising the problem&lt;/h2&gt;
+&lt;p&gt;Let's start at the beginning: a single &lt;span class="load-balancer"&gt;load
+balancer&lt;/span&gt; sending &lt;span class="request"&gt;requests&lt;/span&gt; to a single &lt;span
+class="server"&gt;server&lt;/span&gt;. &lt;span class="request"&gt;Requests&lt;/span&gt; are being
+sent at a rate of 1 request per second (RPS), and each &lt;span
+class="request"&gt;request&lt;/span&gt; reduces in size as the &lt;span
+class="server"&gt;server&lt;/span&gt; processes it.&lt;/p&gt;
+&lt;div id="1" class="simulation" style="height: 200px"&gt;
+    &lt;div class="lds-dual-ring"&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;p&gt;For a lot of websites, this setup works just fine. Modern &lt;span
+class="server"&gt;servers&lt;/span&gt; are powerful and can handle a lot of &lt;span
+class="request"&gt;requests&lt;/span&gt;. But what happens when they can't keep up?&lt;/p&gt;
+&lt;div id="2" class="simulation" style="height: 200px"&gt;
+    &lt;div class="lds-dual-ring"&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;p&gt;Here we see that a rate of 3 RPS causes some &lt;span
+class="request"&gt;requests&lt;/span&gt; to get &lt;span class="dropped"&gt;dropped&lt;/span&gt;. If
+a &lt;span class="request"&gt;request&lt;/span&gt; arrives at the &lt;span
+class="server"&gt;server&lt;/span&gt; while another &lt;span class="request"&gt;request&lt;/span&gt;
+is being processed, the &lt;span class="server"&gt;server&lt;/span&gt; will &lt;span
+class="dropped"&gt;drop&lt;/span&gt; it.  This will result in an error being shown to the
+user and is something we want to avoid. We can add another &lt;span
+class="server"&gt;server&lt;/span&gt; to our &lt;span class="load-balancer"&gt;load
+balancer&lt;/span&gt; to fix this.&lt;/p&gt;
+&lt;div id="3" class="simulation" style="height: 200px"&gt;
+    &lt;div class="lds-dual-ring"&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;p&gt;No more &lt;span class="dropped"&gt;dropped&lt;/span&gt; &lt;span
+class="request"&gt;requests&lt;/span&gt;! The way our &lt;span class="load-balancer"&gt;load
+balancer&lt;/span&gt; is behaving here, sending a request to each &lt;span
+class="server"&gt;server&lt;/span&gt; in turn, is called "round robin" load balancing.
+It's one of the simplest forms of load balancing, and works well when your &lt;span
+class="server"&gt;servers&lt;/span&gt; are all equally powerful and your &lt;span
+class="request"&gt;requests&lt;/span&gt; are all equally expensive.&lt;/p&gt;
+&lt;div id="4" class="simulation" style="height: 200px"&gt;
+    &lt;div class="lds-dual-ring"&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;h2 id="when-round-robin-doesn-t-cut-it"&gt;&lt;a class="anchor" href="#when-round-robin-doesn-t-cut-it"&gt;#&lt;/a&gt;
+When round robin doesn't cut it&lt;/h2&gt;
+&lt;p&gt;In the real world, it's rare for &lt;span class="server"&gt;servers&lt;/span&gt; to be
+equally powerful and &lt;span class="request"&gt;requests&lt;/span&gt; to be equally
+expensive. Even if you use the exact same &lt;span class="server"&gt;server&lt;/span&gt;
+hardware, performance may differ. Applications may have to service many
+different types of &lt;span class="request"&gt;requests&lt;/span&gt;, and these will likely
+have different performance characteristics.&lt;/p&gt;
+&lt;p&gt;Let's see what happens when we vary &lt;span class="request"&gt;request&lt;/span&gt; cost.
+In the following simulation, &lt;span class="request"&gt;requests&lt;/span&gt; aren't
+equally expensive. You'll be able to see this by some &lt;span
+class="request"&gt;requests&lt;/span&gt; taking longer to shrink than others.&lt;/p&gt;
+&lt;div id="5" class="simulation" style="height: 200px"&gt;
+    &lt;div class="lds-dual-ring"&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;p&gt;While most &lt;span class="request"&gt;requests&lt;/span&gt; get served successfully, we do
+&lt;span class="dropped"&gt;drop&lt;/span&gt; some. One of the ways we can mitigate this is
+to have a "request queue."&lt;/p&gt;
+&lt;div id="6" class="simulation" style="height: 250px"&gt;
+    &lt;div class="lds-dual-ring"&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;p&gt;Request queues help us deal with uncertainty, but it's a trade-off. We will
+&lt;span class="dropped"&gt;drop&lt;/span&gt; fewer &lt;span class="request"&gt;requests&lt;/span&gt;,
+but at the cost of some &lt;span class="request"&gt;requests&lt;/span&gt; having a higher
+latency. If you watch the above simulation long enough, you might notice the
+&lt;span class="request"&gt;requests&lt;/span&gt; subtly changing colour. The longer they go
+without being served, the more their colour will change. You'll also notice that
+thanks to the &lt;span class="request"&gt;request&lt;/span&gt; cost variance, &lt;span
+class="server"&gt;servers&lt;/span&gt; start to exhibit an imbalance. Queues will get
+backed up on &lt;span class="server"&gt;servers&lt;/span&gt; that get unlucky and have to
+serve multiple expensive &lt;span class="request"&gt;requests&lt;/span&gt; in a row. If
+a queue is full, we will &lt;span class="dropped"&gt;drop&lt;/span&gt; the &lt;span
+class="request"&gt;request&lt;/span&gt;.&lt;/p&gt;
+&lt;p&gt;Everything said above applies equally to &lt;span class="server"&gt;servers&lt;/span&gt;
+that vary in power. In the next simulation we also vary the power of each
+&lt;span class="server"&gt;server&lt;/span&gt;, which is represented visually with a darker
+shade of grey.&lt;/p&gt;
+&lt;div id="7" class="simulation" style="height: 250px"&gt;
+    &lt;div class="lds-dual-ring"&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;p&gt;The &lt;span class="server"&gt;servers&lt;/span&gt; are given a random power value, but odds
+are some are less powerful than others and quickly start to &lt;span
+class="dropped"&gt;drop&lt;/span&gt; &lt;span class="request"&gt;requests&lt;/span&gt;. At the same
+time, the more powerful &lt;span class="server"&gt;servers&lt;/span&gt; sit idle most of the
+time. This scenario shows the key weakness of round robin: variance.&lt;/p&gt;
+&lt;p&gt;Despite its flaws, however, round robin is still the default HTTP load balancing
+method for &lt;a href="https://nginx.org/en/docs/http/load_balancing.html"&gt;nginx&lt;/a&gt;.&lt;/p&gt;
+&lt;h2 id="improving-on-round-robin"&gt;&lt;a class="anchor" href="#improving-on-round-robin"&gt;#&lt;/a&gt;
+Improving on round robin&lt;/h2&gt;
+&lt;p&gt;It's possible to tweak round robin to perform better with variance. There's an
+algorithm called "weighted round robin" which involves getting humans
+to tag each &lt;span class="server"&gt;server&lt;/span&gt; with a weight that dictates how
+many &lt;span class="request"&gt;requests&lt;/span&gt; to send to it.&lt;/p&gt;
+&lt;p&gt;In this simulation, we use each &lt;span class="server"&gt;server's&lt;/span&gt; known power
+value as its weight, and we give more powerful &lt;span
+class="server"&gt;servers&lt;/span&gt; more &lt;span class="request"&gt;requests&lt;/span&gt; as we
+loop through them.&lt;/p&gt;
+&lt;div id="8" class="simulation" style="height: 250px"&gt;
+    &lt;div class="lds-dual-ring"&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;p&gt;While this handles the variance of &lt;span class="server"&gt;server&lt;/span&gt; power
+better than vanilla round robin, we still have &lt;span
+class="request"&gt;request&lt;/span&gt; variance to contend with. In practice, getting
+humans to set the weight by hand falls apart quickly. Boiling &lt;span
+class="server"&gt;server&lt;/span&gt; performance down to a single number is hard, and
+would require careful load testing with real workloads. This is rarely done, so
+another variant of weighted round robin calculates weights dynamically by using
+a proxy metric: latency.&lt;/p&gt;
+&lt;p&gt;It stands to reason that if one &lt;span class="server"&gt;server&lt;/span&gt; serves
+&lt;span class="request"&gt;requests&lt;/span&gt; 3 times faster than another &lt;span class="server"&gt;server&lt;/span&gt;, it's probably 3 times faster and should receive
+3 times more &lt;span class="request"&gt;requests&lt;/span&gt; than the other &lt;span class="server"&gt;server&lt;/span&gt;.&lt;/p&gt;
+&lt;div id="9" class="simulation" style="height: 250px"&gt;
+    &lt;div class="lds-dual-ring"&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;p&gt;I've added text to each &lt;span class="server"&gt;server&lt;/span&gt; this time that shows
+the average latency of the last 3 &lt;span class="request"&gt;requests&lt;/span&gt; served.
+We then decide whether to send 1, 2, or 3 &lt;span class="request"&gt;requests&lt;/span&gt;
+to each &lt;span class="server"&gt;server&lt;/span&gt; based on the relative differences in
+the latencies. The result is very similar to the initial weighted round robin
+simulation, but there's no need to specify the weight of each &lt;span
+class="server"&gt;server&lt;/span&gt; up front. This algorithm will also be able to adapt
+to changes in &lt;span class="server"&gt;server&lt;/span&gt; performance over time. This is
+called "dynamic weighted round robin."&lt;/p&gt;
+&lt;p&gt;Let's see how it handles a complex situation, with high variance in both &lt;span
+class="server"&gt;server&lt;/span&gt; power and &lt;span class="request"&gt;request&lt;/span&gt;
+cost. The following simulation uses randomised values, so feel free to refresh
+the page a few times to see it adapt to new variants.&lt;/p&gt;
+&lt;div id="10" class="simulation" style="height: 250px"&gt;
+    &lt;div class="lds-dual-ring"&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;h2 id="moving-away-from-round-robin"&gt;&lt;a class="anchor" href="#moving-away-from-round-robin"&gt;#&lt;/a&gt;
+Moving away from round robin&lt;/h2&gt;
+&lt;p&gt;Dynamic weighted round robin seems to account well for variance in both &lt;span
+class="server"&gt;server&lt;/span&gt; power and &lt;span class="request"&gt;request
+&lt;/span&gt; cost. But what if I told you we could do even better, and with a simpler
+algorithm?&lt;/p&gt;
+&lt;div id="11" class="simulation" style="height: 250px"&gt;
+    &lt;div class="lds-dual-ring"&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;p&gt;This is called "least connections" load balancing.&lt;/p&gt;
+&lt;p&gt;Because the &lt;span class="load-balancer"&gt;load balancer&lt;/span&gt; sits between the
+&lt;span class="server"&gt;server&lt;/span&gt; and the user, it can accurately keep track
+of how many outstanding &lt;span class="request"&gt;requests&lt;/span&gt; each &lt;span
+class="server"&gt;server&lt;/span&gt; has. Then when a new &lt;span class="request"&gt;
+request&lt;/span&gt; comes in and it's time to determine where to send it, it knows
+which &lt;span class="server"&gt;servers&lt;/span&gt; have the least work to do and
+prioritises those.&lt;/p&gt;
+&lt;p&gt;This algorithm performs extremely well regardless how much variance exists.
+It cuts through uncertainty by maintaining an accurate understanding of what
+each &lt;span class="server"&gt;server&lt;/span&gt; is doing. It also has the benefit of
+being very simple to implement.&lt;/p&gt;
+&lt;p&gt;Let's see this in action in a similarly complex simulation, the same parameters
+we gave the dynamic weighted round robin algorithm above. Again, these
+parameters are randomised within given ranges, so refresh the page to see new
+variants.&lt;/p&gt;
+&lt;div id="12" class="simulation" style="height: 250px"&gt;
+    &lt;div class="lds-dual-ring"&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;p&gt;While this algorithm is a great balance between simplicity and performance, it's
+not immune to &lt;span class="dropped"&gt;dropping&lt;/span&gt; &lt;span
+class="request"&gt;requests&lt;/span&gt;. However, what you'll notice is that the only
+time this algorithm &lt;span class="dropped"&gt;drops&lt;/span&gt; &lt;span
+class="request"&gt;requests&lt;/span&gt; is when there is literally no more queue space
+available. It will make sure all available resources are in use, and that makes
+it a great default choice for most workloads.&lt;/p&gt;
+&lt;h2 id="optimizing-for-latency"&gt;&lt;a class="anchor" href="#optimizing-for-latency"&gt;#&lt;/a&gt;
+Optimizing for latency&lt;/h2&gt;
+&lt;p&gt;Up until now I've been avoiding a crucial part of the discussion: what we're
+optimising for. Implicitly, I've been considering &lt;span
+class="dropped"&gt;dropped&lt;/span&gt; &lt;span class="request"&gt;requests&lt;/span&gt; to be
+really bad and seeking to avoid them. This is a nice goal, but it's not the
+metric we most want to optimise for in an HTTP &lt;span class="load-balancer"&gt;load
+balancer&lt;/span&gt;.&lt;/p&gt;
+&lt;p&gt;What we're often more concerned about is latency. This is measured in
+milliseconds from the moment a &lt;span class="request"&gt;request&lt;/span&gt; is created
+to the moment it has been served. When we're discussing latency in this context,
+it is common to talk about different "percentiles." For example, the 50th
+percentile (also called the "median") is defined as the millisecond value for
+which 50% of requests are below, and 50% are above.&lt;/p&gt;
+&lt;p&gt;I ran 3 simulations with identical parameters for 60 seconds and took a variety
+of measurements every second. Each simulation varied only by the load balancing
+algorithm used. Let's compare the medians for each of the 3 simulations:&lt;/p&gt;
+&lt;div id="graph-medians"&gt;&lt;/div&gt;
+&lt;p&gt;You might not have expected it, but round robin has the best median latency. If
+we weren't looking at any other data points, we'd miss the full story.  Let's
+take a look at the 95th and 99th percentiles.&lt;/p&gt;
+&lt;div id="graph-higher"&gt;&lt;/div&gt;
+&lt;p&gt;Note: there's no colour difference between the different percentiles for each
+load balancing algorithm. Higher percentiles will always be higher on the graph.&lt;/p&gt;
+&lt;p&gt;We see that round robin doesn't perform well in the higher percentiles.  How can
+it be that round robin has a great median, but bad 95th and 99th percentiles?&lt;/p&gt;
+&lt;p&gt;In round robin, the state of each &lt;span class="server"&gt;server&lt;/span&gt; isn't
+considered, so you'll get quite a lot of &lt;span class="request"&gt;requests&lt;/span&gt;
+going to &lt;span class="server"&gt;servers&lt;/span&gt; that are idle. This is how we get
+the low 50th percentile. On the flip side, we'll also happily send &lt;span
+class="request"&gt;requests&lt;/span&gt; to &lt;span class="server"&gt;servers&lt;/span&gt; that are
+overloaded, hence the bad 95th and 99th percentiles.&lt;/p&gt;
+&lt;p&gt;We can take a look at the full data in histogram form:&lt;/p&gt;
+&lt;div id="histogram-1"&gt;&lt;/div&gt;
+&lt;p&gt;I chose the parameters for these simulations to avoid &lt;span
+class="dropped"&gt;dropping&lt;/span&gt; any &lt;span class="request"&gt;requests&lt;/span&gt;. This
+guarantees we compare the same number of data points for all 3 algorithms.
+Let's run the simulations again but with an increased RPS value, designed to
+push all of the algorithms past what they can handle.  The following is a graph
+of cumulative &lt;span class="request"&gt;requests&lt;/span&gt; &lt;span
+class="dropped"&gt;dropped&lt;/span&gt; over time.&lt;/p&gt;
+&lt;div id="graph-dropped"&gt;&lt;/div&gt;
+&lt;p&gt;Least connections handles overload much better, but the cost of doing that is
+slightly higher 95th and 99th percentile latencies. Depending on your use-case,
+this might be a worthwhile trade-off.&lt;/p&gt;
+&lt;h2 id="one-last-algorithm"&gt;&lt;a class="anchor" href="#one-last-algorithm"&gt;#&lt;/a&gt;
+One last algorithm&lt;/h2&gt;
+&lt;p&gt;If we &lt;em&gt;really&lt;/em&gt; want to optimise for latency, we need an algorithm that takes
+latency into account. Wouldn't it be great if we could combine the dynamic
+weighted round robin algorithm with the least connections algorithm? The latency
+of weighted round robin and the resilience of least connections.&lt;/p&gt;
+&lt;p&gt;Turns out we're not the first people to have this thought. Below is a simulation
+using an algorithm called "peak exponentially weighted moving average" (or
+PEWMA). It's a long and complex name but hang in there, I'll break down how it
+works in a moment.&lt;/p&gt;
+&lt;div id="13" class="simulation" style="height: 250px"&gt;
+    &lt;div class="lds-dual-ring"&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;p&gt;I've set specific parameters for this simulation that are guaranteed to exhibit
+an expected behaviour. If you watch closely, you'll notice that the algorithm
+just stops sending &lt;span class="request"&gt;requests&lt;/span&gt; to the leftmost &lt;span
+class="server"&gt;server&lt;/span&gt; after a while. It does this because it figures out
+that all of the other &lt;span class="server"&gt;servers&lt;/span&gt; are faster, and
+there's no need to send &lt;span class="request"&gt;requests&lt;/span&gt; to the slowest
+one. That will just result in &lt;span class="request"&gt;requests&lt;/span&gt; with a
+higher latency.&lt;/p&gt;
+&lt;p&gt;So how does it do this? It combines techniques from dynamic weighted round robin
+with techniques from least connections, and sprinkles a little bit of its own
+magic on top.&lt;/p&gt;
+&lt;p&gt;For each &lt;span class="server"&gt;server&lt;/span&gt;, the algorithm keeps track of the
+latency from the last N &lt;span class="request"&gt;requests&lt;/span&gt;. Instead of using
+this to calculate an average, it sums the values but with an exponentially
+decreasing scale factor. This results in a value where the older a latency is,
+the less it contributes to the sum. Recent &lt;span class="request"&gt;requests&lt;/span&gt;
+influence the calculation more than old ones.&lt;/p&gt;
+&lt;p&gt;That value is then taken and multiplied by the number of open connections to the
+&lt;span class="server"&gt;server&lt;/span&gt; and the result is the value we use to choose
+which &lt;span class="server"&gt;server&lt;/span&gt; to send the next &lt;span
+class="request"&gt;request&lt;/span&gt; to. Lower is better.&lt;/p&gt;
+&lt;p&gt;So how does it compare? First let's take a look at the 50th, 95th, and 99th
+percentiles when compared against the least connections data from earlier.&lt;/p&gt;
+&lt;div id="pewma-graph"&gt;&lt;/div&gt;
+&lt;p&gt;We see a marked improvement across the board! It's far more pronounced at the
+higher percentiles, but consistently present for the median as well. Here we
+can see the same data in histogram form.&lt;/p&gt;
+&lt;div id="pewma-histogram"&gt;&lt;/div&gt;
+&lt;p&gt;How about &lt;span class="dropped"&gt;dropped&lt;/span&gt; &lt;span
+class="requests"&gt;requests&lt;/span&gt;?&lt;/p&gt;
+&lt;div id="pewma-dropped"&gt;&lt;/div&gt;
+&lt;p&gt;It starts out performing better, but over time performs worse than least
+connections. This makes sense. PEWMA is opportunistic in that it tries to get
+the best latency, and this means it may sometimes leave a &lt;span class="server"&gt;
+server&lt;/span&gt; less than fully loaded.&lt;/p&gt;
+&lt;p&gt;I want to add here that PEWMA has a lot of parameters that can be tweaked. The
+implementation I wrote for this post uses a configuration that seemed to work
+well for the situations I tested it in, but further tweaking could get you
+better results vs least connections. This is one of the downsides of PEWMA vs
+least connections: extra complexity.&lt;/p&gt;
+&lt;h2 id="conclusion"&gt;&lt;a class="anchor" href="#conclusion"&gt;#&lt;/a&gt;
+Conclusion&lt;/h2&gt;
+&lt;p&gt;I spent a long time on this post. It was difficult to balance realism against
+ease of understanding, but I feel good about where I landed. I'm hopeful that
+being able to see how these complex systems behave in practice, in ideal and
+less-than-ideal scenarios, helps you grow an intuitive understanding of when
+they would best apply to your workloads.&lt;/p&gt;
+&lt;p&gt;&lt;strong&gt;Obligatory disclaimer&lt;/strong&gt;: You must always benchmark your own workloads over
+taking advice from the Internet as gospel. My simulations here ignore some real
+life constraints (server slow start, network latency), and are set up to display
+specific properties of each algorithm. They aren't realistic benchmarks to be
+taken at face value.&lt;/p&gt;
+&lt;p&gt;To round this out, I leave you with a version of the simulation that lets you
+tweak most of the parameters in real time. Have fun!&lt;/p&gt;
+&lt;p&gt;&lt;strong&gt;EDIT&lt;/strong&gt;: &lt;em&gt;Thanks to everyone who participated in the discussions on
+&lt;a href="https://news.ycombinator.com/item?id=35588797"&gt;Hacker News&lt;/a&gt;,
+&lt;a href="https://twitter.com/samwhoo/status/1645429789107318789?s=20"&gt;Twitter&lt;/a&gt; and
+&lt;a href="https://lobste.rs/s/kydugs/load_balancing"&gt;Lobste.rs&lt;/a&gt;!&lt;/em&gt;&lt;/p&gt;
+&lt;p&gt;&lt;em&gt;You all had a tonne of great questions and I tried to answer all of them.
+Some of the common themes were about missing things, either algorithms (like
+"power of 2 choices") or downsides of algorithms covered (like how "least
+connections" handles errors from servers).&lt;/em&gt;&lt;/p&gt;
+&lt;p&gt;&lt;em&gt;I tried to strike a balance between post length and complexity of the
+simulations. I'm quite happy with where I landed, but like you I also wish I
+could have covered more. I'd love to see people taking inspiration from this
+and covering more topics in this space in a visual way. Please ping me if you
+do!&lt;/em&gt;&lt;/p&gt;
+&lt;p&gt;&lt;em&gt;The other common theme was "how did you make this?" I used
+&lt;a href="https://pixijs.com/"&gt;PixiJS&lt;/a&gt; and I'm really happy with how it turned out. It's
+my first time using this library and it was quite easy to get to grips with.
+If writing visual explanations like this are something you're interested in,
+I recommend it!&lt;/em&gt;&lt;/p&gt;
+&lt;h2 id="playground"&gt;&lt;a class="anchor" href="#playground"&gt;#&lt;/a&gt;
+Playground&lt;/h2&gt;
+&lt;div id="fin" class="simulation" style="height: 450px; margin-top: 20px"&gt;
+    &lt;div class="lds-dual-ring"&gt;&lt;/div&gt;
+&lt;/div&gt;
+</content>
+            
+        </entry>
+    
+    
+        <entry xml:lang="en">
+            <title>Practical Problems with Auto-Increment</title>
+            <published>2023-03-25T00:00:00+00:00</published>
+            <updated>2023-03-25T00:00:00+00:00</updated>
+            <author>
+            <name>Unknown</name>
+            </author>
+            <link rel="alternate" href="https://samwho.dev/blog/practical-problems-with-auto-increment/" type="text/html"/>
+            <id>https://samwho.dev/blog/practical-problems-with-auto-increment/</id>
+            
+            <content type="html">&lt;p&gt;In this post I'm going to demonstrate 2 reasons I will be avoiding
+auto-increment fields in Postgres and MySQL in future. I'm going to prefer using
+UUID fields unless I have a &lt;em&gt;very&lt;/em&gt; good reason not to.&lt;/p&gt;
+&lt;h2 id="mysql-8-0-auto-increment-id-re-use"&gt;&lt;a class="anchor" href="#mysql-8-0-auto-increment-id-re-use"&gt;#&lt;/a&gt;
+MySQL &amp;lt;8.0 auto-increment ID re-use&lt;/h2&gt;
+&lt;p&gt;If you're running an older version of MySQL, it's possible for auto-incrementing
+IDs to get re-used. Let's see this in action.&lt;/p&gt;
+&lt;pre data-lang="txt" style="background-color:#2e3440;color:#d8dee9;" class="language-txt "&gt;&lt;code class="language-txt" data-lang="txt"&gt;&lt;span&gt;$ docker volume create mysql-data
+&lt;/span&gt;&lt;span&gt;$ docker run --platform linux/amd64 -e MYSQL_ROOT_PASSWORD=my-secret-pw -p 3306:3306 -v mysql-data:/var/lib/mysql mysql:5.7
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;This gets us a Docker container of MySQL 5.7 running, attached to a volume that
+will persist the data between runs of this container. Next let's get a simple
+schema we can work with:&lt;/p&gt;
+&lt;pre data-lang="txt" style="background-color:#2e3440;color:#d8dee9;" class="language-txt "&gt;&lt;code class="language-txt" data-lang="txt"&gt;&lt;span&gt;$ docker run -it --rm --network host --platform linux/amd64 mysql:5.7 mysql -h 127.0.0.1 -P 3306 -u root -p
+&lt;/span&gt;&lt;span&gt;mysql&amp;gt; CREATE DATABASE my_database;
+&lt;/span&gt;&lt;span&gt;Query OK, 1 row affected (0.01 sec)
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span&gt;mysql&amp;gt; USE my_database;
+&lt;/span&gt;&lt;span&gt;Database changed
+&lt;/span&gt;&lt;span&gt;mysql&amp;gt; CREATE TABLE my_table (
+&lt;/span&gt;&lt;span&gt;    -&amp;gt; ID INT AUTO_INCREMENT PRIMARY KEY
+&lt;/span&gt;&lt;span&gt;    -&amp;gt; );
+&lt;/span&gt;&lt;span&gt;Query OK, 0 rows affected (0.02 sec)
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;Now let's insert a couple of rows.&lt;/p&gt;
+&lt;pre data-lang="txt" style="background-color:#2e3440;color:#d8dee9;" class="language-txt "&gt;&lt;code class="language-txt" data-lang="txt"&gt;&lt;span&gt;mysql&amp;gt; INSERT INTO my_table () VALUES ();
+&lt;/span&gt;&lt;span&gt;Query OK, 1 row affected (0.03 sec)
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span&gt;mysql&amp;gt; INSERT INTO my_table () VALUES ();
+&lt;/span&gt;&lt;span&gt;Query OK, 1 row affected (0.01 sec)
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span&gt;mysql&amp;gt; INSERT INTO my_table () VALUES ();
+&lt;/span&gt;&lt;span&gt;Query OK, 1 row affected (0.01 sec)
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span&gt;mysql&amp;gt; SELECT * FROM my_table;
+&lt;/span&gt;&lt;span&gt;+----+
+&lt;/span&gt;&lt;span&gt;| ID |
+&lt;/span&gt;&lt;span&gt;+----+
+&lt;/span&gt;&lt;span&gt;|  1 |
+&lt;/span&gt;&lt;span&gt;|  2 |
+&lt;/span&gt;&lt;span&gt;|  3 |
+&lt;/span&gt;&lt;span&gt;+----+
+&lt;/span&gt;&lt;span&gt;3 rows in set (0.01 sec)
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;So far so good. We can restart the MySQL server and run the same SELECT
+statement again and get the same result.&lt;/p&gt;
+&lt;p&gt;Let's delete a row.&lt;/p&gt;
+&lt;pre data-lang="txt" style="background-color:#2e3440;color:#d8dee9;" class="language-txt "&gt;&lt;code class="language-txt" data-lang="txt"&gt;&lt;span&gt;mysql&amp;gt; DELETE FROM my_table WHERE ID=3;
+&lt;/span&gt;&lt;span&gt;Query OK, 1 row affected (0.03 sec)
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span&gt;mysql&amp;gt; SELECT * FROM my_table;
+&lt;/span&gt;&lt;span&gt;+----+
+&lt;/span&gt;&lt;span&gt;| ID |
+&lt;/span&gt;&lt;span&gt;+----+
+&lt;/span&gt;&lt;span&gt;|  1 |
+&lt;/span&gt;&lt;span&gt;|  2 |
+&lt;/span&gt;&lt;span&gt;+----+
+&lt;/span&gt;&lt;span&gt;2 rows in set (0.00 sec)
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;Let's insert a new row to make sure the ID 3 doesn't get reused.&lt;/p&gt;
+&lt;pre data-lang="txt" style="background-color:#2e3440;color:#d8dee9;" class="language-txt "&gt;&lt;code class="language-txt" data-lang="txt"&gt;&lt;span&gt;mysql&amp;gt; INSERT INTO my_table () VALUES ();
+&lt;/span&gt;&lt;span&gt;Query OK, 1 row affected (0.02 sec)
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span&gt;mysql&amp;gt; SELECT * FROM my_table;
+&lt;/span&gt;&lt;span&gt;+----+
+&lt;/span&gt;&lt;span&gt;| ID |
+&lt;/span&gt;&lt;span&gt;+----+
+&lt;/span&gt;&lt;span&gt;|  1 |
+&lt;/span&gt;&lt;span&gt;|  2 |
+&lt;/span&gt;&lt;span&gt;|  4 |
+&lt;/span&gt;&lt;span&gt;+----+
+&lt;/span&gt;&lt;span&gt;3 rows in set (0.00 sec)
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;Perfect. Let's delete that latest row, restart the server, and then insert
+a new row.&lt;/p&gt;
+&lt;pre data-lang="txt" style="background-color:#2e3440;color:#d8dee9;" class="language-txt "&gt;&lt;code class="language-txt" data-lang="txt"&gt;&lt;span&gt;mysql&amp;gt; DELETE FROM my_table WHERE ID=4;
+&lt;/span&gt;&lt;span&gt;Query OK, 1 row affected (0.01 sec)
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span&gt;mysql&amp;gt; SELECT * FROM my_table;
+&lt;/span&gt;&lt;span&gt;ERROR 2013 (HY000): Lost connection to MySQL server during query
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span&gt;$ docker run -it --rm --network host --platform linux/amd64 mysql:5.7 mysql -h 127.0.0.1 -P 3306 -u root -p
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span&gt;mysql&amp;gt; USE my_database;
+&lt;/span&gt;&lt;span&gt;Database changed
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span&gt;mysql&amp;gt; SELECT * FROM my_table;
+&lt;/span&gt;&lt;span&gt;+----+
+&lt;/span&gt;&lt;span&gt;| ID |
+&lt;/span&gt;&lt;span&gt;+----+
+&lt;/span&gt;&lt;span&gt;|  1 |
+&lt;/span&gt;&lt;span&gt;|  2 |
+&lt;/span&gt;&lt;span&gt;+----+
+&lt;/span&gt;&lt;span&gt;2 rows in set (0.00 sec)
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span&gt;mysql&amp;gt; INSERT INTO my_table () VALUES ();
+&lt;/span&gt;&lt;span&gt;Query OK, 1 row affected (0.03 sec)
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span&gt;mysql&amp;gt; SELECT * FROM my_table;
+&lt;/span&gt;&lt;span&gt;+----+
+&lt;/span&gt;&lt;span&gt;| ID |
+&lt;/span&gt;&lt;span&gt;+----+
+&lt;/span&gt;&lt;span&gt;|  1 |
+&lt;/span&gt;&lt;span&gt;|  2 |
+&lt;/span&gt;&lt;span&gt;|  3 |
+&lt;/span&gt;&lt;span&gt;+----+
+&lt;/span&gt;&lt;span&gt;3 rows in set (0.00 sec)
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;Eep. MySQL has re-used the ID 3. This is because the way that auto-increment
+works in InnoDB is, on server restart, it will figure out what the next
+ID to use is by effectively running this query:&lt;/p&gt;
+&lt;pre data-lang="SQL" style="background-color:#2e3440;color:#d8dee9;" class="language-SQL "&gt;&lt;code class="language-SQL" data-lang="SQL"&gt;&lt;span style="color:#81a1c1;"&gt;SELECT &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;MAX&lt;/span&gt;&lt;span&gt;(ID) &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;FROM&lt;/span&gt;&lt;span&gt; my_table;
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;If you had deleted the most recent records from the table just before restart,
+IDs that had been used will be re-used when the server comes back up.&lt;/p&gt;
+&lt;p&gt;In theory, this &lt;em&gt;shouldn't&lt;/em&gt; cause you trouble. Best practice dictates that
+you shouldn't be using IDs from database tables outside of that table unless
+it's some foreign key field, and you certainly wouldn't leak that ID out of
+your system, right?&lt;/p&gt;
+&lt;p&gt;In practice, this stuff happens and can cause devastatingly subtle bugs. MySQL
+8.0 changed this behaviour by storing the auto-increment value on disk in a way
+that persists across restarts.&lt;/p&gt;
+&lt;h2 id="postgres-sequence-values-don-t-get-replicated"&gt;&lt;a class="anchor" href="#postgres-sequence-values-don-t-get-replicated"&gt;#&lt;/a&gt;
+Postgres sequence values don't get replicated&lt;/h2&gt;
+&lt;p&gt;Like MySQL 8.0, Postgres stores auto-increment values on disk. It does this in
+a schema object called a "sequence." When you create an auto-incrementing
+field in Postgres, behind the scenes a sequence will be created to back that
+field and durably keep track of what the next value should be.&lt;/p&gt;
+&lt;p&gt;Let's take a look at that in practice.&lt;/p&gt;
+&lt;pre data-lang="txt" style="background-color:#2e3440;color:#d8dee9;" class="language-txt "&gt;&lt;code class="language-txt" data-lang="txt"&gt;&lt;span&gt;$ docker volume create postgres-14-data
+&lt;/span&gt;&lt;span&gt;$ docker run --network host -e POSTGRES_PASSWORD=my-secret-pw -v postgres-14-data:/var/lib/postgresql/data -p postgres:14
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;With Postgres up and running, let's go ahead and create our table:&lt;/p&gt;
+&lt;pre data-lang="txt" style="background-color:#2e3440;color:#d8dee9;" class="language-txt "&gt;&lt;code class="language-txt" data-lang="txt"&gt;&lt;span&gt;$ docker run -it --rm --network host postgres:14 psql -h 127.0.0.1 -U postgres
+&lt;/span&gt;&lt;span&gt;postgres=# CREATE TABLE my_table (id SERIAL PRIMARY KEY);
+&lt;/span&gt;&lt;span&gt;CREATE TABLE
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;And insert a few rows:&lt;/p&gt;
+&lt;pre data-lang="txt" style="background-color:#2e3440;color:#d8dee9;" class="language-txt "&gt;&lt;code class="language-txt" data-lang="txt"&gt;&lt;span&gt;postgres=# INSERT INTO my_table DEFAULT VALUES;
+&lt;/span&gt;&lt;span&gt;INSERT 0 1
+&lt;/span&gt;&lt;span&gt;postgres=# INSERT INTO my_table DEFAULT VALUES;
+&lt;/span&gt;&lt;span&gt;INSERT 0 1
+&lt;/span&gt;&lt;span&gt;postgres=# INSERT INTO my_table DEFAULT VALUES;
+&lt;/span&gt;&lt;span&gt;INSERT 0 1
+&lt;/span&gt;&lt;span&gt;postgres=# SELECT * FROM my_table;
+&lt;/span&gt;&lt;span&gt; id
+&lt;/span&gt;&lt;span&gt;----
+&lt;/span&gt;&lt;span&gt;  1
+&lt;/span&gt;&lt;span&gt;  2
+&lt;/span&gt;&lt;span&gt;  3
+&lt;/span&gt;&lt;span&gt;(3 rows)
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;So far so good. Let's take a look at the table:&lt;/p&gt;
+&lt;pre data-lang="txt" style="background-color:#2e3440;color:#d8dee9;" class="language-txt "&gt;&lt;code class="language-txt" data-lang="txt"&gt;&lt;span&gt;postgres=# \d my_table
+&lt;/span&gt;&lt;span&gt;                            Table &amp;quot;public.my_table&amp;quot;
+&lt;/span&gt;&lt;span&gt; Column |  Type   | Collation | Nullable |               Default
+&lt;/span&gt;&lt;span&gt;--------+---------+-----------+----------+--------------------------------------
+&lt;/span&gt;&lt;span&gt; id     | integer |           | not null | nextval(&amp;#39;my_table_id_seq&amp;#39;::regclass)
+&lt;/span&gt;&lt;span&gt;Indexes:
+&lt;/span&gt;&lt;span&gt;    &amp;quot;my_table_pkey&amp;quot; PRIMARY KEY, btree (id)
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;This output tells us that the default value for our &lt;code&gt;id&lt;/code&gt; field is the &lt;code&gt;nextval&lt;/code&gt;
+of &lt;code&gt;my_table_id_seq&lt;/code&gt;. Let's take a look at &lt;code&gt;my_table_id_seq&lt;/code&gt;:&lt;/p&gt;
+&lt;pre data-lang="txt" style="background-color:#2e3440;color:#d8dee9;" class="language-txt "&gt;&lt;code class="language-txt" data-lang="txt"&gt;&lt;span&gt;postgres=# \d my_table_id_seq
+&lt;/span&gt;&lt;span&gt;                  Sequence &amp;quot;public.my_table_id_seq&amp;quot;
+&lt;/span&gt;&lt;span&gt;  Type   | Start | Minimum |  Maximum   | Increment | Cycles? | Cache
+&lt;/span&gt;&lt;span&gt;---------+-------+---------+------------+-----------+---------+-------
+&lt;/span&gt;&lt;span&gt; integer |     1 |       1 | 2147483647 |         1 | no      |     1
+&lt;/span&gt;&lt;span&gt;Owned by: public.my_table.id
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span&gt;postgres=# SELECT currval(&amp;#39;my_table_id_seq&amp;#39;);
+&lt;/span&gt;&lt;span&gt; currval
+&lt;/span&gt;&lt;span&gt;---------
+&lt;/span&gt;&lt;span&gt;       3
+&lt;/span&gt;&lt;span&gt;(1 row)
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;Neat, we have a bonafide object in Postgres that's keeping track of the
+auto-incrementing ID value. If we were to repeat what we did in MySQL, delete
+some rows and restart, we wouldn't have the same problem here. &lt;code&gt;my_table_id_seq&lt;/code&gt;
+is saved to disk and doesn't lose its place.&lt;/p&gt;
+&lt;p&gt;Or does it?&lt;/p&gt;
+&lt;p&gt;If you want to update Postgres to a new major version, the way you typically
+accomplish that is by creating a new Postgres instance on the version you want
+to upgrade to, logically replicate from the old instance to the new one, and
+then switch your application to talk to the new one.&lt;/p&gt;
+&lt;p&gt;First we need to restart our Postgres 14 with some new configuration to allow
+logical replication:&lt;/p&gt;
+&lt;pre data-lang="txt" style="background-color:#2e3440;color:#d8dee9;" class="language-txt "&gt;&lt;code class="language-txt" data-lang="txt"&gt;&lt;span&gt;$ docker run --network host -e POSTGRES_PASSWORD=my-secret-pw -v postgres-14-data:/var/lib/postgresql/data -p postgres:14 -c wal_level=logical
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;Now let's get Postgres 15 up and running:&lt;/p&gt;
+&lt;pre data-lang="txt" style="background-color:#2e3440;color:#d8dee9;" class="language-txt "&gt;&lt;code class="language-txt" data-lang="txt"&gt;&lt;span&gt;$ docker volume create postgres-15-data
+&lt;/span&gt;&lt;span&gt;$ docker run --network host -e POSTGRES_PASSWORD=my-secret-pw -v postgres-15-data:/var/lib/postgresql/data postgres:15 postgres:14 -c wal_level=logical -p 5431
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;Next up, we create a "publication" on our Postgres 14 instance:&lt;/p&gt;
+&lt;pre data-lang="txt" style="background-color:#2e3440;color:#d8dee9;" class="language-txt "&gt;&lt;code class="language-txt" data-lang="txt"&gt;&lt;span&gt;postgres=# CREATE PUBLICATION my_publication FOR ALL TABLES;
+&lt;/span&gt;&lt;span&gt;CREATE PUBLICATION
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;Then we create our "my_table" table and a "subscription" on our Postgres 15
+instance:&lt;/p&gt;
+&lt;pre data-lang="txt" style="background-color:#2e3440;color:#d8dee9;" class="language-txt "&gt;&lt;code class="language-txt" data-lang="txt"&gt;&lt;span&gt;postgres=# CREATE TABLE my_table (id SERIAL PRIMARY KEY);
+&lt;/span&gt;&lt;span&gt;CREATE TABLE
+&lt;/span&gt;&lt;span&gt;postgres=# CREATE SUBSCRIPTION my_subscription CONNECTION &amp;#39;host=127.0.0.1 port=5432 dbname=postgres user=postgres password=my-secret-pw&amp;#39; PUBLICATION my_publication;
+&lt;/span&gt;&lt;span&gt;NOTICE:  created replication slot &amp;quot;my_subscription&amp;quot; on publisher
+&lt;/span&gt;&lt;span&gt;CREATE SUBSCRIPTION
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;After doing this, we should see data syncing between old and new instances:&lt;/p&gt;
+&lt;pre data-lang="txt" style="background-color:#2e3440;color:#d8dee9;" class="language-txt "&gt;&lt;code class="language-txt" data-lang="txt"&gt;&lt;span&gt;$ docker run -it --rm --network host postgres:15 psql -h 127.0.0.1 -U postgres -p 5432 -c &amp;quot;SELECT * FROM my_table&amp;quot;
+&lt;/span&gt;&lt;span&gt; id
+&lt;/span&gt;&lt;span&gt;----
+&lt;/span&gt;&lt;span&gt;  1
+&lt;/span&gt;&lt;span&gt;  2
+&lt;/span&gt;&lt;span&gt;  3
+&lt;/span&gt;&lt;span&gt;(3 rows)
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span&gt;$ docker run -it --rm --network host postgres:15 psql -h 127.0.0.1 -U postgres -p 5431 -c &amp;quot;SELECT * FROM my_table&amp;quot;
+&lt;/span&gt;&lt;span&gt; id
+&lt;/span&gt;&lt;span&gt;----
+&lt;/span&gt;&lt;span&gt;  1
+&lt;/span&gt;&lt;span&gt;  2
+&lt;/span&gt;&lt;span&gt;  3
+&lt;/span&gt;&lt;span&gt;(3 rows)
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span&gt;$ docker run -it --rm --network host postgres:15 psql -h 127.0.0.1 -U postgres -p 5432 -c &amp;quot;INSERT INTO my_table DEFAULT VALUES&amp;quot;
+&lt;/span&gt;&lt;span&gt;INSERT 0 1
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span&gt;$ docker run -it --rm --network host postgres:15 psql -h 127.0.0.1 -U postgres -p 5431 -c &amp;quot;SELECT * FROM my_table&amp;quot;
+&lt;/span&gt;&lt;span&gt; id
+&lt;/span&gt;&lt;span&gt;----
+&lt;/span&gt;&lt;span&gt;  1
+&lt;/span&gt;&lt;span&gt;  2
+&lt;/span&gt;&lt;span&gt;  3
+&lt;/span&gt;&lt;span&gt;  4
+&lt;/span&gt;&lt;span&gt;(4 rows)
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;So what's the problem?&lt;/p&gt;
+&lt;p&gt;Well...&lt;/p&gt;
+&lt;pre data-lang="txt" style="background-color:#2e3440;color:#d8dee9;" class="language-txt "&gt;&lt;code class="language-txt" data-lang="txt"&gt;&lt;span&gt;$ docker run -it --rm --network host postgres:15 psql -h 127.0.0.1 -U postgres -p 5432 -c &amp;quot;SELECT nextval(&amp;#39;my_table_id_seq&amp;#39;)&amp;quot;
+&lt;/span&gt;&lt;span&gt; nextval
+&lt;/span&gt;&lt;span&gt;---------
+&lt;/span&gt;&lt;span&gt;       5
+&lt;/span&gt;&lt;span&gt;(1 row)
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span&gt;$ docker run -it --rm --network host postgres:15 psql -h 127.0.0.1 -U postgres -p 5431 -c &amp;quot;SELECT nextval(&amp;#39;my_table_id_seq&amp;#39;)&amp;quot;
+&lt;/span&gt;&lt;span&gt; nextval
+&lt;/span&gt;&lt;span&gt;---------
+&lt;/span&gt;&lt;span&gt;       1
+&lt;/span&gt;&lt;span&gt;(1 row)
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;The sequence value is not replicated. If we tried to insert a row into Postgres
+15 we get this:&lt;/p&gt;
+&lt;pre data-lang="txt" style="background-color:#2e3440;color:#d8dee9;" class="language-txt "&gt;&lt;code class="language-txt" data-lang="txt"&gt;&lt;span&gt;$ docker run -it --rm --network host postgres:15 psql -h 127.0.0.1 -U postgres -p 5431 -c &amp;quot;INSERT INTO my_table DEFAULT VALUES&amp;quot;
+&lt;/span&gt;&lt;span&gt;ERROR:  duplicate key value violates unique constraint &amp;quot;my_table_pkey&amp;quot;
+&lt;/span&gt;&lt;span&gt;DETAIL:  Key (id)=(2) already exists.
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;Note: It's tried to insert id=2 here because when we called &lt;code&gt;nextval&lt;/code&gt; earlier, it
+modified the sequence.&lt;/p&gt;
+&lt;p&gt;This can make major Postgres version updates very tricky if you rely heavily on
+auto-incrementing ID fields. You need to modify the sequence values manually to
+values you know for a fact won't be reached during the process of the upgrade,
+and then you likely need to disable writes during the upgrade depending on
+your workload.&lt;/p&gt;
+&lt;h2 id="conclusion"&gt;&lt;a class="anchor" href="#conclusion"&gt;#&lt;/a&gt;
+Conclusion&lt;/h2&gt;
+&lt;p&gt;You can avoid all of the above pain by using UUID fields instead of
+auto-incrementing integers. These have the benefit of being unpredictable and
+not leak information about the cardinality of the underlying table if you do end
+up using them outside of the table (which you shouldn't).&lt;/p&gt;
+&lt;p&gt;Thanks to &lt;a href="https://incident.io/blog/one-two-skip-a-few"&gt;this article&lt;/a&gt; from the
+wonderful folks at &lt;a href="https://incident.io"&gt;Incident.io&lt;/a&gt;, I am now aware of the &lt;a href="https://en.wikipedia.org/wiki/German_tank_problem"&gt;German tank problem&lt;/a&gt;.
+Well worth reading both the linked article, and the Wikipedia page, for more
+reasons not to use auto-increment ID fields.&lt;/p&gt;
+</content>
+            
+        </entry>
+    
+    
+        <entry xml:lang="en">
+            <title>Getting an Autism Diagnosis</title>
+            <published>2023-03-02T00:00:00+00:00</published>
+            <updated>2023-03-02T00:00:00+00:00</updated>
+            <author>
+            <name>Unknown</name>
+            </author>
+            <link rel="alternate" href="https://samwho.dev/blog/getting-an-autism-diagnosis/" type="text/html"/>
+            <id>https://samwho.dev/blog/getting-an-autism-diagnosis/</id>
+            
+            <content type="html">&lt;p&gt;On the 3rd of March 2022, we received a letter informing us that our eldest son,
+Max, has Autism Spectrum Disorder. The letter was the end result of a long
+process.  I’m going to talk about that process from start to finish, in as much
+detail as I can.&lt;/p&gt;
+&lt;p&gt;This post would not have been possible without my wife's dedication to our 2
+children, her persistence in the face of long odds, and her diligent note
+taking. Sophie, I love you.&lt;/p&gt;
+&lt;p&gt;&lt;img src="/images/max-autism-diagnosis.jpeg" alt="A photograph of a letter explaining that our son, Max, has Autism Spectrum Disorder and Speech and Language difficulties" /&gt;&lt;/p&gt;
+&lt;h2 id="prologue"&gt;&lt;a class="anchor" href="#prologue"&gt;#&lt;/a&gt;
+Prologue&lt;/h2&gt;
+&lt;p&gt;This post spiritually follows on from &lt;a href="/blog/having-a-baby/"&gt;this one&lt;/a&gt;. I ended
+that post by saying I’d like to write another post about the first months of
+parenthood. That never happened, because the first months of parenthood are an
+extreme test of patience and resolve.&lt;/p&gt;
+&lt;p&gt;Being new parents, we didn’t know what we were doing. Max was irritable,
+difficult to get to sleep, and dropped down to the 9th percentile for weight.
+This last piece of information was a shock to us, and to our health visitor, and
+led to the revelation that Sophie wasn’t producing enough breastmilk. Nobody’s
+fault, just the way it was.&lt;/p&gt;
+&lt;p&gt;To tell the truth, this was a relief. After we switched to formula feeding,
+Max’s temperament changed almost overnight. He was content, he slept better, I
+was able to help with feeding, and Sophie’s nipples were able to heal.&lt;/p&gt;
+&lt;p&gt;Max was 9 months old when the UK went into its first full lockdown of the
+COVID-19 pandemic on March 26th 2020. The week before the lockdown was
+announced, we had visited a local nursery and been given forms to fill in to
+confirm Max’s attendance. We were excited to get him spending time with kids his
+own age, and we were looking forward to getting some time off from parenting.&lt;/p&gt;
+&lt;p&gt;Instead, we all had to stay home 24/7 by law. I was in the fortunate position
+to already be working from home, and working in an industry that was relatively
+unaffected by the pandemic. But none of this helped Max’s social development.&lt;/p&gt;
+&lt;p&gt;I tell you all of this because it’s relevant to Max’s diagnosis. While we got
+his diagnosis earlier than most, a fact we are ever grateful for, it did take
+longer than it would have had there been no pandemic. We attributed a lot of his
+behaviour to having lived most of his life in lockdown.&lt;/p&gt;
+&lt;h2 id="how-we-realised-max-was-different"&gt;&lt;a class="anchor" href="#how-we-realised-max-was-different"&gt;#&lt;/a&gt;
+How we realised Max was different&lt;/h2&gt;
+&lt;p&gt;Max had his first “settling in” session at nursery on February 8th 2021. These
+are short sessions, often only a few hours long, designed to ease your child in
+to the nursery setting.  Max’s first settling in session didn’t go very well, a
+fact that when taken in isolation isn't unusual. He spent the majority of the
+time screaming, and we ended up cutting it short.&lt;/p&gt;
+&lt;p&gt;Despite this, Sophie and I settled into a good rhythm with nursery. Max went
+there twice a week. It was a good balance between cost, us getting time off, and
+Max getting time with his peers. But Max wasn’t taking to it, and one evening a
+member of staff took Sophie to one side and said Max “isn’t where we expect him
+to be developmentally.”&lt;/p&gt;
+&lt;p&gt;It's hard to describe how this made me feel. Is this our fault? Are we not
+parenting well enough?&lt;/p&gt;
+&lt;p&gt;Nursery's concerns were that Max screams a lot, can’t follow instructions, and
+his speech was less developed than his peers. They suggested it could be Max’s
+hearing, and they recommended we talk to our GP to set up a hearing test. We
+called our GP and had a frustrating conversation in which he asked us if &lt;em&gt;we&lt;/em&gt;
+think Max has problems hearing.  We explained that we had been recommended to
+get a hearing test by his nursery.  But did &lt;em&gt;we&lt;/em&gt; think he had problems hearing?
+I didn’t think Max had any problems hearing, but I didn’t want to say that
+because I am not a medical professional.&lt;/p&gt;
+&lt;p&gt;Nursery also recommended we contact our health visitor to ask for a
+developmental review. In our area, kids used to go through a developmental
+review at 2 years old. This changed in recent years, and it’s done at 3 years
+old now. The review is made up of questions that gauge things your child can and
+cannot do. At the end, you get a score. If you want to see what’s on it, you can
+search “ASQ:3 24 months” and you’ll find loads of PDFs, all very similar.&lt;/p&gt;
+&lt;p&gt;Max didn’t do well at this, we had to say that he wasn’t able to do most of the
+things they asked about. Because of his low score, we did another questionnaire
+called the ASQ:SE:2. This one focuses on social and emotional development.
+Again, Max scored low. It was the result of these two tests that led our health
+visitor to refer us to our local council’s special educational needs and
+disability (SEND) team. This happened on the 7th May 2021.&lt;/p&gt;
+&lt;p&gt;This referral included appointments with a paediatrician (which we were told
+would take a few months, but actually ended up taking almost a full year),
+speech and language therapist, and the SEND team themselves. The 7th of May was
+the first point at which it felt “serious,” and we started to suspect he may be
+autistic.&lt;/p&gt;
+&lt;h2 id="jumping-through-all-the-hoops"&gt;&lt;a class="anchor" href="#jumping-through-all-the-hoops"&gt;#&lt;/a&gt;
+Jumping through all the hoops&lt;/h2&gt;
+&lt;p&gt;On the 12th of August we had our appointment with the SEND team.  We’ll call her
+Janet. It took place at nursery, and the day before it Janet had been at nursery
+to spend time with Max and observe his behaviour. I remember messaging my boss
+saying I need to be away from work for “an hour or so.” The meeting lasted 4
+hours. It was obvious that Janet had spent a lot of time with Max, and had taken
+detailed notes.&lt;/p&gt;
+&lt;p&gt;It was in this meeting that we asked “do you think Max is autistic?” Janet said
+yes, he probably is. We had asked other people this same question, because it
+had been on our mind since the ASQ, but everybody had been cagey about it. “Oh I
+couldn’t say”, “I’m not qualified to make that diagnosis”, etc.  We appreciated
+how forthcoming Janet was with us, and the risk she took personally being open
+about it. She confessed in us later that a lot of parents don’t like hearing
+that their child might be autistic, so she wasn’t surprised that most people
+didn’t want to say.&lt;/p&gt;
+&lt;p&gt;After this meeting, Janet referred us to the Early Years SEND panel. It was
+decided by them that Max had special needs. It’s important to note at this point
+that we didn’t have an autism diagnosis. Help is based on need, not diagnosis.
+Autism or not, Max needed help with his development and our local council would
+give us that help regardless. Janet even went as far as to say that the
+diagnosis is irrelevant to the SEND team, he’ll get the help he needs based on
+what they observe.&lt;/p&gt;
+&lt;p&gt;On the 26th of August 2021 we had our first speech and language therapy (SLT)
+appointment. This was an introductory session, Max played with some toy cars
+while we spoke about his behaviours. One of the things we took away from this
+appointment was to put Max's toys into clear plastic containers that he would
+need to ask us to open for him. This helps to cement the need for communication.
+We still do that to this day, and we do believe it has helped.&lt;/p&gt;
+&lt;p&gt;On the 13th of September 2021, our special needs practitioner got in touch with
+us for the first time. We’ll call her Fay. She arranged “play sessions” with
+Max, these happened every few weeks from 22nd of September 2021 to 23rd of
+September 2022. In these sessions, Fay presents Max with toys designed to test
+him in different ways. Some of them require him to match colours, some of them
+shapes, some of them are things you play with with another person, and some are
+toys you aren’t meant to touch at all. All of these test how he reacts to
+situations, how focused he is, how well he appreciates and accepts playing with
+others.&lt;/p&gt;
+&lt;p&gt;Something those play sessions taught me is that playing with children is a
+skill. Fay was able to get Max to play in ways we would have said were
+impossible without seeing it for ourselves. She was able to get him to do things
+when she said so, and more crucially to not do things he obviously wanted to do.
+He responded to her extremely well, and it was a joy to watch her work with him.&lt;/p&gt;
+&lt;p&gt;We had heard it previously from Janet, but Fay confirmed it: Max has no
+difficulty learning. The way he learns is different to most other kids, though,
+and will benefit from a more tailored approach. Looking back, it is probably
+around this time we started forming our opinion that Max should attend a special
+needs school.&lt;/p&gt;
+&lt;p&gt;On the 30th of September 2021 we had Max's first hearing test. The way that they
+wanted to test Max's hearing was with a set of stacking cups. The doctor would
+demonstrate making a noise, then putting a cup onto the stack. Then she would
+make the noise again and add another cup. Then she would try and get the child
+to do the same. Max, however, wasn't at the level of understanding required to
+complete this test.&lt;/p&gt;
+&lt;p&gt;The backup test that she had involved a shelf of toys. The shelf was a grid,
+like a set of IKEA Kallax shelves, and in each square was a toy that could make
+a noise. The doctor would trigger each toy to make a noise and the idea was for
+Max to look at the toy that made the noise. Unfortunately, Max was terrified of
+the toys and screamed uncontrollably upon seeing them.&lt;/p&gt;
+&lt;p&gt;After this, the test was rescheduled for January 10th 2022. This time they tried
+to have him listen to a cartoon on the television while they put a sensor in his
+ear to take some measurements. He refused to let them put the device in his ear
+long enough to get any readings. They tried the first set of tests again, but he
+reacted the same way he did before. A third test was scheduled on February 3rd
+2022.&lt;/p&gt;
+&lt;p&gt;This time they wanted to try and do the test while Max was asleep, but we
+weren't able to get Max to sleep at the time of the appointment. However, to
+everyone's surprise, he went in to the doctor's office and did the stacked cup
+test immediately without prompting. He passed with flying colours, ruling out
+that hearing was causing his language difficulties. To this day we don't know
+what changed.&lt;/p&gt;
+&lt;p&gt;On the 17th of February 2022, 6 months after the first appointment, we had our
+second SLT appointment. We had to chase them up to get this to happen, as we had
+not heard back from them. In this appointment we learned about "transition
+objects", objects to help children go from one activity to another. We used
+bubbles to help get Max to get in the bath, and a toy game controller to help
+get him in to the car. He still uses the toy controller today, though he has
+grown to enjoy bath time enough to not need the bubbles.&lt;/p&gt;
+&lt;p&gt;On the same day, in the afternoon, we got a phone call telling us that there had
+been a short-notice cancellation with the paediatrician and would we like to do
+our appointment on the 20th of February? You're damn right we would! We had been
+waiting for this appointment since May 2021, and had heard from friends that
+waiting over a year was common. Some people wait more than 2 years. To get seen
+in less than a year is rare.&lt;/p&gt;
+&lt;p&gt;Janet, our SEND coordinator, had compiled all of the paperwork from our other
+appointments and sent them to the paediatrician. She had also let the
+paediatrician know that we were receptive to a diagnosis (not all parents are).
+Unfortunately, for whatever reason, this documentation didn't get to the
+paediatrician ready for the appointment. The paediatrician had moved from
+another area and wasn't fully set up with her email yet.&lt;/p&gt;
+&lt;p&gt;However, with what Sophie was able to find on her phone, and after observing Max
+for about an hour, the paediatrician told us she felt comfortable giving him a
+diagnosis of autism there and then, with an official letter to follow.&lt;/p&gt;
+&lt;h2 id="wrapping-up"&gt;&lt;a class="anchor" href="#wrapping-up"&gt;#&lt;/a&gt;
+Wrapping up&lt;/h2&gt;
+&lt;p&gt;Getting an autism diagnosis before the age of 3 is uncommon, and I have to
+express appreciation for everyone involved in the process. While the help given
+to children should be based on needs alone, we have found it helpful to have a
+recognised diagnosis.&lt;/p&gt;
+&lt;p&gt;What I plan to write about next is the process we went through to get Max in to
+a special needs school, a process which came to an end just a few weeks ago.  We
+are ecstatic.&lt;/p&gt;
+</content>
+            
+        </entry>
+    
+    
+        <entry xml:lang="en">
+            <title>I finally figured out how to take notes!</title>
+            <published>2022-02-14T00:00:00+00:00</published>
+            <updated>2022-02-14T00:00:00+00:00</updated>
+            <author>
+            <name>Unknown</name>
+            </author>
+            <link rel="alternate" href="https://samwho.dev/blog/note-taking/" type="text/html"/>
+            <id>https://samwho.dev/blog/note-taking/</id>
+            
+            <content type="html">&lt;p&gt;I’ve never been good at taking notes. I’ve tried. Oh boy, have I tried. Name a
+piece of note taking software, odds are I’ve tried it. I’ve even tried going old
+school with pen and paper. Nothing sticks.&lt;/p&gt;
+&lt;p&gt;Until recently.&lt;/p&gt;
+&lt;p&gt;Some time ago, I learned about Apple’s
+&lt;a href="https://apps.apple.com/gb/app/shortcuts/id1462947752"&gt;Shortcuts&lt;/a&gt; app. It’s an
+app on iOS, iPadOS, and MacOS that allows you to automate actions between apps.
+It’s a little like &lt;a href="https://ifttt.com"&gt;IFTTT&lt;/a&gt;. I played with it and made a few
+fun things. I created a keyboard shortcut that could turn my lights on and off,
+for example. I didn’t take it much further than that.&lt;/p&gt;
+&lt;p&gt;Since the start of the new year, I’ve been taking on more responsibility at
+work. This has meant an increase in meetings, and an increase in me being
+responsible for making sure things are moving forward. This means I often have
+to follow up on things after a meeting, and I would sometimes forget to do this.
+This would not do, I thought, and decided it was time to start taking meeting
+notes.&lt;/p&gt;
+&lt;p&gt;I had some requirements in mind:&lt;/p&gt;
+&lt;ol&gt;
+&lt;li&gt;I want to be able to tag notes. I’d like to track things like date, who was
+there, what the key topics were, and be able to search based on these tags.&lt;/li&gt;
+&lt;li&gt;I need the ability to create action items, and be able to ask “what action
+items have I not yet done?”&lt;/li&gt;
+&lt;li&gt;It has to be super easy. I want to be able to jump into a meeting and have my
+meeting notes ready to go.&lt;/li&gt;
+&lt;/ol&gt;
+&lt;p&gt;Turns out, combining Apple Shortcuts with &lt;a href="https://bear.app"&gt;Bear&lt;/a&gt; hits all of
+these requirements.&lt;/p&gt;
+&lt;h2 id="shortcuts"&gt;&lt;a class="anchor" href="#shortcuts"&gt;#&lt;/a&gt;
+Shortcuts&lt;/h2&gt;
+&lt;p&gt;I have two Shortcuts I use to make my note taking life much easier:&lt;/p&gt;
+&lt;ol&gt;
+&lt;li&gt;A shortcut that creates a meeting note.&lt;/li&gt;
+&lt;li&gt;A shortcut that opens or creates a daily “scratch” note, for note taking
+outside of meetings.&lt;/li&gt;
+&lt;/ol&gt;
+&lt;p&gt;The meeting note shortcut does the following:&lt;/p&gt;
+&lt;ol&gt;
+&lt;li&gt;Looks in my work calendar for the most recent meeting that started in the
+last 30 minutes.&lt;/li&gt;
+&lt;li&gt;It then creates a note with the meeting title as the note title, and it adds
+tags for each person who accepted the calendar invite. It also adds a tag for
+the current date, my current location, and the current temperature outside. Just
+a bit of fun.&lt;/li&gt;
+&lt;/ol&gt;
+&lt;p&gt;I trigger this shortcut by typing cmd+ctrl+m. Any meeting I go in to, the first
+thing I do while I’m waiting for people to arrive is hit that shortcut, the note
+pops up a few seconds later, and I’m ready to take notes.&lt;/p&gt;
+&lt;p&gt;The daily scratch note shortcut is much simpler. It creates a note with the
+current date as the title, and all of the same non-meeting-specific tags as the
+meeting note: date, location, temperature. The only difference is it first
+searches for a note with the current date as the title, and if it finds it it
+opens that instead of creating a new one. I trigger this shortcut with
+cmd+ctrl+s.&lt;/p&gt;
+&lt;p&gt;&lt;a href="/images/shortcut.png"&gt;&lt;img src="/images/shortcut.png" alt="My daily scratch note shortcut" /&gt;&lt;/a&gt;&lt;/p&gt;
+&lt;p&gt;After a second or two, a note that looks like this opens up on my screen:&lt;/p&gt;
+&lt;p&gt;&lt;a href="/images/note.png"&gt;&lt;img src="/images/note.png" alt="A daily scratch note" /&gt;&lt;/a&gt;&lt;/p&gt;
+&lt;h2 id="bear"&gt;&lt;a class="anchor" href="#bear"&gt;#&lt;/a&gt;
+Bear&lt;/h2&gt;
+&lt;p&gt;Other than being a beautiful demonstration of not implementing every single
+feature your user base asks for, the primary thing Bear excels at in my workflow
+is TODO management.&lt;/p&gt;
+&lt;p&gt;At any point in any note, you can create a TODO. This manifests as a list item
+with a checkbox, much like GitHub’s TODOs. You can have as many TODOs as you
+want in a note, and Bear has a section of its navigation menu that will show you
+all notes with outstanding TODOs.&lt;/p&gt;
+&lt;p&gt;&lt;a href="/images/note-with-todo.png"&gt;&lt;img src="/images/note-with-todo.png" alt="A daily scratch note with TODOs" /&gt;&lt;/a&gt;&lt;/p&gt;
+&lt;h2 id="conclusion"&gt;&lt;a class="anchor" href="#conclusion"&gt;#&lt;/a&gt;
+Conclusion&lt;/h2&gt;
+&lt;p&gt;I’ve been using this new system for about a week now, which is longer than I’ve
+been able to stick with any other note taking system. Nothing else has ever felt
+as natural to me as this does.&lt;/p&gt;
+&lt;p&gt;The key outcome, though, is that I feel more on top of things now. I’m not
+dropping the ball on things people ask me to do in meetings. People don’t have
+to chase me for things as much, which makes me feel good and I’m sure it makes
+them feel good as well.&lt;/p&gt;
+</content>
+            
+        </entry>
+    
+    
+        <entry xml:lang="en">
+            <title>Adventures in Homelab: Part 1</title>
+            <published>2021-05-02T00:00:00+00:00</published>
+            <updated>2021-05-02T00:00:00+00:00</updated>
+            <author>
+            <name>Unknown</name>
+            </author>
+            <link rel="alternate" href="https://samwho.dev/blog/adventures-in-homelab-part-1/" type="text/html"/>
+            <id>https://samwho.dev/blog/adventures-in-homelab-part-1/</id>
+            
+            <content type="html">&lt;p&gt;If you work in tech, and you use the cloud in any way, you've probably heard of
+Kubernetes. It's inescapable now, and there's no shortage of takes on it.&lt;/p&gt;
+&lt;p&gt;I've worked in a few companies that have used Kubernetes, but never been close
+to it. I've used in-house tools that communicate with it, or CI/CD systems that
+deploy my code in to it automatically. This has left me not really knowing what
+Kubernetes is or how it works.&lt;/p&gt;
+&lt;p&gt;That changes now.&lt;/p&gt;
+&lt;p&gt;I'm embarking on a journey to create a production-ready Kubernetes cluster in my
+own home.&lt;/p&gt;
+&lt;h2 id="what-s-in-this-post"&gt;&lt;a class="anchor" href="#what-s-in-this-post"&gt;#&lt;/a&gt;
+What's in this post&lt;/h2&gt;
+&lt;p&gt;At the end of this post I will have shown you:&lt;/p&gt;
+&lt;ul&gt;
+&lt;li&gt;How I installed Arch Linux on 3 Raspberry Pi 4Bs and got them ready to be kubelets&lt;/li&gt;
+&lt;li&gt;How I bootstrapped a bare metal Kubernentes cluster on those Raspberry Pis&lt;/li&gt;
+&lt;li&gt;How I set up pod networking in the cluster&lt;/li&gt;
+&lt;/ul&gt;
+&lt;h2 id="things-i-bought"&gt;&lt;a class="anchor" href="#things-i-bought"&gt;#&lt;/a&gt;
+Things I bought&lt;/h2&gt;
+&lt;p&gt;I've also wanted to slide down the &lt;a href="https://reddit.com/r/homelab"&gt;/r/homelab&lt;/a&gt; rabbit hole for a while, so
+here's what I bought to get started:&lt;/p&gt;
+&lt;ul&gt;
+&lt;li&gt;3x &lt;a href="https://www.amazon.co.uk/gp/product/B08M39828H/ref=ppx_yo_dt_b_asin_title_o08_s04?ie=UTF8&amp;amp;psc=1"&gt;Raspberry Pi 4 model B&lt;/a&gt; with &lt;a href="https://www.amazon.co.uk/gp/product/B07VKF1CK8/ref=ppx_yo_dt_b_asin_title_o08_s00?ie=UTF8&amp;amp;psc=1"&gt;power supplies&lt;/a&gt; and &lt;a href="https://www.amazon.co.uk/gp/product/B08GYKNCCP/ref=ppx_yo_dt_b_asin_title_o08_s04?ie=UTF8&amp;amp;psc=1"&gt;SD cards&lt;/a&gt;&lt;/li&gt;
+&lt;li&gt;A &lt;a href="https://www.amazon.co.uk/gp/product/B08Q8MTGHS/ref=ppx_yo_dt_b_asin_title_o00_s00?ie=UTF8&amp;amp;psc=1"&gt;rack mount for the Raspberry Pis&lt;/a&gt;&lt;/li&gt;
+&lt;li&gt;A &lt;a href="https://www.amazon.co.uk/gp/product/B013PGHUZS/ref=ppx_yo_dt_b_asin_title_o09_s00?ie=UTF8&amp;amp;psc=1"&gt;12u 19" cabinet&lt;/a&gt;&lt;/li&gt;
+&lt;li&gt;A &lt;a href="https://www.amazon.co.uk/gp/product/B07DFBX347/ref=ppx_yo_dt_b_asin_title_o08_s02?ie=UTF8&amp;amp;psc=1"&gt;16 PoE port gigabit ethernet switch&lt;/a&gt;&lt;/li&gt;
+&lt;li&gt;A &lt;a href="https://www.amazon.co.uk/gp/product/B08NXD85CK/ref=ppx_yo_dt_b_asin_title_o05_s00?ie=UTF8&amp;amp;psc=1"&gt;rack mountable power strip&lt;/a&gt;&lt;/li&gt;
+&lt;li&gt;A &lt;a href="https://www.amazon.co.uk/gp/product/B008X3JHJQ/ref=ppx_yo_dt_b_asin_title_o07_s00?ie=UTF8&amp;amp;psc=1"&gt;rack mountable shelf&lt;/a&gt;&lt;/li&gt;
+&lt;li&gt;Some &lt;a href="https://www.amazon.co.uk/gp/product/B004FEGBTQ/ref=ppx_yo_dt_b_asin_title_o08_s03?ie=UTF8&amp;amp;psc=1"&gt;teeny weeny network cables&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;
+&lt;p&gt;Here's what it all looks like when put together:&lt;/p&gt;
+&lt;p&gt;&lt;img src="/images/localkube-1.jpg" alt="My home server rack from top to bottom: the 3 raspberry pis mounted in their mounting bracket, the PoE switch below them with patch cables running to each pi, and the shelf below that holding a UPS and a NAS" /&gt;&lt;/p&gt;
+&lt;p&gt;Also pictured here is the shelf, which is holding a &lt;a href="https://www.amazon.co.uk/gp/product/B07BZCD927/ref=ppx_yo_dt_b_search_asin_title?ie=UTF8&amp;amp;psc=1"&gt;UPS&lt;/a&gt; on the left and a
+&lt;a href="https://www.amazon.co.uk/gp/product/B075DDZ894/ref=ppx_yo_dt_b_search_asin_title?ie=UTF8&amp;amp;psc=1"&gt;NAS&lt;/a&gt; on the right. I had those things already, so didn't list them as part
+of what I bought for this project. While the UPS is optional, the NAS is quite
+critical to my setup. It will eventually host all of the persistent data for
+my cluster. More about this in the 2nd part of this series.&lt;/p&gt;
+&lt;h2 id="preparing-the-pis"&gt;&lt;a class="anchor" href="#preparing-the-pis"&gt;#&lt;/a&gt;
+Preparing the Pis&lt;/h2&gt;
+&lt;p&gt;The first step is to get an OS running on the Raspberry Pis. While the official
+documentation on &lt;a href="https://kubernetes.io/docs/setup/production-environment/tools/kubeadm/create-cluster-kubeadm/"&gt;creating a bare metal Kubernetes cluster&lt;/a&gt; recommends using
+a deb/rpm-compatible Linux distribution, I'm a long-time fan of Arch Linux.
+Surely I can't be the first person to want to do this on Arch?&lt;/p&gt;
+&lt;p&gt;Fortunately, I'm not. Morten Linderud, part of the Arch Linux security team, has
+written a &lt;a href="https://linderud.dev/blog/kubernetes-in-arch-linux/"&gt;great blog post&lt;/a&gt; on getting a bare metal Kubernetes cluster
+working using Arch Linux. There's only one small gotcha: he didn't do it on
+Raspberry Pis.&lt;/p&gt;
+&lt;p&gt;Before running through the steps in his blog post, we need to get Arch running
+on the Pis. I followed &lt;a href="https://archlinuxarm.org/platforms/armv8/broadcom/raspberry-pi-4"&gt;this guide&lt;/a&gt; from the official Arch Linux website,
+which worked perfectly. I followed the ARMv7 installation guide because the
+disclaimer for AArch64 put me off a little. This decision hasn't hurt me so far,
+though I have occasionally had to look harder for docker images built for ARM
+and not ARM64 (thanks, Apple).&lt;/p&gt;
+&lt;p&gt;I'm going to use &lt;code&gt;kubeadm&lt;/code&gt; to bootstrap my cluster, and while &lt;code&gt;kubeadm&lt;/code&gt; is an
+officially supported package in the Arch Linux repos, there's no ARM build of
+it. There is, however, an ARM build &lt;a href="https://aur.archlinux.org/packages/kubeadm-bin/"&gt;in the AUR&lt;/a&gt;. I installed &lt;a href="https://aur.archlinux.org/packages/yay/"&gt;yay&lt;/a&gt; as
+my preferred AUR tool.&lt;/p&gt;
+&lt;p&gt;To save some time, I'll tell you I needed to install all of the following on
+each pi:&lt;/p&gt;
+&lt;pre data-lang="bash" style="background-color:#2e3440;color:#d8dee9;" class="language-bash "&gt;&lt;code class="language-bash" data-lang="bash"&gt;&lt;span style="color:#88c0d0;"&gt;yay&lt;/span&gt;&lt;span&gt; -S kubeadm kubelet crictl conntrack-tools ethtool ebtables cni-plugins containerd socat
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;A lot of them came up during the &lt;code&gt;kubeadm init&lt;/code&gt; process. It runs a set of
+"preflight checks" that require you to install necessary binaries. It also
+checks to make sure your system has various capabilities, and one of these
+was missing for me: memory cgroups. I had to add the following onto the end
+of &lt;code&gt;/boot/cmdline.txt&lt;/code&gt;:&lt;/p&gt;
+&lt;pre data-lang="txt" style="background-color:#2e3440;color:#d8dee9;" class="language-txt "&gt;&lt;code class="language-txt" data-lang="txt"&gt;&lt;span&gt;cgroup_enable=memory
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;And reboot. It also warned me that the &lt;code&gt;hugetlb&lt;/code&gt; cgroup wasn't enabled, but it
+was an optional dependency and I decided to ignore it. This hasn't bitten me so
+far.&lt;/p&gt;
+&lt;p&gt;The last thing I did was set the hostname of each of the nodes. Modify
+&lt;code&gt;/etc/hostname&lt;/code&gt; and name the nodes as you see fit. I used &lt;code&gt;kubernetes-master&lt;/code&gt;,
+&lt;code&gt;kubernetes-worker-1&lt;/code&gt;, and &lt;code&gt;kubernetes-worker-2&lt;/code&gt;. I also gave them static IPs in
+my local network, and DNS names to make communicating with them easier.&lt;/p&gt;
+&lt;h2 id="bootstrapping-the-cluster"&gt;&lt;a class="anchor" href="#bootstrapping-the-cluster"&gt;#&lt;/a&gt;
+Bootstrapping the cluster&lt;/h2&gt;
+&lt;p&gt;Step 1 to bootstrapping a cluster is to set up your master node. The Kubernetes
+project ships a tool called &lt;code&gt;kubeadm&lt;/code&gt; (Kubernetes admin) that makes this very
+easy. I ran the following:&lt;/p&gt;
+&lt;pre data-lang="bash" style="background-color:#2e3440;color:#d8dee9;" class="language-bash "&gt;&lt;code class="language-bash" data-lang="bash"&gt;&lt;span style="color:#88c0d0;"&gt;kubeadm&lt;/span&gt;&lt;span&gt; init --pod-network-cidr 10.244.0.0/16 --upload-certs
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;The flag &lt;code&gt;--pod-network-cidr&lt;/code&gt; is the desired subnet you want pods to live in. I
+chose something that's very different to my home network so I would be able to
+distinguish them.  The flag &lt;code&gt;--upload-certs&lt;/code&gt; I'm not really sure about. Martin
+Linderud uses it in his blog post, so I did as well. From reading the
+documentation on the flag it looks like I didn't need it, so try without if
+you're feeling adventurous.&lt;/p&gt;
+&lt;p&gt;&lt;code&gt;kubeadm init&lt;/code&gt; runs a set of preflight checks first. It's possible you will fail
+some of those checks. In that case, make sure you do some searching to figure
+out what's wrong and fix it before continuing.&lt;/p&gt;
+&lt;p&gt;When &lt;code&gt;kubeadm init&lt;/code&gt; finishes, you'll see output that looks like this:&lt;/p&gt;
+&lt;pre data-lang="txt" style="background-color:#2e3440;color:#d8dee9;" class="language-txt "&gt;&lt;code class="language-txt" data-lang="txt"&gt;&lt;span&gt;Your Kubernetes control-plane has initialized successfully!
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span&gt;To start using your cluster, you need to run the following as a regular user:
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span&gt;  mkdir -p $HOME/.kube
+&lt;/span&gt;&lt;span&gt;  sudo cp -i /etc/kubernetes/admin.conf $HOME/.kube/config
+&lt;/span&gt;&lt;span&gt;  sudo chown $(id -u):$(id -g) $HOME/.kube/config
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span&gt;You should now deploy a Pod network to the cluster.
+&lt;/span&gt;&lt;span&gt;Run &amp;quot;kubectl apply -f [podnetwork].yaml&amp;quot; with one of the options listed at:
+&lt;/span&gt;&lt;span&gt;  /docs/concepts/cluster-administration/addons/
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span&gt;You can now join any number of machines by running the following on each node
+&lt;/span&gt;&lt;span&gt;as root:
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span&gt;  kubeadm join &amp;lt;control-plane-host&amp;gt;:&amp;lt;control-plane-port&amp;gt; --token &amp;lt;token&amp;gt; --discovery-token-ca-cert-hash sha256:&amp;lt;hash&amp;gt;
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;Save that &lt;code&gt;kubeadm join&lt;/code&gt; command, you'll need it in a few minutes.&lt;/p&gt;
+&lt;p&gt;It was at this point that I also copied the &lt;code&gt;~/.kube/config&lt;/code&gt; file to my main
+development machine and closed the SSH connection to my master node.&lt;/p&gt;
+&lt;h2 id="pod-networking"&gt;&lt;a class="anchor" href="#pod-networking"&gt;#&lt;/a&gt;
+Pod networking&lt;/h2&gt;
+&lt;p&gt;&lt;img src="/images/now-this-is-pod-networking.jpg" alt="Anakin Skywalker pod-racing with the caption &amp;quot;Now this is pod networking!&amp;quot;" /&gt;&lt;/p&gt;
+&lt;p&gt;Pod networking has come up a couple of times now, but what is it?&lt;/p&gt;
+&lt;p&gt;A Kubernetes cluster consists of 0-n nodes. A node is a physical machine running
+the &lt;code&gt;kubelet&lt;/code&gt; daemon configured to be a part of your cluster. On a node, 0-n
+pods can be running. A pod is a collection of 1-n containers that share a local
+network. They're called pods as a reference to a pod of dolphins, according to
+the book &lt;a href="https://www.oreilly.com/library/view/kubernetes-up-and/9781492046523/"&gt;Kubernetes: Up and Running&lt;/a&gt;.&lt;/p&gt;
+&lt;p&gt;Because the networks that Kubernetes clusters are deployed in are extremely
+varied (from cloud providers to datacenters to home networks), and needs will
+differ dramatically, Kubernetes doesn't ship clusters with a way for pods to
+communicate with other pods by default. You need to select a third-party
+solution that fits your needs.&lt;/p&gt;
+&lt;p&gt;Deciding what pod networking solution is best for you is outside of the scope
+of this article, I'll just say that I went with &lt;a href="https://github.com/flannel-io/flannel"&gt;flannel&lt;/a&gt;. It sounded simple
+and just sorts out networking between pods without any extra fancy features.
+Its limitations, primarily that nodes must be on the same physical network to
+each other, was not a concern for me.&lt;/p&gt;
+&lt;p&gt;Normally, you would install flannel like this:&lt;/p&gt;
+&lt;pre data-lang="bash" style="background-color:#2e3440;color:#d8dee9;" class="language-bash "&gt;&lt;code class="language-bash" data-lang="bash"&gt;&lt;span style="color:#88c0d0;"&gt;kubectl&lt;/span&gt;&lt;span&gt; apply -f https://raw.githubusercontent.com/coreos/flannel/master/Documentation/kube-flannel.yml
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;But I found that this didn't work for me. There were two reasons:&lt;/p&gt;
+&lt;ol&gt;
+&lt;li&gt;I was missing the &lt;code&gt;cni-plugins&lt;/code&gt; package&lt;/li&gt;
+&lt;li&gt;The default backend flannel uses, &lt;code&gt;vxlan&lt;/code&gt;, didn't work for some reason&lt;/li&gt;
+&lt;/ol&gt;
+&lt;p&gt;While 1 took some time to figure out, largely by doing lots of
+&lt;code&gt;kubectl describe pod&lt;/code&gt; commands, it was a simple fix once I saw the error
+message.&lt;/p&gt;
+&lt;p&gt;2, however, was tricky. Pod to pod communication by pure pod IP address worked
+fine, but any communication through a cluster IP address hanged indefinitely.
+After a lot of searching, I found someone suggesting to switch away from
+flannel's default &lt;code&gt;vxlan&lt;/code&gt; backend, to the &lt;code&gt;host-gw&lt;/code&gt; backend.&lt;/p&gt;
+&lt;p&gt;What does all of this mean? Fuck if I know. All I know is that it fixed the
+problem I was having. If you download the flannel manifest from the command
+above and find the &lt;code&gt;ConfigMap&lt;/code&gt; called &lt;code&gt;kube-flannel-cfg&lt;/code&gt;, modify the bit called
+&lt;code&gt;net-conf.json&lt;/code&gt; so that it looks like this:&lt;/p&gt;
+&lt;pre data-lang="json" style="background-color:#2e3440;color:#d8dee9;" class="language-json "&gt;&lt;code class="language-json" data-lang="json"&gt;&lt;span&gt;{
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;Network&amp;quot;&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;: &lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;10.244.0.0/16&amp;quot;&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;,
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;Backend&amp;quot;&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;: &lt;/span&gt;&lt;span&gt;{
+&lt;/span&gt;&lt;span&gt;        &lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;Type&amp;quot;&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;: &lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;host-gw&amp;quot;
+&lt;/span&gt;&lt;span&gt;    }
+&lt;/span&gt;&lt;span&gt;}
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;Last but not least, I found that I had to restart my master node after all of
+these changes. It takes a minute or two to boot back up, but when it did
+I was greeted with this:&lt;/p&gt;
+&lt;pre data-lang="txt" style="background-color:#2e3440;color:#d8dee9;" class="language-txt "&gt;&lt;code class="language-txt" data-lang="txt"&gt;&lt;span&gt;$ kubectl get nodes
+&lt;/span&gt;&lt;span&gt;NAME                        STATUS   ROLES                  AGE     VERSION
+&lt;/span&gt;&lt;span&gt;kubernetes-master.local     Ready    control-plane,master   14m     v1.21.0
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;h2 id="adding-the-worker-nodes"&gt;&lt;a class="anchor" href="#adding-the-worker-nodes"&gt;#&lt;/a&gt;
+Adding the worker nodes&lt;/h2&gt;
+&lt;p&gt;Remember that &lt;code&gt;kubeadm join&lt;/code&gt; command I said to save for later? Now is later.
+Adding nodes to your cluster is as simple as running that join command on each
+node.&lt;/p&gt;
+&lt;p&gt;One bit of weirdness I experienced is that after newly joining a node to the
+cluster, it would get stuck in the &lt;code&gt;NotReady&lt;/code&gt; state. This resolved itself after
+rebooting each node. Not sure what that's all about, I'm assuming network
+voodoo with flannel.&lt;/p&gt;
+&lt;pre data-lang="txt" style="background-color:#2e3440;color:#d8dee9;" class="language-txt "&gt;&lt;code class="language-txt" data-lang="txt"&gt;&lt;span&gt;$ kubectl get nodes
+&lt;/span&gt;&lt;span&gt;NAME                        STATUS   ROLES                  AGE     VERSION
+&lt;/span&gt;&lt;span&gt;kubernetes-master.local     Ready    control-plane,master   20m     v1.21.0
+&lt;/span&gt;&lt;span&gt;kubernetes-worker-1.local   Ready    &amp;lt;none&amp;gt;                 2m      v1.21.0
+&lt;/span&gt;&lt;span&gt;kubernetes-worker-2.local   Ready    &amp;lt;none&amp;gt;                 1m      v1.21.0
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;h2 id="conclusion"&gt;&lt;a class="anchor" href="#conclusion"&gt;#&lt;/a&gt;
+Conclusion&lt;/h2&gt;
+&lt;p&gt;So now we have a working bare metal Kubernetes cluster, we're ready to start
+running things on it. We still have a long way to go until our cluster can run
+any kind of workload we want. We'll need to handle load balancing, persistent
+storage, and ingress resources. All of that is going to be in part 2.&lt;/p&gt;
+&lt;p&gt;We have an even longer way to go until we could call this a production-ready
+cluster. The main thing missing for that is that we'd need to run 3 master
+nodes, and this is something I want to explore in a future post.&lt;/p&gt;
+</content>
+            
+        </entry>
+    
+    
+        <entry xml:lang="en">
+            <title>Simple Complex Easy Hard</title>
+            <published>2021-04-18T00:00:00+00:00</published>
+            <updated>2021-04-18T00:00:00+00:00</updated>
+            <author>
+            <name>Unknown</name>
+            </author>
+            <link rel="alternate" href="https://samwho.dev/blog/simple-complex-easy-hard/" type="text/html"/>
+            <id>https://samwho.dev/blog/simple-complex-easy-hard/</id>
+            
+            <content type="html">&lt;p&gt;You might have noticed the last time you were doing chores or tackling a
+tricky problem at work, that when something is hard it's not always hard in
+the same way. The hard you experience when doing chores, that mindnumbing ,
+I-can't-be-bothered hard, is different to the hard you might experience when
+debugging an elusive bug in a distributed system.&lt;/p&gt;
+&lt;p&gt;Why?&lt;/p&gt;
+&lt;h2 id="the-2-axes-of-difficulty"&gt;&lt;a class="anchor" href="#the-2-axes-of-difficulty"&gt;#&lt;/a&gt;
+The 2 axes of difficulty&lt;/h2&gt;
+&lt;p&gt;There are many things that determine whether a task is difficult or not, but you
+can make a start on getting more granular by splitting difficulty into two axes:
+simple-complex and easy-hard.&lt;/p&gt;
+&lt;p&gt;What's the difference?&lt;/p&gt;
+&lt;p&gt;A sudoku puzzle is &lt;em&gt;complex&lt;/em&gt;. It depends on your skill at sudoku puzzles, and
+you're able to do more complex sudoku puzzles the more you practice and hone
+this skill. A task is complex when the number of people that &lt;em&gt;could&lt;/em&gt; do it
+tends toward zero. If a lot of people could do it, that would make it
+&lt;em&gt;simple&lt;/em&gt;.&lt;/p&gt;
+&lt;p&gt;The other scale measures how much effort must be expended to complete the
+task. If you're put off by how much effort will be involved, it's likely
+&lt;em&gt;hard&lt;/em&gt;. Something is hard when the number of people that are willing to put
+the effort in tends toward zero.&lt;/p&gt;
+&lt;h2 id="why-does-this-matter"&gt;&lt;a class="anchor" href="#why-does-this-matter"&gt;#&lt;/a&gt;
+Why does this matter?&lt;/h2&gt;
+&lt;p&gt;This distinction can help you with time estimations. Complexity is one of the
+key things that introduces uncertainty in to estimating how long a task will
+take. It's not unusual to get half way through a sudoku puzzle and realise
+you've made a mistake somewhere, and need to backtrack. On the other hand,
+you know quite accurately how long it's going to take you to mow the lawn.&lt;/p&gt;
+&lt;p&gt;Adding this vocabulary to your work tasks can help people to understand what
+to expect. A simple-easy task is likely to be predictably quick. A
+simple-hard task predictably long. A complex-hard task is anyone's guess, and
+may even be worth breaking in to several smaller tasks.&lt;/p&gt;
+&lt;h2 id="other-examples"&gt;&lt;a class="anchor" href="#other-examples"&gt;#&lt;/a&gt;
+Other examples&lt;/h2&gt;
+&lt;p&gt;&lt;img src="/images/simple-complex-easy-hard.png" alt="Image showing 2 axes crossing in the middle, X axis is simple-complex, Y-axis is easy-hard, with a variety of examples of tasks. Looking after a newborn is simple hard, mowing the lawn is simple-middle, putting a mug in the dishwasher is easy-simple, wiring a plug is easy-middle, tracking down a bug that doesn&amp;#39;t happen when you attach a debugger is complex-hard" /&gt;&lt;/p&gt;
+&lt;p&gt;I'm sure you might disagree with some of these, I didn't spend an enormous
+amount of time thinking about them. If you have other examples, I'd love to hear
+about them.&lt;/p&gt;
+</content>
+            
+        </entry>
+    
+    
+        <entry xml:lang="en">
+            <title>Scale is Poison</title>
+            <published>2021-03-09T00:00:00+00:00</published>
+            <updated>2021-03-09T00:00:00+00:00</updated>
+            <author>
+            <name>Unknown</name>
+            </author>
+            <link rel="alternate" href="https://samwho.dev/blog/scale-is-poison/" type="text/html"/>
+            <id>https://samwho.dev/blog/scale-is-poison/</id>
+            
+            <content type="html">&lt;p&gt;It's March 9th 2021 and Google Calendar still doesn't have a dark mode. The iOS app update notes for the Just Eat app are still boasting about the app now supporting contact-free delivery, and have done for all 25 releases in the last 11 months that I can see on the App Store. Twitter's TweetDeck still doesn't support creating or participating in polls.&lt;/p&gt;
+&lt;h2 id="the-problem"&gt;&lt;a class="anchor" href="#the-problem"&gt;#&lt;/a&gt;
+The Problem&lt;/h2&gt;
+&lt;p&gt;I've worked for a wide range of companies throughout my career. From a big US tech giant to a small Norwegian SaaS platform, with some bits in between. To me the problem is clear: big companies can't afford to give a fuck.&lt;/p&gt;
+&lt;p&gt;Why is it that companies paying Google $100,000 a month for GCP get ghosted by support staff, yet Jason Fried regularly answers questions about his company &lt;a href="https://twitter.com/search?q=%23askjf"&gt;directly on Twitter&lt;/a&gt;?&lt;/p&gt;
+&lt;p&gt;The answer is scale.&lt;/p&gt;
+&lt;blockquote class="twitter-tweet"&gt;&lt;p lang="en" dir="ltr"&gt;Scale dehumanizes.&lt;br&gt;&lt;br&gt;Resisting the pull of scale is a recipe for a happy life.&lt;/p&gt;&amp;mdash; David Perell (@david_perell) &lt;a href="https://twitter.com/david_perell/status/1325846398093455360?ref_src=twsrc%5Etfw"&gt;November 9, 2020&lt;/a&gt;&lt;/blockquote&gt; &lt;script async src="https://platform.twitter.com/widgets.js" charset="utf-8"&gt;&lt;/script&gt;
+&lt;p&gt;When you scale, you automate. This is good and bad. It's nice to be able to get a refund automatically when an item is missing from your order. It's frustrating trying to figure out the right incantation to trick a chatbot in to connecting you to a human. It's terrifying when we encode racism into &lt;a href="https://www.bbc.co.uk/news/technology-54349538"&gt;national approval processes&lt;/a&gt;.&lt;/p&gt;
+&lt;p&gt;The problem doesn't just apply to customers. Staff suffer as well. When I worked in a big US tech company, as soon as I stopped being a model employee I got stonewalled and pushed out. Exactly no effort was made to sympathise with my side of the story (my boss was bullying me), it was much easier for them to do nothing and hope I'd leave.&lt;/p&gt;
+&lt;p&gt;Conversely, small companies have treated me exceptionally well. When my 2020 tax filing told me I owed the governemnt 10,000 GBP because of an &lt;a href="https://twitter.com/samwhoo/status/1321039455428497408?s=20"&gt;unfortunate cocktail of mistakes&lt;/a&gt; both myself and the company accountants had made, the CEO couldn't do enough for me.&lt;/p&gt;
+&lt;h2 id="the-solution"&gt;&lt;a class="anchor" href="#the-solution"&gt;#&lt;/a&gt;
+The Solution&lt;/h2&gt;
+&lt;p&gt;Easy. Don't scale.&lt;/p&gt;
+&lt;p&gt;Gasp.&lt;/p&gt;
+&lt;p&gt;I'm serious. Don't scale past the number of users you can excellently serve. Don't scale to a point where you can't excellently polish your software. If it's becoming difficult and slow to implement new features, or react to new platform updates (e.g. widgets in iOS 14), stop. If your customers spend more time on hold than using your service, stop.&lt;/p&gt;
+&lt;p&gt;This works in reverse, too. Annoyed that the only person you can get to listen to you is a chatbot? Move to smaller companies that give a shit. Here are some moves I made that I'm really happy with:&lt;/p&gt;
+&lt;ul&gt;
+&lt;li&gt;Gmail to &lt;a href="https://fastmail.com/"&gt;Fastmail&lt;/a&gt; and &lt;a href="https://hey.com"&gt;HEY&lt;/a&gt;. Gmail has barely changed in years, and is a mess. Fastmail is reliable and privacy-focused, HEY is new and beautifulu and evolving every month.&lt;/li&gt;
+&lt;li&gt;EDF to &lt;a href="https://bulb.co.uk/"&gt;Bulb&lt;/a&gt;. One of the rare switches that saved me money. Bulb have a great app, write great update notes, and have good customer service.&lt;/li&gt;
+&lt;li&gt;Sky to &lt;a href="https://www.aa.net.uk/"&gt;Andrews and Arnold&lt;/a&gt;. Not a switch you'll want to make unless you're certain, AA are an ISP designed for techies. They're expensive but reliable, transparent, and not afraid of letting you pull the levers.&lt;/li&gt;
+&lt;/ul&gt;
+&lt;p&gt;In almost all cases, moves like this will cost you money. One of the reasons companies scale is because it's economical to do so. Being small costs more, and I appreciate not everyone can afford that, but if you can it's worth it.&lt;/p&gt;
+&lt;p&gt;Have you made similar switches you're happy with? I'd love to hear about them. &lt;a href="https://twitter.com/samwhoo"&gt;Tweet me&lt;/a&gt;.&lt;/p&gt;
+&lt;h2 id="the-aside"&gt;&lt;a class="anchor" href="#the-aside"&gt;#&lt;/a&gt;
+The Aside&lt;/h2&gt;
+&lt;p&gt;You might be thinking: "Sam, you're being unfair. I know loads of people that work in large software companies, they give lots of fucks and they're doing their best."&lt;/p&gt;
+&lt;p&gt;I don't doubt it. I've got a lot of friends in these companies, too, and I know for certain that they're good people.&lt;/p&gt;
+&lt;p&gt;In the end, though, they end up getting dragged into the miasma. Priorities are set by people 3-4 rungs up the ladder and there's minimal wiggle room. Performance reviews eat a month of your time per year or more, and make sure you're only working on exactly what they want you to be working on. The fetishisation of "impact" ensures that details are ignored forever.&lt;/p&gt;
+&lt;p&gt;But they pay you a butt-load of money, so it's hard to leave.&lt;/p&gt;
+</content>
+            
+        </entry>
+    
+    
+        <entry xml:lang="en">
+            <title>Fun With Rust's Traits</title>
+            <published>2020-10-17T00:00:00+00:00</published>
+            <updated>2020-10-17T00:00:00+00:00</updated>
+            <author>
+            <name>Unknown</name>
+            </author>
+            <link rel="alternate" href="https://samwho.dev/blog/fun-with-rust-traits/" type="text/html"/>
+            <id>https://samwho.dev/blog/fun-with-rust-traits/</id>
+            
+            <content type="html">&lt;p&gt;Rust's trait system is wonderful. Everyone I know that has used it agrees
+with this statement. It's a great way to encode shared behaviour between
+data types, and create flexible APIs.&lt;/p&gt;
+&lt;p&gt;It's also great for writing nonsense like this:&lt;/p&gt;
+&lt;pre data-lang="rust" style="background-color:#2e3440;color:#d8dee9;" class="language-rust "&gt;&lt;code class="language-rust" data-lang="rust"&gt;&lt;span style="color:#81a1c1;"&gt;use &lt;/span&gt;&lt;span&gt;std&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;::&lt;/span&gt;&lt;span&gt;f64&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;::&lt;/span&gt;&lt;span&gt;consts&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;::&lt;/span&gt;&lt;span&gt;PI&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;use &lt;/span&gt;&lt;span&gt;lisp&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;::&lt;/span&gt;&lt;span&gt;prelude&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;::*&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;fn &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;main&lt;/span&gt;&lt;span&gt;() {
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;let&lt;/span&gt;&lt;span&gt; r &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;= &lt;/span&gt;&lt;span style="color:#b48ead;"&gt;3.0&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;let&lt;/span&gt;&lt;span&gt; res &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;= &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;eval&lt;/span&gt;&lt;span&gt;((mul&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span&gt;PI&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span&gt;(mul&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;,&lt;/span&gt;&lt;span&gt; r&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;,&lt;/span&gt;&lt;span&gt; r)))&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;    println!(&lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;&lt;/span&gt;&lt;span style="color:#ebcb8b;"&gt;{}&lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;,&lt;/span&gt;&lt;span&gt; res)&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;}
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;This program prints the area of a circle with radius 3: &lt;code&gt;28.274&lt;/code&gt;.&lt;/p&gt;
+&lt;h2 id="good-grief-what-have-you-done"&gt;&lt;a class="anchor" href="#good-grief-what-have-you-done"&gt;#&lt;/a&gt;
+Good grief, what have you done?&lt;/h2&gt;
+&lt;p&gt;At its core, Lisp is just a tree where each node evalutes to some value. The
+node is easy to express in Rust:&lt;/p&gt;
+&lt;pre data-lang="rust" style="background-color:#2e3440;color:#d8dee9;" class="language-rust "&gt;&lt;code class="language-rust" data-lang="rust"&gt;&lt;span style="color:#81a1c1;"&gt;trait &lt;/span&gt;&lt;span style="color:#8fbcbb;"&gt;Node &lt;/span&gt;&lt;span&gt;{
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;type Return&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;fn &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;eval&lt;/span&gt;&lt;span&gt;(self) &lt;/span&gt;&lt;span style="color:#eceff4;"&gt;-&amp;gt; &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;Self::&lt;/span&gt;&lt;span&gt;Return&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;}
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;Then our &lt;code&gt;eval&lt;/code&gt; function is a one-liner. We just take a node and evaluate it:&lt;/p&gt;
+&lt;pre data-lang="rust" style="background-color:#2e3440;color:#d8dee9;" class="language-rust "&gt;&lt;code class="language-rust" data-lang="rust"&gt;&lt;span style="color:#81a1c1;"&gt;pub fn &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;eval&lt;/span&gt;&lt;span&gt;&amp;lt;N, R&amp;gt;(n&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;:&lt;/span&gt;&lt;span&gt; N) &lt;/span&gt;&lt;span style="color:#eceff4;"&gt;-&amp;gt;&lt;/span&gt;&lt;span&gt; R
+&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;where
+&lt;/span&gt;&lt;span&gt;    N&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;: &lt;/span&gt;&lt;span&gt;Node&amp;lt;Return = R&amp;gt;,
+&lt;/span&gt;&lt;span&gt;{
+&lt;/span&gt;&lt;span&gt;    n&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;eval&lt;/span&gt;&lt;span&gt;()
+&lt;/span&gt;&lt;span&gt;}
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;In Lisp, the first element in a node is usually a function, and the rest of
+the elements are the arguments to that function. Here's the simplest case: a
+function that takes no arguments.&lt;/p&gt;
+&lt;pre data-lang="rust" style="background-color:#2e3440;color:#d8dee9;" class="language-rust "&gt;&lt;code class="language-rust" data-lang="rust"&gt;&lt;span style="color:#81a1c1;"&gt;impl&lt;/span&gt;&lt;span&gt;&amp;lt;F, R&amp;gt; Node &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;for&lt;/span&gt;&lt;span&gt; (F,)
+&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;where
+&lt;/span&gt;&lt;span&gt;    F&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;:&lt;/span&gt;&lt;span&gt; Fn() -&amp;gt; R,
+&lt;/span&gt;&lt;span&gt;{
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;type Return =&lt;/span&gt;&lt;span&gt; R&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;fn &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;eval&lt;/span&gt;&lt;span&gt;(self) &lt;/span&gt;&lt;span style="color:#eceff4;"&gt;-&amp;gt; &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;Self::&lt;/span&gt;&lt;span&gt;Return {
+&lt;/span&gt;&lt;span&gt;        &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;self.&lt;/span&gt;&lt;span style="color:#b48ead;"&gt;0&lt;/span&gt;&lt;span&gt;()
+&lt;/span&gt;&lt;span&gt;    }
+&lt;/span&gt;&lt;span&gt;}
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;This is saying that a single element tuple, containing a function that takes
+no arguments and returns a value, is evaluated by executing that function and
+returning its value.&lt;/p&gt;
+&lt;p&gt;This would allow us to write and execute this &lt;code&gt;main&lt;/code&gt; function:&lt;/p&gt;
+&lt;pre data-lang="rust" style="background-color:#2e3440;color:#d8dee9;" class="language-rust "&gt;&lt;code class="language-rust" data-lang="rust"&gt;&lt;span style="color:#81a1c1;"&gt;use &lt;/span&gt;&lt;span&gt;lisp&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;::&lt;/span&gt;&lt;span&gt;prelude&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;::*&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;fn &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;hello_world&lt;/span&gt;&lt;span&gt;() {
+&lt;/span&gt;&lt;span&gt;    println!(&lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;Hello, world!&amp;quot;&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;}
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;fn &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;main&lt;/span&gt;&lt;span&gt;() {
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;eval&lt;/span&gt;&lt;span&gt;((hello_world&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;,&lt;/span&gt;&lt;span&gt;))&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;}
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;Scaling up to functions that take arguments is a case of adding those arguments
+to the Node implementation:&lt;/p&gt;
+&lt;pre data-lang="rust" style="background-color:#2e3440;color:#d8dee9;" class="language-rust "&gt;&lt;code class="language-rust" data-lang="rust"&gt;&lt;span style="color:#81a1c1;"&gt;impl&lt;/span&gt;&lt;span&gt;&amp;lt;F, A, R&amp;gt; Node &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;for&lt;/span&gt;&lt;span&gt; (F, A)
+&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;where
+&lt;/span&gt;&lt;span&gt;    F&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;:&lt;/span&gt;&lt;span&gt; Fn(A) -&amp;gt; R,
+&lt;/span&gt;&lt;span&gt;{
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;type Return =&lt;/span&gt;&lt;span&gt; R&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;fn &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;eval&lt;/span&gt;&lt;span&gt;(self) &lt;/span&gt;&lt;span style="color:#eceff4;"&gt;-&amp;gt; &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;Self::&lt;/span&gt;&lt;span&gt;Return {
+&lt;/span&gt;&lt;span&gt;        &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;self.&lt;/span&gt;&lt;span style="color:#b48ead;"&gt;0&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;self.&lt;/span&gt;&lt;span style="color:#b48ead;"&gt;1&lt;/span&gt;&lt;span&gt;)
+&lt;/span&gt;&lt;span&gt;    }
+&lt;/span&gt;&lt;span&gt;}
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;But wait. This is where we hit our first snag. In Lisp, arguments to a
+function can also be nodes in the tree that need evaluating. Consider the
+following expression:&lt;/p&gt;
+&lt;pre data-lang="lisp" style="background-color:#2e3440;color:#d8dee9;" class="language-lisp "&gt;&lt;code class="language-lisp" data-lang="lisp"&gt;&lt;span&gt;(&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;+ &lt;/span&gt;&lt;span style="color:#b48ead;"&gt;1 &lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;+ &lt;/span&gt;&lt;span style="color:#b48ead;"&gt;2 3&lt;/span&gt;&lt;span&gt;))
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;We would expect the value to be 6. In the trait we just defined, this wouldn't
+work. We aren't accounting for arguments also being nodes. Fortunately the
+fix isn't too complicated:&lt;/p&gt;
+&lt;pre data-lang="rust" style="background-color:#2e3440;color:#d8dee9;" class="language-rust "&gt;&lt;code class="language-rust" data-lang="rust"&gt;&lt;span style="color:#81a1c1;"&gt;impl&lt;/span&gt;&lt;span&gt;&amp;lt;F, A, B, R&amp;gt; Node &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;for&lt;/span&gt;&lt;span&gt; (F, A)
+&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;where
+&lt;/span&gt;&lt;span&gt;    F&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;:&lt;/span&gt;&lt;span&gt; Fn(B) -&amp;gt; R,
+&lt;/span&gt;&lt;span&gt;    A&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;: &lt;/span&gt;&lt;span&gt;Node&amp;lt;Return = B&amp;gt;,
+&lt;/span&gt;&lt;span&gt;{
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;type Return =&lt;/span&gt;&lt;span&gt; R&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;fn &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;eval&lt;/span&gt;&lt;span&gt;(self) &lt;/span&gt;&lt;span style="color:#eceff4;"&gt;-&amp;gt; &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;Self::&lt;/span&gt;&lt;span&gt;Return {
+&lt;/span&gt;&lt;span&gt;        &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;self.&lt;/span&gt;&lt;span style="color:#b48ead;"&gt;0&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;self.&lt;/span&gt;&lt;span style="color:#b48ead;"&gt;1.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;eval&lt;/span&gt;&lt;span&gt;())
+&lt;/span&gt;&lt;span&gt;    }
+&lt;/span&gt;&lt;span&gt;}
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;And we can keep scaling this to as many arguments as we expect functions to
+need.&lt;/p&gt;
+&lt;pre data-lang="rust" style="background-color:#2e3440;color:#d8dee9;" class="language-rust "&gt;&lt;code class="language-rust" data-lang="rust"&gt;&lt;span style="color:#81a1c1;"&gt;impl&lt;/span&gt;&lt;span&gt;&amp;lt;F, A1, A2, A3, A4, R1, R2, R3, R4, R&amp;gt; Node &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;for&lt;/span&gt;&lt;span&gt; (F, A1, A2, A3, A4)
+&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;where
+&lt;/span&gt;&lt;span&gt;    F&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;:&lt;/span&gt;&lt;span&gt; Fn(R1, R2, R3, R4) -&amp;gt; R,
+&lt;/span&gt;&lt;span&gt;    A1&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;: &lt;/span&gt;&lt;span&gt;Node&amp;lt;Return = R1&amp;gt;,
+&lt;/span&gt;&lt;span&gt;    A2&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;: &lt;/span&gt;&lt;span&gt;Node&amp;lt;Return = R2&amp;gt;,
+&lt;/span&gt;&lt;span&gt;    A3&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;: &lt;/span&gt;&lt;span&gt;Node&amp;lt;Return = R3&amp;gt;,
+&lt;/span&gt;&lt;span&gt;    A4&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;: &lt;/span&gt;&lt;span&gt;Node&amp;lt;Return = R4&amp;gt;,
+&lt;/span&gt;&lt;span&gt;{
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;type Return =&lt;/span&gt;&lt;span&gt; R&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;fn &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;eval&lt;/span&gt;&lt;span&gt;(self) &lt;/span&gt;&lt;span style="color:#eceff4;"&gt;-&amp;gt; &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;Self::&lt;/span&gt;&lt;span&gt;Return {
+&lt;/span&gt;&lt;span&gt;        &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;self.&lt;/span&gt;&lt;span style="color:#b48ead;"&gt;0&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;self.&lt;/span&gt;&lt;span style="color:#b48ead;"&gt;1.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;eval&lt;/span&gt;&lt;span&gt;()&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;self.&lt;/span&gt;&lt;span style="color:#b48ead;"&gt;2.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;eval&lt;/span&gt;&lt;span&gt;()&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;self.&lt;/span&gt;&lt;span style="color:#b48ead;"&gt;3.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;eval&lt;/span&gt;&lt;span&gt;()&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;self.&lt;/span&gt;&lt;span style="color:#b48ead;"&gt;4.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;eval&lt;/span&gt;&lt;span&gt;())
+&lt;/span&gt;&lt;span&gt;    }
+&lt;/span&gt;&lt;span&gt;}
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;With these trait definitions, we have made it possible to evaluate Rust
+tuples recursively in much the same way Lisp is evaluated.&lt;/p&gt;
+&lt;p&gt;The last thing we need now is to define primitive types as nodes, otherwise
+we won't be able to evaluate anything.&lt;/p&gt;
+&lt;pre data-lang="rust" style="background-color:#2e3440;color:#d8dee9;" class="language-rust "&gt;&lt;code class="language-rust" data-lang="rust"&gt;&lt;span style="color:#81a1c1;"&gt;impl &lt;/span&gt;&lt;span&gt;Node &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;for &lt;/span&gt;&lt;span&gt;i32 {
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;type Return = Self&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;fn &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;eval&lt;/span&gt;&lt;span&gt;(self) &lt;/span&gt;&lt;span style="color:#eceff4;"&gt;-&amp;gt; &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;Self::&lt;/span&gt;&lt;span&gt;Return {
+&lt;/span&gt;&lt;span&gt;        &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;self
+&lt;/span&gt;&lt;span&gt;    }
+&lt;/span&gt;&lt;span&gt;}
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;To avoid the drudgery of repeating these 6 lines of code for every type I can
+think of, I wrote a small macro to help me.&lt;/p&gt;
+&lt;pre data-lang="rust" style="background-color:#2e3440;color:#d8dee9;" class="language-rust "&gt;&lt;code class="language-rust" data-lang="rust"&gt;&lt;span style="color:#88c0d0;"&gt;macro_rules! &lt;/span&gt;&lt;span&gt;identity_node {
+&lt;/span&gt;&lt;span&gt;    ( &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;$&lt;/span&gt;&lt;span&gt;($t&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;:&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;ty&lt;/span&gt;&lt;span&gt;),&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;* &lt;/span&gt;&lt;span&gt;) &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;=&amp;gt; &lt;/span&gt;&lt;span&gt;{
+&lt;/span&gt;&lt;span&gt;      &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;$&lt;/span&gt;&lt;span&gt;(
+&lt;/span&gt;&lt;span&gt;        &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;impl &lt;/span&gt;&lt;span&gt;Node &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;for &lt;/span&gt;&lt;span&gt;$t {
+&lt;/span&gt;&lt;span&gt;            &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;type Return = &lt;/span&gt;&lt;span&gt;$t&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;            &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;fn &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;eval&lt;/span&gt;&lt;span&gt;(self) &lt;/span&gt;&lt;span style="color:#eceff4;"&gt;-&amp;gt; &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;Self::&lt;/span&gt;&lt;span&gt;Return {
+&lt;/span&gt;&lt;span&gt;                &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;self
+&lt;/span&gt;&lt;span&gt;            }
+&lt;/span&gt;&lt;span&gt;        }
+&lt;/span&gt;&lt;span&gt;      )&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;*
+&lt;/span&gt;&lt;span&gt;    }&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;}
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span&gt;identity_node!(&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;char&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;i8&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;i16&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;i32&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;i64&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;i128&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;u8&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;u16&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;u32&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;u64&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;u128&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;f32&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;f64&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#8fbcbb;"&gt;String&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;With all of this in place it's possible to evaluate expressions. I made some helper
+functions for arithmetic operations to avoid the ugliness of using &lt;code&gt;Mul::mul&lt;/code&gt; and
+&lt;code&gt;Add::add&lt;/code&gt; directly:&lt;/p&gt;
+&lt;pre data-lang="rust" style="background-color:#2e3440;color:#d8dee9;" class="language-rust "&gt;&lt;code class="language-rust" data-lang="rust"&gt;&lt;span style="color:#81a1c1;"&gt;use &lt;/span&gt;&lt;span&gt;std&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;::&lt;/span&gt;&lt;span&gt;ops&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;::&lt;/span&gt;&lt;span&gt;{Add&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;,&lt;/span&gt;&lt;span&gt; Div&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;,&lt;/span&gt;&lt;span&gt; Mul&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;,&lt;/span&gt;&lt;span&gt; Sub}&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;pub fn &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;add&lt;/span&gt;&lt;span&gt;&amp;lt;A, B, C&amp;gt;(a&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;:&lt;/span&gt;&lt;span&gt; A, b&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;:&lt;/span&gt;&lt;span&gt; B) &lt;/span&gt;&lt;span style="color:#eceff4;"&gt;-&amp;gt;&lt;/span&gt;&lt;span&gt; C
+&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;where
+&lt;/span&gt;&lt;span&gt;    A&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;: &lt;/span&gt;&lt;span&gt;Add&amp;lt;B, Output = C&amp;gt;,
+&lt;/span&gt;&lt;span&gt;{
+&lt;/span&gt;&lt;span&gt;    a &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;+&lt;/span&gt;&lt;span&gt; b
+&lt;/span&gt;&lt;span&gt;}
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;pub fn &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;sub&lt;/span&gt;&lt;span&gt;&amp;lt;A, B, C&amp;gt;(a&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;:&lt;/span&gt;&lt;span&gt; A, b&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;:&lt;/span&gt;&lt;span&gt; B) &lt;/span&gt;&lt;span style="color:#eceff4;"&gt;-&amp;gt;&lt;/span&gt;&lt;span&gt; C
+&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;where
+&lt;/span&gt;&lt;span&gt;    A&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;: &lt;/span&gt;&lt;span&gt;Sub&amp;lt;B, Output = C&amp;gt;,
+&lt;/span&gt;&lt;span&gt;{
+&lt;/span&gt;&lt;span&gt;    a &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;-&lt;/span&gt;&lt;span&gt; b
+&lt;/span&gt;&lt;span&gt;}
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;pub fn &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;mul&lt;/span&gt;&lt;span&gt;&amp;lt;A, B, C&amp;gt;(a&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;:&lt;/span&gt;&lt;span&gt; A, b&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;:&lt;/span&gt;&lt;span&gt; B) &lt;/span&gt;&lt;span style="color:#eceff4;"&gt;-&amp;gt;&lt;/span&gt;&lt;span&gt; C
+&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;where
+&lt;/span&gt;&lt;span&gt;    A&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;: &lt;/span&gt;&lt;span&gt;Mul&amp;lt;B, Output = C&amp;gt;,
+&lt;/span&gt;&lt;span&gt;{
+&lt;/span&gt;&lt;span&gt;    a &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;*&lt;/span&gt;&lt;span&gt; b
+&lt;/span&gt;&lt;span&gt;}
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;pub fn &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;div&lt;/span&gt;&lt;span&gt;&amp;lt;A, B, C&amp;gt;(a&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;:&lt;/span&gt;&lt;span&gt; A, b&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;:&lt;/span&gt;&lt;span&gt; B) &lt;/span&gt;&lt;span style="color:#eceff4;"&gt;-&amp;gt;&lt;/span&gt;&lt;span&gt; C
+&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;where
+&lt;/span&gt;&lt;span&gt;    A&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;: &lt;/span&gt;&lt;span&gt;Div&amp;lt;B, Output = C&amp;gt;,
+&lt;/span&gt;&lt;span&gt;{
+&lt;/span&gt;&lt;span&gt;    a &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;/&lt;/span&gt;&lt;span&gt; b
+&lt;/span&gt;&lt;span&gt;}
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;h2 id="further-work"&gt;&lt;a class="anchor" href="#further-work"&gt;#&lt;/a&gt;
+Further work&lt;/h2&gt;
+&lt;p&gt;The above allows the first example, calculating the radius of a circle, to
+compile and run. But what about more useful examples like iterating over
+things, mapping them, and reducing them?&lt;/p&gt;
+&lt;pre data-lang="rust" style="background-color:#2e3440;color:#d8dee9;" class="language-rust "&gt;&lt;code class="language-rust" data-lang="rust"&gt;&lt;span style="color:#81a1c1;"&gt;use &lt;/span&gt;&lt;span&gt;lisp&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;::&lt;/span&gt;&lt;span&gt;prelude&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;::*&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;fn &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;add_one&lt;/span&gt;&lt;span&gt;(a&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;: &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;i32&lt;/span&gt;&lt;span&gt;) &lt;/span&gt;&lt;span style="color:#eceff4;"&gt;-&amp;gt; &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;i32 &lt;/span&gt;&lt;span&gt;{
+&lt;/span&gt;&lt;span&gt;    a &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;+ &lt;/span&gt;&lt;span style="color:#b48ead;"&gt;1
+&lt;/span&gt;&lt;span&gt;}
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;fn &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;main&lt;/span&gt;&lt;span&gt;() {
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;let&lt;/span&gt;&lt;span&gt; v &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;= &lt;/span&gt;&lt;span&gt;vec![&lt;/span&gt;&lt;span style="color:#b48ead;"&gt;1&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#b48ead;"&gt;2&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#b48ead;"&gt;3&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;let&lt;/span&gt;&lt;span&gt; res&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;: &lt;/span&gt;&lt;span style="color:#8fbcbb;"&gt;Vec&lt;/span&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;i32&lt;/span&gt;&lt;span&gt;&amp;gt; &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;= &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;eval&lt;/span&gt;&lt;span&gt;((to_vec&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span&gt;(reduce&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#b48ead;"&gt;0&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;,&lt;/span&gt;&lt;span&gt; add&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span&gt;(map&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;,&lt;/span&gt;&lt;span&gt; add_one&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span&gt;vec![&lt;/span&gt;&lt;span style="color:#b48ead;"&gt;1&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#b48ead;"&gt;2&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#b48ead;"&gt;3&lt;/span&gt;&lt;span&gt;]))))&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;    println!(&lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;&lt;/span&gt;&lt;span style="color:#ebcb8b;"&gt;{:?}&lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;,&lt;/span&gt;&lt;span&gt; res)&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;}
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;Wouldn't it be cool if this worked?&lt;/p&gt;
+&lt;p&gt;Alas, I couldn't figure out a way to do it. I was able to define the functions:&lt;/p&gt;
+&lt;pre data-lang="rust" style="background-color:#2e3440;color:#d8dee9;" class="language-rust "&gt;&lt;code class="language-rust" data-lang="rust"&gt;&lt;span style="color:#81a1c1;"&gt;use &lt;/span&gt;&lt;span&gt;std&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;::&lt;/span&gt;&lt;span&gt;iter&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;::&lt;/span&gt;&lt;span&gt;Map&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;pub fn &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;map&lt;/span&gt;&lt;span&gt;&amp;lt;I, E, F, R&amp;gt;(f&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;:&lt;/span&gt;&lt;span&gt; F, i&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;:&lt;/span&gt;&lt;span&gt; I) &lt;/span&gt;&lt;span style="color:#eceff4;"&gt;-&amp;gt; &lt;/span&gt;&lt;span&gt;Map&amp;lt;&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;I::&lt;/span&gt;&lt;span&gt;IntoIter, F&amp;gt;
+&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;where
+&lt;/span&gt;&lt;span&gt;    F&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;:&lt;/span&gt;&lt;span&gt; FnMut(E) -&amp;gt; R,
+&lt;/span&gt;&lt;span&gt;    I&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;: &lt;/span&gt;&lt;span style="color:#8fbcbb;"&gt;IntoIterator&lt;/span&gt;&lt;span&gt;&amp;lt;Item = E&amp;gt;,
+&lt;/span&gt;&lt;span&gt;{
+&lt;/span&gt;&lt;span&gt;    i&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;into_iter&lt;/span&gt;&lt;span&gt;()&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;map&lt;/span&gt;&lt;span&gt;(f)
+&lt;/span&gt;&lt;span&gt;}
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;pub fn &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;reduce&lt;/span&gt;&lt;span&gt;&amp;lt;I, E, F, R&amp;gt;(init&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;:&lt;/span&gt;&lt;span&gt; R, f&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;:&lt;/span&gt;&lt;span&gt; F, i&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;:&lt;/span&gt;&lt;span&gt; I) &lt;/span&gt;&lt;span style="color:#eceff4;"&gt;-&amp;gt;&lt;/span&gt;&lt;span&gt; R
+&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;where
+&lt;/span&gt;&lt;span&gt;    F&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;:&lt;/span&gt;&lt;span&gt; FnMut(R, E) -&amp;gt; R,
+&lt;/span&gt;&lt;span&gt;    I&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;: &lt;/span&gt;&lt;span style="color:#8fbcbb;"&gt;IntoIterator&lt;/span&gt;&lt;span&gt;&amp;lt;Item = E&amp;gt;,
+&lt;/span&gt;&lt;span&gt;{
+&lt;/span&gt;&lt;span&gt;    i&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;into_iter&lt;/span&gt;&lt;span&gt;()&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;fold&lt;/span&gt;&lt;span&gt;(init&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;,&lt;/span&gt;&lt;span&gt; f)
+&lt;/span&gt;&lt;span&gt;}
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;pub fn &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;to_vec&lt;/span&gt;&lt;span&gt;&amp;lt;T, I&amp;gt;(i&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;:&lt;/span&gt;&lt;span&gt; I) &lt;/span&gt;&lt;span style="color:#eceff4;"&gt;-&amp;gt; &lt;/span&gt;&lt;span style="color:#8fbcbb;"&gt;Vec&lt;/span&gt;&lt;span&gt;&amp;lt;T&amp;gt;
+&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;where
+&lt;/span&gt;&lt;span&gt;    I&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;: &lt;/span&gt;&lt;span style="color:#8fbcbb;"&gt;IntoIterator&lt;/span&gt;&lt;span&gt;&amp;lt;Item = T&amp;gt;,
+&lt;/span&gt;&lt;span&gt;{
+&lt;/span&gt;&lt;span&gt;    i&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;into_iter&lt;/span&gt;&lt;span&gt;()&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;collect&lt;/span&gt;&lt;span&gt;()
+&lt;/span&gt;&lt;span&gt;}
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;But I wasn't able to figure out how to make it possible to pass functions as
+arguments. I hit compile-time errors every time I tried.&lt;/p&gt;
+&lt;p&gt;For example, this does not compile:&lt;/p&gt;
+&lt;pre data-lang="rust" style="background-color:#2e3440;color:#d8dee9;" class="language-rust "&gt;&lt;code class="language-rust" data-lang="rust"&gt;&lt;span style="color:#81a1c1;"&gt;impl&lt;/span&gt;&lt;span&gt;&amp;lt;F, A, R&amp;gt; Node &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;for &lt;/span&gt;&lt;span&gt;F
+&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;where
+&lt;/span&gt;&lt;span&gt;  F&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;:&lt;/span&gt;&lt;span&gt; Fn(A) -&amp;gt; R
+&lt;/span&gt;&lt;span&gt;{
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;type Return = Self&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;fn &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;eval&lt;/span&gt;&lt;span&gt;(self) &lt;/span&gt;&lt;span style="color:#eceff4;"&gt;-&amp;gt; &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;Self::&lt;/span&gt;&lt;span&gt;Return {
+&lt;/span&gt;&lt;span&gt;        &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;self
+&lt;/span&gt;&lt;span&gt;    }
+&lt;/span&gt;&lt;span&gt;}
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;The error is:&lt;/p&gt;
+&lt;pre data-lang="txt" style="background-color:#2e3440;color:#d8dee9;" class="language-txt "&gt;&lt;code class="language-txt" data-lang="txt"&gt;&lt;span&gt;error[E0207]: the type parameter `A` is not constrained by the impl trait, self type, or predicates
+&lt;/span&gt;&lt;span&gt;  --&amp;gt; src\lisp\node.rs:98:9
+&lt;/span&gt;&lt;span&gt;   |
+&lt;/span&gt;&lt;span&gt;98 | impl&amp;lt;F, A, R&amp;gt; Node for F
+&lt;/span&gt;&lt;span&gt;   |         ^ unconstrained type parameter
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span&gt;error[E0207]: the type parameter `R` is not constrained by the impl trait, self type, or predicates
+&lt;/span&gt;&lt;span&gt;  --&amp;gt; src\lisp\node.rs:98:12
+&lt;/span&gt;&lt;span&gt;   |
+&lt;/span&gt;&lt;span&gt;98 | impl&amp;lt;F, A, R&amp;gt; Node for F
+&lt;/span&gt;&lt;span&gt;   |            ^ unconstrained type parameter
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;This &lt;em&gt;does&lt;/em&gt; compile:&lt;/p&gt;
+&lt;pre data-lang="rust" style="background-color:#2e3440;color:#d8dee9;" class="language-rust "&gt;&lt;code class="language-rust" data-lang="rust"&gt;&lt;span style="color:#81a1c1;"&gt;impl&lt;/span&gt;&lt;span&gt;&amp;lt;A, R&amp;gt; Node &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;for &lt;/span&gt;&lt;span&gt;fn(A) -&amp;gt; R
+&lt;/span&gt;&lt;span&gt;{
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;type Return = Self&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;fn &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;eval&lt;/span&gt;&lt;span&gt;(self) &lt;/span&gt;&lt;span style="color:#eceff4;"&gt;-&amp;gt; &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;Self::&lt;/span&gt;&lt;span&gt;Return {
+&lt;/span&gt;&lt;span&gt;        &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;self
+&lt;/span&gt;&lt;span&gt;    }
+&lt;/span&gt;&lt;span&gt;}
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;But if I try and use it like so:&lt;/p&gt;
+&lt;pre data-lang="rust" style="background-color:#2e3440;color:#d8dee9;" class="language-rust "&gt;&lt;code class="language-rust" data-lang="rust"&gt;&lt;span style="color:#81a1c1;"&gt;use &lt;/span&gt;&lt;span&gt;lisp&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;::&lt;/span&gt;&lt;span&gt;prelude&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;::*&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;fn &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;run&lt;/span&gt;&lt;span&gt;&amp;lt;A, R&amp;gt;(f&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;:&lt;/span&gt;&lt;span&gt; impl Fn(A) -&amp;gt; R, a&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;:&lt;/span&gt;&lt;span&gt; A) &lt;/span&gt;&lt;span style="color:#eceff4;"&gt;-&amp;gt;&lt;/span&gt;&lt;span&gt; R {
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;f&lt;/span&gt;&lt;span&gt;(a)
+&lt;/span&gt;&lt;span&gt;}
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;fn &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;hello&lt;/span&gt;&lt;span&gt;(name&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;:&lt;/span&gt;&lt;span&gt; String) {
+&lt;/span&gt;&lt;span&gt;    println!(&lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;Hello, &lt;/span&gt;&lt;span style="color:#ebcb8b;"&gt;{}&lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;!&amp;quot;&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;,&lt;/span&gt;&lt;span&gt; name)&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;}
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;fn &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;main&lt;/span&gt;&lt;span&gt;() {
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;let&lt;/span&gt;&lt;span&gt; name &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;= &lt;/span&gt;&lt;span style="color:#a3be8c;"&gt;&amp;quot;Sam&amp;quot;&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;to_owned&lt;/span&gt;&lt;span&gt;()&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;eval&lt;/span&gt;&lt;span&gt;((run&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;,&lt;/span&gt;&lt;span&gt; hello&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;,&lt;/span&gt;&lt;span&gt; name))&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;}
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;I get this error:&lt;/p&gt;
+&lt;pre data-lang="txt" style="background-color:#2e3440;color:#d8dee9;" class="language-txt "&gt;&lt;code class="language-txt" data-lang="txt"&gt;&lt;span&gt;error[E0277]: the trait bound `fn(std::string::String) {hello}: lisp::prelude::Node` is not satisfied
+&lt;/span&gt;&lt;span&gt;  --&amp;gt; examples\fn_as_arg.rs:13:10
+&lt;/span&gt;&lt;span&gt;   |
+&lt;/span&gt;&lt;span&gt;13 |     eval((run, hello, name));
+&lt;/span&gt;&lt;span&gt;   |          ^^^^^^^^^^^^^^^^^^ the trait `lisp::prelude::Node` is not implemented for `fn(std::string::String) {hello}`
+&lt;/span&gt;&lt;span&gt;   |
+&lt;/span&gt;&lt;span&gt;  ::: C:\Users\hello\Documents\GitHub\rust-lisp-with-traits\src\lisp\mod.rs:11:8
+&lt;/span&gt;&lt;span&gt;   |
+&lt;/span&gt;&lt;span&gt;11 |     N: Node&amp;lt;Return = R&amp;gt;,
+&lt;/span&gt;&lt;span&gt;   |        ---------------- required by this bound in `lisp::prelude::eval`
+&lt;/span&gt;&lt;span&gt;   |
+&lt;/span&gt;&lt;span&gt;   = note: required because of the requirements on the impl of `lisp::prelude::Node` for `(fn(_, std::string::String) -&amp;gt; _ {run::&amp;lt;std::string::String, _, _&amp;gt;}, fn(std::string::String) {hello}, std::string::String)`
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;If I implement the following:&lt;/p&gt;
+&lt;pre data-lang="rust" style="background-color:#2e3440;color:#d8dee9;" class="language-rust "&gt;&lt;code class="language-rust" data-lang="rust"&gt;&lt;span style="color:#81a1c1;"&gt;impl&lt;/span&gt;&lt;span&gt;&amp;lt;A, R&amp;gt; Node &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;for &lt;/span&gt;&lt;span&gt;Box&amp;lt;dyn &lt;/span&gt;&lt;span style="color:#8fbcbb;"&gt;Fn&lt;/span&gt;&lt;span&gt;(A) &lt;/span&gt;&lt;span style="color:#eceff4;"&gt;-&amp;gt;&lt;/span&gt;&lt;span&gt; R&amp;gt; {
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;type Return = Self&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;fn &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;eval&lt;/span&gt;&lt;span&gt;(self) &lt;/span&gt;&lt;span style="color:#eceff4;"&gt;-&amp;gt; &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;Self::&lt;/span&gt;&lt;span&gt;Return {
+&lt;/span&gt;&lt;span&gt;        &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;self
+&lt;/span&gt;&lt;span&gt;    }
+&lt;/span&gt;&lt;span&gt;}
+&lt;/span&gt;&lt;span&gt;
+&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;impl&lt;/span&gt;&lt;span&gt;&amp;lt;T&amp;gt; Node &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;for &lt;/span&gt;&lt;span&gt;Box&amp;lt;T&amp;gt; {
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;type Return =&lt;/span&gt;&lt;span&gt; T&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;span&gt;    &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;fn &lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;eval&lt;/span&gt;&lt;span&gt;(self) &lt;/span&gt;&lt;span style="color:#eceff4;"&gt;-&amp;gt; &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;Self::&lt;/span&gt;&lt;span&gt;Return {
+&lt;/span&gt;&lt;span&gt;        &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;*self
+&lt;/span&gt;&lt;span&gt;    }
+&lt;/span&gt;&lt;span&gt;}
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;I can get away with this:&lt;/p&gt;
+&lt;pre data-lang="rust" style="background-color:#2e3440;color:#d8dee9;" class="language-rust "&gt;&lt;code class="language-rust" data-lang="rust"&gt;&lt;span style="color:#88c0d0;"&gt;eval&lt;/span&gt;&lt;span&gt;((run&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#8fbcbb;"&gt;Box&lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;::&lt;/span&gt;&lt;span&gt;new(hello)&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;,&lt;/span&gt;&lt;span&gt; name))&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;And it works as expected, but feels a bit meh. If you've read this far, and
+know how to get this to work without needing to box the function, I'd love to
+hear from you. I'm &lt;a href="https://twitter.com/samwhoo"&gt;@samwhoo&lt;/a&gt; on Twitter, and the
+full code is here: &lt;a href="https://github.com/samwho/rust-lisp-with-traits"&gt;https://github.com/samwho/rust-lisp-with-traits&lt;/a&gt;.&lt;/p&gt;
+</content>
+            
+        </entry>
+    
+    
+        <entry xml:lang="en">
+            <title>Dude, where's my main?</title>
+            <published>2020-09-12T00:00:00+00:00</published>
+            <updated>2020-09-12T00:00:00+00:00</updated>
+            <author>
+            <name>Unknown</name>
+            </author>
+            <link rel="alternate" href="https://samwho.dev/blog/dude-wheres-my-main/" type="text/html"/>
+            <id>https://samwho.dev/blog/dude-wheres-my-main/</id>
+            
+            <summary type="html">&lt;p&gt;So I was writing a debugger. You know the sort of thing: breakpoints,
+stepping, checking the value of variables. It was going wonderfully until I
+tried to debug my debugger &lt;em&gt;with&lt;/em&gt; my debugger. &lt;code&gt;main&lt;/code&gt; was just... gone. It
+would run, but trying to set a breakpoint on it crashed the program. It took
+me weeks to figure out why. This is that story.&lt;/p&gt;
+</summary>
+            
+        </entry>
+    
+    
+        <entry xml:lang="en">
+            <title>Having a Baby</title>
+            <published>2020-04-03T00:00:00+00:00</published>
+            <updated>2020-04-03T00:00:00+00:00</updated>
+            <author>
+            <name>Unknown</name>
+            </author>
+            <link rel="alternate" href="https://samwho.dev/blog/having-a-baby/" type="text/html"/>
+            <id>https://samwho.dev/blog/having-a-baby/</id>
+            
+            <content type="html">&lt;p&gt;During the pregnancy of our first child, I kept a journal. I don’t keep journals. I don’t feel like I have much to say in them. This was different. The whole experience was new, and there was a lot to learn.&lt;/p&gt;
+&lt;p&gt;This post is a cleaning up and stitching together of that journal. It has ups and downs. It has useful tips and useless anecdotes. I’ve tried to keep as much in as I can, to capture the whole experience. A lot is missing.&lt;/p&gt;
+&lt;h2 id="beginning"&gt;&lt;a class="anchor" href="#beginning"&gt;#&lt;/a&gt;
+Beginning&lt;/h2&gt;
+&lt;p&gt;It became real on October 19th, 2018. We paid for an 8-week scan after having multiple positive pregnancy tests. Normally the first scan is at 12-weeks, but we were impatient.&lt;/p&gt;
+&lt;p&gt;&lt;img src="/images/8-weeks.jpg" alt="8-week scan, baby is barely visible in a sac of amniotic fluid" /&gt;&lt;/p&gt;
+&lt;p&gt;We called him “jellybean” for the longest time, but Sophie had decided on the name Max years prior. I liked it, too.&lt;/p&gt;
+&lt;h2 id="gestation"&gt;&lt;a class="anchor" href="#gestation"&gt;#&lt;/a&gt;
+Gestation&lt;/h2&gt;
+&lt;p&gt;This is the fancy word they use instead of “pregnancy.” We started noticing a bump at around 10-11 weeks, and by the 12-week scan we had a recognisable little human. It surprised me how much like a real person they look at such a young age.&lt;/p&gt;
+&lt;p&gt;&lt;img src="/images/12-weeks.jpg" alt="12 week scan, baby is much more visible and has an obvious head and body" /&gt;&lt;/p&gt;
+&lt;p&gt;The advice is to wait until 12 weeks before you tell people you’re pregnant. We didn’t, I don’t think anyone does. The idea is that the further through the pregnancy you get, the higher the odds you’ll make it all the way. The odds significantly improve at the end of the first trimester.&lt;/p&gt;
+&lt;p&gt;At 20 weeks you go for another scan and it’s at this one you can find out the sex of the baby. Not always, sometimes the baby refuses to co-operate, but for us it was obvious he was a boy. We had asked about the sex at 12 weeks. We’re first-time parents, we didn’t know. The sonographer sighed at us. “No.”&lt;/p&gt;
+&lt;p&gt;Toward the end of the second trimester we started to prepare all the stuff that we would need. You’re not supposed to buy car seats second hand, so we bought one new. We also caught a Mothercare closing down sale and got a buggy half-price. I had a lot of fun crashing it in to things to horrify onlookers.&lt;/p&gt;
+&lt;p&gt;Things I would recommend expecting parents buy: a waist-height changing table (your back will thank you), a yoga ball (bouncing makes babies sleepy), and a Perfect Prep machine if you’re bottle feeding. Things I would recommend you don’t buy: baby clothes. Everyone else will buy those for you.&lt;/p&gt;
+&lt;p&gt;At the start of the third trimester we learnt that Sophie had gestational diabetes. It’s a common complication, affecting 1 in 20 pregnancies. Sophie had to stab herself in the finger to take her blood sugar levels 4 times a day until the day she gave birth. It didn’t look any fun, and at first she struggled to draw enough blood for the tests. This meant she had to do it multiple times per reading sometimes. I couldn’t help, either, as she had to get used to doing it herself because I would be at work half of the time she had to them.&lt;/p&gt;
+&lt;p&gt;The worry with the diabetes is that because you’re not breaking down the sugar you take in, it means there’s more sugar going to your baby. This makes baby grow faster, and if it grows too fast it won’t be able to get out safely. Fortunately we had no worries there, as Max was consistently under the average weight until the day he was born.&lt;/p&gt;
+&lt;p&gt;Gestational diabetes meant we were now classed as a “high risk” pregnancy, and were assigned a consultant. Consultants are the top of the food chain, they are who the buck stops with when it comes to patient care. When we met our consultant, she was with a colleague. They had obviously worked together a long time, they were able to finish each other’s sentences and made a lot of jokes. I liked them a lot.&lt;/p&gt;
+&lt;p&gt;There was another minor complication in the timing of the pregnancy, which was that 7 months in to it we were planning to get married. The wedding planning had begun some time before we knew we were pregnant. The only thing it ended up changing was the dress.&lt;/p&gt;
+&lt;p&gt;The third trimester is also when we did some parenting classes. In the UK we have the “National Children’s Trust,” or NCT. They set up classes that last a couple of days where parents who are all due around the same time learn about how to look after their baby.&lt;/p&gt;
+&lt;p&gt;I remember almost nothing from the NCT classes. Their primary value, given we paid around £200 to attend, was the group of parents we instantly became friends with. It is literally a scheme where you pay for new friends, and it is worth it. We all still talk every day.&lt;/p&gt;
+&lt;p&gt;Toward the end of the pregnancy Sophie started wearing my t-shirts. I didn’t mind, except they fit her really well. She also became very tired, and spent most evenings asleep on the sofa. The calm before the storm, in a lot of ways.&lt;/p&gt;
+&lt;p&gt;Max’s due date came and went. This is normally not a worry, babies are late all the time, but the gestational diabetes makes getting him out a little more pressing.&lt;/p&gt;
+&lt;p&gt;There are a bunch of things you can do to try to bring on labour. A lot of them are myths but some of them are legit. Having sex has been shown to work. If it doesn’t, you can go for a “sweep.” This is as icky as it sounds. A midwife will sweep their finger around your cervix, separating parts of the amniotic sac from the cervix, releasing hormones that may start labour. Or may not.&lt;/p&gt;
+&lt;p&gt;If all of this fails, a hospital-based induction becomes necessary. On the 5th of June this is where we found ourselves.&lt;/p&gt;
+&lt;h2 id="induction"&gt;&lt;a class="anchor" href="#induction"&gt;#&lt;/a&gt;
+Induction&lt;/h2&gt;
+&lt;p&gt;One of the things I was worrying about as the partner in this process was getting to hospital when labour began. I don’t drive. Fortunately we had friends nearby who had offered to be our chauffeurs when the time came. We had a WhatsApp group called “Labour A-Team” and everything.&lt;/p&gt;
+&lt;p&gt;It was a relief when we got a phone call at lunch time on the 5th of June asking if we could make our way to the hospital. No panicking, no rushing. Our Labour A-Team still drove us, as the cost of parking at the hospital is astronomical. Packing our bags in to their car almost made it feel like a holiday.&lt;/p&gt;
+&lt;p&gt;The first thing we tried in hospital was a “pessary.” This is a strip of what felt like sandpaper that is inserted in to the vagina. Its job is to release synthetic oxytocin, which is a hormone that is known to help bring on labour (among many other things, you’ll hear a lot about oxytocin if you’re having a baby.)&lt;/p&gt;
+&lt;p&gt;I didn’t know this beforehand, but induction is a slow process. In my mind it sounded like an immediate intervention. You induce labour and wham!, things get going. Not so. There’s also the fun fact that hospitals can only deliver so many babies at a time. Our hospital had two surgical theatres in the maternity ward, and one must always be kept free for emergencies. If they're both occupied, no one can be induced. This means an emergency C-section can block all other deliveries.&lt;/p&gt;
+&lt;p&gt;Maternity wards are also loud. Midwives visit each bay every 4 hours to take observations, or “obs.” I thought this was an odd choice of abbreviation, given it’s also the abbreviation for “obstetrics.” Obs includes blood pressure, pulse, and a measure of baby’s heartbeat. There are also people in active labour who are yet to be transferred to a “delivery suite,” a private room where you can deliver your baby in relative comfort with your own personal midwife. People in active labour are not known for their serenity.&lt;/p&gt;
+&lt;p&gt;As there’s not a lot to do on maternity ward, and there are only so many crosswords I can bring myself to do per day, you can’t help but eavesdrop. Staff talk quite openly, and some the things we overheard were scary.&lt;/p&gt;
+&lt;p&gt;The maternity ward we were on was operating with 6 fewer staff than usual. Most of these being, ironically, people on maternity leave. The ward was closed to new arrivals as there weren’t enough staff to safely look after them, and they were directing people to other quite far away hospitals.&lt;/p&gt;
+&lt;p&gt;We also overheard that both surgical theatres were occupied multiple times, meaning any emergency that did come up was in a queue.&lt;/p&gt;
+&lt;p&gt;June 7th, 48 hours after we arrived, a midwife checks on us. No real progress. It’s time to move on to the next stage of induction. This involves manually breaking the amniotic sac, and has a high chance to kick start labour. The problem is that it has to be done in a delivery suite, and there are none available. As soon as one becomes available they’ll let us know.&lt;/p&gt;
+&lt;p&gt;What if we go in to labour before that? Best not to think about it.&lt;/p&gt;
+&lt;p&gt;June 8th, 72 hours after arrival. I want to talk about the chairs. There were 6 bays in our maternity ward, each with a hospital bed, a chair, and a curtain that can be drawn all the way around the bay. No two chairs were the same, and no single chair was comfortable. When we arrived 3 days prior, there was only one other person in the ward so I had a chance to sample my options. I went with a rock-solid reclining chair, thinking that the reclining functionality would outweigh the hardness when it came time to sleep.&lt;/p&gt;
+&lt;p&gt;I was wrong. The chair reclined, but reluctantly. You had to be pressing back hard on it for it to stay in a reclined position, and lying on the chair was an exercise in balance and stillness. Twice I woke up to being flung forward because I had moved in my sleep.&lt;/p&gt;
+&lt;p&gt;At around 5pm on June 8th, 77 hours after arriving, a delivery suite became available and we were moved down to it. What a difference! Spacious, private, personal bathroom, soft mats to lie on. I felt like royalty.&lt;/p&gt;
+&lt;p&gt;A little while before we moved down to the delivery suite, Sophie’s contractions started getting painful. She had been contracting most of the time we had been in hospital, but until now they had only been a minor annoyance. Good timing.&lt;/p&gt;
+&lt;h2 id="labour"&gt;&lt;a class="anchor" href="#labour"&gt;#&lt;/a&gt;
+Labour&lt;/h2&gt;
+&lt;p&gt;Things started happening faster when we moved to the delivery suite. We moved at around 5pm and the plan was to break Sophie’s waters around midnight. If this didn’t start labour within 2 hours, she would be put on an oxytocin drip. After days of nothing, this was welcome but nerve-wracking.&lt;/p&gt;
+&lt;p&gt;We had our own midwife now whose job it was to guide us through this process. She was patient but firm. She explained the various things in the room and talked us through what she was doing as she did it. When nothing needed doing we talked casually about how she got in to midwifery, it was nice.&lt;/p&gt;
+&lt;p&gt;Sophie was given a meal which was not optional. She was told she would need the energy, and they needed to take her final blood sugar reading before going in to labour.&lt;/p&gt;
+&lt;p&gt;At 7:40pm someone came around to put in a cannula. This is a small flexible tube that’s injected in to the hand so that if any drugs need administering, they can be, and quickly. Sophie has awkward veins, and it took three attempts to get it in right. Her wrists were swollen afterwards.&lt;/p&gt;
+&lt;p&gt;At 21:20pm contractions were much more frequent and much more painful. This was good and bad news. Good: things are progressing. Bad: things hurt more now. I do what I can, holding her and offering encouraging words, but can’t help but feel useless.&lt;/p&gt;
+&lt;p&gt;1:05am, June 9th. In the 4 hours that have passed the contractions have become exponentially more painful. I’d been keeping an eye on the readings, which I had quizzed every midwife about so far. There’s a line that measures contraction intensity, and it goes from 0 to 127. When it hits 127, the midwife presses a button that seems to make it go back to 0. I’m assuming this is like when you put a bowl on some scales and press a button to reset the scales to 0 with the bowl on them. This button was getting pressed a lot.&lt;/p&gt;
+&lt;p&gt;The progression of painkillers we were offered was: gas and air, ibuprofen, codeine, epidural. Gas and air made Sophie projectile vomit, and ibuprofen and codeine did nothing for the pain. Epidurals are no joke. Before having one I had to read and sign a form detailing the risks, as Sophie was in too much pain to read anything. It could have said anything, I think I would have signed it regardless.&lt;/p&gt;
+&lt;p&gt;After signing the form you need to wait for an anaesthetist to become available. We got lucky, one had just come out of theatre and was able to squeeze us in before his next thing. He quietly and professionally pushed a needle in to Sophie’s spine, and within minutes the pain was gone. The needle part was worrying, as every contraction causes Sophie to convulse. I didn’t ask what happens if she has a contraction while the needle was in there.&lt;/p&gt;
+&lt;p&gt;At 2:15am I found myself lying on the floor. In all of the excitement I pulled a muscle in my back. Now she had the epidural in, Sophie was back to her normal self. She had a button she was allowed to press if she felt the pain coming back, but other than that she said all she could feel was the pressure of each contraction. None of the pain. She began extracting our midwife’s life story. I took a picture of the ceiling.&lt;/p&gt;
+&lt;p&gt;&lt;img src="/images/ceiling.jpeg" alt="A picture of some ceiling tiles" /&gt;&lt;/p&gt;
+&lt;p&gt;At 3:15am our midwife checked how dilated we were. This refers to diameter of the cervix opening, which expands during labour to allow the baby to come out. 10 centimetres! This is the ideal size, and it happened much faster than anyone was expecting. The end is in sight. The plan was to wait for an hour for the body to do its thang and push the baby on its own a bit before starting pushing.&lt;/p&gt;
+&lt;h2 id="delivery"&gt;&lt;a class="anchor" href="#delivery"&gt;#&lt;/a&gt;
+Delivery&lt;/h2&gt;
+&lt;p&gt;An hour passed, some progress was made, and it was time to start pushing. One of the downsides to having an epidural is that it makes you numb from the waist down. It’s difficult to push when you’re numb from the waist down. As each contraction was coming, the midwife told Sophie to push as if she was pushing a poo out. Sophie said she tried but it was really hard to tell if it made any difference.&lt;/p&gt;
+&lt;p&gt;In the downtime between pushes, I couldn’t help but look at the monitors. The line tracking Max’s heart rate had become erratic. I could tell the midwife was keeping an eye on it, too. She must have caught me looking at it because she explained that it’s not worrying yet, but does create a sense of urgency.&lt;/p&gt;
+&lt;p&gt;When we were first brought down to the delivery suite, one of the parts of the room that was explained to us was a big red button above the bed. This was for the midwife to press in an emergency. When pressed, a team of people would very quickly pour in to the room. It’s important to remain calm.&lt;/p&gt;
+&lt;p&gt;To my surprise, when she pressed the button I did remain calm. This was due, in part, to noticing a friendly face: our consultant. She had popped in about 6 hours earlier to say hi, and that if all went well it would be the last time we saw her. It was good fortunate she was working tonight, as we later learned she was covering a shift for someone else.&lt;/p&gt;
+&lt;p&gt;Her assessment was that Max had his umbilical cord wrapped around him in such a way that no amount of pushing was going to get him out. To make matters worse, he had pooped. This can get in to the lungs and make it hard for him to breathe, so getting him out was now an extremely high priority.&lt;/p&gt;
+&lt;p&gt;The first port of call was a bit more pushing under the supervision of our consultant. When that failed, it was time to try an “instrumental delivery.” This is where you grab the baby with a pair of tongs (“forceps”) and pull it out. I watched as our consultant clipped two halves of a pair of forceps together, yawning as she did.&lt;/p&gt;
+&lt;p&gt;By god do they pull, too. Our consultant was a fairly small woman, but she had one foot on the bed and lent back on those forceps with all her weight. The baby didn’t budge.&lt;/p&gt;
+&lt;p&gt;Our consultant wasn’t fucking around, either. Before she started with the forceps she explained what she was about to do. She looked Sophie directly in the eye and said: “this is extremely important: when I say push you must push, when I say stop you must stop immediately. Do you understand?”&lt;/p&gt;
+&lt;p&gt;As well as our consultant, there were around 8 other people all doing things. I’ve no idea what. Sophie was vomiting again so it was my job to fetch and hold cardboard bowls. I focused on it intently.&lt;/p&gt;
+&lt;p&gt;Despite all of this the baby wouldn’t come out. In between pulls our consultant did an episiotomy. This is where a cut is made at the bottom of the vagina to make the opening larger. The cut was extended twice as the pulling got more urgent.&lt;/p&gt;
+&lt;p&gt;After what felt like forever, at 6:23am, the baby just came out. All in one go. Cord well and truly wrapped around his neck, to which our consultant pointed and said: “ha, knew it.” Baby was put on mummy for its first feed as the medical team worked on sewing mummy back up.&lt;/p&gt;
+&lt;p&gt;While this was happening, our consultant quipped: “I have good news. Your baby has a perfectly functioning bottom. He is currently pooing on you.”&lt;/p&gt;
+&lt;p&gt;Straight after baby came out I was handed a pair of strange circular scissors. I wasn’t expecting it, and must have looked confused. “Did you think I was going to take this moment away from you?” our consultant smirked. All the scenes in films where people snip through the umbilical cord in one clean motion are a filthy lie. It’s extremely tough, and takes a few goes.&lt;/p&gt;
+&lt;p&gt;After a few minutes of relief 2 things went wrong in quick succession. Max started struggling to breathe, and Sophie started haemorrhaging.&lt;/p&gt;
+&lt;p&gt;Max was taken and placed in an incubator on the other side of the room. A paediatrician started examining him. I felt he was in good hands, and focused on my wife.&lt;/p&gt;
+&lt;p&gt;Sophie had turned a worrying shade of white. I asked what was happening. No-one answered, or no-one heard me. An alarm started going off, with a robotic voice repeating the phrase “major obstetric haemorrhage” over and over. There were now a lot more people in the room.&lt;/p&gt;
+&lt;p&gt;Sophie asked me how Max was. I didn’t know, and didn't want to get in anyone's way. Someone suggested I go and see him, though, so I did. The paediatrician introduced himself to me as Si, short for Simon, I think, and asked me if I was worried. I said yes, confused by such an obviously silly question.&lt;/p&gt;
+&lt;p&gt;He explained to me that the baby had breathed in some of its own poo while in the womb. This isn’t usually a problem, and will clear on its own shortly after birth, but he was keeping an eye on him to be on the safe side. This was reassuring, but it was at this point I made a critical mistake.&lt;/p&gt;
+&lt;p&gt;I looked back at Sophie.&lt;/p&gt;
+&lt;p&gt;Sophie herself was fine, she was asking me how the baby was, but her blood was everywhere. It was visibly pouring out of her and pooling around the bed.&lt;/p&gt;
+&lt;p&gt;Our consultant was pressing on part of Sophie’s stomach with one hand and trying to stop the blood flow with another. A very tall man was inserting another cannula in to her arm, a bag of blood ready to go. Someone else was injecting her with something to help her blood clot. Someone else was cleaning up vomit. Various other people were standing around attentively, holding things that might be needed.&lt;/p&gt;
+&lt;p&gt;People kept asking me if I consent to this, do I agree to that, explaining what each thing was before it was used. I wish I could have signed a form up front stating I don’t know fucking anything about medical science and I trust the hospital staff entirely. Each second wasted getting my consent could have been a second Sophie needed.&lt;/p&gt;
+&lt;p&gt;I started thinking about how impossible it would be to raise a baby on my own. I started thinking about what I would do if I had to go back home with neither a wife or a child. I couldn’t breathe.&lt;/p&gt;
+&lt;p&gt;Despite an overwhelming desire to collapse in to a crying mess in the hallway outside, I kept calm. I breathed, and a few minutes later our consultant announced that the blood loss was under control.&lt;/p&gt;
+&lt;h2 id="recovery"&gt;&lt;a class="anchor" href="#recovery"&gt;#&lt;/a&gt;
+Recovery&lt;/h2&gt;
+&lt;p&gt;&lt;img src="/images/born.jpeg" alt="Baby Max, a few minutes after birth, in an incubator wrapped in a towl and wearing a fluffy hat. He&amp;#39;s looking calmly toward the camera." /&gt;&lt;/p&gt;
+&lt;p&gt;The problem with giving birth at 6:23am after spending three days in hospital barely getting any sleep is that you’re tired, but you have to start being a parent straight away. I’d just pulled an all-nighter, Sophie was asleep, the medical team had dispersed and it was just me, the baby, and a midwife.&lt;/p&gt;
+&lt;p&gt;The first day I flew mostly solo. We had to wake Sophie up every hour or two to feed Max, but other than that it was him and me. Babies don’t need a whole lot of attention at the beginning. You need to change them when they poop, feed them when they’re hungry, cuddle them a bit, but other than that they sleep. The only problem is that they won’t go longer than an hour without needing &lt;em&gt;something&lt;/em&gt;.&lt;/p&gt;
+&lt;p&gt;What they tell you about the first poops is true. It is an awful substance. It sticks to skin in much the same way treacle does, but isn’t delicious. The upside, though, is that all of the subsequent poops are trivial in comparison.&lt;/p&gt;
+&lt;p&gt;The midwife stood by me as I changed this first nappy. She wasn’t patronising or bossy or judgmental. She talked me through the steps, answered my questions, and smiled at me when it was done. Her presence was reassuring, and she made me feel well looked after.&lt;/p&gt;
+&lt;p&gt;Monday, 10th of June. 5 days after arriving at hospital to be induced. Sophie’s blood iron levels had gotten very low, so a blood transfusion was needed before we could go home. We’d been moved out of the delivery suite and in to the post-delivery ward.&lt;/p&gt;
+&lt;p&gt;I thought the pre-delivery ward was loud, this was a whole other level. Rarely did 10 consecutive minutes pass without a baby crying. On top of that, it was kept at 25C at all times to keep the babies warm. 25C is an obscene temperature, and I spent the whole time on this ward damp.&lt;/p&gt;
+&lt;p&gt;The blood transfusion needed yet another cannula. This brought the total up to three simultaneous cannulas. Sophie’s arms looked like two strange, bruise-based tattoo sleeves.&lt;/p&gt;
+&lt;p&gt;By the evening the blood transfusion was done, but we had to stay the night to be observed. I had been sleeping in a chair or on the floor for 5 days, so we thought it would be a good idea if I went home and got a proper night of sleep.&lt;/p&gt;
+&lt;p&gt;After the delivery went south I had phoned my mum to ask if she would come stay with us a little while to help. She arrived that evening, took me home, we got a McDonald’s, watched some half-arsed TV and then I showered and went to bed. It was a feeling unlike any other, and I’ll never take beds for granted ever again.&lt;/p&gt;
+&lt;p&gt;I woke up on Tuesday the 11th of June at 10am. I had 26 notifications and 3 missed calls. I had been sleeping through my alarm for 2 hours.&lt;/p&gt;
+&lt;p&gt;We didn’t know this, but the second night is well-known for being a “cluster-feeding” night. This is when babies demand regular feeds and sleep in extremely short bursts. It was also the night Max found his voice. I got up, packed, wolfed down some breakfast and raced to the hospital.&lt;/p&gt;
+&lt;p&gt;When I got there, Sophie was a wreck. She hadn’t slept all night and a doctor had just visited to tell us we had to stay another night because Max has a heart murmur. These are little holes in your heart that everyone is born with, but they close shortly after birth. Max’s hadn’t, and they wanted to keep an eye on it.&lt;/p&gt;
+&lt;p&gt;The night of Tuesday 11th was really hard. Max cried a lot, cluster-fed, and wouldn't sleep. Twice we woke up to the sound of screaming, a midwife gently shaking us asking us to feed our baby. We felt like awful parents, but the depth of our tiredness was endless.&lt;/p&gt;
+&lt;p&gt;Wednesday the 12th of June. A full week after arriving at hospital. By now I was sharing the bed with Sophie and I dared them to tell me I can’t. Max had calmed down on the cluster feeding and was sleeping a bit more regularly. We were still playing a waiting game that felt like it had no end, so we did a load of crosswords and eaves-dropped on the midwives all day, hoping to overhear something about Max.&lt;/p&gt;
+&lt;p&gt;Some time in the middle of the night on the 13th of June, a doctor visited us from the Neonatal Intensive Care Unit (NICU). She listened to Max’s heart murmur and told us it was small. She could tell because the sound of the blood pumping through it was quite loud, likening it to pushing water through a thin tube. She said she’s need to do an ultrasound on it to be 100% certain it was safe for us to leave, but she didn’t know when one would become available.&lt;/p&gt;
+&lt;p&gt;Throughout Thursday we really started losing it. The constant noise, lack of sleep, and high temperature was clawing at our sanity. We asked every midwife that came close to us to check on the status of our ultrasound. We asked about discharging ourselves, which they recommended against. We asked if we could schedule the appointment for some time in the future, but they said no.&lt;/p&gt;
+&lt;p&gt;This nagging must have caused some kind of a stir, though, because at 17:57pm on Thursday the 13th of June we were discharged, with an appointment for an ultrasound the following day. We had spent 198 hours and 20 minutes in hospital. Getting our boy home was the biggest relief I’ve ever had, even if Max wasn’t sure about it.&lt;/p&gt;
+&lt;p&gt;&lt;img src="/images/miffed.jpg" alt="Baby Max looking very annoyed at the camera" /&gt;&lt;/p&gt;
+&lt;h2 id="the-days-to-come"&gt;&lt;a class="anchor" href="#the-days-to-come"&gt;#&lt;/a&gt;
+The days to come&lt;/h2&gt;
+&lt;p&gt;I'd like to write about the first months of parenthood, but this feels like a good point to wrap this post up. It's longer than I planned it to be, and I imagine if you've got this far you need a break! I find it difficult to write about the difficult things in life, and this was one of the most difficult experiences I've ever had. If you read to the end, from the bottom of my heart: thank you.&lt;/p&gt;
+</content>
+            
+        </entry>
+    
+    
+        <entry xml:lang="en">
+            <title>A Logical Way to Split Long Lines</title>
+            <published>2019-05-27T00:00:00+00:00</published>
+            <updated>2019-05-27T00:00:00+00:00</updated>
+            <author>
+            <name>Unknown</name>
+            </author>
+            <link rel="alternate" href="https://samwho.dev/blog/a-logical-way-to-split-long-lines/" type="text/html"/>
+            <id>https://samwho.dev/blog/a-logical-way-to-split-long-lines/</id>
+            
+            <content type="html">&lt;p&gt;Splitting long lines is something we do every day as programmers, but rarely do I hear discussion about how best to do it. Considering our industry-wide obsession with “best practices,” line breaks have managed to stay relatively free from scrutiny.&lt;/p&gt;
+&lt;p&gt;A few years ago, I learned a method for splitting lines that is logical, language-independent and, most importantly, produces good results.&lt;/p&gt;
+&lt;h2 id="the-rectangle-method"&gt;&lt;a class="anchor" href="#the-rectangle-method"&gt;#&lt;/a&gt;
+The Rectangle Method&lt;/h2&gt;
+&lt;p&gt;The core principal of this method is to always make sure you can draw a rectangle around an element and all of its children, without having to overlap with any unrelated elements. The outcome is that related things stay closer together, and our eyes rarely have to dart between distant locations.&lt;/p&gt;
+&lt;p&gt;Confused? So was I. Let’s walk through an example.&lt;/p&gt;
+&lt;pre data-lang="java" style="background-color:#2e3440;color:#d8dee9;" class="language-java "&gt;&lt;code class="language-java" data-lang="java"&gt;&lt;span style="color:#8fbcbb;"&gt;JavacParser&lt;/span&gt;&lt;span&gt; parser &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;=&lt;/span&gt;&lt;span&gt; parserFactory&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;newParser&lt;/span&gt;&lt;span&gt;(javaInput&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;getText&lt;/span&gt;&lt;span&gt;()&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#616e88;"&gt;/*keepDocComments=*/ &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;true&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#616e88;"&gt;/*keepEndPos=*/ &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;true&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#616e88;"&gt;/*keepLineMap=*/ &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;true&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;This line is 139 characters long and was taken from the source code of &lt;a href="https://github.com/google/google-java-format/blob/64242e17f5478eb07a2ca7e409382271765f2524/core/src/main/java/com/google/googlejavaformat/java/Formatter.java#L140-L145"&gt;google-java-format&lt;/a&gt;. It is composed of a number of elements:&lt;/p&gt;
+&lt;ol&gt;
+&lt;li&gt;A variable declaration. This encompasses the entire line.&lt;/li&gt;
+&lt;li&gt;The variable declaration splits in to two halves: the type and name on the left hand side, and the expression on the right hand side.&lt;/li&gt;
+&lt;li&gt;The expression is a single method call, which could be split in to the receiver, method name, and its arguments.&lt;/li&gt;
+&lt;li&gt;Lastly, each method argument is its own element. Comments included.&lt;/li&gt;
+&lt;/ol&gt;
+&lt;p&gt;It’s easy to draw a rectangle around this, it’s just one line. But if we say that our maximum allowed line length is 80, this line is a bit too long and needs to be split.&lt;/p&gt;
+&lt;h3 id="deciding-where-to-make-the-first-split"&gt;&lt;a class="anchor" href="#deciding-where-to-make-the-first-split"&gt;#&lt;/a&gt;
+Deciding where to make the first split&lt;/h3&gt;
+&lt;p&gt;What do we mean when we say “an element and all of its children?” Programming language syntax can usually be represented as a tree. Our example would look something like this:&lt;/p&gt;
+&lt;pre data-lang="txt" style="background-color:#2e3440;color:#d8dee9;" class="language-txt "&gt;&lt;code class="language-txt" data-lang="txt"&gt;&lt;span&gt;        Variable declaration
+&lt;/span&gt;&lt;span&gt;       /                    \
+&lt;/span&gt;&lt;span&gt; Type + name             Expression
+&lt;/span&gt;&lt;span&gt;                        /          \
+&lt;/span&gt;&lt;span&gt;                   Receiver     Method call
+&lt;/span&gt;&lt;span&gt;                               /           \
+&lt;/span&gt;&lt;span&gt;                            Name         Arguments
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;We want to split such that you can draw a rectangle around each subtree, without touching any other subtree.&lt;/p&gt;
+&lt;p&gt;A natural place to make this first split would be just after the &lt;code&gt;=&lt;/code&gt;:&lt;/p&gt;
+&lt;pre data-lang="java" style="background-color:#2e3440;color:#d8dee9;" class="language-java "&gt;&lt;code class="language-java" data-lang="java"&gt;&lt;span style="color:#8fbcbb;"&gt;JavacParser&lt;/span&gt;&lt;span&gt; parser &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;=
+&lt;/span&gt;&lt;span&gt;    parserFactory&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;newParser&lt;/span&gt;&lt;span&gt;(javaInput&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;getText&lt;/span&gt;&lt;span&gt;()&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#616e88;"&gt;/*keepDocComments=*/ &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;true&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#616e88;"&gt;/*keepEndPos=*/ &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;true&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#616e88;"&gt;/*keepLineMap=*/ &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;true&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;This passes the rectangle test because we can draw a rectangle around every element and its children without overlapping with unrelated elements:&lt;/p&gt;
+&lt;pre data-lang="txt" style="background-color:#2e3440;color:#d8dee9;" class="language-txt "&gt;&lt;code class="language-txt" data-lang="txt"&gt;&lt;span&gt;┌──────────────────────────────────────────────────────┐
+&lt;/span&gt;&lt;span&gt;│┌──────────────────────┐                              │
+&lt;/span&gt;&lt;span&gt;││ JavacParser parser = │                              │
+&lt;/span&gt;&lt;span&gt;│└─┬────────────────────┴─────────────────────────────┐│
+&lt;/span&gt;&lt;span&gt;│  │ parserFactory.newParser(javaInput.getText(), ... ││
+&lt;/span&gt;&lt;span&gt;│  └──────────────────────────────────────────────────┘│
+&lt;/span&gt;&lt;span&gt;└──────────────────────────────────────────────────────┘
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;One big rectangle around the whole thing, and two smaller rectangles around each the declaration and assignment. Note that no rectangle overlaps any other rectangle.&lt;/p&gt;
+&lt;p&gt;It’s good progress, but the second line is still 118 characters long so needs splitting again.&lt;/p&gt;
+&lt;p&gt;Before doing this, I want to show how this would look if we split a little differently:&lt;/p&gt;
+&lt;pre data-lang="java" style="background-color:#2e3440;color:#d8dee9;" class="language-java "&gt;&lt;code class="language-java" data-lang="java"&gt;&lt;span style="color:#8fbcbb;"&gt;JavacParser&lt;/span&gt;&lt;span&gt; parser &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;=&lt;/span&gt;&lt;span&gt; parserFactory&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;newParser&lt;/span&gt;&lt;span&gt;(
+&lt;/span&gt;&lt;span&gt;  javaInput&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;getText&lt;/span&gt;&lt;span&gt;()&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#616e88;"&gt;/*keepDocComments=*/ &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;true&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#616e88;"&gt;/*keepEndPos=*/ &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;true&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#616e88;"&gt;/*keepLineMap=*/ &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;true&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;This doesn’t pass the rectangle test:&lt;/p&gt;
+&lt;pre data-lang="txt" style="background-color:#2e3440;color:#d8dee9;" class="language-txt "&gt;&lt;code class="language-txt" data-lang="txt"&gt;&lt;span&gt;                     ┌────────────────────────────────┐
+&lt;/span&gt;&lt;span&gt;JavacParser parser = │ parserFactory.newParser(       │
+&lt;/span&gt;&lt;span&gt;┌────────────────────┘                                │
+&lt;/span&gt;&lt;span&gt;│ javaInput.getText(), /*keepDocComments=*/ true, ... │
+&lt;/span&gt;&lt;span&gt;└─────────────────────────────────────────────────────┘
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;It’s not possible to draw a rectangle around the right hand side of the &lt;code&gt;=&lt;/code&gt; and catch all of its children without also catching the left hand side of the &lt;code&gt;=&lt;/code&gt;. It’s correct that the rectangle method flags this as a bad split. There’s an awful long way to travel from &lt;code&gt;newParser&lt;/code&gt; to its first argument, which might result in your eyes having to dart back and forth more than necessary.&lt;/p&gt;
+&lt;h3 id="deciding-where-to-make-the-second-split"&gt;&lt;a class="anchor" href="#deciding-where-to-make-the-second-split"&gt;#&lt;/a&gt;
+Deciding where to make the second split&lt;/h3&gt;
+&lt;p&gt;There are a couple of ways to make the second split, but the one I would go with is this:&lt;/p&gt;
+&lt;pre data-lang="java" style="background-color:#2e3440;color:#d8dee9;" class="language-java "&gt;&lt;code class="language-java" data-lang="java"&gt;&lt;span style="color:#8fbcbb;"&gt;JavacParser&lt;/span&gt;&lt;span&gt; parser &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;=
+&lt;/span&gt;&lt;span&gt;    parserFactory&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;newParser&lt;/span&gt;&lt;span&gt;(
+&lt;/span&gt;&lt;span&gt;        javaInput&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;getText&lt;/span&gt;&lt;span&gt;()&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#616e88;"&gt;/*keepDocComments=*/ &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;true&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#616e88;"&gt;/*keepEndPos=*/ &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;true&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#616e88;"&gt;/*keepLineMap=*/ &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;true&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;Let’s see how that looks with some rectangles around it:&lt;/p&gt;
+&lt;pre data-lang="txt" style="background-color:#2e3440;color:#d8dee9;" class="language-txt "&gt;&lt;code class="language-txt" data-lang="txt"&gt;&lt;span&gt;┌────────────────────────────────────────────────────────────┐
+&lt;/span&gt;&lt;span&gt;│┌──────────────────────┐                                    │
+&lt;/span&gt;&lt;span&gt;││ JavacParser parser = │                                    │
+&lt;/span&gt;&lt;span&gt;│└─┬────────────────────┴─────────────────────────────┐      │
+&lt;/span&gt;&lt;span&gt;│  │ parserFactory.newParser(                         │      │
+&lt;/span&gt;&lt;span&gt;│  └─┬────────────────────────────────────────────────┴────┐ │
+&lt;/span&gt;&lt;span&gt;│    │ javaInput.getText(), /*keepDocComments=*/ true, ... │ │
+&lt;/span&gt;&lt;span&gt;│    └─────────────────────────────────────────────────────┘ │
+&lt;/span&gt;&lt;span&gt;└────────────────────────────────────────────────────────────┘
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;We’re still good! Note that the above doesn’t draw a rectangle around every element we could, mostly due to space limitations. You can also draw a rectangle from &lt;code&gt;parserFactory.newParser&lt;/code&gt; around everything else after it.&lt;/p&gt;
+&lt;p&gt;Another way of doing the split that would also pass the rectangle test is:&lt;/p&gt;
+&lt;pre data-lang="java" style="background-color:#2e3440;color:#d8dee9;" class="language-java "&gt;&lt;code class="language-java" data-lang="java"&gt;&lt;span style="color:#8fbcbb;"&gt;JavacParser&lt;/span&gt;&lt;span&gt; parser &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;=
+&lt;/span&gt;&lt;span&gt;    parserFactory
+&lt;/span&gt;&lt;span&gt;        &lt;/span&gt;&lt;span style="color:#eceff4;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;newParser&lt;/span&gt;&lt;span&gt;(
+&lt;/span&gt;&lt;span&gt;            javaInput&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;getText&lt;/span&gt;&lt;span&gt;()&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#616e88;"&gt;/*keepDocComments=*/ &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;true&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#616e88;"&gt;/*keepEndPos=*/ &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;true&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#616e88;"&gt;/*keepLineMap=*/ &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;true&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;But splitting at the &lt;code&gt;.&lt;/code&gt; feels a little too eager to me. You can use less vertical space and lose no clarity by leaving that line as one.&lt;/p&gt;
+&lt;p&gt;Sadly our third line is still 94 characters long, and needs to be split yet again.&lt;/p&gt;
+&lt;h2 id="deciding-where-to-make-the-third-split"&gt;&lt;a class="anchor" href="#deciding-where-to-make-the-third-split"&gt;#&lt;/a&gt;
+Deciding where to make the third split&lt;/h2&gt;
+&lt;p&gt;Again, there are multiple routes for this one but I would go for the following:&lt;/p&gt;
+&lt;pre data-lang="java" style="background-color:#2e3440;color:#d8dee9;" class="language-java "&gt;&lt;code class="language-java" data-lang="java"&gt;&lt;span style="color:#8fbcbb;"&gt;JavacParser&lt;/span&gt;&lt;span&gt; parser &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;=
+&lt;/span&gt;&lt;span&gt;    parserFactory&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;newParser&lt;/span&gt;&lt;span&gt;(
+&lt;/span&gt;&lt;span&gt;        javaInput&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;getText&lt;/span&gt;&lt;span&gt;()&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;,
+&lt;/span&gt;&lt;span&gt;        &lt;/span&gt;&lt;span style="color:#616e88;"&gt;/*keepDocComments=*/ &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;true&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;,
+&lt;/span&gt;&lt;span&gt;        &lt;/span&gt;&lt;span style="color:#616e88;"&gt;/*keepEndPos=*/ &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;true&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;,
+&lt;/span&gt;&lt;span&gt;        &lt;/span&gt;&lt;span style="color:#616e88;"&gt;/*keepLineMap=*/ &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;true&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;With rectangles:&lt;/p&gt;
+&lt;pre data-lang="txt" style="background-color:#2e3440;color:#d8dee9;" class="language-txt "&gt;&lt;code class="language-txt" data-lang="txt"&gt;&lt;span&gt;┌──────────────────────────────────┐
+&lt;/span&gt;&lt;span&gt;│┌──────────────────────┐          │
+&lt;/span&gt;&lt;span&gt;││ JavacParser parser = │          │
+&lt;/span&gt;&lt;span&gt;│└─┬────────────────────┴─────┐    │
+&lt;/span&gt;&lt;span&gt;│  │ parserFactory.newParser( │    │
+&lt;/span&gt;&lt;span&gt;│  └─┬────────────────────────┴───┐│
+&lt;/span&gt;&lt;span&gt;│    │ javaInput.getText(),       ││
+&lt;/span&gt;&lt;span&gt;│    ├────────────────────────────┤│
+&lt;/span&gt;&lt;span&gt;│    │ /*keepDocComments=*/ true, ││
+&lt;/span&gt;&lt;span&gt;│    ├────────────────────────────┤│
+&lt;/span&gt;&lt;span&gt;│    │ /*keepEndPos=*/ true,      ││
+&lt;/span&gt;&lt;span&gt;│    ├────────────────────────────┤│
+&lt;/span&gt;&lt;span&gt;│    │ /*keepLineMap=*/ true);    ││
+&lt;/span&gt;&lt;span&gt;│    └────────────────────────────┘│
+&lt;/span&gt;&lt;span&gt;└──────────────────────────────────┘
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;Again, for space reasons, not all possible rectangles have been drawn.&lt;/p&gt;
+&lt;p&gt;We could have also had multiple arguments per line:&lt;/p&gt;
+&lt;pre data-lang="java" style="background-color:#2e3440;color:#d8dee9;" class="language-java "&gt;&lt;code class="language-java" data-lang="java"&gt;&lt;span style="color:#8fbcbb;"&gt;JavacParser&lt;/span&gt;&lt;span&gt; parser &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;=
+&lt;/span&gt;&lt;span&gt;    parserFactory&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;newParser&lt;/span&gt;&lt;span&gt;(
+&lt;/span&gt;&lt;span&gt;        javaInput&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;.&lt;/span&gt;&lt;span style="color:#88c0d0;"&gt;getText&lt;/span&gt;&lt;span&gt;()&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#616e88;"&gt;/*keepDocComments=*/ &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;true&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;,
+&lt;/span&gt;&lt;span&gt;        &lt;/span&gt;&lt;span style="color:#616e88;"&gt;/*keepEndPos=*/ &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;true&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;, &lt;/span&gt;&lt;span style="color:#616e88;"&gt;/*keepLineMap=*/ &lt;/span&gt;&lt;span style="color:#81a1c1;"&gt;true&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span style="color:#eceff4;"&gt;;
+&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;This passes the rectangle test and none of the lines go past the 80 character limit. However, I usually avoid this as a matter of personal preference.&lt;/p&gt;
+&lt;h2 id="conclusion"&gt;&lt;a class="anchor" href="#conclusion"&gt;#&lt;/a&gt;
+Conclusion&lt;/h2&gt;
+&lt;p&gt;Most of my code follows this style, and I feel it’s easier to read as a result. I’m sure this is just one of many approaches, and I would love to hear about them and how they compare to this one!&lt;/p&gt;
+</content>
+            
+        </entry>
+    
+</feed>