Edit: Twitter recently discussed changing default avatars, in part because their default was often left in place as "fun and cute": https://blog.twitter.com/official/en_us/topics/product/2017/...
My main point was that default avatars can drive sign-ups motivated primarily just to change it.
I think it's interesting how much thought goes into default avatars, and that it can be used as a marketing tactic. Thanks for providing link to Twitter as well. Guess I'll have to think more about it in the future.
For a service where the early adopters are predominantly male (perhaps an invalid assumption, but a lazy tech stereotype), you have the default picture be the outline of a female to incentivise the male to "correct" the default by uploading their own picture (demonstrating they're a male, rather than female).
Interesting thought process if my interpretation is correct.
However, I see a privacy issue with sending all my user's real names to some 3rd party service (even if they claim there's no tracking or something similar).
I absolutely see your point, that's also why I open-sourced the code (see footer), but obviously I could be using different code or track it on the server (nginx or similar?). This is not the case, but I understand. Another option is to use the core generator (which is also open sourced) so that the generation happens locally :) But then again, CSS+HTML does not require any generation
Your API consumer sends some unique string (user-id, hashed user-id or hashed username or whatever they like) and you send back an unique avatar for that string. Moreover, you as the API provider offer different themes (e.g. tablecoth, space invaders, pixel-faces, etc.) which the consumer can again slightly customize (e.g. color, size, etc.) to have a unique style over all its avatars.
You current solution is elegant but at the same time just too easy to build oneself.
[1] There was a code golf competition on SE, maybe useful in this context: https://codegolf.stackexchange.com/questions/82290/generate-...
Also, I think theres a lot of those unique avatar generators out there (even one in the comments here), and I like them but they're not personal like your initials are. Also, for example, in accounting software (where I needed it internally) a monster or space invaders didn't fit with the audience.
I do however like your idea! Wouldn't be hard do create either. Who knows, that could be version 2
I guess generating them locally (or using CSS) would be the best option for anyone concerned with privacy
const initials = name.split(' ').map((n) => n.substr(0,1)).slice(0,2).join('')
<div style="border-radius: 9999px; background-color: navy">
<initials here>
</div>
प्रेरणा
'preraṇa'
प्रे॰ (< प + ् + र + े + ॰)
'pre'
If for some reason you needed to respect locale-specific initialism conventions for a lot of different locales, it might be worth introducing an abstraction for determining the initials of a name.
const initials = name.match(/\b\w/g).join('')But, yes, this does seem an odd thing to call out to a remote api for.
This would need some work to match the features of what was posted, but not much. https://jsfiddle.net/g6nrs5cq/
However due to caching, the request above will not work before tomorrow. You will have to input another name. I apologize.
I may clear the image cache later today just to fix any issues related to this.
Well.. my copy paste didn't work! :(
https://ui-avatars.com/api/?name=马云马云&length=4 Maybe this works?
Anyway, actually one could add &no-cache and it would ignore cache, I forgot that part
https://www.peppercarrot.com/en/article391/cat-avatar-genera...
the furry version of
There's also this one: http://avatars.adorable.io
Unlike most of these, the robots are pretty distinctive.
How does it handle middle names? i.e., does "John Arthur Smith" still return (JS)? What about reverse names, e.g. "Smith, John Arthur"? Is it smart enough to parse the comma and work out first/last initials from that?
Addendum: I also assume that you intend this service to be a 'once off' generation of a user avatar which can be stored locally? Do you rate limit so that people cannot simply dynamically generate avatars for ridiculous long lists of people on their web page?
You can add "&length=3" to the query string and it will render all three initials: https://ui-avatars.com/api/?name=John+Doe+Third&length=3
Actually there is no rate limiting, but seeing just how many visitors this HN post has gotten, I may have to add some sort of limiting.
I haven't really figured exactly what I'm going to do regarding limiting and servers. Currently I'm setting up servers in each region my provider supports, to fix latency issues, and spread the load
It handles last names and middle names as such:
- your example would be JS, however if you specify a desired length of 3, it would be: JAS.
I actually haven’t tested commas and such but I will definitively add this! Added it to my todo
I'm not even saying don't add the dependency - why should this project be an API instead of some CSS that I load, and then write:
<div class="ui-avatar-com ui-avatar-com-blue">OF</div>
One use case I see is for native mobile apps to generate the avatars as an initial profile image during the signup.
The reason its not CSS is because this api generates the initials for you.
CSS is way faster, so I’d recommend that
It's been a while since I've written any CSS, but I'm pretty sure you can select first letters? Useful for drop caps, for example.
For example, it takes first letter of first name, and 2 letters from last name if only two names supplied and desired length is 3.
However if 3 names are supplied, it uses a letter from each name.
It’s not magic, but doing it in CSS wouldn’t be easy, I imagine
invatar generates SVG and the way I use it is slightly different, I inline the SVG directly into HTML!
You could also just generate inline SVG in the html, something like this: https://jsfiddle.net/8tfjqjmy/
so i need to generate the avatar on the server side as a jpeg
Why is this at the top of HN and receiving such accolades? It's neither interesting nor technically challenging.
Am I just missing the satire here?
However for those that: 1) Don't want to 2) Don't know how to 3) Required rendering besides HTML views
This can be pretty useful :-) I do agree with you. I would actually consider adding SVG support to this as well.
Having said that, please pardon my ignorance, but:
What's the advantage over simply not using an avatar at all?
Honestly? Nothing really. Well, you don't have to think about the code part but besides that? Nothing. Actually it would be more performant to use CSS and HTML (or SVG?) to generate avatars. I have a core package (used to generate the initials), and if used that with html, it would be far better.
I use the service for our internal products, as gravatar fallbacks
I noticed the <Margin on the left is 16px, on the right is 17px. Similarly from the top is 21px and the bottom is 20px. It makes it look really off (to me).
Noticed that the combination of background and rounded results in a .png with a non-transparent corners.
If you really want to support it, you could maybe put some simple rules (might work in 90% of all cases) that you only grab the 1st consonant in each word. However even that won't be 100% correct because.. well, language rules basically.
https://xenforo.com/community/resources/dynamic-letters-avat...
That said, I've personally never liked using dynamic avatars on websites I'm involved with. They've always seemed a bit generic, regardless of whether they're gravatars, these letter avatars, gender symbols, etc.
Always felt it'd work better if my services simply took a random avatar from a large gallery of thematically appropriate pictures instead. Like say, on a gaming forum it'd give them a random video game character picture, and on a TV show forum one from the show in question.
But that's just my opinion on the matter. This seems like it'll work well for people who like that stuff.
