Live data from Hacker News

How to store your app's entire state in the url

scottantipa.com

261–270 of 416 posts

Re: How to store your app's entire state in the url

#261
I did something similar, but compressed with pako to make the URL as short as possible: https://www.pokerregion.com/?r=Y2RwYBBgYGFkcGAQYGBhZHBgEGBgY...

Here is the compression code: https://gist.github.com/kissgyorgy/39623a7d0ba2f6faafb464b72...

I used the properties of my data structure (multiple cards represented in a byte as bits) to represent the same data on less bytes (to avoid compressing JSON with unnecessary characters)

Re: How to store your app's entire state in the url

#262

App state in URL can be a good idea, but if possible I prefer readable path/query parameters instead of unreadable base64 encoding. As one comparison, this is Google Finance encoding stock chart parameters: https://www.google.com/finance/quote/F:NYSE?window=5Y Versus Yahoo! Finance doing the same: https://finance.yahoo.com/quote/F/chart?p=F#eyJpbnRlcnZhbCI6IndlZWsiLCJwZXJpb2RpY2l0eSI6MSwidGltZVVuaXQiOm51bGwsImNhbmRsZ…

In your example, absolutely the first URL is better. But if as in the case of the OP, you're trying to encode an entire flowchart, I would argue it's a bit of a pointless exercise. Maybe you could come up with something reasonably readable, but I don't think anyone would care. It really depends on what kind of state you need to store.

Whoever needs to copy that long intestine of a url definitely cares.

Re: How to store your app's entire state in the url

#263
post #234
post #134

Earlier quoted context omitted.

OT, we used to joke about LISP source code contains mostly brackets. Nowadays we literally store, transform and pass around willy nillily

Speaking about LISP and state in the URL, this is how OVH stores the state when you buy a domain from them: https://www.ovh.com/fr/order/webcloud/?#/webCloud/domain/options?selection=~(domains~(list~(~(name~'somethinghn.com))~options~(~'dnssec)))

That's Clojure's EDN encoded for ClojureScript isn't it? I recognize this syntax from briefly working on a CLJ/CLJS app.

Re: How to store your app's entire state in the url

#264
post #28

Earlier quoted context omitted.

I wrote a library based on that very idea. It supports fragment query, just like normal queries. https://github.com/Cyphrme/URLFormJS I use it in a lot of places, like: https://convert.zamicol.com/#?inAlph=Text&in=Hello%20world!&... https://cyphr.me/ed25519_applet/ed.html#?msg=Hello%20World!&... https://cyphr.me/coze#?verify&input={%22pay%22:{%22root%22:%...

How to use this in React?

I don't think React has anything to do with it. Its just structuring URLs in the browser an appropriate way.

You'd need to read state off the url fragment (location.hash). You can feed that into your appropriate state management system, I suppose. Some (like react router) I think support hash routing, but I don't know that they support both has routing and history routing at the same time, so that may not be quite up to task if thats the case.

Re: How to store your app's entire state in the url

#265
post #161

I imagine I'm not the first one to think of this, but a little while back I wrote a toy pastebin-like webpage that stored the code being rendered directly in the URL (with base64 and gzip compression to make it a bit smaller, although it still was quite large by usual standards). My thinking was that rather than having a centralized app for this publicly available, making a small page that could be statically hosted…

Great minds think alike? I just posted about my URL-using pastebin: https://news.ycombinator.com/item?id=34315577

Oh wow! If you mean November 2022, pretty close to when I was doing mine! If you mean 2021, you definitely had the idea way before me

Re: How to store your app's entire state in the url

#266
post #134

Earlier quoted context omitted.

Here is it decoded: {"interval":"week","periodicity":1,"timeUnit":null,"candleWidth":4.3486590038314175,"flipped":false,"volumeUnderlay":true,"adj":true,"crosshair":true,"chartType":"line","extended":false,"marketSessions":{},"aggregationType":"ohlc","chartScale":"linear","studies":{" vol undr ":{"type":"vol undr","inputs":{"id":" vol undr ","display":" vol undr "},"outputs":{"Up Volume":"#00b061","Down Volume":"#ff3…

OT, we used to joke about LISP source code contains mostly brackets. Nowadays we literally store, transform and pass around willy nillily

I found that joke funny until I realized that, if you sum the count of round, square, angle and curly braces together, your typical piece of C++ or Java code has more brackets than equivalent piece of Lisp code...

Re: How to store your app's entire state in the url

#267
post #177

Earlier quoted context omitted.

This loses all the benefits of storing all state in the url, which is that it's inspectable by the client. Using a URL shortener still makes all the data stored somewhere in the server

Okay that's not exactly what I had in mind. My suggestion was to implement the same hash both server and client side so that the query string is small and manageable. Don't worry about the state not being fully legible because you will implement the hash decode on the client too. The code will be there for you to peruse.

How would you decode the hash? Amy of infinite states could map to the hash

Re: How to store your app's entire state in the url

#268
post #260

Earlier quoted context omitted.

* I should be able to guess if you're sending me a link about composting or a Rick Astley video Opaque slugs are problematic in a low-trust world. Phishing attempts are easier when the parameters are indecipherable. I'm not clicking on that shit in a text message or an email. I've seen what happens to people when they do.

Eh, I mean URL shorteners are a thing and all kind of things redirect on the web. The length of the URL doesn't really tell you much.

URL shorteners are a menace. I'm not clicking on the link if you send me a shortened one, especially not when on mobile. These days, shortened links have two primary applications: forcing you to go through a tracking/analytics gate, and serving single-click exploits. Neither of those is serving the user (unless you read it in "To Serve Man" sense).

Re: How to store your app's entire state in the url

#269
post #114

Earlier quoted context omitted.

[flagged]

A horse walks into a bar. Several of the patrons quickly get up and leave, realizing the potential danger in the situation.

Since I wasn't sure whether it's meant literally or if I'm missing some context, I decided to do a web search with this joke as a query, and was rewarded with a recording of it (apparently) playing out in real life:

https://old.reddit.com/r/gamegrumps/comments/9kgeqg/a_horse_...

Post reply on HN