Hello guys!

Web developers များအနေနဲ့ HTML, CSS,  JavaScript တို့နဲ့ coding ရေးသားတိုင်းမှာ စမ်းစရာလေးရှိလာတတ်ပါတယ်။
သူများကို မေးဖို့ပဲဖြစ်ဖြစ်.. သူများမေးတာပြန်ဖြေဖို့ပဲဖြစ်ဖြစ် .. လိုချင်တဲ့အစိတ်အပိုင်းလေးတွေကို ခွဲထုတ်ပြီးရေးရတာမျိုးလဲဖြစ်တတ်ပါတယ်။
အဲ့လိုအခြေအနေမျိုးတွေအတွက် ကိုယ်ရေးချင်တဲ့ code ကို live editing နဲ့ preview ပြပေးတဲ့ code playground web-application တွေပေါ်ထွက်လာပါတယ်။ code playground တွေပေါ်လာချင်းအားဖြင့် development community တွေမှာ များစွာ အထောက်အကူဖြစ်စေတာလဲတွေ့ရပါတယ်။ 

ကျွန်တော်တို့ ရေးနေတဲ့ code file တွေထဲက တစ်ခုခုထုတ်စမ်းချင်ရင် ‌အသုံးဝင်တဲ့ coding playground တွေရှိသလို သူများsharing ပေးထားတဲ့ code တွေကိုလဲ တစ်ခါထဲ result ပါထွက်တဲ့အထိ coding playground web-app တွေမှာ အသုံးချလို့ရပါတယ်.အထူးသဖြင့် stackoverflow လို site တွေမှာရှိတဲ့ Web Client side ပိုင်းနဲ့ဆိုင်တဲ့ မေးခွန်းတွေ အဖြေတွေဆို code playground ‌တွေနဲ့စမ်းပြထားတာကိုလဲ တွေ့ရမှာပါ။

ဒီblog မှာတော့ Frontend ပိုင်းမှာ အထောက်အကူပြုတဲ့ code playground ငါးခုကို sharing လုပ်ပေးသွားမှာပါ။

https://codepen.io
Web developerတိုင်း Codepen ကိုတော့ သိကြမယ်ထင်ပါတယ်။ မသိလဲ နောက်ပိုင်း ရင်းနှီးလာမှာပါ..အတော်အသုံးဝင်တဲ့ site ‌ပါ။ built-in JS libraries ၈မျိုးအထိအသုံးချနိုင်ပါတယ်။

https://jsfiddle.net/
ဒါကတော့ ကျွန်တော်ကိုယ်တိုင် JavaScript နဲ့ပတ်သတ်လာရင် စမ်းနေကြ site လေးပါ။  JS libraries ပေါင်း ၃၀ ကျော်ကို support ပေးပါတယ်။ UI အနေအထားကလဲ အတော်အဆင်ပြေပါတယ်။ လိုတာနဲ့ ထုတ်ရေးရုံပဲ .. personally အရ အတော်အဆင်ပြေတဲ့ coding playground တစ်ခုပါ။

https://jsbin.com/
သူကလဲ JS pre-processor အတော်များများပါဝင်ပါတယ်။ ထူးခြားတာက jsbin က သင်ရေးထားတဲ့ code file တွေကို local computer  ဆီကို download ပေးဆွဲတဲ့ feature ပါဝင်ပါတယ်။

https://cssdeck.com/
သူကတော့ သုံးရတာလွယ်ကူရိုးရှင်းလို့ အသုံးများတဲ့ site ပါ။ cssdeck ဆိုတဲ့အတိုင်းပဲ CSS libraries အတော်များများပါဝင်ပါတယ်။ ထူးခြားမှုကတော့ သိသိသာသာတော့ မရှိပါဘူး။ အသုံးဝင်မယ်လို့ထင်ပါတယ်။

https://liveweave.com/
သူ UI ကတော့ jsfiddle နဲ့ခပ်ဆင်ဆင်ပါ။ JavaScript libraries ပေါင်း ၂၀ ကျော်ပါပြီး SVG ကိုလဲ ထည့်သုံးလို့ရဖို့ support ပေးပါတယ်။ collaboration feature ပါဝင်ပြီး Team နဲ့ရေးဖို့ သင့် code file တွေကို share ပေးလို့ရပါတယ်။ ရေးထားတဲ့ file တွေကို download လုပ်နိုင်သလို built-in Lorem Ipsum generator လဲပါဝင်ပါတယ်။

Bonus Tip အနေနဲ့ share ပေးချင်တာက ကျွန်တော် ရေးရတာသဘောကျတဲ့ code playground တစ်ခုရှိပါသေးတယ်။ code playground သီးသန့်ကြီးတော့မဟုတ်ပါဘူး။ တကယ်တော့ သူက coding skill လေ့ကျင့်ဖို့ interview question တွေဖြေဖို့ တည်ဆောက်ထားတဲ့ ‌site တစ်ခုပါ။ coding ရေးဖို့ language ပေါင်းမျိုးစုံကို support လုပ်ထားပေးပါတယ်။

https://leetcode.com/ မှာဝင်ကြည့်နိုင်ပါတယ်။

ဒီblog လေးကနေ တစ်ခုခုအသုံးဝင်တာ သိသွားရင် အကျိုးရှိပါတယ်။ နောက်ပြီး သင်သဘောကျတဲ့ သုံးနေကျ coding playground တွေရှိရင်လဲ comment မှာ share ပေးသွားပါဦး။ 

Enjoy Coding!

#DetailProjects
#JavaScript
#ThuHtetTun