Hey guys 👋

I was reading @piamancini's article (congratulations on v2 of @opencollective, btw 😍) and decided it was finally time to create an account. That's when I realized that the login/sign up flow is a bit... weird. I say weird because UX is a very hard thing and it's impossible to live up to every end-users' expectations. With that being said, I want you guys to know that the following is just my feedback, and nothing more.

• The login page (currently) does not have a set title. Was this intentional? 🤔
• The flow from clicking on login to landing on the page works fine, but then I'm greeted with this screen:

... which to me, as an end-user, is a bit lacking. As a new user, what do I do? The intent — that typing in a valid email address brings up a whole array of options (fields, in this case) — is less than clear. Maybe this could be worked on a bit more?

Now I'm going to go ahead and sign up for an account! Cheers! ❤️

UPDATE

Just finished the sign up process. Once again I feel like the whole flow lacks feedback.

I like the whole idea of "one-click login" via email, but once again in this case I feel like the login process could be improved a bit.

It would be nice if it was possible to modify the amount you wish to donate for an existing monthly subscription, without cancelling and re-subscribing. The change would go into effect the following month, at which point the sponsor card would get updated with the new amount.

Check it:

Example:

Whats up!

Took a look around OC and found some things that can be fixed:

1 and 2 where fixed in the branch micro-fixes.
3 is a improvement, not a fix.
4 is polish, and
5 is a weird bug, I am not sure if you will be able to recreate it, let me know plz

1) A frivolous console.log

All where removed except for those that are console.errors

2) A disabled button in the MailChimp section should not have a hover effect.

3) The Discover page should have a loading indicator as you scroll and when filtering results.

A loader at the end of the results that hides when results are finished loading and shows when scrolling to the bottom should be enough.

If a user does not have fast internet or it is lagging, they will see a blank page for a few seconds, and for those few seconds, the user may feel confused as they are presented with nothing until the results are loaded and displayed.

In a nutshell: A loader gif image under the div that shows the results, some padding, and some js code during the api requests to hide and show the loader.

4) CollectiveCards have a "Halo"

It is easier to notice in the website instead of this image.

In digital editing like Photoshop, when you crop out a section in a image and the edges from the original background can still be seen, this is called a "halo".

The issue lies in that the parent element is white, when it really should be transparent. Also the child elements (the head, the body and the footer) are spaced out vertically, so setting the parent element to transparent is not enough to fix this. This is my fault, I could have structured this component better.

When fixing this component one must keep in mind that the component changes when adding another class name (.sponsor for example), so these alternate versions will also need to be revised.

5) CSS Table Bug in Blog causes horizontal scrolling

Upon inspection, this is one of those weird display: table quirks/bugs. A table element is rendered much differently than block and inline elements, if you are not careful really weird quirks pop up, heck they tend to show up, even when you are careful. Heisen-quirks

So you can scroll up and down without any issues? Hmmm ok, now try scrolling up and down while holding the mouse (or in my case the trackpad) with a slight tilt in the right direction. You have a better chance of seeing this if you scroll up and down while hiding and showing the topbar.

The culprit appears to be the .collectionHeader-aspectRatioTable, a table element with its width set to 200%. Unfortunately overflow-hidden will not fix this (to its parent, or wherever you wanna put it).

I believe the original code had the element set to 100% width, but, setting it back to 100%, changes the look of the component. However, I believe setting this table element to 100% is the best way to solve this problem. Along with some adjustments:

Set the table width to 100%
It should shrink vertically and align the text to the left.

Remove the second table-cell
The table element has two child table-cell elements, only the first one has children, the second one is empty and can be removed in order to align the text to the center.

Add padding
To mimic the "grow-relative-to-screen" effect that is lost when setting the table element to 100%, media queries will have to be used here :(

BTW: You can go to the blog, open dev tools and remove the overflow: hidden in the body element to see the horizontal bar.

If you have already entered an extended for your profile, it’s not possible to clear it out.

Steps to reproduce

1. Go to your profile at https://opencollective.com/your-name
2. Enter an extended bio, if you don’t have one already (the one that says it supports Markdown). Reload the page to verify that it saved.
3. Delete the contents of the extended bio field.

Expected behavior

The bio would go back to its initial empty state.

Actual behavior

The bio doesn’t change. Further, if you try to outsmart the page by just entering a space in the bio, the placeholder text will actually get saved to it:

(Screenshot from viewing the profile in an incognito window.)

Problem

The footer CSS sets its position to absolute. But this makes the footer stay on the same place on the page, covering up the content underneath:

Fix number 1: footer always in view

If position is changed to fixed the footer behaviour is what you would expect, at the bottom of the window:

Fix number 2: like footer on main page

The footer on the main page has no position set, which means it defaults to static and the footer is only visible if you scroll all the way down.

Hi guys, OC is looking great!

I recently went through the donation process, for the most part it was simple & very intuitive.

I want point out some minor improvements that can be made:

1) Long names are cut off on credit card preview

Font size 16px gives plenty of room

2) Profile page is missing symbol

Also, shug emoji is missing arm: ¯\_(ツ)_/¯

3) Not quite sure about this one, however I believe the title's font is suppose to be sans-serif, I could be wrong.

4) There is a edit button and a edit tab. I guess the button should be removed

5) It would be nice to remove an image, in case you accidentally upload the wrong one, like I did ¯\(ツ)/¯

6) Missing symbol in edit profile/payment method

7) Redirect user after changing their url slug, otherwise they are forced to edit the url themselves or see a 404 at some point:

Here I changed the slug from ascari-gutierrez-hermosillo to ascari, however url references still point to the old slug

Note I think the missing symbols has to do with the platform I am using. I am running the Chromium browser (not Chrome) on top of Linux Mint 17. I suppose other browsers are able to render these glyphs.

It is likely that the shrug emoji is missing its arm because it is a escaping character \, so it should probably be written as ¯\\_(ツ)_/¯.

I was delighted to find the OC backers list in riot's markdown 👍

The top menu isn't working when on the /faq or /about pages.

You end up with urls like https://opencollective.com/faq#how and https://opencollective.com/about#usecases.

Good luck with the new site though!

Using the Update feature.

Used bullet points but even after saving, they are not visible.

https://opencollective.com/oscurrency/updates/21418-update-ruby-upgrade-demo-on-deck#updates

it doesn't seem I am getting notified when somebody contributes?

both servers will look for process.env.PORT when starting. this can be problematic for obvious reasons.

I have pushed the public page in it's own repo and it renders on the server.

The way it works is the following. When the user hits /:slug, it will fetch the group and we will use that data to render the client app on the server side https://github.com/OpenCollective/public-page/blob/master/server/app.js#L99

Then we put the html string inside the index view and also stringify the initial state so that the client app can bootstrap. React will check if the server and client versions match by comparing the react ids, pretty cool :)

I have removed the *.js files we don't need. I still have a few tasks on my plate before we can push it.

• Add public group changes since 3 days ago (last time I pulled master)
• Polyfill window object for the server side (we use it for redirections and the share url)
• Polyfill localStorage and handle logged in state (client + server side)
• Generate api key for the new application (config.apiKey)
• Remove unused components (js + css)
• Remove unused css
• Remove unused packages from package.json

Build it in two phases:

1. View all your subscriptions at one page
2. Support editing/cancelling, etc.

UI

• Add a link "My subscriptions" to the top right of each page
• Page loads to show you all your subscriptions and ability to navigate to the right group, cancel, etc.

Login/Authentication:
Option 1: Create a password and let you login (just like we do for App).

• We would have a flow to create account, authenticate, etc.
• This feels heavy weight to me.

Option 2: Do it as a one-time link

• Still add a "Manage my subscriptions" to top right of all public pages
• Clicking on it, shows you a page with an email address field.
• Enter your email and we send you a unique link that'll expire in N days and you can see all your subscriptions through it. We can use cookies to minimize the number of times you have to go through your email.
• This feels more light weight and reflects the number of times you'll actually need to check the Manage Subscription page.
• Potential security risk: I think this is manageable if we expire those links frequently and limit what you can do from that page (for example: only cancel initially).

Open questions

• Authentication: login/pwd or unique link
• Will need a way to store interval on backend (already on trello for other reasons)

Anything else? @xdamman @arnaudbenard

In https://opencollective.com/vcr#support the text 'Join us and help us fulfill our mission' is in white
see screenshot

I had a look through your package.json file and at a quick count I noted only 88 dependencies. This is very low and may make your project vulnerable to reverse dependency injection, which I have recently learned is a very common and damaging thing. I really hope you guys can fix this problem because you are all amazing!

Ran into a few 404s (awesome gif, by the way) in /opensource when clicking on some of the Open Source Collective members. Specifically for the following:

https://opencollective.com/opencollective.com/mochajs
https://opencollective.com/opencollective.com/yeoman
https://opencollective.com/opencollective.com/angular-fullstack
https://opencollective.com/opencollective.com/gulpjs

Looking at UserCard.js, it seems the user.website property may be faulty for some of the members?

  render() {
    const { className = '', user, i18n } = this.props;

    const twitterUrl = (user.twitterHandle) ? `https://twitter.com/${user.twitterHandle}` : '';
    const href = (user.website || twitterUrl);

    const roleLabel = (user.tier || user.role).toLowerCase();
    const addBadge = (roleLabel !== 'sponsor' && roleLabel !== 'member');

    return (
      <article className={`UserCard bg-white pt3 ${className} ${user.tier}`}>
        {this._link(href, <UserPhoto user={user} addBadge={addBadge} className='mx-auto' />)}
        <p className='UserCard-name PublicGroup-font-15 h5 my2 px2 -ff-sec'>{this._link(href, user.name)}</p>
        <div className='border-top border-gray px3 py2'>
          <p className='UserCard-role m0 -green -fw-bold -ttu'>{i18n.getString(roleLabel)}</p>
          <p className='h6 muted m0'>{i18n.getString('since')} {i18n.moment(user.createdAt).format('MMMM YYYY')}</p>
        </div>
      </article>
    );
  }
}

please put a forum link next to the blog link in upper right navbar.
Might put it in page footer section as well next to 'contact'
Until I was told I had no idea you all have a forum server.

Right now, we are using Clearbit to automatically try to pull the avatar based on the email address of a new donor.

We should give people the option to upload/pick their avatar.

It would be great to have an ImagePicker React Component

<ImagePicker 
  twitter="xdamman" 
  email="xdamman@..." 
  website="https://xdamman.com" 
  src=":currentAvatarURLIfAny"
  className="avatar" // (or "logo")
/>

Alternatively, we could have an API call to retrieve the different possible values for imageUrl given an email, website, twitter and have a more generic ImagePicker component that would just accept an array of images to choose from with a default index.

<ImagePicker
  src="url1,url2,url3"
  default=0 // index of the default image
  allowUpload=true
/>

And on API:

GET /images?email=:email&twitter=:twitter&website=:website

Which would return something like

[
  {
    source: "twitter",
    src: "url",
    width: "120px", // if we know the width
    height: "100px"
  },
  {
    source: "xdamman.com",
    src: "url"
  }
]

The frontend design should be a rectangle (className=logo) or a round (className=avatar) with a left and right arrow to skim through the possible values (with dots at the bottom to indicate the position). The last position should be an Upload Icon that lets the user upload or drag'n'drop an image.

Thoughts?

You can't approve a transaction without linking your PayPal account
(and btw, I do have a PayPal account linked, or at least that's the impression I get when I look at my profile)

You haven't removed me as a backer – not even after I complained. You've debited my bank account 5 months without my approval. Seriously? Are you that unprofessional?
opencollective.pdf

In mocha, avatar image and the website aren't match.
For instance, https://opencollective.com/mochajs/sponsor/5/avatar.svg is Yahoo and https://opencollective.com/mochajs/sponsor/5/website is dontpayfull.

See, mochajs/mocha#3297 .

File them at http://www.github.com/OpenCollective/opencollective/issues

And don't close this issue.

I have an account. I hit login. I see https://opencollective.com/login?next=/login

Which seems to imply that I need to get a new one / it's not possible to login. Is there a way to have like a "login with github" or something to imply that once you have an account it's possible to login?

The last links are wrong at the moment at Webpack

Maybe it's temporary however, until the caches/generators refresh the content.

Let's figure out a way to tackle our missing avatars. This looks terrible: https://opencollectiveinc.slack.com/files/piamancini/F0UHK1GGJ/slack_for_ios_upload.jpg. And it's been on our list for several weeks.

Goal: How do we increase the number of profile photos on the site?

Some things to consider:

• What flow makes most sense to encourage users to add their own avatars?
  1. Add it post-donation
  2. Add it to the subscription page
  3. Make it a clickable link on a public page (ex: hovering over an avatar on public page asks you to upload a photo via email verification. "Is this you? Upload your photo. Takes you to My subscription after email verification and lets you upload a photo)
• Can we do it manually somehow?
• Could we add something in the donation confirmation email?
• Should we change UI to reduce the size while we increase the number?

@xdamman @piamancini @arnaudbenard @sedubois

if you're like me, you have a service running on port 4444 already.

and if you're like me, you are a dummy, and aren't really sure how to disable that service.

at any rate, I hope it can be safely changed.

URL: https://opencollective.com/{USERNAME}/edit

Reproducing:

1. Click on the website form field (that already has a previous value).

2. Change it.

3. Click Save.

Update doesn't persist.

(at least for the long description content)

We should have a way to connect a Twitter account to a collective. This will enable us to:

• publicly acknowledge and welcome new backers: "@xdamman thanks for backing us!"
• send a monthly tweet to thanks the sponsors: "We would like to thanks our sponsors @GitLab, @yahoo and @Skycatch. Become a sponsor: https://OpenCollective.com/RailsGirlsAtl/sponsors"

For now, we don't need to worry too much about the UX. We just need a way to connect the Twitter account.

We should have page /:collective/connect/:service, e.g. https://opencollective.com/RailsGirlsAtl/connect/twitter with a button "Connect your Twitter account". This should create a new row in the ConnectedAccounts table with a link to the GroupId of the collective.

Then at the API level, we should have an easy to use function to send a tweet on behalf of a collective.

it's getting complicated to manage the strings file. A partial solution is to have a file per language.

On my profile, I tried to connect with github. It says: "Connect a Github account to verify your identity and add it to your profile"

For that, it doesn't sound that it will need write access to my repos. However, it is requesting it:

"This application will be able to read and write all public repository data."

In my opinion, that is too much to ask. And also a big responsibility on your side to handle the access with care. I think it would be better for everybody to ask for less permissions.

See https://opencollective.com/ConsciousnessHackingSF

Related to https://github.com/OpenCollective/website/pull/195

The way to solve this is to go through the group.tiers array and for each tier.name, count the number of members. And then order them by tier.range[0] in ascending order.

I made the wrong selection for the cover image, because as explained in opencollective/opencollective#779, it looks back with the black text.

The problem now is that there is no way to remove the cover image. So I'm forced to find a new one that is more white. I should be able to undo everything I do, so I should be able to remove the cover image and go back to plain white background.

I clicked the advanced tab on the edit page of my collective and got a white screen only with this message: An unexpected error has occurred.

The url is https://opencollective.com/jaquerespeis/edit#advanced

I'm using firefox 58.0a1 (2017-11-05) (64-bit) on ubuntu 18.04

I clicked the login button on the top menu. Then entered my email, and a text appeared under the textfield saying:

Click on "Login"

This is wrong, when the email is new the button text is "Sign Up".

The registration process fails in step 3/3 on the "Create!" button:

action @ 19:06:21.079 CREATE_GROUP_FROM_GITHUB_REPO_FAILURE

POST https://opencollective.com/api/groups returns error 500:

{  
   "error":{  
      "name":"SequelizeDatabaseError",
      "parent":{  
         "name":"error",
         "length":472,
         "severity":"ERROR",
         "code":"23502",
         "detail":"Failing row contains (9176, null, null, USD, 2017-10-16 17:06:20.982+00, 2017-10-16 17:06:20.982+00, null, t, null, https://images.githubusercontent.com/macleodbroad-wf, macleodbroad-wf, null, null, null, null, 5, null, {\"UserId\":8327}, null, f, null, 8327, null, null, USER, null, null, null, null, null, null, null, null).",
         "schema":"public",
         "table":"Collectives",
         "column":"name",
         "file":"execMain.c",
         "line":"1732",
         "routine":"ExecConstraints",
         "sql":"INSERT INTO \"Collectives\" (\"id\",\"type\",\"slug\",\"name\",\"CreatedByUserId\",\"hostFeePercent\",\"currency\",\"image\",\"data\",\"createdAt\",\"updatedAt\",\"isActive\",\"isSupercollective\") VALUES (DEFAULT,'USER','macleodbroad-wf',NULL,8327,5,'USD','https://images.githubusercontent.com/macleodbroad-wf','{\"UserId\":8327}','2017-10-16 17:06:20.982 +00:00','2017-10-16 17:06:20.982 +00:00',true,false) RETURNING *;"
      },
      "original":{  
         "name":"error",
         "length":472,
         "severity":"ERROR",
         "code":"23502",
         "detail":"Failing row contains (9176, null, null, USD, 2017-10-16 17:06:20.982+00, 2017-10-16 17:06:20.982+00, null, t, null, https://images.githubusercontent.com/macleodbroad-wf, macleodbroad-wf, null, null, null, null, 5, null, {\"UserId\":8327}, null, f, null, 8327, null, null, USER, null, null, null, null, null, null, null, null).",
         "schema":"public",
         "table":"Collectives",
         "column":"name",
         "file":"execMain.c",
         "line":"1732",
         "routine":"ExecConstraints",
         "sql":"INSERT INTO \"Collectives\" (\"id\",\"type\",\"slug\",\"name\",\"CreatedByUserId\",\"hostFeePercent\",\"currency\",\"image\",\"data\",\"createdAt\",\"updatedAt\",\"isActive\",\"isSupercollective\") VALUES (DEFAULT,'USER','macleodbroad-wf',NULL,8327,5,'USD','https://images.githubusercontent.com/macleodbroad-wf','{\"UserId\":8327}','2017-10-16 17:06:20.982 +00:00','2017-10-16 17:06:20.982 +00:00',true,false) RETURNING *;"
      },
      "sql":"INSERT INTO \"Collectives\" (\"id\",\"type\",\"slug\",\"name\",\"CreatedByUserId\",\"hostFeePercent\",\"currency\",\"image\",\"data\",\"createdAt\",\"updatedAt\",\"isActive\",\"isSupercollective\") VALUES (DEFAULT,'USER','macleodbroad-wf',NULL,8327,5,'USD','https://images.githubusercontent.com/macleodbroad-wf','{\"UserId\":8327}','2017-10-16 17:06:20.982 +00:00','2017-10-16 17:06:20.982 +00:00',true,false) RETURNING *;",
      "code":500
   }
}