Qiyaastii 15 sano ka hor, waxaan ka shaqeynayey shirkad aan ku dhisnay apps loogu talagalay wakiilada safarka, shaqaalaha garoonka diyaaradaha, iyo shirkadaha diyaaradaha. Waxaan sidoo kale u dhisnay qaab-dhismeedka gurigayaga ee qaybaha UI iyo awoodaha abka hal bog ah. Waxaan u haysanay wax kasta oo ka kooban: garoonnada, badhamada, tabsyada, kala duwanaanshaha, xog-ururinta, menus, datepickers, selects, iyo multiselects. Waxaan xitaa lahaa qayb div ah. Qaybtayada div waxay ahayd mid aad u fiican jidka, waxay noo ogolaatay inaan samayno geeso wareegsan dhammaan daalacashada, kuwaas oo, rumaysta ama ha rumaysan, ma ahayn wax sahlan in la sameeyo wakhtigaas.

Shaqadeenu waxay dhacday wakhti ka mid ah taariikhdayada markii JS, Ajax, iyo HTML firfircoon loo arkay inay yihiin kacaan nagu keenay mustaqbalka. Si lama filaan ah, waxaan u cusbooneysiin karnaa bogga si firfircoon, hel xogta server-ka, oo aan ka fogaano inaan u gudubno boggaga kale, kaas oo loo arkay mid gaabis ah oo iftiimiyay leydi cad oo weyn oo shaashadda u dhaxaysa labada bog. Waxaa jirtay odhaah, uu caan ku ahaa Jeff Atwood (aasaasaha StackOverflow), kaas oo akhriyay: "Arji kasta oo lagu qori karo JavaScript wuxuu ugu dambeyntii lagu qori doonaa JavaScript." Jeff Atwood

Annaga wakhtigaas, tani waxa ay u dareemaysay dhiirranaan in ay dhab ahaantii tagto oo abuurto abkaas. Waxa ay dareemaysay ogolaansho buste ah in wax walba lagu sameeyo JS. Markaa waxaan wax walba ku samaynay JS, mana aanan qaadanin wakhti aan ku baadho habab kale oo wax loo qabto. Runtii maanu dareemin dhiirigelinta si sax ah loo barto waxa HTML iyo CSS samayn karaan. Runtii uma aynaan dareemin shabakada sida madal abka kobcaysa gabi ahaanba. Waxaan inta badan u aragnay inay tahay wax aan u baahanahay inaan ka shaqeyno, gaar ahaan marka ay timaado taageerada browserka. Waxaan kaliya ku tuuri karnaa JS badan si aan wax u qabanno. Waqti ma u qaadan lahayd inaan wax badan ka barto sida shabkadu u shaqeyso iyo waxa laga heli karo goobta ayaa i caawin lahayd? Hubaal, waxa laga yaabaa in aan xiiray tiro kood ah oo aan run ahaantii loo baahnayn. Laakiin, wakhtigaas, malaha intaas maaha. Waxaad arkaysaa, kala duwanaanshiyaha browser-ku waagaas aad bay muhiim u ahaayeen. Tani waxay ahayd markii Internet Explorer uu weli ahaa browserka ugu awoodda badan, iyadoo Firefox uu ahaa kan labaad ee ugu dhow, laakiin bilaabay inuu lumiyo saamigii suuqa sababtoo ah Chrome oo si degdeg ah u helay caan. In kasta oo Chrome iyo Firefox ay aad ugu wanagsanaayeen ku heshiinta heerarka shabakada, bay'ada ay ku shaqaynayaan abkayagu waxa ay la macno tahay in aan taageerno IE6 muddo dheer. Xitaa markii naloo oggolaaday inaan taageerno IE8, weli waxay ahayd inaan wax ka qabanno faraqyo badan oo u dhexeeya daalacashada. Taas oo keliya ma aha, laakiin shabakadda wakhtigaa ma lahayn awood intaas le’eg oo toos loogu dhisay madal.

Si degdeg ah maanta. Arrimuhu aad bay isu beddeleen. Ma aha oo kaliya in aan haysano in ka badan awoodahaas sidii hore, laakiin heerka ay ku helayaan ayaa sidoo kale kordhay. Aan mar kale su'aasha weydiiyo, ka dib: Waqti ma u qaadan lahayd inaad wax badan ka ogaato sida uu u shaqeeyo webka iyo waxa laga heli karo goobta ayaa maanta ku caawin lahaa? Dhab ahaantii haa. Barashada fahamka iyo isticmaalka madal shabakadda maanta waxay kaa dhigaysaa faa'iido weyn kuwa kale ee horumariya. Haddi aad ka shaqeyso wax qabad, gelitaan, jawaab celin, dhamaantood si wada jir ah, ama kaliya soo raridda sifooyinka UI, haddii aad rabto inaad u sameyso sidii injineer mas'uul ah, ogaanshaha aaladaha kuu diyaar ah waxay kaa caawineysaa inaad si dhakhso leh oo wanaagsan u gaarto yoolalkaaga. Waxyaalaha qaarkood laga yaabo inaadan u baahnayn maktabad mar dambe Ogaanshaha waxa daalacashada ay taageeraan maanta, su'aashu, haddaba, waa: Maxaan tuuri karnaa? Ma waxaan u baahanahay qayb div ah si aan u samayno geeso wareegsan 2025? Dabcan, ma samayno. Hantida xadka-radius waxaa taageeray dhammaan daalacayaasha hadda la isticmaalo in ka badan 15 sano waqtigan. Iyo qaabka koonaha ayaa sidoo kale soo socda si dhakhso ah, xitaa geesaha xiisaha leh. Aynu eegno sifooyin dhow dhow oo hadda laga heli karo dhammaan daalacashada waaweyn, oo aad isticmaali karto si aad u bedesho ku-tiirsanaanta jira ee codebase-kaaga. Ujeedadu maaha inaad isla markiiba tuurto dhammaan maktabadaha aad jeceshahay oo aad dib u qorto codebase. Dhanka wax kasta oo kale, waxaad u baahan doontaa inaad marka hore xisaabta ku dartid taageerada browserka oo aad go'aan ka gaarto arrimo kale oo u gaar ah mashruucaaga. Tilmaamaha soo socda ayaa lagu hirgeliyay saddexda matoorada ee ugu waaweyn (Chromium, WebKit, iyo Gecko), laakiin waxaa laga yaabaa inaad haysato shuruudo taageero browser oo kala duwan oo kaa ilaalinaya inaad isla markiiba isticmaasho. Hadda waa wakhti ku habboon in wax laga barto sifooyinkan, in kastoo, lagana yaabo in la qorsheeyo isticmaalka mar uun. Popovers And Dialogs Popover API,

HTML element, iyo :: Backdrop pseudo-element ayaa kaa caawin kara inaad ka takhalusto ku tiirsanaanta soo booda,qalab tip, iyo maktabadaha wada hadalka, sida Floating UI, Tippy.js, Tether, ama React Tooltip. Waxay u qabtaan marin u helida iyo maaraynta diiradda adiga, meel ka baxsan sanduuqa, aad ayaa loo habeyn karaa iyadoo la isticmaalayo CSS, oo si fudud ayaa loo dhaqaajin karaa. Accordions Qaybta , sifada magaceeda ee walxaha labada dhinacba iska leh, iyo :: faahfaahinta-maah-maahiyaha-element-ka ayaa meesha ka saaraya baahida loo qabo qaybaha accordion sida Bootstrap Accordion ama qaybta Accordion-ka. Isticmaalka madal halkan macnaheedu waa inay u fududahay dadka yaqaan HTML/CSS inay fahmaan koodkaaga iyaga oo aan marka hore baran isticmaalka maktabad gaar ah. Waxay sidoo kale ka dhigan tahay inaad ka badbaadsan tahay jebinta isbeddellada maktabadda ama joojinta maktabadda. Iyo, dabcan, waxay la macno tahay kood yar in la soo dejiyo oo la ordo. Qodobbada tafaasiisha wadaagga ah uma baahna JS inay furto, xidhaan, ama nooleeyaan. CSS Syntax Lakabyada Cascade, ee loogu talagalay codebase CSS oo habaysan, buulka CSS, CSS is haysta, midabyo cusub, midabyo qaraabo ah, iyo midab-isku-dhafan, hawlaha Xisaabta cusub sida abs(), calaamad (), pow () iyo kuwa kale waxay caawiyaan yaraynta ku tiirsanaanta CSS-hor-u-sameeyayaasha, maktabadaha tamarta sida Bootstrap iyo Tailwind, ama xataa runtime CSS-in-braries. Beddelka ciyaarta: wuxuu leeyahay (), mid ka mid ah astaamaha ugu badan ee la codsado muddo dheer, wuxuu meesha ka saarayaa baahida loo qabo xalal badan oo ku saleysan JS. Adeegyada JS Hababka Array Casriga ah sida findLast (), ama at(), iyo sidoo kale Deji hababka kala duwanaanshaha (), isgoysyada (), ururka () iyo kuwa kale waxay yareyn karaan ku tiirsanaanta maktabadaha sida Lodash. Weydiimaha weelasha Weydiimaha weelasha waxay ka dhigaan qaybaha UI inay ka jawaabaan waxyaabo aan ka ahayn cabbirka daawashada, sidaas darteedna ka dhig kuwo dib loo isticmaali karo marka loo eego xaaladaha kala duwan. Looma baahna in loo isticmaalo maktabada UI ee culus ee JS, loomana baahnid inaad isticmaasho polyfill midkoodna. Qaabka Grid, subgrid, flexbox, ama dhowr tiir ayaa jiray wakhti dheer hadda, laakiin marka la eego natiijooyinka Sahanka Gobolka CSS, way caddahay in horumariyayaashu ay aad uga taxadaraan qaadashada waxyaabo cusub, oo ay sugaan wakhti aad u dheer ka hor intaanay samayn. Astaamahani waxay ahaayeen Baseline muddo dheer waxaadna u isticmaali kartaa inay ka takhalusaan ku tiirsanaanta waxyaabaha ay ka midka yihiin nidaamka grid Bootstrap, Aasaaska Qaab dhismeedka flexbox utilities, Shabakadda go'an ee Bulma, Shabakadda Materialize, ama tiirarka Tailwind. Ma dhahayo waa inaad iska tuurtaa qaabkaaga. Kooxdaadu waxay u qaateen sabab, ka saaritaana waxay noqon kartaa mashruuc weyn. Laakiin fiirinta waxa madal shabakadu ay ku siin karto iyada oo aan la helin duubo dhinac saddexaad ah oo ku yaal dusha sare waxay la timaadaa faa'iidooyin badan. Waxyaabaha laga yaabo inaadan u baahnayn mustaqbalka dhow Haddaba, aan si degdeg ah u eegno qaar ka mid ah waxyaabaha aanad u baahnayn maktabad mustaqbalka dhow. Taas macnaheedu waxa weeye, waxyaalaha hoose aad uguma diyaarsana korsashada wadareedka, laakiin ka warqabka iyaga iyo qorsheynta isticmaalka dambe ayaa waxtar leh. Meelaynta barroosinka Meelaynta barroosinka ee CSS waxa ay qabataa meelaynta popovers iyo qalabyada marka loo eego canaasirta kale, waxayna ka taxadartaa in la eego, xitaa marka la guurayo, la rogrogayo, ama la bedelayo bogga. Tani waa dhamaystir weyn oo ku saabsan Popover API ee hore loo sheegay, taas oo ka dhigi doonta xitaa in ay sahlanaato in laga guuro xalalka waxqabadka-degdegga ah ee JS. Navigation API API navigation waxa loo isticmaali karaa in lagu maareeyo navigation abka hal bog ah oo waxa laga yaaba in ay noqoto dhamaystir weyn, ama xataa beddelka, React Router, Next.js routing, ama hawlo marineed xagal ah. View Transitions API View Transitions API waxay u dhaqmi kartaa inta u dhaxaysa gobolada kala duwan ee bogga. Codsiga hal bog ka kooban, tani waxay ka dhigaysaa kala-guurka fudud ee u dhexeeya dawladaha, waxayna kaa caawin kartaa inaad ka takhalusto maktabadaha animation sida Anime.js, GSAP, ama Motion.dev. Xitaa ka sii fiican, API-ga sidoo kale waxaa loo isticmaali karaa codsiyo bogag badan leh. Xusuusnow mar hore, markii aan idhi sababta aan u dhisnay apps-hal bog shirkaddii aan ka shaqeeyay 15 sano ka hor waxay ahayd inaan iska ilaalino iftiinka cad ee bogga dib-u-celinta marka la socdo? Haddii API-kaas la heli lahaa wakhtigaas, waxaan awood u yeelan lahayn inaan gaarno saamaynta isbeddelka bogga quruxda badan iyada oo aan la helin qaab hal bog ah iyo iyada oo aan la soo degin bilowga hore ee abka oo dhan. Animations-ka-wareejin Animations-ka-wareejintu waxay ku shaqeeyaan booska duudduuban ee isticmaalaha, halkii ay ka ahaan lahaayeen waqti ka dib, iyaga oo ka dhigaya xal weyn oo sheeko-sheeko iyo socdaalo alaabeed. Dadka qaarkii ayaa xoogaa ka sare maray, laakiin marka si wanaagsan loo isticmaalo, tani waxay noqon kartaa qalab naqshadeed aad waxtar u leh, waxayna kaa caawin kartaa in laga takhaluso maktabadaha sida: ScrollReveal, GSAP Scroll, amaWOW.js Xulasho la beddeli karo Xulashada la beddeli karo waa shay caadi ah oo kuu ogolaanaya inaad si buuxda u habayso muuqaalkiisa iyo waxa ku jira, iyadoo la hubinayo helitaanka iyo faa'iidooyinka waxqabadka. Tani waxay ahayd wakhti dheer oo soo socday, iyo sifo si weyn loo codsaday, waxaana yaab leh in la arko iyada oo dhowaan timid goobta shabakadda. Xulashada la beddeli karo ee ku dhex dhisan, waxaad ugu dambeyntii daadin kartaa dhammaan koodkan adag ee JS-ga ee qaybaha aad dooratay. CSS Masonry CSS Masonry waa muuqaal kale oo madal shabakadeed oo soo socda oo aan rabo inaan waqti badan ku bixiyo. CSS Masonry, waxaad ku gaadhi kartaa qaabayn aad u adag, ama xataa aan macquul ahayn, oo leh dabacsanaan, xariijimo, ama dhismeyaal kale oo CSS ah oo hore u ah. Soo-saarayaashu waxay badiyaa adeegsadaan adeegsiga maktabadaha qolo saddexaad si ay u gaadhaan qaab-dhismeedka Masonry, sida maktabadda Masonry JS. Laakiin, in badan oo ku saabsan in dambe. Aynu soo koobno ​​qodobkan ka hor inta aanad u gudbin Masonry. Waa maxay sababta aad u daryeesho Suuqa shaqada waxaa ka buuxa horumariyeyaal shabakadeed oo khibrad u leh JavaScript iyo qaab-dhismeedka ugu dambeeyay ee maalinta. Marka, runtii, waa maxay faa'iidada barashada inaad u isticmaasho madal mareegaha in ka badan, haddii aad wax la mid ah ku samayn karto maktabadaha, yutiilitida, iyo qaab-dhismeedka aad horeba u taqaanay maanta? Marka warshadaha oo dhan ay ku tiirsan yihiin qaab-dhismeedkan, oo aad kaliya soo jiidi karto maktabadda saxda ah, miyayna ahayn iibiyeyaasha browserka inay la shaqeeyaan maktabadahan si ay u rartaan oo ay dhaqso u socdaan, halkii ay isku dayi lahaayeen inay ku qanciyaan horumariyeyaasha inay adeegsadaan goobta beddelkeeda? Marka hore, waxaanu la shaqaynaa qorayaasha maktabadaha, waxaanan samaynaa qaab-dhismeedyo wanaajin annagoo baranana waxay isticmaalaan iyo hagaajinta meelahaas. Laakiin marka labaad, "kaliya isticmaalka madal" waxay keeni kartaa faa'iidooyin aad u fiican. U diraya kood ka yar Aaladaha Faa'iidada ugu weyni waa in aad soo dirto kood aad uga yar qalabka macaamiishaada. Marka loo eego Shabakadda Almanac ee 2024, celceliska tirada codsiyada HTTP waa ku dhawaad ​​70 goob kasta, kuwaas oo intooda badan ay sabab u tahay JavaScript oo leh 23 codsi. Sannadkii 2024, JS waxa ay la wareegtay sawirada sidii nooca faylka ugu weyn sidoo kale. Tirada dhexe ee codsiyada bogga faylasha JS waa 23, ilaa 8% ilaa 2022. Baaxadda boggana way sii korodhaa sannadba sanadka ka dambeeya. Miisaanka bogga dhexe wuxuu hadda ku dhow yahay 2MB, kaas oo 1.8MB ka badan sidii uu ahaa 10 sano ka hor.

Hubaal, xawaarahaaga isku xirka internetku waxa uu u badan yahay inuu kordhay, laakiin taasi maahan xaalad qof kasta. Oo qof kastaa ma laha awood isku mid ah sidoo kale. U soo jiidashada koodka qolo saddexaad ee waxyaabaha aad ku samayn karto goobta, taa beddelkeeda, waxay u badan tahay inay la macno tahay inaad soo dirto kood ka badan, oo sidaas darteed aad gaadho macaamiil ka yar inta aad sida caadiga ah gaadhi lahayd. Shabakadda, waxqabadka rarka xun wuxuu keenaa heerar laga tagay oo weyn oo dhaawacaya sumcadda sumadda. Koodh yar oo ku shaqeeya Aaladaha Intaa waxaa dheer, koodka aad ku soo dejiso qalabka macaamiishaada waxay u badan tahay inuu si dhakhso ah u socdo haddii uu isticmaalo wax yar oo JavaScript ah oo ku yaal dusha sare ee goobta. Waxa kale oo ay u badan tahay in ay aad uga jawaabto oo aad u heli karto hab ahaan. Dhammaan tani waxay keenaysaa macaamiil badan oo farxad leh. Hubi saaxiibkay Alex Russell ee waxqabadka sinnaan la'aanta blog-ga sannadlaha ah, kaas oo tusinaya in aaladaha qaaliga ah ay inta badan ka maqan yihiin suuqyada leh balaayiin isticmaaleyaal ah sababtoo ah sinnaan la'aanta hantida. Farqigani wuxuu sii kordhayaa oo keliya waqti ka dib.

Layout Masonry-ku-dhismay Mid ka mid ah muuqaal madal shabakadeed oo dhowaan iman doona oo aan aad ugu faraxsanahay waa CSS Masonry.

Aan ku bilaabo sharxidda waxa uu yahay Masonry. Waa maxay Masonry Masonry waa nooc ka mid ah qaabaynta ay Pinterest ka dhigtay caan sannado ka hor. Waxay abuurtaa raad-raacyo madax-bannaan oo nuxur ah kuwaas oo alaabtu isku ururiyaan sida ugu dhow bilawga jidka intii ay awoodaan.

Dad badan ayaa u arka Masonry inuu yahay ikhtiyaar weyn oo loogu talagalay faylalka iyo sawirada sawirada, taas oo ay hubaal tahay inay samayn karto. Laakin Masonry wuu ka dabacsan yahay waxa aad ku aragto Pinterest, kumana koobna kaliya qaababka biyo-dhaca-sida. Qaab-dhismeedka Masonry:

Raadku wuxuu noqon karaa tiirar ama saf:

Raad-raacyada nuxurku maaha inay noqdaan isku cabbir:

Alaabtu waxay koobi karaan waddooyin badan:

Alaabta waxaa lagu dhejin karaa waddooyin gaar ah; Ma aha inay had iyo jeer raacaan algorithm meelaynta tooska ah:

Demos Waa kuwan dhowr bandhig oo fudud oo aan sameeyay anigoo isticmaalaya hirgelinta soo socota ee CSS Masonry ee Chromium. Bandhig sawireed, oo muujinaya sida walxaha (ciwaanka kiiskan) uu u qaadi karo waddooyin badan:

Sawir kale oo muujinaya raadad cabbirro kala duwan leh:

Nashqada goobta wararka oo leh qaar ka mid ah raadadka ka ballaaran kuwa kale, iyo walxaha qaarkood oo gaaraya ballaca qaabka:

Loox kanban oo muujinaya in walxaha la saari karo waddooyin gaar ah:

Fiiro gaar ah: TheBandhigyadii hore waxaa lagu sameeyay nooc Chromium ah oo aan weli la helin inta badan isticmaaleyaasha shabakadda, sababtoo ah CSS Masonry ayaa hadda bilaabay in laga hirgeliyo daalacashada. Si kastaba ha ahaatee, horumariyayaasha webka ayaa si farxad leh u isticmaalayay maktabadaha si ay u abuuraan qaab-dhismeedka Masonry sanado horeba. Goobaha Isticmaalka Masonry Maanta Runtii, Masonry aad ayuu ugu badan yahay mareegaha maanta. Waa kuwan dhowr tusaale oo aan helay ka sokow Pinterest:

Iyo in yar oo kale, oo aan caddayn, tusaaleyaal:

Haddaba, sidee loo abuuray naqshadahan? Goobo shaqo Hal khiyaano oo aan arkay oo la isticmaalay ayaa isticmaalaya qaabka Flexbox, beddelka jihada tiirka, iyo dejinta si loo duubo. Sidan, waxaad ku meelayn kartaa walxaha dhererka kala duwan ee tiirar badan, madax-bannaan, taasoo siinaysa aragtida qaab-dhismeedka Masonry:

Si kastaba ha ahaatee, waxaa jira laba xaddidaad oo ku saabsan habkan:

Nidaamka alaabtu wuu ka duwan yahay waxa uu noqon lahaa qaabka Masonry ee dhabta ah. Flexbox, alaabtu waxay marka hore buuxiyaan tiirka kowaad, marka ay buuxsanto, ka dibna tag tiirka xiga. Masonry-ka, alaabtu waxay ku urursanaysaa raad-raac kasta (ama tiirka kiiskan) ee leh meel bannaan oo dheeraad ah. Laakiin sidoo kale, iyo laga yaabee in ka sii muhiimsan, ka-hortagga shaqada waxay u baahan tahay inaad dherer go'an u dejiso weelka Flexbox; haddii kale, wax duub ah ma dhacayso.

Qaybta saddexaad ee Maktabadaha Masonry Kiisas aad u horumarsan, horumariyayaashu waxay isticmaalayeen maktabado. Maktabadda ugu caansan uguna caansan tan waxaa si fudud loogu yeeraa Masonry, waxaana la soo dejiyaa qiyaastii 200,000 jeer toddobaadkii iyadoo loo eegayo NPM. Squarespace sidoo kale waxay bixisaa qayb qaabayn ah oo ka dhigaysa qaabaynta Masonry, beddelka koodka, oo goobo badan ayaa isticmaala. Labadan ikhtiyaar waxay isticmaalaan koodka JavaScript si ay alaabta ugu dhejiyaan qaabka. Masonry-ku-dhisan Runtii aad ayaan ugu faraxsanahay in Masonry uu hadda bilaabayo inuu ka soo muuqdo daalacashada sida muuqaal CSS ku dhex dhisan. Waqti ka dib, waxaad awoodi doontaa inaad isticmaasho Masonry si la mid ah sida aad u isticmaasho Grid ama Flexbox, taas oo ah, adigoon u baahnayn wax shaqo ah ama koodka cid saddexaad. Kooxdayda Microsoft waxay fulinaysay taageerada Masonry-ku-dhisan ee mashruuca isha furan ee Chromium, kaas oo Edge, Chrome, iyo daalacashada kale oo badan ay ku saleysan yihiin. Mozilla runtii waxay ahayd iibiyaha browserka ee ugu horreeya ee soo jeediya hirgelinta tijaabada ah ee Masonry back in 2020. Apple ayaa sidoo kale aad u xiisaynaysay samaynta qaabkan cusub ee shabakada mid hore u dhaca. Shaqada lagu jaangooyo sifada ayaa sidoo kale horay u socota, iyada oo heshiis ka dhex jira kooxda shaqada ee CSS ee ku saabsan jihada guud iyo xitaa bandhigga nooca cusub: grid-lanes. Haddii aad rabto in aad wax badan ka barato Masonry oo aad la socoto horumarka, ka eeg bogga ilaha Masonry ee CSS. Waqti ka dib, marka Masonry uu noqdo astaanta aasaasiga ah, sida Grid ama Flexbox, waxaan awood u yeelan doonaa inaan si fudud u isticmaalno oo aan ka faa'iidaysano:

Waxqabad ka wanaagsan, Ka jawaab celin wanaagsan, Isticmaalka fudud iyo kood ka fudud.

Aan si hoose u eegno kuwan. Waxqabad Wanaagsan Samaynta nidaamka qaabaynta u eg Masonry, ama adeegsiga maktabad qolo saddexaad beddelkeeda, waxay la macno tahay inaad ku shubto koodka JavaScript si aad shayada ugu dhejiso. Tani waxay sidoo kale ka dhigan tahay in koodhkani uu noqon doono mid xannibaya. Runtii, midkoodna ma muuqan doono, ama arrimuhu kuma jiri doonaan meelaha saxda ah ama cabbirrada saxda ah, ilaa koodhka JavaScript uu socdo. Qaabaynta Masonry waxaa badanaa loo isticmaalaa qaybta ugu muhiimsan ee bogga shabakadda, taas oo macnaheedu yahay koodka ayaa ka dhigaya qoraalkaaga ugu muhiimsan inuu soo muuqdo ka dib markii uu si kale u lahaan karo, hoos u dhigaya LCP kaaga, ama cabbirka rinjiga ugu weyn ee nuxurka leh, kaas oo door weyn ka ciyaara waxqabadka la dareemayo iyo hagaajinta mashiinka raadinta. Waxaan ku tijaabiyay maktabadda Masonry JS qaab fudud oo aan ku ekaysiiyay xidhiidhka 4G aayar ee DevTools. Maktabadu aad uma weyna (24KB, 7.8KB gzipped), laakiin waxay ku qaadatay 600ms in lagu shubo xaaladahayga tijaabada. Halkan waxaa ah duubis waxqabad oo muujinaya in 600ms oo dheer ay ku raran tahay maktabadda Masonry, iyo in aanay jirin waxqabad kale oo soo bandhigay intii ay taasi dhacaysay:

Intaa waxaa dheer, ka dib wakhtiga xajinta bilowga ah, qoraalka la soo dejiyey ayaa markaa u baahday in la kala saaro, la ururiyo, ka dibna la ordo. Dhammaan kuwaas, sidii hore loo sheegay, waxay xannibeen samaynta bogga. Iyada oo la adeegsanayo hirgelinta Masonry ee browserka, ma haysan doonno qoraal aan ku shubno oo aan ku wadno. Matoorka browserka ayaa kaliya qaban doona shaygiisa inta lagu jiro tallaabada samaynta bogga hore. Ka jawaab celin Wanaagsan Si la mid ah marka bogga ugu horreeya ee la soo shubo, dib u habeynta daaqada browserka waxay horseedaa in qaabeynta boggaas mar kale la sameeyo. Halkaa marka ay marayso, in kastoo, haddii bogga uu isticmaalayo Maktabadda Masonry JS, looma baahna in mar kale la soo geliyo qoraalka, sababtoo ah waa horeba.halkan. Si kastaba ha ahaatee, koodka dhaqaajiya walxaha meelaha saxda ah wuxuu u baahan yahay inuu socdo. Hadda maktabaddan gaarka ah waxay u muuqataa mid aad u dhaqso badan marka la samaynayo tan marka boggu buuxsamo. Si kastaba ha ahaatee, waxay ku noolayn shayada marka ay u baahan yihiin inay u guuraan meel ka duwan cabbirka daaqada, tanina waxay samaynaysaa farqi weyn. Dabcan, isticmaalayaashu waqti kuma lumiyaan dib u habeynta daaqadaha browserka si la mid ah kuwa horumariyayaashu sameeyaan. Laakin waayo aragnimadan dib u habeyntu waxay noqon kartaa mid soo jiidasho leh waxayna ku dari kartaa wakhtiga la dareemayo ee ay qaadanayso bogga si uu ula qabsado cabbirkiisa cusub. Fudud Isticmaalka Iyo Koodhka Ka Fudud Sida ay u fududahay in la isticmaalo muuqaalka shabakadda iyo sida fudud ee koodka u muuqda ayaa ah arrimo muhiim ah oo isbeddel weyn u samayn kara kooxdaada. Weligood muhiim uma noqon karaan sida khibradda isticmaale ee ugu dambeeya, dabcan, laakiin khibradda horumariyayaashu waxay saamaynaysaa joogteynta. Isticmaalka qaab-dhismeed shabakadeed waxay la timaaddaa faa'iidooyin muhiim ah xagga hore:

Horumarinta hore u yaqaan HTML, CSS, iyo JS waxay u badan tahay inay si fudud u isticmaali karaan sifadaas sababtoo ah waxaa loogu talagalay inay si fiican u dhexgalaan oo ay ula socdaan inta kale ee madal shabakadda. Ma jirto khatar jebinta isbeddelada lagu soo bandhigay sida astaanta loo isticmaalo. Waxaa jirta ku dhawaad ​​eber khatarta ah in sifadaas ay noqoto mid go'aysa ama aan la ilaalinayn.

Marka laga hadlayo Masonry-ku-dhismay, sababtoo ah waa qaabayn hore, waxaad ka isticmaashaa CSS, sida Grid ama Flexbox, JS kuma lug lahayn. Sidoo kale, guryaha CSS ee kale ee la xidhiidha qaabaynta, sida farqiga, waxay u shaqeeyaan sidaad filayso. Ma jiraan wax tabo ama xeelado aad ku ogaato, waxyaabaha aad baratona waxa lagu diiwaan geliyay MDN. Masonry JS lib, bilawga waa xoogaa kakan: waxay u baahan tahay sifada xogta oo leh macne gaar ah, oo ay weheliso walxaha HTML ee qarsoon si loo dejiyo tiirka iyo cabbirada farqiga. Intaa waxaa dheer, haddii aad rabto in aad taabato tiirarka, waxaad u baahan tahay inaad ku darto cabbirka farqiga naftaada si aad uga fogaato dhibaatooyinka:

...

Aan is barbar dhigno tan sida uu u ekaan doono hirgelinta Masonry-ga la dhisay:

...

Ka fudud, koodhka is haysta oo kaliya oo isticmaali kara waxyaabo ay ka mid yihiin farqiga iyo halka raad-raacyada lagu sameeyo taako 2, sida shabkada, oo aan kaaga baahnayn inaad xisaabiso ballaca saxda ah oo ay ku jirto cabbirka farqiga. Sidee lagu ogaan karaa waxa la heli karo iyo marka la heli karo? Guud ahaan, su'aashu maaha runtii haddii ay tahay inaad isticmaasho Masonry-ku-dhismay maktabadda JS, laakiin waa goorma. Maktabada Masonry JS waa mid cajiib ah waxayna buuxinaysay farqiga u dhexeeya madal webka sanado badan, iyo horumariyayaal iyo isticmaaleyaal badan oo faraxsan. Waxay leedahay dib-u-dhacyo dhowr ah haddii aad la barbar dhigto hirgelinta Masonry-ku-dhisan, dabcan, laakiin kuwani maahan mid muhiim ah haddii hirgelintaas aysan diyaar ahayn. Way ii fududdahay inaan liis gareeyo sifooyinkan cusub ee mareegaha cusub sababtoo ah waxaan ka shaqeeyaa iibiyaha browserka, sidaas darteed waxaan u jeedaa inaan ogaado waxa soo socda. Laakiin horumariyayaashu inta badan waxay wadaagaan, sahan ka dib sahanka, in la socodka waxyaabaha cusub ay adag tahay. Inaad xogogaal u ahaato waa adag tahay, shirkaduhuna had iyo jeer ma siiyaan mudnaanta waxbarashada si kastaba. Si taas looga caawiyo, halkan waxaa ah dhowr ilo oo ku siinaya cusboonaysiinta siyaabo fudud oo kooban si aad si dhakhso ah u hesho macluumaadka aad u baahan tahay:

Mareegta Shabakadda waxa ay leedahay goobta sahamisa: Waxaa laga yaabaa inaad xiisaynayso boggeeda qoraallada siideynta. Iyo, haddii aad jeceshahay RSS, hubi quudinta qoraallada siideynta, iyo sidoo kale Saldhigga Cusub ee La Heli karo iyo Quudinta Si Weyn Loo Heli Karo.

ShabakaddaDashboardka Xaaladda Platform: Waxaa laga yaabaa inaad jeceshahay bogaggeeda sanadka aasaasiga ah ee kala duwan.

Bogga khariidadda waddada ee Status Platform Chrome.

Haddii aad haysato wakhti dheeraad ah, waxa kale oo aad xiisayn kartaa qoraalada sii daynta iibiyaasha browserka:

Chrome Cidhif Firefox Safari

Si aad u hesho ilo intaa ka sii badan, eeg xaashida khiyaamaynta ee Platform Webka. Shaygaydu Wali Ma Dhaqan-gelin Taasi waa dhinaca kale ee dhibaatada. Xitaa haddii aad hesho wakhti, tamar, iyo siyaalo aad ula socoto, wali waxa jira niyad jab ku saabsan in codkaaga la maqlo oo la hirgeliyo sifooyinka aad jeceshahay. Waxaa laga yaabaa inaad sugaysay sanado badan in cillad gaar ah la xalliyo, ama sifo gaar ah oo lagu soo raro browserka halkaas oo uu weli ka maqan yahay. Waxa aan odhan doono waa iibiyeyaasha browser-ka ayaa dhegaysta. Waxaan qayb ka ahay dhowr kooxood oo isku-dhaf ah oo aan ka wada hadalno calaamadaha horumariyaha iyo jawaab celinta mar kasta. Waxaan eegnaa ilo badan oo kala duwan oo jawaab celin ah, labadaba gudaha iibiye kasta oo browser ah iyo mid ka baxsan/dadweynaha ee golayaasha, mashaariicda il furan, baloogyada, iyo sahannada. Iyo, waxaan had iyo jeer isku dayeynaa inaan u abuurno habab ka wanaagsan horumarinta si ay u wadaagaan baahiyahooda gaarka ah iyo isticmaalka kiisaska. Markaa, haddii aad awooddo, fadlan wax badan ka dalbo iibiyeyaasha browserka oo nagu cadaadi inaan hirgelinno sifooyinka aad u baahan tahay. Waxaan ogaaday in ay qaadato waqti, iyo sidoo kale waxay noqon kartaa cabsigelin (aan ku xusin caqabad sare oo gelitaanka), laakiin sidoo kale way shaqeysaa. Halkan waxaa ah dhowr siyaabood oo aad ku heli karto codkaaga (ama shirkaddaada): Qaado Gobolka JS ee sanadlaha ah, Gobolka CSS, iyo Gobolka ee HTML. Waxay door weyn ka ciyaaraan sida iibiyaasha browserka ay u kala hormariyaan shaqadooda. Haddii aad u baahan tahay API halbeeg ku salaysan oo si joogto ah looga hirgeliyo daalacashada, tixgeli soo jeedinta soo jeedinta mashruuca Interop ee soo socota. Waxay u baahan tahay wakhti dheeraad ah, laakiin ka fiirso sida Shopify iyo RUMvision u wadaageen liisaska rabitaankooda Interop 2026. Macluumaad faahfaahsan oo tan oo kale ah aad bay waxtar ugu yeelan kartaa iibiyaasha browserka inay mudnaanta siiyaan. Si aad u hesho xidhiidho badan oo faa'iido leh si aad u saamayso iibiyeyaasha browserka, hubi Socoshada Shabkada Cheatsheet ee Platform. Gabagabo Guntii iyo gabagabadii, waxaan rajaynayaa in maqaalkani kugu reebay dhawr arrimood oo aad ka fikirto:

Farxadda Masonry iyo sifooyinka kale ee shabakada soo socda. Sifooyin shabakadeed dhowr ah oo laga yaabo inaad rabto inaad bilowdo isticmaalka. Dhawr qaybood oo caado ah ama koodka xisbiga 3aad ayaa laga yaabaa inaad awoodo inaad ka saarto adoo doorbidaya sifooyinka la dhisay. Siyaabo dhowr ah oo lagula socdo waxa soo socda oo saameyn ku leh iibiyeyaasha browserka.

Tan ka sii muhiimsan, waxaan rajeynayaa inaan ku qanciyay faa'iidooyinka isticmaalka madal shabakadda si buuxda awooddeeda.

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