@huncikoma

Devlog #2. Building the sidebar consoleI
spent this session working on the sidebar panel. The layout is like a
“mission control”. A console on the left and a globe on the right. I
used CSS grid to achieve this. The console has a fixed width of 392px
and the rest of the space goes to the globe.I
built the console piece by piece. First I added a header with a status
light. It’s green when live orange when theres a warning and red when
theres an error. It’s basic. It gets the job done.Then
I added rows to show data. I styled them like telemetry data with a
key-value pair format. I used a number format called tabular-nums. This
keeps the digits lined up properly when they update.I
also added some toggle buttons, location input fields and a table to
predict when the ISS will be visible from a location. I tried to use a
monospace font for the data and a regular sans font, for the labels.
This makes it feel like an instrument panel and less like a website.While
writing this I found a typo bug. I had written –line-2 in my root
variables. Used var(–line2) in a couple of places. It took me a while
to notice why some borders weren’t showing up. It was a mistake.Next I need to hook up ISS position data. I want to wire the readout rows to show numbers instead of placeholders.

I started my ISS Orbital Tracker project. The goal is to create a 3D
globe that shows the ISS in real-time as it orbits the planet. For the
orbital calculations, I’m using satellite.js, which handles the SGP4
math. For the 3D globe, I’m using globe.gl with WebGL working in the background.Honestly,
HTML and frontend work aren’t my strong points. I feel most comfortable
with Python. However, “learn web development” has been on my summer
to-do list for a long time. Stardance seemed like the perfect
opportunity to finally jump in.I
began with some help from AI, and I won’t pretend otherwise. However,
I’m not just copying and pasting what it produces. I review every line
and ask, “Why does this work like that?” I’m making all the decisions
myself regarding structure and design. The AI acts more like a tutor
beside me than someone doing my work. I want to control this project,
not just watch it develop.So far, I’ve set up the basics. The HTML structure is complete. The scripts for satellite.js and globe.gl
are loaded and connected. I’ve also created a full color system using
CSS variables like –bg and –accent. I’m aiming for that dark “mission
control” vibe, similar to the energy in a NASA control room, but within a
browser tab.Next, I need to pull the ISS’s live position and display it on the globe. That’s the exciting part