kogg / hovercards Goto Github PK

A 'show image' button that puts the image inline. Keep in mind that users sometimes post multiple photos in one comment. This allows the user to not leave the hovercard to look at image comments on reddit.

• Switching comments
• Moving through galleries/carousels
• Share links
  • Differentiate based on where we're sharing to
• Account link of content card
• Scrolling through comments
• Links within comments

Mo data, mo problems.

The settings to turn off reddit posts does not stop hovercards from appearing on reddit.com

• Change hovercards displayed to happen only after loaded
• Change hovercards/showing to time the time after loading
• Make all instances of nonInteraction events not have that.

Differentiate between when a hovercard is loading and when it is loaded/displayed. Also, all events are interactions so they should count as such.

At the moment, we are getting so many false positives in analytics about when people are actually looking at the hovercard. A user can accidentally trigger the 'hovercards displayed' event but just scrolling. From a product perspective, the timing is useful, but in its current configuration it's also concealing insights in analytics.

On #13, @saiichihashimoto said "If the timings of the hovercards are mostly low, that shows that they don't have much reason to keep the hovercards around (uninteresting content, not loaded, etc)". It is very difficult to differentiate the timing of the event from the event occurring, and still have useful data. Separating them into two events is better. That way, if the time of the 'hovercard displayed' event is low that means that once it loaded they didnt care. When both events are combined the timing doesnt differentiate between long loading times and uninteresting content.

Also the percentage of 'hovercards loading' to 'hovercards displayed' events shows us the percentage of abandoned hovercards.

• Capture landing page exceptions/errors
• Throw away all the integration "mutations" on the error messages, let rollbar show them as-is
• Capture server exceptions/errors
• Capture extension background script exceptions/errors
• Capture extension content script exceptions/errors

Capture problems and report them to rollbar instead of google analytics.

Google analytics for exceptions is a joke. It doesn't report, doesn't hold any kind of details, no stack trace, what version had what problems, differentiate between different stages of development, create github issues automatically, etc. Rollbar (or sentry or anything else) does all of this. We can have a clearer image of what's working, not working, why, how to fix it, and it's effects.

• All state held in redux
  • top-frame and every-frame share state
  • background as well
• Follow file structure in #18 (comment)
• Loading screen
• Discussions
  • Use discussions given via content
  • twitter comments are different than all the rest #23
• All experience and view related javascript in react
  • Things outside the hovercard (like it's triggered and such) might not fit into react. That's OK
  • Expanding comments
  • Carousel arrow keys
• Error screen
• Retry request after authentication
• All html in react
• All css in react
• Put analytics back
  • Follow analytics convention provided by @marcomarandiz
• Fix styles (might become it's own issue) #79

ractive.js is not fun. react is. This would make life so much better.

This is mostly a giant cleanup/rewrite.

Blocked by #10 & #17. Helps fulfill #22.
This'll need the list of requirements to grow substantially to include what the extension already behaves like (e.g. mutes on hover, allows switching discussion, loads discussions in order then allows picking them on demand, etc.) and needs to be pretty thorough. This more or less rewrites most of hovercards; we want to make sure there's no regressions. Adding new things or changing old things will be completely denied, unless it makes doing this task easier and changes nothing for the user (e.g. standardizing the analytics). Definitely will have to release to a small group and watch them very carefully.

• Parses urls properly
• Content cards
• Discussions
  • Including reddit
• User cards
• Authentication
• Unit tests
• Account for hacks and integration specific code
  • Hardcoded client-side integrations
  • Proper config values
  • AccountFooter's integration specific styles

https://gfycat.com/api

right click on the gfycat.com link. copy link address. insert '/cajax/get' before the gfycat-name and receive a json blob with all you need :)

As @cameronrohani knows the development process now sucks: make a change wait for it to rebuild, refresh the extension, then refresh the page you're on. No thanks.

• Detect background script change and refresh entire extension
• Detect css and content script changes
  • If possible, just swap them in place but if not, refresh entire extension.
• Is hot reloading possible for the server?

Blocked by #17 & #18 .
https://www.npmjs.com/package/generator-chrome-extension
https://developer.chrome.com/extensions/runtime#method-reload

After #11, there's a whole lot of code for lightboxes still floating around. Purge that.

Purging that will really make things easier to understand.

This task probably shouldn't be prioritized or be done all at once. It makes sense to do this as we go and then, once the code is nearly gone, be finally finished.

Having an automated and informative release process.

Deploying, versioning, releasing, having meaningful release notes... it's a huge pain. And a waste of our time. This way, when we make changes, they move their way to production on their own and inform everyone properly of what happened.

• Automatically deploy development environments (pull requests)
• Automatically determine version
• Automatically generate release notes
  • github release
  • landing page
  • within the chrome (and others) extension
  • chrome (and others) webstore
  • within our subreddit/twitter/etc?
• Automatically deploy production environments
  • Have travis run release
  • Have release run build && deploy and have deploy run all deploy:* scripts
  • Change deploy:extension from upload to upload --auto-publish
  • Have master go straight to production and removing hovercards-staging

Blocked by #16 & #79.
https://github.com/semantic-release/semantic-release
https://developer.chrome.com/extensions/autoupdate
https://developer.chrome.com/extensions/hosting
https://devcenter.heroku.com/articles/nodejs-support#heroku-specific-build-steps
https://github.com/commitizen/cz-cli
https://github.com/kentcdodds/validate-commit-msg

• Parses urls properly
• Content cards
• Discussions
  • Including reddit
• User cards
• Authentication
• Unit tests
• Account for hacks and integration specific code
  • Hardcoded client-side integrations
  • Proper config values
  • AccountFooter's integration specific styles

https://streamable.com/documentation

say the link to the video was https://streamable.com/q4yt
'q4yt' is the video code

http://api.streamable.com/videos/q4yt
^^ gives you the json blob

Reddit Link Posts #24 Sharing is broken. No link, so fb sharing closes right away and twitter sharing just says ' via @hovercards'

https://kogg.slack.com/files/marco/F1SHFM70R/sharing_broken.mov

• HoverCards works in firefox
• HoverCards is listed in the firefox webstore
• Automatically builds and deploys to the firefox webstore
• Inline install from hovercards.com

https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities
https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension
https://www.npmjs.com/package/web-ext
https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/jpm

The user can search deeper into reddit comment threads from the hovercard, much like reddit's own "load more comments" links.

• Build entire extension (css, js, json, all of it)

Instead of using browserify, uglify, watchify, etc. convert the extension to using webpack.

Currently, there's too many separate parts doing their own thing (i.e. watchify, postcss, copying some files). That's what webpack is made for and it makes development for it great. Not to mention, building for deployment is much simpler.

Blocked by #10.

Barely anyone uses it for anything (including twitter), so maybe removing it completely except for in Twitter, since that seems silly.

http://imgur.com/gallery/AeWPQ

so this is extra weird. the link on github ^^ doesnt show any gifs at all. on reddit,
https://www.reddit.com/r/movies/comments/4t6tjg/low_poly_gifs_of_scenes_from_different_movies/
this post shows the first frame of each picture, but not the video.

A non-content related survey in HoverCards.

This functionality allows us to interact with our users (ask questions, provide tips, direct them to customer service pages). It also allows us to test how comfortable users are with interacting with non-content related things in HoverCards (like ads).

• Content for subreddit
• Design
  • How it appears in the hovercard
  • 'take me to the page'
  • 'never show this again'
• Functionality
  • above discussion choices
  • Have the link & message be editable by us in real-time.
  • ability to turn off any message (without spacing issues)
  • analytics
• Redo all of this in react/redux
• Have it hit the server periodically, not on every extension refresh
• Remove papertrail filtering out /in-app-messaging

Ideas for later:

• ability to accomodate input boxes (im thinking emails)
• ability to accommodate multiple steps in the survey

reddit.com only

Steps to reproduce:

• Make a hovercard from a youtube video
• Make the youtube video fullscreen
• Move your mouse to another monitor
• The hovercard closes

It shouldn't close.

• Merge in teamkogg/hovercardslanding
• Merge in teamkogg/hovercardsserver
• Merge in teamkogg/hovercardsshared
• Rename hovercardsextension to hovercards

Have one repository for hovercards.

This would let us keep the versions between extension/landing/server coupled, have a very simple development environment, share fonts/assets between all of them, way simpler pipeline, etc. All the pains of having the repos depend on each other would be gone, as well.

Instagram API used to give you some comments with the photo, but now they don't. Gotta go get those.

when you post a youtube link (not sure about others) in fb you get a www.l.facebook.com/blablabla link that doesnt work for hovercards. when you refresh the page, facebook changes the link to www.youtube... THIS is on www.facebook.com and www.messenger.com

Opening links in hovercards means you lose the hovercard, either by switching tabs or having the current tab change. We want that to stop being the experience for the user.

• Open links in a new tab
• Keep hovercard open when opening a link
  • scrolling outside of HoverCard closes it

So news articles, and other links that we don't support can look like this and clicking on it takes you to the content in a new tab.

• Use reddit's oEmbed field for media posts
• Use reddit's images
• When no other media exists use the URL's tags
  • Open Graph
  • Twitter's thing

Start youtube videos (or soundcloud sounds) at the specified start time on the link.

Currently all youtube videos start from the beginning. When people leave comments, on reddit or other websites, with youtube videos, it should play from the time that they specified. That is an inconvenience for the user.

Not sure if this is a bug, because I don't think we specified this from the beginning, but it sure as hell feels like one to the user.

http://stackoverflow.com/questions/16763072/specify-starting-time-of-track-within-url-for-soundcloud

Test, review, code cover, etc our code changes.

Currently, we just write code and it just goes out, hopefully well (but often with bugs). Let's get rid of that "hopefully," without slowing us down significantly.

• Run style/build type tests on commit (or push?)
• Setup greenkeeper
• master requires passing full suite
  • build tests (webpack, probably)
  • mocha tests
  • code coverage
  • browser tests?
  • Code reviews?
    • Maybe these won't block the pull request, but will be there in case we want to check it out or something.
• stylelint after the current cssfmt/stylefmt

I still need to figure out what we should test, since right now tests just seem to slow me down and not prevent me from doing bad things. Maybe that's something separate entirely.

• HoverCards works in opera
• Automatically builds and deploys to the opera webstore
  • This is not possible
• HoverCards is listed in the opera webstore
• Inline install from hovercards.com

https://dev.opera.com/extensions/basics/
https://dev.opera.com/extensions/apis/
https://dev.opera.com/extensions/inline-installation/

• HoverCards works in safari
• HoverCards is listed in the safari webstore
• Automatically builds and deploys to the safari webstore
• Inline install from hovercards.com

https://developer.apple.com/library/safari/documentation/Tools/Conceptual/SafariExtensionGuide/Introduction/Introduction.html

If the reddit comments aren't on a reddit post, we don't get a link to the post or any stats. The comments don't give any kind of source.

• HoverCards works in edge
• HoverCards is listed in the edge webstore
• Automatically builds and deploys to the edge webstore
• Inline install from hovercards.com

My thoughts:

Only grey out in 1s (and very slightly at that) after mouse enters hovercard. Brighten immediately after exiting. This way only when youve decided to interact with the hovercard are you getting the experience

• 30 comments

depth is variable. no reason to specify depth.

• Parses urls properly
• Content cards
• Discussions
  • Including reddit
• User cards
• Authentication
• Unit tests
• Account for hacks and integration specific code
  • Hardcoded client-side integrations
  • Proper config values
  • AccountFooter's integration specific styles

https://github.com/Giphy/GiphyAPI

Just like posts on facebook's timeline, the hovercards should have "placeholder" elements (a blank square, "lines" where text should be, etc.) instead of a spinner. The jump from spinner to content is jarring.

If you are scrolling through comments and reading and then you accidently leave the hovercard you have to go find your position again. This way it would come back to right where you left it.

An arrow pointing to the link that the hovercard is showing. Similar to Facebook.

Once the hovercard closes, it's difficult to understand which link the user left off on. Giving a visual cue would be helpful.

• Parses urls properly
• Content cards
• Discussions
  • Including reddit
• User cards
• Authentication
• Unit tests
• Account for hacks and integration specific code
  • Hardcoded client-side integrations
  • Proper config values
  • AccountFooter's integration specific styles

Are we able to find the source of the image without have an API key? #hax0r

• Add slider to image galleries (imgur & twitter have them)
  • Make the imgur ones with text not look like garbage
• Put readmore button for content card descriptions
  • Style it
• Fix reddit text posts
• Errors in hovercard comments look super stupid
• Clicking on youtube video kills the hovercard
• Youtube no go full screen, wtf lol (it does for @marcomarandiz, but only after first click has closed the hovercard)
• Make accounts not look retarded despite all the changes you've done to the content cards.
• Make loader transparent
• Make error handling look wayyyyy less stupid.
• Imgur content without a user has an empty header
• Add share links to the top of all content cardz
  • design share links
• Remove dates from comments
• POSITIONING: WHOLY FUCK LMAO GOOD LUCK WITH THAT BS
• When you click accounts make it go to their full profiles
• Hovering over hovercard - turn audio on.
• When you click hovercard, it stays even if you hover of off it
• Landing page link fix
• if you hover on youtube card while video is still loading you can't unmute it

People don't use lightboxes all that much, so we're removing them and moving some of the content into the hovercard.

Pretty hefty usage on sports and video game subreddits.

https://streamable.com/documentation

After doing #11, the landing page is going to be out of date. Need to deal with that.

• analytics
• support news articles with comments
• weird spacing right now

The code is already there, and it is already designed. Let's make it happen!

Currently, chrome extensions must be build on my machine, then made sure that I did that right, then deploying to the chrome webstore. This would do it automatically.

I don't want to do this! What a huge pain in the a$$.

https://www.npmjs.com/package/chrome-webstore-upload-cli