Kira-kira 15 thon ka ulikot, lon teungoh keurija bak saboh perusahaan dipat kamoe peugot apps keu agen perjalanan, pekerja bandara, dan perusahaan maskapai penerbangan. Kamoe pih kamoe peugot framework in-house kamoe keudroe keu komponen UI ngon kemampuan aplikasi tunggal halaman. Kamoe na komponen keu mandum: bidang, tombol, tab, rentang, tabel data, menu, pemilih tanggal, pilih, dan multipilih. Bahkan kamoe na komponen div. Komponen div kamoe that hayeu, nyan memungkenkan kamoe untuk peugot sagoe bulat bak mandum browser, nyang, peucaya atawa hana, kon saboh hai nyang mudah bak watee nyan.
Buët geutanjoë teudjadi bak saboh watèë dalam seudjarah geutanjoë watèë JS, Ajax, dan HTML dinamis djikalon sibagoë saboh revolusi njang peutamong geutanjoë u masa ukeuë. Teumanyong, geutanyoe jeuet tapeubaroe saboh laman seucara dinamis, tacok data dari saboh server, dan tapeujioh droe dari payah ta navigasi u laman laen, nyang deuh lambat dan meukedip-kedip saboh sagoe panyang puteh rayeuk bak layeue antara dua boh laman nyan. Na saboh kalimat, nyang geupeugot meusyeuhu le Jeff Atwood (peudong StackOverflow), nyang meuasoe: “Aplikasi peu mantong nyang jeuet tatuleh lam basa Java, akhe jih akan tatuleh lam basa Java.” — Jeff Atwood .
Keu kamoe watee nyan, nyoe meurasa lagee berani untuk beutoi-beutoi jak dan peugot apps-apps nyan. Rasa jih lagee persetujuan selimut untuk peugot mandum ngon JS. Jadi kamoe peugot mandum ngon JS, dan kamoe hana that kamoe cok watee untuk meuneuliti cara laen untuk peugot buet. Kamoe hana that meurasa insentif untuk meurunoe deungon beutoi peu nyang jeut dipeugot le HTML ngon CSS. Kamoe hana that meuanggap web seubagoe platform aplikasi nyang berkembang seucara keseluruhan. Kamoe sebagian rayeuk kalon nyan seubagoe sesuatu nyang peureulee kamoe keureuja, terutama watee meujak keu dukungan browser. Geutanyoe jeut mantong ta boh JS leubeh le bak nyan untuk tapeugot buet. Peuë keuh meunyoë tacok watèë keu ta meurunoe leubèh lanjut pakriban cara web nyan meubut dan peuë nyang na bak platform nyan, nyan jeuët keu bantuan keu ulôn? Teuntèe, ulôn mungkén jeuët lôn cukur saboh kelompok kode nyang hana beutôi-beutôi peureulèë. Tapi, bak masa nyan, mungken hana that le. Kamoe kalon, perbedaan browser cukop signifikan watee nyan. Nyoe nakeuh masa watee Internet Explorer mantong jeut keu browser nyang dominan, ngon Firefox jeut keu browser keudua nyang toe, tapi mulai gadoh pangsa pasar kareuna Chrome bagah that meutamah popularitas. Bah pih Chrome ngon Firefox cukop jroh bak jisepakati standar web, lingkungan-lingkungan dipat apps kamoe meujalan meuarti kamoe haroh meudukong IE6 keu watee nyang trep. Bah pih watee kamoe ka geubi izin untuk meudukong IE8, kamoe mantong harus meuhadapi le that perbedaan antara browser. Kon nyan mantong, tapi web masa nyan cuma hana le that kemampuan nyang dibangun tepat lam platform.
Maju laju keu uroe nyoe. Peukara ka meu-ubah that. Kon mantong geutanjoë leubèh le keumampatan njoë nibak njang ka-ka, tapi laju njang djeuët keu keumampatan njoë ka meutamah tjit. Bah lon tanyong lom pertanyaan nyan, lheuh nyan: Peu keuh meunyo tacok watee untuk ta meurunoe leubeh lanjut kiban cara web dan peu nyang na bak platform nyan akan jeut keu bantuan keu droeneuh uroe nyoe? Mutlak jeut. Meurunoe meuphom ngon pakek platform web jinoe geupeuduek droeneuh bak keunggulan nyang rayeuk ateuh pengembang laen. Peuë keuh droëneuh neukeurija bak kinerja, aksesibilitas, responsivitas, mandum nyan meusapat, atawa neukirém mantong fitur UI, meunyo droëneuh neuk neupeubuët seubagoë insinyur nyang meutanggong jaweuëb, neuteupeuë alat-alat nyang na bak droëneuh meubantu droëneuh neucapai tujuan droëneuh leubeh bagah dan leubeh get. Padum-padum boh Hal Nyang Mungken Hana Peureulee Le Perpustakaan . Meunyo ta teupeu peue nyang didukung le browser uroe nyoe, pertanyaan, maka, nakeuh: Peue nyang jeut ta parit? Peu keuh geutanyoe peurlee komponen div untuk tapeugot sagoe bulat bak thon 2025? Teuntèë, geutanjoë hana. Properti border-radius ka geudukong lé mandum browser nyang jinoë geungui ka leubèh nibak 15 thôn bak watèe nyoe. Dan sagoe-bentuk pih akan teuka hana trep le, untuk sagoe-sagoe nyang leubeh fancier lom. Mari ta kalon fitur-fitur nyang relatif baroe nyang jinoe ka na bak mandum browser utama, dan nyang jeut neupakek keu neugantoe dependensi nyang ka na lam codebase droeneuh. Inti jih kon langsong parit mandum perpustakaan tercinta dan tuleh ulang codebase droe. Adapun mandum nyang laen, droeneuh peureulee neuperhitungkan dukungan browser dilee dan neucok keputusan berdasarkan faktor laen nyang khusus keu proyek droeneuh. Fitur-fitur di miyup nyoe geuimplementasikan lam lhee boh meusèn browser utama (Chromium, WebKit, ngon Gecko), tapi droeneuh mungken na syarat dukungan browser nyang beda nyang meucegah droeneuh neungui sigra. Jinoe mantong watee nyang jroh keu ta meurunoe teuntang fitur-fitur nyoe, bah pih meunan, dan mungken na rencana keu ta pakek bak saboh watee. Popover Dan Dialog . API Popover, elemen HTML
Teuntèë, laju koneksi internet droëneuh mungkén ka meutamah cit, tapi kon meunan keu bandum ureuëng. Dan hana mandum ureung na kemampuan alat yang sama cit. Meutarek kode pihak keu lhee keu hai-hai nyang jeuet droeneuh peugot ngon platform, seubalek jih, kemungkenan rayeuk berarti droeneuh neukirém leubeh le kode, ngon kareuna nyan neucapai leubeh kureung pelanggan nibak nyang biasa droeneuh peugot. Bak web, kinerja pemuatan nyang hana get menyebabkan tingkat peninggalan nyang rayeuk dan menyakiti reputasi merek. Meujalankan Kureung Kode Bak Perangkat . Seulaen nyan, kode nyang droeneuh kirem bak perangkat pelanggan droeneuh mungken leubeh bagah meujalan meunyoe leubeh kureung geupake abstraksi JavaScript di ateuh platform. Nyoe pih mungken leubeh responsif dan leubeh mudah diakses seucara default. Mandum nyoe meuakibatkan pelanggan leubeh le dan leubeh bahagia. Cek blog kesenjangan ketimpangan kinerja thon rakan lon Alex Russell, nyang menunjukkan bahwa perangkat premium sebagian rayeuk hana di pasai deungon miliaran pengguna kareuna ketimpangan kekayaan. Dan jurang njoë mantong meutamah dari masa keu masa.
Tata Letak Batu nyang ka teupeugot Salah saboh fitur platform web nyang akan teuka dan nyang that lon galak nakeuh CSS Masonry.
Bah lon mulai ngon lon peutrang peu Masonry nyan. Peue Nyan Masonry . Masonry nakeuh saboh jeunèh tata letak nyang ka jipeugot populer lé Pinterest thôn-thôn nyang ka u likôt. Nyoe jipeugot trek-trek konten nyang independen lam barang-barang nyan jikemas droe jih setoep ngon awai trek nyang jeuet.
Le ureung kalon Masonry seubagoe pilihan nyang that get keu portofolio ngon galeri foto, nyang ka pasti jeut jipeubuet. Teuma Masonry leubeh fleksibel nibak nyang droeneuh kalon bak Pinterest, dan hana teubatah bak tata letak lagee air terjun mantong. Lam saboh tata letak Batu:
Trek jeuet keu kolom atawa bareh:
Trek asoe hana mandum wajeb ukuran jih saban:
Item jeuet meubentang padum-padum boh trek:
Barang-barang jeuet tapeuduek bak trek-trek tertentu; awaknyan hana payah sabee ji ikot algoritma penempatan otomatis:
Demo Nyoe na padum-padum boh demo sederhana nyang lon peugot ngon lon pakek implementasi CSS Masonry lam Chromium nyang akan teuka. Saboh demo galeri foto, nyang geupeuleumah pakriban item (judul lam hai nyoe) jeuet jibentang padum-padum boh trek:
Galeri foto laen nyang geupeuleumah trek-trek nyang meubida ukuran:
Saboh tata letak situs beurita ngon padum-padum boh trek nyang leubeh luwah nibak nyang la'én, ngon padum-padum boh item nyang meubentang mandum luwah tata letak:
Saboh papan kanban nyang geupeuleumah bahwa barang-barang jeuet geupeuduek bak trek-trek tertentu:
Catatan: Nyang .demo-demo sigohlom jih geupeugot ngon versi Chromium nyang gohlom na keu sebagian rayeuk pengguna web, kareuna CSS Masonry baroe mulai ji implementasikan lam browser. Namun, pengembang web ka seunang-seunang geupake perpustakaan untuk geupeugot tata letak Masonry ka meuthon-thon ka. Situs-situs nyang geungui Batée Bak Uroe Nyoe . Memang, Masonry cukop umum bak web jinoe. Nyoe na padum-padum boh contoh nyang lon teume selaen Pinterest:
Dan padum-padum boh lom, kureuëng jeulaih, contoh:
Jadi, kiban cara tata letak-tata letak nyoe dipeugot? Cara peugot Salah saboh trik nyang ka lon kalon dipakek nakeuh pakek tata letak Flexbox seubagoe gantoe, ubah arah jih keu kolom, dan setting keu bungkus. Deungon cara nyoe, droeneuh jeuet neupeuduek barang-barang nyang manyang jih meulaén lam padum-padum boh kolom nyang independen, neubri kesan tata letak Masonry:
Namun, na dua boh keterbatasan deungon cara nyoe:
Urutan barang-barang nyan beda ngon peu nyang akan na deungon tata letak Masonry nyang nyata. Deungon Flexbox, barang-barang peunoh kolom phon dilee dan, watee ka peunoh, lheuh nyan jak bak kolom selanjut jih. Deungon Masonry, barang-barang akan meutumpok di trek manapun (atau kolom lam hal nyoe) na leubeh le ruang nyang tersedia. Teuma cit, dan mungken leubeh peunteng, cara peugot nyoe peureulee droeneuh neupeugot manyang teutap keu wadah Flexbox; meunyo hana, hana bungkusan nyang akan teuka.
Perpustakaan Masonry pihak keu lhee Keu kasus nyang leubeh maju, pengembang ka geungui perpustakaan. Perpustakaan nyang paleng meusyeuhu ngon populer keu hai nyoe nakeuh nan jih Masonry, ngon jih jeuet ji-download kira-kira 200.000 go lam si minggu meunurot NPM. Squarespace cit geubri komponen tata letak nyang geupeugot tata letak Masonry, keu alternatif hana kode, ngon le situs nyang geungui. Keudua opsi nyoe geungui kode JavaScript keu geupeuduek barang lam tata letak. Batu nyang ka teupeugot Lon that seunang Masonry jinoe ka mulai deuh bak browser seubagoe fitur CSS nyang ka na lam browser. Lam watee nyang trep, droeneuh akan jeut neupakek Masonry lagee droeneuh neupakek Grid atawa Flexbox, yaitu hana peureulee workaround atawa kode pihak keu lhee. Tim lon di Microsoft ka ji peujak dukungan Masonry nyang ka ji peugot lam proyek sumber teubuka Chromium, nyang Edge, Chrome, dan le browser laen jih ji dasarkan. Mozilla seubeutoi jih nakeuh vendor browser phon nyang geuusulkan implementasi eksperimental Masonry bak thon 2020. Dan Apple pih ka that tertarik untuk geupeugot tata letak web baroe nyoe primitif. Buet keu standarisasi fitur nyan pih teungoh maju, ngon kesepakatan lam kelompok buet CSS teuntang arah umum dan bahkan tampilan tipe tampilan baro: grid-lanes. Meunyo droeneuh neuk neuteupeu leubèh lanjut teuntang Masonry ngon neulacak kemajuan, neukalön bak laman sumber daya CSS Masonry lôn. Bak watee, watee Masonry jeut keu fitur Baseline, saban lagee Grid atawa Flexbox, geutanyoe jeut ta pakek mantong dan tacok manfaat dari:
Kinerja nyang leubeh get, Leubeh get tanggapan, Mudah dipakek dan kode yang leubeh sederhana.
Mari ta kalon leubeh toe hai-hai nyoe. Kinerja nyang leubeh get Peugot sistem tata letak lagee Masonry droe, atawa pakek perpustakaan pihak keu lhee seubagoe gantoe, berarti droeneuh harus neujalankan kode JavaScript untuk neupeuduek barang-barang bak layeue. Nyoe pih meumakna kode nyoe akan render blok. Memang, boh hana sapeuë njang akan deuh, atawa hai-hai hana akan na bak teumpat njang patôt atawa ukuran njang patôt, sampoë kode JavaScript njan ka meujalan. Tata letak Masonry seureng dipakek keu bagian utama dari saboh halaman web, nyang berarti kode akan geupeugot konten utama droeneuh deuh leubeh awai nibak nyang mungken na, merendahkan LCP droeneuh, atawa metrik Largest Contentful Paint, nyang berperan rayeuk lam kinerja nyang dirasakan dan optimasi meusyen pencarian. Lon tes perpustakaan Masonry JS ngon tata letak sederhana dan ngon simulasi koneksi 4G nyang lambat lam DevTools. Perpustakaan nyan hana that rayeuk (24KB, 7.8KB gzipped), tapi 600ms untuk load lam kondisi tes lon. Nyoe nakeuh rekaman kinerja nyang geupeuleumah bahwa watee beban 600ms nyang panyang keu perpustakaan Masonry, dan hana kegiatan rendering laen nyang teujadi watee nyan teungoh teujadi:
Seulaén nibak nyan, lheuëh watèë load awai, skrip nyang ka geu-download lheuëh nyan peureulèë geu-parse, geukompilasi, lheuëh nyan geu-jalan. Mandum nyan, lagee nyang ka geukheun dilee, nakeuh geublokir rendering halaman. Deungon implementasi Masonry nyang ka teupeugot lam browser, geutanyoe hana akan na skrip untuk ta load dan ta jalankan. Meusén browser akan mantong geupeugot buet jih bak langkah rendering halaman awai. Responsivitas nyang leubeh get Meunan cit watèe saboh laman phôn that jimuat, neuubah ukuran jeundela browser jeuet keu rendering tata letak lam laman nyan lom. Bak titék nyoe, bah pih meunan, meunyo laman nyan geungui pustaka Masonry JS, hana peureulèë geu-load lom script nyan, sabab ka na .sino. Teuma, kode nyang peupinah barang bak teumpat nyang beutoi peureulee jijak. Jinoe perpustakaan khusus nyoe deuh jih cukop bagah bak geupeugot nyoe watee halaman memuat. Namun, nyan animasi barang-barang watee awaknyan peureulee jipinah u teumpat nyang beda bak window resize, dan nyoe jipeugot perbedaan rayeuk. Teuntèe, ureueng ngui hana geubi watee keu geu ubah ukuran jeundela browser gobnyan lagee geutanyoe pengembang. Teuma pengalaman resizing animasi nyoe jeut cukop meuganggu dan menambah watee nyang dirasakan untuk halaman untuk beradaptasi ngon ukuran baroe jih. Mudah Digunakan Dan Kode Leubeh Sederhana . Padum mudah tangui fitur web dan pakriban sederhana kode nyan deuh nakeuh faktor peunteng nyang jeut keu perbedaan rayeuk keu tim droeneuh. Awak nyan han mungken sepenteng pengalaman pengguna akhe, teunte, tapi pengalaman pengembang meudampak keu pemeliharaan. Meunyo tangui fitur web nyang ka teupeugot, na manfaat peunteng bak bagian nyan:
Pengembang nyang ka geuteupeu HTML, CSS, ngon JS kemungkenan rayeuk akan jeuet geungui fitur nyan deungon mudah kareuna ka geurancang keu geuintegrasi ngon jroh ngon konsisten ngon platform web nyang laen. Hana resiko putôh perubahan nyang geupeuturi lam cara fitur nyan geungui. Na resiko karap nol fitur nyan jeut keu hana le atawa hana dipeulara.
Lam kasus Masonry nyang ka teupeugot, kareuna nyan primitif tata letak, droeneuh neupakek dari CSS, saban lagee Grid atawa Flexbox, hana JS nyang terlibat. Meunan cit, properti CSS laen nyang meukaet ngon tata letak, lagee gap, meubut lagee nyang droeneuh harapkan. Hana trik atawa cara peugot njang djeuët ta teupeuë, dan hai-hai njang droëneuh peulajari njan ka djidokumentasi bak MDN. Keu lib Masonry JS, inisialisasi agak kompleks: peureulee atribut data ngon sintaks tertentu, meusajan ngon elemen HTML nyang teusöm keu geuatoe ukuran kolom ngon celah. Tambah lom, meunyo gata keuneuk span kolom, gata peureulee tapeutamong ukuran celah keudroe mangat bek na masalah:
