h4l / headgear Goto Github PK
View Code? Open in Web Editor NEWUnleash your Reddit Avatar.
License: Other
Unleash your Reddit Avatar.
License: Other
Headgear tries and fails to render a regular avatar with the NFT Card image variant in the following situation:
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.
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.
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:
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:
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.
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.
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.)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.