Show HN: HN Badges – Displays game-like badges for your HN profile

3 years ago (hnbadges.netlify.app)

Possible bug report:

The user RiderOfGiraffes is claimed to have used the F word. Searching through their comments I can find no such usage, but the replies to their comments are consistent with the count given. I think the count is incorrectly including occurrences in replies by other people to comments.

Added in edit:

Following the suggestion from elsewhere I've tracked down the problem. It's counting the "Fuk" in Fukushima, the "funk" in "jazz funk", and the "Fack" in "Fack to Brunt".

So that's wrong, being mislead by the results from the search engine's false matches.

  • Now fixed. RiderOfGiraffes's conviction is now quashed. Thanks for your help, and my head hangs in shame!

    • Same with me, I doubt I've used the f word in comments.

      But holy cow! Close to 15k submissions now.

      The karma/comment ratio is obviously with total karma (including submission karma). I think if you only counted comment karma (no idea if that's possible) I wouldn't have either of the comment badges.

  • I also had a badge for the F-word about 30 mins ago), which I am pretty sure was wrong. However, having checked again just now it has disappeared.

    I'm not sure what to make of badges being bestowed on HN. It's rather like walking into a civil service interview and finding the panel wearing Hawaiian shirts and drinking colourful cocktails. A generous gesture, regardless, and it brought a smile to my face.

    Edit to add: just noticed that while I was commenting, quickthrower2 posted to say that they'd fixed the problem. Nice one!

  • Does this imply that you can get another badge just by using the word fuck in a comment?

    • > Does this imply that you can get another badge just by using the word fuck in a comment?

      Perhaps, but it would be a bit immature to do so. Or even to quote someone else doing so.

      2 replies →

    • Looks like you just did, assuming that's what "Colorful" means. (I'm on mobile so just have to guess at the badge meanings.)

      Edit: Oh, apparently that's not what "Colorful" means at all.

    • Oh apparently you have to use fuck in two comments. And it has to be over a certain percentage of your total comments. Also you can get a badge by mentioning Rick Astley. Hilarious.

      2 replies →

Great fun! The gamification and cutesy badges are basically the opposite of the HN aesthetic, which gives the whole project a fun sort of tongue-in-cheek feel.

Because I don't have anything more constructive to say, I'll just point out what looks like a small error: the text for the "Early Adopter" badge always seems to say "NaN" in place of the user's name.

Mobile descriptions don't work. Why not just put the description as subtext below each badge?

  • Also, I'm not sure if it's a Safari 15 beta thing or just a Safari thing, but the hovers don't work on Safari 15 beta from macOS Monterey either.

    They work fine on Firefox though.

  • I was going to post that. Either as subtext, or as explanations below, or whatever xkcd does.

    • Xkcd uses alt text or titles, can't remember which, to pop up an accessibility tooltip. Clever and fun but it's quite dated and doesn't work on most (all?) mobile browsers.

      3 replies →

Can you just put the description next to the badge? I can’t mouse over on my phone and view source returns an error.

  • Here is a list of all possible badges:

      badges.push(["story-teller", "Story Teller", "Has submitted a story to Hacker News."]);
      badges.push(["inquisitive", "Inquisitive", "Has submitted an ask HN."]);
      badges.push(["show-off", "Show Off", "Has submitted an show HN."]);
      badges.push(["out-of-park", "Out of the park!", "Has submitted anything to HN with at least 100 upvotes."]);
      badges.push(["won-the-internet", "Won the internet!", "Has submitted anything to HN with at least 500 upvotes."]);
      badges.push(["market-researcher", "Marker Researcher", "Has submitted a poll HN."]);
      badges.push(["self-describer", "Self Describer", "Has written something in the about section of their profile. Thanks for sharing, " + user + "!"]);
      badges.push(["memior", "Memior", "About section has over 1000 characters."]);
      badges.push(["has-a-life", "Has a life", "Hasn't interacted with HN for over 180 days."]);
      badges.push(["fword", "F Word!", "Has used the F word in at least 2 comments and more than 0.1% of comments. " + user + " has " + fWordInfo.nbHits + " such comments."]);
      badges.push(["gordan-ramsey", "Gordan Ramsey", "Has used the F word in at least 10 comments and more than 1% of comments. " + user + " has " + fWordInfo.nbHits + " such comments."]);
      badges.push(["rick-roller", "Rick Roller", "Has mentioned Rick Astley in a comment."]);
      badges.push(["motor-mouth", "Motor Mouth", "Has over 10000 comments."]);
      badges.push(["mute", "Mute", "Less than 10 comments."]);
      badges.push(["flag-powers", "Flag Powers", "Has enough karma to flag submissions."]);
      badges.push(["colorful", "Colorful", "Has enough karma to set their header color."]);
      badges.push(["downvote-powers", "Downvote Powers", "Has enough karma to downvote other users. This doesn't necessarily mean they have downvoted you!"]);
      badges.push(["4-figure-karma", "4 Figure Karma", "Has reached or exceeded 1000 karma points."]);
      badges.push(["5-figure-karma", "5 Figure Karma", "Has reached or exceeded 10000 karma points."]);
      badges.push(["earthly-nirvana", "Earthly Nirvana", "Has reached or exceeded 100000 karma points."]);
      badges.push(["pretty-good-commenter", "Pretty Good Commenter", "Has a karma/comment ratio of 5 or higher."]);
      badges.push(["substantive-commenter", "Substantive Commenter", "Has a karma/comment ratio of 10 or higher."]);
      badges.push(["og", "OG", "An original user of HN, by my arbitrary definition: someone who joined before 2008. " + joinSentence]);
      badges.push(["early-adopter", "Early Adopter", "An early adopter of HN, by my arbitrary definition: someone who joined before 2010. " + joinSentence]);
      badges.push(["necro-linker", "Necro Linker", "About page links to defunct service, e.g. hnchat.com."]);
      badges.push(["call-me-anytime", "Call Me Anytime", "Profile has a US telephone number."]);
      badges.push(["bird-of-a-feather", "Bird of a feather", "Has a Twitter link/reference in about page."]);
      badges.push(["corporate-drone", "Corporate Drone", "Has a Linked in URL in about page."]);
      badges.push(["tim-berners-lee", "Tim Berners Lee", "Has a link in about page."]);
      badges.push(["git", "Git", "Has a Github link in their about page."]);
      badges.push(["programmer", "Programmer", "Mentions a programming language in their about page."]);
      badges.push(["top-secret", "Top Secret", "Has a Keybase link in their about page."]);
      badges.push(["open-book", "Open Book", "Has an About Me link in their about page."]);
      badges.push(["beggar", "Beggar", "Has a Patreon Link in their about page."]);
      badges.push(["bitcoiner", "Bitcoiner", "Has a Bitcoin Address in their about page."]);
      badges.push(["friend", "Friend", "Has a link to this very site!"]);

    • > badges.push(["mute", "Mute", "Less than 10 comments."]);

      If I understand this correctly, all new users will get this badge, and then lose it as soon as they post their 10th comment. Seems to me a badge should be something you earn and then can never lose.

      Then again, all of the "Has a _____ in their about page" badges can be lost by removing the relevant items from the user's about page. But that seems OK to me, because the user is at least choosing to remove the item.

      > badges.push(["og", "OG", "An original user of HN, by my arbitrary definition: someone who joined before 2008. " + joinSentence]);

      > badges.push(["early-adopter", "Early Adopter", "An early adopter of HN, by my arbitrary definition: someone who joined before 2010. " + joinSentence]);

      And these are badges no one can ever earn, who doesn't already have them.

      1 reply →

  • There is no description when you hover apart from the text itself.

    • There is! Try hovering the text "5 Figure Karma" (for example) rather than the icon and you'll see a description.

  • On desktop it's not even mouse over, you click and a native (thread-blocking) alert is shown.

As a proud owner of the "Gordon Ramsey" badge, I'd like to say that this is fucking interesting. :-D

Really inspired me to think about integrating something like this in one of our systems.

  • I'm just glad HN doesn't (yet?) have strict (puritanical, think of the children/advertisers, etc) language rules. I mean we're all adults here, we can use adult language to each other.

    Likewise, I don't get the recent trend of self-censoring words like suicide, police or kill. I think it's mainly a thing on tiktok? But it's leaking out from there as well.

    • "we can use adult language to each other"

      Like monad or functor?

      Edit: I'd be more worried about using a word like "monad" incorrectly on HN than swearing.

      1 reply →

    • I think I've seen it on sexual education-like videos on Instagram, too. People censored the names of genitals, probably so that automatic filters won't ban them or whatnot.

      It's a difficult problem, I think.

    • Indeed, and it's not as if we use those words every day in informal context. Yet when it's slightly more public it's suddenly a big deal? It's a bit hypocritical to pretend to be offended by something that everyone really does.

      Even the "think of the children". Are there any children that don't know these words?

    • This is one of those topics I tend to agree with in principle.

      And then every time I run into someone who feels very strongly about it ... the rate of me thinking about how it should be a rule based on their usage alone.

      One of those weird things where i agree and then you meet the folks who have very strong feelings about it and I start to have second thoughts ;)

      Granted I don't yet feel that way.

    • "Likewise, I don't get the recent trend of self-censoring words like suicide, police or kill. I think it's mainly a thing on tiktok? But it's leaking out from there as well."

      I presume this is to that their postings won't be censored/shadow banned/deleted/muted/whatever. Kind of reminds you of China, doesn't it?

    • Especially TikTok has very aggressive content filtering, so if you want people to see your content about such topics, you need to use terms the filter doesn't yet penalize.

    • Reminds me of random warnings on OpenAI about unsafe content. I get this for very banal things that are truly puzzling

    • I’m a bit confused by the recent adoption in saying “unalive” instead of “suicide”, I’m genuinely not sure what it accomplishes. They sound similar and mean the same thing.

      4 replies →

That's pretty cute, and from looking at some of the badges I can see that a decent bit of work was put into coming up with some unique and meaningful badges. Nice work!

  • Thanks! Appreciate the feedback. It’s an itch I wanted to scratch for a while. There is more I want to add but decided to submit anyway!

    Happy to add any suggestions. I don’t want to make too many more api calls to algolia though!

Just FWIW you can’t hover over things on mobile, that’s a pretty bad way to reveal what the badges are for. It would be better to just show what the badge is for in smaller italics text under the badge name.

It would also be cool to see a list of all possible badges.

That being said, enough of the world is gamified already… this is nice work and a fun diversion but I’m glad it’s not a real feature of HN :)

  • On iOS you generally can see alt text if you long-press an image. Not sure if that's true in this specific case.

    • The hover tooltip in this case is on the text though, so this won't work (you'll just select the text).

Update, fixing some bugs, but it's getting late in Australia.

I fixed the biggest cause of confusion, the F word search is now fixed, and so getting a Gordon Ramsey should be a pretty rare occurrence.

  • Bug! Badges have descriptions in the title attributes on the <li> elements, but <li>s contain <img>s which also have an accessibility title and that's what gets displayed (on my Firefox 91.0.2), so I have to look at html to read the badge descriptions. I love this, btw!

  • FYI, having one submission and it being a Show HN gives me the story badge and the show-off badge. I wouldn't have given me both, I don't think.

It wrongly thinks that I have a Bitcoin address in my about page, and thus gives me a "Bitcoiner" badge, which… I really do not want, and almost take offense at.

More seriously, I think the app is confused by the Tor Onion v3 address in my profile.

  • Kudos for running your site on Tor. I’ve been wanting to do that as well, but I’ve been putting it off because I don’t have any good enough content at the moment to warrant maintaining a site for. So currently I just post stuff to TikTok and Reddit etc. But when I make something good enough and I put it on a site of my own, I will make my site run over Tor also in addition to clear net.

Interesting idea! May I suggest having a tooltip description pop up on long press for those of us browsing on mobile?

I love it!

(I'm also distraught about some of the numbers. I know I have a HN problem, but seeing it laid out like that...)

I second the "hover text" issue other commenters brought up - it would be great if badge details were accessible in other ways (e.g. expanding hidden text or a popup when the user clicks a badge or its main text).

EDIT:

s/Call Me Anytime/Call Me Maybe/ for extra meme value?

I hope "Gordan Ramsey" doesn't find out that you butchered the spelling of his name, he might give you his best Hell's Kitchen serve.

A few bug reports

Karma length check seems to be wrong. 5 figure karma und 4 figure karma can be had at the same time

s/marker researcher/market researcher/

At least I think that those are valid corrections...

Fun project

  • > Karma length check seems to be wrong. 5 figure karma und 4 figure karma can be had at the same time

    That makes sense. If you have more than 5 figure of karma you also have more than 4 figure of karma.

  • Thanks for the feedback - the karma thing is on purpose - you don’t lose the 4 badge because you got the 5, ironically as if gaining karma is a game of some kind!

    • Very neat app! One other bug report: I have a "programmer" badge for mentioning a programming language in my about page, but such isn't the case. Not sure which part of my bio it might be mistaking for a language?

      edit: found it, it's reacting to the fact that my keybase ID happened to have a "VB" in the middle. You might want to change some of those language checks from |vb| to |\bvb\b| or the like.

Well, now I learned that there is apparently a way to change the header color and I have enough karma to do so. And I got a Gordan Ramsey badge for swearing ;)

Great work! You need some caching and a few more badges:

1. Distinguish people with more karma from comments vs posts if you haven’t already:

- substantive commenter for comment upvote average above xy.

- engaging commenter for high comment replies on average.

- great content curator for high average upvote on submitted content

- engaging content curator for lots of comments received from submitted content

- badge for people whose carma is mostly from comments instead of posts. (content sharing increases the karma quickly, but those with lots of karma from comments have the best insights and that’s worth recognizing)

Then show a leaderboard per each badge that merits it.

It seems the names are case sensitive. While HN itself is case insensitive. Also: Is there any documentation about what different badges mean?

Edit: As it turns out you need to hover over the text to get an description, while the icon only shows "icon for x" on mouseover.

Addendum: Would it be possible to split karma into submit and comment karma? My gut says it'd not be possible as HN uses some kinda curve + only displays the combined karma on the profile

  • Comment karma is not visible (it used to be and it was terrible...). But submitted story karma is public so it's possible to sum it up and negate it from a user's public total karma.

So got side-tracked - but pg has 156K karma, but is not on the leaderboard (/leaders). I assume that dang etc are not there either but I had not really thought about it.

If this gets popular I might have to try and find my first HN login - I want that OG badge. :-)

Which kind of is the point - I dont really want to worry about those sort of things - I am glad HN is staying off this course. But it is fun :-)

Cool. Is there a list of all the badges somewhere?

  • Story Teller - Has submitted a story to Hacker News

    Inquisitive - Has submitted an ask HN

    Show Off - Has submitted an show HN

    Out of the park! - Has submitted anything to HN with at least 100 upvotes

    Won the internet! - Has submitted anything to HN with at least 500 upvotes

    Marker Researcher - Has submitted a poll HN

    Self Describer - Has written something in the about section of their profile

    Has a life - Hasn't interacted with HN for over 180 days

    Memior - About section has over 1000 characters

    F Word! - Has used the F word in at least 2 comments and more than 0.1% of comments

    Gordan Ramsey - Has used the F word in at least 10 comments and more than 1% of comments

    Rick Roller - Has mentioned Rick Astley in a comment

    Motor Mouth - Has over 10000 comments

    Mute - Less than 10 comments

    Flag Powers - Has enough karma to flag submissions

    Colorful - Has enough karma to set their header color

    Downvote Powers - Has enough karma to downvote other users

    4 Figure Karma - Has reached or exceeded 1000 karma points

    5 Figure Karma - Has reached or exceeded 10000 karma points

    Earthly Nirvana - Has reached or exceeded 100000 karma points

    Pretty Good Commenter - Has a karma/comment ratio of 5 or higher

    Substantive Commenter - Has a karma/comment ratio of 10 or higher

    OG - An original user of HN: someone who joined before 2008

    Early Adopter - An early adopter of HN: someone who joined before 2010

    Necro Linker - About page links to defunct service, e.g. hnchat.com

    Call Me Anytime - Profile has a US telephone number

    Bird of a feather - Has a Twitter link/reference in about page

    Corporate Drone - Has a LinkedIn URL in about page

    Tim Berners Lee - Has a link in about page

    Git - Has a Github link in their about page

    Programmer - Mentions a programming language in their about page

    Top Secret - Has a Keybase link in their about page

    Open Book - Has an About.me link in their about page

    Beggar - Has a Patreon/Hypage/Buymeacoffe/Indiegogo/Liberapay/Kickstarter link in their about page

    Bitcoiner - Has a Bitcoin Address in their about page

So apparently I now have the F word badge after quoting someone’s outburst.

What exactly are you trying to achieve with this?

Very cool. I see my page (https://hnbadges.netlify.app/?user=dmuth) has the "colorful" flag, probably due to the profanity I have in my bio. :-)

  • Colourful badge is for those with enough karma to set their header colour. If you hover over the badge title, it describes the badge itself. Many people have mentioned that you can't hover over text on mobile so you might need to visit the site on a desktop to find out the rest.

Very proud to have secured the Loading… badge!

Looks like pg got that one too. Which makes me think this would benefit from a caching layer somewhere. I doubt I’m the first person who looked at pg’s page today, and I doubt the badges change very frequently.

  • I’m free riding off algolia who I hope would cache (there does seem to be http caching at least).

    The project is just HTML/css/js and uses third party apis.

"Hover over text for description ..." does not work on tablets. And the displayed badges are heavily distorted in the vertical direction. That's while reading this with the Materialistic app on an Android device.

I was going to say this is totally pointless. And it is but it's also fun.

But, does it mean that HN is now a proper social medium? Or can I still brag about how I don't use social media at all ever (except linkedin)?

  • "Social media" has no real definition, I suppose, but I don't consider a crowd-sourced link aggregator with comments to be that. You probably at least need primarily user-generated content and some way to explicitly follow specific people and customize the information view based on a user's personal network. We have no networks here. Also, no avatars, sparse profiles many don't even fill out, all leads to users who are less memorable than even the old vBulletin days. I can think of exactly two users off the top of my head whose user names I'd even recognize. I think that is part of the point, too. You're supposed to focus on the information content here, not the person who submitted it. It's backwards compared to what I would consider social media, where the focus is very much on who.

  • It's a third party service that's entirely external, separated from and unaffiliated with HN, so your illusion of not using social media can remain undisturbed :).

What is classified as the "F Word!"? I have alledgedly used it twice giving me the badge, but glancing through my comments I cannot see any mention of what I perceive as the american "F word"

Love the use of vanilla js framework, truly bleeding edge. I suggest you try using the css media query framework as well and add some margins on mobile :p. Otherwise great way to tickle my narcissism!

  • There are media queries (take a look!) but although it might appear ugly I like to use full width on mobile devices to make the most of the space. The phone case is the margin!

This is so much fun, I love it.

I don't want it to be part of HN though, I like HNs minimalism as it is.

Also, what the long term prospects of this project? If I bookmark it, and return in 5 years time, will it still be up ?

  • > Also, what the long term prospects of this project? If I bookmark it, and return in 5 years time, will it still be up ?

    I recently went through my bookmarks (900+, oldest bookmark from 9 years ago) and about 20% of the links still worked (2xx status code) while only half of those actually had the same content as the one I bookmarked.

    So yeah, if you bookmark X and return in 5 years time, it's very unlikely to still be there. The web is suffering from huge bitrot scenarios right now with no fixes in sight so far. I personally started backing up content locally with `wget --mirror $URL` to prevent this for myself.

  • As long as netlify doesn’t get in the way, yes. I used this rather than my own domain as I’m more likely to let my own domain drop.

Very cool. It is also a clever way to find out where HN users are located.

  • It might be but nope I don’t track (no analytics at all). I have no idea what traffic went to the site. Hosted on netlify who as far as I know don’t track or provide access logs.

Nice tool, thank you for sharing.

Feedback - a small bug - somehow it misses / hides the "½" character in my bio (profile description).

Alright, now let's make a chrome extension to insert those next to people's names on the site and go full-reddit.

Bonus: it was a reminder for me to remove an out-of-date kickstarter link from my profile.

I LOLed. Well done, if only because (dramatic pause)...

...the text wraps around nicely, unlike here :)

Fucking great even if a little silly (now, how do I get that Gordon Ramsey badge?)