React အတန်းလေးကိုတော့ သင်တန်းကြေး (၁၂၀၀၀၀) ကျပ်ကို (၁၀၀၀၀၀) ကျပ်တည်းနဲ့ တက်ရောက်နိုင်မှာဖြစ်ပါတယ်။ လေးသောင်းတန် JS basic လေးပါ အခမဲ့ပါ၀င်မှာ ဖြစ်ပါတယ်။
ဒီ React course လေးကို တက်ရောက်မယ်ဆိုရင် JS basic , JS DOM Basic, Git & GitHub Basic and Intermediate course လေးကို အခမဲ့ တက်ရောက်နိုင်မှာ ဖြစ်ပါတယ်။
======================================


JavaScript Basic Course

HTML,CSS လေ့လာပြီးသွားတဲ့ကျောင်းသားတွေအတွက် JavaScript Language ကိုအခြေခံကနေစတင်ပြီး သင်ကြားပေးသွားမယ့် အတန်းလေးဖြစ်ပါတယ်။

Beginner တွေကစပြီး လွယ်ကူစွာသင်ယူလေ့လာနိုင်အောင်စီစဥ်ထားပေးထားကြောင့် စာနားမလည်ဖြစ်မှာကိုလည်းပူစရာမလိုပါဘူး။ စာမေးချင်တာရှိရင်လည်း Paltform ကနေဖြစ်စေ ၊ဆရာ့ရဲ့ account ကနေဖြစ်စေ မေးလို့လည်းရပါတယ်။
ဒါ့အပြင် အချိန်မရွေးနေရာမရွေးကြိုက်တဲ့ အချိန်ကနေ ကြိုက်သလိုလည်း သင်ယူလေ့လာလို့ရတာကြောင့် အိုကေမှာစိုပြေပဲနော်။

ဒီအတန်းလေးကိုလည်း Free Course တွေအပါအ၀င် သင်တန်းကြေး (၄) သောင်းကျပ်တည်းနဲ့ တက်ရောက်ခွင့်ရမှာဖြစ်ပါတယ်။

ဒီ JavaScript course လေးကို တက်ရောက်မယ်ဆိုရင် Web socket 101, JS DOM Basic , Python from Scratch, Git & GitHub Basic and Intermediate course လေးကို အခမဲ့ တက်ရောက်နိုင်မှာ ဖြစ်ပါတယ်။


======================================
Free Courses

Premium Course တွေအပ်နှံလိုက်တာနဲ့ free course တွေကိုလည်း learning platform မှာ တစ်ခါတည်းသင်ယူလေ့လာနိုင်မှာ ဖြစ်ပါတယ်။

တက်ရောက်နိုင်တဲ့ Free Course တွေကတော့
📝 Git & GitHub Basic Course
📝 Git & Github Intermediate Course
📝 Python From Scratch
📝 Vuex Course
📝 PHP Framework Thinking Course
📝 Websocket 101
📝JS DOM Basic
📝 PHP solid design principle
📝 Laravel Folio Course တွေပဲဖြစ်ပါတယ်။

ကဲ.. အတွဲအစပ်မိမိ Web Development ကိုသင်ယူလေ့လာဖို့ အခုပဲ Creative Coder Myanmar ကိုဆက်သွယ်လိုက်ပါ 📲

📝Git & Github Basic & Intermediate Course

Git အကြောင်းဘာမှမသိသေးတာကနေစပြီး လုပ်ငန်းခွင်မှာအသုံးပြုနိုင်တဲ့အထိ သင်ကြားပေးထားတဲ့အတန်းလေးနှစ်ခုဖြစ်ပါတယ်။

>>> https://creativecodermm.com/courses/git-&-github-absolute-basics

>>> https://creativecodermm.com/courses/git-and-github-intermediate


📝PHP Framework Thinking Course

PHP + Laravel Class ပြီးထားတဲ့သူတွေအတွက် ဆက်လက်လေ့လာနိုင်တဲ့ Course လေးပဲဖြစ်ပါတယ်။


>>> https://creativecodermm.com/courses/php-framework-thinking


📝Python From Scratch

Python ကို အခြေခံကနေစပြီးသင်ကြားပေးထားတဲ့အတန်းလေးဖြစ်ပြီး သားသားမီးမီးလေးတွေကအစသင်ယူလို့ရပါတယ်။

>>> https://creativecodermm.com/courses/python-from-scratch


📝Vuex Course

Vuejs Course ပြီးထားတဲ့သူတွေအတွက် ဆက်လက်ပြီးအရေးပါတဲ့ Vuex ကိုလေ့လာလို့ရမယ့် အတန်း
လေးပဲဖြစ်ပါတယ်။

>>> https://creativecodermm.com/courses/component-library-vuex


📝 Websocket 101

ဒီအတန်းလေးကတော့ Websocket ဆိုတာဘာမှန်းမသိသေးသူများ အခုမှစလေ့လာလိုသူများအတွက် ရည်ရွယ်တဲ့ course လေးဖြစ်ပါတယ်။ Websocket ရဲ့အခြေခံတွေကို real world project လေးနဲ့ သေချာရှင်းပြသင်ကြားပေးထားတာဖြစ်ပါတယ်။

>>> https://creativecodermm.com/courses/websocket-101


📝Laravel Folio Course

Laravel Folio ဟာ Laravel Team ကနေ မကြာသေးခင်က ထုတ်ထားတဲ့ File based routing package တစ်ခုဖြစ်ပါတယ်။ ဒီ Video မှာ Folio ကို installation လုပ်တာကနေ စပြီး အသုံးချပုံတွေ ဘယ်လိုနေရာမှာ သုံးသင့်လဲဆိုတာတွေပြောပြပေးသွားမှာပဲဖြစ်ပါတယ်။

>>> https://creativecodermm.com/courses/laravel-folio-crash-course


📝 JS DOM Basic

Javascript ရဲ့အဓိကအပိုင်းတွေဖြစ်တဲ့ Document Object Model တွေအကြောင်းကို သင်ကြားပေးထားတဲ့ အတန်းလေးပဲဖြစ်ပါတယ်။

https://creativecodermm.com/courses/javascript-dom-basics

📝 PHP Solid Design Principle

PHP ရဲ့ အနှစ်သာရဖြစ်တဲ့ solid design Principle ကို သင်ကြားပေးထားတဲ့ အတန်းလေးပဲဖြစ်ပါတယ်။

https://creativecodermm.com/courses/php-solid-design-principle

TECH Stack တစ်ခုကို ပိုင်နိုင်စွာ ရွေးချယ်နိုင်ဖို့ ဘာတွေသိထားသင့်လဲ ?

TECH stack တွေဆိုတာ Web Development ကို လေ့လာဖို့အတွက် လိုအပ်တဲ့ Framework တွေကို ယှဉ်တွဲပေးထားတာဖြစ်ပါတယ်။

ဥပမာ
👉 Vue & Laravel 
👉 React & Laravel 
👉 Django & React 
👉 MEAN 
👉 LAMP
👉 MERN stack တို့ပဲ ဖြစ်ပါတယ်။

တကယ်လို့ Web Development သာတိုက်ပွဲတစ်ခုဖြစ်မယ်ဆိုရင် TECH stack ဆိုတာ တိုက်ပွဲမှာ အသုံးပြုဖို့ မရှိမဖြစ်လိုအပ်တဲ့ လက်နက်ပဲဖြစ်ပါတယ်။

တိုက်ခိုက်မယ့်လက်နက်ကိုသေချာ ရွေးချယ်ရမှာက Developer တို့ရဲ့ တာ၀န်ပဲဖြစ်ပါတယ်။

TECH stack တွေကိုရွေးချယ်တဲ့နေရာမှာ project ပေါ်မူတည်ပြီး ရွေးချယ်တတ်ဖို့ကလည်း အများကြီးအရေးကြီးပါတယ်။

Project requirements ဆိုတဲ့နေရာမှာ project ရဲ့ complexity and size၊ performance needs နဲ့ Scalability တို့ကိုလည်း အဓိထားရွေးချယ်တတ်ဖို့လိုပါတယ်။ 

ဥပမာ ကိုယ့် project က chat application လိုမျိုးဆိုရင် real time data ကို ကောင်းကောင်း handle လုပ်နိုင်ဖို့ Nodejs ကိုရွေးတာမျိုးဖြစ်ပါတယ်။

အချို့နေရာတွေမှာတော့ specific use case တွေရှိတာကြောင့် သတ်မှတ်ထားတဲ့ framework တွေကို သုံးမှ အဆင်ပြေတာမျိုးတွေလည်းရှိတတ်ပါတယ်။ 

👉 Single page application တွေဆိုရင် React, Vuejs နဲ့ AngularJS 
👉 Enterprise Application တွေဆိုရင်တော့ Java or NET
👉 Data Intensive Application တွေဆိုရင်တော့ Django, Ruby on Nails နဲ့ Nodejs တို့ကိုသုံးတာကအကောင်းဆုံးပါပဲ။

နောက်ဆုံးအနေနဲ့ကတော့ ကိုယ်ရွေးလိုက်တဲ့ tech stack ရဲ့ Development speed နဲ့ community support တို့ကိုလည်း ထည့်သွင်းစဉ်းစားဖို့လိုပါတယ်။

Developer ကြီးတို့လည်း TECH stack ရွေးတဲ့အခါ ဘယ်အချက်လေးတွေကို ထည့်သွင်းစဉ်းစားလဲဆိုတာ ပြောပေးသွားကြပါဦးနော် 👀

#creative_coder_myanmar

keysToOmit function အကြောင်း

=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°

ဒီ omit function လေးက object ကိုယူပြီး original object ကနေ new object key-value pair တစ်ခုကို return ပြန်ပေးပါတယ်။

ပထမဆုံး key list ကို convert လုပ်ပေးပါတယ်။ ပြီးရင်တော့ မလိုအပ်တဲ့ data တွေကို filter လုပ်ပေးပါတယ်။ နောက်ဆုံးအနေနဲ့ object အသစ်တစ်ခုကို ဖန်တီးပေးပါတယ်။

ဘယ်လိုနေရာမှာ သုံးကြလဲဆိုရင် Data Cleanup လုပ်တဲ့နေရာမှာလည်း အသုံးပြုနိုင်ပါတယ်။ ကိုယ့်မှာ extra data တွေအများကြီးရှိပြီး ဒီ data တွေကနေ အရေးကြီးတာတွေပဲ ပြန်လိုချင်တဲ့အခါတွေမှာ သုံးလို့ရပါတယ်။

Developer တွေအတွက် clean code တွေရေးတဲ့နေရာမှာလည်း အထောက်အကူဖြစ်စေပါတယ်။ ဒီ code လေးကနားလည်ရလည်းလွယ်စေပြီး ပြန်လည်းအသုံးပြုလို့ရပါတယ်။

ဥပမာ လေးနဲ့အတူ ကြည့်ရအောင် 👀👀

function omit(obj, keysToOmit) {

const omitSet = new Set(keysToOmit);
return Object.fromEntries(
Object.entries(obj).filter(
([key]) => !omitSet.has(key)
)
);
}

// Example usage
const originalObject = {
name: 'John',
age: 30,
job: 'developer',
country: 'USA'
};

const keysToOmit = ['age', 'country'];

const newObject = omit(originalObject, keysToOmit);
console.log(newObject); // { name: 'John', job: 'developer' }

ပထမအဆင့်အနေနဲ့
keysToOmit ကို set အဖြစ်ပြောင်းပါတယ်။

const omitSet = new Set(keysToOmit);
ပြီးရင်၀င်လာတဲ့ object တွေကို filter လုပ်ပါတယ်။

return Object.fromEntries(
Object.entries(obj).filter(
([key]) => !omitSet.has(key)
)

ဥပမာအနေနဲ့

Example usage
const originalObject = {
name: 'John',
age: 30,
job: 'developer',
country: 'USA'
};

const keysToOmit = ['age', 'country'];

const newObject = omit(originalObject, keysToOmit);
console.log(newObject); // { name: 'John', job: 'developer' }

ဒီ code လေးမှာဆိုရင်
omit function ကနေ output အသစ်ထုတ်ပေးတာကိုတွေ့ရမှာပါ။

သူ့ရဲ့အတွဲအလိုက် ပြန်ပြီး output ထုတ်ပေးတာပါ။

{
name: 'John',
age: 30,
job: 'developer',
country: 'USA'
};
ကနေ { name: 'John', job: 'developer' }
ဖြစ်သွားတာကိုတွေ့ရမှာပါ။

ဒါကတော့ သူ့ရဲ့အဓိကအသုံးပြုပုံပါ။ Developer တို့ရော omit function ကို စမ်းသုံးကြည့်ပြီးကြပြီလား?

သုံးဖူးတယ်ဆိုရင် comment မှာရေးပေးခဲ့ပါဦးနော် 👀

#creative_coder_myanmar

ဒီလိုအမှားတွေ နောက်ထပ်မလုပ်နဲ့တော့နော် ❌🙅

Web Development နယ်ပယ်ကကျယ်ပြန့်ပြီး လေ့လာစရာတွေဆိုတာလည်း မကုန်နိုင်တာကြောင့် စလေ့လာတော့မယ်ဆိုရင် လမ်းကြောင်းမမှားအောင် အထူးဂရုပြုသင့်ပါတယ်။

Developer  တွေလုပ်လေ့ရှိတဲ့ အမှားတွေထဲက အချို့ကို ကြည့်လိုက်ရအောင် 👀 

🎯 စလေ့လာခါစမှာ အခြေခံတွေကို အရင်မလေ့လာဘဲ ကျော်ပြီး framework တွေကိုစလေ့လာတာကလည်း ရှေ့ကို မရောက်ဘဲ နောက်ကိုပြန်ပြန်လှည့် ရတတ်ပါတယ်။
HTML, CSS နဲ့ Javascript တွေရမှသာ ရှေ့တစ်ဆင့်ကို ဆက်ပြီးလေ့လာသင့်ပါတယ်။

🎯 အချို့ beginner တွေကျ စလေ့လာခါစမှာ အနားမယူဘဲ အချိန်အကြာကြီး လေ့လာတာဖြစ်ပါတယ်။ ဒီအလေ့အကျင့်ဟာ လူကို ပိုပင်ပန်းစေပြီး လေ့လာပြီးသမျှဟာလည်း ခေါင်းထဲကိုမရောက် ဖြစ်တတ်တာကြောင့် ‌တနေ့ကို နည်းနည်းချင်းစီ ခွဲပြီး လေ့လာတာအကောင်းဆုံးပါ။

🎯 Code တွေကို စာကြောင်းရေအများကြီးမရေးဘဲ သေသေချာချာ စနစ်တကျ variable name တွေပေးတာ၊ comment ရေးတာတွေက ကောင်းမွန်တဲ့ အလေ့အကျင့်တွေ ဖြစ်ပါတယ်။

🎯 စစချင်း code ရေးတည်းက code တွေကို maintain လုပ်ရလွယ်အောင် Git တို့လို version control system တွေ သုံးသင့်ပါတယ်။ ဒါဟာ code ရေးတဲ့နေရာမှာ အခြေခံ ဖြစ်တဲ့အတွက် ကျော်မသွားသင့်ပါဘူး။

Web Development နဲ့ပတ်သက်ပြီး roadmap ကို Creative Coder ရဲ့ Learning Platform မှာလည်း ကြည့်ရှုနိုင်ပါတယ်။

https://creativecodermm.com/path

#creative_coder_myanmar
#website
#mistake
#beginner

အပျင်းပြေ quiz လေးဖြေကြည့်ရအောင်

အဖြေလေးတွေ comment မှာရေးပေးနော်

မနေ့က quiz ကိုဖြေပေးတဲ့သူတွေအကုန်လုံးကို ကျေးဇူးတင်ရှိပါတယ်။

အဖြေမှန်လေးက b ပါ

ဒီနေ့တော့ API အကြောင်းလေးကို ဆက်ပြီးလေ့လာရအောင်

Web Development မှာ API တို့ရဲ့ အခန်းကဏ္ဍ 📝

=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°

API တို့ရဲ့ အခန်းကဏ္ဍဆိုတာ Developer တွေမေ့ထားလို့မရတဲ့ အရာတစ်ခုပါပဲ။

API ရဲ့အရှည်ခေါက်က Application Programming Interfaces ဖြစ်ပါတယ်။ အလွယ်ပြောရရင် Website တစ်ခုတည်ဆောက်တဲ့နေရာမှာ frontend နဲ့ backend ကိုဆက်သွယ်ပေးပြီး လိုအပ်တဲ့ data တွေကိုသယ်ယူပို့ဆောင်ပေးတဲ့အရာလေးတွေဖြစ်ပါတယ်။စားသောက်ဆိုင်တွေမှာကျွန်တော်တို့မှာလိုက်တဲ့ menu ကို chef ဆီကိုယူသွားပေးပြီး chef ဆီကနေ အစားအစာကိုပြန်ယူလာပေးတဲ့ waiter လေးတွေလိုပါပဲ။ ဖုန်းထဲက ဓာတ်ပုံတွေကို drive ထဲကိုပြောင်းတာ၊ drive ကို အခြား device ကနေ sign in ဝင်ပြီးပုံတွေပြန်လည်ရယူနိုင်တာက API တွေရှိလို့ဖြစ်ပါတယ်။
API တွေဟာ ကျွန်တော်တို့ Developer တွေကိုအလုပ်ပိုပြီးအောင် အချိန်မကုန်အောင်လုပ်ဆောင်ပေးပါတယ်။

Developer တွေကောင်မလေးတွေကို ချစ်ရေးဆိုရင် "မင်းက ကိုယ့်ဘဝရဲ့ API လေးပါပဲ" လို့ ပြောကြည့်ပါ။ API တွေက Developer တွေရဲ့ဘဝကိုပိုပြီးလွယ်ကူအောင်လုပ်ဆောင်ပေးပါတယ်။
(ညိုကီတို့အတွက် တစ်ကွက် 🙄)

Website တွေတည်ဆောက်တဲ့နေရာမှာ ပိုပြီးရှုပ်ထွေးတဲ့ function တွေကို ပိုပြီးလွယ်ကူစွာ handle လို့ရအောင်လုပ်ဆောင်ပေးပါတယ်။ API တွေက frontend နဲ့ Backend ကြားမှာ interface လေးအနေနဲ့ဆောင်ရွက်ပေးပါတယ်။ API တွေကိုသုံးမယ်ဆိုရင် ကိုယ်သုံးချင်တဲ့ programming language နဲ့သုံးလို့ရပါတယ်။ Low level programming language နဲ့မသုံးဘဲ API တွေကို high level programming language တွေနဲ့ပိုပြီးလွယ်ကူအောင်အသုံးချလို့ရပါတယ်။
server side နဲ့ client side ကိုဆက်သွယ်ပေးထားတဲ့ API တွေဟာဆိုရင် အလုပ်လုပ်ပုံပေါ်မူတည်ပြီးအမျိုးအစားတွေအများကြီးခွဲထားပါသေးတယ်။
📌 စီးပွားရေးလုပ်ငန်းတွေအတွက် data တွေကိုအဓိကထားပြီးသယ်ပို့ပေးတဲ့ Private API
📌 လူတိုင်း data တွေကို access ရယူခွင့်ရှိတဲ့ Public API
📌 developer အချင်းချင်း လုပ်ငန်းရှင်အချင်းချင်းသာ data တွေမျှဝေနိုင်တဲ့ Partner API
📌 Complex System တွေအတွက် အဓိကထားအသုံးပြုတဲ့ Composite API တို့ပဲဖြစ်ပါတယ်။

API တွေကိုတစ်နေရာနဲ့တစ်နေရာ data တွေသယ်ယူပို့ဆောင်တဲ့နေရာမှာ အဓိကအသုံးပြုကြပါတယ်။ အခြားနေရာတွေလည်းအများကြီးရှိပါတယ်။ platform နှစ်ခုကို ချိတ်ဆက်ဖို့ API ကိုအသုံးပြုကြပါတယ်။ နောက်တစ်ခုက Twitter Bots တွေမှာ task တွေကိုအလိုအလျောက်လုပ်ဆောင်စေဖို့ API ကိုအသုံးပြုပါတယ်။ Travel Booking လုပ်တဲ့နေရာတွေမှာ Website တွေအချင်းချင်းချိတ်ဆက်ပေးဖို့ API ကိုကြားခံအနေနဲ့အသုံးပြုကြပါတယ်။ E-Commerce Website တွေတော်တော်များများမှာဆိုရင်တော့ API သုံးရင်လုံခြုံရေးအတွက်ပိုပြီးလည်းစိတ်ချရပြီး loading speed ကိုလည်းပိုမြန်စေပါတယ်။ API တွေကိုကျွန်တော်တို့သာ သတိမထားမိပေမဲ့ သူကနေ့စဥ်ကျွန်တော်တို့အသုံးပြုနေတဲ့ Software တွေထဲမှာ ပါဝင်ပါတယ်။ Weather snippets တွေ Paypal, Google Map စတာတွေက API အသုံးပြုခြင်းရဲ့ အကောင်းဆုံးဥပမာတွေဖြစ်ပါတယ်။ဒါကြောင့် Software Development တွေမှာ API ကမပါမဖြစ်တဲ့နေရာကနေ ရောက်ရှိလာတာဖြစ်ပါတယ်။

API ဟာ backend-logic ဖြစ်တဲ့အတွက် Backend Language တစ်ခုခုတတ်ထားမယ်ဆိုရင် API ရေးလို့ရပါပြီ။ Data တွေကို Transfer လုပ်ဖို့ အဓိက သုံးတာဖြစ်တဲ့အတွက် ကျွန်တော်တို့ data တွေကိုပို့တဲ့အခါ method တွေကိုသုံးရပါတယ်။ (ဥပမာ - POST, GET စတာတွေဖြစ်ပါတယ်။) အဓိကတော့ data format တွေရယ် Http protocol တွေကိုသိထားဖို့လိုအပ်ပါတယ်။ (ဥပမာ - SOAP,JSON,REST.. )
ပြီးရင်တော့အရှေ့မှာပြောခဲ့တဲ့ backend language တစ်ခုကိုသုံးပြီး စရေးလို့ရပါပြီ။

API တွေကိုသုံးပြီး technologies အချင်းချင်းချိတ်ဆက်ပြီး data တွေ transfer လို့ရပါတယ်။ API တွေကြောင့် ကျွန်တော်တို့ platform တစ်ခုနဲ့တစ်ခု collab လုပ်ရတာပိုပြီးလွယ်ကူလာစေပါတယ်။ Project အကြီးကြီးတွေကို API မပါဘဲတည်ဆောက်ဖို့မဖြစ်နိုင်ပါဘူး။

Developer ကြီးတို့ကရော API ကိုလေ့လာပြီးသွားကြပြီလား ❔

#creative_coder_myanmar