More colors!!!

Devlog #11 - 3 new themes!!

I made new themes!!!!!!!

I’m so happy to introduce you to my 3 colorful themes:

1. Moon Theme - “Earth set” photo from Artemis II mission, blue-colored
2. Aurora Theme - Earth’s Aurora seen from the ISS, green-colored
3. Sunset Theme - “Cotton Candy Skies”, Falcon 9 rocket, pink-colored

No gatekeeping, I’ve been searching for tutorial like this for so long so here’s the link for the tutorial. Hope it will be helpful!

I need a feedback!!

I’m not sure about the colors tho, please let me know know if everything is readable and if you perhaps would change anything

Thanks for reading, hope you like it!

new app and new ideas!

Devlog 10 - Full Voyager App

Full Voyager App

I finished coding new app!! It’s about Voyager mission, so basically Voyager 1 and Voyager 2. Research took me so long again!! But I’m happy with the results

New idea

So since I started this project I’ve been thinking about how do I arrange the blank space next to the rating images. Today, I added a brief text that’s describing the photo. Just a little, but now you’ll know what the images shows! You can see it on the 1st screenshoot below. Both screenshots are from the new app

What’s next?

I would love to make new function in the settings so you can change the background photo!! Wish me luck

Thanks for reading and have a nice day!!

New app!!

Devlog #9 Voyager Photos App

Guys I finished rating other projects and I have to admit that my devlogs are way too long
So today let’s keep it brief:

Voyager Photos App!!!

I’m gonna create another app just about voyager, but this is some sort of gallery of (only) 11 photos from these spacecrafts. I made cool infinite images slider with tutorial - it went really smoothly, and then I’ve been trying to make an information window appear when you place your cursor on the “?”. I don’t feel so comfortable in js yet but I wanted to do it all by myself so I went with css, and I really like the final results! You can see it in the video below

What’s next?

Full Voyager App, I hope!

See you in the next one, thanks for reading!!

15 min can’t be lost!

Devlog 8 - fixed all typos and changed the start text

So, what I changed in these 15 min?

• I changed all the typos in artemis app
• FORTUNATELY I checked the start window, and changed the description because it was really outdated! And therefore, I needed to change the image in my readme. I also adjusted it to width: 100%; height: auto because when I opened readme on my phone it was really stretched!

Below I leave a screenshoot of the app I’ve been adjusting, with the artemis II crew because they’ve been my motivation through this whole process!

I can’t wait to work more on SpacecraftOS!! Wish me luck on shipping ^^

One more devlog!

Devlog 7 - title and start animation

I wanted to ship already but lo and behold, I’ve added some changes!

So, what’s new?

1. I finally designed the header of my site! now it says SpacecraftOS and displays a rocket icon!
2. Updated Artemis App - I’ve added some information about Artemis IV and V
3. WELCOMING ANIMATIONNN!!!!!! - I’m very happy because I’ve managed to add a start animation, like welcoming screen or sth like this, idk how is it called, but now, when you enter my page, you can see an animation with my baner! It’s in the video below

What’s next?

I’ve also finished writing the README so now I will just read everything top to bottom again and SHIP!!!

Darkmode!!

Devlog 6 - dark mode and more photos on the borders

What’s new?

Darkmode and settings

I’m so happpyyyy I’ve managed today to create new very cool app - settings - where you can switch between lightmode and darkmode! At the beginning I tought that it would be a nightmaree but turns out, when I really focused, it was a smooth process and I really enjoyed it! But one thing is not working.. not so important but when I’m adding this app to the rising on top function everything crashes and I can’t open any app. I’ll try to fix it later.
There ofcourse will be more functions soon in this app so stay tuned!

More images on borders

I added more photos on the borders!

1. ISS
2. NASA astronaut working on Hubble
3. The Golden Record spinning on the Artemis II playlist app (I think it’s a really cool idea)
   Adjusting the astronaut was really hard, and the background did not removed well but I’ve managed to add some blur and eventually it looks okayy
   I’ve also changed the position of Artemis astronaut - I wanted to put it on the left but unfortunatelly, it cannot be here because then it covers the scroll bar. Adjusting the rotation helped a little and it looks way better!

What’s next?

I think I’m gonna ship soon! I’ve already writed the README and I just need to check everything. But don’t worry, it’s not the end of SpacecraftOS! I already have a lot of ideas

My website is all around Artemis now!

Devlog #5 - two new apps fully finished!

I finished the image slider I’ve been writing about in the previous devlog and added new app! I tought it will take me so much longer, but here I am!
But let’s start from the outset:

Finished Artemis Mission App

I’ve finally finished it! In my previous devlog I said that I found another tutorial on how to make image slider, and it was a bullseye!! After I adjusted it a little so it fits my images it’s working perfectly!! And looking so so good! I’m so happy!!

New app - Artemis II Playlist

So, I really wanted to implement some music into my website. But because it’s a SPACECRAFT operating system I knew it cannot be just basic music app. While working on the Artemis App I came up with this amazing idea - I’m pretty sure that you heard about the wake up songs from Artemis II Mission. I decided to do an app with that playlist! Since it’s just embeeding the code from spotify it wasn’t such a big problem. I think that the hardest thing here was to make the app icon, which is the moon listening to music on headphones!! I really like this idea, let me know what you think about it

What’s next?

I want to add some images on the borders like in the Artemis App. And then another app!!

Thanks for reading and have a nice day!

Such a messs!!

Devlog #4 - Artemis App!

Your opinion

Before we begin, I’d like to know your opinion about the images layout. The 3 first screenshoots below shows different layouts.

• Screenshoot 1: This is the first version I coded. But it covers the close button and most importantly - the scroll bar which is so unpractical
• Screenshoot 2: this is how I had imagined it when this idea came to my mind. It also covers the close button and the scroll
• Screenshoot 3: last version I’ve coded. I did not planned this layout but I think it looks great and is the most practical!
  Unfortunately the 3rd option covers the move button but by adding some z-index everything works well, and looks better than when adding z-index to the scroll bar bc the rocket/astronaut is either covered by the scroll or too far away.

Please let me know what you think!

Challange 1

Adjusting these images was such a challange. But I wrote it all down from memory! I added the position: fixed so it can exceed the window and adjusted the position several times! The biggest problem, as I said, was that they were covering the scroll bar and close button and then the move button as well. But I found the solution! I added the appropriate z-index to each of the elements and it worked!! (I’m really surprised tbh it was so easy and didn’t took me that long to figure out! I’m getting good at coding )

So finally, what’s new?

I added the Artemis Mission App!! It’s not an app just about the artemis II. It’s an app where you can learn about the whole mission, the SLS rocket, the Orion capsule and get to know some fun-facts!
Doing the research on all of these thing took me sooo much time! And then writing it down, deciding what is worth the attention and so on… it was kinda exhausting! But I’m so happy with the (not yet) final results!
Yeah, not yet meaning…

Challange 2

On the last screenshoot you can see the biggest mess on this app! Few photos totally without rhyme or reason! I was coding with image slider tutorial. Everything was going smoothly, till the creator of the tutorial said that now we shall see our photo aaaand yup I did not see anything. I was checking several times if I writed down everything the right way, I was looking for solution and eventually I created new repository and copied the whole code which he pasted in the comments (just to clarify - in this project I do NOT copied any code, I writed everything by myself). In this repository everything worked. When I saw the final results in the repository I had also noticed that it’s not really what I wanted to have in the Artemis App. Bc the code did not worked (probably because it already was in several divs and not like raw or sth) and bc it didn’t align with my vision I decided to just delete this whole code. I’ve already found another tutorial, with better design so I will keep you updated on how it’ll turn out!

What’s next?

1. Fixing the mess and finishing the app
2. New app (it’s going to be music app linked to the Artemis II mission!)

Thanks for reading and stay tuned!!

Personal Cloudly Site Devlog #3

Final devlog ayyyyyyyy
It was so fun to create!!

What’s new?

1. I writed a lot about things I love!

I tought it would be the easiest task, but I wrote so much that I had to get creative to fit it all in these clouds! I swear I changed the width and height of these elements several times. But it’s all done now and I think that I wrote about everything I wanted!

2. Changed the background

I added some smaller clouds and some fluffiness to the big clouds. In my opinion it looks way better now!

3. Photos!

In section about F1, Sports and astro-aero you can scroll through some meaningful photos for me. I think it looks so cool and is such a great idea!

4. Added plane that’s flying around the site (I’m sitting in the cockpit)

So, what you wil find here?

There are 5 sections:

1. About me (fav movies, music and my passions)
2. Projects (zooniverse and nasa stardance)
3. Astro-aero corner (astronomy and aviation)
4. F1 corner (and a bit of LeMans)
5. Sports corner (equestrian, skiing, snowboarding)

Project Summary

It was really nice journey to build this! To be honest with the process I got to know my self again and look at how precious my life is. I’m so gratefull for it and I think that it’s such a nice souvenir! I even look forward to come back here few years later

What’s next?

I’m going to write readme and ship! Then, I’ll get back to my webOS project. Thanks for being with me on this small journey!

Personal Cloudly Site devlog #2

Changed my mind!!

I decided that much better idea is to make several clouds, each for one section!
Besides, I changed the font and adjusted these divs so they fit the clouds. Now I’m going to design them in (I hope) cool way and add some photos. The most creative part just begun!

Cloudly Site Devlog #1

Welcome to my cloudly site!

I’m building another site with the “Personal Site” mission! It’s going to be cloud-themed because I love clouds! I wish I could flyyy

What I’ve already made?

I added some text and then, I wanted to make an cloud div. I was thinking a lot on how I can do this. Finally, I decided to work smarter and not harder. I took a screenshoot of my site, added it to paint and just painted cloud around my div. The div was too big and I needed to restart the whole proces few times. When my cloud looked great, I saved the image and added it to my site as the background. Then I just needed to adjust the div so it will extend to the entire surface area of ​​the cloud.

Next, I’m going to add more text and style this site a little more. Can’t waitt!!!

AYYYY FINAL DEVLOG!

Devlog #3 - more apps and final changes

Guys I can’t believe I did this!! (It’s such an achievement for me okay ) Let’s break all the changes I’ve made to some points:
(if you don’t want to read it all please skip to the last point because it’s about Poland in space and I love Poland and Space)

APPS! AND MANY MORE PROBLEMS.

Let’s start from the problems…

If you tought that in the second devlog I’ve finally managed to make working apps - you are so wrong. Barely 2 hours later I realised, that the (window) part was not a problem. Turned out, that when I changed this to the id of my app window, next apps opened the 1st app window, and not theirs window. I’ve been searching for solutions for HOURSS! Eventually I had asked ai for help. I had described my problem really pricesely. It found the problem! In this function function handleIconTap(element) I was supposed to write (element, window)… Fortunately, now it fully works!! I’m so happy because this was sooo frustrating.

New apps!

So, I’ve made two new apps! One similar to James Webb Space Telescope App, and one for notes and ideas. Let me introduce you toooo:

1. Hubble Space Telescope App! - As I said, this one is similar to JWSTApp but it’s around Hubble! You can rate photos, learn some facts about it and just admire another amazing spaceship.
2. NASCApp also known as Spacecraft Ideas. So from where is the abbreviation “NASCApp”??? Well, previously it was named “Notes About Spacecrafts”, but I decided that it’s so boring. Spacecraft Ideas is not really mind blowing name but it’s way better. I also had few problems with this app but after longer reflections, I decided to keep it simple.
   You can see these apps on screenshoots below.

Starlink Catch Guide and Minor Changes

I finished writing about starlink satellites in the Starlink Catch Guide window and added some minor changes to every window on my webOS after reading them all again. It was such a long process, but I like how it all looks together now.

POLAND IN SPAAAAAACE AND PIEROGI!

I added youtube video to the ISS Catch Guide window about Polish astronaut - Sławosz Uznański, eating delicious polish pierogi, on the ISS! I think that this is the most important part of my webOS. POLSKA GUROM!! (You can watch Sławosz eating pierogi on the ISS here )

What’s next?

I’m going to read it all again, write README, complete project info and finally, SHIP!!

Don’t worry it’s not the end of the journey because I started to like coding so much and I want to continue with webOS 2!

Thank’s for being with me and have a nice day!

I did itttt!!

Devlog #2 - Apps

Hi!!! I’m so glad to announce that my apps are finally working! There’re still few problems though. But let’s start from the outset:

James Webb Space Telescope App

This app provides few basic information and interesting facts about JWST. I had also added some photos which you can rate from 1 to 5 stars! You can see the app in the screenshots below.

Problems

1. As you can see, there’s so much space on the right from the images you can rate. I’m considering a lot of options, one of them is to just make two/three photos in one row, what do you think? Would this look better?
2. Double click app opening - the if and else statements made my app open at the second click, and not at the first when it’s selected. It selects with the first click and then, with second click, deselects and opens. Idk if it’s supposed to work this way. I think that now I’m going to leave it because at this point I’m just celebrating it works and I want to focus on other things.

Problems fixed 🥳🥳🥳

Yall don’t even know how happy I am because of these apps working!! It indeed was much easier than I tought, guess what stupid mistake I had made this time… in the function I did not changed (window) to my actual window. Lol. It was not the only problem on the way but it was definitely the main mistake. I’m so happy because now I can get creative and continue working on the apps design!!

Upcoming changes

Next I’m going to add few more apps. Can’t wait!

Thanks for reading this devlog. Hope you’ll have and amazing day!!

I dont know what I’m doing but I hope it will be worth it!!

devlog #1 - SpacecraftOS

Hi everyone! I detached the WebOS mission from ISS HUNT and created this project - Spacecraft OS. I noticed that it’s not really the way I want ISS hunt to look like, to be like.
To be honest - this tutorial is SOOOOO hard to me! The apps get me everytime! And besides it I made a lot of minor mistakes. For example, once I could move the start window alone but the guide window was moving only with the start one. And the blur wasn’t working, I was so frustrated and reallyyy confident that there are NOT any stupid mistakes like wrong id. Until I realised that the top bar only blurs the start window… I haven’t closed the div. Yeah. That is a stupid mistake. Even tho it’s hard to me I’m not giving up! Others have done it so can I!

For now, I created the top bar and completed the start window and the ISS catch guide. Currently I’m working on starlink catch guide and then I’m gonna work more on these wretched apps 😭 Wish me luck!

ISS HUNT - devlog #1

Hi! Recently I’ve been working on ISS hunt, a website that helps you catch ISS flying over your country! For more information check this project description.

1. What I’ve already done
   I’ve been focusing on the page design - you can see how it looks in the video below! I added ISS moving around the site, it wasn’t really difficult but as you can see in the video the spin on its own axis is taking it so much time - well, not anymore! I managed to fix it and now it’s just a brief moment.

2. What you can see in the video
   Besides the ISS you can see the upper band showing current time and day and below you can see few countries - what’s the plan? I’m starting with 3 countries, by clicking on them soon you will be able to open a window with several information about next ISS flyovers, such as where, when or the weather condition. I want to make it exist first, and then I will make it great! The plan is to make selectable options with all countries around the world, starting with these which you guys would like to see!

3. What’s next?
   I’m going to focus on few apps, that will provide the rundown on the basics of ISS

Thanks for reading my 1st devlog! And what about you? Did yall ever seen ISS flying over your country?