Project One: Default Avatar

I love advent calendars and I love coding, but I personally prefer to build something that I could use in real life as opposed to fun, but not so relevant coding puzzles.

And so I want to share with you 25 small project ideas that would boost your knowledge and confidence as well as would serve you well in many projects ahead.

Please don't hesitate to ask any questions you might have in the comments below and I'll try my best to help you out if you get stuck.

The projects require only basic knowledge of JavaScript/HTML and can be implemented in any framework you prefer (or none at all).

And if you're a seasoned web developer or want an extra challenge - I got you covered - every project has a "hardmode" in the end.

And now, without further ado, let's head on to the hands on project of the day.

Default Avatar: Requirements & Recipe

As a user I want to be able to see a unique default avatar for each user, so that I can easily differentiate between users even if they haven't uploaded a custom image.

You've probably seen those kind of avatars in a variety of services:

And by implementing one you can not only enrich your future projects with this feature, but also get some experience working with strings, colours and ensuring accessibility.

Requirements

1. Avatar should have at most 3 letters
2. All letters should fit within the avatar with ~10% space left
3. Different usernames should result in avatars unique in color/text combination
4. Usernames should be split based on logical delimiters (e.g. spaces,uppercase letters, dots, dashes, etc)
5. Idempotence: Same username always result in the same avatar
6. Accessibility: Avatar should have sufficient contrast between foreground text and background colour

Recipe

1. Build a static avatar prototype with just HTML. Use your name and your favourite colour.
2. Check that your code fits accessibility requirements, e.g. with the help of Lighthouse
3. Write a function that turns user name into their initials.
4. Write a function that would produce a background colour based on a provided user name.
5. Write a function that would choose sufficiently contrast foreground colour based on the provided background.
6. Mix in all together and serve with your favourite code flavours.

Hints

One common way to represent colour in web is through a hex rgb value, e.g. #ffffff, therefore one could hash string containing username into a 6-digit hex value.

There are plenty of mind boggling hashing operations, but if you're looking for something simple, try out rolling polynomial hash.

In essence, every letter is assigned to a number starting from 1 and then multiply every letter's "value" by a chosen number (usually a prime number, e.g. 31 for lowercase latin letters) in the power of the letter's position in a string. Then results of these multiplications are summed up and "cropped" to a maximum acceptable hash value by calculating remainder of division by max value (mod or % operation).

Hard mode: Identicons

If you've been using GitHub, you've seen their default avatars:

They are 5 x 5 pixel pictures mirrored vertically for symmetry, therefore each identicon can be described as a 15-bit number.

I chose making those in SVG format, but you could use any image format you're comfortable with.

I suggest starting with rendering static identicons from provided hash and only then adding a hashing function and don't forget to have fun with it!

Share your creations and feedback and see you tomorrow!

Liked the idea a lot and would love to have it all year long?