Təxminən 15 il əvvəl mən səyahət agentləri, hava limanı işçiləri və aviaşirkətlər üçün proqramlar hazırladığımız şirkətdə işləyirdim. Biz həmçinin UI komponentləri və tək səhifəlik proqram imkanları üçün öz daxili çərçivəmizi qurmuşuq. Bizdə hər şey üçün komponentlər var idi: sahələr, düymələr, tablar, diapazonlar, verilənlər cədvəlləri, menyular, tarix seçiciləri, seçmələr və çoxlu seçimlər. Hətta div komponentimiz də var idi. Yeri gəlmişkən, bizim div komponentimiz əla idi, o, bizə bütün brauzerlərdə dairəvi künclər yaratmağa imkan verdi, istər inanın, istərsə də inanmayın, o vaxt bunu etmək asan iş deyildi.
Bizim işimiz tariximizin JS, Ajax və dinamik HTML-nin bizi gələcəyə aparan bir inqilab kimi göründüyü bir nöqtədə baş verdi. Birdən bir səhifəni dinamik olaraq yeniləyə, serverdən məlumat əldə edə və yavaş görünən və iki səhifə arasında ekranda böyük ağ düzbucaqlı görünən digər səhifələrə keçmək məcburiyyətindən qaça bildik. Jeff Atwood (StackOverflow-un qurucusu) tərəfindən məşhur olan bir ifadə var idi, orada oxudu: "JavaScript-də yazıla bilən hər hansı bir proqram, nəticədə JavaScript-də yazılacaq." - Jeff Atwood
O vaxt bizim üçün bu, həqiqətən gedib həmin proqramları yaratmağa cəsarət kimi gəlirdi. JS ilə hər şeyi etmək yorğan təsdiqi kimi hiss olunurdu. Beləliklə, biz hər şeyi JS ilə etdik və həqiqətən də başqa işlərin görülməsi yollarını araşdırmaq üçün vaxt ayırmadıq. HTML və CSS-in nə edə biləcəyini düzgün öyrənmək üçün həqiqətən stimul hiss etmədik. Biz interneti bütövlükdə inkişaf edən proqram platforması kimi qəbul etməmişik. Biz bunu əsasən işləmək üçün lazım olan bir şey kimi görürdük, xüsusən də brauzer dəstəyinə gəldikdə. İşləri həll etmək üçün ona daha çox JS ata bilərik. Vebin necə işlədiyi və platformada mövcud olanlar haqqında daha çox öyrənmək üçün vaxt ayırmağım mənə kömək etdimi? Əlbəttə, mən çox güman ki, həqiqətən lazım olmayan bir dəstə kodu qırxmış ola bilərdim. Amma o zaman bəlkə də o qədər də deyil. Görürsünüz, o zaman brauzer fərqləri olduqca əhəmiyyətli idi. Bu, Internet Explorer-in hələ də dominant brauzer olduğu, Firefox-un yaxın ikinci olduğu, lakin Chrome sürətlə populyarlıq qazanması səbəbindən bazar payını itirməyə başladığı bir dövr idi. Baxmayaraq ki, Chrome və Firefox veb standartları ilə razılaşa bilsələr də, tətbiqlərimizin işlədiyi mühitlər IE6-nı uzun müddət dəstəkləmək məcburiyyətindəyik. Bizə IE8-i dəstəkləməyə icazə verildikdə belə, biz hələ də brauzerlər arasında çoxlu fərqlərlə qarşılaşmalı olduq. Təkcə bu deyil, o dövrün interneti platformaya daxil edilmiş bir çox imkanlara malik deyildi.
Bu günə sürətlə irəliləyin. İşlər çox dəyişdi. Bu imkanlardan nəinki əvvəlkindən daha çox şeyə malikik, həm də onların əlçatan olma sürəti də artıb.
İcazə verin, yenə sual verim: İnternetin necə işlədiyi və platformada mövcud olanlar haqqında daha çox öyrənmək üçün vaxt ayırmaq bu gün sizə kömək edəcəkmi? Tamamilə bəli. Bu gün veb platformanı başa düşməyi və istifadə etməyi öyrənmək sizə digər tərtibatçılar üzərində böyük üstünlük verir.
Performans, əlçatanlıq, cavabdehlik, bunların hamısı ilə birlikdə işlədiyinizdən asılı olmayaraq və ya sadəcə UI xüsusiyyətlərini göndərmənizdən asılı olmayaraq, bunu məsuliyyətli bir mühəndis kimi etmək istəyirsinizsə, əlinizdə olan alətləri bilmək hədəflərinizə daha sürətli və daha yaxşı çatmağınıza kömək edir.
Bəzi Şeylər Artıq Kitabxanaya Ehtiyacınız Olmaya bilər
Bu gün hansı brauzerlərin dəstəklədiyini bilməklə sual yaranır: Nədən imtina edə bilərik? 2025-ci ildə yuvarlaq künclər etmək üçün div komponentinə ehtiyacımız varmı? Əlbəttə, yox. Sərhəd-radius xüsusiyyəti bu nöqtədə 15 ildən artıqdır ki, hazırda istifadə edilən bütün brauzerlər tərəfindən dəstəklənir. Daha da həvəskar künclər üçün künc forması da tezliklə gələcək.
İndi bütün əsas brauzerlərdə mövcud olan və kod bazanızdakı mövcud asılılıqları əvəz etmək üçün istifadə edə biləcəyiniz nisbətən yeni xüsusiyyətlərə nəzər salaq.
Məsələ bütün sevimli kitabxanalarınızı dərhal tərk etmək və kod bazanızı yenidən yazmaq deyil. Qalan hər şeyə gəldikdə, əvvəlcə brauzer dəstəyini nəzərə almalı və layihəniz üçün xüsusi olan digər amillərə əsaslanaraq qərar verməlisiniz. Aşağıdakı xüsusiyyətlər üç əsas brauzer mühərrikində (Chromium, WebKit və Gecko) həyata keçirilir, lakin siz onlardan dərhal istifadə etməyinizə mane olan müxtəlif brauzer dəstəyi tələbləriniz ola bilər. İndi bu xüsusiyyətlər haqqında öyrənmək üçün hələ də yaxşı vaxtdır və bəlkə də nə vaxtsa onlardan istifadə etməyi planlaşdırırsınız.
Popoverlər və Dialoqlar
Popover API,
Əlbəttə ki, internet bağlantı sürətiniz də artıb, lakin bu, hamı üçün belə deyil. Və hər kəsin eyni cihaz imkanları yoxdur. Platforma ilə edə biləcəyiniz şeylər üçün üçüncü tərəf kodunu götürmək, bunun əvəzinə, çox güman ki, daha çox kod göndərdiyiniz və buna görə də adətən etdiyinizdən daha az müştəriyə çatmağınız deməkdir. İnternetdə pis yükləmə performansı böyük imtina nisbətlərinə gətirib çıxarır və brendin nüfuzuna xələl gətirir. Cihazlarda daha az kod işlətmək Bundan əlavə, müştərilərinizin cihazlarına göndərdiyiniz kod, platformanın üstündə daha az JavaScript abstraksiyasından istifadə edərsə, çox güman ki, daha sürətli işləyir. O, həmçinin, ehtimal ki, standart olaraq daha həssas və daha əlçatandır. Bütün bunlar daha çox və daha xoşbəxt müştərilərə səbəb olur. Həmkarım Alex Russell-in illik performans bərabərsizliyi ilə bağlı bloqunu yoxlayın, bu, sərvət bərabərsizliyinə görə milyardlarla istifadəçisi olan bazarlarda premium cihazların böyük ölçüdə olmadığını göstərir. Və bu boşluq yalnız zaman keçdikcə artır.
Quraşdırılmış hörgü planı Tezliklə gələcək və məni çox həyəcanlandıran bir veb platforma xüsusiyyəti CSS Masonry-dir.
Masonluğun nə olduğunu izah etməklə başlayım. Masonluq Nədir Masonluq, Pinterest tərəfindən illər əvvəl məşhurlaşan bir tərtibat növüdür. O, məzmunun müstəqil treklərini yaradır ki, orada elementlər özlərini trekin başlanğıcına mümkün qədər yaxınlaşdırır.
Bir çox insanlar Masonluğu portfellər və foto qalereyalar üçün əla seçim kimi görürlər ki, bu da əlbəttə ki, edə bilər. Lakin Masonluq Pinterest-də gördüyünüzdən daha çevikdir və o, yalnız şəlalə kimi tərtibatlarla məhdudlaşmır. Masonluq planında:
Tracks sütunlar və ya sətirlər ola bilər:
Məzmun treklərinin hamısı eyni ölçüdə olmamalıdır:
Elementlər bir neçə treki əhatə edə bilər:
Əşyalar xüsusi yollara yerləşdirilə bilər; onlar həmişə avtomatik yerləşdirmə alqoritminə əməl etmək məcburiyyətində deyillər:
Demolar Chromium-da qarşıdan gələn CSS Masonry tətbiqindən istifadə edərək hazırladığım bir neçə sadə demo var. Elementlərin (bu halda başlıq) bir neçə treki necə əhatə edə biləcəyini göstərən foto qalereya demosu:
Müxtəlif ölçülü trekləri göstərən başqa bir foto qalereya:
Bəzi izləri digərlərindən daha geniş olan xəbər saytının tərtibatı və tərtibatın bütün enini əhatə edən bəzi elementlər:
Elementlərin xüsusi treklərə yerləşdirilə biləcəyini göstərən kanban lövhəsi:
Qeyd: Theəvvəlki demolar əksər veb istifadəçiləri üçün hələ əlçatan olmayan Chromium versiyası ilə hazırlanmışdır, çünki CSS Masonry yalnız brauzerlərdə tətbiq olunmağa başlayır. Bununla belə, veb tərtibatçıları artıq illərdir ki, Masonry layouts yaratmaq üçün kitabxanalardan məmnuniyyətlə istifadə edirlər. Bu gün hörgüdən istifadə edən saytlar Həqiqətən, Masonluq bu gün internetdə olduqca yaygındır. Pinterestdən başqa tapdığım bir neçə nümunə:
Və daha bir neçə daha az bariz nümunə:
Bəs, bu planlar necə yaradılıb? Çözüm yolları İstifadə etdiyim bir hiylə əvəzinə Flexbox tərtibatından istifadə etmək, istiqamətini sütuna dəyişdirmək və onu bükmək üçün təyin etməkdir. Beləliklə, siz müxtəlif hündürlükdə olan əşyaları çoxlu müstəqil sütunlara yerləşdirərək, Hörgü düzümü təəssüratı yarada bilərsiniz:
Bununla belə, bu həll yolu ilə bağlı iki məhdudiyyət var:
Əşyaların sırası həqiqi Masonluq düzümü ilə olacağından fərqlidir. Flexbox ilə elementlər əvvəlcə birinci sütunu doldurur və o dolduqda növbəti sütuna keçir. Masonluqda əşyalar hansı yolda (və ya bu halda sütunda) daha çox yer varsa, yığılacaqdı. Həm də və bəlkə də daha önəmlisi, bu həll yolu Flexbox konteynerinə sabit hündürlüyü təyin etməyi tələb edir; əks halda heç bir bükülmə baş verməz.
Üçüncü tərəf Masonluq Kitabxanaları Daha inkişaf etmiş hallar üçün tərtibatçılar kitabxanalardan istifadə edirlər. Bunun üçün ən məşhur və populyar kitabxana sadəcə Masonry adlanır və NPM-ə görə həftədə təxminən 200.000 dəfə yüklənir. Squarespace həmçinin kodsuz alternativ üçün Masonry layoutunu göstərən layout komponenti təqdim edir və bir çox saytlar ondan istifadə edir. Bu seçimlərin hər ikisi elementləri tərtibata yerləşdirmək üçün JavaScript kodundan istifadə edir. Quraşdırılmış hörgü Masonluğun indi brauzerlərdə daxili CSS xüsusiyyəti kimi görünməyə başlaması məni çox həyəcanlandırır. Zamanla siz Grid və ya Flexbox etdiyiniz kimi Masonry-dən istifadə edə biləcəksiniz, yəni heç bir həll yoluna və ya üçüncü tərəf koduna ehtiyac duymadan. Microsoft-dakı komandam Edge, Chrome və bir çox digər brauzerlərin əsaslandığı Chromium açıq mənbə layihəsində daxili Masonluq dəstəyini həyata keçirir. Mozilla əslində 2020-ci ildə Masonry-nin eksperimental tətbiqini təklif edən ilk brauzer satıcısı idi. Və Apple də bu yeni veb tərtibatını primitiv etməkdə çox maraqlıdır. Xüsusiyyətin standartlaşdırılması üzrə işlər də CSS işçi qrupu ilə ümumi istiqamət və hətta yeni ekran tipli displey haqqında razılığa gələrək irəliləyir: şəbəkə zolaqları. Masonluq haqqında daha çox öyrənmək və tərəqqini izləmək istəyirsinizsə, mənim CSS Masonry resursları səhifəmə baxın. Vaxt keçdikcə Masonluq, Grid və ya Flexbox kimi Baseline xüsusiyyətinə çevrildikdə, biz ondan sadəcə istifadə edib faydalana biləcəyik:
Daha yaxşı performans, Daha yaxşı reaksiya, İstifadə asanlığı və daha sadə kod.
Gəlin bunlara daha yaxından nəzər salaq. Daha Yaxşı Performans Öz Masonluğa bənzər layout sisteminizi yaratmaq və ya bunun əvəzinə üçüncü tərəf kitabxanasından istifadə etmək, elementləri ekranda yerləşdirmək üçün JavaScript kodunu işə salmalı olacaqsınız. Bu həm də o deməkdir ki, bu kod bloklanacaq. Həqiqətən də, JavaScript kodu işə salınana qədər ya heç nə görünməyəcək, ya da əşyalar lazımi yerlərdə və ya lazımi ölçülərdə olmayacaq. Hörgü düzümü tez-tez veb səhifənin əsas hissəsi üçün istifadə olunur, bu o deməkdir ki, kod əsas məzmununuzu başqa cür ola biləcəyindən daha gec göstərəcək, LCP və ya qəbul edilən performans və axtarış motorunun optimallaşdırılmasında böyük rol oynayan Ən Böyük Məzmunlu Paint metrikinizi alçaldacaq. Mən Masonry JS kitabxanasını sadə tərtibatla və DevTools-da yavaş 4G bağlantısını simulyasiya etməklə sınaqdan keçirdim. Kitabxana çox böyük deyil (24KB, 7.8KB gzipped), lakin mənim sınaq şərtlərimdə yükləmək üçün 600ms vaxt lazım idi. Budur, Masonry kitabxanası üçün uzun 600 ms yükləmə müddətini və bu baş verən zaman başqa heç bir göstərmə fəaliyyətinin baş vermədiyini göstərən bir performans qeydi:
Bundan əlavə, ilkin yükləmə müddətindən sonra yüklənmiş skriptin təhlili, tərtib edilməsi və sonra işə salınması lazım idi. Bütün bunlar, əvvəllər qeyd edildiyi kimi, səhifənin göstərilməsinə mane olurdu. Brauzerdə quraşdırılmış Masonry tətbiqi ilə yükləmək və işlətmək üçün skriptimiz olmayacaq. Brauzer mühərriki ilkin səhifənin göstərilməsi addımı zamanı öz işini görəcək. Daha yaxşı cavabdehlik Səhifənin ilk yükləndiyi zaman olduğu kimi, brauzer pəncərəsinin ölçüsünün dəyişdirilməsi həmin səhifədə yenidən tərtibatın göstərilməsinə gətirib çıxarır. Bu nöqtədə, əgər səhifə Masonry JS kitabxanasından istifadə edirsə, skripti yenidən yükləməyə ehtiyac yoxdur, çünki o, artıqburada. Bununla belə, elementləri lazımi yerlərdə hərəkət etdirən kodun işə salınması lazımdır. İndi bu xüsusi kitabxana, səhifə yüklənərkən bunu etməkdə olduqca sürətli görünür. Bununla belə, o, elementləri pəncərə ölçüsündə başqa yerə köçürmək lazım olduqda canlandırır və bu, böyük fərq yaradır. Əlbəttə ki, istifadəçilər biz tərtibatçılar kimi brauzer pəncərələrinin ölçüsünü dəyişməyə vaxt sərf etmirlər. Lakin bu animasiya ölçüsünü dəyişmə təcrübəsi olduqca sarsıdıcı ola bilər və səhifənin yeni ölçüsünə uyğunlaşması üçün lazım olan vaxta əlavə olunur. İstifadə Asanlığı və Sadə Kod Veb funksiyasından istifadənin nə qədər asan olması və kodun nə qədər sadə görünməsi komandanız üçün böyük fərq yarada biləcək mühüm amillərdir. Əlbəttə ki, onlar heç vaxt son istifadəçi təcrübəsi qədər vacib ola bilməzlər, lakin inkişaf etdirici təcrübəsi davamlılığa təsir göstərir. Daxili veb funksiyasından istifadə bu cəbhədə mühüm faydalar gətirir:
Artıq HTML, CSS və JS-i bilən tərtibatçılar, çox güman ki, bu xüsusiyyətdən asanlıqla istifadə edə biləcəklər, çünki o, yaxşı inteqrasiya etmək və veb platformanın qalan hissəsi ilə uyğunlaşmaq üçün hazırlanmışdır. Xüsusiyyətin necə istifadə edildiyinə dair dəyişiklikləri pozmaq riski yoxdur. Bu xüsusiyyətin köhnəlməsi və ya qorunmaması riski demək olar ki, sıfırdır.
Quraşdırılmış Masonluq vəziyyətində, layout primitiv olduğundan, siz onu CSS-dən istifadə edirsiniz, Grid və ya Flexbox kimi, heç bir JS iştirak etmir. Həmçinin, boşluq kimi digər tərtibatla əlaqəli CSS xassələri gözlədiyiniz kimi işləyir. Bilmək üçün heç bir hiylə və ya həll yolu yoxdur və öyrəndiyiniz şeylər MDN-də sənədləşdirilir. Masonry JS lib üçün başlanğıclaşdırma bir qədər mürəkkəbdir: sütun və boşluq ölçülərini təyin etmək üçün gizli HTML elementləri ilə yanaşı, xüsusi sintaksisi olan məlumat atributunu tələb edir. Üstəlik, sütunları genişləndirmək istəyirsinizsə, problemlərin qarşısını almaq üçün boşluq ölçüsünü özünüz daxil etməlisiniz:
Bunu daxili Masonluq tətbiqinin necə görünəcəyi ilə müqayisə edək:
Daha sadə, daha yığcam kod, sadəcə olaraq boşluq kimi şeylərdən istifadə edə bilər və torda olduğu kimi 2-ci diapazonla yayılan treklər yerinə yetirilir və boşluq ölçüsünü ehtiva edən düzgün eni hesablamağınızı tələb etmir. Nəyin mövcud olduğunu və nə vaxt mövcud olduğunu necə bilmək olar? Ümumiyyətlə, sual əslində JS kitabxanası üzərində daxili Masonluqdan istifadə etməyinizlə bağlı deyil, nə vaxtdır. Masonry JS kitabxanası heyrətamizdir və uzun illərdir ki, bir çox xoşbəxt tərtibatçılar və istifadəçilər üçün veb platformadakı boşluğu doldurur. Əlbəttə ki, onu quraşdırılmış Masonluq tətbiqi ilə müqayisə etsəniz, bir neçə çatışmazlıq var, lakin bu tətbiq hazır deyilsə, bunlar vacib deyil. Bu yeni veb platforma xüsusiyyətlərini sadalamaq mənim üçün asandır, çünki mən brauzer satıcısında işləyirəm və buna görə də nələrin gəldiyini bilirəm. Lakin tərtibatçılar tez-tez anketdən sonra yeni şeyləri izləməyin çətin olduğunu paylaşırlar. Məlumatlı olmaq çətindir və şirkətlər hər zaman öyrənməyə üstünlük vermir. Buna kömək etmək üçün sizə lazım olan məlumatı tez əldə edə bilmək üçün sadə və yığcam üsullarla yeniləmələri təmin edən bir neçə resurs təqdim edirik:
Veb platformada tədqiqatçı saytı var: Onun buraxılış qeydləri səhifəsi ilə maraqlana bilərsiniz. Əgər RSS-ni bəyənirsinizsə, buraxılış qeydləri lentinə, eləcə də Yeni Mövcud və Geniş Əlçatan lentlərə baxın.
VebPlatformanın Status tablosu: Onun müxtəlif İlkin il səhifələrini bəyənə bilərsiniz.
Chrome Platforma Statusunun yol xəritəsi səhifəsi.
Bir az daha çox vaxtınız varsa, brauzer satıcılarının buraxılış qeydləri ilə də maraqlana bilərsiniz:
Chrome Kənar Firefox Safari
Daha çox resurs üçün Veb Platformada Naviqasiya Cheatsheet-ə baxın. Mənim Şey Hələ Həyata Keçirilməyib Problemin digər tərəfi də budur. İzləmək üçün vaxt, enerji və yollar tapsanız belə, səsinizi eşitdirmək və sevimli xüsusiyyətlərinizi həyata keçirməklə hələ də məyusluq var. Ola bilsin ki, siz illərdir ki, müəyyən bir səhvin həllini və ya hələ də çatışmayan bir brauzerdə xüsusi funksiyanın göndərilməsini gözləyirsiniz. Deyim ki, brauzer satıcıları qulaq asır. Mən hər zaman tərtibatçı siqnalları və rəyləri müzakirə etdiyimiz bir neçə təşkilatlararası komandanın üzvüyəm. Biz həm hər bir brauzer satıcısında daxili, həm də forumlarda, açıq mənbəli layihələrdə, bloqlarda və sorğularda xarici/ictimai olan çoxlu müxtəlif rəy mənbələrinə baxırıq. Və biz həmişə tərtibatçıların xüsusi ehtiyaclarını və istifadə hallarını bölüşməsi üçün daha yaxşı yollar yaratmağa çalışırıq. Beləliklə, əgər bacarırsınızsa, lütfən, brauzer satıcılarından daha çox tələb edin və sizə lazım olan funksiyaları həyata keçirmək üçün bizə təzyiq edin. Mən başa düşürəm ki, bu, vaxt tələb edir və həm də qorxuducu ola bilər (giriş üçün yüksək maneəni qeyd etmirəm), həm də işləyir. Burada öz (və ya şirkətinizin) səsini eşitdirməyin bir neçə yolu var: İllik JS vəziyyəti, CSS vəziyyəti və HTML vəziyyəti sorğularını götürün. Onlar brauzer satıcılarının işlərinə necə üstünlük verməsində böyük rol oynayırlar. Brauzerlər arasında ardıcıl olaraq həyata keçirilməsi üçün xüsusi standart əsaslı API-yə ehtiyacınız varsa, növbəti Interop layihəsi iterasiyasında təklif təqdim etməyi düşünün. Bu, daha çox vaxt tələb edir, lakin Shopify və RUMvision-ın Interop 2026 üçün istək siyahılarını necə paylaşdıqlarını nəzərdən keçirin. Bu kimi təfərrüatlı məlumat brauzer satıcılarının prioritetləşdirməsi üçün çox faydalı ola bilər. Brauzer təchizatçılarına təsir etmək üçün daha faydalı bağlantılar üçün Veb Platformada Naviqasiya Cheatsheet-ə baxın. Nəticə Bağlamaq üçün ümid edirəm ki, bu məqalə sizə düşünmək üçün bir neçə şey buraxdı:
Masonluq və digər qarşıdan gələn veb xüsusiyyətləri üçün həyəcan. İstifadəyə başlamaq istəyə biləcəyiniz bir neçə veb xüsusiyyətləri. Daxili funksiyaların xeyrinə silə biləcəyiniz bir neçə fərdi və ya 3-cü tərəf kodu. Gələcəkləri izləmək və brauzer satıcılarına təsir etmək üçün bir neçə yol.
Daha da əhəmiyyətlisi, ümid edirəm ki, sizi veb platformadan tam potensialına qədər istifadə etməyin faydalarına inandırmışam.
