CodePen: HTML၊ CSS နှင့် JavaScript တို့ကိုတည်ဆောက်ခြင်း၊ စမ်းသပ်ခြင်း၊ ဝေမျှရန်နှင့်ရှာဖွေရန်

Codepen: တည်ဆောက်ခြင်း၊ စမ်းသပ်ခြင်းနှင့်ရှာဖွေခြင်း Front-End ကုဒ်

အကြောင်းအရာစီမံခန့်ခွဲမှုစနစ်နှင့်အတူစိန်ခေါ်မှုတစ်ခုမှာ scripted tools များကိုစမ်းသပ်ခြင်းနှင့်ထုတ်လုပ်ခြင်းဖြစ်သည်။ ၎င်းသည်ထုတ်ဝေသူအများစုအတွက်လိုအပ်ချက်မဟုတ်သော်လည်းနည်းပညာထုတ်ဝေမှုတစ်ခုအနေဖြင့်အခြားလူများကိုကူညီရန်ကျွန်ုပ်သည်အလုပ်လုပ်နေသော script များကိုအခါအားလျော်စွာမျှဝေပေးသည်။ ငါဘယ်လိုသုံးစွဲရမည်ကိုမျှဝေခဲ့တယ် စကားဝှက်ကြံ့ခိုင်မှုကိုစစ်ဆေးရန် JavaScript, ဘယ္လို ပုံမှန်ဖော်ပြချက်များနှင့်အတူအီးမေးလ်လိပ်စာ syntax စစ်ဆေးပါ (Regex), နှင့်မကြာသေးမီကဒီကဆက်ပြောသည် အွန်လိုင်းပြန်လည်သုံးသပ်ခြင်း၏ရောင်းအားသက်ရောက်မှုကိုခန့်မှန်းရန်ဂဏန်းတွက်စက်။ ငါ site ပေါ်တွင် tools များစွာထည့်သွင်းဖို့မျှော်လင့်ပါတယ်ပေမယ့် WordPress ကိုဤကဲ့သို့သောထုတ်ဝေရန်အတိအကျအဆင်ပြေမဟုတ်ပါဘူး ... ဒါဟာအကြောင်းအရာစနစ်, ဖွံ့ဖြိုးမှုစနစ်ကမဟုတ်ပါဘူး။

ဒါကြောင့်ငါ့ရဲ့နည်းနည်းလေးအလုပ်လုပ်ဖို့ငါအသုံးပြုရတာပျော်တယ် CodePen။ CodePen သည် HTML panel တစ်ခု၊ CSS panel တစ်ခု၊ JavaScript panel တစ်ခု၊ Console နှင့်ရရှိသော code ၏ထုတ်ဝေထားသောသေသပ်စွာဖွဲ့စည်းထားသောကိရိယာတစ်ခုဖြစ်သည်။ သင်ပိုမိုလွယ်ကူစေရန်တည်းဖြတ်ခြင်းနှင့်ရေးသားခြင်းအတွက်ကူညီရန်သင်၏ HTML, CSS နှင့် JS တို့၏အရောင်ခြယ်ခြင်းကိုနားလည်ရန် element များပေါ်တွင်သင် mouse ကိုအသုံးပြုသည့်အခါ panel တစ်ခုစီတွင်အချက်အလက်များပါရှိသည်။

CodePen သည်လူမှုဖွံ့ဖြိုးတိုးတက်မှုပတ်ဝန်းကျင်တစ်ခုဖြစ်သည်။ ၎င်းင်း၏အသည်းနှလုံး၌၎င်းသည်သင့်အား browser ထဲသို့ code ရေးရန်ခွင့်ပြုသည်။ မည်သည့်ကျွမ်းကျင်မှုကိုမဆိုတီထွင်သူများအတွက်အထူးအသုံးဝင်ပြီးလွတ်မြောက်စေနိုင်သည့်အွန်လိုင်းကုဒ်တည်းဖြတ်သူနှင့်အထူးသဖြင့်ကုဒ်သင်ကြားခြင်းအတွက်လူများကိုစွမ်းအားပေးခြင်း။ CodePen သည်အဓိကအားဖြင့် HTML, CSS, JavaScript ကဲ့သို့သောရှေ့တန်းဘာသာစကားများနှင့်ထိုအရာများအဖြစ်သို့ပြောင်းလဲသွားသော syntaxes များကိုအဓိကထားသည်။

CodePen အကြောင်း

CodePen နဲ့အတူကျွန်တော်လိုအပ်တဲ့အလုပ်အားလုံးကိုလုပ်နိုင်ခဲ့တယ် ဂဏန်းတွက်စက်ထုတ်ဝေရန် ငါ site ထဲမှာ embedded ။ CodePen မှဖန်တီးမှုအများစုသည်အများဆိုင်ပွင့်လင်းသောအရင်းအမြစ်ဖြစ်သည်။ ၎င်းတို့သည်အခြားလူများနှင့်ရပ်ရွာလူထုများအနေဖြင့်ရိုးရှင်းသောနှလုံးသားမှ၊ မှတ်ချက်တစ်ခုမှသည်၊ သူတို့၏ကိုယ်ပိုင်လိုအပ်ချက်များအတွက်ဖြည့်ဆည်းခြင်းနှင့်ပြောင်းလဲခြင်းအထိဆက်သွယ်နိုင်သောသက်ရှိအရာများဖြစ်သည်။

CodePen - အွန်လိုင်းသုံးသပ်ချက်များရဲ့ရောင်းအားအပေါ်သက်ရောက်မှုကိုခန့်မှန်းဖို့ဂဏန်းတွက်စက်

CodePen နဲ့အတူသင်အလုပ်လုပ်နေစဉ် panes များကိုဘယ်၊ ညာသို့မဟုတ်အောက်ဘက်ရှိလိုလျှင် (သို့) HTML ကို tab အသစ်တွင်ကြည့်ရှုလိုပါကသင်၏အမြင်ကိုပြောင်းလဲနိုင်သည်။ ဘေးချင်းယှဉ်မြင်နိုင်သောမြင်ကွင်းသည်သင်တုန့်ပြန်နိုင်သောချိန်ညှိချက်များကိုစမ်းသပ်ရန်မယုံနိုင်လောက်အောင်ကောင်းမွန်စွာအလုပ်လုပ်သည်။ သင်ကြည့်ရှုနိုင်သည့်ဘောင်၏အရွယ်အစားကိုချိန်ညှိနိုင်သည်။

သင်၏ scripts များကို Pens ထဲသို့ စုစည်း၍ ပရောဂျက်များ (multi-file editor) သို့မဟုတ်စုဆောင်းမှုများကိုပင်တည်ဆောက်နိုင်သည်။ အခြေခံအားဖြင့် ၄ င်းသည်အခြားစာရေးဆရာများနောက်သို့လိုက်ခြင်း၊ အခြားလူသိရှင်ကြားဝေမျှထားသောစီမံကိန်းများကိုသင့်ကိုယ်ပိုင်အဖြစ်သို့ပြောင်းလဲခြင်းနှင့်စိန်ခေါ်မှုများမှတစ်ဆင့်ပျော်စရာကောင်းသောအရာများကိုမည်သို့လုပ်ဆောင်ရမည်ကိုလေ့လာခြင်းစသည့်ရှေ့ပိုင်းကုဒ်များအတွက်အခြေခံကျသောလုပ်ငန်းခွင် ၀ က်ဘ်ဆိုက်ဖြစ်သည်။

သင်သည် GitHub Gist အဖြစ်သိမ်းဆည်းနိုင်သည်၊ zip ဖိုင်တွင်တင်ပို့နိုင်သည် embed ဤကဲ့သို့သောဆောင်းပါး၌ရှိဘောပင်:

ဘောပင်ကိုကြည့်ပါ
အွန်လိုင်းပြန်လည်သုံးသပ်ခြင်း၏ခန့်မှန်းအရောင်းအကျိုးသက်ရောက်မှု
by Douglas Karr (@douglaskarr)
on CodePen.


Pen အယ်ဒီတာ၏ကန့်သတ်ချက်တစ်ခုမှာကုဒ်သက်သက်သာသာရှိသောပမာဏဖြစ်သည်။ ဒီပြthisနာကိုသင်ဘယ်တော့မှမလုပ်နိူင်ဘူး၊ ဘာကြောင့်လဲဆိုတော့အယ်ဒီတာသည်ရာနှင့်ချီသောထောင်နှင့်ချီသောကုဒ်နံပါတ်များနှင့်သင့်တော်သည်။ ဒါပေမယ့်သူက code ၅၀၀၀ - ၁၀၀၀၀ ကျော်ဒါမှမဟုတ်ဒီထက်ပိုများတဲ့လိုင်းကိုစလိုက်တာနဲ့အယ်ဒီတာပျက်သွားပြီဆိုတာတွေ့ရလိမ့်မယ်။ သို့သော်၊ အခြားပြင်ပ၌တည်ခင်းေသာ styleheets သို့မဟုတ် JavaScript ကိုပြင်ပအကိုးအကားများထည့်နိုင်သည်။

ငါလက်မှတ်ထိုးရန်သင့်အားအားပေးချင်ပါတယ် သင်သည်သူတို့၏အပတ်စဉ်အီးမေးလ်တွင်စာရင်းသွင်းခံရမည်ဖြစ်ပြီးအသစ်ထုတ်ဝေထားသောဘောပင်များကိုသင်မြင်နိုင်ရန်သင်၏ RSS feed ထဲသို့ထည့်သွင်းမှုကိုလည်းထည့်သွင်းနိုင်သည်။ ပြီးတော့၊ အကယ်လို့သင်အဲဒီမှာ public pens တွေကိုစတင်ရှာဖွေတယ်ဆိုရင်၊ မယုံကြည်နိုင်လောက်တဲ့ပရောဂျက်တွေတွေ့ရလိမ့်မယ်။ သုံးစွဲသူတွေဟာထူးချွန်တယ်။

လိုက် Douglas Karr Codepen အပေါ်

ပေးဆောင်ရသောဗားရှင်း CodePen Pro သည်ပူးပေါင်းပါဝင်မှု၊ လုပ်ငန်းစဉ်များ၊ ပိုင်ဆိုင်မှုကိုလက်ခံခြင်း၊ ပုဂ္ဂလိကအမြင်များနှင့်သင်၏ကိုယ်ပိုင်ဒိုမိန်းသို့မဟုတ်ဒိုမိန်းခွဲများနှင့်အတူစီမံကိန်းများစသည်တို့အပါအဝင်တိုးတက်လာသောလုပ်ဆောင်နိုင်စွမ်းသို့မဟုတ်အဖွဲ့များအတွက်စွမ်းဆောင်ချက်များစွာရှိသည်။ နှင့်အညီ၊ CodePen သည်သင်၏အဖွဲ့တစ်ခုလုံးအလုပ်လုပ်နိုင်သည့် Github ပေါင်းစည်းမှုနှင့်အတူအလွန်ကောင်းသည့်သိုလှောင်မှုကိုပေးသည်။ အကယ်၍ သင်သည်ကျွန်ုပ်ကဲ့သို့ရိုးရှင်းသောကုဒ်အချို့ကိုစမ်းသပ်ချင်သည်ဆိုလျှင် CodePen သည်တန်ဖိုးမဖြတ်နိုင်သောကိရိယာတစ်ခုဖြစ်သည်။

သင်ဘယ်လိုထင်ပါလဲ?

ဤ site ကိုစပမ်လျှော့ချဖို့ Akismet ကိုအသုံးပြုသည်။ သင့်ရဲ့ comment ကိုဒေတာများကိုဆောင်ရွက်ပြီးဖြစ်ပါတယ်လေ့လာ.