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

後端

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

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

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

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

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

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

網站設計

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

形式

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

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

bright

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

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

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

暗夜模式

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

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

dark

動效

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

私心

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

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

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

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

divider

§ 分別是分節符號6和參考符號7,我用它們來分割文章章節,以及主體和腳註。

自動化

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

收穫

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

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


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

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

  • VueJS 3 with TypeScript
  • TailwindCSS
  • bash
  • Python
  1. Zettelkasten 簡介

  2. 因為我的使用目的跟原作者的想法不同,我就不去提交 PR 了,不過我還是會盡可能把上游的修改並進來。所以如果妳恰好也有類似的需求,可以使用我的版本。

  3. The Elements of Typographic Style Applied to the Web, 2.1.2 Choose a comfortable measure

  4. AutoTheme

  5. 目前 Safari 並不支持這些按鍵,可能之後會修一下。畢竟 Safari 不是我的主力瀏覽器

  6. Section sign

  7. Reference mark