my-vote-matters
To run:
cd my-vote-matters
python -m SimpleHTTPServer 8080
License: GNU Affero General Public License v3.0
To run:
cd my-vote-matters
python -m SimpleHTTPServer 8080
Safari does not support navigator.getMedia
, but perhaps there is an alternative?
Show a tweet preview (mocked) with the image, hashtag, and some text for the user to edit before posting. Currently, tweets are posted directly from the captured image view.
Also add option to cancel (do not post).
Currently, they are regenerated on every load. Seems more efficient to just save them as pngs and serve those instead.
So that it appears above the link instead of beside it. Ref: https://www.h3xed.com/web-and-internet/how-to-use-og-image-meta-tag-facebook-reddit
On one user's screen, they were not sure how to take a picture, because the button was below the fold.
Tentative plan: Github Pages with CloudFlare for SSL. Need to find & register a domain name.
Right now the user gets a message saying "Something went wrong" but the detailed error from Twitter/FB is discarded. Maybe there's some web service we can set up to collect error messages?
Currently, it just shows no picture frame and the "take photo" button does nothing.
#18 made the canvas auto-scale to the screen size, which is the same as the size of the final shared image. If we care about this, it could be fixed by redrawing to an invisible fixed-size canvas. However, different cameras still have different aspect ratios, so we'd have to pick either the height or width to hold constant.
It's not readable on top of the background images.
Sometimes it's sideways.
Add an option to download as an image instead of sharing to social media.
There should be a button instead that allows the user to turn on the camera. Otherwise, many people might refuse permission at first, before they know what the site does.
Also offer to share image via Facebook.
We're beyond registration time.
The user reports seeing "Sorry, something went wrong." consistently. However, other users seem to be having no issues.
My mother reports that on her iPhone 6, the option to launch the camera results in something that looks like the camera, but the image is blank. Uploading an image from the camera roll does work.
Right now sharing only works for app admins because the app has not been approved (and can't be as it violates Platform Policy 2.3 by adding content to the user message field that the user did not type). Instead, we should upload the image to Imgur and launch the Feed Dialog, which is not subject to that policy (?), with the resulting URL.
The "What's at stake" box overlaps the header on small screens.
Currently requires page reload to be able to take another picture.
See Slack for pinned posts showing the design mockups.
We could collect them live from Twitter/FB but it's probably better to just curate a few and serve them statically.
Since we're doing a simple scaling of an image, the output could end up looking pixelated. We should consider using a more sophisticated scaling algorithm.
Beyond the Polaroid.
After #6 is merged we can implement these as simple JS functions that draw on the canvas.
The polaroid frame is a fixed image, but different cameras have different sizes (esp. phone cameras, which change size when you rotate the phone). Use a canvas to get rid of the fixed image and adapt to whatever the camera size happens to be.
That gets Twitter users another 37 characters for captioning. We can replace it with a watermark somewhere in the frame.
Hi, if I disallow the browser access to my camera, the 'take picture' button never goes away nor does the 'enter text dialog' pop up.
however if i click on the photo but not the button BEFORE clicking the camera, I am able to enter a captin but still can't upload a file.
I am running chromium on macOSX macbook air 2011
i can click it repeatedly
If i dont click the button, i can enter text by clicking on the main photo, however I still cant upload a file. I can even share to twitter
The easiest fix I can think of would be to always have the text input button and the file upload button available and just use the SAVE as the interim between uploading , capturing and entering text. and then maybe have a check there is a file ? or maybe sharing black files isnt too bad cos the message will still be there, but yeah, as of right now the site is unusable for me.
myvotematters.today
probably needs to be added to the domain whitelist for both the Twitter and FB integrations.
Samuel Cole reported on Slack that Safari was reloading the popup in a background tab but keeping it in the background, making it seem like nothing was happening. The popup should close as soon as it finishes redirecting, AFAIK. But maybe there's a way to give it a unique name or something, just in case, so it doesn't go back to a previous tab.
As currently mobile (and desktop) Safari do not support getUserMedia, users on iOS devices are presented with the standard "Oops, your camera won't work here" UI. However, once the user click's on "Upload picture", iOS offers an option to take one, so the user is getting mixed messages and thus very confused.
Instead, we could change the text to direct the user to upload OR take a picture on an iOS device. This would minimize the user's irritation.
The button click handler uploads to Imgur asynchronously, and when that finishes launches the FB share popup. Unfortunately I believe this is indirect enough that the browser "forgets" the popup came from a click event, and blocks it. I guess we should have it wait synchronously for the Imgur request to finish and then launch the popup from the click handler function itself.
Simple analytics for how many visits we get and how many people share images. Google Analytics should be easy to add.
We need a privacy policy to be a well behaved FB app. We do not collect or store any information, let alone user information, so it should not be hard to write.
test
Google Analytics suggests the following speed improvements:
<script>
tags async
(or copy/paste them into the HTML) so the page can be rendered before the script downloadsimg/logo.png
so it downloads fasterThe tweet/post should end with "... share why YOUR vote matters at https://myvotematters.today" or something like that.
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.