Sending trip places as a stamp sheet, with the whole story in the URL fragment

When you return from a trip and want to share your memories with friends, sending a simple list isn't enough, as they may miss the intended order. To solve this, I created a unique tool that transforms up to six destinations and a short note into a compact, visually appealing stamp sheet. The tool relies on a single URL fragment, containing a JSON array of encoded stories, which avoids sending any data to a server. This means the link can be easily shared and edited.

The interesting part of this tool is the decoding process. After a user receives the link, they can open it directly in their browser without hitting a server. The decoder checks every field to ensure it matches the original encoding, including version number, padding, and symbols. If any discrepancy is found, the page will display a clear error message, preventing any confusion or accidental mix-ups.

To make the experience even smoother, the tool supports three different rendering modes: preview in the editor, the actual reveal, and the saved PNG. All three utilize the same function on a 1080 by 1350 canvas, ensuring consistent visuals and functionality across the different outputs. The reveal effect further impresses users by dynamically scaling and fading in the newest stamp.

The creation of this tool involved drawing each stamp from its place name. A unique hash derived from the name ensures that the same location always produces the same stamp, eliminating any guesswork or clip art. By carefully arranging the text on each stamp, the tool balances the lines and adapts to various text lengths, ultimately optimizing the appearance of the stamps.

Testing this tool is crucial to maintaining quality and reliability. There are 47 unit tests and 32 browser tests that cover a wide range of scenarios, including typing, reordering, reveal order, damaged links, markup-like text, and even the saved PNG. While thorough, the testing does not extend to Safari, in-app browsers, or real mobile devices, highlighting the importance of continuous improvement and adaptation to different platforms.

You can explore and try out this innovative tool at https://arthur031221.github.io/WishYouWereHere/, providing an efficient and visually appealing way to share your travel experiences with friends.