Ei Maung eimg

## typescript.md

      
              1 file
            
          
              16 forks
            
          
                6 comments
              
            
              70 stars
            
          
                eimg
                / typescript.md
            
            
              Last active
              May 30, 2026 08:41
            
              
                TypeScript - လိုတိုရှင်း
              
          
    TypeScript - လိုတိုရှင်း

JavaScript ဟာ Dynamic Type Language တစ်ခုပါ။ Data Type တွေကို Language က လိုသလို အလိုအလျှောက် ပြောင်းလဲအလုပ်လုပ်ပေးတဲ့အတွက် ရေးသားသူက Type ကိစ္စ သိပ်ခေါင်းစားနေစရာမလိုဘဲ ရေးစရာရှိတဲ့ကုဒ်တွေကို ခပ်မြန်မြန် ရေးသွားလို့ရပါတယ်။
let value;        // undefined
value = "Alice";  // string
value = 42;       // number
value = true;     // boolean

  
## easy-react.md

      
              1 file
            
          
              2 forks
            
          
                11 comments
              
            
              21 stars
            
          
                eimg
                / easy-react.md
            
            
              Last active
              May 17, 2026 03:24
            
              
                Much Easier Approach to React
              
          
    Much Easier Approach to React

စိတ်ဝင်စားတဲ့သူများနေလို့ လေ့လာကြည့်ပေမယ့် "React က ခက်လိုက်တာ" လို့များတွေးနေသလား? တစ်ကယ်တော့ React က မခက်ပါဘူး။ ရေးနည်း တွေးနည်းတွေက မူလရိုးရိုး ရေးနည်းတွေးနည်း စနစ်တွေကနေ လုံးဝပြောင်းသွားလို့ "ပြောင်းရခက်နေတာ" ပါ။ Official Documentation နဲ့ အင်တာနက်က Tutorial တွေလေ့လာကြည့်လိုက်ရင်လည်း -- ES6 တွေ၊ Arrow Function တွေ၊ Class တွေ၊ JSX တွေနဲ့ ဟိုကနေဒီရောက်၊ ဟိုကနေဒီရောက် ဖြစ်နေပြီး -- သူတို့ရှင်းပြမှ ပိုရှုပ်သွားတယ် ဆိုသလို ဖြစ်နေတာကို တွေ့ရပါတယ်။
ဒီပို့စ်မှာ React ကို ချည်းကပ်ပုံတစ်မျိုးနဲ့ ပြောင်းလဲဖော််ပြပေးသွားမှာပါ။ ကျွန်တော်ပို့ချနေတဲ့ Rockstar Developer Course က သင်တန်းသူ သင်တန်းသားတွေကို ဒီနည်းနဲ့ သင်မယ်လို့ ရည်ရွယ်ထားပေမယ့် လက်တမ်း ချသင်ကြည့်တဲ့အခါ သိပ်အဆင်မပြေလို့ အခုလိုစာအဖြစ် ရေးသားလိုက်တာပါ။ JavaScript အခြေခံရှိသူ မည်သူမဆို နားလည်ပြီး စိတ်ဝင်စားလိမ့်မယ်လို့ ထင်ပါတယ်။
Plain JavaScript

ဘာ Library, ဘာ Framework မှ မပါတဲ့ ရိုးရိုး JavaScript နဲ့ HTML Element တစ်ခုတည်ဆောက်မယ်ဆိုရင် အခုလို တည်ဆောက်နိုင်ပါတယ်။

  
## functional-programming.MD

      
              1 file
            
          
              10 forks
            
          
                0 comments
              
            
              33 stars
            
          
                eimg
                / functional-programming.MD
            
            
              Last active
              April 29, 2026 04:47
            
              
                Functional Programming - လိုတိုရှင်း
              
          
    Functional Programming - လိုတိုရှင်း

Programming ကို လေ့လာကြသူအများစုဟာ Procedural Programming (သို့မဟုတ်) Object-Oriented Programming (OOP) ရေးနည်းတွေနဲ့ စတင်လေ့လာခဲ့ကြတာ များပါတယ်။ System Level Language အများစုဟာ Procedural Language တွေဖြစ်ကြပါတယ်။ C, Go, Rust, Zig စသည်ဖြင့်။ Application Level Language အများစုကတော့ OOP Language တွေများပါတယ်။ Java, C#, Python, Ruby, PHP, JavaScript စသည်ဖြင့်။
Functional Programming ကိုတော့ လေ့လာသူတွေ ထိတွေ့မှုနည်းကြပါတယ်။ ဒါပေမယ့် ကနေ့ခေတ်မှာ Functional Programming ဟာ အလွန်အရေးပါတဲ့ ရေးနည်းတစ်ခုဖြစ်နေသလို စောစောက ပြောခဲ့တဲ့ Language အများစုကလည်း Functional Programming ရေးနည်းကို အပြည့်မရပေမယ့် နည်းနည်းတော့ Support လုပ်ကြပါတယ်။
Functional Programming ရေးနည်းကိုပဲ အဓိကထားတဲ့ Language တွေလည်း ရှိကြပါတယ်။ Lisp, Haskell, Erlang, Elixir, Scala, F# စသည်ဖြင့်။
ကနေ့ခေတ်မှာ Functional Programming ရဲ့ အခန်းကဏ္ဍဟာ တစ်နေ့တစ်ခြား ပိုအရေးပါလာတဲ့အတွက် မူလက Procedural Language တွေ OOP Language တွေနဲ့ လေ့လာခဲ့ကြသူတွေဟာ Functional Programming ကိုလည်း အသုံးချနိုင်ဖို့ လိုအပ်လာကြပါတယ်။

  
## mm2en.js
// INPUT: ၁၁.၁၂.၂၀၁၇
// OUTPUT: 11.12.2017
function mm2en(num) {
    var nums = { '၀': '0', '၁': 1, '၂': 2, '၃': 3, '၄': 4 , '၅': 5, '၆': 6, '၇':7, '၈':8, '၉':9 };
    return num.replace(/([၀-၉])/g, function(s, key) {
        return nums[key] || s;
    });
}

## todo-vanilla.js
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Todo</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/all.min.css">
</head>

## glass-button.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Liquid Glass</title>
    <style>
        body {
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

## minimal-react-build.md

      
              1 file
            
          
              6 forks
            
          
                1 comment
              
            
              35 stars
            
          
                eimg
                / minimal-react-build.md
            
            
              Last active
              September 21, 2025 10:29
            
              
                The Most Minimal React Build System
              
          
    The Most Minimal React Build System

ပြီးခဲ့တဲ့ ပို့စ်မှာ React ကို ချဉ်းကပ်ပုံအသစ်နဲ့ ဖော်ပြခဲ့ပါတယ်။ ဘာ Build System မှ မပါပဲ HTML Document တစ်ခုအတွင်းမှာ တိုက်ရိုက်ရေးသားခဲ့ခြင်းဖြစ်ပါတယ်။ ဒီတစ်ခါတော့ အရိုးဆုံးနဲ့ အရှင်းဆုံး Build System တစ်ခုကို တည်ဆောက် ကြည့်ကြမှာဖြစ်ပါတယ်။ ဒီအကြောင်းအရာဟာ ကျွန်တော်ပို့ချနေတဲ့ Rockstar Developer Course မှာ ထည့်သွင်းသင်ကြားမယ့် အကြောင်းအရာ တစ်ခုပါ။ ကြိုစမ်းမထားပဲ လက်တမ်းသင်ရင် အမှားပါပြီး အချိန်ကြာမှာစိုးလို့ အခုလို ကြိုစမ်းပြီး စာအဖြစ် ကြိုရေးထားလိုက်တာပါ။ ဒီ Course မှာ တက်ရောက် သင်ယူနေသူ ဟုတ်ဟုတ် မဟုတ်ဟုတ် JavaScript နည်းပညာတွေကို စိတ်ဝင်စားသူဆိုရင် ဒီပို့စ်က အသုံးဝင်ပါလိမ့်မယ်။
စာနည်းနည်း ရှည်ပါမယ်။ အချိန်ပေးနိုင်မှ တစ်ခါတည်းဖတ်ပြီး တစ်ခါတည်းလိုက်လုပ်ကြည့်ပါ။ အချိန်မပေးနိုင်သေးရင် Bookmark လုပ်ပြီး သိမ်းထားပြီး အချိန်ရမှ ပြန်ဖတ်ပါ။ တစ်ဝက်တစ်ပျက်ပဲ ဖက်ရင်တော့ အလကားဖြစ်သွားမှာပါပဲ။ လိုက်မလုပ်ရင်လည်း အလကားပါပဲ။ သိသလိုလို မသိသလိုလို ဖြစ်သွားမယ်။ လိုက်လုပ်ကြည့်မှ တစ်ခါတည်း သဘောပေါက်မှာပါ။
Babel in Browser

လက်ရှိ ရိုးရိုး HTML ထဲမှာ ရေးထားတဲ့ နမူနာကို နောက်တစ်ခါ ပြန်

  
## ES6-overview.md

      
              1 file
            
          
              6 forks
            
          
                1 comment
              
            
              20 stars
            
          
                eimg
                / ES6-overview.md
            
            
              Last active
              September 9, 2025 09:14
            
              
                Overview of some ES6 features
              
          
    ES6 - Modern JavaScript

ခြောက်ကြိမ်မြောက် တည်းဖြတ်မှုဖြစ်သည့်အတွက် ES6 ဟု အတိုကောက်ခေါ်၍ 2015 ခုနှစ်တွင် ဖန်တီးခဲ့သည့် အတွက် ECMAScript2015 ဟု ရံဖန်ရံခါ ခေါ်သည့် နည်းပညာသည် လက်ရှိ JavaScript (ES5) ကို အဆင့်မြှင့်တင်ထားသည့် နည်းပညာဖြစ်သည်။ ES6 တွင် ပါဝင်လာသည့် လုပ်ဆောင်ချက်များမှ အချို့ကို ရွေးထုတ် ဖော်ပြလိုက်ပါသည်။
Block-scope Variable

မူလ JavaScript တွင် var Keyword ကို အသုံးပြု၍ Variable များ ကြေငြာနိုင်သည်။ ထို Variable များသည် Function-scope သဘောသဘာဝ ရှိကြသည်။ ES6 တွင် let Keyword ကို အသုံးပြု၍ Block-scope Variable များ ကြေငြာအသုံးပြုနိုင်သည်။
let i = 10

  
## linux-commands
ls, ls -la                        # list files
cd                                # change directory
pwd                               # current path
touch                             # create new files
cat                               # read file content
echo                              # output content
less                              # read big file
mkdir, mkdir -p                   # create directory
cp, cp -r                         # copy file, directory
mv                                # move or rename file, dir

## react-hooks.md

      
              1 file
            
          
              1 fork
            
          
                4 comments
              
            
              5 stars
            
          
                eimg
                / react-hooks.md
            
            
              Last active
              January 23, 2025 17:06
            
              
                Explaining React Hooks to those who already familiar with React
              
          
    React Hooks

ဒီစာဟာ လက်ရှိ Rockstar Developer Course မှာ တက်ရောက်နေသူတွေ အတွက်ဖြစ်တယ်။ ဒါကြောင့် အပြင်လူတွေ နားလည်စေမယ့် ရှင်းလင်းချက် အပြည့်အစုံနဲ့ အသေးစိတ်တော့ ပါမှာမဟုတ်ပါဘူး။ နောင်အချိန်ရမှ ထပ်ဖြည့်ပေးပါမယ်။
React က စမ်းသပ်နေတာ ကာလတစ်ခုကြာပြီဖြစ်တဲ့ Hooks လိုခေါ်တဲ့ Feature ကို React v16.8 မှာ စတင်ထည့်သွင်းပေးခဲ့ပါပြီ။ ဒါကြောင့် တို့တွေလည်း စတင်စမ်းသပ် အသုံးပြုသင့်ပြီဆိုပါတော့။ အဲ့ဒီ Hooks အကြောင်းကို ဒီနေရာမှာ ရှင်းပြသွားမှာပါ။
React မှာ State တွေကို စီမံဖို့ Class Component တွေကို သုံးရတယ်။ အကယ်၍ Functional Component တွေ သုံးချင်ရင်တော့ State တွေကို တိုက်ရိုက်စီမံလို့ ရမှာမဟုတ်ပဲ Redux လို နည်းပညာမျိုးရဲ့ အကူအညီကို ယူရမှာဖြစ်ကြောင်းကို လက်ရှိလေ့လာနေသူတိုင်း သိရှိကြပြီးသားပါ။ ဒါပေမယ့် စာနွှေးပြီးသား ဖြစ်သွားအောင် နမူနာတစ်ချို့ ပြန်ဖော်ပြပေးပါမယ်။
class App extends React.Component {
	// INPUT: ၁၁.၁၂.၂၀၁၇
	// OUTPUT: 11.12.2017
	function mm2en(num) {
	var nums = { '၀': '0', '၁': 1, '၂': 2, '၃': 3, '၄': 4 , '၅': 5, '၆': 6, '၇':7, '၈':8, '၉':9 };
	return num.replace(/([၀-၉])/g, function(s, key) {
	return nums[key] \|\| s;
	});
	}
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Todo</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/all.min.css">
	</head>
	ls, ls -la # list files
	cd # change directory
	pwd # current path
	touch # create new files
	cat # read file content
	echo # output content
	less # read big file
	mkdir, mkdir -p # create directory
	cp, cp -r # copy file, directory
	mv # move or rename file, dir