Creative Coder Myanmar
1.38K subscribers
548 photos
1 video
102 links
Web Development ခရီးစဉ်ကို
Creative Coder နှင့်စတင်လိုက်ပါ။🚀
Download Telegram
Creative coder platform မှာ ကိုယ် ဘယ် Level ရောက်နေကြပြီလဲဗျို့။ နောက်ပိုင်း Pro Level & Legendary level ထိရောက်လာရင် course လက်ဆောင်လေးတွေပေးသွားပါမယ်ဗျ။
PHP Laravel အတန်းလေး တစ်ပတ်ခါဆို အတန်းစပြီဖြစ်ပါတယ်ခင်ဗျာ။🎉 ကျောင်းသားတော့ နောက်ဆုံး ၁ ယောက်ပဲ ထပ်အပ်လို့ရပါတော့မယ်ဗျ။

VPN စိတ်ပူစရာမလိုအောင် Telegram & Zoom ပဲသုံးသွားပါမယ်။
Video Record တစ်ရက်စာစီတိုင်း Telegram ကနေ ပြန်ပေးသွားပါမယ်။
စာပြန်လုပ်ရင်း အခက်ခဲတခုခုရှိရင် one on one meeting နဲ့ စာပြန်မေးနိုင်ပါမယ်။

ကျနော်တို့ဘက်က ရှယ် Service တွေနဲ့ လေ့လာသူများ အဆင်ပြေအောင်လုပ်ပေးထားပါတယ်။ ❤️

အသေးစိတ် information ကို ဒီကကြည့်ပါ။

https://www.facebook.com/100064708297617/posts/pfbid0QKBWrP5ffhcoBWc9e1iFeL1QEUCGkx8DL1i37bQESL2543WnyycFJ89hucJ8Rz8sl/
AI တို့ရဲ့ သမိုင်းကြောင်းအစ 📝

အခုဆိုရင် လူတိုင်းလိုလိုရဲ့ ပါးစပ်ဖျားမှာ AI AI ဆိုတာ ပြောလာကြတာကို တွေ့ရမှာဖြစ်သလို AI ကလည်း ကျောင်းသုံး၊ ရုံးသုံးကိစ္စတွေမှာပါ အသုံးများလာတာကို တွေ့ရမှာပါ။

သူတို့တွေ ဖြစ်ပေါ်လာပုံရဲ့သမိုင်းကြောင်းကို ကြည့်မယ်ဆိုရင် 
လူတွေရဲ့ အသိဉာဏ်လို အသုံးပြုနိုင်တဲ့ စက်တစ်ခုကို တီထွင်ခဲ့တဲ့ idea ကနေအစပြုရမှာပါ။ ၁၉၅၀ ခုနှစ်မှာ သချာ်ပညာရှင် Alan Turing ကနေ Computing Machinery and Intelligence ဆိုတဲ့ paper တစ်ခုကိုတင်ပြခဲ့ပါတယ်။ သူ့ရဲ့ရည်ရွယ်ချက်ကတော့ စက်တစ်ခုက လူတစ်ယောက်ရဲ့အသိဉာဏ်နဲ့ အပြုအမူတွေကို ပုံတူကူးထားနိုင်လားဆိုတာ သိရှိရဖို့ဖြစ်ပါတယ်။

‌၁၉၅၆ မှာပြုလုပ်ခဲ့တဲ့ Dartmouth Conference မှာတော့ သိပ္ပံပညာရှင်တွေစုစည်းပြီး AI စတင်ဖန်တီးနိုင်မှုကို ဆွေးနွေးခဲ့ကြပါတယ်။ ၁၉၆၀ နဲ့ ၁၉၇၀ နှောင်းပိုင်းမှာ တီထွင်မှုတွေကို စတင်ပြုလုပ်ခဲ့ကြပြီး စိန်ခေါ်မှု၊ အခက်အခဲများစွာကိုလည်း ကြုံတွေ့ခဲ့ကြရပါတယ်။ ၁၉၈၀ နဲ့ ၁၉၉၀ ကာလတွေအရောက်မှာတော့ Machine Learning နဲ့ Algorithm တွေကိုအသုံးပြုလာခဲ့ကြပါတယ်။ 

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

Developer ကြီးတို့ကရော AI ရဲ့တိုးတက်လာမှုတွေကို ဘယ်လိုထင်ပါသလဲ?

Comment မှာဆွေးနွေးပေးသွားကြပါဦးနော် 👀

#creative_coder_myanmar
#artifical_intelligence
Creative Coder Website မှာ Live Chat Feature နဲ့ စုံစမ်းမှုပြုလုပ်နိုင်ပါပြီ 🥳

အတန်းအကြောင်းစုံစမ်းချင်တာလား ?
စာမေးချင်တာလား?

သိချင်တာတွေအကုန်လုံးကိုအဖြေရှာဖို့အတွက် Creative Coder Website မှာ Live Chat Feature လေးကို မိတ်ဆက်လိုက်ပြီပဲဖြစ်ပါတယ်။
ဒီ feature မှာဆိုရင် website မှာတင် admin နဲ့ကိုယ်တိုင်စကားပြောနိုင်ပြီး ဆက်သွယ်စုံစမ်းမှုတွေပြုလုပ်နိုင်မှာဖြစ်ပါတယ်။

အသေးစိတ်ရှင်းပြထားတဲ့ အကြောင်းအရာကို ပုံတစ်ပုံချင်းစီကိုနှိပ်ပြီး ကြည့်ရှုနိုင်ပါတယ်။

http://creativecodermm.com
Recoil နဲ့ Redux တို့ဟာ React Ecosystem မှာရှိတဲ့ state management library တွေပဲဖြစ်ပါတယ်။ ဒါပေမယ့် သူတို့ကိုအသုံးချမှုနဲ့ design ပေါ်မူတည်ပြီးကွဲပြားမှုလေးတွေရှိနိုင်ပါတယ်။

👉 Recoil ကတော့ Facebook က develop လုပ်ခဲ့တဲ့ state management library အသစ်တစ်ခုဖြစ်ပါတယ်။ React Application တွေမှာပါ၀င်တဲ့ state တွေကို လွယ်ကူစွာ manage လုပ်နိုင်ဖို့ရည်ရွယ်ပါတယ်။

သူ့ရဲ့ key feature တွေကတော့ atom တွေနဲ့ selector တွေပဲဖြစ်ပါတယ်။ atom တွေက react ရဲ့ဘယ် component တွေကိုမဆိုဖတ်နိုင်ပြီး selector ကတော့ complex ဖြစ်တဲ့ state logic တွေကို ထိန်းချုပ်ဖို့အသုံးပြုပါတယ်။

Recoil မှာဆိုရင် state တစ်ခုချင်းစီကို ထိန်းချုပ်တဲ့နေရာမှာ တစ်ခုချင်းစီကို လွတ်လပ်စွာ ထိန်းချုပ်နိုင်တာကြောင့် ထိန်းသိမ်းဖို့လွယ်ကူပါတယ်။

Performance ပိုင်းမှာဆိုရင်လည်း component တွေကို re-render လုပ်တာက state ပြောင်းတဲ့အပေါ်မူတည်တာကြောင့်
မလိုအပ်ဘဲ rendering လုပ်တာတွေကို လျှော့ချပေးပြီး လုပ်ဆောင်မှုကို ပိုအားကောင်းစေပါတယ်။

နောက်အချက်ကတော့ atom သို့မဟုတ် selector ကနေတဆင့် တစ်ခုခုပြောင်းလဲလိုက်ရင် subscribe ဖြစ်ပြီးသား component တွေကိုပါ အကုန် update ဖြစ်သွားစေပါတယ်။

Recoil ကို state တစ်ခုချင်းစီ ခွဲခြားပြီး
manage လုပ်ဖို့လိုတဲ့အခါ အသုံးပြုကြပါတယ်။

👉 Redux ကတော့ Javascript ရဲ့ state management library တစ်ခုဖြစ်ပြီး ခန့်မှန်းရလွယ်ကူတဲ့ container pattern တွေနဲ့ data flow တွေပါ၀င်ပါတယ်။

Redux က application တစ်ခုလုံးကို store တစ်ခုတည်းမှာတင် ထိန်းချုပ်ပေးတာဖြစ်ပါတယ်။

Redux မှာပါ၀င်တဲ့ action တွေ reducers တွေက type , reload တွေနဲ့အတူ state ပြောင်းလဲမှုကို ဖော်ပြပေးပြီး pure function တွေကနေတဆင့် current state ကနေ new state တစ်ခုကို return ပြန်ပေးပါတယ်။ Reducers တွေဟာ state ပြောင်းလဲမှုအပေါ်ဖြစ်ပေါ်တဲ့ response action တွေကိုလည်း ဖော်ပြပေးပါတယ်။

Redux မှာပါ၀င်တဲ့ middleware တွေက logging, asynchronous action နဲ့ side effects management စတဲ့အပိုင်းတွေအတွက် လုပ်ဆောင်မှုအပိုင်းကို ပိုပြီးကောင်းစေပါတယ်။

Redux မှာ developer tool တွေ၊ plugin တွေ၊ extension တွေလည်းပါ၀င်တာကြောင့် debugging, testing နဲ့ functionality ပိုင်းမှာ အဆင်ပြေစေမှာပါ။

တစ်ခုရှိတာက sync function အပိုင်းမှာဆိုရင် Recoil မှာက built in support အနေနဲ့ပါပြီးသားဖြစ်ပါတယ်။ Redux မှာဆိုရင်တော့ တိုက်ရိုက်အသုံးပြုလို့မရဘဲ thunk ကိုလိုအပ်ပါတယ်။

Redux ကိုအသုံးပြုတဲ့နေရာတွေကတော့ complex ဖြစ်တဲ့ state တွေပါ၀င်တဲ့ large-scale application တွေကို manage လုပ်ဖို့အသုံးပြုကြပါတယ်။

Developer တို့အတွက် Redux နဲ့ React အပေါ်ရွေးချယ်မှုကတော့ ကိုယ်အသုံးပြုနေတဲ့ application ပေါ်မှာပဲ အဓိကမူတည်သွားမှာပါ။

React Developer ကြီးတို့ကရော ကိုယ်ကဘာကိုအသုံးပြုနေလဲဆိုတာ comment မှာရေးပေးသွားကြပါဦးနော် 💬👀

#creative_coder_myanmar
Website မှာ အခမဲ့ လေ့လာလို့ရတဲ့ PHP Solid Design Course 🥳🎉

Website မှာ အသစ်ရောက်နေတဲ့ Course လေးအကြောင်းသိပြီးကြပြီလား Developer ကြီးတို့ရေ

Developer တို့အနေနဲ့ အလုပ်ထဲမှာ ကျစ်လစ်ပြီး maintain လုပ်ရလွယ်တဲ့ code တွေရေးတတ်ဖို့အတွက် PHP Solid Design Principle ကိုသိထားခြင်းက အထောက်အကူပြုပါလိမ့်မယ်။

PHP basic & OOP အခြေခံရှိထားသူတိုင်း ဒီအတန်းလေးကိုတက်ရောက်နိုင်ပါတယ်။

🔥 OOP concept တွေကို ပိုပြီး နားလည်ချိတ်ဆက်ပြီး မြင်သွားနိုင်ဖို့
🔥 Maintain လုပ်ရတာပိုလွယ်ကူတဲ့ Flexible ဖြစ်တဲ့ code တွေပိုရေးသားလာနိုင်ဖို့
🔥 အလုပ်ထဲမှာ PHP Design Principle တွေသုံးထားရင် စိမ်းနေမှာ မဟုတ်တော့ပဲ နားလည်နေစေဖို့ ရည်ရွယ်ပါတယ်။

Course Outline အနေနဲ့ကတော့
👉 Single Responsibility
👉 Open Closed Principle
👉 Liskov Substitution Principle
👉 Interface Segregation
👉 Dependency Inversion တို့ပဲဖြစ်ပါတယ်။

အတန်းပြီးရင် Creative Coder Certificate လေးပါထုတ်ယူနိုင်ဦးမှာဖြစ်ပါတယ်။

ဒီ course လေးကို တက်ရောက်ဖို့အတွက်ဆိုရင်တော့
👉 creativecodermm.com ကိုသွားပြီး register လုပ်ပြီး free course တွေစလေ့လာလို့ရပါပြီ။
👉 register လုပ်ပြီးသွားတဲ့သူတွေကတော့
https://creativecodermm.com/courses/php-solid-design-principle
ကနေ၀င်ပြီးလေ့လာလိုက်ရုံပါပဲ။

Certificate တွေစုပြီး Level up နိုင်မယ့် Game Level Up Feature လေးလည်းရှိတာကြောင့် assignment တွေလုပ်ပြီး certificate တွေယူထားဖို့မမေ့နဲ့နော် 👀

#creative_coder_myanmar
#php
Image Upload တဲ့နေရာမှာ Developer တို့ကို အကူအညီပေးနိုင်တဲ့ function တစ်ခု

Developer တို့အနေနဲ့ Web Application တွေတည်ဆောက်တဲ့နေရာမှာ handleImageUpload function လေးက ကိုယ်တင်လိုက်တဲ့ image တွေကို preview ကြည့်လို့ရအောင်လုပ်ပေးပါတယ်။
Example code အနေနဲ့ကတော့

function handleImageUpload(inputElement, previewElement) {
inputElement.addEventListener('change', function() {
const file = this.files[0]; // Get the selected file
if (file) {

if (!file.type.startsWith('image/')) {
console.log('Selected file is not an image.');
return;
}

const reader = new FileReader();
reader.onload = function(e) {
previewElement.src = e.target.result;
};
reader.readAsDataURL(file);

} else {
previewElement.src = '';
}
});
}
ဒီ code လေးမှာဆိုရင် ပထမဆုံး handleInamgeUpload function နဲ့အတူ parameter နှစ်ခုပါ၀င်ပါတယ်။ ပထမတစ်ခုက inputElement ဖြစ်ပြီး ဒုတိယတစ်ခုကတော့ previewElement အတွက်ပါ။

function handleImageUpload(inputElement, previewElement) {

ပြီးရင်တော့ file input change အတွက် eventlistener ကိုထည့်သွင်းထားပါတယ်။ user ဆီက file ကိုလက်ခံတဲ့အခါ event change သွားရင်အသုံးပြုတာဖြစ်ပါတယ်။

ပြီးရင်တော့ ပထမဆုံး const file နဲ့ user ရွေးထားတဲ့ file ကိုလက်ခံပါတယ်။ if condition နဲ့ file ကိုရွေးချယ်ပြီးပြီလားဆိုတာ စစ်ဆေးပါတယ်။ file က message မဟုတ်ဘဲ image ဖြစ်တယ်ဆိုရင်တော့ function ကိုအသုံးပြုပါတယ်။

const file = this.files[0]; // Get the selected file
if (file) {
// Check if the selected file is an image
if (!file.type.startsWith('image/')) {
console.log('Selected file is not an image.');
return;
}

ဒီအဆင့်မှာတော့ image preview အတွက် file reader ကလုပ်ဆောင်ပေးပါတယ်။

တကယ်လို့ user က ဘာ file မှ မပို့ဘူးဆိုရင်တော့ previewElement ရဲ့ src attribute ကနေ preview ကိုဖယ်ပေးမှာပါ။

} else {
previewElement.src = ''; // Clear the preview if no file selected
}
});
}

example အနေနဲ့

const uploadInput = document.getElementById('uploadInput'); ကနေတစ်ဆင့် file input element ကိုသူ့ရဲ့ ID ကနေတစ်ဆင့် ရယူပေးပါတယ်။

နောက်တစ်ဆင့်ကတော့

const previewImage = document.getElementById('previewImage');

ကနေ image element ကိုရယူပါတယ်။

နောက်ဆုံးမှာတော့

handleImageUpload(uploadInput, previewImage);

ကနေ handleImageUpload function ကိုခေါ်ပြီး image review ကိုပြသပေးပါတယ်။

အကျဉ်းချုပ်ရရင် ဒီ function လေးက web application တွေမှာ user upload လုပ်လိုက်တဲ့ image ကို File reader api ကနေတစ်ဆင့် image preview ပြပေးတဲ့ function လေးပဲဖြစ်ပါတယ်။
File reader API ကိုအသုံးပြုပြီး file ကိုဖတ်ပြီး image element ကို display လုပ်ပေးပါတယ်။ ဘယ် file မှမပေါ်လာတာဖြစ်စေ၊ ရွေးလိုက်တဲ့ file image မဟုတ်ဘူးဆိုရင်တော့ preview ပြပေးမှာမဟုတ်ပါဘူး။

ဒီ function လေးက developer တွေအတွက်အသုံး၀င်မယ်လို့လည်း မျှော်လင့်ပါတယ်။

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

#creative_coder_myanmar
Go Lang (Non Pointer Value & Pointer Wrapper Values)

Go Programming ကိုလေ့လာတဲ့ အခါ လေ့လာစ သူအများစုမှာ အနေနဲ့ သိထားသင့်တဲ့ အရေးကြီးတဲ့ concept လေးကို sharing လုပ်ပေးသွားပါမယ်။

ဒါတွေ မပြောခင် အရင် သိမို့လိုအပ်တာက Go မှာ ရှိတဲ့ data type တွေထဲမှာမှ အကြမ်းဖျဉ်းခွဲချမယ်ဆို ၂ပိုင်းရှိတာသိထားရပါမယ်။

Non Pointer Values

- int,
- floats,
- strings,
- struct,
- array,
- bools

Pointer Wrapper Values

- slices
- maps
- functions

ဆိုတော့ အကယ်၍ ကျနော်တို့က function တစ်ခုထဲကို argument အနေနဲ့ string data တခုခု pass လုပ်မယ်ဆိုရင်အပေါ်က ကပြောထားတဲ့ ၂မျိုးပေါ်မူတည်ပြီး pass by value အနေနဲ့ ပါသွားမှာကိုသိရပါမယ်။

အောက်က Non Pointer Values ဥပမာလေးကို ကြည့်ရအောင်။

func testWithString(n string) {
//n is the copy of name
n = "override"
}

func main() {
name := "Hlaingminthan"
testWithString(name)
fmt.Println(name) //Hlaingminthan(not override the original name)
}

ကျနော်တို့ name variable လေးကို testWithString func ထဲထည့်ပေးလိုက်ပြီး override လုပ်ပြီး ပြင်ကြည့်မယ်ဆိုရင် ကျနော်တို့ name variable လေးက မူရင်း value မပြောင်းလဲသွားပဲ အရင် value လေးပဲပြန်ရတာကိုတွေ့ရပါလိမ့်မယ်။

သဘောတရားက string တွေဟာ pass by value အနေနဲ့ ပါသွားတာဖြစ်တာကြောင့် name variable လေးဟာ function ထဲက n ထဲမှာ copy ယူပြီး အသစ်ရှိနေတာဖြစ်ပါတယ်။ ဒီအတွက်ကြောင့် n ကို override လုပ်ပေမဲ့လဲ အပြင်က name variable လေးကို သက်ရောက်မှူ မရှိတာကို တွေ့ရပါလိမ့်မယ်။

တစ်လက်စတည်း Pointer Wrapper Values example လေးပါ ကြည့်ရအောင်။

func testWithMap(m map[string]string) {
m["age"] = "override"
}

func main() {
person := map[string]string{
"name": "hlaingminthan",
"age": "20",
}
testWithMap(person)
fmt.Println(person) //override the original person map data
}

ဒီ example လေးမှာဆိုရင် ကျနော်တ်ို့ testWithMap func လေးထဲကို person map data လေးထည့်ပြီး age ကို override လုပ်ထားပါတယ်။ ဒီတကြိမ်မှာတော့ ကျနော်တို့ person map data ကိုပြန်ထုတ်ကြည့်တဲ့အခါ person map data ရဲ့ original value တကယ်ပြောင်းသွားပြီး override ဖြစ်သွားတာကို တွေ့ရပါလိမ့်မယ်။ ဒါဟာ ဘာကြောင့်လဲဆိုရင် go မှာ map data type ဟာ func ထဲပေးတဲ့အခါနောက်ကွယ်မှာ original map ကို pointer reference ထောက်ထားတာကြောင့်ဖြစ်ပါတယ်။

ဒီ case မှာ တကယ်တန်း pass by reference ပုံစံသွားတာဆိုပေမဲ့ underlying layer မှာတော့ တကယ်က pass by value နဲ့သွားတာဖြစ်ပြီး pointer သုံးထားတာကြောင့် reference ပုံစံ behave လုပ်သွားတာပဲဖြစ်ပါတယ်။ နောက်ရက်ကျရင် asterisk vs pointer အကြောင်းလေးပါ sharing လုပ်ပေးသွားပါမယ်ခင်ဗျာ။

ဒါလေးကို ကွဲကွဲပြားပြား သိပြီဆိုရင်တော့ code ရေးတဲ့အခါ data override ဖြစ်သွားတဲ့ အခါ ဘာကြောင့်လဲ ဆိုတာကို ကွဲကွဲပြားပြားသိသွားမယ်လို့ယူဆပါတယ်ခင်ဗျာ။