Just by not asking users to upload their profile image while sign up or give an option to skip profile image customization, you'll gain some benefit like:

• Better UX
• Lower storage usage
• Faster load time in the frontend

But it's also will sacrifice the UI (User Interface) if we didn't do it correctly. Using Gravatar might be a good option, but for me personally, it's way more annoying that I had the same face everywhere, and sometimes I don't wanna use my real face at all in some website or app.

I didn't say Gravatar is bad, but just imagine if I had LinkedIn and Myanimelist account and both are using Gravatar, it will be awkward in so many cases.

Alternatively using ?d=identicon in Gravatar is way better than using real face, but it's not the best looking things to be honest

Profile picture can serve different purpose, like in Discord I want my profile picture to be funny and cheerful because it's the place where I do gaming and go along with my friends, and if it's LinkedIn I want my profile to look professional as possible without losing my character.

I love how some Job Finder website put a little tie in their users default profile image so it could give an impression of professionality as what the users supposed to have.

But the best approach I like is Telegram, they put user's first name and last name letter, and then combined, give a unique color, and you got a unique profile picture. By given unique color it's also applied at the name in the bubble chat too.

Unlike Telegram, Twitch only use unique color to identify each user instead profile picture, and it's really good both for user experience and performance so people will quickly identified based on the color. it's not the best looking things but it's really good for performance because Twitch chat can go really crazy especially for big stream with hundred of viewers.

So, I think using unique color is a best approach to identify each user.

Then how do we approach that? The most obvious way is to generate random color and save it along with the user data. But, it will cost you a couple byte in your database that actually can be reduced.

There's a library called seed-to-color that I like to use in the scenario, it's a library I created to give random color base on the seed given in the parameter. Let's try to built one with it.

First add seed-to-color to your project

yarn add seed-to-color

or

npm i seed-to-color

Then import it in the project

import { randomLightColor, randomDarkColor, randomColor } from 'seed-to-color'

there's 3 option as you can see, you can use it depends on the chat bubble color, like if the chat bubble is dark use randomLightColor.

Ok, then let's imagine this is the chat

const chats: Chat[] = [
  {
    _id: 123123,
    firstName: "Bambang",
    lastName: null,
    message: "Good morning guys!",
  },
  {
    _id: 333333,
    firstName: "Reza",
    lastName: "Aditya",
    message: "Morning!",
  },
  {
    _id: 123123,
    firstName: "Bambang",
    lastName: null,
    message: "Good morning Reza!",
  },
  {
    _id: 777777,
    firstName: "Andy",
    lastName: null,
    message: "gm!",
  },
  {
    _id: 887667,
    firstName: "Mery",
    lastName: null,
    message: "Ey good mroningggg!",
  },
  {
    _id: 887667,
    firstName: "Mery",
    lastName: null,
    message: "Morning*",
  },
  {
    _id: 888888,
    firstName: "Patrick",
    lastName: "Star",
    message: "morning guys!",
  },
  {
    _id: 123123,
    firstName: "Bambang",
    lastName: null,
    message: "Morning All!",
  },
]

By using the _id we already had the seed to get a unique identifier color, but what I like to do is combine both name and id to get more unique result.

here's the example:

      <div className="like twitch">
        {chats &&
          chats.map((value) => {
            const { _id, firstName, lastName, message } = value
            const fullName = `${firstName} ${lastName || ""}`.trim()

            // because of the library return only hex color without the '#'
            // we have to add them manually
            // and I'm using randomLightColor for dark background
            const color = "#" + randomLightColor(fullName + _id)
            return (
              <div key={nanoid()} className="chat">
                <span style={{ color }}>{fullName}</span>: {message}
              </div>
            )
          })}
      </div>

and it will look like this

Pretty simple right?

Now lets do it like telegram. First, I would like to create a functional component for both Profile and bubble

// This component for Profile Image will take the initial name and the color
const IconName = ({ color, initial }: { color: string; initial: string }) => {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        borderRadius: "100%",
        width: "40px",
        height: "40px",
        backgroundColor: color,
        color: '#fff',
        fontWeight: 'bold'
      }}
    >
      {initial}
    </div>
  )
}

and now the bubble

const BubbleMessage = ({
  color,
  fullName,
  message,
}: {
  color: string
  fullName: string
  message: string
}) => {
  return (
    <div className="bubble">
      <div style={{ color }}>{fullName}</div>
      <div className="message">{message}</div>
    </div>
  )
}

And then we can use the component like this:

      <div className="like telegram">
        {chats &&
          chats.map((value) => {
            const { _id, firstName, lastName, message } = value
            const fullName = `${firstName} ${lastName || ""}`.trim()

            const initialName = firstName[0] + (lastName ? lastName[0] : "")

            const baseColor = "#" + randomLightColor(_id)
            return (
              <div key={nanoid()} className="chat">
                <IconName color={baseColor} initial={initialName} />
                <BubbleMessage
                  color={baseColor}
                  fullName={fullName}
                  message={message}
                />
              </div>
            )
          })}
      </div>

Add some css

.chat {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.bubble {
  margin-left: 12px;
  background-color: #103b5c;
  padding: 10px 15px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;

  position: relative;
}

.message {
  margin-top: 5px;
}
.bubble::before {
  content: "";
  position: absolute;

  height: 10px;
  width: 20px;

  bottom: 0;
  left: -20px;

  border-radius: 0 0 10px 0;
  -moz-border-radius: 0 0 10px 0;
  -webkit-border-radius: 0 0 10px 0;

  -webkit-box-shadow: 10px 0 0 0 #103b5c;
  box-shadow: 10px 0 0 0 #103b5c;
}

and you got this look:

Pretty similar right?

You can play along with this using codesandbox

Or fork from the source code on github

Hopefully what I'm writing here is useful for you, subs to my mailing list if you want get notified if I post stuff like this again, Thanks!

Kesalahan

Kesalahan fatal dari kebanyakan Programmer yang juga saya alami adalah mulai mengetik tanpa menggambarkan apa yang dia ingin capai, hanya memikirkan rancangan yang kemungkinan besar akan terlupakan detailnya dalam 1-2 jam kedepan akhirnya bergelut dengan berbagai macam ketidak-konsistensi-an dalam programnya.

Hindari mengetik program tanpa menjabarkan rancangan awal, buatlah sebuah flowchart apa yang ingin dicapai dan bagaimana cara mencapainya, meskipun hanya sebuah program sederhana yang bahkan hanya untuk mengisi waktu luang. Kebiasaan untuk menggambarkan sebuah flowchart sangat bagus agar terbiasa mempunyai rancangan yang konsisten kedepannya.

Flowchart

Untuk membuat sebuah Flowchart pun tidak lah rumit, cukup dengan dasar di bawah ini sudah men-cover ±70% (berdasarkan pengalaman pribadi) dari Flowchart yang akan kalian buat di kemudian hari

Alat

Ada 2 macam alat yang biasa saya pakai:

1. Buku kecil dan Pensil

Buku kecil dan Pensil yang paling sering saya pakai untuk mengurangi screen time saya, pensil pun wajib yang ada penghapusnya 😂, apalagi saya juga sering touring di hari sabtu dan minggu, sangat cocok saat nongkrong tiba-tiba muncul ide baru langsung saya tulis. Juga berlaku saat ngopi-ngopi bareng teman. Baru setelah udah di depan layar dibikin ulang pakai tools ke dua.

2. Flowchart dari https://app.diagrams.net/

Aplikasi https://app.diagrams.net merupakan aplikasi online yang dapat membantu kita membuat flowchart dengan mudah, didalam aplikasinya sudah disediakan banyak template dan icon yang sangat sesuai dengan kebutuhan kita. Beberapa keunggulan yang saya suka:

1. Dark Theme (WAJIB)
2. Tidak Perlu login
3. Aplikasi web yang sangat ringan

Kesimpulan dan saran

Menggambarkan rancangan program yang akan kita buat sangat membantu meningkatkan konsistensi dan mempercepat waktu produksi, luangkan waktu setidaknya 15-30 menit setelah Flowchart anda selesai untuk memikirkan kembali apakah semua sudah sesuai atau belum, dan kerjakan tiap bagian sesuai arah panah. Misal contoh di atas, berarti kerjakan API terlebih dahulu, dan jika sudah selesai bisa dicoba memberikan warna sesuai selera, seperti contoh di atas (hijau: selesai, merah: belum).

Semoga dengan artikel ini bisa membantu anda yang baru memulai perjalanan sebagai Developer atau yang masih sering mengetik program tanpa membuat Flowchart bisa mulai meningkatkan efesiensi dan konsistensi dalam mengetik program. Terima kasih dan Selamat menggambar! 🎉✍

0wx.dev