Pembaruan Pengembangan Web Bulanan 7⁄2018: Aksesibilitas Praktis, Kesalahan Desain, Dan Kontrol Fitur

Diterbitkan: 2022-03-10

Ringkasan cepat Tetap up to date dengan teknik terbaru, pembaruan browser, dan topik hangat bisa menjadi tantangan tersendiri. Setiap bulan, Anselm merangkum apa yang terjadi di industri web, sehingga Anda dapat dengan mudah mengikuti semua yang baru dan penting.

Web terus membuat saya takjub. Dengan segala variasi dan perubahan yang berbeda pada platform, sulit untuk melihat pola yang lurus — bahkan jika ada (hanya) satu. Tapi sungguh luar biasa melihat apa yang diubah, fitur mana yang ditambahkan ke platform, mana yang tidak digunakan lagi, dan bagaimana browser menerapkan lebih banyak teknologi untuk melindungi pengguna dari serangan situs web berbahaya. Sangat menarik untuk melihat bahwa fitur keamanan ini saat ini mendapatkan perhatian yang sama besarnya dengan fitur untuk pengembang; ini menunjukkan pentingnya privasi dan keamanan serta betapa tidak stabil dan tidak amannya web di masa lalu.

Tetapi hal terbaik dari semua ini adalah menunjukkan betapa pentingnya untuk tetap berpegang pada hal-hal yang diberikan orang kepada kita. Daripada menerapkan solusi kami sendiri untuk semuanya, seringkali jauh lebih baik untuk menggunakan kembali sistem yang ada. Tidak hanya lebih aman untuk diandalkan, tetapi juga lebih sedikit pekerjaan sementara lebih inklusif untuk memperluas elemen DOM asli dengan elemen kustom (daripada menulis elemen kustom kita sendiri dari awal). Jika kita berpikir tentang apakah kita harus membangun versi SSL kita sendiri atau menggunakan perangkat lunak yang ada untuk ini, mengapa kita membangun elemen yang dapat diklik berdasarkan apa-apa alih-alih mengubah perilaku elemen a atau button ? Dan mengapa kami memeriksa validasi host sumber daya sendiri, jika browser sudah memberi kami API untuk itu? Semua artikel minggu ini didedikasikan untuk topik ini.

Hal lain yang melekat di kepala saya adalah artikel Andrea Giammarchi, “A Bloatless Web,” di mana dia menjelaskan bagaimana kami secara membabi buta menggunakan Babel sebagai pengembang ketika kami menulis JavaScript untuk dapat menulis ECMAScript modern. Tapi kita biasanya tidak menyadari bahwa mentranspilasikan semua kode modern kita di browser modern bukanlah cara yang paling efisien. Saya senang bahwa Andrea menawarkan beberapa ide tentang bagaimana kami dapat memperbaiki situasi itu dan meningkatkan kinerja aplikasi web kami. Bukankah menakjubkan untuk hanya melayani sepertiga dari ukuran bundel dengan tidak mentranspilasikan kode lagi untuk setiap browser?

Berita

Isolasi Situs secara efektif mempersulit situs web yang tidak tepercaya untuk mengakses atau mencuri informasi dari akun Anda di situs web lain. Chrome 67 sekarang dikirimkan bersamanya dan Pemblokiran Baca Lintas Asal (CORB) tidak akan lagi dimuat, misalnya file JSON sebagai gambar. Tetapi lebih jauh lagi, perubahan ini berarti bahwa tata letak halaman penuh tidak lagi dijamin sinkron. Fitur baru ini memengaruhi Anda jika Anda membacakan ukuran terhitung dari elemen dalam JavaScript atau menggunakan unload acara yang tidak dimuat. Pastikan Anda mengetahui hal ini dan periksa apakah situs Anda masih berfungsi seperti yang diharapkan.
Sekarang, kita tahu sedikit tentang Kebijakan Keamanan Konten — fitur yang memungkinkan pengembang membatasi beban sumber daya tertentu dengan nama host. Tetapi vendor browser telah datang dengan sesuatu yang baru sekarang: Kebijakan Fitur. Ini memungkinkan pengembang web untuk secara selektif mengaktifkan, menonaktifkan, atau mengubah perilaku API dan fitur web tertentu di browser. Ini seperti CSP tetapi alih-alih mengendalikan keamanan, ia mengontrol fitur dan Eric Bidelman menulis pengantar untuk Kebijakan Fitur yang menjelaskan semuanya.
Tim browser Brave menunjukkan fitur terbaru mereka untuk melindungi privasi penggunanya: Tab yang terhubung melalui jaringan Tor.

Lebih banyak setelah melompat! Lanjutkan membaca di bawah ini

Umum

Anton Sten bertanya apakah Nilai Sektor Teknologi Rusak? Menganalisis strategi pemasaran oleh Apple, Microsoft, Google, Amazon tetapi juga perusahaan kecil lainnya dan bagaimana kita dapat melakukan pekerjaan yang benar-benar bertujuan dan berpegang teguh pada nilai-nilai kita alih-alih memperlakukannya sebagai materi pemasaran yang tidak perlu kita hormati atau pertahankan.
Sekarang sektor teknologi dunia dengan cepat mengubah semua hal di dunia menjadi hal-hal digital, banyak yang menyerukan lebih banyak etika di bidang kita. Itu dalam banyak kasus merupakan tujuan yang tidak jelas, jadi mari kita terapkan pada satu bagian dari digital: pengembangan front-end. Bagaimana kita bisa lebih etis sebagai pengembang front-end, hal-hal apa yang bisa kita lakukan? Hide de Vries menulis artikel tentang itu.

Keamanan

Data pelanggan Ticketmaster telah disusupi dan tampaknya, ini disebabkan oleh satu baris kode khusus yang menyertakan skrip pihak ketiga.

UI/UX

Eugen Esanu menunjukkan sepuluh kesalahan desain kecil yang masih kami lakukan dan apa yang dapat kami lakukan untuk membuat desain kami lebih ramah pengguna.

apa yang kami desain vs. apa yang dibutuhkan pengguna — Pengguna tidak punya waktu untuk membaca lebih dari yang diperlukan, namun desainer masih cenderung menempatkan banyak teks karena mereka pikir orang perlu mengetahuinya. (Sumber gambar)

Pribadi

Ini adalah laporan menarik tentang bagaimana Google mengizinkan pengembang aplikasi luar untuk membaca email Google orang ketika mereka memberikan izin selama otorisasi aplikasi. Masalahnya adalah tidak ada cara untuk mencegahnya dengan mudah dan mungkin berdampak cukup besar jika Anda menggunakan Gmail untuk perusahaan Anda karena dapat memengaruhi kebijakan privasi dan tunduk pada GDPR.

Kinerja Web

Max Bock tentang bagaimana kita dapat membangun komponen yang bereaksi terhadap kecepatan koneksi perangkat yang sebenarnya menggunakan API Informasi Jaringan. Dan meskipun saat ini hanya tersedia di browser Internet Chrome dan Samsung, ada baiknya mencobanya dan mungkin sudah menyajikannya kepada pengguna ini.
Dari waktu ke waktu, kita masih dapat membaca artikel yang menyebutkan pentingnya mengoptimalkan penyeleksi CSS untuk meningkatkan kinerja. Ini berasal dari penelitian yang dilakukan beberapa tahun yang lalu tetapi Ivan Curic meneliti ini lagi dan menemukan bahwa itu tidak masalah.

Aksesibilitas

Tim pengembang Microsoft membagikan daftar putar video tentang aksesibilitas praktis, termasuk cara mengoptimalkan presentasi atau bahasa untuk dimasukkan atau cara membangun fungsionalitas "lewati navigasi" yang tepat di situs web Anda.
Sara Novak berbagi bagaimana dia berhasil menunjukkan empati dengan bereksperimen dengan buta warna untuk memahami bagaimana orang lain mengalami dunia secara berbeda.
Alat Pengembang Firefox sekarang memiliki mode Accessibility Inspector . Berikut cara mengaktifkannya dan cara menggunakannya.

Formulir dengan indikator berbasis warna — Dalam artikelnya, Sara Novak menjelaskan mengapa penting untuk tidak hanya mengandalkan warna sebagai indikator. Simbol dan pesan kesalahan bisa jauh lebih membantu pengguna. (Gambar di atas menunjukkan bentuk dengan indikator berbasis warna. Kiri: Bagaimana seseorang dengan penglihatan normal melihat bentuk dengan indikator berbasis warna. Kanan: Bagaimana orang deuteranomalia melihat bentuk yang sama.) (Sumber gambar)

JavaScript

Leon Revill menunjukkan kepada kami bagaimana kami dapat memperluas elemen DOM asli yang ada dengan Komponen Web. Ini sangat membantu dan berguna karena kami tidak hanya dapat menghemat banyak waktu dengan menggunakan templat bawaan untuk elemen khusus, tetapi juga mendapatkan semua pengoptimalan dan default (semantik, aksesibilitas, fungsionalitas browser) secara gratis dan masih dapat membangun perilaku kami sendiri di atas itu. Paling tidak, jika kita bisa menggunakan Elemen Kustom sama sekali, tapi itu cerita yang berbeda.
Gerardo Rodriguez menunjukkan bagaimana kita dapat dengan mudah gagal mengoptimalkan situs web untuk kinerja dengan Service Worker dan Fetch API dan bagaimana hal ini dapat mengakibatkan pengecualian kuota di browser. Untungnya, dia menemukan alasannya dan dengan menyetel tajuk CORS yang tepat, Gerardo akhirnya memecahkan misteri respons buram yang di-cache tunggal dan memberi tahu kami cara menghindari masalah tersebut.
Filepond adalah pengunggah file JavaScript open-source yang bagus. Rik Schennink berbagi tantangan yang dihadapi dalam membangunnya.
Andrea Giammarchi tentang masalah bundling JavaScript dengan Babel dan mengapa transpiling kode bukan solusi terbaik lagi. Sebaliknya, kita harus memikirkan cara menyajikan bundel yang berbeda tergantung pada dukungan browser untuk mengurangi ukuran bundel dan meningkatkan kinerja.
Justin Fuller membagikan tiga fitur hebat baru yang akan segera hadir di JavaScript yang akan membantu kami menulis kode yang lebih mudah dipahami, seperti rantai operasional, penggabungan nol, atau operator saluran.
Addy Osmani dan Mathias Bynens menulis pengantar utama tentang bagaimana kita dapat menggunakan modul JavaScript di web hari ini.

CSS

Seri artikel yang membahas bagaimana kami dapat memalsukan kisi penempatan otomatis dengan celah di Internet Explorer.
CSS Grid bagus, tetapi saya sering mendengar bahwa orang tidak dapat menggunakannya karena IE11 tidak mendukungnya dengan baik. Tapi itu tidak sepenuhnya benar karena IE11 memiliki versi sebelumnya dari CSS Grid yang tersedia yang dapat kita ubah dengan mudah dengan autoprefixer. Daniel Tonon menjelaskan perbedaan CSS Grid dan fitur mana yang dapat dan tidak dapat kami gunakan dan akan melanjutkan dengan lebih banyak tips.
Bagi banyak orang, CSS Grid masih sangat baru, dan sangat mampu dan membantu kita memecahkan banyak masalah saat membuat layout berbasis grid di CSS. Namun dalam versi saat ini, ada beberapa hal yang masih belum memungkinkan. CSS Grid level 2 akan memberi kita sub-grid dan Rachel Andrew menjelaskan untuk apa Anda membutuhkannya.
Apakah CSS-in-JS bagus? Apakah itu hanya buruk? Mengapa kita terus-menerus terjebak dalam perdebatan ketika tidak ada pemenang yang jelas dan bagaimana kita dapat melakukan yang lebih baik dengan mengakui evolusi dan melihat segala sesuatu dalam konteksnya.

Kehidupan kerja

Mengapa konsep kesabaran dan upaya untuk membangun sesuatu agar bertahan lama harus mendapat perhatian lebih dalam bisnis. Beberapa pemikiran yang muncul di benak saya ketika membaca artikel lain dan sepertinya banyak orang menyukai ide di balik ini.
Ethan Marcotte tentang bagaimana pendekatannya untuk memilih klien dan mengapa menurutnya penting untuk hanya memilih klien yang dapat Anda dukung secara etis. Tapi ini juga menunjukkan betapa sulitnya hal ini kadang-kadang, seperti yang ditunjukkan oleh diskusi baru-baru ini tentang kerjasama bisnis Microsoft dengan badan hukum.