Aaaand here it is:
It also lets you *compare* two different versions to clearly see differences.
A background script runs every 2h to fetch new versions of the map. The page refreshes hourly.
Not only there is zero JS, but also no external includes/resources (all map SVGs are self-hosted). It loads instantaneously, the code (HTML+CSS) is ~40KiB gzipped (~350KiB unpacked).
It's fully self-contained, too. You can download the index.html and the SVG files and self-host it, or use it locally directly from your harddrive, no webserver needed.
Or just use the scripts.
Three things that are not amazing currently (yet?):
- to generate this I am abusing Bash like there's no tomorrow (there isn't).
- the interface is somewhat lacking on mobile (fixable with additional work)
- Safari remains a crap browser and there are bugs when viewed in it. 🤷♀️
One thing I want to implement:
- pan-and-zoom of the map (should be doable)
Two ideas suggested by @cguess already:
- slight pulsing of differences when in "compare" mode;
- when refreshing, show differences over last few h.
Oh, also, no CDNs involved. This is self-hosted on a dedicated server of mine.
It's all just static stuff, so the likelihood the sudden traffic spike brings down that server is, I'd say, miniscule.
What an idea, eh? A rich, graphics-heavy "web app", implemented fully in HTML+CSS, no external imports, no thousands of dependencies, no CDNs, and no tracking.
I know, crazy!
I should probably blog about "making of"? 🤔
@rysiek It's very cool and reading the source I just learned about CSS blending modes and how a map selection could work. I wish more tools like static site generators or ones generating reports from code worked in such a way. (Since zooming in makes the map smaller, I have to open the SVG in another browser tab to read its labels; it's the feature I miss in documents with embedded SVGs.)
@mtjm yeah, I could make built-in browser zooming work, but that's quite a bit more work. I'll see if I find the time.
I however will almost certainly implement zooming by clicking on portions of the map.
@rysiek Great work! I particularly valued the "ABOUT THIS PROJECT" link which made it clear where you were getting the data from etc.
@underlap thanks! I might have to organize the About pane a bit. If you have ideas/suggestions/questions which should be added/answered there, I'm all ears!
@rysiek The only tweak I would make to the About pane is to write v3.0 instead of v.3 for the licence version. Call me a pedant...
@underlap you are absolutely right! It did look weird to me but couldn't figure out why. So, thanks!
@underlap interesting. Comments come directly from version comments on Wikipedia. I don't see an "en dash" comment there. So not sure what happened.
@rysiek are these Wikipedia maps accurate? They tell a story but I don’t know how reliable they are.
The war in Ukraine is on-going, and thus subject to Fog of War: clear and factual information is difficult to come by, and situation changes rapidly. Additionally, drawing maps of control and military movements is notoriously difficult and prone to error. Finally, while Wikipedians do their best to present information unambiguously and have clear rules on when to add or modify it, this is a complicated, emotionally loaded subject.
This Mastodon instance is for people interested in technology. Discussions aren't limited to technology, because tech folks shouldn't be limited to technology either!