eimg

Save Screenshots to Desktop

ဟိုးအရင် Ubuntu Version တွေမှာ Keyboard ကနေ Print Screen ခလုပ်ကိုနှိပ်ပြီးဖမ်းတဲ့ Screenshot တွေအတွက် Save Location ကို သတ်မှတ်လို့ ရပါတယ်။ အခုနောက်ပိုင်း Version တွေမှာ သတ်မှတ်လို့ မရတော့ဘဲ၊ Pictures ဖိုဒါထဲမှာပဲ Default အနေနဲ့ သွားသိမ်းပါတယ်။ ဖိုဒါပြောင်းလို့ မရတဲ့အတွက် အဆင်မပြေပါဘူး။

အဆင်ပြေချင်ရင် Keyboard ကနေ Print Screen ခလုပ်ကိုမနှိပ်ဘဲ Screenshot ဆော့ဖ်ဝဲကနေတစ်ဆင့် သွားရပါတယ်။

အသုံးတော့ဝင်ပါတယ်။ Delay Timer တွေဘာတွေ သတ်မှတ်လို့ရပြီး သိမ်းချင်တဲ့ နေရာကို ရွေးပေးလို့ ရပါတယ်။

eimg

React Context

React ကို အခြေခံလောက် လေ့လာဖူးသူတိုင်း React Component တွေမှာ ပုံမှန်အားဖြင့် Data တွေဟာ Parent to Child လက်ဆင့်ကမ်း props အနေနဲ့ စီးဆင်းရတာကို သိရှိကြပြီး ဖြစ်ပါတယ်။ ဥပမာ ဒီလိုပါ။

function App(props) {
    return <Header value="ReApp" />
}

function Header(props) {

eimg

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 {

eimg

atom-text-editor.editor {
    .bracket-colorizer-color0 {
        color: brown;
    }

    .bracket-colorizer-color1 {
        color: darkslategray;
    }

    .bracket-colorizer-color2 {

eimg

The Most Minimal React-Redux

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

လက်တွေ့ စမ်းသပ်ကြည့်နိုင်ဖို့အတွက် ပထမဦးဆုံး Project ဖိုဒါတစ်ခုဆောက်ပြီး အထဲမှာ Redux ကို Install လုပ်လိုက်ပါ။

npm install redux --save

eimg

The Most Minimal React Build System

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

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

Babel in Browser

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

eimg

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 တစ်ခုတည်ဆောက်မယ်ဆိုရင် အခုလို တည်ဆောက်နိုင်ပါတယ်။

eimg

CSS in Modern Web Projects

Web Project တွေအတွက် CSS ကုဒ်တွေ ရေးသားတဲ့အခါ External CSS, Internal CSS, Inline CSS စသဖြင့် ပုံစံအမျိုးမျိုး ရေးသားလို့ရတာကို သိရှိကြပြီး ဖြစ်ပါလိမ့်မယ်။ ကျွန်တော်သင်ကြားပို့ချနေတဲ့ Professional Web Developer Course မှာဆိုရင် CSS ရဲ့ အဓိကအားသာချက်ဟာ HTML Markup (Content) နဲ့ Style ကို ခွဲခြားရေးသား နိုင်ခြင်းဖြစ်ကြောင်း ထည့်သွင်း ရှင်းပြလေ့ရှိပါတယ်။ ဒီလိုခွဲခြား ရေးသားနိုင်တဲ့အတွက် Reusable ခေါ် ပြန်လည်အသုံးပြုနိုင်တဲ့ Style Sheet များနဲ့ Markup နဲ့ Style ကို သီးခြားခွဲပြီး စီမံနိုင်မှုတို့ကြောင့် ပြုပြင်ထိမ်းသိမ်းရ လွယ်တဲ့ကုဒ်ကို ရရှိစေတယ်ဆိုတာကိုလည်း ထည့်သွင်း ရှင်းပြရပါတယ်။

ဒါပေမယ့် React အပါအဝင် ခေတ်ပေါ် JavaScript Framework တွေ ထွက်ပေါ်လာခြင်းနဲ့အတူ ချည်းကပ်ပုံတွေလည်း ပြောင်းလဲလို့ လာခဲ့ပါပြီ။ အရင်က တစ်ကူးတစ်က ခွဲခြားရေးသားရတဲ့ CSS ကုဒ်တွေကို HTML တွေထဲမှာ ထည့်သွင်းရေးသားလာကြပြန်ပါပြီ။ အရင်က အထူးအလေးပေး ရှောင်ရှားရတဲ့ Inline Style ရေးထုံးကိုလည်း အခုအခါ အသုံးပြုကြဖို့ တိုက်တွန်းလာကြပြန်ပါပြီ။ ဘာကြောင့် ဒီလိုတွေ ပြောင်းလဲလာသလိုဆိုတာကို ရှင်းပြရမယ်ဆိုရင် ပေရှည်ပါလိမ့်မယ်။

အတ

eimg

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

eimg

JavaScript Promise & async/await

JavaScript တွင် Asynchronous process များအတွက် Callback များကို သုံးနိုင်သည်။ Asynchronous Process ဆိုသည်မှာ Synchronous Process ၏ ဆန့်ကျင်ဘက်ဖြစ်သည်။ Synchronous Process ဆိုသည်မှာ လုပ်ငန်းစဉ်များကို တစ်ခုပြီးမှသာ နောက်တစ်ခု ဆက်ခြင်းအားဖြင့် အစီအစဉ်အတိုင်း အလုပ်လုပ်သွားသည့် Process ဖြစ်သည်။ Asynchronous Process များတွင် လုပ်ငန်းစဉ်တစ်ခု ပြီးဆုံးအောင် နောက်တစ်ခုက စောင့်ရန်မလို၊ ကြိုတင်၍သော်လည်ကောင်း၊ ပြိုင်တူသော်လည်ကောင်း ဆောင်ရွက်သည့် သဘောဖြစ်သည်။

ဥပမာ - ကောင်မလေးတစ်ယောက်ကို ချဉ်းကပ်စကားပြောလိုသည့် လူငယ်တစ်ဦး ရှိသည် ဆိုကြပါစို့။ ထိုလုပ်ငန်းစဉ်အတွက် Synchronous Process ကို သုံးပါက အောက်ပါအတိုင်း ဖြစ်ပေလိမ့်မည်။

function check() {
	// walk to her
	// status = check her out