Badges feedback

(Sam Saffron) #1

This topic is mainly for @radq with feeback regarding badge implementation.

  • Badges tab should not show up in admin if badges are disabled
  • Badges tab should move left (show up after users)
  • Badge creation UI needs some improvements, should show “saved” after saving, should not submit when disabled, should have more space for description.
  • Allow us to manually assign/revoke a badge from /admin/users/user
  • Need a top level /badges route that shows all the possible badges (something like Badges - Stack Overflow )

Once this is done, it seems that “unlocking” a title has pretty unanimous approval. Allow users to use a “badge name” as a title if the badge is “silver” or up. Need a UI for them to select title, simplest approach is just copying the badge name into the title field, very minimal changes that way.

@awesomerobot can you mock up a tiny visual mock for the above ?

I want to get “manual” badge stuff working very smoothly before entering the automatic awarding stage of this project.

Custom images/css for badges
(Sebastien Miquerolle) #2

Badge creation UI :

  • Badge name should be unique and maybe with a minimum lengh ?
  • Badge name should have regexp to exclude some characters (I break the design with a badge name 65*/*, after that only the left panel was shown)
  • Badge images ?

(Sam Saffron) #3

That is a bug we should address, badge names should be allowed to be king of <script> without any UI breaking, stuff should be escaped properly.

(Vikhyat Korrapati) #4

Badge names already need to be unique, you won’t be able to save a badge with a duplicate name. I will be adding proper error messages for badge validation errors.

It does break the “prefer description i18n string” logic I had which is an easy fix, but the UI doesn’t break for me when I create a badge named 65*/*. Screenshot?

This is already the case.

(David Celis) #5

I think that the badge name should only be unique when paired with the color. e.g. we should be able to create bronze, silver, and gold badges all with the same name to create a tier.

(Sam Saffron) #6

I would prefer to defer on this for now, it has some implication when it comes to titles based on badges. It means that we need extra visual styling for titles which I do not want to go into yet.

On SO they have ruby bronze / silver / gold badges, but I am not sure I see this use case here yet.

(David Celis) #7

I guess my question in this case would be as to what functionality the color serves if not to put the badge on a certain importance level. I suppose that can be done without introducing a tier… Still curious though!

(Bill Ayakatubby) #8

It’s a very advanced feature for phase 0/1 of the project.

(Sam Saffron) #9

My main idea for colors is to be used when drilling in (in user card or profile page)

(Sebastien Miquerolle) #10

Bug: We can remove a badge granted, but in the user/badges page, the line still there, and I was unable to revoke it. (I’m now stuck with a line without badge for my user).

Maybe two ways here:

  • Disable the delete of a badge granted ; or
  • Remove the badge for all user which are granted with it and remove it.

(Vikhyat Korrapati) #11


  1. Should admins be able to define additional badge types other than gold/silver/bronze? I’m guessing the answer is yes, otherwise it wouldn’t make sense to have a badge_types table instead of just using an enum. If yes, do we need admin UI for editing badge types at this time, or would that be out of scope?
  2. Does the badge type color hexcode belong in the database? Might be better to just add a class and do the styling in CSS, because hardcoding styles would make customization harder. An alternative would be to store the hexcode in a data attribute and refer to it using css generated content but I’m not sure what browser support is like. I think if we’re going to let users create custom badge types the second approach would work better since it would be possible to create a badge type and assign a color to it immediately without having to add CSS to the site customization.

Define additional badge types
(Sebastien Miquerolle) #12
  1. I don’t need other types. Maybe I’ll need “categories” (badge related to post, badge related to popularity, etc…) in addition of the type (Gold/Silver/Bronze). But maybe not for the V0.
  2. In my mind, I see something like that:

I prefer to store the image and the color in the database, because we should be able to export them in the future. Maybe that someone make a bunch of funny badges and want to share them with other users, and it’s more easy to export the color if it’s in the database, rather than it’s in the css stylesheets.

(Sam Saffron) #13


Since I merged latest badge stuff I would like to reboot priorities, please work through this list from top top bottom.

Where we are at:

We display badges on user cards:

We have a UI to display badges in the system:

We have an admin UI and API to assign/revoke badges:


  1. Get rid of TODO from front end UI, that is bad.
  2. Add a user-badge helper for rendering badges (always call it user-badge as badge is overloaded internally)
  3. We need a public /badges route that lists the badges in the system with grant counts
  4. We need the the user badges “clickable”, clicking on a badge will display the list of users that have the badge… eg: /badges/22/king-of-script to display all the users that have king of script. Ordered by grant date descending. url format is /badges/{id}/dont-care-what-this-is-but-redirect-if-not-the-right-slug
  5. When hovering over a badge we should display the badge description
  6. We need to display badges on user page.
  7. If a user has 1 or more silver or gold badges they should be able to pick one of them to be used as their title.
  8. BadgeGranter needs to notify users when they are granted a new badge, standard blue notification with link to badge page will do.

Work through this list in this order. Let me know if you need to change the order.

To give us some meaty data on meta I ran this script: … A pile of people now have badges, for example:

@velesin has the “great contributor” badge and @lightyear has the “contributor” badge and so on. It’s more of proof of concept thingy, I imagine it will grow into quite an interesting plugin when I am done.

(Sam Saffron) #14

@radq is making awesome progress here, we are mostly done with my list, here is a revised list with new priorities (work in this order):

  1. URGENT get rid of N+1 query from /user_badges

  1. If a user has 1 or more silver or gold badges they should be able to pick one of them to be used as their title.

  2. Badges page should display username and granted at date next to the avatars

  3. Badges page to display 100 badges on first render and load more as needed using infinite scrolling

  4. Notification needs more copy “you were granted […badge name…]”

  5. Bugfix, when I click on my notification it stays in “blue” it should be marked read.

  6. If you have 0 badges it should not display the “Badges” filter.

  7. Implement our first set of badges: “basic user” (bronze) “regular user” (silver) “leader” (gold) “elder” (platinum). These badges are automatically granted when trust level changes.
    a. You retain all badges up to your level when you climb up rungs.
    b. If you move down the rungs your trust level badges disappear.
    c. This must be backfilled in a migration. (notifications can be skipped for backfill)

(Erlend Sogge Heggen) #15

Is showing badges somewhere in user profile (not just hover box) part of the v0 scope?

(Sam Saffron) #16


click on :arrow_forward: @eviltrout’s :arrow_backward: link


(Erlend Sogge Heggen) #17

Cool. But in the case of lightyear’s profile that’s been assigned an identifying badge, shouldn’t that badge show up on his main profile page as well? Some gorgeous mockups for ya:

(Sam Saffron) #18

Probably. But let’s get some badges under our belt first

(Michael Downey) #19

When badges are rendered on a page it’s not clear how they are sorted. It doesn’t seem to be either by color/category, or by name.


(Régis Hanol) #20

Also, it keeps loading when a badge hasn’t been awarded yet