Show HN: Generate avatars from user initials

Re:Show HN: Generate avatars from user initials by dmitriid on Saturday October 07, 2017 @05:46AM (#15423080)

For web this is done with 1 line of Javascript and a div with rounded borders, really

   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>

Adjust width, height, font-size to your liking

[ Parent | on HN ]

Re:Show HN: Generate avatars from user initials by lgessler on Saturday October 07, 2017 @11:33AM (#15424142)

Note that the "take the first codepoint" approach doesn't work for all languages. Take Hindi for example. This is a name:

    प्रेरणा
    'preraṇa'

The convention for initials in Hindi is such that this would be the "initial":

    प्रे॰ (< प + ् + र + े + ॰)
    'pre'

which is the first four codepoints combined (because they are in some sense considered a single character) plus another codepoint!

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.

[ Parent | on HN ]

Re:Show HN: Generate avatars from user initials by dmitriid on Saturday October 07, 2017 @01:12PM (#15424619)

http://www.kalzumeus.com/2010/06/17/falsehoods-programmers-b...

[ Parent | on HN ]

Re:Show HN: Generate avatars from user initials by lasserafn on Saturday October 07, 2017 @11:55AM (#15424241)

Thanks for letting me know! I will stuff different languages over the coming months to better manage such things :) didn’t know that

[ Parent | on HN ]

Re:Show HN: Generate avatars from user initials by lasserafn on Saturday October 07, 2017 @05:50AM (#15423092)

I'd absolutely recommend anyone, that has the ability, to generate them using HTML and CSS, it's way faster. You could even use the core package the generate the initials (as it's a little more than just each letter of each name)

[ Parent | on HN ]

Re:Show HN: Generate avatars from user initials by padolsey on Saturday October 07, 2017 @07:06AM (#15423302)

Yep! Or even:

    const initials = name.match(/\b\w/g).join('')

[ Parent | on HN ]

Re:Show HN: Generate avatars from user initials by tyingq on Saturday October 07, 2017 @09:15AM (#15423646)

JavaScript's \b in a regex doesn't like unicode.

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/

[ Parent | on HN ]

Re:Show HN: Generate avatars from user initials by wavelen on Saturday October 07, 2017 @11:44AM (#15424189)

how about "border-radius: 50%"?

[ Parent | on HN ]

Re:Show HN: Generate avatars from user initials by dmitriid on Saturday October 07, 2017 @01:12PM (#15424621)

Yeah, it also works. 9999px stuck in my head for some reason.

[ Parent | on HN ]