Prototyping And Coding Your First Web Operating System and Web Desktop

Allow me to start by saying, you need three very small programs.

Drag window, resize window, and focus window, which brings it to the front.

There is a fourth one, that I personally recommend.

And that is Desktop panning, where you can grab the desktop and move all the windows.

As a bonus, a very tiny program I call, overwatch.

It zooms out of the desktop, to let you see the applications menu.

If you are just starting with programming, I recommend patience.

And rather than diving into the world of dragging.

Stick to the basic primitives, dragging, resizing and focusing windows is already supported.

You just need to capture the coordinates, on the mouse up event.

Or set the zIndex, where it comes to the window focus.

The built in functions won’t look too pretty, they’ll try to bite you.

But it is good to see, everything working.

I recommend using svelte for programming, that makes things really easy.

To style the window, just use Bootstrap and Bootstrap Cards, don’t forget the shadow.

And if you don’t like the bootstrap theme, use the open source bootswatch they have a bunch.

And as to the HTML structure, Put everything inside a singe HTML element with position relative.

And set the windows, the desktop image, maybe a login box, all to position absolute.

Svelte allows you to use if or for each, without forcing you to create a new element.

I recommend using PouchDB, under the principle everything is a document.

Everything except the username, which sits in a session variable lost upon a refresh.

Otherwise PouchDB, will retain data between page reloads.

But as you move on beyond your first version, try to replace PouchDB with something inspired by it.

This will teach you how to create, clever databases.

Finally, it is very unusual how simple creating a web desktop is, you can create a very nice UI while studying CSS and HTML.

The primary purpose of a web os, is to serve as an entry in your design portfolio.

But you can upgrade that, by introducing an Automator like builder of window apps.

And by taking it even further, and going your windows ports, that allow you to connect windows together…

And create a visual programming language, similar to Blender’s Geometry Nodes.