devlog #12 - the end? (for now)

this is going to be my last devlog before I ship tundra, i’m really proud of how far it’s come and the fact that i’ve actually managed to finish a project for once! I didn’t quite get to add everything I wanted but most of it is there

text editor time!

i added a real simple text editor that can save and load files from the “disk”. i don’t really have anything else to say about it

rated D for dialogs

in order for the text editor to work properly, I had to make save and open dialog boxes. these are basically an unholy frankenstein of the normal dialog box and the file browser app, and they work well enough

object permanence

using JSON and the world’s jankiest serialization/deserialization system I was able to save the user’s filesystem state to localStorage so that even of you reload or close the page, your precious writing will be preserved

you’re getting the boot

real operating systems don’t open straight to the desktop - theres a whole boot sequence that leads to this (and if you’re cool and use linux it’s all on display for you). inspired by @cooki’s FPS-OS (go check it out it’s really cool) i added a boot screen that looks pretty alright I guess.

visual imagery

finally, I got around to adding icons for each app. they’re 16x16, made in aseprite over the course of about 10 minutes, and work just enough that I don’t need to redesign them constantly.

next steps

• ship it!

devlog #11 - ctrl+alt+delete

this is a bit of a shorter devlog since I basically only added one thing - a functioning shutdown sequence! first a little dialog pops up asking if you’re sure, and then the whole screen goes black and says “shutting down…”, finally followed by an elite reference (Progressbar95 players rise up!)

devlog #10 - new apps

after like a month-long hiatus i thought that i ought to add a few more apps - this is meant to be somewhat useful after all!

calculator

this is a really basic calculator app, basically when you press a button it adds its value (like 2 or + or .) to an expression, and when you hit the = button it evaluates the expression with eval(). yes, i know its not the safest but it works.

colo(u)r picker

this one is also really simple: every time you press a key on your keyboard, a new random colour is generated and the rgb and hex values are shown in the bottom. need i say more?

file explorer

once again, this is really basic. all it does is gets the contents of the current directory (i had to make a new fs function to return each path’s type as well) and then makes a new element for each path with an icon corresponding to what it is. there’s also a back button if you need to… well.. go back

next steps

• file opening from the file explorer
• text editor
• more functions in the calculator / better calculator

devlog #9 - files!

what’s an operating system if you can’t have files? so, i decided to write a basic filesystem for tundra. paired with a simple terminal and now tundra is actually kind of cool!

the filesystem

tundra uses a really simple filesystem model: there’s a File and a Directory class that both inherit from FSNode, Files have names and contents and Directories have names and children. tundra uses a traditional unix file layout (/home, /bin, /etc and so on) because its cool.

the terminal

i really wanted some way to navigate the filesystem but didn’t feel like implementing an entire file browser so I added a simple terminal. it has a few methods like writeln and readline which you can use. all the commands (including the shell!) are defined in their own classes, just like apps, which makes it really easy to add new ones. so far, i’ve added cd, ls, mkdir, touch, cat, and my own version of neofetch.

next steps

• an actual file browser
• some more commands
• ANSI escape codes for colours
• a text editor to make files for the filesystem

devlog #8 - too many changes!

my devlogs from here on are going to be getting a lot longer now because i’m really settling into the grind, so i’m going to try out a more structured format.

dialogs!

i implemented a whole dialog box system into caribou (the window manager). so far it only has confirm (cancel/ok) style dialogs but it’s modular so i’ll be sure to add plenty more in the future. dialogs return promises that resolve with a value when an action happens (like when the dialog is closed), and this can then be used to execute code. this all came about because i wanted to add fullscreen mode but apparently browsers don’t like it when you request fullscreen without user interaction so here we are!

changelog changes (?)

the changelog, as promised, pulls directly from github to ensure you always get the most up-to-date changes with minimal effort on my end ! it uses marked and DOMPurify to parse the CHANGELOG.md from the repo and to make sure you are personally secure from anyone who’s dumb enough to waste their time trying to attack tundra.

preparing for themes

soon, i’ll work on adding themes to tundra so i decided i’d make it a bit easier for myself by making every single value that might want to be changed in css a variable. this was excruciatingly painful but we got through it in the end (it took like 10 minutes max). also, the background is now loaded dynamically through js which will lead to custom backgrounds at some point (much to the dismay of my browser’s performance)

next steps

• improve the dialog system and add more dialog types
• add a filesystem (very scary)
• add more apps
• add theming and changeable backgrounds

devlog #7 - now we’re getting somewhere!

tundra is starting to take off! i’ve changed the look of the taskbar very slightly (there’s now more padding), and i’ve also revamped the appdrawer so that it looks cleaner (and more like SerenityOS). also, submenus! now the appdrawer can be more organised as I continue to add apps instead of turning into a wastebin of buttons.

i deleted all of the original apps and have replaced them with (so far) an updated welcome/about (with wally, the derpy walrus who’s tundra’s new mascot), a proper changelog (eventually i’ll make it pull from github but for now it’s hardcoded), and a cube to test out threejs.

devlog #6 - more taskbar stuff

i decided that it’s probably a good idea to be able to see what apps you have open, so i implemented a little window list in the status bar. it’s pretty rudimentary - it just makes an element for each open window and updates any time a window is added or removed. eventually i’ll get around to adding window logos and context menus that let you close and minimise windows from the taskbar but that’s a bit advanced for the minute.

devlog #5 - visual updates

i decided i wanted to make tundra look a bit like serenityOS, so i modified the window header to include the distinctive red gradient. i also added a proper focusing system which required a decent rewrite of a portion of caribou (the wm).

also, i worked on centralising the wm. previously, windows handled their own focusing and closing but since i’ve discovered customevents windows now request this behaviour from the wm. finally, windows now auto-focus when you open them!

devlog #4 - almost time to ship !

after much tedious work i added 2 other apps: a notes app that currently has a small TODO list and a changelog; and an image viewer that shows off a random image i’ve taken.

i’ve also prettied the whole thing up a little bit by changing the font from [default] to Cozette, a nice cozy bitmap-ish font.

finally, i added an app drawer so you can open all the (3) apps available in v0.1.0! i’m really looking forward to adding tons of new features and making it look super awesome!

devlog #3 - windows (again!)

windows and apps are now instanced and defined purely in their own classes in javascript instead of being predefined in HTML and shown / hidden. i know it’s not strictly part of the mission for WebOS 1 but it makes me feel a bit better about myself AND it’ll make things a whole lot easier for me down the line. since apps are instanced, i can have as many welcomes as i want !

devlog #2 - windows

i started working on the first iteration of caribou - tundra’s window manager (aka a window class and a list of open windows). so far, windows can be dragged around using some very janky freestyled code, and can also be closed (one of the can even be opened again !). it’s currently looking quite… webby, so next i’ll probably work on making it look a bit more personal (maybe a bit like my personal homepage??)

devlog #1 - let’s make an OS (sort of) !

building my own OS has been a dream of mine for a long, long time but i’ve never actually been able to make one before (because i know next to nothing about low-level programming). so imagine my reaction when i saw that i could get 50 stardust for making one? well, one small catch. it had to be a web-based OS. wait, is that really a catch though? its like a thousand times easier, and has just enough instant gratification for my short-form content-fried dopamine-addicted brain. so here we are. so far, tundra has a window and a status bar, and thats about it (also, the wallpaper is a photo i took down at the beach today !). i’m really looking forward to adding a ton more features to tundra in the future.