Mini Coding Adventure: a personal web desktop

So last night when I was sitting down and watching an episode of “The Mole” on Netflix, inspiration struck and dusted off one of my old web projects that I had kicking around. At one point in time, my blog had a desktop theme. I really enjoyed it but then I went back to my old standby of an RPG look. It’s been in the back of my mind to revive the desktop theme, but I’m not sure it’s suited for a blog. When I found 7.css I had some fun envisioning the desktop look as a Micro.blog client but then set it aside.

What I’m thinking is to build a personal web desktop, for all the various services I use online that offer API’s I can play with. I’ll start with Micro.blog since I’ve got quite a bit of experience building little side projects with it and using it’s private notes as data storage.

As you can see from the screenshot, it’s the windowing I’m most enamored with.

I’m thinking it could be a good project for small web July.

My rules:

• No CSS framework outside of 7.css.
• No JavaScript frameworks. I’ll write it all from scratch using plain old JavaScript.
• No build step. Just a single HTML page.
• A little Deno server for API calls

I’ll probably do quick little updates instead of waiting around to finish and then doing a larger writeup.

Here’s where I’m at after two episodes. I’ve cleaned up the UI around the notebook list and added in the buttons/radios for the actions I want to do. But I haven’t actually coded the interactions yet.

Today I fixed the window resize function. Before I was using getComputedStyle to find the width and height and then using the mouse coordinates to calculate the resize from the top-left of the window. Now I’m doing the calculations from the center of the window.

(I’m not sure why the cursor is so big when I did the screen record 😂)

Upcoming for this week (hopefully, no promises):

1. Table sort when clicking on column header
2. Radio select to enable edit, delete, import, export
3. Add new notebook
4. Help modal
5. Refresh table
6. Search the table