CanvasOS
By
@ortley
- 4 Devlogs
- 16 Total hours
A WebOS with an infinite workspace
Ship #1
I made a WebOS with an infinite workspace. Travel far and wide, big and small, and everywhere inbetween in this expansive open-world Web Operating System.
[DEMO](https://canvasos.ortley.pages.gay/index.html)
## Challenges I faced
Since this is my first time using React, I had to get used to React's reactiveness and it's stateful systems. State has to be explicitly defined, rather than being the default for all values, so this led to some delays in the displaying of some values early on. But once I understood how it was designed, it really came together.
Then there's the CSS, oh boy. What's great is that it always works in some way. But what's bad is that it never works in your way. Even simple elements would look fine with a couple lines of code, but there would always be a little off-centering, a little imbalance, a little alignment issue that meant a full change of the element was necessary. I know way too much about margin collapse and baseline alignment than I ever think I needed to know.
That being said, when it works, it works really well. I really like how simple some processes are, like how event callbacks can be handled, and `flexbox` styling.
## Proud moments
Getting the state synced across the whole app. This took **ages** to get right, with proxies to `useState` hooks and subscribe lists in order to make every component have a common sense of truth as changes are made elsewhere. Major helper in teaching me how react handles state.
## Honourable mention
One thing that I really liked was the CI/CD pipeline where it goes like this:
- push live dev to `main`
- merge `main` to `prod`
- CI action builds program and pushes distributables to `pages`
- `pages` serves the website
It's really fun to see the actions just happen yk. like - I didn't have to go through the process of building the project myself, then uploading it to some portal on a buggy website, it just does its thing and then I have my website. I kinda want to do some more of it :]
Though unfortunately the site I'm using takes a while to update it's cache, so it might not load correctly if I've just pushed an update.
Live demo HERE
(pushed at 22:21 UTC, may take some time for the asset cache to update)
Devlog 4
This devlog was mostly spent getting the project reading for shipping. I actually had a read of the WebOS-1 spec, and holyyyy this mission is easy. I don’t think I had to do as much as I did, but at least I now have a really cool website 
Got the pause and stop buttons looking good with icons from Bootstrap Icons, as well as a very simple tray which I’m gonna expand in later iterations
Also there’s a new tutorial section to help people trying out the demo.
Once the asset cache refreshes, I’m probably gonna ship this project and get that cheese
Live demo HERE
I’m creating a WebOS with an infinite canvas to work without boundaries
wassup guys 
this devlog was hella fun bc for once i could actually both see and feel the results of what I was changing - can now definitely see why “frontend engineer” is a job someone would want to have.
Changes
Most of the changes were in how the program windows are manipulated. Before, all you could do is move them around, and close them using a small button in the top-right. But now, windows can be shifted, resized, and layered, and the cursor now changes when hovering over certain parts of the frame.
Another one of the obvious changes are the new colours. I found them through a cool tool i’ve used for years https://huetone.ardov.me/ with the Ant Financial Design preset. I’d really recommend them if you want to design some colour palettes.
Commits
- chore: fix build errors (dead code)
- fix: Stop text selection when stopping resizing
- feat: Add titlebar title truncation
- feat: add program resize button
- chore: make changes to force pages rebuild
- chore: fix asset access for prod
- chore: fix build errors
- fix: use vector background instead to remove visible pixels when zooming in
- fix: Fix background integration with scaling
- chore: Merge branch ‘restyling’
- feat: re implement scrolling
- feat: larger program controls
- feat: add background pegs
- feat: hyprland-like window outlines
- feat: standard colours
- chore: Merge branch ‘restyling’
- feat: add rounded corners
- chore: change pages.gay action to only run on push to production
- fix: Fix margin collapse + add nicer colours
- chore: migrate program style to program.css + partial work on fixing marign collapse on programs
- chore: Update README.md
- chore: fix build errors
- chore: fix CI to work with react
- feat: page CI
- feat: modificaionts for demo
holyyy i completely forgot to post any devlogs all week 
DEMO LIVE AT https://canvasos.ortley.pages.gay/
Changes to the backend
Previously everything was handled by the main App() function, but MouseEvent issues (see below) meant that I had to centralize most of the reactive values of my components. Working with external stores and states was a pain since the standard useSyncExternalStore that React provides to communicate with singletons was just way too slow for any sort of real time read/write. This led to me implementing something like how zustand manages it’s stores. Now the state of a program can be modified from anywhere
screaming at MouseEvent
When dragging apps around by the titlebar, there is a chance that the mouse goes fast enough that it leaves the bounding box of the previous position of the titlebar. This leads to the titlebar not handling the MouseEvent, which was where the window moving logic was implemented. Since the mousemove MouseEvent wasn’t going to the titlebar, it would be going to the background, which wasn’t hooked up to move programs.
This meant that the whole backend had to be refactored to allow both global modifying of the underlying data representation of the position of programs, and also allow the JSX of the programs to react to changes in their linked data structure
Changelog
- b788c5e786 - feature: add program layering
- 91aeeec37b - chore: remove program frame
- de83c2089d - backend: centralised program managemtn
- 5d3c404924 - feature: add basic program frame with shadow root functionality
- 5c9e4011b7 - backend: migrate appstate to appstore with useState hooks
- fae40a30f9 - chore: rename panAnchor to prevMouse to fit new purpose
- 34057f6f4d - oops: Fixed it after breaking it
- 6b924a45fc - chore/backend: move Vec2 to common/type and implement appstate singleton
- e1cd7f506e - chore: refactor with Vec2 class
- 991dda305f - feature: Vec2 class
- 5f39b56395 - chore: remove preinstalled stuff
Although a lot of this devlog is me being mad at react, I actually really enjoyed it and it was really fun to learn how to speak in the same language as react
See the video for a demo of the project
