launch widgets v2

[chadwhitacre]

@rummik has been working on v2 widgets here during the retreat, utilizing research she's been doing into what is possible with SVGs. Basically, SVGs suck for video games but are great for widgets. :) This is a meta-ticket to coordinate the launch. Creating in IG since it encompasses work on multiple repos (grtp.co + gratipay.com).

• finish up work on v2 widget server
• deploy v2 widget server
• design new widgets
• @rummik to write technical blog post on her own channels (tumblr, g+)
• update /%username/widgets/
• announce on Gratipay blog

We're going to have the same basic offerings we have now:

• Gratipay button
• Giving and Receiving
• Shields badge

The Gratipay Button is primarily a call to action.

The Giving and Receiving widgets are primarily informational.

The Shields badge is also primarily informational. It's a special case in that we want to make people aware of it (cross-promote the Shields brand, since they're a partner of ours), but it doesn't carry our brand like the Button, Giving and Receiving widgets do.

The Button, Giving, and Receiving widgets should be both responsive and progressively enhanced. By responsive I mean that one widget should operate differently at different sizes (duckinator implemented this for the old [= current] widgets a while ago, though I'm not sure that ever made it into production). By progressively enhanced I mean that each widget should provide multiple layers of user experience experience: static, animated, and fully interactive.

@rummik's research has been in providing progressive enhancement using SVGs.

@rummik What's the story with responsiveness using SVGs?

[rummik]

@whit537 The story right now: I don't know yet. I know it's doable with <embed> and <object>, but I'd have to play around a bit to find out about <img>. We also wouldn't be able to create a responsive PNG fallback.

[chadwhitacre]

Can we use id instead of username, since the former is immutable? Ticketed here: gratipay/grtp.co#80.

[rummik]

@whit537 We could, but aside from it being immutable, what purpose would it serve? (I personally like being able to see who the image I'm loading belongs to) Also, is there a way to get a user's public.json, etc, by ID on Gratipay right now?

[chadwhitacre]

No purpose. Immutability would be the purpose.

[rummik]

@whit537 Thoughts on using /v2/+12345/button.svg?

[chadwhitacre]

The + indicating an id? We should look at what characters we allow in ids.

[rummik]

Yup

[chadwhitacre]

I believe we allow + in usernames (we allow a lot). What about /v2/id/12345/button.svg? Then we could implement /id/%userid on gratipay.com.

[chadwhitacre]

Then we could implement /id/%userid on gratipay.com.

The implication being that id would become a protected name, so we could safely clobber it in the /v2/ namespace as well.

[rummik]

Wiring /v2/id/:id is easy enough

[chadwhitacre]

16 bits! You're so generous. :-P

[chadwhitacre]

Hey @twolfson, I just introduced @rummik to gratipay-badge (face-to-face here in Ambridge), and I wanted to loop you in over here on the v2 effort for http://grtp.co/ since it seems that it might be something you'd like to be a part of. Basically as part of v2 we want to use something more or less like your gratipay-badge instead of the little button we've had to date.

[chadwhitacre]

Though now that I think about it, the original vision for the button was to be more like the followers or starred widgets from Twitter/GitHub:

I know that @espadrine is steering Shields in this direction with badges/shields#337 so maybe let's consider it out of scope here.

[twolfson]

Long thread @_@. I am busy at the moment but I will read over it tonight

[ReginaHolliday]

I am not sure what thread it goes on but I wanted to make sure the team knew about our event in June in western Maryland and wanted to know if anyone wanted to speak on the crowdfunding panel 
https://www.eventbrite.com/e/cinderblocks2-tickets-6811480321 
Regina Holliday
mobile 202-441-9664
Speaker's Profile:  http://www.apbspeakers.com/speaker/regina-holliday
Blog: http://reginaholliday.blogspot.com/
http://www.facebook.com/regina.holliday
http://twitter.com/ReginaHolliday
From: Chad Whitacre notifications@github.com
To: gratipay/inside.gratipay.com inside.gratipay.com@noreply.github.com
Sent: Wednesday, January 28, 2015 12:47 PM
Subject: Re: [inside.gratipay.com] launch widgets v2 (#125)

Though now that I think about it, the original vision for the button was to be more like the followers or starred widgets from Twitter/GitHub:I know that @espadrine is steering Shields in this direction with badges/shields#337 so maybe let's consider it out of scope here.—
Reply to this email directly or view it on GitHub.

[twolfson]

A while ago, I was exploring smaller badges for better inlining with text:

https://github.com/gratipay/gratipay-badge/blob/c4a49005c4b17d178b55243a28e72ddf0cc3f6c5/dist/gittip.png

https://github.com/gratipay/gratipay-badge/blob/dev/explore.smaller.badge/dist/gittip.png

Ignore the timestamp, it says a few minutes ago but it looks like I never committed the compiled version for that branch. It was more like Feb 19 2014 (previous commit)

I remember it being even smaller but that could be my memory deceiving me.

The badge was based off of one created by Max Ogden and then adjusted to be fully automated and based off of GitHub CSS styles. Eventually, an SVG was "automated" by reusing generated CSS styles.

[chadwhitacre]

Copying over from gratipay/gratipay.com#3220 (comment):

Also, "Embed" is more common than "Widget":

https://developers.facebook.com/docs/plugins/embedded-posts
https://dev.twitter.com/web/embedded-tweets
https://medium.com/@Medium/embed-medium-anywhere-3eaed64aed8a
http://blog.vine.co/post/55514921892/embed-vine-posts
http://embed.ly/

@Changaco:

I don't think we want to switch to Embed, because the widgets don't actually embed any user-generated content like a tweet or a blog post.

@whit537:

Okay, but they do embed HTML elements into another page.

Our "widgets" aren't really widgets:

In computing, a web widget is a software widget for the web. It's a small application with limited functionality that can be installed and executed within a web page by an end user. [...]

Widgets often take the form of on-screen devices such as clocks, event countdowns, auction-tickers, stock market tickers, flight arrival information, daily weather etc..

http://en.wikipedia.org/wiki/Web_widget