Devlog 8 - Final devlog, cursor, scrollbar and minor changes

Please watch the videos below if you’re a voter and you can’t visit this website by computer. The first video is speeded up

Cursor

I added this cyan star cursor! I knew how to change the cursor but I had such a problem with making it different while pointing. Eventually I asked ai for help and it turned out pretty well - I think it adds some whimsy to this page

Scrollbar (visible on second slide)

I also styled the scrollbar!! I used youtube tutorial for this one. Looks much better now, I love the cyan accent!

Few minor changes

Fixed some bugs, some typos, added few words

Thank you!!

I’m gonna ship it now, thanks yall for your support I really appreciate it. This project was so fun to make, CSS is awesome. Wish me luck

Devlog 7 - About segment

Hi again! 5/5 segments are complete!!

About

This segment is just a short description on the ISS and a photo with cool animation

What’s next?

I’m not shipping yet, now I need to perfect this site!

1. Style the scrollbar
2. Fix some animations
3. Add some details

It’s near finish! Thanks for reading

Devlog 6 - Education segment

Hello everyone, 4/5 segments complete!

Education

In this section I embedeed 2 imo interesting videos from the ISS and a button that direct you to the ISS site!!

Obviously I’ve also added some animations and I fixed the animation from guide segment, sorry I forgot to put this in the video, but I think that it looks much better now!

If you’d change anything please let me know, I’d love to get to know your opinion!! Thanks for reading and have a nice day

Devlog 5 - Guide and Social media segments

Hiii! 3/5 segments finished!!

Social media

That’s just a segment with ISS socials (but the tiktok one is ESA’s account bc iss don’t have their own and esa post a lot from the ISS!)
But I’ve done this in such a… unique way!

1. The social media icons you see is just one full img
2. I added A B C and D text and centered it on these icons
3. Added href to these abcds and it’s working!
4. Last step - opacity: 0

But why this way?
I’m sure that there’s an easier way to do this but I’m not that experienced and I like to create things on my own, I came up with this and it works!! So yall remember, work smarter not harder!

Guide segment

I’m not so sure about this one. Please let me know - should I keep this animation, where the letters are “dancing”, or should I change it to some smoother animation? I kinda like it bc it’s like futuristic computer coding something vibe but idk, so pleaseee watch the video on the 3th slide and let me know below!! It would be highly appreciated!!!

Thanks for reading and have a nice day!

Devlog 4 - Astronauts Segment

Hi everyone!! 1/5 segments are finished!!
I don’t have much to say as I really like working with css and everything is always so smooth. I enjoyed doing the research and getting to know some interesting information about these people!!

In this segment you will find:

1. A lot of astronauts photos with cool animation on scroll at the top
2. Section about Peggy Whitson
3. Section about Scott Kelly

I decided to write a little bit about 2 people who did some iconic things on the ISS. I didn’t wanted it to be boring and I think that I found the perfect balance.

Thanks for reading and have a nice dayy!!!

Devlog 3 - start screen and a lot of styling!!

So the “raw” version is complete!! This, or so, is how it’s gonna look. Seriously, I love css so much it was so fun to make this!!

Ai usage

To the scroll element I needed to add 2 animations:

1. To make it “jump”, infinite
2. To make it fade while scrolling

I didn’t know how I can add 2 animations and therefore I asked ai. The solution is to add the second animation after a coma but it wouldn’t work very well bc I had, among others, animation-timeline: view(); it also helped me with this one and the solution here is to add auto, view(), normal, 0% and so on. A small thing, but it was really helpful.

What’s next?

1. I need to fill every section with many cool animations and information!!
2. I would love to add maybe an interactive background or just some animations bc rn it’s kinda blank

I love how it’s turning out and can’t wait for the final results!!

Devlog 2 - a complete rebrand!!

New Idea of the ISS hunt

I never wanted it to be a webOS, but when I created this project I just didn’t know what an OS meant lol, while working on spacecraftOS I really liked css, and I also came up with an idea..

I’m staying with the design and ISS is still gonna be the main character, but instead of building some advanced system I’m going to make a pretty website with a lot of animations. It will be a vast guide about the ISS!
Css makes me happy and fulfilled, I really enjoy learning new stuff about it. I’d love to create more beautiful and breathtaking websites. I can’t wait to improve my css skills!!

Yk stardance is ending soon, I wouldn’t even have the time to learn enough js

Also, I’m so grateful for all the reviews I got on spacecraftOS and a 18,53x multiplier!! Thank you all it makes me so happy!!! 😭💗

So, what I’d already done?

1. Deleted most of my code
2. Created header on scroll animation (you can see it in the video below)
3. Left the orbiting ISS bc I spent on it so much time, looking forward to find some use for it!

I think that I’ll just change the background colors as I’m looking at it now, lmk what you think!

Can’t wait to create more!! Thanks for reading and have a nice day

Scrollbar is working!!

Devlog 24 - scrollbar bug

Guys I think that this bug was (is) my personal fault, bc the scroll bar is visible in every single browser different than my current one lol I probably have some sort of extension that adds none !important or sth to my code’s head and it ruins everything, but it shall work on every other device, on every other browser.

Tbh I also used ai to fix it but it didn’t really helped bc it was my internal problem. So happy that it’s working, just wanted to clarify and log these 16min!!

If any problems with scrollbar occur, please use keyboard arrows to scroll through windows

Again, thanks for reading and have a nice day!

happy and frustrated

Devlog 23 - Dock animation, scrollbar and NGRSTApp

Dock Animation

I really like this animation!! It’s so smooth and cool and I’m so happy bc I learned new thing with the tutorial!! It came out exactly as I wanted

NGRSTApp

It’s finally finished!! I managed to add some things regardless it’s such a fresh mission. Hope yall like it!

Scrollbar

Yeah so here’s the frustrating part. I coded really pretty, unique and practical scrollbar in the css but I used webkit and it worked on microsoft but on chrome - not anymore! You can’t even see the scrollbar! I don’t have time anymore - I’m leaving in few hours, I commented it out and I hope I’ll fix it one day

Additional changes

1. Rewrited README
2. Added some events to the calendar

What’s next?

I’m gonna ship now!! Wish me luck and thank you all for your support throughout the whole voyage!!

Which one should I choose?

Devlog #22 - Timer

So I just made a timer with tutorial, but I need your help!! Should I keep miliseconds (slide 2) or keep it simple just with hours/minutes/seconds??
I kinda think that h/m/s looks better but it also seems so boring and less “advanced” than h/m/s/ms!!

Also this was such an easy tutorial, fortunately everything went smoothly!! Yall probably know bro code but if someone wants here’s the link

What’s next?

1. Dock animation
2. NGRSTApp

Thanks for reading and I’m waiting for your comments!

I’m back!!

Devlog #21 - new colors

Hi everyone! I’m finally back but from hospital… right after my trip I was diagnosed with severe anemia and had to stay in the hospital for four days. I’m feeling good but I’m a little worried bc I lost so much time and I’m leaving on next trip again in few days!! There’s not many things left in SpacecraftOS tho, so let’s summarise it

What’s new?

In the video below you can see that I adjusted the calendar colors for every theme. It was such a fun process! I like how it looks now. I also managed to fix the days align and now it works perfectly, always in 7 columns.
Hope yall like it!

What’s next?

I’m going to work on dock animation!! I also need to finish NGRSTApp but I think I’m going to keep it simple bc I don’t have so much time and I want to ship by the time I leave

Thanks for reading, take care and have a nice day!!

Reallyyyyyyy time consuming Calendar

Devlog #20 - Calendar

So I spent this whole day coding this calendar with youtube tutorial. This tutorial was only 17min but it took me 5h

Then I needed to fix some typos bc I ofc made a lot and then many many styling!!

It’s not the final result!

I’m going on a trip tomorow, so I need to take a break from coding. To adjust the width and height, make it all fit to my site, it takes so long, and then I need to change the colors, bc I was just testing with the pinks. Change colors to all of my themes 😭 But it’s okay I got this

Disappointing surprise

You can see in the video on the second slide that there are 6 columns in the next month instead of 7! I’ve been so happy bc it was working in august, and then I changed months and it was a little disappointing surprise. I’m gonna fix it later!

What’s next?

When I’ll be back I’m going to work on this app! I didn’t expected it to be that hard

Thanks for reading and see you in the next one!

More Animatiooons!

Devlog #19 Animations on scroll

Animations

So recently I’ve been working on animations on scroll! Now my Apps about spacecrafts are more interactive and less boring.

In the video below you can see all of the scroll animations I’d added till this moment.

I feel so confident with css animations, they give me so much fun!!

Icon

The video is cropped so you can’t see the snake game icon but it finally is here! I added it in the second slide so you guys can see it! Let me know what yall think.

I wanted to keep the one real-life, space themed addition (like moon in the music app) so the snake has galaxy eyes.

Nancy Grace Roman Space Telescope PROBLEM

As you can see I also added an icon for NGRST App but it’s an upcoming mission and I don’t really know what to do with it!!

Someone requested it in the feedback, so I really want to implement it but idk, maybe I shall add a countdown? But it will be outdated soon. Many things can be outdated!

Thanks for reading and have a nice day!

The most spacecraft app on spacecraft os?

Devlog #18 - MapApp!!!

ALL SPACECRAFTS IN ONE PLACE WHAT AN AMAZING FEATURE!!

What’s new?

MAAAP AAAPP

While doing research on Voyager 1 and 2 I found this “Eyes On The Solar System” from NASA, and noticed that you can embeed it, and that’s what I’ve done!

First and foremost, you can check here the position of any spacecraft you want! That’s why I called it Map App. Moreover, that’s a place with a lot of information, and whole spacecraft history!

As you can notice, it didn’t take me so long (bc it’s just embeeding), so what I’ve also completed?

1. Fixed some bugs
2. Finished icon for snake game

What’s next?

NGRST app! (Can someone guess, what does this short stand for? Hint: HST and JWST are already in spacecraftOS!)

Perfecting

Devlog #17 - snake game and organisation

What’s new?

Snake game

As you can see, I’ve styled the snake game a little! I also added start/tutorial/guide window, I added it by creating new window and setting start button as the window close button hihi work smarter not harder.
Ai usage
I couldn’t figure it out how can I set imgs as the background, food and even for snake, so I asked ai. It’s just creating const with img and adding drawImage instead of fillStyle, and I’m so happy bc now I understand it and know how to implement imgs to js!

WHERE’S THE ROCKET?

It was too hard!! I really tried, but when I managed to set the rocket as the snake’s head:

1. The rocket was too small
2. It wasn’t rotating

It looked so bad and if I wanted to continue with this idea I would need to use ai, so more ai than I would like, so I eventually there’s snake in the snake game.

More organisation

I created folders in the img folder for each app, bc the img folder was still a little messy. It was such a tedious process, but it’s much clearer now!

What’s next?

New REALLY COOL APP and snake app icon, which I’m going to edit today while watching F1 sprint

Random decision (but it was worth it)

Devlog #16 - Radio buttons and styles

What’s new?

Radio buttons

In my feedback someone suggested to add radio buttons instead of checkboxes bc then you can just choose one - and today I did it! I also styled it and added cool animation!! Each theme have different stars colors as well - you can check it in the video below.

Highscore

Somehow, I also added highscore to my snake game! I took a bit of information from tutorial 1 a bit from tutorial 2 and it’s working! Maybe not perfectly, but when you restart, new highscore will be visible, and it’s also in local storage so you can come back after a month and your highscore still will be there!!

So, why random?

It was a little unexpected bc I was working on the snake game (yeah it’s still not finished) and suddenly I gained a lot of motivation for the radio buttons. I knew I wanted to style them somehow, but I came up with the star design today, and I think it’s perfect!! What yall think about it??

What’s next?

Hopefully, I’m going to finish the snake app!

Such a challange!

Devlog 15 - snake game

Snake game?

Yeah I’m surprised too. But I really wanted to see how it works and just code sth like this (with tutorial ofc). I wanted to make it a little later but I had time today and decided - why not?

Okay but, 6 hours?!??!?!?!?!?

Yeah 😭 in short, I started with tutorial 1, but it didn’t worked, so I deleted everything and switched to another tutorial, where I realised that I just haven’t connected my snake.js to html lolll but anyways, I even liked tutorial 2 more, I feel like it gave me more styling options, but I needed to quit it because to restart you needed to refresh the site. I tried to just implement some functions, change some things but I’m not that skilled to do this yet. I deleted everything again and came back to tutorial 1 which I eventually completed!

That’s not the final results

I really want to make the snake head a rocket thats collecting fuel, but there are some problems!! Obviously lol, so I have something like this const snakeColor = "pink"; and I tried to change pink to class, to var but it didn’t worked, and I really don’t know how can I style this snake further, so I can add the rocket and fuels and many other things. That’s why I liked tutorial 2 more!

What’s next?

I will try to style the snake and this whole window basically!!
The video below is in 2x speed!

I code my function!!

Devlog 14 - animation and design

Function

I’m sooooooooo happy because yesterday I’ve managed to create my own function!!!
someone suggested to make other tab switching. I was looking for some tutorial, but couldn’t find anything so I asked ai what can I search in youtube to find it. For better or worse, the AI ​​gave me a little guidance on how it works (so I’d understand it in the tutorial, NO code), I didn’t even fully read this because when I noticed “animation” and “adding classes” I noticed, what I can do!
Few days ago I mentioned the theme switch tutorial, that helped me with understanding js!! With this knowledge and the pattern I already had from webOS tutorial, I managed to create opening app window animation!!

Additional apps

I also added left bar for the additional apps (/apps that are not about spacecrafts). For now just the background, but when I will finish every app I will also add some better animations and just style it better

Problem

At the very end of the video, you can notice such a huge problem with opening windows and theirs z-index. They open randomly, once under particular app once above, trying to catch this video when it’s smooth and they all go on top was really hard!! Please let me know if you know how to fix it
And I had also tried to make my windows resizeable but it unfortunally didn’t worked. I will get back to this later

What’s next?

To perfect it all and fix bugs! And then maybe some games?

Thanks for reading and have a nice day!!!