{"version":"https://jsonfeed.org/version/1.1","title":"Matias Kinnunen – Blog","home_page_url":"https://mtsknn.fi/blog/","feed_url":"https://mtsknn.fi/feeds/blog.json","description":"A collection of my wildest adventures with computers. Mostly about web development.","favicon":"https://mtsknn.fi/apple-touch-icon.png","authors":[{"name":"Matias Kinnunen","url":"https://mtsknn.fi/"}],"language":"en-US","items":[{"id":"https://mtsknn.fi/blog/indenting-ordered-lists-in-markdown/","url":"https://mtsknn.fi/blog/indenting-ordered-lists-in-markdown/","title":"Better way to indent ordered lists in Markdown","content_html":"

1. foo is annoying because the list item's text is indented with three spaces.\nSolution: add another space after the period.

\n

Before:

\n
1. Using **3** spaces of indentation.\n2. ...\n3. Code blocks are **especially annoying**:\n   ```js\n   // **3** spaces of indentation, yuck\n   function foo() {\n     // **5** spaces of indentation, yuck\n     alert('lolz')\n   }\n   ```\n4. ...\n5. And when there are lots of list items:\n6. ...\n7. ...\n8. ...\n9. ...\n10. ...the indentation **changes to 4 spaces** (nice but inconsistent)\n
\n

After:

\n
1.  Using **4** spaces of indentation.\n2.  ...\n3.  Code blocks are **now ok**:\n    ```js\n    // **4** spaces of indentation, sweet\n    function foo() {\n      // **6** spaces of indentation, sweet\n      alert('lolz')\n    }\n    ```\n4.  ...\n5.  And when there are lots of list items:\n6.  ...\n7.  ...\n8.  ...\n9.  ...\n10. ...the indentation **is still consistently 4 spaces**, yay!\n
\n

This kind of indentation is also Prettier-compatible, nice!\nMaybe it should even be the default indentation style.

\n
\n

I noticed this accidentally when writing an answer on Stack Overflow,\nwhere the textarea formats ordered lists like this:

\n\n
Notice the leading spaces:\n\n 1. foo\n 2. bar\n
\n

I copy-pasted that to VS Code,\nthen formatted the file in VS Code (using Prettier),\nand Prettier formatted the list like this:

\n
1.  foo\n2.  bar\n
\n

A-ha!

\n","summary":"`1. foo` is annoying because the list item's text is indented with three spaces.\nSolution: add another space after the period.","date_published":"2024-10-15T12:00:00+03:00","tags":["Markdown"]},{"id":"https://mtsknn.fi/blog/github-html-preview-bookmarklet/","url":"https://mtsknn.fi/blog/github-html-preview-bookmarklet/","title":"Previewing HTML files directly on GitHub with a bookmarklet","content_html":"

There's no built-in way to preview HTML files on GitHub,\nbut you can use this nifty bookmarklet.\n(GitHub's project managers HATE it!)

\n
    \n
  1. \n

    Create a bookmark with this "URL":

    \n\n
    javascript: (() => {\n  const selector = '#read-only-cursor-text-area';\n  const html = document.querySelector(selector)?.value;\n\n  if (!html) {\n    return alert(`Error: element ${selector} not found`);\n  }\n\n  document.open();\n  document.write(html);\n  document.close();\n})();\n
    \n
    2. \n
  2. \n

    Open an HTML file on GitHub.

    \n
    3. \n
  3. \n

    Run the bookmarklet by "opening" the bookmark.\nIt replaces the current page's contents with the HTML file's contents.

    \n
    4. \n
\n

Works great with self-contained / zero-dependency HTML files generated with SingleFile.

\n

Notes:

\n\n
\n

Alternative bookmarklet code that retains the page's header and footer,\nso that running the bookmarklet doesn't break client-side routing:

\n\n
javascript: (() => {\n  const selector = '#read-only-cursor-text-area';\n  const html = document.querySelector(selector)?.value;\n\n  if (!html) {\n    return alert(`Error: element ${selector} not found`);\n  }\n\n  const $iframe = document.createElement('iframe');\n  $iframe.style.height = '100vh';\n  $iframe.style.width = '100%';\n  $iframe.srcdoc = html;\n\n  document.querySelector('turbo-frame').replaceChildren($iframe);\n\n  $iframe.scrollIntoView();\n})();\n
\n

The CSP on github.com blocks the iframe from loading most links,\nso with this version most links are effectively disabled\n(i.e. clicking a link doesn't do anything, at least on Firefox).\nIn my case this is a feature, not a bug.

\n
\n

There are (at least) two relevant questions on Stack Overflow:

\n\n

Neither question has as nice solutions as this one by me (until now).\nBookmarklets are underrated!

\n","summary":"There's no built-in way to preview HTML files on GitHub,\nbut you can use this nifty bookmarklet.\n(GitHub's project managers HATE it!)","date_published":"2024-10-14T12:00:00+03:00","tags":["Bookmarklets","JavaScript"]},{"id":"https://mtsknn.fi/blog/beware-implicit-values/","url":"https://mtsknn.fi/blog/beware-implicit-values/","title":"Beware implicit `Content-Type: \"application/json\"`","content_html":"

If you are sending a FormData body with fetch,\nthings might not work correctly if you are (accidentally)\nsetting the Content-Type request header to "application/json".

\n

Problem

\n

I was sending a FormData object to a 3rd party API:

\n
const formData = new FormData()\nformData.append('foo', someValue)\n\nconst response = await request('https://example.com/api/', {\n  body: formData,\n  method: 'POST',\n})\n
\n

The API responses were confusing/incorrect.

\n

Culprit

\n

I was using request,\nwhich is a thin wrapper around fetch.\nSomething like this:

\n
async function request(url: string, options?: RequestInit) {\n  const response = await fetch(url, {\n    ...options,\n    headers: {\n      Accept: 'application/json',\n      apiKey: 'abc123',\n      'Content-Type': 'application/json',\n      ...options.headers,\n    },\n  })\n\n  if (response.ok) {\n    return response.json()\n  }\n\n  // Handle errors etc.\n}\n
\n

Notice how I'm defaulting the Content-Type header to "application/json".

\n

This is handy because most of the time I'm sending JSON.

\n

But now I was sending a FormData object,\nso the implicit "application/json" value caused problems.

\n

It took me a while to realize\nthat this was the culprit for the confusing API responses.

\n

Fix attempt 1

\n

First I tried to "clear" the default Content-Type value:

\n


   const response = await request('https://example.com/api/', {\n  body: formData,\n  headers: {\n    'Content-Type': undefined,\n  },\n  method: 'POST',\n})\n
\n

But whoops,\nit caused a TypeScript error (header values must be strings),\nand the value was set to the string "undefined".\nNot good.

\n

Fix attempt 2

\n

Then I tried to set the value to "multipart/form-data":

\n



 const response = await request('https://example.com/api/', {\n  body: formData,\n  headers: {\n    'Content-Type': 'multipart/form-data',\n  },\n  method: 'POST',\n})\n
\n

But this didn't work either.

\n

Explanation

\n

This snippet makes it clear why the 2nd fix attempt didn't work:

\n
const formData = new FormData()\n\nconst req = new Request('https://example.com/api/', {\n  body: formData,\n  method: 'POST',\n})\n\nconsole.log(...req.headers)\n//=> ['content-type', 'multipart/form-data; boundary=---------------------------26864524337159351664014536661']\n
\n

So my Content-Type header value ("multipart/form-data")\nwas missing a boundary value,\nwhich is automatically generated by the browser (or Node.js or whatever)\nand actually required.

\n

From Content-Type on MDN:

\n
\n

For multipart entities, the boundary parameter is required.\nIt is used to demarcate the boundaries of the multiple parts of the message.\n[...]

\n
\n
\n

[A multipart/form-data] request looks something like the following example with some headers omitted for brevity.\nIn the request, a boundary of ExampleBoundaryString is used for illustration,\nbut in practice, a browser would create a string more like this ---------------------------1003363413119651595289485765.

\n
POST /foo HTTP/1.1\nContent-Length: 68137\nContent-Type: multipart/form-data; boundary=ExampleBoundaryString\n\n--ExampleBoundaryString\nContent-Disposition: form-data; name=\"description\"\n\nDescription input value\n--ExampleBoundaryString\nContent-Disposition: form-data; name=\"myFile\"; filename=\"foo.txt\"\nContent-Type: text/plain\n\n[content of the file foo.txt chosen by the user]\n--ExampleBoundaryString--\n
\n
\n

Final fix

\n

The implicit Content-Type: "application/json" was the root cause,\nso I got rid of it.\nWell, at least partially:

\n






   async function request(url: string, options?: RequestInit) {\n  const response = await fetch(url, {\n    ...options,\n    headers: {\n      Accept: 'application/json',\n      apiKey: 'abc123',\n      ...(!(options.body instanceof FormData) && {\n        'Content-Type': 'application/json',\n      }),\n      ...options.headers,\n    },\n  })\n\n  // ...\n}\n
\n

Now if the body is a FormData object,\nfetch automatically sets the Content-Type header to multipart/form-data\nwith an automatically generated boundary value.

\n

Lessons

\n

My first thought was that while this hand-rolled wrapper around fetch has been handy,\nmaybe it would have been better to use a battle-tested library from the beginning.\nFor example,\nKy ("a tiny and elegant HTTP client based on the Fetch API")\nseems nice.

\n

Or, at least, one should be careful about default/implicit values.

\n

I wonder if the 3rd party API server should also be validating the request headers.\nThe API endpoint expects a FormData body,\nso maybe it should also check that the Content-Type request header is valid.\nIt would be a small thing to do,\nbut it would have saved me a great amount of time.

\n","summary":"If you are sending a `FormData` body with `fetch`,\nthings might not work correctly if you are (accidentally)\nsetting the `Content-Type` request header to `\"application/json\"`.","date_published":"2024-08-31T12:00:00+03:00","tags":["JavaScript","Node.js","TypeScript"]},{"id":"https://mtsknn.fi/blog/relative-tr-in-safari/","url":"https://mtsknn.fi/blog/relative-tr-in-safari/","title":"Safari doesn't support `position: relative` on `` elements","content_html":"

This is a problem if you want whole table rows to be clickable.\nLuckily there's a (hacky) workaround.

\n

Problem

\n

I want whole table rows (<tr>s) to be clickable.

\n

I don't want to:

\n\n

So I use the ::after pseudo-element trick\nto expand a link's clickable area to cover the whole table row:

\n
















   





   
    <table>\n  <thead>\n    <tr>\n      <th>Name</th>\n      <th>Age</th>\n      <th>Eye color</th>\n      <th>\n        <span class=\"visually-hidden\">Read more</span>\n      </th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>John</td>\n      <td>22</td>\n      <td>Blue</td>\n      <td>\n        <a aria-label=\"Read more about John\" href=\"#\">→</a>\n      </td>\n    </tr>\n    <!-- ... -->\n  </tbody>\n</table>\n\n<style>\n  tr {\n    position: relative;\n  }\n\n  a::after {\n    content: '';\n    inset: 0;\n    position: absolute;\n\n    /* Debug outline */\n    outline: 2px solid hotpink;\n    outline-offset: -3px;\n  }\n</style>\n
\n

Demo of the problem on Flems.io.

\n

(This is a crude-ish example;\nsee e.g. Don't Turn a Table into an ARIA Grid Just for a Clickable Row by Adrian Roselli\nfor tips on accessibility.)

\n

Works well e.g. in Firefox:

\n

\"Screenshot

\n

But Safari doesn't support position: relative on table rows,\nso the ::after element is way too big – it covers the whole viewport:

\n

\"Screenshot

\n

In effect, clicking anywhere on the page (above the fold if the page is scrollable) triggers the link on the last table row!

\n

Solution

\n

Step 1: alternative for position: relative

\n
  tr {\n-   position: relative;\n+   transform: translate(0);\n  }\n
\n

I found this from a GitHub issue in the w3c/csswg-drafts repo: [css-position][css-tables] position doesn't apply on <tr> either,\nfrom a comment by Oriol Brufau.

\n

Honza Kopecký commented\nin Oct 2023 that "both Safari and Chrome on iOS don't work and the hack doesn't help either,"\nbut in my testing (Jun 2024) the hack does work in Safari on iPadOS v17.4.1.

\n

Two more relevant things that I found:

\n\n

Step 2: still too big

\n

Now the links' clickable areas are smaller,\nbut still too big in Safari;\nthey are as tall as the whole table:

\n

\"Screenshot

\n

In effect, the last link's clickable area expands below the table,\nbut otherwise the table rows are properly clickable.

\n

I found a solution from\na GitHub comment by Loz Calver\nunder the aforementioned GitHub issue:

\n
\n

If your only issue is absolutely positioned elements overflowing the table-row (e.g. absolutely positioned anchors to make a full row clickable),\nanother possible workaround is to use tr { clip-path: inset(0); }.\nIt causes some strange paint side-effects in Safari,\nlike borders sometimes disappearing,\nbut it does at least clip child elements as expected.

\n
\n

So:

\n
  tr {\n    transform: translate(0);\n+   clip-path: inset(0);\n  }\n
\n

Step 3: focus outlines

\n

Because of the clip-path used in step 2,\nmake sure you use negative outline-offset for the table rows' focus styles,\nor the focus styles will also be clipped and invisible:

\n
  tr {\n   transform: translate(0);\n   clip-path: inset(0);\n  }\n+ tr:focus-within {\n+   outline: 2px solid hotpink;\n+   outline-offset: -2px; /* Needs to be negative because of the `clip-path` above */\n+ }\n\n+ a:focus {\n+   outline: 0; /* The focus styles are on the table row */\n+ }\n  a::after {\n    content: '';\n    inset: 0;\n    position: absolute;\n\n-   /* Debug outline */\n-   outline: 2px solid hotpink;\n-   outline-offset: -3px;\n  }\n
\n

Final code

\n
tr {\n  /*\n    Safari doesn't support `position: relative` on `<tr>` elements,\n    but these two properties can be used as an alternative.\n    Source: https://mtsknn.fi/blog/relative-tr-in-safari/\n  */\n  transform: translate(0);\n  clip-path: inset(0);\n}\ntr:focus-within {\n  outline: 2px solid hotpink;\n  outline-offset: -2px; /* Needs to be negative because of the `clip-path` above */\n}\n\na:focus {\n  outline: 0; /* The focus styles are on the table row */\n}\na::after {\n  content: '';\n  inset: 0;\n  position: absolute;\n}\n
\n

Demo of the final code on Flems.io.

\n

Tested with:

\n\n","summary":"This is a problem if you want whole table rows to be clickable.\nLuckily there's a (hacky) workaround.","date_published":"2024-06-11T12:00:00+03:00","tags":["CSS","Safari"]},{"id":"https://mtsknn.fi/blog/sounds-like-a-plan/","url":"https://mtsknn.fi/blog/sounds-like-a-plan/","title":"\"Slap\" means \"sounds like a plan\"","content_html":"

I came up with this acronym myself,\nand I'm proud of it!

\n

I use it often when chatting and conversing with my fam & friends.\nNot with my parents though, they wouldn't understand.

\n

Sometimes I go so far as to say "slapety slap."

\n","summary":"I came up with this acronym myself,\nand I'm proud of it!","date_published":"2024-03-13T12:00:00+03:00","tags":["English"]},{"id":"https://mtsknn.fi/blog/dbeaver-azure-ad/","url":"https://mtsknn.fi/blog/dbeaver-azure-ad/","title":"How to use Azure AD authentication in DBeaver","content_html":"

Alternative title:\nHow to fix the "Failed to load MSAL4J Java library for performing ActiveDirectoryPassword authentication" error.

\n

I'm using the free Community Edition of DBeaver,\nversion 23.3.5.

\n

In the "Connection Settings" pop-up window:

\n
    \n
  1. \n

    Select e.g. "Active Directory – MFA" as the authentication method and type your username

    \n

    \"\"

    \n
    2. \n
  2. \n

    Click Driver Settings

    \n
    3. \n
  3. \n

    Choose the "Libraries" tab

    \n

    \"\"

    \n
    4. \n
  4. \n

    Click Add Artifact from the right

    \n
    5. \n
  5. \n

    Paste the following XML

    \n
    <!-- https://mvnrepository.com/artifact/com.microsoft.azure/msal4j -->\n<dependency>\n  <groupId>com.microsoft.azure</groupId>\n  <artifactId>msal4j</artifactId>\n  <version>1.14.3</version>\n</dependency>\n
    \n

    \"\"

    \n\n
    6. \n
  6. \n

    Click OK

    \n
    7. \n
  7. \n

    Click Download/Update from the right\nand Download in the opening pop-up window

    \n
    8. \n
  8. \n

    Click OK

    \n
    9. \n
  9. \n

    Click Test Connection ... and authenticate in the opening browser window

    \n
    10. \n
\n","summary":"Alternative title:\nHow to fix the \"Failed to load MSAL4J Java library for performing ActiveDirectoryPassword authentication\" error.","date_published":"2024-02-28T12:00:00+03:00","tags":["Miscellaneous"]},{"id":"https://mtsknn.fi/blog/tricky-mailto-links/","url":"https://mtsknn.fi/blog/tricky-mailto-links/","title":"`mailto:` links with `target=\"_blank\"` are surprisingly tricky","content_html":"

Only because Firefox ignores target="_blank" in mailto: links.

\n

Let's say you have an email link that opens in a new tab:

\n
<a href=\"mailto:hello@example.com\" target=\"_blank\">Email me</a>\n
\n\n

(I wanted to test how Edge and Safari behave\nif they have been configured to open a webmail when clicking mailto: links,\nbut configuring this setting in those browsers turned out to be too difficult.[1] smh)

\n

Based on this Stack Overflow answer,\nI tried this kind of onClick trickery:

\n
<a\n  href=\"mailto:hello@example.com\"\n  onClick={(event) => {\n    event.preventDefault()\n    window.open(url.toString(), 'mail')\n  }}\n  // No `target=\"_blank\"`\n>\n  Email me\n</a>\n
\n

✅ If Firefox is configured to open a webmail when clicking mailto: links,\nclicking the link works now correctly:\nthe webmail is opened in a new tab.

\n

But the UX is degraded in all other cases:

\n\n

I was tempted to check if the user's browser is Firefox,\nand only then use the onClick trick.\nBut trying to detect the user's browser\nwould open another can of worms.

\n

In the end I ended up doing nothing about this,\nwhich sucks for some Firefox users,\nbut I don't know what I could do that wouldn't degrade the UX of any other users. 🤔

\n\n
\n
\n

\n Footnotes\n

\n
    \n

  1. I did find instructions how configure Edge to open mailto: links in Gmail,\nbut it would require logging in to Gmail,\nand I don't want to do that,\nbecause Edge is a shitty browser\n(see e.g.\nThe dark defaults of Microsoft Edge\nand\nEdge sends images you view online to Microsoft).\nI use Edge only for testing and occasionally for some web development.\nFirefox ftw. ↩

    \n
    2. \n
\n
\n","summary":"Only because Firefox ignores `target=\"_blank\"` in `mailto:` links.","date_published":"2024-02-19T12:00:00+03:00","tags":["JavaScript"]},{"id":"https://mtsknn.fi/blog/burp-suite-ux-bad/","url":"https://mtsknn.fi/blog/burp-suite-ux-bad/","title":"Fix all requests timeouting in Burp Suite's Repeater","content_html":"

Make sure you are not missing two empty lines after the request headers.\nThere's a UX lesson here.

\n

Problem

\n

I was using Burp Suite\n(Community Edition, version 2023.12.1.5)\nfor the first time.

\n

Sending requests in the Repeater tab\nresulted only in timeouts:

\n
HTTP/1.1 408 Request Time-out\nContent-length: 110\nCache-Control: no-cache\nConnection: close\nContent-Type: text/html\n\n<html><body><h1>408 Request Time-out</h1>\nYour browser didn't send a complete request in time.\n</body></html>\n
\n

Solution

\n

Adding two empty lines after the request headers fixed it for me.

\n

Before:

\n
GET /wiki/Main_Page HTTP/1.1\nHost: en.wikipedia.org\nAccept: */*\n
\n

After:

\n
GET /wiki/Main_Page HTTP/1.1\nHost: en.wikipedia.org\nAccept: */*\n\n\n
\n

I found the solution and an explanation\nfrom a thread on Burp Suite User Forum:

\n
\n

Andre:\nI found a solution to this. I was removing the 2 extra lines from the request when adding the new header. If I keep them, the requests go through. [...]

\n

Diego:\nI was having the same issue, but like Andre said above, one of the blank lines of the request had been removed. Adding it back made requests in Repeater work again.

\n

Uthman, PortSwigger Agent:\nThanks for your feedback. You can find more information on why this (\\r\\n\\r\\n) is required in the RFC 2616 documentation.

\n
\n

UX lesson

\n

That's terrible UX:

\n\n

How I would fix this UX issue:

\n\n

I guess the "UX lesson" can be generalized like so:\ncommunicate obscure requirements to the user,\nand auto-fix issues where possible.

\n","summary":"Make sure you are not missing two empty lines after the request headers.\nThere's a UX lesson here.","date_published":"2024-02-18T12:00:00+03:00","tags":["Miscellaneous"]},{"id":"https://mtsknn.fi/blog/video-games-2023/","url":"https://mtsknn.fi/blog/video-games-2023/","title":"Two great video games I played through in 2023","content_html":"

I managed to find time to play Desperados III and Lost in Play\n(and Before Your Eyes too a bit).

\n

Desperados III

\n

\"Screenshot

\n

(Screenshot taken from the game's official website.)

\n
\n

Desperados III is a story-driven, hardcore tactical stealth game, set in a ruthless Wild West scenario.

\n
\n\n

I have previously also played the game's predecessor,\nShadow Tactics,\nwhich is from the same game studio\nand has a samurai theme.\nIt was a great game too.

\n

Looks like the game studio has released a third similar game last year –\nShadow Gambit: The Cursed Crew –\nwhich has a "cursed pirate crew" theme.\nMaybe not the best theme for me,\nbut at least the gameplay should be great.

\n

➡️ Official website of Desperados III

\n

Lost in Play

\n

\"Screenshot

\n

(Screenshot taken from the game's official website.)

\n
\n

Solve puzzles, riddles, and embark on an exciting journey of discovery! Join Toto and Gal as they explore dreamscapes and befriend magical creatures. Lost in their imagination, the brother and sister must stick together and solve puzzles to find their way home.

\n
\n\n

Steam shows I spent 4.7 hours playing the game,\nso it's a short game, but excellent!

\n

➡️ Official website of Lost in Play\n(actually the game studio's website, but it doesn't have any subpages as of now)

\n

Also: Before Your Eyes

\n

\"Screenshot

\n

(Screenshot taken from the game's official website.)

\n
\n

Embark on an emotional first-person narrative adventure where you control the story – and affect its outcomes – with your real-life blinks. With this innovative technique you will fully immerse yourself in a world of memories, both joyous and heartbreaking, as your whole life flashes before your eyes.

\n
\n

My bro gifted me this game as a birthday present (PS thx!).

\n

Controlling the story with your "real-life blinks"\nmeans that you need a webcam (optional).\nCool and likely quite unique technique,\nbut a bit wonky and unreliable in the end,\nso I disabled it after a while.

\n

I played this game a few times\nbut dropped it eventually\nbecause it felt somehow felt so depressing. :D\nMaybe too much black all around (see the screenshot),\nand because spoiler (read backwards or ):

\n
\n

|: hcum oot deugra stnerap s'tsinogatorp ehT

\n
\n\n

➡️ Official website of Before Your Eyes\n(stupid site because there's zero textual information about the game,\nand the <meta name="description"> is empty too!)

\n","summary":"I managed to find time to play Desperados III and Lost in Play\n(and Before Your Eyes too a bit).","date_published":"2024-02-03T12:00:00+03:00","tags":["Games"]},{"id":"https://mtsknn.fi/blog/fiction-books-2023/","url":"https://mtsknn.fi/blog/fiction-books-2023/","title":"Fiction books I read and liked in 2023","content_html":"

I started a new hobby in 2023: reading fiction books!\nI started with fantasy: Harry Potter, Mistborn, and The Stormlight Archive.

\n

Harry Potter

\n

After several years of not reading fiction books (almost) at all,\nI started my new reading hobby\nwith this classic heptalogy (= 7-book series)\nby J. K. Rowling.

\n

I have written about Harry Potter before:\nI read all 7 seven Harry Potter books in 33 days.

\n

Mistborn

\n

This was a great series!\nI read all 7 books in the series (trilogy + novella + tetralogy (= 4-book series)).\nBrandon Sanderson is such a good writer.

\n

Three things that are better in Mistborn than in Harry Potter:

\n\n

The Stormlight Archive

\n

Also by Brandon Sanderson.

\n

This series is much more heavy than Mistborn –\nthere are much more characters and places and things etc.

\n

I'm glad I read Mistborn before this one\nbecause had I started with this,\nthis would probably have been way too overwhelming.

\n

So far I have read books 1, 2 and 2.5 (novella),\nand I'm waiting for book 3 from the library.

\n

Dislikes

\n

I don't want to be Negative Nelly,\nso I'll just quickly note why I didn't like some books:

\n\n","summary":"I started a new hobby in 2023: reading fiction books!\nI started with fantasy: Harry Potter, Mistborn, and The Stormlight Archive.","date_published":"2024-01-31T12:00:00+03:00","tags":["Books"]},{"id":"https://mtsknn.fi/blog/ublock-origin-style-operator/","url":"https://mtsknn.fi/blog/ublock-origin-style-operator/","title":"Tweaking website styles with uBlock Origin filters","content_html":"

Use the :style() operator in a uBlock Origin filter\nto apply CSS styles to the targeted elements.

\n

Here's how I use the :style() operator:

\n\n

Here are the filters (under the "My filters" tab in the uBlock Origin dashboard):

\n
! underline links\nbazqux.com##.post .mtext a:style(text-decoration: underline !important)\n\n! hide points\nhckrnews.com##.entry.row a:first-child span:style(opacity: 0)\n\n! highlight visited comment links\nhckrnews.com##.entry.row a:first-child:style(outline: 20px solid white; outline-offset: -20px)\nhckrnews.com##.entry.row a:first-child:visited:style(outline-color: #eee)\n
\n

I know there's also e.g. Stylus extension for Firefox,\nbut the fewer extensions I need,\nthe better.

\n","summary":"Use the `:style()` operator in a uBlock Origin filter\nto apply CSS styles to the targeted elements.","date_published":"2023-11-13T12:00:00+03:00","tags":["Miscellaneous"]},{"id":"https://mtsknn.fi/blog/handlebars-else-equals/","url":"https://mtsknn.fi/blog/handlebars-else-equals/","title":"\"Else equals\" in Handlebars (in SendGrid's Dynamic Templates)","content_html":"

There's a way to do an "else equals" check in Handlebars (in SendGrid's Dynamic Templates),\nthough it's undocumented and a bit tricky.

\n

Context

\n\n

Problem

\n

I wanted to do something like this:

\n
{{! Pseudo code, doesn't work }}\n\n{{#if locale == 'en'}}\n  <h1>New article: {{articleNameEn}}</h1>\n{{else if locale == 'sv'}}\n  <h1>Ny artikel: {{articleNameSv}}</h1>\n{{else}}\n  <h1>Uusi artikkeli: {{articleNameFi}}</h1>\n{{/if}}\n
\n

But it wasn't quite that simple.

\n

Solution

\n

Step by step

\n\n

Final code

\n
{{#equals locale 'en'}}\n  <h1>New article: {{@root.articleNameEn}}</h1>\n{{else equals @root.locale 'sv'}}\n  <h1>Ny artikel: {{@root.articleNameSv}}</h1>\n{{else}}\n  <h1>Uusi artikkeli: {{@root.articleNameFi}}</h1>\n{{/equals}}\n
\n","summary":"There's a way to do an \"else equals\" check in Handlebars (in SendGrid's Dynamic Templates),\nthough it's undocumented and a bit tricky.","date_published":"2023-11-10T12:00:00+03:00","tags":["Handlebars","SendGrid"]},{"id":"https://mtsknn.fi/blog/accept-vs-content-type/","url":"https://mtsknn.fi/blog/accept-vs-content-type/","title":"HTTP headers: Accept vs Content-Type","content_html":"

I sometimes forget what these two headers do in requests vs responses,\nso here's a refresher for me.

\n
\n
Accept in request headers
\n
What type of response the client expects from the server.
\n
Accept in response headers
\n
N/A
\n
Content-Type in request headers
\n
The type of the request data (e.g. in a POST or PUT request).
\n
Content-Type in response headers
\n
The type of the response data.
\n
\n

The Content-Type header is usually not needed\nif the request or response has no data\n(e.g. GET requests and 204 No Content responses).\nBut apparently "some servers may require you to provide a Content-Type [header] in a request even if the request has no payload."

\n","summary":"I sometimes forget what these two headers do in requests vs responses,\nso here's a refresher for me.","date_published":"2023-11-09T12:00:00+03:00","tags":["Miscellaneous"]},{"id":"https://mtsknn.fi/blog/firefox-slowness/","url":"https://mtsknn.fi/blog/firefox-slowness/","title":"Cmd-tabing to Firefox on Mac gets progressively slower","content_html":"

The longer Firefox is kept open,\nthe longer it takes for Firefox to receive focus after Cmd-tabing to it.\nAt some point it can take even about a second,\nwhich really kills the flow.

\n

I initially thought that maybe the problem is in the AltTab app,\nwhich is an essential Mac app by they way.\nBut nope, the problem exists even when not using AltTab.

\n

Then I thought that maybe it's some kind of memory leak,\ncaused/aggravated by keeping too many Firefox tabs open (a bad habit of mine).\nBut nope, unloading tabs to free resources\ndoesn't help either.

\n

Only restarting Firefox helps,\nbut that's cumbersome (takes several seconds to do :D).

\n

Eventually I found\na bug report on Bugzilla: cmd-tab back to Firefox window on macOS is slow.\nFrom a comment by Stephen A Pohl on Sep 25, 2023:

\n
\n

This bug is next on my list of priorities.

\n
\n

Yay! Now let's hope the fix is coming soon™.

\n","summary":"The longer Firefox is kept open,\nthe longer it takes for Firefox to receive focus after Cmd-tabing to it.\nAt some point it can take even about a second,\nwhich really kills the flow.","date_published":"2023-11-08T12:00:00+03:00","tags":["Mac"]},{"id":"https://mtsknn.fi/blog/js-default-exports-bad/","url":"https://mtsknn.fi/blog/js-default-exports-bad/","title":"JavaScript's default exports are a footgun","content_html":"

It's too easy to accidentally import a default export with a misleading name.

\n

Example:

\n\n

Named exports would prevent such silly mistakes:

\n
// OK:\nimport { useSWR } from 'swr'\nimport { useSWRImmutable } from 'swr/immutable'\n\n// Error:\nimport { useSWRImmutable } from 'swr'\nimport { useSWR } from 'swr/immutable'\n
\n

This is why I think it's bad to use default exports (unless you have a good reason).

\n

Besides,\ndefault exports have other issues as well.

\n","summary":"It's too easy to accidentally import a default export with a misleading name.","date_published":"2023-11-07T12:00:00+03:00","tags":["JavaScript"]},{"id":"https://mtsknn.fi/blog/sorting-anti-symmetry/","url":"https://mtsknn.fi/blog/sorting-anti-symmetry/","title":"Moving zeros to the end of an array in JavaScript","content_html":"

Let's learn about anti-symmetry by solving this interview puzzle:\n"Move all zeros of an array of integers to the end\nwhile maintaining the relative order of all non-zeros."

\n

Example:

\n
moveZeros([1, 3, 0, 111, 57, 0, 5, 0, 9])\n//=>      [1, 3,    111, 57,    5,    9, 0, 0, 0]\n
\n

Ok, ez because there's a great\nvisual mnemonic for an array sorter's return values,\nso we can simply™ sort() the values:

\n
const moveZeros = (numbers: number[]) =>\n  numbers.toSorted((a, b) => (a === 0 ? 1 : 0))\n\nmoveZeros([1, 3, 0, 111, 57, 0, 5, 0, 9])\n//=>      [1, 3,    111, 57,    5,    9, 0, 0, 0]\n
\n

I used the new toSorted() method\nto avoid mutating the original array.

\n

Seems to work with the test input,\nbut might break with other inputs,\nbecause the comparator function is not anti-symmetric.\nFrom sort() on MDN:

\n
\n

[I]f a comparator only returns 1 and 0,\nor only returns 0 and -1,\nit will not be able to sort reliably because anti-symmetry is broken.

\n
\n

So we need to also check if b === 0:

\n
const moveZeros = (numbers: number[]) =>\n  numbers.toSorted((a, b) => (a === 0 ? 1 : b === 0 ? -1 : 0))\n
\n

Nested ternaries are icky though,\nplus returning 1 or -1 is not very clear without comments.

\n

Final solution:

\n
const moveZeros = (numbers: number[]) =>\n  numbers.toSorted((a, b) => {\n    if (a === 0) return +1 //   a->\n    if (b === 0) return -1 // <-a\n    return 0 // Keep order\n  })\n
\n
\n

Though I have to admit that\nJuhani Kumara's solution using reduceRight\nis annoyingly clever!

\n
const move0 = (arr) =>\n  arr.reduceRight((acc, cur) => (acc[cur ? 'unshift' : 'push'](cur), acc), [])\n
\n","summary":"Let's learn about anti-symmetry by solving this interview puzzle:\n\"Move all zeros of an array of integers to the end\nwhile maintaining the relative order of all non-zeros.\"","date_published":"2023-11-06T12:00:00+03:00","tags":["JavaScript","TypeScript"]},{"id":"https://mtsknn.fi/blog/bulk-logging-hours-in-jira/","url":"https://mtsknn.fi/blog/bulk-logging-hours-in-jira/","title":"Logging hours to Jira's \"Work log\" in bulk","content_html":"

There's apparently no nice way to bulk-log hours in Jira.\nUse this One Weird Trick to do it anyway –\nJira consultants HATE it!

\n

Problem

\n

Jira's UI for logging hours ("Work log" / "Time tracking") is clunky:

\n\n

Officially hours can apparently be logged in bulk by importing data from a CSV file,\nbut that sounds clunky\nand doesn't work if your user account doesn't have permission to import data from CSV files.

\n

Solution

\n

Overview:

\n
    \n
  1. Track hours in a JS file.
    2. \n
  2. Log the hours by copy-pasting the code and running it in the browser's JS console.
    3. \n
\n

Tracking hours

\n

Create a JavaScript file and keep track of hours with this fancy format:

\n
// @ts-check\n\n/**\n * @type {Record<\n *   `${'Mon' | 'Tue' | 'Wed' | 'Thu' | 'Fri'} 2023-11-${number}`,\n *   [ticketId: `FOO-${number}` | null, hours: number][]\n * >}\n */\nconst items = {\n  // ...\n  'Wed 2023-11-08': [\n    ['FOO-123', 1.5], // pr fixes\n    ['FOO-333', 5], // feature x\n    ['FOO-444', 1], // pr review\n  ],\n  'Tue 2023-11-07': [\n    ['FOO-222', 3], // yarn install investigation\n    [null, 1], // backlog grooming\n    ['FOO-333', 3.5], // feature x\n  ],\n  'Mon 2023-11-06': [\n    ['FOO-123', 7], // nav revamp\n    [null, 0.5], // daily\n  ],\n}\n
\n

Notes:

\n\n

Logging hours

\n

Initial setup

\n

This needs to be done only once.

\n
    \n
  1. \n

    Open the browser's DevTools.

    \n
    2. \n
  2. \n

    Log hours manually in Jira (only one logging needed).

    \n
    3. \n
  3. \n

    Select the Network tab of DevTools\nand look for the XHR request that was just made.

    \n
    4. \n
  4. \n

    Right-click on the item and select "Copy as Fetch."\nThe code might look something like this:

    \n
    await fetch(\n  'https://jira.example.com/rest/internal/3/issue/FOO-123/worklog?adjustEstimate=new&newEstimate=0m',\n  {\n    credentials: 'include',\n    headers: {\n      'User-Agent': 'redacted for privacy lolz',\n      Accept: 'application/json,text/javascript,*/*',\n      'Accept-Language': 'en-US,en;q=0.5',\n      'Content-Type': 'application/json',\n      'X-Atlassian-Capability': 'ISSUE_VIEW',\n      'Sec-Fetch-Dest': 'empty',\n      'Sec-Fetch-Mode': 'cors',\n      'Sec-Fetch-Site': 'same-origin',\n      Pragma: 'no-cache',\n      'Cache-Control': 'no-cache',\n    },\n    referrer: 'https://jira.example.com/browse/FOO-123',\n    body:\n      '{\"timeSpent\":\"30m\",\"comment\":{\"type\":\"doc\",\"version\":1,\"content\":[]},\"started\":\"2023-10-30T08:00:00.000+0200\"}',\n    method: 'POST',\n    mode: 'cors',\n  }\n)\n
    \n
    5. \n
  5. \n

    Add the following snippet to the JS file after the items object;\nnotice how I have removed unnecessary Fetch options\nand replaced hardcoded values with template strings:

    \n
    const items = {\n  // ...\n}\n\n;(async () => {\n  for (let [date, rows] of Object.entries(items)) {\n    date = date.split(' ')[1] // E.g. \"Mon 2023-10-23\" -> \"2023-10-23\"\n\n    for (let [ticketId, time] of rows) {\n      ticketId ??= 'FOO-111' // \"General stuff\" ticket\n      time *= 60 // Hours to minutes\n\n      await fetch(\n        `https://jira.example.com/rest/internal/3/issue/${ticketId}/worklog?adjustEstimate=new&newEstimate=0m`,\n        {\n          body: JSON.stringify({\n            timeSpent: `${time}m`,\n            comment: { type: 'doc', version: 1, content: [] },\n            started: `${date}T08:00:00.000+0200`,\n          }),\n          headers: {\n            Accept: 'application/json',\n            'Content-Type': 'application/json',\n          },\n          method: 'POST',\n          referrer: `https://jira.example.com/browse/${ticketId}`,\n        }\n      )\n    }\n  }\n})()\n
    \n

    There might still be some fluff (I don't know if e.g. the referrer is needed),\nbut good enough.

    \n
    6. \n
\n

Actually logging

\n
    \n
  1. \n

    Open Jira in the browser.

    \n
    2. \n
  2. \n

    Copy-paste the code (including the items object) to the browser's JS console.

    \n
    3. \n
  3. \n

    Press Enter in the JS console\nand switch to the Network tab to monitor whether the Fetch requests succeed or fail.\n(So far they have never failed for me (*knocks on wood*).)

    \n
    4. \n
  4. \n

    Comment out the logged items in the JS file to avoid accidentally re-logging them the next time:

    \n
    const items = {\n  // 'Mon 2023-11-06': [\n  //   ...\n  // ],\n}\n
    \n

    (Or just remove the logged items.)

    \n
    5. \n
\n

Nice and easy!

\n","summary":"There's apparently no nice way to bulk-log hours in Jira.\nUse this One Weird Trick to do it anyway –\nJira consultants HATE it!","date_published":"2023-11-03T12:00:00+03:00","tags":["JavaScript"]},{"id":"https://mtsknn.fi/blog/exact-dependency-versions/","url":"https://mtsknn.fi/blog/exact-dependency-versions/","title":"Pin exact dependency versions","content_html":"

In a perfect world,\nminor- and patch-level version bumps don't have breaking changes.\nIn the real world,\nthings are complicated and shit happens.

\n

Example: I recently witnessed\nyarn install starting to fail mysteriously after Node.js was automatically upgraded from v18.16 to v18.18.

\n

I had thought that pinning the major-level version number of Node.js\nwould have prevented this kind of sudden breakages,\nbut nope.

\n

Had the Node.js version been pinned to v18.16.1 or even just v18.16,\nyarn install wouldn't have started to suddenly fail.

\n

Yes, yarn install would have probably started to fail later\nwhen upgrading Node.js manually,\nbut that's not as bad.\nSudden breakages are worse\nbecause they often require acute investigation,\nmaking your workdays more reactive than proactive.

\n

So, note to self:\npin exact dependency versions (x.y.z instead of just x.y or x)\nto be on the safe side.

\n","summary":"In a perfect world,\nminor- and patch-level version bumps don't have breaking changes.\nIn the real world,\nthings are complicated and shit happens.","date_published":"2023-11-02T12:00:00+03:00","tags":["Miscellaneous"]},{"id":"https://mtsknn.fi/blog/app-insights-error-logging/","url":"https://mtsknn.fi/blog/app-insights-error-logging/","title":"`error.cause` needs to be logged manually to App Insights","content_html":"

If you are logging errors to Azure App Insights,\nand an Error object has a cause property (which too could be an Error object),\nthe cause Error's message and stack properties are not shown in Azure App Insights.\nBut you can log them manually.

\n

Problem

\n
    \n
  1. \n

    Use App Insights SDK for Node.js.

    \n
    2. \n
  2. \n

    Use the trackException method\nto log an error with a cause property:

    \n
    import * as appInsights from 'applicationinsights'\n\ntry {\n  throw new Error('foo')\n} catch (error) {\n  appInsights.defaultClient.trackException({\n    exception: new Error('bar', { cause: error }),\n  })\n}\n
    \n
    3. \n
\n

Expected behavior:\nboth Error's message and stack trace are shown in App Insights.

\n

Actual behavior:\nonly the second Error's message (= 'bar') and stack trace are shown in App Insights.

\n

A less contrived example

\n
router.get('/foo', async (req, res) => {\n  try {\n    const data = await database.getFoo() // This can throw\n    res.json(data)\n  } catch (error) {\n    appInsights.defaultClient.trackException({\n      exception: new Error('GET /foo failed', { cause: error }),\n    })\n  }\n})\n
\n

Solution

\n

Log the first/original Error's stack property manually:

\n





  try {\n  // ...\n} catch (error) {\n  appInsights.defaultClient.trackException({\n    exception: new Error('...'),\n    properties:\n      error instanceof Error ? { causeStack: error.stack } : undefined,\n  })\n}\n
\n

Now the first/original Error's message and stack trace will be shown in App Insights\nunder the "Custom Properties" heading.

\n

Notes

\n\n","summary":"If you are logging errors to Azure App Insights,\nand an Error object has a `cause` property (which too could be an Error object),\nthe `cause` Error's `message` and `stack` properties are not shown in Azure App Insights.\nBut you can log them manually.","date_published":"2023-11-01T12:00:00+03:00","tags":["JavaScript"]},{"id":"https://mtsknn.fi/blog/regex-numerals/","url":"https://mtsknn.fi/blog/regex-numerals/","title":"`\\d` in a regex isn't always equal to `[0-9]`","content_html":"

In JavaScript, \\d and [0-9] are equal and match only Arabic numerals (the numbers 0–9).\nBut in some other languages, \\d matches also non-Arabic numerals.

\n

There are 680 Unicode characters in the "Number, Decimal Digit" category.\nFor example:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameCharacters
Digits (Arabic numerals)0123456789
Arabic-Indic digits٠١٢٣٤٥٦٧٨٩
Extended Arabic-Indic digits۰۱۲۳۴۵۶۷۸۹
NKo digits߀߁߂߃߄߅߆߇߈߉
Devanagari digits०१२३४५६७८९
\n

Testing on regex101.com:

\n\n

(I haven't tested whether \\d in those three languages matches also other characters than those 680.)

\n

[0-9] matches only Arabic numerals in those four languages,\nbut even [0-9] can't be always trusted\n(a few typos fixed in the quotation):

\n
\n

It is generally believed that [0-9] matches only the ASCII digits 0123456789.\nThat is painfully false in some instances:\nLinux in some locale that is not "C" (June 2020) systems, for example:

\n

Assume:

\n
str='0123456789 ٠١٢٣٤٥٦٧٨٩ ۰۱۲۳۴۵۶۷۸۹ ߀߁߂߃߄߅߆߇߈߉ ०१२३४५६७८९'\n
\n

Try grep to discover that it allows most of them:

\n
$ echo \"$str\" | grep -o '[0-9]\\+'\n0123456789\n٠١٢٣٤٥٦٧٨\n۰۱۲۳۴۵۶۷۸\n߀߁߂߃߄߅߆߇߈\n०१२३४५६७८\n
\n

sed has some troubles.\nShould remove only 0123456789 but removes almost all digits.\nThat means that it accepts most digits but not some nines (???):

\n
$ echo \"$str\" | sed 's/[0-9]\\{1,\\}//g'\n ٩ ۹ ߉ ९\n
\n

Even expr suffers from the same issues as sed:

\n
expr \"$str\" : '\\([0-9 ]*\\)' # also matching spaces\n0123456789 ٠١٢٣٤٥٦٧٨\n
\n

And also ed:

\n
printf '%s\\n' 's/[0-9]/x/g' '1,p' Q | ed -v <(echo \"$str\")\n105\nxxxxxxxxxx xxxxxxxxx٩ xxxxxxxxx۹ xxxxxxxxx߉ xxxxxxxxx९\n
\n
\n

Huh. Curious.

\n

I guess I'd better remember to avoid \\d and prefer [0-9] or even [0123456789]\nwhen using other languages than JavaScript.

\n

When writing JavaScript,\nI'll continue using \\d as it's as clear (d = digit) as and shorter than [0-9].

\n","summary":"In JavaScript, `\\d` and `[0-9]` are equal and match only Arabic numerals (the numbers 0–9).\nBut in some other languages, `\\d` matches also non-Arabic numerals.","date_published":"2023-10-31T12:00:00+03:00","tags":["JavaScript","Regular expressions"]},{"id":"https://mtsknn.fi/blog/response-json-can-throw/","url":"https://mtsknn.fi/blog/response-json-can-throw/","title":"`response.json()` can throw an error in JavaScript","content_html":"

If the response body is not valid JSON,\nresponse.json() will throw,\njust like JSON.parse() would throw\nif the same data was passed to it.

\n

Example:

\n
const response = new Response('{ \"foo\": true }')\nawait response.json()\n//=> { foo: true }\n\n// vs\n\nconst response = new Response('OK')\nawait response.json()\n//=> SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data\n
\n

Quite obvious in hindsight,\nbut I was wondering this\nand couldn't find an answer quickly\n(I tried googling "can response.json throw in js").

\n

How about response.text() – can it throw?\nNo, because it's akin to passing the same data to the String() function,\nwhich doesn't seem to throw according to the language specs.\n(Compare with the language specs of JSON.parse();\nthrowing is mentioned in step 2.)

\n","summary":"If the response body is not valid JSON,\n`response.json()` will throw,\njust like `JSON.parse()` would throw\nif the same data was passed to it.","date_published":"2023-10-30T12:00:00+03:00","tags":["JavaScript"]},{"id":"https://mtsknn.fi/blog/js-error-stack/","url":"https://mtsknn.fi/blog/js-error-stack/","title":"`error.stack` includes the error message in some JS environments","content_html":"

In V8-based JS environments (e.g. Chrome, Deno and Node.js) and in Bun,\nerror.stack = error class name + error.message + stack frames.

\n

Context

\n

I was logging an Error object's message and stack properties to Azure App Insights\n(because error.cause needs to be logged manually to App Insights),\nand was baffled because error.stack seemed to contain not only the stack trace,\nbut also the error message.\nI thought App Insights was doing something wonky to the Error object.

\n

Culprit: V8

\n

Eventually I realized that that's how the V8 JS engine works.\nFrom V8's Stack trace API docs:

\n
\n

Here's an example of a fully formatted stack trace:

\n
ReferenceError: FAIL is not defined\n   at Constraint.execute (deltablue.js:525:2)\n   at Constraint.recalculate (deltablue.js:424:21)\n   at Planner.addPropagate (deltablue.js:701:6)\n   at Constraint.satisfy (deltablue.js:184:15)\n   at Planner.incrementalAdd (deltablue.js:591:21)\n   at Constraint.addConstraint (deltablue.js:162:10)\n   at Constraint.BinaryConstraint (deltablue.js:346:7)\n   at Constraint.EqualityConstraint (deltablue.js:515:38)\n   at chainTest (deltablue.js:807:6)\n   at deltaBlue (deltablue.js:879:2)\n
\n
\n

Node.js's error.stack docs\nsay it more explicitly:

\n
\n

The first line is formatted as <error class name>: <error message>,\nand is followed by a series of stack frames (each line beginning with "at ").

\n
\n

(It's mentioned in Node.js v4 docs as well.\nNode.js v4 was released in 2015.)

\n

Non-V8 environments

\n

In Firefox and Safari,\nerror.stack contains only the stack trace.\nFirefox's JS engine is SpiderMonkey;\nSafari's JS engine is JavaScriptCore.

\n

Bun is interesting\nbecause it's also "powered by JavaScriptCore",\nbut its error.stack includes the error class name and error message as well.

\n

Non-standard

\n

The Error.prototype.stack page on MDN\nsays that it's a non-standard property:

\n
\n

Non-standard: This feature is non-standard and is not on a standards track.\nDo not use it on production sites facing the Web: it will not work for every user.\nThere may also be large incompatibilities between implementations and the behavior may change in the future.

\n
\n

Using error.stack on the server is likely a-okay though\n(as long as you are familiar with how it works in your JS environment).

\n","summary":"In V8-based JS environments (e.g. Chrome, Deno and Node.js) and in Bun,\n`error.stack` = error class name + `error.message` + stack frames.","date_published":"2023-10-29T12:00:00+03:00","date_modified":"2023-11-02T12:00:00+03:00","tags":["JavaScript"]},{"id":"https://mtsknn.fi/blog/yarn-install-failing/","url":"https://mtsknn.fi/blog/yarn-install-failing/","title":"`yarn install` failing mysteriously on Node.js v18.18","content_html":"

TL;DR: Upgrading Yarn from v1 to v4 fixed it for me.

\n

Problem

\n

Recently some CI pipelines[1] started to fail at yarn install (v1.22.19)\nwith cryptic error messages like these (the error message kept changing):

\n\n

Googling those error messages didn't yield anything useful.

\n

Solution

\n

The errors seemed to began after Node.js was upgraded from v18.16 to v18.18.

\n

Googling "yarn install fails on node.js 18.18.2" (:D)\nled me to this GitHub comment on yarnpkg/yarn#3728:

\n
\n

6 years later, NPM removes the node-gyp binary from its bundle with v9.7.2 which is released with Node 18.18.\nBreaking our builds because now yarn tries to install node-gyp automatically and runs every now and then into this issue.\nTime to move away from yarn v1. :)

\n

npm/cli#6554 (comment)

\n

Leaving a comment primarily for others running into this problem now.

\n
\n

Upgrading Yarn\nto Yarn v4, which was released just a few days ago,\ndid indeed fix the yarn install errors.

\n

Side comments

\n\n

The real lesson

\n

The real lesson here is to\npin exact dependency version numbers.

\n

In my case Node.js was automatically upgraded from v18.16 to v18.18\nbecause the version of Node.js was pinned to v18.

\n

Had the Node.js version been pinned to v18.16.1 or v18.16 instead of just v18,\nthese errors wouldn't have started suddenly.

\n\n
\n
\n

\n Footnotes\n

\n
    \n

  1. The CI pipelines were on Azure DevOps.\nThat's likely irrelevant,\nbut I still wanted to mention it, because:

    \n

    When investigating this problem,\nat first I didn't know what's causing it.\nOne of the Google searches I made was\n"azure devops yarn install Cannot read properties of undefined (reading 'config" (:D).

    \n

    That search didn't yield any useful results.\nThis page you are reading now would have been quite useful. ↩

    \n
    2. \n
\n
\n","summary":"TL;DR: Upgrading Yarn from v1 to v4 fixed it for me.","date_published":"2023-10-28T12:00:00+03:00","date_modified":"2023-11-02T12:00:00+03:00","tags":["JavaScript"]},{"id":"https://mtsknn.fi/blog/visual-mnemonic-for-array-sorting/","url":"https://mtsknn.fi/blog/visual-mnemonic-for-array-sorting/","title":"Visual mnemonic for an array sorter's return values","content_html":"

When sorting an array with a custom comparator function,\nthe function should return <0, 0 or >0.\nBut what do the values do?\nUse this weird visual mnemonic –\nsorting consultants HATE it!

\n

First,\nrecall that an array sorter compares two values, a and b:

\n
array.sort((a, b) => {\n  // ...\n})\n
\n

Second,\nbecause the sorter function should return a number,\nimagine an x-axis with the numbers -1, 0 and +1:

\n

\"An

\n

Now,\nrealize that -1 is on the left side of the x-axis,\nand +1 is on the right side:

\n\n

And why is a moved relative to b –\nbecause the array sorter compares two values (a and b),\nand a comes first in the function parameters ((a, b) => {}).\nFirst come, first served.

\n

Like so:

\n

\"An

\n

That's it!\nTo recap:

\n
array.sort((a, b) => {\n  return -1 // <-a\n  return +1 //   a->\n  return 0 // Keep order of `a` and `b`\n})\n
\n

(Illustrations mouse-drawn on tldraw.com.)

\n","summary":"When sorting an array with a custom comparator function,\nthe function should return `<0`, `0` or `>0`.\nBut what do the values do?\nUse this weird visual mnemonic –\nsorting consultants HATE it!","date_published":"2023-10-17T12:00:00+03:00","tags":["JavaScript","Mnemonics"]},{"id":"https://mtsknn.fi/blog/zod-object-strict/","url":"https://mtsknn.fi/blog/zod-object-strict/","title":"Strict object validation is handy for data exploration","content_html":"

Alternative title:\nI finally found a good use case for z.object().strict() in Zod.

\n

Zod's z.object() ignores unknown keys (= object keys not specified in a Zod schema) by default.\nUnknown keys can be disallowed with Zod's .strict() method.

\n

When would .strict() be useful?\nFrom a GitHub comment by Kamil Trebunia:

\n
\n

For consuming APIs I would almost always pick z.object,\nbut for data exploration as I am doing now z.strictObject is necessary\nand I am glad I found about it.

\n
\n

So: if you are exploring what data a poorly documented API returns,\nyou can use z.object().strict() (or the shorthand z.strictObject())\nto avoid missing any keys;\nunspecified keys will make Zod throw an error,\nso you can adjust the Zod schema accordingly.

\n

There's no .deepStrict() method in Zod,\nbut it's easy to search for .object( and replace all occurrences with .strictObject(.

\n","summary":"Alternative title:\nI finally found a good use case for `z.object().strict()` in Zod.","date_published":"2023-10-10T12:00:00+03:00","tags":["JavaScript","TypeScript","Zod"]},{"id":"https://mtsknn.fi/blog/type-safer-node-cache/","url":"https://mtsknn.fi/blog/type-safer-node-cache/","title":"Adding type-safety to Node-Cache","content_html":"

Node-Cache (a JS library) has generic get and set methods,\nbut it's easy to accidentally misuse them.\nI made a type-safer wrapper around the library.

\n

Problem / Context

\n

Node-Cache is a caching module for Node.js:

\n
\n

A simple caching module that has set, get and delete methods\nand works a little bit like memcached.\nKeys can have a timeout (ttl) after which they expire and are deleted from the cache.\nAll keys are stored in a single object so the practical limit is at around 1m keys.

\n
\n

Node-Cache's get and set methods are generic, which is nice:

\n
import NodeCache from 'node-cache'\n\nconst myCache = new NodeCache(options)\n\nmyCache.set<Foo>(cacheKey, value)\nconst foo = myCache.get<Foo>(cacheKey)\n
\n

But the constructor is not generic,\nwhich is problematic;\nyou can accidentally use wrong types when getting and setting values.

\n

Example case

\n

I was investigating a weird bug and was running out of ideas.\nFinally I noticed that a single cache was accidentally being used for two different things:

\n























  import NodeCache from 'node-cache'\n\nconst fooCache = new NodeCache(options)\nconst barCache = new NodeCache(options)\n\nexport function getFoo(id: number) {\n  if (fooCache.has(id)) {\n    return fooCache.get<Foo>(id)\n  }\n\n  const value = getFooFromSomewhere()\n\n  fooCache.set<Foo>(id, value)\n  return value\n}\n\nexport function getBar(id: number) {\n  if (barCache.has(id)) {\n    return barCache.get<Bar>(id)\n  }\n\n  const value = getBarFromSomewhere()\n\n  // ⚠️ Whoops! Accidentally using the wrong cache here\n  fooCache.set<Bar>(id, value)\n  return value\n}\n
\n

Solution

\n

Goal

\n

Ideally the constructor would be generic,\nso that a cache can contain only certain types:

\n
const fooCache = new NodeCache<Foo>(options)\n\nconst foo = fooCache.get(cacheKey) //=> Foo | undefined\nfooCache.set(cacheKey, value) // `value` must be of type `Foo`\n
\n

Currently this is not possible;\nGitHub issue #273\nis asking for this.

\n

The issue was created in December 2021,\nand the latest commit to the project was made in November 2021,\nso the issue might never get solved.

\n

I solved it myself by creating a type-safer wrapper around Node-Cache.

\n

Code

\n
// eslint-disable-next-line no-restricted-imports\nimport NodeCache, { Key, Options, ValueSetItem } from 'node-cache'\n\n/**\n * A type-safer wrapper around [Node-Cache](https://github.com/node-cache/node-cache).\n *\n * Via https://mtsknn.fi/blog/type-safer-node-cache/\n *\n * @example\n * const myCache = Cache<MyType>(options)\n * myCache.set('foo', value)\n * myCache.get('foo')\n *\n * @example\n * // Error: Must provide a type parameter\n * const myCache = Cache(options)\n */\nexport function Cache<T = void>(\n  // A fancy way to make the `T` parameter required:\n  // https://stackoverflow.com/a/51173322/1079869\n  options: Options &\n    (T extends void\n      ? 'Error: Must provide a type parameter (`Cache({})` -> `Cache<T>({})`)'\n      : Options)\n) {\n  const cache = new NodeCache(options)\n\n  return {\n    // Type casting required to not lose some methods (e.g. `del`)\n    ...(cache as Required<typeof cache>),\n\n    // Only the generic methods of Node-Cache are overridden\n    get: (key: Key) => cache.get<T>(key),\n    mget: (keys: Key[]) => cache.mget<T>(keys),\n    mset: (keyValueSet: ValueSetItem<T>[]) => cache.mset<T>(keyValueSet),\n    set: (key: Key, value: T, ttl?: number | string) =>\n      cache.set<T>(key, value, ttl as number | string),\n    take: (key: Key) => cache.take<T>(key),\n  }\n}\n
\n

Notes

\n\n

Bonus: ESLint

\n

One more step:\nuse ESLint to prevent importing Node-Cache\nso that everyone will use the type-safer wrapper instead.

\n

There are two built-in ESLint rules for this:

\n\n

Like so:

\n
// .eslintc\n\n{\n  \"rules\": {\n    \"no-restricted-imports\": [\n      \"error\",\n      { \"name\": \"node-cache\", \"message\": \"Import the `Cache` utility instead.\" }\n    ],\n    \"no-restricted-modules\": [\n      \"error\",\n      { \"name\": \"node-cache\", \"message\": \"Import the `Cache` utility instead.\" }\n    ]\n  }\n}\n
\n

Example:

\n
// foo.ts\n\nimport NodeCache from 'node-cache'\n//=> 'node-cache' import is restricted from being used.\n//   Import the `Cache` utility instead.\n//   eslint(no-restricted-imports)\n
\n","summary":"Node-Cache (a JS library) has generic `get` and `set` methods,\nbut it's easy to accidentally misuse them.\nI made a type-safer wrapper around the library.","date_published":"2023-08-22T12:00:00+03:00","date_modified":"2023-08-30T12:00:00+03:00","tags":["ESLint","JavaScript","TypeScript"]},{"id":"https://mtsknn.fi/blog/youtube-transcript-tool/","url":"https://mtsknn.fi/blog/youtube-transcript-tool/","title":"YouTube's \"Show transcript\" tool is great for taking video notes","content_html":"

Incidentally,\nit's also great for searching for certain words in a video.

\n

Click the three dots under a video and then "Show transcript."\nExample screenshot from\nAgile Product Ownership in a Nutshell (15:51) by Henrik Kniberg:

\n

\"Annotated

\n

This tool saves time and effort:\nI don't need to be a human speech-to-text machine;\nI can instead focus on fixing typos and errors in the transcript\nand splitting the text into several paragraphs and bullet points\nto make it easier to read.\nTwo examples:

\n\n

Side note:\nI opened an incognito window to take the screenshot,\nand uhh... YouTube looks so bloated.\nProtip:\nblock the #related element (the "related videos" container on the right) with uBlock Origin\n(or use other tools to debloat YouTube).

\n","summary":"Incidentally,\nit's also great for searching for certain words in a video.","date_published":"2023-06-28T12:00:00+03:00","tags":["Miscellaneous"]},{"id":"https://mtsknn.fi/blog/youtube-still-image-bookmarklet/","url":"https://mtsknn.fi/blog/youtube-still-image-bookmarklet/","title":"Bookmarklet to download still images from YouTube videos","content_html":"

Quick and dirty code to grab a single frame of a YouTube video.\nMight work with other video players too.

\n

The bookmarklet

\n

Drag and drop this to the browser's bookmarks bar:

\n

{ const $video = document.querySelector('video'); const { height, width } = $video.getBoundingClientRect(); const $canvas = document.createElement('canvas'); const ctx = $canvas.getContext('2d'); ctx.canvas.height = height; ctx.canvas.width = width; ctx.drawImage($video, 0, 0, width, height); const $a = document.createElement('a'); $a.download = 'frame.png'; $a.href = $canvas.toDataURL(); $a.click(); })()\">YouTube: Download still image

\n

Usage

\n
    \n
  1. Open a YouTube video
    2. \n
  2. Maximize the browser window and use YouTube's "Theater mode" for a larger result
    3. \n
  3. Pause the video at some point
    4. \n
  4. Run the bookmarklet; it will download a PNG image
    5. \n
\n

Code

\n

Minified

\n\n
javascript:(() => { const $video = document.querySelector('video'); const { height, width } = $video.getBoundingClientRect(); const $canvas = document.createElement('canvas'); const ctx = $canvas.getContext('2d'); ctx.canvas.height = height; ctx.canvas.width = width; ctx.drawImage($video, 0, 0, width, height); const $a = document.createElement('a'); $a.download = 'frame.png'; $a.href = $canvas.toDataURL(); $a.click(); })()\n
\n

Unminified

\n\n
javascript:(() => {\n  const $video = document.querySelector('video');\n  const { height, width } = $video.getBoundingClientRect();\n\n  const $canvas = document.createElement('canvas');\n  const ctx = $canvas.getContext('2d');\n  ctx.canvas.height = height;\n  ctx.canvas.width = width;\n  ctx.drawImage($video, 0, 0, width, height);\n\n  const $a = document.createElement('a');\n  $a.download = 'frame.png';\n  $a.href = $canvas.toDataURL();\n  $a.click();\n})()\n
\n

Next steps

\n

Your needs may be different from mine,\nbut here's what I usually do:

\n
    \n
  1. Resize the image using Mac's Preview app
    2. \n
  2. Compress the image with TinyPNG
    3. \n
  3. Use the image in a blog post
    4. \n
\n

The end result might have poor quality, but that's all right.\nI use this only for getting still images for video notes.

\n

For an example,\ncheck out yesterday's post,\nLegacy code is code written by other people.\nLooks good enough for me.

\n

Acknowledgements

\n

I googled for "js video get frame screenshot."\nThe first result was "Capture frames from video with HTML5 and JavaScript" question on Stack Overflow\nwhich gave me a good starting point.

\n","summary":"Quick and dirty code to grab a single frame of a YouTube video.\nMight work with other video players too.","date_published":"2023-06-27T12:00:00+03:00","tags":["Bookmarklets","JavaScript"]},{"id":"https://mtsknn.fi/blog/legacy-code/","url":"https://mtsknn.fi/blog/legacy-code/","title":"Legacy code is code written by other people","content_html":"

Legacy code means unfamiliar code.\nLegacy code has much more to do with unfamiliarity\nthan the quality of the code itself.

\n

From the Prioritizing Technical Debt as If Time & Money Matters talk by Adam Tornhill (28:42),\nfrom 19:53–22:14:

\n
\n

Legacy code is related to technical debt,\nbut the two are not the same.

\n

So what is legacy code?

\n

There are many definitions out there.\nThe definition I prefer is that:

\n\n

Right.

\n

And that second part is really important,\nso let me share a story with you.\nThis is something that happened to me five years ago,\nand I've met it several times since then.

\n

What happened here was that I was visiting our client.\nI did a workshop for one of their teams.\nWe did a hotspot analysis of their code bases.\nAnd they had two code bases.\nSo we analyzed them.\nWe talked about them,\ndiscussed how we could address the findings.

\n

And then, after a while,

\n\n

So we did.\nAnd we looked at the hot spot[s],\nwe looked at the code health metrics,\ncyclomatic complexity,\nall that stuff...

\n

And guess what?\nObjectively there was absolutely no difference in code quality between the first two code bases and the third one.

\n

And you know, when you bring up something like that,\neveryone starts to question it,\nthat "Hey, maybe the tool is measuring the wrong thing;\nmaybe you are measuring the wrong thing."\nRight?

\n

So we had to spend a lot of time actually comparing code samples,\nand after a while everyone was fairly convinced –\neven though they didn't like it –\nthat code base number three was indeed in no worse shape than the other two.

\n

So why did everyone think that it was such a mess?

\n

The reason of course was that\ncode base number three turned out to be developed in a different part of the organization,\nin a team that has since been disbanded.\nAnd this team had simply inherited that code base,\nmeaning they were now responsible for a piece of code\nthat they didn't write themselves.\nThey didn't understand the problem domain,\nand they didn't understand the solution.

\n

So [legacy code] has much more to do with unfamiliarity\nthan any properties of the code itself.

\n
\n

Makes sense!\nLow-quality code can be okay to work with if it's familiar enough.\nOn the other hand,\nunfamiliar code can feel smelly and intimidating at first,\neven if it turns out to be of high quality.

\n

When someone leaves a team or an organization,\nthey leave behind legacy code\n(read: code that is unfamiliar to others),\nunless someone else happens to be familiar with all the current code authored by the leaving person.

\n

\"A

\n","summary":"Legacy code means unfamiliar code.\nLegacy code has much more to do with unfamiliarity\nthan the quality of the code itself.","date_published":"2023-06-26T12:00:00+03:00","tags":["Miscellaneous"]},{"id":"https://mtsknn.fi/blog/date-objects-vs-date-strings/","url":"https://mtsknn.fi/blog/date-objects-vs-date-strings/","title":"`Date` objects are nicer to work with than date strings","content_html":"

When parsing data,\ndate strings should likely be converted to Date objects.\nBut beware mutations.

\n

Intended audience / Applicable languages

\n

This post is for you if you are dealing with date strings.

\n

This post uses JavaScript and TypeScript,\nbut the main ideas are likely quite language-agnostic.

\n

Context

\n

Let's say some data from e.g. an API or database contains a date string in ISO format:

\n
const data = {\n  createdOn: '2023-06-25T01:23:45Z',\n  // ...\n}\n
\n

When validating/parsing the data,\nthe date string could at the same time be transformed to a Date object.\n(See Parsing data is nicer than only validating it.)

\n

Example using Zod, a TypeScript validation library:

\n
import { z } from 'zod'\n\nconst Schema = z.object({\n  createdOn: z.string().datetime().pipe(z.coerce.date()),\n  // ...\n})\n\nconst result = Schema.parse(data)\n//    ^? { createdOn: Date; ... }\n
\n

Why Date objects are better

\n

Semantically correct

\n

A date string is not a date;\nit's a serialized format of a date.

\n

When parsing data,\nit's semantically correct to convert/deserialize date strings to Date objects.

\n

(Not sure if "semantically correct" is the correct term here,\nbut anyway.)

\n

Convert only once

\n

If you convert a date string to a Date object right after receiving the data,\nyou need to do the conversion only once.

\n

This avoids shotgun parsing,\nor repeating and scattering date parsing here and there.\n(More about shotgun parsing in Parsing data is nicer than only validating it.)

\n

toLocaleString() et al.

\n

If you have a Date object,\nyou can directly use\nDate.prototype.toLocaleString()\nand other Date methods.

\n

If you have a date string,\nyou first need to convert the string to a Date object –\nevery time you want to use toLocaleString() (shotgun parsing).

\n

Even if you have wrapper functions for formatting dates (probably a good thing),\nyou could make the functions take a Date argument\ninstead of a Date | string argument (simplicity).

\n

date-fns et al.

\n

date-fns is a JavaScript date utility library.

\n

Most date-fns functions take Date arguments, not date string arguments,\nso you can do e.g. just startOfWeek(date)\ninstead of startOfWeek(parseISO(dateString)) (shotgun parsing, again).

\n

Beware mutations

\n

One drawback is that Date objects are mutable.\nAccidental mutations can lead to hard-to-track bugs;\ndeliberate mutations can lead to hard-to-reason code.

\n

This might be not such a big issue if the object is not otherwise guarded;\nobj.createdOn.setFullYear(2000) might not be much worse than any of these:

\n\n

Anyhow,\nthere are a few ways to avoid Date mutations\n(these are not specific to Zod):

\n

Use a function

\n

Instead of obj.createdOn, make it a function obj.getCreatedOn() that creates a new Date object every time:

\n
const obj = {\n  getCreatedOn: () => new Date('2023-06-25T01:23:45Z'),\n}\n\nconst a = obj.getCreatedOn()\nconst b = obj.getCreatedOn()\n\na === b //=> false\n
\n

Good:\nIf you mutate the Date object returned by obj.getCreatedOn(),\nthe mutation affects only the freshly-created Date object.\nThat's better than the mutation affecting who knows how many places.

\n

Bad:\nSome object properties are now functions and some are not,\nmaking the object asymmetrical (obj.name vs obj.getCreatedOn()).

\n

Use a getter property

\n

Very similar to above,\nbut make obj.createdOn a getter property instead:

\n
const obj = {\n  get createdOn() {\n    return new Date('2023-06-25T01:23:45Z')\n  },\n}\n\nconst a = obj.createdOn\nconst b = obj.createdOn\n\na === b //=> false\n
\n

Good:\nSame as above + now the object is more symmetrical (obj.name vs obj.createdOn).

\n

Bad:\nI don't like getters and setters because they are not transparent;\nthey look like normal object properties, but they are not.

\n

Use TypeScript

\n

TypeScript doesn't have a built-in type for read-only Dates,\nbut such a type can be easily created:

\n
type ReadonlyDate = Readonly<\n  Omit<\n    Date,\n    | 'setDate'\n    | 'setFullYear'\n    | 'setHours'\n    | 'setMilliseconds'\n    | 'setMinutes'\n    | 'setMonth'\n    | 'setSeconds'\n    | 'setTime'\n    | 'setUTCDate'\n    | 'setUTCFullYear'\n    | 'setUTCHours'\n    | 'setUTCMilliseconds'\n    | 'setUTCMinutes'\n    | 'setUTCMonth'\n    | 'setUTCSeconds'\n  >\n>\n
\n

(Credit: Daniel Nixon;\nthe type is from date-fns GitHub issue Suggestion: use a readonly Date type in TypeScript.\nAlso, using Readonly<...> is probably unnecessary here.)

\n

Good:\nLeverages the type system;\ndoesn't affect runtime.

\n

Bad:\nE.g. date-fns functions don't accept ReadonlyDate arguments:

\n
\n

Argument of type ReadonlyDate is not assignable to parameter of type number | Date.

\n
\n

Type ReadonlyDate is missing the following properties from type Date: setTime, setMilliseconds, setUTCMilliseconds, setSeconds, and 11 more.

\n
\n
\n

Use ESLint

\n

Date mutations could be theoretically banned with ESLint.

\n

eslint-plugin-better-dates does this,\nbut the plugin looks outdated.\nIt would probably be quite easy to create a similar plugin from scratch.

\n

Good:\nSounds like a job suitable for ESLint.

\n

Bad:\nThe plugin looks outdated.

\n

Using ESLint might be my choice to avoid Date mutations.

\n

Summary

\n\n","summary":"When parsing data,\ndate strings should likely be converted to `Date` objects.\nBut beware mutations.","date_published":"2023-06-25T12:00:00+03:00","tags":["JavaScript","TypeScript","Zod"]},{"id":"https://mtsknn.fi/blog/harry-potter/","url":"https://mtsknn.fi/blog/harry-potter/","title":"I read all 7 seven Harry Potter books in 33 days","content_html":"

I don't know if I have ever read so much in so short time.\nI just liked the books so much.

\n

Pages per day

\n

Here's a table of my reading progress for my own amusement\n(books published by Bloomsbury, 2014 editions):

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
BookPagesDaysAverage pages per day
1st332566
2nd360490
3rd4624116
4th6175123
5th8006133
6th542690
7th6205124
Total3,73333113
\n

There were 33 total days instead of 35\nbecause I started the 4th and 6th books\non the same day as I finished the previous book.

\n

Lines per page

\n

The 4th book's text felt smaller\nthan the first three books' text,\nso I had to check:

\n
    \n
  1. 28 lines per page
    2. \n
  2. 28
    3. \n
  3. 28
    4. \n
  4. 33
    5. \n
  5. 34 (!)
    6. \n
  6. 33
    7. \n
  7. 33
    8. \n
\n

So my "pages per day" comparison table is flawed, meh.

\n

Fun fact: the 5th book is the longest (800 pages),\nbut it also has the most lines per page,\nso it's really a thick book.

\n

Thoughts and spoilers

\n

🚨 Spoilers below.

\n

Easy English, weird words

\n

The books were easy to read,\nbut there were also many weird words;\nshows that Rowling's favorite school subject was English\n(it was mentioned at the end of one of the books).

\n

Some new-for-me words that I still remember\n(these are far from the weirdest words though):

\n\n

Consistent point of view

\n

Everything revolves around Harry.\nIf something happens or has happened elsewhere,\nit's explained from Harry's point of view;\ne.g. Harry has visions,\nor someone retells a story for Harry.

\n

So, the point of view is always consistent,\nwhich makes the books feel coherent.

\n

I noticed that the last two books break this rule a bit;\nthey have non-Harry points of view in the first chapter(s).\n(I checked and the 1st and 4th books start from different points of view too.)

\n

Biggest plot weakness

\n

Some wizards and witches are totally isolated from the rest of the world (from the Muggle world).\nFeels silly.

\n

Most boring scene

\n

The 4th book (the Goblet of Fire, the one with the Quidditch World Cup)\nhas long descriptions of various kinds of tents.\nSo boring to read about fancy tents!

\n

Most anxiety-inducing scene

\n

When Harry, Ron and Hermione impersonated Ministry of Magic employees\nand infiltrated the Ministry of Magic,\nmy heart was pounding hard,\nand not in a good way.\nI don't know why.\nI guess I was afraid that they were exposed,\nbut I don't know why it was so uncomfortable.

\n

The robbing of Gringotts Wizarding Bank was a similar scene\nand also anxiety-inducing, but not as bad.\nPossibly because I had already endured the Ministry of Magic scene.

\n

Both scenes are from the 7th book (the Deathly Hallows).

\n

Silly things

\n\n

My favorite character

\n

Dumbledore because he had so wise things to say.

\n

My buddy Oskari made an interesting general point:\na great discussion in a book can be very short,\nbut it's possible that the author has worked on the lines for a long time (several days or even weeks).

\n

Best girl

\n

I was rooting for Harry and Cho Chang;\na shame it didn't work out.

\n

I guess Ginny was OK too in the end.\nProps for her for the funniest joke:

\n

Funniest joke

\n

The Weasley twins were often funny,\nbut the single funniest joke was\nin the 6th book (the Half-Blood Prince), chapter 25:

\n
\n

The fact that Harry Potter was going out with Ginny Weasley seemed to interest a great number of people, most of them girls, yet Harry found himself newly and happily impervious to gossip over the next few weeks. After all, it made a very nice change to be talked about because of something that was making him happier than he could remember being for a very long time, rather than because he had been involved in horrific scenes of Dark Magic.

\n

'You'd think people had better things to gossip about,' said Ginny, as she sat on the common-room floor, leaning against Harry's legs and reading the Daily Prophet. 'Three Dementor attacks in a week, and all Romilda Vane does is ask me if it's true you've got a Hippogriff tattooed across your chest.'

\n

Ron and Hermione both roared with laughter. Harry ignored them.

\n

'What did you tell her?'

\n

'I told her it's a Hungarian Horntail,' said Ginny, turning a page of the newspaper idly. 'Much more macho.'

\n

'Thanks,' said Harry, grinning. 'And what did you tell her Ron's got?'

\n

'A Pygmy Puff, but I didn't say where.'

\n

Ron scowled as Hermione rolled around laughing.

\n
\n

Sweetest thing

\n

Also from the 6th book, chapter 5:

\n
\n

With a sudden exclamation she pointed at the clock's face. Mr Weasley's hand had switched to travelling.

\n

'He's coming!'

\n

And sure enough, a moment later there was a knock on the back door. Mrs Weasley jumped up and hurried to it; with one hand on the doorknob and her face pressed against the wood she called softly, 'Arthur, is that you?'

\n

'Yes,' came Mr Weasley's weary voice. 'But I would say that even if I were a Death Eater, dear. Ask the question!'

\n

'Oh, honestly …'

\n

'Molly!'

\n

'All right, all right … what is your dearest ambition?'

\n

'To find out how aeroplanes stay up.'

\n

Mrs Weasley nodded and turned the doorknob, but apparently Mr Weasley was holding tight to it on the other side, because the door remained firmly shut.

\n

'Molly! I've got to ask you your question first!'

\n

'Arthur, really, this is just silly …'

\n

'What do you like me to call you when we're alone together?'

\n

Even by the dim light of the lantern Harry could tell that Mrs Weasley had turned bright red; he himself felt suddenly warm around the ears and neck, and hastily gulped soup, clattering his spoon as loudly as he could against the bowl.

\n

'Mollywobbles,' whispered a mortified Mrs Weasley into the crack at the edge of the door.

\n

'Correct,' said Mr Weasley. 'Now you can let me in.'

\n
\n

What's next?

\n

Now that I have read the books,\nI'm going to watch the Harry Potter movies.\nI have never watched them,\nexcept maybe the first one in elementary school.

\n

I'm also going to continue this new hobby of reading non-fiction books.\nNo idea about the next books yet though.

\n","summary":"I don't know if I have ever read so much in so short time.\nI just liked the books so much.","date_published":"2023-06-14T12:00:00+03:00","tags":["Books"]},{"id":"https://mtsknn.fi/blog/parse-dont-just-validate/","url":"https://mtsknn.fi/blog/parse-dont-just-validate/","title":"Parsing data is nicer than only validating it","content_html":"

Parsing encompasses validation,\nplus it can increase type-safety,\nplus it can transform the data to a better format.\nParse, don't just validate.

\n

Validation

\n

Validating data means checking if the data matches a certain shape or certain rules.

\n

For example,\nwhen using Joi, a JavaScript validation library,\nyou write a schema and check if some data matches the schema:

\n
import Joi from 'joi'\n\nconst userSchema = Joi.object({\n  createdOn: Joi.string().required().isoDate(),\n  userName: Joi.string().required().min(2),\n  userType: Joi.number().required().integer().min(1).max(3),\n})\n\nconst response = await fetch('https://example.com/api/users/123')\nconst data: unknown = await response.json()\n\nconst validationResult = userSchema.validate(data)\n\nif (validationResult.error) {\n  console.error(validationResult.error)\n} else {\n  const user = validationResult.value\n  //    ^? any\n}\n
\n

Validation is essentially a binary check:\nthe data either is valid or it isn't.

\n

Well, you do get descriptive validation error messages when using Joi.

\n

But if the validation passes,\nyou are none the wiser about the validated data,\nat least in terms of type-safety:\nthe original data variable has still type unknown,\nand validationResult.value has type any.

\n

While validating data is certainly useful,\nthe result can be made more useful by parsing the data instead of only validating it.

\n

Parsing

\n

Parsing means processing some input\nand converting it to a more precise output.

\n

Parsing does validation plus more:\nparsing = validating data + increasing type-safety + transforming data.

\n

Parsing encompasses validation

\n

Validation is a more-or-less implicit step of parsing:\nif the input data isn't valid (from the parser's perspective),\nthe parsing can fail.

\n

Examples:

\n\n

Parsing can increase type-safety

\n

In the Joi example above,\nJoi could in theory be able to know the result type.

\n

For example,\nif an object schema contains a property with the value of Joi.string(),\nJoi could infer the type of that property to be string | undefined.[1]

\n

But Joi doesn't do that.\nIt throws away the potential type knowledge acquired during validation.

\n

Example: Joi vs Zod

\n

One alternative to Joi is\nZod, a TypeScript validation library.

\n

On the surface,\nZod is used similarly to Joi,\nbut the critical difference is that Zod can infer the return type of the schema:

\n
-import Joi from 'joi'\n-\n-const userSchema = Joi.object({\n-  createdOn: Joi.string().required().isoDate(),\n-  userName: Joi.string().required().min(2),\n-  userType: Joi.number().required().integer().min(1).max(3),\n-})\n\n+import { z } from 'zod'\n+\n+const userSchema = z.object({\n+  createdOn: z.string().datetime(),\n+  userName: z.string().min(2),\n+  userType: z.number().int().min(1).max(3),\n+})\n+type User = z.infer<typeof userSchema>\n+//   ^? {\n+//        createdOn: string\n+//        userName: string\n+//        userType: number\n+//      }\n\n const response = await fetch('https://example.com/api/users/123')\n const data: unknown = await response.json()\n\n-const validationResult = userSchema.validate(data)\n-\n-if (validationResult.error) {\n-  console.error(validationResult.error)\n-} else {\n-  const user = validationResult.value\n-  //    ^? any\n-}\n\n+const parsingResult = userSchema.safeParse(data)\n+\n+if (parsingResult.success) {\n+  const user = parsingResult.data\n+  //    ^? User\n+} else {\n+  console.error(parsingResult.error)\n+}\n
\n

The user variable, which is the result of successful parsing,\nhas now type User, which is inferred from the Zod schema.

\n

What about JSON.parse?

\n

I used JSON.parse as an example above\nwhen talking about the validation step of parsing.\nBut hmm, why doesn't JSON.parse increase any type-safety...?

\n

Maybe JSON.parse should be thought of as a very high-level parser.\nThe TypeScript compiler can't have visibility on things happening at runtime,\nlike what's passed to JSON.parse.\nIf you want type-safety,\nyou need to be more specific what you ask for,\ne.g. by using a type-aware runtime parser like Zod.

\n

Parsing can transform data

\n

So far I have talked only about validation and type-safety.\nWhat really separates parsing from validation (type-safe or not) is data transformations\n(or "data mapping" or "data reserialization").

\n

Transforming data means modifying the data to a better format.\nNot by mutating the input data[2],\nbut by returning a different shape than what was passed to the parser.

\n

What a "better format" means is up to you.\nFor example, you can:

\n\n

The point is to modify the data so that it looks like you'd want it to look.

\n

It's not fun to work with messy data,\nbut if you transform the data to a nicer format right after receiving it:

\n\n

Example: userSchema

\n

In the Joi vs Zod example above,\nuserSchema and the inferred type look like this:

\n
import { z } from 'zod'\n\nconst userSchema = z.object({\n  createdOn: z.string().datetime(),\n  userName: z.string().min(2),\n  userType: z.number().int().min(1).max(3),\n})\ntype User = z.infer<typeof userSchema>\n//   ^? {\n//        createdOn: string\n//        userName: string\n//        userType: number\n//      }\n
\n

The User type is quite messy.\nIf the data is coming from an external API,\nthe data itself can't be changed...\nbut the parsed data can be improved by:

\n\n

Like so:

\n
type User = {\n  createdOn: Date\n  role: 'admin' | 'moderator' | 'user'\n  username: string\n}\n\nfunction parseUser(data: unknown): User | ParseError {\n  // Validate and transform `data`\n}\n
\n

How you transform the data is an implementation detail.\nZod has means for transforming data (another blog post coming later);\nyou could also transform the data manually.

\n

Fuzzy terminology

\n

What is parsing?\nWhat is validation?

\n

Above I said that\nparsing = validating data + increasing type-safety + transforming data.\nThis is based on other sources (see further resources below).

\n

If the data is not transformed,\nI guess it could still be called just validation;\nbe it "type-ignorant" validation (think of Joi)\nor type-aware validation (think of Zod).

\n

In fact,\nJoi and Zod are both called validation libraries\neven though they also support data transformations.\nBut that's also a bit confusing.

\n

Practical guidelines

\n\n

Further resources

\n

My other blog posts on this topic:

\n\n

More coming later; I like this topic.

\n

Main inspiration

\n

This blog post is largely inspired by the\nParse, don't validate blog post by Alexis King.\nHer post has examples in Haskell,\nwhich I'm not familiar with,\nbut the post was still easy to read.

\n

These snippets resonated with me the most:

\n\n

After reading Alexis King's blog post,\nI wasn't sure of the relationship between parsing and validation.\nThese Hacker News (HN) comments were helpful in realizing that\n"parse, don't validate" doesn't mean "parse data instead of validating it";\nit means "parse data instead of only validating it":

\n\n

Other sources

\n

Other helpful things I have stumbled upon,\nwith a few grammatical fixes:

\n\n

Changelog

\n\n\n
\n
\n

\n Footnotes\n

\n
    \n

  1. The corresponding type of Joi.string() would be string | undefined,\nbecause in Joi, all values are optional by default.\nI find it a bit confusing.\nThe type of Joi.string().required() would be string. ↩

    \n
    2. \n

  2. I wonder if there's ever a good reason for a parser to mutate the input data. ↩

    \n
    3. \n
\n
\n","summary":"Parsing encompasses validation,\nplus it can increase type-safety,\nplus it can transform the data to a better format.\nParse, don't just validate.","date_published":"2023-06-13T12:00:00+03:00","date_modified":"2023-06-25T12:00:00+03:00","tags":["JavaScript","Joi","TypeScript","Zod"]},{"id":"https://mtsknn.fi/blog/epub-to-azw3/","url":"https://mtsknn.fi/blog/epub-to-azw3/","title":"Auto-converting EPUB files to AZW3 instead of MOBI in Calibre","content_html":"

MOBI is an old e-book format.\nAZW3 is a newer and apparently better format;\nfor instance, it supports embedded fonts.\nHere's how to configure Calibre to prefer the better format.

\n\n","summary":"MOBI is an old e-book format.\nAZW3 is a newer and apparently better format;\nfor instance, it supports embedded fonts.\nHere's how to configure Calibre to prefer the better format.","date_published":"2023-04-29T12:00:00+03:00","tags":["Books"]},{"id":"https://mtsknn.fi/blog/bye-acsm-and-drm/","url":"https://mtsknn.fi/blog/bye-acsm-and-drm/","title":"De-ACSM'ing and de-DRM'ing e-books for fun (but not profit)","content_html":"

A reminder for myself how to make library e-books pleasant to use\nwith the help of Calibre and two Calibre plugins.

\n

Problem

\n

My local library provides many e-books for free, which is great,\nbut actually getting those e-books to my Kindle Paperwhite is a hassle:

\n
    \n
  1. Download an EPUB file (so the button says on the library site)\n– whoops, it's actually an ACSM file.
    2. \n
  2. Download Adobe Digital Editions (ADE) software to open the ACSM file\n– whoops, ADE requires an Adobe account.
    3. \n
  3. Create an Adobe account.
    4. \n
  4. Get an EPUB file from ADE.
    5. \n
  5. Upload the EPUB file to Kindle Paperwhite\n– whoops, Kindle doesn't support EPUB files.
    6. \n
  6. Convert the EPUB file to a Kindle-supported format (e.g. MOBI)\n– whoops, the EPUB file is DRM-protected so it's not that simple.
    7. \n
  7. Remove the DRM protection by using a shady website,\nprobably risking leaking your personal info (likely stored in the DRM-protected EPUB file).
    8. \n
  8. Finally upload the DRM-free, Kindle-compatible file to Kindle.
    9. \n
\n

I don't actually know the exact process\nbecause I have never done it the "official way."\nJust too complicated, too much work, too annoying.

\n

Solution

\n

Initial setup

\n

Needs to be done only once.

\n
    \n
  1. Download and install Calibre (e-book management software).
    2. \n
  2. Download and install DeDRM_tools plugin for Calibre.\n\n
    3. \n
  3. Download, install and configure ACSM Input plugin for Calibre.\n\n
    4. \n
  4. (Optional: Configure Calibre to auto-convert EPUB files to AZW3 instead of MOBI.)
    5. \n
\n

E-book to Kindle

\n
    \n
  1. Download an ACSM file from library site.
    2. \n
  2. Drag-and-drop the ACSM file to Calibre.
    3. \n
  3. Plug in Kindle to computer (via USB).
    4. \n
  4. Select the book in Calibre and click "Send to device."
    5. \n
  5. Eject Kindle.
    6. \n
  6. Go read and enjoy the book!
    7. \n
\n

All steps except the 2nd one are fluff,\nso this is actually a one-step process\n(just drag-and-drop to Calibre).\nNice and easy.

\n","summary":"A reminder for myself how to make library e-books pleasant to use\nwith the help of Calibre and two Calibre plugins.","date_published":"2023-04-28T12:00:00+03:00","date_modified":"2023-04-29T12:00:00+03:00","tags":["Books"]},{"id":"https://mtsknn.fi/blog/tricky-email-aliases/","url":"https://mtsknn.fi/blog/tricky-email-aliases/","title":"Sending (duplicate) emails to email aliases can be tricky","content_html":"

If you send a single email to a bunch of email addresses,\nand some of the addresses are aliases,\ni.e. they point to the same email inbox,\nchances are high that only one copy of the email is delivered to that inbox.

\n

Example problem

\n
    \n
  1. I had five test users and one email alias per test user; e.g.:\n\n
    2. \n
  2. I sent a single email to those five addresses.
    3. \n
  3. I expected to receive five copies of the email to my email inbox, but I received only one copy.\n\n
    4. \n
\n

Test users vs real users

\n

In my case the users were test users,\nmaking testing email delivery difficult\nbecause only some test users received the emails.

\n

But the problem would affect real users too.\nExample:

\n\n

Tangent: SendGrid

\n

I used the sendMultiple() method of the SendGrid Node.js API,\nbut that's tangential:

\n\n

Still, I wanted to mention this because at first I thought that the problem was in SendGrid.

\n

SendGrid's Activity Feed displayed the "Delivered" status for all emails,\nmeaning that the receiving mail servers had successfully received the emails.\nIndeed, the problem wasn't that SendGrid failed to send all the emails (it didn't fail);\nthe problem was that the receiving mail servers failed to deliver the duplicate emails to the inboxes.

\n

The root cause: identical Message-Ids

\n\n

Solution

\n

The solution is to send the emails sequentially (one at a time), e.g. at 1-second intervals.

\n

One way would be to make one API request per recipient,\nbut that would be slow and inefficient because there would be as many API requests as recipients.\n(Then each email would probably have unique Message-Id,\nwhich alone would fix the problem.)

\n

Eventually I found a better way (I'm using SendGrid as mentioned above):\nspecifying different sendAt values for each recipient\nmakes SendGrid send the emails at different times,\nbut allows making as few API requests as possible.

\n

Curiously, the Message-Id is still the same in every email,\nbut this still fixes the problem!\nThat's because the emails don't arrive simultaneously.\nIn other words (this is the precondition mentioned above):

\n

Most mail servers seem to not discard duplicate emails (based on Message-Id) if the emails arrive at different times (not simultaneously).

\n

I have successfully tested this with:

\n\n

Fastmail Support confirmed this for their part:

\n
\n

So it seems we ignore duplicate emails delivered in a very short period (e.g. within a second).\nThese emails were delivered within a second apart which is why they were not filtered as duplicates.\nThis is expected behavior.

\n
\n

Code

\n

Using SendGrid:

\n
const emails = [\n  'foo@example.com',\n  'foo+test-user-2@example.com',\n  'foo+test-user-3@example.com',\n  'custom-alias-1@example.com',\n  'custom-alias-2@example.com',\n]\n\n// SendGrid expects a UNIX timestamp in seconds\nconst currentTimeInMilliSeconds = Date.now()\nconst currentTimeInSeconds = Math.ceil(currentTimeInMilliSeconds / 1000)\n\nsendGrid.sendMultiple({\n  personalizations: emails.map((email, index) => {\n    // Send the emails at 1-second intervals\n    // to ensure that delivery to email aliases works too.\n    // Mail servers silently discard duplicate emails\n    // that arrive to the same inbox at the same time,\n    // so multiple emails going to the same email inbox (via email aliases)\n    // need to be sent at different times.\n    // Also add a few seconds just to be safe,\n    // i.e. to avoid sending the first few emails simultaneously.\n    // More info: https://mtsknn.fi/blog/tricky-email-aliases/\n    const sendAt = currentTimeInSeconds + index + 5\n\n    return {\n      to: email,\n      sendAt,\n    }\n  }),\n  subject: 'Test email',\n  html: '<p>Email body</p>',\n})\n
\n

Caveat

\n

This fix/hack will make some recipients receive the email after a small delay.

\n

If you have 1,000 recipients and send the emails at 1-second intervals,\nthe last recipient will receive the email after about 1,000 seconds ≈ 17 minutes.\nIn my case that's totally OK.

\n

If that's too long,\nyou could send the emails in smaller batches.

\n

The maximum is anyway 1,000 recipients per one SendGrid API request.\nFrom SendGrid's Personalizations page:

\n
\n

You may not include more than 1000 personalizations per API request.\nIf you need to include more than 1000 personalizations, please divide these across multiple API requests.

\n
\n

Tangent: −24 hours

\n

I stated two things above:

\n\n

As a test,\nI scheduled the emails to be sent at 1-second intervals like before,\nbut also 24 hours in the past.\nLike this:

\n


   sendGrid.sendMultiple({\n  personalizations: emails.map((email, index) => {\n    // ⚠️ Example, don't actually do this\n    const twentyFourHoursInSeconds = 60 * 60 * 24\n    const sendAt = currentTimeInSeconds + index - twentyFourHoursInSeconds\n\n    return {\n      sendAt,\n      to: email,\n    }\n  }),\n  // ...\n})\n
\n

I successfully received all emails – confusing!

\n

I asked about this from Fastmail Support:

\n
\n

The timestamps in the Date headers are a second apart like expected;\nbut the timestamps in the Received headers are exactly the same.

\n

Doesn't this mean that SendGrid sent the five emails at the same time?\nI would expect SendGrid to do that because the Date headers were 24 hours in the past,\nbut I can't know for sure.

\n

And don't the identical Received timestamps also mean that\nyou received all emails at the same time?

\n
\n

Their reply:

\n
\n

It's based on the received time at our end.\nLooking at the logs I can see that these emails came in almost within a second.

\n\n

So, they were not discarded as duplicates.

\n
\n

So, SendGrid sent the emails at slightly different times\neven though they were scheduled to be sent 24 hours ago.\nOr at least Fastmail received them at slightly different times.

\n

I wouldn't rely on this behavior,\nso I don't recommend this approach (scheduling the emails to be sent in the past),\nbut this is interesting to know nonetheless.

\n

Non-solutions

\n

I tried these two things that didn't work:

\n\n

Rant: SendGrid Support was meh

\n

SendGrid Support couldn't help me solve this problem.

\n

That's kind of okay because this is quite an obscure thing and not specific to SendGrid;\non the other hand, I'd expect an email delivery service provider to have great knowledge about even the most obscure things related to delivering emails.

\n

What's worse is that\none of their "Senior Technical Support Engineers" even said something factually incorrect:

\n
\n

I believe the root of the issue here is that multiple recipients require multiple requests, unless you're including them as CC or BCC.\nAt some point in 2021, our system began no longer accepting multiple "TO" recipients within one request.\nWhereas previously, you could have 1 request with multiple recipients listed in the TO portion.\nNow, to send 1 email to 10 recipients individually, this requires 10 individual requests.

\n

I suggest that you and your team look into adjusting your system's workflow so that such situations result in multiple requests, rather than using "sendmultiple" within 1 request.

\n
\n

I don't understand that reply\nas it's simply false that you can't send an email to multiple recipients with a single request.

\n

The SendGrid docs have a section\nSending the same email to multiple recipients.\nAt the top of the page,\nit's mentioned that you can send an email to max 1,000 recipients with a single request.\nThat's much better and faster than doing 1,000 individual requests.

\n

Plus I had already succeeded at sending an email to multiple recipients with a single request;\nI was just having problems with email aliases / duplicate emails.

\n

Praise: Fastmail Support is great

\n

Fastmail Support was very helpful in helping me solve and understand the problem.

\n

They have been helpful in the past too,\nwhen I have had email problems.

\n","summary":"If you send a single email to a bunch of email addresses,\nand some of the addresses are aliases,\ni.e. they point to the same email inbox,\nchances are high that only one copy of the email is delivered to that inbox.","date_published":"2023-04-21T12:00:00+03:00","tags":["JavaScript","SendGrid"]},{"id":"https://mtsknn.fi/blog/mirror-of-erised/","url":"https://mtsknn.fi/blog/mirror-of-erised/","title":"Harry Potter, the Mirror of Erised, and mindless internet surfing","content_html":"

Mindlessly surfing the internet\nis like staring at the Mirror of Erised from the Harry Potter books.\n(Minor Harry Potter spoilers ahead.)

\n

Mindless surfing vs the Mirror of Erised

\n

My bro shared me a Reddit post on /r/nosurf the other day.

\n

Here's the full post (with a few typos fixed):

\n
\n

Mindless surfing is like the Mirror of Erised in Harry Potter

\n

For those of you who haven't read Harry Potter,\nthe Mirror of Erised is a mirror which shows the deepest desires of a person.\nIn the story, Harry finds the mirror and sees his parents in it.\nHe keeps returning every day until Dumbledore gently tells him to stop doing so.

\n
\n

This mirror will give us neither knowledge or truth.\nMen have wasted away before it, entranced by what they have seen, or been driven mad, not knowing if what it shows is real or even possible.\nIt does not do well to dwell on dreams and forget to live.

\n
\n

This is a great parallel to mindless internet surfing.\nWe watch our deepest desires on the internet like being rich, falling in love, living a certain lifestyle or even being in another country.\nI've spent a lot of time browsing nice apartment pics, vlogs, or even street view of nice cities where I wanna live, not because of curiosity or exploration but because of a desire to see my dream.\nThis is actually preventing me from living fully and actually working to achieve my dreams in the first place.

\n

I just found it interesting how similar the two of these are.

\n
\n

Longer Harry Potter quote

\n

I recently started reading the Harry Potter books for the first time.

\n

The first book,\nHarry Potter and the Philosopher's Stone,\nhas 332 pages (Bloomsbury, 2014 edition),\nbut I read it in just 5 days.\nIt was that good!

\n

The first book also introduces the Mirror of Erised.\nFrom pages 229–230:

\n
\n

'Let me explain.\nThe happiest man on earth would be able to use the Mirror of Erised like a normal mirror,\nthat is, he would look into it and see himself exactly as he is.\nDoes that help?'

\n

Harry thought.\nThen he said slowly,\n'It shows us what we want … whatever we want …'

\n

'Yes and no', said Dumbledore quietly.\n'It shows us nothing more or less than the deepest, most desperate desire of our hearts.\nYou, who have never known your family, see them standing around you.\nRonald Weasley, who has always been overshadowed by his brothers, sees himself standing alone, the best of all of them.\nHowever, this mirror will give us neither knowledge or truth.\nMen have wasted away before it, entranced by what they have seen, or been driven mad, not knowing if what it shows is real or even possible.

\n

'The Mirror will be moved to a new home tomorrow, Harry, and I ask you not to go looking for it again.\nIf you ever do run across it, you will now be prepared.\nIt does not do to dwell on dreams and forget to live, remember that.\nNow, why don't you put that admirable Cloak back on and get off to bed?'

\n

Harry stood up.

\n

'Sir – Professor Dumbledore? Can I ask you something?'

\n

'Obviously, you've just done so,' Dumbledore smiled. 'You may ask me one more thing, however.'

\n

'What do you see when you look in the Mirror?'

\n

'I? I see myself holding a pair of thick, woollen socks.'

\n

Harry stared.

\n

'One can never have enough socks,' said Dumbledore.\n'Another Christmas has come and gone and I didn't get a single pair.\nPeople will insist on giving me books.'

\n

It was only when he was back in bed that it struck Harry that Dumbledore might not have been quite truthful.\nBut then, he thought, as he shoved Scabbers off his pillow, it had been quite a personal question.

\n
\n","summary":"Mindlessly surfing the internet\nis like staring at the Mirror of Erised from the Harry Potter books.\n(Minor Harry Potter spoilers ahead.)","date_published":"2023-04-14T12:00:00+03:00","tags":["Books","NoSurf"]},{"id":"https://mtsknn.fi/blog/agile-process-visualized/","url":"https://mtsknn.fi/blog/agile-process-visualized/","title":"Video notes: Agile Product Ownership in a Nutshell","content_html":"

This 16-minute video by Henrik Kniberg\nis a great overview of the agile software development process,\nbut also contains lots of smaller great insights.

\n

The video

\n

Watch Agile Product Ownership in a Nutshell (15:51) on YouTube.

\n

I found the video\nvia Critter's blog post Pull methodology, flow time, and WIP limits: visualized.

\n

Top 3 moments

\n

The 16-minute video is packed with great insights.\nI guess different things would stand out when rewatching the video later;\nthis time these three things resonated with me the most.

\n

Knowledge focus vs customer value focus (8:12–9:16)

\n

\"\"

\n
\n

Knowledge can be seen as the opposite of risk, so when uncertainty is high, our focus is [on] knowledge acquisition; we focus on things like UI prototypes and technical spikes/experiments. Maybe not too exciting for the customers [(stakeholders)], but still valuable because we are reducing risk. From a customer value perspective, the curve [of customer value (y-axis) and time (x-axis)] looks [flat] in the beginning.

\n

As uncertainty is reduced, we gradually focus more and more on customer value; we know what we are going to build and how, so just do it. And by doing the highest-value [user] stories first, we get this nice steep value curve.

\n

And then gradually the value curve starts flattening out. We have built the most important stuff, and now we are just adding the bonus features; the toppings of an ice cream. This is a nice place to be [in] because at any point [the Product Owner] and the team may decide to "trim the tail," to cut right here and move on to another more important project. Or maybe start a whole new feature area within the same product. That is business agility.

\n

So when I talk about value [of user stories], I actually mean knowledge value + customer value. And we need to continuously find the trade-off between these two.

\n
\n

Correct vs good vs fast (9:39–10:42)

\n

\"\"

\n
\n

Should we focus on:

\n\n

Ideally we want all three, but it's hard to find the balance.

\n

[...]

\n\n

Speed is actually worth emphasizing because a short feedback loop will accelerate learning, so you'll more quickly learn what the right thing is and how to build it right.

\n

However, all three aspects are important, so keep trying to find the balance.

\n
\n

Reducing scope vs extending time (13:15–14:00)

\n

\"\"

\n
\n

Suppose a stakeholder says: "Can we get these features by Christmas?" Now, that's a fixed time, fixed scope question.

\n

Looking at trend lines, [the Product Owner] says: "Nope, sorry, ain't gonna happen," followed by, "here's how much we can get done by Christmas" or "here's how much more time we would need to get everything done."

\n

It's generally better to reduce scope than to extend time, because if we reduce scope first, we still have the option to extend the time later and add the rest of the [user] stories.

\n

Vice versa doesn't work because, darn it, we can't turn the clock backwards. [...]

\n

So, [the Product Owner] puts it this way: "We could deliver something [soon] and the rest later, or we could deliver nothing [soon] and the rest later; which do you prefer?"

\n
\n","summary":"This 16-minute video by Henrik Kniberg\nis a great overview of the agile software development process,\nbut also contains lots of smaller great insights.","date_published":"2023-04-11T12:00:00+03:00","tags":["Miscellaneous"]},{"id":"https://mtsknn.fi/blog/atomic-habits/","url":"https://mtsknn.fi/blog/atomic-habits/","title":"Book notes: Atomic Habits","content_html":"

Tiny good things accumulate into great things.\nTiny bad things accumulate into horrible things.\nThis book tells you how to do more of those good things\nand less of those bad things.

\n

About the book

\n

People do things out of habit all the time.

\n

Atomic Habits tells you how to make good habits easy and effortless,\nand how to make bad habits difficult and unattractive.

\n

Read more about Atomic Habits on James Clear's website

\n

Thoughts

\n

I read this book in January 2023.\nThis was the first book I read in a very long time (a few years maybe).

\n

The book was great:

\n\n

I found the book to be a nice general overview of human behavior:\nwhy people do certain things (good or bad)\nand why people don't do certain things (good or bad).\nSo the book isn't just about productivity.

\n

Notes

\n

These are the things that resonated with me the most.

\n

I wrote these originally on post-it notes in January 2023.\nNow, almost 3 months later, I'm having difficulties understanding some of the post-its,\nso the notes below are partly confusing. 🙈

\n

How to do a habit more

\n

Make it:

\n
    \n
  1. Obvious
    2. \n
  2. Attractive
    3. \n
  3. Easy
    4. \n
  4. Satisfying
    5. \n
\n

(Note to self: examples would be nice...)

\n

How to ditch a bad habit

\n

Make it:

\n
    \n
  1. Invisible (out of sight, out of mind)
    2. \n
  2. Unattractive
    3. \n
  3. Difficult
    4. \n
  4. Unsatisfying
    5. \n
\n

The 1% rule

\n\n

Focus on processes, not goals

\n\n

1 task per day

\n\n

(I don't remember if the book had this kind of example\nor whether this was my own though based on something else. 🤔)

\n

Become your ideal person

\n
    \n
  1. Decide who you want to be(come).
    2. \n
  2. Prove it to yourself with small wins.
    3. \n
\n

→ It's not about the goals but the system/process and identities.

\n\n

(I'm not sure what the notes in this chapter mean. 🫣 Shitty notes.)

\n

Habits free up mental juice

\n\n

Pointing-and-Calling

\n\n

Aside: baseball bats

\n

In the intro chapter,\nJames Clear tells how he was once hit in the face by a flying baseball bat.

\n

His skull fractured and brains swelled etc.,\ncausing him to almost die.

\n

That's completely different what some movies and TV series portray.\nSometimes a guy is hit dozens of times with a (metallic!) baseball bat,\neven to the head,\nand all it does is make the guy groan a little.\nRidiculous.\n(I had been shaking my head at this stupidity before reading the book;\nJames's anecdote just confirmed my hunch that even a single hit could be fatal.)

\n

Verdict

\n

Atomic Habits is a great book, go read it!

\n","summary":"Tiny good things accumulate into great things.\nTiny bad things accumulate into horrible things.\nThis book tells you how to do more of those good things\nand less of those bad things.","date_published":"2023-04-07T12:00:00+03:00","tags":["Books"]},{"id":"https://mtsknn.fi/blog/small-monitor-best/","url":"https://mtsknn.fi/blog/small-monitor-best/","title":"From a super ultrawide monitor to a regular 16:9 monitor","content_html":"

After 2.5 years of using a 120 cm wide super ultrawide computer monitor with a 32:9 aspect ratio,\nI'm back to a boring 64 cm wide 16:9 monitor.\nThe smaller monitor now feels better in every regard.

\n

Super ultrawide

\n

I bought Samsung CRG9\nin July 2020 for 950 € (sale price).\nSome specs:

\n\n

Nice: it's wide

\n

I wanted to try a super ultrawide monitor\nbecause the wider the screen, the more windows can fit on it side by side.

\n

I thought that would be useful,\nand it kind of is.\nHaving VS Code, Terminal and Firefox side by side can be nifty\nwhen coding web apps.

\n

Drawback: distractions

\n

On the other hand,\nhaving more than one thing open at the same time can be distracting.\nAt least subconsciously.

\n

I hadn't considered this until I read\nAlexey Guzey's blog post My 2022 self (I don't know them) was very wrong about meditation, huge monitors, and... sleep.

\n

In chapter 4, Alexey tells\nthat he changed from his 4-monitor setup (49" + 34" + 24" + 16")\nto using just his 16" MacBook.

\n
\n

I'm actually distracted by [having] my task list, calendar, notes, etc. always visible.

\n

[Now] I work on my 16" MacBook and do one thing at a time.

\n
\n

So: one or max two windows open at a time = more focus.

\n

Other drawbacks

\n\n

If you play video games (I play only rarely):

\n\n

Testing smaller resolutions with a software

\n

Before changing to a smaller monitor,\nI "converted" my super ultrawide monitor to a smaller monitor.

\n

I found SwitchResX for Mac to be great:\nit allowed me to apply black bars to the sides of my monitor.

\n

First I tried regular ultrawide resolution (3440×1440, WQHD, 43:18) for a couple of days.\nDefinitely better!\nLess looking too far to the sides.

\n

The regular ultrawide resolution started to quickly feel still too wide.\nThen I reduced the resolution to 2560×1440 (2K, 16:9).\nPerfect aspect ratio!

\n

(16:10 could also work,\nbut there aren't many external monitors available with that aspect ratio.)

\n

Back to 16:9

\n

I had bought BenQ BL2711U in November 2017\nbut had never sold it,\nso I already had a great monitor lying around.\nThe perks of procrastination.

\n

Some specs:

\n\n

Now I have less horizontal pixels (3840 vs 5120)\nbut that's okay because\nit's why I wanted to change to a smaller monitor in the first place.

\n

Two windows side by side, both taking 50% width, feels actually quite good now.\nOn the other hand,\nplacing two windows side by side on an ultrawide makes both windows a bit too wide.

\n

As a bonus I have more vertical pixels (2160 vs 1440)\nand a nice IPS panel.

\n

27" vs 32"

\n

This 27" monitor feels perfect.\nNot too small, not too big.

\n

A 32" monitor would probably be a little too big for my taste.\nI would again have to start turning my head around too much\nwhen looking at the sides.\nAnd either the bottom side of the screen would be too low,\nor the top side would be too high.

\n

Meme

\n

I'll conclude this post with this nice meme\n(idea by my bro).

\n

\"The

\n","summary":"After 2.5 years of using a 120 cm wide super ultrawide computer monitor with a 32:9 aspect ratio,\nI'm back to a boring 64 cm wide 16:9 monitor.\nThe smaller monitor now feels better in every regard.","date_published":"2023-03-23T12:00:00+03:00","date_modified":"2023-05-12T12:00:00+03:00","tags":["Battlestation"]},{"id":"https://mtsknn.fi/blog/bye-weekly-log/","url":"https://mtsknn.fi/blog/bye-weekly-log/","title":"I wrote a weekly log for half a year and it was stressful","content_html":"

"Weekly log" basically meaning weekly blog posts with a specific structure.\nToday I removed the whole Weekly log.

\n

Why I started a weekly log

\n

I started the weekly log\nto reduce stress:\nby publishing short weekly log entries,\nI wouldn't need to stress so much about my blog.

\n

Writing blog posts takes time,\nand I wanted to publish something regularly.

\n

And I did publish regularly:\nI published the first entry on the first week of 2021\nand then a new entry each week for 6 months\nfor a total of 26 entries.

\n

Why I ditched it

\n

So I wanted to reduce stress,\nbut here's what actually happened:\nI had two things to maintain;\nthe blog and the weekly log.

\n

Or actually three,\nbecause this site used to also have a Cookbook section with "technical recipes."

\n

Publishing every week was nice for a while,\nbut quickly started to feel like work.\nHaving an obligation like that was stressful.

\n

Plus I didn't manage to write short and quick weekly log entries,\nso it wasn't much easier or more enjoyable than writing blog posts.

\n

How I ditched it

\n

I moved the best bits to individual blog posts\nand deleted the rest (unnecessary ramblings etc.).\nI did this slowly, so looks like it took me almost two years.

\n

Other issues

\n

Bad discoverability and SEO

\n

(SEO = search engine optimization)

\n

The weekly log entries were on a separate "Weekly log" page.\nSomeone going through my blog posts might miss entirely that the "Weekly log" page has more blog-like stuff.

\n

Opening a weekly log entry was not a nice experience either\nbecause the page was long and had lots of mixed content to go through.

\n

The weekly log entries appeared on Google with names like "22nd week of 2021 – Weekly log."\nSuch titles aren't very clear nor inviting.

\n

So it wasn't easy to discover what topics the weekly log entries actually cover.

\n

Too rigid structure

\n

My weekly log was mainly inspired by Sam Selikoff's Work journal\nin which he publishes weekly bullet points\nabout work-related stuff, learnings and interesting stuff.

\n

Piggybacking Sam's Work journal,\nI structured my weekly log entries around these four headings:

\n\n

That's sort of nice,\nbut also sort of rigid.\nI didn't have anything to say in each four category each week,\nso I either said something pointless anyway\nor felt bad that the section was empty.

\n

Too much effort

\n

I should have written only bullet points (and headings),\nbut I wrote full paragraphs, and many of them.\nI put way too much time and effort into something I originally wanted to be a chill little side quest.

\n

The reading experience could have been better too\nhad I written more shortly.\nSam Selikoff's Work journal (linked above) is nice to read because it's concise:\nit has only headings and bullet points,\nand most bullet points are short (even only one sentence).\nWho wants to read too lengthy ramblings? Yeah, like this very text here.

\n

Also, the posts could have been regular blog posts with a "Weekly log" tag.\nWhy complicate things?

\n

Lessons learned

\n

Next time I'll think twice before committing to an arbitrary schedule.\nPublishing something regularly is nice,\nbut not if it starts to feel like work.

\n

Next time I'll also try to keep things simple and flexible.\nMy weekly log entries could have been regular blog posts with only headings and bullet points.

\n","summary":"\"Weekly log\" basically meaning weekly blog posts with a specific structure.\nToday I removed the whole Weekly log.","date_published":"2023-03-17T12:00:00+03:00","tags":["Blogging"]},{"id":"https://mtsknn.fi/blog/from-windows-to-mac/","url":"https://mtsknn.fi/blog/from-windows-to-mac/","title":"Switching to Mac after 20+ years of using Windows","content_html":"

I have used Windows PCs since I was a kid.\nA year ago (Jan 2022) I got my first MacBook.\nWhile Mac isn't perfect,\nit's so much better that I'm not going back to Windows.

\n

Why I switched to Mac

\n

Three things:

\n
    \n
  1. I had long had the impression that many developers use and like Macs,\nso I was intrigued to try it myself.
    2. \n
  2. Macs are relatively expensive\n(same amount of money gets you more horsepower if you buy a Windows PC,\nthough I'm not sure if M1/M2 Macs have changed the game),\nand I'm a cheapo.
    3. \n
  3. A year ago (Jan 2022) I switched jobs\nand could freely choose a work laptop (a great perk by the way),\nso I took the opportunity and chose a MacBook.
    4. \n
\n

How long it took me to get familiar with Mac

\n

Only about three days:

\n\n

The first work days consisted mostly of introductions to the customer's systems etc.,\nbut even if the very first work day was full of coding,\nI feel I wouldn't have been any more productive had I used a Windows PC\n(because of the pros of Mac, listed below).

\n

It was a bit risky to switch from Windows to Mac with such a short time frame,\nbut it was worth it.

\n

Things I like in Mac

\n

Unix

\n

Mac is a Unix operating system, so:

\n\n

Fast

\n

The hardware matters as well;\nI switched from Lenovo ThinkPad X1 Carbon Gen 7\nto MacBook Pro 16" M1 Pro (32 GB).

\n

My MacBook is not as fast as I thought –\nI had read high praises from several sources,\nso my expectations were very high –\nbut it's still fast.

\n

Every time I use my Windows laptop\nI'm baffled how sluggish it is.\nSo compared to that,\nyes, my MacBook is very fast.

\n

Better keyboard shortcuts

\n

Using the Cmd key (next to the space bar) with the left thumb\nis more ergonomic than reaching for the Ctrl key with the left pinky.

\n

Things I miss from Windows

\n

The Menu keyboard key

\n

The Menu key\nis essential for comfortable keyboard navigation across Windows:

\n
\n

In computing, the menu key or application key (≣ Menu) is a key found on Microsoft Windows-oriented computer keyboards [...]. It is typically found on the right side of the keyboard between the right Windows logo key and the right control key [...].

\n

The key's primary function is to launch a context menu with the keyboard rather than with the usual right-mouse button. It can be used when the right-mouse button is not present on a mouse.

\n

[...] In many Windows applications, a similar functionality can be invoked with the ⇧ Shift+F10 keyboard shortcut [...].

\n
\n

I used the Menu key (or sometimes Shift+F10) all the time.

\n

Mac doesn't have a Menu key.\nSuch a shame.\nAn accessibility issue as well.

\n

Alt-tabbing

\n

The default alt-tabbing experience on Mac is poor.\nNo window previews like on Windows,\nand the keyboard shortcut for alt-tabbing to a hidden or minimized window is crazily complex.

\n

Switching between the windows of a single app with Cmd+`\nis cool though.

\n

I use a free app called AltTab\nwhich "brings the power of Windows's 'alt-tab' window switcher to macOS."\nUnfortunately it's a bit buggy\n(because "Mac development ecosystem is pretty terrible in general"),\nbut it's 90% great and much better than the default alt-tabbing experience on Mac.

\n

Middle-clicking on the trackpad

\n

I'm used to middle-clicking by tapping the trackpad with three fingers.\nThat's not possible on MacBook's trackpad though.

\n

The free app called MiddleClick\nfixes that,\nbut it's a bit buggy.

\n

There are paid alternatives,\nbut I'm not willing to pay several euros for a feature that should be part of core Mac.\n(I already said I'm a cheapo.)

\n

It's baffling that I need a 3rd party app for this basic feature.

\n

Gaming

\n

I rarely play video games,\nbut I miss Battlefield 4.\nI'd also love to try Age of Empires IV.

\n

Mac runs some games, but of course not those two I'm interested in.

\n

My bro recently built a Windows gaming PC,\nwhich made me want to build one too.

\n

Things that are bad both in Windows and Mac

\n

Focus stealing

\n

I truly hated focus stealing on Windows.\nIt's so annoying when you are doing something\nand another app/window suddenly steals focus,\ninterrupting your typing/clicking/whatever.

\n

Focus stealing is a problem on Mac too,\nalbeit not as big a problem.\nKrisp is maybe the worst offender I have encountered so far.

\n

I had reaperducer's Hacker News comment about focus stealing on Macs\nsaved on my bookmarks.\nIt's a good comment;\nhere's a snippet:

\n
\n

I think allowing any pop-up to demand focus is a serious security flaw. I've sometimes found myself typing a password into a browser, or a word processor, because they've decided that they are the most important thing in my life at that moment.

\n
\n

So, focus stealing is not only an annoyance but a security risk as well.

\n

Verdict

\n

I like Mac because it's fast and a Unix system and generally just feels good.

\n

Mac required some tweaking to make me feel at home,\nbut what system doesn't require tweaking?\nThe Windows experience isn't optimal out of the box either.

\n

After a year of using Mac and touching Windows only a few times,\nI don't see myself going back to Windows, except maybe for gaming.\nThough it didn't take a full year for me to feel this way;\nonly a few days or weeks.

\n","summary":"I have used Windows PCs since I was a kid.\nA year ago (Jan 2022) I got my first MacBook.\nWhile Mac isn't perfect,\nit's so much better that I'm not going back to Windows.","date_published":"2023-01-31T12:00:00+03:00","tags":["Mac"]},{"id":"https://mtsknn.fi/blog/js-retry-on-fail/","url":"https://mtsknn.fi/blog/js-retry-on-fail/","title":"Automatically retrying a failing function in JS/TS","content_html":"

A little helper function\nto retry a function automatically a limited number of times (or until success)\nand with a certain delay between retries.\nUseful e.g. when working with a flaky API.

\n

Starting point

\n

After a bit of googling,\nI found Jaromanda X's answer on Stack Overflow\nto be a good starting point:

\n
\n

Using a couple of helper functions I've used a lot, this becomes very easy

\n

The "helpers"

\n\n
Promise.wait = (time) => new Promise(resolve => setTimeout(resolve, time || 0));\nPromise.retry = (cont, fn, delay) => fn().catch(err => cont > 0 ? Promise.wait(delay).then(() => Promise.retry(cont - 1, fn, delay)) : Promise.reject('failed'));\n
\n

The code:

\n\n
function myMainFuntion() {\n      var delay = 100;\n      var tries = 3;\n      Promise.retry(tries, tryAsync, delay);\n}\n
\n
\n

Works well,\nbut let's do better since the code wasn't immediately clear for me.

\n

Refactoring step by step

\n

Let's do an unsolicited code review\nand refactor the code along the way.\nYou can also jump straight to the final result.

\n

The general rule of code reviewing seems to apply here:\nthe shorter the code, the more it receives comments.

\n

Step 1: Prettier

\n

The lines declaring the two helpers are very long: 80 and 161 characters.

\n

Too long lines are difficult to read.\nEspecially the retry method in this case.

\n

Let's format the code with Prettier:

\n
Promise.wait = (time) =>\n  new Promise((resolve) => setTimeout(resolve, time || 0))\n\nPromise.retry = (cont, fn, delay) =>\n  fn().catch((err) =>\n    cont > 0\n      ? Promise.wait(delay).then(() => Promise.retry(cont - 1, fn, delay))\n      : Promise.reject('failed')\n  )\n
\n

Now the structure of the code is much easier to see.\nLooks like Promise.retry is a recursive function.

\n

Step 2: no monkey patching

\n

Modifying global prototypes is generally not a good idea,\nso instead of adding the methods to the global Promise object,\nlet's convert the methods to standalone functions.

\n

Diff:

\n
-Promise.wait = (time) =>\n+const   wait = (time) =>\n   new Promise((resolve) => setTimeout(resolve, time || 0))\n\n-Promise.retry      = (cont, fn, delay) =>\n+export const retry = (cont, fn, delay) =>\n   fn().catch((err) =>\n     cont > 0\n-      ? Promise.wait(delay).then(() => Promise.retry(cont - 1, fn, delay))\n+      ?         wait(delay).then(() =>         retry(cont - 1, fn, delay))\n       : Promise.reject('failed')\n   )\n
\n

Result (formatted with Prettier; wait function moved to the end):

\n
export const retry = (cont, fn, delay) =>\n  fn().catch((err) =>\n    cont > 0\n      ? wait(delay).then(() => retry(cont - 1, fn, delay))\n      : Promise.reject('failed')\n  )\n\nconst wait = (time) => new Promise((resolve) => setTimeout(resolve, time || 0))\n
\n

Step 3: what's "cont"?

\n

What is the cont parameter for –\nwhat does "cont" mean?

\n

I guess it means something like "continue/retry if this is greater than 0."\nIn other words,\nit's the number of remaining retries.

\n

Let's rename cont to retries:

\n
-export const retry = (cont, fn, delay) =>\n+export const retry = (retries, fn, delay) =>\n // ...\n
\n

Step 4: order of parameters

\n

Is the order of the parameters ideal?

\n

Now the function reads like\n"retry with x retries the given fn with a delay of y milliseconds."\nSounds clumsy.

\n

If the first two parameters are swapped:

\n
-export const retry = (retries, fn, delay) => {}\n+export const retry = (fn, retries, delay) => {}\n
\n

...the function reads like\n"retry the given fn with x retries and a delay of y milliseconds."

\n

I think that's better –\nthe fn parameter is the "main" parameter,\nand the other two parameters are configurable options,\nso it makes sense to pass the function as the first parameter.

\n

Step 5: options parameter

\n

Let's continue with the parameters.

\n

When calling retry, the purpose of the two option parameters is not clear:

\n
retry(myFn, 2, 200) // What 2? What 200?\n
\n

Condensing the options into a single object\nmakes the call site clearer:

\n
-export const retry = (fn, retries, delay) => {}\n+export const retry = (fn, { retries, delay }) => {}\n\n // Usage:\n-retry(myFn, 2, 200) // huh?\n+retry(myFn, { retries: 2, delay: 200 }) // oh\n
\n

Step 6: delay parameter

\n

Is the delay option clear?\nWhat does it delay – only the retries or also the initial function call?

\n

Let's rename delay to retryInterval\nto make it clear that it's only about the retries,\nnot the initial function call.\nActually, let's use retryIntervalMs to also clarify that the unit is milliseconds:

\n
-export const retry = (fn, { retries, delay }) => {}\n+export const retry = (fn, { retries, retryIntervalMs }) => {}\n\n // Usage:\n-retry(myFn, { retries: 2, delay: 200 })\n+retry(myFn, { retries: 2, retryIntervalMs: 200 })\n
\n

Another benefit: now the two options are sorted alphabetically. :D

\n

Similarly, let's rename the wait function's time parameter to ms:

\n
-const wait = (time) => new Promise((resolve) => setTimeout(resolve, time || 0))\n+const wait = (ms)   => new Promise((resolve) => setTimeout(resolve, ms   || 0))\n
\n

Step 7: function name

\n

More bike-shedding:\ndoes the name retry tell clearly what the function does?

\n

Yes, the function retries another function –\nbut only after the initial try, which is a try, not a re-try.

\n

Something like tryAndRetry or retryOnFail or tryMultipleTimes could be more descriptive.\nThough these are quite wordy and still not great.

\n

Apparently this whole thing is called "retry pattern" or "retry design pattern"\n(more about this in the Further resources section),\nso let's actually keep the retry name.

\n

But thinking about this was useful:\nwe can deduce that because the first fn call is a try and not a retry,\nthe maximum number of fn calls should be 1 + retries.\nAnd indeed it is.\n(If the maximum number was something else,\nthe option name retries could be confusing.)

\n

Here's what we have so far:

\n
export const retry = (fn, { retries, retryIntervalMs }) =>\n  fn().catch((err) =>\n    retries > 0\n      ? wait(retryIntervalMs).then(() =>\n          retry(fn, { retries: retries - 1, retryIntervalMs })\n        )\n      : Promise.reject('failed')\n  )\n\nconst wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms || 0))\n
\n

Step 8: better error

\n

If the last retry also fails,\nretry throws the string 'failed'.\nRe-throwing the error thrown by fn is likely more useful.

\n

While at it, let's also rename err to error:

\n
 export const retry = (fn, { retries, retryIntervalMs }) =>\n-  fn().catch((err) =>\n+  fn().catch((error) =>\n     retries > 0\n       ? wait(retryIntervalMs).then(() =>\n           retry(fn, { retries: retries - 1, retryIntervalMs })\n         )\n-      : Promise.reject('failed')\n+      : Promise.reject(error)\n   )\n
\n

Step 9: TypeScript

\n
    export const retry = <T>(\n  fn: () => Promise<T>,\n  { retries, retryIntervalMs }: { retries: number; retryIntervalMs: number }\n): Promise<T> =>\n  fn().catch((error) =>\n    retries > 0\n      ? wait(retryIntervalMs).then(() =>\n          retry(fn, { retries: retries - 1, retryIntervalMs })\n        )\n      : Promise.reject(error)\n  )\n\nconst wait = (ms = 0) => new Promise((resolve) => setTimeout(resolve, ms))\n
\n

The generic parameter T is used more than once in the function signature,\nso this is a good use of generics;\nsee The Golden Rule of Generics.

\n

Step 10: the need for async/await

\n

So far so good,\nbut there's a caveat:

\n

The provided function must be async (marked with async or returns a Promise),\nor the function won't be retried.

\n

Async functions

\n

Async functions work well:

\n
const options = { retries: 2, retryIntervalMs: 200 }\n\nretry(async () => 42, options)\n//=> returns 42\n\nretry(() => Promise.resolve(42), options)\n//=> returns 42\n\nretry(async () => {\n  console.log('hi')\n  throw new Error('fail')\n}, options)\n//=> logs 'hi' (initial try)\n//=> logs 'hi' (1st retry)\n//=> logs 'hi' (2nd retry)\n//=> throws [Error: fail]\n\nretry(() => {\n  console.log('hi')\n  return Promise.reject(new Error('fail'))\n}, options)\n//=> logs 'hi' (initial try)\n//=> logs 'hi' (1st retry)\n//=> logs 'hi' (2nd retry)\n//=> throws [Error: fail]\n
\n

Non-async functions

\n

Non-async functions don't work:

\n
    \n
  1. \n

    Non-async functions are not retried:

    \n
    retry(() => {\n  console.log('hi')\n  throw new Error('fail')\n}, options)\n//=> logs 'hi' (initial try)\n//=> throws [Error: fail]\n
    \n
    2. \n
  2. \n

    If a non-async function succeeds, a TypeError will still be thrown:

    \n
    retry(() => {\n  console.log('hi')\n  return 42\n}, options)\n//=> logs 'hi' (initial try)\n//=> throws [TypeError: fn(...).catch is not a function]\n
    \n
    3. \n
\n

async/await vs Promises

\n

TypeScript won't allow passing a non-async function to retry,\nbut I don't like that retry breaks at runtime if it's given a non-async function.

\n

Let's eliminate the caveat by refactoring to async/await.

\n

An alternative would be to make retry always return a Promise.\nThe code wouldn't be as clear in my opinion,\nand there would be the extra caveat of having to avoid the pitfalls of the\nexplicit Promise constructor anti-pattern.

\n

Step 11: async/await

\n

Diff:

\n
-export const retry = <T>(\n-  fn: () => Promise<T>,\n+export const retry = async <T>(\n+  fn: () => Promise<T> | T,\n   { retries, retryIntervalMs }: { retries: number; retryIntervalMs: number }\n-): Promise<T> =>\n-  fn().catch((error) =>\n-    retries > 0\n-      ? wait(retryIntervalMs).then(() =>\n-          retry(fn, { retries: retries - 1, retryIntervalMs })\n-        )\n-      : Promise.reject(error)\n-  )\n+): Promise<T> => {\n+  try {\n+    return await fn()\n+  } catch (error) {\n+    if (retries <= 0) {\n+      throw error\n+    }\n+    await sleep(retryIntervalMs)\n+    return retry(fn, { retries: retries - 1, retryIntervalMs })\n+  }\n+}\n\n-const wait  = (ms = 0) => new Promise((resolve) => setTimeout(resolve, ms))\n+const sleep = (ms = 0) => new Promise((resolve) => setTimeout(resolve, ms))\n
\n

(Heh, only one non-empty line remained unchanged.)

\n

Details:

\n\n

Final result

\n
/**\n * Runs the function `fn`\n * and retries automatically if it fails.\n *\n * Tries max `1 + retries` times\n * with `retryIntervalMs` milliseconds between retries.\n *\n * From https://mtsknn.fi/blog/js-retry-on-fail/\n */\nexport const retry = async <T>(\n  fn: () => Promise<T> | T,\n  { retries, retryIntervalMs }: { retries: number; retryIntervalMs: number }\n): Promise<T> => {\n  try {\n    return await fn()\n  } catch (error) {\n    if (retries <= 0) {\n      throw error\n    }\n    await sleep(retryIntervalMs)\n    return retry(fn, { retries: retries - 1, retryIntervalMs })\n  }\n}\n\nconst sleep = (ms = 0) => new Promise((resolve) => setTimeout(resolve, ms))\n
\n

Looks quite good to me!

\n

Usage

\n

Happy cases:

\n
const options = { retries: 2, retryIntervalMs: 200 }\n\nretry(() => 42, options)\n//=> 42\n\nretry(() => Promise.resolve(42), options)\n//=> 42\n\nretry(async () => 42, options)\n//=> 42\n
\n

Error cases:

\n
const options = { retries: 2, retryIntervalMs: 200 }\n\nretry(() => {\n  console.log('hi')\n  throw new Error('fail')\n}, options)\n//=> logs 'hi' (initial try)\n//=> logs 'hi' (1st retry)\n//=> logs 'hi' (2nd retry)\n//=> throws [Error: fail]\n\nretry(() => {\n  console.log('hi')\n  return Promise.reject(new Error('fail'))\n}, options)\n//=> same as above\n\nretry(async () => {\n  console.log('hi')\n  throw new Error('fail')\n}, options)\n//=> same as above\n
\n

Further resources

\n

This blog post was almost ready when I found\nPromise Retry Design Patterns on Stack Overflow.\nThese three answers are interesting:

\n\n","summary":"A little helper function\nto retry a function automatically a limited number of times (or until success)\nand with a certain delay between retries.\nUseful e.g. when working with a flaky API.","date_published":"2022-12-14T12:00:00+03:00","date_modified":"2023-03-20T12:00:00+03:00","tags":["JavaScript","TypeScript"]},{"id":"https://mtsknn.fi/blog/swr-show-stale-data-on-revalidation-error/","url":"https://mtsknn.fi/blog/swr-show-stale-data-on-revalidation-error/","title":"SWR (v1): show previous/stale data on revalidation errors","content_html":"

If I'm already displaying data that I have successfully fetched with SWR,\nand then another fetch call fails (when revalidating the data),\nI don't want to replace the data view with an error view.\nHere's how to avoid that.

\n

Problem

\n

Basic usage of SWR\n(v1; I haven't upgraded to v2 yet):

\n
export const useItems = () => {\n  const { data, error } = useSWR('/api/items/', (url) =>\n    fetch(url).then((res) => res.json())\n  )\n\n  return {\n    items: data ?? [],\n    isLoadingItems: !data && !error,\n    failedToLoadItems: !!error,\n  }\n}\n\nfunction Items() {\n  const { items, isLoadingItems, failedToLoadItems } = useItems()\n\n  return isLoadingItems ? (\n    <p>Loading...</p>\n  ) : failedToLoadItems ? (\n    <p>Error</p>\n  ) : items.length === 0 ? (\n    <p>No items</p>\n  ) : (\n    <ul>\n      {items.map((item) => (\n        <li key={item.id}>{item.name}</li>\n      ))}\n    </ul>\n  )\n}\n
\n

My problem occurs with these steps:

\n
    \n
  1. SWR starts to fetch initial data, app shows loading state.
    2. \n
  2. SWR has fetched data, app shows data.
    3. \n
  3. SWR starts to fetch data again (revalidation), app still shows data.
    4. \n
  4. SWR fails to fetch data (e.g. the API endpoint fails), app shows error state.\n\n
    5. \n
\n

Solution

\n

I spent some time looking for a solution\nuntil I realized that it's very simple –\nlet the failed state be false\nonly if there's no data (i.e. if data is not falsy):

\n








  export const useItems = () => {\n  const { data, error } = useSWR('/api/items/', (url) =>\n    fetch(url).then((res) => res.json())\n  )\n\n  return {\n    items: data ?? [],\n    isLoadingItems: !data && !error,\n    failedToLoadItems: !data && !!error,\n    //                 ^^^^^^^^\n  }\n}\n\nfunction Items() {\n  // Same as before\n}\n
\n

Truth tables

\n

I built these truth tables to be sure that the change works as expected.

\n

Before the change

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
dataerrorisLoading
(!data && !error)		failedToLoad
(!!error)		state description
falsyfalsytruefalseinitial state or revalidation succeeded
truthyfalsyfalsefalseinitial fetch succeeded
falsytruthyfalsetrueinitial fetch failed
truthytruthyfalsetruerevalidation failed
\n

After the change

\n

Only the 4th column and the last row are different:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
dataerrorisLoading
(!data && !error)		failedToLoad
(!data && !!error)		state description
falsyfalsytruefalseinitial state or revalidation succeeded
truthyfalsyfalsefalseinitial fetch succeeded
falsytruthyfalsetrueinitial fetch failed
truthytruthyfalsefalse (true in the other table)revalidation failed
\n

LGTM!

\n","summary":"If I'm already displaying data that I have successfully fetched with SWR,\nand then another fetch call fails (when revalidating the data),\nI don't want to replace the data view with an error view.\nHere's how to avoid that.","date_published":"2022-11-08T12:00:00+03:00","date_modified":"2023-05-12T12:00:00+03:00","tags":["JavaScript","React"]},{"id":"https://mtsknn.fi/blog/burnout/","url":"https://mtsknn.fi/blog/burnout/","title":"Wild ideas to avoid burnout","content_html":"

Care less,\ntake a sabbatical,\nget a second job,\nget monster ear protection,\nhide behind your manager.

\n

Someone recently asked on Hacker News if anyone has managed to find enjoyment in their work after burnout.

\n

Excerpts from comments that I liked\n(not all are that wild, but anyway):

\n\n

One more link:\nDo Nothing on YouTube (0:49) summarizes the "care less" category well.

\n\n
\n
\n

\n Footnotes\n

\n
    \n

  1. Dictionary.com defines convalescence\nas "the gradual recovery of health and strength after illness." ↩

    \n
    2. \n

  2. Walking is sooo much better than sitting or standing still.\nBlog post coming some day. ↩

    \n
    3. \n

  3. To be clear,\nthe comment doesn't directly say to "hide behind your manager." ↩

    \n
    4. \n
\n
\n","summary":"Care less,\ntake a sabbatical,\nget a second job,\nget monster ear protection,\nhide behind your manager.","date_published":"2022-11-07T12:00:00+03:00","tags":["Work–life balance"]},{"id":"https://mtsknn.fi/blog/react-fallback-ref/","url":"https://mtsknn.fi/blog/react-fallback-ref/","title":"Four ways to use a fallback ref with `React.forwardRef`","content_html":"

A component wrapped in React.forwardRef\nnormally expects to receive a ref from its parent component.\nWhat if you want the component to have a ref\neven if it doesn't receive one from its parent?

\n

The problem

\n

React.forwardRef allows passing a ref to a child component:

\n
function Parent() {\n  const ref = useRef(null)\n\n  useEffect(() => {\n    console.log(ref.current)\n  }, [])\n\n  return <Child ref={ref} />\n}\n\nconst Child = React.forwardRef((props, forwardedRef) => {\n  useEffect(() => {\n    console.log(forwardedRef?.current)\n  }, [forwardedRef])\n\n  return <div ref={forwardedRef}>...</div>\n})\n
\n

When rendering <Parent />,\nboth useEffects log the <div> element from the Child component:

\n
<Parent />\n// Logs `<div>` twice\n
\n

But when rendering <Child /> on its own,\nthe Child's useEffect logs undefined\nbecause no ref is passed/forwarded:

\n
<Child />\n// Logs `undefined` once 😿\n
\n

More specifically:\nforwardedRef is null,\nso forwardedRef?.current is undefined.

\n

What if you want Child to have a ref to its <div> element\neven when no ref is forwarded to Child?\nYou can create a new ref in Child,\nbut you can't attach both refs to the <div>:

\n
const Child = React.forwardRef((props, forwardedRef) => {\n  const ref = useRef(null)\n\n  return (\n    <div\n      // 🛑 JSX elements cannot have multiple attributes with the same name\n      ref={forwardedRef}\n      ref={ref}\n    >\n      ...\n    </div>\n  )\n})\n
\n

Desired outcome

\n

When rendering <Parent />,\nboth useEffects should still log the <div> element from the Child component:

\n
<Parent />\n// Logs `<div>` twice\n
\n

When rendering <Child> on its own,\nits useEffect should log the <div> element:

\n
<Child />\n// Logs `<div>` once\n
\n

Four solutions

\n

useRef + ||

\n

Create a fallback ref with useRef\nand use it if forwardedRef is null:

\n

  




 const Child = React.forwardRef((props, forwardedRef) => {\n  const fallbackRef = useRef(null)\n  const ref = forwardedRef || fallbackRef\n\n  useEffect(() => {\n    console.log(ref.current)\n  }, [ref])\n\n  return <div ref={ref}>...</div>\n})\n
\n

Or as a custom hook:

\n

 







    const Child = React.forwardRef((props, forwardedRef) => {\n  const ref = useFallbackRef(forwardedRef)\n\n  useEffect(() => {\n    console.log(ref.current)\n  }, [ref])\n\n  return <div ref={ref}>...</div>\n})\n\nfunction useFallbackRef(forwardedRef) {\n  const fallbackRef = useRef(null)\n  return forwardedRef || fallbackRef\n}\n
\n

Pros:

\n\n

Cons:

\n\n

I found this solution via\nbrunoscopelliti/use-forward-ref on GitHub,\nwhich was the only npm package found via\nsearching "react fallback ref" on npmjs.com.

\n

Lazy useState + conditional createRef

\n

Create a fallback ref with React.createRef\nif forwardedRef is null.

\n

To avoid creating a new ref every time the Child component is re-rendered,\nwrap the conditional ref creation in useState\nand use lazy initial state:

\n

 const Child = React.forwardRef((props, forwardedRef) => {\n  const [ref] = useState(() => forwardedRef || React.createRef())\n\n  useEffect(() => {\n    console.log(ref.current)\n  }, [ref])\n\n  return <div ref={ref}>...</div>\n})\n
\n

Or as a custom hook:

\n

 







   const Child = React.forwardRef((props, forwardedRef) => {\n  const ref = useFallbackRef(forwardedRef)\n\n  useEffect(() => {\n    console.log(ref.current)\n  }, [ref])\n\n  return <div ref={ref}>...</div>\n})\n\nfunction useFallbackRef(forwardedRef) {\n  return useState(() => forwardedRef || React.createRef())[0]\n}\n
\n

Pros:

\n\n

Cons:

\n\n

I came up with this solution myself. 🤙

\n

useImperativeHandle

\n

React's useImperativeHandle hook\nallows customizing the value of a forwarded ref.

\n

The docs for the hook are very terse\n(emphasis added and example code slightly modified):

\n
\n
useImperativeHandle(ref, createHandle, [deps])\n
\n

useImperativeHandle customizes the instance value\nthat is exposed to parent components when using ref.\nAs always, imperative code using refs should be avoided in most cases.\nuseImperativeHandle should be used with forwardRef:

\n
const FancyInput = React.forwardRef((props, forwardedRef) => {\n  const ref = useRef()\n\n  useImperativeHandle(forwardedRef, () => ({\n    focus: () => ref.current.focus(),\n  }))\n\n  return <input ref={ref} />\n})\n
\n

In this example,\na parent component that renders <FancyInput ref={inputRef} />\nwould be able to call inputRef.current.focus().

\n
\n

In the quoted example,\ninputRef.current has only the focus method.

\n

To expose all methods and properties of the DOM element to the parent ref,\nexpose ref.current as-is:

\n
useImperativeHandle(forwardedRef, () => ref.current)\n
\n

Then:

\n\n

Put together:

\n

  




  const Child = React.forwardRef((props, forwardedRef) => {\n  const ref = useRef(null)\n  useImperativeHandle(forwardedRef, () => ref.current)\n\n  useEffect(() => {\n    console.log(ref.current)\n  }, []) // `ref` is not needed here\n\n  // Notice we are using `ref` here, not `forwardedRef`\n  return <div ref={ref}>...</div>\n})\n
\n

Or as a custom hook:

\n

 







     const Child = React.forwardRef((props, forwardedRef) => {\n  const ref = useFallbackRef(forwardedRef)\n\n  useEffect(() => {\n    console.log(ref.current)\n  }, [ref]) // `ref` is needed again here\n\n  return <div ref={ref}>...</div>\n})\n\nfunction useFallbackRef(forwardedRef) {\n  const ref = useRef(null)\n  useImperativeHandle(forwardedRef, () => ref.current)\n  return ref\n}\n
\n

Pros:

\n\n

Cons:

\n\n

I found this solution via\nJake Trent's blog post Fallback Ref in React.\nIt introduced me to the useImperativeHandle hook\nand has good musings about why the hook is lame.

\n

Merge refs

\n

Use a utility like react-merge-refs to merge the two refs:

\n



 




 import mergeRefs from 'react-merge-refs'\n\nconst Child = React.forwardRef((props, forwardedRef) => {\n  const ref = useRef()\n\n  useEffect(() => {\n    console.log(ref.current)\n  }, [])\n\n  return <div ref={mergeRefs([forwardedRef, ref])}>...</div>\n})\n
\n

Under the hood mergeRefs returns a callback ref:

\n
function mergeRefs(refs) {\n  return (value) => {\n    refs.forEach((ref) => {\n      if (typeof ref === 'function') {\n        ref(value)\n      } else if (ref != null) {\n        ref.current = value\n      }\n    })\n  }\n}\n
\n

If forwardedRef is null,\nmergeRefs simply skips it.

\n

Pros:

\n\n

Cons:

\n\n

The use-callback-ref library\nprovides a similar mergeRefs function\nas well as a useMergeRefs hook.

\n

Which solution to use?

\n

If you need to merge more than two refs,\nuse a utility like react-merge-refs or use-callback-ref.

\n

Otherwise I would prefer the first or the second solution.\nBoth are simple and straightforward.\nNo point in installing a dependency if you just want to create a fallback ref.

\n

Initially the useImperativeHandle solution felt the most correct to me\nbecause the hook is designed for customizing the value of the forwarded ref.\nHowever, the solution is more difficult to understand\nbecause the hook is so exotic and rarely used.

\n

One more point to consider:\nwhat if,\nduring the lifecycle of Child (the component wrapped in React.forwardRef),\nforwardedRef is sometimes null and sometimes a ref object?\nI haven't tested how the different solutions would react to that.\nThis might or might not be relevant in your case.

\n

Invalid solutions

\n

Knowing what doesn't work can be very useful as well.

\n

Conditional useRef

\n

Creating a fallback ref with useRef if forwardedRef is null might work:

\n

   const Child = React.forwardRef((props, forwardedRef) => {\n  // 🛑 Not allowed!\n  // Calling hooks conditionally breaks the rules of hooks.\n  const ref = forwardedRef || useRef()\n\n  useEffect(() => {\n    console.log(ref.current)\n  }, [ref])\n\n  return <div ref={ref}>...</div>\n})\n
\n

...but it might also not work\nbecause calling hooks conditionally breaks the rules of hooks.

\n

Conditional createRef

\n

React.createRef is not a hook,\nso it can be called conditionally:

\n

  


 const Child = React.forwardRef((props, forwardedRef) => {\n  // 🛑 A new ref is created on every re-render if `forwardedRef` is `null`\n  const ref = forwardedRef || React.createRef()\n\n  useEffect(() => {\n    console.log(ref.current)\n  }, [ref])\n\n  return <div ref={ref}>...</div>\n})\n
\n

However,\nif forwardedRef is null,\na new ref is created every time the Child component is re-rendered.

\n

Furthermore,\nref is not stable,\nso it needs to be included in the useEffect's dependency array.\nBecause of this, the useEffect will run on every re-render.

\n

Omitting ref from the dependency array\nand ignoring the "exhaustive-deps" ESLint rule\nis not a proper solution.\nIgnoring the rule is confusing and opens the door for further problems.

\n

useRef + conditional createRef

\n

To make the ref from the previous invalid solution stable,\nwe can wrap it in another useRef\nand immediately grab its current value (i.e. forwardedRef or the newly-created ref):

\n

  const Child = React.forwardRef((props, forwardedRef) => {\n  // 🛑 A new ref is created and discarded on every re-render if `forwardedRef` is `null`\n  const ref = useRef(forwardedRef || React.createRef()).current\n\n  useEffect(() => {\n    console.log(ref.current)\n  }, [ref]) // `ref` must be included here but is stable\n\n  return <div ref={ref}>...</div>\n})\n
\n

However,\nif forwardedRef is null,\na new ref is still created every time the Child component is re-rendered;\nit's just discarded immediately.

\n

Plus the code looks ugly and unclear.

\n

Further resources

\n

This blog post contains these links:

\n\n","summary":"A component wrapped in `React.forwardRef`\nnormally expects to receive a ref from its parent component.\nWhat if you want the component to have a ref\neven if it doesn't receive one from its parent?","date_published":"2022-10-19T12:00:00+03:00","tags":["JavaScript","React"]},{"id":"https://mtsknn.fi/blog/2-way-sync/","url":"https://mtsknn.fi/blog/2-way-sync/","title":"Software for syncing internal and external hard drives","content_html":"

I'm looking for a software that does 2-way syncing\nbetween my MacBook's hard drive and an external hard drive.\nSyncthing vs rsync vs Unison vs FreeFileSync vs Resilio Sync...\noh my!

\n

My use case

\n

Problem

\n

I have important files (photos and such)\nscattered on three computers:

\n\n

It's a mess!\nAnd I don't have back-ups. 🙈

\n

Solution

\n

I want to:

\n
    \n
  1. Copy important files on my current computer\nto an external hard drive.
    2. \n
  2. Copy/move important files on the two older computers\nto the same external hard drive.
    3. \n
  3. Sync the external hard drive and my current computer's hard drive.
    4. \n
\n

This way I'll have two copies of every important file:

\n\n

That's a good start!

\n

For this I'll need a software that does 2-way syncing.

\n

Comparing software

\n

Syncthing – nope

\n

I have never used Syncthing,\nbut I have heard it's good.\nKinda like Dropbox:

\n
\n

Syncthing is a continuous file synchronization program.\nIt synchronizes files between two or more computers in real time [...].

\n
\n

But Syncthing doesn't satisfy my needs at this point.\nFrom Syncthing's FAQ:

\n
\n

Does Syncthing support syncing between folders on the same system?

\n

No.\nSyncthing is not designed to sync locally\nand the overhead involved in doing so using Syncthing's method would be wasteful.\nThere are better programs to achieve this\nsuch as rsync\nor Unison.

\n
\n

Verdict: nope, can't use Syncthing in my case.

\n

rsync – nope

\n

Quick googling reveals that\nrsync doesn't support 2-way syncing.\nOr at least not in a straightforward way,\nand I'd like a simple solution for now.

\n

I need 2-way syncing\nbecause if I add files to the external hard drive from my old computers,\nI want the new files to be synced/copied to my current computer.

\n

Verdict: nope, can't use rsync in my case.

\n

Unison – maybe

\n

Unison\nwas mentioned in Syncthing's FAQ\nand in the Stack Overflow page about rsync.\nAnd it indeed looks promising:

\n\n

One caveat that I came across with:\nUnison can't run on a "heterogeneous network."\nIn other words,\nUnison binaries on your different devices must be\n"exactly the same version, compiled with exactly the same version of various libraries,"\nor you'll run into problems.\nThis caveat doesn't apply to me for now\nsince I would be installing Unison only to my current computer,\nbut this is good to know\nand makes me wary of using Unison\n(what if I would later like to install it on another device?).

\n

Verdict: Unison might fit the bill, but is there anything better?

\n

FreeFileSync – my choice

\n

FreeFileSync apparently works quite much like Unison.

\n

I found someone saying on Hacker News that\nFreeFileSync has better GUI than Unison.\nSince googling "FreeFileSync vs Unison" doesn't yield many results,\nI might go ahead and trust that single internet stranger's word about the GUI.

\n

Verdict: FreeFileSync should fit the bill and might be better than Unison.

\n

Resilio Sync – costs money

\n

Resilio Sync\nis a "fast, reliable, and simple file sync and share solution,\npowered by P2P technology."

\n

The Home edition costs $59.90 (one-time payment).\nThat's not much,\nbut I don't want to spend money on a syncing solution (at least not yet),\nso I'll skip Resilio Sync for now.\n(I don't even know if Resilio Sync would fit my needs.)

\n

Verdict: Resilio Sync costs money, so I won't even consider it for now.

\n

Next steps

\n

All right,\nFreeFileSync is my choice.

\n

After I have used it to have two copies of my important files,\nI want to:

\n
    \n
  1. Periodically (or preferably automatically)\nsync my current computer's hard drive and the external hard drive.
    2. \n
  2. Periodically (or preferably automatically)\nback up the files to an off-site location,\ne.g. to Backblaze B2.
    3. \n
\n

This way I'll satisfy the 3-2-1 back-up strategy:

\n\n

But I'm getting ahead of myself...\nI should start by installing FreeFileSync.

\n

Oh, but how about buying an external hard drive?\nYeah, I've already got one –\nI bought it 3 years ago for this purpose\nbut haven't even unboxed it yet. 🤡

\n","summary":"I'm looking for a software that does 2-way syncing\nbetween my MacBook's hard drive and an external hard drive.\nSyncthing vs rsync vs Unison vs FreeFileSync vs Resilio Sync...\noh my!","date_published":"2022-10-15T12:00:00+03:00","tags":["Cool tools"]},{"id":"https://mtsknn.fi/blog/git-stash-unstaged/","url":"https://mtsknn.fi/blog/git-stash-unstaged/","title":"Stashing only unstaged changes in Git","content_html":"

git stash -k doesn't work as expected.\nUse a temporary commit instead.

\n

Non-solution

\n
git stash -k  # -k = --keep-index\n
\n

What this does:

\n\n

Solution

\n

Using my Git aliases:

\n
    \n
  1. git c -m wip to create a temporary commit
    2. \n
  2. git stash to stash the remaining (unstaged/uncommitted) changes\n\n
    3. \n
  3. git undo to undo the previous commit\n(the temporary commit done in step 1)\n\n
    4. \n
\n

If not using my Git aliases:

\n\n

Source of the solution:\nStephen Hanson's answer on Stack Overflow.

\n

My point is that my Git aliases make the solution even nicer,\nespecially git undo since I can't remember the underlying command,\nplus git reset is scary (but the alias makes it less scary).

\n","summary":"`git stash -k` doesn't work as expected.\nUse a temporary commit instead.","date_published":"2022-10-12T12:00:00+03:00","tags":["Git"]},{"id":"https://mtsknn.fi/blog/coin-combinations-puzzle/","url":"https://mtsknn.fi/blog/coin-combinations-puzzle/","title":"JS solutions to the \"coin combinations\" interview puzzle","content_html":"

"Given an array of coins and a target amount,\nreturn all combinations of coins that add up to the amount,\nor an empty array if no such combinations exist."

\n

Example inputs and outputs

\n
let coins = [1, 2, 1, 5, 5, 10]\nlet amount = 12\ngetCoinCombinations(coins, amount)\n//=> [[1, 1, 5, 5],  [1, 1, 10],  [2, 5, 5],  [2, 10]]\n\ncoins = [2, 5, 5, 5]\namount = 13\ngetCoinCombinations(coins, amount)\n//=> []\n
\n

A slight variation to the puzzle is to return only one valid combination:

\n
let coins = [1, 2, 1, 5, 5, 10]\nlet amount = 12\ngetCoinCombination(coins, amount)\n// Any of the following is valid:\n//=> [1, 1, 5, 5]\n//=> [1, 1, 10]\n//=> [2, 5, 5]\n//=> [2, 10]\n
\n

Let's solve both puzzles.

\n

Why though

\n

It was fun to solve this!

\n

Initial naive solution

\n
    \n
  1. Find all possible coin combinations.\n\n
    2. \n
  2. Filter out the combinations whose sum doesn't match the target amount.
    3. \n
\n

Getting all combinations

\n
const coins = [1, 2, 1, 5, 5, 10]\nconst amount = 12\n\nconst getCoinCombinations = (coins, amount) =>\n  getCombinations(coins).filter((combo) => sum(combo) === amount)\n\nconst sum = (numbers) => numbers.reduce((a, b) => a + b, 0)\n\n// Via https://mtsknn.fi/blog/js-array-item-combinations/\nconst getCombinations = (items) =>\n  items.reduce((combos, item) => {\n    const newCombos = combos.map((combo) => combo.concat(item))\n    combos.push([item], ...newCombos)\n    return combos\n  }, [])\n
\n

Getting a single combination

\n

Change .filter() to .find() and fall back to an empty array:

\n
const getCoinCombination = (coins, amount) =>\n  getCombinations(coins).find((combo) => sum(combo) === amount) || []\n
\n

Why this is nice

\n\n

Why this is naive

\n\n

Better solution for getting all combinations

\n

Starting point

\n

Here's the initial solution\nbut without the separate getCombinations function:

\n
const getCoinCombinations = (coins, amount) =>\n  coins\n    .reduce((combos, coin) => {\n      const newCombos = combos.map((combo) => combo.concat(coin))\n      combos.push([coin], ...newCombos)\n      return combos\n    }, [])\n    .filter((combo) => sum(combo) === amount)\n\nconst sum = (numbers) => numbers.reduce((a, b) => a + b, 0)\n
\n

Step 1

\n

Each combination in combos is an array of numbers (coins),\nand each combination's sum is calculated in the filter method.

\n

If the sums were calculated already in the reducer,\nthere would be no need to loop through each combination's coins in the filter method.

\n

This can be done by making each combination an object,\nlike { coins: [1, 2, 1, 5], sum: 9 }:

\n
const getCoinCombinations = (coins, amount) =>\n  coins\n    .reduce((combos, coin) => {\n      const newCombos = combos.map((combo) => ({\n        coins: combo.coins.concat(coin),\n        sum: combo.sum + coin,\n      }))\n\n      combos.push(\n        {\n          coins: [coin],\n          sum: coin,\n        },\n        ...newCombos\n      )\n\n      return combos\n    }, [])\n    .filter((combo) => combo.sum === amount)\n    .map((combo) => combo.coins)\n
\n

There's a new mapper function at the end,\nbut we'll deal with that soon.

\n

Step 2

\n

Does every combination need to be stored in combos?

\n

Example:

\n\n

Changing combos.map() to combos.forEach()\nallows conditionally pushing one valid combination at a time to combos:

\n
const getCoinCombinations = (coins, amount) =>\n  coins\n    .reduce((combos, coin) => {\n      combos.forEach((combo) => {\n        const newSum = combo.sum + coin\n        if (newSum <= amount) {\n          combos.push({\n            coins: combo.coins.concat(coin),\n            sum: newSum,\n          })\n        }\n      })\n\n      if (coin <= amount) {\n        combos.push({\n          coins: [coin],\n          sum: coin,\n        })\n      }\n\n      return combos\n    }, [])\n    .filter((combo) => combo.sum === amount)\n    .map((combo) => combo.coins)\n
\n

There's some duplication\n(the codes inside combos.forEach() and below it look very similar),\nbut we'll deal with that soon.

\n

Step 3

\n

combos contains both incomplete combinations like [2, 5] (sum 7)\nand complete combinations like [2, 5, 5] (sum 12).

\n

If incomplete and complete combinations were stored separately,\nthe filtering after the reducer would be unnecessary.

\n

This can be done by changing the accumulator array (combos)\nto an object that contains two arrays ({ complete: [], incomplete: [] }).\nNo need to store sums of the complete combinations (the sums should be equal to amount),\nso no need for the mapper function after the reducer either:

\n
const getCoinCombinations = (coins, amount) =>\n  coins.reduce(\n    (combos, coin) => {\n      combos.incomplete.forEach((combo) => {\n        const newSum = combo.sum + coin\n\n        if (newSum > amount) return\n\n        const newCoins = combo.coins.concat(coin)\n\n        if (newSum === amount) {\n          combos.complete.push(newCoins)\n        } else {\n          combos.incomplete.push({\n            coins: newCoins,\n            sum: newSum,\n          })\n        }\n      })\n\n      if (coin === amount) {\n        combos.complete.push([coin])\n      } else if (coin < amount) {\n        combos.incomplete.push({\n          coins: [coin],\n          sum: coin,\n        })\n      }\n\n      return combos\n    },\n    { complete: [], incomplete: [] }\n  ).complete\n
\n

Step 4

\n

Final step is to reduce duplication:

\n
const getCoinCombinations = (coins, amount) => {\n  return coins.reduce(\n    (combos, coin) => {\n      combos.incomplete.forEach((combo) => {\n        keepComboIfValid(combos, combo.coins, coin, combo.sum + coin)\n      })\n\n      keepComboIfValid(combos, [], coin, coin)\n\n      return combos\n    },\n    { complete: [], incomplete: [] }\n  ).complete\n\n  function keepComboIfValid(combos, previousCoins, coin, sum) {\n    if (sum > amount) return\n    const newCoins = previousCoins.concat(coin)\n    if (sum === amount) combos.complete.push(newCoins)\n    else combos.incomplete.push({ coins: newCoins, sum })\n  }\n}\n
\n

keepComboIfValid mutates the reducer function's accumulator object.\nBut I think that's OK\nbecause the mutations are restricted to the getCoinCombinations function,\nso the mutations are still local.\nRelated blog post:\nLocal mutations are all right.

\n

Potential misstep

\n

It would be tempting to simplify the keepComboIfValid function like this:

\n
// ⛔️ Nope\nconst getCoinCombinations = (coins, amount) => {\n  return coins.reduce(\n    (combos, coin) => {\n      combos.incomplete.forEach((combo) => {\n        keepComboIfValid(combos, {\n          coins: combo.coins.concat(coin),\n          sum: combo.sum + coin,\n        })\n      })\n\n      keepComboIfValid(combos, { coins: [coin], sum: coin })\n\n      return combos\n    },\n    { complete: [], incomplete: [] }\n  ).complete\n\n  function keepComboIfValid(combos, combo) {\n    if (combo.sum === amount) combos.complete.push(combo.coins)\n    else if (combo.sum < amount) combos.incomplete.push(combo)\n  }\n}\n
\n

However, this would be less efficient\nbecause new combinations are generated\nand then immediately discarded if they are not valid.

\n

Better solution for getting a single combination

\n

Similar to the previous code,\nbut:

\n\n
const getCoinCombination = (coins, amount) => {\n  const incompleteCombos = []\n\n  for (let coin of coins) {\n    if (coin > amount) continue\n    if (coin === amount) return [coin]\n\n    for (let i = 0, { length } = incompleteCombos; i < length; i++) {\n      const combo = incompleteCombos[i]\n      const newSum = combo.sum + coin\n      if (newSum > amount) continue\n      const newCoins = combo.coins.concat(coin)\n      if (newSum === amount) return newCoins\n      incompleteCombos.push({ coins: newCoins, sum: newSum })\n    }\n\n    incompleteCombos.push({ coins: [coin], sum: coin })\n  }\n\n  return []\n}\n
\n

Potential misstep

\n

These wouldn't work for the inner for loop\nbecause we are pushing to incompleteCombos inside the loop:

\n\n
for (let combo of incompleteCombos) {}\n\nfor (let i = 0; i < incompleteCombos.length; i++) {}\n
\n

Both of these would process the newly-pushed combinations,\nwhich would be incorrect.

\n

So, the length of incompleteCombos needs to be stored at the beginning of the looping.\nThese two are effectively the same,\nthe second one is just trying to be clever:

\n
for (let i = 0, length = incompleteCombos.length; i < length; i++) {}\n\nfor (let i = 0, { length } = incompleteCombos; i < length; i++) {}\n
\n","summary":"\"Given an array of coins and a target amount,\nreturn all combinations of coins that add up to the amount,\nor an empty array if no such combinations exist.\"","date_published":"2022-10-10T12:00:00+03:00","tags":["JavaScript"]},{"id":"https://mtsknn.fi/blog/local-mutations/","url":"https://mtsknn.fi/blog/local-mutations/","title":"Local mutations are all right","content_html":"

For example,\nmutating a reducer function's accumulator array can be better\nthan religiously avoiding mutations and returning only new arrays from the reducer.

\n

Example of a mutating code

\n

I recently published a blog post about\nhow to find all possible combinations of array items in JS.\nHere's the code:

\n
const getCombinations = (items) =>\n  items.reduce((combos, item) => {\n    const newCombos = combos.map((combo) => combo.concat(item))\n    combos.push([item], ...newCombos)\n    return combos\n  }, [])\n
\n

Notice how I'm mutating the accumulator array (combos) in the reducer function\nby pushing items to it?\nGasp!

\n

Mutations can easily lead to confusing code.\nHowever, not all mutations are bad.

\n

In this case,\nthe mutations are local –\nmutations of combos happen only inside the reducer function.\nKeeping track (mentally) of the mutations is easy.

\n

Avoiding that mutation

\n

The mutations could be avoided e.g. like this:

\n


  const getCombinations = (items) =>\n  items.reduce(\n    (combos, item) =>\n      combos.concat([[item], ...combos.map((combo) => combo.concat(item))]),\n    []\n  )\n
\n

Look ma, no mutation!\n(combos.concat() returns a new array instead of mutating the existing array.)

\n

Or like this:

\n


     const getCombinations = (items) =>\n  items.reduce(\n    (combos, item) => [\n      ...combos,\n      [item],\n      ...combos.map((combo) => combo.concat(item)),\n    ],\n    []\n  )\n
\n

But both non-mutating versions are actually horrible:

\n

Inefficient

\n

A new accumulator array is created on each iteration.\nIt doesn't matter with short input arrays,\nbut it does matter with longer input arrays.

\n

In my solution to the Advent of Code 2015/03 puzzle,\nI found that using the spread syntax made my code a hundred times slower (on my machine)\ncompared to mutating the accumulator array –\n10ms vs 1,000ms.\n(Advent of Code puzzles typically have large inputs.)

\n

Less readable

\n

In the first version (using combos.concat()),\nit's difficult to see at a glance what the non-mutating one-liner is doing.

\n

Prettier also insists on formatting the reducer function's body on a single line.\nThe following would be clearer (but still not as clear as the non-mutating version):

\n



     const getCombinations = (items) =>\n  items.reduce(\n    (combos, item) =>\n      // prettier-ignore\n      combos.concat([\n        [item],\n        ...combos.map((combo) => combo.concat(item)),\n      ]),\n    []\n  )\n
\n

The second version (no combos.concat()) is better\nbut still not great (debatable, I guess).

\n

Unnecessary

\n

The accumulator value is quite meant to be mutated –\nyou create an array or an object to which you accumulate values on every iteration.

\n

Saying that the accumulator is meant to be mutated is a bold statement,\nso I checked what MDN says about array reducers in JS\n(emphasis added by me):

\n
\n

reduce() is a central concept in functional programming,\nwhere it's not possible to mutate any value,\nso in order to accumulate all values in an array,\none must return a new accumulator value on every iteration.\nThis convention propagates to JavaScript's reduce():\nyou should use spreading\nor other copying methods\nwhere possible\nto create new arrays and objects as the accumulator,\nrather than mutating the existing one. [...]

\n
\n

Eh...\nI respect the MDN docs,\nbut I don't buy that.\nIf you are aiming for maximum purity etc.,\nthen maybe yeah.\nBut I would prefer performance and clarity to a rigid functional programming mindset.

\n

I wanted more opinions (:D),\nso I googled "js reduce mutate accumulator"\nand found Is mutating accumulator in reduce function considered bad practice? on Stack Overflow.\nThe currently highest-scored answer by "customcommander" has a nice summary:

\n
\n

It isn't [a bad practice] if you own the accumulator.

\n
\n

And that's quite much what I mean by local mutations:

\n\n

If the accumulator is coming from elsewhere,\nit's easy to shallow-copy it to avoid non-local mutations:

\n





 






 array.reduce(\n  (acc, val) => {\n    // ...\n    return acc\n  },\n  { ...objectComingFromElsewhere }\n)\n\narray.reduce(\n  (acc, val) => {\n    // ...\n    return acc\n  },\n  [...arrayComingFromElsewhere]\n)\n
\n

But be wary of deep mutations,\nor do a deep clone instead.

\n

Conclusion

\n

I'll conclude by quoting the last two paragraphs\nof a relevant article\nby the author of the aforementioned Stack Overflow answer (two commas added by me for clarity):

\n
\n

Uncontrolled access to shared state can lead to complex bugs\nwhich is why immutability is so dear to functional programmers.\nHowever,\nimmutability isn't only achieved through the cloning of data,\nin fact this is most likely to be a naive approach to it.\nImmutability is a quality of a data structure,\nnot a process per se.

\n

In this particular case\nthe initial value of the reducing function is safe to mutate.\nThe spread operator offers no additional protection against side effects.

\n
\n

In other words:\nlocal mutations are all right.

\n","summary":"For example,\nmutating a reducer function's accumulator array can be better\nthan religiously avoiding mutations and returning only new arrays from the reducer.","date_published":"2022-10-04T12:00:00+03:00","tags":["Clean code","JavaScript"]},{"id":"https://mtsknn.fi/blog/js-array-item-combinations-part-2/","url":"https://mtsknn.fi/blog/js-array-item-combinations-part-2/","title":"Generating permutations of large arrays is complex","content_html":"

That's because it would take a very long time,\nand at some point you would have so many permutations\nthat they wouldn't fit in an array.

\n

Starting point

\n

By "array permutations" I'm referring to my blog post from yesterday:\nGenerating array permutations with all lengths in JS.

\n

Here's the code:

\n
const getPermutations = (items) =>\n  items.reduce((permutations, item) => {\n    const newPermutations = permutations.map((permutation) =>\n      permutation.concat(item)\n    )\n    permutations.push([item], ...newPermutations)\n    return permutations\n  }, [])\n\ngetPermutations([1, 2, 3])\n//=> [[1],  [2],  [1, 2],  [3],  [1, 3],  [2, 3],  [1, 2, 3]]\n
\n

RangeErrors

\n

The code throws if the input array's length is too long.\nIn Firefox the limit is 20:

\n
getPermutations(Array.from({ length: 19 })) // OK\ngetPermutations(Array.from({ length: 20 })) // RangeError\n
\n\n

Firefox's error message seems more helpful\nsince the problem is that permutations.push() is called with too many arguments.\nIn Firefox the limit is 500,000 items:

\n
;[].push(...Array(500_000)) // OK\n;[].push(...Array(500_001)) // RangeError\n
\n

Avoiding RangeErrors

\n

We could try to avoid the problem by avoiding the spread syntax altogether:

\n
 const getPermutations = (items) =>\n   items.reduce((permutations, item) => {\n-    const newPermutations = permutations.map((permutation) =>\n-      permutation.concat(item)\n-    )\n-    permutations.push([item], ...newPermutations)\n\n+    permutations.forEach((permutation) =>\n+      permutations.push(permutation.concat(item))\n+    )\n+    permutations.push([item])\n\n     return permutations\n   }, [])\n
\n

(I thought that this would also increase performance,\nbut it doesn't seem to.\nMakes sense though:\nwe do avoid iterating through newPermutations which is good,\nbut now we are calling permutations.push() many more times with only one argument.)

\n

It's slow

\n

Now larger input arrays work,\nbut getting permutations for large input arrays is increasingly slow:

\n
console.time()\ngetPermutations(Array.from({ length: 20 }))\nconsole.timeEnd() //=> ~200ms (on my machine)\n\nconsole.time()\ngetPermutations(Array.from({ length: 21 }))\nconsole.timeEnd() //=> ~400ms (on my machine)\n\nconsole.time()\ngetPermutations(Array.from({ length: 22 }))\nconsole.timeEnd() //=> ~800ms (on my machine)\n\nconsole.time()\ngetPermutations(Array.from({ length: 23 }))\nconsole.timeEnd() //=> ~1800ms (on my machine)\n\nconsole.time()\ngetPermutations(Array.from({ length: 24 }))\nconsole.timeEnd() //=> ~4200ms (on my machine)\n
\n

Ain't nobody got time to wait that long!

\n

The input array's length is still limited

\n

In Firefox,\nthe maximum length of an array seems to be 2 ** 32 - 1:

\n
Array(2 ** 32 - 1) // OK\nArray(2 ** 32) // RangeError: invalid array length\n
\n

The length of the array returned by getPermutations(items)\nis incidentally 2 ** items.length - 1:

\n
getPermutations(Array.from({ length: 1 })).length === 2 ** 1 - 1 // true\ngetPermutations(Array.from({ length: 2 })).length === 2 ** 2 - 1 // true\ngetPermutations(Array.from({ length: 3 })).length === 2 ** 3 - 1 // true\n// ...\ngetPermutations(Array.from({ length: 10 })).length === 2 ** 10 - 1 // true\ngetPermutations(Array.from({ length: 11 })).length === 2 ** 11 - 1 // true\ngetPermutations(Array.from({ length: 12 })).length === 2 ** 12 - 1 // true\n// ...and so on\n
\n

(Math for calculating the total number of permutations.)

\n

In other words,\nthe maximum length of the input array is 32.

\n

But input arrays that long would be impractical\nsince getting all permutations would take way too long.\nPlus there would be quite many permutations:\n2 ** 32 - 1 = 4,294,967,295.\nOver 4 billion!

\n

Think of alternatives

\n

Okay,\nso the input array's length is limited to 32 (in Firefox at least),\nand getting all permutations would take a very long time,\nso think:

\n\n

Some pointers:

\n\n","summary":"That's because it would take a very long time,\nand at some point you would have so many permutations\nthat they wouldn't fit in an array.","date_published":"2022-10-03T12:00:00+03:00","date_modified":"2023-11-02T12:00:00+03:00","tags":["JavaScript"]},{"id":"https://mtsknn.fi/blog/js-array-item-combinations/","url":"https://mtsknn.fi/blog/js-array-item-combinations/","title":"Generating array permutations of all lengths in JS","content_html":"

Example:\nconverting [1, 2, 3]\ninto [[1],  [2],  [1, 2],  [3],  [1, 3],  [2, 3],  [1, 2, 3]].

\n

Why?

\n

I recall needing this a few times,\nmaybe when solving Advent of Code puzzles.

\n

Plus I really like my solution.\nI find it straightforward,\nmaybe even obvious now.\nBut it took me a while to come up with it –\nmy first attempts were much more complex and didn't even work properly –\nand maybe that's why I'm keen on this simple solution.

\n

Example input and output

\n
const array = [1, 2, 3, 4]\ngetPermutations(array)\n/* =>\n  [\n    [1],\n    [2],\n    [1, 2],\n    [3],\n    [1, 3],\n    [2, 3],\n    [1, 2, 3],\n    [4],\n    [1, 4],\n    [2, 4],\n    [1, 2, 4],\n    [3, 4],\n    [1, 3, 4],\n    [2, 3, 4],\n    [1, 2, 3, 4],\n  ]\n*/\n
\n

Code

\n
const getPermutations = (items) =>\n  items.reduce((permutations, item) => {\n    const newPermutations = permutations.map((permutation) =>\n      permutation.concat(item)\n    )\n    permutations.push([item], ...newPermutations)\n    returnpermutations\n  }, [])\n
\n

Probably not the most efficient solution,\nbut straightforward and easy.\nAnd no for loops!

\n

Order of permutations

\n

The order of the final permutations change\nif you change the order of the push method's arguments:

\n






 

 






 

 const items = [1, 2, 3]\n\nitems.reduce((permutations, item) => {\n  const newPermutations = permutations.map((permutations) =>\n    permutations.concat(item)\n  )\n  permutations.push([item], ...newPermutations)\n  return permutations\n}, [])\n//=> [[1],  [2],  [1, 2],  [3],  [1, 3],  [2, 3],  [1, 2, 3]]\n\n// versus\n\nitems.reduce((permutations, item) => {\n  const newPermutations = permutations.map((permutations) =>\n    permutations.concat(item)\n  )\n  permutations.push(...newPermutations, [item])\n  return permutations\n}, [])\n//=> [[1],  [1, 2],  [2],  [1, 3],  [1, 2, 3],  [2, 3],  [3]]\n
\n

In some cases the order might matter.

\n

Beware too large input arrays

\n

The code doesn't work if the input array's length is 20+:

\n
getPermutations(Array.from({ length: 19 })) // OK\ngetPermutations(Array.from({ length: 20 })) // RangeError\n
\n

More details in Part 2:\nGenerating permutations of large arrays is complex.

\n

Mutation

\n

Notice how I'm mutating the accumulator array (permutations)\nin the reducer function?

\n

Mutations can be bad,\nbut in this case they are okay,\nbecause local mutations are all right.

\n","summary":"Example:\nconverting `[1, 2, 3]`\ninto `[[1],  [2],  [1, 2],  [3],  [1, 3],  [2, 3],  [1, 2, 3]]`.","date_published":"2022-10-02T12:00:00+03:00","date_modified":"2023-05-01T12:00:00+03:00","tags":["JavaScript"]},{"id":"https://mtsknn.fi/blog/unreplied/","url":"https://mtsknn.fi/blog/unreplied/","title":"I want a chat app with an \"unreplied\" message state","content_html":"

Most chat apps have an "unread" message state\nto keep track of messages I haven't read yet.\nWhy isn't there a different state for messages I haven't replied to yet?

\n

I chat with my bro a lot.\nWe always have several conversations ongoing at the same time.

\n

We currently use Telegram,\nso all messages are in a single big list.

\n

When replying to his messages,\nI basically have two options:

\n\n

And sometimes I want to start a new conversation\nand not reply to any previous messages.\nThis alone makes keeping track of replied/unreplied messages difficult.

\n

We have previously tried a private Discord server with several channels –\none main topic per channel, e.g. "dev" or "health."\nHaving several channels helps a bit, but the core problem is still the same:\nit's difficult to keep track of replied/unreplied messages in each channel.

\n

One level deep sub-threads (like on Discord or Slack) don't help either:\nit's difficult to keep track of replied/unreplied messages in each sub-thread.\nSub-threads might even make things more confusing.

\n

A tree-like message structure (like on Reddit or Hacker News) could help organize messages\nbecause not all messages would be in a single big list (or several big lists if using channels),\nbut it wouldn't solve the problem of keeping track of replied/unreplied messages.\nPlus maybe a tree-like structure would get in the way of quick, comfortable chatting.

\n

So here's what I want:

\n\n

Maybe I should create my own chat app. 🤷‍♂️

\n","summary":"Most chat apps have an \"unread\" message state\nto keep track of messages I haven't read yet.\nWhy isn't there a different state for messages I haven't replied to yet?","date_published":"2022-09-28T12:00:00+03:00","tags":["Miscellaneous"]},{"id":"https://mtsknn.fi/blog/ltex/","url":"https://mtsknn.fi/blog/ltex/","title":"LTeX: grammar/spell checker on steroids for VS Code","content_html":"

Doesn't only look for typos\nbut for grammar and style issues as well.\nNot to be confused with LaTeX.

\n

About LTeX

\n

LTeX is a grammar/spell checker for VS Code.\nIt uses LanguageTool under the hood\nand supports LaTeX, Markdown and more.

\n

I have been using LTeX for half a year now.\nIt's great!

\n

Note that LTeX is not the same as LaTeX, the "document preparation system."

\n

Check out the LTeX extension for VS Code

\n

Pros

\n\n

Cons

\n\n","summary":"Doesn't only look for typos\nbut for grammar and style issues as well.\nNot to be confused with LaTeX.","date_published":"2022-09-20T12:00:00+03:00","tags":["Cool tools","English","VS Code"]},{"id":"https://mtsknn.fi/blog/linen-bedclothes/","url":"https://mtsknn.fi/blog/linen-bedclothes/","title":"Linen bedclothes are the best","content_html":"

I recently switched from linen bedclothes (sheets, pillowcases, duvet covers)\nback to cotton bedclothes –\nbad idea.\nMy sleep quality took a drastic hit.

\n

Sometimes you notice the importance of something only after losing that thing.\nThis is such a case.[1]

\n

I have been using linen bedclothes for almost two years.

\n

Recently I started using a second set of bedclothes to make laundry days easier –\nno need to wash the bedclothes first thing in the morning if I have more than one set of bedclothes.[2]

\n

However, the second set of bedclothes is made of cotton.\nI didn't remember how bad cotton bedclothes are:

\n\n

It's possible that not all cotton bedclothes are bad,\nbut mine are.

\n

Last night I slept again with my linen bedclothes – and boy are they wonderful!\nI'll ditch the cotton bedclothes as soon as I have ordered a second set of linen bedclothes\n(so hopefully before next year).

\n\n
\n
\n

\n Footnotes\n

\n
    \n

  1. I didn't lose my linen bedclothes.\nI lost my higher quality sleep for a while. ↩

    \n
    2. \n

  2. It's not a big deal to wash the bedclothes first thing in the morning,\nbut if you forget and do it later in the day,\nthey might not get dry enough before the night. ↩

    \n
    3. \n
\n
\n","summary":"I recently switched from linen bedclothes (sheets, pillowcases, duvet covers)\nback to cotton bedclothes –\nbad idea.\nMy sleep quality took a drastic hit.","date_published":"2022-09-17T12:00:00+03:00","tags":["Sleep"]},{"id":"https://mtsknn.fi/blog/netlify-updating-private-git-submodule/","url":"https://mtsknn.fi/blog/netlify-updating-private-git-submodule/","title":"Updating a private Git submodule before builds in Netlify","content_html":"

Automatically updating a private Git submodule before builds is convenient\nbut requires some setup.

\n

Why a private Git submodule

\n

My website is open source,\nbut the blog posts and other content reside in a separate, private Git repo.

\n

Tania Rascia explains her rationale for her similar setup in her blog post\nUsing Git Submodules for Private Content:

\n
\n

My website has been open source for as long as it has existed.\nOriginally, it was a WordPress site,\nbut only the layout was out there for everyone to see\nsince the data was saved in a database.\nOnce I moved to Gatsby,\nI kept all the images and posts in a content directory.\nThis was way better,\nas my content is all conveniently stored in one easy-to-save folder\nand the posts are all in beautiful markdown.

\n

However,\npeople often like my layout and want to use it,\nso they clone and deploy this site.\nSometimes they will just leave up all the posts and images and update the name and image.\nAlthough I subscribe to the Zenhabits Uncopyright philosophy towards content –\nmy content is out there for the world to see and do what they want with it, and it doesn't bother me –\nI don't think I should make it quite so easy to just clone everything I've written in a moment.\nIf you're going to plagiarize,\nyou should at least have to do a bit of work.

\n
\n

Another benefit:\nI can store my sloppy drafts and scheduled posts in my private Git repo\nso that no one can see them (except me of course).

\n

Why automatic updating

\n

From the summary of the aforementioned blog post by Tania Rascia:

\n
\n

My current process for updating the site looks like:

\n
    \n
  1. Make changes to content repo.
    2. \n
  2. Commit changes to content and push to private submodule hosted on GitHub:\ngit commit && git push.
    3. \n
  3. Pull new updates into local taniarascia.com repo:\ngit submodule update --remote.
    4. \n
  4. Commit the new submodule changes and push to public GitHub repo:\ngit commit && git push.
    5. \n
  5. Netlify deploys the new site.
    6. \n
\n
\n

That's cool,\nbut I don't want to update my website repo after modifying my content repo.\nMy process looks like this:

\n
    \n
  1. Same as above.\n(Make changes to content repo.)
    2. \n
  2. Same as above.\n(Commit changes to content and push to private submodule hosted on GitHub:\ngit commit && git push.)
    3. \n
  3. Netlify deploys the new site automatically on the next day\nbecause I have set up\nautomatic daily Netlify builds using GitHub Actions.\nAlternatively I can manually trigger a build on the Netlify dashboard\nif I want the content changes to go live immediately (in a few minutes).
    4. \n
\n

There are two benefits to this way of working:

\n\n

My website repo points to a commit from 1st Jan 2021 on the content repo,\nmeaning that I haven't needed an "update content submodule" commit on the website repo\nin almost two years.\nThis is possible because\nNetlify automatically updates the private Git submodule (i.e. pulls the latest changes)\nbefore it builds the site.

\n

How-to

\n

First,\ncheck out the aforementioned blog post by Tania Rascia.\nIt's a good primer on the subject.

\n

When you have a private Git submodule set up,\nhere are pointers how to make Netlify automatically update it before builds.\nThese pointers are based on a support guide on Netlify Support Forums,\nbut I had to trial and error quite a bit before I got it all working.

\n

Deploy key + SSH key

\n

You need to add two keys on your private Git repo's settings page on GitHub:

\n\n

Steps:

\n
    \n
  1. Generate a new SSH key\n\n
    2. \n
  2. Add the public key (the shorter one) as a read-only deploy key\non your private repo's settings page on GitHub\n\n
    3. \n
\n

Note:

\n\n

Environment variable

\n

Add the private SSH key (the longer one)\nto your Netlify site's environment variables.\nBefore that though you need to modify the key\nbecause environment variables are single-line (not multi-line).

\n

Your private key looks something like this:

\n
-----BEGIN OPENSSH PRIVATE KEY-----\nn4bQgYhMfWWaL+qgxVrQFaO/TxsrC4Is\n...\n-----END OPENSSH PRIVATE KEY-----\n
\n

Replace the newlines with underscores (e.g. in VS Code or Notepad)\nso that it looks like this:

\n
-----BEGIN OPENSSH PRIVATE KEY-----_n4bQgYhMfWWaL+qgxVrQFaO/TxsrC4Is_..._-----END OPENSSH PRIVATE KEY-----_\n
\n

Note: it doesn't matter whether the private key has a trailing underscore or not.

\n

Bash script

\n

To let Netlify use the SSH key from the environment variables,\ncreate a file called e.g. netlify-setup.sh\nand save it to the website repo's root:

\n
#!/usr/bin/env bash\n\n# Credit goes to fool and hongaar at\n# https://community.netlify.com/t/support-guide-using-an-ssh-key-via-environment-variable-during-build/2457\n\n# Check if we're running in a Netlify environment\n# See https://www.netlify.com/docs/continuous-deployment/#environment-variables\nif [ ! -z \"${DEPLOY_PRIME_URL}\" ]; then\n    # Init .ssh dir and expand $SSH_KEY\n    mkdir -p ~/.ssh\n    echo -e \"${SSH_KEY//_/\\\\n}\" > ~/.ssh/id_rsa\n    chmod og-rwx ~/.ssh/id_rsa\n\n    # Uncomment to debug\n    # ls -la ~/.ssh\n    # cat ~/.ssh/id_rsa\n\n    # Add host keys\n    ssh-keyscan -H github.com >> ~/.ssh/known_hosts\nfi;\n
\n

Build command

\n

Last step!\nModify your build command (e.g. npm run build)\nto first run the Bash script,\nthen update the private Git submodule,\nand then build the site.

\n

There might be several ways to do this.\nI did it by specifying this as my build command in the netlify.toml file:

\n\n
[build]\n  command = \"\"\"\n    bash ./netlify-setup.sh &&\n    GIT_SSH_COMMAND=\"ssh -o UserKnownHostsFile=/dev/null -o StrictHostKeyChecking=no\" \\\n      git submodule update --init --remote &&\n    npm run build\n  \"\"\"\n
\n","summary":"Automatically updating a private Git submodule before builds is convenient\nbut requires some setup.","date_published":"2022-09-15T12:00:00+03:00","tags":["Git","Netlify"]},{"id":"https://mtsknn.fi/blog/mortgage-calculator/","url":"https://mtsknn.fi/blog/mortgage-calculator/","title":"Mortgage calculations in JS: annuity and fixed principal","content_html":"

Instead of spending 5 minutes to look for and use an existing mortgage calculator,\nI wasted time figuring out how to do the calculations from scratch.

\n

Annuity vs fixed principal

\n\n

I recall reading recently that annuity is used in like 99% of mortgages in Finland.\nI can't find that article anymore though,\nso I don't know if it's actually 99% or more like 90%.

\n

Btw, MathJax

\n

Enable MathJax by clicking the button below\nfor a better reading experience.\nIt's opt-in because it's a largish download (300+ KB).

\n\n

\n\n

(It would be nice to run MathJax during the website's build process,\nbut I'm too lazy to do that now.\nI just want to publish this post.)

\n

Annuity

\n

Wikipedia has a clear annuity formula:

\n

$$\nA =\n\\frac{P \\times i}\n{(1 - (1 + i)^{-n})}\n$$

\n

Where:

\n\n

On that same Wikipedia page,\nthere's a formula for calculating the remaining loan amount after \\(t\\) months\n(function \\(p(t)\\)):

\n

$$\np(t) = Pr^t - A \\frac{r^t - 1}{r - 1}\n$$

\n

Where:

\n

$$r = 1 + i$$

\n

It's clearer to use \\(1 + i\\) in place of \\(r\\):

\n

$$\np(t) = P(1 + i)^t - A \\frac{(1 + i)^t - 1}{(1 + i) - 1}\n$$

\n

Because now we can simplify \\((1 + i) - 1\\) to just \\(i\\):

\n

$$\np(t) = P(1 + i)^t - A \\frac{(1 + i)^t - 1}{i}\n$$

\n

In JavaScript,\nwith an opening fee and extra monthly fees (not included in the formulas above):

\n
const calculateAnnuity = ({\n  loanAmount,\n  monthlyFee,\n  monthlyInterestPercentage,\n  months,\n  openingFee,\n}) => {\n  const monthlyAnnuity =\n    (loanAmount * monthlyInterestPercentage) /\n    (1 - (1 + monthlyInterestPercentage) ** -months)\n\n  const monthlyPayment = monthlyAnnuity + monthlyFee\n  const totalPayable = openingFee + monthlyPayment * months\n  const totalFees = totalPayable - loanAmount\n\n  const loanAmountLeftAfterOneYear =\n    loanAmount * (1 + monthlyInterestPercentage) ** 12 -\n    monthlyAnnuity *\n      (((1 + monthlyInterestPercentage) ** 12 - 1) / monthlyInterestPercentage)\n\n  return {\n    monthlyPayment,\n    totalPayable,\n    totalFees,\n    loanAmountLeftAfterOneYear,\n  }\n}\n
\n

Fixed principal

\n

The formulas are much simpler\nbecause the monthly principal amount is fixed:

\n\n

In JavaScript:

\n
const calculateFixedPrincipal = ({\n  loanAmount,\n  monthlyFee,\n  monthlyInterestPercentage,\n  months,\n  openingFee,\n}) => {\n  const monthlyPrincipal = loanAmount / months\n\n  const monthlyPayments = Array.from({ length: months }, (_, monthIndex) => {\n    const interest =\n      (loanAmount - monthlyPrincipal * monthIndex) * monthlyInterestPercentage\n    return monthlyPrincipal + interest + monthlyFee\n  })\n  const firstMonthPayment = monthlyPayments[0]\n  const lastMonthPayment = monthlyPayments.at(-1)\n\n  const sum = (array) => array.reduce((a, b) => a + b, 0)\n  const totalPayable = openingFee + sum(monthlyPayments)\n\n  const totalFees = totalPayable - loanAmount\n  const loanAmountLeftAfterOneYear = loanAmount - monthlyPrincipal * 12\n\n  return {\n    firstMonthPayment,\n    lastMonthPayment,\n    totalPayable,\n    totalFees,\n    loanAmountLeftAfterOneYear,\n  }\n}\n
\n

Example

\n
const referenceRate = 1.482 // E.g. Euribor 12\nconst margin = 0.55\n\nconst specs = {\n  loanAmount: 135_000,\n  monthlyFee: 2.5,\n  monthlyInterestPercentage: (referenceRate + margin) / 12 / 100,\n  months: 25 * 12,\n  openingFee: 150,\n}\n\ncalculateAnnuity(specs)\n//=> {\n//   monthlyPayment:                 576.81,\n//   totalPayable:               173_192.65,\n//   totalFees:                   38_192.65,\n//   loanAmountLeftAfterOneYear: 130_812.64,\n// }\n\ncalculateFixedPrincipal(specs)\n//=> {\n//   firstMonthPayment:              681.10,\n//   lastMonthPayment:               453.26,\n//   totalPayable:               170_304.30,\n//   totalFees:                   35_304.30,\n//   loanAmountLeftAfterOneYear: 129_600.00,\n// }\n
\n

As you can see,\nfixed principal is more expensive in the beginning\nbut cheaper in the long term (less total fees).\nAlso, at some point the monthly payments become less than in annuity.

\n

Thoughts

\n

At first I though that fixed principal would be better\nbecause it incurs less total fees,\nbut on the other hand:

\n\n

Here's why I wanted to calculate how much of the loan amount would be left after one year:

\n\n

To help me choose:

\n\n

I think I might go with annuity.

\n

Demo

\n

I started building a calculator for comparing mortgages but lost interest quite quickly,\nso here's a half-baked demo:

\n

Mortgage calculator on flems.io

\n","summary":"Instead of spending 5 minutes to look for and use an existing mortgage calculator,\nI wasted time figuring out how to do the calculations from scratch.","date_published":"2022-09-13T12:00:00+03:00","tags":["JavaScript"]},{"id":"https://mtsknn.fi/blog/js-read-only-array-sort/","url":"https://mtsknn.fi/blog/js-read-only-array-sort/","title":"Sorting a read-only array is OK if it has only 1 or 0 items","content_html":"

Huh.\nBut if the array has 2+ items,\nattempting to sort it will cause a TypeError.

\n

Example 1

\n
Object.freeze([]).sort() // OK\nObject.freeze(['a']).sort() // OK\nObject.freeze(['a', 'b']).sort() // TypeError\n
\n

Errors in different browsers:

\n\n

Example 2

\n
const arr = []\narr[1] = 'b'\nObject.freeze(arr)\narr.sort() // TypeError\n
\n

The errors are slightly different:

\n\n

Pondering

\n

I use mainly Firefox.\nIts error message "0 is read-only" is not very enlightening,\nso when investigating a related bug,\nI didn't grasp at first that the problem was about a read-only array.\nMeh.

\n

If an array is empty or has only one item,\nsorting the array won't modify the array\nbecause there are not enough items to move around.\nSo no error even if the array is read-only.\nMakes sense but was surprising (hence this blog post).

\n

On the other hand:\nif a read-only array has 2+ items and is already sorted,\ntrying to sort it causes a TypeError,\neven though the array is already sorted!\nMakes sense but is also mildly confusing –\nwhy is the array being modified if it's already sorted?

\n

If a read-only array has only empty slots,\nsorting it is OK,\nwhich is weird:

\n
const arr = Object.freeze(Array(3))\narr.length //=> 3\narr.sort() // OK but weird\n
\n

Fix 1

\n

The sort() method\nsorts an array in-place,\ni.e. sorting an array modifies it.

\n

You might want to\nfirst copy the array with slice()\nand then sort the copied array:

\n
const arr = Object.freeze(['a', 'b'])\narr.sort() // TypeError\narr.slice().sort() // OK\n
\n

Fix 2

\n

TypeScript would have spotted the error for me right away:

\n
const arr = Object.freeze(['a', 'b'])\narr.sort()\n//  ^? Property 'sort' does not exist on type 'readonly string[]'.\n
\n

On the other hand,\nthe TypeScript compiler doesn't seem to know that sorting a read-only array is OK\nif the array has only 1 or 0 items:

\n
const arr = Object.freeze(['a'])\narr.sort()\n//  ^? Property 'sort' does not exist on type 'readonly string[]'.\n\n// 👆 Compile-time error but no runtime error, so 🤷‍♂️\n
\n

Ha! 😄

\n

On a serious note:\nI think it's better that the TypeScript compiler always disallows sorting read-only arrays.

\n","summary":"Huh.\nBut if the array has 2+ items,\nattempting to sort it will cause a TypeError.","date_published":"2022-09-01T12:00:00+03:00","tags":["JavaScript","TypeScript"]},{"id":"https://mtsknn.fi/blog/tongue-position/","url":"https://mtsknn.fi/blog/tongue-position/","title":"Correct tongue position in 3 steps","content_html":"

Say "n" and cluck and relax. Easy!\nCorrect tongue position makes nasal breathing easier.

\n

Step 1: Find the right spot for the tip of the tongue

\n

The right spot is in the roof of the mouth,\nbehind the upper front teeth.

\n

Saying the letter "n" aloud will guide the tip of the tongue to the right spot.

\n

Step 2: Place the rest of the tongue against the roof of the mouth

\n

Placing the whole tongue to the roof of the mouth\nwill pull down the roof of the mouth (i.e. the hard palate).\nThe roof of the mouth is also the floor of the nose,\nso this helps increase the nasal space,\nmaking breathing through the nose easier.

\n

One way to guide the whole tongue to the roof of the mouth\nis to cluck with your tongue.\n(Check the video link below for an example.)

\n

Step 3: Relax

\n

Keep your lips together gently.\nRelax the whole head as well:

\n\n

Bonus: Relax the diaphragm

\n

Keep the diaphragm relaxed as well\nand practice diaphragmatic breathing\nat all times.

\n

Video guide

\n

The three steps are from\na YouTube video called STOP Mouth Breathing – Try This\nthat I accidentally found when looking for something else.\n(I slightly expanded the 3rd step above and added the bonus step.)

\n

The video starts by explaining some benefits of nasal breathing.\nThe 3-step instructions start at 1:42 of the video.

\n

Why?

\n

Nasal breathing (i.e. breathing in and out through the nose) at all times\nis essential for your health.\n"At all times" includes breathing while sleeping and during exercise!

\n

If you are into running,\ntry running with the mouth closed.\nIt will be hard at first,\nbut try it for a month.\nI'm sure you'll like it so much more\nthat you'll never want to run with an open mouth anymore.

\n

The 2nd step is important

\n

I'm calling it out because\nI have been practicing nasal breathing for several years,\nbut I didn't know that the whole tongue should be against the roof of the mouth.\nWhoops. 🙉\nI just recently learned it from the video.

\n

Now nasal breathing without the 2nd step –\ni.e. with the tip of the tongue at the roof of the mouth\nbut the rest of the tongue hanging at the floor of the mouth –\nfeels somewhat weird.\nProbably because without the step the nasal space is reduced.

\n

Don't make the mistake that I was doing for several years. 🤙

\n","summary":"Say \"n\" and cluck and relax. Easy!\nCorrect tongue position makes nasal breathing easier.","date_published":"2022-08-16T12:00:00+03:00","tags":["Breathing","Health","Running"]},{"id":"https://mtsknn.fi/blog/running-vs-jogging/","url":"https://mtsknn.fi/blog/running-vs-jogging/","title":"Running vs jogging","content_html":"

Jogging is one type of running.\nWhen I run, I mostly jog,\nbut I still think I'm a runner, not a jogger.\nHuh?

\n

Here's one definition for jogging on Dictionary.com:

\n
\n

to run at a leisurely, slow pace, especially as an outdoor exercise

\n
\n

So, jogging is slow running.

\n

Jogging is running,\nbut not all running is jogging.\nFor example,\nsprinting is also running\n(but sprinting is not jogging).

\n

What is "slow running" is personal.\nIf you are running and feel that you could easily run faster,\nmaybe your current pace is a jogging pace (i.e. a slow pace).

\n

It doesn't matter much which word you use.\nThough sometimes the distinction can be useful\nas someone writes on Reddit:

\n
\n

I feel like they're interchangeable for the most part.

\n

But like,\nif I'm talking to a non-runner about my workouts for some reason,\nI might say something like\n"I'll run fast for a mile,\nthen jog for a half mile,\nand repeat that six times"\njust because I feel like they'll get that "jog" means "run slower" in that instance.

\n
\n

"Running" also sounds cooler than "jogging,"\nso I consider myself a runner,\neven though I almost always aim for easy runs.

\n","summary":"Jogging is one type of running.\nWhen I run, I mostly jog,\nbut I still think I'm a runner, not a jogger.\nHuh?","date_published":"2022-08-15T12:00:00+03:00","tags":["English","Running"]},{"id":"https://mtsknn.fi/blog/pocket-phone/","url":"https://mtsknn.fi/blog/pocket-phone/","title":"Stop keeping your phone in your pocket","content_html":"

A trouser pocket is way too easily reachable.\nI often find myself reaching for my phone automatically\neven if I don't have anything to do with the phone.

\n

Discipline

\n

Maybe you can reduce your phone usage with discipline,\nbut then it doesn't make sense to keep your phone one hand gesture away.\nIt won't be just about discipline anymore;\nit will also be about addiction and automatic habits.

\n

Addiction

\n

Addiction is easily more powerful than discipline.\nEspecially if you need to be disciplined all the time,\nlike if you have your phone always easily reachable (in your pocket).\nTrying to be disciplined all the time wastes mental energy.

\n

It doesn't make sense for a drug addict to keep drugs in their pocket.

\n

If you are addicted to your phone –\nand I think most people are –\nyou are a junkie and your phone is your drug.

\n

Automatic habits

\n

Taking a phone from your pocket is just one step:\nput your hand in your pocket and grab the phone.\nIt's easy to do that automatically,\nwithout even thinking about that.

\n

Trying to avoid automatic habits wastes mental energy too.\nInstead, make the habit impossible –\nkeep your phone away from your pocket.

\n

If you are at home,\nkeep your phone out of sight,\nlike in a closet behind doors\n(but not in your bedroom!).

\n

If you are elsewhere,\nkeep your phone in a back bag.\nTaking your phone now requires more than one step:\nfirst you have to take the bag from your back,\nthan open a zipper,\nand then can you grab the phone.\nDoing these steps probably isn't very automatic.

\n

A fanny pack would be cool too,\nthough I wonder if taking a phone from one would quickly become too easy and automatic.

\n","summary":"A trouser pocket is way too easily reachable.\nI often find myself reaching for my phone automatically\neven if I don't have anything to do with the phone.","date_published":"2022-08-04T12:00:00+03:00","tags":["NoSurf"]},{"id":"https://mtsknn.fi/blog/toggleable-react-state/","url":"https://mtsknn.fi/blog/toggleable-react-state/","title":"Toggleable React state with a 1-line `useReducer`","content_html":"

Say goodbye to useState\nand a silly toggler function calling the state setter.\nBe cool and use a tiny reducer instead.

\n

Example: "enabled" state

\n

Typical solution with useState

\n
function Component() {\n  const [enabled, setEnabled] = useState(true)\n  const toggleEnabled = () => setEnabled((previous) => !previous)\n\n  return <button onClick={toggleEnabled}>Toggle</button>\n}\n
\n

2 lines – so long and verbose!

\n

Cool solution with useReducer

\n

React's useReducer hook\ntakes a reducer function and an initial value:

\n
function Component() {\n  const [enabled, toggleEnabled] = useReducer((previous) => !previous, true)\n\n  return <button onClick={toggleEnabled}>Toggle</button>\n}\n
\n

Only 1 line.\nSo cool! 😎

\n

This is a bit cryptic at first,\nand maybe I wouldn't use it in any "real" code,\nbut I found this intriguing and wanted to share it.

\n

I picked this from\nTkDodo's blog post Things to know about useState\n(from the "Bonus 2" section).

\n

Another example: toggling a numeric value

\n

Toggling between 250 and 750:

\n
function Component() {\n  const [duration, toggleDuration] = useReducer(\n    (previous) => (previous + 500) % 1000,\n    250\n  )\n\n  return <button onClick={toggleDuration}>Toggle</button>\n}\n
\n

Whoops, 4 lines. 🥲\nBut I invented this myself! 😄

\n","summary":"Say goodbye to `useState`\nand a silly toggler function calling the state setter.\nBe cool and use a tiny reducer instead.","date_published":"2022-06-05T12:00:00+03:00","tags":["JavaScript","React"]},{"id":"https://mtsknn.fi/blog/auto-animate/","url":"https://mtsknn.fi/blog/auto-animate/","title":"1 line of code to animate element additions, removals and moves","content_html":"

AutoAnimate is a JS library that provides simple animations with no effort.\nWorks with Mithril.js, React and any other JS app.

\n

Highlights

\n\n

React.js example

\n

From AutoAnimate's website:

\n
import { useAutoAnimate } from '@formkit/auto-animate/react'\n\nfunction MyList() {\n  const [animationParent] = useAutoAnimate()\n  return <ul ref={animationParent}>{/* 🪄 Magic animations for your list */}</ul>\n}\n
\n

If the import statement is not counted,\nthat's only two lines of code.\nNice!

\n

(The Mithril.js example below works with only one line of code.)

\n

Empty <ul> is problematic

\n

If you don't want to render an empty <ul> element,\nyou need to use AutoAnimate on the <ul>'s parent element too:

\n
import { useAutoAnimate } from '@formkit/auto-animate/react'\n\nfunction MyList({ items }) {\n  const [parent] = useAutoAnimate()\n  const [list] = useAutoAnimate()\n\n  return (\n    <div ref={parent}>\n      {items.length > 0 && <ul ref={list}>{/* Render items */}</ul>}\n    </div>\n  )\n}\n
\n

But there's currently an open React-specific GitHub issue that\nAutoAnimate doesn't work with containers that are not initially rendered.

\n

Manual exit animations would be difficult

\n

Animating the removal of an element is tricky in React\nbecause when React removes an element from the DOM,\nthe element is removed immediately.\nThere's no time to run CSS animations.

\n

If I interpreted AutoAnimate's source code correctly,\nit animates element removal like this:

\n
    \n
  1. React (or whatever you're using) removes an element from the DOM.
    2. \n
  2. AutoAnimate adds the element back to the DOM!
    3. \n
  3. AutoAnimate triggers an animation for the element.
    4. \n
  4. AutoAnimate removes the element from the DOM\nafter the animation is finished.
    5. \n
\n

Sounds a bit hacky and risky to modify a React-rendered DOM like this,\nbut seems to work fine.\nQuite clever actually!

\n

Mithril.js example

\n

Mithril.js is so cool that you only need one line of code:

\n
import autoAnimate from '@formkit/auto-animate'\n\nfunction MyList() {\n  return {\n    view: () =>\n      m('ul', { oncreate: (vnode) => autoAnimate(vnode.dom) }, [\n        // Render items\n      ]),\n  }\n}\n
\n

The oncreate lifecycle hook in Mithril.js\nis like the good old componentDidMount lifecycle method in React.

\n

vnode.dom points to the DOM element, so it's like a ref in React.

\n

In Mithril.js,\ncomponents and virtual DOM nodes have lifecycle hooks\nand "automatic" refs (no need for something like createRef or useRef).\nSuper useful.

\n

Empty <ul> is no problem

\n

Like with React,\nyou'll still need to use AutoAnimate on the <ul>'s parent element too\nif you don't want to render an empty <ul>:

\n
import autoAnimate from '@formkit/auto-animate'\n\nfunction MyList() {\n  return {\n    view: ({ attrs: { items } }) =>\n      m('div', { oncreate: (vnode) => autoAnimate(vnode.dom) }, [\n        items.length > 0 &&\n          m('ul', { oncreate: (vnode) => autoAnimate(vnode.dom) }, [\n            // Render items\n          ]),\n      ]),\n  }\n}\n
\n

But the aforementioned React-specific issue is not a problem with Mithril.js,\nthings just work.\nDid I say that Mithril.js is cool!

\n

Manual exit animations would be... easy!

\n

The onbeforeremove lifecycle hook in Mithril.js\nmakes implementing exit animations easy.\nFrom the docs (code example slightly edited by me):

\n
\n

The onbeforeremove(vnode) hook is called before a DOM element is detached from the document.\nIf a Promise is returned,\nMithril.js only detaches the DOM element after the promise completes.\n[...]

\n
const Fader = {\n  onbeforeremove(vnode) {\n    vnode.dom.classList.add('fade-out')\n    return new Promise((resolve) => setTimeout(resolve, 1000))\n  },\n  view: () => m('div', 'Bye'),\n}\n
\n
\n

AutoAnimate still has its place though –\nit's great for adding quick and easy animations with no effort.

\n","summary":"AutoAnimate is a JS library that provides simple animations with no effort.\nWorks with Mithril.js, React and any other JS app.","date_published":"2022-05-28T12:00:00+03:00","tags":["JavaScript","Mithril.js","React"]},{"id":"https://mtsknn.fi/blog/button-type-button/","url":"https://mtsknn.fi/blog/button-type-button/","title":"Your Button component should default to `type=\"button\"`","content_html":"

A <button> element defaults to type="submit"\nwhich can cause accidental form submissions.\nMake type="button" the default in your Button component\nto make your life easier.

\n

type="button" vs type="submit"

\n

A <button> element without a type attribute\ndefaults to type="submit".\nClicking a submit button associated with a <form>\nsubmits the form\nunless event.preventDefault() is called.

\n

A <button> element with type="button" on the other hand\ndoes nothing by default when clicked.\nCalling event.preventDefault() does nothing\nbecause there's no default action to prevent.

\n

Setting your Button component to default to type="button"\nallows you to not worry about:

\n\n

Also, using <Button type="submit"> makes it explicit that it's a submit button.

\n

Example with React and TypeScript

\n
type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & { type?: 'submit' }\n\nconst Button = ({ children, type, ...props }: Props) => (\n  <button {...props} type={type || 'button'}>\n    {children}\n  </button>\n)\n\n// Usage:\n\n<Button /> // Defaults to `type=\"button\"`\n<Button type=\"submit\" />\n
\n

The type prop's value in React.ButtonHTMLAttributes<HTMLButtonElement>\nis "submit" | "button" | "reset" | undefined.\nI'm restricting the value to "submit" | undefined,\nso that only type="submit" is allowed.\n(Omitting the prop is also allowed.)

\n\n","summary":"A `