350org / strikes-poster-generator

A mini web app that lets anyone create a printable poster or flyer with their own custom text.
BSD 3-Clause "New" or "Revised" License
7 stars 5 forks source link

Fix border loading issues #11

Closed EvanHahn closed 5 years ago

EvanHahn commented 5 years ago

tl;dr: before this change, the poster borders would sometimes disappear and reappear randomly—no longer! See #3 for more.

Three things I learned while working on this change that are relevant here:

  1. The paper size (like US Letter, or A4) is called aspectRatio internally.

  2. The poster borders are implemented as background images, one per aspect ratio.

  3. There are several "dormant" features, such as the ability to add a watermark to the result. They are dormant because their code paths are in the source code but unused.

Borders would sometimes fail to show up, which was because the background image sometimes failed to load properly. This change:

  1. Loads all 4 border images upfront. The border can still be missing while these images load (probably most noticeable on page load or on a slow connection), but the canvas will re-render as soon as any image loads.

  2. Removes the unused image upload and watermark features. I was changing a few things about how images worked and didn't want to do it twice. Doing this let me remove a bunch of things that were only used by these code paths.

  3. Each aspect ratio has a different border image; this change makes that relationship more explicit. (In the code, that means I moved the border image URL into aspectRatioOpts.) That also meant that the border image URL is computed from the aspect ratio instead of being a separate stored property that needs to be kept in sync.

Closes #3.