3h 32m 29s logged
Worked on the icons bar and added a new feature to the Settings app— you can now switch icon styles. Also saved wallpaper, brightness, and icon styles to localStorage.
Biggest challenges were digging through a massive icon file, organising them, and getting the UI right. At one point the icons just wouldn’t change… turns out I forgot to call the function. 😅
Moving on to more features and apps.
1h 26m 52s logged
Updated the app icons — they look so much better now. The old ones felt a bit off.
Funny disaster though: right after the change, nothing would open. Threw in some console.log()s… and the system crashed. Turns out the old icon was still being called in the main code, which made every window try to open. 😂
2h 17m 36s logged
Very small visible change this time. Added functionality to the settings sidebar. Yeah thinking bout the architecture!!
I did added different colors to my app background then removed it due to change in the architecture.
Working on something which looks like a small change 🥲 but needs a solid time and architecture 🫠 😮💨.
2h 19m 24s logged
Nothing!! Just refactored the UI of the Settings app. Added a side bar with the search bar.
The main headache was the Architecture!!
Damn!! My head hurts !! Still moving on.
I will update the full functionality of settings app next time !! (That’s my goal) . But yeah will add the other features later as the OS grows.
1h 45m 43s logged
Just dropped a fresh update for my web OS, Kobayashi OS!
It can now fully customize the desktop’s wallpaper with solid colors and gradients, all powered by a global store so everything stays smooth and in sync.
And Yo!! not gonna lie, building this took me on a absolute emotional roller coaster. I hit bug after bug, spent ages searching for answers, only to discover the culprits were… simple typos and missed JavaScript punctuation!! Classic! But hey, every bug fixed is a lesson learned.
I’m on a roll, so expect more updates super soon! Next up on the build list: making the Settings app feel like a real-deal OS and dropping some brand-new apps.
2h 38m 30s logged
I recently refactored our z-index management from local storage to a global system. Naturally, it brought a wave of visual bugs along with it—fix one, and four more pop up!After a solid debugging session with console.log(), everything is stable and working as expected. Next up: building out the Settings app to make it fully functional.
1h 34m 33s logged
Cleaned up the codebase, fixed a minor bug, and finally built a manual wallpaper changer.
Decided to use global state for it and… wow. It actually clicked. I was stuck for a minute overthinking how the workflow should look, but once I just started typing, it made total sense.
State management isn’t nearly as painful as I used to think.
Naturally, it didn’t work on the first try—the wallpaper wasn’t updating at all. Turns out I forgot a set of parentheses and had a stupid typo. Classic. Fixed that, and now it’s smooth sailing.
2h 46m 10s logged
I started moving my app state from local state to a global store using Zustand.
Right now, the open/close state of applications is managed globally, and next I’ll move the window dragging logic there as well.
The dragging system already works locally, so this is mostly a refactor to make the OS easier to scale.I also added a Settings app, although it doesn’t do anything yet. I decided to focus on getting the core OS functionality solid before adding more features and applications. Once that’s done, I’ll add things like manually changeable wallpapers and expand the Settings app.
As someone who’s still new to state management, I had no idea how to use a global store when I started. So before writing code, I spent time learning Zustand, understanding how global state works, and planning the architecture instead of jumping straight into implementation.There were plenty of moments where I got stuck. I had a few headaches trying to wrap my head around the concepts, but I kept going until it finally clicked.
No big visual changes, but I think I crossed a small milestone—one that’s going to make everything I build next much cleaner and easier to manage.
1h 10m 57s logged
Fixed a sneaky LocalStorage bug today! 🛠️
I initially put JSON.stringify directly inside useState, which completely crashed the app and prevented it from opening.
Rewrote the logic by moving JSON.stringify into a useEffect hook with tasks as a dependency. That got it working, but refreshing the page triggered a new bug: local storage was getting overwritten with an empty array.
I logged the data flow at every stage and caught the issue: useEffect was running on initial mount before state was restored. Added a simple length check (tasks.length > 0) before stringifying, and everything works perfectly now!
Always check your mount cycles! 🚀
6h 53m 44s logged
It’s been a while since my last update, so here is what I’ve been building and refining lately:
UI Refactoring:
Invested a significant amount of time redesigning and polishing the UI (still a work in progress, but looking much better!).
Window Management:
Added support for opening, minimizing, and closing windows.
Calculator App:
Cleaned up the codebase and added new functionality.
Task Tracking:
Added a strike-through feature for completed items in To-Dos App.
Next up: Implementing localStorage so task completions and window states persist across sessions.
1h 39m 44s logged
Focus was the window manager.
Completed
Implemented dynamic z-index so the active window is always brought to the front.
Added window minimization.Implemented restore functionality from the Apps Bar.
Preserved window state while minimized instead of closing the application.
Challenge: Initially, minimizing a window removed it from the UI, but there was no way to bring it back because clicking the app icon simply ignored already opened apps.
Solution: Instead of treating minimized windows as closed, I introduced a minimized state for each window. The Apps Bar now checks whether an app is already open, minimized, or closed, and performs the appropriate action—open, restore, or bring it to the front. This keeps the component mounted and preserves its state while hidden.
The desktop now supports opening, closing, dragging, minimizing, restoring, and proper window stacking. With these core interactions in place, the next milestone is maximize/restore, followed by window resizing and a global state refactor with Zustand.
2h 29m 13s logged
Continued building the window management system for Kobayashi OS.
Implemented draggable application windows from scratch using React mouse events (mousedown, mousemove, mouseup) with proper drag offsets for smooth movement. Refactored the layout to introduce a dedicated desktop area, keeping windows constrained within the workspace instead of the entire page.
Spent most of the session debugging positioning logic, DOM measurements, and boundary constraints. The draggable window system is now functional and forms the foundation for upcoming features like minimize, maximize, focus (z-index), and Zustand-powered window state management.
1h 19m 10s logged
Continued refining the Kobayashi OS interface.Finalized the built-in app icons and continued shaping the application dock and overall desktop structure to make the OS feel more like a complete desktop environment.Built the first built-in application—a basic calculator—with support for standard arithmetic operations. This marks the beginning of adding functional utilities to the OS.The focus remains on establishing a solid foundation before expanding into more advanced applications and features.
1h 17m 48s logged
Continued working on the Kobayashi OS layout.
The overall design is still evolving, and I’m experimenting with different arrangements before settling on a final structure.
I added icons for the built-in applications and started shaping how the interface should feel.
No application logic yet—right now the focus is on finding the right layout before building the functionality.
1h 36m 22s logged
DevDock is no longer just a collection of developer tools—it’s being redesigned into Kobayashi OS , a browser-based operating system built for developers.
This update focuses on restructuring the application’s architecture, replacing the original layout with an OS-inspired interface, and laying the groundwork for applications, tools, and a desktop-like workflow.
The goal is to create a cohesive environment where developer utilities feel like native applications rather than separate web pages.The transition is still in progress, but the foundation for Kobayashi OS is now replacing the original DevDock vision.
JSONLab is a lightweight developer tool for formatting, validating, and exploring JSON data through both Text and Tree views. It runs entirely in the browser, keeping data private while providing fast parsing, syntax highlighting, and an interface designed for everyday developer workflows.
I built a modern JSON formatter and validator with a developer-focused UI. Users can paste raw JSON, instantly format or validate it, and switch between a traditional text editor and an interactive tree viewer for easier inspection of nested objects.
The biggest challenge wasn’t the parsing logic—it was the interface. Finding a layout that felt intuitive, balanced, and pleasant to use took multiple redesigns. Small UI details, such as maintaining consistent panel heights, refining CSS behavior, implementing a smooth Text/Tree toggle, and making the tree view integrate naturally with the editor, required far more iteration than expected.
I’m proud that I kept iterating instead of settling for a “good enough” interface. The project evolved through several redesigns, with each version improving usability and consistency. Beyond the UI, building the tree viewer, fixing numerous styling issues, and creating a responsive experience helped transform a simple formatter into a more polished developer utility.
###How to test
Copy raw JSON from any external source—such as a public API response, a JSON placeholder service, or one of your own JSON files—and paste it into JSONLab. Try both valid and intentionally malformed JSON. Format complex nested objects, switch between Text and Tree views, and verify that validation behaves correctly. Test arrays, empty objects, deeply nested structures, and large payloads to evaluate the application’s behavior. All processing is performed locally in the browser, so your JSON never leaves your device.
Finally calling JSONLab complete.
Today’s work was mostly polishing:
-Fixed another UI state bug where actions like Format, Validate, and Minify could still be triggered while in Tree view.
-Disabled actions that don’t apply to the current view.
-Cleaned up a few more UI inconsistencies.
At some point you have to stop polishing and ship. I hope this is the last round of tweaks for JSONLab and that there won’t be any more polishing or updates needed. Time to move on to the next project.
Still wrestling with the UI. Building the functionality turned out to be much easier than designing an interface that actually feels right.
Today’s progress:
Added a toggle to switch between Text and Tree views.
Implemented the Tree view for easier JSON exploration.
Spent a lot of time refining spacing, colors, and CSS to improve readability and consistency.
The biggest challenge right now isn’t adding features—it’s finding a design that feels polished while keeping the dark developer aesthetic. Every iteration gets closer, but I’m still not satisfied.
Rebuilt the UI! It finally feels a bit more satisfying. Not sure if it’s actually good yet, but it’s definitely an improvement. If you have any suggestions or feedback, I’d love to hear them.
Spent most of today redesigning JSONLab’s UI. The functionality is there, but the design still doesn’t feel right. I’ve gone through multiple layouts and none of them click yet.🤧
Sometimes building the feature is easier than making it look good. I’ll keep iterating until the UI feels as polished as the tool itself.🥹
