Dapatkan contoh source code project backend, frontend, atau fullstack untuk kamu amati, tiru, dan modifikasi sesuka hati. Klik untuk melihat detail!

Halo, selamat datang di Ruang Developer Blog. Kali ini kita tidak akang ngoding karena kita akan bahas salah satu tools yang dapat digunakan untuk membantu kegiatan ngoding kita, yaitu Image Placeholder.

Image placeholder sering digunakan saat pengembangan aplikasi untuk menampilkan gambar dummy sebelum memiliki gambar real. Contohnya menampilkan foto-foto produk, foto profil, dan lain-lain.

Ceritanya…

Beberapa waktu yang lalu, saya membuat sebuah aplikasi CLI menggunakan Node JS bernama Incaan. Ini adalah sebuah aplikasi yang berfungsi sebagai dummy image server untuk membuat placeholder gambar ketika membuat aplikasi web. Ketika dijalankan, aplikasi ini akan menyediakan endpoint berupa url yang menghasilkan gambar dengan warna, ukuran, dan text sesuai konfigurasi di urlnya. Ini adalah sebuah aplikasi open source. Bagi kamu yang tertarik ingin berkontribusi bisa langsung kunjungi repositorinya di link berikut:

https://github.com/kykurniawan/incaan

Singkat cerita, saya ingin membuat versi web untuk aplikasi CLI ini agar dapat digunakan secara online. Setelah aplikasi selesai dibuat saya putuskan untuk di deploy di bawah domain ruangdeveloper.com. Aplikasi ini dapat kamu akses melalui link berikut:

https://incaan.ruangdeveloper.com.

Menggunakan Incaan

Untuk menggunakan aplikasi ini kamu bisa kunjungi Incaan Image Placeholder, kemudian atur konfigurasi gambar yang kamu perlukan dan dapatkan URL-nya. Aplikasi ini dapat kamu gunakan untuk membuat gambar placeholder dan avatar.

Image Creator

Untuk membuat placeholder gambar, kamu bisa atur konfigurasi pada bagian image creator. Konfigurasi yang bisa kamu lakukan untuk placeholder gambar adalah:

  • Width - Lebar gambar
  • Height - Tinggi gambar
  • Font size - Ukuran font pada gambar
  • Text - Text yang ditampilkan pada gambar
  • Wrap - Menampilkan text dalam satu baris atau banyak baris.
  • Background - Warna latar gambar
  • Foreground - Warna text gambar

Image Creator

Avatar Creator

Untuk membuat placeholder avatar, kamu bisa atur konfigurasi pada bagian avatar creator. Konfigurasi yang bisa kamu lakukan untuk placeholder gambar adalah:

  • Size - Ukuran lebar dan tinggi avatar
  • Background - Warna latar avatar
  • Foreground - Warna karakter user

Avatar Creator

Akhirnya…

Aplikasi ini adalah aplikasi gratis, jadi kamu bisa gunakan dalam proses web development yang kamu lakukan.

Bagikan:

Ingin Berdiskusi?

Yuk bergabung di Grup Telegram Ruang Developer atau mulai diskusi melalui GitHub. See You!

Dapatkan contoh source code project backend, frontend, atau fullstack untuk kamu amati, tiru, dan modifikasi sesuka hati. Klik untuk melihat detail!
comments powered by Disqus

Berlangganan Gratis

Kamu akan menerima email update dari Ruang Developer

Beri Dukungan

Beri dukungan, dapatkan full source code project web untuk bahan referensi, tiru, dan modifikasi.
Lightbox