devprogress / my-vote-matters

my-vote-matters

To run:

cd my-vote-matters
python -m SimpleHTTPServer 8080

my-vote-matters's Issues

Small graphical cleanups

• Share buttons have rounded corners but are not transparent
• No background at all behind share result
• Too many sample image tiles are added (the screen size calculation is probably wrong)
• Restore footer linking to DevProgress

Provide graceful fallback for iOS users

Safari does not support navigator.getMedia, but perhaps there is an alternative?

Prompt before posting

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).

Turn samples into simple images

Currently, they are regenerated on every load. Seems more efficient to just save them as pngs and serve those instead.

Increase page load speed

• Remove jQuery
• Vendor scripts and stylesheets

Enlarge Facebook og:image

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 a shorter screen, the "Take photo" button is below the fold

On one user's screen, they were not sure how to take a picture, because the button was below the fold.

Deployment

Tentative plan: Github Pages with CloudFlare for SSL. Need to find & register a domain name.

Update URL in Twitter auth request

Currently it's myvotematters.com. Should be myvotematters.today.

Tweet Improvements

Include #MyVoteMatters in tweet body.

Currently the text of the tweet is only what the user wrote, so there's no context and the hashtag never actually shows up in the tweet except in the image.

Also, the "message" is repeated twice. Once in the tweet text and once in the image.

Report error message to devs somehow

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?

Add graceful handling for a camera-less computers

Currently, it just shows no picture frame and the "take photo" button does nothing.

Download button doesn't work on iOS Chrome

It seems to just load the data URI into the address bar.

This SO question might be relevant.

Photos posted from different devices will be different sizes

#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.

add opaque background for share result

It's not readable on top of the background images.

Fix iPhone issues

• The no-camera error message is way too big.
• The third line of carousel text is cut off.
• The page scrolls but the carousel stays put.

The orientation of Safari iOS camera snapshots is off

Sometimes it's sideways.

Download rendered polaroid

Add an option to download as an image instead of sharing to social media.

Don't ask for camera permissions right away

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.

Add Facebook posting

Also offer to share image via Facebook.

Share result div is partially hidden by carousel

Whackamole.

That's as far as I can scroll down. We should just make the result div wider. In the mobile view it's not hidden but it's awkwardly narrow:

Remove "Register to Vote"

We're beyond registration time.

Users are unable to share on Facebook

The user reports seeing "Sorry, something went wrong." consistently. However, other users seem to be having no issues.

fix layout on mobile

• The Polaroid image doesn't adapt to the actual size of the video. (fixed by #6)
• The video canvas isn't centered (on my phone it's jammed up against the right side). (also #6)
• The video size doesn't always adapt correctly when the screen is rotated.
• In landscape mode, the popup is too large, preventing you from getting to the text entry.

Camera button doesn't launch camera on iOS

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.

Replace FB API call with imgur + Feed Dialog

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.

Timeline: remove title overlap on mobile

The "What's at stake" box overlaps the header on small screens.

Reset state after taking picture

Currently requires page reload to be able to take another picture.

Implement layout from mockups

See Slack for pinned posts showing the design mockups.

Show sample #myvotematters selfies on background of landing page

We could collect them live from Twitter/FB but it's probably better to just curate a few and serve them statically.

Implement "What's at stake / Timeline" page

Design

copy 1, copy 2

Color scheme:

• blue #0066cc
• red #ff3333
• white #ffffff

Scaling images could be better

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.

Alternative photo filters

Beyond the Polaroid.

After #6 is merged we can implement these as simple JS functions that draw on the canvas.

draw polaroid frame according to camera aspect ratio

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.

Remove share suffix

That gets Twitter users another 37 characters for captioning. We can replace it with a watermark somewhere in the frame.

On Chrome When the Browser is Denied Camera Access, Unable to Upload Photo, Button makes Infinite TELL US HOW YOU FEEL

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.

sharing doesn't work on the live site

myvotematters.today probably needs to be added to the domain whitelist for both the Twitter and FB integrations.

Make sure oauth popup windows get closed

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.

iOS Safari/Chrome experience confusing due to lack of getUserMedia support

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.

FB feed popup gets blocked

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.

Analytics

Simple analytics for how many visits we get and how many people share images. Google Analytics should be easy to add.

Privacy policy

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

test

Length of input text doesn't match what's shown in the samples

Typing the text that's shown in a sample shows that the actual limit is much shorter.

Allow for more customized text on polaroid

Turn camera off after picture is taken

I just took a picture and posted to Twitter. While the picture in the frame isn't updating, the camera is still on. This is shown in the browser tab and the LED on my laptop.

The camera should only be on when the user requests it, otherwise it's kind of creepy.

Optimize page speed

Google Analytics suggests the following speed improvements:

• Should fix
  • Mark <script> tags async (or copy/paste them into the HTML) so the page can be rendered before the script downloads
• Consider fixing
  • Mark JS and CSS as cacheable (is this possible?)
  • Compress and shrink img/logo.png so it downloads faster
  • Consider copy/pasting stylesheets into the HTML
  • Minify JS so it loads/downloads faster
  • Minify CSS so it loads/downloads faster

Timeline: autosize text in header/footer

There's some code in js/main.js to autosize the text of the carousel and footer according to screen/window size, but it isn't included in timeline/index.html so the footer text doesn't scale.

Likely we should do this in some way without JS anyway.

cc #27 @Eyas

Safari upload will change an image's aspect ratio

When you upload an image using Safari (which you have to do because the camera doesn't work there) it ends up being "squished" to fit a given aspect ratio.

Shares link back to app

The tweet/post should end with "... share why YOUR vote matters at https://myvotematters.today" or something like that.