Tag berwarna dengan Javascript

Topik yang diberi tag adalah fitur umum di blog. Label teks sederhana berfungsi dengan baik — namun saya ingin sedikit membumbuinya. Tentu saja dengan warna!

Mari kita beri warna berbeda pada setiap tag. Dan karena kita adalah pengembang, mari kita lakukan dengan kode!

Setiap kali pengguna Anda harus membaca sesuatu, itu hanya menimbulkan sedikit gesekan. Desainer UX mengetahui hal ini — mereka telah mengabaikan label teks dengan ikon selama bertahun-tahun. Ide saya adalah, jika seseorang mencari artikel MacOS yang saya tulis, mereka tidak perlu benar-benar membaca tag. Cukup gulir ke sekeliling untuk mencari gumpalan merah terang, yang mana jauh lebih mudah!

Ubah teks menjadi angka

Kami mengambil inspirasi dari teknik yang dikenal sebagai hashing.

Hashing adalah proses mengubah kunci tertentu atau serangkaian karakter menjadi nilai lain.

Dalam kasus kami, masukannya berupa string dan keluarannya harus berupa angka. Anda dapat mengambil implementasi fungsi hash yang sudah ada. Namun Anda juga dapat menulis sendiri untuk kontrol lebih besar. Yang saya gunakan tampilannya seperti ini:

function hash(text: string): number {
    if (!text) return 0

    let state = 13 // prime
    for (let index = 0; index < text.length; index++) {
        const charCode: number = text.charCodeAt(index);
        state += state * charCode;
        // Prevent overflow by %
        state %= (charCode * 3109) // prime
    }
    return state;
}

Tujuan dari proses ini adalah mendapatkan nomor yang tampak acak untuk masukan teks kita. Anda kemudian dapat menggunakan nilai tersebut untuk membuat warna dengan fungsi hsv atau rgb. Atau sebagai indeks untuk memilih warna dari rangkaian warna!

Tidak semua fungsi hash diciptakan sama

Hal ini seharusnya tidak mengherankan, namun beberapa pendekatan mungkin lebih baik untuk pemilihan warna dibandingkan yang lain.

Misalnya, implementasi JS yang sangat populer dari fungsi hash Java tidak bekerja dengan baik untuk memilih dari sejumlah kecil warna. Ada pola yang terlihat jelas - kolom cerah dan baris warna serupa - yang tidak bagus.

Fungsi hash saya sendiri (disebutkan di atas) tampaknya memberikan variasi warna yang lebih banyak. Hal ini menunjukkan bahwa membuat implementasi Anda sendiri mungkin bermanfaat! Anda dapat mengutak-atiknya dan menyesuaikannya sesuai keinginan Anda :)

Warna yang dipilih sendiri vs. Warna yang dihasilkan

Kita berada di persimpangan jalan di sini. Anda bisa melakukan prosedur penuh dan menghasilkan warna Anda juga — atau Anda cukup memilih dari kumpulan warna tertentu.

Menemukan warna-warna yang menarik bukanlah tugas yang mudah. Apa yang terlihat bagus di mata tidak mudah dijelaskan dengan persamaan. Orang-orang membuat palet baru setiap hari, dan perpustakaan CSS yang besar juga membuat warnanya dengan tangan!

Kami memilih semua warna default Tailwind dengan tangan, menyeimbangkannya dengan cermat, dan mengujinya dalam desain nyata untuk memastikan kami puas dengan warna tersebut.

ADA cara untuk menghasilkan warna

Anda hanya harus pintar dalam hal ini. Sesuaikan ruang warna sesuai keinginan Anda dan persempit pilihan warna sebenarnya. Memilih warna apa pun tidak akan berhasil; sebagian besar dari semua kemungkinan warna mendekati hitam. Kami tidak tertarik dengan sampah berwarna lumpur itu.

Yang sebenarnya Anda inginkan adalah warna-warna cerah dan cerah. Anda dapat memilih warna cerah dengan menggunakan model warna HSV. Batasi saturasi dan nilai ke angka yang tinggi dan cukup manipulasi elemen hue.

Di sini kita menghadapi masalah lain. Sebagian besar ruang warna adalah biru atau hijau! Itu berarti sebagian besar warna prosedural Anda akan seperti itu — kebiruan dan kehijauan. Peluang Anda untuk mendapatkan warna kuning atau oranye yang bagus tidak besar 🥲

Larutan? Gunakan pendekatan palet

Itu akan menjadi saran saya. Kompromi terkadang merupakan pilihan terbaik. Anda mengontrol warna dan dapat memastikan jumlah warna kuning sama dengan jumlah warna biru!

Saya mendengar Anda: “Tidak ingin memilih warna adalah alasan utama kami berada di sini…”, dan Anda benar. Tentu saja, kami akan menggunakan palet yang sudah jadi. Lihat saja sekeliling, pilih kerangka CSS dengan skema warna yang bagus dan curilah!!

Saya sendiri mencuri warna saya dari Tailwind — semua varian terang dari 400 hingga sekitar 700 kegelapan. Mereka disimpan dengan aman dalam sebuah array dan saya hanya mengambilnya kapan pun saya perlu!

Membuat tag sebenarnya

Setelah Anda memilih warna, Anda langsung pulang. Tetapkan saja sebagai background-color tag Anda dalam gaya CSS atau sebaris.

Jika Anda menginginkan teks putih (seperti saya), saya juga menyarankan untuk memberi sedikit bayangan pada teks tag Anda. Itu membuatnya lebih mudah dibaca dan lebih menonjol pada warna-warna cerah! Seluruh pengaturan tag saya terlihat seperti ini:

function tagColor(text) {
  return palette[hash(text) % palette.length];
}
// ...
<span 
  style={{ background: tagColor(text), textShadow: "1px 1px 0px black" }}
>
  {text}
</span>

Sekarang ketika Anda menambahkan tag ke artikel terbaru Anda — warnanya sendiri bagus!

Jika Anda mempelajari sesuatu di artikel ini, tepuk tangan 👏 atau ikuti akan sangat kami hargai! Terima kasih sudah membaca! ❤️

Awalnya diterbitkan di https://www.vojtechstruhar.com.