Bɛyɛ mfe 15 a atwam ni no, na mereyɛ adwuma wɔ adwumakuw bi a yɛyɛɛ app ahorow maa akwantu adwumayɛfo, wimhyɛn gyinabea adwumayɛfo, ne wimhyɛn adwumakuw ahorow. Yɛsan nso yɛɛ yɛn ankasa in-house framework maa UI components ne kratafa biako app tumi. Na yɛwɔ afã horow ma biribiara: afuw, bɔtn, tab, ranges, datatables, menus, datepickers, selects, ne multiselects. Ná yɛwɔ div component mpo. Yɛn div component no yɛɛ kɛseɛ wɔ kwan so, ɛmaa yɛn kwan ma yɛyɛɛ rounded corners wɔ browsers nyinaa so, a, sɛ wogye di anaasɛ nnye nni, na ɛnyɛ adeɛ a ɛyɛ mmerɛ sɛ yɛbɛyɛ saa berɛ no.
Yɛn adwuma no sii wɔ yɛn abakɔsɛm mu bere bi a wohuu JS, Ajax, ne HTML a ɛyɛ nnam sɛ nsakrae a ɛde yɛn baa daakye mu. Mpofirim ara, na yebetumi ayɛ kratafa bi foforo wɔ ɔkwan a ɛyɛ nnam so, anya data afi server bi so, na yɛakwati sɛ yɛbɛkɔ nkratafa afoforo so, a wohuu no sɛ ɛyɛ brɛoo na ɛhyerɛn ahinanan kɛse fitaa bi wɔ screen no so wɔ nkratafa abien no ntam. Na kasasin bi wɔ hɔ, a Jeff Atwood (nea ɔhyehyɛɛ StackOverflow) maa agye din, a ɛkenkan sɛ: “Aplikation biara a wobetumi de JavaScript akyerɛw no, awiei koraa no, wɔde JavaScript bɛkyerɛw.”— Jeff Atwood
Wɔ yɛn fam saa bere no, na eyi te sɛ akokoduru a yɛde bɛkɔ ankasa akɔyɛ saa app ahorow no. Na ɛte sɛ nea ɛyɛ blanket approval sɛ wo ne JS bɛyɛ biribiara. Enti yɛne JS yɛɛ biribiara, na yɛannye bere ankasa anhwehwɛ akwan foforo a wɔfa so yɛ nneɛma mu. Yɛante nka ankasa sɛ yɛanya nkannyan a ɛbɛma yɛasua nea HTML ne CSS betumi ayɛ no yiye. Yɛanhu wɛb no ankasa sɛ app platform a ɛrenya nkɔso wɔ ne nyinaa mu. Yɛn dodow no ara huu no sɛ biribi a ɛsɛ sɛ yɛyɛ ho adwuma, titiriw bere a ɛfa browser mmoa ho no. Yebetumi atow JS pii agu so kɛkɛ de ayɛ nneɛma. So sɛ megye bere sua pii fa sɛnea wɛbsaet no yɛ adwuma ne nea na ɛwɔ asɛnka agua no so ho a, anka ɛbɛboa me? Ampa, ebia anka metumi abɔ mmara akuwakuw bi a na ɛho nhia ankasa. Nanso, saa bere no, ebia na ɛnyɛ saa. Woahu, na nsonsonoe a ɛwɔ browser mu no yɛ nea ɛho hia yiye saa bere no. Na eyi yɛ bere a na Internet Explorer da so ara yɛ browser titiriw, a Firefox na ɛyɛ nea ɛto so abien a ɛbɛn, nanso efii ase hweree gua so kyɛfa esiane Chrome a ɛrenya din ntɛmntɛm nti. Ɛwom sɛ na Chrome ne Firefox ho akokwaw koraa wɔ wɛb gyinapɛn ahorow a wɔpene so mu de, nanso mmeae a na yɛn app ahorow no reyɛ adwuma no kyerɛ sɛ ɛsɛ sɛ yɛboa IE6 bere tenten. Bere a wɔmaa yɛn kwan sɛ yɛnboa IE8 mpo no, na ɛsɛ sɛ yɛda so ara di nsonsonoe pii a ɛwɔ browser ahorow ntam no ho dwuma. Ɛnyɛ ɛno nko, na mmom na wɛb a ɛwɔ hɔ saa bere no nni tumi pii saa a wɔasi wɔ asɛnka agua no mu pɛɛ.
Fast forward to nnɛ. Nneɛma asesa kɛse. Ɛnyɛ sɛ yɛwɔ saa tumi ahorow yi pii sen bere biara nko, na mmom sɛnea wobetumi anya bi nso akɔ soro. Enti ma memmisa asɛm no bio: So sɛ wugye bere sua pii fa sɛnea wɛbsaet no yɛ adwuma ne nea ɛwɔ asɛnka agua no so ho a, ɛbɛboa wo nnɛ? Yiw koraa. Sɛ wosua sɛnea wobɛte wɛb platform ase na wode adi dwuma nnɛ a, ɛma wunya mfaso kɛse sen developers afoforo. Sɛ́ ebia woyɛ adwuma wɔ adwumayɛ, akwan a wotumi kɔ, mmuae, ne nyinaa bom, anaasɛ wode UI nneɛma bɛmena kɛkɛ no, sɛ wopɛ sɛ woyɛ no sɛ mfiridwumayɛfo a ɔwɔ asɛyɛde a, sɛ wunim nnwinnade a ɛwɔ hɔ ma wo a, ɛboa wo ma wudu wo botae ahorow ho ntɛmntɛm na eye. Nneɛma Bi a Ebia Worenhia Nhomakorabea Bi Biara Enti, sɛ yenim nea browser ahorow boa nnɛ a, asɛmmisa no ne sɛ: Dɛn na yebetumi atow agu? So yɛhia div component na yɛayɛ rounded corners wɔ 2025 mu? Nokwarem no, yɛnyɛ saa. border-radius agyapade no, browser ahorow a wɔde di dwuma mprempren nyinaa aboa bɛboro mfe 15 wɔ saa bere yi mu. Na corner-shape nso reba nnansa yi ara, ma ntwea so a ɛyɛ fɛ mpo. Momma yɛnhwɛ nneɛma a ɛyɛ nnansa yi ara a seesei ɛwɔ browser akɛseɛ nyinaa mu, na wobɛtumi de asi dependencies a ɛwɔ hɔ dada wɔ wo codebase no ananmu. Asɛm no nyɛ sɛ wobɛtow wo nhomakorabea ahorow a wodɔ no nyinaa agu ntɛm ara na woasan akyerɛw wo codebase no. Ɛdefa biribiara a aka ho no, ɛho behia sɛ wudi kan susuw browser mmoa ho na wugyina nneɛma afoforo a ɛfa wo dwumadi no ho pɔtee so si gyinae. Wɔde nneɛma a edidi so yi adi dwuma wɔ browser engine atitiriw abiɛsa no mu (Chromium, WebKit, ne Gecko), nanso ebia wowɔ browser mmoa ahwehwɛde ahorow a ɛmma wuntumi mfa nni dwuma ntɛm ara. Nanso, mprempren da so ara yɛ bere pa a ɛsɛ sɛ wusua saa nneɛma yi ho ade, na ebia yɛ nhyehyɛe sɛ wode bedi dwuma bere bi. Popovers Ne Nkɔmmɔbɔ Popover API,
Ampa, ebia wo intanɛt ahoɔhare nso akɔ soro, nanso ɛnyɛ saa na ɛte wɔ obiara fam. Na ɛnyɛ obiara nso na ɔwɔ mfiri tumi koro. Sɛ wotwe third-party code ma nneɛma a wobɛtumi de platform no ayɛ a, mmom, ɛbɛyɛ sɛ ɛkyerɛ sɛ wode code pii bɛmena, na ɛno nti wobɛduru adetɔfoɔ kakraa bi nkyɛn sene sɛdeɛ wotaa yɛ no. Wɔ wɛb so no, loading adwumayɛ bɔne de abandonment rates kɛse ba na ɛpira brand din. Running Less Code Wɔ Mfiri So Bio nso, ɛda adi sɛ code a wode mena wɔ w’atɔfo mfiri so no yɛ adwuma ntɛmntɛm sɛ ɛde JavaScript abstractions kakraa bi di dwuma wɔ platform no atifi a. Ebia ɛsan nso yɛ nea ɛyɛ adwuma yiye na ɛyɛ nea wotumi kɔ bi default so. Eyi nyinaa ma adetɔfo pii na wɔn ani gye. Hwɛ me yɔnko dwumayɛni Alex Russell’s yearly performance inequality gap blog, a ɛkyerɛ sɛ mfiri a ɛyɛ fɛ nni gua a nnipa ɔpepepem pii de di dwuma no so kɛse esiane ahonyade a ɛnyɛ pɛ nti. Na bere kɔ so ara na saa nsonsonoe yi reyɛ kɛse.
Masonry Layout a Wɔde Sisi Mu Web platform feature baako a ɛreba nnansa yi ara na m’ani agye ho paa ne CSS Masonry.
Ma memfa nea Masonry yɛ no mfi ase. Nea Ɛyɛ Masonry Masonry yɛ nhyehyɛe bi a Pinterest maa agye din mfe bi a atwam ni. Ɛyɛ nsɛm a ɛwɔ mu a ɛde ne ho a nneɛma boaboa wɔn ho ano bɛn track no mfiase sɛnea wobetumi.
Nnipa pii hu Masonry sɛ ɔkwan pa a wobetumi afa so ayɛ portfolio ne mfonini ahorow, a akyinnye biara nni ho sɛ ebetumi ayɛ. Nanso Masonry yɛ nea ɛyɛ mmerɛw sen nea wuhu wɔ Pinterest so, na ɛnyɛ nhyehyɛe a ɛte sɛ nsu a ɛtɔ kɛkɛ nkutoo. Wɔ Masonry nhyehyɛe bi mu no:
Tracks betumi ayɛ columns anaa rows:
Ɛnsɛ sɛ tracks of content nyinaa yɛ pɛ:
Nneɛma betumi atrɛw track ahorow pii mu:
Wobetumi de nneɛma asisi akwan pɔtee bi so; ɛnsɛ sɛ wodi automatic placement algorithm no akyi bere nyinaa:
Demos a wɔde kyerɛ Demos kakraa bi a ɛnyɛ den a meyɛe denam CSS Masonry a ɛreba a mede bedi dwuma wɔ Chromium mu no so ni. Mfonini gallery demo, a ɛkyerɛ sɛnea nneɛma (asɛmti no wɔ asɛm yi mu) betumi atrɛw track ahorow pii mu:
Mfonini foforo a ɛkyerɛ nnwom a ɛsono ne kɛse:
Nsɛm ho amanneɛbɔbea nhyehyɛe a track ahorow bi trɛw sen afoforo, ne nneɛma bi a ɛtrɛw nhyehyɛe no trɛw nyinaa mu:
Kanban board a ɛkyerɛ sɛ wobetumi de nneɛma ahyɛ akwan pɔtee bi so:
Hyɛ no nsow: Thewɔde Chromium bi a ennya nnya mmaa wɛb dwumadiefoɔ dodoɔ no ara na ɛyɛɛ demos a atwam no, ɛfiri sɛ CSS Masonry ahyɛ aseɛ ara pɛ sɛ wɔde redi dwuma wɔ browser ahodoɔ mu. Nanso, wɛb adwumayɛfo de anigye de nhomakorabea ahorow adi dwuma de ayɛ Masonry nhyehyɛe mfe pii dedaw. Nnawɔtwe a Wɔde Masonry Di Dwuma Ɛnnɛ Nokwarem no, Masonry abu so yiye wɔ wɛbsaet so nnɛ. Nhwɛsoɔ kakraa bi a mehunuu wɔ Pinterest akyi nie:
Na nhwɛso kakraa bi a ɛnyɛ nea ɛda adi kɛse:
Enti, ɔkwan bɛn so na wɔyɛɛ nhyehyɛe ahorow yi? Nneɛma a wɔde bɛyɛ adwuma Afiri baako a mahu sɛ wɔde adi dwuma ne sɛ wode Flexbox nhyehyɛe bedi dwuma mmom, asesa ne kwan akɔ column, na wode ahyɛ wrap. Saa kwan yi so no, wubetumi de nneɛma a ɛsono ne sorokɔ ahyɛ adum pii a ɛde ne ho mu, na ama woanya adwene sɛ wɔayɛ Masonry nhyehyɛe:
Nanso, anohyeto abien wɔ saa dwumadie yi ho:
Ɛsono sɛnea nneɛma no nnidiso nnidiso wɔ sɛnea anka ɛbɛyɛ wɔ Masonry nhyehyɛe ankasa ho. Flexbox no, nneɛma di kan hyɛ kɔla a edi kan no ma na, sɛ ɛyɛ ma a, afei kɔ kɔla a edi hɔ no so. Wɔ Masonry mu no, anka nneɛma bɛboaboa ano wɔ track (anaasɛ column wɔ eyi mu) biara a ɛwɔ baabi a ɛdɔɔso mu. Nanso nso, na ebia nea ɛho hia sen saa no, saa dwumadie yi hwehwɛ sɛ wode ɔsorokɔ a wɔahyɛ da ahyɛ Flexbox akoraeɛ no so; anyɛ saa a, anka biribiara rensi.
Masonry Nhomakorabea Ahorow a Ɛto so Abiɛsa Wɔ nsɛm a ɛkɔ akyiri ho no, wɔn a wɔyɛ no de nhomakorabea ahorow adi dwuma. Nhomakorabea a wonim no yiye na agye din sen biara ma eyi no, wɔfrɛ no Masonry kɛkɛ, na sɛnea NPM kyerɛ no, wɔtwe bɛyɛ mpɛn 200,000 dapɛn biara. Squarespace nso de nhyehyeɛ fã bi a ɛkyerɛ Masonry nhyehyeɛ, ma no-code alternative, na sites pii de di dwuma. Saa akwan abien yi nyinaa de JavaScript koodu di dwuma de nneɛma gu nhyehyɛe no mu. Masonry a Wɔasisi wɔ mu M’ani agye ankasa sɛ seesei Masonry afi ase repue wɔ browser ahorow mu sɛ CSS afã a wɔasisi mu. Bere kɔ so no, wubetumi de Masonry adi dwuma te sɛ nea wode Grid anaa Flexbox di dwuma no, kyerɛ sɛ, wunhia adwumayɛ ho nhyehyɛe anaasɛ obi foforo biara. Me kuw a ɛwɔ Microsoft no de Masonry mmoa a wɔasisi mu adi dwuma wɔ Chromium open source adwuma no mu, a Edge, Chrome, ne browser afoforo pii gyina so. Mozilla yɛ nokwarem no browser vendor a odi kan a ɔhyɛɛ nyansa sɛ wɔmfa Masonry nni dwuma wɔ afe 2020. Na Apple nso ani agye yiye sɛ wɔbɛma saa wɛb nhyehyɛe foforo yi ayɛ primitive. Adwuma a wɔde bɛyɛ ade no gyinapɛn nso rekɔ n’anim, a apam wɔ CSS adwumakuo no mu wɔ akwankyerɛ a ɛfa ɔkwan a wɔfa so yɛ adwuma no nyinaa ho ne mpo ɔyɛkyerɛ su foforɔ a wɔde bɛkyerɛ: grid-lanes. Sɛ wopɛ sɛ wosua pii fa Masonry ho na wodi nkɔsoɔ akyi a, hwɛ me CSS Masonry nneɛma krataafa no. Bere kɔ so no, sɛ Masonry bɛyɛ Baseline feature, te sɛ Grid anaa Flexbox ara pɛ a, yɛbɛtumi de adi dwuma kɛkɛ na yɛanya mfasoɔ afiri:
Adwumayɛ a eye kyɛn so, . Mmuae a eye kyɛn so, . Ɛnyɛ den sɛ wode bedi dwuma na code a ɛyɛ mmerɛw.
Momma yɛnhwehwɛ eyinom mu yiye. Adwumayɛ a Ɛyɛ Paara Sɛ woyɛ w’ankasa wo nhyehyɛe a ɛte sɛ Masonry, anaasɛ wode nhomakorabea a ɛto so abiɛsa bedi dwuma mmom a, ɛkyerɛ sɛ ɛsɛ sɛ wode JavaScript koodu di dwuma de nneɛma gu screen no so. Wei nso kyerɛ sɛ saa code yi bɛyɛ render blocking. Nokwarem no, biribiara renpue, anaasɛ nneɛma renkɔ mmeae a ɛfata anaasɛ ne kɛse a ɛfata, kosi sɛ saa JavaScript koodu no bɛkɔ so. Wɔtaa de masonry nhyehyɛe di dwuma ma wɛb krataafa bi fã titiriw, a ɛkyerɛ sɛ anka mmara no bɛma wo nsɛm titiriw no ada adi akyiri sen sɛnea anka ebetumi ayɛ, asɛe wo LCP, anaasɛ Largest Contentful Paint metric, a edi dwuma kɛse wɔ adwumayɛ a wosusuw sɛ ɛyɛ adwuma ne search engine optimization mu. Mesɔɔ Masonry JS nhomakorabea no hwɛe denam nhyehyɛe a ɛnyɛ den so ne denam 4G nkitahodi a ɛyɛ brɛoo a meyɛe wɔ DevTools mu no so. Nhomakorabea no nyɛ kɛse koraa (24KB, 7.8KB gzipped), nanso egyee 600ms na wɔde ahyɛ mu wɔ me sɔhwɛ tebea horow no ase. Adwumayɛ ho kyerɛwtohɔ a ɛkyerɛ sɛ 600ms load bere tenten ma Masonry nhomakorabea no ni, na rendering dwumadi foforo biara ansi bere a na ɛrekɔ so no:
Bio nso, bere a wɔde load mfiase no akyi no, afei na ɛsɛ sɛ wɔkyekyɛ script a wɔatwe no mu, boaboa ano, na afei wɔde di dwuma. Ne nyinaa, sɛnea yɛadi kan aka no, na esiw kratafa no nkyerɛase kwan. Sɛ yɛwɔ Masonry implementation a wɔasisi wɔ browser no mu a, yɛrennya script a yɛde bɛhyɛ mu na yɛayɛ adwuma. Browser engine no bɛyɛ n’ade ara kwa wɔ krataafa nkyerɛase anammɔn a edi kan no mu. Mmuae a Ɛyɛ Paara Te sɛ bere a kratafa bi di kan load no, sɛ wosakra browser mfɛnsere no kɛse a, ɛma wosan kyerɛ nhyehyɛe a ɛwɔ saa kratafa no mu bio. Nanso, saa bere yi de, sɛ krataafa no de Masonry JS nhomakorabea no redi dwuma a, ɛho nhia sɛ wode script no bɛhyɛ mu bio, efisɛ ɛwɔ hɔ dedawha. Nanso, ɛsɛ sɛ mmara a ɛde nneɛma kɔ mmeae a ɛfata no tu mmirika. Afei ɛte sɛ nea nhomakorabea pɔtee yi yɛ ntɛmntɛm yiye wɔ eyi yɛ mu bere a kratafa no load no. Nanso, ɛma nneɛma no nya nkwa bere a ɛsɛ sɛ wotu kɔ baabi foforo wɔ mfɛnsere kɛse a wɔsesa so no, na eyi ma nsonsonoe kɛse ba. Nokwarem no, wɔn a wɔde di dwuma no nsɛe bere nsakra wɔn browser windows kɛse te sɛ nea yɛn a yɛyɛ developers no yɛ no. Nanso saa animated resizing osuahu yi betumi ayɛ fɛ jarring na ɛde ka bere a wosusuw sɛ egye ansa na krataafa no ayɛ nsakrae ma ɛne ne kɛse foforo no. Ease Of Use Na Mmara a Ɛyɛ Mmerewa Sɛnea ɛyɛ mmerɛw sɛ wode wɛb afã bi bedi dwuma ne sɛnea mmara no te sɛ nea ɛyɛ mmerɛw no yɛ nneɛma a ɛho hia a ebetumi ama nsakrae kɛse aba wo kuw no mu. Wɔntumi nyɛ nea ɛho hia da te sɛ osuahu a etwa to a ɔde di dwuma no, nokwarem no, nanso developer osuahu nya nsiesie so nkɛntɛnso. Sɛ wode wɛb afã bi a wɔde ahyɛ mu di dwuma a, ɛde mfaso horow a ɛho hia ba wɔ saa anim no:
Ɛda adi sɛ developers a wonim HTML, CSS, ne JS dedaw no betumi de saa ade no adi dwuma ntɛm efisɛ wɔayɛ no sɛnea ɛbɛyɛ a ɛbɛka abom yiye na ɛne wɛb platform no nkae no ahyia. Asiane biara nni hɔ a ɛbɛma wɔabubu nsakrae a wɔde aba sɛnea wɔde ade no di dwuma no mu. Ɛkame ayɛ sɛ asiane biara nni hɔ sɛ saa ade no bɛyɛ nea wɔagyae anaasɛ wɔrenhwɛ so.
Wɔ Masonry a wɔasisi mu no fam no, ɛfiri sɛ ɛyɛ layout primitive nti, wode di dwuma firi CSS, te sɛ Grid anaa Flexbox, JS biara nni mu. Afei nso, CSS agyapadeɛ foforɔ a ɛfa nhyehyɛɛ ho, te sɛ gap, yɛ adwuma sɛdeɛ wobɛhwɛ kwan sɛ ɛbɛyɛ. Afiri anaa dwumadie biara nni hɔ a wobɛtumi ahunu ho asɛm, na wɔakyerɛw nneɛma a wosua no wɔ MDN so. Masonry JS lib deɛ, mfitiaseɛ yɛ den kakra: ɛhia data su a ɛwɔ syntax pɔtee bi, ne HTML nneɛma a ahintaw ka ho de hyehyɛ kɔla ne gap akɛseɛ. Nea ɛka ho no, sɛ wopɛ sɛ wo span columns a, ɛsɛ sɛ w’ankasa wode gap size no ka ho na woakwati ɔhaw ahorow:
<ɔkwan a wɔfa so yɛ> .track-size, . .ade { . ne tɛtrɛtɛ: 20%; } . .gutter-a ne kɛse yɛ { . ne tɛtrɛtɛ: 1rem; } . .ade { . ne sorokɔ: 100px; margin-block-awiei: 1rem; } . .ade:nth-abofra (odd) { . ne sorokɔ: 200px; } . .ade--trɛw2 { . trɛw: calc (40% + 1rem); } . na ɛkyerɛ
Momma yɛmfa eyi ntoto sɛnea Masonry dwumadie a wɔasisi mu no bɛyɛ ho: <ɔkwan a wɔfa so yɛ> .akorae { . ɔyɛkyerɛ: grid-lanes; grid-lanes: san yɛ (4, 20%); nsonsonoe: 1rem; } . .ade { . ne sorokɔ: 100px; } . .ade:nth-abofra (odd) { . ne sorokɔ: 200px; } . .ade--trɛw2 { . grid-kɔlam: span 2; } . na ɛkyerɛ
Simpler, more compact code a ɛtumi de nneɛma te sɛ gap ne baabi a wɔde span 2 yɛ spanning tracks kɛkɛ, te sɛ grid mu ara pɛ, na ɛnhia sɛ wobɛbu ntrɛmu a ɛfata a gap kɛseɛ ka ho. Sɛnea Wobɛhu Nea Ɛwɔ Hɔ Ne Bere a Ɛwɔ Hɔ? Sɛ yɛka ne nyinaa bom a, asɛmmisa no nyɛ ankasa sɛ ebia ɛsɛ sɛ wode Masonry a wɔasisi mu di dwuma wɔ JS nhomakorabea so, na mmom bere bɛn. Masonry JS nwomakorabea no yɛ nwonwa na ayɛ kwan a ɛda wɛb platform no so mfeɛ pii, ne ama developers ne users bebree a wɔn ani agye. Ɛwɔ sintɔ kakraa bi sɛ wode toto Masonry dwumadie a wɔasisi mu ho a, nokwarem no, nanso ɛnonom ho nhia sɛ saa dwumadie no nsiesiee ne ho a. Ɛnyɛ den ma me sɛ mɛkyerɛw saa wɛb platform features foforo a ɛyɛ nwini yi efisɛ meyɛ adwuma wɔ browser vendor bi mu, na ɛno nti metaa hu nea ɛreba. Nanso wɔn a wɔyɛ nneɛma no taa ka, nhwehwɛmu biara akyi, sɛ nneɛma foforo a wɔbɛhwɛ so no yɛ den. Ɛyɛ den sɛ wobɛkɔ so ahu, na ɛnyɛ bere nyinaa na nnwumakuw de adesua di kan ɔkwan biara so. Sɛnea ɛbɛyɛ a ɛbɛboa eyi no, nneɛma kakraa bi a ɛma wonya nsɛm foforo wɔ akwan a ɛnyɛ den na ɛyɛ ketewa so sɛnea ɛbɛyɛ a wubetumi anya nsɛm a wuhia no ntɛm ni:
Wɛbsaet platform no wɔ explorer site: Ebia w’ani begye ne release notes kratafa no ho. Na, sɛ w’ani gye RSS ho a, hwɛ release notes feed no, ne Baseline Newly Available ne Widely Available feeds no nso.
Wɛbsaet noPlatform Gyinabea dashboard: Ebia w’ani begye ne Baseline afe nkratafa ahorow no ho.
Chrome Platform Status’ kwankyerɛ krataafa.
Sɛ wowɔ bere kakra a, ebia w’ani begye browser vendors’ release notes nso ho:
Chrome a wɔde yɛ adwuma Edge Firefox a wɔde yɛ adwuma Safari a wɔde yɛ adwuma
Sɛ wopɛ nneɛma pii mpo a, hwɛ me Navigating the Web Platform Cheatsheet. M’ade no Da so ara Nnya Nni Dwuma Ɛno ne ɔhaw no fã foforo. Sɛ mpo wunya bere, ahoɔden, ne akwan a wobɛfa so ahwɛ so a, abasamtu da so ara wɔ hɔ sɛ wobɛte wo nne na wode nneɛma a w’ani gye ho adi dwuma. Ebia woatwɛn mfe pii sɛ wobesiesie bɔne pɔtee bi, anaasɛ ade pɔtee bi a wode bɛmena wɔ browser bi mu a ɛda so ara nni hɔ. Nea m’abɛka ne sɛ browser vendors tie ampa. I’m part of several cross-organization teams a yɛka developer signals ne feedback ho asɛm bere nyinaa. Yɛhwɛ nsɛm ahodoɔ pii a ɛfiri mu, emu nyinaa wɔ browser vendor biara ne abɔnten/ɔmanfoɔ wɔ forums, open source projects, blogs, ne surveys. Na, yɛrebɔ mmɔden bere nyinaa sɛ yɛbɛbɔ akwan pa ama developers a wɔbɛkyɛ wɔn ahiade pɔtee ne wɔn dwumadie nsɛm. Enti, sɛ wubetumi a, yɛsrɛ wo hwehwɛ pii fi browser adetɔnfo hɔ na hyɛ yɛn sɛ yɛmfa nneɛma a wuhia no nni dwuma. Me nya sɛ egye bere, na ebetumi nso ayɛ hu (a yɛrenka akwanside a ɛkorɔn a ɛmma obi nkɔ mu ho asɛm), nanso ɛyɛ adwuma nso. Akwan kakraa bi a wobɛfa so ama wɔate wo (anaa wo adwumakuw) nne ni: Fa afe afe State of JS, State of CSS, ne State of HTML nhwehwɛmu. Wɔdi dwuma kɛseɛ wɔ sɛdeɛ browser vendors de wɔn adwuma di kan no mu. Sɛ wo hia API pɔtee a egyina gyinapɛn so a wɔde bedi dwuma daa wɔ brawsa ahorow nyinaa mu a, susuw ho sɛ wode nsusuwii bi bɛmena wɔ Interop adwuma no iteration a edi hɔ no mu. Ɛhwehwɛ bere pii, nanso susuw sɛnea Shopify ne RUMvision kyekyɛɛ wɔn apɛde ahorow maa Interop 2026. Nsɛm a ɛkɔ akyiri te sɛ eyi betumi ayɛ mfaso kɛse ama browser adetɔnfo sɛ wɔde bedi kan. Sɛ wopɛ link ahorow a mfaso wɔ so pii a ɛbɛma woanya browser adetɔnfo so nkɛntɛnso a, hwɛ me Navigating the Web Platform Cheatsheet. Awiei Sɛ yɛbɛwie a, mewɔ anidaso sɛ asɛm yi ama woanya nneɛma kakraa bi a ɛsɛ sɛ wususuw ho:
Anigye ma Masonry ne wɛbsaet nneɛma afoforo a ɛreba. Wɛb nneɛma kakraa bi a ebia wobɛpɛ sɛ wufi ase de di dwuma. Amanneɛbɔ anaa 3rd-party code kakraa bi a ebia wubetumi ayi afi hɔ de agye nneɛma a wɔde ahyɛ mu no atom. Akwan kakraa bi a wobɛfa so ahwɛ nea ɛreba no so na woanya browser adetɔnfo so nkɛntɛnso.
Nea ɛho hia kɛse no, mewɔ anidaso sɛ m’ama moagye mfaso a ɛwɔ so sɛ wode wɛb platform no bedi dwuma akosi ase.
