> I make sure that as much state as possible is saved in a URL

Do you have advice on how to achieve this (for purely client-side stuff)?

- How do you represent the state? (a list of key=value pair after the hash?)

- How do you make sure it stays in sync?

-- do you parse the hash part in JS to restore some stuff on page load and when the URL changes?

- How do you manage previous / next?

- How do you manage server-side stuff that can be updated client side? (a checkbox that's by default checked and you uncheck it, for instance)

▲

MPSimmons 4 days ago | parent | next [-]

One example I think is super interesting is the NWS Radar site, https://radar.weather.gov/

If you go there, that's the URL you get. However, if you do anything with the map, your URL changes to something like

https://radar.weather.gov/?settings=v1_eyJhZ2VuZGEiOnsiaWQiO...

Which, if you take the base64 encoded string, strip off the control characters, pad it out to a valid base64 string, you get

"eyJhZ2VuZGEiOnsiaWQiOm51bGwsImNlbnRlciI6Wy0xMTUuOTI1LDM2LjAwNl0sImxvY2F0aW9uIjpudWxsLCJ6b29tIjo2LjM1MzMzMzMzMzMzMzMzMzV9LCJhbmltYXRpbmciOmZhbHNlLCJiYXNlIjoic3RhbmRhcmQiLCJhcnRjYyI6ZmFsc2UsImNvdW50eSI6ZmFsc2UsImN3YSI6ZmFsc2UsInJmYyI6ZmFsc2UsInN0YXRlIjpmYWxzZSwibWVudSI6dHJ1ZSwic2hvcnRGdXNlZE9ubHkiOmZhbHNlLCJvcGFjaXR5Ijp7ImFsZXJ0cyI6MC44LCJsb2NhbCI6MC42LCJsb2NhbFN0YXRpb25zIjowLjgsIm5hdGlvbmFsIjowLjZ9fQ==", which decodes into:

{"agenda":{"id":null,"center":[-115.925,36.006],"location":null,"zoom":6.3533333333333335},"animating":false,"base":"standard","artcc":false,"county":false,"cwa":false,"rfc":false,"state":false,"menu":true,"shortFusedOnly":false,"opacity":{"alerts":0.8,"local":0.6,"localStations":0.8,"national":0.6}}

I only know this because I've spent a ton of time working with the NWS data - I'm founding a company that's working on bringing live local weather news to every community that needs it - https://www.lwnn.news/

▲

asielen 4 days ago | parent | next [-]

In this case, why encode the string instead of just having the options as plain text parameters?

	▲	qdotme 4 days ago \| parent [-]
		Nesting, mostly (having used that trick a lot, though I usually sign that record if originating from server). I've almost entirely moved to Rust/WASM for browser logic, and I just use serde crate to produce compact representation of the record, but I've seen protobufs used as well. Otherwise you end up with parsing monsters like ?actions[3].replay__timestamp[0]=0.444 vs {"actions": [,,,{"replay":{"timestamp":[0.444, 0.888]}]}

▲

toxik 4 days ago | parent | prev [-]

Sorry but this is legitimately a terrible way to encode this data. The number 0.8 is encoded as base64 encoded ascii decimals. The bits 1 and 0 similarly. URLs should not be long for many reasons, like sharing and preventing them from being cut off.

▲

capecodes 4 days ago | parent [-]

The “cut off” thing is generally legacy thinking, the web has moved on and you can reliably put a lot of data in the URI… https://stackoverflow.com/questions/417142/what-is-the-maxim...

▲

domga 4 days ago | parent [-]

Links with lots of data in them are really annoying to share. I see the value in storing some state there, but I don’t think there is room for much of it.

▲

nozzlegear 4 days ago | parent [-]

What makes them annoying to share? I bet it's more an issue with the UX of whatever app or website you're sharing the link in. Take that stackoverflow link in the comment you're replying to, for example: you can see the domain and most of the path, but HN elides link text after a certain length because it's superfluous.

▲

esafak 3 days ago | parent [-]

SO links require just the question ID; short enough to memorize.

	▲	nozzlegear 3 days ago \| parent [-]
		Sure, but the SO link was just an example. HN does it with any link, like this one which is 1000 characters long: https://example.com/some/path?foo=bar&baz=bat&foo=bar&baz=ba... If the website or app has a good UX for displaying/sharing URLs, the length doesn't really matter.

▲

linked_list 4 days ago | parent | prev | next [-]

The URL spec already takes care of a lot of this, for example /shopping/shirts?color=blue&size=M&page=3 or /articles/my-article-title#preface

▲

yawaramin 4 days ago | parent | prev [-]

The OP gives great guidance on these questions.