Zero To Master

In Javascript
ကျွန်တော်တို့ javascript မှာပေါ့ ဗျာ ထူးဆန်းတာတွေ က တပုံကြီးပေါ့
ဘယ်လိုမျိုးလည်းဆိုတော့
0.1+0.2 === 0.3 လို့ ထုတ်ကြည့်ရင် ဘာထွက်မယ်လို့ထင်လည်း ဗျာ

false ကို return ပြန်ပေးတယ်ဗျာ
whatttt?? why?
အာ့နဲ့ ကျတော် စိတ်ဝင်စားသွားပြီးတော့ သွားစမ်းကြည့်တယ် တကယ်လည်းဟုတ်တယ်ဗျာ false ပြန်ပေးတယ် ဗျာ
ဘာလို့အဲလိုဖြစ်တာလည်းဆိုတာကို လိုက်ရှာကြည့်ကြည့်တော့
ကျတော်တို့ javascript က 32 bits floating point အတိုင်းအလုပ်လုပ်တာမလို့ပါတဲ့ အဲဒါကို ဆက်ပြီးတော့ ဆက်လေ့လာကြည့်တော့ အလွယ်သဘောနဲ့တော့ သိလိုက်ရတာကတော့
float point ဆိုတဲ့အတိုင်း သူက ( . ) ဒသမကိန်းအနောက်က value ကို ထည့်တွက်ပေးတာမလို့ပါ သူ့တို့ကို ဒီအတိုင်းပေါင်းလိုက်ရင် အဲအတိုင်း ထွက်လာပါတယ် သူ့ real result က
0.30000000000000004 ပါ အဲအတွက်ကြောင့် သူက false value return ပြန်ပေးတာပါ

တော်တော်တော့ စိတ်ဝင်စားဖို့တော့ကောင်းတယ်ဗျာ (ဆက်လေ့လာလိုက်ပါဦးမယ် )

ကျတော်တို့ တခါတခါ မြင်နေကြမှာပါ
one error resume next ဆိုပြီးတော့ မြန်မာကား တကားမှာ
ပြောလိုက်တာကို
တကယ်လည်းအဲဒါကရှိပါတယ်

သူက မှားပြောလိုက်တာပါ
သူ့ကိုသုံးတဲ့ language က visual basic ပါ
ဘယ်လိုသုံးတာလည်းဆိုတော့သူ့ကိုသုံးတဲ့ နေရာမှာ error ဖြစ်နေပေမယ့်လည်း code ကို ဆက်ပြီးတော့ execute လုပ်သွားအောင်လို့ ပါ

တကယ်လို့လေ့လာချင်တယ်ဆိုရင်တော့

https://learn.microsoft.com/en-us/office/vba/language/reference/user-interface-help/on-error-statement

အဲမှာသွားလေ့လာကြည့်လို့ရပါတယ်

photo credits to original owners

Javascript Tricks
ကျတော်တို့ console မှာ 3 < 2 < 1 လို့ရိုက်ပီးတော့ အဖြေထုတ်ကြည့်ရင်
သူက true လို့ပြန်ပေးလာတယ်ဗျာ ဘာကြောင့်လည်းဆိုတာသိလား?

javascript မှာက ဘယ်လိုမျိုးအလုပ်လုပ်တာလည်းဆိုတော့ ဦးဆုံး comparison တခုကိုအရင်ဖြေရှင်းတယ်ဗျာ 3< 2 ကို အဲမှာ ဘာဖြစ်သွားလည်းဆိုတော့ သူကfalse ကို return ထုတ်ပေးတယ်ဗျာ အဲမှာ false ဖြစ်သွားတော့ သူ့ တန်ဖိုးက 0 ဖြစ်သွားတယ် အဲဒီမှာ နောက်ထပ် comparison ကို ထပ်ပီးတော့ ဖြေရှင်းပေးတယ် false < 1 ဆိုတော့ သူ့ရဲ့ တန်ဖိုးက 0

React virtual dom နဲ့ JS dom အကြောင်းလေးတီးမိခေါက်မိသလောက်

ကျတော်တို့ react ကို စတင်ပီးတော့ လေ့လာကြတယ်ဗျာ
အကြောင်းအရင်းအမျိုးမျိုးကြောင့်သူ့ကိုလေ့လာကြတယ်ပေါ့
တချို့ကတော့ သူကအလုပ်လုပ်တာမြန်လို့ တချို့ကတော့လေ့လာရတာလွယ်လို့ပေါ့ဗျာ

အဲမှာ တချို့တွေက react မှာရှိတဲ့ virtual dom အလုပ်လုပ်ပုံကိုကြိုက်လို့တဲ့ဗျာ

အဲမှာကျတော်ပြောချင်တာက virtual dom ဆိုတာက ဘာလည်း?
ဘာလို့ react က အလုပ်လုပ်တာ မြန်နေရတာလည်းဆိုတာပဲ့

virtual dom ကိုမရှင်းသေးခင်မှာ ကျတော်တို့ javascript ရဲ့ dom လေးကို တချက်လောက် အကြမ်းအဖျင်းလေးသွားကြည့်ကြည့်လိုက်ကြရအောင်ဗျာ

js dom တခုက ဘယ်လိုမျိုးအလုပ်လုပ်လည်းဆိုတော့ ကျတော်တို့က js ကနေပီးတော့ element လေးတွေကိုဖန်တီးထုတ်ပေးတယ်ဗျာ
သူ့အလုပ်လုပ်ပုံလေးက ဘယ်လိုမျိုးလည်းဆိုတော့ ကျတော်တို့ ငယ်တုန်းက
ကလေးလေးတွေကစားတဲ့ အပြားလေးတွေကို အစီစဉ်လိုက်ထည့်သလိုမျိုးအလုပ်လုပ်ပေးတယ်ဗျာ

ပြောရရင် js dom တခုမှာ အလုပ်လုပ်တဲ့ပုံစံက ဥပမာ
ကျတော်တို့ list တခုရှိတယ်ပဲ့ဆိုပါစို့
1 apple
2 orange
3 mango
ဆိုပီးတော့ရှိတယ်ပဲ့ဆိုပါစို့
ကျတော်တို့က peach ဆိုပီးတော့ နောက်ထပ် element တခုကို အဲ list မှာသွားဖန်တီးတဲ့အခါကျရင် ဘယ်လိုမျိုးဖြစ်လည်းဆိုတော့ သူက list ရဲ့ အပေါ်ဆုံးကနေပီးတော့သွားထည့်ပေးတာဗျာ
အဲဒါဆိုရင် list က ဘယ်လိုမျိုးဖြစ်သွားလည်းဆိုတော့
1 peach
2 apple
3 orange
4 mango
အဲလိုမျိုူးဖြစ်သွားတယ်ဗျာ
ကျတော်တို့ code inspect ထောက်ပီးတော့ ကြည့်လိုက်ရင် အဲ list ကြီးတခုလုံးက re render ဖြစ်သွားတာကိုတွေ့ရလိမ့်မယ်ဗျာ အဲမှာ ကျတော်ပြောချင်တာက list က ၁၀ ၂၀ လောက်ဆို ဘာမှမဖြစ်ပေမယ့် ရာနဲ့ ထောင်နဲ့ချီလာဘီဆိုရင် ကျတော်တို့ အသစ်တခုတိုးလိုက်တိုင်းမှာ delay ကဖြစ်ဖြစ်လာတော့မှာ ပဲ့လေ အဲဒါက js dom တခုက အလုပ်လုပ်ပေးတာဗျာ

ကျတော်ပြောချင်တဲ့ react virtual dom ဆိုတာက ဘယ်လိုအလုပ်လုပ်ပေးလည်းဆိုတော့
react ကနေပီးတော့ လုပ်ပေးလိုက်တဲ့ special key properties ဆိုတာလေးရှိတယ်ဗျ သူက အဲဒါကို ကြည့်ပီးတော့ ပြောင်းလဲမှုဖြစ်သွားတဲ့နေရာလေးကိုပဲ့ ပြောင်းလဲပေးသွားတာဗျာ

ခုနက ကျတော်ပြောတဲ့ list တခုနဲ့ပြန်ပြရင်သူက value ကို ဘယ်လိုမျိုး add သွားတာလည်းဆိုတော့
1 apple
2 orange
3 mango
4 peach
အဲလိုမျိုး add သွားတယ်ဗျာ
inspect ထောက်ပီးတော့ကြည့်လိုက်ရင် အောက်ဆုံးနားလေးကိုပဲ့သူကပြောင်းလဲမှုလုပ်သွားတာကိုတွေ့ရလိမ့်မယ်ဗျာ
အဲလိုမျိုးတွေကြောင့် မလို့ react က runtime မြန်တယ် အလုပ်လုပ်တာမြန်တယ်လို့ပြောကြ ပြီးတော့ လူကြိုက်များကြတာဗျာ

အဲလောက်ဆိုရင်တော့ ကျတော်တို့ဘာလို့ react ကိုသုံးသင့်လည်းဆိုတာကို နားလည်သွားလောက်မယ်လို့ထင်ပါတယ် ကျေးဇူးတင်ပါတယ်

ကျတော်မှားနေရင်လည်းထောက်ပြ ဝေဖန်ပြနိုင်ပါတယ်

photo credits to original owners

ကျတော် မနေ့ က တင်လိုက်တဲ့ meme လေးတခုအကြောင်းကိုပြန်ရှင်းပြမယ် ဗျာ
အဲဒါကို ကျတော်က တွေ့တော့ ပြန်လိုက်ရှာကြည့်ဖြစ်တယ် ဘာကြောင့်လည်းဆိုပီးတော့ အဲမှာကျတော် ကဘာကိုသွားတွေ့လည်းဆိုတော့
javascript က dynamic ဖြစ်တာရယ် ပီးတော့
operator တွေဖြစ်နဲ့ + နဲ့ - တွေရဲ့ အလုပ်လုပ်ပုံတွေကိုပါ သွားတွေ့တယ်ဗျာ
အရင်ဆုံး ကျတော်တို့ js ရဲ့ dynamic အကြောင်းလေးတွေကို ရှင်းကြရအောင်ဗျာ
ပထမဆုံး ဘာလို့ dynamic လို့ပြောတာလည်းဆိုတော့ js compiler က data type တွေကို လိုသလိုပြောင်းလဲပေးနိုင်လို့ပဲ့ဗျာ

တခြား lang တွေမှာဆို ကျတော်တို့ variable တခုကို declare လုပ်ရင်အရှေ့မှာက သူနဲ့ သက်ဆိုင်တဲ့ data type လေးတွေကို ထည့်ပေးရတယ်ဗျာ

ဥပမာ int i = 0 ; အဲလိုမျိုးပေါ့

js မှာ ကကျတော့အဲလိုတွေမလိုဘူးဗျာ

var i = 0;
ဆိုပီးတော့ ရေးလိုက်ရင် အဲဒါက သူက number လို့တခါတည်းသတ်မှတ်ပေးသွားတယ်ဗျာ
string ဆိုရင်လည်း
var i = "string data "; အဲလိုမျိုးရေးလိုက်ရုံနဲ့ သူက string လို့ တခါတည်း မှတ်ပီးတော့ သိမ်းပေးလိုက်တာပါ

အဲလောက်ဆိုရင်တော့ တော်တော်နားလည်လောက်ဘီလို့ထင်ပါတယ်

operator အကြောင်းကိုဆက်ပြောကြရအောင်
အရင် ဆုံး + အကြောင်းလေးကိုပြောမယ်ဗျာ
သူက string တွေကို လည်း ပေါင်းစပ်ပေးလို့ရတဲ့အတွက် ကျတော်တို့ရေးလိုက်တဲ့
"11" + 1 မှာ အနောက်က ကိန်းဂဏန်းကို ပါ တခါတည်း string ဖြစ်အောင်ပြောင်းပေးပီးတော့ ပေါင်းသွားတာမလို့ ထွက်တဲ့အခါမှာ "111" ဆိုပီးထွက်လာတာ ပါ

အဲအချိန်မှာ - ကရော
သူက ကျတော့ ကိန်းဂဏန်းတွေနုတ်တာပဲ့ရှိတာဖြစ်တဲ့အတွက် အရှေ့က string ဖြစ်တဲ့ "11" ကို 11 ဆိုတဲ့ ကိန်းဂဏန်းဖြစ်အောင် ပြောင်းလဲပေးလိုက်တာကြောင့်မလို့ပါ

အဲလောက်ဆိုရင်တော့ နားလည်လောက်မယ်လို့ထင်ပါတယ်

ကျေးဇူးတင်ပါတယ်



photo credits to original owners

credits to original owner

My fav lang လေး :3

ကျတော်တို့ ဒီနေ့မှာက ကျတော့ react ရဲ့ data passing / data flow အကြောင်းလေးကို လေ့လာလိုက်ကြရအောင်ဗျာ

ပထမဆုံး ကျတော်တို့ src မှာ component တခုကိုတည်ဆောက်လိုက်ကြရအောင်ဗျာ

hello.js
လို့ပေးပီးတော့ သူ့အောက်မှကျတော်တို့ code လေးကို ရေးလိုက်ပါမယ်

import React from "react";

function Hello() {
return Hello;
}

export default Hello;

ပြီးရင်တော့ ကျွန်တော်တို့ app.js မှာသွားပီးတော့ သုံးလိုက်ပါမယ်
ပြီးရင်တော့ ကျတော်တို့ data passing ဘယ်လိုအလုပ်လုပ်သွားလည်းဆိုတာကို ဆက်ကြည့်ကြရအောင်ဗျာ app.js မှာ သုံးထားတဲ့ ကျတော်တို့ component မှာ ကျတော်တို့ property လေးတွေရေးလိုက်ပါမယ်



အဲလိုမျိုး ရေးလိုက်ပါမယ် အဲမှာကျတော်တို့က name ဆိုပီးတော့ property လေး တခုကို လက်ဆင့်ကမ်းပေးလိုက်ဘီဗျာ အဲဒါကို ကျတော်တို့ componentမှာ ဘယ်လိုအသုံးပြုရမလဲဆိုတော့

function Hello(props) {
return Hello{props.name};
}

အဲလိုလေးပြန်ရေးပေးရပါမယ် အဲဒီမှာ ကျတော်တို့က အပေါ်က function Hello အနောက်မှာ ပါတဲ့ parenthesis ထဲမှာ ကျတော်တို့ Props ဆိုပီးတော့ parameter လေးတခု နဲ့ဖမ်းထားပီးတော့ အောက်မှာက ကျတော့ ကျွန်တော်တို့ props.name လို့ပြန်သုံးထားတာကိုတွေ့ရပါမယ်ဗျ

အဲမှာ ဘယ်လိုမျိုးလည်းဆိုတော့ ကျတော်တို့က parent ဖြစ်တဲ့ app.js မှာ အသုံးပြုလိုက်တဲ့ name ဆိုတဲ့ property လေးက သူ့ရဲ့ child ဖြစ်တဲ့ hello ဆိုတဲ့ component ထဲကိုရောက်လာတယ်ဗျာ

ပြောရရင် အဲဒါက ကျတော်တို့ react ရဲ့အလုပ်လုပ်ပုံလေး တခုပါပဲ့ ဗျာ
အဲလိုမျိုးတွေအသုံးပြုပီးတော့ ကျတော်တို့ component တွေကို စီမံပီးတော့ refractor တွေ လုပ်တဲ့အခါကျရင် တော်တော် အဆင်ပြေပြေ သုံးလို့ရသွားတာပေါ့ဗျာ

အဲဒီ props ကို ကျတော်ပြသလိုမရေးချင်ဘူးဆိုရင် destructuring ပုံစံနဲ့ရေးလို့ရပါသေးတယ်ဗျာ ဘယ်လိုမျိုးလည်းဆိုတော့

function Hello({ name }) {
return Hello{name};
}

အဲလိုလေးရေးပေးရမှာပါ ကျတော်တို့က အဲမှာကျတော့ ဘယ်လိုမျိုးဖြစ်သွားတာလည်းဆိုတော့ ကျတော်တို့ က ဟိုဖက်မှာပေးလိုက်တဲ့ property key အတိုင်းကို ပြန်ရေးပေးပီးတော့ ပြန်ခေါ်သုံးလိုက်သလိုပေါ့ဗျ

ပီးတော့ react မှာ ကျတော်တို့ နောက်တခု သိထားဖို့လိုတာက data passing က parent to child ကိုပဲ့ pass ပေးလို့ရတယ် ဗျ

child to parent ပေးဖို့ကျတော့ မဖြစ်နိုင်ဘူး ဗျ
အဲလိုဆိုပေမယ့် ကျတော်တို့ props မှာ function / method တခုခုကို ပေးတဲ့အခါကျရင် child ကနေပီးတော့ parent ကို parameter အနေနဲ့ ပြန်သွားလို့ရတယ်ဗျ
ပြီးတော့ props က ပြောင်းလဲလည်းမရနိုင်ဘူးဗျာ အဲဒါကတော့ props ရဲ့ အလုပ်လုပ်ပုံတွေပါ

ကျတော်ပြောတာ အဲလောက်ဆိုရင်တော့ နားလည်လောက်မယ်လို့ထင်ပါတယ်

မှားတာရှိလည်းထောက်ပြနိုင်ပါတယ်
အားလုံးကိုကျေးဇူးတင်ပါတယ်

photo credits to original owners

တနေ့လုံး ခေါင်းတွေစားပီး သကာလ

photo credits to original owners

ကျွန်တော်တို့ React မှာ မြင်လေ့မြင်ထရှိတဲ့ untrolled component အကြောင်းလေးကို လေ့လာလိုက်ကြရအောင်ဗျ
ဦးဆုံးကျတော်တို့
ကုဒ်လေးကိုအရင်ရေးလိုက်ကြရအောင်ဗျာ


အဲလိုလေးရေးလိုက်တာကို ကျတော်တို့ uncontrolled component ဆိုပီးတော့ သတ်မှတ်ပေးတယ်ဗျာ ဘာလို့လည်းဆိုတော့ သူကို ကျတော်တို့က state management အတွက်သုံးမှာမဟုတ်ဘူးဆိုပီးတော့ react က နေပီးတော့ သတ်မှတ်ထားလို့ပါဗျာ

ပီးရင် ကျတော်တို့ onChange လေး ရေးလိုက်ပါမယ်

setState(e.target.value)} />

အဲလိုလေးပေါ့ဗျ ကျတော်တို့ value ကို ရိုက်လိုက်တဲ့အခါမှာ ရိုက်လို့မရဘူးဗျာ ဘာလို့လည်းဆိုတော့
အဲမှာ ကျတော်တို့က onChange ဖြစ်သွားတာနဲ့ console မှာ ဘယ်လိုပေါ်လာလည်းဆို‌ေတာ့ uncontrolled component to controlled component ဆိုပီးတော့ပြလာလိမ့်မယ်ဗျ ဘာလို့လည်းဆိုတော့
ကျတော်တို့က input မှာရှိတဲ့ value ကို state ထဲကို မထည့်ပေးထားလို့ဗျ ဘာလို့ အဲဒါကို ထည့်ပေးရတာလည်းဆိုတော့ သူက အဲကနေပီးတော့ ရလာတဲ့ value ကို ဖမ်းထားတာမလို့ပါ ပီးတော့ အဲဒါကို react ကနေပီးတော့ controlled ဖြစ်သွားတဲ့အခါမှာ error ပေါ်လာတာဖြစ်သွာတာ ပါ
ကျတော်တို့ အဲဒါကို ပျောက်စေချင်တယ်ဆိုရင်

setState(e.target.value)} />

အဲလိုလေး ရေးပေးရမှာပါ အဲခါကျရင် react ရဲ့ state က အလုပ်လုပ်ပီးတော့
ကျတော်တို့ input value ကို state ထဲမှာ သိမ်းထားလိုက်ပီးတော့ အလုပ်လုပ်ပါတော့တယ်ဗျ

အဲလောက်ဆိုရင်ကျတော်တို့ controlled component နဲ့ uncontrolled component ဆိုတာကို တော်တော်များများသိလောက်ဘီလို့လည်းထင်ပါတယ်ဗျ

ကျေးဇူးတင်ပါတယ်
မှားနေရင်လည်း ထောက်ပြနိုင်ပါတယ်
အားလုံးကိုလေးစားလျက်

Photo credits to original owners

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

အဆိုးဆုံးအချက်က သူတို့နဲ့သိတဲ့သူတယောက်ယောက်က IT တခုခု လေ့လာနေဘီ လို့သိလိုက်ရင် သူတို့ fb/ mail တခုခုဖြစ်ရင် ကိုယ်တွေဆီကိုအရင်ရောက်လာတာပဲ့ မသိရင် ဇူဇူနဲ့ ဂုလုဂလု က ကိုယ်တွေကို CS ခန့်ထားပေးတာ ကျနေတာပဲ့ :3

ပီးတော့လာသေးတယ် အကောင့် ဟက်တတ်လားတဲ့

"ဟုတ်ကဲ့ ကျတော် ဟူကာ မဟုတ်ပါဘူး ခင်ဗျာ အကောင့်လည်းမယူတတ်သလို ကိုယ့်အကောင့် Pass တောင်ပြန်မေ့နေတာပါ ခင်ဗျာ"

#စိတ်ထဲအခဲမကြေတာလေးရေးတင်ခြင်း 😄

🙂

credits to original photo