Ma kahi o 15 mau makahiki i hala aku nei, e hana ana au ma kahi hui kahi i kūkulu ai mākou i nā polokalamu no nā ʻelele huakaʻi, nā limahana mokulele, a me nā hui mokulele. Ua kūkulu pū mākou i kā mākou papa hana i loko o ka hale no nā ʻāpana UI a me nā mana app ʻaoʻao hoʻokahi. Loaʻa iā mākou nā ʻāpana no nā mea āpau: nā kahua, nā pihi, nā ʻāpana, nā pae, nā papa ʻikepili, nā menus, nā mea koho lā, nā koho, a me nā multiselects. Loaʻa iā mākou kekahi ʻāpana div. He mea maikaʻi loa kā mākou māhele div ma ke ala, ua ʻae ia iā mākou e hana i nā kihi pōʻai ma nā mākaʻikaʻi āpau, ka mea, manaʻoʻiʻo a ʻaʻole paha, ʻaʻole ia he mea maʻalahi ke hana i kēlā manawa.
Ua hana ʻia kā mākou hana ma kahi manawa o kā mākou mōʻaukala i ka wā i ʻike ʻia ai ʻo JS, Ajax, a me HTML dynamic ma ke ʻano he kipi i lawe mai iā mākou i ka wā e hiki mai ana. Hiki koke, hiki iā mākou ke hōʻano hou i kahi ʻaoʻao me ka ikaika, e kiʻi i ka ʻikepili mai kahi kikowaena, a pale aku i ka hoʻokele ʻana i nā ʻaoʻao ʻē aʻe, i ʻike ʻia he lohi a ʻānai i kahi ʻāpana keʻokeʻo nui ma ka pale ma waena o nā ʻaoʻao ʻelua. Aia kekahi ʻōlelo, i kaulana ʻia e Jeff Atwood (ka mea nāna i hoʻokumu iā StackOverflow), e heluhelu ana: "ʻO kēlā me kēia palapala noi hiki ke kākau ʻia ma JavaScript e kākau ʻia ma ka JavaScript." - Jeff Atwood
No mākou i kēlā manawa, ua like kēia me ka wiwo ʻole e hele maoli a hana i kēlā mau polokalamu. Ua like ia me ka ʻae ʻia e hana i nā mea āpau me JS. No laila ua hana mākou i nā mea āpau me JS, a ʻaʻole mākou i lawe i ka manawa e noiʻi i nā ʻano hana ʻē aʻe. ʻAʻole mākou i manaʻo i ka manaʻo e aʻo pono i ka mea hiki ke hana i ka HTML a me CSS. ʻAʻole mākou i ʻike maoli i ka pūnaewele ma ke ʻano he papa hana hoʻomohala holoʻokoʻa. ʻIke mākou he mea pono mākou e hana a puni, ʻoi aku ka nui o ke kākoʻo ʻana i ka polokalamu kele pūnaewele. Hiki iā mākou ke hoʻolei hou aku iā JS i mea e hana ai. ʻO ka lawe ʻana i ka manawa e aʻo hou e pili ana i ka hana ʻana o ka pūnaewele a me nā mea i loaʻa ma ka paepae i kōkua iaʻu? ʻOiaʻiʻo, hiki paha iaʻu ke kahi i kahi pūʻulu code ʻaʻole pono maoli. Akā, i kēlā manawa, ʻaʻole paha i nui. ʻIke ʻoe, he mea koʻikoʻi ka ʻokoʻa o ka polokalamu kele i kēlā manawa. ʻO kēia ka manawa i lilo ai ʻo Internet Explorer i mea hoʻokele nui, me Firefox ka lua kokoke, akā e hoʻomaka ana e nalowale i ka mākeke ma muli o ka loaʻa ʻana o ka kaulana o Chrome. ʻOiai ua maikaʻi loa ʻo Chrome a me Firefox i ka ʻae ʻana i nā kūlana pūnaewele, ʻo nā kaiapuni kahi e holo ai kā mākou mau polokalamu i manaʻo ʻia e kākoʻo mākou iā IE6 no ka manawa lōʻihi. ʻOiai i ʻae ʻia mākou e kākoʻo iā IE8, pono mākou e hana i nā ʻokoʻa he nui ma waena o nā polokalamu kele pūnaewele. ʻAʻole ʻo ia wale nō, akā ʻaʻole i loaʻa i ka pūnaewele o ka manawa ka nui o nā mana i kūkulu ʻia i loko o ka paepae.
Holo wikiwiki i kēia lā. Ua loli nui nā mea. ʻAʻole wale mākou i ʻoi aku ka nui o kēia mau mana ma mua o ka wā ma mua, akā ua piʻi pū ka nui o ka loaʻa ʻana o lākou. E ʻae mai iaʻu e nīnau hou i ka nīnau, a laila: E hoʻolōʻihi i ka manawa e aʻo hou e pili ana i ka hana ʻana o ka pūnaewele a me nā mea i loaʻa ma ka paepae e kōkua iā ʻoe i kēia lā? ʻAe loa. ʻO ke aʻo ʻana e hoʻomaopopo a hoʻohana i ka pūnaewele pūnaewele i kēia lā e hāʻawi iā ʻoe i kahi pōmaikaʻi nui ma mua o nā mea hoʻomohala ʻē aʻe. Inā ʻoe e hana ma ka hana, hiki ke komo, pane, hui pū lākou a pau, a i ʻole ka hoʻouna ʻana i nā hiʻohiʻona UI, inā makemake ʻoe e hana ma ke ʻano he ʻenekini kuleana, ʻo ka ʻike ʻana i nā mea hana i loaʻa iā ʻoe e kōkua iā ʻoe e hoʻokō wikiwiki a maikaʻi i kāu mau pahuhopu. ʻO kekahi mau mea ʻaʻole pono ʻoe i kahi waihona no ka mea hou ʻO ka ʻike ʻana i nā mea e kākoʻo nei i kēia lā, ʻo ka nīnau, ʻo ia: He aha kā mākou e haʻalele ai? Pono mākou i kahi div e hana i nā kihi pōʻai i 2025? ʻOiaʻiʻo,ʻaʻole mākou. Ua kākoʻo ʻia ka waiwai palena-radius e nā mākaʻikaʻi i hoʻohana ʻia i kēia manawa ma mua o 15 mau makahiki i kēia manawa. A ke hele koke mai nei ke ʻano kihi, no nā kihi ʻoi aku ka nani. E nānā i nā hiʻohiʻona hou loa i loaʻa i kēia manawa ma nā polokalamu kele pūnaewele nui, a hiki iā ʻoe ke hoʻohana e hoʻololi i nā hilinaʻi i loaʻa i kāu codebase. ʻAʻole ka manaʻo e haʻalele koke i kāu mau hale waihona puke aloha a kākau hou i kāu codebase. No nā mea ʻē aʻe, pono ʻoe e noʻonoʻo mua i ke kākoʻo polokalamu a hoʻoholo e pili ana i nā kumu ʻē aʻe e pili ana i kāu papahana. Hoʻokomo ʻia kēia mau hiʻohiʻona i loko o nā ʻenekini mākaʻikaʻi nui ʻekolu (Chromium, WebKit, a me Gecko), akā loaʻa paha iā ʻoe nā koi kākoʻo polokalamu ʻē aʻe e pale aku iā ʻoe mai ka hoʻohana koke ʻana iā lākou. ʻO kēia ka manawa maikaʻi e aʻo ai e pili ana i kēia mau hiʻohiʻona, ʻoiai, e hoʻolālā paha e hoʻohana iā lākou i kekahi manawa. Popovers and Dialogs Hiki i ka Popover API, ka
ʻOiaʻiʻo, ua piʻi aʻe ka wikiwiki o kāu pili pūnaewele, akā ʻaʻole ia ka hihia no kēlā me kēia. A ʻaʻole like nā mea a pau i ka mana like. ʻO ka huki ʻana i nā code ʻaoʻao ʻekolu no nā mea hiki iā ʻoe ke hana me ka paepae, akā, ʻo ke ʻano o ka hoʻouna ʻana i nā code hou aʻe, a no laila hiki i nā mea kūʻai aku he liʻiliʻi ma mua o ka mea maʻamau. Ma ka pūnaewele, alakaʻi ka hana ʻino i ka haʻalele nui a hōʻeha i ka inoa inoa. Holo Liʻiliʻi Code Ma nā Mea Hana Eia kekahi, ʻoi aku ka wikiwiki o ke code āu e hoʻouna ai ma nā polokalamu o kāu mea kūʻai aku inā hoʻohana ʻo ia i nā abstract abstract liʻiliʻi ma luna o ka paepae. ʻOi aku paha ka pane a ʻoi aku ka maʻalahi ma ka paʻamau. Ke alakaʻi nei kēia mau mea i nā mea kūʻai aku a hauʻoli. E nānā i koʻu hoa hana ʻo Alex Russell i kēlā me kēia makahiki, e hōʻike ana i ka hapa nui o nā polokalamu premium mai nā mākeke me nā piliona o nā mea hoʻohana ma muli o ka like ʻole o ka waiwai. A ke ulu wale nei kēia āpau i ka manawa.
ʻO ka Layout Masonry i kūkulu ʻia ʻO kahi hiʻohiʻona pūnaewele pūnaewele e hiki koke mai ana a ʻo kaʻu e hauʻoli nui nei ʻo CSS Masonry.
E hoʻomaka wau ma ka wehewehe ʻana i ke ʻano o Masonry. He aha ka Masonry ʻO Masonry kahi ʻano hoʻolālā i kaulana ʻia e Pinterest i nā makahiki i hala. Hoʻokumu ia i nā mele kūʻokoʻa o ka ʻike i loko o kahi e hoʻopili ai nā mea iā lākou iho i kahi kokoke i ka hoʻomaka ʻana o ke mele e like me ka hiki.
He nui ka poʻe e ʻike iā Masonry he koho maikaʻi loa no nā portfolios a me nā kiʻi kiʻi kiʻi, hiki iā ia ke hana. Akā ʻoi aku ka maʻalahi o Masonry ma mua o ka mea āu e ʻike ai ma Pinterest, a ʻaʻole i kaupalena ʻia i nā hoʻolālā like me ka wailele. Ma kahi hoʻolālā Masonry:
Hiki i nā mele ke kolamu a i ʻole nā lālani:
ʻAʻole pono e like ka nui o nā mele o ka ʻike:
Hiki i nā mea ke holo i nā mele he nui:
Hiki ke kau ʻia nā mea ma nā ala kikoʻī; ʻAʻole pono lākou e hahai mau i ka algorithm hoʻokomo ʻakomi:
Demos Eia kekahi mau demos maʻalahi aʻu i hana ai ma ka hoʻohana ʻana i ka hoʻokō e hiki mai ana o CSS Masonry ma Chromium. He demo hale kiʻi kiʻi, e hōʻike ana pehea e hiki ai i nā mea (ke poʻo inoa ma kēia hihia) ke holo i nā mele he nui:
ʻO kekahi kiʻi kiʻi e hōʻike ana i nā mele o nā ʻano nui like ʻole:
He hoʻolālā paena nūhou me kekahi mau ala ʻoi aku ka laulā ma mua o nā mea ʻē aʻe, a me kekahi mau mea e pili ana i ka laulā holoʻokoʻa o ka hoʻolālā:
He papa kanban e hōʻike ana e hiki ke kau ʻia nā mea ma nā ala kikoʻī:
Nānā: ʻO kaUa hana ʻia nā demos mua me kahi mana o Chromium ʻaʻole i loaʻa i ka hapa nui o nā mea hoʻohana pūnaewele, no ka mea ke hoʻomaka wale nei ʻo CSS Masonry e hoʻokō ʻia i nā polokalamu kele pūnaewele. Eia naʻe, ua hauʻoli nā mea hoʻomohala pūnaewele i ka hoʻohana ʻana i nā hale waihona puke e hana i nā hoʻolālā Masonry no nā makahiki i hala. Nā Paena e hoʻohana nei i ka Masonry i kēia lā ʻOiaʻiʻo, maʻamau ka Masonry ma ka pūnaewele i kēia lā. Eia kekahi mau laʻana i loaʻa iaʻu ma waho o Pinterest:
A he mau hiʻohiʻona hou aʻe, ʻaʻole maopopo.
No laila, pehea i hana ʻia ai kēia mau hoʻolālā? Nā hana hoʻoponopono ʻO kahi hoʻopunipuni aʻu i ʻike ai i hoʻohana ʻia ʻo ia ka hoʻohana ʻana i kahi hoʻolālā Flexbox ma kahi, e hoʻololi ana i kona kuhikuhi i ke kolamu, a hoʻonohonoho iā ia e uhi. Ma kēia ala, hiki iā ʻoe ke kau i nā mea o nā kiʻekiʻe like ʻole i nā kolamu kūʻokoʻa he nui, e hāʻawi ana i ka manaʻo o kahi hoʻolālā Masonry:
Eia nō naʻe, ʻelua mau palena me kēia workaround:
He ʻokoʻa ka hoʻonohonoho ʻana o nā mea mai ka mea me kahi hoʻolālā Masonry maoli. Me Flexbox, hoʻopiha mua nā mea i ke kolamu mua a, i ka piha ʻana, a laila hele i ke kolamu aʻe. Me Masonry, e hoʻopaʻa ʻia nā mea i kēlā me kēia mele (a i ʻole kolamu i kēia hihia) i loaʻa ka nui o nā wahi. Akā, a ʻoi aku paha ka mea nui, pono kēia workaround e hoʻonohonoho i kahi kiʻekiʻe paʻa i ka pahu Flexbox; inā ʻaʻole, ʻaʻole hiki ke ʻōwili ʻia.
Nā Hale Waihona Puke Masonry ʻEkolu No nā hihia kiʻekiʻe loa, ua hoʻohana nā mea hoʻomohala i nā hale waihona puke. ʻO ka hale waihona puke kaulana loa a kaulana hoʻi no kēia mea i kapa ʻia ʻo Masonry, a hoʻoiho ʻia ma kahi o 200,000 mau manawa i kēlā me kēia pule e like me ka NPM. Hāʻawi pū ʻo Squarespace i kahi ʻāpana hoʻolālā e hana i kahi hoʻolālā Masonry, no kahi koho ʻole-code, a hoʻohana nā pūnaewele he nui. Hoʻohana kēia mau koho ʻelua i ka code JavaScript e kau i nā mea i ka hoʻolālā. Masonry i kūkulu ʻia ʻOliʻoli loa wau i ka hoʻomaka ʻana o Masonry e ʻike ʻia i nā polokalamu kele ma ke ʻano he hiʻohiʻona CSS i kūkulu ʻia. I ka wā lōʻihi, hiki iā ʻoe ke hoʻohana i ka Masonry e like me kāu hana ʻana iā Grid a i ʻole Flexbox, ʻo ia hoʻi, me ka ʻole o ka pono o nā workarounds a i ʻole nā code ʻaoʻao ʻekolu. Ke hoʻokō nei kaʻu hui ma Microsoft i ke kākoʻo Masonry i kūkulu ʻia i ka papahana open source Chromium, kahi i hoʻokumu ʻia ai ʻo Edge, Chrome, a me nā mea ʻē aʻe he nui. ʻO Mozilla maoli nō ka mea kūʻai pūnaewele mua e hoʻolauna i kahi hoʻokō hoʻokolohua o Masonry i ka makahiki 2020. A ua hoihoi nui ʻo Apple i ka hana ʻana i kēia hoʻolālā pūnaewele hou. Ke neʻe nei ka hana e hoʻohālikelike i ka hiʻohiʻona, me ka ʻaelike i loko o ka hui hana CSS e pili ana i ke kuhikuhi ākea a me kahi hōʻike hōʻike hōʻike hou: grid-lanes. Inā makemake ʻoe e aʻo hou aʻe e pili ana i ka Masonry a nānā i ka holomua, e nānā i kaʻu ʻaoʻao kumu waiwai CSS Masonry. I ka manawa, ke lilo ʻo Masonry i hiʻohiʻona Baseline, e like me Grid a i ʻole Flexbox, hiki iā mākou ke hoʻohana wale iā ia a pōmaikaʻi mai:
ʻOi aku ka maikaʻi o ka hana, ʻOi aku ka maikaʻi o ka pane ʻana, ʻO ka maʻalahi o ka hoʻohana a me ka code maʻalahi.
E nānā pono kākou i kēia mau mea. ʻOi aku ka maikaʻi o ka hana ʻO ka hana ʻana i kāu ʻōnaehana hoʻonohonoho e like me Masonry, a i ʻole ka hoʻohana ʻana i kahi waihona ʻaoʻao ʻekolu, ʻo ia hoʻi, pono ʻoe e holo i ka code JavaScript e kau i nā mea ma ka pale. ʻO ia hoʻi, e hoʻokaʻawale ʻia kēia code. ʻOiaʻiʻo, ʻaʻohe mea e ʻike ʻia, a i ʻole aia nā mea ma nā wahi kūpono a i ʻole ka nui kūpono, a hiki i ka holo ʻana o kēlā code JavaScript. Hoʻohana pinepine ʻia ka hoʻolālā masonry no ka ʻāpana nui o kahi ʻaoʻao pūnaewele, ʻo ia hoʻi, e hōʻike ʻia ana kāu ʻike nui ma hope o ka hiki ke loaʻa, e hoʻohaʻahaʻa i kāu LCP, a i ʻole Largest Contentful Paint metric, e hana nui ana i ka hana ʻike a me ka loiloi ʻenekini huli. Ua hoʻāʻo au i ka hale waihona puke ʻo Masonry JS me kahi hoʻolālā maʻalahi a ma ka hoʻohālikelike ʻana i kahi pilina 4G lohi ma DevTools. ʻAʻole nui loa ka waihona (24KB, 7.8KB gzipped), akā ua lawe ʻia ʻo 600ms e hoʻouka ma lalo o kaʻu kūlana hoʻāʻo. Eia kahi hoʻopaʻa hoʻopaʻa ʻana e hōʻike ana i ka manawa hoʻouka 600ms lōʻihi no ka hale waihona puke Masonry, a ʻaʻohe hana hana ʻē aʻe i hana ʻia i ka wā e hana ana:
Eia kekahi, ma hope o ka manawa hoʻouka mua, pono e hoʻopili ʻia ka palapala i hoʻoiho ʻia, e hoʻohui ʻia, a laila holo. ʻO nā mea a pau, e like me ka mea i ʻōlelo ʻia ma mua, ke kāohi nei i ka hoʻolilo ʻana i ka ʻaoʻao. Me kahi hoʻokō Masonry i kūkulu ʻia i ka polokalamu kele, ʻaʻole mākou e loaʻa kahi palapala e hoʻouka a holo. E hana wale ka ʻenekini polokalamu i kāna hana i ka wā o ka hana ʻana i ka ʻaoʻao mua. ʻOi aku ka maikaʻi o ka pane ʻana E like me ka wā e hoʻouka mua ʻia ai kahi ʻaoʻao, hoʻololi hou i ka puka aniani ke alakaʻi i ka hoʻihoʻi hou ʻana i ka hoʻolālā ma ia ʻaoʻao. I kēia manawa, inā hoʻohana ka ʻaoʻao i ka waihona Masonry JS, ʻaʻohe pono e hoʻouka hou i ka palapala, no ka meamaanei. Eia naʻe, pono e holo ka code e hoʻoneʻe i nā mea ma nā wahi kūpono. I kēia manawa, ʻoi aku ka wikiwiki o kēia hale waihona puke i ka hana ʻana i kēia ke hoʻouka ʻia ka ʻaoʻao. Eia naʻe, hoʻolalelale ia i nā mea i ka wā e pono ai lākou e neʻe i kahi ʻē aʻe ma ka hoʻololi ʻana i ka puka makani, a he mea nui kēia. ʻOiaʻiʻo, ʻaʻole hoʻohana nā mea hoʻohana i ka manawa e hoʻololi i kā lākou polokalamu kele pūnaewele e like me kā mākou mea hoʻomohala. Akā ʻo kēia ʻike hoʻololi hou ʻana i ka animated hiki ke hoʻohālikelike a hoʻohui i ka manawa i ʻike ʻia no ka ʻaoʻao e hoʻololi i kona nui hou. ʻO ka maʻalahi o ka hoʻohana a me ke code maʻalahi Pehea ka maʻalahi o ka hoʻohana ʻana i kahi hiʻohiʻona pūnaewele a me ka maʻalahi o ke ʻano o ke code he mau mea koʻikoʻi e hiki ke hoʻololi nui i kāu hui. ʻAʻole hiki iā lākou ke lilo i mea koʻikoʻi e like me ka ʻike mea hoʻohana hope, ʻoiaʻiʻo, akā, ʻo ka ʻike mea hoʻomohala ka hopena i ka mālama. ʻO ka hoʻohana ʻana i kahi hiʻohiʻona pūnaewele i kūkulu ʻia me nā pōmaikaʻi nui ma kēlā alo:
Hiki i nā mea hoʻomohala i ʻike mua i ka HTML, CSS, a me JS ke hoʻohana maʻalahi i kēlā hiʻohiʻona no ka mea ua hoʻolālā ʻia e hoʻohui maikaʻi a kūlike me ke koena o ka pūnaewele pūnaewele. ʻAʻohe pilikia o ka haki ʻana i nā loli i hoʻokomo ʻia i ke ʻano o ka hoʻohana ʻana i ka hiʻohiʻona. Aneane ʻaʻohe pilikia o kēlā hiʻohiʻona e hoʻopau a mālama ʻole ʻia.
I ka hihia o ka Masonry i kūkulu ʻia, no ka mea, he papa hana mua ia, hoʻohana ʻoe iā ia mai CSS, e like me Grid a Flexbox, ʻaʻohe JS pili. Eia kekahi, nā waiwai CSS e pili ana i ka hoʻolālā, e like me ka gap, e hana e like me kāu e manaʻo ai. ʻAʻohe mea hoʻopunipuni a i ʻole workarounds e ʻike e pili ana, a ua paʻi ʻia nā mea āu e aʻo ai ma MDN. No ka Masonry JS lib, he mea paʻakikī ka hoʻomaka ʻana: pono ia i kahi hiʻohiʻona ʻikepili me kahi syntax kikoʻī, me nā mea HTML huna e hoʻonohonoho i ke kolamu a me ka nui o nā āpau. Eia kekahi, inā makemake ʻoe e hoʻopaneʻe i nā kolamu, pono ʻoe e hoʻokomo i ka nui o ke āpau e pale aku i nā pilikia:
<ʻano> .track-sizer, .mea { laula: 20%; } .gutter-sizer { laula: 1rem; } .mea { kiʻekiʻe: 100px; palena-pale-hopena: 1rem; } .item:nth-child(odd) { kiʻekiʻe: 200px; } .item--width2 { laula: calc(40% + 1rem); }
E hoʻohālikelike i kēia me ke ʻano o kahi hoʻokō Masonry i kūkulu ʻia: <ʻano> .container { hōʻike: grid-lanes; nā alahele mānoanoa: hana hou (4, 20%); āpau: 1rem; } .mea { kiʻekiʻe: 100px; } .item:nth-keiki(odd) { kiʻekiʻe: 200px; } .item--width2 { kolamu-pae: span 2; }
ʻOi aku ka maʻalahi, ʻoi aku ka maʻalahi o ka code e hiki ke hoʻohana i nā mea e like me ka gap a me kahi e hana ʻia ai nā track spanning me ka span 2, e like me ka grid, a ʻaʻole koi iā ʻoe e helu i ka laulā kūpono e pili ana i ka nui o ke āpau. Pehea e ʻike ai i ka mea i loaʻa a i ka wā e loaʻa ai? Ma ka holoʻokoʻa, ʻaʻole maoli ka nīnau inā pono ʻoe e hoʻohana i ka Masonry i kūkulu ʻia ma luna o kahi waihona JS, akā i ka manawa. He mea kupanaha ka hale waihona puke ʻo Masonry JS a ua hoʻopiha ʻo ia i kahi āpau ma ka pūnaewele pūnaewele no nā makahiki he nui, a no nā mea hoʻomohala hauʻoli a me nā mea hoʻohana. Loaʻa iā ia kekahi mau drawbacks inā ʻoe e hoʻohālikelike iā ia i kahi hoʻokō Masonry i kūkulu ʻia, ʻoiaʻiʻo, akā ʻaʻole ia he mea nui inā ʻaʻole mākaukau kēlā hoʻokō. He mea maʻalahi iaʻu e hoʻopaʻa inoa i kēia mau hiʻohiʻona pūnaewele hou no ka mea ke hana nei au ma kahi mea kūʻai pūnaewele, a no laila makemake wau e ʻike i ka mea e hiki mai ana. Akā, kaʻana like nā mea hoʻomohala, ka nānā ʻana ma hope o ka nānā ʻana, he paʻakikī ka mālama ʻana i nā mea hou. He paʻakikī ka hoʻomau ʻana i ka ʻike, a ʻaʻole hoʻonohonoho mua nā ʻoihana i ke aʻo ʻana. No ke kōkua ʻana i kēia, eia kekahi mau kumuwaiwai e hāʻawi i nā mea hou i nā ala maʻalahi a paʻakikī i hiki iā ʻoe ke kiʻi koke i ka ʻike āu e pono ai:
Hōʻike ka paepae pūnaewele i ka paena explorer: Hiki paha iā ʻoe ke hoihoi i kāna ʻaoʻao memo hoʻokuʻu. A, inā makemake ʻoe i ka RSS, e nānā i ka hānai memo hoʻokuʻu, a me ka Baseline Newly Available and Widely Load feeds.
Ka PūnaewelePapa kuhikuhi kahua kūlana: Makemake paha ʻoe i kāna mau ʻaoʻao makahiki Baseline.
ʻaoʻao palapala ʻaoʻao ʻaoʻao ʻaoʻao ʻaoʻao ʻaoʻao ʻaoʻao.
Inā he manawa hou aʻe ʻoe, makemake paha ʻoe i nā memo hoʻokuʻu o nā mea kūʻai pūnaewele:
Chrome Kaulana Firefox Safari
No nā kumuwaiwai hou aʻe, e nānā i kaʻu Navigating the Web Platform Cheatsheet. ʻAʻole i hoʻokō ʻia kaʻu mea ʻO ia ka ʻaoʻao o ka pilikia. ʻOiai inā loaʻa iā ʻoe ka manawa, ka ikaika, a me nā ala e hoʻopaʻa ai, aia nō ka huhū i ka lohe ʻana i kou leo a hoʻokō ʻia kāu mau hiʻohiʻona punahele. Malia paha ua kali ʻoe i nā makahiki no ka hoʻoponopono ʻana i kahi kikoʻī kikoʻī, a i ʻole kahi hiʻohiʻona kikoʻī e hoʻouna ai i kahi polokalamu kele pūnaewele kahi e nalo nei. ʻO kaʻu e ʻōlelo ai ke hoʻolohe nei nā mea kūʻai pūnaewele. ʻO wau kekahi o nā hui hui keʻa kahi e kūkākūkā ai mākou i nā hōʻailona hoʻomohala a me nā manaʻo i nā manawa a pau. Nānā mākou i nā kumu like ʻole o ka manaʻo, ma loko o kēlā me kēia mea kūʻai polokalamu kele pūnaewele a me waho / lehulehu ma nā ʻaha kūkā, nā papahana open source, blogs, a me nā noiʻi. A, ke hoʻāʻo mau nei mākou e hana i nā ala maikaʻi aʻe no nā mea hoʻomohala e kaʻana like i kā lākou mau pono kikoʻī a hoʻohana i nā hihia. No laila, inā hiki iā ʻoe, e ʻoluʻolu e koi hou aku mai nā mea kūʻai pūnaewele a koi iā mākou e hoʻokō i nā hiʻohiʻona āu e pono ai. Loaʻa iaʻu he manawa, a hiki ke hoʻoweliweli (ʻaʻole e haʻi i kahi pale kiʻekiʻe i ke komo ʻana), akā hana pū kekahi. Eia kekahi mau ala e hiki ai iā ʻoe ke lohe i ka leo o kāu (a i ʻole kāu hui): E lawe i nā noiʻi makahiki State of JS, State of CSS, a me State of HTML. He kuleana nui lākou i ke ʻano o ka hoʻokumu ʻana o nā mea kūʻai pūnaewele i kā lākou hana. Inā makemake ʻoe i kahi API e pili ana i ka maʻamau e hoʻokō mau ʻia ma waena o nā polokalamu kele pūnaewele, e noʻonoʻo e hoʻouna i kahi manaʻo ma ka hoʻomaka ʻana o ka papahana Interop. Pono ia i ka manawa hou aku, akā e noʻonoʻo pehea i kaʻana like ai ʻo Shopify a me RUMvision i kā lākou papa inoa makemake no Interop 2026. ʻO ka ʻike kikoʻī e like me kēia hiki ke lilo i mea pono loa no nā mea kūʻai pūnaewele e hoʻonohonoho mua. No nā loulou hou aʻe e hoʻohuli ai i nā mea kūʻai pūnaewele, e nānā i kaʻu Navigating the Web Platform Cheatsheet. Ka hopena No ka pani ʻana, manaʻolana wau ua waiho kēia ʻatikala iā ʻoe i kekahi mau mea e noʻonoʻo ai:
ʻO ka hauʻoli no ka Masonry a me nā hiʻohiʻona pūnaewele e hiki mai ana. ʻO kekahi mau hiʻohiʻona pūnaewele āu e makemake ai e hoʻomaka e hoʻohana. Hiki iā ʻoe ke wehe i kekahi mau ʻāpana o ke code maʻamau a i ʻole ʻaoʻao 3 no ka makemake o nā hiʻohiʻona i kūkulu ʻia. ʻO kekahi mau ala e mālama ai i nā mea e hiki mai ana a hoʻoikaika i nā mea kūʻai pūnaewele.
ʻO ka mea nui aku, ke manaʻolana nei au ua hōʻoiaʻiʻo wau iā ʻoe i nā pono o ka hoʻohana ʻana i ka pūnaewele pūnaewele i kona hiki piha.
