Collection

這裡是藏經閣：先收藏，然後再放到長灰塵

#Resources

#Functional programing

• ❓Introduction · 函数式编程指北
• 🏃🏽‍♂️Functional Programming in Javascript
• TypeScript for Functional Programmers
• The TypeScript Handbook

#Design patterns

• ❓Refactoring Guru
• patterns.dev
• Scott Wlaschin - Talk Session: Domain Modeling Made Functional：functional programing 結合 Domain Driven Develope，內容蠻淺顯易懂的。這樣的模式在和非工程師交流也可以順利的溝通

#Javascript

• 🏆Javascript: the first year
  中文版在此，JS 二十年的歷史都在這了
• Exploring ES6

#Typescript

• Type challenges

#Zettelkasten

• zettelkasten.de

#Backend

• architecturenotes：部落格中有一些後端架構設計相關的文章，每一篇都圖文並茂

#Misc

• 🏆The Clean Architecture
• Build Your Own X
• 👍🏽My productivity app is a never-ending .txt file：不一定要照作，但沒想過在一些部分 .txt 文件能有現代的筆記工具無法企及的方便性
• User Experience Database：Free Online Product Design Courses
• Various ways to include comments on your static site
• Curiosity：科普版 Netflix
• Learning Test-Driven Development
• JavaScript Patterns：Lydia Hallie 蒐集的 Javascript Patterns，包含 JS 的 Design pattern, nodejs, React 等等

#Books

• ❓漫步華爾街
  在 podcast 頂樓加蓋[^overbuild]聽到有人推薦他們這本書作為投資的起手式，但是他們更推薦下面這本

• ❓簡單致富
  如上述，是從頂樓加蓋[^overbuild]中聽到的，這本是一位父親寫給自己女兒的投資指南。但不得不說台灣的書名總是膚淺到可笑

• How Attention Works: Finding Your Way in a World Full of Distraction
  自己收藏了很多注意力相關的書單，這是其中一本

• ✅誰偷走了你的專注力
  注意力相關的書籍中，常常會提到如何自我提升，但這本除了個人外提了更多社會層面導致的注意力問題

• 西文字體：字體的背景知識和使用方法

• How to Take Smart Notes

#Utils

• Mirage JS： An API mocking library for frontend developers
• wireshark：監聽 Network Protocol 的工具
• Kagi：Weblit-based，但可以使用 chrome 還有 firefox 的 extension 的瀏覽器
• Pkg：可以把 node.js 打包成二進制的 exe 檔案
• nexe：同 Pkg
• GoAccess：GoAccess is an open source real-time web log analyzer and interactive viewer that runs in a terminal in *nix systems or through your browser.
• Appfloey：Open Source Notion Alternative
• webpagetest
• Grafana：開源的 server 監控 & dashboard 工具
• Mithril：清量的前端 UI 框架（類似 React），API 很簡潔，但現在似乎已經不維護了
• SlideV：用類似 markdown 的寫法產生 slide，Anthony Fu[^anthonyFu] 是開發者！
• Chokidar：node.js 的原生 fs.watch 有些問題，這套 Lib 做了一些補強
• Cheerio：HTML parser
• Serverless-offline：可以在 local 測試 aws lamda
• Rome：把所有前端開發需要的工具都集成於一身的套件
• Prepack：JS 的解抽象工具，把多層的 function 攤平來增加執行速度
• PixiJS：2D render library，特點是快快快！還有完全支持 WebGL
• react-konva：Canvas library can use with react
• Yjs：JS 的 CRDT framework implementation，簡單說就是能夠實作共同編輯的工具。
• ImageMagick：cli 版 PS
• Giscuss：類似 utterance，只是使用 github discussion 而不是 github issue
• Linaria：底層使用 css variable 的 css-in-js 工具
• Statly：透過 GUI 的操作可以直接改動 state machine 的設定，但基本上是建構在 Xstate 上面的
• Licecap：開源螢幕錄影工具，會用 GIF 形式存下來，稍微陽春一點，但很可靠
• Kap：一樣是 Mac 開源螢幕錄影工具，但主要用 electron 來寫的，然後 UI 比較漂亮 XD
• Lyra.js：full-text search engine，可以用在部落格的搜尋
• F2：cli batch renaming tool，用 go 寫的
• starship：定位類似於 oh-my-zsh，也是 command-line prompt，但自己用起來 setting 比較簡單。

#Code Editor Library

• CodeMirror：一款比較簡單的編輯器，最有名的應用是 google devtool 就使用 CodeMirror
• Monaco：VScode 使用的 code editor，優點是在 intellisense 方面功能豐富

#Monorepo

• Lerna
• TurboRepo
• Nx

#State Management

• Recoil
• Zustand
• valito
• jotai

#Typescript

• Zod：TypeScript-first schema validation with static type inference
• ts-json-validator
• TS-toolbelt：各種有用的 Typescript utilities

#GraphQL

• GraphQL-tools：用來 mock GraphQL API 的工具（本身功能應該不只於此） 可以順便參考 Testing Apollo Components using react-testing-library 這篇文章，介紹了如何用這套 lib 來作 Apollo client 的 mocking

#Headless UI library

• ReachUI：包含許多比較基本的的組件
• Headless UI：裡面提供的 component 都比較複雜
• Radix：提供非常多的類型！而且 Vercel 也採用這套（聽起來很潮）

#reverse proxy

• Local tunnel：免費（但這種服務有可能免費嗎？不知道是掛在什麼 domain）
• ngrok：expose 多個 port 需要付費

[^overbuild]：頂樓加蓋，由 Denny(工程師)，還有 Affe(PM)主持的 U質節目，也是少數幾乎全部聽完的 podcast [^anthonyFu]：Anthony Fu