Hello

Welcome to my blog. Here I write notes and share photos.

Checkout all posts and search them at archive.

Latest moments:

Recent blog

• 24 Sep 2025 [devlog] I made an app to restore oddly shaped icon on macOS 26

  TL;DR: It’s all on GitHub

  ---

  The Problem

  Apple decided that every app icon should be wrapped in a rectangle “for consistency.”
  The result? Icons that don’t follow Apple’s standards now appear inside a dull gray box.
  Not only does this look ugly, but it also makes them harder to recognize.

  Personally, I’ve always loved the old oddly shaped icons.
  They’re lively, and often beautifully detailed. To make matters worse, some old apps will never receive updates that fix their icons.

  So when I stumbled across Simon’s post, I was thrilled and decided to build an app that makes restoring these legacy icons easier.

  ---

  Making It Work

  At first, I had no idea how to make a macOS app.
  I tried using Python with a TUI (Terminal User Interface), but I quickly gave up—the textual DataTable component was a mess for me.

  Eventually, I turned to Claude.
  I described my idea, and it instantly generated code.
  The UI it produced was surprisingly elegant and visually pleasing:

  

  …but the backend was completely unusable.
  Still, it was a solid start.

  ---

  After some searching, I came across this Stack Overflow post explaining how to set icons via the CLI, and I adapted the approach for my app.

  It took me hours tweaking—partly because I had no idea I needed to disable sandboxing to run shell scripts in a mac app.
  But after plenty of trial and error, I finally got it working.

  

  ---

  AI helped me a lot throughout this process, but still not reliable enough replacing an experienced human engineer (at least on the free tier :D).
  What impressed me most, though, was the breadth—not depth—of its knowledge.

  That broad coverage made it possible to bring a small dream to reality.

  ---

  Thanks for reading. Have a great day!

• 08 Feb 2025 See post count on dashboard

  hanki provided this useful trick, but I still think it's too complicated. Using the following code allows you to show post count on your dashboard directly.

  

  Put them on footer of the customise option will do the trick.

  <script>
  if (document.querySelector(".post-list") != null) {
      document.querySelector("main").insertBefore(
        Object.assign(
          document.createElement("div"), {
            id: "post-count",
            innerHTML: document.querySelectorAll('.post-list li').length.toString() + " posts in total.",
            style: "color:var(--subtext-color);margin:1em 0;"
          }),
        document.querySelector(".post-list")
      )
    }
  </script>
  

• 04 Feb 2025 Popup Media Library for BearBlog’s Built-in Editor

  I suppose there are others out there like me who still uses Bearblog's default editor. It’s actually a great experience using it due to its simple, elegant design. Actually, I recommend you to try it! However, I recently found it inconvenient to open a separate page just to copy and paste URLs from my media library. So, I created a popup media library for convenience.

  

  The code creates an additional "Toggle library" button in the toolbar, click it and the media window should pop up.

  The idea behind the popup is simple: use an <iframe> to display the media library. But the hard part is to write the javascript code to inject everything inside the toolbar (It's not easy to select those elements correctly). Fortunately, there is a way to do this.

  So here is the code, still, simply copy & paste them into footer directive under customise(?) dashboard. Don't forget to change {your name} in the code to your own one.

  <script>
    // update 2025-02-05: Fix not working on first press
    document.querySelector("span:has(#upload-image)").childNodes[3].insertBefore(
      Object.assign(
        document.createElement("a"), {
          id: "toggle-library",
          innerHTML: "Toggle library",
          href: "#"
        }),
      document.querySelector("#upload-image")
    );
    
    document.querySelector("span:has(#upload-image)").childNodes[3].insertBefore(
      Object.assign(
        document.createTextNode(" | ")
      ),
      document.querySelector("#upload-image")
    );
  
    document.querySelector("main").appendChild(
      Object.assign(
        document.createElement("div"), {
          id: "iframe-container",
          style: "display: none;"
        }
      )
    )
    
    document.querySelector("#iframe-container").appendChild(
      Object.assign(document.createElement("iframe"), {
        src: "https://bearblog.dev/{your name}/dashboard/media/",
        frameBorder: "0",
        id: "library-iframe",
      })
    );
  
    document.querySelector("#toggle-library").addEventListener("click", function(event) {
      event.preventDefault();
      const iframeContainer = document.querySelector("#iframe-container");
      
      if (iframeContainer) {
        // exists
        iframeContainer.style.display = iframeContainer.style.display === "none" ? "block" : "none";
      } else {
        error("iframeContainer not exist.");
      }
    });
  </script>
  

  also some CSS:

  #iframe-container {
      display: none;
      position: fixed;
      bottom: 2rem;
      right: 2rem;
      z-index: 30;
      box-shadow: 5px 4px 9px 2px rgb(0 0 0 / 54%);
      border: 2px solid #ddd;
  
      & iframe{
          width: 35vw;
          height: 50vh;
      }
  }
  

  Like this post if it had helped you :)

Browse more