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

GenericOS

  • 10 Devlogs
  • 15 Total hours

A simple “operating system”, with cool features meant to improve my HTML + JS skills, while managing to host it on my own website! This was NOT created through the guide. View current version (may not up to date): https://genericos.jackjacobson2011.com/

Ship #1

Meet GenericOS.

This was my first web design project, it features many draggable apps, playable games, and interactive experiences. This was NOT created through the guide for the program, but still inspired by its ideas. I made all code, formulated all direct ideas,and created my OS all myself. I am very proud of it, spent a significant amount of time and effort on it, and am very excited to see what everyone things. PLEASE LEAVE CONSTRUCTIVE FEEDBACK, I want to know how I can improve. Thank you for taking the time to check out my project. Also thank you HackClub and everyone involved in it, it is an amazing company run an amazing way, it is truly inspiring and an admirable cooperation. I love the transparency, people, and services provided. Thank you for giving people like me an opportunity to make things like this.

Please review the readme in the Github repository for information on how I built the project, as well as what it features and how you can modify it.

If you like this and want to support me, check out my portfolio linked on the github.

Thank you all again, and if you are from Hackclub reading this, y'll are amazing people doing amazing work.

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

1h 44m 49s logged

OVERVIEW:
Very sorry for the short devlog but finished readme, fixed bugs. No real new features were added, but prepared for final release, fixed bug with deployment to demo site and made sure everything works as expected on it.
.
NEXT STEPS:

  • Confirm no bugs are present
  • Ship!
    .
    CHALLENGES:
  • I have trouble making readmes, but it was a lot of fun to research what goes into them and why they matter. I enjoyed creating it, and cant wait to share it with everyone!

OVERVIEW:
Very sorry for the short devlog but finished readme, fixed bugs. No real new features were added, but prepared for final release, fixed bug with deployment to demo site and made sure everything works as expected on it.
.
NEXT STEPS:

  • Confirm no bugs are present
  • Ship!
    .
    CHALLENGES:
  • I have trouble making readmes, but it was a lot of fun to research what goes into them and why they matter. I enjoyed creating it, and cant wait to share it with everyone!

Replying to @Jack_

0
37
Open comments for this post

1h 30m 26s logged

NOTE FOR VIDEO: The lag is because my computer is terrible, without screen recording there is no lag. This will not an issue for you most likely. (also check out my mad minesweeper skills)
.
OVERVIEW:
Finished minesweeper! There is now a fully working minesweeper game. It generates the game and works similarly to the original minesweeper game. It took less time than expected thanks to my existing framework.
.
NEXT STEPS:

  • Polish
  • Prepare for ship
    .
    CHALLENGES:
  • Debugging is difficult as this is the most javascript I have written for the project
  • Using JS to create and modify CSS, a lot of the styling was written in javascript as opposed to directly in the css files, I did this because the game was constantly changing and hence required constant stylistic changes, as well as to challenge myself in new ways.

NOTE FOR VIDEO: The lag is because my computer is terrible, without screen recording there is no lag. This will not an issue for you most likely. (also check out my mad minesweeper skills)
.
OVERVIEW:
Finished minesweeper! There is now a fully working minesweeper game. It generates the game and works similarly to the original minesweeper game. It took less time than expected thanks to my existing framework.
.
NEXT STEPS:

  • Polish
  • Prepare for ship
    .
    CHALLENGES:
  • Debugging is difficult as this is the most javascript I have written for the project
  • Using JS to create and modify CSS, a lot of the styling was written in javascript as opposed to directly in the css files, I did this because the game was constantly changing and hence required constant stylistic changes, as well as to challenge myself in new ways.

Replying to @Jack_

0
21
Open comments for this post

3h 7m 24s logged

NOTE FOR VIDEO: The lag is because my computer is terrible, without screen recording there is no lag. This will not an issue for you most likely.
.
OVERVIEW:
Added framework for a minesweeper game. Also fixed a lot of general bugs. Prepared my portfolio site at https://jackjacobson2011.com to publish the project. Please note the portfolio itself is not a part of the project but was included in this devlog for the sake of demonstrating the effort put into the easy access of my project.
.
NEXT STEPS:

  • Finish game
  • Upload to website
  • Polish
    .
    CHALLENGES:
  • Figuring out where the root cause of bugs were (usually from hard-to-catch typos)
  • Utilizing global functions to simplify code

NOTE FOR VIDEO: The lag is because my computer is terrible, without screen recording there is no lag. This will not an issue for you most likely.
.
OVERVIEW:
Added framework for a minesweeper game. Also fixed a lot of general bugs. Prepared my portfolio site at https://jackjacobson2011.com to publish the project. Please note the portfolio itself is not a part of the project but was included in this devlog for the sake of demonstrating the effort put into the easy access of my project.
.
NEXT STEPS:

  • Finish game
  • Upload to website
  • Polish
    .
    CHALLENGES:
  • Figuring out where the root cause of bugs were (usually from hard-to-catch typos)
  • Utilizing global functions to simplify code

Replying to @Jack_

0
15
Open comments for this post

1h 30m 6s logged

NOTE FOR VIDEO: The lag is because my computer is terrible, without screen recording there is no lag. This will not an issue for you most likely.
.
OVERVIEW:
General quality of life update! Added window snapping, to both sides and the top to maximize. Added window focusing system, allow use of multiple apps at once and better general use. Also on the backend, split the index.html file into a much more organized multi-file system! This allows for much better readability, sharability, and bug fixing. Also fixed various bugs throughout OS.
.
NEXT STEPS:

  • Add game
  • General polishing
    .
    CHALLENGES:
  • Having multiple files introduced the need for global functions. I was very confused when many different scope and definition errors. I learned how to make everything usable globally, which simplified a lot for code and fixed errors.
  • The snapping introduced very interesting behaviors with how the window is dragged and used, fixed by using various prevState variables and dissecting behaviors to see how they happened.

NOTE FOR VIDEO: The lag is because my computer is terrible, without screen recording there is no lag. This will not an issue for you most likely.
.
OVERVIEW:
General quality of life update! Added window snapping, to both sides and the top to maximize. Added window focusing system, allow use of multiple apps at once and better general use. Also on the backend, split the index.html file into a much more organized multi-file system! This allows for much better readability, sharability, and bug fixing. Also fixed various bugs throughout OS.
.
NEXT STEPS:

  • Add game
  • General polishing
    .
    CHALLENGES:
  • Having multiple files introduced the need for global functions. I was very confused when many different scope and definition errors. I learned how to make everything usable globally, which simplified a lot for code and fixed errors.
  • The snapping introduced very interesting behaviors with how the window is dragged and used, fixed by using various prevState variables and dissecting behaviors to see how they happened.

Replying to @Jack_

0
13
Open comments for this post

44m 58s logged

OVERVIEW:
Added a functional power menu. Currently, there are two options in the menu, restart and power off. Restart reloads the tabs, power off attempts to close the tab, although most browsers wont allow it so it gives you a pop up.
.
NEXT STEPS:

  • Add some sort of game (im thinking snake)
  • Add window focusing system
  • Split file into multiple (1000 lines in one html file might be a bit much)

    CHALLENGES:
  • Learned how to use classes in HTML, making cleaner and easier code

OVERVIEW:
Added a functional power menu. Currently, there are two options in the menu, restart and power off. Restart reloads the tabs, power off attempts to close the tab, although most browsers wont allow it so it gives you a pop up.
.
NEXT STEPS:

  • Add some sort of game (im thinking snake)
  • Add window focusing system
  • Split file into multiple (1000 lines in one html file might be a bit much)

    CHALLENGES:
  • Learned how to use classes in HTML, making cleaner and easier code

Replying to @Jack_

0
43
Open comments for this post

1h 29m 24s logged

OVERVIEW:
Finished the terminal app! It turned out to be a very interesting project. It works by having a certain input, where it checks a separate file to see if that input has a designated output, and then gives the output. Works very well, and looks great!

NEXT STEPS:

  • Add some sort of game to the OS
  • Make terminal actually change things on the OS?
  • Power Menu

    CHALLENGES:
  • Input is a very weird tag, caused a lot of bugs that had to be squashed
  • I very rarely use separate files, figuring out how to implement that and how it makes my code simpler and cleaner was a great experience.

OVERVIEW:
Finished the terminal app! It turned out to be a very interesting project. It works by having a certain input, where it checks a separate file to see if that input has a designated output, and then gives the output. Works very well, and looks great!

NEXT STEPS:

  • Add some sort of game to the OS
  • Make terminal actually change things on the OS?
  • Power Menu

    CHALLENGES:
  • Input is a very weird tag, caused a lot of bugs that had to be squashed
  • I very rarely use separate files, figuring out how to implement that and how it makes my code simpler and cleaner was a great experience.

Replying to @Jack_

0
15
Open comments for this post

1h 56m 36s logged

NOTE FOR VIDEO: The lag is because my computer is terrible, without screen recording there is no lag. This will not an issue for you most likely.

OVERVIEW:
Added the framework for a terminal app! It shouldn’t have been much work, but I encountered a lot of bugs with the general system. The taskbar behaves better, and soon there will be a terminal.

NEXT STEPS:

  • Make terminal functional, certain word input –> certain words for output. Help command to list things, info about project, joke commands, etc.
  • Add power menu, where shut off closes tap, restart reloads it, etc.

    CHALLENGES:
  • This has been a challenge throughout the whole project, though I haven’t talked about it yet but arrow functions! I’ve heard they’re much more efficient than other ways of doing it, but I didn’t know how to make them. Research and practice now makes it so all of my events are using arrow functions
  • Design challenges, deciding what behaviors I want when certain things are pressed, and how to prioritize certain things in the OS.

NOTE FOR VIDEO: The lag is because my computer is terrible, without screen recording there is no lag. This will not an issue for you most likely.

OVERVIEW:
Added the framework for a terminal app! It shouldn’t have been much work, but I encountered a lot of bugs with the general system. The taskbar behaves better, and soon there will be a terminal.

NEXT STEPS:

  • Make terminal functional, certain word input –> certain words for output. Help command to list things, info about project, joke commands, etc.
  • Add power menu, where shut off closes tap, restart reloads it, etc.

    CHALLENGES:
  • This has been a challenge throughout the whole project, though I haven’t talked about it yet but arrow functions! I’ve heard they’re much more efficient than other ways of doing it, but I didn’t know how to make them. Research and practice now makes it so all of my events are using arrow functions
  • Design challenges, deciding what behaviors I want when certain things are pressed, and how to prioritize certain things in the OS.

Replying to @Jack_

0
9
Open comments for this post

1h 17m 9s logged

OVERVIEW:
Added and refactored code to make the notepad app usable! You can open it and use it from the taskbar and the dekstop, type and save text in the editor, and maximize and move the window.

NEXT STEPS:

  • Add more apps, specifically a “terminal” where you can see certain things and kinda just mess around
  • Start menu to search and start apps?
  • Bootup page

    CHALLENGES:
  • text input tag is new to me, so its parameters and making it stay inside the window was difficult.
  • Taskbar had weird app performance with glitches being common when clicked

OVERVIEW:
Added and refactored code to make the notepad app usable! You can open it and use it from the taskbar and the dekstop, type and save text in the editor, and maximize and move the window.

NEXT STEPS:

  • Add more apps, specifically a “terminal” where you can see certain things and kinda just mess around
  • Start menu to search and start apps?
  • Bootup page

    CHALLENGES:
  • text input tag is new to me, so its parameters and making it stay inside the window was difficult.
  • Taskbar had weird app performance with glitches being common when clicked

Replying to @Jack_

0
100
Open comments for this post

1h 7m logged

OVERVIEW:
Added framework for apps! Created a way to add icons to the desktop, click to open them, drag around the windows, and control the windows using button, implemented 12 hour time clock, confirmed it worked with different time zones.

NEXT STEPS:

  • Add functionality to notepad
  • Fix bugs with maximized windows (task behaving weird)
  • Add more apps

    CHALLENGES:
  • Javascript behaving weird with editing document features for the windows
  • Dragging difficult to implement, wasn’t working when in certain places or when mouse moved in certain ways
  • creating something that looked actually niceish (this is good enough, right

OVERVIEW:
Added framework for apps! Created a way to add icons to the desktop, click to open them, drag around the windows, and control the windows using button, implemented 12 hour time clock, confirmed it worked with different time zones.

NEXT STEPS:

  • Add functionality to notepad
  • Fix bugs with maximized windows (task behaving weird)
  • Add more apps

    CHALLENGES:
  • Javascript behaving weird with editing document features for the windows
  • Dragging difficult to implement, wasn’t working when in certain places or when mouse moved in certain ways
  • creating something that looked actually niceish (this is good enough, right

Replying to @Jack_

0
27
Open comments for this post

51m 47s logged

OVERVIEW:
Worked to display an image in the background (currently windows xp, might be updated to something custom in the future). Added a clock to the bottom right.

NEXT STEPS:
12hr format, test how it responds to different timezones
Notepad app?

CHALLENGES:

  • spent time trouble shooting clock javascript, forgot to properly define a variable (had const now = date instead of = new date)
  • Had issue with line that sets background because I put the wrong path to image

OVERVIEW:
Worked to display an image in the background (currently windows xp, might be updated to something custom in the future). Added a clock to the bottom right.

NEXT STEPS:
12hr format, test how it responds to different timezones
Notepad app?

CHALLENGES:

  • spent time trouble shooting clock javascript, forgot to properly define a variable (had const now = date instead of = new date)
  • Had issue with line that sets background because I put the wrong path to image

Replying to @Jack_

0
14

Followers

Loading…