「透明盒子計畫」網站設計時的一些考慮

在朋友們在 Clubhouse 衝浪的時候，我為「透明盒子計畫」做了一個網站—— TLDR.ink。網站不光是她的網絡 ID，這也將使「盒子」變得更透明。我想在不久的將來做一些獨立研究，研究進程可以在這個網站上展現。就像人們在 twitch 上看直播一樣，只是這個會被用來直播文獻閱讀和思考。

後端

因為一年前才開始使用 Zettelkasten 方法做筆記¹，這當中倒騰了很多方法/流程/系統/軟件，我甚至還有用紙筆記錄的系統。最近才慢慢穩定下來，目前的筆記都是記錄在 markdown 文本文件裡的，用 wikilink 互連，使用的工具是 Obsidian。當然，因為是純文本，我偶爾也會用 Vim（Vimwiki）。

Vimwiki 和 Obsidian 應該算是我心中最接近完美的筆記方案，即便它們都還有很多可提升的空間。但軟件而非服務、純文本、超鏈接和反向鏈結，這幾個是必不可少的。

• 「軟件而非服務」的好處顯而易見，妳不會被服務商挾持，也不會有那些 creepy 的隱私問題。
• 純文本，這意味著內容與樣式的脫離，也就意味著後續的可擴展性很強。妳可以輕鬆寫一些小腳本將它們轉化成妳想要的格式。
• 超鏈接和反向鏈結，想法本就是互連的，非線性的。將想法轉換成文字，只會損失掉一些信息。

所以從網站的功能性來說，就是要將我的那些有很多超連結的 markdown 文本轉化成可用於瀏覽的 HTML 文件。這似乎不難，我很快就找到一個叫 obsidian-html 的開源軟件（現已改名為 obeo），它基本可以勝任這項工作，但因為是一個非常小眾又年輕的項目，有很多 bug 和設計不周的地方，所以我 fork 了一份改出了一個我需要的版本。跟原版比比較大的不同是²：

• 生成的 HTML 文件內用 class 而非 id，原因我會在後面說
• 增加子目錄的支持
• 增加內嵌圖片等多媒體文件的支持
• 增加對子目錄生成排序目錄的支持
• 增加對文件 front matter metadata 的支持，生成同名 JSON 文件
• 修正了反向鏈結探測的 bug

這樣我就有了一堆靜態文件，這些靜態文件並非完整是 HTML，只是局部。而網站的邏輯就很簡單了——按需獲取文件並展示在用戶面前。這種方式也是 DHH 的 RoR 社區和 Phoenix 社區正在嘗試的一個 Web 發展「新方向」。

React is so 2019. HTML + minimum JS is 2020 😄✌️

— DHH (@dhh) June 24, 2020

網站設計

既然邏輯並不複雜，我就把更多的精力放在了交互設計和優化細節上。

形式

紙質 Zettelkasten 的一個好處是你可以將卡片排在桌上，一目了然。在電腦裡，最接近的體驗可能也只有 Tiling window manager 了。所以我想實現的就是近似的那種多列 tile 板式。為什麼是多列式？因為我們人類的掃視寬度是有限的，恰當的列寬有更好的閱讀體驗³。有了寬度限制，那我們能一次看多個文檔的方法就只有多列式了。

然而多列板式有極限，也就是屏幕的寬度，以我的16吋筆電為例，我最多只能看到三個文檔，而以我紙質卡片筆記系統的經驗，我通常需要同時查看3-10個卡片。正在我為此犯愁的時候我看到了 Andy Matuschak 的筆記頁，他巧妙地將頁面重疊，但露出豎列的標題欄。這種做法雖依舊無法跟紙質卡片相比，但標題大多數時候是可以給大腦的緩存一些 hint 的，前提是標題起得比較能概括筆記（事實上 Andy 也在他的筆記裡提到了這一點），我便借鑑了這樣的處理方式。這也是為什麼我要將 oboe 生成 HTML 裡的 id 都換成 class。

考慮到之後我會將單張卡片或序列卡片分享到官方 Twitter。所以需要兩個功能：

• 網址必須跟內容一一對應，即網址要能重現我所看到的卡片排列順序
• 我應能方便去掉不想在序列中的卡片，當然這也會更新網址，反映最新的序列

之後我或許也會做方便分享的隱藏功能。

暗夜模式

再來就是暗夜模式，我現在還是沒有自由身的社畜，所以經常只有等到晚上才有一點時間寫點東西、做點像這樣的 side project。所以暗夜模式是一個必需品。因為偶爾混跡設計圈，見不少人對非純黑有批評。我就嘗試了用純黑做背景，但是效果不好，主要是對比度讓我的眼睛不適。所以最終我還是改用了某種深灰。

我繪製的大多數插畫都是以淺色為背景的。我很快就意識到在暗夜模式下格外刺眼。於是我都將這些插圖做了處理，在暗夜模式下自動降低對比度。

動效

之前在做一個習作⁴的時候，有個設計師朋友吐槽說變化沒有 transition/animation。其實我也想加，只是真不知道哪個 macOS API 可以實現切換動效。這次的是網站，相對實現起來也容易很多。

私心

喔對了，說到這我才想起來，我設想的網站使用者僅是我自己。我知道大部分人並不會把網上的誰當回事，假想服務遊客很可能是空轉，所以服務好我是第一位的。當然我也比較挑剔，能讓我滿足的設計多少也能滿足大多數遊客吧。網站中的一些資源鏈接是指向我的內網服務器的，又或者是指向我的 Kindle app 內部地址的，所以這些鏈接可能對訪客並沒有幫助，但頁面內也有足夠多的信息去手動獲取相關的書文。

網站的另一個討好自己的功能就是快捷鍵，我的日常工作基本都在小黑窗裡完成，習慣用鍵盤 navigate。所以網站裡也做了簡易的快捷鍵⁵：

• tab 選取鏈接或關閉卡片按鈕
• return 點擊
• 左右箭頭鍵或h、l向前或向後滾動卡片

最後一個我私人的小喜好就是字體排印符號的使用。比如：

§ 和 ※ 分別是分節符號⁶和參考符號⁷，我用它們來分割文章章節，以及主體和腳註。

自動化

筆記即思考，既然是思考，我如果還老是惦記著保存、推送至網站這些無關的操作，勢必會影響筆記和效率。所以我寫了腳本監聽筆記文件的改動，每過一段時間便會自動推送至網站。所以如果看到有寫了半句話的筆記，那多半並非是我馬虎，只是妳看「直播」時畫面定格在了半睜眼。

收穫

跟「透明盒子計畫」相關的收穫且不說，就說技術本身的吧。我的本職工作並不涉及設計與前端開發，只是我一直對它們保持一定程度的關注。借此機會，我正好把玩了一下一直想學的 VueJS 和 TypeScript，還發現了超級適合我這種不怎麼寫 CSS 的人的工具——TailwindCSS。要感謝這些工具，我才能在短短一週多的時間裡把想法實現出來。

除此之外，就像汽車製造商會把參加 F1 學到的技術下放到大眾產品上一樣，我也在摳細節的時候學到了一些新東西，可以挪用到我的博客上。比如這個符號 ↩，在手機上查看時會顯示成跟周圍格格不入的 emoji ↩。後來我發現有兩種方法可以強制顯示字符，一種方法是在這個字符後面加一個空 Unicode 字符 \uFE0E；另一個方法就是限制這個字符的 Font-Family，排除 iOS 系統含有 emoji 的字體。

---

還有一些東西沒有提，那些基本都是從我的博客帶過去的想法，比如腳註跳轉的細節之類的。再比如前文提到的分享功能，多半會借鑑本站的方式。之後肯定也會有進一步的改動和優化，如果值得寫一下的話會再寫一篇更新。

最後說一下用到的技術，以免有同學好奇：

• VueJS 3 with TypeScript
• TailwindCSS
• bash
• Python