Creative Coder Myanmar
1.38K subscribers
548 photos
1 video
102 links
Web Development ခရီးစဉ်ကို
Creative Coder နှင့်စတင်လိုက်ပါ။🚀
Download Telegram
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
Quizz Time
သင်ဆရာ၊ မြင်ဆရာ၊ ကြားဆရာ အကုန်လုံးကို လေးစားဂုဏ်ပြုလျက်

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

ယနေ့ အောက်တိုဘာလ(၅) ရက်နေ့မှာ ကျရောက်တဲ့ ကမ္ဘာ့ဆရာများနေ့ကို Creative Coder မှ ဦးညွှတ်ဂုဏ်ပြုအပ်ပါတယ်။

ကိုယ်ကျေးဇူးတင်စကားပြောချင်တဲ့ ဆရာ၊ဆရာမတွေရှိရင်လည်း Comment မှာ mention ပြီး ဂုဏ်ပြုစကား‌ပြောလို့ရပါတယ်။

#creative_coder_myanmar
နှစ်ခါစဉ်းစားရင် နောက်ကျသွားမယ်နော် 👀

အခြေခံကနေ စသင်ကြားပေးထားတဲ့ Web Development Foundation အတန်းတွေကို Early Bird Discount နဲ့ အပ်နှံနိုင်ဖို့ အခွင့်အရေးက မကြာခင်ကုန်ဆုံးတော့မှာဖြစ်ပါတယ်။

Web Development အခြေခံသာမကဘဲ React နဲ့ JavaScript ပါထည့်ပြီးသင်ကြားပေးသွားမှာဆိုတော့ Developer Journey ကိုစဖို့ ရယ်ဒီ ဖြစ်စေမှာပါ။

ဒီအတန်းလေးကို အပ်နှံဖို့ အခုပဲ page messenger မှာ စာရင်းပေးလို့ရပါပြီ 👀📝💬

#creative_coder_myanmar
Developer Interview အတွက်ဘာတွေသိထားသင့်လဲ ? 👀

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

Interview ဖြေဖို့ပြင်ဆင်နေတဲ့ Developer ကြီးတွေရှိပါသလား 👀

ဒီနေ့မှာတော့ Interview အတွက် သိထားသင့်တဲ့ Tips & Tricks တွေကို မျှဝေပေးသွားမှာဖြစ်ပါတယ်။

Interview မဖြေခင်မှာ
👉 ကိုယ်အလုပ်လျှောက်ထားတဲ့ company အကြောင်းကို သေချာ research လုပ်ထားပါ။
👉 Interview မှာမေးလာနိုင်တဲ့ ကိုယ့်ရဲ့အတွေ့အကြုံတွေ၊ project တွေ၊ technical knowledge နဲ့ပတ်သက်တဲ့ မေးခွန်းတွေကို သေချာပြင်ဆင်ထားပါ။
👉 လျှောက်ထားတဲ့ job position နဲ့ပတ်သက်ပြီး လိုအပ်တဲ့ expectations တွေ requirements တွေကိုနားလည်အောင်ဖတ်ပါ။

Interview အတွင်းမှာတော့
👉 ကိုယ့်ရဲ့ယုံကြည်ချက်ရှိတဲ့ပုံစံနဲ့ passionate ဖြစ်တဲ့ပုံစံကို ပြသပါ။
👉 မေးခွန်းတွေဖြေတဲ့အခါမှာ Situation, Task, Action, Result စတဲ့ STAR method ကိုသုံးပြီး ပြန်ဖြေခဲ့ပါ။
👉 Coding Test တွေပေးတဲ့နေရာမှာလည်း efficient ဖြစ်ပြီး နားလည်လွယ်တဲ့ code တွေကိုရေးပါ။ ဘက်ပေါင်းစုံကနေစဉ်းစားပြီး အဖြစ်နိုင်ဆုံးအဖြေကို ဖြေဆိုခဲ့လို့ရပါတယ်။
👉 ကိုယ်တတ်ကျွမ်းထားတဲ့ skill တွေကို ရိုးရိုးသားသားချပြပါ။
👉 Company နဲ့ပတ်သက်ပြီး ကိုယ်သိချင်တာတွေကိုလည်း ပြန်မေးဖို့ မမေ့ပါနဲ့။

Coding Test တွေနဲ့ပတ်သက်ပြီး interview မသွားခင် ကြိုလေ့ကျင့်ထားတာမျိုး၊ Developer group တွေမှာ သိချင်တာမျိုးတွေမေးထားလို့ရပါတယ်။

Creative Coder page မှာလည်း Interview နဲ့ပတ်သက်ပြီးမေးမြန်းလို့ရပါတယ်။

Interview pass ကြပါစေလို့လည်း ဆုတောင်းပေးလိုက်ရပါတယ်။

#creative_coder_myanmar
#interview
Polymorphism in OOP

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

အရင်အပတ်က OOP နဲ့ပတ်သက်ပြီး Quiz လေးတင်တာမှတ်မိကြလား‌ဗျို့ 👀

အဖြေမှန်ကို ဒီ post လေးမှာ ပြောပြပေးသွားမှာဖြစ်ပါတယ်။

Polymorphism ဆိုတာ Object-oriented Programming ရဲ့ fundamental concept တစ်ခုပဲဖြစ်ပါတယ်။

Code maintainability နဲ့ reusability အတွက် အသုံး၀င်တဲ့ concept တစ်ခုဆိုရင်လည်းမမှားပါဘူး။

Method overriding နဲ့ Method overloading ဆိုပြီး Polymorphism ရဲ့ type (၂) မျိုးရှိပြီး အသုံး၀င်ပုံလည်းကွာခြားပါတယ်။

Method Overriding က python မှာတွေ့ရတဲ့ common polymorphism type တစ်မျိုးပဲဖြစ်ပါတယ်။

Method overloading ကိုတော့ python မှာ အတွေ့နည်းပေမယ့် အခြား language တွေမှာတွေ့ရတာများပါတယ်။

Polymorphism ကိုအသုံးပြုခြင်းဖြင့် flexible နဲ့ reusable ဖြစ်တဲ့ code တွေရေးသားလာနိုင်မှာပဲဖြစ်ပါတယ်။

နောက်အပတ်တွေမှာ ဘယ်လိုစိတ်၀င်စားဖို့ကောင်းတဲ့ quiz တွေလာဦးမလဲဆိုတာစောင့်ကြည့်ဖို့ မမေ့ကြပါနဲ့နော်👀

#creative_coder_myanmar