Kusan shekaru 15 da suka wuce, ina aiki a wani kamfani inda muka gina manhajoji na masu yin balaguro, ma’aikatan filin jirgin sama, da kamfanonin jiragen sama. Mun kuma gina namu tsarin cikin gida don abubuwan haɗin UI da damar aikace-aikacen shafi guda ɗaya. Muna da abubuwa don komai: filaye, maɓallai, shafuka, jeri, bayanan bayanai, menus, datepickers, selects, and multiselects. Har ma muna da bangaren div. Bangaren div ɗinmu yana da kyau ta hanya, ya ba mu damar yin sasanninta akan duk masu bincike, wanda, gaskata shi ko a'a, ba abu ne mai sauƙi a yi ba a lokacin.
Ayyukanmu ya faru a wani lokaci a tarihin mu lokacin da aka ga JS, Ajax, da HTML mai tsauri a matsayin juyin juya hali wanda ya kawo mu a nan gaba. Nan da nan, za mu iya sabunta shafi a hankali, samun bayanai daga uwar garken, da kuma guje wa kewayawa zuwa wasu shafuka, wanda aka gani a hankali kuma ya haskaka wani babban farin rectangular akan allon tsakanin shafukan biyu. Akwai wata magana, wanda Jeff Atwood (wanda ya kafa StackOverflow) ya shahara, wanda ya karanta: "Duk wani aikace-aikacen da za a iya rubutawa a cikin JavaScript za a rubuta shi cikin JavaScript." - Jeff Atwood
A gare mu a lokacin, wannan yana jin kamar kuskura ya je ya ƙirƙiri waɗannan ƙa'idodin. Ya ji kamar yarda bargo don yin komai tare da JS. Don haka mun yi komai tare da JS, kuma ba mu ɗauki lokaci don bincika wasu hanyoyin yin abubuwa ba. Ba mu ji ƙwarin gwiwa sosai don koyon abin da HTML da CSS za su iya yi ba. Ba mu da gaske fahimtar yanar gizo a matsayin dandamalin app da ke haɓaka gabaɗayan sa. Mafi yawa mun gan shi a matsayin wani abu da muke buƙatar yin aiki a kai, musamman idan ya zo ga tallafin mai bincike. Za mu iya kawai jefa ƙarin JS a ciki don yin abubuwa. Za a iya ɗaukar lokaci don ƙarin koyo game da yadda gidan yanar gizon ke aiki da abin da ake samu akan dandamali ya taimake ni? Tabbas, tabbas zan iya aske gungun lambar da ba a buƙata da gaske. Amma, a lokacin, watakila ba haka ba ne. Ka ga, bambance-bambancen burauzar suna da matukar mahimmanci a lokacin. Wannan lokaci ne da har yanzu Internet Explorer ke kan gaba, inda Firefox ke zama na biyu na kusa, amma ya fara rasa kason kasuwa saboda Chrome yana samun farin jini cikin sauri. Ko da yake Chrome da Firefox sun yi kyau sosai wajen yarda da ƙa'idodin gidan yanar gizo, yanayin da aikace-aikacenmu ke gudana yana nufin dole ne mu goyi bayan IE6 na dogon lokaci. Ko da lokacin da aka ƙyale mu mu goyi bayan IE8, har yanzu muna fuskantar bambance-bambance masu yawa tsakanin masu bincike. Ba wai kawai ba, amma gidan yanar gizo na lokacin ba shi da damar da yawa da aka gina kai tsaye a cikin dandamali.
Saurin ci gaba zuwa yau. Abubuwa sun canza sosai. Ba wai kawai muna da ƙarin waɗannan damar fiye da kowane lokaci ba, amma ƙimar da suke samuwa ya karu kuma.
Bari in sake yin tambayar, to: Shin yin amfani da lokaci don ƙarin koyo game da yadda gidan yanar gizon ke aiki da abin da ke kan dandamali zai taimake ku a yau? Lallai eh. Koyon fahimta da amfani da dandalin yanar gizo a yau yana sanya ku a babbar fa'ida akan sauran masu haɓakawa.
Ko kuna aiki akan aiki, samun dama, amsawa, duka tare, ko kawai jigilar fasalulluka na UI, idan kuna son yin shi a matsayin injiniyan da ke da alhakin, sanin kayan aikin da ke gare ku yana taimaka muku cimma burinku cikin sauri da kyau.
Wasu Abubuwan Da Wataƙila Ba Ku Buƙatar Laburare Na Nan Gaba
Sanin abin da masu bincike ke tallafawa a yau, tambaya, to, ita ce: Me za mu iya cirewa? Shin muna buƙatar bangaren div don yin sasanninta a cikin 2025? Hakika, ba mu. Dukiyoyin radius na kan iyaka sun sami goyon bayan duk masu binciken da ake amfani da su a halin yanzu fiye da shekaru 15 a wannan lokacin. Kuma siffar kusurwa kuma yana zuwa nan ba da jimawa ba, har ma da sasanninta masu ban sha'awa.
Bari mu kalli fasalulluka na baya-bayan nan waɗanda ke samuwa a yanzu a cikin duk manyan masu bincike, kuma waɗanda za ku iya amfani da su don maye gurbin abubuwan dogaro da ke cikin codebase.
Maganar ita ce ba nan da nan ku cire duk ɗakunan karatu da kuke so ba kuma ku sake rubuta lambar lambar ku. Dangane da komai, kuna buƙatar fara ɗaukar tallafin burauza cikin lissafi kuma ku yanke shawara dangane da wasu abubuwan musamman na aikin ku. Ana aiwatar da waɗannan fasalulluka masu zuwa a cikin manyan injunan bincike guda uku (Chromium, WebKit, da Gecko), amma kuna iya samun buƙatun tallafin burauza daban-daban waɗanda ke hana ku amfani da su nan take. Yanzu har yanzu lokaci ne mai kyau don koyo game da waɗannan fasalulluka, ko da yake, kuma wataƙila shirin yin amfani da su a wani lokaci.
Popovers Da maganganu
Popover API, da
Tabbas, mai yiwuwa saurin haɗin Intanet ɗinku ya ƙaru, kuma, amma wannan ba haka bane ga kowa. Kuma ba kowa ba ne ke da damar na'urar iri ɗaya ko ɗaya. Ciro lambar ɓangare na uku don abubuwan da za ku iya yi tare da dandamali, maimakon haka, mai yiwuwa yana nufin kun aika ƙarin lamba, don haka isa ga abokan ciniki kaɗan fiye da yadda kuke saba. A kan gidan yanar gizo, mummunan aikin lodi yana haifar da ƙimar watsi da yawa kuma yana cutar da suna. Ƙarƙashin Ƙaddamarwa Akan Na'urori Bugu da ƙari, lambar da kuke aikawa akan na'urorin abokan cinikin ku na iya yin aiki da sauri idan ta yi amfani da ƙarancin abstraction na JavaScript a saman dandamali. Hakanan yana iya zama mai saurin amsawa kuma yana iya samun dama ta tsohuwa. Duk wannan yana haifar da ƙarin abokan ciniki da farin ciki. Bincika shafin yanar gizon rashin daidaituwa na aikin abokin aiki na Alex Russell na shekara, wanda ke nuna cewa manyan na'urori ba su da yawa daga kasuwanni tare da biliyoyin masu amfani saboda rashin daidaiton arziki. Kuma wannan gibin yana karuwa ne kawai akan lokaci.
Layout Masonry da aka Gina Ɗaya daga cikin fasalin dandalin yanar gizon da ke zuwa nan ba da jimawa ba kuma wanda nake matukar farin ciki shine CSS Masonry.
Bari in fara da bayanin menene Masonry. Menene Masonry Masonry wani nau'i ne na shimfidawa wanda Pinterest ya yi fice shekaru da suka gabata. Yana ƙirƙirar waƙoƙi masu zaman kansu na abun ciki waɗanda abubuwa ke tattara kansu kusa da farkon waƙar gwargwadon iyawa.
Mutane da yawa suna ganin Masonry a matsayin babban zaɓi don manyan fayiloli da ɗakunan hotuna, wanda tabbas zai iya yi. Amma Masonry ya fi sauƙi fiye da abin da kuke gani akan Pinterest, kuma ba'a iyakance ga shimfidu masu kama da ruwa ba. A cikin shimfidar Masonry:
Waƙoƙi na iya zama ginshiƙai ko layuka:
Waƙoƙin abun ciki ba dole ne su zama girman guda ɗaya ba:
Abubuwan na iya ɗaukar waƙoƙi da yawa:
Ana iya sanya abubuwa akan takamaiman waƙoƙi; ba dole ba ne su bi algorithm sanyawa ta atomatik:
Demos Anan ga ƴan sauƙi na demos da na yi ta amfani da aiwatar da CSS Masonry mai zuwa a cikin Chromium. Nunin hoton hoton hoto, yana nuna yadda abubuwa ( take a wannan yanayin) na iya ɗaukar waƙoƙi da yawa:
Wani gidan hoton hoto yana nuna waƙoƙi masu girma dabam:
Tsarin gidan yanar gizon labarai tare da wasu waƙoƙi ya fi na wasu, da kuma wasu abubuwa masu faɗin faɗin shimfidar:
Kwamitin kanban yana nuna cewa ana iya sanya abubuwa a kan takamaiman waƙoƙi:
Note: TheAn yi nunin nunin da ya gabata tare da sigar Chromium wanda har yanzu bai samu ba ga yawancin masu amfani da gidan yanar gizo, saboda CSS Masonry an fara aiwatar da shi a cikin masu bincike. Koyaya, masu haɓaka gidan yanar gizo sun kasance cikin farin ciki suna amfani da ɗakunan karatu don ƙirƙirar shimfidar Masonry na shekaru tuni. Shafukan Amfani da Masonry A Yau Tabbas, Masonry ya zama ruwan dare gama gari akan gidan yanar gizo a yau. Ga 'yan misalan da na samu ban da Pinterest:
Da kuma wasu ƙarin, ƙananan misalai, misalai:
To, ta yaya aka ƙirƙiri waɗannan shimfidu? Wuraren aiki Dabarar daya da na gani ana amfani da ita ita ce amfani da shimfidar Flexbox maimakon, canza alkibla zuwa shafi, da saita shi don kunsa. Ta wannan hanyar, zaku iya sanya abubuwa masu tsayi daban-daban a cikin ginshiƙai masu yawa, masu zaman kansu, suna ba da ra'ayi na shimfidar Masonry:
Koyaya, akwai iyakoki guda biyu tare da wannan aikin:
Tsarin abubuwa ya bambanta da abin da zai kasance tare da shimfidar Masonry na gaske. Tare da Flexbox, abubuwa suna cika shafi na farko da farko kuma, idan ya cika, sannan je zuwa shafi na gaba. Tare da Masonry, abubuwa za su tara a kowace waƙa (ko ginshiƙi a wannan yanayin) yana da ƙarin sarari. Amma kuma, kuma watakila mafi mahimmanci, wannan aikin yana buƙatar saita tsayayyen tsayi zuwa akwati na Flexbox; in ba haka ba, babu nannade da zai faru.
Dakunan karatu na Masonry na ɓangare na uku Don ƙarin lamuran ci gaba, masu haɓakawa suna amfani da ɗakunan karatu. Mafi shahara kuma sanannen ɗakin karatu don wannan ana kiransa Masonry, kuma ana saukar da shi kusan sau 200,000 a kowane mako bisa ga NPM. Squarespace kuma yana ba da ɓangaren shimfidawa wanda ke yin shimfidar Masonry, don madadin lambar ba, kuma shafuka da yawa suna amfani da shi. Duk waɗannan zaɓuɓɓuka biyu suna amfani da lambar JavaScript don sanya abubuwa a cikin shimfidar wuri. Ginin Masonry Ina matukar farin ciki cewa Masonry yanzu ya fara bayyana a cikin masu bincike azaman fasalin CSS da aka gina a ciki. Bayan lokaci, za ku iya amfani da Masonry kamar yadda kuke yi Grid ko Flexbox, wato, ba tare da buƙatar wani aiki ko lambar wani ɓangare na uku ba. Ƙungiyata a Microsoft tana aiwatar da ginanniyar tallafin Masonry a cikin aikin buɗe tushen Chromium, wanda Edge, Chrome, da sauran masu bincike da yawa suka dogara akai. Mozilla ita ce farkon mai siyar da mai bincike don ba da shawarar aiwatar da gwaji na Masonry baya a cikin 2020. Kuma Apple kuma ya kasance yana da sha'awar sanya wannan sabon tsarin gidan yanar gizon ya zama na farko. Aikin daidaita fasalin shima yana ci gaba, tare da yarjejeniya tsakanin rukunin aiki na CSS game da gabaɗayan jagora har ma da sabon nau'in nuni: grid-hanyoyi. Idan kuna son ƙarin koyo game da Masonry da bin ci gaba, duba shafin albarkatun Masonry na CSS. A cikin lokaci, lokacin da Masonry ya zama fasalin Baseline, kamar Grid ko Flexbox, za mu iya amfani da shi kawai kuma mu amfana daga:
Kyakkyawan aiki, Kyakkyawan amsawa, Sauƙin amfani da mafi sauƙi code.
Bari mu dubi waɗannan a hankali. Kyakkyawan Ayyuka Yin tsarin shimfidar wuri kamar Masonry, ko amfani da ɗakin karatu na ɓangare na uku a maimakon haka, yana nufin dole ne ku kunna lambar JavaScript don sanya abubuwa akan allon. Wannan kuma yana nufin cewa wannan lambar za ta kasance tana toshewa. Lallai, ko dai babu abin da zai bayyana, ko kuma abubuwa ba za su kasance a wuraren da suka dace ba ko na masu girma dabam ba, har sai lambar JavaScript ta gudana. Sau da yawa ana amfani da shimfidar masonry don babban ɓangaren shafin yanar gizon, wanda ke nufin lambar za ta sa babban abun ciki ya bayyana daga baya fiye da yadda zai iya samu, yana wulakanta LCP ɗin ku, ko mafi girman ma'aunin fenti mai ƙima, wanda ke taka rawa sosai wajen fahimtar aiki da haɓaka injin bincike. Na gwada ɗakin karatu na Masonry JS tare da tsari mai sauƙi kuma ta hanyar daidaita haɗin 4G a hankali a cikin DevTools. Laburare ba ta da girma sosai (24KB, 7.8KB gzipped), amma ya ɗauki 600ms don ɗauka a ƙarƙashin yanayin gwaji na. Anan ga rikodin wasan kwaikwayon yana nuna tsawon lokacin ɗaukar nauyin 600ms don ɗakin karatu na Masonry, kuma babu wani aikin da ya faru yayin da hakan ke faruwa:
Bugu da kari, bayan lokacin farkon lokacin lodin, rubutun da aka zazzage yana buƙatar tantancewa, harhada, sannan a gudanar da shi. Duk waɗannan, kamar yadda aka ambata a baya, suna toshe fassarar shafin. Tare da ginanniyar aiwatar da Masonry a cikin mai bincike, ba za mu sami rubutun da za mu ɗauka da aiki ba. Injin burauzar zai yi abinsa ne kawai a lokacin farkon aiwatar da shafin. Ingantacciyar amsawa Kama da lokacin da shafi ya fara lodi, sake girman taga mai bincike yana kaiwa ga sake yin shimfidar wuri a wancan shafin. A wannan lokacin, kodayake, idan shafin yana amfani da ɗakin karatu na Masonry JS, babu buƙatar sake ɗora rubutun, saboda ya riga ya rigaya.nan. Koyaya, lambar da ke motsa abubuwa a wuraren da suka dace yana buƙatar aiki. Yanzu wannan ɗakin karatu na musamman yana da alama yana da saurin yin hakan lokacin da shafin ke lodawa. Koyaya, yana haɓaka abubuwan lokacin da suke buƙatar matsawa zuwa wani wuri daban akan girman taga, kuma wannan yana haifar da babban bambanci. Tabbas, masu amfani ba sa kashe lokaci don canza girman windows ɗin su kamar yadda mu masu haɓakawa muke yi. Amma wannan ƙwarewar girman girman mai rai na iya zama kyakkyawa mai ban tsoro kuma yana ƙara zuwa ga lokacin da ake ɗauka don shafin ya dace da sabon girmansa. Sauƙin Amfani Da Sauƙaƙan Code Yadda sauƙin amfani da fasalin gidan yanar gizo da kuma yadda sauƙin lambar ke kama su ne mahimman abubuwan da za su iya yin babban bambanci ga ƙungiyar ku. Ba za su iya zama mahimmanci kamar ƙwarewar mai amfani na ƙarshe ba, ba shakka, amma ƙwarewar haɓakawa yana tasiri ga kiyayewa. Amfani da ginanniyar fasalin gidan yanar gizon yana zuwa tare da fa'idodi masu mahimmanci akan wannan gaba:
Masu haɓakawa waɗanda suka riga sun san HTML, CSS, da JS za su iya yiwuwa a yi amfani da wannan fasalin cikin sauƙi saboda an tsara shi don haɗawa da kyau kuma ya dace da sauran dandalin yanar gizon. Babu haɗarin warware canje-canje da aka gabatar a cikin yadda ake amfani da fasalin. Babu kusan haɗarin wannan fasalin ya zama lalacewa ko rashin kiyayewa.
A cikin yanayin ginannen Masonry, saboda tsarin shimfidar wuri ne, kuna amfani da shi daga CSS, kamar Grid ko Flexbox, babu JS da hannu. Hakanan, sauran kaddarorin CSS masu alaƙa, kamar rata, suna aiki kamar yadda kuke tsammanin za su yi. Babu dabaru ko hanyoyin da za a sani game da su, kuma abubuwan da kuke koyo an rubuta su akan MDN. Don Masonry JS lib, farawa yana da ɗan rikitarwa: yana buƙatar sifa na bayanai tare da takamaiman tsarin aiki, tare da ɓoyayyun abubuwan HTML don saita ginshiƙi da girman rata. Bugu da ƙari, idan kuna son faɗaɗa ginshiƙai, kuna buƙatar haɗa da girman ratar da kanku don guje wa matsaloli:
Bari mu kwatanta wannan da yadda ginanniyar aiwatar da Masonry zai yi kama da:
Mafi sauƙi, mafi ƙarancin lambar da za ta iya amfani da abubuwa kamar rata da kuma inda ake yin waƙoƙin waƙa tare da span 2, kamar a cikin grid, kuma baya buƙatar ka ƙididdige faɗin daidai wanda ya haɗa da girman rata. Yadda za a san abin da ke samuwa da kuma lokacin da yake samuwa? Gabaɗaya, tambayar ba da gaske bane idan yakamata kuyi amfani da ginanniyar Masonry akan ɗakin karatu na JS, amma a yaushe. Laburaren Masonry JS yana da ban mamaki kuma yana cike gibi a cikin dandalin yanar gizon shekaru da yawa, kuma ga yawancin masu haɓakawa da masu amfani da farin ciki. Yana da ƴan kurakurai idan kun kwatanta shi da ginanniyar aiwatar da Masonry, ba shakka, amma waɗannan ba su da mahimmanci idan aiwatarwar bai shirya ba. Yana da sauƙi a gare ni in jera waɗannan sabbin fasalolin dandalin yanar gizo masu kyau saboda ina aiki a mai siyar da burauza, don haka ina son sanin abin da ke zuwa. Amma masu haɓakawa sukan raba, bincike bayan bincike, cewa kiyaye sabbin abubuwa yana da wahala. Kasancewa yana da wahala, kuma kamfanoni ba koyaushe suna ba da fifiko ga koyo ba. Don taimakawa da wannan, ga ƴan albarkatun da ke ba da sabuntawa ta hanyoyi masu sauƙi da ƙanƙanta don ku sami bayanan da kuke buƙata cikin sauri:
Dandalin Yanar Gizo yana fasalta rukunin bincike: Kuna iya sha'awar shafin bayanin kulansa. Kuma, idan kuna son RSS, duba ciyarwar bayanin kula na saki, da kuma sabbin abubuwan da ake samu na Baseline.
Yanar GizoDashboard Matsayin Platform: Kuna iya son shafukanta na shekara daban-daban na Baseline.
Shafin taswirar hanyar Platform Status Chrome.
Idan kuna da ɗan ƙarin lokaci, kuna iya sha'awar bayanin bayanan saki na masu bincike:
Chrome Gefen Firefox Safari
Don ƙarin albarkatu, duba nawa Kewayawa da Dandalin Cheatsheet na Yanar Gizo. Har yanzu Ba a Aikata Abu Na Ba Wannan shi ne daya bangaren matsalar. Ko da kun sami lokaci, kuzari, da hanyoyin kiyaye waƙa, har yanzu akwai takaici tare da jin muryar ku da aiwatar da abubuwan da kuka fi so. Wataƙila kun kasance kuna jira tsawon shekaru don a warware takamaiman kwaro, ko takamaiman fasalin don jigilar kaya a cikin burauzar inda har yanzu ya ɓace. Abin da zan ce masu sayar da burauza suna saurare. Ina cikin ƙungiyoyin ƙungiyoyin giciye da yawa inda muke tattauna siginonin masu haɓakawa da ra'ayoyin masu haɓaka koyaushe. Muna duban maɓuɓɓuka daban-daban na amsawa, duka na ciki a kowane mai siyar da mai bincike da na waje/jama'a akan taruka, ayyukan buɗaɗɗen tushe, shafukan yanar gizo, da safiyo. Kuma, koyaushe muna ƙoƙarin ƙirƙirar ingantattun hanyoyi don masu haɓakawa don raba takamaiman bukatunsu da amfani da shari'o'in. Don haka, idan za ku iya, da fatan za a nemi ƙarin daga masu sayar da burauza kuma ku matsa mana mu aiwatar da abubuwan da kuke buƙata. Ina jin cewa yana ɗaukar lokaci, kuma yana iya zama mai ban tsoro (ba tare da ambaton babban shinge na shigarwa ba), amma kuma yana aiki. Anan akwai ƴan hanyoyin da za ku iya jin muryar ku (ko kamfanin ku): Ɗauki Jiha na JS na shekara-shekara, Jihar CSS, da na Jihar HTML. Suna taka rawar gani sosai a yadda masu siyar da burauzar ke ba da fifikon aikinsu. Idan kuna buƙatar takamaiman daidaitaccen tushen API don aiwatar da shi akai-akai a cikin masu bincike, la'akari da ƙaddamar da tsari a ci gaba da aikin Interop na gaba. Yana buƙatar ƙarin lokaci, amma la'akari da yadda Shopify da RUMvision suka raba jerin buƙatun su don Interop 2026. Cikakkun bayanai kamar wannan na iya zama da amfani sosai ga masu siyar da burauzar don ba da fifiko. Don ƙarin hanyoyin haɗin kai masu amfani don yin tasiri ga dillalan burauza, duba nawa Kewayawa da Rukunin Yanar Gizo Cheatsheet. Kammalawa Don rufewa, ina fata wannan labarin ya bar muku wasu abubuwa da za ku yi tunani a kai:
Jin daɗi ga Masonry da sauran fasalolin gidan yanar gizo masu zuwa. Wasu fasalulluka na gidan yanar gizo da kuke so ku fara amfani da su. Wasu ƴan guntuka na al'ada ko lambar jam'iyya ta 3 za ku iya iya cirewa don goyon bayan abubuwan ginannun. Hanyoyi kaɗan don ci gaba da bin diddigin abubuwan da ke zuwa da tasiri ga masu siyar da burauza.
Mafi mahimmanci, ina fata na gamsar da ku game da fa'idodin amfani da dandalin yanar gizon zuwa cikakkiyar damarsa.
