
![アルジャーノンに花束を - Daniel Keyes ](/img/books/flowers-for-algernon.jpg)

**アルジャーノンに花束を - Daniel Keyes**

この本はなぜか日本で知られてるけどイギリスではそれほど有名じゃないようだ。  
僕の大好きなNUJABESの「FEATHER」という曲に出てくるから知ってる： 
> ...  
> The best laid plans of Mice and Men are never right  
> I'm just a Vagabond with Flowers for Algernon  
> An Average Joe who knows what the fuck is going on  
> ...  
読むしかない、、、 
\
**＊＊ネタバレ注意＊＊**

知的障害者でIQ８０の主人公が子供のように無邪気な生活を送ってる。  
名前はチャーリーである。  
チャーリーはベーカリーで働くこともでき、ある程度自立をしており、友達も少なくない。
ある日、チャーリーは科学者に選ばれ、「知能を向上させる手術ができるかもしれない」と告げられる。
チャーリーには、子供の頃から他の子供と同じように「利口になりたい」という夢があり、喜んで手術を受けることにした。
\
\
手術が成功し、チャーリーの知能は日々少しずつ向上していく。
知能が上がることで、これまで理解できなかった過去の記憶や経験を新たな視点で見直すようになる。彼が友達だと思っていた人々が実は彼を見下し、いじめていたことや、子供の頃に親から虐待を受けていたことに気づく。
チャーリーは知能を得ることで幸せになれると信じていたが、高い知能を持つことで人間の闇がはっきり見えるようになり、時には元の白痴状態がよかったのではないかと感じることもあった。
しかし、手術の影響で正常のIQに止まらず、時間が経てば経つほどチャーリーの知能が伸びる一方であった。
\
\
天才的なIQにまで達したチャーリーは、心理学者になり、手術を行った科学者たちが実験用に使用していたネズミ「アルジャーノン」を観察することで、恐ろしいことを予測する。
手術の効果は一時的なものであり、いずれ知能が元に戻る、むしろ、さらに低下してしまうという結論であった。
天才的なIQを持つ人間しか予測できなかったことを予測してしまい、能力があるうちにチャーリーは得た知能を保つ方法を必死に探しはじめた。
\
\
さて、どうなるでしょう？




![Debt, the first 5,000 years - David Graeber](/img/books/debt.jpg)

**Debt, the first 5,000 years - David Graeber**

Its long! Exactly 400 pages, but what a book.
If there is just one book that I could read on economics/history/anthropology this would be it.
The title sounds a lot more impenetrable than the content, when I tell people about this book I often get "that sounds very academic" but as a layman I found it perfectly readable. 
\
\
This book takes a stab at the following questions:  
<br/>
* What is the origin of money?  
* How is money created?
* What is debt?
* What is capitalism?
* Where do markets come from?  

\
So it is by no means just about what many people think of when they hear the word "debt".
\
\
The parts of this book that I enjoyed most were when the author got to show off his anthropological prowess. It really opened my eyes to the diversity (in the treatment of debt) of societies spanning millennia and continents. This includes the Tiv people of Africa, the Indus valley civilizations, the Irish kingdoms, ancient India and the usual suspects like the ancient Egyptians, Greeks, Romans, Chinese and so on.
Across world history there are trends that regardless of culture or geography make themselves apparent when considering what mediums of exchange were widely used at the time. You would think that knowledge of a particular society's culture, economic system and geography would first need to be analysed before sufficient anthropological predictions could be made. However, the author makes the case that simply by determining whether a transaction was settled in cash, bartering or through credit, much can be gleaned about the sort of goods that could be acquired (e.g. slaves etc.). 
\
\
One major point of the book is that we exist in the very early stages of an economic era that may yet span many hundreds of years, beginning in 1971 when the Dollar was taken of the gold standard. Across history, societies that use precious metals as the medium of exchange tended to have a propensity for war, expansion and enslavement. Societies that did not, tended to be more peaceful, however we don't yet know if that trend will continue to be relevant in our modern era.
\
\
I must also mention that there is something that the author absolutely flogs a dead horse on. It is the total and thorough debunking of the idea that the inconvenience of barter provides the impetus for the advent of money. Every 15 pages or so we get a reminder of why the myth of barter is absurd and could not have been the primary means of exchange prior to money being established. Thank you David Graeber, I will personally guarantee that if I ever hear anyone repeat this myth I will forcefully point them in the direction of this book. 
\
\
May you rest in peace. 




I've only been using Kagi for a couple of days now, but the search results on programming topics are leagues better than Duckduckgo. I may be a little late to the party, but just realised that you can have shared state between pages without polluting `_app.tsx` in NextJS. I credit Kagi for taking me to this page where I learned about `getLayout`.
[https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts#per-page-layouts](https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts#per-page-layouts)
\
\
Here is how to add Kagi as your default search engine to Firefox on NixOS (home-manager)

```nix lang="nix"
home-manager.users.<my-user>.programs.firefox = {
  enable = true;
  profiles = {
    myProfile = {
      ...
      search = {
        force = true;
        default = "Kagi";
        engines = {
          "Kagi" = {
            urls = [
              { 
                template = "https://kagi.com/search?q={searchTerms}"; 
              }
            ];
            iconUpdateURL = "https://assets.kagi.com/v2/favicon-32x32.png";
            updateInterval = 24 * 60 * 60 * 1000; # every day
            definedAliases = [ "@kg" ];
        ...

```


![The Trial - Franz Kafka](/img/books/the-trial.jpg)

**The Trial - Franz Kafka**

This is one one of those books that people tell you to read when they actually haven't finished it themselves (you know who you are). I don't think anyone would mind me saying that its a painful read, because surely that was the author's intention. It's about a guy who lives in a world that is governed by an impenetrable court system, the workings of which nobody understands. He gets arrested randomly and put on trial without explanation. Nobody knows what the charges are (except maybe the high judges?) so its very difficult to defend himself. There is what they call an "advocate" who offers to help the protagonist with the trial. However the help he provides consists of various sycophantic offerings to court judges who happened to have been acquaintances from the past. The protagonist also finds himself entangled with various female characters with tenuous connections to the courts, who for some reason show great romantic interest in him. They offer to help in one way or another by providing the protagonist with some sort of 3rd-hand information about the courts, which nevertheless fails to translate to much advantage in the proceedings. The setting of the book is no doubt dystopian, and reminds me of the Maoist witch hunts described in the book [Wild Swans](https://en.wikipedia.org/wiki/Wild_Swans). For me it served as an unsettling reminder that there are people in this world who would quite happily construct such an opaque bureaucracy as described in the book. If the consequences of the court's ruling were not so dire, it could even be interpreted as comedic, but the sinister aspect of it all seems a little too real and a little too plausible for it to make me laugh. 

\
I may have been a bit harsh. Overall I am glad to have read this book.


![人間失格　太宰治](/img/books/ningen-shikkaku.jpg)

**人間失格　太宰治**

日本人なら誰でも知ってる小説だと聞いて読もうと思った一冊。（読んだ後に友達に確認したらそれは大げさだったらしい。笑）  
内容はとても暗く、絶望感がすごく伝わってくる。  
落ち込んでる時に読ない方がいいと注意されていたけど、自分は落ち込んでいる時に読んでも大丈夫だったかもしれない。  
描写が抽象的で「何が起きた？具体的に言ってくれ！」みたいなところが多かったけど、文学って言うのはそんなもんだろう。  
主人公の葉蔵は変わりたくてもアル中から脱することができなくて、最後の方にお酒をやめたけど結局薬物依存症に移っただけだった。  
現在はインターネット依存症、スマホ依存等が広がる一方、少なくとも誰もが一人ぐらい依存症を持ってる知り合いがいるんじゃないかなって思う。  
自分だってインターネット依存症だもん。笑。  
主人公の葉蔵はいつも周りに人がいても素でいられなかったから孤独だったと思う。  
私達がLINEで友達とやり取りしていても感じる孤独と似てると思う。  
\
心に響いた箇所  

* 女は死んだように深く眠る、女は眠るために生きてるのではないかしら。  
* 自分は道化を演じ、男はさすがにいつまでもゲラゲラ笑ってもいませんし、それに自分も男の人に対し、調子に乗ってあまりお道化を演じすぎると失敗すると言う事を知っていましたので、必ず適当のところで切り上げるように心掛けていましたが、女は適度という事を知らず、いつまでもいつまでも、自分にお道化を要求し、自分はその限りないアンコールに応じて、へとへとになるのでした。  
* 自分は、女があんなに急に泣き出したりした場合、何か甘い物を手渡してやると、それを食べて機嫌を直すという事だけは、幼い時から、自分の経験によって知っていました。  
* 俗にいうチャッカリ性でした。田舎者の自分が、愕然と眼を見張ったくらいの、冷たく、ずるいエゴイズムでした。自分のように、ただ、とめどなく流れるたちの男では
無かったのです。  
* 「モチよ」  



I just happened to stumble across [The Dandy Warhols' new song - “I’d Like To Help You With Your Problem (feat. Slash)”](https://www.youtube.com/watch?v=H3H2AVm1uD8) and its pretty good. 
\
\
The music video is mostly AI generated, with all the weird/creepy artifacts and distortions you may expect. 
A genius move since this is exactly the dreamy, hazy, vague, feeling their music has always conveyed to me. 
\
\
Its amazing how over all the years of cinema, humanities attempts to convey the sensation of dreaming have never even came close to what AI can do. As the underlying models improve, we are likely to see fewer of these hallucinations in generated content, which I find a little bit sad. 
I love the mental image of a giant machine, lying motionless in deep slumber, engineers prodding at the wires in its brain, hoping to influence the direction it takes as it drifts through a dream. 
\
\
I like this analogy because explains why AI halucinates.
\
What do we call it when we halucinate in our sleep? ...A dream. 
\
\
It reminds me of the anime [pluto]( https://www.imdb.com/title/tt26737616/ ) which I saw on netflix.
The plot is based on our desire to create a robot with a more human mind, with scientists going to ever greater lengths to balance human-like emotions with the cold hard logic expected of machines. One scientist takes it a step too far by creating the "ultimate" robot by simulating the lives of billions of humans in its brain. But there was one problem, the robot would not wake up. It was in an endless dream. Eventually the scientist found a way to wake up the robot by forcing an overwhelming emotion into its brain, rage.
\
\
Oof, lets not do that.


![世界音痴 穂村弘](/img/books/sekai-onchi.jpg)

**世界音痴 穂村弘**

明らかにペルソナじゃないけど頑張って読んでみた。
短歌について何もわからないし、調べても読めるものは一つも見つからなかった。それでもこの本はすごく面白かった。短歌と難しい日本語は通じなかったけど昔から「世界音痴」を体験してる人だから、なんとなく作者の気分がわかる。
ある部分は僕とあんまりにも似すぎて、それなりの恐怖感を感じた。このままじゃ自分も３９歳になっても実家に住んでるだろうって。
\
\
読んで共感したポイントが山ほどあったけれど、特に心に響いた文のみに絞る。
\
\
(降順)
1. 金額に合わせて小銭を揃えるという、その時間に耐えられないのである。面倒なのではない。店員を待たせている時間そのものが熱湯のような痛みを伴って感じられるのだ。そしてお釣りを受け取ると、ばっとコートのポケットに投げ込んでしまう。今度は受け取ったお釣りを財布に収納する時間に耐えられないのである。別に私の背後に客が並んでいるわけではない。せめてレシートだけでもその場で捨てたいのだが、それができない。私のポケットには財布の外側に常に大量の小銭とレシートが溢れていて気持ちが悪い。
1. 表面が白っぽくなった大トロのパック（半額）を手にとって買おうか買うまいか、得か損か、まだまだうまいかもう腐りかけか、迷っているとき、不意に「ああっ」と叫びたくなる。「人生って、これで全部なのか」
1.  ＜親密さ＞をそっくり残したままの、恋の終わりは苦しい。「たからもののシャツ、うちにあるよ」「うん」「送ろうか」「うん」「たからものなの？」。それは、いつもの二人の、変わりなく親密なやり取りでありながら、同時に恋の終わりの会話なのだ。
1. 「今日こそ蜂蜜を買うぞ」「おー」と勇んで蜂蜜屋に直行する。「いらっしゃいませ」と迎えてくれた店員は人間の女性だった。棚に並んだ何種類もの蜂蜜の色は微妙に違う。中の一つに私が手を伸ばすと、「それは小心者向きでございません」と店員さんの声。驚いて瓶から手を放す。





So this year I thought I'd start recording the books I read.
Mainly so I don't get to the end of the year and think "What did I read?".

\
The first book that I have read this year is called:

**陽気なギャングが地球を回す**
\
\
面白かった。伏線回収がすごい本だった。
普通は強盗系の話とかはあんまり好きじゃないけどこの本は面白かった。
信じ難い部分も多かったけどあらすじは複雑で予想できなかったから最後まで読んで楽しかった。
いつかはまた読みたいと思った。



**First impressions of Remix vs. Nextjs (pages router)**
* Obviously Remix is the new*er* kid on the block, so expect library support etc. to be less comprehensive.
* It seems that Remix has changed its routing system recently. Unfortunately many of the tutorials out there use the old one (directory based), which is confusing.
* Remix is less of a black box than Next. You are allowed to configure the `entry.client.tsx` and `entry.server.tsx` in any way you want to. This lets you take control of exactly how you do SSR and hydration.
* At the time of writing, Remix heavily leans into using the latest React features like `renderToPipeableStream` which you will see in your `entry.server.tsx`. Unfortunately a lot of libraries are not up to date and still use `renderToString` in examples, like [mui](https://github.com/mui/material-ui/blob/master/examples/material-ui-remix-ts/app/entry.server.tsx). So it can take a while to figure out how to integrate all of your libraries so that they are happy doing SSR.
* Remix is a framework who's main abstraction is the data fetching on the server side. Nextjs (page router) has a similar concepts with `getServerSideProps`, `getInitialProps` etc, but it seems that Remix's solution is more all encompassing and unifying. 
* Nextjs is in weird limbo state at the moment where you have to choose between the `pages` router and the `app` router when you create your project. This is fine if you are sure exactly what feature you need, but in the case where you don't really know, Remix might be a safer bet.




**Nx hanging**

Ok I'm using [Nx](https://nx.dev/) as a monorepo manager for a project and got into to some very strange behavior. There are several node apps in the repo and to run them, you use `npx nx serve <my-app-name>`. Sometimes tho, after updating an npm package I would get an error like:

```
LOCK-FILES-CHANGED

please restart nx daemon using `nx reset`
```

Unfortunately I couldn't reproduce the error message exactly at the time of writing, so this is the best I could remember.  
\
Anyway, no matter how many times I run `nx reset`, my `npx nx serve` commands would just hang. Zero output at all. As I suspected the daemon, I tried to view its logs.
To find out where the log file was I did:

```
$ npx nx daemon
Nx Daemon is currently running:
  - Logs: /home/tom/Documents/project/node_modules/.cache/nx/d/daemon.log
  - Process ID: 33785
```

But when I tried to `cat` the log file it apparently did not exist!

So presumably the daemon was in some kind of infinite death loop...
I never got to the bottom of the cause, but did manage to find a solution.  
\
There is an environment variable that disables the daemon because its more of a performance optimisation than a critical feature.
So now I just `export NX_DAEMON=false` and everything seems to work ok.  
\
If you use a `nix` `devShell` like me you can just add it to the `shellHook` like so:

```nix lang="nix"
...
devShells.default = pkgs.mkShell {
  shellHook = ''
    export NX_DAEMON=false
  '';
};
...
```



Have you heard of _semantic_ Javascript ?

You probably answered "No" because I just thought of it 😇

Everyone knows they should be writing semantic HTML but why not apply the same standards to a "real" programming language.

Semantic programming is all about using the constructs a language provides in such a way as to convey intent to the target audience, whether that be human or machine. In HTML we have the classic example of using the `<footer>` tag instead of just spamming `<div>` everywhere. Lets apply that logic to Javascript.

Here's some non-semantic JS.

```js lang="js"  messages={[{type:"warning", message:"I have to look inside the loop to find out that we are transforming each element.", line:2,token:[6,15]},{isTop:true, message:"ah, a for loop, I wonder what it does.", line:1, token:[1,2]}]}
let arr = [1, 2, 3]
for (let i = 0; i < arr.length; i++) {
  arr[i] = arr[i] * 2
}
```

now for something semantic

```js lang="js" style={{"--message-margin": "0.2rem"}}  messages={[{type:"addition",message: "This one word tells me that we are transforming each element somehow, without me having to read any further!", line:2, token:[4]}]}
// we are doing the exact same thing as before, just better.
let arr = [1, 2, 3]
arr = arr.map((x) => x * 2)
```

I think you get the idea...

But just in case, here is another scenario...

```js lang="js"  messages={[{type: "warning", isTop: true, message: "Not sure what this while loop is going to do", line:0, token:[0,1]}]}
while (i < arr.length) {
  ...
  // do some operation
  res = ...
}
```

Compare the above to this:

```js lang="js" style={{"--message-margin": "0.2rem"}}   messages={[{type:"addition",isTop: true, message: "This word means we are going to combine the array in some way.", line:0, token:[5]}]}
let res = arr.reduce((acc, cur) => {
  ...
  // do some operation
},{})
```

So.. what do you think?

Ok, maybe this is just an excuse to get you to do some functional programming. 

You got me! 😘




Here's how to burn audio to a CD from the command line.

```shell lang="shell"
# Remove spaces from filenames
for f in *; do mv "$f" `echo $f | tr ' ' '_'`; done
# Convert all tracks to wav
for i in $( ls ); do ffmpeg -i $i $i.wav; done
# Normalize the volume across all tracks
normalize -m *.wav
# Burn to disk
sudo wodim -v -dev='/dev/cdrom' -audio -pad *.wav
```



So this is one of the first times I have actually come across a hurdle when it comes to developing software on old computers. 
A couple days ago I started experimenting with [bun](https://github.com/oven-sh/bun), which is amazing by the way. One of the big selling points is that it is *really* fast, but this speed seems to come at a cost... 

As I use NixOS, I installed it the usual way by adding it to my `configuration.nix`. But alas, life isn't always simple.
It seems to install ok, but when I tried to run `bun` I got an error immediately: 
```sh lang="sh"
illegal hardware instruction (core dumped)
```

Wow an actually hardware error! I haven't seen one of those since I was trying some overclocking! So the problem comes down to the fact that `bun` uses some cutting edge CPU instructions that weren't around in 2012. Now, on other Linux distributions you can simply use a bash script to install bun à la: 
```sh lang="sh"
curl -fsSL https://bun.sh/install | bash
``` 
Apparently it checks your CPU and in the event it finds something of a certain vintage it installs a `baseline` version of `bun` which I guess doesn't use any of the funky CPU instructions it would usually. Unfortunately the nix package does not at the time of writing do this. [There is actually a PR open to fix this](https://github.com/NixOS/nixpkgs/pull/203379) but it has not been merged yet. So for the time being you can basically just take the code from the PR, save it to a file locally and build the `baseline` version yourself.

1. [Download and save this file.](https://raw.githubusercontent.com/NixOS/nixpkgs/3975fb8a5d80e486aad7f030b9937eb56531a698/pkgs/development/web/bun-baseline/default.nix)
2. Now to build is, run: 
```sh lang="sh"
nix-build -E 'with import <nixpkgs> {}; callPackage ./default.nix {}'
```
3. You should now be able to run `bun` by doing: 
```sh lang="sh"
./result/bin/bun
```


I witnessed this absolute corker of a bug in the office today.

After a force reboot (its a long story), we noticed that the cursor was flickering on my colleague's Ubuntu laptop. After some googling, we realised that this flickering only happens at 200% fractional scaling. Setting to any other value like 175%, 150% etc. works perfectly fine.

[https://askubuntu.com/questions/1234189/cursor-flickers-on-primary-display-when-fractional-scaling-is-enable-for-dual-mo](https://askubuntu.com/questions/1234189/cursor-flickers-on-primary-display-when-fractional-scaling-is-enable-for-dual-mo)

Despite the link above being more than **three and a half years old,** it appears that *even today*, this bug can still be observed in the wild, in its natural habitat, on Ubuntu.




It's taken me far too long to discover this foot-gun in express. 

I started a new express project the other day and realised that my request bodies were all empty! Spent a good hour thinking  it was a problem in the client or the proxy etc... but was actually just because I forgot to apply these two middlewares.

So the question is, why are these middlewares not enabled by default????

```js lang="js"
  const app = express()
  // this populates req.body when the payload is json
  app.use(express.json({ type: "application/json" }))
  // this populates req.body when the payload is urlencoded 
  // (e.g when a form gets submitted)
  app.use(express.urlencoded({ extended: true }))
  ...

```

Sensible defaults are just something we don't deserve I guess...


**Optimistic VS Pessimistic Locking**

Imagine you are on a plane and you need to pee.
You're a stubborn guy. When you leave your seat, you are determined to pee one way or another.
You must assume your fellow passengers are as least as stubborn.

**Optimistic Locking**
 
There is a single toilet located in the middle of the plane that can be accessed from multiple directions.
You are sitting at the back and can only see the entrance to the toilet that is in your direct line of sight.
You want to know if its ok to go to the toilet so you check the overhead light which says "vacant".
Assuming that it will remain vacant for the entirety of the time it will take you to reach your destination, you get out of your seat and commit to peeing.
Now one of two things are going to happen:
1. The toilet is vacant by the time you get to it - Success
2. Someone else has slipped into the toilet via an entrance you couldn't see during the time it took you to walk there. Since you have committed to peeing, you have no choice but to do so in a cup - Failure.

**Pessimistic Locking**

Due to your toilet paranoia you reserve a seat on a specially designed plane. It is designed such that each seat is directly adjacent to a toilet and has excellent visibility of all its entrances. Because of this, you are able to in a single instant, both check that a toilet is free *and* enter it. It is therefore guaranteed that you nor any other passenger will be forced to pee in a cup.


So obviously there is a dilemma here. 

The specially designed plane will carry less passengers due to its emphasis on providing the stubborn peeing passenger peace of mind.
The normal plane will be more efficient but has to account for the occasional cup of pee getting knocked over.

**What have we learned?**

There is no "correct" way to design a plane, only trade-offs.


Some lesser known nice things about Japan 🗾

* Ambulances are loud, but not *too* loud.
* When Police cars do unexpected things like making a U-turn suddenly, they politely inform everyone nearby with a megaphone.
* When large vehicles make a turn near a pedestrian they play a vocal warning "Watch out! I'm about to turn left!"
* Dog owners carry a bottle of water to wash away any pee the dog might do on a walk.
* There are lots of outside gyms.
* There are lots of summer festivals which aren't exclusively an excuse to get drunk.
* Its not okay to be ugly.
  * You better look your best if you're thinking about leaving your home. 
  * Foreigners usually get the benefit of the doubt.
* Lots of stuff made in Japan for Japanese people only. (Films, cars, appliances...)
* There is one and only one right way to do everything. 
  * If you order something in a cafe or a restaurant, chances are they'll tell you the right way to consume it. 
  * e.g. You order an iced coffee creamy thing from a local cafe.
    1. First taste the top and bottom layers independently before mixing them both together with the straw...
* There is a lot of wildlife everywhere.
  * Probably more wildlife in Tokyo than in any National park in the UK.
* There are dry ice machines in some supermarkets.
* Some cars have a horn? that says in a polite voice "Please watch out, a car is passing by!" to unsuspecting pedestrians that haven't noticed.
* Relaxing background music automatically starts playing the instant your skin comes into contact with the toilet seat.
* Safety first
  * At petrol stations there is an "anti static electricity pad" for you to touch before filling up your car.
* The sky is big. 
![Power cables on a hot sunny day](/img/japan-cables-sky.png)


Its been a while since I did any data modelling in typescript.

```ts lang="ts"
// An example of a user management system
// Define user status type, just an enum
type UserAccountStatus = "ACTIVE" | "DORMANT" | "DELETED"
// Define a base type
type BaseUser = { name: string; status: UserAccountStatus }
// Create concrete types using the base type
type ActiveUser = BaseUser & { status: "ACTIVE" }
type DormantUser = BaseUser & { status: "DORMANT" }
type DeletedUser = BaseUser & { status: "DELETED" }
type User = ActiveUser | DormantUser | DeletedUser
// Create the type of function we want to implement
// Make return type a promise because we talk to the DB
type DeleteUser = (user: ActiveUser | DormantUser) => Promise<DeletedUser>
// do a temporary implementation of the function
const deleteUser: DeleteUser = (user) => {
  const deletedUser: DeletedUser = { ...user, status: "DELETED" }
  // define a helper that we haven't got yet
  return writeUserToDB(deletedUser)
}
// declare the type of the helper like so:
declare function writeUserToDB<A extends User>(user: A): Promise<A>

```



Bought some books with the intention of learning Chinese but yeah its pretty hard.  
As long as I don't give up completely I might be ok at it in the region of say... a decade?  
Which is really not too long when you think about it.  
So I guess nothing to complain.



[https://www.youtube.com/watch?v=I9gLrRwLFCs](https://www.youtube.com/watch?v=I9gLrRwLFCs)

Tonight is city pop vibes 🗾


This was super helpful for implementing webmentions on my site! Thanks!



Oh, looks like I have to paste the link explicitly for it to work.

Anyways, here it is:

https://blog.rubenwardy.com/2022/03/17/plant-monitor/



Not as cool as [this post](https://blog.rubenwardy.com/2022/03/17/plant-monitor/) right here am I rite m8s??? 🌳💻🎉


My first note


So this is what shouting into the void feels like...

Hello, this is my first "note".

Probably not going to write too many until I'm sure I have web mentions all working.


My experiences with monochrome programming since 2020.

Coding on E-Ink since 2020


It was the spring of 2020, I had just received my [アベノマスク (Abe masks)](https://www.asahi.com/ajw/articles/14469339)  and I could *finally* breath easy. Only the people of Japan know the reassurance provided by *barely 2 millimetres* of coarsely stitched linen, loosely sliding across your nose and mouth  [ as you board a socially-distanced train]( https://www.youtube.com/shorts/l7xG2efCvyA ). Not a *single* corona virus would make it through Abe's impregnable shield, and **the country knew it**. 

A month later the (ultimately to resign and be assassinated) prime minister of Japan had wisely chosen to capitalize on the collective cough of relief brought about by his thought-leading mask policy. He decided to give each and everyone of us ten thousand of his finest yens in order to stimulate the economy. And how should I choose to do my bit for the greater good? I made my first e-ink monitor purchase, namely the `Dasung paperlike HD-FT`. Although I *may have* stimulated the Chinese economy instead of Japan's, its always the thought that counts when it comes down to **emergency macro-economic stimulus packages**.

<video width="100%" controls>
  <source src="/videos/eink.mp4" type="video/mp4"/>
</video>

## How does it work?

You've used an e-reader before, right? 

Well its basically that but bigger and more responsive.

E-Ink monitors reflect the ambient light in the room in the same way a page in  a book does, thus no backlight is required and much less eyestrain. The "less eyestrain" thing is actually the only benefit to e-ink monitors, they are inferior to conventional monitors in every other way (except maybe power consumption, but honestly who cares?).


## So why do you use E-Ink monitors?

Because I have no choice 
...And due to the downsides that I'll get to later, neither should you for you to seriously considering buying one.

I get a headache and my eyes begin to hurt when I look at a conventional screen for too long. If its a really bright screen this might be a really short time like less than 5 seconds. I'm not sure exactly why this happens but its definitely something to do with having photons blasted into my eyes. I have always been this way since I was a child (in those days we had a CRT). Upon reflection, this may have been a sign from the universe not to pursue a career that involves staring at a computer for 90% of my time. Oops... Luckily e-ink monitors exist and they are a total game changer for people like me. If you feel like you have eyestrain problem then I would definitely recommend trying one out. [If you're lucky you can pick up e-ink monitors for cheap on this subreddit.](https://www.reddit.com/r/eink/)


## The numerous downsides of e-ink technology

* [Ghosting](https://www.youtube.com/watch?v=YcTEymFXw5c)
  * In order for an e-ink screen to refresh quickly, it doesn't fully reset in the same way as an e-reader. It does a sort of "best effort" refresh which means that you can see a faint afterimage of whatever you happened to have looked at previously. This causes the currently rendered image to appear cloudy and pale. This is known as "Ghosting".
* Limited contrast
  * On a micro level, an e-ink pixel can either be black or white, nothing in between. So how can you have multiple shades of gray with e-ink? This is achieved by dithering, which is where black pixels are interspersed with enough white pixels to cause it to appear grey. But because this introduces noise into the image, the more shades of grey, the more the contrast you lose and the more the quality of the picture deteriorates.
  ![My eink monitor degradation](/img/monalisa.png) 
* Context dependant settings
  * Using E-ink monitors requires accepting trade-offs. If you are just poking about on the command line you don't need a fast refresh rate, and would prefer a higher contrast to make text more readable. If however you are watching a video, you definitely want a high refresh rate and would be willing to sacrifice some contrast to get it. Unfortunately current e-ink monitors do not change these settings automatically, instead you must change the settings via the physical buttons on the monitor. Not particularly ergonomic if you switch contexts frequently.
* Slow refresh rate
  * Even on the "fastest" settings the refresh rate is a far cry from conventional monitors.
* E-ink Degradation
  * Over time the e-ink panel begins to degrade and show physical defects. Not so good considering how expensive they are! Below is an image of my monitor exhibiting degradation, notice the white lines appearing on what should be a uniformly black background. These e-ink pixels are "stuck" on white and no longer can change when the screen refreshes.
 ![My eink monitor degradation](/img/e-ink-degradation.png)
* No colors! 
  * `Dasung` has recently prototyped a color monitor so this may change soon.

### The industry leader is totally clueless

Unfortunately, `Dasung`, the current industry leader when it comes to e-ink monitors, seems to not grasp the reason people would ever consider buying an e-ink monitor in the first place. The gimmicky features these monitors are being crammed with often do nothing for the average eye strain sufferer, in fact a few of them actually make eyestrain worse. Take a look at this feature from a monitor they call the [Dasung 253 Dark Knight Version](https://shop.dasung.com/products/dasung-25-3-e-ink-monitor-paperlike-253).

![Dasung dark knight mystic neon light feature](/img/dasung-dark-knight.webp) 

Ahh yes, the shimmering neon light on this monitor is just what my eyestrain needed! 
 

## Tips I have discovered

### Get a lamp

Unless you have a lot of natural light in your room all-year round then you are going to struggle to use your monitor without a lamp of some sorts. Ambient lights are not enough! Some e-ink monitors come with integrated LED frontlights which I advise against using because they:
1. Are a source of eye strain in and of themselves.
2. Greatly reduce the contrast of the e-ink display.

Instead I recommend picking a desk lamp that is tall enough such that it can shine *down* on the monitor, otherwise you are going to get a lot of reflections. I would also recommend getting a light bulb with a warm hue to minimize blue light exposure (which tends to aggravate eyestrain). Although you can't really buy halogen bulbs anymore, it is possible to find LED bulbs that are pretty close substitutes (minus the heat).

![A lamp shining on an e-ink monitor](/img/lamp-on-e-ink.jpg)

### Minimize context switches

Because messing around with the physical buttons every 5 seconds is obviously a waste of time, you need to keep that to a minimum. To do that, you need to stay on the same settings for as long as possible. For me, I try to stay in the "text" mode most of the time (think high contrast + low refresh rate). To do this I almost exclusively use my keyboard to interact with my computer. This is because accurately positioning a mouse cursor on something you want to click on in a low refresh rate setting is like aiming while peeing drunk. So I try to just use my keyboard. Which naturally leads to us to my preferred e-ink stack:

### The Stack

* Linux
  * I have tried e-ink on a Mac and the picture is not as clear as on Linux. I'm not sure why but I think Macs seem to do some funky Hi-DPI rendering that looks good on a conventional monitor but has little dots everywhere on e-ink.
* Tiling window manager (sway)
  * Fractional scaling seems to work pretty well
* CLI based workflow
* Vim
* Vimium extension for your favourite browser
![Dasung paperlike hd-ft](/img/e-ink-setup-1.jpg)
If you can afford it, having a second e-ink monitor is also great for productivity. You can keep one in text mode and the other in a faster mode for web browsing etc. This will help you to reduce the number of times you have to change the settings on your monitor even more.

### Software controls

In an ideal world we should be able to use software to control the settings of e-ink monitors so that we don't have to mess around with any of the physical buttons. Unfortunately my experience with the vendor provided software is pretty bad. I can however recommend [this awesome tool](https://github.com/leoluk/paperlike-go) that lets you set the contrast, light and mode on the `Dasung paperlike`. There is currently an [issue open](https://github.com/leoluk/paperlike-go/issues/9) regarding support for the `Dasung 253`...

### Turn off syntax highlighting

E-ink does not have good enough contrast for you to discern the differences between many colors the terminal uses. Any text that isn't black on white will be difficult to read so I recommend setting your terminal to a monochrome theme. White on black text also has decent contrast but the ghosting is much worse, apparently this can cause the E-ink panel to wear out quicker too. My experience was that at first, the lack of syntax highlighting greatly increased the cognitive load of reading code. After a while though I began to get used to this and now actually prefer it. That is why you may notice that the code snippets on my site do not have any syntax highlighting.


## Conclusion
To some it up, if you are wondering whether you can be a software developer if you suffer from eyestrain, the answer is yes. Its not always straight forward and can be frustrating at times, but with e-ink its definitely possible. There probably aren't many professions that are as text heavy and therefore well suited to e-ink as ours, so it makes sense for adoption to start with us. Who knows where will be in a decade or two...

**Good luck!**


This is something that I do most days at least once so I made a shortcut for it

Easily print-debug any text object in Vim



First things first, dependencies:

* [https://github.com/inkarkat/vim-TextTransform](https://github.com/inkarkat/vim-TextTransform)
* [https://github.com/inkarkat/vim-ingo-library](https://github.com/inkarkat/vim-TextTransform)

And add this to your vim config:

```vim lang="vim" completed

function! LogInline(text)
    return 'console.log(' . a:text . ')'
endfunction

function! LogBelow(text)
    let endPos = g:TextTransformContext['endPos']
    let lineNumber = endPos[1]
    call append(lineNumber, split('console.log(' . a:text . ')', "\n"))
endfunction

call TextTransform#MakeMappings('', '<Leader>l', 'LogInline')
call TextTransform#MakeMappings('', '<Leader>L', 'LogBelow')

```
### Examples

First lets try doing an inline log.

```js lang="js" 
"hello world"
```
  
<ArrowDown style={{"font-family": "var(--font-family-mono)","--from-color": "white","--to-color":"var(--js-dark)", "--to-text-color": "white"}} fromText="<Leader>ll" toText=""  />

```js lang="js" 
console.log("hello world")
```

Next we'll log an existing variable.

```js lang="js"  messages={[{message: "cursor must be somewhere here", line:0, token:[1]}]}
const myvar = "hello world"
```

<ArrowDown style={{"font-family": "var(--font-family-mono)","--from-color": "white","--to-color":"var(--js-dark)", "--to-text-color": "white"}} fromText="<Leader>Liw" toText=""  />

```js lang="js" 
const myvar = "hello world"
console.log(myvar)
```

It even works on more complex text objects like HTML


```js lang="js" messages={[{isTop: true, message: "cursor must be somewhere here", line:0, token:[0, 2]}, {message: "or here", line: 2,token:[0,12]} ]}
<div>
  <p>hello</p>
</div>
```

<ArrowDown style={{"font-family": "var(--font-family-mono)","--from-color": "white","--to-color":"var(--js-dark)", "--to-text-color": "white"}} fromText="<Leader>Lat" toText=""  />

```js lang="js"
<div>
  <p>hello</p>
</div>
console.log(<div>
  <p>hello</p>
</div>)
```

Hopefully this saves someone's fingers.


How do the Japanese see themselves? Is it an accurate reflection of reality or just a western delusion? 

My thoughts on a book I read about the Japanese.

 （日本人） (Japanese People) 


![picture of the book 'Japanese people'](/img/japanese-people-book.jpg)

（日本人） (Japanese People) by 橘 玲 (Akira Tachibana)

First a disclaimer...

* I'm not Japanese.
* I'm not that good at Japanese.
* I'm not good at reading in general.

"Why read a book in Japanese and then write about it English?"

For fun!


The author presents this book as a new theory on what makes Japanese people unique and why. Previous books have attempted to answer the same question, however, the author explains that these are unduly influenced by orientalist (prejudiced outsider-interpretations of the Eastern world) thought.


This is **not** a review!!! It is just some musings on things I found interesting while reading this book...

## Awkward smiles

The book starts off with a chapter on how in 2011, some power plant technicians appeared to be **smiling** as they delivered some very bad news to the people of Japan. This news being that there was a triple nuclear reactor meltdown happening at Fukushima. Of course they were not smiles of happiness but smiles of a more complex nature (nervousness/guilt/dread...). The book explains how this is not a behaviour unique to Japan but found in lots of Asian countries, most notably in Thailand where there are 13 different categories of smile! This idea is further expanded to show that a lot of what is thought to be typical Japanese behaviour is actually common to many Asian countries with Japan usually being the most watered down version. Somehow, Japan has been convinced (probably due to western influence) that "Japanese" attributes such as 空気を読む (Reading the air) are unique, not to be found anywhere else in the world. But how could this happen... 

Time for some trivia!

### What is the national sport of Japan?

* Is it Sumo? 
* Is it Karate? 
* Is it Pokémon cards?


The current national sport of Japan is to compare Japan to the west (specifically America) and lament at how Japan will never catch up to it. 

Why does it compare itself to the west and not its neighbours? It might be because until very recently Japan was pretty much the only modern developed economy in Asia and having no worthy adversary in its home court, it naturally looked to the west as a benchmark. During the period I lived in Japan, when meeting someone for the first time I was often asked "Why did you come to Japan?" and then I would give the same old cringe response "Erm... I like Anime and stuff..." and then they would sort of ask in a much more roundabout way than this: "The future is bleak here. Will you be moving back one day?". After a while I sort of interpreted this as Japanese people not realising that the west is in reality very flawed and Japan does a lot of things way way way better than anywhere else. I hope that as Japan inevitably compares its pandemic response with that of the west's it can feel proud of itself for once.


## Don't tell me how to live my life!

![layout of a Japanese studio flat](/img/1-room-mansion.jpg)

The book mentions that a family unit quite often can be under the same roof but living very separate lives. It is not unusual for members of a family to eat separately and at different times without the sort of group communication that western families would consider normal. There is also the phenomenon of the ワンルームマンション (studio flat).  This is the default choice for anyone single without kids. Even university students tend not to share a flat. In general, when you are poor and single in the west you economise by sharing rent with housemates. In Japan you just get a smaller studio flat. Personally this suited me just fine, but it does make me wonder if the average foreigner is much more susceptible to loneliness than the average Japanese...?

## Anonymous online

Facebook never really made the kind of impact in Japan as it did on the west during the late-naughties. Upon registering, Facebook encouraged you to submit your photo, real name, workplace, university, and even political persuasion in order to connect online with your friends. We have gotten a lot more squeamish about privacy these days and the general use case of Facebook has since changed, but at the time a lot of people in the west were more than happy to publicise all this juicy personal information without any coercion. The Japanese (probably wisely) seem to have much more of a natural aversion to making their personal lives public, and, as a consequence Facebook never enjoyed widespread adoption. That is not to say they don't use social media, Twitter in particular is pretty popular, however, the vast majority of its users register with a pseudonym. The author makes the case that in the west, the reward of social credit, whether that be reviews on Amazon, retweets, Instagram followers etc. outweighs the risks involved with participating on the internet with one's real name. The reverse is true in Japan. The (perceived) risk of humiliation, stalking, or some kind of harassment is too great and so using a nickname became the default.


## The Future

The author ended the book by saying that Japan is often at the forefront of societal changes that other countries will eventually have to catch up to (aging population, loneliness, slowing economy...), and while this obviously presents massive challenges, it does also mean that Japan has the unique potential to create a new future, one nothing like anything that has come before it. 


Using hardware a decade old (2012) as a software developer in 2023

You don't need a modern computer!



* Are you `broke`? 
* Are you *trying* to heal our `damaged` planet?
* Are you a minimalist `hipster`?

## If you answered 'Yes' to any of the above...

... then don't buy a new computer! You really don't need anything modern to have a great computing experience.
Of course, this is only possible if the hardware in question has been liberated from the shackles of Microsoft/Apple, i.e running Linux. Unfortunately normies usually aren't aware of this so they trash their perfectly good hardware without realising its true potential. Think of the amount of e-waste that could have been prevented if Linux on desktop was the norm.... Where is Greta on this? [She likes penguins right?](https://www.penguin.co.uk/authors/141409/greta-thunberg)

"But I'm a *soy*ftware developer! I need 64 CPU cores and 128GB of RAM and 32GB of VRAM and raytracing cores and...."

![boomer using a desktop pc](/img/zoomer-boomer-dad.jpg)

Depending on what you're developing you *might* need modern hardware, but I'd like to posit that most developers are web developers, and web applications are usually deployed on some flaccid single-core EC2 instance with 1GB of RAM anyway. Trust me, if you pick your development environment correctly and stay away from bloated IDEs and other soydev hallmarks, you probably wont even be able to tell that you're typing on something pre-Trump.

### Other reasons web development works well on old hardware
* The web uses JavaScript
  * JavaScript more or less just runs, it doesn't require a lengthy CPU intensive compilation step.
* Most web frameworks support hot module reload.
  * No need to restart the entire project.
  * Fewer system resources are needed to provide a tight feedback loop because only code that has changed is reloaded.
* The web is *supposed* to work on old hardware
  * What better way to ensure your site runs on old desktops/entry level mobiles than developing and testing using said hardware?

You really don't have to give anything up either, with decade old hardware, you should have no trouble finding a GPU with a max resolution of 4K, a motherboard that supports 32GB of RAM, and a CPU with *hype*rthreading (I stress the hype). Is there really much to gain by shelling out the big bucks on a new workstation?


## What about Laptops tho?

![ThiccPad meme](/img/thinkpad.jpg)

First of all, laptops suck. They are less powerful, more noisy, and more fragile than desktops, not to mention they are *way* more expensive! And that's without the physiotherapy you'll need to correct your neck posture after a decade of using them.

"But my (work/school/oppressive entity) requires that I own a laptop!"


The cold hard reality of life strikes again. Laptops are less straightforward, generally you can't upgrade them. The tide might be turning on this however, see [framework for example](https://frame.work/). If you find a framework laptop going for a reasonable price it might well be worth the investment. A safer bet would be to find a Thinkpad on Ebay or FB marketplace (eww), nice and cheaply. No other laptop brand has a better reputation when it comes to longevity and repair-ability than the humble Thinkpad. Unfortunately the modern Thinkpad is not quite as maintenance friendly as its ancestors were, but it is still considered the default choice for people who have principles/value their money. You can even find [boomers on youtube](https://www.youtube.com/watch?v=La3sb5y7e-k) who still use the Thinkpad X220 from 2011!

### Notes on software

I have found things like Electron apps to be pretty bad when it comes to hogging resources. When using old hardware I would say never use Electron based apps when an alternative exists. Mercifully, most of such apps will usually offer a web version which I find to not only use fewer resources, but to be more reliable too.

Leave a webmention about your vintage hardware specs and we can waste time comparing gigahertz and terabytes.


In this post we explain how it is possible to set NEXT_PUBLIC_* environment variables baked into docker images

Spoiler alert! Its a toxic relationship!

How to set NEXT_PUBLIC_* environment variables in Docker


![Nextjs and Docker represented by wojacks](/img/wojac-next-docker.png)

Picture the scenario: you have finished developing a *web app* using your favourite react framework.  

Its a pretty simple web app, all it does is display a greeting message. 

This greeting message may change depending on which environment you deploy it in, for example, in your development environment you want it to say:  

"Hello from development!"  

...and when its deployed in your staging environment you want it to say:

"Hello from staging!".   

So naturally you put the greeting message in an environment variable so that you do not need to build a different version of the code for each environment. 

```
// .env
...
NEXT_PUBLIC_GREETING="Hello from development!"
...
```

## Thats too easy tho

You, being the good [soydev](https://www.urbandictionary.com/define.php?term=Soydev) you are, decide to deploy it using docker. 

So you write a simple dockerfile to build an image but quickly realise something.

```docker lang="docker" messages={[{ type: "info", message: "We have to set this at build time!!!", line: 2, token: [2,10] }]}
...
RUN npm i
ARG NEXT_PUBLIC_GREETING="Hello from development!"
RUN next build
...
```

Since we have to set this environment variable when we are building the next app, our image will forever have this value hardcoded into its very essence.

This means that even if we try to set the value of the variable at runtime like so:

```
docker run -e NEXT_PUBLIC_GREETING="rekt m8" my-image/latest
```

It won't work because `NEXT_PUBLIC_GREETING` has already been inlined to be `Hello from development!` in the compiled code.

So what can we do?

## My solution

Like many a [brave soul that came before me](https://github.com/vercel/next.js/discussions/17641), my approach to tackling this problem was to set the value of the environment variable to a placeholder that can be switched out at runtime.  

To achieve this I created a shell script that can be broken into two parts. The first part is to create the sed commands needed to replace each placeholder with the correct value:

```bash lang="bash" messages={[{ type: "info", message: "The placeholder is just the name of the environment variable prefixed by APP_", line: 7, token: [7] }]}

# Get all the environment variables currently loaded
printenv | \
    # Filter for ones that start with NEXT_PUBLIC
    grep  '^NEXT_PUBLIC' | \
    # Replace the = sign with a space
    sed -r "s/=/ /g" | \
    # Feed as arguments to sed so they can be used in a find and replace command
    xargs -n 2 bash -c 'echo "sed -i \"s#APP_$0#$1#g\""' 

```

Lets test it!

```
~>> export NEXT_PUBLIC_GREETING=HELLO!
~>> export NEXT_PUBLIC_THEME=Dark
~>> printenv | \
    grep  '^NEXT_PUBLIC' | \
    sed -r "s/=/ /g" | \
    xargs -n 2 bash -c 'echo "sed -i \"s#APP_$0#$1#g\""'

sed -i "s#APP_NEXT_PUBLIC_GREETING#HELLO!#g"
sed -i "s#APP_NEXT_PUBLIC_THEME#Dark#g"
```
As we can see it spits out a `sed` search and replace command for each environment variable we have.  

Now for the second part, to execute these commands against the compiled code files.

```bash lang="bash" completed
#!/usr/bin/env bash

# The first part wrapped in a function
makeSedCommands() {
  printenv | \
      grep  '^NEXT_PUBLIC' | \
      sed -r "s/=/ /g" | \
      xargs -n 2 bash -c 'echo "sed -i \"s#APP_$0#$1#g\""'
}

# Set the delimiter to newlines (needed for looping over the function output)
IFS=$'\n'
# For each sed command
for c in $(makeSedCommands); do
  # For each file in the .next directory
  for f in $(find .next -type f); do
    # Execute the command against the file
    COMMAND="$c $f"
    eval $COMMAND
  done
done

echo "Starting Nextjs"
# Run any arguments passed to this script
exec "$@"
```

Ok cool, we have our script ready! Now how do we use it with docker?  


```docker lang="docker" messages={[{ isTop: true, type: "info", message: "We set the variable with a placeholder", line: 1, token: [2,10] } ]}
...
ARG NEXT_PUBLIC_GREETING=APP_NEXT_PUBLIC_GREETING
RUN next build
# Copy our script somewhere into the image
COPY entrypoint.sh .
# Make it executable
RUN ["chmod", "+x", "/app/entrypoint.sh"]

EXPOSE 3000

ENTRYPOINT ["/app/entrypoint.sh"]

CMD npm run start
```

## Caveats

Lets remind ourselves that we are literally doing a search and replace on some compiled code so don't expect *everything* to be plain sailing.  

One thing I have discovered is that because NextJS splits your code into chunks during a production build, and we are simply doing a find and replace on those chunks, obviously the names of those chunks will not change. This means the browser can't tell that you have changed the chunks so it will continue to serve the cached version unless you explicitely clear the cache in your browser. I haven't had the time to see if there is a workaround for this but presumably just renaming the chunk files without breaking everything somehow would fix this problem.

And voila! Bit of a hacky solution but what can you do? 
If you know of a less gross horrible hacky way of doing this then please [tell me!](/)


In this tutorial we will create some useful shortcuts to make implementing responsive designs easier to implement.

How can we use styled-components when implementing a responsive design?

Responsive Design with Styled Components




First lets make using media queries nicer.  

Lets create a file that exports a `media` object with all the media queries we will need.

```tsx lang="tsx" messages={[{ isTop:true, type:"info", message: "Always good to define breakpoints as constants so we can reference them later if needed. CSS Variables are also ok but I define them in terms of TS constants to keep my options open.", line: 1, token:[4], }, { isTop:true, type:"info", message: "", line: 2, token:[4], } ] }
// media.ts
export const desktopWidth = 670

const mq = (strings: TemplateStringsArray, width: number) =>
  `@media only screen and (${
    strings.slice(0, strings.length - 1).join("") +
    width +
    strings[strings.length - 1]
  })` as const

export const media = {
  desktop: mq`min-width: ${desktopWidth}px`,
  mobile: mq`max-width: ${desktopWidth - 1}px`,
}
```

Import the `media` object into the file of your component and use like so:

```tsx lang="tsx"
// myComponent.tsx
import { media } from "./media"

const MyComponent = styled.span`
  ${media.desktop}{
    background-color: green;
  }
  ${media.mobile}{
    background-color: pink;
  }
`
```

Much nicer than typing out a media query every 5 seconds right?

What about hiding/showing components depending on the device size?   

Lets add some more to the `media.ts` file.


```tsx lang="tsx"  messages={[{isTop:true, type:"info", message: "Show the content by default.", line: 3, token:[2], }, {isTop:true, type:"info", message:"Hide the content if the media query is activated.", line: 5, token:[0]} ].reverse() }
// media.ts
...
export const hideOn = (size: keyof typeof media) =>
  `display: contents;
    ${media[size]} {
      display: none;
    }
  `

const hideOnDesktop = hideOn("desktop")

export const HideOnDesktop = styled.div`
  ${hideOnDesktop}
`
```

Now we can wrap our components ensuring they are only rendered on the appropriate device:

```tsx lang="tsx"
import { media, HideOnDesktop } from "./media"
...
<>
  <HideOnDesktop>
    <MobileOnlyContent />
  </HideOnDesktop>
</>
...

```

For more tips on implementing responsive design with styled-components and NextJS, see [ this ]( /posts/nextjs-styled-components-without-js ) article.








How to make sure your Next.js site rehydrates correctly, loads fast, reacts responsively, and works for users who disable JavaScript

Next.js with and without JavaScript


Wait, did you say *without* JavaScript?  
We are React developers, why should *we* care about making sites that work without JavaScript?  

TLDR;  
- Everyone sees your bare HTML at some point! (Not just users with JavaScript disabled)
- Performance (especially on lower-end devices with a slow network)
- Cumulative page layout shift
- SEO

## How does Next.js really work?

### Static Site Generation (SSG)

If you are using Next.js (pages router), then its likely that the excellent SSG and SSR features were one of the reasons that made you consider it for your project. Specifically I would like to talk about SSG in this post.

Basically if you don't know, when you run `next build`, Next.js will try to pre-render as much of each page as possible. This is what gets sent to your users when they first access the site. Since there is already some content thats been pre-rendered, React only needs to rehydrate whats already there. This means there is less work done by your browser which translates to  quicker execution times and better user experience.  

But there is a much bigger reason that SSG pages appear to load quicker. The secret lies in the sheer magnitude of the JavaScript payload that most sites require. This bundle will include:
* your code
* React
* Next.js
* all of the other crap in your `package.json`

The size of this bundle will dwarf the pre-rendered HTML. As an example of bundle sizes, for any given page on this blog you are reading, the JavaScript bundle will be roughly 10 times the size of the static HTML. 

In a traditional client rendered SPA, the `index.html` file contains almost zero markup. Usually it will just have an empty `<div id="root"></div>` that React will append DOM nodes on to. This means most (if not all) of the JavaScript needs to be downloaded before anything can be rendered at all. By pre-rendering the HTML, the browser can display something without having to wait for any JavaScript, this can improve the first contentful paint ([FCP](https://web.dev/fcp/)). Using this tactic Next.js lets us get away with having large bundle sizes whilst delivering the user a decent experience. 

### Responsive SSG

Although for the most part Next.js takes care of SSG for us, it does require some careful thought when we implement responsive design. One thing to consider with SSG is that everyone gets sent the same static HTML. Whether you're on desktop or mobile you will be given the same initial DOM. This can be a problem if you rely on JavaScript to make your website responsive. Lets say your site uses a hook like `useWindowSize()`, and depending on the width of the window you will render either the desktop layout or the mobile layout. Well this can only happen after the JavaScript bundle has been fetched and React has rehydrated the page. By which time the user will have already seen the bare static HTML. And so will potentially experience a brief flicker as the correct layout is rendered (probably with a few rehydration errors). One solution could be to simply not render anything until rehydration has finished. But of course that defeats the object of SSG in the first place. 

My advice is to rely solely on CSS for your responsivity (via media queries). This way **both** the desktop layout and mobile layout will be present in the initial HTML that gets sent out to every device. 

*But wouldn't this make my HTML file bigger?* 

Yes. But not by that much. You have to remember that the JavaScript bundle will usually be *at least* an order of magnitude bigger.

### Progressive Design Enhancement

Saying all that, if you are a fan of rather creative designs that require dynamically calculating the positions of elements (like using `getBoundingClientRect()` for example), you must also further consider how your designs will work without the presence of JavaScript. For example on this blog I often use an annotation component that draws a line connecting a sliver of code with a message. For this I need to use JavaScript to get the position of elements as they depend on the screen size of the end device and therefore are impossible to know beforehand. To solve this, I have another design which does not require any JavaScript to work properly. I simply assign a number in the top left corner of each message bubble that corresponds to the number given to the code segment it refers to. This is the design that the static HTML ships with before ultimately it gets rerendered on the client (assuming JS is enabled!). If I simply excluded the annotations entirely from the initial SSG'd HTML, when the JavaScript eventually *did* load they would be freshly inserted into the page causing layout shift. This is bad for UX, SEO and all manner of things. Not to mention, some people (who can blame them) browse with JavaScript disabled so they won't be able to see anything at all! For these reasons its worth thinking of a design that can handle both scenarios reasonably well, lets call it *progressive design enhancement*.

![A code annotation component before hydration](/img/before-hydration.png)
<ArrowDown style={{"--from-color": "white", "--to-color":"#b2eeff", "--from-text-color": "#00d4ff" }} fromText="Hydration & First client render" />
![A code annotation component after hydration](/img/after-hydration.png)


As a general rule, when JavaScript is not available always try to show something, and preferably something that takes up the same amount of vertical space so as not to cause a layout shift.

## How to detect if JavaScript is loaded/enabled?

When Next.js performs SSG it does not execute any effect hooks in your code.
If a `useEffect` hook executed at least once then this means JavaScript must be loaded. We can add a CSS class to the root node to indicate this.

```ts lang="jsx" completed messages={[{isTop:true, message:"This will only be executed on the client once the JavaScript has loaded.", line:3, token:[3,11]}]}
// _app.jsx
function MyApp({ Component, pageProps, router }) {
  const [mounted, setMounted] = useState(false)
  useEffect(() => setMounted(true), [])
  return (
    <Component className={mounted ? "has-js" : "no-js"} {...pageProps} />
  )
}
```

From anywhere in our App we can show and hide components easily depending on if there is JavaScript.


```ts lang="jsx" completed
export const ShowWhenJSLoaded = styled.span`
  display: none;
  .has-js & {
    display: contents;
  }
`
export const ShowBeforeJSLoaded = styled.span`
  display: none;
  .no-js & {
    display: contents;
  }
`

const MyComp = () => (
  <>
    <ShowBeforeJSLoaded>
      <Placeholder />
    </ShowBeforeJSLoaded>
    <ShowWhenJSLoaded>
      <SomeComponentThatNeedsJS />
    </ShowWhenJSLoaded>
  </>
)
```


## How to test your site works without JavaScript?

![Disabling JavaScript with Chrome dev tools.](/img/js-disabled.png)

To manually disable JavaScript in the developer tools type `Ctrl+Shift+p` to open the command pallet and then search for `disable JavaScript`. If you now reload the page you will be seeing what non JavaScript users and search engine crawlers see.

If you use Styled Components, its worth checking that all your links function at this point. When using the `next/link` component around a styled component you will find that the `passHref` must be passed for the links to work without JavaScript. This is important for SEO because search engine crawlers use links on your site to discover its pages. 

```ts lang="jsx" style={{"--message-margin": "0rem"}} messages={[{isTop:true, type:"info", message: "If your links aren't working without JavaScript, try passing this prop.", line: 3, token:[4], } ] }
// Example
export const Comp = () => {
  return (
    <Link passHref href={`/index`}>
      <MyStyledComponent>Click Me!</MyStyledComponent>
    </Link>
  )
}
const MyStyledComponent = styled.a`
  padding: 20px;
`
```

## Help! SSG Isn't working!

Be aware that when using `yarn dev` you are not seeing the finished product.
This is because SSR/SSG is not done in development mode.
To be able to test your app locally you need to run `yarn build && yarn start` which will generate the production code.
Unlike other workflows, with Next.js and any other SSR/SSG supporting framework, production code does not just mean "optimised" or "minified", the way your code is delivered and performs will be fundamentally different. In particular, hydration related bugs will only be apparent in the production build.




Auth provider not working in Cypress? Cookies not being set properly inside the Cypress test runner? In this guide we explain the cause and solution.

The dreaded SameSite problem

Why your auth provider isn't working in Cypress



![SameSite error in Chrome devtools](/img/samesite.png)

The web application that I am currently working on uses several 3rd party auth providers as part of its authentication flow. Manually testing the application I could see that everything was working. However, when running Cypress tests I was getting a strange warning mark on the header of the response from my auth provider. This header was asking my browser to set the session cookie but it was refusing to do so. 

Naughty browser. 

## What is the SameSite attribute?
The `SameSite` attribute is basically a measure taken to mitigate CSRF attacks. It tells the browser how it should treat cookies across multiple domains.
The `SameSite` attribute can have one of three values:
  1. `None`
      - The browser will allow all cross-site cookies.
  1. `Lax`
      - The browser will allow cross-site cookies if the target browsing context is "top-level". 
        * What is a "top-level" browsing context?  
          A browsing context is the environment in which a browser displays a document. In modern browsers, it usually is a tab, but can be just a part of a page, like an `iframe`. Top-level simply means there is no parent context. For example, a tab is a top-level browsing context whereas an `iframe` exists within a tab (as a child browsing-context) and so cannot be considered top-level.
  1. `Strict`
      - The browser does not allow any cross-site cookies.  

**Note**: Should the `SameSite` attribute header be omitted, a default of `Lax` will be applied by most browsers.

## Why does it work outside of Cypress?
During the test, redirecting to the auth provider does not change the address in the URL bar of the Cypress test runner. This is because the entire application being tested, including any external redirects, is contained within an `iframe`. This does not constitute a top-level browsing context and so violates the `SameSite=Lax` restrictions. Outside of Cypress there is no `iframe` and so the redirect takes place without breaking the rules.

## Solution
Luckily Cypress provides the `cy.intercept` function that will allow us to intercept and modify all responses including redirects. We can use it to rewrite the headers of any response to: `SameSite=None`, thus allowing the browser to set our cookies.

We can abstractify this to a Cypress command so we can call it from any test.

```ts lang="ts" completed style={{"--message-margin": 0}} messages={[{ type:"info", message: "There might not be a 'set-cookie' header so we could have an undefined value we need to filter out.", line: 8, token:[1, 100], isTop:true },{ type:"info", message: "We must also add  'secure;' otherwise our 'samesite=none' won't be valid.", line: 12, token:[1, 100], } , ] }

// commands.ts
Cypress.Commands.add("rewriteHeaders", () => {
  cy.intercept("*", (req) =>
    req.on("response", (res) => {
      const setCookies = res.headers["set-cookie"]
      res.headers["set-cookie"] = (
        Array.isArray(setCookies) ? setCookies : [setCookies]
      )
        .filter((x) => x)
        .map((headerContent) =>
          headerContent.replace(
            /samesite=(lax|strict)/gi,
            "secure; samesite=none"
          )
        )
    })
  )
})



```

We can now use our custom command before each test run begins.

```ts lang="ts" 
// mytest.cy.ts
describe("Logs in", () => {
  beforeEach(() => {
    cy.rewriteHeaders()
  })
  it("should log in without errors", () => {
    cy.contains("LOGIN").click()
    ...
```

And thats all! Hopefully this saves someone a few hours of debugging!




Why throw away your old Camera? In this guide we'll show you how simple it is to reuse your old Camera as a webcam using the NixOS linux distribution.

How to use your DSLR from 2008 as a webcam in 2022 (NixOS)


![Canon eos rebel xs being used as a webcam](/img/webcam.jpg)

This year after largely abandoning my macbook in favour of a nixos machine, I started getting requests to "turn my camera on" when video calling people. This was a problem because I didn't actually have a webcam. I thought about buying one but then I realised that I had a perfectly good Canon EOS rebel XS DSLR circa 2008 lying around on my shelf. This camera has a mini-USB port, so naturally I pondered: DSLR + mini-USB + desktop PC = possible webcam ?

But there is just one problem. My Canon EOS rebel XS isn't actually capable of recording video. It can take some nice pictures but that's about it. So that's the end of that then.

_Or is it?_

There happens to be some amazing open source software called gphoto2.
Once installed it will allow you to control an array of different supported cameras from your computer (find out if yours is supported with `gphoto2 --list-cameras`). This includes taking photos and videos.
After installing, try taking a picture with it like so:
`gphoto2 --capture-image-and-download`. You should hear the shutter activate and the image will be saved to your current working directory.

Despite the aforementioned lack of video functionality on my camera, I decided to try `gphoto2 --capture-movie` anyway. Somehow, although my camera does not support video natively, this tool still manages to spit out an mjpeg file (For my camera I needed to put it in "live-view" mode before gphoto2 could record video. This consisted of putting it on portrait mode and then pressing the "set" button so that the viewfinder is off and the screen is displaying an image). Unfortunately though this is not enough to be able to use it as a webcam. It still needs to get assigned a video device such as `/dev/video**`.

## How do?

First of all if you haven't already, you're gonna want to grab `gphoto2` and `ffmpeg`.

And maybe `mpv` also.

```nix lang="nix"
# configuration.nix
...
environment.systemPackages = with pkgs; [
  ffmpeg
  gphoto2
  mpv
...
```

To create the virtual video device we will need to make use of the v4l2 Linux kernel module. It can be installed by adding to the extra module packages in configuration.nix.

```nix lang="nix" completed
# configuration.nix
...
boot.extraModulePackages = with config.boot.kernelPackages;
[ v4l2loopback.out ];
boot.kernelModules = [
  "v4l2loopback"
];
boot.extraModprobeConfig = ''
  options v4l2loopback exclusive_caps=1 card_label="Virtual Camera"
'';
...
```

You will now need to run `sudo nixos-rebuild switch` and also reboot your computer since we have made some changes to the kernel.

Now try running this command:

```shell lang="shell" completed
   gphoto2 --stdout --capture-movie |
    ffmpeg -i - -vcodec rawvideo -pix_fmt yuv420p -f v4l2 /dev/video0
```

You should see output like this:

```
ffmpeg version 4.4.1 Copyright (c) 2000-2021 the FFmpeg developers
  built with gcc 11.3.0 (GCC)
  configuration: --disable-static ...
  libavutil      56. 70.100 / 56. 70.100
  libavcodec     58.134.100 / 58.134.100
  libavformat    58. 76.100 / 58. 76.100
  libavdevice    58. 13.100 / 58. 13.100
  libavfilter     7.110.100 /  7.110.100
  libavresample   4.  0.  0 /  4.  0.  0
  libswscale      5.  9.100 /  5.  9.100
  libswresample   3.  9.100 /  3.  9.100
  libpostproc    55.  9.100 / 55.  9.100
Capturing preview frames as movie to 'stdout'. Press Ctrl-C to abort.
[mjpeg @ 0x1dd0380] Format mjpeg detected only with low score of 25, misdetection possible!
Input #0, mjpeg, from 'pipe:':
  Duration: N/A, bitrate: N/A
  Stream #0:0: Video: mjpeg (Baseline), yuvj422p(pc, bt470bg/unknown/unknown), 768x512 ...
Stream mapping:
  Stream #0:0 -> #0:0 (mjpeg (native) -> rawvideo (native))
[swscaler @ 0x1e27340] deprecated pixel format used, make sure you did set range correctly
Output #0, video4linux2,v4l2, to '/dev/video0':
  Metadata:
    encoder         : Lavf58.76.100
  Stream #0:0: Video: rawvideo (I420 / 0x30323449) ...
    Metadata:
      encoder         : Lavc58.134.100 rawvideo
frame=  289 fps= 23 q=-0.0 size=N/A time=00:00:11.56 bitrate=N/A speed=0.907x
```

Now try this command:

```shell completed lang="shell"
mpv av://v4l2:/dev/video0 --profile=low-latency --untimed
```
You should now be able to see the video feed from your webcam.

![Streaming a live feed from the webcam](/img/streaming-webcam.png)

## What about starting the webcam automatically?

It is a bit annoying to have to execute a command every time we want to use our webcam. Luckily there are ways for this command to be automatically run on startup. 

I have decided to implement this webcam startup command as a systemd service.

```nix lang="nix" completed messages={[{ type:"info", message: "This line causes the service to be started before you log in", line: 9, token:[0, 100], } ] }
# configuration.nix
...
  systemd.services.webcam = {
    enable = true;
    script = ''
      ${pkgs.gphoto2}/bin/gphoto2 --stdout --capture-movie |
        ${pkgs.ffmpeg}/bin/ffmpeg -i - \
            -vcodec rawvideo -pix_fmt yuv420p -f v4l2  /dev/video0
    '';
wantedBy = [ "multi-user.target" ];
  };
...
```

Now if you do a quick `sudo nixos-rebuild switch` and reboot your computer you should find that the webcam service is running.

To check for any problems we can use `systemctl status webcam` which will tell us the last time the service was run as well as log of its last output. Handy for debugging.

## Are we done?

Its very tempting to stop here.
However considering the current global crises it may be pertinent to wonder whether it is necessary to have the webcam on all the time. It strikes me as sub-optimal for 3 obvious reasons:

1. Its a waste of electricity. 
2. There are privacy concerns associated with this kind of thing.
3. I have to keep changing the battery (solved by [this](https://www.amazon.co.uk/F1TP-Adapter-Battery-Coupler-Cameras/dp/B096KQWVTL))

My camera has a lens cap, so to be honest the second point does not really bother me. I can always put the lens cap on when I am not using the webcam to make sure certain government agencies aren't being entertained at my expense.
However, leaving a big power hungry DSLR camera on 24/7 certainly is not doing anything for my electricity bill. That's not to mention the CPU overhead required for decoding the video... which upon measurement with `htop` looks to be around 10%. Not insignificant especially when considering that I'm not exactly running a podcast here, I don't have that many video calls in a day.

The ideal scenario:

- I leave my camera plugged in to my computer all the time but switched _off_
- When I want to use the webcam I switch on the camera with its power button
- My computer then automatically detects the camera and starts the systemd service
- After finishing with the webcam I switch it off again

To achieve this we need to make use of a custom udev rule.
A udev rule is something that tells your computer to perform a certain task when it discovers that a device has become available. This could be an external hard drive or even non-usb devices.
In our case we need it to recognise the camera through its usb connection.

We need to specify what command is to be run when the udev rule is triggered.
For that I am creating a derivation (nix package) that simply restarts the systemd service. You could also add logging to this for debugging purposes.


```nix lang="nix" completed messages={[{isTop: true, message: "Convert script to nix derivation.", line:3, token:[0,0]}]}
# start-webcam.nix
with import <nixpkgs> { };

writeShellScriptBin "start-webcam" ''
  systemctl restart webcam
  # debugging example
  # echo "hello" &> /home/tom/myfile.txt
  # If myfile.txt gets created then we know the udev rule has triggered properly
''
```

Now to actually define the udev rule.
First of all we need to find out the device and vendor id of the camera.
This is done using the `lsusb` command. Since I don't see myself using this particularly often I will install it temporarily using `nix-shell`.

This can be done like so: `nix-shell -p usbutils`

Then running `lsusb` we get the following output:

```shell lang="shell"
[nix-shell:~/environment]$ lsusb
...
Bus 002 Device 008: ID 04a9:317b Canon, Inc. Canon Digital Camera
...
```

We can see from this output that the vendor ID is `04a9` and the device ID is `317b`.

We can now create the udev rule.

```nix lang="nix" completed messages={[{isTop:true,message:"Import the derivation we made earlier.", line:3, token:[5,100] }]} 
# configuration.nix
...
let
  startWebcam = import ./start-webcam.nix;
...
services.udev.extraRules = ''
  ACTION=="add",  \
  SUBSYSTEM=="usb", \
  ATTR{idVendor}=="04a9", \
  ATTR{idProduct}=="317b",  \
  RUN+="${startWebcam}/bin/start-webcam"
'';
...
```

We just need to remove the `wantedBy = [ "multi-user.target" ];` line in our systemd service. If we leave this in then the service will start automatically when we next reboot whether the camera is switched on or not.

One more `sudo nixos-rebuild switch` and we are finished!

Thanks for reading this far.
I hope this article has made you think twice before chucking some of your old tech.


Tired of suspending Vim to commit from the command line? Why not generate your commit command from within Vim using this simple shortcut.

A smol commit shortcut for vim

Are you committing from Vim the fast way?


Sometimes I just change 1 or 2 lines and want to commit & push straight away.
Its times like these where I don't really want to have to check the diff and stage each file etc...
But I still want to enforce some kind of commit message convention, namely:

```txt
<BRANCH_NAME> <COMMIT_TYPE> <MESSAGE>
e.g. main fix: made background white
```

So  `<COMMIT_TYPE>` is `fix` in this case.  
Because I use vim, I want to introduce a shortcut into my workflow in order to make this process easier.
So my goal is to press a key combination in vim and the below command to populate the command input box:

```js lang="vim"
:G commit -am "<BRANCH_NAME> fix: <cursor here>"
```

It should show up like this:  

![Git commit command generated in vim command bar](/img/smol-commit.png)

First of all lets decide what the keybinding will be.  
I'm a simple man, I'm gonna bind it to `,f` so I remember it.  
(because its `f` for `fix` XD)

```js lang="vim"
noremap ,f  ...
```

Next we need to create the git command.
I am using `:G` that comes from the [vim-fugitive](https://github.com/tpope/vim-fugitive) plugin by tpope. Its basically just a shortcut for `:!git` so feel free to do that instead.

Next is `commit -am`. Most people know about `-m` but fewer have heard of `-am`.  
It basically is the same as `-m` but it automatically stages all the changes you have in the repo.

```vim lang="vim"
noremap ,f :G commit -am ""
```

Now we just need to generate the commit message, and for that we need to know what the name of the current branch is. Usually we can do that with `git branch --show-current`
however, since git is external to vim we need some special syntax.

To execute an external command we can use the `system` function like so:

```vim lang="vim"
..."<C-R>=system("git branch --show-current")<CR>
```

For some reason `^@` gets stuck to the end of whatever the branch name is.
To get rid of that we can backspace `<BS>` once.
Now we press the `<Left>` key to move the cursor one space left inside the quotes.

```js lang="vim"
..."<C-R>=system("git branch --show-current")<CR><BS>"<Left>
```

Now leave a `<Space>` and write the commit type, in this case `fix`.  
Finally add a colon and another `<Space>` for the commit message and we are done.

```js lang="vim"
..."<C-R>=system("git branch --show-current")<CR><BS>"<Left><Space>fix:<Space>
```

Putting it altogether we get the finished product:

```js lang="vim" completed
noremap ,f :G commit -am "<C-R>=system("git branch --show-current")<CR><BS>"<Left><Space>fix:<Space>
```

Now you too can make a smol commit from vim with just a few keystrokes!


Still writing Javascript using loops and if statements? In this post we show how imperative code can be refactored into beautiful functional perfection.

One line to rule them all

Typing a classic JS one-liner


Often we have a list of things and would like to know how many there are of each thing in the list.
This is one of those handy one-liners that will give you an object mapping an item to the number of occurrences for a given list of things.

```js lang="js" completed
const getFreqMap = (list) => 
  list.reduce((acc, cur) => 
    ({ ...acc, [cur]: (acc[cur] ?? 0) + 1 }), {})

getFreqMap(['a', 'a', 'c', 'b', 'd', 'd', 'd'])   
// {a: 2, c: 1, b: 1, d: 3}
getFreqMap([0, 1, 2, 2, 6, 2, 1, 0, 6])           
// {0: 2, 1: 2, 2: 3, 6: 2}
```

Okay so maybe its not just one line.  
But that's because I formatted it nicely!  
At least its not as bad as this:

```js lang="js" completed
const getFreqMap = (list) => {
  const res = {}
  for (let i = 0; i < list.length; i++) {
    if (res[list[i]] !== undefined){
      res[list[i]]++
    }
    else{
      res[list[i]] = 1
    }
  }
  return res
}
```



Wow, what a waste of lines...  
Anyway, lets rewrite our one-liner in typescript because its better.  

<br/>
<ArrowDown style={{"--to-color": "var(--ts-dark)","--from-color":"var(--js-dark)", "--to-text-color": "white"}} fromText="JS" toText="TS"  />
So lets just change the file type to `.ts`.  
...And immediately we get a bollocking like so:

```ts lang="ts"  messages={[{ type: "error",message: "Parameter 'acc' implicitly has an 'any' type.", line: 1, token: [5], }, {type: "error", isTop:true, message: "Parameter 'list' implicitly has an 'any' type.", line: 0, token: [7], }, { message: "Parameter 'cur' implicitly has an 'any' type.", line: 1, token: [7], type: "error",}, ] } 
const getFreqMap = (list) =>
  list.reduce((acc,cur) => 
    ({ ...acc, [cur]: (acc[cur] ?? 0) + 1 }), {})
```


So lets add a type annotation.


```ts lang="ts"  messages={[{isTop:true, type: "addition",message: "We add the type annotation to the list to get rid of the first three errors", line: 0, token: [10,12], },{type: "error",message: "Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'. <br/>No index signature with a parameter of type 'string' was found on type '{}'.", line: 2, token: [14,17], }] } 
const getFreqMap = (list: string[]) =>
  list.reduce((acc,cur) => 
    ({ ...acc, [cur]: (acc[cur] ?? 0) + 1 }), {})
```

Looks like we need to tell typescript that the type of the second argument of reduce is a an object mapping type `string` to type `number`.    
We can do this using `as` .  

```ts lang="ts" completed  messages={[{type: "addition",message: "Tells the compiler the type of our initial reduce value.", line: 3, token: [4,18], }] } 
const getFreqMap = (list: string[]) =>
  list.reduce(
    (acc, cur) => ({ ...acc, [cur]: (acc[cur] ?? 0) + 1 }),
    {} as { [key: string]: number }
  )
```

And this works just fine.  
But.. Wouldn't it be nice if it worked for any kind of list?  
So lets do that then...   
Using generics of course.  

```ts lang="ts" messages={ [ {type: "addition", isTop:true,  message: "Introducing a generic type", line: 0, token: [5],  },{ isTop:true, type: "addition",message: "", line: 0, token: [11],  }, {isTop:true,type: "addition", message: "", line: 3, token: [12],  },{ message: "An index signature parameter type cannot be a literal type or generic type.<br/> Consider using a mapped object type instead.", line: 3, token: [9], type: "error",}, { type: "error", message: "A computed property name must be of type 'string', 'number', 'symbol', or 'any'.", line: 2, token: [16, 18],} ,{ isTop: false, message: "Type 'A' cannot be used to index type '{}'.", line: 2, token: [22, 25], type: "error", },]} 
const getFreqMap = <A>(list: A[]) =>
  list.reduce(
    (acc, cur) => ({ ...acc, [cur]: (acc[cur] ?? 0) + 1 }),
    {} as { [key: A]: number }
  )
```


So we just replaced `string` with a generic type `A`.  
But alas this is not correct...  
We get an error saying we can't use something with type `A` as an index on `{}`.  
So lets see about the `Record` type instead.

```ts lang="ts" messages={[{isTop: false,type: "addition", message: "Use the built-in Record type.", line: 3, token: [5,200], },{ type:"error", message: "A computed property name must be of type 'string', 'number', 'symbol', or 'any'.", line: 2, token: [16,18], isTop:false, },]} 
const getFreqMap = <A>(list: A[]) =>
  list.reduce(
    (acc, cur) => ({ ...acc, [cur]: (acc[cur] ?? 0) + 1 }),
    {} as Record<A, number>
  )
```

Omfg another error, srsly???

Oh. Looks like our generic type is a little too generic..  
Lets take a look at the type definition for the Record type.

```ts lang="ts"
type Record<K extends keyof any, T> = {
  [P in K]: T;
};
```

It says that the type of `K` (the key of the Record) must be a key of something.  
Which gets reduced to `string`, `number`, `symbol` or `any` as stated by the error message above.  
Ok. So lets just add that type constraint to `A`.

```ts lang="ts" completed style={{"--message-margin": "0rem"}}  messages={[{isTop:true, type:"addition", message: "Add constraint to the definition of A", line: 0, token:[7,11]}]} 
const getFreqMap = <A extends keyof any>(list: A[]) =>
  list.reduce(
    (acc, cur) => ({ ...acc, [cur]: (acc[cur] ?? 0) + 1 }),
    {} as Record<A, number>
  )
```

And here is the finished product!  
How beautiful!

But wait, what if we had a list of something more complicated, like a list of objects?  
An exercise for the reader perhaps...



Hi I'm Tom.

Recent Notes

Recent Articles