Developer တို့အတွက် Javascript Testing Framework များ
=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°
Developer ရယ်လို့ဖြစ်လာရင် Testing Framework တွေနဲ့ဝေးကွာရတယ်လို့မရှိပါဘူး။
Testing Framework တွေဟာ Developer တွေ အတွက် Code တွေကို run တဲ့အခါ အမှားအယွင်းမပါဘဲ run နိုင်အောင် ကူညီပေးပါတယ်။
ဒီနေ့မှာတော့ JavaScript ရဲ့ Testing Framework တွေကိုပြောပြပေးသွားမှာဖြစ်ပါတယ်။
👉 Jest ကတော့ Facebook ကနေ Develop လုပ်ထားတဲ့ testing Framework တစ်ခုပဲဖြစ်ပါတယ်။
သူ့မှာ 📝 Built-in assertion library
📝 Mocking support
📝 Snapshot testing
📝 Coverage Report
တွေပါ၀င်ပြီး react application တွေနဲ့ general JavaScript testing တွေအတွက်အသုံး၀င်ပါတယ်။
👉 Karma ကတော့ AngularJS Team ကနေ develop လုပ်ခဲ့တဲ့ test runner တစ်ခုပဲဖြစ်ပါတယ်။
📝 Multiple Browsers and testing framework
📝 Continuous Integration (CI) support
📝 File Watching တို့ပါ၀င်တာကြောင့် မတူညီတဲ့ device တွေ ၊ browser တွေအပေါ်မှာ run ဖို့သင့်တော်ပါတယ်။
👉 Cypress ကတော့ debug test တွေအတွက် end-to-end testing framework တစ်ခုပဲဖြစ်ပါတယ်။
📝 Time-travel debugging
📝 Real-time reloads နဲ့
📝 Automatic waiting တွေပါ၀င်တာကြောင့် modern web application တွေမှာ အသုံးပြုကြပါတယ်။
အခြား Testing Framework တွေအများကြီးထဲကမှ သုံးခုကိုထုတ်နှုတ်တင်ပြထားပါတယ်။
Testing Framework တစ်ခုကိုရွေးချယ်ဖို့အတွက်ဆိုရင်တော့ ကိုယ်က frontend သုံးမှာလား backend သုံးမှာလား cross-broswer support အတွက်လားဆိုတာ ပေါ်မူတည်ပြီး ရွေးချယ်ရမှာဖြစ်ပါတယ်။
Developer ကြီးတို့ကရော ဘယ်လိုမျိုး testing framework တွေကိုရွေးချယ်ပြီးအသုံးပြုကြလဲဆိုတာ comment မှာပြောပေးသွားကြပါဦးနော် 👀💬
#creative_coder_myanmar
=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°
Developer ရယ်လို့ဖြစ်လာရင် Testing Framework တွေနဲ့ဝေးကွာရတယ်လို့မရှိပါဘူး။
Testing Framework တွေဟာ Developer တွေ အတွက် Code တွေကို run တဲ့အခါ အမှားအယွင်းမပါဘဲ run နိုင်အောင် ကူညီပေးပါတယ်။
ဒီနေ့မှာတော့ JavaScript ရဲ့ Testing Framework တွေကိုပြောပြပေးသွားမှာဖြစ်ပါတယ်။
👉 Jest ကတော့ Facebook ကနေ Develop လုပ်ထားတဲ့ testing Framework တစ်ခုပဲဖြစ်ပါတယ်။
သူ့မှာ 📝 Built-in assertion library
📝 Mocking support
📝 Snapshot testing
📝 Coverage Report
တွေပါ၀င်ပြီး react application တွေနဲ့ general JavaScript testing တွေအတွက်အသုံး၀င်ပါတယ်။
👉 Karma ကတော့ AngularJS Team ကနေ develop လုပ်ခဲ့တဲ့ test runner တစ်ခုပဲဖြစ်ပါတယ်။
📝 Multiple Browsers and testing framework
📝 Continuous Integration (CI) support
📝 File Watching တို့ပါ၀င်တာကြောင့် မတူညီတဲ့ device တွေ ၊ browser တွေအပေါ်မှာ run ဖို့သင့်တော်ပါတယ်။
👉 Cypress ကတော့ debug test တွေအတွက် end-to-end testing framework တစ်ခုပဲဖြစ်ပါတယ်။
📝 Time-travel debugging
📝 Real-time reloads နဲ့
📝 Automatic waiting တွေပါ၀င်တာကြောင့် modern web application တွေမှာ အသုံးပြုကြပါတယ်။
အခြား Testing Framework တွေအများကြီးထဲကမှ သုံးခုကိုထုတ်နှုတ်တင်ပြထားပါတယ်။
Testing Framework တစ်ခုကိုရွေးချယ်ဖို့အတွက်ဆိုရင်တော့ ကိုယ်က frontend သုံးမှာလား backend သုံးမှာလား cross-broswer support အတွက်လားဆိုတာ ပေါ်မူတည်ပြီး ရွေးချယ်ရမှာဖြစ်ပါတယ်။
Developer ကြီးတို့ကရော ဘယ်လိုမျိုး testing framework တွေကိုရွေးချယ်ပြီးအသုံးပြုကြလဲဆိုတာ comment မှာပြောပေးသွားကြပါဦးနော် 👀💬
#creative_coder_myanmar
ကယ် Web Development Field ထဲကို အခြေခိုင်ပြီး သေချာပိုင်နိုင်စွာနဲ့ လဲ ဝင်ချင်တယ်။ Design ကနေ Code ကို သေချာ စနစ်တကျရေးတတ်ချင်တယ်။ Animation တွေသေချာစဉ်းစား ရေးတတ်လိုတယ်ဆိုရင် ဒီလို ကိုယ် စာလုပ်ရင်းလိုအပ်ရင် One by one mentorship ပါပေးတဲ့ အတန်းမတက်ရင် ဘယ်အတန်းတက်မလဲပြော😎🚀
User တွေရဲ့ Device Type ကိုခန့်မှန်းနိုင်မယ့် Developer တွေအတွက်အသုံး၀င်ဆုံး function တစ်ခု
User တွေရဲ့ browser နဲ့ operating system ကိုခန့်မှန်းလို့ရနိုင်မယ့် function လေးကတော့
detectDeviceType function လေးပဲဖြစ်ပါတယ်။
သူ့မှာ userAgent ဆိုတဲ့ string တစ်ခုပါ၀င်ပြီး သူကနေပြီးတော့ specific ဖြစ်တဲ့ keyword တွေနဲ့အတူ ဘာ device အမျိုးအစားလည်းဆိုတာကို return ပြန်ပေးပါတယ်။
“mobile” အမျိုးအစားဆိုရင် mobile လို့ return ပြန်ပေးပြီး “tablet”, “ipad” , “playbook” နဲ့ “silk” တို့ဆိုရင်တော့ tablet လို့ return ပြန်ပေးပါတယ်။ အခြားဟာတွေဆိုရင်တော့ desktop လို့ပြန်ပေးပါတယ်။
Code Example လေးကတော့
function detectDeviceType() {
const userAgent = navigator.userAgent.toLowerCase();
if (/mobile/i.test(userAgent)) {
return 'mobile';
} else if (/tablet|ipad|playbook|silk/i.test(userAgent)) {
return 'tablet';
} else {
return 'desktop';
}
}
// Usage
const deviceType = detectDeviceType();
console.log('Current device type:', deviceType);
ပဲဖြစ်ပါတယ်။
ဒီမှာဆိုရင် ပထမဆုံး get user agent ကိုသုံးထားပြီး string တွေကို lowercase ကိုပြောင်းပေးပါတယ်။
const userAgent = navigator.userAgent.toLowerCase();
ပြီးရင်တော့ mobile ဆိုတဲ့စကားလုံးပါလားဆိုတာ စစ်ဆေးပါတယ်။
နောက်တစ်ဆင့်ကတော့ tablet type ကိုစစ်ဆေးပြီး နောက်ဆုံးအဆင့်မှာ default အနေနဲ့ desktop ကိုထားလိုက်ပါတယ်။
if (/mobile/i.test(userAgent)) {
return 'mobile';
}
else if (/tablet|ipad|playbook|silk/i.test(userAgent)) {
return 'tablet';
}
else {
return 'desktop';
}
အသုံးပြုပုံကတော့ device type ကိုခန့်မှန်းဖို့ function ကို define လုပ်လိုက်ရုံပဲဖြစ်ပါတယ်။
const deviceType = detectDeviceType();
console.log('Current device type:', deviceType);
ဒီ function လေးက user device or browser ပေါ်မူတည်ပြီး customized feature တေွကို ရေးသားတဲ့နေရာ မှာအသုံးဝင်တဲ့ function လေးဖြစ်လို့ စမ်းသုံးကြည့်ကြဖို့လည်း မမေ့နဲ့နော် Developer ကြီးတို့ရေ👀💬
#creative_coder_myanmar
User တွေရဲ့ browser နဲ့ operating system ကိုခန့်မှန်းလို့ရနိုင်မယ့် function လေးကတော့
detectDeviceType function လေးပဲဖြစ်ပါတယ်။
သူ့မှာ userAgent ဆိုတဲ့ string တစ်ခုပါ၀င်ပြီး သူကနေပြီးတော့ specific ဖြစ်တဲ့ keyword တွေနဲ့အတူ ဘာ device အမျိုးအစားလည်းဆိုတာကို return ပြန်ပေးပါတယ်။
“mobile” အမျိုးအစားဆိုရင် mobile လို့ return ပြန်ပေးပြီး “tablet”, “ipad” , “playbook” နဲ့ “silk” တို့ဆိုရင်တော့ tablet လို့ return ပြန်ပေးပါတယ်။ အခြားဟာတွေဆိုရင်တော့ desktop လို့ပြန်ပေးပါတယ်။
Code Example လေးကတော့
function detectDeviceType() {
const userAgent = navigator.userAgent.toLowerCase();
if (/mobile/i.test(userAgent)) {
return 'mobile';
} else if (/tablet|ipad|playbook|silk/i.test(userAgent)) {
return 'tablet';
} else {
return 'desktop';
}
}
// Usage
const deviceType = detectDeviceType();
console.log('Current device type:', deviceType);
ပဲဖြစ်ပါတယ်။
ဒီမှာဆိုရင် ပထမဆုံး get user agent ကိုသုံးထားပြီး string တွေကို lowercase ကိုပြောင်းပေးပါတယ်။
const userAgent = navigator.userAgent.toLowerCase();
ပြီးရင်တော့ mobile ဆိုတဲ့စကားလုံးပါလားဆိုတာ စစ်ဆေးပါတယ်။
နောက်တစ်ဆင့်ကတော့ tablet type ကိုစစ်ဆေးပြီး နောက်ဆုံးအဆင့်မှာ default အနေနဲ့ desktop ကိုထားလိုက်ပါတယ်။
if (/mobile/i.test(userAgent)) {
return 'mobile';
}
else if (/tablet|ipad|playbook|silk/i.test(userAgent)) {
return 'tablet';
}
else {
return 'desktop';
}
အသုံးပြုပုံကတော့ device type ကိုခန့်မှန်းဖို့ function ကို define လုပ်လိုက်ရုံပဲဖြစ်ပါတယ်။
const deviceType = detectDeviceType();
console.log('Current device type:', deviceType);
ဒီ function လေးက user device or browser ပေါ်မူတည်ပြီး customized feature တေွကို ရေးသားတဲ့နေရာ မှာအသုံးဝင်တဲ့ function လေးဖြစ်လို့ စမ်းသုံးကြည့်ကြဖို့လည်း မမေ့နဲ့နော် Developer ကြီးတို့ရေ👀💬
#creative_coder_myanmar
JavaScript လေ့လာသူတွေအကြိုက်တွေ့စေမယ့် Udacity ရဲ့ JavaScript Course
=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°
JavaScript ကိုလေ့လာနေတဲ့ Developer တွေအတွက် အခြေခံပိုင်နိုင်စေဖို့ Course လေးတစ်ခုနဲ့ မိတ်ဆက်ပေးချင်ပါတယ်။
ဒီ course လေးကအခြေခံကို လက်တွေ့ exercise တွေနဲ့ သင်ကြားပေးသွားမှာပဲဖြစ်ပါတယ်။ သေချာပြင်ဆင်ထားတဲ့ သင်ခန်းစာတွေအပြင် သူ့မှာပါတဲ့ quiz တွေကလည်း သင်ယူခဲ့တာတွေကို reflect ဖြစ်စေမှာပါ။
Course Outline လေးတွေအနေနဲ့ဆိုရင်တော့
👉 What is JavaScript?
👉 Data Types & Variables
👉 Conditionals
👉 Loop
👉 Functions
👉 Arrays
👉 Objects
စတဲ့ အခြေခံတွေပါ၀င်ပါတယ်။
ဒီ course လေးကို အခမဲ့တက်ရောက်နိုင်တာကြောင့် အခုပဲသွားပြီး enroll လုပ်လိုက်တော့နော် 👀💬
ဒီ link လေးကနေသွားပြီး enroll လုပ်နိုင်ပါတယ်။
https://www.udacity.com/course/intro-to-javascript--ud803
#creative_coder_myanmar
#javscript
=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°
JavaScript ကိုလေ့လာနေတဲ့ Developer တွေအတွက် အခြေခံပိုင်နိုင်စေဖို့ Course လေးတစ်ခုနဲ့ မိတ်ဆက်ပေးချင်ပါတယ်။
ဒီ course လေးကအခြေခံကို လက်တွေ့ exercise တွေနဲ့ သင်ကြားပေးသွားမှာပဲဖြစ်ပါတယ်။ သေချာပြင်ဆင်ထားတဲ့ သင်ခန်းစာတွေအပြင် သူ့မှာပါတဲ့ quiz တွေကလည်း သင်ယူခဲ့တာတွေကို reflect ဖြစ်စေမှာပါ။
Course Outline လေးတွေအနေနဲ့ဆိုရင်တော့
👉 What is JavaScript?
👉 Data Types & Variables
👉 Conditionals
👉 Loop
👉 Functions
👉 Arrays
👉 Objects
စတဲ့ အခြေခံတွေပါ၀င်ပါတယ်။
ဒီ course လေးကို အခမဲ့တက်ရောက်နိုင်တာကြောင့် အခုပဲသွားပြီး enroll လုပ်လိုက်တော့နော် 👀💬
ဒီ link လေးကနေသွားပြီး enroll လုပ်နိုင်ပါတယ်။
https://www.udacity.com/course/intro-to-javascript--ud803
#creative_coder_myanmar
#javscript
Udacity
Intro to JavaScript | JavaScript Programming | Udacity
Learn online and advance your career with courses in programming, data science, artificial intelligence, digital marketing, and more. Gain in-demand technical skills. Join today!
Developer တစ်ဦးအဖြစ် သင့်ရဲ့ အိမ်မက်ကို အကောင်အထည်ဖော်လိုပါက အခုပဲအတန်းအပ်လိုက်ပါ 👉💬
Creative Coder ရဲ့ Web Development Foundation အတန်းမှာဆိုရင် အခြေခံကနေစတင်ပြီး Framework ကိုအသုံးပြုတတ်အောင်အထိ အစအဆုံး Project တွေနဲ့ သင်ကြားပေးသွားမှာဖြစ်ပါတယ်။
Early Bird Discount လေးလည်းရှိနေတာကြောင့် အတန်းမြန်မြန်လာအပ်မှ စိတ်ချရမယ်နော် 👀
#creative_coder_myanmar
Creative Coder ရဲ့ Web Development Foundation အတန်းမှာဆိုရင် အခြေခံကနေစတင်ပြီး Framework ကိုအသုံးပြုတတ်အောင်အထိ အစအဆုံး Project တွေနဲ့ သင်ကြားပေးသွားမှာဖြစ်ပါတယ်။
Early Bird Discount လေးလည်းရှိနေတာကြောင့် အတန်းမြန်မြန်လာအပ်မှ စိတ်ချရမယ်နော် 👀
#creative_coder_myanmar
Developer တိုင်းသိထားသင့်တဲ့ Static & Dynamic Website
=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°
Website တစ်ခုကိုတည်ဆောက်နေတဲ့ Developer ကြီးတို့ သိထားသင့်တာတွေက တစ်ခုဖြစ်တဲ့ static & dynamic website တွေအကြောင်းကိုပြောပြပေးသွားမှာ ဖြစ်ပါတယ်။
Static Website တွေကိုအလွယ်ပြောရမယ်ဆိုရင် အမြဲပုံသေ အကြောင်းအရာတစ်ခုကိုသာတင်ပြထားတဲ့ Website တစ်ခုဖြစ်ပါတယ်။
Static Website တွေကိုများသောအားဖြင့် HTML, CSS အပြင် JavaScript နဲ့တည်ဆောက်ထားကြပါတယ်။ content တစ်ခုတည်းသာပါရှိတာကြောင့် loading ပိုမြန်ပြီး host လုပ်လို့လည်းလွယ်ကူပါတယ်။
ဥပမာ အနေနဲ့ personal blog တွေ၊ landing page တွေဟာ static website တွေဖြစ်ကြပါတယ်။
Dynamic Website တွေကတော့ user actions & performance တွေပေါ်လိုက်ပြီး အမြဲပြောင်းလဲမှုတွေပြုလုပ်နေတဲ့ website ပဲဖြစ်ပါတယ်။ မြင်သာအောင်ပြောရရင် ကျွန်တော်တို့ Creative Coder Myanmar website ဟာလည်း Dynamic Website ပဲဖြစ်ပါတယ်။
Dynamic Website တွေကိုတော့ HTML, CSS, Javascript အပြင် PHP, Python, Ruby, or ASP.NETတွေနဲ့တည်ဆောက်ကြပါတယ်။ user တွေနဲ့ အများဆုံး interact လုပ်ရတဲ့ website တွေဖြစ်တာကြောင့် cost တွေ၊ maintenance တွေရှိနိုင်ပါတယ်။
ဥပမာအနေနဲ့ကတော့ Amazon နဲ့ Facebook တို့လို website တွေဖြစ်ပါတယ်။
အခြား developer ကြီးတွေသိသွားအောင်လည်း မျှဝေပေးသွားပါဦးနော် 👀
#creative_coder_myanmar
=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°
Website တစ်ခုကိုတည်ဆောက်နေတဲ့ Developer ကြီးတို့ သိထားသင့်တာတွေက တစ်ခုဖြစ်တဲ့ static & dynamic website တွေအကြောင်းကိုပြောပြပေးသွားမှာ ဖြစ်ပါတယ်။
Static Website တွေကိုအလွယ်ပြောရမယ်ဆိုရင် အမြဲပုံသေ အကြောင်းအရာတစ်ခုကိုသာတင်ပြထားတဲ့ Website တစ်ခုဖြစ်ပါတယ်။
Static Website တွေကိုများသောအားဖြင့် HTML, CSS အပြင် JavaScript နဲ့တည်ဆောက်ထားကြပါတယ်။ content တစ်ခုတည်းသာပါရှိတာကြောင့် loading ပိုမြန်ပြီး host လုပ်လို့လည်းလွယ်ကူပါတယ်။
ဥပမာ အနေနဲ့ personal blog တွေ၊ landing page တွေဟာ static website တွေဖြစ်ကြပါတယ်။
Dynamic Website တွေကတော့ user actions & performance တွေပေါ်လိုက်ပြီး အမြဲပြောင်းလဲမှုတွေပြုလုပ်နေတဲ့ website ပဲဖြစ်ပါတယ်။ မြင်သာအောင်ပြောရရင် ကျွန်တော်တို့ Creative Coder Myanmar website ဟာလည်း Dynamic Website ပဲဖြစ်ပါတယ်။
Dynamic Website တွေကိုတော့ HTML, CSS, Javascript အပြင် PHP, Python, Ruby, or ASP.NETတွေနဲ့တည်ဆောက်ကြပါတယ်။ user တွေနဲ့ အများဆုံး interact လုပ်ရတဲ့ website တွေဖြစ်တာကြောင့် cost တွေ၊ maintenance တွေရှိနိုင်ပါတယ်။
ဥပမာအနေနဲ့ကတော့ Amazon နဲ့ Facebook တို့လို website တွေဖြစ်ပါတယ်။
အခြား developer ကြီးတွေသိသွားအောင်လည်း မျှဝေပေးသွားပါဦးနော် 👀
#creative_coder_myanmar
WDF ကျောင်းသား၊ ကျောင်းသူတို့ရဲ့စကားသံများ 📝
Creative Coder မှာ Web Development ကိုအခြေခံကနေစပြီး သင်ယူခဲ့ကြတဲ့ ကျောင်းသား၊ ကျောင်းသူတွေက သူတို့ရဲ့အတွေ့အကြုံကို အခုလိုပဲပြောပြလာခဲ့ပါတယ် 👇
Batch (6) ကလည်း July (27) ရက်နေ့မှာ စတင်သွားမှာဖြစ်တဲ့အတွက် စိတ်ပါ၀င်စားသူတွေအနေနဲ့ page messenger မှာ အတန်းလေးကို စုံစမ်းမေးမြန်းပြီး အပ်နှံနိုင်ပါပြီ။
#creative_coder_myanmar
Creative Coder မှာ Web Development ကိုအခြေခံကနေစပြီး သင်ယူခဲ့ကြတဲ့ ကျောင်းသား၊ ကျောင်းသူတွေက သူတို့ရဲ့အတွေ့အကြုံကို အခုလိုပဲပြောပြလာခဲ့ပါတယ် 👇
Batch (6) ကလည်း July (27) ရက်နေ့မှာ စတင်သွားမှာဖြစ်တဲ့အတွက် စိတ်ပါ၀င်စားသူတွေအနေနဲ့ page messenger မှာ အတန်းလေးကို စုံစမ်းမေးမြန်းပြီး အပ်နှံနိုင်ပါပြီ။
#creative_coder_myanmar