You are browsing as a guest. Sign up (or log in) to start making projects!

Cyber OS

  • 6 Devlogs
  • 20 Total hours

I'm someone with pretty diverse interests. And I would love to introduce you to them! Follow along with me as I build my very own web-based OS that you can try out too! Art, literature, or math, I hope to have something for everyone.

Ship #1

#Overview
Cyber OS is a web based OS that is interactive with multiple draggable and closable windows. It has a hand-drawn background with a unique color palette inspired from cyberpunk and old CRT monitors.
#Applications
-Archive of Words: An application that introduces you to the most obscure words English has to offer. Have you ever wanted to win a crossword by knowing an eight letter word for theft? Well, here's your chance!
-Painterly: A standard painting application with a small twist- a pure black canvas and colors catered specifically for contrast without looking overwhelming. It also features a brush size changer, undo and redo buttons
-Calculator: Your standard run-of-the-mill application for basic arithmetic computations
-Display Settings: Distinct display settings meant to mimic the look of an old school CRT monitor. They can also be turned off, if they are not to the users' liking.
-Desktop Companion: An animated pixel sprite at the bottom right that keeps you company as you go about your work.
_
I honestly found that learning code while actively creating a project was so much more enjoyable. I ran into so many hurdles, especially with the js code, from formatting to naming mishaps. I did learn more from making those mistakes than just knowing about them. I did want to create a few more interesting applications, but I need to learn a bit more before trying them. Keep an eye out!
I'm incredibly proud of how this turned out. And I hope you'll love it too!
Cheers!

Try project → See source code →
Open comments for this post

22m 47s logged

So this project is finally ready to ship. Sorry for the formatting on the last devlog, I didn’t realize they added Markdown. I’m sure that must have been a nightmare to read through!

What I Did (Final Touches)

  • I felt the buttons could use some pizzaz so I changed the background to black, the text and the border to orange. It looks so much better! Check out the calculator, it looks amazing now.
  • Finally, I added a small animated pixel sprite on the bottom right of the screen. This sprite is just pure randomness personified. I had so much fun picking it out.

I created my GitHub repo and edited my README to look a little better. When I generated the link for my webpage on GitHub Pages, my top bar was cut off!?!? At that point, I was genuinely so frustrated. It wouldn’t fix no matter what I tried. In the end, I just generated a new link and it somehow showed up!? How? Great question, I have no idea.

I’m so glad I finally finished this OS! I never got around to thinking of a name so it’s just gonna stay as Cyber-OS lol.

I really never thought I would be able to make this, even when I started with the mission. I’m glad I stuck to it. Thanks for following along with me! Go check my OS out yourselves!

Cheers!

So this project is finally ready to ship. Sorry for the formatting on the last devlog, I didn’t realize they added Markdown. I’m sure that must have been a nightmare to read through!

What I Did (Final Touches)

  • I felt the buttons could use some pizzaz so I changed the background to black, the text and the border to orange. It looks so much better! Check out the calculator, it looks amazing now.
  • Finally, I added a small animated pixel sprite on the bottom right of the screen. This sprite is just pure randomness personified. I had so much fun picking it out.

I created my GitHub repo and edited my README to look a little better. When I generated the link for my webpage on GitHub Pages, my top bar was cut off!?!? At that point, I was genuinely so frustrated. It wouldn’t fix no matter what I tried. In the end, I just generated a new link and it somehow showed up!? How? Great question, I have no idea.

I’m so glad I finally finished this OS! I never got around to thinking of a name so it’s just gonna stay as Cyber-OS lol.

I really never thought I would be able to make this, even when I started with the mission. I’m glad I stuck to it. Thanks for following along with me! Go check my OS out yourselves!

Cheers!

Replying to @Ann_with_an_e

0
4
Open comments for this post

4h 44m 38s logged

What I’m Making : A custom web-based OS that I’ve taken to calling Cyber OS (cool name pending) What I’ve Done so Far: –So today might not have been the most productive day in creating something new per say. A lot of my time was spent refining features already available. Case in point, today I 1) Changed the content of one of my applications from interesting proses to words instead. I do maintain a list of obscure words, so it was really fun to pick which ones made the cut 2) I changed the canvas of my painting application from black to white and muted the colors available to fit my theme more. 3) I fixed an error in my calculator that involved exponents. I also changed the display to be slightly more neater. 4) I created an application to alter display settings. Most of the filters available are inspired from those old televisions, those really chunky cathode ray ones. I didn’t quite do it justice though I do think I might ship this as an initial version when I get the time. Not really sure about it, I’m really indecisive. Anyways, here’s the customary progress pic!

What I’m Making : A custom web-based OS that I’ve taken to calling Cyber OS (cool name pending) What I’ve Done so Far: –So today might not have been the most productive day in creating something new per say. A lot of my time was spent refining features already available. Case in point, today I 1) Changed the content of one of my applications from interesting proses to words instead. I do maintain a list of obscure words, so it was really fun to pick which ones made the cut 2) I changed the canvas of my painting application from black to white and muted the colors available to fit my theme more. 3) I fixed an error in my calculator that involved exponents. I also changed the display to be slightly more neater. 4) I created an application to alter display settings. Most of the filters available are inspired from those old televisions, those really chunky cathode ray ones. I didn’t quite do it justice though I do think I might ship this as an initial version when I get the time. Not really sure about it, I’m really indecisive. Anyways, here’s the customary progress pic!

Replying to @Ann_with_an_e

0
3
Open comments for this post

4h 30m 4s logged

What I’m making
-So I’m actively working on a custom built OS that I’ve been calling Cyber OS because I can’t think of a great name yet. I plan to make applications?/windows? for my hobbies, which are pretty wide ranging. From art to math to literature, the goal is to have something for everyone.
What I’ve done
-Quick recap, I made an information window, drew the background, and made a scalable code for closing and dragging windows. I then created my first app that is a small archive of phrases that I came across while reading that I particularly liked.
-Update time! I made an application for drawing. It has eight colors, undo and redo buttons and a feature to change the brush size.
What I struggled with
-This time I had more of an issue making the code by myself. Most of the time was spent debugging tbh. I had a really major issue with the colors not showing up on the canvas. It was really a learning experience fixing that. I also realized that the brush slider just made my entire window move. So I changed it to an number input based thing. I ran into a few issues with the slider too, but managed to solve it relatively quicker.
All in all, I’m really proud of all the progress I made.
Cheers!

What I’m making
-So I’m actively working on a custom built OS that I’ve been calling Cyber OS because I can’t think of a great name yet. I plan to make applications?/windows? for my hobbies, which are pretty wide ranging. From art to math to literature, the goal is to have something for everyone.
What I’ve done
-Quick recap, I made an information window, drew the background, and made a scalable code for closing and dragging windows. I then created my first app that is a small archive of phrases that I came across while reading that I particularly liked.
-Update time! I made an application for drawing. It has eight colors, undo and redo buttons and a feature to change the brush size.
What I struggled with
-This time I had more of an issue making the code by myself. Most of the time was spent debugging tbh. I had a really major issue with the colors not showing up on the canvas. It was really a learning experience fixing that. I also realized that the brush slider just made my entire window move. So I changed it to an number input based thing. I ran into a few issues with the slider too, but managed to solve it relatively quicker.
All in all, I’m really proud of all the progress I made.
Cheers!

Replying to @Ann_with_an_e

0
3
Open comments for this post

6h 30m 1s logged

What I’m Making
-A web-based OS that I’m calling Cyber OS currently. I’m a person with really diverse interests, so I’m creating something that will hopefully spark your interest too.
What I’ve Done
-Major style updates
-Drew an app icon
-made a draggable and closable window
-connected the app and the window
-created hover effects for each button
-organized my code
Next session I’ll probably begin creating the next app. I also want to make a task bar of sorts. Despite doing my best to keep my code clean its really messy rn. I’ll build the app in another file and then bring it over to my OS. Overall a really productive day, but I’m pretty pleased with the results. The progress from my previous logs is really visible. I’m knackered though, so I’m off for the day.
Cheers!

What I’m Making
-A web-based OS that I’m calling Cyber OS currently. I’m a person with really diverse interests, so I’m creating something that will hopefully spark your interest too.
What I’ve Done
-Major style updates
-Drew an app icon
-made a draggable and closable window
-connected the app and the window
-created hover effects for each button
-organized my code
Next session I’ll probably begin creating the next app. I also want to make a task bar of sorts. Despite doing my best to keep my code clean its really messy rn. I’ll build the app in another file and then bring it over to my OS. Overall a really productive day, but I’m pretty pleased with the results. The progress from my previous logs is really visible. I’m knackered though, so I’m off for the day.
Cheers!

Replying to @Ann_with_an_e

0
3
Open comments for this post

2h 22m 3s logged

What I’m Making
-I’m working on a web-based OS that I’ve been calling Cyber OS (cool name pending)
What I’ve added
-a top bar
-an active clock
-a draggable and closable information button
What I struggled with
-I made a few mistakes with naming variables, which took me a lot longer to identify that it should have.
-I couldn’t figure out why my page was a little larger than my screen. I kept having to scroll. I deleted a few lines of formatting and re-wrote it. Didn’t really work out. A second of googling later, I found out about the overflow button?/function? Phew. That was a relief.
Cheers!

What I’m Making
-I’m working on a web-based OS that I’ve been calling Cyber OS (cool name pending)
What I’ve added
-a top bar
-an active clock
-a draggable and closable information button
What I struggled with
-I made a few mistakes with naming variables, which took me a lot longer to identify that it should have.
-I couldn’t figure out why my page was a little larger than my screen. I kept having to scroll. I deleted a few lines of formatting and re-wrote it. Didn’t really work out. A second of googling later, I found out about the overflow button?/function? Phew. That was a relief.
Cheers!

Replying to @Ann_with_an_e

0
4
Open comments for this post

1h 2m 53s logged

What I’m making:
-I’m working on a Web-OS that I’ve named Cyber OS.
What I’ve done so far
-I created the welcome box and stylized it
-Drew a wallpaper for the background
What I struggled with
-Mainly I had a bit of an issue with Github, because I couldn’t figure out why my time wasn’t logging when I was coding in an active workspace. Eventually I decided to copy the code I wrote to my VS editor and upload the project in Github later. I did loose around half an hour but uk….you do what you must.

What I’m making:
-I’m working on a Web-OS that I’ve named Cyber OS.
What I’ve done so far
-I created the welcome box and stylized it
-Drew a wallpaper for the background
What I struggled with
-Mainly I had a bit of an issue with Github, because I couldn’t figure out why my time wasn’t logging when I was coding in an active workspace. Eventually I decided to copy the code I wrote to my VS editor and upload the project in Github later. I did loose around half an hour but uk….you do what you must.

Replying to @Ann_with_an_e

0
3

Followers

Loading…