Тақрибан 15 сол пеш, ман дар ширкате кор мекардам, ки мо барои агентҳои сайёҳӣ, кормандони фурудгоҳ ва ширкатҳои ҳавопаймоӣ барномаҳо месозем. Мо инчунин чаҳорчӯбаи дохилии худро барои ҷузъҳои UI ва имкониятҳои як саҳифаи барнома сохтем. Мо барои ҳама ҷузъҳо доштем: майдонҳо, тугмаҳо, ҷадвалҳо, диапазонҳо, ҷадвалҳои додаҳо, менюҳо, санаҳо, интихобҳо ва бисёринтихобҳо. Мо ҳатто як ҷузъи div доштем. Дар омади гап, ҷузъи div мо олиҷаноб буд, он ба мо имкон дод, ки дар ҳама браузерҳо кунҷҳои мудаввар созем, ки он вақт коре осон набуд, ки бовар кунед ё не.

Кори мо дар як лаҳзаи таърихи мо сурат гирифт, ки JS, Ajax ва HTML динамикӣ ҳамчун инқилобе дида мешуд, ки моро ба оянда овард. Ногаҳон, мо метавонем як саҳифаро ба таври динамикӣ навсозӣ кунем, аз сервер маълумот гирем ва аз рафтан ба саҳифаҳои дигар худдорӣ кунем, ки он суст ба назар мерасид ва дар экран байни ду саҳифа росткунҷаи калони сафедро дурахшид. Як иборае мавҷуд буд, ки аз ҷониби Ҷефф Атвуд (асосгузори StackOverflow) маъмул шудааст, ки дар он чунин хонда шудааст: "Ҳар барномае, ки дар JavaScript навишта мешавад, дар ниҳоят бо JavaScript навишта мешавад." - Ҷефф Атвуд

Он вақт барои мо ин як ҷуръат барои рафтан ва сохтани он барномаҳоро ҳис мекард. Чунин ҳис мекард, ки ҳама чизро бо JS иҷро кунед. Ҳамин тавр, мо ҳама чизро бо JS анҷом додем ва мо аслан барои таҳқиқи роҳҳои дигари кор вақт сарф накардем. Мо аслан ангезаи дурусти омӯхтани HTML ва CSS-ро эҳсос намекардем. Мо воқеан вебро ҳамчун як платформаи барномавии таҳаввулшаванда дарк намекардем. Мо онро асосан ҳамчун чизе дидем, ки мо бояд дар атрофи он кор кунем, хусусан вақте ки сухан дар бораи дастгирии браузер меравад. Мо метавонем танҳо JS бештар ба он партоянд, то корҳоро анҷом диҳем. Оё барои гирифтани маълумоти бештар дар бораи чӣ гуна кор кардани веб ва он чизе, ки дар платформа мавҷуд буд, ба ман кӯмак мекард? Албатта, ман метавонистам як қатор рамзҳоро тарошида бошам, ки воқеан лозим набуданд. Аммо, дар он вақт, шояд он қадар зиёд нест. Шумо мебинед, фарқиятҳои браузер дар он вақт хеле назаррас буданд. Ин замоне буд, ки Internet Explorer ҳанӯз ҳам браузери бартаридошта буд ва Firefox дар ҷои дуюм буд, аммо бо сабаби зуд маъруфият пайдо кардани Chrome ҳиссаи бозорро аз даст дод. Гарчанде ки Chrome ва Firefox дар мувофиқа кардани стандартҳои веб хеле хуб буданд, муҳитҳое, ки дар он барномаҳои мо кор мекарданд, маънои онро дошт, ки мо бояд IE6-ро барои муддати тӯлонӣ дастгирӣ кунем. Ҳатто вақте ки ба мо иҷозат дода шуд, ки IE8-ро дастгирӣ кунем, ба мо лозим омад, ки бо фарқиятҳои зиёди байни браузерҳо мубориза барем. На танҳо ин, балки веби вақт он қадар қобилиятҳои дар платформа сохташуда надошт.

То имрӯз пеш равед. Корҳо ба таври бениҳоят тағйир ёфтанд. Мо на танҳо ин қобилиятҳоро аз ҳарвақта бештар дорем, балки суръати дастрас шудани онҳо низ афзоиш ёфтааст. Иҷозат диҳед дубора савол диҳам, пас: Оё барои гирифтани маълумоти бештар дар бораи чӣ гуна кор кардани веб ва он чизе, ки дар платформа мавҷуд аст, ба шумо имрӯз кӯмак мекунад? Мутлақо ҳа. Омӯзиши фаҳмидан ва истифода бурдани платформаи веб имрӯз шуморо дар муқоиса бо дигар таҳиягарон бартарии бузург медиҳад. Новобаста аз он ки шумо дар бораи иҷроиш, дастрасӣ, посухгӯӣ, ҳамаи онҳо якҷоя кор мекунед ё танҳо интиқоли хусусиятҳои UI, агар шумо хоҳед, ки онро ҳамчун муҳандиси масъул иҷро кунед, донистани абзорҳое, ки ба шумо дастрасанд, ба шумо кӯмак мекунад, ки ба ҳадафҳои худ зудтар ва беҳтар расед. Баъзе чизҳое, ки шумо дигар ба китобхона ниёз надоред Донистани он, ки имрӯз кадом браузерҳо дастгирӣ мекунанд, пас савол ин аст: Мо чӣ кор карда метавонем? Оё ба мо як ҷузъи div лозим аст, то дар соли 2025 кунҷҳои мудаввар созем? Албатта, мо не. Амволи border-radius аз ҷониби ҳама браузерҳои дар айни замон истифодашаванда зиёда аз 15 сол дар ин лаҳза дастгирӣ карда мешавад. Ва шакли кунҷӣ низ ба зудӣ меояд, барои гӯшаҳои ҳатто зеботар. Биёед хусусиятҳои нисбатан навтаринро бубинем, ки ҳоло дар ҳама браузерҳои асосӣ мавҷуданд ва шумо метавонед онҳоро барои иваз кардани вобастагии мавҷуда дар пойгоҳи коди худ истифода баред. Мақсад он нест, ки ҳама китобхонаҳои маҳбуби худро фавран тарк кунед ва пойгоҳи коди худро аз нав нависед. Дар мавриди ҳама чизи дигар, шумо бояд аввал дастгирии браузерро ба назар гиред ва дар асоси дигар омилҳои ба лоиҳаи худ хос қарор қабул кунед. Хусусиятҳои зерин дар се муҳаррики асосии браузер (Chromium, WebKit ва Gecko) амалӣ карда мешаванд, аммо шумо шояд талаботи гуногуни дастгирии браузер дошта бошед, ки ба шумо фавран аз истифодаи онҳо монеъ мешаванд. Ҳоло вақти хубе барои омӯхтани ин хусусиятҳо аст ва шояд нақшаи истифодаи онҳо дар ягон лаҳза аст. Поповҳо ва диалогҳо Popover API, элементи HTML

ва псевдо-элементи ::backdrop метавонанд ба шумо дар халос шудан аз вобастагӣ дар поп-ап кӯмак расонанд,маслиҳати асбобҳо ва китобхонаҳои муколама, ба монанди Floating UI, Tippy.js, Tether ё React Tooltip. Онҳо дастрасӣ ва идоракунии фокусро барои шумо идора мекунанд, аз қуттӣ, бо истифода аз CSS хеле танзимшавандаанд ва ба осонӣ аниматсионӣ карда мешаванд. Аккордеонҳо Элементи <тафсилот>, атрибути номи он барои унсурҳои мутақобилан истисноӣ ва псевдо-элементи ::details-content зарурати ҷузъҳои аккордеонро ба монанди Bootstrap Accordion ё ҷузъи React Accordion хориҷ мекунад. Танҳо истифодаи платформа дар ин ҷо маънои онро дорад, ки барои одамоне, ки HTML/CSS-ро медонанд, коди шуморо бидуни ёд гирифтани истифодаи китобхонаи мушаххас осонтар мекунад. Ин инчунин маънои онро дорад, ки шумо аз вайрон кардани тағирот дар китобхона ё қатъ кардани он китобхона эмин ҳастед. Ва, албатта, ин маънои камтар коди зеркашӣ ва иҷро карданро дорад. Унсурҳои тафсилоти мутақобилан истисноӣ барои кушодан, пӯшидан ё зинда кардан ба JS ниёз надоранд. Синтаксиси CSS Қабатҳои каскадӣ, барои пойгоҳи коди бештар муташаккил, ҷойгиркунии CSS, барои CSS паймонтар, функсияҳои нави ранг, рангҳои нисбӣ ва омехтаи рангҳо, функсияҳои нави Maths ба монанди abs(), sign(), pow() ва дигарон ба коҳиш додани вобастагӣ аз протсессорҳои пешакии CSS, китобхонаҳои утилитӣ, ба монанди Bootstrap ва Tailwind, ё ҳатто runtime CSS-ро кӯмак мекунанд. Тағйирдиҳандаи бозӣ :has(), яке аз хусусиятҳои аз ҳама дархостшуда барои муддати тӯлонӣ, зарурати ҳалли мураккабтари JS-ро аз байн мебарад. JS Utilities Усулҳои муосири Array ба монанди findLast(), ё at(), инчунин усулҳои Set ба монанди фарқият(), intersection(), union() ва дигарон метавонанд вобастагии китобхонаҳоро ба монанди Lodash коҳиш диҳанд. Саволҳои контейнерӣ Дархостҳои контейнер ҷузъҳои UI ба чизҳое, ки ба ғайр аз андозаи намоишгоҳ вокуниш нишон медиҳанд, водор мекунанд ва аз ин рӯ онҳоро дар контекстҳои гуногун дубора истифодашаванда мегардонанд. Барои ин дигар истифодаи китобхонаи UI-и JS-heavy лозим нест ва истифодаи polyfill низ лозим нест. Тарҳ Grid, subgrid, flexbox ё бисёрсутунҳо муддати тӯлонӣ вуҷуд доранд, аммо ба натиҷаҳои тадқиқоти вазъи CSS нигоҳ карда, маълум аст, ки таҳиягарон одатан ҳангоми қабули чизҳои нав хеле эҳтиёткоранд ва пеш аз он ки ин корро интизор шаванд, муддати хеле тӯлонӣ интизор мешаванд. Ин хусусиятҳо муддати тӯлонӣ ба таври ибтидоӣ буданд ва шумо метавонед онҳоро барои бартараф кардани вобастагӣ аз чизҳое, ба монанди системаи шабакаи Bootstrap, утилитаҳои флексбоксҳои Foundation Framework, шабакаи собит Buma, Materialize grid ё сутунҳои Tailwind истифода баред. Ман намегӯям, ки шумо бояд чаҳорчӯбаи худро тарк кунед. Дастаи шумо онро бо ягон сабаб қабул кард ва бартараф кардани он метавонад як лоиҳаи бузург бошад. Аммо назар кардан ба он, ки платформаи веб чӣ гуна метавонад бидуни бастабандии тарафи сеюм пешниҳод кунад, бартариҳои зиёд меорад. Чизҳое, ки дар ояндаи наздик ба шумо дигар лозим нестанд Акнун, биёед ба баъзе чизҳое, ки дар ояндаи наздик ба китобхона ниёз нахоҳанд дошт, дида бароем. Яъне, чизҳои дар поён овардашуда барои қабули оммавӣ омода нестанд, аммо огоҳ будан аз онҳо ва банақшагирии истифодаи эҳтимолии баъдӣ метавонад муфид бошад. Ҷойгиркунии лангар Ҷойгиркунии лангари CSS мавқеъгирии поповарҳо ва маслиҳатҳои абзорро нисбат ба дигар унсурҳо идора мекунад ва барои нигоҳ доштани онҳо, ҳатто ҳангоми ҳаракат, ҳаракат кардан ё тағир додани андозаи саҳифа ғамхорӣ мекунад. Ин як замимаи олиҷаноби Popover API-и дар боло зикршуда мебошад, ки муҳоҷиратро аз қарорҳои пуршиддати JS боз ҳам осонтар мекунад. API Navigation API-и Navigation метавонад барои идора кардани паймоиш дар барномаҳои яксаҳифа истифода шавад ва метавонад барои React Router, Routing Next.js ё Angular роутинг як иловаи олӣ ё ҳатто ивазкунанда бошад. Дидани API Transitions API View Transitions метавонад байни ҳолати гуногуни саҳифа аниматсион кунад. Дар як замимаи яксаҳифа, ин гузариши ҳамвор байни давлатҳоро хеле осон мекунад ва метавонад ба шумо дар халос шудан аз китобхонаҳои аниматсионӣ, аз қабили Anime.js, GSAP ё Motion.dev кӯмак кунад. Ҳатто беҳтар аст, ки API метавонад бо замимаҳои сершумори саҳифа низ истифода шавад. Дар хотир доред, ки қаблан ман гуфтам, ки сабаби сохтани барномаҳои яксаҳифа дар ширкате, ки ман 15 сол пеш кор мекардам, ин пешгирӣ кардани дурахши сафеди дубора боркунии саҳифа ҳангоми паймоиш буд? Агар он вақт API дастрас мебуд, мо метавонистем бе чаҳорчӯбаи як саҳифа ва бе зеркашии бузурги ибтидоии тамоми барнома эффектҳои зебои гузариш ба саҳифаро ба даст орем. Аниматсияҳое, ки ба ҳаракат ҳаракат мекунанд Аниматсияҳое, ки ба ҳаракат ҳаракат мекунанд, на бо мурури замон, на дар мавқеъи паймоиши корбар кор мекунанд, ки онҳоро барои ҳикояи ҳикояҳо ва сафарҳои маҳсулот як ҳалли олӣ мегардонад. Баъзе одамон бо он каме боло рафтаанд, аммо вақте ки хуб истифода мешавад, ин метавонад як воситаи хеле муассири тарроҳӣ бошад ва метавонад аз китобхонаҳои монанди: ScrollReveal, GSAP Scroll ёWOW.js. Интихоби танзимшаванда Интихоби танзимшаванда як унсури муқаррарии <интихоб> мебошад, ки ба шумо имкон медиҳад намуди зоҳирӣ ва мундариҷаи онро пурра мутобиқ созед ва ҳамзамон бартариҳои дастрасӣ ва иҷроишро таъмин кунед. Ин муддати тӯлонӣ буд ва як хусусияти хеле дархостшуда ва дидани он аҷиб аст, ки ба зудӣ ба платформаи веб ворид мешавад. Бо интихоби дарунсохташудаи танзимшаванда, шумо дар ниҳоят метавонед ҳамаи ин рамзи JS-и нигоҳдорӣ душворро барои ҷузъҳои интихобшудаи худ дур кунед. CSS Masonry CSS Masonry боз як хусусияти веб-платформаи дарпешистода аст, ки ман мехоҳам вақти бештарро сарф кунам. Бо CSS Masonry, шумо метавонед тарҳҳоеро ба даст оред, ки бо flex, grid ё дигар примитивҳои тарҳбандии дарунсохт CSS хеле душвор ё ҳатто ғайриимкон мебошанд. Таҳиягарон аксар вақт барои ба даст овардани тарҳҳои Masonry, ба монанди китобхонаи Masonry JS, ба истифодаи китобхонаҳои тарафи сеюм муроҷиат мекунанд. Аммо, дар ин бора баъдтар. Биёед пеш аз гузаштан ба масонӣ ин нуктаро ҷамъбаст кунем. Чаро шумо бояд ғамхорӣ кунед Бозори меҳнат пур аз таҳиягарони веб бо таҷрибаи JavaScript ва чаҳорчӯбаи охирини рӯз аст. Пас, дарвоқеъ, омӯхтани истифодаи ибтидоии платформаи веб чӣ маъно дорад, агар шумо ҳамон корҳоро бо китобхонаҳо, утилитаҳо ва чаҳорчӯбаҳое, ки имрӯз медонед, иҷро карда тавонед? Вақте ки тамоми соҳа ба ин чаҳорчӯбаҳо такя мекунад ва шумо метавонед танҳо китобхонаи дурустро кашед, оё фурӯшандагони браузер набояд танҳо бо ин китобхонаҳо кор кунанд, то онҳоро тезтар бор кунанд ва кор кунанд, ба ҷои он ки кӯшиш кунанд, ки таҳиягарон ба ҷои он платформаро истифода баранд? Пеш аз ҳама, мо бо муаллифони китобхона кор мекунем ва мо чаҳорчӯбҳоро тавассути омӯхтани он чизе, ки онҳо истифода мебаранд ва беҳтар кардани ин соҳаҳо беҳтар мегардонем. Аммо дуюм, "танҳо истифодаи платформа" метавонад манфиатҳои назаррас ба даст орад. Ирсоли рамзи камтар ба дастгоҳҳо Бартарии асосӣ дар он аст, ки шумо ба дастгоҳҳои муштариёни худ коди камтар мефиристед. Мувофиқи Web Almanac 2024, шумораи миёнаи дархостҳои HTTP дар як сайт тақрибан 70 аст, ки аксари онҳо ба JavaScript бо 23 дархост вобастаанд. Дар соли 2024, JS инчунин тасвирҳоро ҳамчун навъи файли бартаридошта пеш гирифт. Миқдори миёнаи дархостҳои саҳифа барои файлҳои JS 23 аст, ки аз соли 2022 8% зиёд аст. Ва андозаи саҳифа сол то сол афзоиш меёбад. Вазни миёнаи саҳифа ҳоло тақрибан 2 МБ аст, ки нисбат ба 10 соли пеш 1,8 МБ зиёд аст.

Албатта, суръати пайвастшавӣ ба интернети шумо эҳтимол зиёд шудааст, аммо ин барои ҳама нест. Ва на ҳама қобилиятҳои дастгоҳи якхела доранд. Гирифтани рамзи тарафи сеюм барои корҳое, ки шумо бо платформа иҷро карда метавонед, ба ҷои ин, эҳтимолан маънои онро дорад, ки шумо коди бештар мефиристед ва аз ин рӯ нисбат ба муштариёни камтаре, ки одатан мехоҳед, дастрас кунед. Дар веб, иҷрои бади боркунӣ ба суръати зиёди таркшавӣ оварда мерасонад ва ба эътибори бренд латма мезанад. Иҷрои коди камтар дар дастгоҳҳо Ғайр аз он, коде, ки шумо ба дастгоҳҳои муштариёни худ мефиристед, эҳтимол тезтар кор мекунад, агар он абстраксияҳои камтари JavaScript-ро дар болои платформа истифода барад. Он инчунин эҳтимолан бо нобаёнӣ бештар ҷавобгӯ ва дастрастар аст. Ҳамаи ин боиси бештар ва хушбахттар муштариён мегардад. Блоги солонаи нобаробарии иҷрои ҳамтои ман Алекс Расселро тафтиш кунед, ки нишон медиҳад, ки дастгоҳҳои премиум бо сабаби нобаробарии сарват дар бозорҳо бо миллиардҳо корбарон асосан мавҷуд нестанд. Ва ин фарқият танҳо бо мурури замон афзоиш меёбад.

Тарҳбандии дарунсохт Як хусусияти веб-платформаи веб, ки ба наздикӣ пайдо мешавад ва ман аз он хеле ҳаяҷон дорам, CSS Masonry мебошад.

Биёед ман бо фаҳмонам, ки масонӣ чист. Masonry чист Masonry як намуди тарҳест, ки аз ҷониби Pinterest солҳои пеш маъмул шуда буд. Он роҳҳои мустақили мундариҷаро эҷод мекунад, ки дар дохили он ашёҳо то ҳадди имкон ба оғози трек наздик мешаванд.

Бисёр одамон Masonry-ро ҳамчун як варианти олӣ барои портфелҳо ва галереяи аксҳо мебинанд, ки он албатта метавонад иҷро кунад. Аммо Masonry назар ба он чизе, ки шумо дар Pinterest мебинед, чандиртар аст ва он танҳо бо тарҳҳои ба шаршара монанд маҳдуд нест. Дар тарҳбандии Masonry:

Роҳҳо метавонанд сутунҳо ё сатрҳо бошанд:

Роҳҳои мундариҷа набояд ҳама як андоза бошанд:

Объектҳо метавонанд якчанд роҳҳоро дар бар гиранд:

Ададҳоро дар роҳҳои мушаххас ҷойгир кардан мумкин аст; онҳо набояд ҳамеша алгоритми ҷойгиркунии автоматиро риоя кунанд:

Намоишҳо Инҳоянд чанд намоиши оддии ман бо истифода аз татбиқи дарпешистодаи CSS Masonry дар Chromium. Намоиши галереяи аксҳо, ки нишон медиҳад, ки чӣ гуна ашё (сарлавҳа дар ин ҳолат) метавонад якчанд трекҳоро дар бар гирад:

Галереяи дигари аксҳо, ки роҳҳои андозаҳои гуногунро нишон медиҳанд:

Тарҳбандии сайти хабарӣ бо баъзе роҳҳо нисбат ба дигарон васеътар ва баъзе ашёҳо тамоми паҳнои тарҳро фаро мегиранд:

Тахтаи канбан нишон медиҳад, ки ашёро дар роҳҳои мушаххас ҷойгир кардан мумкин аст:

Эзоҳ: Theнамоишҳои қаблӣ бо версияи Chromium сохта шуда буданд, ки ҳанӯз барои аксари корбарони веб дастрас нест, зеро CSS Masonry танҳо дар браузерҳо татбиқ карда мешавад. Бо вуҷуди ин, таҳиягарони веб солҳо боз аз китобхонаҳо барои сохтани тарҳҳои Masonry истифода мебаранд. Сайтҳое, ки имрӯз масолеҳро истифода мебаранд Воқеан, масонӣ имрӯз дар интернет хеле маъмул аст. Инҳоянд чанд мисоле, ки ман ғайр аз Pinterest ёфтам:

Ва боз чанд мисоли камтар равшан:

Пас, ин тарҳҳо чӣ гуна сохта шудаанд? Роҳҳои бартарафсозӣ Як ҳилае, ки ман дидаам, ин истифодаи тарҳбандии Flexbox аст, ба ҷои он тағир додани самти он ба сутун ва гузоштани он барои печонидани он. Бо ин роҳ, шумо метавонед ашёҳои баландии гуногунро дар сутунҳои сершумори мустақил ҷойгир кунед, ки таассуроти тарҳбандии деворро ба вуҷуд меорад:

Бо вуҷуди ин, ду маҳдудият дар ин ҳалли муваққатӣ вуҷуд дорад:

Тартиби ашё аз он чизест, ки бо тарҳбандии воқеии Masonry фарқ мекунад. Бо Flexbox, ҷузъҳо аввал сутуни аввалро пур мекунанд ва вақте ки он пур мешавад, ба сутуни навбатӣ гузаред. Бо Masonry, ашёҳо дар ҳар як трек (ё сутун дар ин ҳолат) ҷойгоҳи бештар доранд, ҷамъ карда мешаванд. Аммо инчунин, ва шояд муҳимтар аз ҳама, ин ҳалли муваққатӣ талаб мекунад, ки шумо ба контейнери Flexbox баландии собит муқаррар кунед; дар акси хол ягон печондан ба амал намеояд.

Китобхонаҳои Masonry тарафи сеюм Барои ҳолатҳои пешрафта, таҳиягарон китобхонаҳоро истифода мебурданд. Маъруфтарин ва маъмултарин китобхона барои ин танҳо Masonry номида мешавад ва тибқи NPM он тақрибан 200,000 маротиба дар як ҳафта зеркашӣ карда мешавад. Squarespace инчунин як ҷузъи тарҳро таъмин мекунад, ки тарҳбандии Masonry-ро барои алтернативаи бидуни код таъмин мекунад ва бисёр сайтҳо аз он истифода мебаранд. Ҳардуи ин интихобҳо рамзи JavaScript-ро барои ҷойгир кардани ашё дар тарҳ истифода мебаранд. Масонизми дарунсохт Ман дар ҳақиқат ба ҳаяҷон омадам, ки Masonry ҳоло дар браузерҳо ҳамчун хусусияти дарунсохт CSS пайдо мешавад. Бо гузашти вақт, шумо метавонед Masonry-ро ба мисли Grid ё Flexbox истифода баред, яъне бидуни ниёз ба ягон роҳи ҳал ё рамзи тарафи сеюм. Дастаи ман дар Microsoft дастгирии дарунсохтаи Masonry-ро дар лоиҳаи кушодаи Chromium, ки Edge, Chrome ва бисёр браузерҳои дигар ба он асос ёфтаанд, татбиқ мекунад. Mozilla воқеан аввалин фурӯшандаи браузер буд, ки дар соли 2020 татбиқи таҷрибавии Masonry-ро пешниҳод кард. Ва Apple низ ба амалӣ шудани ин тарҳбандии нави веб хеле манфиатдор буд. Кор оид ба стандартизатсияи хусусият низ бо мувофиқа дар гурӯҳи кории CSS дар бораи самти умумӣ ва ҳатто намоиши навъи нави намоиш: шабакаҳои шабакавӣ идома дорад. Агар шумо хоҳед, ки дар бораи масолеҳ маълумоти бештар гиред ва пешрафтро пайгирӣ кунед, саҳифаи манбаи CSS Masonry-ро санҷед. Бо гузашти вақт, вақте ки Masonry ба мисли Grid ё Flexbox як хусусияти асосӣ мегардад, мо метавонем онро танҳо истифода барем ва аз инҳо баҳра барем:

Иҷрои беҳтар, Ҷавобгарии беҳтар, Осонии истифода ва рамзи соддатар.

Биёед ба инҳо наздиктар назар андозем. Иҷрои беҳтар Сохтани системаи тарҳбандии худ ба монанди Masonry ё истифодаи китобхонаи тарафи сеюм ба ҷои он, маънои онро дорад, ки шумо бояд рамзи JavaScript-ро барои ҷойгир кардани ашё дар экран кор кунед. Ин инчунин маънои онро дорад, ки ин код блокировка карда мешавад. Дарвоқеъ, то он даме, ки коди JavaScript иҷро нашавад, ё ҳеҷ чиз пайдо нахоҳад шуд, ё чизҳо дар ҷойҳои дуруст ё андозаи дуруст нахоҳад буд. Тарҳбандии масонӣ аксар вақт барои қисми асосии саҳифаи веб истифода мешавад, ки ин маънои онро дорад, ки код мундариҷаи асосии шуморо дертар аз он имкон медиҳад, ки дар акси ҳол нишон диҳад ва нишондиҳандаи LCP ё Калонтарин Ранг Рангро паст кунад, ки дар иҷрои даркшуда ва оптимизатсияи системаи ҷустуҷӯ нақши калон мебозад. Ман китобхонаи Masonry JS-ро бо тарҳбандии оддӣ ва бо симулятсияи пайвасти сусти 4G дар DevTools озмоиш кардам. Китобхона чандон калон нест (24KB, 7.8KB gzipped), аммо барои бор кардан дар шароити санҷиши ман 600 мс лозим буд. Дар ин ҷо сабти иҷроиш нишон медиҳад, ки вақти боркунии 600 мс барои китобхонаи Masonry тӯлонӣ аст ва дар ҳоле ки ин рӯйдод ягон амали дигари визуализатсия рух надодааст:

Илова бар ин, пас аз вақти бори аввал, скрипти зеркашидашуда бояд таҳлил карда шавад, тартиб дода шавад ва сипас иҷро карда шавад. Ҳамаи ин, тавре ки қаблан гуфта шуд, монеъ шудани намоиши саҳифа буд. Бо татбиқи дарунсохти Masonry дар браузер, мо скрипт барои бор кардан ва иҷро кардан нахоҳем дошт. Муҳаррики браузер танҳо дар марҳилаи ибтидоии намоиши саҳифа кори худро иҷро мекунад. Ҷавобгарии беҳтар Монанди он вақте ки саҳифа бори аввал бор мекунад, тағир додани андозаи равзанаи браузер боиси дубора намоиш додани тарҳ дар он саҳифа мегардад. Дар айни замон, агар саҳифа китобхонаи Masonry JS-ро истифода барад, лозим нест, ки скриптро дубора бор кунед, зеро он аллакайИн ҷо. Аммо, коде, ки ашёро дар ҷойҳои дуруст интиқол медиҳад, бояд иҷро шавад. Ҳоло ин китобхонаи мушаххас ҳангоми боркунии саҳифа хеле зуд иҷро мекунад. Бо вуҷуди ин, он ашёҳоро ҳангоми тағир додани андозаи тиреза ба ҷои дигар кӯчидан лозим аст ва ин фарқияти калонро ба вуҷуд меорад. Албатта, корбарон барои тағир додани андозаи равзанаҳои браузери худ мисли мо таҳиягарон вақт сарф намекунанд. Аммо ин таҷрибаи тағир додани андозагирии аниматсионӣ метавонад хеле ташвишовар бошад ва ба вақти даркшуда барои мутобиқ шудани саҳифа ба андозаи нави худ илова мекунад. Осонии истифода ва рамзи соддатар Истифодаи хусусияти веб то чӣ андоза осон аст ва то чӣ андоза оддии рамз омилҳои муҳимест, ки метавонанд барои дастаи шумо фарқияти калон эҷод кунанд. Албатта, онҳо ҳеҷ гоҳ наметавонанд ҳамчун таҷрибаи ниҳоии корбар муҳим бошанд, аммо таҷрибаи таҳиякунанда ба нигоҳдорӣ таъсир мерасонад. Истифодаи хусусияти веби дарунсохт дар ин самт манфиатҳои муҳим дорад:

Таҳиягароне, ки аллакай HTML, CSS ва JS-ро медонанд, эҳтимолан ин хусусиятро ба осонӣ истифода мебаранд, зеро он барои ҳамгироии хуб ва мувофиқ бо боқимондаи платформаи веб тарҳрезӣ шудааст. Ҳеҷ гуна хатари вайрон кардани тағирот дар тарзи истифодабарии ин хусусият вуҷуд надорад. Эҳтимолияти аз кор рафтан ё нигоҳдорӣ нашудани ин хусусият тақрибан сифр аст.

Дар мавриди масонри дарунсохт, азбаски он тарҳбандии ибтидоӣ аст, шумо онро аз CSS истифода мекунед, ба монанди Grid ё Flexbox, ҳеҷ гуна JS иштирок намекунад. Ғайр аз он, дигар хосиятҳои CSS, ки ба тарҳбандӣ алоқаманданд, ба монанди фарқият, тавре кор мекунанд, ки шумо онҳоро интизор будед. Ҳеҷ гуна ҳилаҳо ё роҳҳои ҳалли онҳо дар бораи он нест ва чизҳое, ки шумо меомӯзед, дар MDN ҳуҷҷатгузорӣ карда мешаванд. Барои Masonry JS lib, оғозсозӣ каме мураккаб аст: он атрибути маълумотро бо синтаксиси мушаххас ва дар якҷоягӣ бо унсурҳои пинҳонии HTML барои муқаррар кардани андозаи сутун ва холигоҳ талаб мекунад. Ғайр аз он, агар шумо хоҳед, ки сутунҳоро паҳн кунед, шумо бояд андозаи холиро худатон дохил кунед, то мушкилотро пешгирӣ кунед:

...

Биёед инро бо он муқоиса кунем, ки татбиқи дарунсохт чӣ гуна хоҳад буд:

...

Рамзи соддатар ва паймоне, ки метавонад танҳо чизҳоеро истифода барад, ба монанди фосила ва дар он ҷое, ки роҳҳои фарохшуда бо span 2 анҷом дода мешаванд, ба мисли шабака, ва аз шумо ҳисоб кардани паҳнои дурустро, ки андозаи фосиларо дар бар мегирад, талаб намекунад. Чӣ тавр фаҳмидан мумкин аст, ки чӣ дастрас аст ва кай дастрас аст? Умуман, савол аслан дар он аст, ки оё шумо бояд масонри дарунсохтро дар китобхонаи JS истифода баред, балки кай. Китобхонаи Masonry JS аҷиб аст ва дар тӯли солҳои зиёд холигоҳро дар платформаи веб пур мекунад ва барои бисёре аз таҳиягарон ва корбарони хушбахт. Албатта, он як чанд нуқсон дорад, агар шумо онро бо татбиқи дарунсохташудаи Masonry муқоиса кунед, аммо онҳо муҳим нестанд, агар ин татбиқ омода набошад. Барои ман номбар кардани ин хусусиятҳои ҷолиби нави платформаи веб осон аст, зеро ман дар як фурӯшандаи браузер кор мекунам ва аз ин рӯ майл медонам, ки чӣ рӯй медиҳад. Аммо таҳиягарон аксар вақт пас аз пурсиш мубодила мекунанд, ки пайгирии чизҳои нав душвор аст. Огоҳ будан душвор аст ва ширкатҳо на ҳамеша ба омӯзиш афзалият медиҳанд. Барои кӯмак дар ин, инҳоянд чанд манбаҳое, ки навсозиҳоро бо роҳҳои содда ва паймон таъмин мекунанд, то шумо маълумоти заруриро зуд ба даст оред:

Платформаи веб сайти муҳаққиқро дар бар мегирад: Шояд шумо ба саҳифаи қайдҳои нашри он таваҷҷӯҳ дошта бошед. Ва, агар ба шумо RSS маъқул бошад, лентаи ёддоштҳои релиз, инчунин каналҳои навтаъсис ва ба таври васеъ дастрасро санҷед.

ВебПанели ҳолати платформа: Шояд шумо саҳифаҳои гуногуни соли ибтидоии онро дӯст доред.

Саҳифаи харитаи роҳ Status Platform Chrome.

Агар шумо каме вақти бештар дошта бошед, шумо инчунин метавонед ба ёддоштҳои барориши фурӯшандагони браузер таваҷҷӯҳ кунед:

Chrome Edge Firefox Сафари

Барои захираҳои боз ҳам бештар, Cheatsheet-и навигарии веб-платформаи маро санҷед. Кори ман то ҳол иҷро нашудааст Ин тарафи дигари мушкилот аст. Ҳатто агар шумо вақт, нерӯ ва роҳҳои пайгирӣ пайдо кунед, ҳанӯз ҳам аз шунидани овози шумо ва татбиқи хусусиятҳои дӯстдоштаи худ ноумедӣ вуҷуд дорад. Шояд шумо солҳо интизор будед, ки хатогии мушаххас ҳал карда шавад ё хусусияти мушаххас ба браузере фиристода шавад, ки он ҳанӯз ҳам нест. Он чизе ки ман мегӯям, ин аст, ки фурӯшандагони браузер гӯш мекунанд. Ман як қисми якчанд гурӯҳҳои байнисоҳавӣ мебошам, ки мо ҳамеша сигналҳои таҳиягарон ва фикру мулоҳизаҳоро муҳокима мекунем. Мо ба бисёр сарчашмаҳои гуногуни фикру мулоҳизаҳо, ҳам дар дохили ҳар як фурӯшандаи браузер ва ҳам берунӣ/ҷамъиятӣ дар форумҳо, лоиҳаҳои кушодаасос, блогҳо ва пурсишҳо назар мекунем. Ва мо ҳамеша мекӯшем, ки роҳҳои беҳтареро барои таҳиягарон мубодилаи эҳтиёҷоти мушаххаси худ ва ҳолатҳои истифодаи онҳоро эҷод кунем. Пас, агар шумо метавонед, лутфан аз фурӯшандагони браузер бештар талаб кунед ва ба мо фишор диҳед, то хусусиятҳои ба шумо лозимиро амалӣ созем. Ман фаҳмидам, ки ин вақтро талаб мекунад ва инчунин метавонад тарсонанда бошад (ба ёдоварӣ кардани монеаи баланд барои вуруд), аммо он ҳам кор мекунад. Инҳоянд чанд роҳе, ки шумо метавонед овози худро (ё ширкати худро) шунида метавонед: Тадқиқоти солонаи JS, Ҳолати CSS ва Ҳолати HTML-ро гиред. Онҳо дар он нақши бузург мебозанд, ки чӣ тавр фурӯшандагони браузер ба кори худ афзалият медиҳанд. Агар ба шумо API-и мушаххаси стандартӣ асосёфта лозим бошад, ки пайваста дар саросари браузерҳо татбиқ карда шавад, пешниҳоди пешниҳодро дар итератсияи навбатии лоиҳаи Interop баррасӣ кунед. Ин вақти бештарро талаб мекунад, аммо фикр кунед, ки чӣ гуна Shopify ва RUMvision рӯйхати хоҳишҳои худро барои Interop 2026 мубодила кардаанд. Маълумоти муфассали монанди ин метавонад барои фурӯшандагони браузерҳо барои афзалият додан хеле муфид бошад. Барои истинодҳои муфидтаре, ки ба фурӯшандагони браузер таъсир мерасонанд, аз ман тафтиш кунед. Хулоса Барои пӯшидан, ман умедворам, ки ин мақола ба шумо якчанд чизҳоеро гузоштааст, ки дар бораи он фикр кунед:

Ҳаяҷон барои Masonry ва дигар хусусиятҳои веб дарпешистода. Якчанд хусусиятҳои веб, ки шумо мехоҳед истифода баред. Якчанд қисмҳои рамзи фармоишӣ ё тарафи сеюмро шумо метавонед ба манфиати хусусиятҳои дарунсохт хориҷ кунед. Якчанд роҳҳо барои пайгирӣ кардани чизҳои омадаистода ва таъсир расонидан ба фурӯшандагони браузер.

Муҳимтар аз ҳама, ман умедворам, ки ман шуморо ба манфиатҳои истифодаи платформаи веб то иқтидори пуррааш бовар кунондаам.

You May Also Like

Enjoyed This Article?

Get weekly tips on growing your audience and monetizing your content — straight to your inbox.

No spam. Join 138,000+ creators. Unsubscribe anytime.

Create Your Free Bio Page

Join 138,000+ creators on Seemless.

Get Started Free