Pe a ma le 15 tausaga talu ai, sa ou faigaluega ai i se kamupani lea na matou fausia ai polokalama mo tagata malaga, tagata faigaluega malae vaalele, ma kamupani vaalele. Na matou fausia foi a matou lava auivi i totonu o le fale mo vaega UI ma avanoa e tasi-itulau app. Sa i ai a matou vaega mo mea uma: fanua, faamau, tabs, ranges, datatables, menus, datepickers, selects, ma multiselects. Sa i ai foi sa matou vaega div. O la matou vaega div sa lelei tele, na mafai ai ona matou faia tulimanu lapotopoto i luga o suʻesuʻega uma, lea, talitonu i ai pe leai, e le o se mea faigofie e fai i lena taimi.
O la matou galuega na faia i se taimi o lo matou talafaasolopito ina ua vaaia JS, Ajax, ma HTML malosi o se suiga na aumaia ai i matou i le lumanaʻi. Faʻafuaseʻi, e mafai ona matou faʻafouina se itulau, maua faʻamatalaga mai se 'auʻaunaga, ma aloese mai le faʻafeiloaʻi i isi itulau, lea na vaʻaia e telegese ma faʻaalia se sikuea paepae lapoa i luga o le lau i le va o itulau e lua. Sa i ai se fuaitau, na lauiloa e Jeff Atwood (le na faavaeina le StackOverflow), lea e faitauina: “So se talosaga e mafai ona tusia i le JavaScript e iu lava ina tusia i le JavaScript.”— Jeff Atwood
Ia i matou i lena taimi, na lagona e pei o se faʻamalosi e alu moni ma fatuina na polokalama. Na pei o se palanikeke faʻatagaina e fai mea uma ma JS. O lea na matou faia mea uma ma JS, ma matou te leʻi faʻaaluina se taimi e suʻesuʻe ai isi auala e fai ai mea. Matou te leʻi lagona le faʻaosofia e aʻoaʻo lelei mea e mafai e le HTML ma le CSS ona fai. Matou te leʻi vaʻaia lelei le upega tafaʻilagi o se faʻasologa o polokalama faʻavae i lona atoaga. E masani ona matou vaʻai i ai o se mea e manaʻomia ona matou galulue faʻatasi, aemaise lava pe a oʻo mai i le browser support. E mafai lava ona tatou togiina nisi JS i ai e fai ai mea. Pe o le a fesoasoani iā te aʻu le faaalu o le taimi e aʻoaʻo atili ai pe faapefea ona galue le upega tafaʻilagi ma mea na maua i luga o le tulaga? E mautinoa lava, atonu na mafai ona ou seleina se vaega o code e leʻi manaʻomia moni. Ae, i le taimi, atonu e le tele. E te va'ai, sa matua taua tele le eseesega o su'esu'ega i lena taimi. O le taimi lea na avea ai Internet Explorer ma suʻesuʻega iloga, ma Firefox o le lona lua vavalalata, ae amata ona leiloa sea maketi ona o Chrome ua vave ona lauiloa. E ui lava o Chrome ma Firefox e lelei tele i le maliliega i luga o tulaga i luga o le upega tafaʻilagi, o siosiomaga o loʻo faʻaogaina ai a matou polokalama o lona uiga e tatau ona matou lagolagoina le IE6 mo se taimi umi. E tusa lava pe faʻatagaina i matou e lagolagoina le IE8, sa tatau lava ona matou feagai ma le tele o eseesega i le va o suʻesuʻega. E le gata i lea, ae o le upega tafaʻilagi o le taimi e leʻi i ai le tele o gafatia na fausia saʻo i luga o le tulaga.
Saosaoa agai i luma i lenei aso. Ua matuā suia mea. E le gata ina sili atu le tele o nei gafatia nai lo se isi lava taimi muamua, ae o le saoasaoa e maua ai ua faateleina foi. Seʻi ou toe fai atu le fesili: Pe o le a fesoasoani le taimi e aʻoaʻo atili ai e uiga i le auala e galue ai le upega tafaʻilagi ma mea o loʻo maua i luga o le platform e fesoasoani ia te oe i aso nei? Ioe ioe. O le aʻoaʻoina ia malamalama ma faʻaoga le upega tafaʻilagi i aso nei e tuʻuina atu ai oe i se tulaga sili atu nai lo isi atinaʻe. Pe e te galue i luga o le faʻatinoga, faʻaogaina, tali, faʻatasi uma, pe naʻo le lafoina o foliga UI, pe afai e te manaʻo e fai o se inisinia faʻapitoa, o le iloa o meafaigaluega o loʻo avanoa mo oe e fesoasoani ia te oe e ausia au sini vave ma sili atu. O Nisi Mea Atonu e te le toe mana'omia se Faletusi O le iloaina o mea e lagolagoina e tagata suʻesuʻe i aso nei, o le fesili la, o le: O le a le mea e mafai ona tatou faʻaumatia? Tatou te mana'omia se vaega div e fai ai tulimanu lapotopoto ile 2025? Ioe, matou te le faia. O le fanua-radius fanua ua lagolagoina e tagata suʻesuʻe uma o loʻo faʻaaogaina mo le silia ma le 15 tausaga i le taimi nei. Ma e le o toe mamao ona oo mai lea o foliga tulimanu, mo tulimanu sili atu ona manaia. Sei o tatou tilotilo i foliga lata mai o loʻo avanoa nei i suʻesuʻega tetele uma, ma e mafai ona e faʻaogaina e sui ai faʻalagolago i lau codebase. O le manatu e le o le vave lafoai uma o au faletusi pele ma toe tusi lau codebase. Ae mo isi mea uma, e tatau ona e ave muamua le lagolago a le browser ma filifili e faʻatatau i isi mea faʻapitoa i lau poloketi. O vaega nei o lo'o fa'atinoina i masini su'esu'e autu e tolu (Chromium, WebKit, ma Gecko), ae atonu e iai ni au mana'oga lagolago lagolago e taofia ai oe mai le fa'aaogaina vave. O le taimi nei ose taimi lelei e aʻoaʻo ai e uiga i nei foliga, peitaʻi, ma atonu e fuafua e faʻaoga i se taimi. Popovers Ma Talanoaga O le Popover API, le
E mautinoa lava, atonu ua fa'atupula'ia fo'i lau feso'ota'iga i luga ole laiga, ae e le'o le tulaga lena mo tagata uma. Ma e le o tagata uma e tutusa le gafatia o masini. O le tosoina o le code a le vaega lona tolu mo mea e mafai ona e faia i luga o le tulaga, nai lo lena, o lona uiga e sili atu le code, ma o le mea lea e toʻaitiiti tagata faʻatau nai lo le masani ai. I luga o le upega tafaʻilagi, le lelei o le faʻatinoina o uta e taʻitaʻia ai le tele o le lafoaʻiina o fua faatatau ma afaina ai le igoa tauleleia. Ta'avale Laiti Code I Masini E le gata i lea, o le code o loʻo e lafoina i luga o masini a au tagata faʻatau e foliga mai e sili atu le saoasaoa pe a faʻaaogaina nai faʻamatalaga JavaScript i luga o le tulaga. Atonu foi e sili atu ona tali mai ma sili atu ona avanoa e ala i le faaletonu. O nei mea uma e oʻo atu ai i tagata faʻatau sili atu ma fiafia. Siaki laʻu paaga Alex Russell's performance inequality gap blog, lea e faʻaalia ai o masini faʻapitoa e tele lava ina toesea mai maketi ma le faitau piliona o tagata faʻaoga ona o le le tutusa o le tamaoaiga. Ma o lenei va ua na o le tuputupu ae i le taimi.
Fa'atūina Masonry Layout O se tasi o upega tafa'ilagi o lo'o lata mai ma ou te matua fiafia lava o le CSS Masonry.
Sei ou amata i le faamatalaina o le Masonry. O le a le Masonry Masonry o se ituaiga o faʻatulagaga na faʻalauiloaina e Pinterest i tausaga ua mavae. E fa'atupuina ni ala tuto'atasi o mea o lo'o fa'apipi'iina ai mea e latalata ile amataga ole ala e mafai ai.
O le toʻatele o tagata latou te vaʻai i le Masonry o se filifiliga sili mo faʻamaumauga ma ata ata, lea e mautinoa lava e mafai. Ae o le Masonry e sili atu ona fetuutuunai nai lo le mea e te vaʻaia i luga o Pinterest, ma e le gata i na o faʻataʻitaʻiga pei o afu. I se faʻatulagaina o Masonry:
O ala e mafai ona avea ma koluma po'o laina:
E le tatau ona tutusa uma le tele o ala o anotusi:
O mea e mafai ona fa'asolo i le tele o ala:
E mafai ona tu'u mea i luga o ala fa'apitoa; latou te le tau mulimuli i taimi uma i le faʻapipiʻiina otometi algorithm:
Demos O nai faʻataʻitaʻiga faigofie na ou faia e ala i le faʻaaogaina o le faʻatinoga o le CSS Masonry i Chromium. O se fa'ata'ita'iga o ata, fa'aalia pe fa'afefea ona mafai e aitema (le ulutala i lenei tulaga) ona fa'asolo i le tele o ala:
O le isi fa'ata'ita'iga ata o lo'o fa'aalia ai ala o lapo'a eseese:
O se fa'asologa o tala fou ma nisi ala e lautele atu nai lo isi, ma nisi mea e fa'alautele le lautele atoa o le fa'asologa:
O se laupapa kanban e faʻaalia ai mea e mafai ona tuʻuina i luga o ala faʻapitoa:
Manatua: O lefaʻataʻitaʻiga muamua na faia i se lomiga o Chromium e leʻi avanoa i le tele o tagata faʻaoga i luga o le upega tafaʻilagi, aua o le CSS Masonry ua na o le amata faʻatinoina i suʻesuʻega. Ae ui i lea, ua fiafia le au atinaʻe i luga o le upega tafaʻilagi e faʻaogaina faletusi e fai ai faʻasologa o Masonry mo le tele o tausaga. Nofoaga Fa'aaogaina Masonry Aso nei Ioe, o Masonry e masani lava i luga o le upega tafaʻilagi i aso nei. O nai faʻataʻitaʻiga nei na ou mauaina e ese mai i Pinterest:
Ma nisi faʻataʻitaʻiga, faʻaitiitia le manino:
O lea la, na fa'apefea ona faia nei fa'atulagaga? So'otaga O le tasi togafiti na ou vaʻaia o loʻo faʻaaogaina o le faʻaogaina o le Flexbox layout nai lo, suia lona itu i le koluma, ma faʻapipiʻi e afifi. I lenei auala, e mafai ona e tuʻuina mea e eseese maualuga i le tele, koluma tutoʻatasi, e tuʻuina atu ai le faʻaaliga o se faʻasologa o Masonry:
Ae ui i lea, e lua tapulaʻa i lenei fofo:
O le faasologa o mea e ese mai le mea o le a iai i se faʻatulagaga moni o Masonry. Faatasi ai ma le Flexbox, o mea e faʻatumu muamua le koluma muamua ma, a tumu, ona alu lea i le isi koluma. Faatasi ai ma Masonry, o mea e faʻaputu i soʻo se ala (poʻo le koluma i lenei tulaga) e tele avanoa avanoa. Ae faʻapea foʻi, ma atonu e sili atu le taua, o lenei fofo e manaʻomia ai lou setiina o se maualuga tumau i le pusa Flexbox; a leai, e leai se afifi e tupu.
Faletusi Masonry vaega lona tolu Mo mataupu sili atu, o loʻo faʻaogaina e le au atinaʻe faletusi. O le faletusi sili ona lauiloa ma taʻutaʻua mo lenei mea e taʻua o Masonry, ma e sii mai e tusa ma le 200,000 taimi i le vaiaso e tusa ai ma le NPM. O lo'o tu'uina atu fo'i e le Squarespace se vaega fa'atulagaina e tu'uina atu ai se fa'asologa o Masonry, mo se isi mea e leai se fa'ailoga, ma e tele nofoaga e fa'aaogaina. O nei filifiliga uma e lua e faʻaaoga ai le code JavaScript e tuʻu ai mea i totonu o le faʻatulagaga. Masonry ua fausia i totonu Ou te matua fiafia lava o Masonry ua amata nei ona faʻaalia i suʻesuʻega o se mea faʻapipiʻi CSS. I le aluga o taimi, o le a mafai ona e faʻaogaina le Masonry e pei lava ona e faia Grid poʻo Flexbox, o lona uiga, e aunoa ma le manaʻomia o soʻo se taʻaloga poʻo se faʻailoga lona tolu. O laʻu 'au i Microsoft o loʻo faʻatinoina le lagolago a le Masonry i le Chromium open source project, lea e faʻavae ai Edge, Chrome, ma le tele o isi suʻesuʻega. O Mozilla o le uluai tagata faʻatau suʻesuʻe na tuʻuina atu se faʻataʻitaʻiga faʻataʻitaʻiga o Masonry i tua i le 2020. Ma sa matua fiafia foi Apple i le faia o lenei laiga fou i luga ole laiga e tupu. O lo'o aga'i fo'i i luma le galuega e fa'ata'atia ai le fa'aaliga, fa'atasi ai ma le maliliega i totonu o le vaega galue a le CSS e uiga i le fa'atonuga lautele ma e o'o lava i se fa'aaliga fou fa'aaliga: laina-laina. Afai e te manaʻo e aʻoaʻo atili e uiga i Masonry ma siaki le alualu i luma, siaki laʻu CSS Masonry punaoa itulau. I se taimi, pe a avea Masonry ma faʻailoga Faʻavae, pei o Grid poʻo Flexbox, o le a mafai ona matou faʻaaogaina ma manuia mai:
sili atu le faatinoga, Sili atu le tali atu, Faigofie o le faʻaoga ma faigofie code.
Sei o tatou tilotilo totoa i nei mea. Sili Fa'atinoga O le faia o lau lava Masonry-like layout system, poʻo le faʻaaogaina o se faletusi lona tolu nai lo, o lona uiga e tatau ona e faʻaogaina le code JavaScript e tuʻu ai mea i luga o le lau. O lona uiga foi o lenei code o le a fa'aalia poloka. Ioe, e leai se mea o le a aliali mai, pe leai foi ni mea i nofoaga sa'o po'o ni lapo'a sa'o, se'ia o'o ina fa'agasolo le code JavaScript. E masani ona fa'aogaina le fa'asologa o Masonry mo le vaega autu o le itulau web, o lona uiga o le code o le a fa'aalia ai au mea autu i se taimi mulimuli ane nai lo le mea e mafai, fa'aleagaina ai lau LCP, po'o le Largest Contentful Paint metric, lea e tele sona sao i le fa'atinoina ma le su'esu'eina o masini su'esu'e. Na ou faʻataʻitaʻiina le faletusi Masonry JS ma se faʻatulagaga faigofie ma e ala i le faʻataʻitaʻiina o se fesoʻotaʻiga 4G lemu i DevTools. E le tele tele le faletusi (24KB, 7.8KB gzipped), ae na manaʻomia le 600ms e faʻapipiʻi i lalo o laʻu suʻega. O se fa'amaumauga lea o fa'atinoga o lo'o fa'aalia ai le umi o le 600ms taimi uta mo le faletusi a Masonry, ma e leai se isi gaioiga na tupu a'o tupu lena mea:
E le gata i lea, pe a maeʻa le taimi muamua o le utaina, o le tusitusiga na sii mai e manaʻomia ona faʻavasega, tuʻufaʻatasia, ona tamoe lea. O ia mea uma, e pei ona taʻua muamua, na poloka ai le faʻaliliuina o le itulau. Faʻatasi ai ma le faʻatinoina o le Masonry i totonu o le masini suʻesuʻe, o le a leai se matou tusitusiga e utaina ma tamoʻe. O le masini su'esu'e o le a na'o le faia o lana mea i le taimi o le laasaga muamua o le fa'aliliuina o itulau. Lelei Talia E pei o le taimi muamua e utaina ai se itulau, toe sui le fa'amalama o le su'esu'ega e o'o atu ai i le toe fa'afo'iina o le fa'atulagaina i lena itulau. I le taimi nei, peitaʻi, afai o loʻo faʻaogaina e le itulau le faletusi Masonry JS, e le manaʻomia le toe utaina o le tusitusiga, aua ua uma.iinei. Ae ui i lea, o le code e faʻanofo ai mea i nofoaga saʻo e manaʻomia ona tamoʻe. O lenei faletusi faapitoa e foliga mai e vave tele i le faia o lenei mea pe a uta le itulau. Ae ui i lea, e faʻaosoina aitema pe a manaʻomia le siitia atu i se isi nofoaga i luga o le faʻamalama faʻafouina, ma e faia ai se eseesega tele. O le mea moni, e le faʻaalu e tagata faʻaoga le taimi e toe faʻaleleia ai a latou suʻesuʻega windows e pei ona faia e le au atinaʻe. Ae o lenei fa'afiafiaga fa'atupu suiga e mafai ona fa'afefeteina ma fa'aopoopo i le taimi e mana'omia e fa'afetaui ai le itulau i lona lapo'a fou. Faigofie ole Fa'aoga ma Fa'ailoga Faigofie E maeu le faigofie o le faʻaogaina o se upega tafaʻilagi ma le faigofie o foliga o le code o mea taua ia e mafai ona faia se eseesega tele mo lau 'au. E le mafai ona tutusa le taua e pei o le faʻamatalaga mulimuli a le tagata faʻaoga, ioe, ae o le atinaʻe o le poto masani e aʻafia ai le faatumauina. O le faʻaaogaina o se upega tafaʻilagi faʻapipiʻiina e maua mai ai faʻamanuiaga taua i le pito i luma:
O tagata atiaʻe ua uma ona iloa HTML, CSS, ma JS o le a sili atu ona mafai ona faʻaogaina le faʻaogaina faigofie aua ua mamanuina e tuʻufaʻatasia lelei ma ia ogatasi ma isi vaega o le upega tafaʻilagi. E leai se lamatiaga o le solia o suiga o loʻo faʻaalia i le faʻaogaina o le ata. E toetoe lava leai se tulaga lamatia o lena vaega o le a le toe faʻaaogaina pe le tausia.
I le tulaga o le fausiaina o Masonry, ona o se faʻatulagaga muamua, e te faʻaaogaina mai le CSS, pei o Grid poʻo Flexbox, e leai se JS e aofia ai. E le gata i lea, o isi mea e faʻatatau i le CSS, e pei o le gap, galue e pei ona e faʻamoemoe latou te faia. E leai ni togafiti po'o ni auala e iloa ai, ma o mea e te a'oa'oina o lo'o fa'amauina ile MDN. Mo le Masonry JS lib, o le amataga e fai si lavelave: e manaʻomia se faʻamatalaga faʻamatalaga ma se faʻasologa faʻapitoa, faʻatasi ai ma elemene HTML natia e seti ai le koluma ma le va. Ma le isi, afai e te manaʻo e faʻasalalau koluma, e tatau ona e faʻapipiʻi le va o oe lava e aloese ai mai faʻafitauli:
Sei o tatou faʻatusatusa lenei mea i le mea e foliga mai o le faʻatinoina o le Masonry:
Fa'ailoga faigofie, sili atu fa'atusatusa e mafai ona fa'aogaina mea e pei o le va ma le mea e fa'aogaina ai le va'aiga 2, e pei lava o le fa'asologa, ma e le mana'omia oe e fa'atatau le sa'o le lautele e aofia ai le va. E faʻafefea ona iloa mea o loʻo avanoa ma pe a maua? I le aotelega, o le fesili e le o le mea moni pe afai e tatau ona e faʻaogaina Masonry fausia i luga o se faletusi JS, ae o afea. O le faletusi o le Masonry JS e ofoofogia ma ua faʻatumuina se avanoa i luga o le upega tafaʻilagi mo le tele o tausaga, ma mo le tele o atinaʻe fiafia ma tagata faʻaoga. E i ai ni nai faʻaletonu pe a e faʻatusatusa i se faʻatinoina o le Masonry, ioe, ae e le taua pe a le o sauni lena faʻatinoga. E faigofie ia te aʻu ona lisiina nei foliga fou o luga ole upega tafaʻilagi aua ou te galue i se tagata faʻatau suʻesuʻe, ma o lea e masani ona ou iloa le mea o le a oʻo mai. Ae e masani ona faʻasoa e le au atinaʻe, suʻesuʻega ma suʻesuʻega, o le siakiina o mea fou e faigata. O le tumau i le logo e faigata, ma e le faʻamuamua e kamupani le aʻoaʻoina. Ina ia fesoasoani i lenei mea, o nai punaoa nei e maua ai faʻafouga i auala faigofie ma faʻapitoa ina ia mafai ai ona e mauaina faʻamatalaga e te manaʻomia vave:
O le Upega Tafa'ilagi e fa'aalia ai le nofoaga su'esu'e: Atonu e te fiafia i lana itulau faʻamatalaga faʻasalalauga. Ma, afai e te fiafia i le RSS, siaki le fafaga faʻamatalaga faʻasalalau, faʻapea foʻi ma le Baseline Newly Available ma Widely Avanoa fafaga.
Le UepiTulaga Tulaga laupapa: Atonu e te fiafia i itulau eseese o tausaga faavae.
Chrome Platform Tulaga' itulau fa'afanua auala.
Afai ei ai sina taimi sili atu, atonu e te fiafia foi i faʻamatalaga faʻasalalauga a le au faʻatau suʻesuʻe:
Chrome pito Firefox Safari
Mo nisi punaoa, siaki la'u Navigating the Web Platform Cheatsheet. E Le'i Fa'atinoina La'u Mea O le isi itu o le faafitauli. E tusa lava pe e te mauaina le taimi, malosi, ma auala e siaki ai, o loʻo i ai pea le le fiafia i le faʻalogoina o lou leo ma faʻatino au mea e sili ona e fiafia i ai. Masalo sa e faʻatali mo le tele o tausaga mo se pusa faʻapitoa e foʻia, poʻo se faʻamatalaga patino e lafo i totonu o se suʻega o loʻo misi pea. O le mea ou te fai atu o loʻo faʻalogo tagata faʻatau suʻesuʻe. O aʻu o se vaega o le tele o 'au faʻalapotopotoga o loʻo matou talanoaina ai faʻailoga faʻapitoa ma manatu faaalia i taimi uma. Matou te vaʻavaʻai i le tele o punaʻoa eseese o faʻamatalaga, i totonu i totonu o tagata faʻatau suʻesuʻe taʻitasi ma fafo / lautele i luga o faʻasalalauga, galuega faʻavae tatala, blogs, ma suʻesuʻega. Ma, o loʻo matou taumafai pea e faia ni auala sili atu mo tagata atiaʻe e faʻasoa ai o latou manaʻoga patino ma faʻaoga mataupu. O lea, afai e te mafaia, faʻamolemole manaʻomia nisi mea mai tagata faʻatau suʻesuʻe ma faʻamalosia i matou e faʻatino foliga e te manaʻomia. Ou te maua e manaʻomia le taimi, ma e mafai foi ona faʻafefe (e le taʻua ai se pa puipui maualuga i le ulufale), ae e aoga foi. O nai auala nei e mafai ona e fa'alogoina ai lou (po'o lau kamupani) leo: Ave le tausaga ta'itasi State of JS, State of CSS, ma State of HTML su'esu'ega. Latou te faia se sao tele i le auala e faʻamuamua ai e le au faʻatau suʻesuʻe a latou galuega. Afai e te manaʻomia se API faʻavae faʻapitoa e faʻatinoina i taimi uma i luga o suʻesuʻega, mafaufau e tuʻuina atu se talosaga i le isi suʻesuʻega o le poloketi Interop. E manaʻomia le tele o le taimi, ae mafaufau pe faʻapefea ona faʻasoa e Shopify ma RUMvision a latou lisi o manaʻoga mo Interop 2026. O faʻamatalaga auiliili e pei o lenei e mafai ona aoga tele mo tagata faʻatau suʻesuʻe e faʻamuamua. Mo nisi feso'ota'iga aoga e fa'aaafia ai tagata fa'atau su'esu'e, siaki la'u Navigating the Web Platform Cheatsheet. Fa'ai'uga Ina ia tapunia, ou te faʻamoemoe o lenei tusiga ua tuʻuina atu ia te oe ni nai mea e te mafaufau i ai:
Fa'afiafiaga mo Masonry ma isi 'upega tafa'ilagi o lo'o lumana'i. O nai vaega i luga ole laiga atonu e te mana'o e amata fa'aoga. O nai fasi fa'ailoga masani po'o le 3rd-party code atonu e mafai ona e 'ave'esea e fa'atatau i mea ua fausia. O nai auala e siaki ai mea o lo'o o'o mai ma fa'aaafia ai tagata fa'atau su'esu'e.
Ae sili atu le taua, ou te faʻamoemoe ua ou faʻamaonia oe i aoga o le faʻaogaina o le upega tafaʻilagi i lona gafatia atoatoa.
