Dante Lex
2 min readFeb 12, 2016

So I Ended Up Creating It.

What it looks like for now

I have been seeing “Avatar Initials” around for sometime now and I saw some plugins that were not really it for me. They were in bits and pieces, always tied to something and those people who really just wanted to try it or who were new to it (non-technical people) had a hard time using it.

So I decided to write one myself since it was a simple and great idea. I made it fun, useful and effortless to even just about everyone … YES, even YOU. Easy to use is the name, just your initials is the way. Never mind that.

I started off by writing out all the possible scenarios I had in mind and could think of. A user will want to input his or her name and see the result, that’s where the text-box comes from so you don’t necessarily need to know what’s under the hood before you see it work. Here’s how it works: you enter your first name, last name or both … e.g. “Dante” and “Dante Lex”. Now all you have to do is click submit and you will see your initials on the placeholder, like “Hello, it’s all about you!!”. There are validations, error messages to guide you (not to worry). The more names you add, the more initials you create and you’ll see your last 5 initials appear at the sidebar as you continue to play around with it … Spoiler — it’s not a game … yet. At this point now, the technical guys will like to know how it runs. I would like to tell you that it supports most of the possible scenarios; you can use it in your project. It’s all fun. So you don’t need your image up or an image of a default avatar guys, your initials do just fine.

Well I’m not much of a writer but that’s my two cents. It’s hosted on github at https://github.com/dantelex/Xtre-Components. Download, enjoy, and improve. Oh and it’s nicely commented. Ask any questions, I would respond and fix issues. Your suggestions are welcome.

you can try it out here http://codepen.io/dantelex/full/LGqyaz