16 ms·

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

242 points by quickthrower2 5y ago

codetrotter 5y ago
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!
- quickthrower2 5y ago
  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!
  - arethuza 5y ago
    Asking for a friend: if you've won an Internet, how do you go about claiming it?
    - quickthrower2 5y ago
      From what I remember from University anyone can have an internet. It just won’t be THE Internet. So feel free to set one up. If you are at the border of two countries chuck a network cable over that border.
      - dylan604 5y ago
        But remember, it is your internet, so you don't have to peer equally with everyone. You can allocate bandwidth to those you prefer while limiting to those you don't. Just like THE internet.
rogual 5y ago
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.
- Akronymus 5y ago
  It being separate from HN "proper" definitely makes me give it a lot of leeway to be "silly"
- arethuza 5y ago
  I'm pleased to say that HN user "NaN" does exist, although not terribly active: https://news.ycombinator.com/user?id=NaN https://news.ycombinator.com/user?id=NaN Edit: https://news.ycombinator.com/user?id=undefined https://news.ycombinator.com/user?id=undefined
babuskov 5y ago
Cool. Is there a list of all the badges somewhere?
- quickthrower2 5y ago
  Not yet. You can look at index.js though - it’s all vanilla readable JS!
- david_allison 5y ago
  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
BlackLotus89 5y ago
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
- quickthrower2 5y ago
  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!
  - fenomas 5y ago
    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.
- capableweb 5y ago
  > 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.
vghaisas 5y ago
Looks interesting! Quick bit of feedback: "Hover over text for description..." doesn't seem possible to do on a mobile device?
- cube00 5y ago
  If only we had Lynx in the app store.
martin_a 5y ago
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.
- BlackLotus89 5y ago
  I had this too! But it fucking disappeared on me somehow! Yeah I got the F! Badge as well
  - quickthrower2 5y ago
    Sorry a bug fix went in!
    - martin_a 5y ago
      You took my Gordon from me! Big dislike! :-P
  - cinntaile 5y ago
    This perfectly shows the problem of gamification imo.
- Cthulhu_ 5y ago
  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.
  - martin_a 5y ago
    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.
  - 5y ago
jbj 5y ago
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"
- quickthrower2 5y ago
  All I can say is hit F12 and check out the network tab for the request with F word in and look at the response it should have the examples.
  - jbj 5y ago
    hits 0 processing time 2
    - quickthrower2 5y ago
      problem should be fixed now.
p4bl0 5y ago
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.
- quickthrower2 5y ago
  Thanks if I can different onions from bitcoins I will create an root veggie badge for you
  - aeontech 5y ago
    Could match with a regex something along the lines of /^(?:https?\:\/\/)?[\w\-\.]+\.onion/
  - rnotaro 5y ago
    It also detect my Keybase signature as a bitcoin address..
- codetrotter 5y ago
  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.
  - ageofzfarm 5y ago
    Your content on vis.social is pretty good! You could mirror that account on a self-hosted onion instance.
    - codetrotter 5y ago
      Thanks :)
ColinWright 5y ago
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.
- samizdis 5y ago
  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!
- quickthrower2 5y ago
  Now fixed. RiderOfGiraffes's conviction is now quashed. Thanks for your help, and my head hangs in shame!
  - Tomte 5y ago
    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.
- michaelhoffman 5y ago
  Does this imply that you can get another badge just by using the word fuck in a comment?
ducktective 5y ago
"Sorry, user stevewoz was not found. If they are a new user, it might take some time before we know about them." There seems to be a bug...(Firefox on linux)
- tbabej 5y ago
  I had the same problem, turns out you need to enable JS for hn.algolia.com domain.
  - ducktective 5y ago
    I haven't disabled js anywhere
    - martin_a 5y ago
      That should be awarded with another badge!
junon 5y ago
Mobile descriptions don't work. Why not just put the description as subtext below each badge?
- kergonath 5y ago
  I was going to post that. Either as subtext, or as explanations below, or whatever xkcd does.
  - junon 5y ago
    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.
    - macintux 5y ago
      Using mobile safari, at least, you can tap and hold to see the alt text.
      - junon 5y ago
        Ah yeah but that's not very good typical UX, is it? To have to rely on the save menu to see alt text.
        macintux 5y ago
        Definitely lacking in discoverability.
- cwizou 5y ago
  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.
Semaphor 5y ago
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 ;)
- david_allison 5y ago
  "topcolor" setting in your profile Examples that others use: https://news.ycombinator.com/topcolors https://news.ycombinator.com/topcolors
- quickthrower2 5y ago
  Your Gordan Ramsey has now gone with the latest fix but you still have FWord.
- tbran 5y ago
  Also see "A List of Hacker News's Undocumented Features and Behaviors": https://github.com/minimaxir/hacker-news-undocumented https://github.com/minimaxir/hacker-news-undocumented
- playpause 5y ago
  Curious, why is this feature restricted by karma?
  - SamBam 5y ago
    I assume it's basically an easter egg.
globular-toast 5y ago
Cool. This will be fun for all the kids on HN.
- warent 5y ago
  The great thing about fun is that it's still possible to have it as a mature adult
quickthrower2 5y ago
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.
- dmos62 5y ago
  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!
- toast0 5y ago
  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.
GekkePrutser 5y ago
I come here precisely because it doesn't have this :) But it looks cool and works well! Nice effort!
Akronymus 5y ago
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
- koolba 5y ago
  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.
  - Akronymus 5y ago
    But you don't get 1 account karma per 1 story karma. Hence it being infeasable.
dgellow 5y ago
Very cute project. On mobile I don’t see a way to get badge descriptions.
- quickthrower2 5y ago
  Now you can click for descriptions
robertwt7 5y ago
Haha great now I'll try to add it to my profile and see my new badge
deleted 5y ago
[deleted]
cube00 5y ago
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.
- omni 5y ago
  You've made a dog's breakfast of his name
TeMPOraL 5y ago
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?
Schiphol 5y ago
If I upvote this submission, do I get another badge?
- quickthrower2 5y ago
  If I did that I’d be in trouble!
lifeisstillgood 5y ago
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 :-)
tbabej 5y ago
Bug report: On my badge profile [0], it looks like the Keybase proof link is correctly detected, however, I think it's also being interpreted as a bitcoin address (I do not have a BTC address in the profile despite having the badge). [0] https://hnbadges.netlify.app/?user=tbabej https://hnbadges.netlify.app/?user=tbabej
- NovemberWhiskey 5y ago
  Same here.
pjmlp 5y ago
Looks quite nice!
darepublic 5y ago
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!
- quickthrower2 5y ago
  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!
cabalamat 5y ago
Apparently I'm Tim Berners Lee (I'm not).
datameta 5y ago
Interesting idea! May I suggest having a tooltip description pop up on long press for those of us browsing on mobile?
deleted 5y ago
[deleted]
leppr 5y ago
This would be great as a userscript [1], to add inline in the HN UI, when usernames are hovered for instance. [1]: https://greasyfork.org/en/help/writing-user-scripts https://greasyfork.org/en/help/writing-user-scripts
burlesona 5y ago
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 :)
- johnmaguire 5y ago
  Another annoyance with hovering on Firefox - hovering over the image itself doesn't seem to work, you have to hover over the text near it.
  - dylan604 5y ago
    How is that a FF issue and not a dev issue for placing the hover on the correct element?
    - johnmaguire 5y ago
      I'm not saying it's a FF issue, I'm saying the issue is present on FF and I haven't tested it in other browsers.
    - quickthrower2 5y ago
      Not a dev issue, a dev feature for accessibility
- Brendinooo 5y ago
  On iOS you generally can see alt text if you long-press an image. Not sure if that's true in this specific case.
  - pc86 5y ago
    The hover tooltip in this case is on the text though, so this won't work (you'll just select the text).
dwighttk 5y ago
Can you just put the description next to the badge? I can’t mouse over on my phone and view source returns an error.
- ekianjo 5y ago
  There is no description when you hover apart from the text itself.
  - capableweb 5y ago
    There is! Try hovering the text "5 Figure Karma" (for example) rather than the icon and you'll see a description.
- capableweb 5y ago
  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!"]);
batch12 5y ago
Very cool. It is also a clever way to find out where HN users are located.
- quickthrower2 5y ago
  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.
mattowen_uk 5y ago
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 ?
- capableweb 5y ago
  > 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.
- quickthrower2 5y ago
  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.
YeGoblynQueenne 5y ago
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)?
- TeMPOraL 5y ago
  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 :).
- nonameiguess 5y ago
  "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.
deleted 5y ago
[deleted]
busymom0 5y ago
On Desktop Safari Version 14.0.3 (16610.4.3.1.7), the badges are squished: https://i.imgur.com/WugZOTS.png https://i.imgur.com/WugZOTS.png Works fine in Chrome though. You can fix it by adding: height: intrinsic; to the img CSS selector `.badgecontainer ul li img` Also, is this open sourced and am I allowed to use this in my HN Client? https://play.google.com/store/apps/details?id=com.pranapps.hack https://play.google.com/store/apps/details?id=com.pranapps.h... https://apps.apple.com/ca/app/hack-for-hacker-news-developer/id1464477788 https://apps.apple.com/ca/app/hack-for-hacker-news-developer...
rcarmo 5y ago
I LOLed. Well done, if only because (dramatic pause)... ...the text wraps around nicely, unlike here :)
dzink 5y ago
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.
nomdep 5y ago
Fucking great even if a little silly (now, how do I get that Gordon Ramsey badge?)
known 5y ago
Funny https://hnbadges.netlify.app/?user=known https://hnbadges.netlify.app/?user=known
dhosek 5y ago
Bonus: it was a reminder for me to remove an out-of-date kickstarter link from my profile.
snowwrestler 5y ago
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.
- quickthrower2 5y ago
  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.
dexen 5y ago
Nice tool, thank you for sharing. Feedback - a small bug - somehow it misses / hides the "½" character in my bio (profile description).
Ensorceled 5y ago
Another badge suggestion "Admonished by dang" :-)
FactolSarin 5y ago
Firefox on Android here, the badges flash on the screen for an instant and then disappear
dmuth 5y ago
Very cool. I see my page (https://hnbadges.netlify.app/?user=dmuth https://hnbadges.netlify.app/?user=dmuth) has the "colorful" flag, probably due to the profanity I have in my bio. :-)
- input_sh 5y ago
  Nope, that means you have enough karma to set the header to any colour in settings.
- giarc 5y ago
  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.
reidjs 5y ago
Alright, now let's make a chrome extension to insert those next to people's names on the site and go full-reddit.
jcynix 5y ago
"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.
jstrieb 5y ago
Hi, this is fun! The Algolia HN search site has a list of "cool apps" that use their API. https://hn.algolia.com/cool_apps https://hn.algolia.com/cool_apps I submitted a pull request to add your site to the list. https://github.com/algolia/hn-search/pull/214 https://github.com/algolia/hn-search/pull/214
deleted 5y ago
[deleted]
giuliomagnifico 5y ago
Thanks for this!
eurasiantiger 5y ago
So apparently I now have the F word badge after quoting someone’s outburst. What exactly are you trying to achieve with this?

242 points by quickthrower2 5y ago

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!

quickthrower2 5y ago
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!
- arethuza 5y ago
  Asking for a friend: if you've won an Internet, how do you go about claiming it?
  - quickthrower2 5y ago
    From what I remember from University anyone can have an internet. It just won’t be THE Internet. So feel free to set one up. If you are at the border of two countries chuck a network cable over that border.
    - dylan604 5y ago
      But remember, it is your internet, so you don't have to peer equally with everyone. You can allocate bandwidth to those you prefer while limiting to those you don't. Just like THE internet.

rogual 5y ago

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.

Akronymus 5y ago
It being separate from HN "proper" definitely makes me give it a lot of leeway to be "silly"
arethuza 5y ago
I'm pleased to say that HN user "NaN" does exist, although not terribly active: https://news.ycombinator.com/user?id=NaN https://news.ycombinator.com/user?id=NaN Edit: https://news.ycombinator.com/user?id=undefined https://news.ycombinator.com/user?id=undefined

babuskov 5y ago

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

quickthrower2 5y ago
Not yet. You can look at index.js though - it’s all vanilla readable JS!
david_allison 5y ago
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

BlackLotus89 5y ago

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

quickthrower2 5y ago
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!
- fenomas 5y ago
  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.
capableweb 5y ago
> 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.

vghaisas 5y ago

Looks interesting! Quick bit of feedback: "Hover over text for description..." doesn't seem possible to do on a mobile device?

cube00 5y ago
If only we had Lynx in the app store.

martin_a 5y ago

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.

BlackLotus89 5y ago
I had this too! But it fucking disappeared on me somehow! Yeah I got the F! Badge as well
- quickthrower2 5y ago
  Sorry a bug fix went in!
  - martin_a 5y ago
    You took my Gordon from me! Big dislike! :-P
- cinntaile 5y ago
  This perfectly shows the problem of gamification imo.
Cthulhu_ 5y ago
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.
- martin_a 5y ago
  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.
- 5y ago

jbj 5y ago

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"

quickthrower2 5y ago
All I can say is hit F12 and check out the network tab for the request with F word in and look at the response it should have the examples.
- jbj 5y ago
  hits 0 processing time 2
  - quickthrower2 5y ago
    problem should be fixed now.

p4bl0 5y ago

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.

quickthrower2 5y ago
Thanks if I can different onions from bitcoins I will create an root veggie badge for you
- aeontech 5y ago
  Could match with a regex something along the lines of /^(?:https?\:\/\/)?[\w\-\.]+\.onion/
- rnotaro 5y ago
  It also detect my Keybase signature as a bitcoin address..
codetrotter 5y ago
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.
- ageofzfarm 5y ago
  Your content on vis.social is pretty good! You could mirror that account on a self-hosted onion instance.
  - codetrotter 5y ago
    Thanks :)

ColinWright 5y ago

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.

samizdis 5y ago
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!
quickthrower2 5y ago
Now fixed. RiderOfGiraffes's conviction is now quashed. Thanks for your help, and my head hangs in shame!
- Tomte 5y ago
  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.
michaelhoffman 5y ago
Does this imply that you can get another badge just by using the word fuck in a comment?

ducktective 5y ago

"Sorry, user stevewoz was not found. If they are a new user, it might take some time before we know about them." There seems to be a bug...(Firefox on linux)

tbabej 5y ago
I had the same problem, turns out you need to enable JS for hn.algolia.com domain.
- ducktective 5y ago
  I haven't disabled js anywhere
  - martin_a 5y ago
    That should be awarded with another badge!

junon 5y ago

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

kergonath 5y ago
I was going to post that. Either as subtext, or as explanations below, or whatever xkcd does.
- junon 5y ago
  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.
  - macintux 5y ago
    Using mobile safari, at least, you can tap and hold to see the alt text.
    - junon 5y ago
      Ah yeah but that's not very good typical UX, is it? To have to rely on the save menu to see alt text.
      - macintux 5y ago
        Definitely lacking in discoverability.
cwizou 5y ago
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.

Semaphor 5y ago

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 ;)

david_allison 5y ago
"topcolor" setting in your profile Examples that others use: https://news.ycombinator.com/topcolors https://news.ycombinator.com/topcolors
quickthrower2 5y ago
Your Gordan Ramsey has now gone with the latest fix but you still have FWord.
tbran 5y ago
Also see "A List of Hacker News's Undocumented Features and Behaviors": https://github.com/minimaxir/hacker-news-undocumented https://github.com/minimaxir/hacker-news-undocumented
playpause 5y ago
Curious, why is this feature restricted by karma?
- SamBam 5y ago
  I assume it's basically an easter egg.

globular-toast 5y ago

Cool. This will be fun for all the kids on HN.

warent 5y ago
The great thing about fun is that it's still possible to have it as a mature adult

quickthrower2 5y ago

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.

dmos62 5y ago
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!
toast0 5y ago
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.

GekkePrutser 5y ago

I come here precisely because it doesn't have this :) But it looks cool and works well! Nice effort!

Akronymus 5y ago

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

koolba 5y ago
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.
- Akronymus 5y ago
  But you don't get 1 account karma per 1 story karma. Hence it being infeasable.

dgellow 5y ago

Very cute project. On mobile I don’t see a way to get badge descriptions.

quickthrower2 5y ago
Now you can click for descriptions

robertwt7 5y ago

Haha great now I'll try to add it to my profile and see my new badge

deleted 5y ago

[deleted]

cube00 5y ago

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.

omni 5y ago
You've made a dog's breakfast of his name

TeMPOraL 5y ago

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?

Schiphol 5y ago

If I upvote this submission, do I get another badge?

quickthrower2 5y ago
If I did that I’d be in trouble!

lifeisstillgood 5y ago

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 :-)

tbabej 5y ago

Bug report: On my badge profile [0], it looks like the Keybase proof link is correctly detected, however, I think it's also being interpreted as a bitcoin address (I do not have a BTC address in the profile despite having the badge). [0] https://hnbadges.netlify.app/?user=tbabej https://hnbadges.netlify.app/?user=tbabej

NovemberWhiskey 5y ago
Same here.

pjmlp 5y ago

Looks quite nice!

darepublic 5y ago

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!

quickthrower2 5y ago
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!

cabalamat 5y ago

Apparently I'm Tim Berners Lee (I'm not).

datameta 5y ago

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

deleted 5y ago

[deleted]

leppr 5y ago

This would be great as a userscript [1], to add inline in the HN UI, when usernames are hovered for instance. [1]: https://greasyfork.org/en/help/writing-user-scripts https://greasyfork.org/en/help/writing-user-scripts

burlesona 5y ago

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 :)

johnmaguire 5y ago
Another annoyance with hovering on Firefox - hovering over the image itself doesn't seem to work, you have to hover over the text near it.
- dylan604 5y ago
  How is that a FF issue and not a dev issue for placing the hover on the correct element?
  - johnmaguire 5y ago
    I'm not saying it's a FF issue, I'm saying the issue is present on FF and I haven't tested it in other browsers.
  - quickthrower2 5y ago
    Not a dev issue, a dev feature for accessibility
Brendinooo 5y ago
On iOS you generally can see alt text if you long-press an image. Not sure if that's true in this specific case.
- pc86 5y ago
  The hover tooltip in this case is on the text though, so this won't work (you'll just select the text).

dwighttk 5y ago

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

ekianjo 5y ago
There is no description when you hover apart from the text itself.
- capableweb 5y ago
  There is! Try hovering the text "5 Figure Karma" (for example) rather than the icon and you'll see a description.
capableweb 5y ago
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!"]);

batch12 5y ago

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

quickthrower2 5y ago
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.

mattowen_uk 5y ago

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 ?

capableweb 5y ago
> 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.
quickthrower2 5y ago
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.

YeGoblynQueenne 5y ago

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)?

TeMPOraL 5y ago
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 :).
nonameiguess 5y ago
"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.

deleted 5y ago

[deleted]

busymom0 5y ago

On Desktop Safari Version 14.0.3 (16610.4.3.1.7), the badges are squished: https://i.imgur.com/WugZOTS.png https://i.imgur.com/WugZOTS.png Works fine in Chrome though. You can fix it by adding: height: intrinsic; to the img CSS selector `.badgecontainer ul li img` Also, is this open sourced and am I allowed to use this in my HN Client? https://play.google.com/store/apps/details?id=com.pranapps.hack https://play.google.com/store/apps/details?id=com.pranapps.h... https://apps.apple.com/ca/app/hack-for-hacker-news-developer/id1464477788 https://apps.apple.com/ca/app/hack-for-hacker-news-developer...

rcarmo 5y ago

I LOLed. Well done, if only because (dramatic pause)... ...the text wraps around nicely, unlike here :)

dzink 5y ago

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.

nomdep 5y ago

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

known 5y ago

Funny https://hnbadges.netlify.app/?user=known https://hnbadges.netlify.app/?user=known

dhosek 5y ago

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

snowwrestler 5y ago

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.

quickthrower2 5y ago
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.

dexen 5y ago

Nice tool, thank you for sharing. Feedback - a small bug - somehow it misses / hides the "½" character in my bio (profile description).

Ensorceled 5y ago

Another badge suggestion "Admonished by dang" :-)

FactolSarin 5y ago

Firefox on Android here, the badges flash on the screen for an instant and then disappear

dmuth 5y ago

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

input_sh 5y ago
Nope, that means you have enough karma to set the header to any colour in settings.
giarc 5y ago
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.

reidjs 5y ago

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

jcynix 5y ago

"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.

jstrieb 5y ago

Hi, this is fun! The Algolia HN search site has a list of "cool apps" that use their API. https://hn.algolia.com/cool_apps https://hn.algolia.com/cool_apps I submitted a pull request to add your site to the list. https://github.com/algolia/hn-search/pull/214 https://github.com/algolia/hn-search/pull/214

deleted 5y ago

[deleted]

giuliomagnifico 5y ago

Thanks for this!

eurasiantiger 5y ago

So apparently I now have the F word badge after quoting someone’s outburst. What exactly are you trying to achieve with this?