نزیکەی ١٥ ساڵ لەمەوبەر لە کۆمپانیایەک کارم دەکرد کە ئەپەکانمان بۆ بریکاری گەشتیاری و کرێکارانی فڕۆکەخانە و کۆمپانیاکانی هێڵی ئاسمانی دروست دەکرد. هەروەها چوارچێوەی ناوخۆیی خۆمان بۆ پێکهاتەکانی UI و تواناکانی ئەپی تاک لاپەڕەیی دروستکرد. ئێمە پێکهاتەکانمان بۆ هەموو شتێک هەبوو: مەیدان، دوگمە، تاب، مەودا، خشتەی داتا، مینیو، هەڵبژاردنی بەروار، هەڵبژاردن و فرە هەڵبژاردن. تەنانەت پێکهاتەی divمان هەبوو. پێکهاتەی div ی ئێمە بەڕێگەدا زۆر باش بوو، ڕێگەی پێداین گۆشەی گوڵاو لەسەر هەموو وێبگەڕەکان بکەین، کە باوەڕ بکەن یان نەیکەن، لەو کاتەدا شتێکی ئاسان نەبوو.
کارەکانمان لە خاڵێکدا لە مێژووماندا ڕوویدا کە JS و Ajax و HTML داینامیکی وەک شۆڕشێک سەیر دەکران کە ئێمەی هێنایە ناو داهاتوو. لەناکاو دەمانتوانی لاپەڕەیەک بە شێوەیەکی داینامیکی نوێ بکەینەوە، داتا لە سێرڤەرێکەوە وەربگرین و خۆمان بەدوور بگرین لە ڕۆیشتن بۆ لاپەڕەکانی تر، کە وەک خاو سەیر دەکرا و گۆشەیەکی چوارگۆشەی سپی گەورەی لەسەر شاشەکە لە نێوان دوو لاپەڕەکەدا هەڵدەدا. دەستەواژەیەک هەبوو، لەلایەن جێف ئاتوود (دامەزرێنەری ستاک ئۆڤەرفلۆ)ەوە بەناوبانگ بوو، کە دەنووسرا: "هەر بەرنامەیەک کە بتوانرێت بە جاڤاسکڕێپت بنووسرێت، لە کۆتاییدا بە جاڤاسکڕێپت دەنووسرێت."- جێف ئاتوود
بۆ ئێمە لەو کاتەدا ئەمە هەستێکی وەک بوێرییەک بوو بۆ ئەوەی لە ڕاستیدا بچین و ئەو ئەپانە دروست بکەین. هەستم دەکرد وەک ڕەزامەندییەکی بەتانی وایە بۆ ئەوەی هەموو شتێک لەگەڵ JS ئەنجام بدرێت. بۆیە هەموو شتێکمان لەگەڵ JS کرد، و لە ڕاستیدا کاتمان بۆ لێکۆڵینەوە لە ڕێگاکانی تری ئەنجامدانی کارەکان تەرخان نەکرد. ئێمە لە ڕاستیدا هەستمان بەو هاندەرە نەدەکرد بۆ ئەوەی بە شێوەیەکی دروست فێربین کە HTML و CSS دەتوانن چی بکەن. ئێمە لە ڕاستیدا وێبمان وەک پلاتفۆرمی ئەپێکی پەرەسەندوو بە تەواوی هەست پێنەدەکرد. ئێمە زۆرتر وەک شتێک دەمانبینی کە پێویستە کار لەسەر بکەین، بە تایبەت کاتێک باس لە پشتگیری وێبگەڕ دەکرا. دەتوانین تەنها JS زیاتر فڕێ بدەینە سەری بۆ ئەوەی کارەکان تەواو بکەین. ئایا تەرخانکردنی کات بۆ زانیاری زیاتر لەسەر چۆنیەتی کارکردنی وێب و ئەوەی لە پلاتفۆرمەکەدا بەردەستە، یارمەتیم دەدا؟ دڵنیابە، ڕەنگە دەمتوانی کۆمەڵێک کۆد ڕیش بتاشمەوە کە بەڕاستی پێویست نەبوون. بەڵام، لەو کاتەدا، ڕەنگە ئەوەندە نەبێت. دەبینیت جیاوازی وێبگەڕەکان لەو کاتەدا زۆر بەرچاو بوو. ئەمە سەردەمێک بوو کە ئینتەرنێت ئێکسپلۆرەر هێشتا وێبگەڕی باڵادەست بوو، فایەرفۆکس دووەمی نزیک بوو، بەڵام بەهۆی ئەوەی کرۆم بە خێرایی ناوبانگێکی زۆری بەدەستهێنا، دەستیکرد بە لەدەستدانی پشکی بازاڕ. هەرچەندە کرۆم و فایەرفۆکس تاڕادەیەک باش بوون لە ڕێککەوتن لەسەر ستانداردەکانی وێب، بەڵام ئەو ژینگەیانەی کە ئەپەکانمان تێیدا کاردەکرد بەو مانایە بوو کە دەبوو بۆ ماوەیەکی زۆر پشتگیری IE6 بکەین. تەنانەت کاتێک ڕێگەمان پێدرا پشتگیری IE8 بکەین، هێشتا دەبوو مامەڵە لەگەڵ جیاوازییەکی زۆر لە نێوان وێبگەڕەکاندا بکەین. نەک هەر ئەوە، بەڵکو وێبی ئەو سەردەمە تەنها ئەوەندە توانای نەبوو کە ڕاست لەناو پلاتفۆرمەکەدا دروستکرابوو.
خێرا بچۆ پێشەوە بۆ ئەمڕۆ. شتەکان گۆڕانکارییەکی گەورەیان بەسەردا هاتووە. نەک هەر لە جاران زیاتر ئەم توانایانەمان هەیە، بەڵکو ڕێژەی بەردەستبوونیش زیادی کردووە. با جارێکی تر پرسیارەکە بکەمەوە، کەواتە: ئایا تەرخانکردنی کات بۆ زانیاری زیاتر لەسەر چۆنیەتی کارکردنی وێب و ئەوەی لەسەر پلاتفۆرمەکە بەردەستە، ئەمڕۆ یارمەتیت دەدات؟ بە تەواوی بەڵێ. فێربوونی تێگەیشتن و بەکارهێنانی پلاتفۆرمی وێب ئەمڕۆ، تۆ دەخاتە سوودێکی گەورەوە بە بەراورد بە گەشەپێدەرانی تر. جا کار لەسەر کارایی، دەستڕاگەیشتن، وەڵامدانەوە، هەموویان پێکەوە، یان تەنها ناردنی تایبەتمەندییەکانی UI، ئەگەر بتەوێت وەک ئەندازیارێکی بەرپرسیار ئەو کارە بکەیت، زانینی ئەو ئامرازانەی کە لەبەردەستتدان یارمەتیت دەدات خێراتر و باشتر بگەیتە ئامانجەکانت. هەندێک شت کە ڕەنگە چیتر پێویستت بە کتێبخانە نەبێت کەواتە بە زانینی ئەوەی کە وێبگەڕەکان ئەمڕۆ پشتگیری لە چی دەکەن، پرسیارەکە ئەوەیە: دەتوانین چی بکەین؟ ئایا پێویستمان بە پێکهاتەی div هەیە بۆ ئەوەی لە ساڵی ٢٠٢٥دا گۆشەی گوڵاو ئەنجام بدەین؟ بێگومان ئێمە نایکەین. تایبەتمەندی border-radius لەلایەن هەموو وێبگەڕە بەکارهێنراوەکانی ئێستا بۆ زیاتر لە ١٥ ساڵ لەم کاتەدا پشتگیری دەکرێت. وە شێوەی گۆشەش بەم زووانە دێت، بۆ گۆشە فەنتازییەکانیش. با چاوێک لە تایبەتمەندییە تاڕادەیەک نوێیەکان بکەین کە ئێستا لە هەموو وێبگەڕە سەرەکییەکان بەردەستن، و دەتوانیت بەکاریان بهێنیت بۆ گۆڕینی وابەستەییەکانی ئێستا لە بنکەدراوەی کۆدەکانتدا. مەسەلەکە ئەوە نییە کە یەکسەر هەموو کتێبخانە خۆشەویستەکانت لاببەیت و بنکەی کۆدەکانت بنووسیتەوە. سەبارەت بە هەموو شتێکی تر، پێویستە سەرەتا پشتگیری وێبگەڕەکە لەبەرچاو بگرێت و بڕیار بدەیت بە پشتبەستن بە هۆکارەکانی تری تایبەت بە پڕۆژەکەت. ئەم تایبەتمەندیانەی خوارەوە لە سێ بزوێنەری سەرەکی وێبگەڕەکەدا جێبەجێ دەکرێن (Chromium, WebKit, and Gecko)، بەڵام لەوانەیە پێداویستی پشتگیری وێبگەڕی جیاوازت هەبێت کە ڕێگریت لێبکات یەکسەر بەکاریان بهێنیت. بەڵام ئێستا هێشتا کاتێکی باشە بۆ فێربوونی ئەم تایبەتمەندیانە و ڕەنگە پلانت هەبێت لە شوێنێکدا بەکاریان بهێنیت. پۆپۆڤەر و دیالۆگەکان API ی Popover، توخمە HTML ی
دڵنیابە، ڕەنگە خێرایی هێڵی ئینتەرنێتەکەت زیاد بووبێت، بەڵام ئەوە بۆ هەموو کەسێک وا نییە. وە هەموو کەسێک توانای ئامێرەکانیشی وەک یەک نییە. ڕاکێشانی کۆدی لایەنی سێیەم بۆ ئەو شتانەی کە دەتوانیت بە پلاتفۆرمەکە بیکەیت، لەبری ئەوە، بە ئەگەرێکی زۆرەوە بەو مانایەیە کە کۆدی زیاتر دەنێری، و هەربۆیە دەگەیتە کڕیاری کەمتر لەوەی کە بە شێوەیەکی ئاسایی دەیکەیت. لە وێبدا، ئەدای خراپی بارکردن دەبێتە هۆی ڕێژەیەکی گەورەی وازهێنان و ئازاری ناوبانگی براندەکە دەدات. کارپێکردنی کۆدی کەمتر لەسەر ئامێرەکان جگە لەوەش، ئەو کۆدەی کە تۆ لەسەر ئامێرەکانی کڕیارەکانت دەینێری، بە ئەگەرێکی زۆرەوە خێراتر کاردەکات ئەگەر کەمتر ئەبستراکتەکانی جاڤاسکڕێپت لەسەر پلاتفۆرمەکە بەکاربهێنێت. هەروەها ڕەنگە بە شێوازی پێشوەختە وەڵامدەرەوەتر و دەستڕاگەیشتنتر بێت. هەموو ئەمانە دەبێتە هۆی ئەوەی کڕیاری زیاتر و دڵخۆشتر بێت. بلۆگی ساڵانەی بۆشایی نایەکسانی ئەدای هاوکارەکەم ئەلێکس ڕوسیل بپشکنە، کە نیشان دەدات کە ئامێرە بەرزەکان تا ڕادەیەکی زۆر لە بازاڕەکاندا ئامادە نین کە ملیارەها بەکارهێنەریان هەیە بەهۆی نایەکسانی سامانەوە. وە ئەم بۆشاییە تەنها بە تێپەڕبوونی کات گەشە دەکات.
نەخشەی بیناسازی لە ناوەوە یەکێک لە تایبەتمەندییەکانی پلاتفۆرمی وێب کە بەم زووانە دێت و زۆر بە هیوای ئەوەم CSS Masonry ە.
با بە ڕوونکردنەوە دەست پێ بکەم کە ماسۆنییەت چییە. ماسۆنی چییە بیناسازی جۆرێکە لە نەخشە کە ساڵانێک لەمەوبەر لەلایەن Pinterest ەوە بەناوبانگ بوو. تراکی سەربەخۆی ناوەڕۆک دروست دەکات کە لەناویاندا شتەکان خۆیان کۆدەکەنەوە تا دەتوانن لە سەرەتای تراکەکەوە نزیک بن.
زۆر کەس ماسۆنی وەک بژاردەیەکی زۆر باش بۆ پۆرتفۆلیۆ و گەلەری وێنە دەبینن، کە بە دڵنیاییەوە دەتوانێت بیکات. بەڵام کاری ماسۆنی نەرمترە لەوەی کە لە Pinterest دەیبینیت، و تەنها لە نەخشەی هاوشێوەی شلەمەنیدا سنووردار نییە. لە نەخشەیەکی ماسۆنیدا:
تراکەکان دەتوانن ستوونی یان ڕیز بن:
مەرج نییە تراکی ناوەڕۆک هەموویان یەک قەبارە بن:
بابەتەکان دەتوانن چەندین تراک بگرێتەوە:
دەتوانرێت شتەکان لەسەر ڕێڕەوی تایبەت دابنرێت؛ پێویست ناکات هەمیشە ئەلگۆریتمەکەی دانانی ئۆتۆماتیکی پەیڕەو بکەن:
دیمۆکان لێرەدا چەند دیمۆیەکی سادە دەخەینەڕوو کە بە بەکارهێنانی جێبەجێکردنی داهاتووی CSS Masonry لە Chromium دروستم کردووە. دیمۆیەکی گەلەری وێنە، کە نیشان دەدات چۆن شتەکان (ناونیشان لەم حاڵەتەدا) دەتوانن چەندین تراک بگرێتەوە:
گەلەرییەکی تری وێنە کە تراکی قەبارە جیاوازەکان پیشان دەدات:
نەخشەی ماڵپەڕێکی هەواڵ کە هەندێک تراکی فراوانترە لە هەندێکی تر، و هەندێک بابەت کە تەواوی پانی نەخشەکە دەگرێتەوە:
تەختەیەکی کانبان کە نیشان دەدات کە دەتوانرێت شتەکان لەسەر ڕێڕەوی تایبەت دابنرێت:
تێبینی: زە...دیمۆکانی پێشوو بە وەشانی Chromium دروستکراون کە هێشتا بۆ زۆربەی بەکارهێنەرانی وێب بەردەست نییە، چونکە CSS Masonry تەنها دەستی کردووە بە جێبەجێکردن لە وێبگەڕەکاندا. بەڵام گەشەپێدەرانی وێب ساڵانێکە بە خۆشحاڵییەوە کتێبخانەکان بەکاردەهێنن بۆ دروستکردنی نەخشەی ماسۆنی. ئەو سایتانەی کە ئەمڕۆ ماسۆنی بەکاردەهێنن بەڕاستی لەمڕۆدا کاری ماسۆنی زۆر باو و ئاساییە لە وێبدا. لێرەدا چەند نموونەیەک دەخەینەڕوو کە جگە لە Pinterest دۆزیمەتەوە:
وە چەند نموونەیەکی تر، کەمتر دیار:
کەواتە، ئەم نەخشانە چۆن دروستکراون؟ چارەسەرەکان یەکێک لەو فێڵانەی کە بینیومە بەکارهێنراون بریتییە لە بەکارهێنانی نەخشەی Flexbox لەبری ئەوە، گۆڕینی ئاراستەکەی بۆ ستوونی، و ڕێکخستنی بۆ پێچان. بەم شێوەیە دەتوانیت شتومەکی بەرزی جیاواز لە چەندین ستوونی سەربەخۆدا دابنێیت، کە کاریگەرییەکی نەخشەی ماسۆنی دەدات:
بەڵام دوو سنووردارکردن لەگەڵ ئەم چارەسەرەدا هەیە:
ڕێکوپێکی شتەکان جیاوازە لەوەی کە لەگەڵ نەخشەی ڕاستەقینەی ماسۆنیدا دەبێت. لەگەڵ Flexbox، شتەکان سەرەتا ستوونی یەکەم پڕدەکەنەوە و، کاتێک پڕ بوو، پاشان دەچنە ستوونی داهاتوو. لەگەڵ ماسۆنریدا، شتەکان لە هەر تراکێکدا (یان ستوونی لەم حاڵەتەدا) کە شوێنی زیاتری هەبێت، کۆدەبنەوە. بەڵام هەروەها، و ڕەنگە لەوەش گرنگتر، ئەم چارەسەرە پێویستی بەوەیە کە بەرزییەکی جێگیر بۆ دەفری فلێکسبۆکس دابنێیت؛ ئەگەرنا هیچ پێچانێک ڕوونادات.
کتێبخانەکانی ماسۆنی لایەنی سێیەم بۆ حاڵەتە پێشکەوتووترەکان، گەشەپێدەران کتێبخانەکانیان بەکارهێناوە. ناسراوترین و بەناوبانگترین کتێبخانە بۆ ئەمە بە سادەیی ناوی Masonry ە، و بەپێی NPM هەفتانە نزیکەی ٢٠٠ هەزار جار دابەزێنرێت. هەروەها سکوێرسپەیس پێکهاتەیەکی نەخشە دابین دەکات کە نەخشەی ماسۆنی ڕەندەر دەکات، بۆ بەدیلێکی بێ کۆد، و زۆرێک لە سایتەکان بەکاری دەهێنن. هەردوو ئەم هەڵبژاردنانە کۆدی جاڤاسکڕێپت بەکاردەهێنن بۆ دانانی شتەکان لە نەخشەکەدا. بیناسازی دروستکراو بەڕاستی زۆر دڵخۆشم کە ئێستا Masonry دەستی کردووە بە دەرکەوتن لە وێبگەڕەکاندا وەک تایبەتمەندییەکی CSSی ناوەکی. بە تێپەڕبوونی کات دەتوانیت Masonry بەکاربهێنیت هەروەک چۆن Grid یان Flexbox بەکاردەهێنیت، واتە بەبێ ئەوەی پێویستت بە هیچ چارەسەرێک یان کۆدێکی لایەنی سێیەم هەبێت. تیمەکەم لە مایکرۆسۆفت پشتگیری دروستکراوی Masonry لە پرۆژەی سەرچاوە کراوەی Chromium جێبەجێ کردووە، کە Edge و Chrome و زۆرێک لە وێبگەڕەکانی دیکە لەسەری بنیات نراوە. مۆزیلا لە ڕاستیدا یەکەم فرۆشیاری وێبگەڕ بوو کە پێشنیاری جێبەجێکردنی تاقیکاریی ماسۆنری کرد لە ساڵی ٢٠٢٠. وە ئەپڵ هەروەها زۆر ئارەزووی ئەوەی کردووە کە ئەم شێوازە نوێیەی وێبە سەرەتاییە ڕووبدات. هەروەها کارەکانی ستانداردکردنی تایبەتمەندییەکە بەرەو پێشەوە دەچێت، لەگەڵ ڕێککەوتن لەناو گروپی کاری CSS سەبارەت بە ئاراستەی گشتی و تەنانەت نمایشێکی نوێی جۆری پیشاندانی: grid-lanes. ئەگەر دەتەوێت زیاتر دەربارەی Masonry بزانیت و بەدواداچوون بۆ پێشکەوتنەکان بکەیت، سەیری لاپەڕەی سەرچاوەکانی CSS Masonry بکە. لە کاتی خۆیدا، کاتێک ماسۆنی دەبێتە تایبەتمەندییەکی بنەڕەتی، هەروەک چۆن گرید یان فلێکسبۆکس، دەتوانین بە سادەیی بەکاری بهێنین و سوودمەند بین لەم:
ئەدای باشتر، وەڵامدانەوەی باشتر، ئاسانکاری بەکارهێنان و کۆدی سادەتر.
با لە نزیکەوە سەیری ئەمانە بکەین. ئەدای باشتر دروستکردنی سیستەمی نەخشەی هاوشێوەی Masonry ی خۆت، یان بەکارهێنانی کتێبخانەی لایەنی سێیەم لە جیاتی ئەوە، واتە دەبێت کۆدی جاڤاسکڕێپت جێبەجێ بکەیت بۆ دانانی شتەکان لەسەر شاشەکە. ئەمەش بەو مانایەیە کە ئەم کۆدە دەبێتە ڕێندەر بلۆککردن. لەڕاستیدا، یان هیچ دەرناکەوێت، یان شتەکان لە شوێنی گونجاو یان قەبارەی گونجاودا نابن، تا ئەو کۆدە جاڤاسکڕێپتە کاردەکات. زۆرجار نەخشەی بیناسازی بۆ بەشی سەرەکی وێب پەڕێک بەکاردەهێنرێت، ئەمەش واتە کۆدەکە دەبێتە هۆی ئەوەی ناوەڕۆکی سەرەکیت درەنگتر دەربکەوێت لەوەی کە ئەگەرنا دەتوانێت هەیبێت، ئەمەش LCP، یان پێوەرەکانی Largest Contentful Paint ـت دادەبەزێنێت، کە ڕۆڵێکی گەورە دەگێڕێت لە ئەدای هەستپێکراوی و باشکردنی بزوێنەری گەڕان. من کتێبخانەی Masonry JSم تاقیکردەوە بە شێوازێکی سادە و بە ھاوشێوەکردنی پەیوەندییەکی خاو 4G لە DevTools. کتێبخانەکە زۆر گەورە نییە (24KB، 7.8KB gzipped)، بەڵام 600ms ی خایاند بۆ بارکردن لە ژێر بارودۆخی تاقیکردنەوەکەمدا. لێرەدا تۆمارێکی کارایی هەیە کە نیشان دەدات کە کاتێکی درێژی بارکردنی 600ms بۆ کتێبخانەی ماسۆنری، و هیچ چالاکیەکی تری ڕێندەرکردن ڕووی نەداوە لەکاتێکدا ئەوە ڕوودەدات:
جگە لەوەش، دوای کاتی سەرەتایی بارکردن، پاشان سکریپتی دابەزێنراو پێویستی بە شیکردنەوە و کۆمپایڵکردن و پاشان جێبەجێکردن بوو. هەموو ئەمانەش وەک پێشتر باسمان کرد، ڕێگریکردن بوو لە ڕێندەرکردنی لاپەڕەکە. بە جێبەجێکردنی ناوەکی Masonry لە وێبگەڕەکەدا، ئێمە سکریپتێکمان نابێت بۆ بارکردن و جێبەجێکردن. بزوێنەری وێبگەڕەکە تەنها لە کاتی هەنگاوی سەرەتایی ڕەندەری لاپەڕەدا کاری خۆی دەکات. وەڵامدانەوەی باشتر هاوشێوەی کاتێک لاپەڕەیەک بۆ یەکەمجار باردەکرێت، گۆڕینی قەبارەی پەنجەرەی وێبگەڕەکە دەبێتە هۆی ڕەندەرکردنی نەخشەکە لەو لاپەڕەیەدا دووبارە. بەڵام لەم خاڵەدا ئەگەر لاپەڕەکە کتێبخانەی Masonry JS بەکاردەهێنێت، پێویست ناکات جارێکی تر سکریپتەکە باربکرێتەوە، چونکە پێشتر بووەلێرە. بەڵام ئەو کۆدەی کە شتەکان لە شوێنی گونجاودا دەگوازێتەوە پێویستی بە کارکردن هەیە. ئێستا پێدەچێت ئەم کتێبخانە تایبەتە زۆر خێرا بێت لە ئەنجامدانی ئەم کارە کاتێک لاپەڕەکە باردەکرێت. بەڵام شتەکان ئەنیمەیشن دەکات کاتێک پێویستیان بە گواستنەوەیان بۆ شوێنێکی جیاوازە لەسەر گۆڕینی قەبارەی پەنجەرە و ئەمەش جیاوازییەکی گەورە دروست دەکات. بێگومان بەکارهێنەران کات بەسەر نابەن بۆ گۆڕینی قەبارەی پەنجەرەی وێبگەڕەکانیان بەقەد ئێمەی گەشەپێدەران. بەڵام ئەم ئەزموونە ئەنیمەیشنە گۆڕینی قەبارە دەتوانێت زۆر جەنجاڵ بێت و زیاد دەکات بۆ ئەو کاتە هەستپێکراوەی کە پێویستە بۆ ئەوەی لاپەڕەکە خۆی لەگەڵ قەبارە نوێیەکەیدا بگونجێنێت. ئاسانکاری بەکارهێنان و کۆدی سادەتر بەکارهێنانی تایبەتمەندی وێب چەندە ئاسانە و کۆدەکە چەندە سادە دەردەکەوێت هۆکاری گرنگن کە دەتوانن جیاوازییەکی گەورە بۆ تیمەکەت دروست بکەن. بێگومان هەرگیز ناتوانن وەک ئەزموونی کۆتایی بەکارهێنەر گرنگ بن، بەڵام ئەزموونی گەشەپێدەر کاریگەری لەسەر پاراستنیان هەیە. بەکارهێنانی تایبەتمەندییەکی وێبی ناوەکی سوودی گرنگی لەگەڵدایە لەو بەرەیەدا:
ئەو گەشەپێدەرانەی کە پێشتر HTML و CSS و JS دەزانن بە ئەگەرێکی زۆرەوە دەتوانن ئەو تایبەتمەندییە بە ئاسانی بەکاربهێنن چونکە بە شێوەیەک دیزاین کراوە کە بە باشی یەکبگرێت و لەگەڵ باقی پلاتفۆرمی وێبەکەدا یەکدەگرێتەوە. هیچ مەترسییەک نییە کە گۆڕانکارییەکان بشکێنرێن لە چۆنیەتی بەکارهێنانی تایبەتمەندییەکەدا. نزیکەی سفر مەترسی ئەوە هەیە کە ئەو تایبەتمەندییە بەکارنەهێنرێت یان پارێزگاری لێ نەکرێت.
لە حاڵەتی Masonry ی ناوەکیدا، چونکە سەرەتایییەکی نەخشەیە، تۆ لە CSS بەکاری دەهێنیت، هەروەک Grid یان Flexbox، هیچ JS ی تێدا نییە. هەروەها، تایبەتمەندییەکانی تری CSS پەیوەست بە نەخشە، وەکو بۆشایی، بەو شێوەیە کاردەکەن کە چاوەڕێی دەکەیت. هیچ فێڵێک و چارەسەرێک نییە کە بزانیت و ئەو شتانەی کە فێری دەبیت لە MDN بەڵگەدار کراون. بۆ Masonry JS lib، دەستپێکردن کەمێک ئاڵۆزە: پێویستی بە تایبەتمەندییەکی داتا هەیە کە ڕستەسازییەکی دیاریکراوی هەبێت، لەگەڵ توخمە شاراوەکانی HTML بۆ دانانی قەبارەی ستوون و بۆشایی. لەگەڵ ئەوەشدا، ئەگەر بتەوێت ستوونەکان ببڕیت، پێویستە خۆت قەبارەی بۆشاییەکە بخەیتە ناوەوە بۆ ئەوەی کێشە دروست نەبێت:
<ستایل> .قەبارەی تراکی، .بابەتی { پانی: 20%؛ } .قەبارەی کانیاو { پانایی: 1rem؛ } .بابەتی { بەرزی: 100px؛ کۆتایی-بلۆکی پەراوێز: 1rem; } .بابەت:nth-child(odd) { بەرزی: 200px؛ } .بابەت--پانی2 { پانایی: calc (40% + 1rem); }
با ئەمە بەراورد بکەین بەوەی کە جێبەجێکردنی ماسۆنی دروستکراو چۆن دەبێت: <ستایل> .دەفر { نمایش: تۆڕ-هێڵەکان؛ تۆڕ-هێڵەکان: دووبارەکردنەوە(4، 20%)؛ بۆشایی: 1rem؛ } .بابەتی { بەرزی: 100px؛ } .بابەت:nth-child(odd) { بەرزی: 200px؛ } .بابەت--پانی2 { تۆڕ-ستوونی: span 2؛ }
کۆدی سادەتر و بچووکتر کە دەتوانێت تەنها شتەکانی وەک gap بەکاربهێنێت و شوێنی spanning tracks بە span 2 ئەنجام دەدرێت، هەروەک لە grid دا، و پێویست ناکات پانایی دروست حیساب بکەیت کە قەبارەی gap لەخۆدەگرێت. چۆن بزانین چی بەردەستە و کەی بەردەستە؟ بە گشتی، پرسیارەکە لە ڕاستیدا ئەوە نییە کە ئایا پێویستە Masonry ی ناوەکی بەکاربهێنیت لەسەر کتێبخانەی JS، بەڵکو پرسیارەکە ئەوەیە کەی. کتێبخانەی Masonry JS سەرسوڕهێنەرە و ساڵانێکی زۆرە بۆشایییەک لە پلاتفۆرمی وێبدا پڕدەکاتەوە، و بۆ زۆرێک لە گەشەپێدەران و بەکارهێنەرانی دڵخۆش. چەند کەموکوڕییەکی هەیە ئەگەر بەراورد بکەیت بە جێبەجێکردنی ناوەکی ماسۆنی، بێگومان، بەڵام ئەوانە گرنگ نین ئەگەر ئەو جێبەجێکردنە ئامادە نەبێت. بۆ من ئاسانە ئەم تایبەتمەندییە نوێیە فێنکانەی وێب پلاتفۆرم بنووسم چونکە من لە فرۆشیارێکی وێبگەڕ کاردەکەم، و بۆیە مەیلی ئەوەم هەیە بزانم چی دێت. بەڵام زۆرجار گەشەپێدەران، ڕاپرسی لە دوای ڕاپرسی، هاوبەشی دەکەن کە بەدواداچوون بۆ شتە نوێیەکان قورسە. ئاگاداربوون قورسە، کۆمپانیاکان بە هەر شێوەیەک بێت هەمیشە فێربوون لە پێشینە نادەن. بۆ یارمەتیدان لەم کارەدا، لێرەدا چەند سەرچاوەیەک دەخەینەڕوو کە نوێکارییەکان بە شێوەیەکی سادە و بچووک دابین دەکەن بۆ ئەوەی بتوانیت بە خێرایی ئەو زانیاریانە بەدەست بهێنیت کە پێویستتە:
پلاتفۆرمی وێب تایبەتمەندیەکانی سایتی ئێکسپلۆرەر: لەوانەیە ئارەزووی لاپەڕەی تێبینییەکانی بڵاوکردنەوەیت هەبێت. وە، ئەگەر حەزت لە RSS ە، سەیری فیدی تێبینییەکانی بڵاوکردنەوە بکە، هەروەها فیدی بنەڕەتی تازە بەردەست و بە شێوەیەکی بەرفراوان بەردەست.
وێبداشبۆردەکەی دۆخی پلاتفۆرم: لەوانەیە لاپەڕە جۆراوجۆرەکانی ساڵی بنەڕەتیت بەدڵ بێت.
لاپەڕەی نەخشەڕێگای دۆخی پلاتفۆرمی کرۆم.
ئەگەر تۆزێک کاتت زیاتر بێت، لەوانەیە سەرنجت لەسەر تێبینییەکانی بڵاوکردنەوەی فرۆشیارانی وێبگەڕ هەبێت:
کرۆم ئێدج فایەرفۆکس سەفاری
بۆ زانینی سەرچاوەی زیاتر، سەیری فێڵەکانی Navigating the Web Platform بکە. هێشتا شتەکەم جێبەجێ نەکراوە ئەوە دیوەکەی تری کێشەکەیە. تەنانەت ئەگەر کات و وزە و ڕێگاکانی بەدواداچوون بدۆزیتەوە، هێشتا بێزاری هەیە لە بیستنی دەنگت و جێبەجێکردنی تایبەتمەندییە دڵخوازەکانت. لەوانەیە ساڵانێکە چاوەڕێی چارەسەرکردنی هەڵەیەکی دیاریکراو بیت، یان تایبەتمەندییەکی تایبەت کە لە وێبگەڕێکدا بنێردرێت کە هێشتا نەماوە. ئەوەی من دەیڵێم ئەوەیە کە فرۆشیارانی وێبگەڕ گوێ دەگرن. من بەشێکم لە چەندین تیمی ڕێکخستن کە بەردەوام باسی سیگناڵەکانی گەشەپێدەر و فیدباک دەکەین. ئێمە سەیری چەندین سەرچاوەی جیاوازی فیدباک دەکەین، چ ناوخۆیی لە هەر فرۆشیارێکی وێبگەڕ و چ دەرەکی/گشتی لە مەکۆکان، پڕۆژەکانی سەرچاوە کراوە، بلۆگەکان و ڕاپرسییەکان. و، ئێمە هەمیشە هەوڵدەدەین ڕێگەی باشتر دروست بکەین بۆ گەشەپێدەران بۆ ئەوەی پێداویستییە تایبەتەکانیان و حاڵەتەکانی بەکارهێنان هاوبەش بکەن. بۆیە، ئەگەر توانیت، تکایە داوای زیاتر لە فرۆشیارانی وێبگەڕ بکە و فشارمان بخەرە سەر بۆ جێبەجێکردنی ئەو تایبەتمەندیانەی کە پێویستتانە. من تێدەگەم کە کات دەوێت، و دەتوانێت ترسناکیش بێت (باسی بەربەستێکی بەرز بۆ چوونە ژوورەوە ناکەم)، بەڵام کاردەکات. لێرەدا چەند ڕێگەیەک دەخەینەڕوو کە دەتوانیت دەنگی خۆت (یان کۆمپانیاکەتان) ببیسترێت: ڕاپرسی ساڵانەی دۆخی JS، دۆخی CSS و دۆخی HTML ئەنجام بدە. ڕۆڵێکی گەورە دەگێڕن لەوەی کە چۆن فرۆشیارانی وێبگەڕەکان کارەکانیان لە پێشینەدا دابنێن. ئەگەر پێویستت بە APIیەکی تایبەتە لەسەر بنەمای ستاندارد کە بە بەردەوامی لە سەرانسەری وێبگەڕەکاندا جێبەجێ بکرێت، بیر لە پێشکەشکردنی پێشنیارێک بکەرەوە لە دووبارەکردنەوەی داهاتووی پڕۆژەی Interop. پێویستی بە کاتێکی زیاترە، بەڵام بیر لەوە بکەرەوە کە چۆن Shopify و RUMvision لیستی ئارەزووەکانیان بۆ Interop 2026 هاوبەش کردووە. زانیاری وردی وەک ئەم دەتوانێت زۆر بەسوود بێت بۆ فرۆشیارانی وێبگەڕ کە یەکەمایەتیان دابنێن. بۆ زانینی بەستەری بەسوودتر بۆ کاریگەریکردن لەسەر فرۆشیارانی وێبگەڕ، سەیری فێڵکردن لە گەشتکردن بە پلاتفۆرمی وێبدا بکە. دەرەنجام بۆ داخستنی، هیوادارم ئەم بابەتە چەند شتێکی بۆ بەجێهێشتبێت کە بیری لێبکەنەوە:
وروژاندن بۆ ماسۆنری و تایبەتمەندییەکانی تری وێبی داهاتوو. چەند تایبەتمەندییەکی وێب کە ڕەنگە بتەوێت دەست بکەیت بە بەکارهێنانی. چەند پارچەیەک لە کۆدی تایبەت یان لایەنی سێیەم کە ڕەنگە بتوانیت لە بەرژەوەندی تایبەتمەندییە بنیات نراوەکان لاببەیت. چەند ڕێگەیەک بۆ ئاگاداربوون لەوەی کە چی دێت و کاریگەری لەسەر فرۆشیارانی وێبگەڕ هەبێت.
لەوەش گرنگتر، هیوادارم قەناعەتتان پێکردبێت لە سوودەکانی بەکارهێنانی پلاتفۆرمی وێب بە تەواوی تواناکانی.
