Sekadar Fitur Web yang Biasa

• Seiring bertambahnya platform media sosial baru beserta klien, aplikasi, dan porting web berbasis React Native, makin banyak kasus situs web kehilangan perilaku web dasar yang diharapkan pengguna
• Tekanan untuk rilis cepat, ketiadaan insinyur UI, desain mengutamakan sentuhan untuk mobile, serta implementasi yang mengganti perilaku bawaan browser dengan JavaScript disebut sebagai penyebab utama
• Fitur bawaan browser seperti menyalin teks, klik kanan tautan dan ctrl + click, zoom browser, tata letak responsif, :hover dan :focus, pembaruan URL·riwayat, scrollbar, dan ctrl + f harus tetap berfungsi sebagaimana mestinya
• Implementasi seperti menghapus pointer-events pada kartu yang bisa diklik atau menumpuk layer, serta membuat navigasi dengan div dan on-click alih-alih anchor, merusak pengalaman tautan normal
• Meski banyak bagiannya tumpang tindih dengan pelanggaran aksesibilitas, aplikasi web seharusnya mempertahankan fitur web biasa yang diharapkan pengguna alih-alih tampak seperti aplikasi mobile

---

Perilaku Dasar yang Hilang dari Situs Web

• Makin sering ada proyek web yang menghalangi fitur web biasa yang diharapkan pengguna
• Seiring bertambahnya platform media sosial baru, makin banyak klien dan aplikasi dibuat, dan juga banyak upaya berbagi kode lintas platform seperti React Native
• Upaya semacam ini sendiri bersifat positif, tetapi sering kali bukan hanya kebutuhan aksesibilitas dasar seperti teks alt pada gambar yang terlewat, melainkan juga cara interaksi umum di web
• Penyebabnya bisa dilihat sebagai berikut
  • Tekanan untuk merilis secepat mungkin sampai pada tingkat yang bisa diuji
  • Situasi ketika proyek tidak memiliki insinyur UI
  • Desain yang memprioritaskan input sentuhan mobile dan mengabaikan metode input atau perangkat lain
  • Implementasi yang mem-bypass atau menggantikan perilaku bawaan browser dengan JavaScript

Fitur Web Biasa yang Harus Dipertahankan

• Menyalin teks harus dimungkinkan
  • Pada komponen kartu yang bisa diklik, menghapus pointer-events atau menumpuk layer target klik bisa menghalangi pemilihan dan penyalinan teks
• Elemen yang berpindah seperti tautan harus tetap menyediakan fungsi tautan sebagaimana mestinya
  • Harus bisa membuka menu konteks dengan klik kanan untuk menyalin teks atau alamat tautan
  • Pintasan tautan umum seperti membuka di tab baru lewat ctrl + click di Windows harus berfungsi
  • Gunakan elemen anchor alih-alih memindahkan halaman dengan menempelkan on-click pada div
• Saat browser di-zoom, tata letak tidak boleh rusak, dan pengguna harus bisa memperbesar tampilan untuk membaca
• Web responsif seharusnya tidak langsung jatuh ke tata letak mobile sederhana begitu lebarnya di bawah 1200px, melainkan tetap memanfaatkan ruang dengan tepat pada viewport yang sempit
  • Mastodon dan Twitter bisa dilihat sebagai contoh yang menjaga UI tetap familier dan umumnya memanfaatkan ruang dengan baik saat lebar browser dipersempit
• Aplikasi web harus menyediakan status interaksi seperti :hover, :focus, dan :active secara normal
  • Pada kasus aplikasi React Native yang di-porting ke web, kadang tidak ada gaya :hover atau :focus, atau muncul gaya :active yang aneh sehingga tampak seperti nonaktif
• Jika setelah diklik UI berubah total seperti halaman baru, maka riwayat browser dan URL juga harus ikut berubah
  • Jika status UI yang tampak seperti halaman mandiri tidak bisa ditautkan, dan status itu hilang setelah berpindah, kegunaan akan menurun
• Scrollbar tidak boleh disembunyikan
  • Pengguna mungkin ingin mengklik dan menyeret scrollbar
• Pintasan browser umum tidak boleh dibajak menjadi fungsi internal aplikasi
  • Jika ctrl + f dibuat membuka kotak pencarian khusus di dalam aplikasi, pencarian halaman bisa jadi tidak berfungsi seperti biasanya
• Banyak bagian di sini memang tumpang tindih dengan hal-hal yang bisa dianggap sebagai pelanggaran aksesibilitas, tetapi fokusnya adalah memastikan aplikasi web tidak merusak ekspektasi dasar pengguna terhadap browser
• Contoh yang terlewat bisa dilanjutkan pembahasannya di Mastodon

[plastic041]

Sepertinya isi artikelnya salah.

[xguru]

Wah, menarik ya. Sepertinya proses crawling untuk posting blog tersebut sendiri agak bermasalah.
Sepertinya kita perlu meninjau bagian crawler-nya.

[GN⁺]

Opini Hacker News

• Jika seseorang mempelajari web lewat React terlebih dahulu lalu baru belajar HTML belakangan, bisa terjadi mereka jadi tidak memperhatikan perilaku bawaan tautan
  Saat saya bergabung dengan tim, semua tautan berupa tombol, elemen sembarang, atau ditangani dengan onClick; tidak ada yang mengeluh, tetapi Ctrl+klik jadi tidak berguna dan menu klik kanan juga tidak menampilkan opsi yang diharapkan
  Menurut saya, soal tautan tidak bisa ditawar

  • Saya benar-benar tidak suka penyalahgunaan JS seperti ini, dan ini semakin banyak merusak hal-hal yang seharusnya dilakukan dengan cara yang benar
    Platform dokumentasi bernama archbee yang didanai YC pun tidak bisa membuka hasil pencarian di tab baru, sehingga harus membuka satu di tab saat ini, atau kembali, mencari lagi, lalu membuka hasil berikutnya
    Contohnya bisa dilihat di sini: https://docs.sparklayer.io/
  • Versi web Reddit yang baru membuat semua tautan sebagai tombol, sehingga tidak bisa dibuka di tab baru
    Rasanya benar-benar aneh dan menjengkelkan bahwa layanan internet sebesar ini punya masalah aksesibilitas yang begitu jelas
  • Kira-kira separuh alasan saya memakai nitter alih-alih Twitter adalah ini
    Selain tidak perlu akun, utas tweet bisa diklik kanan dan dibuka di tab baru
    Karena sifat percakapan di Twitter, saya ingin membuka beberapa utas di tab baru sambil tetap mempertahankan posisi halaman semula, tetapi UI Twitter yang sebenarnya membuat ini sangat sulit
  • Masalah tautan adalah bukit yang kapan pun layak dipertahankan sampai akhir
    Tidak banyak hal yang lebih mengganggu daripada ini; kalau harus memilih, mungkin hanya merusak riwayat kunjungan browser
  • Pada situs yang memiliki layar daftar dan layar detail, ketika item tidak bisa diklik kanan atau dibuka lewat ekstensi ke layar detail di tab baru, itu bencana dalam penggunaan web
    Kalau tombol kembali bekerja seketika dan mulus, mungkin masih bisa dimaafkan, tetapi kenyataannya kita harus menunggu konten dimuat ulang dan posisi gulir pun hilang
    Yang lebih parah, ada situs seperti Facebook yang memaksakan status popup chat yang sama di beberapa tab. Jika ditutup di satu tab, di tab lain juga ikut tertutup, padahal ada alasan tersendiri mengapa beberapa tab dibiarkan terbuka

• Begitu Anda mengutak-atik perilaku bawaan, menurut saya Anda juga ikut memikul tanggung jawab atasnya
  “Fitur” yang dibuat tidak berhenti pada cakupan sempit yang dimaksudkan perancangnya, melainkan menjadi keseluruhan pengalaman yang benar-benar dialami pengunjung
  Jika Anda mengubah logika tombol kembali, berarti Anda mengubah makna yang diberikan tombol kembali di situs itu, dan Anda juga harus bertanggung jawab ketika akibatnya pengguna yang bingung dan marah menyebutnya “situs rusak”
  Anda perlu memikirkan apakah benar-benar siap bertanggung jawab bahkan atas perilaku yang berbeda-beda di tiap browser dan sistem operasi, seperti scrollbar
  Pada akhirnya, itu membuat situs web berbicara semacam bahasa kreol, jadi tidak mengherankan jika pengunjung tidak memahami bahasa itu atau “menafsirkannya dengan salah”
  Fitur-fitur seperti ini bukan sekadar sesuatu yang sebaiknya dihindari demi bersikap ramah kepada pengunjung; manfaatnya tampak terbatas, sementara kerugiannya nyaris tak terbatas

  • Benar. Situs web mendapat manfaat dari idiom desain yang telah dipoles dalam waktu lama
    Situs yang mengabaikan idiom seperti ini menjadi lebih sulit digunakan karena tidak berbicara dalam bahasa yang sudah akrab bagi pengguna
    Ada juga tulisan panjang tentang hilangnya idiom desain: https://loeber.substack.com/p/4-bring-back-idiomatic-design

• Saya menganggap ini sebagai pengaplikasian situs web, dan sekarang harus dihentikan
  Situs web seharusnya kembali ke rendering sisi server dan hanya menambahkan JavaScript seperlunya
  Sebaliknya, aplikasi web boleh menangani UX sedikit lebih jauh jika itu memberi nilai bagi pengguna, tetapi selama berada di dalam browser, prinsip-prinsip dasarnya tetap berlaku
  Saya mendukung aplikasi web karena itu adalah platform pengembangan yang bisa diakses siapa saja di luar pagar app store, tetapi kita harus berhenti memperlakukan semua situs web seperti aplikasi
  Jika sebuah halaman ingin muncul di hasil mesin pencari, maka itu bukan aplikasi web, melainkan situs web

  • Akan bagus jika browser bisa mengirim Accept: text/markdown untuk dokumen mentah, tetapi menurut saya sejak CSS muncul, kapal itu sudah berlayar
  • Anda mungkin menyukai tulisan ini: https://notan.app/
  • Saya setuju dengan pernyataan “situs web harus kembali ke rendering sisi server dan sedikit JS”
    Untungnya, berkat hal-hal seperti React Server Components, tampaknya kita kembali ke arah menambahkan JavaScript sedikit demi sedikit ke situs web, dan itu bagus
  • Aplikasi web yang baik juga bisa menjadi situs web
    Itu masalah yang bisa diselesaikan jika meluangkan waktu yang cukup

• Saya tidak mengerti mengapa situs web bank memblokir paste
  Saat sadar bahwa kita tidak bisa paste, biasanya teksnya sudah telanjur disalin
  Kalau diketik manual, kesalahan justru lebih mudah terjadi; dan kalau clipboard sudah tercemar, saat larangan paste itu disadari, proses copy sudah selesai

  • Rasanya seperti ada kode untuk memblokir copy dan paste di tempat semacam “Pengantar Pemrograman Form”, lalu konsep itu meninggalkan ribuan keturunan di seluruh web
    Sepertinya orang-orang membayangkannya sebagai langkah keamanan lalu menyalinnya secara sukarela
    Dari awal saya tidak mengerti alasan memblokir paste dari pengguna
  • Situs bank saya bukan hanya memblokir paste untuk “kata sandi”, tetapi juga memblokir input keyboard
    “Kata sandi” itu cuma angka 6 digit, dan saya bahkan tidak bisa mengaturnya sendiri. Seolah-olah 6 digit jauh lebih aman daripada string acak 16 karakter yang dibuat pengelola kata sandi
    Mereka memaksa input lewat tombol di posisi acak di dalam halaman; kalau perangkat sudah terinfeksi sampai penekanan tombol dan klik bisa direkam, rasanya penyerang juga bisa langsung membaca kata sandi dari memori browser
  • Beberapa hari lalu saya mendaftar ke ISP baru, dan kolom kata sandinya memblokir paste sehingga pengelola kata sandi rusak
    Dari sudut pandang keamanan, itu keputusan yang benar-benar sulit dipercaya buruknya
  • Biasanya ini berawal ketika perusahaan mengalami masalah traffic bot
    Mereka mencoba berbagai hal untuk mengganggu bot, lalu suatu hari para developer yang didesak manajer menengah memblokir copy-paste di halaman login, dan bot berhenti sebentar
    Beberapa hari kemudian bot sudah mengakalinya, tetapi “perbaikan” sebelumnya tetap bertahan dengan pikiran “mungkin ini memblokir sebagian bot”
    Begitulah sekitar 10 baris JavaScript tetap hidup sampai rewrite v6, dan beberapa bulan atau tahun setelah mulai lagi dari awal, larangan yang sama dimasukkan kembali
    Tentu saja ini sama sekali bukan dari pengalaman pribadi
  • Saya tidak mengatakan pasti kasusnya begitu, tetapi memang pernah ada malware clipboard yang mengganti isi salinan menjadi alamatnya sendiri jika terlihat seperti alamat Bitcoin
    https://techcrunch.com/2018/07/03/new-malware-highjacks-your...
    Mungkin mereka memikirkan hal semacam itu

• Saya kesal ketika developer JS yang gemerlap menyembunyikan kompleksitas dan fitur yang tidak diminta siapa pun di balik menu select yang terlihat seperti HTML native
  Saya sering melihatnya pada input kota dan negara bagian: kota berupa input teks, sementara negara bagian berupa dropdown/menu select
  Karena saya orang Texas, saya biasanya mengetik kota, menekan Tab ke menu pilihan negara bagian, lalu menekan t, t dan lanjut ke elemen form berikutnya
  Namun belakangan ini, itu sering berupa input pencarian teks yang didandani seperti dropdown, sehingga t, t menjadi pencarian literal tt, bukan memilih Texas setelah Tennessee
  Itu hanya bekerja sesuai harapan bagi orang yang mengklik segitiga dengan mouse lalu menggulir daftar negara bagian
  Kalau tidak rusak, jangan diperbaiki

  • Ini umumnya masalah yang muncul karena celah di platform web
    Secara historis, <select> sungguhan sangat sulit atau mustahil untuk diubah gayanya atau diperluas perilakunya, sehingga banyak aplikasi mengimplementasikannya ulang sendiri, dan biasanya hasilnya buruk
    Sepertinya kini mulai muncul pengganti bawaan yang bisa diberi gaya baru
    Selain itu, karena berbagi kode antar aplikasi, framework, dan perusahaan sulit dilakukan, hanya perusahaan besar yang bisa membuat pengganti komponen bawaan dengan fitur lengkap, aksesibilitas, dan kustomisasi
    Web Components bisa memecahkan masalah ini dengan memungkinkan kolaborasi global pada komponen umum tingkat ujung seperti <select>
    Artikel terkait: https://blogs.windows.com/msedgedev/2022/05/05/styling-selec...

• Menurut saya banyak perilaku tautan yang rusak terjadi karena kurangnya metode tingkat lebih tinggi untuk menimpa perilaku tautan default
  Misalnya, saya tidak ingin memasang listener event klik hanya untuk membuka tautan sebagai modal. Event klik terlalu rendah levelnya, sehingga saya harus memeriksa tombol modifier sendiri
  Yang benar-benar saya inginkan adalah memberi tahu browser, “kalau URL jendela saat ini hendak berubah karena elemen anchor ini, panggil fungsi ini sebagai gantinya”
  Dengan begitu pengguna bebas membuka tautan di jendela atau tab baru, dan dalam kasus itu kode saya tidak dijalankan
  CSS juga sama: saya tidak ingin menetapkan gambar kursor untuk setiap elemen dan pseudo-class. Saya ingin mengatakan, “di tempat yang seharusnya memakai kursor tangan/tunggu/ubah ukuran default, gunakan gambar kustom ini”
  Dengan begitu, meskipun ada elemen atau UI baru, kodenya tetap aman untuk masa depan
  Beberapa API browser kadang-kadang tampaknya mengalami masalah XY

  • Ini cukup bisa dilakukan dengan JavaScript
    Daftarkan onclick pada tag, lalu batalkan perilaku navigasi default di event handler
    Kalau pengguna mematikan JavaScript, situs tetap berjalan dengan baik, dan perilaku bawaan browser seperti menu tautan klik kanan atau Ctrl+klik juga tetap berfungsi
    Hanya saja ini semacam “trik” yang cukup obscure, jadi akan bagus kalau DOM API membuatnya lebih mudah
  • https://developer.mozilla.org/en-US/docs/Web/API/Navigation_...
    Menurut saya inilah use case untuk Navigation API
  • Akhirnya saya melihat pemikiran saya di internet
    Yang dibutuhkan bukan event klik atau pointer, melainkan event visit tingkat lebih tinggi

• Saat pertama kali melihat Flutter Gallery, saya terkejut karena di browser web semuanya terasa rusak: https://gallery.flutter.dev
  Sepertinya terutama pada contoh Reply
  Ctrl+klik atau tombol tengah mouse pada tautan tidak berfungsi, klik kanan juga tidak, seleksi dan copy teks tidak bisa, inspect element pun tidak bisa karena struktur teknisnya, dan ketika mencoba memperbesar halaman, tidak terjadi apa-apa
  Mengingat pengalaman itu dan beberapa implementasi SPA yang dibuat dengan teknologi lebih tradisional, tulisan ini terdengar benar

  • Flutter adalah jalan buntu lain menuju framework pengembangan terpadu
    Baik web maupun mobile, belum ada demo Flutter yang pernah meyakinkan saya bahwa UX-nya layak dipakai
  • Di browser mobile pun sepertinya seleksi teks ditangani dengan aneh
    Kalau janji Flutter adalah sama di mana-mana, demo ini juga akan sama buruknya di desktop

• Sebaiknya perilaku scroll juga tidak ditimpa
  Jangan mencoba “memperbaiki” scroll agar jadi “lebih mulus”
  Di Windows mungkin terlihat baik-baik saja, tetapi di Mac saat memakai perangkat input Apple, gerakan jari di trackpad atau mouse berkorespondensi 1:1 dengan gerakan target scroll
  “Perbaikan” seperti ini biasanya terasa seperti menggulir di dalam molase
  Secara umum, jangan mencoba memperbaiki perilaku bawaan browser

• Salah satu hal yang saya benci dari web modern yang kacau adalah mengutak-atik History API
  Ketika membuka halaman dari tautan yang terlihat menarik di tempat seperti HN lalu menggulir, setiap header atau elemen yang tidak terlalu penting pun menambahkan entri ke riwayat kunjungan
  Untuk kembali ke situs asal, harus menekan tombol kembali kira-kira sejuta kali
  Saya benci semua orang yang melakukan hal seperti ini

  • Saya juga ingin menambahkan infinite scroll ke daftar ini
    Pakai saja paginasi
    Bisa ditautkan, bisa dicari, bisa dinavigasi, dan bekerja dengan benar bersama riwayat kunjungan
    Infinite scroll merusak semua itu tanpa alasan yang jelas

• Sebenarnya ada dua masalah di sini yang sama tuanya dengan web itu sendiri: ekspektasi yang rendah dan tidak adanya standar atau kriteria yang mendefinisikan orang maupun praktik kerja
  Kalau melihat lowongan kerja belakangan ini, semuanya bertuliskan “Senior Fullstack Engineer”, tetapi ketika dibuka, yang sebenarnya diinginkan sering kali kombinasi Java atau Python, R, Spring, dan SQL
  Kalau bukan full-stack tetapi ditulis begitu, itu membuang waktu orang dan mengirim sinyal ke publik bahwa mereka tidak memahami teknologi atau tidak peduli
  Dalam pemrograman, ini disebut “masalah X/Y”. Ini adalah antipola ketika yang perlu dipecahkan adalah kondisi akhir X yang diinginkan, tetapi yang dibicarakan justru pendekatan Y yang ingin diambil
  Akibatnya, pemberi kerja menerima 500 CV untuk satu lowongan tetapi tetap merasa tidak ada yang cocok
  Titik awalnya harus berupa tujuan: tulislah seperti “Kami merekrut untuk membangun aplikasi client/server seperti ini, kandidat harus menulis dan mendukung fitur X, Y, Z, dan batasannya adalah A, B, C”
  Alasan perusahaan tidak bisa melakukan ini biasanya karena mereka tidak tahu apa yang sebenarnya mereka kerjakan, dan sudah menanggung teknologi yang rusak setelah melewati berbagai jalan yang keliru. Itulah sebabnya disebut utang teknis
  Jika tujuannya jelas seperti ini, saat wawancara baik perusahaan maupun kandidat tahu apa yang harus diperiksa dan bisa saling menyaring dengan tepat. Jika tidak, prosesnya menjadi mengerikan seperti campuran antara kencan buta dan acara kuis
  Misalnya, bisa dinyatakan bahwa perekrutan dilakukan untuk membangun aplikasi konferensi media yang sangat terdistribusi, dan developer harus menulis TypeScript, menghubungkan data stream dari socket melalui pipe, bekerja di sisi browser maupun server, serta menulis otomatisasi pengujian
  Batasan operasionalnya mencakup kepatuhan WCAG AA, checklist kepatuhan privasi yang dibuat tim legal, serta pertimbangan performa yang menargetkan kecepatan eksekusi dan latensi jaringan; kandidat ideal harus dapat menunjukkan dalam wawancara solusi untuk latensi jaringan, logika aplikasi browser, dan manajemen status data streaming