A Side Effect of Site Migration
After completing the recent site migration, I was organizing things in the new environment when I discovered a massive collection of “personal tools” that had accumulated over the years.
Each one was born from thoughts like “it would be nice to have something like this,” created on a whim, and then quietly used by me alone ever since. Most were CUI (command-line) tools with no concept of UI whatsoever. The code was messy, the usage known only to me—true embodiments of the “if it works, it’s good enough” spirit.
The Ordeal of Making Things Presentable
I thought it would be nice to publish them, but this turned out to be much harder than expected.
After all, turning CUI tools into web tools requires building UI from scratch. Changing from “passing settings via arguments” to “receiving input through forms,” from “outputting results to stdout” to “nicely formatting and displaying results”…
The biggest challenge was my complete lack of decent design sense. I can build functionality, but creating “UI that people actually want to use” is a different skill entirely.
Saved by Generative AI
This is where generative AI came to the rescue.
When I gave instructions like “I want a tool with this functionality and this kind of UI,” it would create something decent with essentially no coding required. From CSS Grid usage to responsive design, even animations.
What particularly amazed me was that even complex requests like “a tool that accepts files via drag & drop and allows downloading processed results” would generate working code in one shot.
Honestly, seeing features that I’d spent hours creating—scouring Stack Overflow, reading through MDN, trial and error—completed with just a single instruction made me lament internally, “What was all that struggle for…”
What an incredible era we live in.
(I’d like to write about this topic in detail on another occasion)
Key Principles
When organizing everything, there were several non-negotiable points.
Lightweight
Nothing makes you stop using a tool faster than frustrating load times. Minimal dependencies, quick to open, quick to use. This is crucial.
Easy to Use
I prioritized operational clarity over UI beauty. The goal was intuitive use without needing to read instructions. (Whether I achieved this is another matter)
Local Processing
This has been a long-standing principle of mine.
While image conversion and data processing were typically done server-side, I’ve been trying to make things work with JavaScript since the early days of the internet.
Of course, JavaScript wasn’t as powerful back then as it is now. I have vivid memories of endlessly battling browser “disable JavaScript” settings. How many times did I display that “Scripts are disabled” message…
But I believed that “not sending data externally” was extremely important from privacy and security perspectives. Especially with image tools that often handle sensitive data.
Now, with JavaScript’s evolution and the enrichment of browser APIs, processes that were impossible before can be completed entirely client-side. It feels like my long-held principles have finally been technically vindicated.
Responsive Design is Standard
Goes without saying, but mobile compatibility is a given.
Technical Highlights
Since we’re at it, here are some technically interesting aspects.
Background Processing with Web Workers
Heavy processing is offloaded to Web Workers to avoid blocking the UI. Progress bars update in real-time, so there’s no “did it freeze?” anxiety.
OffscreenCanvas for Image Processing
I also utilized OffscreenCanvas to separate Canvas operations from the main thread. This was effective for performance improvements when processing large numbers of images.
Speaking of which, Pixnote—now entering its 8th year since release—has been doing plenty of Canvas-based image conversion, coordinate transformation, compression, and more. Looking back on this current work, I’m savoring the fun all over again.
Features that I implemented back then with amazement, thinking “I can’t believe you can do this in a browser,” are now taken for granted. The accumulation of technology is truly fascinating.
Speaking of Pixnote, I keep thinking I should create YouTube explanation videos, but with so much content to explain, I’m still stuck at just 3 videos. Talk about giving up after three days…
Video production requires dedicated time blocks, and it’s hard to get motivated in reality. But until I can prepare videos, I plan to write articles here. Why? Because the site renewal made it possible to write articles!
Text can be written in spare moments, and technical details can be explained thoroughly. Until video preparation is ready, I plan to continue sharing information through articles.
A Long Relationship with JavaScript
Working through this tool organization made me reflect on my “long relationship with JavaScript.”
JavaScript, once treated as a “toy language,” has become a serious application development language. You can do video editing in browsers, 3D rendering, even machine learning.
I remember the days when I was told “JavaScript can’t do file operations” and stubbornly worked around it with Data URIs and Blob APIs. Now File API and FileReader API are taken for granted, and drag & drop is simple.
Being able to feel technological progress firsthand is one of the privileges of being an engineer.
Future Plans
For now, I plan to gradually publish tools from my collection that have reached a presentable state. There’s still a lot of “excavation work” needed, so please bear with me.
I’ve realized anew that converting existing CUI tools to web format can be more challenging than creating new tools from scratch. But since these are things I actually use, they’re at least not “armchair theories.”
Conclusion
With the new site environment, I can finally publish experimental content like this easily. Rather than “build and finish,” I want to make this a live project that continues to be used and improved.
While maintaining my long-standing love for JavaScript and commitment to “local processing,” I hope to nurture a useful collection of tools.
Feel free to send requests or bug reports. Though there’s still a high chance you’ll get a response like “Sorry, still excavating.”