Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)
JavaScript adalah bahasa yang kuat yang membuat situs web lebih hidup dengan interaktivitas, sampai saat yang ditakuti ketika JavaScript dinonaktifkan di browser, secara tiba-tiba. Di tips cepat ini kita akan mencoba menyediakan fallback dengan elemen <noscript>.
Tanpa JavaScript
Pengguna mungkin menonaktifkan JavaScript untuk sejumlah alasan. Mereka mungkin akan melakukan hal ini untuk mengatasi keterbatasan bandwidth, untuk menyimpan daya baterai telepon mereka, mungkin juga untuk privasi sehingga mereka tidak akan dilacak dengan script analitis. Sejumlah orang bahkan menginstal ekstensi browser seperti NoScript untuk mencegah browser dari menjalankan JavaScript. Cukuplah untuk dikatakan, jika JavaScript dinonaktifkan, banyak situs web dan apps gagal berfungsi; jika tidak seluruhnya, maka sebagian.
Mari kita lihat beberapa contoh.
Tips: Untuk keperluan tutorial ini saya akan menggunakan Quick JavaScript Switcher, ekstensi yang berguna untuk Chrome yang memungkinkan saya untuk toggle JavaScript dalam satu klik.
WordPress.com
Editor posting baru WordPress.com sangat tergantung pada JavaScript. Seperti yang Anda lihat dari screenshot berikut, ia tidak menampilkan apapun kecuali logo "W" WordPress ketika JavaScript dinonaktifkan. Dengan asumsi sebagian besar pengguna WordPress mungkin non-tech-savvy, mereka mungkin menyadari apa yang terjadi.
Trello
Trello, webapp manajemen proyek, yang sangat tergantung pada JavaScript. Namun, tidak seperti WordPress.com, Trello dengan ramah memberitahu kita dengan peringatan sederhana:
Facebook menanganinya lebih baik lagi. Ia akan menampilkan notifikasi, memberitahu pengguna apa yang terjadi, dan menyediakan beberapa kursus tindakan dengan tombol logout dan refresh, dan pilihan versi yang dioptimalkan untuk mobile. Semua ini disajikan dengan branding visual Facebook yang akrab.
NewYorkTimes
Beberapa situs mungkin hanya sebagian menggunakan JavaScript, seperti blog dan situs berita. Saat menggunakan NewYorkTimes, misalnya, Anda akan menemukan beberapa tempat kosong ketika JavaScript dinonaktifkan. Ikon cari yang menyertai link Search dan Sections menghilang, seperti yang terlihat di bawah ini.
Ini adalah degradasi yang anggun (pengguna mungkin tidak memperhatikan), yang menyoroti bahwa bijaksana untuk memberikan pengalaman yang terbaik ketika JavaScript dinonaktifkan.
Menggunakan Elemen "noscript"
Bagaimana kita memberikan cadangan akan sangat tergantung pada bagaimana kita menggunakan JavaScript di situs kami, tapi elemen noscript akan berguna dalam banyak hal. Seperti namanya, kita dapat menggunakan noscript untuk membuat konten pengganti. Apapun di dalam tag <noscript></noscript> akan di-render hanya ketika JavaScript dinonaktifkan.
Untuk menyediakan sebagai contoh saya membangun halaman demo. Demo ini mereplikasi efek loading gambar kabur seperti yang terlihat di Medium. Gambar dan efek blur disampaikan melalui JavaScript, jadi tebak apa yang terjadi ketika kita mematikan JavaScript?
Gambar akan tidak dimuat.
Untuk menampilkan gambar-gambar ini, kita dapat membungkus mereka dalam elemen-elemen noscript serta membungkus deklarasi style, menangani isu-isu posisi.
1 |
<head>
|
2 |
<noscript>
|
3 |
<style>
|
4 |
figure noscript { |
5 |
top: 0; |
6 |
left: 0; |
7 |
position: absolute; |
8 |
}
|
9 |
</style>
|
10 |
</noscript>
|
11 |
</head>
|
12 |
|
13 |
... |
14 |
|
15 |
<figure>
|
16 |
<img src="img/img-small-1.jpg" |
17 |
width="30" |
18 |
height="20" |
19 |
class="img-small" |
20 |
alt="" |
21 |
data-large="img/img-large-1.jpeg" |
22 |
data-large-width="1280" |
23 |
data-large-height="853"> |
24 |
<canvas></canvas>
|
25 |
<figcaption>Lorem ipsum dolor sit amet.</figcaption> |
26 |
|
27 |
<!-- fallback image -->
|
28 |
<noscript><img src="img/img-large-1.jpeg" height="600" width="900"></noscript> |
29 |
</figure>
|
Kita juga dapat menggunakan elemen noscript untuk memberitahukan pengguna tentang JavaScript sedang dimatikan—mirip dengan apa yang dilakukan Facebook dan Trello. Selain itu, kita dapat menambahkan link referensi untuk membantu pengguna kami mengaktifkan JavaScript.
Kesimpulan
Menyediakan noscript sebagai cadangan adalah cara yang berguna untuk memberitahu pengguna situs web, tanpa JavaScript, hal-hal mungkin tidak selalu berfungsi 100%. Tapi jangan lupa bahwa prioritas Anda harus memastikan kurangnya JavaScript (atau CDN, atau salah satu dari sejumlah besar dependensi lain) tidak melanggar pengalaman pengguna. Berkat Christian Heilmann untuk memastikan pesannya disampaikan.
