လွန်ခဲ့သည့် 15 နှစ်ခန့်က ခရီးသွားအေးဂျင့်များ၊ လေဆိပ်ဝန်ထမ်းများနှင့် လေကြောင်းလိုင်းကုမ္ပဏီများအတွက် အက်ပ်များတည်ဆောက်သည့် ကုမ္ပဏီတစ်ခုတွင် ကျွန်တော်အလုပ်လုပ်နေပါသည်။ UI အစိတ်အပိုင်းများနှင့် စာမျက်နှာတစ်ခုတည်း အက်ပ်စွမ်းရည်များအတွက် ကျွန်ုပ်တို့၏ကိုယ်ပိုင်အိမ်တွင်းမူဘောင်ကိုလည်း တည်ဆောက်ခဲ့သည်။ ကျွန်ုပ်တို့တွင် အရာအားလုံးအတွက် အစိတ်အပိုင်းများ ရှိသည်- အကွက်များ၊ ခလုတ်များ၊ တက်ဘ်များ၊ အပိုင်းအခြားများ၊ ဒေတာဇယားများ၊ မီနူးများ၊ ရက်စွဲရွေးချယ်သူများ၊ ရွေးချယ်မှုများနှင့် ရွေးချယ်မှုများ အများအပြားရှိသည်။ ကျွန်ုပ်တို့တွင် div အစိတ်အပိုင်းတစ်ခုပင်ရှိခဲ့ပါသည်။ ကျွန်ုပ်တို့၏ div အစိတ်အပိုင်းသည် အလွန်ကောင်းမွန်သည်၊ ၎င်းသည် ကျွန်ုပ်တို့အား ဘရောက်ဆာများအားလုံးတွင် ထောင့်ဝိုင်းများပြုလုပ်နိုင်စေသည်၊ ၎င်းသည် ထိုအချိန်က လုပ်ဆောင်ရန်လွယ်ကူသည့်အရာမဟုတ်သည့်၊ ၎င်းသည် ယုံသည်ဖြစ်စေ မယုံသည်ဖြစ်စေ ၊
JS၊ Ajax နှင့် Dynamic HTML တို့ကို အနာဂတ်သို့ ယူဆောင်လာပေးသော တော်လှန်ရေးတစ်ခုအဖြစ် ကျွန်ုပ်တို့၏အလုပ်သည် ကျွန်ုပ်တို့၏သမိုင်းတွင် ဖြစ်ပျက်ခဲ့ပါသည်။ ရုတ်တရက်၊ ကျွန်ုပ်တို့သည် စာမျက်နှာတစ်ခုကို ဒိုင်းနမစ်ကျကျ အပ်ဒိတ်လုပ်နိုင်ပြီး ဆာဗာတစ်ခုမှ ဒေတာရယူကာ နှေးကွေးသည်ဟုမြင်ရပြီး စာမျက်နှာနှစ်ခုကြားရှိ စခရင်ပေါ်တွင် အဖြူရောင်စတုဂံကြီးတစ်ခုကို မီးထိုးပြထားသည့် အခြားစာမျက်နှာများသို့ သွားလာရန် ရှောင်ပါ။ Jeff Atwood (StackOverflow ကို တည်ထောင်သူ) မှ ရေပန်းစားသော စကားစုတစ်ခု ရှိသည် ။ “JavaScript ဖြင့်ရေးသားနိုင်သော မည်သည့် application ကိုမဆို နောက်ဆုံးတွင် JavaScript ဖြင့် ရေးသားပါမည်။”— Jeff Atwood
ထိုအချိန်က ကျွန်ုပ်တို့အတွက်၊ ၎င်းသည် အမှန်တကယ်သွားပြီး ထိုအက်ပ်များကို ဖန်တီးရန် သတ္တိရှိသွားသလို ခံစားရသည်။ JS နဲ့ အရာအားလုံးကို လုပ်ဆောင်ဖို့ စောင်တစ်ထည်ရဲ့ ခွင့်ပြုချက်လို ခံစားရတယ်။ ထို့ကြောင့် ကျွန်ုပ်တို့သည် JS နှင့် အရာအားလုံးကို ပြုလုပ်ခဲ့ပြီး၊ အခြားအရာများကို လုပ်ဆောင်ရန် နည်းလမ်းများကို ရှာဖွေရန် အချိန်မယူခဲ့ပါ။ HTML နှင့် CSS လုပ်နိုင်သည်များကို ကောင်းစွာလေ့လာရန် တွန်းအားကို ကျွန်ုပ်တို့ အမှန်တကယ် မခံစားရပါ။ ဝဘ်အား လုံးလုံးလျားလျား ပြောင်းလဲနေသော အက်ပ်ပလပ်ဖောင်းတစ်ခုအဖြစ် ကျွန်ုပ်တို့ အမှန်တကယ် မရိပ်မိပါ။ အထူးသဖြင့် ဘရောက်ဆာ ပံ့ပိုးမှုသို့ ရောက်လာသောအခါတွင် ၎င်းကို ကျွန်ုပ်တို့ လုပ်ဆောင်ရန် လိုအပ်သည့် အရာတစ်ခုအဖြစ် ကျွန်ုပ်တို့ အများအားဖြင့် မြင်ကြသည်။ အရာအားလုံးပြီးမြောက်အောင်လုပ်ဖို့ JS ကို များများထည့်လိုက်ရုံပါပဲ။ ဝဘ်အလုပ်လုပ်ပုံနှင့် ပလက်ဖောင်းပေါ်တွင်ရရှိနိုင်သောအရာများအကြောင်း ပိုမိုလေ့လာရန် အချိန်ယူရပါက ကျွန်ုပ်အား အထောက်အကူဖြစ်စေမည်လား။ ဟုတ်ပါတယ်၊ အမှန်တကယ် မလိုအပ်တဲ့ ကုဒ်ပေါင်းများစွာကို မုတ်ဆိတ်ရိတ်ပြီး ဖြစ်နိုင်ပါတယ်။ ဒါပေမယ့် အဲဒီအချိန်မှာ ဒီလောက်တော့ မဟုတ်ဘူး။ သင်မြင်ရသည်၊ ထိုအချိန်ကဘရောက်ဆာကွာခြားချက်များသည်တော်တော်လေးသိသာသည်။ ဤအချိန်သည် Internet Explorer သည် လွှမ်းမိုးမှုရှိသော browser ဖြစ်နေဆဲဖြစ်ပြီး Firefox သည် ဒုတိယအနီးကပ်ရှိသော်လည်း Chrome ရေပန်းစားလာမှုကြောင့် စျေးကွက်ဝေစု ဆုံးရှုံးစပြုလာသည်။ Chrome နှင့် Firefox တို့သည် ဝဘ်စံနှုန်းများအပေါ် သဘောတူညီရန် အတော်လေး ကောင်းမွန်သော်လည်း ကျွန်ုပ်တို့၏အက်ပ်များလည်ပတ်နေသည့် ပတ်ဝန်းကျင်များသည် ကျွန်ုပ်တို့ IE6 ကို အချိန်အကြာကြီး ပံ့ပိုးပေးရမည်ဟု ဆိုလိုပါသည်။ ကျွန်ုပ်တို့သည် IE8 ကို ပံ့ပိုးရန် ခွင့်ပြုထားသော်လည်း၊ ဘရောက်ဆာများကြားတွင် ကွဲပြားမှုများစွာကို ကျွန်ုပ်တို့ ရင်ဆိုင်ရသေးသည်။ ဒါတင်မကသေးဘဲ၊ အဲဒီအချိန်တုန်းက ဝဘ်ဟာ ပလက်ဖောင်းထဲကို မှန်ကန်စွာတည်ဆောက်ထားတဲ့ စွမ်းဆောင်နိုင်ရည်များစွာ မပါရှိခဲ့ပါဘူး။
ဒီနေ့ထိ မြန်မြန်လေး။ အရာတွေ သိသိသာသာ ပြောင်းလဲသွားပါပြီ။ ကျွန်ုပ်တို့တွင် ဤစွမ်းရည်များကို ယခင်ကထက် ပိုမိုရရှိလာရုံသာမက ၎င်းတို့ရရှိနိုင်သည့်နှုန်းမှာလည်း တိုးမြင့်လာပါသည်။ မေးခွန်းကို ထပ်မေးပါရစေ-၊ ဝဘ်အလုပ်လုပ်ပုံနှင့် ပလက်ဖောင်းပေါ်တွင် ရရှိနိုင်သည့်အရာများအကြောင်း ပိုမိုလေ့လာရန် အချိန်ယူပါက သင့်အား ယနေ့တွင် အထောက်အကူဖြစ်စေမည်လား။ လုံးဝ ဟုတ်တယ်။ ယနေ့ ဝဘ်ပလက်ဖောင်းကို နားလည်အသုံးပြုရန် သင်ယူခြင်းသည် သင့်အား အခြား developer များထက် ကြီးမားသော အားသာချက်တစ်ခု ဖြစ်စေပါသည်။ စွမ်းဆောင်ရည်၊ သုံးစွဲနိုင်မှု၊ တုံ့ပြန်နိုင်စွမ်း၊ ၎င်းတို့အားလုံးကို အတူတကွလုပ်ဆောင်သည်ဖြစ်စေ သို့မဟုတ် UI ဝန်ဆောင်မှုများကို ပို့ဆောင်ရုံမျှဖြင့်ဖြစ်စေ သင်သည် တာဝန်သိအင်ဂျင်နီယာတစ်ဦးအနေဖြင့် လုပ်ဆောင်လိုပါက ၎င်းကို သင်ရရှိနိုင်သည့်ကိရိယာများကို သိရှိခြင်းဖြင့် သင့်ပန်းတိုင်များကို ပိုမိုမြန်ဆန်စွာရောက်ရှိစေရန် ကူညီပေးသည်။ စာကြည့်တိုက်အတွက် သင် မလိုအပ်တော့သော အချို့အရာများ ယနေ့ခေတ် ဘရောက်ဆာများက မည်သည်တို့ကို ပံ့ပိုးပေးသည်ကို သိထားရန်၊ ထိုမေးခွန်းမှာ၊ ကျွန်ုပ်တို့ အဘယ်အရာကို စွန့်ပယ်နိုင်မည်နည်း။ 2025 တွင် လုံးဝန်းသောထောင့်များပြုလုပ်ရန် div အစိတ်အပိုင်းတစ်ခု လိုအပ်ပါသလား။ ဟုတ်ပါတယ်၊ ငါတို့မလုပ်ဘူး။ နယ်စပ်-အချင်းဝက် ပိုင်ဆိုင်မှုကို လက်ရှိအသုံးပြုနေသည့် ဘရောက်ဆာများအားလုံးက ဤအချက်တွင် 15 နှစ်ကျော်ကြာ ပံ့ပိုးပေးထားသည်။ ပိုမိုလှပသောထောင့်များအတွက် ထောင့်ပုံသဏ္ဍာန်သည်လည်း မကြာမီလာပါသည်။ အဓိကဘရောက်ဆာအားလုံးတွင် ယခုရရှိနိုင်သည့် မကြာသေးမီက အင်္ဂါရပ်များကို ကြည့်ကြပါစို့၊ နှင့် သင့်ကုဒ်ဘေ့စ်ရှိ ရှိပြီးသားမှီခိုမှုများကို အစားထိုးရန် သင်အသုံးပြုနိုင်သည့်အရာများကို ကြည့်ကြပါစို့။ အဓိကအချက်မှာ သင်၏ချစ်လှစွာသောစာကြည့်တိုက်များအားလုံးကို ချက်ချင်းစွန့်ပစ်ပြီး သင့်ကုဒ်ဘေ့စ်ကို ပြန်လည်ရေးသားရန် မဟုတ်ပါ။ အခြားအရာအားလုံးအတွက်၊ သင်သည် ဘရောက်ဆာပံ့ပိုးမှုကို ဦးစွာထည့်သွင်းစဉ်းစားပြီး သင့်ပရောဂျက်အတွက် သီးခြားအချက်များအပေါ် အခြေခံ၍ ဆုံးဖြတ်ရမည်ဖြစ်သည်။ အောက်ပါအင်္ဂါရပ်များကို ပင်မဘရောက်ဆာအင်ဂျင်သုံးမျိုး (Chromium၊ WebKit နှင့် Gecko) တွင် အကောင်အထည်ဖော်ထားသော်လည်း ၎င်းတို့ကိုချက်ချင်းအသုံးပြုခြင်းမှ သင့်ကိုတားဆီးနိုင်သည့် မတူညီသောဘရောက်ဆာပံ့ပိုးမှုလိုအပ်ချက်များ သင့်တွင်ရှိနိုင်ပါသည်။ ယခုအချိန်သည် ဤအင်္ဂါရပ်များအကြောင်း လေ့လာရန် အချိန်ကောင်းဖြစ်သေးသော်လည်း၊ ၎င်းတို့ကို တစ်ချိန်ချိန်တွင် အသုံးပြုရန် စီစဉ်နေသေးသည်။ Popovers နှင့် Dialogs Popover API၊
ဟုတ်ပါတယ်၊ သင့်အင်တာနက်ချိတ်ဆက်မှုအမြန်နှုန်းလည်း တိုးလာနိုင်ပါတယ်၊ ဒါပေမယ့် လူတိုင်းအတွက်တော့ မဖြစ်ပါဘူး။ လူတိုင်းမှာ တူညီတဲ့ စက်ပစ္စည်းစွမ်းရည်တွေ ရှိမနေပါဘူး။ ပလက်ဖောင်းနှင့် သင်လုပ်ဆောင်နိုင်သည့်အရာများအတွက် ပြင်ပကုဒ်ကို ဆွဲယူခြင်းအစား၊ အများစုမှာ ကုဒ်ပိုပို့ခြင်းကို ဆိုလိုပြီး ထို့ကြောင့် သင်ပုံမှန်ထက် ဖောက်သည်များထံ နည်းပါးလာခြင်းဖြစ်သည်။ ဝဘ်ပေါ်တွင်၊ ဆိုးရွားသော loading စွမ်းဆောင်ရည်သည် ကြီးမားသော စွန့်ပစ်မှုနှုန်းကို ဖြစ်ပေါ်စေပြီး အမှတ်တံဆိပ်ဂုဏ်သတင်းကို ထိခိုက်စေပါသည်။ စက်ပစ္စည်းများတွင် ကုဒ်ကို လျှော့သုံးခြင်း။ ထို့အပြင်၊ သင့်ဖောက်သည်များ၏ စက်များတွင် သင်ပေးပို့သော ကုဒ်သည် ပလပ်ဖောင်း၏ထိပ်တွင် JavaScript abstractions နည်းပါးလာပါက ၎င်းသည် ပိုမိုမြန်ဆန်စွာ လုပ်ဆောင်နိုင်မည်ဖြစ်သည်။ ၎င်းသည် မူရင်းအတိုင်း ပိုမိုတုံ့ပြန်နိုင်ပြီး ပိုမိုအသုံးပြုနိုင်ဖွယ်ရှိသည်။ ဒါတွေအားလုံးက ဖောက်သည်တွေ ပိုပိုပြီး ပျော်ရွှင်လာစေပါတယ်။ ကျွန်ုပ်၏လုပ်ဖော်ကိုင်ဖက် Alex Russell ၏နှစ်စဉ်စွမ်းဆောင်ရည်မညီမျှမှုကွာဟချက်ဘလော့ဂ်ကိုစစ်ဆေးပါ၊ ကြွယ်ဝမှုမညီမျှမှုကြောင့် သုံးစွဲသူသန်းပေါင်းများစွာရှိသော ပရီမီယံစက်ပစ္စည်းများသည် စျေးကွက်များတွင်များစွာမရှိဖြစ်နေကြောင်းပြသသည်။ ပြီးတော့ ဒီကွာဟချက်က အချိန်ကြာလာတာနဲ့အမျှ ကြီးထွားလာပါတယ်။
Built-in ပန်းရံအပြင်အဆင် မကြာမီလာမည့် ဝဘ်ပလက်ဖောင်း အင်္ဂါရပ်တစ်ခုမှာ CSS Masonry ဖြစ်သည်။
ပန်းရံဆိုတာ ဘာလဲဆိုတာကို ရှင်းပြပါရစေ။ ပန်းရံဆိုတာဘာလဲ ပန်းရံသည် လွန်ခဲ့သည့်နှစ်များက Pinterest မှ လူကြိုက်များခဲ့သော လက်ကွက်အမျိုးအစားတစ်ခုဖြစ်သည်။ ၎င်းသည် ပုဒ်မ၏အစနှင့် နီးသလောက် ပစ္စည်းများ ထုပ်ပိုးထားသော အမှီအခိုကင်းသော အကြောင်းအရာကို ဖန်တီးပေးပါသည်။
လူအတော်များများက ပန်းရံလုပ်ခြင်းကို သေချာပေါက်လုပ်ဆောင်နိုင်သည့် အစုရှယ်ယာများနှင့် ဓာတ်ပုံပြခန်းများအတွက် အကောင်းဆုံးရွေးချယ်မှုအဖြစ် မြင်ကြသည်။ သို့သော် ပန်းရံသည် Pinterest တွင်သင်တွေ့မြင်ရသည့်အရာထက် ပို၍ လိုက်လျောညီထွေရှိပြီး ၎င်းသည် ရေတံခွန်ကဲ့သို့သော အပြင်အဆင်များသာ အကန့်အသတ်မရှိပေ။ ပန်းရံအပြင်အဆင်တွင်-
သီချင်းများသည် ကော်လံများ သို့မဟုတ် အတန်းများ ဖြစ်နိုင်သည်-
အကြောင်းအရာ ပုဒ်ရေအားလုံးသည် အရွယ်အစား တူညီရန် မလိုအပ်ပါ။
အကြောင်းအရာများသည် သီချင်းများစွာကို ချဲ့ထွင်နိုင်သည်-
ပစ္စည်းများကို သီးခြားလမ်းကြောင်းပေါ်တွင် ထားရှိနိုင်ပါသည်။ ၎င်းတို့သည် အလိုအလျောက်နေရာချထားမှု algorithm ကို အမြဲတမ်းလိုက်နာရန် မလိုအပ်ပါ။
ဒီမို ဤသည်မှာ Chromium ရှိ CSS Masonry ကိုအသုံးပြုခြင်းဖြင့် ကျွန်ုပ်ပြုလုပ်ခဲ့သော ရိုးရှင်းသောသရုပ်ပြအချို့ဖြစ်သည်။ အရာများ (ဤကိစ္စတွင် ခေါင်းစဉ်) သည် တေးသွားများစွာကို မည်ကဲ့သို့ ချဲ့ထွင်နိုင်ပုံကို ပြသသည့် ဓာတ်ပုံပြခန်းသရုပ်ပြပုံ-
အရွယ်အစားအမျိုးမျိုးရှိ ခြေရာခံများကို ပြသသည့် အခြားဓာတ်ပုံပြခန်း-
အချို့သော ပုဒ်များထက် ပိုကျယ်သော သတင်းဆိုဒ် အပြင်အဆင် နှင့် အချို့သော အရာများသည် အပြင်အဆင် တစ်ခုလုံး၏ အကျယ်ကို လွှမ်းခြုံထားသည်-
ပစ္စည်းများကို သီးခြားလမ်းကြောင်းများတွင် ထားရှိနိုင်ကြောင်း ပြသသည့် kanban board
မှတ်ချက်ဝဘ်အသုံးပြုသူအများစုအတွက် မရရှိနိုင်သေးသော Chromium ဗားရှင်းဖြင့် ယခင်သရုပ်ပြမှုများကို ပြုလုပ်ထားသောကြောင့် CSS Masonry သည် ဘရောက်ဆာများတွင် စတင်အကောင်ထည်ဖော်ရန်သာရှိသေးသောကြောင့်ဖြစ်သည်။ သို့သော်၊ ဝဘ် developer များသည် Masonry အပြင်အဆင်များကိုဖန်တီးရန် စာကြည့်တိုက်များကို ပျော်ရွှင်စွာအသုံးပြုနေသည်မှာ နှစ်အတော်ကြာပြီဖြစ်သည်။ ယနေ့ခေတ်တွင် ပန်းရံအသုံးပြုသည့်နေရာများ အမှန်ပင်၊ ယနေ့ခေတ်တွင် ပန်းရံလုပ်ငန်းသည် ဝဘ်ပေါ်တွင် အတော်လေး အသုံးများသည်။ Pinterest မှလွဲ၍ ကျွန်ုပ်တွေ့ရှိသော ဥပမာအချို့မှာ
အချို့သော၊ သိပ်မသိသာသော ဥပမာများ၊
ဒါဆို ဒီလက်ကွက်တွေကို ဘယ်လိုဖန်တီးခဲ့တာလဲ။ ဖြေရှင်းနည်းများ ကျွန်တော်သုံးဖူးတဲ့ လှည့်ကွက်တစ်ခုကတော့ အဲဒီအစား Flexbox အပြင်အဆင်ကို အသုံးပြုပြီး၊ သူ့ရဲ့ ဦးတည်ချက်ကို ကော်လံအဖြစ် ပြောင်းပြီး ခြုံဖို့ သတ်မှတ်ခြင်း ဖြစ်ပါတယ်။ ဤနည်းအားဖြင့် သင်သည် ပန်းရံအပြင်အဆင်ကို အထင်ကြီးစေရန်၊ သီးခြားလွတ်လပ်သောကော်လံမျိုးစုံတွင် မတူညီသောအမြင့်များကို ထားရှိနိုင်သည်-
သို့သော် ဤဖြေရှင်းနည်းတွင် ကန့်သတ်ချက်နှစ်ခုရှိသည်။
ပစ္စည်းအစီအစဥ်သည် တကယ့် ပန်းရံအပြင်အဆင်နှင့် ကွဲပြားသည်။ Flexbox ဖြင့်၊ အရာများသည် ပထမကော်လံကို ဦးစွာဖြည့်ပြီး၊ ပြည့်သွားပါက နောက်ကော်လံသို့ သွားပါ။ ပန်းရံဖြင့်၊ မည်သည့်လမ်းကြောင်း (သို့မဟုတ် ဤကိစ္စတွင်ရှိ) ကော်လံတွင် နေရာလွတ်ပိုရနိုင်သည်ဖြစ်စေ ပစ္စည်းများစုပုံထားသည်။ ဒါပေမယ့်လည်း၊ ပိုအရေးကြီးတာက၊ ဒီဖြေရှင်းနည်းက Flexbox container အတွက် သတ်မှတ်ထားတဲ့ အမြင့်ကို သတ်မှတ်ဖို့ လိုအပ်တယ်။ မဟုတ်ရင် ထုပ်ပိုးမှု ဖြစ်ပေါ်လာမှာ မဟုတ်ပါဘူး။
ပြင်ပပန်းရံစာကြည့်တိုက်များ ပိုမိုအဆင့်မြင့်သော ကိစ္စများအတွက်၊ developer များသည် စာကြည့်တိုက်များကို အသုံးပြုနေပါသည်။ ဤအတွက် အကျော်ကြားဆုံးနှင့် လူကြိုက်အများဆုံး စာကြည့်တိုက်ကို Masonry ဟုခေါ်ပြီး NPM အရ တစ်ပတ်လျှင် အကြိမ် 200,000 ခန့် ဒေါင်းလုဒ်လုပ်သည်။ Squarespace သည် ကုဒ်မရှိသော အခြားရွေးချယ်စရာတစ်ခုအတွက် ပန်းရံအပြင်အဆင်ကို ပုံဖော်ပေးသည့် အပြင်အဆင်အစိတ်အပိုင်းတစ်ခုကိုလည်း ပံ့ပိုးပေးပြီး ဆိုက်များစွာက ၎င်းကို အသုံးပြုပါသည်။ ဤရွေးချယ်မှုနှစ်ခုစလုံးသည် အဆင်အပြင်တွင် အရာများထားရှိရန် JavaScript ကုဒ်ကို အသုံးပြုသည်။ တပ်ဆင်ပြီး ပန်းရံ ယခု Masonry သည် built-in CSS အင်္ဂါရပ်အဖြစ်ဘရောက်ဆာများတွင်စတင်ပေါ်လာသည့်အတွက်ကျွန်ုပ်တကယ်စိတ်လှုပ်ရှားမိပါသည်။ အချိန်ကြာလာသည်နှင့်အမျှ သင်သည် သင် Grid သို့မဟုတ် Flexbox ကဲ့သို့ Masonry ကို မည်သည့်ဖြေရှင်းချက်မှ မလိုအပ်ဘဲ ပြင်ပကုဒ်ကို အသုံးပြုနိုင်သည်။ Microsoft ရှိ ကျွန်ုပ်၏အဖွဲ့သည် Edge၊ Chrome နှင့် အခြားဘရောက်ဆာများစွာကို အခြေခံထားသည့် Chromium ပွင့်လင်းအရင်းအမြစ်ပရောဂျက်တွင် built-in Masonry ပံ့ပိုးမှုကို အကောင်အထည်ဖော်နေပါသည်။ Mozilla သည် 2020 ခုနှစ်တွင် Masonry ကို စမ်းသပ်အကောင်အထည်ဖော်ရန် အဆိုပြုခဲ့သည့် ပထမဆုံးဘရောက်ဆာရောင်းချသူဖြစ်သည်။ Apple သည် ဤဝဘ်အပြင်အဆင်အသစ်ကို မူလအတိုင်းဖြစ်မြောက်အောင်ပြုလုပ်ရန် အလွန်စိတ်ဝင်စားခဲ့သည်။ အင်္ဂါရပ်ကို စံသတ်မှတ်ရန် အလုပ်သည် ယေဘုယျ ဦးတည်ချက်အကြောင်း CSS အလုပ်အဖွဲ့အတွင်း သဘောတူညီချက်နှင့် ပြသမှုအမျိုးအစားပြသမှု- grid-lanes တို့ကိုပင် သဘောတူညီချက်ဖြင့် ရှေ့သို့ ဆက်လက်လုပ်ဆောင်နေသည်။ ပန်းရံအကြောင်းပိုမိုလေ့လာပြီး တိုးတက်မှုကိုခြေရာခံလိုပါက ကျွန်ုပ်၏ CSS Masonry အရင်းအမြစ်များစာမျက်နှာကို ကြည့်ရှုပါ။ အချိန်တန်သော်၊ Masonry သည် Grid သို့မဟုတ် Flexbox ကဲ့သို့ Baseline အင်္ဂါရပ်ဖြစ်လာသောအခါ၊ ကျွန်ုပ်တို့သည် ၎င်းကိုရိုးရှင်းစွာအသုံးပြုနိုင်ပြီး အကျိုးကျေးဇူးများရရှိနိုင်ပါမည်-
စွမ်းဆောင်ရည်ပိုကောင်း၊ တုံ့ပြန်မှု ပိုမိုကောင်းမွန်ခြင်း၊ အသုံးပြုရလွယ်ကူပြီး ရိုးရှင်းသောကုဒ်။
ဒါတွေကို အနီးကပ်လေ့လာကြည့်ရအောင်။ Performance ပိုကောင်းတယ်။ သင့်ကိုယ်ပိုင် ပန်းရံပုံစံ အပြင်အဆင်စနစ် ပြုလုပ်ခြင်း သို့မဟုတ် ပြင်ပမှ စာကြည့်တိုက်ကို အသုံးပြုခြင်းသည် ဖန်သားပြင်ပေါ်တွင် အရာများထားရှိရန် JavaScript ကုဒ်ကို လုပ်ဆောင်ရမည်ဟု ဆိုလိုသည်။ ဒါကလည်း ဒီကုဒ်ကို render blocking လုပ်မယ်လို့ ဆိုလိုပါတယ်။ အမှန်မှာ၊ JavaScript ကုဒ်မပြီးမချင်း မည်သည့်အရာမျှ ပေါ်လာမည်မဟုတ်ပါ၊ သို့မဟုတ် မှန်ကန်သောနေရာများတွင် သို့မဟုတ် မှန်ကန်သောအရွယ်အစားရှိအရာများ ရှိမည်မဟုတ်ပါ။ ပန်းရံအပြင်အဆင်ကို ဝဘ်စာမျက်နှာတစ်ခု၏ အဓိကအစိတ်အပိုင်းအတွက် မကြာခဏအသုံးပြုလေ့ရှိသည်၊ ဆိုလိုသည်မှာ ကုဒ်သည် သင့်၏ပင်မအကြောင်းအရာကို ၎င်းတွင်ရှိနိုင်သည်ထက် နောက်မကျစေဘဲ၊ သင်၏ LCP သို့မဟုတ် စွမ်းဆောင်ရည်နှင့် ရှာဖွေမှုအင်ဂျင်ကို ပိုမိုကောင်းမွန်အောင်လုပ်ဆောင်ခြင်းတွင် ကြီးမားသောအခန်းကဏ္ဍမှပါဝင်နေသည့် ကုဒ်ကို နှောင့်နှေးစေသည်။ DevTools တွင် 4G နှေးကွေးသော 4G ချိတ်ဆက်မှုကို ပုံဖော်ခြင်းဖြင့် Masonry JS စာကြည့်တိုက်ကို ရိုးရှင်းသော အပြင်အဆင်ဖြင့် စမ်းသပ်ခဲ့သည်။ စာကြည့်တိုက်သည် အလွန်ကြီးမားသည်မဟုတ် (24KB၊ 7.8KB gzipped)၊ သို့သော် ကျွန်ုပ်၏စမ်းသပ်မှုအခြေအနေအောက်တွင် တင်ရန် 600ms ကြာသည်။ ဤသည်မှာ ပန်းရံစာကြည့်တိုက်အတွက် 600ms ရှည်လျားသော load time ကိုပြသသည့် စွမ်းဆောင်ရည်မှတ်တမ်းဖြစ်ပြီး ၎င်းဖြစ်ပျက်နေချိန်တွင် အခြားသော rendering လုပ်ဆောင်မှုမျိုး မဖြစ်ပေါ်ခဲ့ပါ။
ထို့အပြင်၊ ကနဦးစတင်ချိန်ပြီးနောက်၊ ဒေါင်းလုဒ်လုပ်ထားသော script ကို ခွဲခြမ်းစိတ်ဖြာရန်၊ စုစည်းပြီး လုပ်ဆောင်ရန် လိုအပ်ပါသည်။ ယခင်က ဖော်ပြခဲ့သည့်အတိုင်း စာမျက်နှာ၏ တင်ဆက်မှုကို ပိတ်ပင်ထားသည်။ ဘရောက်ဆာတွင် တပ်ဆင်ထားသည့် ပန်းရံအသုံးပြုမှုဖြင့်၊ ကျွန်ုပ်တို့တွင် တင်၍လည်ပတ်ရန် ဇာတ်ညွှန်းတစ်ခု ရှိလာမည်မဟုတ်ပါ။ ဘရောက်ဆာအင်ဂျင်သည် ကနဦးစာမျက်နှာ တင်ဆက်ခြင်းအဆင့်တွင် ၎င်းကို လုပ်ဆောင်မည်ဖြစ်သည်။ တုံ့ပြန်မှု ပိုကောင်းတယ်။ စာမျက်နှာတစ်ခု ပထမဆုံးစတင်သောအခါနှင့် ဆင်တူသည်၊ ဘရောက်ဆာဝင်းဒိုးကို အရွယ်အစားပြောင်းခြင်းဖြင့် ထိုစာမျက်နှာရှိ အဆင်အပြင်ကို ထပ်မံ၍ ပုံဖော်ပေးနိုင်သည်။ ဤအချိန်တွင်၊ စာမျက်နှာသည် Masonry JS စာကြည့်တိုက်ကိုအသုံးပြုနေပါက၊ ၎င်းသည်ပြီးသားဖြစ်သောကြောင့်၊ ဇာတ်ညွှန်းကိုထပ်မံတင်ရန်မလိုအပ်ပါ။ဒီမှာ။ သို့သော်၊ မှန်ကန်သောနေရာများတွင် ပစ္စည်းများရွှေ့သည့်ကုဒ်သည် အလုပ်လုပ်ရန် လိုအပ်သည်။ ယခု စာမျက်နှာဖွင့်သည့်အခါ ဤအထူးစာကြည့်တိုက်သည် ၎င်းကိုလုပ်ဆောင်ရာတွင် အလွန်လျင်မြန်ပုံရသည်။ သို့သော်လည်း၊ ၎င်းတို့သည် ဝင်းဒိုးအရွယ်အစားကို ပြောင်းလဲရန်အတွက် အခြားနေရာတစ်ခုသို့ ရွှေ့ရန် လိုအပ်သည့်အခါ ၎င်းအရာများကို လှုပ်ရှားစေပြီး ၎င်းသည် ကြီးမားသော ခြားနားချက်ဖြစ်စေသည်။ ဟုတ်ပါတယ်၊ အသုံးပြုသူများသည် ကျွန်ုပ်တို့ developer များကဲ့သို့ ၎င်းတို့၏ browser windows များကို အရွယ်အစားပြောင်းလဲရန် အချိန်ဖြုန်းခြင်းမရှိပါ။ သို့သော် ဤကာတွန်းအရွယ်အစားကို ပြောင်းလဲခြင်းအတွေ့အကြုံသည် အလွန်ရှုပ်ထွေးနိုင်ပြီး စာမျက်နှာ၏အရွယ်အစားအသစ်နှင့် လိုက်လျောညီထွေဖြစ်အောင် ပြုလုပ်ရန် လိုအပ်သည့်အချိန်ကို တိုးပေးသည်။ အသုံးပြုရလွယ်ကူပြီး ရိုးရှင်းသောကုဒ် ဝဘ်အင်္ဂါရပ်ကို အသုံးပြုရန် မည်မျှ လွယ်ကူကြောင်းနှင့် ကုဒ်ပုံသဏ္ဍာန် ရိုးရှင်းပုံသည် သင့်အဖွဲ့အတွက် ကြီးမားသော ခြားနားချက်ဖြစ်စေနိုင်သည့် အရေးကြီးသောအချက်များဖြစ်သည်။ ၎င်းတို့သည် နောက်ဆုံးအသုံးပြုသူအတွေ့အကြုံကဲ့သို့ အရေးမကြီးနိုင်သော်လည်း ဆော့ဖ်ဝဲအင်ဂျင်နီယာအတွေ့အကြုံသည် ထိန်းသိမ်းနိုင်စွမ်းအပေါ် သက်ရောက်မှုရှိသည်။ Built-in ဝဘ်အင်္ဂါရပ်ကို အသုံးပြုခြင်းသည် ထိုရှေ့မျက်နှာစာတွင် အရေးကြီးသော အကျိုးကျေးဇူးများ ရရှိသည်-
HTML၊ CSS နှင့် JS တို့ကို သိပြီးသော developer များသည် ၎င်းကို ကောင်းစွာပေါင်းစပ်ပြီး ကျန်ဝဘ်ပလက်ဖောင်းများနှင့် ကိုက်ညီစေရန် ဒီဇိုင်းထုတ်ထားသောကြောင့် ၎င်းကို အလွယ်တကူ အသုံးပြုနိုင်မည်ဖြစ်သည်။ အင်္ဂါရပ်ကိုအသုံးပြုပုံတွင် အပြောင်းအလဲများကို ချိုးဖောက်နိုင်ခြေ မရှိပါ။ အဆိုပါအင်္ဂါရပ်ကို ရပ်ဆိုင်းထားခြင်း သို့မဟုတ် မထိန်းသိမ်းထားဘဲ ဖြစ်လာနိုင်ခြေ လုံးဝနီးပါးမရှိပါ။
Built-in Masonry တွင်၊ ၎င်းသည် မူလပုံစံဖြစ်သောကြောင့်၊ သင်သည် Grid သို့မဟုတ် Flexbox ကဲ့သို့ CSS မှ ၎င်းကိုအသုံးပြုသည်၊ JS တွင်မပါဝင်ပါ။ ထို့အပြင်၊ gap ကဲ့သို့သော အခြားသော အပြင်အဆင်ဆိုင်ရာ CSS ဂုဏ်သတ္တိများသည် ၎င်းတို့ကို သင်မျှော်လင့်ထားသည့်အတိုင်း လုပ်ဆောင်သည်။ သိရန် လှည့်ကွက်များ သို့မဟုတ် ဖြေရှင်းနည်းများ မရှိပါ၊ သင်လေ့လာခဲ့သည့်အရာများကို MDN တွင် မှတ်တမ်းတင်ထားပါသည်။ Masonry JS lib အတွက်၊ အစပြုခြင်းမှာ အနည်းငယ် ရှုပ်ထွေးသည်- ၎င်းသည် ကော်လံနှင့် ကွာဟမှု အရွယ်အစားများကို သတ်မှတ်ရန် လျှို့ဝှက်ထားသော HTML ဒြပ်စင်များနှင့်အတူ တိကျသော အထားအသိုတစ်ခုနှင့်အတူ ဒေတာ attribute တစ်ခု လိုအပ်ပါသည်။ ထို့အပြင်၊ သင်သည် ကော်လံများကို ချဲ့လိုပါက၊ ပြဿနာများကိုရှောင်ရှားရန် သင်ကိုယ်တိုင် ကွာဟချက်အရွယ်အစားကို ထည့်သွင်းရန်လိုအပ်သည်-
၎င်းကို ထည့်သွင်းထားသော ပန်းရံအသုံးပြုမှုပုံစံနှင့် နှိုင်းယှဉ်ကြည့်ကြပါစို့။
gap နှင့် grid ကဲ့သို့ span 2 ကဲ့သို့ အရာများကိုသာ အသုံးပြုနိုင်ပြီး ကွာဟချက်အရွယ်အစားပါဝင်သည့် မှန်ကန်သော width ကို တွက်ချက်ရန် မလိုအပ်ဘဲ ရိုးရှင်းသော၊ ပိုမိုကျစ်လစ်သောကုဒ်။ ဘယ်အချိန်မှာ ရနိုင်သလဲ ဆိုတာကို ဘယ်လိုသိနိုင်မလဲ။ ယေဘုယျအားဖြင့်၊ သင်သည် JS စာကြည့်တိုက်တစ်ခုတွင် built-in Masonry ကိုအသုံးပြုသင့်သည်မဟုတ်၊ သို့သော်မည်သည့်အချိန်တွင်မှမေးခွန်းထုတ်မည်မဟုတ်ပါ။ Masonry JS စာကြည့်တိုက်သည် အံ့သြဖွယ်ကောင်းပြီး ဝဘ်ပလက်ဖောင်းတွင် နှစ်ပေါင်းများစွာ ကွာဟချက်တစ်ခုကို ဖြည့်ဆည်းပေးခဲ့ပြီး ပျော်ရွှင်သော developer များနှင့် သုံးစွဲသူများစွာအတွက် ဖြစ်သည်။ ၎င်းကို built-in ပန်းရံအသုံးပြုမှုနှင့် နှိုင်းယှဉ်ပါက ၎င်းတွင် အားနည်းချက်အနည်းငယ်ရှိပါသည်၊ သို့သော် အဆိုပါအကောင်အထည်ဖော်မှုအဆင်သင့်မဖြစ်ပါက ၎င်းတို့သည် အရေးမကြီးပါ။ ကျွန်ုပ်သည် ဘရောက်ဆာရောင်းချသူတွင် အလုပ်လုပ်သောကြောင့် ဤအေးမြသောဝဘ်ပလပ်ဖောင်းအင်္ဂါရပ်များကို စာရင်းပြုစုရန် ကျွန်ုပ်အတွက် လွယ်ကူသည်၊ ထို့ကြောင့် ကျွန်ုပ်သည် အဘယ်အရာဖြစ်လာမည်ကို သိတတ်သည်။ သို့သော် developer များသည် အသစ်သောအရာများကို ခြေရာခံရန် ခက်ခဲကြောင်း စစ်တမ်းပြီးနောက် မကြာခဏ မျှဝေလေ့ရှိသည်။ အကြောင်းကြားနေဖို့က ခက်ခဲပါတယ်၊ ကုမ္ပဏီတွေက သင်ယူမှုကို အမြဲတမ်း ဦးစားပေးမလုပ်ပါဘူး။ ၎င်းကိုကူညီရန်၊ ဤအရာများသည် သင်လိုအပ်သောအချက်အလက်များကို လျင်မြန်စွာရနိုင်စေရန် ရိုးရှင်းပြီး ကျစ်ကျစ်လျစ်လျစ်သောနည်းလမ်းများဖြင့် အပ်ဒိတ်များကို ပံ့ပိုးပေးသည့် အရင်းအမြစ်အချို့ဖြစ်သည်။
ဝဘ်ပလက်ဖောင်းတွင် ရှာဖွေသူဆိုက်ကို ပါရှိသည်။ ၎င်း၏ထုတ်ဝေမှုမှတ်စုများစာမျက်နှာကို သင်စိတ်ဝင်စားပေမည်။ RSS ကို သင်နှစ်သက်ပါက၊ ထွက်ရှိနိုင်သောမှတ်စုများဖိဒ်အပြင် အခြေခံအသစ်ရနိုင်သောအသစ်နှင့် ကျယ်ပြန့်စွာရနိုင်သော feeds များကို စစ်ဆေးကြည့်ပါ။
ဝဘ်ပလပ်ဖောင်းအခြေအနေ ဒက်ရှ်ဘုတ်- ၎င်း၏ အမျိုးမျိုးသော အခြေခံနှစ်စာမျက်နှာများကို သင်နှစ်သက်နိုင်သည်။
Chrome Platform Status ၏ လမ်းပြမြေပုံ စာမျက်နှာ။
သင့်တွင် အချိန်အနည်းငယ်ပိုရပါက၊ ဘရောက်ဆာရောင်းချသူများ၏ ထုတ်ပြန်ချက်မှတ်စုများကို သင်စိတ်ဝင်စားနိုင်သည်-
ရုန်းတယ်။ အစွန်း Firefox ဆာဖာရီ
နောက်ထပ်အရင်းအမြစ်များအတွက်၊ ကျွန်ုပ်၏ ဝဘ်ပလပ်ဖောင်းပေါ်တွင် သွားလာခြင်း Cheatsheet ကိုကြည့်ပါ။ ငါ့အမှုသည် အကောင်အထည်မပေါ်သေး အဲဒါက ပြဿနာရဲ့ တစ်ဖက်ပါ။ အချိန်၊ စွမ်းအင်နှင့် ခြေရာခံရန် နည်းလမ်းများကို ရှာဖွေနေသော်လည်း၊ သင့်အသံနှင့် သင့်စိတ်ကြိုက်အင်္ဂါရပ်များကို အကောင်အထည်ဖော်ရာတွင် စိတ်ပျက်စရာများ ရှိပါသေးသည်။ သီးခြား bug တစ်ခုကို ဖြေရှင်းရန်၊ သို့မဟုတ် ပျောက်နေသေးသည့် ဘရောက်ဆာတစ်ခုသို့ ပို့ဆောင်ရန် သီးခြားအင်္ဂါရပ်တစ်ခုကို သင် နှစ်ပေါင်းများစွာ စောင့်ဆိုင်းနေပေမည်။ ငါပြောမယ့်အရာက ဘရောက်ဆာရောင်းချသူတွေ နားထောင်တယ်။ ကျွန်ုပ်သည် ဆော့ဖ်ဝဲအင်ဂျင်နီယာ အချက်ပြမှုများနှင့် အကြံပြုချက်များကို အချိန်တိုင်း ဆွေးနွေးပေးသည့် အဖွဲ့အစည်းပေါင်းစုံမှ အဖွဲ့များစွာ၏ တစ်စိတ်တစ်ပိုင်းဖြစ်သည်။ ကျွန်ုပ်တို့သည် ဘရောက်ဆာရောင်းချသူတိုင်းနှင့် ဖိုရမ်များ၊ ပွင့်လင်းရင်းမြစ်ပရောဂျက်များ၊ ဘလော့ဂ်များနှင့် စစ်တမ်းများတွင် ပြင်ပ/အများပြည်သူဆိုင်ရာ နှစ်ခုလုံးတွင် ကွဲပြားသော တုံ့ပြန်ချက်အရင်းအမြစ်များစွာကို ကြည့်ရှုပါသည်။ ထို့အပြင်၊ developer များအတွက် ၎င်းတို့၏ သီးခြားလိုအပ်ချက်များနှင့် အသုံးပြုမှုကိစ္စများကို မျှဝေရန်အတွက် ပိုမိုကောင်းမွန်သောနည်းလမ်းများကို ဖန်တီးရန် ကျွန်ုပ်တို့ အမြဲကြိုးစားနေပါသည်။ ထို့ကြောင့် သင်သည် ဖြစ်နိုင်ပါက၊ ဘရောက်ဆာရောင်းချသူများထံမှ ပိုမိုတောင်းဆိုပြီး သင်လိုအပ်သည့်အင်္ဂါရပ်များကို အကောင်အထည်ဖော်ရန် ကျွန်ုပ်တို့ကို ဖိအားပေးပါ။ အချိန်ယူရပြီး ခြိမ်းခြောက်မှုလည်း ခံရနိုင်သည် (ဝင်ရောက်ရန် မြင့်မားသော အတားအဆီးတစ်ခုဟု မဆိုလိုပါ) သို့သော် ၎င်းသည်လည်း အလုပ်လုပ်ပါသည်။ ဤသည်မှာ သင်၏ (သို့မဟုတ် သင့်ကုမ္ပဏီ၏) အသံကို ကြားနိုင်စေမည့် နည်းလမ်းအချို့ဖြစ်သည်- နှစ်စဉ် JS ပြည်နယ်၊ CSS ၏ အခြေအနေနှင့် HTML စစ်တမ်းများ၏ အခြေအနေတို့ကို ယူပါ။ ဘရောက်ဆာရောင်းချသူများသည် ၎င်းတို့၏အလုပ်ကို ဦးစားပေးပုံတွင် ၎င်းတို့သည် ကြီးမားသောအခန်းကဏ္ဍမှ ပါဝင်ပါသည်။ ဘရောက်ဆာများတစ်လျှောက် တိကျသော စံအခြေခံ API ကို တစ်သမတ်တည်း အကောင်အထည်ဖော်ရန် လိုအပ်ပါက၊ လာမည့် Interop ပရောဂျက် ထပ်မံပြုလုပ်ခြင်းတွင် အဆိုပြုချက်တစ်ခု တင်ပြရန် စဉ်းစားပါ။ ၎င်းသည် အချိန်ပိုလိုအပ်သော်လည်း Shopify နှင့် RUMvision တို့သည် Interop 2026 အတွက် ၎င်းတို့၏ဆန္ဒစာရင်းများကို မည်သို့မျှဝေသည်ကို စဉ်းစားပါ။ ဤကဲ့သို့သောအသေးစိတ်အချက်အလက်များကို ဦးစားပေးလုပ်ဆောင်ရန် ဘရောက်ဆာရောင်းချသူများအတွက် အလွန်အသုံးဝင်ပါသည်။ ဘရောက်ဆာရောင်းချသူများအပေါ် လွှမ်းမိုးရန် ပိုမိုအသုံးဝင်သောလင့်ခ်များ အတွက်၊ ကျွန်ုပ်၏ ဝဘ်ပလပ်ဖောင်းပေါ်တွင် သွားလာခြင်း Cheatsheet ကိုကြည့်ပါ။ နိဂုံး နိဂုံးချုပ်ရန်၊ ဤဆောင်းပါးသည် သင့်အတွက် စဉ်းစားစရာအချို့ကို ချန်ထားခဲ့မည်ဟု မျှော်လင့်ပါသည်။
ပန်းရံနှင့် အခြားလာမည့် ဝဘ်ဝန်ဆောင်မှုများအတွက် စိတ်လှုပ်ရှားမှု။ သင်စတင်အသုံးပြုလိုသည့် ဝဘ်အင်္ဂါရပ်အချို့။ စိတ်ကြိုက် သို့မဟုတ် ပြင်ပကုဒ် အပိုင်းအချို့ကို သင်ထည့်သွင်းထားသည့် အင်္ဂါရပ်များကို နှစ်သက်စွာ ဖယ်ရှားနိုင်ပေမည်။ လာမည့်အရာများကို ခြေရာခံရန်နှင့် ဘရောက်ဆာရောင်းချသူများကို လွှမ်းမိုးရန် နည်းလမ်းအချို့။
ပို၍အရေးကြီးသည်မှာ၊ ဝဘ်ပလက်ဖောင်းကို ၎င်း၏စွမ်းရည်အပြည့်ဖြင့် အသုံးပြုခြင်း၏ အကျိုးကျေးဇူးများကို သင့်အား ယုံကြည်စိတ်ချနိုင်စေရန် မျှော်လင့်ပါသည်။
