Takmynan 15 ýyl ozal syýahat agentleri, howa menziliniň işgärleri we awiakompaniýalar üçin programmalar guran bir kompaniýada işleýärdim. Şeýle hem, UI komponentleri we bir sahypalyk programma mümkinçilikleri üçin öz içerki çarçuwamyzy gurduk. Bizde hemme zat üçin komponentler bardy: meýdanlar, düwmeler, tablar, diapazonlar, maglumat bazalary, menýular, senäni saýlaýjylar, saýlaýanlar we köp saýlawlar. Hatda diw komponenti hem bardy. “Div” komponentimiz ajaýypdy, ähli brauzerlerde tegelek burçlary etmäge mümkinçilik berdi, ynanýan ýa-da ynanmaýan, şol wagt etmek aňsat däldi.
Işimiz, JS, Ajax we dinamiki HTML bize geljege getiren ynkylap hökmünde görlende taryhymyzyň bir pursatynda bolup geçdi. Birden sahypany dinamiki täzeläp, serwerden maglumat alyp, haýal görünýän we iki sahypanyň arasynda ekranda uly ak gönüburçlugy ýalpyldadýan beýleki sahypalara geçmekden saklanyp bilerdik. Jeff Atwood (StackOverflow-y esaslandyryjy) tarapyndan meşhur bolan bir söz bar: “JavaScript-de ýazylyp bilinjek islendik programma ahyrsoňy JavaScript-de ýazylar.” - Jeff Atwud
Şol wagt biziň üçin bu hakykatdanam şol programmalary döretmäge het edip bilýän ýalydy. JS bilen hemme zady etmek üçin ýorgan tassyklama ýaly duýuldy. Şeýlelik bilen JS bilen hemme zady etdik we işleriň beýleki usullaryny öwrenmek üçin hakykatdanam wagt tapmadyk. HTML we CSS-iň edip biljek zatlaryny dogry öwrenmäge höwes duýmadyk. Web-i tutuşlygyna ösýän programma platformasy hökmünde kabul etmedik. Esasanam brauzer goldawy barada aýdylanda, köplenç işlemeli zatlarymyz hökmünde görýärdik. Işleri bitirmek üçin oňa has köp JS atyp bilerdik. Webiň işleýşi we platformadaky zatlar hakda has giňişleýin öwrenmek üçin wagt sarp edip, maňa kömek edip bilermi? Elbetde, hakykatdanam zerur däl bir topar kody syryp bilerdim. Emma, şol wagt, belki beýle kän däl. Görýäňizmi, şol döwürde brauzer tapawudy gaty möhümdi. Bu wagt Internet Explorer agdyklyk edýän brauzer bolup, Firefox iň ýakyn ikinji bolupdy, ýöne Chrome çalt meşhurlyk gazanyp, bazar paýyny ýitirip başlady. “Chrome” we “Firefox” web ülňüleri barada ylalaşmaga gaty ökde bolsalar-da, programmalarymyzyň işleýän gurşawy uzak wagtlap IE6-ny goldamalydygymyzy aňladýardy. IE8-i goldamaga rugsat berlende-de, brauzerleriň arasyndaky köp tapawut bilen ýüzbe-ýüz bolmaly bolduk. Diňe bu däl, döwrüň webinde platforma gurlan köp mümkinçilik ýokdy.
Şu güne çalt öňe sürüň. .Agdaý gaty üýtgedi. Diňe bu mümkinçilikler öňküsinden has köp däl, eýsem olaryň elýeterliligi hem ýokarlandy. Soňra ýene bir sorag bermäge rugsat ediň: Webiň işleýşi we platformada bar bolan zatlar barada has giňişleýin maglumat almak üçin wagt sarp edip bilersiňizmi? Elbetde hawa. Häzirki wagtda web platformasyna düşünmegi we ulanmagy öwrenmek, beýleki döredijilere garanyňda uly artykmaçlyga eýe bolýar. Işleýiş, elýeterlilik, duýgurlyk, bularyň hemmesi bilelikde işlemek ýa-da diňe UI aýratynlyklaryny ibermek bilen işleýärsiňizmi, jogapkär inerener hökmünde etmek isleseňiz, elýeterli gurallary bilmek, maksatlaryňyza has çalt we has gowy ýetmäge kömek edýär. Animor üçin kitaphana gerek däl bolmagy mümkin käbir zatlar Häzirki wagtda brauzerleriň nämäni goldaýandygyny bilmek bilen, sorag: Näme gazyp bileris? 2025-nji ýylda tegelek burçlary ýerine ýetirmek üçin diw komponenti gerekmi? Elbetde, beýle däl. Serhet radiusynyň häsiýeti, häzirki wagtda 15 ýyldan gowrak wagt bäri ulanylýan ähli brauzerler tarapyndan goldanýar. Burç görnüşi hem ýakyn wagtda, hatda janköýer burçlary üçinem gelýär. Geliň, häzirki wagtda ähli esasy brauzerlerde bar bolan we kod bazasyndaky bar bolan garaşlylyklary çalyşmak üçin ulanyp boljak soňky aýratynlyklara göz aýlalyň. Esasy zat, söýgüli kitaphanalaryňyzy derrew çukurlamak we kod koduňyzy täzeden ýazmak däl. Galan zatlar barada aýdylanda bolsa, ilki bilen brauzer goldawyny göz öňünde tutmaly we taslamaňyza mahsus beýleki faktorlara esaslanyp karar bermeli bolarsyňyz. Aşakdaky aýratynlyklar üç esasy brauzer dwigatelinde (Hrom, WebKit we Gecko) amala aşyrylýar, ýöne derrew ulanmagyňyzyň öňüni alýan dürli brauzer goldaw talaplary bolup biler. Indi bu aýratynlyklary öwrenmek üçin amatly pursat, belki-de belli bir wagtda ulanmagy meýilleşdiriň. Popovers we Dialoglar “Popover API”,
Elbetde, internete birikmegiň tizligi hem artdy, ýöne bu hemmeler üçin beýle däl. Hemmeleriň birmeňzeş enjam mümkinçilikleri ýok. Platforma bilen edip boljak zatlar üçin üçünji tarap koduny çekmek, munuň ýerine has köp kod iberýändigiňizi aňladýar we şonuň üçin adaty bolşy ýaly az müşderä ýetýär. Webde, erbet ýüklemek öndürijiligi uly terk edilmegine sebäp bolýar we markanyň abraýyna zyýan ýetirýär. Enjamlarda az kod işlemek Mundan başga-da, müşderileriň enjamlaryna iberýän koduňyz, platformanyň üstünde az JavaScript abstraksiýalaryny ulanýan bolsa, has çalt işleýär. Mundan başga-da, has duýgur we has elýeterli bolmagy ähtimal. Bularyň hemmesi has köp we bagtly müşderilere alyp barýar. Kärdeşim Aleks Rasseliň ýyllyk öndürijilik deňsizligi boşluk blogyny barlaň, bu baýlyk deňsizligi sebäpli premium enjamlaryň milliardlarça ulanyjy bilen bazarlarda köplenç ýokdugyny görkezýär. Bu boşluk diňe wagtyň geçmegi bilen ösýär.
Gurlan mason gurluşy Soonakynda çykjak we meni gaty tolgundyrýan web platforma aýratynlygy CSS Masonry.
Masoniýanyň nämedigini düşündirip başlalyň. Masoniýa näme? Masoniýa, Pinterest tarapyndan birnäçe ýyl ozal meşhur bolan düzülişiň bir görnüşidir. Özbaşdak mazmunly ýollary döredýär, içinde zatlar mümkin boldugyça ýoluň başyna ýakynlaşýar.
Köp adamlar Masonry portfeller we surat galereýalary üçin ajaýyp wariant hökmünde görýärler, bu elbetde edip biler. Emma mason, Pinterest-de görşüňizden has çeýe we diňe şarlawuk ýaly ýerleşişler bilen çäklenmeýär. Mason gurluşynda:
Acksollar sütün ýa-da hatar bolup biler:
Mazmunyň ýazgylarynyň hemmesi birmeňzeş bolmaly däldir:
Harytlar birnäçe ýoly öz içine alyp biler:
Harytlar belli bir ýollara ýerleşdirilip bilner; elmydama awtomatiki ýerleşdiriş algoritmine eýermeli däldirler:
Demos Ine, Hromda CSS Masonry-yň ýakyn wagtda durmuşa geçirilmegini ulanyp, birnäçe ýönekeý görkezişim. Harytlaryň (bu ýagdaýda ady) birnäçe ýoly nädip öwrüp biljekdigini görkezýän surat galereýasy demo:
Dürli ululykdaky ýollary görkezýän başga bir surat galereýasy:
Käbir ýollar bilen täzelikler sahypasynyň tertibi beýlekilerden has giň we düzülişiň ähli giňligini öz içine alýan käbir zatlar:
Harytlaryň belli bir ýollara ýerleşdirilip bilinjekdigini görkezýän kanban tagtasy:
Bellik :.Öňki görkezişler, web ulanyjylarynyň köpüsine elýeterli bolmadyk Hromyň wersiýasy bilen ýasaldy, sebäbi CSS Masonry diňe brauzerlerde durmuşa geçirilip başlandy. Şeýle-de bolsa, web döredijiler eýýäm ençeme ýyl bäri Masonry düzülişini döretmek üçin kitaphanalardan peýdalanýarlar. Häzirki wagtda mason ulanýan saýtlar Hakykatdanam, masonçylyk häzirki wagtda internetde adaty bir zat. Ine, Pinterest-den başga birnäçe mysal tapdym:
Moreene-de birnäçe düşnüksiz mysallar:
Onda bu düzülişler nähili döredildi? Iş usullary Ulanyşymy gören bir hilem, ýerine Flexbox düzülişini ulanmak, ugruny sütüne üýtgetmek we dolamak üçin düzmek. Şeýlelik bilen, dürli belentlikdäki zatlary köp, garaşsyz sütünlere ýerleşdirip bilersiňiz, mason gurluşynyň täsirini berýär:
Şeýle-de bolsa, bu işiň iki sany çäklendirmesi bar:
Harytlaryň tertibi hakyky mason gurluşy bilen tapawutlanýar. Flexbox bilen elementler ilki birinji sütüni doldurýar we doly bolanda indiki sütüne geçýär. Masoniýa bilen, haýsy ýolda (ýa-da bu ýagdaýda sütün) has köp ýer bar bolsa, zatlar saklanar. Mundan başga-da, has möhümi, bu iş Flexbox konteýnerine belli bir beýikligi bellemegi talap edýär; bolmasa, hiç hili örtük bolmazdy.
Üçünji tarap mason kitaphanalary Has ösen ýagdaýlar üçin döredijiler kitaphanalary ulanýarlar. Munuň üçin iň meşhur we meşhur kitaphana diňe “Masonry” diýilýär we NPM-e görä hepdede takmynan 200,000 gezek göçürilýär. “Squarespace”, kodsyz alternatiwa üçin “Masonry” düzülişini düzýän düzüliş komponentini hem üpjün edýär we köp saýt ony ulanýar. Bu wariantlaryň ikisi-de tertibe ýerleşdirmek üçin JavaScript koduny ulanýar. Gurlan mason Masonriniň indi içerki CSS aýratynlygy hökmünde brauzerlerde peýda bolup başlandygyna gaty begenýärin. Wagtyň geçmegi bilen, “Grid” ýa-da “Flexbox” ýaly, “Masonry” -y ulanyp bilersiňiz, ýagny hiç hili iş ýa-da üçünji tarap kody gerek bolmazdan. Microsoft-daky toparym, Edge, Chrome we beýleki köp brauzerlere esaslanýan Chromium açyk çeşme taslamasynda gurlan Masonry goldawyny amala aşyrýar. “Mozilla” aslynda 2020-nji ýylda “Masonry” -nyň eksperimental durmuşa geçirilmegini teklip eden ilkinji brauzer satyjysydy. Şeýle hem, “Apple” bu täze web düzülişini ilkibaşda amala aşyrmak bilen gyzyklandy. Aýratynlygy standartlaşdyrmak boýunça iş CSS iş toparynyň içinde umumy ugur we hatda täze displeý görnüşi: gözenek zolaklary barada ylalaşyk bilen öňe barýar. Masoniýa hakda has giňişleýin öwrenmek we ösüşi yzarlamak isleseňiz, CSS Masonry çeşmeler sahypamy gözden geçiriň. Wagtyň geçmegi bilen, Masonry, edil Grid ýa-da Flexbox ýaly Esasy aýratynlyga öwrülende, biz ony ulanyp bileris we peýdalanarys:
Has gowy öndürijilik, Has gowy jogap bermek, Ulanylyş aňsatlygy we has ýönekeý kod.
Geliň, bulara has içgin seredeliň. Has gowy öndürijilik “Masonry” ýaly düzüliş ulgamyny ýasamak ýa-da ýerine üçünji tarap kitaphanasyny ulanmak, ekrana zatlar ýerleşdirmek üçin JavaScript koduny işletmeli bolarsyňyz. Bu, bu koduň petiklenjekdigini aňladýar. Hakykatdanam, hiç zat peýda bolmaz, ýa-da JavaScript kody işleýänçä zatlar gerek ýerlerde ýa-da dogry ölçeglerde bolmaz. Hünär tertibi köplenç web sahypasynyň esasy bölegi üçin ulanylýar, bu kod esasy mazmunyňyzy LCP-ni peseldip, ýa-da duýulýan öndürijilikde we gözleg motory optimizasiýasynda uly rol oýnaýan iň uly mazmunly boýag ölçegini peseldip biljekdigini aňladýar. Masonry JS kitaphanasyny ýönekeý tertip bilen we DevTools-da haýal 4G birikmesini simulasiýa edip synagdan geçirdim. Kitaphana gaty uly däl (24KB, 7.8KB gzipli), ýöne synag şertlerimde ýüklemek üçin 600m gerek boldy. Ine, Masonry kitaphanasy üçin 600 metr uzynlykdaky ýük wagtyny we bu waka wagtynda başga hiç hili işiň bolmandygyny görkezýän ýerine ýetiriş ýazgysy:
Mundan başga-da, başlangyç ýük wagtyndan soň göçürilen skript derňelmeli, düzülmeli we soň işlemeli. Bularyň hemmesi, ýokarda belläp geçişimiz ýaly, sahypanyň görkezilmegini bökdeýärdi. Brauzerde gurlan Masonry ýerine ýetirişi bilen, ýüklemek we işletmek üçin skriptimiz bolmaz. Brauzeriň hereketlendirijisi, başlangyç sahypany görkezmek ädiminde diňe öz işini eder. Has gowy jogap bermek Sahypa ilkinji gezek ýüklenende bolşy ýaly, brauzer penjiresiniň ölçegini üýtgetmek şol sahypadaky ýerleşişiň täzeden görkezilmegine getirýär. Şu wagt sahypa Masonry JS kitaphanasyny ulanýan bolsa, skripti täzeden ýüklemegiň zerurlygy ýok, sebäbi ol eýýäm barşu ýerde. Şeýle-de bolsa, zatlary dogry ýerlere geçirýän kod işlemeli. Indi bu ýörite kitaphana sahypa ýüklenende muny ýerine ýetirmekde gaty çalt görünýär. Şeýle-de bolsa, penjiräniň ölçegi boýunça başga ýere geçmeli bolanda zatlary janlandyrýar we bu uly üýtgeşiklik döredýär. Elbetde, ulanyjylar öz brauzerleriniň penjirelerini üýtgetmek üçin wagt sarp etmeýärler. Thisöne bu animasiýa ölçegini üýtgetmek gaty täsirli bolup, sahypanyň täze ululygyna uýgunlaşmagy üçin gerekli wagty goşýar. Ulanylyş aňsatlygy we has ýönekeý kod Web aýratynlygyny ulanmak nähili aňsat we koduň nähili ýönekeý bolmagy toparyňyz üçin uly üýtgeşiklik döredip biljek möhüm faktorlar. Elbetde, soňky ulanyjy tejribesi ýaly möhüm bolup bilmez, ýöne işläp düzüjiniň tejribesi durnuklylyga täsir edýär. Gurlan web aýratynlygyny ulanmak şol tarapdan möhüm peýdalary getirýär:
HTML, CSS we JS-ni eýýäm bilýän döredijiler bu aýratynlygy aňsatlyk bilen ulanyp bilerler, sebäbi oňat birleşmek we web platformasynyň galan bölekleri bilen sazlaşykly döredilen. Aýratynlygyň ulanylyşynda girizilen üýtgeşmeleri bozmak howpy ýok. Bu aýratynlygyň könelişen ýa-da öwrenilme howpy ýok diýen ýaly.
Gurlan Masonry meselesinde, bu başlangyç düzülişi sebäpli, ony CSS-den ulanýarsyňyz, edil Grid ýa-da Flexbox ýaly, JS gatnaşmaýar. Mundan başga-da, boşluk ýaly beýleki ýerleşiş bilen baglanyşykly CSS häsiýetleri, garaşyşyňyz ýaly işleýär. Bu barada bilmeli hileler ýa-da usullar ýok, öwrenýän zatlaryňyz MDN-de dokumentleşdirilýär. Masonry JS lib üçin başlangyç birneme çylşyrymly: sütüni we boşluk ululyklaryny kesgitlemek üçin gizlin HTML elementleri bilen birlikde belli bir sintaksis bilen maglumat atributyny talap edýär. Mundan başga-da, sütünleri aýlamak isleýän bolsaňyz, kynçylyklardan gaça durmak üçin boşlugyň ululygyny özüňiz goşmaly:
Geliň, gurlan Masonry ýerine ýetirişiniň nähili boljakdygy bilen deňeşdireliň:
Diňe boşluk ýaly zatlary ulanyp bilýän we aralyk ýollaryň 2-nji aralyk bilen edilişi ýaly, has ýönekeý, has ykjam kod, boşlugyň ululygyny öz içine alýan dogry ini hasaplamagy talap etmeýär. Nämäniň elýeterlidigini we haçan elýeterlidigini nädip bilmeli? Umuman aýdanyňda, sorag JS kitaphanasynyň üstünde gurlan Masonry ulanmaly däl-de, haçan bolar. Masonry JS kitaphanasy ajaýyp we köp ýyl bäri web platformasyndaky boşlugy doldurýar we köp sanly bagtly döredijiler we ulanyjylar üçin. Elbetde, gurlan Masonry ýerine ýetirişi bilen deňeşdirseňiz, onuň birnäçe kemçiligi bar, ýöne durmuşa geçirmäge taýyn bolmasa, bu möhüm däl. Bu ajaýyp täze web platforma aýratynlyklaryny sanamak maňa aňsat, sebäbi brauzer satyjysynda işleýärin we näme boljagyny bilýärin. Developöne işläp düzüjiler köplenç täze zatlary yzarlamagyň kyndygyny, anketadan soň gözleg geçirýärler. Habarly bolmak kyn we kompaniýalar her niçigem bolsa öwrenmegi ileri tutmaýarlar. Bu meselede kömek etmek üçin, ýönekeý we ykjam usullar bilen täzelenmeleri üpjün edýän birnäçe çeşme bar, şonuň üçin zerur maglumatlary çalt alyp bilersiňiz:
Web platformasynda gözlegçi sahypa bar: Neşir edilen bellikler sahypasy bilen gyzyklanyp bilersiňiz. Şeýle hem, RSS-i halaýan bolsaňyz, goýberiş bellikleriniň iýmitini, şeýle hem täze elýeterli we giňden elýeterli iýmitleri gözden geçiriň.
WebPlatforma ýagdaýy dolandyryş paneli: Dürli Baseline ýyl sahypalaryny halap bilersiňiz.
“Chrome Platform Status” -yň ýol kartasy sahypasy.
Biraz köp wagtyňyz bolsa, brauzer satyjylarynyň goýberiş bellikleri bilen gyzyklanyp bilersiňiz:
Chrome Gyrasy Firefox Safari
Has köp çeşme üçin “Web Platform Cheatsheet” -e serediň. Meniň işim henizem durmuşa geçirilmeýär Bu meseläniň beýleki tarapy. Gözlemegiň wagtyny, güýjüni we ýollaryny tapsaňyzam, sesiňizi eşitmekden we halaýan aýratynlyklaryňyzy durmuşa geçirmekden henizem lapykeçlik bar. Belki, belli bir näsazlygyň çözülmegine ýa-da henizem ýitirim bolan brauzerde iberilmegine belli bir aýratynlyk garaşýarsyňyz. Meniň diýjek bolýan zadym, brauzer satyjylary diňleýärler. Men hemişe dörediji signallary we seslenmeleri ara alyp maslahatlaşýan birnäçe gurama toparlarynyň bir bölegi. Her bir brauzer satyjysynyň içindäki we forumlarda, açyk çeşme taslamalarynda, bloglarda we anketalarda daşarky / köpçülige dürli seslenme çeşmelerine seredýäris. Hemişe, döredijilere aýratyn zerurlyklaryny paýlaşmak we ýagdaýlary ulanmak üçin has gowy ýollary döretmäge synanyşýarys. Şeýlelik bilen, mümkin bolsa, brauzer satyjylaryndan has köp zat talap ediň we size zerur aýratynlyklary durmuşa geçirmegimizi haýyş edýäris. Wagtyň gerekdigine, gorkuzyp biljekdigime düşünýärin (girmek üçin ýokary päsgelçilik diýmeli däl), ýöne bu hem işleýär. Ine (ýa-da kompaniýanyňyzyň) sesini eşitdirmegiň birnäçe usuly: Her ýyl JS ýagdaýyny, CSS ýagdaýyny we HTML gözlegini alyň. Brauzer satyjylarynyň işini ileri tutmagynda uly rol oýnaýarlar. Brauzerlerde yzygiderli durmuşa geçirilmegi üçin belli bir standart esasly API gerek bolsa, indiki Interop taslamasynyň iterasiýasynda teklip hödürlemegi göz öňünde tutuň. Bu has köp wagt talap edýär, ýöne “Shopify” we “RUMvision” -yň “Interop 2026” üçin isleg sanawlaryny nädip paýlaşandyklaryna göz aýlaň. Munuň ýaly jikme-jik maglumat brauzer satyjylary üçin ileri tutulmagy üçin gaty peýdaly bolup biler. Brauzer satyjylaryna täsir etmek üçin has peýdaly baglanyşyklar üçin, “Web Platform Cheatsheet” -e serediň. Netije Closeapmak üçin, bu makala size birnäçe pikirlenmeli zat galdy diýip umyt edýärin:
Masoniýa we beýleki çykjak web aýratynlyklary üçin tolgunma. Ulanyp başlamak isleýän birnäçe web aýratynlyklaryňyz. Gurlan aýratynlyklaryň peýdasyna aýryp bilýän adaty ýa-da 3-nji tarap kodunyň birnäçe bölegi. Geljekleri yzarlamagyň we brauzer satyjylaryna täsir etmegiň birnäçe usuly.
Has möhümi, web platformasyny doly mümkinçiliginden peýdalanmagyň artykmaçlyklaryna ynanýaryn diýip umyt edýärin.
