Latest Posts

    • Indie Developer
    • Share and Create
    • Bookkeeping
    • Financial Review

    Prismira: Two and a Half Years of Iteration and Growth

    As an internet worker, I've always had the habit of keeping accounts. Last year I wrote an article about nine years of bookkeeping, and I also briefly introduced a product I made, Prismira. Prismira is a bookkeeping and reconciliation product that has been in development for over two years, growing from a tiny script file into a full-featured platform. It happens to have entered a new stage, so I'd like to take this opportunity to review and reflect on the development journey of this project, as well as the detours I took along the way.

    • Reflection

    Fast and Slow

    How long has it been since you seriously wrote a long piece? As the internet erodes our personal time, I rarely write with care anymore. The last time I felt inspired, I was caught off guard by the realization that I was on the verge of losing my ability to write. The more I couldn't write, the more anxious I became, and the more I wanted to finish quickly, leaving my drafts folder piled with unfinished pieces from years ago. I want to first explore the "fast" and "slow" of writing.

  1. Mr.serenader
    • bookkeeping
    • asset management
    • financial review

    Nine Years of Bookkeeping: Changes in Tools, Methods, and Mindset

    In recent years, bookkeeping has long ceased to be merely an act of recording numbers for me; it is a ritual I look forward to. At the start of each month, I set aside a little time to carefully review the income, expenses, and asset changes of the past month—this is my monthly ritual of financial review. To this day, I have been keeping accounts for nine years. During this time, I have experienced the convenience brought by automated bookkeeping, and I have also been forced to interrupt it due to a lack of suitable tools. It was not until the past three years, after finding a bookkeeping method that suits me, that keeping accounts is no longer a difficult task for me, and I have gradually come to enjoy the process.

  2. Mr.serenader

    State Management in Flutter

    Redux originated in the front-end community, and its purpose is to solve state problems in complex front-end applications, but its design philosophy is not limited to the front end—it can even be used in Android and iOS development. redux.dart is a Redux implementation based on the Dart language, and with the Dart ecosystem, you can use it on the web or in Flutter. Mobx is also a data management library that originated in the front-end community; unlike Redux, it is reactive-based.

  3. Mr.serenader
    • Frontend
    • Performance

    Page Load Performance Optimization Solutions

    Why do we need performance optimization? Before answering this question, ask yourself: would you wait more than 10 seconds for a page to load? Or would you use a page where clicking a button takes several seconds to respond? I think most people would not. Clearly, human patience is limited. If a page's load time or response time exceeds a person's patience, they are very likely to leave the page. This is why performance optimization is necessary. Performance optimization is about enabling users to open pages as quickly as possible and use them as smoothly as possible.

  4. Mr.serenader
    • react
    • frontend
    • react router

    Navigation Interruption and Custom UI in React Router

    The article explains how React Router's Prompt and getUserConfirmation can customize navigation confirmation, and explains that they rely on the history library to delay or restore route state, making them applicable only to SPAs.

  5. Mr.serenader
    • css
    • frontend
    • flex

    Flexbox

    Flexbox refers to the layout mode displayed when an element's display rule is set to flex or inline-flex in CSS. It was primarily created to solve the challenges of efficient and flexible layout, alignment, and page layout on mobile devices. Before Flexbox appeared, page layouts were usually implemented using floats or absolute and relative positioning, but traditional layout methods proved to have insufficient expressiveness and made layouts cumbersome and inflexible in the face of increasingly cool and sophisticated design mockups.

  6. Mr.serenader
    • hardware tinkering
    • homelab

    Hand-sized Mini PC Yunxuan H170 Usage Experience and Homelab Setup

    At the end of 2019, while browsing SMZDM, I stumbled upon an article about the Yunxuan H170 and was instantly hooked. This is a mini-STX barebone PC—tiny in size and cheap in price; the motherboard + case + power supply bundle cost only 369. After agonizing for a day or two, I placed an order, planning to use it to run CPU-intensive services like GitLab and CI, and to migrate the miscellaneous services off my Synology DS 918+.

  7. Mr.serenader
    • router
    • hardware tinkering
    • homelab

    Using PVE to Run a Clash Bypass Router Virtual Machine for Transparent Proxying

    Before I started tinkering with a bypass router, all the circumvention at home was done by installing an SS service on the router and implementing proxying at the router level, so that every networked device could enjoy the benefits of transparent proxying. But the router's performance was too poor and became a bottleneck. Later I ran a bypass router on a mini PC, and the circumvention performance directly saturated the bandwidth. The only thing is that the installation process was quite a hassle, so I'm recording it here to make it easier for others to learn from, and also for my own future reference.

  8. Mr.serenader
    • frontend
    • html
    • resource hint

    The Magic of the Tag

    According to the standard definition, the tag is actually used to indicate the relationship between the current page and external resources: The HTML External Resource Link element () specifies relationships between the current document and an external resource. — MDN. One of the simplest examples is our most familiar reference to a stylesheet.