Saya memiliki masalah browser yang sangat aneh . Skrip pada beberapa halaman tidak berfungsi sampai 20 detik berlalu.

Apa pun yang akan Anda tawarkan - ya, saya sudah memikirkannya, dan tidak, itu tidak membantu. Saya membicarakan hal ini bukan dengan harapan bahwa seseorang akan memberi tahu Anda dengan debugging, tetapi karena kejadian ini membuat saya benar-benar menyadari beberapa, bagaimana mengatakan ... kebiasaan ... perkembangan di depan.

(Bahkan, jangan mencoba mendiagnosis masalah dengan satu kalimat, jangan , saya mendengar dan mencoba hampir semua yang dapat Anda bayangkan).

Artikel ini ditulis pada bulan Maret 2016, beberapa contoh sudah ketinggalan zaman - kira-kira. trans.

Halaman tidak berguna

Lihat, ini screenshot dari tweet itu. Di dalamnya, bagian-bagian yang tidak berfungsi tanpa JavaScript disorot dengan warna merah . Saya tahu ini karena, seperti sebelumnya, saya telah melihat halaman yang 20 detik dari sebagian besar kode belum berfungsi.

Sesuatu yang bisa saya mengerti. Sebagai contoh, tombol "Balas" memperluas bidang teks di bagian bawah dan menempatkan fokus padanya. Ini tidak dapat dilakukan tanpa beberapa skrip. Tombol ...membuka menu pop-up, yang diragukan , karena Anda juga dapat mereproduksi menggunakan CSS. Demikian pula, tombol dengan hati melakukan aksi di latar belakang, yang juga diragukankarena dapat diputar dengan memuat halaman penuh. Tetapi ini adalah perubahan non-sepele yang akan bekerja dengan cara yang sangat berbeda dengan dan tanpa skrip.

Di sisi lain ...

Apakah tombol ini × di sudut kanan atas dan semua ruang kosong di sekitarnya? Satu-satunya fungsi mereka adalah mengirim Anda ke profil saya, yang terlihat di belakang tweet. Mereka mungkin juga berupa tautan biasa, seperti panah kiri dan kanan untuk navigasi. Tetapi ini dilakukan secara berbeda, sehingga tidak berfungsi tanpa JavaScript.

Atau tombol kecil dengan grafik, untuk analitik? Satu-satunya fungsi adalah untuk memuat halaman lain dalam jendela pop-up buatan dengan bingkai built-in. Mungkin ada tautan reguler yang berubah menjadi sembulan menggunakan skrip. Tetapi ini dilakukan secara berbeda, sehingga tidak berfungsi tanpa JavaScript.

Bidang teks? Tentu saja, ini hanya kotak teks. Tetapi jika Anda mengkliknya sebelum menjalankan JavaScript, teks yang kikuk akan tetap ada di bidang Reply to @eevee. Dan ketika skrip masih diluncurkan, itu menghapus semua yang Anda ketik dan sisipkan lagi Reply to @eevee, hanya sekarang @eeveeditulis dalam huruf biru, bukan yang abu-abu.

Hal yang sama terjadi pada halaman pencarian Twitter, yang sangat aneh karena tidak ada teks di kolom pencarian! Jika Anda mulai mengetik sebelum skrip selesai, mereka hanya akan menghapus semua yang Anda ketikkan. Bahkan untuk menyisipkan teks placeholder Anda atau menerapkan gaya khusus. Tanpa alasan yang jelas, begitu saja.

Karena NoScript bekerja untuk saya, saya sering melihat keputusan desain aneh pada situs yang saya kunjungi untuk pertama kalinya. Tentu saja, halaman putih kosong adalah hal biasa. Untuk beberapa waktu, artikel di situs web Time dimuat dengan baik tanpa skrip, tetapi tidak menggulir - properti digunakan untuk halaman overflow: hidden;karena alasan yang tidak dapat saya mengerti. Artikel Vox juga memuat secara normal, kecuali bahwa di depan setiap gambar, ruang kosong ditampilkan pada ketinggian penuh layar. Beberapa situs perusahaan yang sangat buruk berantakan tumpang tindih blok teks. Saya pikir mereka meninggalkan CSS dan menulis tata letak dalam JavaScript.

Tidak ada alasan bagus untuk ini. Ini bukan aplikasi interaktif canggih, mereka hanya halaman teks. Kami biasa mencetaknya di atas kertas, tetapi begitu kami beralih ke teknologi informasi, menjadi mustahil untuk meletakkan kata-kata di layar tanpa menjalankan beberapa megabyte sampah untuk dieksekusi?

Saya langsung mendengar bagaimana mereka menyebut saya luddite, karena saya tidak setuju untuk mengelilingi lima paragraf teks statis dengan ribuan baris skrip. Baiklah, izinkan saya menjawab di muka: pergi ke pemandian. Saya pikir web dan halaman interaktif itu hebat, saya melihat kemajuan besar dalam dekade terakhir. Hanya saja super bahwa web pada awalnya mendukung pengaturan pengguna, dan saya dapat melakukan pra-konfigurasi izin untuk setiap situs yang dapat dijalankan di komputer saya dan apa yang tidak bisa.

Tapi yang tidak terlalu keren adalah sekelompok spesialis yang dibayar tinggi dan berkualifikasi tinggi, yang masing-masing memasang Chrome pada model Mac Pro terbaru, yang bekerja di kantor pada jarak tidak lebih dari satu kilometer dari setiap server yang mereka kunjungi. Dan sekarang orang-orang ini bekerja, dan kemudian mereka berbalik dan terkikik pada orang lain yang tidak memiliki konfigurasi seperti itu. Harap perhatikan bahwa salah satu dari kondisi berikut ini akan mengganggu JavaScript Anda:

Seseorang di komputer yang lambat.
Seseorang yang memiliki koneksi lambat.
Seseorang di telepon, yaitu, pada komputer yang lambat dengan koneksi yang lambat.
Seseorang terjebak dengan peramban lama di komputer yang tidak ia kendalikan - di tempat kerja, di sekolah, di perpustakaan, dll.
Seseorang sedang mencoba untuk menulis sebuah program kecil yang berinteraksi dengan situs Anda yang tidak memiliki API.
- , .
- — Google .
- Linux , , Elinks.
- , .
- NoScript . , , .
- NoScript , , . , .
, , .
CDN .
CDN IPv6, (, , ). - IPv6, , JS .
, JavaScript .
, . , .
, , .

Saya tidak mengatakan bahwa aplikasi web interaktif seperti Google Maps harus dihapus dari muka bumi, meskipun bahkan untuk Google Maps ada cadangan tanpa skrip selama bertahun-tahun, hingga versi WebGL saat ini! Saya mengatakan bahwa kami mematikan di tempat lain ketika fungsi dasar HTML biasa tiba-tiba berhenti bekerja tanpa JavaScript. Yakni, tanpa 40 megabyte JavaScript, menurut about:memory - ini adalah data dalam memori, bukan ukuran unduhan. Ini mungkin tidak terlalu banyak (untuk halaman yang menampilkan 140 karakter?), Tetapi browser saya sering mengakumulasi selusin tab Twitter terbuka, yaitu, setengah gigabyte memori , mengalokasikan maksimum 6 KB teks.

Penemuan roda persegi

Anda benar-benar perlu mencoba untuk mencapai hasil yang menyedihkan. Maksud saya, jika Anda memerlukan tautan, Anda cukup menulis <a href="somewhere">label</a>, dan Anda selesai. Tetapi jika Anda mulai menciptakan ini menggunakan JavaScript, Anda memerlukan penangan klik, dan itu harus bekerja pada waktu yang tepat sehingga Anda tahu bahwa tautan itu benar-benar ada, dan Anda mungkin harus melakukan beberapa pekerjaan untuk menambahkan penangan klik ke tautan palsu, yang menambahkan Ajax. Baik?

Tidak! Anda hanya akan mendapatkan tiruan tautan yang pucat dan jelek. Pertimbangkan semua fungsi tautan asli:

Saya bisa mengikuti tautannya.
Saya dapat membuka tautan di tab atau jendela baru menggunakan kombinasi ctrl, tombol shift dan roda mouse (tombol tengah).
Saya dapat menyalin alamat tautan dan menempelnya di suatu tempat atau membuka di browser lain, atau yang lain.
' Firefox .
— Opera, Konqueror, uzbl, Firefox vimperator? — , , «» , .
, .
.
, , .

Utas umum di sini adalah bahwa tag <a href=...> berarti sesuatu . Dia berkata: "Ini adalah jalan yang bisa kamu tempuh." Banyak alat mengandalkan informasi ini. Jika Anda menggantinya dengan <div onclick>, maka ya, mengklik div akan melakukan sesuatu, tetapi intinya benar - benar hilang. Sebaliknya, jika digunakan <a href="javascript:void(0);">, maka Anda sebenarnya berbohong pada alat-alat ini; Anda menyebabkan makna, tetapi memberikan informasi yang tidak berarti.

Itulah yang dimaksud orang ketika mereka berbicara tentang "semantik" - bahwa ada informasi berguna yang perlu dikumpulkan. Jika Anda mulai menemukan kesamaan tautan, maka analisis konstruk sintetik ini akan memerlukan eksekusi spekulatif dari sejumlah besar kode arbitrer, atau penulisan yang sangatpenganalisa statis pintar, atau hanya melatih programmer manusia. Menyatakan niat adalah metode yang jauh lebih kuat dan fleksibel daripada hanya melakukan pekerjaan, karena dalam kasus pertama, alat universal melakukan hal-hal yang berguna hampir sepele.

Contoh bagus lainnya adalah formulir drop-down <select>. Beberapa pengembang terkadang sepenuhnya dari awal membuat penggantinya dari widget non-asli. Mungkin untuk membuat mereka lebih cantik? Tujuan yang mulia. Tapi tahukah Anda bahwa dalam formulir drop-down asli, ketika Anda mulai mengetik, posisi yang cocok pertama dipilih secara otomatis? Jelas, di sebagian besar implementasi alternatif ini tidak didukung. Secara visual, mereka terlihat lebih baik (atau hanya berbeda), tetapi secara fungsional jauh lebih buruk untuk daftar panjang.

Kotak teks Twitter buatan sendiri bukan kotak teks sama sekali, tetapi contenteditable <div>. Di sini contenteditable, itu berarti bahwa sebagian besar kontrol asli berfungsi dengan cukup baik, tetapi tetap saja, objek ini dari waktu ke waktu menunjukkan beberapa perilaku aneh, misalnya, memindahkan kursor ke awal teks ketika saya beralih di antara tab. Atau kadang-kadang skrip memiliki beberapa masalah dengan kecepatan pengetikan saya dan mulai memperhatikan. Satu-satunya alasan mengapa bahkan menaruhnya bukan <textarea> yang biasa, tampaknya, adalah untuk warna @handlesdan tautan dengan warna biru? Kotak teks buatan sendiri tidak mempersingkat tautan atau mengganti emoji Twitter, jadi ini sebenarnya bukan pratinjau seperti apa bentuk tweet Anda.

Tahukah Anda bahwa beberapa situs memiliki hotkey? Bagus kan? Tapi sebenarnya /itu adalah hotkey bawaan di Firefox yang membuka bilah pencarian cepat. Jelas, tidak ada seorang pun di Twitter atau GitHub, atau BitBucket, atau Tumblr, atau di selusin tempat lain yang tahu tentang ini, karena mereka semua menetapkan fokus utama ini ke bilah pencarian mereka sendiri di situs. Yang sama sekali berbeda dari pencarian di halaman saat ini (untuk kehormatan GitHub, mereka memperbaikinya ketika saya mengeluh di Twitter). Untuk waktu yang lama, Google+ mematikan bilah spasi untuk menggulir ke bawah. Mengapa tidak ada orang di perusahaan besar ini yang berhenti dan berkata: "Hei, tunggu, ini adalah fungsi yang berfungsi di browser, dan kami melanggar itu"? Apakah pengembang web menggunakan browser sendiri?

Perlu diingat bahwa setiap halaman Twitter diam-diam menyerap semua kejadian keyboard dan klik mouse hingga semua skrip bekerja. Ini berarti bahwa saya bahkan tidak dapat mengubah tab sampai saya menunggu 20 detik untuk memuat halaman: ctrl-t, ctrl-w, ctrl-tab, ctrl-pgup dan ctrl-pgdn - semua acara keyboard sepenuhnya diserap. Ini adalah cara kerja mekanisme yang disebut "swift action queue". Kedengarannya seperti antrian ini harus memutar acara di akhir pemuatan halaman, tetapi (a) Anda tidak dapat menggunakan tombol pintas di browser; (B) sepertinya masih tidak berhasil. Untuk memperbaikinya, saya harus menulis skrip khusus untuk memblokir tag skrip dengan pengenal tertentu.

Saya tidak berpikir saya sangat pemilih. Ini adalah fungsi dasar browser, dan Anda melanggarnya, seringkali tanpa alasan yang kuat. Saya tidak berharap Anda membuat Google Documents berfungsi tanpa JavaScript. Saya hanya berharap Anda tidak merusak keyboard saya.

Biarkan saya memberi Anda beberapa saran.

Terima fakta bahwa terkadang bagi sebagian orang JavaScript Anda tidak akan berfungsi. Pikirkan apa artinya itu. Saat Anda punya pilihan, selalu pilih mekanisme HTML yang ada. Mungkin setahun sekali tim pengembang Anda akan mematikan JavaScript dan mencoba menggunakan situs tersebut. Mulai menangis.

Jika Anda akan mendefinisikan ulang atau memikirkan kembali apa yang sudah ada, pelajari ini terlebih dahulu. Anda tidak dapat membuat pengganti yang baik tanpa memahami yang asli. Tanya sekitar. Sial, coba klik /pada browser sebelum melakukan ini dengan hotkey di situs web Anda.

Ingat bahwa dengan semua kekuatan yang diberikan Internet kepada Anda, pada akhirnya kontrol masih ada di tangan pengguna. Internet bukan konsol game, bertindaklah sesuai itu. Buat modul. Pertimbangkan pengaturan yang mungkin atau umum terlebih dahulu. Mungkin ada sesuatu untuk mengurangi sedikit ketika Anda mencapai 40 megabyte skrip pada halaman.

Terima kasih

Mungkin kita harus sedikit tenang dengan JavaScript?

Halaman tidak berguna

Penemuan roda persegi

Biarkan saya memberi Anda beberapa saran.

More articles: