Productive ဖြစ်တဲ့ တစ်ပတ်တာကို ဖြတ်သန်းဖို့ ဒီအချက်လေးတွေ လိုက်လုပ်ကြည့်ပါ 📝 [Developer Edition]

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

Developer တို့အနေနဲ့ productive ဖြစ်တဲ့ တစ်ပတ်တာကို ဖြတ်သန်းဖို့ ဒီအလေ့အကျင့်ကနေစတင်နိုင်ပါတယ်။

👉 ကြိုတင်စီစဉ်ပါ။

ဒီတစ်ပတ်အတွင်း ဘာလုပ်ရမယ်၊ ဘယ်လိုတာ၀န်တွေရှိတယ်၊ ဘယ်နေ့တွေမှာလုပ်ရမယ်ဆိုတာကို ကြိုပြီးစီစဉ်ထားပါ။ ဒီလိုတွေအတွက် Notion ကို recommend ပေးပါတယ်။

👉 Task သေးသေးလေးတွေခွဲပါ။

Trello, Asana စတဲ့ project management tool တွေသုံးပြီး တစ်ပတ်တာအတွက် ပြုလုပ်ရမယ့် task တွေကို ခွဲခြမ်းစိတ်ဖြာနိုင်ပါတယ်။ ဒီလိုလုပ်ခြင်းအားဖြင့် အလုပ်လည်းပိုပြီးသလို task တွေလည်းကျန်ခဲ့တော့မှာမဟုတ်ပါဘူး။

👉 Work Habit ကောင်းကောင်းကို ကျင့်သုံးပါ။

အာဟာရရှိတဲ့ အစားအစာတွေစားတာ၊ အိပ်ရေး၀၀အိပ်တာ၊ ရေဓာတ်ပြည့်၀အောင်နေတာ၊ လေ့ကျင့်ခန်းပုံမှန်ပြုလုပ်တာတွေကလည်း productive ဖြစ်စေဖို့အရေးပါပါတယ်။

👉 ကောင်းတဲ့ mindset တွေနဲ့ ကိုယ့်ကိုယ်ကိုယ် motivate ဖြစ်အောင်နေပါ။

Task တစ်ခုပြီးတိုင်း ကိုယ့်ကိုယ်ကိုယ်ပြန်ဆုချတာမျိုး၊ ကိုယ့်ကိုယ်ကိုယ်ယုံကြည်တဲ့စိတ်ကို အမြဲထည့်ထားပါ။


ကဲ.. ဒီအချက်လေးတွေကနေတစ်ဆင့် productive ဖြစ်တဲ့ week တစ်ခုကိုစတင်လို့ရပါတယ်။

#creative_coder_myanmar

Web Developer တို့အတွက် Accessibility Tips & Tricks

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

Web Design မှာ ဝင်ရောက်အသုံးပြုနိုင်မှု (Accessibility) ဆိုတာက‌တော့
သုံးစွဲသူတိုင်း လွယ်ကူစွာ ဝင်ရောက်အသုံးပြုနိုင်ရန် ထုတ်လုပ်ထားတဲ့နည်းပညာ တစ်ခုပဲဖြစ်ပါတယ်။
အထူးသဖြင့် မျက်မမြင်၊ နားမကြားနဲ့ တခြားကိုယ်ခန္ဓာအားနည်းချက်များရှိသူများအတွက်ပါ Website များကိုလွယ်လွယ်ကူကူ ၀င်ရောက်အသုံးပြုနိုင်ရန်ရည်ရွယ်ပါတယ်။

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

Web Developer တွေအနေနဲ့လည်း ဒီအချက်လေးတွေကို လိုက်လုပ်ပြီး accessibility ကောင်းတဲ့ website တစ်ခုတည်ဆောက်ကြည့်နိုင်ပါတယ်။

👉Semantic HTML အသုံးပြုပါ။

Semantic HTML က Website စာမျက်နှာမှာ ပါဝင်တဲ့ အချက်အလက်များကို ပုံမှန်အတိုင်း မြင်ရစေတာကြောင့် စာမျက်နှာ၏ ဖွဲ့စည်းပုံကို Screen Reader များအတွက် လွယ်ကူစွာ ဖတ်ရှုနိုင်စေမှာဖြစ်ပါတယ်။

<div> နှင့် <span> စတဲ့ tag များကို အသုံးမပြုဘဲ <header>, <main>, <article>, <footer> စတဲ့ သတ်မှတ်ထားသော tag များကို သင့်တော်တဲ့နေရာမှာ အသုံးပြုနိုင်ပါတယ်။

👉အရောင်များနှင့် Contrast ကို စဉ်းစားပါ။

Color Blind ရှိသူများအတွက် နောက်ခံနဲ့ စာသားအရောင်များကြား မှာ contrast ထည့်လို့ရပါတယ်။

W3C ရဲ့ Web Content Accessibility Guidelines (WCAG) မှာလည်းသွားရောက်ကြည့်ရှုနိုင်ပါတယ်။

👉Alt Text (Alternative Text) ထည့်သွင်းရေးသားပါ

မည်သည့် audience အတွက်မဆို ရုပ်ပုံများနဲ့ သက်ဆိုင်ရာ အချက်အလက်များကို အလွယ်တကူ နားလည်နိုင်ရန်အတွက် ရုပ်ပုံတိုင်းမှာ ရည်ရွယ်ချက်ကိုဖော်ပြတဲ့ alt text ရေးသားနိုင်ပါတယ်။

👉 Multimedia အတွက် စာသားဖော်ပြချက်ထည့်ပါ။

နားကြားမရသူများနဲ့ အတွက် အသံဖိုင်များနဲ့ ဗီဒီယိုများကို ဖတ်ရှုနိုင်စေဖို့ Captions နှင့် Transcriptions တွေကိုလည်းထည့်သွင်းပေးနိုင်ပါတယ်။

ကဲ.. ဒါဆိုရင်တော့ Developer တို့အတွက် accessibility website တွေဖန်တီးရာမှာ လိုအပ်တဲ့အချက်အလတ်တွေကိုပြောပြခဲ့တာဖြစ်ပါတယ်။

အခြား developer သူငယ်ချင်းတွေသိသွားအောင် share ပေးဖို့လည်းမမေ့ကြနဲ့နော် 👀

#creative_coder_myanmar
#accessibility

Page messenger ကနေအတန်းအပ်နှံနိုင်ပါပြီ

Quiz Time 👀

အပြောနဲ့မဟုတ် အလုပ်နဲ့သက်သေပြတာ Creative Coder

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

တတ်မြောက်မှုကိုသာ ဦးစားပေးသင်ကြားတဲ့ Creative Coder ရဲ့ အတန်းတွေဟာ သင်ယူပြီးရင် လက်တွေ့ လုပ်ငန်းခွင်မှာ အသုံးချတတ်ဖို့ကိုလည်းရည်ရွယ်ပါတယ်။

ဒါကြောင့် အတန်းတိုင်းမှာ Practical Project တွေလည်းပါ၀င်ပြီး ကျောင်းသားတွေကိုယ်တိုင် တွေးတတ်၊ရေးတတ်လာအောင် သင်ကြားပေးတာဖြစ်ပါတယ်။

အခုလက်ရှိဖွင့်လှစ်ထားတဲ့ Web Development Foundation အတန်းမှာဆိုရင်လည်း လက်တွေ့ project တွေကိုထည့်သွင်းပေးထားပါတယ်။

သင်တော့ သင်လိုက်တယ် ဒါပေမယ့် သင်တန်းပြီးတဲ့ အချိန်ကျရင် လက်တွေ့မှာ ပြန်လည်အသုံးမချတတ်တာမျိုးမဖြစ်ရလေအောင် ကျွန်တော်တို့ Cretaive Coder မှာကျောင်းသားတွေ သင်ပြီးသမျှအသုံးချနိုင်စေဖို့ လက်တွေ့ project များစွာစီစဉ်ပေးထားပါတယ်။

သင်တန်းတစ်ခုလုံးမှာ စာသင်ရင်း Instructor နဲ့အတူ လုပ်ရမယ့် project တွေအပြင် ‌သင်တန်းအပြီးမှာ ကိုယ်တိုင်လုပ်ရမယ့် final project တွေနဲ့စုစုပေါင်း project (၁၀) ခုအထိရှိမှာပဲဖြစ်ပါတယ်။

Project အသေးတွေမှာဆိုရင်တော့ card design , table design နဲ့ animation တွေပါ၀င်လုပ်ဆောင်ပေးရမှာဖြစ်ပြီး သင်ပြီးသမျှသင်ခန်းစာထဲက အရေးကြီးတဲ့ သင်ခန်းစာတစ်ခုပြီးတိုင်း စာထဲကဟာကိုလက်တွေ့ အသုံးချလို့ရတဲ့ project တွေပြုလုပ်သွားရမှာဖြစ်ပါတယ်။

Project အကြီးအနေနဲ့ဆိုရင်
👉 HTML / CSS နဲ့တစ်ခု
👉 Bootstrap နဲ့တစ်ခု
👉 Tailwind project

တွေရေးသားရမှာဖြစ်ပါတယ်။

Final Project အနေနဲ့ဆိုရင်တော့ eCommerce site ရေးရမှာဖြစ်ပြီး project ရဲ့အခြေအနေပေါ်မူတည်ကာ သင်တန်းအောင်မြင်စွာပြီးဆုံးကြောင်း Certificate ထုတ်ပေးသွားမှာပဲဖြစ်ပါတယ်။

အမှန်တကယ်စာလုပ်ပြီး သင်တန်းပြီးတဲ့အခါ ကျွမ်းကျင်စွာတတ်မြောက်သွားချင်တယ်ဆိုရင်တော့ အခြေခံခိုင်မာဖို့အတွက် Creative Coder မှာ သင့်ရဲ့ web development ခရီးစဉ်ကို စတင်လိုက်ပါ💯

အခုလက်ရှိဖွင့်လှစ်ထားတဲ့ Web Development Foundation In Class အတန်းလေးကို early bird Discount နဲ့အပ်နှံလို့ရသေးကြောင်းလည်းသတင်းကောင်းပါးအပ်ပါတယ်။

#creative_coder_myanmar

Thank you all for answering the quizzz

Inertia ကိုလေ့လာဖို့အတွက် Free Resources 📝

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

Inertia ဆိုတာက Single Page Application တွေတည်ဆောက်တဲ့နေရာမှာ api တွေမလိုဘဲတည်ဆောက်လို့ရအောင်ပြုလုပ်ပေးထားတဲ့ modern monolith တစ်ခုဖြစ်ပါတယ်။ Laravel တို့ Vuejs တို့နဲ့တွဲသုံးလို့ရပေမယ့် framework တစ်ခုတော့မဟုတ်ပါဘူး။ Laravel တို့ Vuejs တို့ကိုသုံးပြီး project တွေတည်ဆောက်တဲ့နေရာမှာ SPA တွေပိုပိုလွယ်ကူ အဆင်ပြေစွာတည်ဆောက်နိုင်ဖို့အတွက် Inertia ကိုအသုံးပြုကြပါတယ်။
Inertia က Laravel နဲ့ရော Vue နဲ့ပါချိတ်ဆက်ထားတာမျိုးမရှိပေမဲ့ သူ့ကို Vue နဲ့ Laravel အတွက် adapter အနေနဲ့သုံးလို့ရပါတယ်။ React နဲ့တွဲသုံးမယ်ဆိုလည်း အဆင်ပြေပါတယ်။ သူ့ကို server side framework တွေနဲ့ client side framwork တွေကြားဆက်သွယ်ပေးမယ့် tools လေးတစ်ခုအနေနဲ့ သဘောထားပြီးမြင်ကြည့်လို့ရပါတယ်။

Inertia ကိုသုံးမယ်ဆိုရင် ကျွန်တော်တို့ program ထဲက traditional controllers တွေ routing တွေ middleware နဲ့ authentication တွေ authorization တွေကို ဘာမှပြောင်းလဲစရာမလိုဘဲ အသုံးပြုလို့ရမှာဖြစ်ပါတယ်။
Inertia ကိုအသုံးပြုထားတဲ့ page တစ်ခုမှာကျွန်တော်တို့ button တွေ click ကြည့်တဲ့အခါ ကျွန်တော်တို့ broswer အပေါ်ပိုင်းနားမှာရှိတဲ့ loading tab လေးက တစ်ခုကိုနှိပ်တိုင်း တစ်ခါ loading ပြန်မလုပ်ပါဘူး။ ဒါကို အချို့ website တွေမှာ သတိထားကြည့်မယ်ဆိုရင်တွေ့နိုင်မှာဖြစ်ပါတယ်။
Inertia က SPA တွေရဲ့ loading speed ကိုလည်းပိုပြီးတော့မြန်စေပါတယ်။

Inertia မသုံးထားတဲ့ Website နဲ့သုံးထားတဲ့ Webiste ကိုယှဥ်ကြည့်ကြရအောင် 👀
Developer tools ထဲက network tab ကိုဖွင့်ကြည့်မယ်ဆိုရင် ကျွန်တော်တို့ click လိုက်တိုင်းမှာ loading လုပ်နေတဲ့ assets တွေကိုတွေ့ရမှာဖြစ်ပါတယ်။ ဥပမာ -Creative Coder website မှာကျွန်တော်တို့ Sign up button လေးကိုနှိပ်မယ်ဆိုရင်တစ်ခါ full reload လုပ်မယ်။ forget password ကိုနှိပ်လိုက်မယ်ဆိုရင်လည်းတစ်ခါ full reload လုပ်မှာဖြစ်ပါတယ်။ ဒါကတော့ ကျွန်တော်တို့ သိထားတဲ့ SPA တွေရဲ့ပုံစံမျိုးမဟုတ်ပါဘူး။
ဒါဆို Inertia သုံးလိုက်ရင်ရော ဘာတွေပြောင်းလဲသွားမလဲ❔
ခုနက ကျွန်တော်တို့ sign in ကိုနှိပ်မယ် ပထမဆုံးတစ်ခါ full reload လုပ်မယ်။ ဒါပေမဲ့ နောက်တစ်ခါ forget password ကိုနှိပ်တဲ့အခါ ခုနကထက် speed ပိုမြန်သွားပြီး full reload လည်းလုပ်စရာမလိုဘဲ ခုနက ကျွန်တော်တို့ နှိပ်လိုက်တဲ့အပိုင်းကိုသာ reload လုပ်ပေးသွားမှာဖြစ်ပါတယ်။

SPA တွေဖန်တီးဖို့ဆိုရင် frontend ပိုင်းမှာ routing system တွေလိုအပ်မယ်။ backend ပိုင်းမှာဆိုရင်တော့ api တွေလိုအပ်လာပါလိမ့်မယ်။ ပုံမှန်အတိုင်းဆို router တွေနဲ့ link ချိတ်ထားရတာတွေရှိမယ်။ ပြီးရင်တော့ main component တွေ content တွေရှိပါမယ်။ component တစ်ခုချင်းစီအတွက် route တစ်ခုစီဖန်တီးပေးရမှာဖြစ်ပါတယ်။ ဒါကြောင့် page တစ်ခုချင်းစီအတွက် ကျွန်တော်တို့ component တစ်ခုချင်းစီဖန်တီးပေးရတော့မှာဖြစ်ပါတယ်။
Inertia ကိုသုံးလိုက်တဲ့အခါမှာတော့ api တွေကိုလည်းအသုံးပြဖို့ မလိုအပ်တော့မှာဖြစ်သလိုပိုမိုလည်းလွယ်ကူသွားစေနိုင်ပါတယ်။
laravel မှာဆိုရင်လည်း Inertia ကိုအသုံးပြုခြင်းဖြင့် api တွေကိုအသုံးပြုဖို့မလိုအပ်တော့ပါဘူး။
Inertia render ကိုသုံးပြီး laravel controller ကနေ Vue page component ကိုတန်းခေါ်နိုင်ပါတယ်။ ဒါက inertia ရဲ့အနှစ်ပါ။လိုတဲ့ data တွေကိုလဲ ပုံမှန် laravel blade view ကို data pass သလို pass ပေးပြီး Vue ဘက်မှာ prop နဲ့တန်းလက်ခံထုတ်ပြန်ိုင်ပါတယ်။
route တစ်ခုစီအတွက် API တစ်ခုချင်းစီကိုလည်း create လုပ်စရာမလိုတော့သလို
Authentication တွေ Authorization တွေကိုလည်း create လုပ်စရာမလိုတော့ပါဘူး။

Inertia ကိုသုံးပြီး data တွေ backend ကနေ frontend ကိုပို့တဲ့နေရာမှာ အလုပ်တွေအများကြီးလုပ်ပေးစရာမလိုတော့ပါဘူး။
အရှေ့မှာပြောခဲ့သလိုပဲ inertia ကိုသုံးပြီး vue component တွေကိုခေါ်ယူအသုံးပြုလို့လည်းရပါတယ်။ ကျွန်တော်တို့ code ရေးတဲ့အခါ quality ကောင်းဖို့လည်းဦးစားပေးရသလို user တွေသုံးရအဆင်ပြေစေဖို့လည်းဦးစားပေးစဥ်းစားရပါတယ်။ Inertia ကိုသုံးပြီး SPA တွေကိုလွယ်ကူစွာ ဖန်တီးနိုင်ပြီး loading လုပ်ရာမှာလည်းပိုပြီးမြန်ဆန်စွာလုပ်ဆောင်နိုင်လာပါပြီ။
ဒါကြောင့် Developer ကြီးတို့က backend နဲ့ frontend ကိုလွယ်လွယ်ကူကူအသုံးပြုလို့ရအောင်ချိတ်ဆက်ပေးတဲ့ tools လေးတစ်ခုလိုအပ်နေတယ်ဆိုရင်တော့ modern monolith လေးဖြစ်တဲ့ Inertia ကအသင့်တော်ဆုံးပါပဲ။ သူက adapter တစ်ခုဖြစ်တဲ့အတွက် Vue နဲ့ lararvel တင်မဟုတ်ဘဲ အခြား framework တွေနဲ့လည်းတွဲသုံးလို့ရပါသေးတယ်။

Inertia ကိုလေ့လာဖို့အတွက် Resource တွေကတော့
👉 https://laravel.com/docs/10.x/starter-kits#inertia

👉 https://github.com/inertiajs/inertia

👉 https://inertiajs.com/

တွေပဲဖြစ်ပါတယ်။

အခြား Developer တွေသိသွားအောင်လည်း sharing လုပ်ပေးဖို့မမေ့ကြနဲ့နော် 👀

Web Development Foundation အတန်းအတွက် ကျောင်းသားတို့ရဲ့ Feedback 📝

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

အခြေခံကနေ တွေးတတ်ခေါ်တတ်ပြီး code ရေးတတ်အောင် သင်ကြားပေးထားတဲ့ Web Development Foundation Class လေးက October လအထဲမှာ batch အသစ်ပြန်စတော့မှာဖြစ်ပါတယ်။

Batch (6) မှာတက်ရောက်ခဲ့ကြတဲ့ ကျောင်းသားတွေရဲ့ review တွေကို ပုံမှာကြည့်ရှုနိုင်ပါတယ်။

Early Bird Discount လေးလည်းရှိသေးတာမို့ အတန်းအပ်မယ်ဆို page messenger ကနေတဆင့် အပ်နှံနိုင်ပါပြီ။

#creative_coder_myanmar
#website

Deep Copy VS Shallow Copy

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

Programming နယ်ပယ်မှာ ခဏခဏ ကြားဖူးနေကြဖြစ်တဲ့ Deep Copy နဲ့ Shallow Copy ကဘာကွာလဲ‌ဆိုတာ ကြည့်လိုက်ရအောင် 👀

သူတို့ကို object တွေ create လုပ်တဲ့နေရာမှာအသုံးပြုကြပြီး ကိုယ့်ရဲ့ code behavior ကို သိနိုင်ပါတယ်။

📝 Shallow Copy ဆိုတာကတော့ original object ကို reference ယူပြီး ဖန်တီးထားတဲ့ object အသစ်ပဲဖြစ်ပါတယ်။ တကယ်လို့ original object မှာ အပြောင်းအလဲရှိမယ်ဆိုရင် copy ထားတဲ့ object မှာပဲ reflect ဖြစ်မှာဖြစ်ပါတယ်။

📝 Deep Copy ဆိုတာကတော့ object အသစ်တစ်ခုဖန်တီးထား‌တာဖြစ်ပြီး အရင် object က content တွေ nested object တွေကိုပါ တစ်ခါတည်းဖန်တီးလိုက်တာဖြစ်ပါတယ်။ original object တွေမှာအပြောင်းအလဲလုပ်လိုက်ရင် copy object မှာ ပြောင်းလဲသွားမှာမဟုတ်ပါဘူး။ ဒါကြောင့် အသစ်ဖန်တီးလိုက်တဲ့ object က independent ဖြစ်ပါတယ်။

Code example အနေနဲ့

import copy

# Create a list of lists
original_list = [[1, 2], [3, 4]]

# Shallow copy
shallow_copy = original_list.copy()

# Deep copy
deep_copy = copy.deepcopy(original_list)

# Modify the original list
original_list[0][0]
= 5

print("Original list:", original_list)
print("Shallow copy:", shallow_copy)
print("Deep copy:", deep_copy)

ဒီ code လေးရဲ့ output ကိုကြည့်မယ်ဆိုရင်တော့

Original list: [[5, 2], [3, 4]]
Shallow copy: [[5, 2], [3, 4]]
Deep copy: [[1, 2], [3, 4]]

Original list နဲ့ Shallow Copy ကတူနေမှာဖြစ်ပြီး Deep copy ကသာ list အသစ်အနေနဲ့ထွက်လာမှာဖြစ်ပါတယ်။

ဒါဆိုရင် Deep Copy နဲ့ Shallow Copy အကြောင်းရှင်းသွားလောက်ပြီထင်ပါတယ်။

နောက် content တွေမှာပြန်တွေ့ကြမယ်နော် 👀

#creative_coder_myanmar