Naskah, Desain, dan Coding

Karena terbiasa bekerja dalam tim (dahulu ........ kali...), jadi antara naskah, desain, dan coding dibuat terpisah. Harapannya sih ketika di breakdown/dibagikan bisa menjadi 3 orang yang mengerjakan saling melengkapi..

Naskah, adalah ide awal, saat ini dicatat di kepala saja.

Desain, adalah bentuk tampilan yang mungkin dari beberapa kemungkinan. Kali ini saya buatnya menggunakan Coreldraw.

Coding, adalah apa yang dimaksud di dalam Naskah, seperti apa nantinya, dengan menggunakan Desain yang ada. Kalau coding, karena html dan js, saya menggunakan notepad++.

Nah ketiga hal tersebut saling melengkapi.

Kalau gak ada naskah, maka gak ada tujuan.

Kalau gak ada desain, codingnya berat dan sulit.

Kalau gak ada coding, maka gak bisa sesuai tujuan.

kurlebmonmap

Mengubah file png ke base64

Sebelumnya saya menggunakan converter online di https://www.base64-image.de/

Namun saya berpikir, bagaimana jika tidak bisa online, sedangkan kebutuhan convert png ke base64 mendesak?

Akhirnya saya mencoba membuat sendiri menggunakan bahasa javascript dan html.

Jadi deh. Dan saya menggunakannya berkali-kali, sehingga gak ketergantungan online.

Walaupun hanya bisa satu file tiap convert, namun lebih baik ada

dan ternyata di https://www.base64-image.de/ sekarang kok gak bisa (saya coba 10 april 2026).

Nah bagi yang mau menggunakan secara gratis, bisa di blog ini, yukbelajarprogramming.blogspot.com dengan link convertenya https://yukbelajarprogramming.blogspot.com/2026/04/ubah-png-ke-base64.html

cara pertama : insert image, otomatis di convert, trus download hasilnya (file html)

cara kedua : insert image, otomatis di convert, trus tekan ctrl+shift+i, copy paste hasil di kanan layar

demikian

Pengenalan Koding usia dini

Apa mungkin bisa memperkenalkan koding kepada yang berusia masih kecil? Itu pertanyaan yang muncul di kepala saya ketika berseliweran kelas-kelas koding untuk anak di beranda facebook. 

Setelah di cari, ternyata malah diperkenalkan dari usia 3-6 tahun.

Gambarnya seperti apa? Ku cari, diberikan 5 angka dan pasangan warnanya, ada gambar bunga, dimana bagian-bagiannya diberi nomor, dan tugasnya adalah mewarnai sesuai pasangan angka-warna.

Wah, gitu ya.

Akhirnya ku coba buat yang seperti itu. Tapi soal dan kunci jawabannya saja. Untuk mewarnainya perlu di simpan ke pdf dan di print/cetak di kertas dulu. 

Dan sudah jadi 4 tema. Link nya : galihw.github.io/MewarnaiGambar

Silahkan dicoba ya

Ubah png ke base64

Silahkan Pilih 1 File png:


Silahkan Klik untuk dapatkan Hasil Edit (atau Ctrl+Shift+i --> copy):

...

Filter Warna untuk javascript

Gunakan link ini untuk mendapatkan filter warna sesuai keinginan:

https://angel-rs.github.io/css-color-filter-generator/

misal

hijau

filter: brightness(0) saturate(100%) invert(76%) sepia(68%) saturate(7285%) hue-rotate(96deg) brightness(128%) contrast(123%);

biru

filter: brightness(0) saturate(100%) invert(8%) sepia(99%) saturate(7166%) hue-rotate(247deg) brightness(104%) contrast(144%);

merah

filter: brightness(0) saturate(100%) invert(19%) sepia(95%) saturate(7202%) hue-rotate(358deg) brightness(109%) contrast(112%);

bentuk di atas formatnya untuk css

di javascript tinggal hilangkan kata filter

var biru = "brightness(0) saturate(100%) invert(8%) sepia(99%) saturate(7166%) hue-rotate(247deg)"

masukkan di ctx

ctx.filter = biru;

Insert gambar di js - base64

Pada menggambar img di html dengan javascript, daripada pakai file.png, saya lebih cocok pakai image dari base64.

Alasannya, img tersebut include dalam file. Gak ambil dari luar file.

Sehingga, memudahkan penumpukan gambar di canvas yang sama.

Dan selanjutnya, hasilnya bisa di save ke png dengan toDataURL, dan akhirnya bisa dipanggil ke canvas baru agar bisa di cetak menggunakan print()

Simbol Unicode Matematika

 mins = "\u{2212}"

∪ symU = "\u{222A}"

∩ symN = "\u{2229}"

element supE = "\u{2208}";

const p0 = "\u{2070}"

const p1 = "\u{00B9}"

const p2 = "\u{00B2}"

const p3 = "\u{00B3}"

const p4 = "\u{2074}"

const p5 = "\u{2075}"

const p6 = "\u{2076}"

const p7 = "\u{2077}"

const p8 = "\u{2078}"

const p9 = "\u{2079}"

'♣' sym1 = "\u{2663}"

Panah Tunggal: → \u{2192}  

phi \u{03C0}

√ \u{221A}

Generator Soal Matematika

Jeng jeng.

Ini dia hasilnya 

https://galihw.github.io/DatabaseSoal/MainGenerator.html

Waktu Berpikir

Ketika coding, ketemu hal yang belum terpecahkan dan akhirnya buntu, maka tinggalkanlah dulu.

Kenapa?

Karena berarti butuh waktu untuk berpikir.

Misalkan,

Ketika saya membuat soal dan kunci jawaban, awalnya soal jawaban soal jawaban. Lalu ternyata butuh soal soal soal dulu baru jawaban di akhir. Dan... Jawabnnya ketika di print harus di lebar lain.

Solusinya gak ketemu ketika tetap di depan laptop.

Nah ketika tidur-tiduran, muncullah ide. Yaitu buat aja jadi canvas yang tingginya setinggi ukuran kertasnya, bisa dicoba print preview. Dan berhasil!!!

Mengenai itu juga, jadi ingat archimedes. Beliau menemukan solusi tentang menimbang emas ketika berendam di air. Eureka ...

Jadi, ada masalah? Tinggalkan sejenak untuk memberi diri waktu berpikir.

Print di html yang ada javascript nya

Untuk sementara masih pakai print() untuk memanggil fungsi print.

Paling struktur teks yang di print menggunakan create div dan img, dan diisi dengan innerHTMLuntuk div dan toDataURL untuk canvas.

Untuk masukkan ke body masih pakai yang standar. Yaitu document.body.appendChild(element), dimana elemennya div dan img.

Untuk menunggu load image di canvas, saya gunakan step by step dengan tombol aja.

Misal

1. Pilih data, muncul tombol ambil.

2. Tulis di div dan canvas, muncul tombol preview.

3. Preview sebelum print, muncul tombol cetak.

4. Tinggal pilih, print to pdf atau ke printer.

Dan.... Ternyata cukup rumit walau sekedar print saja.

Browser Android untuk file besar (banyak yang diloading)

Saya mempunyai file html dan pendukungnya ada 11 file js. Kalau di lihat besar file hanya 751 kb. Namun ternyata ketika diupload di github dan dijalankan ternyata tidak bisa berjalan dengan baik. Oiya, browser yang saya gunakan chrome, namun mungkin versi lama.

Nah, setelah saya cari, browser yang mumpuni untuk menjalankan file besar di android adalah firefox. Akhirnya saya download firefox.

Setelah itu saya jalankan link di github tersebut. Berhasil! Memang lambat, namun berhasil dijalankan hingga print to pdf.

Saya cari di google dibantu ai, ini dia hasil pencarian google+ai :