Ship #1

@KerhylonKava on Arty WebOS · about 1 month ago

I made Arty Web OS which is honestly a mash of different random ideas, with no cohesive theme. Kind of reflects my irl interests tho. Some plane related stuff in the background, some art, some tea related stuff… I must admit, I’m quite weird.
To make clear my intentions; I want to ship this, then fork the repo, and completely re-design the theme (to be more cohesive, since I have better ideas than complete randomness) of the site, either to be playing card related, or tea related. I know, two very different things.

Anyway, the site has hand-drawn art, an easter egg reference to another of my projects in the form of an icebreaker question, and a tea bag tab quote, because who doesn’t want to be subjected to a random quote fit for a tea-drinking brit (I’m British, just to be clear, so I’m allowed to make fun).

My “extra” features are blockquotes and detail drop-downs.

I had to ask my dad for help because the js was erroring when called to open/close the windows, and he helped me figure out I needed to defer the js loading.
I’m proud that I was able to build the site from the start with separate js, css, and html files, instead of having it all in the html file for the first few lessons like the guide. It did cause a few issues (like the bug my dad helped me fix), but in the long run, setting it up like this will hopefully make it easier to scale.

To test out my project, you just need to follow the link to the github page.

3 devlogs
6h
WebOS 1

Try project → See source code →

Open comments for this post

@KerhylonKava on Arty WebOS · about 1 month ago

1h 9m 18s logged

Woah! I actually updated the icebreaker question of the day!

Today its What’s the weirdest thing you collect?

And what’s that I see, a new feature as well?
It appears we have a details dropdown revealing my answer to the question… and an all new button which opens another window displaying a Tea Tab Quote! (Hastily designed, in an attempt to finish before the sticker deadline at midnight today in whatever timezone that I didn’t look up… oops)

And note to self, I really have to figure out a way for it to pull the daily icebreaker from a spreadsheet or something that does not require me to commit every day.

Anyways, this is my truly random website, basically for experimenting.
I think I’m actally going to fork the repository when I redesign the whole thing so that this can still exist if I ever want to experiment more or add other truly random things.

Oh, yeah, also, the windows now change which one is on top based on which was clicked most recently.

And to whoever reads this,
Thanks, and have a lovely day!
Cheers!
Kava

Open comments for this post

@KerhylonKava on Arty WebOS · about 1 month ago

3h 21m 2s logged

Two Interactive Windows Now!

After much hard work, (like, more than the guide suggests to spend on the whole WebOS project, never mind 1 2/2 of the 5 lessons), I have 2 interactive windows! The first is the welcome screen, and the second is the “Icebreaker Question of the Day” ~~which will be updated daily, as the name suggests~~.
The artwork for the little icebreaker icon was done by one of my teammates at a hackathon, actually for a website specifically for icebreaker questions.
Also you may notice the close buttons stick out of the window frame, and tbh, that’s because I didn’t want to figure out how to make them fit properly at the time, but now I like it soooo… I might just keep it that way.
Lowkey, I think I’m gonna ship it, and then completely overhaul it and create a card game focused OS that displays some playing cards I’ve designed and some how-to’s for my favorite card games.

And don’t read too much into the icebreaker question. I definitely didn’t come up with it because I was eating cake in a weird way… Definitely…

Open comments for this post

@KerhylonKava on Arty WebOS · about 1 month ago

1h 39m 21s logged

Basic setup of home page. Technically I called it Arty Web OS, but I’ll see where inspiration takes me for the real theme. I would make it about me like the guide suggests, but I already have/made a personal site.
The background is a flying dream/vision board I found on Pinterest, and the blue swirly drawing in the center “window” was drawn by me.
I started right off the bat with the CSS in a separate file since I find that easier in the long run, and I did borrow some code from my personal site to get the CSS started – think style presets for selection, images, and my favorite,
:root{ --base-color: #6e6a4b; --text-color: #f8b91a... etc.
so I can change colors without having to individually edit each instance it appears.
I’ll probably add more tomorrow, and maybe ship it in some way, shape, or form by Monday to complete the weekend sticker quest thing.
Cheers!