
I need people to see my [404 page](/404), I couldn't just leave it to chance!

![404 page screenshot](/kitty-404/screenshot.png)

What's special about it you ask? It's freaking adorable, that's what. The cat's shy, so if you try to touch it, it hides behind the `0`! It's a simple effect, but there's a few subtle details to it that need trickery to work:

1. The `0` is transparent, how does the hidden cat not show through?
2. If the cat hides after you hover, that should take your cursor outside the cat's hit-area, right? Why doesn't the cat come back up then?

### Hiding behind transparency

The solution to this is good ol' `z-index` stacking. You create a dummy `div` that only serves to hide the cat, and stack things this way:

![Page layer stacking order](/kitty-404/stacking.svg)

The `border-color` around the `div` in the illustration is only for clarity, you wouldn't actually want it. What happens here is that the cat hides behind the div, which is the same color as the background, so it looks like the cat hides behind the text. There's small detail here though: your `div`'s `border-radius` needs some value so it doesn't poke from behind the text. This depends on your text, the font, and even the character you're hiding behind. In my case, I had to manually match the `border-radius` to `IBM Plex Mono`'s `0` (which is the font I use for headings on this blog).

### Extending the hit-area

This is a common problem with hover-based translation effects: you translate an element on hover, but that causes the element's hit-area to no longer intersect the cursor's position, which means the element is no longer hovered, which causes it to return to its initial position. But now it intersects the cursor's position again, so it gets translated again, and the cycle continues: the element keeps jumping around. There's a simple fix for this, add some padding around the element so that it keeps intersecting the cursor.

My rule-of-thumb is to add the same amount of padding as the element's dimensions. This has the effect of "replacing" the element with empty space (the padding). It usually works pretty well for small elements. Of course, this will only work if the element's `box-sizing` is `border-box`, but you should be doing that anyway. If you're only translating in one direction, you don't need padding all around it, just in one direction.

---

The cat's colors are, of course, my IRL cat's colors. Fair warning: I might deliberately leave broken links scattered across this blog just so people stumble across the 404 :D



I've been giving monochrome themes a try on VSCode. I don't quite remember where I saw it first, but for some reason I associate them with [tj](https://github.com/tj), so I guess they'll get credit for it!

### Why?

IDK man, it just looks so slick! Isn't that what editor themes are all about anyway? I don't think I've ever used editor token colors for anything. Here's what my editor looks like right this second:

![Screenshot of a monochrome editor theme](/monochrome/editor.png)

The theme I'm using is (aptly) called [Monochrome](https://marketplace.visualstudio.com/items?itemName=anotherglitchinthematrix.monochrome) (I'm using the `Monochrome Dark` variant). I also like to run a fairly minimal editor setup, so I think this is right up my alley. Not sure how long I'll stick with this, but this theme has been on for about a week now, and that's usually the threshold for me; anything that lasts that long usually stays for good!



I've been seeing this art style _everywhere_, especially in brandings. When I started planning out this blog on Figma, I had to give it a shot. I didn't really want a static image (I tried it, and it looked really dull). Here's how it is built:

![Finished product against real page](/webgl-topographic/final.png)

BTW the source of this website is open, so you can look at the final result [here](https://github.com/madebysid/website/blob/6ef63d6694e0530fa5f5d2a68097fa7597bd3880/lib/canvas/canvas.ts). If you're totally new to 3D graphics, I'd recommend doing some research before you dig into this!

The first thing I did was research; how were designers making this? It seemed too complex to build out by hand, and yet too organized to be random. It had to be procedurally generated, right? I found [this tutorial](https://www.youtube.com/watch?v=S_vZ-TAAg3c&t=313s), among others. The general idea seemed to be to start with some Perlin noise, blur it, adjust levels to increase contrast, and then detect edges. We're not _quite_ doing that, but we'll go a similar route.

[three.js](https://threejs.org/) is synonymous with WebGL, so we'll start there. I set up a simple scene with an orthographic camera and a single plane. The camera's `left` / `right` / `top` / `bottom` parameters were set so that the plane was the only thing you saw, and it spanned the entire screen. Next up, we'll give this plane a `ShaderMaterial` (remember to set the material's `side` parameter to `DoubleSide`), and wire up simple vertex & fragment shaders that do nothing. The vertex shader does the standard world-space to screen-space conversion:

```glsl
void main() {
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
```

and the fragment shader sets a static color for all fragments:

```glsl
void main() {
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0)
}
```

If everything went well, you should see a red canvas on your screen.

---

Alright, moving on to the cool stuff: let's create some Perlin noise. Now, we could do this on the JS side of things (on the CPU), but since we plan on animating the noise, doing this would get expensive real quick, especially for large screen sizes. So we'll do this on the GPU. You should never have to write a Perlin noise function from scratch, so I went out [looking for one](https://github.com/ashima/webgl-noise/blob/master/src/noise3D.glsl). From there, it was a matter of copying the whole thing to my fragment shader, and using the `snoise` function's return value to generate the fragment color:

```glsl
void main() {
  float noise = snoise(vec3(gl_FragCoord.xy, 1.0));
  gl_FragColor = vec4(vec3(noise), 1.0);
}
```

You won't see much yet, because the noise is far too small. Let's multiply `gl_FragCoord.xy` by `0.005` to "zoom in" a little:

![Noise-only fragment shader](/webgl-topographic/frag1.png)

You might notice that there's more black than white though, and that's because our `snoise` function returns values between 1 & -1. Fragment shader output is clipped to be between 0 & 1, so we'll need to "normalize" it. Normalizing is just fancy talk for scaling a value from whatever range to between 0 & 1.

```glsl
void main() {
  float noise = snoise(vec3(gl_FragCoord.xy, 1.0)); // get noise
  noise = (noise + 1.0) / 2.0; // normalize it
  gl_FragColor = vec4(vec3(noise), 1.0);
}
```

![Normalized, noise-only fragment shader](/webgl-topographic/frag2.png)

Next up, we want to change the noise so that it isn't continuous like that. We want "bands" of colors. This is exactly what [posterization](https://www.adobe.com/creativecloud/photography/discover/posterize-photo.html) is. A lot of graphics programming is kinda just knowing _exactly_ what you want to do I've realized, especially for beginners. [This](https://lettier.github.io/3d-game-shaders-for-beginners/posterization.html) is a great resource for learning about posterization (and tons of other stuff). I've also written a small [post](/posts/posterization) describing it, so I won't go into too much detail.

Let's posterize:

```glsl
void main() {
  float noise = snoise(vec3(gl_FragCoord.xy * 0.005, 0.0));
  noise = (noise + 1.0) / 2.0; // normalize it

  float levels = 5.0;
  float lower = floor(noise * levels) / levels;
  float lowerDiff = abs(noise - lower);
  float upper = ceil(noise * levels) / levels;
  float upperDiff = abs(upper - noise);

  float color = lowerDiff <= upperDiff ? lower : upper;

  gl_FragColor = vec4(color, color, color, 1.0);
}
```

![Normalized, posterized noise-only fragment shader](/webgl-topographic/frag3.png)

Hey, now we're getting there! What we want though aren't bands of colors, we want the _edges_ of these bands of colors. Instead of implementing a fancy edge detection algorithm, we can use the fact that posterization just rounds colors to the nearest (upper or lower) band color. **A band's edge is any pixel where this rounding error is less than 0.01 (or any threshold)**. Let's try that out:

```glsl
void main() {
  float noise = snoise(vec3(gl_FragCoord.xy * 0.005, 0.0));
  noise = (noise + 1.0) / 2.0; // normalize it

  float levels = 5.0;
  float lower = floor(noise * levels) / levels;
  float lowerDiff = abs(noise - lower);
  float upper = ceil(noise * levels) / levels;
  float upperDiff = abs(upper - noise);

  if(lowerDiff <= 0.01) {
    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
  } else if(upperDiff <= 0.01) {
    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
  } else {
    gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
  }
}
```

![Edges of posterized noise](/webgl-topographic/frag4.png)

There we go! We could end here, but there are a few obvious performance improvements we can make here. For one, we don't need to check for the difference between _both_ the upper and lower bounds. This is because the "bands" share an edge. Finding one means we've found the other.

Also, instead of painting a fragment black, we can just discard it, or tell WebGL to not paint it at all. This also has the advantage that our final material becomes transparent. You'll have to enable `alpha` in the `WebGLRenderer` constructor call to see this.

And with that, here's our final shader:

```glsl
void main() {
  // `levels` is the number of distinct "bands" you want
  float levels = 10.0;

  float noise = snoise(vec3(gl_FragCoord.xy * 0.005 , 0.0)); // get noise value
  noise = (noise + 1.0) / 2.0; // normalize it

  float lower = floor(noise * levels) / levels; // find the lower band/level the noise matches at
  float lowerDiff = noise - lower; // and find the difference

  // if the difference between the lower level is within some range, paint the fragment, otherwise ignore it
  if (lowerDiff > 0.015)
    discard;

  gl_FragColor = vec4(color, 1.0);
}
```

![Finished product](/webgl-topographic/frag5.png)

That's it! To animate this, you can use the second parameter of the `snoise` function. Pass in a `time` uniform from three.js, and use that value in there! Let's compose this into our page, and here we go:

![Finished product against real page](/webgl-topographic/final.png)

---

I have a few more ideas that should make the effect massively better, but I'll explore them in a [part 2](/posts/webgl-topographic-2) or something.



My last attempt to build myself a LAN [video streaming service](https://github.com/madebysid/nas) didn't go too well. Sure, it kinda worked, but it was _far_ from perfect. I don't really know why, but I've always wanted a NAS. TBH I don't know what I'd do with it.

So as is customary, I got distracted yesterday and dusted off the ol' Raspberry Pi that was bought but never used (to be fair I did install Arch on it, but that was literally it, I just installed Arch on it, unplugged it and packed it back up). What I wanted was apparently called a Media Server, so I went out looking for it. I found a couple of things, but none of them really told me what they did. They just had instructions on how to install, and that was it??

Let's start at the beginning. I had to install an OS on the Pi, and then get SSH access to it. I discovered a couple of really neat tricks to do this without ever attaching it to a monitor, a keyboard, or even an ethernet port.

I wasn't really into installing Arch today, so first thing I did was clear out an empty SD Card, attached it to my Macbook and flashed Raspberry Pi OS on there. It's _really_ simple, thanks to [Raspberry Pi Imager](https://www.raspberrypi.org/software/). I just selected the Lite version (without a desktop environment) and that was it! Took about a couple of minutes to ready the SD Card.

But here's where the tricks were:

1. In order to let the Raspberry Pi connect to my Wifi on boot, I created a `wpa_supplicant.conf` file on the boot partition with these contents:

```
ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev
country=US
update_config=1

network={
  ssid="<My SSID>"
  psk="<My Password>"
  key_mgmt=WPA-PSK
}
```

Unfortunately, I can't remember where I found this, but [this SO answer](https://raspberrypi.stackexchange.com/questions/67649/raspberry-pi-zero-w-headless-using-wpa-supplicant-conf-not-working) mentions it as well.

2. In order to enable SSH on boot, you just have to create an empty file with the name `ssh` on the boot partition. Apparently the OS will see this file, enable SSH, and then delete it.

Anyway, once I did that, the Pi booted up, and I connected to it via SSH from my Macbook. So delightful! (I had reserved an IP from my router way back, so I knew what it was). Set up an SSH alias for it and you can get to your pi in seconds by just typing `ssh pi` in a terminal.

---

Next step was the media server. [Kodi](https://kodi.tv) seemed to be the top choice, so I started looking into it, but got very confused. So you install this server on your Pi, and then what? Where's the UI? How do I add stuff to it? Eventually I found out that apparently the server is on the Pi, so you have to physically connect a monitor to the Pi to be able to access it. I think it's built for TVs and stuff, but this is absolutely not what I wanted.

Looked around some more, and I came across [openmediavault](https://openmediavault.org), which sounded extremely promising. I installed it on my Pi, and it exposed a web server with a UI I could acess from anywhere on my home network. Perfect!

Next up was file sharing. I learned about [SMB](https://en.wikipedia.org/wiki/Server_Message_Block), which is a protocol that lets devices on a network talk to each other. Some quick openmediavault configuration later, I had the perfect UI: macOS's Finder!

![NAS on macOS Finder](/openmediavault/finder.png)

openmediavault even supported video streaming right out-of-the-box, so I literally did not have to do a single thing extra. Sure, it's a little slow when configuring, but finding software that "just works" is so rare these days, I'm very impressed!



**Me, 2 days ago, naïvely**: There's no way I'm shipping this blog without themes. How hard can it really be? I'll do it myself.

**Me, today**: Oh.

Okay let's step back for a second, here's all I wanted:

- A theme system that respects OS preferences
- But one that'll still let you override it
- All packaged up in a neat, slick `useTheme` hook

Here's the thing: you can whip up a `useTheme` hook that does all this in a few hours (like [I did](https://github.com/madebysid/useTheme/blob/ecb593cb5dc1404b0c61599a78320d2650cd2080/src/lib.ts)!), but what you'll miss are the subtle details.

### The Flash

This is a seriously jarring thing. Let's say you're on a dark OS, you load up a webpage. It renders with a blinding white background, but it goes dark almost instantly after. ALMOST. In the 300ms it took to switch themes, you've already made up your mind: this website is janky and sloppy (even [YouTube](https://youtube.com) has this problem, and it's pretty bad in their case).

Here's why this happens:

![Page execution timeline](/react-themes/timeline.svg)

Read the timeline from left to right. When you set your "initial" theme from within a React `useState`, there are multiple things that need to happen before your browser knows what the "correct" theme is.

But there's more to it than "there's just more stuff happening". Your browser prioritizes painting _something_. In the first case, it has multiple opportunities to do so. Right after the initial HTML loads, the browser paints your page as it fetches your React (or any other framework) bundle. This is why the first thing you see is incorrect.

The way to fix this is to make sure that when the browser first paints your page, it does so "correctly". Because you're using React, there's no way for you to stop this first paint from happening. The only way to do this is to make it so the initial HTML document applies the correct classes / assigns the correct CSS variables. We can do so by inlining some JS to the initial HTML document. This JS script would do a `window.matchMedia("(prefers-color-scheme: light)")` or read from `localStorage` to set the initial theme. We can rest easy that this JS will be evaluated before the first paint. But doing so (usually) means breaking out of React. (Some tools like [Astro](https://astro.build) do some clever things to make this possible without you having to!)

The takeaway here is that a React hook in and of itself cannot do this because it cannot append a `<script>` to the initial HTML document, and that's why no `useTheme` hook can get rid of this flash _on its own_. The fix to this problem depends heavily on your build system. If you use a static site generator like Next, Astro or Gatsby, they can expose APIs to let you do this. For example, using `next/head`, you can append this script to the document's head, and Next will take care of this at build time. Astro does this out-of-the-box, and I'm sure Gatsby does some convoluted stuff to make this possible as well.

### Sharing theme value

This is more of a DX issue. Let's say you've created a `useTheme` hook that does everything you want. Now you want access to the currently active theme in 2 places in your app. You call the hook in two places, but wait, changing the theme from one place does not reflect in the other! You see, no matter how you implemented your hook, you'll use some kind of React state to hold the current theme, right? Well, React state is local to the component you initialize it in. If you use your `useTheme` hook in two places, those two places will have two different instances of state, and they will not automagically "sync up"

```jsx
function Component1() {
	const { theme } = useTheme()

	return <>Current theme: {theme}</>
}


function Component2() {
	const { theme, setTheme } = useTheme()

	return (
		<>
			Current theme: {theme}
			<button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
		</>
	)
}
```

If you click on the `button` of Component 2, the theme will only change for Component 2! I was _extremely_ surprised by this, before realizing that this is, in fact, how React has always been. To fix this, you can either move your state up the component tree to a common ancestor, and then pass the theme (and the setter) down to these components, or you can save this theme inside React context. That'll force you to wrap your app in a `ThemeProvider`, and there goes your slick hook :(

---

Anyway so for this blog I just ended up using [next-themes](https://github.com/pacocoursey/next-themes)



Welcome!

This is meant to be a short-form blog; I can't hold my own attention long enough to write anything that takes more than 15 minutes to read. I'll talk about things that intrigue me; expect a cocktail of web & graphics programming content, a pinch of opinions, topped with a garnish of rants! I might not be an expert in any of it, mostly because I'm attracted to things that I know nothing about 😬

I hope you like it, and that I stick with it 😄

P.S. I've got an incredible story about how this blog came to be, and I think that perfectly illustrates my brain:

I woke up yesterday reading a tweet about [Phil Pluckthun](http://github.com/kitten) joining [GraphCDN](https://graphcdn.io). One of the founders of GraphCDN ([Tim](https://github.com/timsuchanek)) was a colleague of mine at [Prisma](https://prisma.io). In fact, he hired me! Anyway, the first thought that came to my brain was damn, GraphCDN's making MOVES! I felt this sudden burst of motivation to make progress on [Crisp](https://github.com/crimsontools). I've been reading a bunch of academic papers to build it, so I immediately jumped out of bed to read some more.

I thought it'd be cool to write about all this, since I decided I wanted to do more of that this year (in JANUARY! At least I'm finally getting to it). But in order to write, I needed a place to do it, so I thought I'd quickly finish up my website that I'd designed in Figma last week. Then I realized how I got distracted so easily, so I did some research about psychiatrists near me (I've been wanting to get tested for ADHD for a while now), found that they only open on Monday, realized I needed to get back to my website, decided I didn't like the design anymore, so redesigned it in Figma as a website + blog combo, then finally got around to building it, and here we are!


Posts

Kitty 404

August 25, 2021

Monochrome editor themes

August 24, 2021

Topographic Line Art with WebGL

August 24, 2021

Getting NAS-ty

August 23, 2021

useTheme hooks are deceptively hard

August 22, 2021

Hello World!

August 15, 2021