Ship #1

@nicholas1023 on Nicholas' OS · about 1 month ago

I made a web-based OS that includes a panel with a clock and power off button, a file viewer, a terminal version of my personal website, and a web app installer that allows you to install websites that are not web app as well. The most challenging part was the web app installer as I needed to develop the logic to integrate the website as an app and allow them to have a top bar as well. I was quite surprised with the result, as it was able to make a website look like a native app (In fact, the terminal is a web app!) and the power off button made it really look like a real low level OS running on a computer. One thing to note is that the installer is not able to launch sites that disallow 3rd party embedding.

3 devlogs
7h
WebOS 1

Try project → See source code →

Open comments for this post

@nicholas1023 on Nicholas' OS · about 1 month ago

2h 24m 34s logged

New app installer for my OS!

In this devlog, I have created an app installer that installs a website as an app, much like how a web app works. However, this function only works for URLs that allow embedding.

I have also solved a bug where apps dragged past the viewport creates a scrollable viewport by adding this:

overflow-y: hidden;
overflow-x: hidden;

I’ll be shipping it soon! Try my OS out at https://nicholas1023.github.io/Nicholas-OS/!

Here’s a demo video of the installer installing hackclub.com as an app!

Open comments for this post

@nicholas1023 on Nicholas' OS · about 1 month ago

2h 22m 28s logged

Added new apps to my OS!

I’ve added a file viewer and terminal app to my operating system!

What’s new?

Window dragging finally works!
Windows are able to move to the front!

Problems I’ve faced

I had issues making a window come to the front when clicked or move. Initially, I was using .style.zIndex++, but it did not seem to work when a window was clicked multiple times. To solve this, I changed all the z-index of all windows when one is clicked, to ensure all of the values sync.

The buttons on the top bar are currently text-based, so I’ll be creating icons for them, and to declutter the buttons top bar on apps.

Open comments for this post

@nicholas1023 on Nicholas' OS · about 1 month ago

2h 1m 4s logged

Finished the windowing system and a bottom panel!

What’s new

Loading screen
Windows with maximise, minimise and close buttons
Bottom panel with time and power off button

What I’ll be working on next

Next, I will be making the windows draggable, and creating icons for the apps.

I’ll also be improving the loading screen, which currently only consists of the following code.

<div id="boot">
    <div style="text-align: center;">
        <h1>Nicholas' Operating System</h1>
        <p id="loading">Loading...</p>            
    </div>
</div>

Problems I faced

When creating the window functions, which manages maximise, minimise and close buttons, it did not seem to work. I realised later that the function name was actually overwriting a built-in function as it was initially named close()! In the end I renamed it to closeW(), where W stands for window.

I also faced issues with the height of the <main>. Initially, the height of main was set to 100%, which failed to work. After some searches online, I tried replacing 100% with 100dvh, which worked perfectly!