<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>toxdes.com - Blog</title>
      <link href="https://toxdes.com/blog/" rel="alternate" type="text/html"/>
  <link href="https://toxdes.com/rss.xml" rel="self" type="application/atom+xml"/>
  <id>tag:toxdes.com,2025:/blog</id>
  <updated>2026-09-29T11:34:01.211Z</updated>
  <author>
    <name>Vaibhav Mali</name>
    <email>hi@toxdes.com</email>
    <uri>https://toxdes.com</uri>
  </author>
  <generator uri="https://github.com/toxdes/txds-home-v2" version="1.0">txds-home-v2</generator>
  <icon>https://toxdes.com/favicon.ico</icon>
  <logo>https://toxdes.com/favicon.ico</logo>
    <entry>
      <title>Devlog 0x004</title>
      <link href="https://toxdes.com/blog/devlog-0x004.html" rel="alternate" type="text/html"/>
      <id>tag:toxdes.com,2026:/blog/devlog-0x004</id>
      <published>2026-09-08T10:30:00.000Z</published>
      <updated>2026-09-17T10:30:00.000Z</updated>
      <author>
        <name>Vaibhav Mali</name>
        <email>hi@toxdes.com</email>
        <uri>https://toxdes.com</uri>
      </author>
      <summary type="text">It&apos;s been a while since the last devlog. I&apos;ve got a lot to share about what I&apos;ve been spending my time on, but due to IRL things unrelated to code,...</summary>
      <content type="html">&lt;p&gt;It&amp;#39;s been a while since the last devlog. I&amp;#39;ve got a lot to share about what I&amp;#39;ve been spending my time on, but due to IRL things unrelated to code, I had to be AFK for a week or so, so I couldn&amp;#39;t publish this earlier.&lt;/p&gt;
&lt;h2 id=&quot;vylk&quot;&gt;&lt;a href=&quot;#vylk&quot; class=&quot;heading-anchor&quot; aria-label=&quot;Link to this heading&quot;&gt;&lt;/a&gt;Vylk&lt;/h2&gt;&lt;p&gt;I briefly discussed the initial working implementation of &lt;a href=&quot;https://vylk.toxdes.com&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;code&gt;vylk&lt;/code&gt;&lt;/a&gt; in &lt;a href=&quot;/blog/devlog-0x003&quot;&gt;my last devlog&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Since then, I have done a lot of improvements:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;The UI now updates in real-time when synced across devices. &lt;/li&gt;
&lt;li&gt;There&amp;#39;s a new UI popup for resolving merge conflicts in notes.&lt;/li&gt;
&lt;li&gt;Better &amp;quot;Preferences&amp;quot; UI. &lt;/li&gt;
&lt;li&gt;There are new pre-bundled well-known themes beyond the default &lt;code&gt;light&lt;/code&gt; and &lt;code&gt;dark&lt;/code&gt;. &lt;/li&gt;
&lt;li&gt;Ability to &amp;quot;pin&amp;quot; notes.&lt;/li&gt;
&lt;li&gt;Popular &lt;code&gt;google-fonts&lt;/code&gt; for UI, editor and preview. Selected font is downloaded once and cached locally until font is changed.   &lt;/li&gt;
&lt;li&gt;Automatic session renewal once the user is logged in and connected to the server. Currently, session expiry invalidates local unsynced notes. So, if you keep using this app offline for more than 6 months, all of the data will be lost, which is awful. I&amp;#39;ll think more about this.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;I&amp;#39;ve been using this to share text across devices - which I used to do earlier by sending messages to myself on Telegram, taking notes, writing draft posts - all day.&lt;/p&gt;
&lt;p&gt;It actually feels like a native app now, and being a PWA, it works on every single device. Everything is offline-first, syncing happens via a web-worker, either periodically or after any user activity.&lt;/p&gt;
&lt;h2 id=&quot;mousr&quot;&gt;&lt;a href=&quot;#mousr&quot; class=&quot;heading-anchor&quot; aria-label=&quot;Link to this heading&quot;&gt;&lt;/a&gt;mousr&lt;/h2&gt;&lt;p&gt;Another fantastic utility I&amp;#39;ve been working on is &lt;a href=&quot;https://github.com/toxdes/mousr&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;code&gt;mousr&lt;/code&gt;&lt;/a&gt;. The idea is simple: I use &lt;code&gt;sway&lt;/code&gt; window manager as my daily driver which means I use my keyboard a lot more than my mouse. &lt;/p&gt;
&lt;p&gt;I wanted to simulate mouse controls with the keyboard - I saw this on &lt;a href=&quot;https://www.twitch.tv/ppy&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;ppy&lt;/a&gt;&amp;#39;s streams. The program he uses finds &lt;em&gt;potentially clickable&lt;/em&gt; elements on the screen selectively - either via API or OCR, not sure - but it doesn&amp;#39;t seem to be reliable enough. He often needs to fall back to moving pointer like a joystick with keyboard - I wanted something more deterministic.&lt;/p&gt;
&lt;p&gt;When I want to click somewhere, my eyes are already looking at the target position. So if I &lt;a href=&quot;https://en.wikipedia.org/wiki/Geohash&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;geohash&lt;/a&gt; my screen, potentially recursively if where I want to click isn&amp;#39;t covered correctly by a rectangle, clicking doesn&amp;#39;t take any cognitive effort to find the correct grid. I looked at existing open-source alternatives, but NONE of them allow me to simulate mouse button at any level of this recursively geohashed rectangles. I can simulate clicks &lt;em&gt;only&lt;/em&gt; in the last level? WHY?&lt;/p&gt;
&lt;p&gt;So I &lt;a href=&quot;https://github.com/toxdes/mousr&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;built one&lt;/a&gt;, currently it only supports sway. Geohashing the screen is the primary use case, but it also supports a joystick-like pointer control as a fallback too. I&amp;#39;ve been daily driving this on sway, which is the only window manager it supports, and so far it&amp;#39;s been perfect. I&amp;#39;m also thinking about adding hexagonal shape would help, let&amp;#39;s see.&lt;/p&gt;
&lt;p&gt;This is what my sway config looks like with this tool:&lt;/p&gt;
&lt;pre style=&quot;background-color:var(--code-bg);color:var(--code-fg)&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-comment)&quot;&gt;# start the daemon&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt;exec&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-string)&quot;&gt; mousr&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-string)&quot;&gt; daemon&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-comment)&quot;&gt;# grid mode across all displays&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt;bindsym&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-string)&quot;&gt; Mod1+space&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-string)&quot;&gt; exec&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-string)&quot;&gt; mousr&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-string)&quot;&gt; grid&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-constant)&quot;&gt; --scope&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-string)&quot;&gt; all&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-comment)&quot;&gt;# mouse mode&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt;bindsym&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-string)&quot;&gt; Mod1+Shift+space&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-string)&quot;&gt; exec&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-string)&quot;&gt; mousr&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-string)&quot;&gt; mouse&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-comment)&quot;&gt;# bind scroll up/down&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt;bindsym&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-constant)&quot;&gt; --inhibited&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-string)&quot;&gt; Mod4+bracketleft&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-string)&quot;&gt; exec&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-string)&quot;&gt; mousr&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-string)&quot;&gt; scroll&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-string)&quot;&gt; down&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-constant)&quot;&gt; --step&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; 20&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt;bindsym&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-constant)&quot;&gt; --inhibited&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-string)&quot;&gt; Mod4+bracketright&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-string)&quot;&gt; exec&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-string)&quot;&gt; mousr&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-string)&quot;&gt; scroll&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-string)&quot;&gt; up&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-constant)&quot;&gt; --step&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; 20&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;BTW, this does not eliminate the mouse entirely, for a mouse-heavy workflow like drawing something. But most of the time, I just want to emulate a click at some position on my screen, and this lets me do it instantly. &lt;/p&gt;
&lt;p&gt;I&amp;#39;m planning to support &lt;code&gt;hyprland&lt;/code&gt; first, probably with a VM, and after that I&amp;#39;ll see if &lt;code&gt;macOS&lt;/code&gt; support is possible.&lt;/p&gt;
&lt;h2 id=&quot;jiotv-go&quot;&gt;&lt;a href=&quot;#jiotv-go&quot; class=&quot;heading-anchor&quot; aria-label=&quot;Link to this heading&quot;&gt;&lt;/a&gt;jiotv_go&lt;/h2&gt;&lt;p&gt;I&amp;#39;m also maintaining &lt;a href=&quot;https://github.com/toxdes/jiotv_go&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;a fork&lt;/a&gt; of &lt;code&gt;jiotv_go&lt;/code&gt;, which adds an alternative webOS-friendly UI and some small goodies that I needed for myself. &lt;/p&gt;
&lt;p&gt;I finally got root access to my LG TV&amp;#39;s webOS using &lt;a href=&quot;https://github.com/throwaway96/slopbro&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;this script&lt;/a&gt;. Now I can directly run the &lt;code&gt;aarch64&lt;/code&gt; server binary on the TV and configure it to start the server at boot. The &lt;code&gt;ipk&lt;/code&gt; can now use &lt;code&gt;localhost&lt;/code&gt;, so no more network hops and cumbersome local &lt;code&gt;https&lt;/code&gt; setup with &lt;code&gt;caddy&lt;/code&gt; and an extra device!&lt;/p&gt;
&lt;p&gt;Alright, that&amp;#39;s about it for now. Also, I promised I wouldn&amp;#39;t change fonts for the next three years on this website &lt;a href=&quot;/blog/devlog-0x002.html#fonts&quot;&gt;in my last devlog&lt;/a&gt;, but &lt;a href=&quot;https://www.recursive.design/&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;Recursive&lt;/a&gt; was too good to pass on, I&amp;#39;m sorry.&lt;/p&gt;
&lt;h2 id=&quot;interesting-links&quot;&gt;&lt;a href=&quot;#interesting-links&quot; class=&quot;heading-anchor&quot; aria-label=&quot;Link to this heading&quot;&gt;&lt;/a&gt;Interesting links&lt;/h2&gt;&lt;p&gt;Unfortunately, nothing to share this time. Been busy with working on stuff mentioned above.&lt;/p&gt;
&lt;p&gt;Until next time :^)&lt;/p&gt;
&lt;p&gt;By the way, if you&amp;#39;re interested, you can check out &lt;a href=&quot;/blog/tag/devlog&quot;&gt;all devlogs here&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id=&quot;edits&quot;&gt;&lt;a href=&quot;#edits&quot; class=&quot;heading-anchor&quot; aria-label=&quot;Link to this heading&quot;&gt;&lt;/a&gt;Edits&lt;/h2&gt;&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;(2026-09-17)&lt;/strong&gt; - Renamed MDNotes to Vylk.&lt;/li&gt;
&lt;/ol&gt;
</content>
      <category term="wafflings"/>
      <category term="devlog"/>
    </entry>
    <entry>
      <title>Devlog 0x003</title>
      <link href="https://toxdes.com/blog/devlog-0x003.html" rel="alternate" type="text/html"/>
      <id>tag:toxdes.com,2026:/blog/devlog-0x003</id>
      <published>2026-08-05T10:30:00.000Z</published>
      <updated>2026-09-17T10:30:00.000Z</updated>
      <author>
        <name>Vaibhav Mali</name>
        <email>hi@toxdes.com</email>
        <uri>https://toxdes.com</uri>
      </author>
      <summary type="text">I promised in the last devlog that I&apos;d write posts more often. Let me share what I&apos;ve been up to. Running LLMs on AndroidI have made this cards app...</summary>
      <content type="html">&lt;p&gt;I promised in the &lt;a href=&quot;/blog/devlog-0x002&quot;&gt;last devlog&lt;/a&gt; that I&amp;#39;d write posts more often. Let me share what I&amp;#39;ve been up to.&lt;/p&gt;
&lt;h2 id=&quot;running-llms-on-android&quot;&gt;&lt;a href=&quot;#running-llms-on-android&quot; class=&quot;heading-anchor&quot; aria-label=&quot;Link to this heading&quot;&gt;&lt;/a&gt;Running LLMs on Android&lt;/h2&gt;&lt;p&gt;I have made this &lt;a href=&quot;https://cards.toxdes.com&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;cards&lt;/a&gt; app that I&amp;#39;ve been using it almost everyday for the past year or so. It&amp;#39;s like cards feature of Bitwarden, extracted into a standalone app. It works completely offline (no &lt;code&gt;INTERNET&lt;/code&gt; permission in the manifest), and I want to keep it that way. &lt;/p&gt;
&lt;p&gt;I&amp;#39;ve been thinking about how I could add credit card bills and expenses tracking to this app without using internet. The obvious way is to let the user enter the amounts. That&amp;#39;s trivial but feels like a very &lt;em&gt;cumbersome&lt;/em&gt; UX for the users.&lt;/p&gt;
&lt;p&gt;The other way is to let the user select the PDF statements from their device, and the app extracts and parses the text. This would work if there was a set standard in place that all PDF files followed, but sadly there isn&amp;#39;t. &lt;/p&gt;
&lt;p&gt;Each bank has their own fancy-looking PDFs, and it&amp;#39;s impossible for me to have access to all of them. Also, it would require updating the parser logic every time some bank updates their bill&amp;#39;s PDF layout. So a deterministic parser doesn&amp;#39;t seem to be the solution. &lt;/p&gt;
&lt;p&gt;I was curious if we could do better by running smaller LLM models on the device. I built a quick prototype in Flutter to play around with different &lt;code&gt;&amp;lt;=1GB&lt;/code&gt; models from &lt;a href=&quot;https://huggingface.co/models?sort=trending&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;Hugging Face&lt;/a&gt;. &lt;/p&gt;
&lt;p&gt;I tried different ways to process the PDFs - ranging from feeding the LLM text blocks with positions encoded for each text block, rendering the PDF to PNG and using vision-enabled small LLM models, OCR results with position-encoded text and so on. So far, I&amp;#39;ve not been able to achieve any reliable results. Maybe my ideas are wrong, or small on-device LLM models are &lt;em&gt;just not there yet&lt;/em&gt;. &lt;/p&gt;
&lt;h2 id=&quot;vylk&quot;&gt;&lt;a href=&quot;#vylk&quot; class=&quot;heading-anchor&quot; aria-label=&quot;Link to this heading&quot;&gt;&lt;/a&gt;Vylk&lt;/h2&gt;&lt;figure&gt;&lt;img src=&quot;/img/devlog-0x003-theo-image-640.3611940c.webp&quot; data-full-src=&quot;/img/devlog-0x003-theo-image.10624641.webp&quot; srcset=&quot;/img/devlog-0x003-theo-image-640.3611940c.webp 640w, /img/devlog-0x003-theo-image-1280.890ed56c.webp 1280w&quot; sizes=&quot;(max-width: 38rem) calc(95vw - 1rem), 38rem&quot; width=&quot;1284&quot; height=&quot;460&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; alt=&quot;theo-image&quot;&gt;&lt;figcaption&gt;theo-image&lt;/figcaption&gt;&lt;/figure&gt;
&lt;p&gt;I feel like I&amp;#39;m on the far left here, I&amp;#39;ve been this way even before the AI happened, but does it even matter atp? We&amp;#39;re in a world where everyone just makes what they want. This feels like the era of &lt;em&gt;personalized&lt;/em&gt; software, and open source is slowly dying. There&amp;#39;s no good answer to &lt;em&gt;&amp;quot;If I can vibe code an app the way I want it, why should I use yours?&amp;quot;&lt;/em&gt;. &lt;/p&gt;
&lt;p&gt;Indeed, I spent an hour searching for a self-hosted markdown editor that&amp;#39;s &lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Low on resources &lt;/li&gt;
&lt;li&gt;Functional enough &lt;/li&gt;
&lt;li&gt;Can auto-save &lt;/li&gt;
&lt;li&gt;Work offline when the server is down, and sync when the server comes back up&lt;/li&gt;
&lt;li&gt;Can work reliably from all of my devices (Android, MacOS and Linux) &lt;/li&gt;
&lt;li&gt;Has decent UI and is mobile friendly&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;but I couldn&amp;#39;t find one. Not even a single person vibecoded this? NOO :( &lt;/p&gt;
&lt;p&gt;Every solution there tried to do too much, or the solutions that remotely match my needs, the UI feels like it&amp;#39;s from the 2010s. &lt;/p&gt;
&lt;p&gt;So, I did what I was trying to avoid all along, write a &lt;em&gt;1 viewer vibe coded slop website&lt;/em&gt;, yet again.&lt;/p&gt;
&lt;p&gt;I wrote a prompt in about 5 minutes, gave permissions and went AFK. Came back in an hour, and it had a working prototype ready. Polished the UI a little bit for another hour and now it&amp;#39;s deployed. It just works on my &lt;code&gt;1vCPU&lt;/code&gt; VPS. I&amp;#39;m using it right now, to write this draft. &lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Update:&lt;/strong&gt; I&amp;#39;ve polished it a bit more, you can &lt;a href=&quot;https://github.com/toxdes/vylk&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;check the source code&lt;/a&gt;, even though it feels pointless.&lt;/p&gt;
&lt;p&gt;Btw, only used &lt;code&gt;deepseek-v4-flash&lt;/code&gt; from opencode free plan for the MVP, and then &lt;code&gt;terra-5.6-high&lt;/code&gt; from OpenAI for the &lt;code&gt;sync&lt;/code&gt; functionality. while wr&amp;#39;re at it let me glaze real quick - &lt;code&gt;deepseek-flash-v4&lt;/code&gt; model is so underrated for how fast and useful it is.&lt;/p&gt;
&lt;p&gt;Here&amp;#39;s how it looks:
&lt;figure&gt;&lt;img src=&quot;/img/devlog-0x003-vylk-screenshot-640.9f68e159.webp&quot; data-full-src=&quot;/img/devlog-0x003-vylk-screenshot.c41a98cd.webp&quot; srcset=&quot;/img/devlog-0x003-vylk-screenshot-640.9f68e159.webp 640w, /img/devlog-0x003-vylk-screenshot-1280.54f2ac0c.webp 1280w&quot; sizes=&quot;(max-width: 38rem) calc(95vw - 1rem), 38rem&quot; width=&quot;1350&quot; height=&quot;1080&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; alt=&quot;vylk-screenshot&quot;&gt;&lt;figcaption&gt;vylk-screenshot&lt;/figcaption&gt;&lt;/figure&gt;
&lt;h2 id=&quot;commiting-secrets-to-git-repo&quot;&gt;&lt;a href=&quot;#commiting-secrets-to-git-repo&quot; class=&quot;heading-anchor&quot; aria-label=&quot;Link to this heading&quot;&gt;&lt;/a&gt;Commiting secrets to git repo&lt;/h2&gt;&lt;p&gt;Ever since I&amp;#39;ve come across &lt;code&gt;gpg&lt;/code&gt;, I&amp;#39;ve been finding so many usecases for it - be it signing / encrypting the messages, or password protecting any files before sharing. &lt;/p&gt;
&lt;p&gt;I recently made an &lt;a href=&quot;https://github.com/toxdes/python-scripts/blob/main/utils/syncm.py&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;rsync wrapper script&lt;/a&gt; to sync specific files, the way I wanted. The &lt;em&gt;specific&lt;/em&gt; dirs, I didn&amp;#39;t want them to be in my codebase, so I added the &lt;a href=&quot;https://github.com/toxdes/python-scripts/blob/main/utils/syncm_vars.py.gpg&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;encrypted&lt;/a&gt; &lt;code&gt;syncm_vars.py&lt;/code&gt; to version control. &lt;/p&gt;
&lt;p&gt;Now, the &lt;a href=&quot;https://sh.toxdes.com&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;script that installs&lt;/a&gt; &lt;code&gt;syncm&lt;/code&gt;, asks for &lt;code&gt;gpg&lt;/code&gt; passphrase at install time, and upon successful entry, replaces the content between &lt;code&gt;# BEGIN SYNCM_VARS&lt;/code&gt; and &lt;code&gt;# END SYNCM_VARS&lt;/code&gt;. I know it&amp;#39;s probably better to leave secrets out of the repo, but for small one-off things like these - things that are not-so-secret but are still secrets, this is fantastic.&lt;/p&gt;
&lt;p&gt;Alright, that&amp;#39;s about it.&lt;/p&gt;
&lt;h2 id=&quot;interesting-links&quot;&gt;&lt;a href=&quot;#interesting-links&quot; class=&quot;heading-anchor&quot; aria-label=&quot;Link to this heading&quot;&gt;&lt;/a&gt;Interesting links&lt;/h2&gt;&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;a href=&quot;https://theconsensus.dev/p/2026/07/19/observing-gos-garbage-collector-old-and-new.html&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;Watching Go&amp;#39;s new garbage collector move through the heap&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href=&quot;https://insider.btcpp.dev/p/when-randombytes-runs-but-doesnt&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;When random.bytes() runs but doesn&amp;#39;t work&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;By the way, if you&amp;#39;re interested, you can check out &lt;a href=&quot;/blog/tag/devlog&quot;&gt;all devlogs here&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id=&quot;edits&quot;&gt;&lt;a href=&quot;#edits&quot; class=&quot;heading-anchor&quot; aria-label=&quot;Link to this heading&quot;&gt;&lt;/a&gt;Edits&lt;/h2&gt;&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;(2026-09-17)&lt;/strong&gt; - Renamed MDNotes to Vylk.&lt;/li&gt;
&lt;/ol&gt;
</content>
      <category term="wafflings"/>
      <category term="devlog"/>
    </entry>
    <entry>
      <title>Devlog 0x002</title>
      <link href="https://toxdes.com/blog/devlog-0x002.html" rel="alternate" type="text/html"/>
      <id>tag:toxdes.com,2026:/blog/devlog-0x002</id>
      <published>2026-07-25T10:30:00.000Z</published>
      <updated>2026-07-25T10:30:00.000Z</updated>
      <author>
        <name>Vaibhav Mali</name>
        <email>hi@toxdes.com</email>
        <uri>https://toxdes.com</uri>
      </author>
      <summary type="text">I want to start this post with an apology. I did not expect it would take this many days to write another devlog post. I&apos;ve been postponing writing...</summary>
      <content type="html">&lt;p&gt;I want to start this post with an apology. I &lt;em&gt;did not&lt;/em&gt; expect it would take this many days to write another devlog post. I&amp;#39;ve been postponing writing this, mainly because I was busy with things, but the main reason was the lack of motivation, which is the worst excuse one can ever use. I&amp;#39;ll post more frequently, either &lt;em&gt;weekly&lt;/em&gt; or &lt;em&gt;biweekly&lt;/em&gt;, NOT &lt;em&gt;or whatever&lt;/em&gt; like I said in the last devlog.&lt;/p&gt;
&lt;p&gt;Anyway, let me start sharing what I&amp;#39;ve been up to.&lt;/p&gt;
&lt;h2 id=&quot;fonts&quot;&gt;&lt;a href=&quot;#fonts&quot; class=&quot;heading-anchor&quot; aria-label=&quot;Link to this heading&quot;&gt;&lt;/a&gt;Fonts&lt;/h2&gt;&lt;p&gt;One thing I&amp;#39;ve been spending unnecessarily long time on is which fonts to use on this website. When I started this blog, I wanted to use less common fonts that looked nice. So, I started with &lt;a href=&quot;https://fonts.google.com/specimen/Zalando+Sans&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;Zalando Sans&lt;/a&gt;, which was short-lived because I came across &lt;a href=&quot;https://fonts.google.com/specimen/Funnel+Sans&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;Funnel Sans&lt;/a&gt;, it felt like a better &lt;a href=&quot;https://fonts.google.com/specimen/Inter&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;Inter&lt;/a&gt; to me. &lt;/p&gt;
&lt;p&gt;As I went on reading others&amp;#39; posts on their websites, I realized reading paragraphs with a &lt;code&gt;sans&lt;/code&gt; font felt very distracting. So I decided to move to a &lt;code&gt;serif&lt;/code&gt; font. Then spent some more days deciding whether to be a &lt;code&gt;sans&lt;/code&gt; guy or a &lt;code&gt;serif&lt;/code&gt; guy, and the result is what you see right now. I ended up defaulting to a &lt;code&gt;serif&lt;/code&gt; font, but added extra options for &lt;code&gt;sans&lt;/code&gt; and &lt;code&gt;monospace&lt;/code&gt;. I&amp;#39;m now locking-in on these chosen fonts for 3 years, no matter what happens. &lt;/p&gt;
&lt;p&gt;One little optimization I&amp;#39;m doing is limiting the &lt;code&gt;charset&lt;/code&gt; of the said fonts to ASCII (plus some &lt;em&gt;other&lt;/em&gt; characters), saving &lt;code&gt;~40%&lt;/code&gt; of network bandwidth per font. Of course, the underlying assumption is that I control all of the text content on the website, and it&amp;#39;s mostly English. &lt;/p&gt;
&lt;p&gt;That&amp;#39;s about it. Now y&amp;#39;all can choose whichever one you like :) &lt;/p&gt;
&lt;h2 id=&quot;promptr&quot;&gt;&lt;a href=&quot;#promptr&quot; class=&quot;heading-anchor&quot; aria-label=&quot;Link to this heading&quot;&gt;&lt;/a&gt;Promptr&lt;/h2&gt;&lt;p&gt;I&amp;#39;ve started working on &lt;a href=&quot;/blog/building-promptr&quot;&gt;a new idea&lt;/a&gt; I&amp;#39;ve had for a long time. I know C, but don&amp;#39;t know GTK APIs that well, so this is a slop-first project. As of now, the latest release &lt;a href=&quot;https://github.com/toxdes/promptr/releases/tag/v0.2.3&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;v0.2.3&lt;/a&gt; works like &lt;a href=&quot;https://opencode.ai/docs/cli&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;OpenCode CLI&lt;/a&gt; wrapper. The high level architecture looks something like this:&lt;/p&gt;
&lt;figure&gt;&lt;img src=&quot;/img/devlog-0x002-promptr-arch-current-640.12a26091.webp&quot; data-full-src=&quot;/img/devlog-0x002-promptr-arch-current.c437a4ff.webp&quot; srcset=&quot;/img/devlog-0x002-promptr-arch-current-640.12a26091.webp 640w, /img/devlog-0x002-promptr-arch-current.c437a4ff.webp 660w&quot; sizes=&quot;(max-width: 38rem) calc(95vw - 1rem), 38rem&quot; width=&quot;660&quot; height=&quot;360&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; alt=&quot;promptr-current-arch&quot;&gt;&lt;figcaption&gt;promptr-current-arch&lt;/figcaption&gt;&lt;/figure&gt;
&lt;p&gt;I&amp;#39;m currently working on a new architecture that will allow switching the providers. I&amp;#39;ve picked &lt;a href=&quot;https://openrouter.ai&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;OpenRouter&lt;/a&gt; as the next provider. The plan is to allow adding more providers as plugins. This is the high level overview of the WIP architecture:&lt;/p&gt;
&lt;figure&gt;&lt;img src=&quot;/img/devlog-0x002-promptr-arch-next-640.083f434d.webp&quot; data-full-src=&quot;/img/devlog-0x002-promptr-arch-next.8c6232a7.webp&quot; srcset=&quot;/img/devlog-0x002-promptr-arch-next-640.083f434d.webp 640w, /img/devlog-0x002-promptr-arch-next-1280.aa33d134.webp 1280w&quot; sizes=&quot;(max-width: 38rem) calc(95vw - 1rem), 38rem&quot; width=&quot;1320&quot; height=&quot;880&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; alt=&quot;promptr-next-arch&quot;&gt;&lt;figcaption&gt;promptr-next-arch&lt;/figcaption&gt;&lt;/figure&gt;
&lt;h2 id=&quot;moving-back-to-neovim&quot;&gt;&lt;a href=&quot;#moving-back-to-neovim&quot; class=&quot;heading-anchor&quot; aria-label=&quot;Link to this heading&quot;&gt;&lt;/a&gt;Moving back to Neovim&lt;/h2&gt;&lt;p&gt;I used to use &lt;a href=&quot;https://zed.dev&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;Zed&lt;/a&gt; as my primary text editor (with vim keybindings), and for terminal&amp;#39;s &lt;code&gt;$EDITOR&lt;/code&gt;, with near-default config. My problem with Zed was simple, forcing AI features down my throat even though I don&amp;#39;t like to use it. &lt;/p&gt;
&lt;p&gt;So far I&amp;#39;ve used Sublime Text, VSCode, Neovim, Emacs+Evil and Zed as my primary editors. I wanted &lt;code&gt;emacs&lt;/code&gt; to give one more chance, this time with native keybindings instead of the &lt;code&gt;evil-mode&lt;/code&gt;, so I did, and it&amp;#39;s not my cup of chai. Too much effort to do simple things. So, I&amp;#39;m back to &lt;code&gt;neovim&lt;/code&gt;. My only small problem with &lt;code&gt;neovim&lt;/code&gt; is that I&amp;#39;m restricted to what TUI can offer, which &lt;em&gt;feels&lt;/em&gt; limiting but other than that it&amp;#39;s all good.&lt;/p&gt;
&lt;p&gt;I wanted to have two variants of &lt;code&gt;neovim&lt;/code&gt;, one lightweight variant with near-default config and plugins - used when I want quick text editing, e.g. git commit messages, configs etc and the other &lt;em&gt;more sophisticated&lt;/em&gt; variant with more plugins, LSPs, formatter etc. &lt;code&gt;$NVIM_APPNAME&lt;/code&gt; environment variable lets me do exactly this. 
Now I have two aliases in my &lt;code&gt;.bashrc&lt;/code&gt;:&lt;/p&gt;
&lt;pre style=&quot;background-color:var(--code-bg);color:var(--code-fg)&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;alias&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; v&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;&quot;&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-string)&quot;&gt;nvim&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;alias&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; ve&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;&apos;&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-string)&quot;&gt;NVIM_APPNAME=&quot;nvim-dev&quot; nvim&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;&apos;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;You can check out my &lt;a href=&quot;/dotfiles&quot;&gt;dotfiles&lt;/a&gt; for reference. There&amp;#39;s still more to learn, I have yet to come across a conflict-resolver that&amp;#39;s as good as VSCode though.&lt;/p&gt;
&lt;p&gt;That&amp;#39;s about it for now.&lt;/p&gt;
&lt;h2 id=&quot;interesting-links&quot;&gt;&lt;a href=&quot;#interesting-links&quot; class=&quot;heading-anchor&quot; aria-label=&quot;Link to this heading&quot;&gt;&lt;/a&gt;Interesting Links&lt;/h2&gt;&lt;p&gt;Some of the things I&amp;#39;ve read or been reading over the past few weeks -&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Rewriting Bun in Rust - &lt;a href=&quot;https://bun.com/blog/bun-in-rust&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;https://bun.com/blog/bun-in-rust&lt;/a&gt; &lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href=&quot;https://engineering.zalando.com/posts/2026/06/client-side-load-balancing.html&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;Client-Side Load Balancing at a Million Requests Per Second&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href=&quot;https://github.com/permissionlesstech/bitchat/blob/main/WHITEPAPER.md&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;Bitchat Protocol Whitepaper&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Atomic Habits (Book) - &lt;a href=&quot;https://jamesclear.com/atomic-habits&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;https://jamesclear.com/atomic-habits&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;By the way, if you&amp;#39;re interested, you can check out &lt;a href=&quot;/blog/tag/devlog&quot;&gt;all devlogs here&lt;/a&gt;.&lt;/p&gt;
</content>
      <category term="wafflings"/>
      <category term="devlog"/>
    </entry>
    <entry>
      <title>Building Promptr</title>
      <link href="https://toxdes.com/blog/building-promptr.html" rel="alternate" type="text/html"/>
      <id>tag:toxdes.com,2026:/blog/building-promptr</id>
      <published>2026-06-30T10:30:00.000Z</published>
      <updated>2026-07-03T10:30:00.000Z</updated>
      <author>
        <name>Vaibhav Mali</name>
        <email>hi@toxdes.com</email>
        <uri>https://toxdes.com</uri>
      </author>
      <summary type="text">Growing up, I&apos;ve always wanted to build a Linux-first GUI app. It&apos;s the one thing that always bothered me when I first decided to move from Windows...</summary>
      <content type="html">&lt;p&gt;  Growing up, I&amp;#39;ve always wanted to build a Linux-first GUI app. It&amp;#39;s the one thing that always bothered me when I first decided to move from Windows - the scarcity of the GUI apps on Linux. Eventually, browsers got stronger, and a lot of stuff moved from native GUIs to web apps. Also, the WINE based workaround for Windows apps wasn&amp;#39;t really a great experience either.&lt;/p&gt;
&lt;p&gt;The problem with modern LLM chat interfaces is (at the time of writing this post) that they&amp;#39;re too slow, especially when a conversation is too long, the UI in general looks bad (non-optimal use of screen real estate), and the whole experience isn&amp;#39;t ...&lt;em&gt;ergonomic&lt;/em&gt;.&lt;/p&gt;
&lt;p&gt;Here are some of the chat interfaces I&amp;#39;ve had the misfortune to use since the &lt;a href=&quot;https://x.com/sama/status/1598038815599661056&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;announcement of ChatGPT&lt;/a&gt; back in 2022 (opinionated ranking by their horribleness):&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;a href=&quot;https://gemini.google.com&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;Gemini&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://chatgpt.com&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;ChatGPT&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://claude.ai&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;Claude&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://perplexity.ai&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;Perplexity&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://t3.chat&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;T3 Chat&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Out of these, the first three are really horrible, and unusable to this date for some reason. &lt;a href=&quot;https://perplexity.ai&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;Perplexity&lt;/a&gt; and &lt;a href=&quot;https://t3.chat&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;T3 Chat&lt;/a&gt; have a nice UI and allow using different models, but they require a paid plan just for chats, and these are the only two AFAIK that support &lt;code&gt;?q=&amp;lt;text&amp;gt;&lt;/code&gt;, which people usually combine with &lt;a href=&quot;https://support.mozilla.org/en-US/kb/assign-shortcuts-search-engines&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;Firefox&amp;#39;s keyword bookmarks&lt;/a&gt; for quicker access. Btw, The only reason Perplexity is even in the list is because of the &lt;a href=&quot;https://www.perplexity.ai/help-center/en/articles/11842322-perplexity-pro-airtel-promo&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;1 year free promotional offer&lt;/a&gt; for Indian users, otherwise perplexity seems way more expensive, and now that the free offer is about to end, I, as a novice freeloader myself, am looking for alternatives.&lt;/p&gt;
&lt;p&gt;I just want something that&amp;#39;s - &lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Fast AF to pull up when I&amp;#39;m in the middle of doing something, send a query, get a response, and continue asking follow-ups as much as I want. &lt;/li&gt;
&lt;li&gt;Preferably free, for reasonable LLM usage (with web-search and web-fetch toolcalls)&lt;/li&gt;
&lt;li&gt;I&amp;#39;ve spent enough time with markdown files that I can use my brain as the markdown parser.&lt;/li&gt;
&lt;li&gt;I don&amp;#39;t want to launch a browser (Electron) just for this. It defeats the whole purpose. &lt;/li&gt;
&lt;li&gt;First class keyboard support.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;This is what I&amp;#39;m building with &lt;a href=&quot;https://github.com/toxdes/promptr&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;Promptr&lt;/a&gt;:
&lt;figure&gt;&lt;img src=&quot;/img/building-promptr-promptr-screenshot-640.e2d7b682.webp&quot; data-full-src=&quot;/img/building-promptr-promptr-screenshot.9bbde604.webp&quot; srcset=&quot;/img/building-promptr-promptr-screenshot-640.e2d7b682.webp 640w, /img/building-promptr-promptr-screenshot-1280.42e84bb7.webp 1280w&quot; sizes=&quot;(max-width: 38rem) calc(95vw - 1rem), 38rem&quot; width=&quot;1525&quot; height=&quot;932&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; alt=&quot;promptr-screenshot&quot;&gt;&lt;figcaption&gt;promptr-screenshot&lt;/figcaption&gt;&lt;/figure&gt;
&lt;h2 id=&quot;edits&quot;&gt;&lt;a href=&quot;#edits&quot; class=&quot;heading-anchor&quot; aria-label=&quot;Link to this heading&quot;&gt;&lt;/a&gt;Edits&lt;/h2&gt;&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;(2026-07-03)&lt;/strong&gt; - Add link to firefox&amp;#39;s keyword shortcuts for search&lt;/li&gt;
&lt;/ol&gt;
</content>
      <category term="learnings"/>
      <category term="gtk"/>
      <category term="promptr"/>
    </entry>
    <entry>
      <title>Devlog 0x001</title>
      <link href="https://toxdes.com/blog/devlog-0x001.html" rel="alternate" type="text/html"/>
      <id>tag:toxdes.com,2026:/blog/devlog-0x001</id>
      <published>2026-05-15T10:30:00.000Z</published>
      <updated>2026-05-15T10:30:00.000Z</updated>
      <author>
        <name>Vaibhav Mali</name>
        <email>hi@toxdes.com</email>
        <uri>https://toxdes.com</uri>
      </author>
      <summary type="text">This is a new &quot;series&quot; I&apos;m starting. I haven&apos;t decided the frequency yet, but probably like weekly or biweekly or just whenever. Let&apos;s see how it g...</summary>
      <content type="html">&lt;p&gt;This is a new &amp;quot;series&amp;quot; I&amp;#39;m starting. I haven&amp;#39;t decided the frequency yet, but probably like weekly or biweekly or just whenever. Let&amp;#39;s see how it goes. The goal of this series is to share what I&amp;#39;ve been spending my time on, some thoughts and some cool or interesting things I&amp;#39;ve learned or come across since the last Devlog.&lt;/p&gt;
&lt;h2 id=&quot;dev&quot;&gt;&lt;a href=&quot;#dev&quot; class=&quot;heading-anchor&quot; aria-label=&quot;Link to this heading&quot;&gt;&lt;/a&gt;Dev&lt;/h2&gt;&lt;p&gt;For the past few weeks, I&amp;#39;ve spent time building &lt;a href=&quot;https://github.com/toxdes/chronobsky&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;chronobsky&lt;/a&gt; and adding support for LG&amp;#39;s WebOS to &lt;a href=&quot;https://github.com/toxdes/jiotv_go&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;my own fork&lt;/a&gt; of &lt;code&gt;jiotv_go&lt;/code&gt;. Finally, my legacy frontend engineering skills are coming in handy. Kinda sad to see that after almost 3 years of offering free premium TV channels, Jio is now introducing subscriptions, but it was fun while it lasted.&lt;/p&gt;
&lt;p&gt;Having worked extensively with React from the pre-LLM era, I automatically used to underestimate how performant the browser&amp;#39;s HTML rendering is by default for static content, and used to add things like pagination and virtualization. With LLMs, dynamically stitching HTML components at build time has become really easy.&lt;/p&gt;
&lt;p&gt;One thing I&amp;#39;ve realized is that with AI, it&amp;#39;s very addictive to introduce slop in your projects. For example, adding a TUI dashboard in &lt;a href=&quot;https://github.com/toxdes/glesha&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;glesha&lt;/a&gt; turned out to be pretty much a useless feature, but at the time of introducing it, I just couldn&amp;#39;t resist &amp;quot;vibe-coding&amp;quot; one specific independent-ish module in the project, and I&amp;#39;ve spent the past week &lt;em&gt;de-sloppifying&lt;/em&gt; the codebase. Nowadays, I kinda sit on any idea that comes to my mind a little bit longer to see if I really want it in.&lt;/p&gt;
&lt;h2 id=&quot;tailscale&quot;&gt;&lt;a href=&quot;#tailscale&quot; class=&quot;heading-anchor&quot; aria-label=&quot;Link to this heading&quot;&gt;&lt;/a&gt;Tailscale&lt;/h2&gt;&lt;p&gt;If you use more than one device and need to &lt;code&gt;ssh&lt;/code&gt; to and from each other quite frequently and haven&amp;#39;t heard of &lt;a href=&quot;https://tailscale.com&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;Tailscale&lt;/a&gt; yet, you should drop everything you&amp;#39;re doing and take 5 minutes to set all devices up, and it&amp;#39;s definitely worth it. I have been hearing about Tailscale every now and then for the past few years, but never bothered to actually check it out because I didn&amp;#39;t even know what it does. I wish I had looked into it way earlier.&lt;/p&gt;
&lt;p&gt;I have two laptops and a Raspberry Pi (Zero 2W), and I also have two different ISPs for my internet, one is stable but slow, another is unstable (frequent disconnects) but fast. &lt;code&gt;pi&lt;/code&gt; is always connected to the stable but slow network, but this is not the case for my laptops. I also have a tiny VPS for tinkering, and I &lt;code&gt;ssh&lt;/code&gt; into these devices very frequently.&lt;/p&gt;
&lt;p&gt;Before this, I used to switch networks just to be able to connect to my Pi. I had also looked into both routers&amp;#39; settings if I could connect them so that I could access devices connected to two different routers, but there was no &lt;em&gt;easy&lt;/em&gt; way to do this so I just didn&amp;#39;t bother. I knew one way to do this by editing &lt;code&gt;/etc/hosts&lt;/code&gt; and similar files on each device and using static local IPs for each device, and maybe setting up port-forwarding to access over the internet, but it just felt like too much work, and then there&amp;#39;s the obvious exposure-to-internet aspect. As a last resort, I googled &amp;quot;how people usually do this&amp;quot; and found out that Tailscale does exactly this, automatically, and only devices in the tailnet can communicate with each other, and external actors cannot because Tailscale &lt;a href=&quot;https://tailscale.com/docs/reference/reserved-ip-addresses&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;uses a reserved IP range&lt;/a&gt; that isn&amp;#39;t publicly routable.&lt;/p&gt;
&lt;h2 id=&quot;moving-back-to-alacritty&quot;&gt;&lt;a href=&quot;#moving-back-to-alacritty&quot; class=&quot;heading-anchor&quot; aria-label=&quot;Link to this heading&quot;&gt;&lt;/a&gt;Moving back to Alacritty&lt;/h2&gt;&lt;p&gt;I was using &lt;code&gt;alacritty&lt;/code&gt; terminal for the longest time, and I&amp;#39;ve been trying out alternatives like &lt;code&gt;st&lt;/code&gt; and &lt;code&gt;foot&lt;/code&gt;. Mainly because each window of &lt;code&gt;alacritty&lt;/code&gt; terminal took &lt;code&gt;~200MB&lt;/code&gt; (wasn&amp;#39;t aware of &lt;code&gt;create-window&lt;/code&gt; yet), which seemed very unfair, and also I never really noticed why GPU-acceleration was needed to just render text on screen.&lt;/p&gt;
&lt;p&gt;I tried &lt;code&gt;st&lt;/code&gt; at first. It felt way too barebones but on the bright side, it also took very minimal &lt;code&gt;~10MB&lt;/code&gt; memory for each instance. For &lt;code&gt;st&lt;/code&gt;, the font-rendering somehow felt worse for me. Also to configure &lt;code&gt;st&lt;/code&gt;, it required patching source code and recompiling. As a result, I decided to move on to the next candidate, the builtin default of &lt;code&gt;sway&lt;/code&gt;, the &lt;code&gt;foot&lt;/code&gt; terminal. It took &lt;code&gt;~24MB&lt;/code&gt; for each instance, had saner configuration support. I had been using &lt;code&gt;foot&lt;/code&gt; ever since, until last week when the &lt;code&gt;opencode&lt;/code&gt; CLI just kept crashing &lt;code&gt;foot&lt;/code&gt;. I never thought a CLI program would be capable of crashing a terminal. After spending around 5 to 6 months with &lt;code&gt;foot&lt;/code&gt; and reconsidering other options yet again, this time the candidates were &lt;code&gt;ghostty&lt;/code&gt; and &lt;code&gt;alacritty&lt;/code&gt;, and &lt;code&gt;ghostty&lt;/code&gt; just felt too early-stage for me. &lt;/p&gt;
&lt;p&gt;By the way, after using a terminal that uses CPU rendering for a while, the difference of GPU accelerated rendering is very noticeable to me, and &lt;code&gt;~200MB&lt;/code&gt; feels worth it. One good thing I didn&amp;#39;t know earlier is the use of &lt;code&gt;alacritty msg create-window&lt;/code&gt; which is a life-saver and makes all the difference to me. Now it&amp;#39;s just a single &lt;code&gt;~200MB&lt;/code&gt;, with &lt;code&gt;~8MB&lt;/code&gt; of &lt;code&gt;/bin/bash&lt;/code&gt; for each newly spawned terminal window. So, for the foreseeable future, I think I&amp;#39;ll stick with &lt;code&gt;alacritty&lt;/code&gt; until something better comes along.&lt;/p&gt;
&lt;h2 id=&quot;dsa&quot;&gt;&lt;a href=&quot;#dsa&quot; class=&quot;heading-anchor&quot; aria-label=&quot;Link to this heading&quot;&gt;&lt;/a&gt;DSA&lt;/h2&gt;&lt;ol&gt;
&lt;li&gt;&lt;p&gt;One micro-optimization in Java is &lt;code&gt;computeIfAbsent&lt;/code&gt;. Not only is it shorter to type, it also avoids creating throwaway &lt;code&gt;ArrayList&amp;lt;&amp;gt;()&lt;/code&gt; instances.&lt;/p&gt;
&lt;pre style=&quot;background-color:var(--code-bg);color:var(--code-fg)&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-comment)&quot;&gt;// bad&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;List&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;&amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;Integer&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;&gt;&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; existing&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; =&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; map&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt;getOrDefault&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;x&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt; new&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt; ArrayList&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;&amp;#x3C;&gt;());&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;existing&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt;add&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;y&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;map&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt;put&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;x&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt; existing&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;);&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-comment)&quot;&gt;// good&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;map&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt;computeIfAbsent&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;x&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt; k &lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;-&gt;&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt; new&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt; ArrayList&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;&amp;#x3C;&gt;()).&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt;add&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;y&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;);&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;BFS can be done without explicitly creating the entire graph upfront, especially when finding neighbors of a vertex isn&amp;#39;t expensive.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Sometimes, you can introduce auxiliary/dummy vertices in a graph problem; this can simplify the problem by representing repeated transitions as one step, and you can avoid doing extra repetitive work.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;When creating a prime sieve, it&amp;#39;s more efficient to start marking composite numbers from &lt;code&gt;i*i&lt;/code&gt; instead of &lt;code&gt;2*i&lt;/code&gt; if &lt;code&gt;i&lt;/code&gt; is prime, because all composite numbers from &lt;code&gt;i...i*i&lt;/code&gt; already have a prime factor that&amp;#39;s less than &lt;code&gt;i&lt;/code&gt; so they would have already been marked composite by a smaller prime number.&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;h2 id=&quot;interesting-links&quot;&gt;&lt;a href=&quot;#interesting-links&quot; class=&quot;heading-anchor&quot; aria-label=&quot;Link to this heading&quot;&gt;&lt;/a&gt;Interesting Links&lt;/h2&gt;&lt;p&gt;Some of the things I&amp;#39;ve read or been reading over the past few weeks -&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Open social - &lt;a href=&quot;https://overreacted.io/open-social&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;https://overreacted.io/open-social&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;How OpenAI delivers low-latency voice AI at scale - &lt;a href=&quot;https://openai.com/index/delivering-low-latency-voice-ai-at-scale&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;https://openai.com/index/delivering-low-latency-voice-ai-at-scale&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;By the way, if you&amp;#39;re interested, you can check out &lt;a href=&quot;/blog/tag/devlog&quot;&gt;all devlogs here&lt;/a&gt;.&lt;/p&gt;
</content>
      <category term="wafflings"/>
      <category term="devlog"/>
    </entry>
    <entry>
      <title>Ropes Data Structure: From the Original Paper to Implementation</title>
      <link href="https://toxdes.com/blog/ropes-data-structure-from-the-original-paper-to-implementation.html" rel="alternate" type="text/html"/>
      <id>tag:toxdes.com,2026:/blog/ropes-data-structure-from-the-original-paper-to-implementation</id>
      <published>2026-04-22T10:30:00.000Z</published>
      <updated>2026-04-22T10:30:00.000Z</updated>
      <author>
        <name>Vaibhav Mali</name>
        <email>hi@toxdes.com</email>
        <uri>https://toxdes.com</uri>
      </author>
      <summary type="text">One day, I was looking for asymptotic complexity of ECMAScript String&apos;s += or concat() operation out of curiosity, and wondered why JS doesn&apos;t have...</summary>
      <content type="html">&lt;p&gt;One day, I was looking for asymptotic complexity of ECMAScript String&amp;#39;s &lt;code&gt;+=&lt;/code&gt; or &lt;code&gt;concat()&lt;/code&gt; operation out of curiosity, and wondered why JS doesn&amp;#39;t have a traditional &lt;code&gt;StringBuilder&lt;/code&gt; since the strings are immutable. Turns out, the JS spec doesn&amp;#39;t specify any Big-O complexity guarantees and they are left to the implementers, but still I couldn&amp;#39;t wrap my head around how &lt;code&gt;concat()&lt;/code&gt; operations could happen in near-constant time. Coincidentally, almost all popular browser-based JS engines - &lt;a href=&quot;https://github.com/v8/v8/blob/main/src/objects/string.h#L1032&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;V8&lt;/a&gt;, &lt;a href=&quot;https://searchfox.org/firefox-main/source/js/src/builtin/String.cpp#2938&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;SpiderMonkey&lt;/a&gt;, &lt;a href=&quot;https://github.com/WebKit/WebKit/blob/main/Source/JavaScriptCore/runtime/JSString.h#L451&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;JavaScriptCore&lt;/a&gt; and &lt;a href=&quot;https://github.com/LadybirdBrowser/ladybird/blob/master/Libraries/LibJS/Runtime/PrimitiveString.h#L101&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;LibJS&lt;/a&gt; - implement this data structure internally and I still don&amp;#39;t see people talk about it more often: &lt;strong&gt;Ropes.&lt;/strong&gt;&lt;/p&gt;
&lt;h2 id=&quot;tradeoffs&quot;&gt;&lt;a href=&quot;#tradeoffs&quot; class=&quot;heading-anchor&quot; aria-label=&quot;Link to this heading&quot;&gt;&lt;/a&gt;Tradeoffs&lt;/h2&gt;&lt;p&gt;Of course, there are tradeoffs. Otherwise ropes would have been the de facto standard for implementing strings in any programming language. The reason they&amp;#39;re not quite as popular is because they solve a very niche problem involving large immutable strings, frequent concatenation, substring sharing, or editor-like updates. As a result, almost all of the popular engines use different underlying representations for strings, based on the length. One possible use case that I can think of is React&amp;#39;s &lt;code&gt;renderToString()&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;Ropes actually perform worse for short strings because of the pointer overhead and cache locality, and in a typical workload, most strings are usually small. As a result, engines use plain one-byte (ASCII) or two-byte (UTF-16) strings, until the length of the string exceeds a threshold, at which point a &lt;em&gt;rope-like&lt;/em&gt; (extending the idea of ropes from the original paper) structure is used which uses flatten-on-demand. It means &lt;code&gt;concat()&lt;/code&gt;s are &lt;code&gt;O(1)&lt;/code&gt; since it modifies ~2 nodes, and when the tree is rebalanced (rope is flattened) is engine-specific. Mostly it&amp;#39;s flattened when there&amp;#39;s a request for linear char buffer, indexing, native interop, or certain substring paths. It gives the best of both worlds, &lt;code&gt;concat()&lt;/code&gt;s are faster, and we don&amp;#39;t have to spend time rebalancing until we actually need it. The amount of ad-hoc optimizations these engines do is fascinating.&lt;/p&gt;
&lt;h2 id=&quot;implementation&quot;&gt;&lt;a href=&quot;#implementation&quot; class=&quot;heading-anchor&quot; aria-label=&quot;Link to this heading&quot;&gt;&lt;/a&gt;Implementation&lt;/h2&gt;&lt;p&gt;Alright, let&amp;#39;s go through &lt;a href=&quot;https://www.cs.tufts.edu/comp/150FP/archive/hans-boehm/ropes.pdf&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;the original paper&lt;/a&gt;. The idea of storing data in the leaf nodes and information about the data in internal nodes of the tree isn&amp;#39;t new, &lt;a href=&quot;https://en.wikipedia.org/wiki/B%2B_tree&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;B+ trees&lt;/a&gt; existed since early 1970s. However, B trees self-balance on insertion, with at most &lt;code&gt;O(log n)&lt;/code&gt; node updates, but in case of ropes, rebalancing could cost &lt;code&gt;O(rope_len)&lt;/code&gt; in the worst-case, which means worst-case adversarial input can be generated that triggers rebalancing after every &lt;code&gt;concat()&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;The paper mentions length of rope should be at least &lt;code&gt;F(n+2)&lt;/code&gt; for a depth of &lt;code&gt;n&lt;/code&gt;. But how do fibonacci numbers come in the picture while describing the definition of a balanced binary tree? The usual definition of a balanced binary tree is &lt;code&gt;abs(h(left)-h(right)) &amp;lt;=1&lt;/code&gt; (i.e. heights of left and right subtrees of every node in the tree differ by at most 1), which means for a tree to be balanced -&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;For &lt;code&gt;depth=0&lt;/code&gt;, &lt;code&gt;min_leaves_required=1&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;For &lt;code&gt;depth=1&lt;/code&gt;, &lt;code&gt;min_leaves_required=2&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;For &lt;code&gt;depth=2&lt;/code&gt;, &lt;code&gt;min_leaves_required=3&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;For &lt;code&gt;depth=3&lt;/code&gt;, &lt;code&gt;min_leaves_required=5&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;For &lt;code&gt;depth=4&lt;/code&gt;, &lt;code&gt;min_leaves_required=8&lt;/code&gt; &lt;em&gt;... and so on&lt;/em&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;which forms a sequence &lt;code&gt;1,2,3,5,8...&lt;/code&gt; which is a standard fibonacci sequence shifted by 2, hence the bound of&lt;code&gt;F(n+2)&lt;/code&gt;. You can verify these values by drawing a balanced binary tree on paper. So, given a rope&amp;#39;s total length and current tree depth, we can efficiently get a rough estimate of whether the tree needs rebalancing after a &lt;code&gt;concat()&lt;/code&gt; operation.&lt;/p&gt;
&lt;p&gt;I also like how the paper just assumes you have a garbage collector at your disposal, and even hints at using reference counting if you&amp;#39;re implementing in a language like C. Let&amp;#39;s not implement a GC here, maybe some other day, in another post. Let&amp;#39;s use Go and for simplicity we will only consider ASCII strings for now. We&amp;#39;ll see how things might change for UTF-16 later.&lt;/p&gt;
&lt;p&gt;The API contract looks something like this -&lt;/p&gt;
&lt;pre style=&quot;background-color:var(--code-bg);color:var(--code-fg)&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;type&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-class)&quot;&gt; Rope&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt; interface&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt;  Len&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;()&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt; int&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt;  String&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;()&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt; string&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt;  Concat&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;other&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-class)&quot;&gt; Rope&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-class)&quot;&gt; Rope&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt;  At&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;index&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt; int&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt; byte&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt;  root&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;()&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; *&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-class)&quot;&gt;node&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;type&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-class)&quot;&gt; rope&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt; struct&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-property)&quot;&gt;  root&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; *&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-class)&quot;&gt;node&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-comment)&quot;&gt;// expose root via root()&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;func&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; (&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;r &lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt;*&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-class)&quot;&gt;rope&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt; root&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;()&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; *&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-class)&quot;&gt;node&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;  if&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; r&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; ==&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; nil&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;    return&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; r&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;  }&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;  return&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; r&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;root&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;The paper specifies, we require some notion of &amp;quot;sequence of characters&amp;quot; for leaf nodes. Let&amp;#39;s use &lt;code&gt;string&lt;/code&gt;s for that. It also mentions tree indexed by position, it means we need to store some information about the length of string represented by a node. Let&amp;#39;s use &lt;code&gt;totalLen&lt;/code&gt; for that. The &lt;code&gt;node&lt;/code&gt; will look something like this -&lt;/p&gt;
&lt;pre style=&quot;background-color:var(--code-bg);color:var(--code-fg)&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;type&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-class)&quot;&gt; node&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt; struct&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-property)&quot;&gt;  left&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; *&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-class)&quot;&gt;node&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-property)&quot;&gt;  right&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; *&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-class)&quot;&gt;node&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-property)&quot;&gt;  leaf&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt; string&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-property)&quot;&gt;  totalLen&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt; int&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-comment)&quot;&gt; // length of substring represented by this subtree&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;Let&amp;#39;s start with implementing easier and straight-forward &lt;code&gt;Len()&lt;/code&gt; and &lt;code&gt;Concat()&lt;/code&gt; first. Since we&amp;#39;re maintaining &lt;code&gt;totalLen&lt;/code&gt; for each node, &lt;code&gt;Len()&lt;/code&gt; is trivial. For &lt;code&gt;Concat()&lt;/code&gt;, we just create a new parent root node, and attach roots of the two ropes as left and right children of this newly created node. Note that since we&amp;#39;re not doing any rebalancing, this operation is &lt;code&gt;O(1)&lt;/code&gt;.&lt;/p&gt;
&lt;pre style=&quot;background-color:var(--code-bg);color:var(--code-fg)&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-comment)&quot;&gt;// length&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;func&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; (&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;r &lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt;*&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-class)&quot;&gt;rope&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt; Len&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;()&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt; int&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;  if&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; r&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; ==&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; nil&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; ||&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; r&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;root&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; ==&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; nil&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;    return&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; 0&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;  }&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;  return&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; r&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;root&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;totalLen&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-comment)&quot;&gt;// concat&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;func&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; (&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;r &lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt;*&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-class)&quot;&gt;rope&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt; Concat&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;other&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-class)&quot;&gt; Rope&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-class)&quot;&gt; Rope&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;  return&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; &amp;#x26;&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-class)&quot;&gt;rope&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;{&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-property)&quot;&gt;root&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt;concat&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;r&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;root&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; other&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt;root&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;())}&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-comment)&quot;&gt;// helper&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;func&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt; concat&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;a&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; *&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-class)&quot;&gt;node&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; b&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; *&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-class)&quot;&gt;node&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; *&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-class)&quot;&gt;node&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;  if&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; a&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; ==&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; nil&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;    return&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; b&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;  }&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;  if&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; b&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; ==&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; nil&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;    return&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; a&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;  }&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;  return&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; &amp;#x26;&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-class)&quot;&gt;node&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;{&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-property)&quot;&gt;    left&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;a&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-property)&quot;&gt;    right&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;b&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-property)&quot;&gt;    totalLen&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; a&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;totalLen&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; +&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; b&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;totalLen&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;  }&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;Let&amp;#39;s implement &lt;code&gt;String()&lt;/code&gt; now, which is a standard in-order tree traversal.&lt;/p&gt;
&lt;pre style=&quot;background-color:var(--code-bg);color:var(--code-fg)&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;func&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; (&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;r &lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt;*&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-class)&quot;&gt;rope&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt; String&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;()&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt; string&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;  if&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; r&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; ==&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; nil&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;    return&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; &quot;&quot;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;  }&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;  return&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; r&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;root&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt;String&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;()&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;func&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; (&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;n &lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt;*&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-class)&quot;&gt;node&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt; String&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;()&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt; string&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;  if&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; n&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; ==&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; nil&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;    return&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; &quot;&quot;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;  }&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;  if&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; n&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;left&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; ==&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; nil&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; &amp;#x26;&amp;#x26;&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; n&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;right&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; ==&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; nil&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;    return&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; n&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;leaf&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;  }&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;  return&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; n&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;left&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt;String&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;()&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; +&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; n&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;right&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt;String&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;()&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;The idea for implementing &lt;code&gt;At(x)&lt;/code&gt; is to do a DFS from root node, since we store total length represented by subtree under the node, it tells us if we need to explore left or right subtree. Once we are at the leaf node, we just return the character in the &lt;code&gt;leaf&lt;/code&gt; string chunk.
For simplicity, let&amp;#39;s ignore out-of-bounds errors.&lt;/p&gt;
&lt;pre style=&quot;background-color:var(--code-bg);color:var(--code-fg)&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;func&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; (&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;r &lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt;*&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-class)&quot;&gt;rope&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt; At&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;index&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt; int&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt; byte&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;  return&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; r&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;root&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt;at&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;index&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;func&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; (&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;n &lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt;*&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-class)&quot;&gt;node&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt; at&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;index&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt; int&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt; byte&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;  if&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; n&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;left&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; ==&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; nil&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; &amp;#x26;&amp;#x26;&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; n&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;right&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; ==&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; nil&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;    return&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; n&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;leaf&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;[&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;index&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;]&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;  }&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;  leftLen&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; :=&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; 0&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;  if&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; n&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;left&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; !=&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; nil&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;    leftLen&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; =&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; n&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;left&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;totalLen&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;  }&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;  if&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; index&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; leftLen&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;    return&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; n&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;left&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt;at&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;index&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;  }&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;  return&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; n&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;right&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt;at&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;index&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt;-&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;leftLen&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;Now the only challenging part remaining is rebalancing the tree. The idea is to rebuild a balanced tree. Since the left-to-right order of leaves gives the canonical representation of the text we are storing, we first collect leaves by traversing similar to how we did it in &lt;code&gt;String()&lt;/code&gt; implementation. After collecting the leaves, we build the new tree by recursively splitting the collected leaves in half and combine the two halves with &lt;code&gt;concat()&lt;/code&gt;.&lt;/p&gt;
&lt;pre style=&quot;background-color:var(--code-bg);color:var(--code-fg)&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span&gt;            root                            root&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;           /    \                          /    \&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;        node     &quot;gh&quot;       ----&gt;       node     node&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;       /   \                           /   \    /   \&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;    node    &quot;ef&quot;                    &quot;ab&quot;  &quot;cd&quot; &quot;ef&quot; &quot;gh&quot;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;   /   \&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;&quot;ab&quot;  &quot;cd&quot;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span&gt;collected:[&quot;ab&quot;,&quot;cd&quot;, &quot;ef&quot;, &quot;gh&quot;]&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;Let&amp;#39;s implement &lt;code&gt;rebalance()&lt;/code&gt; now. We can call this &lt;code&gt;rebalance()&lt;/code&gt; whenever it&amp;#39;s optimal to do so.&lt;/p&gt;
&lt;pre style=&quot;background-color:var(--code-bg);color:var(--code-fg)&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;func&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; (&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;r &lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt;*&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-class)&quot;&gt;rope&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt; rebalance&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;()&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; *&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-class)&quot;&gt;rope&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;  if&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; r&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; ==&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; nil&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; ||&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; r&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt;root&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;()&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; ==&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; nil&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;    return&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; r&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;  }&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;  return&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; &amp;#x26;&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-class)&quot;&gt;rope&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;{&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-property)&quot;&gt;root&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt;rebalance&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;r&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt;root&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;())}&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-comment)&quot;&gt;// helper&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;func&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt; rebalance&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;n&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; *&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-class)&quot;&gt;node&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; *&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-class)&quot;&gt;node&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;  if&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; n&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; ==&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; nil&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;    return&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; n&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;  }&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;  if&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; n&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;left&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; ==&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; nil&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; &amp;#x26;&amp;#x26;&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; n&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;right&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt;  ==&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; nil&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;    return&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; n&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;  }&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;  leaves&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; :=&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt; make&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;([]&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt;*&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-class)&quot;&gt;node&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; 0&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt;  collectLeaves&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;n&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; &amp;#x26;&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;leaves&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;  return&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt; buildBalanced&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;leaves&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; 0&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt; len&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;leaves&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;))&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-comment)&quot;&gt;// collect leaves in order&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;func&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt; collectLeaves&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;n&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; *&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-class)&quot;&gt;node&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; leaves&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; *&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;[]&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt;*&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-class)&quot;&gt;node&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;){&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;  if&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; n&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; ==&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; nil&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;    return&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;  }&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;  if&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; n&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;left&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; ==&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; nil&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; &amp;#x26;&amp;#x26;&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; n&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;right&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; ==&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; nil&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt;    *&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;leaves&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; =&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt; append&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt;*&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;leaves&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; &amp;#x26;&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-class)&quot;&gt;node&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;{&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-property)&quot;&gt;leaf&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;n&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;leaf&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-property)&quot;&gt; totalLen&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;n&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;totalLen&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;})&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;    return&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;  }&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt;  collectLeaves&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;n&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;left&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; leaves&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt;  collectLeaves&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;n&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;right&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; leaves&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; }&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-comment)&quot;&gt;// build a new balanced tree&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;func&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt; buildBalanced&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;leaves&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; []&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt;*&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-class)&quot;&gt;node&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; L&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; R&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt; int&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; *&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-class)&quot;&gt;node&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;  if&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; L&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; &gt;=&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; R&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;    return&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; nil&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;  }&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;  if&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; R&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt;-&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;L&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; ==&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; 1&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;    return&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; leaves&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;[&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;L&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;]&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;  }&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;  M&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; :=&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; L&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; +&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; (&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;R&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt;-&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;L&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt;/&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt;2&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;  left&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; :=&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt; buildBalanced&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;leaves&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; L&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; M&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;  right&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; :=&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt; buildBalanced&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;leaves&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; M&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; R&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;  return&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt; concat&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;left&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; right&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;This wraps-up our basic implementation of ropes. Of course we could re-use leaf nodes and do a ton of other optimizations, but hopefully the basic idea is clear now.&lt;/p&gt;
&lt;h2 id=&quot;references&quot;&gt;&lt;a href=&quot;#references&quot; class=&quot;heading-anchor&quot; aria-label=&quot;Link to this heading&quot;&gt;&lt;/a&gt;References&lt;/h2&gt;&lt;p&gt;For further reading:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;a href=&quot;https://www.cs.tufts.edu/comp/150FP/archive/hans-boehm/ropes.pdf&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;Ropes: an Alternative to Strings&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://docs.google.com/document/d/1o-MJPAddpfBfDZCkIHNKbMiM86iDFld7idGbNQLuKIQ/preview&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;Fast string concatenation in JavaScript&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://en.wikipedia.org/wiki/Rope_(data_structure)&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;Rope (Data Struture) - Wikipedia&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
</content>
      <category term="learnings"/>
      <category term="algo"/>
    </entry>
    <entry>
      <title>Amazon SDE-II Interview Experience</title>
      <link href="https://toxdes.com/blog/my-amazon-sde2-interview-experience.html" rel="alternate" type="text/html"/>
      <id>tag:toxdes.com,2026:/blog/my-amazon-sde2-interview-experience</id>
      <published>2026-04-12T10:30:00.000Z</published>
      <updated>2026-04-12T10:30:00.000Z</updated>
      <author>
        <name>Vaibhav Mali</name>
        <email>hi@toxdes.com</email>
        <uri>https://toxdes.com</uri>
      </author>
      <summary type="text">I have recently fumbled my interview rounds for the SDE-II role at Amazon big time. I think it&apos;s worth sharing. Since all of my professional work e...</summary>
      <content type="html">&lt;p&gt;I have recently fumbled my interview rounds for the SDE-II role at Amazon big time. I think it&amp;#39;s worth sharing. Since all of my professional work experience so far has been for early stage startups, I didn&amp;#39;t get a chance to work on stuff where horizontally scaling the servers was necessary. So, my long-term goal is to work at a place that has a product with a lot of users. Amazon is one of them, despite how bad rep they get for their work culture. &lt;/p&gt;
&lt;p&gt;I applied to a few positions on Amazon&amp;#39;s career portal a few months back because even though Amazon looked very busy breaking their own records in laying off employees, their careers page also had a few recent openings. Anyway, after 3-ish days, I received an OA, which had 2 problems to be solved in 90 minutes, a &amp;quot;work-style simulation&amp;quot; based on their &amp;quot;leadership&amp;quot; principles and a somewhat basic system design quiz.&lt;/p&gt;
&lt;h2 id=&quot;online-assessment&quot;&gt;&lt;a href=&quot;#online-assessment&quot; class=&quot;heading-anchor&quot; aria-label=&quot;Link to this heading&quot;&gt;&lt;/a&gt;Online Assessment&lt;/h2&gt;&lt;p&gt;It had two problems, surprisingly both problems were based on bitwise operations. First problem was of medium difficulty, I cannot share the exact problem, but it was based on range &lt;code&gt;XOR&lt;/code&gt; sum queries (via prefix &lt;code&gt;XOR&lt;/code&gt;s), and was trivial if you knew the ball knowledge:  &lt;/p&gt;
&lt;pre style=&quot;background-color:var(--code-bg);color:var(--code-fg)&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt;XOR_SUM&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;a&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;[&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;i&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;]&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;..&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-property)&quot;&gt;a&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;[&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;j&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;])&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt; =&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt; pref&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;[&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;j&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;]&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt;^&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;pref&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;[&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-variable)&quot;&gt;i&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt;-&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt;1&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;]&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;Second problem was &lt;a href=&quot;https://leetcode.com/problems/maximum-bitwise-and-after-increment-operations/description/&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;this one&lt;/a&gt;, it was hard but I was able to come up with a greedy approach where we start with &lt;code&gt;0&lt;/code&gt; as our candidate answer for final &lt;code&gt;AND&lt;/code&gt;, and try to get &lt;code&gt;1&lt;/code&gt; at each position of our candidate answer starting from MSB to LSB, where we check the feasibility of including &lt;code&gt;m&lt;/code&gt; least expensive elements using at most &lt;code&gt;k&lt;/code&gt; total increments.&lt;/p&gt;
&lt;p&gt;I was able to solve first problem within ~15 minutes, and spent the rest of the time on the second problem.&lt;/p&gt;
&lt;p&gt;I also skimmed through the &lt;a href=&quot;https://www.aboutamazon.in/about-us/leadership-principles&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;Amazon LPs&lt;/a&gt; before the OA, so I don&amp;#39;t mess up the workstyle assessment questions.&lt;/p&gt;
&lt;h2 id=&quot;round---1&quot;&gt;&lt;a href=&quot;#round---1&quot; class=&quot;heading-anchor&quot; aria-label=&quot;Link to this heading&quot;&gt;&lt;/a&gt;Round - 1&lt;/h2&gt;&lt;p&gt;Interviewer was SDE-2, he was younger than me, he joined 5 minutes late, I was already nervous pro max and panicking because this was my first time interviewing for FAANG, he joined and said don&amp;#39;t worry we&amp;#39;ll extend by 5 minutes. We introduced ourselves, and he jumped to problem solving right away. &lt;/p&gt;
&lt;p&gt;First problem was &lt;a href=&quot;https://leetcode.com/problems/generate-parentheses/&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;this one&lt;/a&gt;, which I knew how to do, so I told the optimal solution, stated complexity, asked if I should start writing code, coded it up, we were past 20 minutes by now. &lt;/p&gt;
&lt;p&gt;Then he asked the second problem &lt;a href=&quot;https://leetcode.com/problems/word-ladder/description/&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;this one&lt;/a&gt;, for which I was able to come up with a brute force BFS solution, but I ran out of time. I regret picking &lt;code&gt;java&lt;/code&gt; as my language of choice for the interview. Also, my solution wasn&amp;#39;t really optimal, the interviewer tried to give me hints, but I crumbled under pressure of time running out since he had mentioned in the beginning he is expecting optimal solutions to BOTH problems. As soon as the interview was over, the hint he gave clicked, but it was already too late. I was not able to complete the &lt;code&gt;bfs(...)&lt;/code&gt; function because it&amp;#39;s standard and I have run out of time. He said now he has to ask me some questions based on LPs, which he asked and I answered. &lt;/p&gt;
&lt;h2 id=&quot;round---2&quot;&gt;&lt;a href=&quot;#round---2&quot; class=&quot;heading-anchor&quot; aria-label=&quot;Link to this heading&quot;&gt;&lt;/a&gt;Round - 2&lt;/h2&gt;&lt;p&gt;Two weeks went by, and my second round was scheduled, this guy looked really tensed for some reason. After introduction, he asked me to write API for music library app, expectation was to tell class design for entities and only requirement was that he wanted low latency for &lt;code&gt;getTopKPlayedSongs(k)&lt;/code&gt; and &lt;code&gt;getTopKPlayedSongs(artistId, k)&lt;/code&gt;, &lt;code&gt;addSong(artist, song)&lt;/code&gt;. I started with listing out entities like &lt;code&gt;Player&lt;/code&gt;, &lt;code&gt;Artist&lt;/code&gt;, &lt;code&gt;User&lt;/code&gt;, &lt;code&gt;Song&lt;/code&gt;, &lt;code&gt;Library&lt;/code&gt; etc, and then I went blank, I knew how to do &lt;code&gt;getTopKSongs(k)&lt;/code&gt; in &lt;code&gt;O(log n)&lt;/code&gt; with a &lt;code&gt;HashMap&amp;lt;Count, Set&amp;lt;SongId&amp;gt;&amp;gt;&lt;/code&gt; and a &lt;code&gt;TreeSet&amp;lt;SongId,Count&amp;gt;&lt;/code&gt; combo, which I told when I ran out of time, but again, the expectation was to get a &amp;quot;production-level&amp;quot; code in 30 minutes. &lt;/p&gt;
&lt;p&gt;It requires at least one &lt;code&gt;soft yes&lt;/code&gt; to get to round 3 and round 4, and knew immediately after second interview was over that I didn&amp;#39;t get it. &lt;/p&gt;
&lt;p&gt;Key takeaway is, time is way more limited in these interviews, you get ~20 minutes to explain &lt;em&gt;and&lt;/em&gt; code the &lt;em&gt;optimal&lt;/em&gt; solution. Good thing is, I was able to solve every problem so far, so we&amp;#39;re past &amp;quot;wtf do i even do here man&amp;quot; stage, so that&amp;#39;s some progress, but need to work on time and not panicking.&lt;/p&gt;
&lt;p&gt;We&amp;#39;re just not there yet gang, the grind must go on, maybe in next 6 months :)&lt;/p&gt;
</content>
      <category term="learnings"/>
      <category term="algo"/>
    </entry>
    <entry>
      <title>Big update - Current state of things</title>
      <link href="https://toxdes.com/blog/big-update.html" rel="alternate" type="text/html"/>
      <id>tag:toxdes.com,2026:/blog/big-update</id>
      <published>2026-04-09T10:30:00.000Z</published>
      <updated>2026-06-16T10:30:00.000Z</updated>
      <author>
        <name>Vaibhav Mali</name>
        <email>hi@toxdes.com</email>
        <uri>https://toxdes.com</uri>
      </author>
      <summary type="text">Finally, after spending a lot of time updating this website, and even more time bikeshedding about colors and spacing, it&apos;s finally ready. I have a...</summary>
      <content type="html">&lt;p&gt;Finally, after spending a lot of time updating this website, and even more time &lt;a href=&quot;https://www.urbandictionary.com/define.php?term=bikeshedding&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;bikeshedding&lt;/a&gt; about colors and spacing, it&amp;#39;s finally ready. I have also decided to write more, I&amp;#39;ll explain why in a bit.&lt;/p&gt;
&lt;h2 id=&quot;migrating-to-a-new-domain&quot;&gt;&lt;a href=&quot;#migrating-to-a-new-domain&quot; class=&quot;heading-anchor&quot; aria-label=&quot;Link to this heading&quot;&gt;&lt;/a&gt;Migrating to a new domain&lt;/h2&gt;&lt;p&gt;So, on one fine day, I was chitchatting with gemini about why my old domain &lt;a href=&quot;https://txds.me&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;txds.me&lt;/a&gt; was not ranking properly in the Google&amp;#39;s search results, even after I specifically told claude to &lt;em&gt;&amp;quot;make sure my site is SEO optimized&amp;quot;&lt;/em&gt;. It kind of did the job since I currently rank 5th if I search for &lt;code&gt;txds&lt;/code&gt; on Google and that&amp;#39;s nice for me being a nobody, and to be fair, &lt;code&gt;txds&lt;/code&gt; isn&amp;#39;t even really related to me in any way. It was just &lt;code&gt;toxdes&lt;/code&gt; without vowels to get a shorter domain for my personal space on the internet. &lt;/p&gt;
&lt;p&gt;Now why &lt;code&gt;toxdes&lt;/code&gt;? well, I started using internet really late, so all the cool usernames that made sense were already taken everywhere, so I had to work with whatever was available at the time, and I have stuck with it ever since. Gemini also convinced me to use &lt;code&gt;toxdes.com&lt;/code&gt; because nothing significant exists for this word. I also tried my &lt;code&gt;firstname+lastname&lt;/code&gt; combo, but turns out my name is way too unfairly common than it should be, so here we are. &lt;/p&gt;
&lt;p&gt;By the way, I also checked &lt;a href=&quot;https://whoisfreaks.com/tools/whois/history/lookup&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;historical &lt;code&gt;whois&lt;/code&gt; data&lt;/a&gt;, and found out that &lt;code&gt;txds.me&lt;/code&gt; was registered at least 8 times in the past, and &lt;code&gt;toxdes.com&lt;/code&gt; wasn&amp;#39;t registered even once. It&amp;#39;s a really nice tool.&lt;/p&gt;
&lt;p&gt;The migration is pretty much complete, and moving forward I&amp;#39;ll be exclusively using &lt;code&gt;toxdes.com&lt;/code&gt;. I currently use Cloudflare to manage DNS records, and this website is also statically hosted on Cloudflare pages. I also host some of my historic &lt;a href=&quot;https://toxdes.com/projects&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;personal projects&lt;/a&gt; on github pages and vercel under subdomains. Vercel&amp;#39;s dashboard has a functionality to add &lt;code&gt;*.toxdes.com&lt;/code&gt; domain, and setup redirects for&lt;code&gt;*.txds.me&lt;/code&gt; to redirect to the newly added domain, so those were easy. I migrated from netlify to vercel for one old project, it was just easier to manage that way. And for the github pages site and the main &lt;code&gt;txds.me&lt;/code&gt; domain, I am using Cloudflare&amp;#39;s &lt;a href=&quot;https://developers.Cloudflare.com/rules/url-forwarding/&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;redirect rules&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id=&quot;adding-likes-to-blog-posts&quot;&gt;&lt;a href=&quot;#adding-likes-to-blog-posts&quot; class=&quot;heading-anchor&quot; aria-label=&quot;Link to this heading&quot;&gt;&lt;/a&gt;Adding likes to blog posts&lt;/h2&gt;&lt;p&gt;I&amp;#39;ve been learning about system design since forever, and I thought this might be a good idea to burn some tokens add a little bit of &amp;quot;server-side&amp;quot; state to this website. &lt;/p&gt;
&lt;p&gt;We live in exciting times nowadays where realizing an idea is just few prompts away, I quickly ended up vibe-coding &lt;a href=&quot;https://github.com/toxdes/counter-api&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;code&gt;counter as a service&lt;/code&gt;&lt;/a&gt;.  The goal was simple, adding &amp;quot;likes&amp;quot; to my posts. Within 2-4 prompts, I was able to get a multi-tenant counter backend server as a single binary which exposed some HTTP endpoints and synced state to the &lt;code&gt;postgres&lt;/code&gt; database. &lt;/p&gt;
&lt;p&gt;I also added a small in-memory LRU cache to do async updates to the postgres database, mainly because redis felt like an overkill. Perfect little solution for a perfectly little problem. I know it can be abused easily, and cannot really scale well, I&amp;#39;ll hopefully improve it and make it a little bit more reliable as the time goes by, but for what it&amp;#39;s worth, it&amp;#39;s good enough for now.&lt;/p&gt;
&lt;h2 id=&quot;why-write-more&quot;&gt;&lt;a href=&quot;#why-write-more&quot; class=&quot;heading-anchor&quot; aria-label=&quot;Link to this heading&quot;&gt;&lt;/a&gt;Why write more&lt;/h2&gt;&lt;p&gt;I always felt like I had nothing to share, and I wasn&amp;#39;t a good enough engineer to share non-trivial computer science things, and in the age of LLMs, writing blogs felt actually pointless.&lt;/p&gt;
&lt;p&gt;Recently, I had a great chat with someone in the tech recruiting space who &lt;em&gt;smuggles&lt;/em&gt; decent engineers to startups. When they asked why I had only 2 blogs in the last three years, I was like what&amp;#39;s the point in writing about trivial stuff. The good takeaway from the chat was &lt;em&gt;&lt;u&gt;writing a tech blog was never about storming the frontier of advancement in computer science&lt;/u&gt;&lt;/em&gt;, which feels strange now as I type it out, but it was &lt;em&gt;exactly&lt;/em&gt; what I used to think - everything I ever knew about programming and computers always felt like explaining how to add two numbers &lt;code&gt;6 + 7&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;After the chat and then some pondering, I had a change of heart. I have decided to write more. I think I&amp;#39;ll start writing whatever trivial things I know, or will learn next, because what&amp;#39;s trivial to me may not be trivial to everyone.&lt;/p&gt;
&lt;p&gt;I think I&amp;#39;ll start by writing about &lt;a href=&quot;/blog/l-my-amazon-sde2-interview-experience.html&quot;&gt;failing my Amazon&amp;#39;s SDE-2 interviews&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id=&quot;edits&quot;&gt;&lt;a href=&quot;#edits&quot; class=&quot;heading-anchor&quot; aria-label=&quot;Link to this heading&quot;&gt;&lt;/a&gt;Edits&lt;/h2&gt;&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;(2026-06-16)&lt;/strong&gt; - wording of &lt;a href=&quot;#why-write-more&quot;&gt;Why write more&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
</content>
      <category term="wafflings"/>
    </entry>
    <entry>
      <title>Introduction to View Transitions</title>
      <link href="https://toxdes.com/blog/adding-view-transitions.html" rel="alternate" type="text/html"/>
      <id>tag:toxdes.com,2026:/blog/adding-view-transitions</id>
      <published>2026-01-13T10:30:00.000Z</published>
      <updated>2026-01-13T10:30:00.000Z</updated>
      <author>
        <name>Vaibhav Mali</name>
        <email>hi@toxdes.com</email>
        <uri>https://toxdes.com</uri>
      </author>
      <summary type="text">I&apos;ve been on a bit of a minimalism kick lately. I&apos;ve stopped reaching for React for every project, realizing that for a blog like this, raw HTML an...</summary>
      <content type="html">&lt;p&gt;I&amp;#39;ve been on a bit of a minimalism kick lately. I&amp;#39;ve stopped reaching for React for every project, realizing that for a blog like this, raw HTML and CSS is usually enough. In fact, this entire website - content, styles, scripts included - is lighter than the gzipped &lt;code&gt;react-dom&lt;/code&gt; package alone.&lt;/p&gt;
&lt;p&gt;But there was one thing I missed from the React world: &lt;strong&gt;motion&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;Static sites often feel &amp;quot;dead.&amp;quot; You click a link, the screen goes blank, and the new content appears. I wanted it to feel alive, preserving context as the user navigates, but without bringing megabytes of javascript to hydrate a virtual DOM just to animate a &lt;code&gt;div&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;Enter the &lt;a href=&quot;https://developer.chrome.com/docs/web-platform/view-transitions&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;View Transitions API&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Specifically, &lt;strong&gt;Cross-Document View Transitions&lt;/strong&gt;. This API allows the browser to snapshot the old state and the new state, then morph between them. It&amp;#39;s native, hardware-accelerated, and requires zero client-side routing, truly magical.&lt;/p&gt;
&lt;aside class=&quot;alert alert-note&quot;&gt;&lt;strong class=&quot;alert-legend&quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;28&quot; height=&quot;28&quot; fill=&quot;currentColor&quot; class=&quot;alert-icon&quot;&gt;&lt;path d=&quot;M15.807.531c-.174-.177-.41-.289-.64-.363a3.8 3.8 0 0 0-.833-.15c-.62-.049-1.394 0-2.252.175C10.365.545 8.264 1.415 6.315 3.1S3.147 6.824 2.557 8.523c-.294.847-.44 1.634-.429 2.268.005.316.05.62.154.88q.025.061.056.122A68 68 0 0 0 .08 15.198a.53.53 0 0 0 .157.72.504.504 0 0 0 .705-.16 68 68 0 0 1 2.158-3.26c.285.141.616.195.958.182.513-.02 1.098-.188 1.723-.49 1.25-.605 2.744-1.787 4.303-3.642l1.518-1.55a.53.53 0 0 0 0-.739l-.729-.744 1.311.209a.5.5 0 0 0 .443-.15l.663-.684c.663-.68 1.292-1.325 1.763-1.892.314-.378.585-.752.754-1.107.163-.345.278-.773.112-1.188a.5.5 0 0 0-.112-.172M3.733 11.62C5.385 9.374 7.24 7.215 9.309 5.394l1.21 1.234-1.171 1.196-.027.03c-1.5 1.789-2.891 2.867-3.977 3.393-.544.263-.99.378-1.324.39a1.3 1.3 0 0 1-.287-.018Zm6.769-7.22c1.31-1.028 2.7-1.914 4.172-2.6a7 7 0 0 1-.4.523c-.442.533-1.028 1.134-1.681 1.804l-.51.524zm3.346-3.357C9.594 3.147 6.045 6.8 3.149 10.678c.007-.464.121-1.086.37-1.806.533-1.535 1.65-3.415 3.455-4.976 1.807-1.561 3.746-2.36 5.31-2.68a8 8 0 0 1 1.564-.173&quot;/&gt;&lt;/svg&gt; NOTE&lt;/strong&gt;&lt;div class=&quot;alert-content&quot;&gt;

&lt;p&gt;Unfortunately, &lt;a href=&quot;https://caniuse.com/view-transitions&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;browser support&lt;/a&gt; is not-so-good yet for cross-document view transitions, so if you are reading this in firefox, I&amp;#39;m sorry.&lt;/p&gt;


&lt;/div&gt;&lt;/aside&gt;&lt;p&gt;The &lt;a href=&quot;https://developer.chrome.com/docs/web-platform/view-transitions/cross-document&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;Chrome team&amp;#39;s intro&lt;/a&gt; covers the mechanics well, but here is how I&amp;#39;m using it to make this static site feel a little bit alive.&lt;/p&gt;
&lt;p&gt;The setup is deceptively simple. You just tell the browser to look out for navigations by adding the css:&lt;/p&gt;
&lt;pre style=&quot;background-color:var(--code-bg);color:var(--code-fg)&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;@&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-keyword)&quot;&gt;view-transition&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;  navigation: auto;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;When user navigates from the &amp;quot;Home&amp;quot; page to the &amp;quot;All Posts&amp;quot; page, I didn&amp;#39;t want a hard cut. I wanted the recent posts to physically travel to their new positions in the full list.&lt;/p&gt;
&lt;p&gt;This is made possible with &lt;strong&gt;Shared Element Transitions&lt;/strong&gt;. The concept is simple: if you give two elements on different pages the same &lt;code&gt;view-transition-name&lt;/code&gt;, the browser matches them up and handles the geometry.&lt;/p&gt;
&lt;pre style=&quot;background-color:var(--code-bg);color:var(--code-fg)&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-comment)&quot;&gt;&amp;#x3C;!-- On both the Home page and the Blog List page --&gt;&lt;/span&gt;&lt;span style=&quot;color:var(--code-fg)&quot;&gt; &lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-tag)&quot;&gt;&amp;#x3C;li&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-attr)&quot;&gt; style&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;&quot;&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-string)&quot;&gt;view-transition-name: post-item-${slug}&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;&quot;&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-tag)&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-comment)&quot;&gt;  &amp;#x3C;!-- The entire item morphs --&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-tag)&quot;&gt;&amp;#x3C;/li&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;Things are a bit more interesting when you click into a specific article. I wanted the title and date to translate from the item and settle into the header of the post.&lt;/p&gt;
&lt;p&gt;To make this work, we need to be more granular. Instead of transitioning the whole item, let&amp;#39;s assign specific names to the text nodes &lt;em&gt;inside&lt;/em&gt; the card.&lt;/p&gt;
&lt;pre style=&quot;background-color:var(--code-bg);color:var(--code-fg)&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-comment)&quot;&gt;&amp;#x3C;!-- In the List Item --&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-tag)&quot;&gt;&amp;#x3C;li&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-tag)&quot;&gt;  &amp;#x3C;span&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-attr)&quot;&gt; style&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;&quot;&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-string)&quot;&gt;view-transition-name: post-date-${slug}&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;&quot;&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-tag)&quot;&gt;&gt;&lt;/span&gt;&lt;span style=&quot;color:var(--code-fg)&quot;&gt;2026-01&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-tag)&quot;&gt;&amp;#x3C;/span&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-tag)&quot;&gt;  &amp;#x3C;span&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-attr)&quot;&gt; style&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;&quot;&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-string)&quot;&gt;view-transition-name: post-title-${slug}&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;&quot;&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-tag)&quot;&gt;&gt;&lt;/span&gt;&lt;span style=&quot;color:var(--code-fg)&quot;&gt;Introduction to View Transitions&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-tag)&quot;&gt;&amp;#x3C;/span&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-tag)&quot;&gt;&amp;#x3C;/li&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;pre style=&quot;background-color:var(--code-bg);color:var(--code-fg)&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-comment)&quot;&gt;&amp;#x3C;!-- In the Blog Post Header --&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-tag)&quot;&gt;&amp;#x3C;article&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-tag)&quot;&gt;  &amp;#x3C;h1&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-attr)&quot;&gt; style&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;&quot;&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-string)&quot;&gt;view-transition-name: post-title-${slug}&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;&quot;&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-tag)&quot;&gt;&gt;&lt;/span&gt;&lt;span style=&quot;color:var(--code-fg)&quot;&gt;Introduction to View Transitions&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-tag)&quot;&gt;&amp;#x3C;/h1&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-tag)&quot;&gt;  &amp;#x3C;div&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-attr)&quot;&gt; class&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;&quot;&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-string)&quot;&gt;post-meta&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;&quot;&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-tag)&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-tag)&quot;&gt;    &amp;#x3C;i&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-attr)&quot;&gt; style&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;&quot;&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-string)&quot;&gt;view-transition-name: post-date-${slug}&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;&quot;&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-tag)&quot;&gt;&gt;&lt;/span&gt;&lt;span style=&quot;color:var(--code-fg)&quot;&gt;Published Jan. 2026&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-tag)&quot;&gt;&amp;#x3C;/i&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-tag)&quot;&gt;  &amp;#x3C;/div&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-comment)&quot;&gt;  &amp;#x3C;!-- rest of the content --&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-tag)&quot;&gt;&amp;#x3C;/article&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;Because the names match, the browser performs a smooth &amp;quot;morph&amp;quot; transition, scaling the font size and translating the position automatically. BROWSER DOES ALLAT FOR YOU, isn&amp;#39;t that cool?&lt;/p&gt;
</content>
      <category term="learnings"/>
      <category term="web"/>
      <category term="css"/>
    </entry>
    <entry>
      <title>Hitchhikers guide to using &apos;Date&apos; in JS</title>
      <link href="https://toxdes.com/blog/hitchhikers-guide-to-js-date.html" rel="alternate" type="text/html"/>
      <id>tag:toxdes.com,2023:/blog/hitchhikers-guide-to-js-date</id>
      <published>2023-11-24T10:30:00.000Z</published>
      <updated>2023-11-24T10:30:00.000Z</updated>
      <author>
        <name>Vaibhav Mali</name>
        <email>hi@toxdes.com</email>
        <uri>https://toxdes.com</uri>
      </author>
      <summary type="text">The JavaScript Date API is a nice example of how taxing &quot;We don&apos;t deprecate, ever&quot; can get. The Date constructor has six completely different behav...</summary>
      <content type="html">&lt;p&gt;The JavaScript &lt;code&gt;Date&lt;/code&gt; API is a nice example of how taxing &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;&amp;quot;We don&amp;#39;t deprecate, ever&amp;quot;&lt;/a&gt; can get. The Date constructor has six completely different behaviors depending on what you pass it. Not variants. Different behaviors.&lt;/p&gt;
&lt;pre style=&quot;background-color:var(--code-bg);color:var(--code-fg)&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-comment)&quot;&gt;// Current time&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt;new&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt; Date&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;()&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-comment)&quot;&gt;// Milliseconds since epoch&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt;new&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt; Date&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt;1736533800000&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-comment)&quot;&gt;// String parsing&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt;new&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt; Date&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;&apos;&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-string)&quot;&gt;2023-11-24&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;&apos;&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-comment)&quot;&gt;// Year, month, day&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt;new&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt; Date&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt;2023&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; 10&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; 24&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-comment)&quot;&gt;// Year, month, day, hour, minute&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt;new&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt; Date&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt;2023&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; 10&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; 24&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; 21&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; 30&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-comment)&quot;&gt;// Year, month, day, hour, minute, second, ms&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt;new&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt; Date&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt;2023&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; 10&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; 24&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; 21&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; 30&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; 45&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; 500&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;If you give it an ISO date without a time (just &lt;code&gt;YYYY-MM-DD&lt;/code&gt;), it assumes UTC midnight. But if you add a time without the &lt;code&gt;Z&lt;/code&gt;, some browsers treat it as &lt;code&gt;local&lt;/code&gt;, others as &lt;code&gt;UTC&lt;/code&gt;. This isn&amp;#39;t theoretical. Chrome and Firefox have behaved differently on this exact case.&lt;/p&gt;
&lt;p&gt;The Z matters. Always add it if you want UTC. &lt;/p&gt;
&lt;pre style=&quot;background-color:var(--code-bg);color:var(--code-fg)&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-comment)&quot;&gt;// parsing date string&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt;new&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt; Date&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;&apos;&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-string)&quot;&gt;2023-11-24&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;&apos;&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-comment)&quot;&gt; // ISO date (no time)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt;new&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt; Date&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;&apos;&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-string)&quot;&gt;2023-11-24T21:30&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;&apos;&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-comment)&quot;&gt; // ISO date with time (no timezone)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt;new&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt; Date&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;&apos;&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-string)&quot;&gt;2023-11-24T21:30Z&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;&apos;&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-comment)&quot;&gt; // ISO date with time (UTC)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt;new&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt; Date&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;&apos;&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-string)&quot;&gt;2023-11-24T21:30+05:30&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;&apos;&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-comment)&quot;&gt; // ISO date with timezone offset&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;aside class=&quot;alert alert-tldr&quot;&gt;&lt;strong class=&quot;alert-legend&quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;28&quot; height=&quot;28&quot; fill=&quot;currentColor&quot; class=&quot;alert-icon&quot;&gt;&lt;path d=&quot;M15.807.531c-.174-.177-.41-.289-.64-.363a3.8 3.8 0 0 0-.833-.15c-.62-.049-1.394 0-2.252.175C10.365.545 8.264 1.415 6.315 3.1S3.147 6.824 2.557 8.523c-.294.847-.44 1.634-.429 2.268.005.316.05.62.154.88q.025.061.056.122A68 68 0 0 0 .08 15.198a.53.53 0 0 0 .157.72.504.504 0 0 0 .705-.16 68 68 0 0 1 2.158-3.26c.285.141.616.195.958.182.513-.02 1.098-.188 1.723-.49 1.25-.605 2.744-1.787 4.303-3.642l1.518-1.55a.53.53 0 0 0 0-.739l-.729-.744 1.311.209a.5.5 0 0 0 .443-.15l.663-.684c.663-.68 1.292-1.325 1.763-1.892.314-.378.585-.752.754-1.107.163-.345.278-.773.112-1.188a.5.5 0 0 0-.112-.172M3.733 11.62C5.385 9.374 7.24 7.215 9.309 5.394l1.21 1.234-1.171 1.196-.027.03c-1.5 1.789-2.891 2.867-3.977 3.393-.544.263-.99.378-1.324.39a1.3 1.3 0 0 1-.287-.018Zm6.769-7.22c1.31-1.028 2.7-1.914 4.172-2.6a7 7 0 0 1-.4.523c-.442.533-1.028 1.134-1.681 1.804l-.51.524zm3.346-3.357C9.594 3.147 6.045 6.8 3.149 10.678c.007-.464.121-1.086.37-1.806.533-1.535 1.65-3.415 3.455-4.976 1.807-1.561 3.746-2.36 5.31-2.68a8 8 0 0 1 1.564-.173&quot;/&gt;&lt;/svg&gt; TL;DR&lt;/strong&gt;&lt;div class=&quot;alert-content&quot;&gt;

&lt;p&gt;Remember, when using &lt;code&gt;Date&lt;/code&gt; constructor with strings, only &lt;code&gt;ISO 8601&lt;/code&gt; format is reliable.&lt;/p&gt;


&lt;/div&gt;&lt;/aside&gt;&lt;p&gt;When you pass numbers to the constructor, things get strange fast.&lt;/p&gt;
&lt;pre style=&quot;background-color:var(--code-bg);color:var(--code-fg)&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt;new&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt; Date&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt;2023&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; 10&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; 24&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-comment)&quot;&gt;  // November 24, 2023&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;Wait. November? We passed 10. Why November?&lt;/p&gt;
&lt;p&gt;Because months are zero-indexed. January is 0, December is 11. This comes from C&amp;#39;s tm struct from 1972. Java copied it. JavaScript copied Java. Now we&amp;#39;re stuck with it. Does that mean 24 is also actually 25? Well...no, days are numbered from 1 to 31.&lt;/p&gt;
&lt;p&gt;One more thing: &lt;/p&gt;
&lt;pre style=&quot;background-color:var(--code-bg);color:var(--code-fg)&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt;new&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt; Date&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt;2023&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-comment)&quot;&gt;      // Not year 2023!&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt;new&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt; Date&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt;2023&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; 0&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-comment)&quot;&gt;   // This is year 2023&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;A single number isn&amp;#39;t a year. It&amp;#39;s milliseconds since January 1, 1970. So &lt;code&gt;new Date(2023)&lt;/code&gt; is &lt;code&gt;2.023&lt;/code&gt; seconds after the epoch, which is &lt;code&gt;January 1, 1970, 00:00:02.023&lt;/code&gt;. So, If you want year 2023, you need at least two arguments: year and month.&lt;/p&gt;
&lt;p&gt;But wait, there&amp;#39;s more:&lt;/p&gt;
&lt;pre style=&quot;background-color:var(--code-bg);color:var(--code-fg)&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt;new&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt; Date&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt;99&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; 0&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; 1&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-comment)&quot;&gt;   // January 1, 1999&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt;new&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt; Date&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt;100&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; 0&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; 1&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-comment)&quot;&gt;  // January 1, 100 AD&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:var(--code-tk-operator)&quot;&gt;new&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-function)&quot;&gt; Date&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt;2023&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; 0&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-punctuation)&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-number)&quot;&gt; 1&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-meta)&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;color:var(--code-tk-comment)&quot;&gt; // January 1, 2023&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;Years 0-99 get treated as 1900+n. This is Y2K panic code. Someone was worried about legacy code passing two-digit years, so they added this special case. Year 99 becomes 1999. Year 100 is literal.&lt;/p&gt;
&lt;aside class=&quot;alert alert-tldr&quot;&gt;&lt;strong class=&quot;alert-legend&quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;28&quot; height=&quot;28&quot; fill=&quot;currentColor&quot; class=&quot;alert-icon&quot;&gt;&lt;path d=&quot;M15.807.531c-.174-.177-.41-.289-.64-.363a3.8 3.8 0 0 0-.833-.15c-.62-.049-1.394 0-2.252.175C10.365.545 8.264 1.415 6.315 3.1S3.147 6.824 2.557 8.523c-.294.847-.44 1.634-.429 2.268.005.316.05.62.154.88q.025.061.056.122A68 68 0 0 0 .08 15.198a.53.53 0 0 0 .157.72.504.504 0 0 0 .705-.16 68 68 0 0 1 2.158-3.26c.285.141.616.195.958.182.513-.02 1.098-.188 1.723-.49 1.25-.605 2.744-1.787 4.303-3.642l1.518-1.55a.53.53 0 0 0 0-.739l-.729-.744 1.311.209a.5.5 0 0 0 .443-.15l.663-.684c.663-.68 1.292-1.325 1.763-1.892.314-.378.585-.752.754-1.107.163-.345.278-.773.112-1.188a.5.5 0 0 0-.112-.172M3.733 11.62C5.385 9.374 7.24 7.215 9.309 5.394l1.21 1.234-1.171 1.196-.027.03c-1.5 1.789-2.891 2.867-3.977 3.393-.544.263-.99.378-1.324.39a1.3 1.3 0 0 1-.287-.018Zm6.769-7.22c1.31-1.028 2.7-1.914 4.172-2.6a7 7 0 0 1-.4.523c-.442.533-1.028 1.134-1.681 1.804l-.51.524zm3.346-3.357C9.594 3.147 6.045 6.8 3.149 10.678c.007-.464.121-1.086.37-1.806.533-1.535 1.65-3.415 3.455-4.976 1.807-1.561 3.746-2.36 5.31-2.68a8 8 0 0 1 1.564-.173&quot;/&gt;&lt;/svg&gt; TL;DR&lt;/strong&gt;&lt;div class=&quot;alert-content&quot;&gt;

&lt;p&gt;Remember when using &lt;code&gt;Date&lt;/code&gt; constructor with &lt;strong&gt;numbers&lt;/strong&gt;, &lt;code&gt;0-99&lt;/code&gt; for years means &lt;code&gt;1900-1999&lt;/code&gt;; months are &lt;strong&gt;zero indexed&lt;/strong&gt; from &lt;code&gt;0-11&lt;/code&gt;; days start from &lt;code&gt;1-31&lt;/code&gt;, will wrap to next month if they overflow; only passing single number argument isn&amp;#39;t the year, it&amp;#39;s &lt;strong&gt;epoch&lt;/strong&gt;. &lt;/p&gt;


&lt;/div&gt;&lt;/aside&gt;&lt;h2 id=&quot;guess-the-output-a-simple-algorithm&quot;&gt;&lt;a href=&quot;#guess-the-output-a-simple-algorithm&quot; class=&quot;heading-anchor&quot; aria-label=&quot;Link to this heading&quot;&gt;&lt;/a&gt;Guess the Output: A Simple Algorithm&lt;/h2&gt;&lt;p&gt;Here&amp;#39;s how you would do to predict what the &lt;code&gt;Date&lt;/code&gt; constructor will do:&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Step 1: Count the arguments&lt;/strong&gt;&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;p&gt;0 arguments? Current time.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;1 argument and it&amp;#39;s a &lt;code&gt;number&lt;/code&gt;? Milliseconds since epoch. Not a year.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;1 argument and it&amp;#39;s a &lt;code&gt;string&lt;/code&gt;? Parse as date string. &lt;code&gt;ISO 8601&lt;/code&gt; is safe. Anything else is a gamble.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;2+ arguments? &lt;code&gt;year, month (0-indexed), day, hour, minute, second, millisecond&lt;/code&gt; in that order. Everything is in local time.&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;&lt;strong&gt;Step 2: For 2+ args, Check for two-digit years&lt;/strong&gt;&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;p&gt;If first argument is between 0-99, add 1900. Year 25 becomes 1925.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;If first argument is 100+, it&amp;#39;s the literal year.&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;&lt;strong&gt;Step 3: Month wrapping&lt;/strong&gt;&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Month argument is 0-indexed. 0 = January, 11 = December.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Month 12? Wraps to January of next year, same with larger values. So, &lt;code&gt;new Date(2023, 20)&lt;/code&gt; is &lt;code&gt;01 Sep 2026&lt;/code&gt;.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Similarly, Month -1? Wraps to December of previous year.&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;&lt;strong&gt;Step 4: Day wrapping&lt;/strong&gt;&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Days range from 1 to &lt;code&gt;&amp;lt;max_for_the_month&amp;gt;&lt;/code&gt;. &lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Any numbers outside of the range, are wrapped to next/previous month. So, &lt;code&gt;new Date(2023, 2, 32)&lt;/code&gt; (allegedly 32nd march) becomes &lt;code&gt;01 April 2023&lt;/code&gt;. Same with negative numbers.&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;&lt;strong&gt;Step 5: Timezone&lt;/strong&gt;&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;p&gt;String with Z? UTC.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;String with timezone offset like +05:30? Parses offset but doesn&amp;#39;t store it.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;String without timezone? Pray.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Number constructor (2+ args)? Always local time.&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;&lt;strong&gt;Step 6: Invalid input&lt;/strong&gt;&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;p&gt;String that doesn&amp;#39;t parse? &lt;code&gt;Invalid Date&lt;/code&gt; object. No error thrown.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;NaN&lt;/code&gt; in any argument? &lt;code&gt;Invalid Date&lt;/code&gt;.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;undefined&lt;/code&gt; in any argument? Treated as &lt;code&gt;NaN&lt;/code&gt;, so &lt;code&gt;Invalid Date&lt;/code&gt;.&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
</content>
      <category term="learnings"/>
      <category term="web"/>
      <category term="js"/>
    </entry>
</feed>