@huncikoma

Devlog #10 — Crew, startup & it’s doneLast pieces today.Crew
section first. Pulls from the Open Notify API — who’s on the ISS right
now. Had to route it through a CORS proxy because the API is http-only
and browsers block that from an https page. Filters for ISS crew
specifically, falls back to everyone in space if the filter comes up
empty. If the API dies, shows a graceful “unavailable” message instead
of breaking.Then the startup section — the part
that boots everything. Load saved observer location, fetch TLE, fetch
crew, then the intervals: tick() every second, orbit path refresh every
minute, fresh TLE every 2 hours, crew every 6 hours. Everything on its
own schedule.Finally made it actually easy to run.
Wrote a small Python server file that spins up a local webserver — this
is where my Python comfort zone finally got to shine in this project.
Plus a start.bat that launches the server and opens the app in the
browser in one double-click. And a README so anyone can figure out how
to run it.That’s it. The tracker is done. Live
position, 3D globe, pass predictions, crew list, one-click startup.
Started this barely knowing what a div was.

Devlog #9 — Pass predictionThe part I was most scared of. Also the coolest.computePasses()
steps through the next 6 days in 30-second jumps, calculates the ISS
position at each step, and converts it to look angles from your
location. Elevation above 10° = pass starts. Drops below = pass ends.The
visibility check is the fun part. You can only see the ISS with your
own eyes if three things line up: it’s above 10°, the sun is 6°+ below
your horizon , but the ISS up there is still catching
sunlight. Basically a sunlit object against a dark sky. That’s what
you’re actually seeing.Also finished the
geolocation button, the reverse geocoding for your city name, and the
pass table — time, duration, max elevation, compass direction. Visible
passes get an orange dot.Deepest I’ve been in over my head this whole project. But piece by piece, it makes sense now.

Devlog #8 — TLE age, observer location & localStorageShort but important session.First,
finished off the tick() function. Added TLE age display — shows how old
the orbital data is. Under an hour it shows minutes, over an hour it
shows decimal hours. Small detail but useful, stale TLE data means
inaccurate position.Then observer location. This
took a bit of thinking. The app needs to know where you are to predict
ISS passes — so setObserver() takes lat/lng, validates it (no infinite
values, lat within ±90, lng within ±180), converts to radians for the
math, and stores it.The localStorage part was new
territory for me. Never used it before. Basically the browser remembers
your location between sessions — so next time you open the app it loads
your saved coordinates automatically via loadObserver(). One line to
save, one line to load, JSON in between. Actually really simple once I
understood it.The observer marker gets placed on
the globe too — same system as the ISS marker but sits almost on the
surface (altFrac: 0.005).Input fields update to
show the saved coordinates. The location display shows hemisphere format
— 47.50° N, 19.04° E style — then “loading…” underneath while it
reverse geocodes the place name.Coordinates,
radians, localStorage, marker placement — a lot of small things that all
had to connect correctly. Felt good when it clicked.

Devlog #7 — Camera, live updates & the tick loopThis session was the one where it started actually feeling alive.Camera
controls first. Three modes — follow, rotate, free. “Follow” mode
smoothly pans the globe to the ISS position every 2.4 seconds with a
900ms animation. Feels really clean, like the camera is actually
tracking something. “Rotate” just spins the globe on its own. “Free” is
hands-off, user controls everything. Also wired up the day/night texture
toggle — one click switches between the blue marble and the night
lights texture.Found a bug: setStatus() is missing
a space — “led” + cls produces “ledlive” instead of “led live”. The LED
will never change color because the class name is wrong. One character
fix.Then the tick() function. This is the
heartbeat of the whole app. Runs on an interval, calls stateAt(now),
updates the marker position, updates all the telemetry readouts — lat,
lng, altitude, speed, orbital period, illumination. Everything live.

Devlog #6 — Markers, orbit track & resizeShort session today but got a few important things done.Set
the globe’s starting view — looking down at lat: 20, lng: 0 from
altitude 2.4. Basically a nice “overview of Earth” angle when the page
loads. Auto-rotate speed set to 0.45, slow and smooth. Small detail but
it makes the whole thing feel alive even before any data loads.Then
the markers. Two functions — makeIssEl() and makeObsEl() — each just
creates a div with the right CSS class and inner HTML. The ISS gets the
orange ring, the observer gets a “You” label. Simple.Found
two HTML typos in there while writing this. makeIssEl() has </div
missing the closing >. makeObsEl() is missing the opening < on the
dot div — ‘div class=“dot”>’ instead of ‘’.
Both will silently break the markers in the browser. Need to fix those.The
orbit track was interesting. It loops from -25 minutes to +70 minutes
around now, samples a position every 1.5 minutes, builds a path array.
So you see where the ISS came from and where it’s going. Past 25
minutes, future 70. Felt like a very “Python” approach — just loop,
collect, feed into the renderer.Also wired up
resize handling. Globe redraws to fill its container whenever the window
size changes. One listener, one function.

Devlog #5 — The JavaScript begins. It’s a lot.Okay. JavaScript. Here we go.Started
wiring up the actual logic today. First thing: fetching the TLE data —
basically the orbital parameters that tell satellite.js where the ISS
is. Hitting the wheretheiss.at
API, parsing the two lines, feeding them into
satellite.twoline2satrec(). If it fails, the LED goes red. If it works,
green. Simple.Then stateAt() — takes a date, runs
the SGP4 propagation, converts ECI coordinates to geodetic
(lat/lng/altitude). That’s the core of the whole tracker. One function,
does a lot.Also wrote sun position math from
scratch. Like actual astronomy math — Julian dates, ecliptic longitude,
Earth’s axial tilt. Did not expect to be doing orbital mechanics today.
The issSunlit() function checks if the ISS is in Earth’s shadow using a
dot product. Python brain kicked in here, vector math felt familiar at
least.Then the globe. globe.gl
is actually pretty nice to work with. Night texture, bump map,
atmosphere, star background. Hooked up the HTML markers for the ISS and
observer position.Found a few bugs while writing
this. Typo in a texture URL — hree-globe instead of three-globe, and
earh-blue-marble instead of earth-blue-marble. Also a missing closing
parenthesis somewhere in the globe chain that’s going to cause a syntax
error. Classic late night coding stuff.JavaScript
is definitely harder than HTML and CSS. But the Python background helps
more than I expected — the logic side of it feels familiar, just
different syntax.I changed my mind about the design and I changed to blue.

Devlog #4 — Location, passes, crew & wrapping up the HTMLFinished the HTML structure today. Three more sections in the sidebar.Observer
location first. Two inputs — lat/lon manually, or a “Use my location”
button that’ll hit the browser geolocation API. Placeholder values are
Budapest coordinates (47.4979, 19.0402) — yeah, I’m Hungarian, felt
right, but I live in Romania because of the Trianon.Then
the visible passes section. Right now just shows an empty state: “Set
an observer location to predict naked-eye visible passes.” There’s a
checkbox for showing all passes, not just visible ones. The actual pass
prediction math is going to be the hardest part I think. satellite.js
can do it but I haven’t figured out that part yet.Crew
section is there too. Pulls from Open Notify API — basically just a
list of who’s up there right now. Placeholder shows “Loading…” for
now.Also noticed a bug writing this: three of the
globe control buttons (Rotate, Orbit, Day) all have id=“c-follow”.
Duplicate IDs. JavaScript is going to have a bad time with that. Need to
fix before I wire anything up.Footer has the data sources listed — wheretheiss.at for live position, satellite.js for the SGP4 math, Open Notify for crew. Felt important to credit them properly.HTML’s basically done. Next session is the scary part — the JavaScript.Honestly,
as a beginner with HTML and CSS, I think I actually get it now. I’m not
just copy-pasting; I truly understand why things go where they do.
Grid, flexbox, CSS variables, pseudo-elements—these were concepts that
looked like alien syntax a week ago. AI helped a lot with that. It
didn’t do the work for me, but it explained what each part actually does
while we built it. I didn’t expect to learn this much so quickly, and I’m very happy for this.

Devlog #3 — Globe markers & the telemetry panelGot
the globe section wired up today. The ISS marker is a small orange ring
with a dot in the middle — like a crosshair. Took a while to get the
centering right with translate(-50%, -50%), kept jumping to weird
positions on the globe. CSS ::after pseudo-element for the inner dot.
Didn’t know that trick before, actually pretty clean.Also
built out the telemetry panel. Latitude, longitude, altitude, orbital
speed, orbital period, illumination — all sitting in those readout rows
from last session. Right now they just show - as placeholders. Next step
is hooking them up to live data so they actually update.One
thing I noticed: the status LED up in the header is set to warn
(orange) by default — because while the app is still loading TLE data,
it shouldn’t show green. Small UX detail but it matters. Green means
live, orange means loading, red means something broke.Also
added the observer marker for the user’s location on the globe.
Different color from the ISS marker — white tag instead of orange — so
it’s clear which is which at a glance.Starting to look like an actual mission control dashboard. Not bad for someone who barely knew what CSS grid was two weeks ago.

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