[HN Gopher] I Added SVG Maps to My Travel Posts
___________________________________________________________________
I Added SVG Maps to My Travel Posts
Author : todsacerdoti
Score : 48 points
Date : 2024-09-13 16:51 UTC (6 hours ago)
(HTM) web link (cyberb.space)
(TXT) w3m dump (cyberb.space)
| bebna wrote:
| I like it, thanks.
| lelandfe wrote:
| Super neat, the end result looks great and adds a lot to the
| posts. On the downside, inlining the map causes the HTML to
| balloon up to ~500kB/~180kB gzipped, compared to 30kB/10kB on
| this post (which lacks a map). The site is already insanely fast,
| but you could pull the map SVG into an actual file, so it's
| cached between pages, and becomes a lower-priority resource
| (which will ~halve First Contentful Paint). Then you'd just
| position the circle on top of that generic map file!
| gampleman wrote:
| You could then also run it through SVGO to compress it further.
| lelandfe wrote:
| Indeed - looks like SVGO can crush that map from 500kB down
| to like 80kB! Users on constrained data plans will love that.
| Of course, the author notes they want _higher_ fidelity at
| some point. They could consider breaking the SVG into
| quadrants, perhaps? Or something more clever :)
| ipsento606 wrote:
| the author is also using many large, multi-megabyte photos in
| their travel posts, so I'm not sure how significant the size of
| the SVG content is, in comparison
| lelandfe wrote:
| Big inlined resources impact paint time - a lot! You'll see
| this by running Lighthouse/PageSpeed Insights on the posts.
| E.g. no map: https://imgur.com/a/5CJjEUq vs map:
| https://imgur.com/a/mX1ZDz7
|
| That means users are staring at blank for longer. That can
| really stink on a poor connection.
|
| Images are requested at a lower priority and so don't cause
| the same problems for rendering. But it's a great idea to
| compress them, too, and use something like `srcset` to send
| an appropriately sized version!
| apsurd wrote:
| what a great looking website.
|
| love the craft. now I need to set aside some time to read the
| post... !
| loremm wrote:
| same here, looks really nice. Some websites are cool, if
| slightly gratuitous in how they try to look fancy. This looks
| elegant and cohesive
| loremm wrote:
| Also if the author views this, would love an rss feed. Can use
| the github pretty easily but maybe commits have updates, not new
| blog posts
| mbforbes wrote:
| Really impressive! I've implemented a few kinds of maps on my
| blog, and I fail all of their requirements:
|
| - I use a 3rd party platform
|
| - My maps are generated at runtime
|
| - They looks... let's say vaguely consistent on mobile & desktop
|
| Maps were the most painful and time-consuming part of building a
| travel blog, but also perhaps the most satisfying.
| kylehotchkiss wrote:
| I love this Josh! I recently discovered Protomaps
| (https://protomaps.com) and have been having a lot of fun doing
| mapping without paying Google or Mapbox a small fortune for the
| privilege. I found the the basemaps look much better than the
| protomaps site makes them appear (they're super zoomed out in the
| samples where the styles don't come together as well as they do
| when zoomed in)
___________________________________________________________________
(page generated 2024-09-13 23:00 UTC)