我用过的觉得好用的软件、工具、网站等的推荐
最初是我重置了系统，然后发现过去的习惯都要重新来一遍，于是为什么不写一篇文章呢？ 比如，macOS 上可以一键安装我需要的软件： brew install --cask microsoft-edge calibre sogouinput mos snipaste iina iterm2 rectangle 后来，延伸到我用过的一些在线工具，比如作图、汇率转换等。 于是，这篇文章主要用于推荐软件、浏览器插件、在线工具、网站等。
阅读更多beancount-gs 一款 self-hosted 复式记账程序，简化你的记账方式！
本程序将部署在 macOS 上，不使用 Docker（mac 上的 Docker 太卡了） 动机 ¶ 我利用 beancount 来记账已经有一段时间了，但有些痛点问题困扰着我： 没有 web 界面，fava 真的只能用来展示和分析且不好理解，需要有一个方便记账的界面 text 记账的方式，在 vscode 插件能力有限的情况下，很容易忘记 assets 和 expenses 到底叫啥名，如果有 web 界面那么一定会好很多，一个下拉列表就可以解决 有没有解决方案，不需要自己造轮子的那种？
阅读更多Remarkable2 配置中文字体与其他 Tips
动机 ¶ 每次更新系统之后，我的字体就没了，我哭😭 主旨 ¶ 导入文档 ¶ 下面尝试导入 PDF、EPUB 来看看阅读效果。首先肯定要去官方的支持网站，看看用户手册。 官方的导入方案中，总的来说就两种，一个是通过它的云同步服务，在客户端程序上导入，另一个就是通过 USB 连接到电脑，通过浏览器网页导入。
阅读更多如何在 React 中轻松路由？使用 React Router！
开始 ¶ import React from "react"; import ReactDOM from "react-dom/client"; import { createBrowserRouter, RouterProvider, } from "react-router-dom"; import Root from "./routes/root"; const router = createBrowserRouter([ { path: "/", element: <Root />, }, ]); ReactDOM.createRoot(document.getElementById("root")).render( <React.StrictMode> <RouterProvider router={router} /> </React.StrictMode> ); root 路由比较特殊。 Not Found ¶ import ErrorPage from "./error-page"; const router = createBrowserRouter([ { path: "/", element: <Root />, **errorElement: <ErrorPage />,** }, ]); ReactDOM.createRoot(document.getElementById("root")).render( <React.StrictMode> <RouterProvider router={router} /> </React.StrictMode> ); 嵌套路由 ¶ 让 <Contact /> 渲染在 <Root /> 的 children(<Outlet />) 中： const router = createBrowserRouter([ { path: "/", element: <Root />, errorElement: <ErrorPage />, **children**: [ { path: "contacts/:contactId", element: <Contact />, }, ], }, ]); 使用 Layout 也能解决。
阅读更多如何在 React 中进行状态管理？使用 Zustand！
计数器 ¶ import { create } from 'zustand' const useStore = create(set => ({ count: 1, inc: () => set(state => ({ count: state.count + 1 })), })) function Controls() { const inc = useStore(state => state.inc) return <button onClick={inc}>one up</button> } function Counter() { const count = useStore(state => state.count) return <h1>{count}</h1> } 用法 ¶ 创建状态 state 操作 action ¶ Basic typescript usage doesn’t require anything special except for writing create<State>()(...) instead of create(...)… import { create } from 'zustand' interface BearState { bears: number increase: (by: number) => void } const useBearStore = create<BearState>()((set) => ({ bears: 0, increase: (by) => set((state) => ({ bears: state.bears + by })), })) const useFishStore = create((set) => ({ salmon: 1, tuna: 2, deleteEverything: () => set({}, true), // clears the entire store, actions included deleteTuna: () => set((state) => omit(state, ['tuna']), true), })) const useSoundStore = create((set, get) => ({ sound: "grunt", action: () => { const sound = get().sound // you still have access to state outside of it through get // ... } }) export default useBearStore 在 react 之外使用呢？
阅读更多