DEV Community 👩‍💻👨‍💻

mixbo
mixbo

Posted on

Use colorful avatar improve user experience

Alt Text

I develop Vue component to show user avatar, below screenshoot show component is.

Alt Text

As you can see has two circle avatar one show M alphabet and other shown image.

// show first alphabet from mixbo 
<Avatar name="mixbo"/> 

// show image with src url
<Avatar src="https://dev-to-uploads.s3.amazonaws.com/i/gwajd7xyh139ppnw49ra.jpg" />
Enter fullscreen mode Exit fullscreen mode

I think it helpful when show user avatar but user not upload avatar, it's good experience isn't it?

Also you can use default avatar image when user not upload avatar.

The different alphabet avatar to default avatar is more personal and colorful.

Show you how to calculate the first alphabet with different background color

const colors = [
  '#414656',
  '#F6C100',
  '#BD66CC',
  '#FF4B4B',
  '#00B8D4',
  '#2F70FF',
  '#3BB46E',
  '#00838f',
  '#0091EA',
  '#FF6D00',
  '#9a6157',
  '#333333',
]
avatarAlphabetBGColor = (name) => {
  const idx = name.charCodeAt(0) % colors.length
  return colors[idx]
}
avatarAlphabetBGColor("mixbo") // "#F6C100"
Enter fullscreen mode Exit fullscreen mode

avatarAlphabetBGColor caculate the first name aplhabet and get the background color from pre-define const colors. so same aplhabet will return same background color.

avatarAlphabetBGColor("mixbo") // "#F6C100"
avatarAlphabetBGColor("mile") // "#F6C100"
avatarAlphabetBGColor("ihavecoke") // "#FF6D00"
Enter fullscreen mode Exit fullscreen mode

That all the magical hope it can help you :)

Oldest comments (0)

Classic DEV Post from 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!