I just reached a small but important milestone where I successfully implemented a thing I theorized might work, and it works.

Even more excited. Damn I wan this published so bad.

Follow

Aaaand here it is:
projects.rys.io/ukrainvasion/

Changes in the 's map of invasion in often are very small and difficult to notice. So I made an interface where you can cycle through them easily.

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.

Also, it uses zero . None. Not a single line. It's all HTML and CSS.

And yeah, next time anyone tells you JavaScript is "necessary" for "modern rich web apps", just send them a link to this project.

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 Great work! A pan-and-zoom would indeed be a very nice addition.

@rysiek amazing work, congrats. And yes, you should definitely blog about it!

@rysiek @cguess

Safari is a list course for the moment at least.

@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!

Fixed. :blobcatfingerguns:

@rysiek Er where did "Comment:

"En dash"" just come from?

@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.

@mitch I talk about this in the About pane:
projects.rys.io/ukrainvasion/#

"""
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.
"""

@rysiek How long have you been working on this? This is very impressive!

Sign in to participate in the conversation
Mastodon for Tech Folks

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!