new-tab-firefox

What did you make?
A single-page app called Astronomy that pulls NASA’s Picture of the Day and shows the title, image/video, and explanation against a space-theme layout with zigzag clip-path side strips. It handles all three media types APOD returns (image, direct video, YouTube embed), shows a shimmering square placeholder until the image loads (then the box snaps to the image’s real aspect ratio), scales with vh/vw so it fits any screen, and includes a date picker to browse any day back to 1995. It auto-deploys to GitHub Pages on every push via GitHub Actions, with the API key injected as a secret so it never appears in public code.
What was challenging?

• The Vite demo assets weren’t at the paths the tutorial listed, so I had to find the real locations before anything else.
• Layout jumps: the first render dumped a full-size image; a forced 4:3 aspect-ratio cropped images and letterboxed videos. The fix (placeholder swap on onload, natural ratios with vh/vw caps) took the most iteration.
• YouTube links silently break a tag — caught that and switched to iframes with a watch?v= → embed/ conversion.
• Blank deployed page: forgetting base: ‘/nasa-apod/’ and setting Pages to the wrong source produced 404s that took a full deploy cycle each to diagnose.
  What are you proud of?
  The placeholder → aspect-ratio snap: it’s the clean part where the CSS state and JS loading timing combine so the page never jumps or shows a broken frame. Also the error path — response.ok checks surface NASA’s real messages instead of failing silently — and that the whole thing (build, tests via curl, deploy) is verifiable end-to-end.
  How to test it:
• Live site: https://himanshu-2010.github.io/nasa-apod/ — no setup needed; it loads today’s image on open.
• Use the date picker at the top: try 1995-06-16 (the first APOD ever) to confirm past dates, or a known YouTube day like 2019-07-04 to see the iframe branch.
• Resize/responsive: shrink the window — the strips disappear under 600px and the media box tracks the viewport.
• Error path: pick a date before 1995-06-16 (the picker’s min blocks it, but hitting the API out of range proves the .catch shows NASA’s message).
• Local dev: npm install, set VITE_NASA_API_KEY, then npm run dev.