Artists of Tomorrow

Ship #1

@anishbatra2010 on Artists of Tomorrow · about 2 months ago

Here is the complete text you can copy and paste into the modal text box:

***

I did a security audit and code hardening pass on the **Artists of Tomorrow** website, while successfully troubleshooting and repairing my editor's broken **Hackatime** integration.

### What did you make?
* **Code Hardening:** Created a custom `sanitizeURL` utility across all dynamic gallery scripts (`latin-america-school.js`, `asia-competition-gallery.js`, and `latin-america-competition.js`) to block malicious `javascript:` and `data:` link payloads and prevent Cross-Site Scripting (XSS).
* **Link Security:** Added `rel="noopener noreferrer"` attributes to external anchor tags in `leaders-of-tomorrow.html` to prevent tab-nabbing attacks.
* **Hackatime Fix:** Resolved a persistent "Initialized" tracking freeze by correcting the API key format for the Hackatime backend, disabling problematic VS Code AI tracking syncs (`sync_ai_disabled = true`) causing SQLite crashes, and force-flushing queued offline coding time to the server.

### What was challenging?
Diagnosing why the WakaTime CLI was freezing. It turned out to be a double issue: the Hack Club Hackatime server didn't accept the standard `waka_` API key prefix, and my editor was throwing SQLite database errors trying to sync AI metadata, which locked up the sync loop entirely.

### What are you proud of?
Hardening the codebase against XSS without breaking any of the existing DOM structure or vanilla JS gallery animations, and successfully syncing all of my logged offline hours back to the Hack Club dashboard.

### What should people know so they can test your project?
The site runs entirely as a static vanilla HTML/CSS/JS site. You can test it locally by running:
`python3 -m http.server 8080`
And going to `http://localhost:8080`. All the security sanitation works under the hood when loading school artwork metadata and external links!

2 devlogs
1h

Try project → See source code →

Open comments for this post

@anishbatra2010 on Artists of Tomorrow · about 2 months ago

53m 55s logged

Performed a security audit and hardened the codebase against XSS and tab-nabbing vulnerabilities. I wrote a custom sanitizeURL wrapper for the existing escapeHTML utility across the gallery JavaScript files to strictly block malicious javascript: and data: protocols. I also patched an external target=”_blank” link in the Leaders of Tomorrow page to include rel=“noopener noreferrer”, and cleaned up outdated form-handling references in our AGENTS.md documentation.

Open comments for this post

@anishbatra2010 on Artists of Tomorrow · about 2 months ago

25m 10s logged

Artists of Tomorrow - Project Showcase
Here is a summary of the major features and technical upgrades completed on the Artists of Tomorrow website, along with screenshots showing the changes in action.

Key Achievements

Site-wide Asia & India Regional Refactoring
The Goal: Cleanly transition the website structure from a single-country profile (India) to a continent/country format (Asia/India) to match the Latin America profile format.
What changed:
Renamed all regional files dynamically via Git: nathupur-india.html → nathupur-asia.html, india-competition-gallery.html → asia-competition-gallery.html, and their respective JS support files.
Restructured the Asia Partner School profile to match the Latin America format: removed the localized winner gallery and replaced it with a dynamic 37-item Student Artwork Submission carousel.
Updated navigation menus, footers, headers, metadata, Leaflet map pins, and data attributes across all 13 HTML pages.
Asia Partner School Profile
Review
Asia Partner School Profile
Dual-Currency Prize Money Display
The Goal: Present prize structures clearly for both regional cohorts (INR ₹ for India, USD $ for Latin America) without cluttering the UI.
What changed:
Redesigned the prize cards on the Home and Competition pages to support side-by-side dual currencies:
1st Place: ₹3,000 / $50
2nd Place: ₹2,000 / $30
3rd Place: ₹1,000 / $15
Implemented a flexible layout system (.prize-amounts CSS class) using flexbox, ensuring a clean horizontal display on desktop and responsive vertical stacking on mobile.
Dual Currency Prize Cards
Review
Dual Currency Prize Cards
Cloudflare Pages CDN & Dynamic Image Pathing
The Goal: Render over 2,000+ student submission images without overloading Git or pushing massive file structures to GitHub.
What changed:
Deployed the entire project (including the git-ignored images/latin-america folder) to Cloudflare Pages using Wrangler CLI.
Integrated a dynamic resolution path utility in the codebase: when window.AOT_CDN_BASE_URL is set to https://aot-images.pages.dev/, the site dynamically redirects all requests for git-ignored Latin American images to load instantly from the Cloudflare Pages CDN.
Added a development fallback to local paths, enabling fully offline local development.
Interactive Directory Search & Dynamic Division Listing
The Goal: Ensure that searches in the school directories behave predictably and layout correctly, and hide empty content boxes.
What changed:
Fixed a bug where filtered/hidden school card wrappers were still showing as blank space by adding CSS rules (.school-directory-card[hidden] { display: none !important; }).
Optimized the school profile lists so they dynamically format active age ranges (e.g. showing Ages 8-11, 12-15 and automatically hiding any age division with 0 submissions).
School Directory Search
Review
School Directory Search
Year Rollover
Rolled over the campaign, art prompt headers, and copyright documentation from 2025 to 2026 site-wide.