h4l / headgear Goto Github PK

Headgear tries and fails to render a regular avatar with the NFT Card image variant in the following situation:

• Select an NFT avatar in the Avatar builder
• Open Headgear and view the NFT Card image
• Select a non-NFT avatar in the Avatar Builder
• Re-open Headgear
• Headgear tries to show the non-NFT avatar as an NFT Card, which fails (albeit nicely with an error message in the main view)

There are some GitHub Actions for publishing (uploading) browser extensions, e.g: https://github.com/marketplace/actions/browser-platform-publisher

Now that releasing versions for Chrome & Firefox is pretty well-understood and routine, it'd be nice to automate the manual work. It'd also provide better software supply chain security, as I wouldn't need to download the artefacts from the GitHub releases just to re-upload them.

The main Avatar data response now has a backgroundInventoryItem field which appears to contain the NFT ID of the Avatar's background (#27). If so, we should be able to use this instead of the hackish base64-decoding we currently rely on to find an Avatar's background.

The viewBox values are incorrect, I calculated the height value as the bottom y coord instead of height, so it's incorrect when the top is offset to remove whitespace above the Avatar. The whitespace at the bottom should have been the same as on the left/right of the circle.

We could also add padding on the left/right to account for accessories near the borders.

Currently we just render the NFT Card backgrounds as-is, using the alpha channel in the PNG. This results in aliasing on the corners at higher res, as the background images are fairly low res. By slightly enlarging the background and using an rounded SVG rect to clip the image, we can get nice sharp edges. Here's an example of that technique (done manually):

If a user starts opted-in, then they can toggle off and on successfully. But if a user opts out, closes Headgear and then later opts in, we don't actually opt them back in, so PostHog doesn't send events. This is because when initialising, we create a PostHog instance, but don't actually opt in when creating it, so PostHog's persisted opt out state remains.

When initialising analytics, we need to check posthog.has_opted_out_capturing(), comparing to our own persisted opt in/out flag and opt in if required.

Firefox itself is fine with "109" but not AMO. 😒

Currently it takes a couple of seconds to refresh the Avatar data from Reddit's API after a user changes their Avatar. We cache the data and only refresh when the Avatar is changed. The cache makes it not too bad in general, but the first-load-after-save delay is a bit annoying.

I think it'd be worth seeing if we can reduce the wait. Most of the delay is just making the API call, as it's a massive ~1.1MB JSON doc. If we can notice that a save has occurred, we could initiate the call in the background, so that the data is ready at the point that the user opens Headgear.

Perhaps we can even avoid the call entirely if we could intercept & view the API call that's made to update the Avatar.

This one:

I think it'd be nice to have a PFP (profile picture) type square image style, something like this:

Headgear needs to rely on non-public Reddit APIs/implementation details that could change at any time. To detect such changes early, we could set up integration tests using an actual (headless) browser to verify that Headgear's functionality is still working. And run those tests on a regular schedule via Actions CI.

Need to increase the size of the SVG filter — the shadows are getting clipped before they fade to 0% opacity.
Also the general text styles could be polished a bit, I'm not 100% happy with the dark text stroke.

A user reports:

I've noticed an issue trying to export Persephone, the hair is the wrong colour and scale, see attached:

Should look like this:

A user reports that they use new.reddit.com rather than www.reddit.com to browse reddit (as it gives them a different UI, and www.reddit.com is not old.reddit.com for them). Headgear doesn't currently allow itself to run on anything other than www.reddit.com.

We should be able to run Headgear on new.reddit.com. Maybe we can allow other subdomains too, depending on how reddit allows cross-subdomain requests.

The NFT Card SVG image includes the name & serial number of the NFT as text. The text uses the Reddit Sans font, via a web font hosted by Reddit. Currently we reference the font via https in the SVG file. This has some trade-offs:

• Pro: smaller SVG file size
• Con: SVG file will break in the future if Reddit changes their font's URL
• Con: Some tools can't/won't load web fonts (looking at you, Inkscape)
• Pro: text is actually in the file, can be selected, copied etc
  • (Although this could be retained when using paths, using 0% opacity text)

An intermediate step could be to embed the fonts as data URIs (like we do for background images).
Also, the fonts could be re-hosted on IPFS and referenced there, to remove the dependency on Reddit hosting them.

This one:

SVG is great for the web (as an implementation tool at least), but it's not well-supported by image tools (desktop or mobile) that most people use day-to-day. e.g. most websites that accept user-provided images don't support SVG. Also, open-source programs that do accept SVG tend to not have the same level of support as browsers.

So allowing images to be exported in raster format—like PNG—would likely make life easier for a typical user who just wants to use an image in another context.

As well as downloading, copying an image to the clipboard would make it even easier to grab an image and use it somewhere.

Firefox will have Manifest V3 support from 17th Jan in its 109 release: https://blog.mozilla.org/addons/2022/11/17/manifest-v3-signing-available-november-21-on-firefox-nightly/
Manifest V3 extensions can now be uploaded to their extensions site in preparation for this.

It'd be nice to have support for it ready for then.

v0.4.0 is built, but not yet pushed to the Chrome Web Store & addons.mozilla.org.

Also need to tidy up the CHANGELOG a bit for consistency, and populate the 0.4.0 github release page with it.

• Update CHANGELOG
• AMO — Firefox
  • Submit to AMO
  • Await approval
• Chrome Web Store — Chrome & friends
  • Submit to Chrome Web Store
  • Await approval

A user suggested being able to toggle on/off elements of the NFT Card image style, e.g. turn off the NFT icon or text.

Related to this is that we also have a variant of the NFT Card used in the profile page (with larger text — designed to be displayed at a smaller scale). We currently don't provide a way to access it, but we could if we had a UI for changing settings of an image style.

There are other things like this we could support, like choosing different backgrounds other than transparent (Reddit displays transparency in images as grey, which often doesn't look great.)