5 Kesalahan Paling Umum yang Dilakukan Pengembang HTML5: Panduan Pemula

Sudah lebih dari 20 tahun sejak Tim Berners-Lee dan Robert Cailliau menetapkan HTML, yang menjadi bahasa markup standar yang digunakan untuk membangun Internet. Sejak saat itu, komunitas pengembang HTML telah meminta perbaikan pada bahasa ini, tetapi seruan ini sebagian besar terdengar oleh pengembang browser web yang mencoba meringankan masalah HTML rekan-rekan mereka. Sayangnya, ini menyebabkan lebih banyak masalah yang menyebabkan banyak masalah kompatibilitas lintas-browser dan duplikasi pekerjaan pengembangan. Selama 20 tahun ini, HTML ditingkatkan 4 kali, sementara sebagian besar browser mendapat pembaruan utama dua digit ditambah banyak patch kecil.

HTML5 seharusnya akhirnya menyelesaikan masalah kita dan menjadi satu standar untuk mengatur semuanya (browser) . Ini mungkin salah satu teknologi yang paling diantisipasi sejak penciptaan World Wide Web. Apakah itu terjadi? Apakah kami akhirnya mendapatkan satu bahasa markup yang akan sepenuhnya kompatibel lintas-browser dan akan berfungsi di semua platform desktop dan seluler yang memberi kami semua fitur yang kami minta? Saya tidak tahu! Beberapa hari yang lalu (16 September 2014) kami menerima satu panggilan lagi untuk ditinjau oleh W3C sehingga spesifikasi HTML5 masih belum lengkap.

Mudah-mudahan, ketika spesifikasi suatu hari selesai, browser tidak akan memiliki kode usang yang signifikan, dan mereka akan dengan mudah dan benar mengimplementasikan fitur hebat seperti Pekerja Web , Beberapa elemen audio dan video yang disinkronkan , dan komponen HTML5 lainnya yang kami perlukan untuk lama.

Namun kami memiliki ribuan perusahaan yang mendasarkan bisnis mereka pada HTML5 dan melakukan yang terbaik. Ada juga banyak aplikasi dan game hebat berbasis HTML5 yang digunakan oleh jutaan orang, jadi kesuksesan jelas mungkin dan HTML5 akan, dan akan terus digunakan, terlepas dari status spesifikasinya.

Namun, resep yang saya sebutkan dapat dengan mudah meledak di wajah kita, dan dengan demikian saya telah menekankan beberapa kesalahan HTML5 paling dasar yang dapat dihindari. Sebagian besar kesalahan yang tercantum di bawah ini adalah konsekuensi dari implementasi elemen HTML5 tertentu yang tidak lengkap atau hilang di browser yang berbeda, dan kami berharap bahwa dalam waktu dekat mereka akan menjadi usang. Sampai hal ini terjadi, saya sarankan untuk membaca daftar dan mengingatnya saat membangun aplikasi HTML5 Anda berikutnya, baik Anda seorang pemula HTML5 atau dokter hewan berpengalaman.

Kesalahan umum #1: Mempercayai penyimpanan lokal

Biarkan mereka makan kue! Pendekatan ini telah menjadi beban pengembang selama berabad-abad. Karena ketakutan yang masuk akal akan pelanggaran keamanan dan perlindungan komputer, di "zaman kegelapan" ketika Internet ditakuti oleh banyak orang, aplikasi web diizinkan untuk meninggalkan sejumlah kecil data di komputer. Benar, ada hal-hal seperti data pengguna yang "master browser hebat dari Microsoft(r)" berikan kepada kami, atau hal-hal seperti Objek Bersama Lokal di Flash, tapi ini jauh dari sempurna.

Oleh karena itu masuk akal bahwa salah satu fitur HTML5 dasar pertama yang diadopsi oleh pengembang adalah Penyimpanan Web. Namun, waspadalah bahwa Penyimpanan Web tidak aman. Lebih baik daripada menggunakan cookie karena tidak akan dikirim melalui kabel, tetapi tidak dienkripsi. Anda seharusnya tidak pernah menyimpan token keamanan di sana. Kebijakan keamanan Anda tidak boleh bergantung pada data yang disimpan di Penyimpanan Web karena pengguna jahat dapat dengan mudah mengubah nilai sessionStorage localStorage saja.

Untuk mendapatkan lebih banyak wawasan tentang Penyimpanan Web dan cara menggunakannya, saya sarankan membaca posting ini.

Kesalahan umum #2: Mengharapkan kompatibilitas antar browser

HTML5 lebih dari sekadar bahasa markup sederhana. Itu sudah cukup matang untuk menggabungkan perilaku bersama dengan tata letak, dan Anda harus mempertimbangkan HTML5 sebagai HTML yang diperluas dengan JavaScript lanjutan di atasnya. Jika Anda melihat semua masalah yang kami alami sebelumnya hanya untuk membuat kombinasi statis HTML+CSS terlihat identik di semua browser, wajar untuk berasumsi bahwa lebih banyak kerumitan hanya akan berarti lebih banyak upaya untuk memastikan kompatibilitas lintas-browser.

Interpretasi HTML5 pada browser yang berbeda jauh dari identik, seperti halnya dengan JavaScript. Semua pemain utama dalam perang browser membantu dalam spesifikasi HTML5, jadi wajar untuk berasumsi bahwa penyimpangan antar browser akan berkurang seiring waktu. Tetapi bahkan sekarang beberapa browser memutuskan untuk sepenuhnya mengabaikan elemen HTML5 tertentu sehingga sangat sulit untuk mengikuti garis dasar dan serangkaian fitur umum. Jika kita menambahkan lebih banyak perangkat dan platform yang terhubung ke internet ke persamaan, situasinya menjadi lebih rumit, menyebabkan masalah dengan HTML5.

Misalnya Web Animations adalah fitur hebat yang hanya didukung oleh Chrome dan Opera, sedangkan fitur Web Notification yang memungkinkan pengguna memperingatkan pengguna di luar konteks halaman web tentang suatu kejadian, seperti pengiriman email, sepenuhnya diabaikan oleh Internet Explorer.

Untuk mempelajari lebih lanjut tentang fitur dan dukungan HTML5 oleh berbagai browser, lihat panduan HTML5 di www.caniuse.com.

Jadi faktanya tetap bahwa meskipun HTML5 baru dan ditentukan dengan baik, kita harus mengharapkan banyak masalah kompatibilitas lintas-browser dan merencanakannya terlebih dahulu. Ada terlalu banyak celah yang harus diisi oleh browser, dan wajar untuk berharap bahwa mereka tidak dapat mengatasi semua perbedaan antar platform dengan baik.

Kesalahan umum #3: Dengan asumsi kinerja tinggi

Terlepas dari kenyataan bahwa HTML5 masih berkembang, itu adalah teknologi yang sangat kuat yang memiliki banyak keunggulan dibandingkan platform alternatif yang digunakan sebelum keberadaannya. Tapi, dengan kekuatan besar datang tanggung jawab besar , terutama untuk pemula HTML5. HTML5 telah diadopsi oleh semua browser utama di desktop dan platform seluler. Mengingat hal ini, banyak tim pengembangan memilih HTML5 sebagai platform pilihan mereka, berharap aplikasi mereka akan berjalan sama di semua browser. Namun, mengasumsikan kinerja yang masuk akal pada platform desktop dan seluler hanya karena spesifikasi HTML5 mengatakan demikian, tidak masuk akal. Banyak perusahaan (khm! Facebook khm!) memasang taruhan mereka pada HTML5 untuk platform seluler mereka dan menderita HTML5 tidak berjalan sesuai rencana.

Namun, sekali lagi, ada beberapa perusahaan hebat yang sangat bergantung pada HTML5. Lihat saja banyak studio pengembangan game online yang melakukan hal luar biasa sambil mendorong HTML5 dan browser hingga batasnya. Jelas, selama Anda menyadari masalah kinerja dan mengatasinya, Anda bisa berada di tempat yang bagus untuk membuat aplikasi yang luar biasa.

Kesalahan umum #4: Aksesibilitas terbatas

Web telah menjadi bagian yang sangat penting dari kehidupan kita. Membuat aplikasi dapat diakses oleh orang-orang yang mengandalkan teknologi bantu adalah topik penting yang sering dikesampingkan dalam pengembangan perangkat lunak. HTML5 mencoba mengatasinya dengan menerapkan beberapa fitur aksesibilitas lanjutan. Lebih dari beberapa pengembang menerima ini sebagai cukup dan tidak benar-benar menghabiskan waktu menerapkan opsi aksesibilitas tambahan dalam aplikasi mereka. Sayangnya, pada tahap ini HTML5 memiliki masalah yang mencegahnya membuat aplikasi Anda tersedia untuk semua orang dan Anda harus menginvestasikan waktu tambahan jika Anda ingin menyertakan lebih banyak pengguna.

Anda dapat memeriksa tempat ini untuk informasi selengkapnya tentang aksesibilitas di HTML5 dan status terkini dari fitur aksesibilitas paling umum.

Kesalahan umum #5: Tidak menggunakan penyempurnaan HTML5

HTML5 telah memperluas rangkaian tag HTML/XHTML standar secara signifikan. Selain tag baru, kami mendapatkan beberapa aturan dan perilaku baru. Terlalu banyak pengembang yang hanya mengambil beberapa peningkatan dan melewatkan beberapa fitur baru HTML5 yang sangat keren.

Salah satu hal paling keren di HTML5 adalah validasi sisi klien. Fitur ini mungkin salah satu elemen paling awal dari HTML5 yang diambil oleh browser web. Namun, sayangnya, Anda dapat menemukan lebih dari beberapa pengembang yang menambahkan atribut novalidate ke formulir mereka secara default. Alasan melakukan ini masuk akal, dan saya yakin kita akan berdebat tentang yang satu ini. Karena kompatibilitas ke belakang, banyak aplikasi yang menerapkan validator JavaScript khusus dan memiliki validasi out-of-the-box yang dilakukan oleh browser di atas itu tidak nyaman. Namun, tidak terlalu sulit untuk memastikan bahwa dua metode validasi tidak akan bertabrakan, dan menstandardisasi validasi pengguna akan memastikan pengalaman umum sambil membantu menyelesaikan masalah aksesibilitas yang saya sebutkan sebelumnya.

Fitur hebat lainnya terkait dengan cara input pengguna ditangani dalam HTML5. Sebelum HTML5 datang, kami harus menyimpan semua bidang formulir kami di dalam <form></form> . Atribut formulir baru membuatnya sangat valid untuk melakukan sesuatu seperti ini:

 <form action="demo_form.asp"> First name: <input type="text" name="fname"><br> <input type="submit" value="Submit"> </form> Last name: <input type="text" name="lname" form="form1">

Bahkan jika lname tidak ada di dalam formulir, itu akan diposting bersama dengan fname .

Untuk informasi selengkapnya tentang atribut dan penyempurnaan formulir baru, Anda dapat memeriksa Jaringan Pengembang Mozilla.

Bungkus

Saya mengerti bahwa pengembang web adalah kerusakan tambahan dalam perang browser karena banyak kesalahan di atas adalah akibat langsung dari implementasi HTML5 yang bermasalah di browser yang berbeda. Namun, tetap penting untuk menghindari masalah umum HTML5 dan meluangkan waktu untuk memahami fitur baru HTML5. Setelah kami mengendalikan semuanya, aplikasi kami akan memanfaatkan peningkatan baru yang hebat dan membawa web ke tingkat berikutnya.