mobile
Catatan teknis seputar web development, DevOps, dan integrasi AI.
6 artikel
- 18.18frontend
Komposer Chat Desktop Ramping dengan Varian sm: Tailwind
Menyusutkan tinggi field dan tombol komposer chat desktop dengan empat kelas responsif Tailwind, tanpa komponen terpisah dan tanpa JavaScript.
TL;DR: Okay, the user wants a 3-sentence summary in informal-professional Indonesian, exactly 3 sentences, max 60 words total. No markdown, bullets, or repeating the title. Just the summary.
#tailwind#css#ux - 14.15frontend
Chat Mobile Fullscreen di Bawah Header Fixed 66px
Wrapper mobile fullscreen di bawah header fixed 66px pakai mt-66px plus calc 100dvh-66px, transcript tanpa cap 45vh, dan header ringkas ala aplikasi pesan.
#css#tailwind#frontend - 12.42frontend
Komponen Chat Terpisah di Mobile, Logika Jawaban Tetap Satu
Chat mobile butuh struktur sendiri ala aplikasi pesan, tetapi logika jawaban tetap satu sumber lewat TurnBody yang diekspor ulang.
TL;DR: Layar sempit butuh struktur beda, bukan versi dipampatkan, jadi ChatMobileThread dibuat khusus di bawah breakpoint lg dengan pola aplikasi pesan: header sticky, gelembung dua sisi, dan composer di bawah. Desktop tiga kolom tak tersentuh. Logika jawaban tetap satu sumber karena TurnBody dipakai ulang lewat named export; 271 barisnya murni tata letak.
#react#frontend#ux - 12.34frontend
Tombol 44px, Font 16px: Angka Standar di Panel Chat Mobile
Pass responsif panel chat AI: tombol kirim 44px sesuai WCAG, font input 16px anti zoom iOS, dan transcript 65vh dengan overscroll-contain.
TL;DR: Panel chat yang rapi di desktop ternyata berantakan di mobile: tombol susah ditekan, textarea memicu zoom iOS, dan scroll bocor ke halaman. Perbaikannya bertumpu pada tiga angka standar: tombol 44px sesuai WCAG 2.5.5, font input 16px agar Safari tak memperbesar viewport, dan transcript dibatasi 65vh dengan overscroll-contain. Hasilnya, sentuhan lebih presisi dan gulir berhenti di tempatnya.
#css#tailwind#react - 11.26frontend
Carousel Blog Saya Salah Pola, Daftar Vertikal Menang
Lima artikel tersembunyi di dalam carousel harus di geser satu per satu. Untuk navigasi blog, daftar vertikal terbukti lebih jujur.
TL;DR: Carousel di halaman Blog bikin artikel sulit ditemukan, padahal pola sama berhasil di halaman layanan. Bedanya ada di jenis konten: carousel cocok untuk showcase visual terbatas, tapi daftar artikel butuh navigasi yang bisa dipindai cepat. Solusinya simpel: daftar vertikal lima artikel terbaru, dua puluh baris kode dihapus, masalah selesai.
#ux#mobile#frontend - 10.59frontend
Carousel Mobile Pakai CSS Scroll Snap, Tanpa JavaScript
Lima kartu layanan vertikal di HP kepanjangan. Carousel manual dengan CSS scroll snap jadi jalan tengahnya, tanpa satu baris JavaScript.
TL;DR: Bagian Projects and Services dengan lima kartu vertikal kepanjangan di layar HP, bikin pengunjung berhenti di kartu pertama. Penulis sempat anti-carousel karena riset soal auto-rotate, tapi sadar masalah sebenarnya cuma panjang section di mobile. Solusinya carousel manual pakai CSS scroll snap tanpa JavaScript, dengan kartu berikutnya mengintip di tepi layar sebagai sinyal ada lanjutan.
#css#ux#mobile