"𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐌𝐲𝐚𝐧𝐦𝐚𝐫 𝐓𝐞𝐥𝐞𝐠𝐫𝐚𝐦 channel လေး Join ပေးတာကျေးဇူးပါခင်ဗျာ 📢"
========================================

ကဲ မိတ်ဆွေတို့ရေ ကျွန်တော်တို့ရဲ့ Creative Coder Myanmar က Telegram မှာလည်းရှိနေပြီဖြစ်တဲ့အတွင် သင်တန်းအကြောင်းအရာတွေ Knowledge Sharing Contents တွေကို Telegram ကနေလည်းဖတ်ရှုနိုင်တော့မှာဖြစ်ပါတယ်။
မိတ်ဆွေတို့အားလုံးကို အောက်ပါ Telegram Channel လေးကို join ပေးဖို့ တခြား မိတ်ဆွေတွေ လဲ ပြောပေးမို့ဖိတ်ခေါ်ပါတယ်။

👉 https://t.me/creativecodermm

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

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐎𝐟𝐟𝐜𝐢𝐚𝐥 𝐖𝐞𝐛𝐬𝐢𝐭𝐞 ⬇
https://creativecodermm.com/

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐘𝐨𝐮𝐭𝐮𝐛𝐞 𝐂𝐡𝐚𝐧𝐧𝐞𝐥 ⬇
https://www.youtube.com/c/CreativeCoderMyanmar

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐋𝐢𝐧𝐤𝐞𝐝𝐢𝐧 ⬇
https://www.linkedin.com/company/creative-coder-myanmar/

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐌𝐲𝐚𝐧𝐦𝐚𝐫 𝐆𝐢𝐭𝐇𝐮𝐛 ⬇
https://github.com/Creative-Coder-Myanmar

#Creative_Coder_Myanmar
#developer
#website
#telegram

𝐂𝐮𝐬𝐭𝐨𝐦 𝐇𝐨𝐨𝐤 (𝐑𝐞𝐚𝐜𝐭 𝐇𝐨𝐨𝐤 𝐒𝐞𝐫𝐢𝐞𝐬)

====================================

React မှာသုံးတဲ့ Custom hook function ကတော့ use keyword နဲ့စပြီး အခြား built-in function တွေကို ပြန်ခေါ်ချင်တဲ့အခါမှာသုံးလို့ရပါတယ်။ အခြား state တွေနဲ့ ဆက်စပ်နေတဲ့ logic တွေကို Component တွေကြားမှာ share ပြီးသုံးလို့ရအောင်ပြုလုပ်ပေးထားပါတယ်။

Custom Hook ရဲ့ code example လေးကိုကြည့်လိုက်ကြရအောင် 👀

import React, { useState, useEffect } from 'react';

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return width;
}

function Example() {
  const width = useWindowWidth();

  return (
    <div>
      <p>Window width: {width}</p>
    </div>
  );
}

ဒီ code example ထဲမှာဆိုရင် useWindowwidth ဆိုတဲ့ hook က useState နဲ့ useEffect hook ကို window ရဲ့ width ကို track လုပ်ဖို့နဲ့ update လုပ်ဖို့ အသုံးပြုထားတာဖြစ်ပါတယ်။ 'Example' Component ကတော့ 'useWindowWidth'ကိုအသုံးချပြီး လက်ရှိ window ရဲ့ width ကိုယူထားတာဖြစ်ပါတယ်။

Maintainable ဖြစ်တဲ့ code တွေအတွက် custom hook ကို complex state တွေကို encapsulation လုပ်တဲ့နေရာမှာရော logic တွေကိုပြန်ပြီးအသုံးချတဲ့နေရာမှာပါ အသုံးပြုနိုင်ပါတယ်။

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

Creative Coder Myanmar Telegram Channel ⬇️
https://t.me/creativecodermm

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐎𝐟𝐟𝐜𝐢𝐚𝐥 𝐖𝐞𝐛𝐬𝐢𝐭𝐞 ⬇
https://creativecodermm.com/

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐘𝐨𝐮𝐭𝐮𝐛𝐞 𝐂𝐡𝐚𝐧𝐧𝐞𝐥 ⬇
https://www.youtube.com/c/CreativeCoderMyanmar

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐋𝐢𝐧𝐤𝐞𝐝𝐢𝐧 ⬇
https://www.linkedin.com/company/creative-coder-myanmar/

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐌𝐲𝐚𝐧𝐦𝐚𝐫 𝐆𝐢𝐭𝐇𝐮𝐛 ⬇
https://github.com/Creative-Coder-Myanmar

#Creative_Coder_Myanmar
#developer
#website
#react
#hook

𝐮𝐬𝐞𝐂𝐨𝐧𝐭𝐞𝐱𝐭 𝐇𝐨𝐨𝐤 (𝐑𝐞𝐚𝐜𝐭 𝐇𝐨𝐨𝐤 𝐒𝐞𝐫𝐢𝐞𝐬)

======================================

useContext Hook ဆိုတာကတော့ component တွေကြားထဲမှာ data တွေ sharing လုပ်တဲ့အခါ component tree ရဲ့ဘယ်နေရာမှာပဲရှိနေနေ property တွေို သုံးစရာမလိုဘဲ data တွေကို sharing လုပ်ပေးနိုင်တဲ့ hook တစ်ခုပဲဖြစ်ပါတယ်။
useContext Hook ကိုအသုံးပြုဖို့အတွက်ဆိုရင် create context function ကိုသုံးပြီး context object တစ်ခုဖန်တီးပေးဖို့လိုအပ်ပါတယ်။ဒီ context object ကိုသုံးပြီး context တွေကို component tree ထဲကို wrap လုပ်ပေးမဲ့ Provider Component တစ်ခုကိုဖန်တီးလို့ရနိုင်မှာပဲဖြစ်ပါတယ်။

React Component ထဲမှာ useContext Hook ကိုထည့်သုံးထားတဲ့ example လေးကိုကြည့်လိုက်ရအောင် 👀

import React, { useContext } from 'react';
import { MyContext } from './MyContext';

function MyComponent() {
const { data } = useContext(MyContext);

return (
<div>
<h1>{data.title}</h1>
<p>{data.description}</p>
</div>
);
}

ဒီ example လေးမှာဆိုရင် MyComponent လို့နာမည်ပေးထားတဲ့ functional component တစ်ခုက useContext Hook ကိုသုံးပြီး data ‌တွေကို MyContext လို့နာမည်ပေးထားတဲ့ Provider Component ကနေတစ်ဆင့် consume လုပ်သွားတာကိုတွေ့ရမှာဖြစ်ပါတယ်။ useContext Hook ကိုအသုံးပြုမယ်ဆိုရင် ပိုပြီး flexible ဖြစ် reusable လည်းဖြစ်တဲ့ component တွေကို ဖန်တီးနိုင်မှာဖြစ်ပါတယ်။ ဒါ့အပြင် data တွေကို access ရယူတဲ့နေရာမှာလည်း prop တွေအပေါ် မှီခိုစရာမလိုတော့ဘဲ ရယူနိုင်မှာဖြစ်ပါတယ်။

global state တွေဖြစ်တဲ့ user authentication state တွေ manage လုပ်တဲ့နေရာမှာရော Theme State တွေမှာရော useContext Hook ကိုအသုံးပြုနိုင်ပါတယ်။

useContext Hook ကိုမသုံးဖူးဆိုရင် component တွေကနေတစ်ဆင့် data တွေကိုရယူတဲ့နေရာမှာ prop တွေကို သုံးရမှာပါ။ ကြာလာတဲ့အခါမှာ application ကပိုပြီး complex ဖြစ်လာရင်ထိန်းချုပ်ရတာခက်ခဲလာနိုင်ပါတယ်။
useContext ကိုအသုံးပြုခြင်းဖြင့်ဒီလို ပြဿနာတွေကိုရှောင်ရှားနိုင်ပြီး code ကိုလည်း maintain လုပ်ရတာပိုပြီးလွယ်ကူစေပါတယ်။

နောက်နေ့တွေမှာ React ရဲ့ ဘယ် hook တွေအကြောင်းကိုဆက်ပြီးတင်ပေးသွားမလဲဆိုတာစောင့်ကြည့်ပေးကြပါဦးနော် 👀

ဒီလို React ရဲ့ Hook တွေအကြောင်းစုံစုံလင်လင်ရှင်းပြပေးမဲ့ React အတန်းလေးက လူပြည့်ဖို့နှစ်နေရာပဲလိုတော့တာဖြစ်တဲ့အတွက် အမြန်လေးလာအပ်ထားမှစိတ်ချရမယ်နော် ။

Creative Coder Myanmar Telegram Channel ⬇️
https://t.me/creativecodermm

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐎𝐟𝐟𝐜𝐢𝐚𝐥 𝐖𝐞𝐛𝐬𝐢𝐭𝐞 ⬇
https://creativecodermm.com/

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐘𝐨𝐮𝐭𝐮𝐛𝐞 𝐂𝐡𝐚𝐧𝐧𝐞𝐥 ⬇
https://www.youtube.com/c/CreativeCoderMyanmar

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐋𝐢𝐧𝐤𝐞𝐝𝐢𝐧 ⬇
https://www.linkedin.com/company/creative-coder-myanmar/

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐌𝐲𝐚𝐧𝐦𝐚𝐫 𝐆𝐢𝐭𝐇𝐮𝐛 ⬇
https://github.com/Creative-Coder-Myanmar

#Creative_Coder_Myanmar
#developer
#website
#react
#hook

𝐮𝐬𝐞𝐑𝐞𝐝𝐮𝐜𝐞𝐫 𝐇𝐨𝐨𝐤 (𝐑𝐞𝐚𝐜𝐭 𝐇𝐨𝐨𝐤 𝐒𝐞𝐫𝐢𝐞𝐬)
======================================

React Hook Series ထဲမှာပါ၀င်တဲ့ useReducer Hook အကြောင်းကိုကြည့်လိုက်ရအောင် 👀

Redux Library နဲ့ဆင်တူတဲ့ popular state management library တစ်ခုဖြစ်ပါတယ်။useState Hook မှာတုန်းက state တစ်ခုချင်းစီကို manage လုပ်ဖို့သုံးပေမဲ့ useReducer Hook ကတော့ complex state တွေကို manage လုပ်ဖို့အသုံးပြုရတဲ့ powerful hook တစ်ခုပဲဖြစ်ပါတယ်။
 useReducer Hook မှာ argument နှစ်ခုပါ၀င်ပြီး ပထမတစ်ခုက reducer function နဲ့နောက်တစ်ခုက initial state value တို့ဖြစ်ပါတယ်။ reducer function က action တွေပေါ်မူတည်ပြီး state တွေကို update လုပ်ပေးမှာဖြစ်ပြီး initial value တွေကတော့ initial state value တွေကိုဖော်ပြပေးမှာပဲဖြစ်ပါတယ်။

useReducer Hook ကိုအသုံးပြုပြီးရေးထားတဲ့ code Example လေးတွေကိုကြည့်လိုက်ရအောင်

import React, { useReducer } from 'react';

function Counter() {
  const initialState = { count: 0 };
  
  function reducer(state, action) {
    switch (action.type) {
      case 'increment':
        return { count: state.count + 1 };
      case 'decrement':
        return { count: state.count - 1 };
      default:
        throw new Error();
    }
  }

  const [state, dispatch] = useReducer(reducer, initialState);
  const { count } = state;

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

ဒီ example လေးမှာဆိုရင် initial state က "count" ကို 0 လို့ထားထားပါတယ်။နောက်ပြီးတော့ current state နဲ့ action ကို define လုပ်ပေးတဲ့ reducer function တစ်ခုရယ် အဲ့ကနေ action ပေါ်မူတည်ပြီး new state တစ်ခုကို return ပြန်လာပေးမှာဖြစ်ပါတယ်။ reducer function မှာပါ၀င်တဲ့ action နှစ်ခုဖြစ်တဲ့ increment နဲ့ decrement တွေက count ရဲ့ value ကိုလျော့စေတိုးစေပါတယ်။ 

useReducer Hook နဲ့တွဲပြီးတော့ dispatch function ကိုလည်း user click တွေကို handle လုပ်ဖို့အသုံးပြုပါတယ်။ 
simple state တွေကို manage လုပ်ဖို့ useState hook ကိုလည်းအသုံးပြုလို့ရပေမဲ့ application ကပိုပြီး complex ဖြစ်လာတဲ့အချိန်ကျရင် useReducer Hook ကပိုပြီးအဆင်ပြေစေပါတယ်။ ကိုယ့်ရဲ့ state တွေက complex ဖြစ်လာတဲ့အခါ values တွေအများကြီးကိုတစ်ခါတည်ူ update လုပ်ဖို့လည်းလိုအပ်လာပါတယ်။ ဒီအခါမှာ state update တွေကို manage လုပ်ဖို့သေချာတဲ့နည်းလမ်းကတော့ useReducer Hook ကိုအသုံးပြုတာပါပဲ။ 

React အတန်းကလည်း လူနည်းနည်းပဲလက်ခံတော့တဲ့အတွက် နောက် batch ကိုမစောင့်ချင်ရင် အခုပဲလာအပ်လိုက်တော့နော် 👀

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

Creative Coder Myanmar Telegram Channel ⬇️
https://t.me/creativecodermm

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐎𝐟𝐟𝐜𝐢𝐚𝐥 𝐖𝐞𝐛𝐬𝐢𝐭𝐞 ⬇
https://creativecodermm.com/

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐘𝐨𝐮𝐭𝐮𝐛𝐞 𝐂𝐡𝐚𝐧𝐧𝐞𝐥 ⬇
https://www.youtube.com/c/CreativeCoderMyanmar

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐋𝐢𝐧𝐤𝐞𝐝𝐢𝐧 ⬇
https://www.linkedin.com/company/creative-coder-myanmar/

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐌𝐲𝐚𝐧𝐦𝐚𝐫 𝐆𝐢𝐭𝐇𝐮𝐛 ⬇
https://github.com/Creative-Coder-Myanmar

#Creative_Coder_Myanmar
#developer
#website
#react
#hook

"𝐔𝐬𝐞𝐫 𝐏𝐫𝐨𝐟𝐢𝐥𝐞 & 𝐀𝐜𝐭𝐢𝐯𝐢𝐭𝐲 𝐓𝐫𝐚𝐜𝐤𝐢𝐧𝐠 𝐅𝐞𝐚𝐭𝐮𝐫𝐞 တွေပါ၀င်လာတဲ့ 𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐏𝐥𝐚𝐭𝐟𝐨𝐫𝐦"

======================================
ကျွန်တော်တို့ Creative Coder Myanmar ရဲ့ Learning Platform မှာဒီရက်ပိုင်းကျောင်းသားတွေ လေ့လာသင်ယူရမှာပိုမို ရမှာပိုမိုအဆင်ပြေစေဖို့ရည်ရွယ်ပြီးပြင်ဆင်ထားတာတွေအများကြီးရှိပါတယ်။ ဒီထဲကမှ ထုတ်ပြပေးချင်တာကတော့ အမိုက်ဆုံး Features တွေဖြစ်တဲ့ User Profile & Activity Tracking Feature တွေပဲဖြစ်ပါတယ်။

User Profile မှာဆိုရင်ကျောင်းသားတစ်ဦးချင်းစီအလိုက် သူယူထားတဲ့ Course တွေ activity တွေကို တစ်နေရာတည်းပြန်ပြီးကြည့်လို့ရအောင်ပြုလုပ်ပေးထားပါတယ်။

User Name Email နဲ့ Github တို့ Facebook တို့ Linkedin တွေရဲ့ profile link တွေပါထည့်သွင်းချင်ထည့်သွင်းလို့ရအောင် ပြုလုပ်ပေးထားပါတယ်။

Profile လေးရဲ့အပေါ်ဘက်မှာတော့ သင်ယူလေ့လာနေဆဲ Course အရေအတွက်နဲ့ ပြီးမြောက်သွားတဲ့ Course တွေကိုမြင်တွေ့ရမှာပဲဖြစ်ပါတယ်။

တစ်ခုခုကိုလေ့လာသင်ယူတဲ့နေရာမှာ အရေးကြီးဆုံးက ကိုယ်ဘာတွေ သင်ယူခဲ့ရပြီးပြီလဲ ဘယ်လောက်ရသွားလဲဆိုတဲ့ ကိုယ့်ရဲ့ သင်ယူလေ့လာမှု process ကိုသိရှိစေဖို့ပဲဖြစ်ပါတယ်။

ဒါအတွက် ကျွန်တော်တို့ Learning Platform မှာလေ့လာတဲ့အချိန်မှာ ကိုယ်ကတော့ Course ဘယ်နှစ်ခုယူထားတယ် ။ ဘယ် Course ကတော့ လုံး၀ပြီးသွားပြီ ဆိုတာမျိုးလေးတွေကို ကိုယ့်ရဲ့ user profile မှာတင်ကြည့်နိုင်ပြီး process ကို tracking လုပ်နိုင်တော့မှာပဲဖြစ်ပါတယ်။

ဒါတင်ပဲလားဆိုတော့လည်းမဟုတ်သေးပါဘူး။ Course တစ်ခုချင်းစီအလိုက်လည်း ဘယ်နှစ်ရာခိုင်နှုန်းပြီး‌မြောက်ထားတယ်ဆိုတာ ပြန်ပြီးကြည့်ရှုလို့ရနေမှာဖြစ်ပါတယ်။ ကိုယ့်ရဲ့ profile ထဲမှာတင် All | Ongoing | Completed ဆိုပြီး Category တွေခွဲပေးထားတဲ့အတွက် ကိုယ့်ရဲ့ process ကိုရှင်းရှင်းလင်းလင်းမြင်ရမှာဖြစ်ပါတယ်။ Search feature ကိုလည်း profile တစ်ခုချင်းစီမှာ ထပ်မံထည့်သွင်းပေးထားတဲ့အတွက် ကိုယ်လေ့လာချင်တဲ့ course ကို keyword လေးရိုက်ရှာလိုက်ရုံနဲ့တင် ချက်ချင်းတန်းပေါ်လာမှာပဲဖြစ်ပါတယ်။

ကိုယ့်ရဲ့ activity တွေကိုဖော်ပြပေးမဲ့ အပိုင်းလေးကိုဆက်ကြည့်လိုက်ရအောင် 👀

ဒီ အပိုင်းမှာ ကိုယ်က သူများ comment ကို reply သွားလုပ်ရင်လည်း My Activity အောက်မှာ ၀င်ကြည့်လို့ရမှာဖြစ်ပါတယ်။ ဒီနေရာမှာ lesson တစ်ခုပြီးမြောက်ကြောင်းတွေကိုလည်းပြပေးပြီး comment ကို reaction ပေးတာ reply ပြန်ပေးထားတာတွေ အထိပါ history ပြပေးသွားမှာပါ။ Learning Platform ပေါ်မှာ ကိုယ်လုပ်သမျှ activity တွေအကုန် tracking လုပ်ပြီး ဖော်ပြပေးနေမှာပဲဖြစ်ပါတယ်။

ဒီလို Feature တွေကြောင့်

✔️ စာလုပ်ရတာပိုပြီးအဆင်ပြေလာမယ်။

✔️ တစ်ခုခုဆို history ချက်ချင်းပြန်ရှာလို့လွယ်မယ်။

✔️ Process တွေကို လွယ်လွယ်ကူကူ ပြန်ကြည့်နိုင်မယ်။

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

✔️ ကျောင်းသား အချင်းချင်း communicate လုပ်နိုင်လာမယ်။

✔️ ကိုယ့် Profile ကို CV Resume လိုနေရာမှာ ထည့်ပြနိုင်လာမယ်။

ဒီ feature တွေကို ကျွန်တော်တို့ရဲ့ Learning Platform မှာ အခု ကစတင်ပြီးအသုံးပြုလို့ရမှာဖြစ်ပါတယ်။

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

ဒီ feature လေးကိုအခုပဲ learning Platform မှာသွားရောက်အသုံးပြုနိုင်ပါပြီ။

👉https://creativecodermm.com/

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐎𝐟𝐟𝐜𝐢𝐚𝐥 𝐖𝐞𝐛𝐬𝐢𝐭𝐞 ⬇

https://creativecodermm.com/

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐘𝐨𝐮𝐭𝐮𝐛𝐞 𝐂𝐡𝐚𝐧𝐧𝐞𝐥 ⬇

https://www.youtube.com/c/CreativeCoderMyanmar

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐋𝐢𝐧𝐤𝐞𝐝𝐢𝐧 ⬇

https://www.linkedin.com/company/creative-coder-myanmar/

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐌𝐲𝐚𝐧𝐦𝐚𝐫 𝐆𝐢𝐭𝐇𝐮𝐛 ⬇

https://github.com/Creative-Coder-Myanmar

#Creative_Coder_Myanmar
#developer
#website

𝐮𝐬𝐞𝐑𝐞𝐟 𝐇𝐨𝐨𝐤 (𝐑𝐞𝐚𝐜𝐭 𝐇𝐨𝐨𝐤 𝐒𝐞𝐫𝐢𝐞𝐬)

===========================================

React ရဲ့ built-in hook တစ်ခုဖြစ်တဲ့ useRef Hook ကို component နဲ့သက်ဆိုင်တဲ့ values တွေကိုသိမ်းဆည်းဖို့ အသုံးပြုကြပါတယ်။ ဒါ့အပြင် DOM nodes တွေနဲ့ re-render လုပ်တဲ့နေရာမှာ လိုအပ်တဲ့ value တွေကိုသိမ်းဆည်းဖို့အတွက်ပါ အသုံးပြုလို့ရတဲ့အတွက် react မှာတော်တော်လေးအသုံး၀င်တဲ့ hook တစ်ခုလည်းဖြစ်ပါတယ်။

useRef Hook ကနေတစ်ဆင့် . current property ပါ၀င်တဲ့ mutable object တစ်ခုကို return ပြန်ပေးပါတယ်။ ဒီ property ထဲမှာ ဘယ် value မဆို သိမ်းဆည်းလို့ရပြီး re-render ပြန်မဖြစ်ဘဲနဲ့လည်း value ကိုပြောင်းလဲပေးနိုင်ပါတယ်။

📝useRef ကိုသုံးထားတဲ့ ပထမဆုံး case အနေနဲ့ DOM element တွေကို access လုပ်ပြီးရယူတာဖြစ်ပါတယ်။ ဒါက input field ကိုပဲ focus လုပ်ချင်တဲ့အခါ DOM တွေနဲ့တိုက်ရိုက် interact လုပ်ရတဲ့နေရာမှာ အသုံး၀င်လာမှာဖြစ်ပါတယ်။ 

Code example လေးနဲ့အတူကြည့်လိုက်ရအောင် 👀

import { useRef } from 'react';

function MyComponent() {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
}

📝Previous state value တွေကို သိမ်းချင်တဲ့အခါမျိုးတွေမှာလည်း useRef Hook ကိုအသုံးပြုလို့ရပါတယ်။

Code example 👇

import { useRef, useEffect } from 'react';

function MyComponent() {
  const countRef = useRef(0);
  const previousCountRef = useRef(0);

  useEffect(() => {
    previousCountRef.current = countRef.current;
  }, [countRef.current]);

  const handleIncrement = () => {
    countRef.current++;
  };

  return (
    <div>
      <p>Current Count: {countRef.current}</p>
      <p>Previous Count: {previousCountRef.current}</p>
      <button onClick={handleIncrement}>Increment Count</button>
    </div>
  );
}

📝နောက်ဆုံးတစ်ခုအနေနဲ့ကတော့ useRef ကို computation တွေကို cache လုပ်တဲ့နေရာမှာ အသုံးပြုလို့ရနိုင်ပါတယ်။ ဒီလို အသုံးပြုခြင်းက တစ်ခါပဲ တွက်ချက်ပေးမှာဖြစ်တဲ့အတွက် expensive computation တွေကိုလည်းမဖြစ်စေပါဘူး။

import { useRef, useEffect } from 'react';

function MyComponent() {
  const resultRef = useRef(null);

  useEffect(() => {
    if (!resultRef.current) {
      // Perform an expensive computation and store the result
      const result = doExpensiveComputation();
      resultRef.current = result;
    }
  }, []);

  return (
    <div>
      <p>The result of the expensive computation is: {resultRef.current}</p>
    </div>
  );
}

useRef Hook ရဲ့ အသုံး၀င်တဲ့နေရာတွေက အများကြီးပဲဆိုတော့ developer ကြီးတို့လည်းစမ်းသုံးကြည့်ဖို့ မမေ့ကြနဲ့နော် 👀

Creative Coder Myanmar Telegram Channel ⬇️
https://t.me/creativecodermm

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐎𝐟𝐟𝐜𝐢𝐚𝐥 𝐖𝐞𝐛𝐬𝐢𝐭𝐞 ⬇
https://creativecodermm.com/

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐘𝐨𝐮𝐭𝐮𝐛𝐞 𝐂𝐡𝐚𝐧𝐧𝐞𝐥 ⬇
https://www.youtube.com/c/CreativeCoderMyanmar

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐋𝐢𝐧𝐤𝐞𝐝𝐢𝐧 ⬇
https://www.linkedin.com/company/creative-coder-myanmar/

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐌𝐲𝐚𝐧𝐦𝐚𝐫 𝐆𝐢𝐭𝐇𝐮𝐛 ⬇
https://github.com/Creative-Coder-Myanmar

#Creative_Coder_Myanmar
#developer
#website
#react
#hook

𝐮𝐬𝐞𝐌𝐞𝐦𝐨 𝐇𝐨𝐨𝐤 (𝐑𝐞𝐚𝐜𝐭 𝐇𝐨𝐨𝐤 𝐒𝐞𝐫𝐢𝐞𝐬)

======================================

React Hook Series ရဲ့ built in hook တစ်ခုဖြစ်တဲ့ useMemo Hook ကို value တွေကို memorize ဖြစ်ဖို့ရယ် ကိုယ့်ရဲ့ application ရဲ့ performance ကိုတိုးလာစေချင်တဲ့အတွက်အသုံးပြုကြပါတယ်။
Function call တွေခေါ်တဲ့အခါ caching process တွေကိုမှတ်ထားပေးတာကြောင့် နောက်တစ်ခေါက်ခေါ်တဲ့နေရာမှာလည်း same argument တွေကိုပဲအသုံးပြုပြီး ပြန်တွက်စရာမလိုဘဲ cache value ကိုသာ return ပြန်ပေးမှာဖြစ်ပါတယ်။

Code Example ကတော့

const memoizedValue = useMemo(() => {
// function to be memoized
return memoizedValue;
}, [dependencyList]);

ပထမဆုံး argument တစ်ခုဖြစ်တဲ့ useMemo က return ပြန်တဲ့အခါ value တွေကိုမှတ်မိစေဖို့အသုံးပြုပါတယ်။ second argument ကတော့ memorized value တွေပေါ်မူတည်ပြီးဖြစ်လာမဲ့ dependency array တစ်ခုပဲဖြစ်ပါတယ်။ dependency array ထဲမှာတစ်ခုခုပြောင်းလဲသွားတာနဲ့ memorize value ကိုပြန်ပြီး calculate လုပ်မှာလည်းဖြစ်ပါတယ်။

ဥပမာ item list လေးတစ်ခုကို render လုပ်ပေးမဲ့ component တစ်ခုရှိတယ်ဆိုပါစို့။ search query‌ ပေါ်မူတည်ပြီး list ကို filter လုပ်ချင်တယ်ဆိုရင် useMemo Hook ကို filter လုပ်ပြီးသား list ကိုမှတ်မိဖို့အတွက် အသုံးပြုလို့ရပါတယ်။

Code example လေးနဲ့အတူကြည့်လိုက်ရအောင် 👀

import React, { useState, useMemo } from 'react';

function ItemList({ items, searchQuery }) {
const [filteredItems, setFilteredItems] = useState(items);

useMemo(() => {
const newFilteredItems = items.filter(item => item.includes(searchQuery));
setFilteredItems(newFilteredItems);
}, [items, searchQuery]);

return (
<ul>
{filteredItems.map(item => <li key={item}>{item}</li>)}
</ul>
);
}

ဒီ example မှာဆိုရင် newfilteredItems array ကို memorize လုပ်ဖို့ useMemo Hook ကိုအသုံးပြုထားပါတယ်။ useMemo function ထဲမှာ အသုံးပြုထားတဲ့ setFilteredItems ကိုတော့ function call ခေါ်ပြီးတာနဲ့တစ်ပြိုင်နက် new filtered items တွေရဲ့ state ကို update လုပ်ဖို့အသုံးပြုပါတယ်။ items ဒါမှမဟုတ် searchQuery မှာ ပြောင်းလဲမှုဖြစ်သွားတာနဲ့ component ရဲ့ performance ကိုတိုးစေမဲ့ useMemo Hook ကိုခေါ်ပေးမှာပဲဖြစ်ပါတယ်။

Creative Coder Myanmar Telegram Channel ⬇️
https://t.me/creativecodermm

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐎𝐟𝐟𝐜𝐢𝐚𝐥 𝐖𝐞𝐛𝐬𝐢𝐭𝐞 ⬇
https://creativecodermm.com/

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐘𝐨𝐮𝐭𝐮𝐛𝐞 𝐂𝐡𝐚𝐧𝐧𝐞𝐥 ⬇
https://www.youtube.com/c/CreativeCoderMyanmar

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐋𝐢𝐧𝐤𝐞𝐝𝐢𝐧 ⬇
https://www.linkedin.com/company/creative-coder-myanmar/

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐌𝐲𝐚𝐧𝐦𝐚𝐫 𝐆𝐢𝐭𝐇𝐮𝐛 ⬇
https://github.com/Creative-Coder-Myanmar

#Creative_Coder_Myanmar
#developer
#website
#react
#hook

Creative Coder Myanmar Telegram Channel ⬇️
https://t.me/creativecodermm

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐎𝐟𝐟𝐜𝐢𝐚𝐥 𝐖𝐞𝐛𝐬𝐢𝐭𝐞 ⬇
https://creativecodermm.com/

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐘𝐨𝐮𝐭𝐮𝐛𝐞 𝐂𝐡𝐚𝐧𝐧𝐞𝐥 ⬇
https://www.youtube.com/c/CreativeCoderMyanmar

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐋𝐢𝐧𝐤𝐞𝐝𝐢𝐧 ⬇
https://www.linkedin.com/company/creative-coder-myanmar/

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐌𝐲𝐚𝐧𝐦𝐚𝐫 𝐆𝐢𝐭𝐇𝐮𝐛 ⬇
https://github.com/Creative-Coder-Myanmar

#Creative_Coder_Myanmar
#developer
#website
#php
#laravel

PHP & Laravel အတန်းတွေရဲ့ Review လေးတွေကိုဖတ်ကြည့်လိုက်ရအောင် 💬

ဒါလေးတွေကတော့ Laravel အတန်းကကျောင်းသားတွေရဲ့ Honest Review လေးတွေပဲဖြစ်ပါတယ်။ Creative Coder Myanmar ကိုယုံယုံကြည်ကြည်နဲ့အပ်နှံပေးလို့လည်းကျေးဇူးတင်ပါတယ်။

PHP+Laravel Zoom အတန်းနဲ့ Learning Platform အတန်းBatch-2 လေးလက်ခံထားပြီဖြစ်တာမို့ အတန်းအပ်ချင်တယ်ဆိုရင် page messenger ကိုလာလို့ရပါတယ်။

PHP+Laravel Zoom class✅✅✅
https://www.facebook.com/100064708297617/posts/594169206083351/

Creative Coder Myanmar Telegram Channel ⬇️
https://t.me/creativecodermm

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐎𝐟𝐟𝐜𝐢𝐚𝐥 𝐖𝐞𝐛𝐬𝐢𝐭𝐞 ⬇
https://creativecodermm.com/

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐘𝐨𝐮𝐭𝐮𝐛𝐞 𝐂𝐡𝐚𝐧𝐧𝐞𝐥 ⬇
https://www.youtube.com/c/CreativeCoderMyanmar

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐋𝐢𝐧𝐤𝐞𝐝𝐢𝐧 ⬇
https://www.linkedin.com/company/creative-coder-myanmar/

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐌𝐲𝐚𝐧𝐦𝐚𝐫 𝐆𝐢𝐭𝐇𝐮𝐛 ⬇
https://github.com/Creative-Coder-Myanmar

#Creative_Coder_Myanmar
#developer
#website
#Laravel

ကျွန်တော်တို့ရဲ့ 𝐘𝐨𝐮𝐓𝐮𝐛𝐞 𝐂𝐡𝐚𝐧𝐧𝐞𝐥 လေးမှာ 𝐒𝐮𝐛𝐬𝐜𝐫𝐢𝐛𝐞𝐫𝐬 ပေါင်း 5000 ကျော်သွားပါပြီ။

ဒီအတောအတွင်း ဝိုင်းပြီး 𝐬𝐮𝐩𝐩𝐨𝐫𝐭 ပေးခဲ့ကြတဲ့သူတွေကိုလည်းကျေးဇူးတင်ပါတယ်။
𝐏𝐲𝐭𝐡𝐨𝐧 𝐁𝐞𝐠𝐢𝐧𝐧𝐞𝐫 𝐂𝐨𝐮𝐫𝐬𝐞 နဲ့ 𝐇𝐭𝐦𝐥 𝐂𝐨𝐮𝐫𝐬𝐞 တွေကို 𝐘𝐨𝐮𝐓𝐮𝐛𝐞 𝐂𝐡𝐚𝐧𝐧𝐞𝐥 မှာသွားရောက်ကြည့်ရှုနိုင်ပါတယ်။ ထပ်ပြီးလည်း 𝐪𝐮𝐚𝐥𝐢𝐭𝐲 ကောင်းတဲ့ 𝐭𝐢𝐩𝐬 & 𝐭𝐫𝐢𝐜𝐤 𝐯𝐢𝐝𝐞𝐨 တွေကိုတင်ပေးနိုင်ဖို့ကြိုးစားသွားပါ့မယ် ခင်ဗျာ။

𝐓𝐡𝐚𝐧𝐤𝐬 𝐟𝐨𝐫 𝐲𝐨𝐮𝐫 𝐒𝐮𝐩𝐩𝐨𝐫𝐭 🎉

Creative Coder Myanmar Telegram Channel ⬇️
https://t.me/creativecodermm

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐎𝐟𝐟𝐜𝐢𝐚𝐥 𝐖𝐞𝐛𝐬𝐢𝐭𝐞 ⬇
https://creativecodermm.com/

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐘𝐨𝐮𝐭𝐮𝐛𝐞 𝐂𝐡𝐚𝐧𝐧𝐞𝐥 ⬇
https://www.youtube.com/c/CreativeCoderMyanmar

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐋𝐢𝐧𝐤𝐞𝐝𝐢𝐧 ⬇
https://www.linkedin.com/company/creative-coder-myanmar/

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐌𝐲𝐚𝐧𝐦𝐚𝐫 𝐆𝐢𝐭𝐇𝐮𝐛 ⬇
https://github.com/Creative-Coder-Myanmar

#Creative_Coder_Myanmar
#developer
#website

𝐏𝐫𝐨𝐠𝐫𝐚𝐦𝐦𝐢𝐧𝐠 နယ်ပယ်ထဲမှာလည်းအလုပ်လုပ်ချင်တယ် ။ 𝐜𝐨𝐝𝐞 လည်းမရေးချင်ဘူးဆိုရင်.......

=======================================

April Fool မဟုတ်လို့ ရဲရဲကြီး ဆက်ဖတ်ပါနော် 👀

လုပ်ချင်တဲ့ နယ်ပယ်ကတော့ Programming ဒါပေမဲ့ code တော့မရေးချင်ဘူးဆိုတဲ့ သူလေးတွေရှိကြလားဗျို့

ဒါဆိုရင်တော့ဒီစာလေးကို အဆုံးထိဖတ်ပေးနော် 👀

မပြောပြခင်အရင်ဆုံးပြောပြထားချင်တာက ဒီထဲက အလုပ်တစ်ချို့က code မရေးလို့ရပေမဲ့ code အကြောင်းတွေ bug ‌တွေ issue တွေကိုဘယ်လိုဖြေရှင်းမလဲဆိုတာတွေ
programming concepts တွေ သိထားဖို့လိုအပ်ပါတယ်။

👤 UX Designers

Software Products တွေအတွက် user interface တွေရေးဆွဲပေးရတဲ့ designer တွေဖြစ်ပါတယ်။ အလုပ်လုပ်တဲ့နေရာမှာ user တွေအတွက်သုံးလို့အဆင်ပြေမဲ့ ပုံစံ Developer တွေအတွက်လည်း develop လုပ်လို့အဆင်ပြေစေမဲ့ design မျိုးကို team နဲ့အတူပေါင်းပြီးရေးဆွဲရမှာပဲဖြစ်ပါတယ်။ Wireframe တွေ Prototype တွေစတဲ့ design ရေးဆွဲရမှာလိုအပ်တဲ့ tool တွေ concept တွေအကြောင်းကိုလည်းသိထားဖို့လိုအပ်ပါတယ်။

👤 Technical Writer

Software Products တွေအတွက် technical documentation တွေဖန်တီးပေးရတဲ့သူတွေဖြစ်ပါတယ်။ Development Team နဲ့အတူ တွဲပြီးအလုပ်လုပ်ရပြီး product ရဲ့ features တွေ functions တွေအကြောင်းကိုလည်းသေချာနားလည်ထားဖို့လိုအပ်ပါတယ် ။ ဒါ့အပြင် end users တွေက ကိုယ့် product အကြောင်းသေချာလေးနားလည်ဖို့အတွက် ရေးသားနိုင်တဲ့ skill လည်းရှိထားရဦးမှာဖြစ်ပါတယ်။

👤 Quality Assurance Analyst

Code တော့ရေးစရာမလိုပေမဲ့ code တွေအကြောင်းသေချာနားလည်ရမဲ့သူပဲဖြစ်ပါတယ်။ Software တွေကို requirements တွေ specifications တွေနဲ့ကိုက်ညီရဲ့လားဆိုတာ စစ်ဆေးပေးရတဲ့ tester တစ်ဦးဖြစ်ပါတယ်။ Development Team နဲ့အတူ bug တွေ issue တွေပေါ်လာရင်ထောက်ပြပေးနိုင်ဖို့ အလုပ်လုပ်အတူတူ တွဲလုပ်ရမှာပါ။

👤 Business Analyst

Project တစ်ခုရဲ့ စီးပွာရေးလိုအပ်ချက်တွေနဲ့ကိုက်ညီစေဖို့ စီးပွာရေးနဲ့သက်ဆိုင်တာတွေကိုသိထားရမဲ့သူဖြစ်ပါတယ်။ ဒီလိုသိထားတဲ့ project ရဲ့ technical requirements တွေကို Development Team အတွက်ပြန်ပြီးပြောပြပေးရမှာပါ။ များသောအားဖြင့် stakeholders တွေ client တွေနဲ့အတူတွဲပြီးအလုပ်လုပ်ရကာ လိုအပ်တဲ့ software တစ်ခုရဖို့ စီးပွားရေးလိုအပ်ချက်နဲ့လည်းကိုက်ညီ Development Team အတွက်လည်းအဆင်ပြေအောင် ပေါင်းကူးတံတားအဖြစ်ဆောင်ရွက်ပေးတဲ့သူလည်းဖြစ်ပါတယ်။

👤Project Manager

Code မရေးရပေမဲ့ Software တစ်ခု Develop လုပ်ဖို့ ပုံကြမ်းအဆင့်ကနေစပြီး ပြီးမြောက်တဲ့အထိ အစအဆုံးတာ၀န်ရှိသူလည်းဖြစ်ပါတယ်။ Project အတွက်လိုအပ်တဲ့ budget တွေ time နဲ့ ပါ၀င်မဲ့လူတွေကို project လိုအပ်ချက်နဲ့ကိုက်ညီအောင်ချိန်ညှိရသူလည်းဖြစ်ပါတယ်။ project တစ်ခုမှာအရေးပါဆုံးသူလို့လည်းပြောလို့ရပါတယ်။
Development Team ၊ Testing Team နဲ့ stakeholders တွေနဲ့အတူ တာ၀န်ယူထားတဲ့ project က ပေးထားတဲ့ အချိန်နဲ့ budget အတွင်းမှာပြီးမြောက်ဖို့ ကြိုးစားအားထုတ်ပေးရမဲ့သူဖြစ်ပါတယ်။

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

Creative Coder Myanmar Telegram Channel ⬇️
https://t.me/creativecodermm

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐎𝐟𝐟𝐜𝐢𝐚𝐥 𝐖𝐞𝐛𝐬𝐢𝐭𝐞 ⬇
https://creativecodermm.com/

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐘𝐨𝐮𝐭𝐮𝐛𝐞 𝐂𝐡𝐚𝐧𝐧𝐞𝐥 ⬇
https://www.youtube.com/c/CreativeCoderMyanmar

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐋𝐢𝐧𝐤𝐞𝐝𝐢𝐧 ⬇
https://www.linkedin.com/company/creative-coder-myanmar/

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐌𝐲𝐚𝐧𝐦𝐚𝐫 𝐆𝐢𝐭𝐇𝐮𝐛 ⬇
https://github.com/Creative-Coder-Myanmar

#Creative_Coder_Myanmar
#developer
#website

❝𝐖𝐞𝐛𝐬𝐢𝐭𝐞 𝐃𝐞𝐯𝐞𝐥𝐨𝐩𝐦𝐞𝐧𝐭 𝐏𝐫𝐨𝐜𝐞𝐬𝐬 မပါမဖြစ်တဲ့ 𝐃𝐞𝐩𝐥𝐨𝐲𝐦𝐞𝐧𝐭 𝐂𝐨𝐮𝐫𝐬𝐞 ကိုတက်ရောက်နိုင်ပါပြီ ❞

======================================

Project တစ်ခုပြီးခါနီးတဲ့အခါ end-user တွေအသုံးပြုဖို့နဲ့ Production Environment ထဲကိုရောက်ဖို့အတွက် deploy လုပ်ရပါတယ်။
ဒီအခါမှာ ကိုယ့်ရဲ့ website ကို reliable ဖြစ်အောင် efficient ဖြစ်အောင်လုပ်နိုင်ဖို့အတွက် Developer ကြီးတို့အနေနဲ့
Website Deployment အကြောင်းကိုသိထားဖို့က ကိုယ်ကိုယ်တိုင် လုပ်ငန်းခွင်၀င်တဲ့နေရာမှာ သိထားသင့်တဲ့ အကြောင်းအရာတစ်ခုဖြစ်လာပါပြီ။

ဒါတွေကို Creative Coder ရဲ့ Website Deployment Course လေးမှာ အကုန်တစ်ခါတည်းသင်ကြားပေးသွားမှာဖြစ်ပါတယ်။
ဘာတွေအဓိကပါ၀င်မလဲဆိုရင်
📝 Domain Name တွေ Hosting Service တွေအကြောင်း
📝 Website Files တွေ Data တွေကို ဘယ်လို transfer လုပ်ရမလဲဆိုတဲ့အကြောင်း
📝database ‌တွေ email account တွေ setup လုပ်တာတွေ စတဲ့ server settings configuration တွေအကြောင်း
📝 Website Testing အကြောင်း
📝 Functionality တွေ သေချာစစ်ဆေးပြီးတဲ့အခါ website ကို live လုပ်တဲ့အခါသိထားသင့်တဲ့ အကြောင်းစတာတွေကိ သင်ကြားပေးသွားမှာပဲဖြစ်ပါတယ်။

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

ဒီ Course လေးကို 30000 MMK နဲ့ ကျွန်တော်တို့ Learning Platform ကနေရော Facebook gp ကနေပါနေရာနှစ်ခုလေ့လာနိုင်မှာဖြစ်ပါတယ်။
ကျွန်တော်တို့ဆီက course တွေက တစ်ခါစာရင်းပေးပြီးတက်ရောက်တိုင်းမှာ lifetime လေ့လာခွင့်ရရှိမှာလည်းဖြစ်ပါတယ်။ဒါ့အပြင် သင်ခန်းစာနဲ့ပတ်သက်ပြီး life time update တွေကိုလည်း support ပေးသွားဦးမှာဖြစ်ပါတယ်။

လူဦးရေကိုလည်း အယောက် ၃၀ သာကန့်သတ်ထားပြီး သင်တန်းကြာချိန်က နှစ်ပတ်ဖြစ်ပါတယ်။
သင်တန်းလေးမှာက server တွေအကြောင်းအဓိကထားပြီးသင်ပေးသွားမှာဖြစ်ပြီး Laravel ကိုလေ့လာထားတဲ့သူတွေ ဒါမှမဟုတ် မလေ့လာထားလည်း server တွေအကြောင်းသီးသန့်သင်ချင်တဲ့သူတွေတက်ရောက်နိုင်ပါတယ်။

သင်ကြားပေးမဲ့ဆရာကလည်း Deployment နဲ့ပတ်သက်တဲ့ Foreign Project တွေများစွာကိုလုပ်ဖူးပြီး လက်ရှိမှာလည်း Team တစ်ခုကိုဦးဆောင်နေတဲ့ Sir Hlaing Min Than ဖြစ်ပါတယ်။

Website Deployment နဲ့ပတ်သက်ပြီး Developer တိုင်းသိသင့်တာတွေကိုပဲ သင်ကြားပေးသွားမဲ့ Website Deployment From Scratch Course လေး ကိုတက်ရောက်ချင်တယ်ဆိုရင်အခုပဲ page messenger ကိုလာရောက်ပြီး စာရင်းပေးသွင်းလို့ရပါပြီ 🙆

#Creative_Coder_Myanmar
#developer
#website
#deployment

𝐂𝐨𝐝𝐞 ပဲရေးနေရတဲ့ 𝐃𝐞𝐯𝐞𝐥𝐨𝐩𝐞𝐫 တစ်ယောက်အတွက် ဘယ်လိုမျိုး 𝐬𝐨𝐟𝐭 𝐬𝐤𝐢𝐥𝐥 တွေလိုအပ်မယ်ထင်ပါသလဲ

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

Developer တစ်ယောက်ရဲ့နေ့စဉ်လူနေမှုဘ၀မှာ အမြဲတမ်း code ရေးတာနဲ့စတင်ပြီး code ရေးတဲ့ အချိန်နဲ့ပဲကုန်ဆုံးနေရတယ်ထင်ရင်တော့ မိတ်ဆွေတို့ရဲ့အထင်ကမှားယွင်းနေပါတယ်။

Developer တွေဆိုတာကလည်း လူမှုအသိုင်းအဝိုင်းမှာနေ့စဉ်ကျင်လည်‌ဖို့လိုအပ်တဲ့လူတွေဖြစ်တဲ့အတွက် code ကိုကောင်းကောင်းရေးနိုင်တာအပြင်အခြားအခြားသော လူမှုဆက်ဆံရေး skill တွေလည်းအများကြီးလိုအပ်ပါတယ်။

📝 Communication Skill မှာဆိုရင် ကိုယ်ရေးတဲ့ code အတွက် feedback တောင်းတာ ၊ team members အချင်းချင်းပြောဆိုဆက်ဆံတာမျိုးတွေ နဲ့ stakeholders တွေနဲ့ညှိုနှိုင်းရတဲ့ အခါမျိုးတွေကျရင် ပြောဆိုဆက်ဆံတတ်တဲ့ skill ကသေချာပေါက်လိုအပ်ပါတယ်။

📝 Problem Solving Skill ကတော့ Developer တွေရဲ့နေ့စဉ်ဘ၀မှာ မပါမဖြစ်တဲ့အရာတစ်ခုပါ။ error တွေ့တဲ့အခါ ဘာကြောင့်ဖြစ်တာလဲ ဘယ်လိုဖြေရှင်းရင်ရမလဲ ဘာကိုသုံးဖို့လိုအပ်လဲဆိုပြီး Creative Coder မှာပြောနေကြအတိုင်း Why? How? What? ကိုအသုံးပြုပြီး ပြဿနာတွေကို သုံးသပ်အ‌ဖြေရှာပါ။

📝 Collaboration Skill ကလည်း Junior ကနေ Senior အထိအရေးပါတဲ့ skill တစ်ခုပဲဖြစ်ပြီးလုပ်ငန်းခွင်မှာ လူအများကြီးနဲ့ပြောဆိုဆက်ဆံရမှာဖြစ်တဲ့အတွက်သေချာပေါက်ရှိထားသင့်တဲ့ skill တစ်ခုပဲဖြစ်ပါတယ်။

📝 Time Management ကောင်းကောင်းမရှိထားရင်တနေ့တာ ဟာ အစီအစဉ်မကျဘဲ အမြဲကမောက်ကမဖြစ်နေမှာပါပဲ။ ဒါကြောင့် ကိုယ်ဘယ်နေ့ဘယ်အချိန်မှာ ဘယ်ဟာကိုပြီးအောင်လုပ်မယ်ဆိုတာကို တစ်ပတ်စာလောက်ကြိုတင်စီစဉ်ထားသင့်ပါတယ်။ ဒီနေရမှာ work Life balance ရှိဖို့ကိုလည်းမမေ့ထားသင့်ပါဘူး။

📝 နောက်ဆုံးတစ်ခုကတော့ flexible ဖြစ်ဖို့ဖြစ်ပြီး ဘယ်ဟာလာလာ ဒီ language နဲ့ပဲရေးမယ်ဆိုပြီးတစ်ယူသန်နေလို့မရပါဘူး။ ဒါကြောင့် နည်းပညာတွေကိုမျက်ခြည်မပြတ် လေ့လာနေသင့်ပြီး project တွေလုပ်တဲ့နေရာမှာလည်း flexible ဖြစ်ရမှာဖြစ်ပါတယ်။

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


#developer
#softskill

Developer ကြီးတွေမှာလည်းအသည်းနှလုံးနဲ့ပါ 😏
အသည်းနှလုံးရှိတဲ့ Developer တွေအတွက် Self Care Tips 

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

နေ့တိုင်းလိုလို laptop တစ်လုံးနဲ့ အလုပ်ရှုပ်နေကြတဲ့ Developer ကြီးတို့အတွက် ကိုယ့်ကိုယ့်ကိုယ် ဂရုစိုက်ဖို့လည်းမမေ့ရအောင် selfcare Tips လေးတွေကိုမျှဝေပေးလိုက်ရပါတယ်။ 

📝 Break ယူဖို့မမေ့ပါနဲ့။

Screen ရှေ့မှာအကြာကြီးထိုင်တာက မျက်လုံးကိုထိခိုက်စေတဲ့အပြင် လူကိုပါ overwhelm ဖြစ်စေနိုင်ပါတယ်။ ဒါကြောင့် screen ကို မိနစ် (၂၀) ကြည့်ပြီးတိုင်း ပေ (၂၀) အဝေးမှာရှိတဲ့ အရာ၀တ္တုတစ်ခုခု(စိမ်းစိုတဲ့ အရာဖြစ်ရင်ပိုအဆင်ပြေပါတယ်) ကို စက္ကန့် (၂၀) လောက်ကြည့်ပေးရင် အညောင်းလည်းပြေစေပြီး မျက်ကြောကိုက်တာတွေကနေလည်းသက်သာနိုင်ပါတယ်။ 
Break ယူတဲ့အတွင်းမှာ လမ်းထလျှောက်တာမျိုး ၊ အညောင်းအညာပြေအောင် လေ့ကျင့်ခန်းလုပ်တာမျိုးတွေလည်းပြုလုပ်နိုင်ပါတယ်။

📝 Workplace ကိုသေချာစီစဉ်ပါ။

Workplace ဟာ ကိုယ်အချိန်အများကြီးနေရတဲ့‌နေရာတစ်ခုဖြစ်တဲ့အတွက် Chair တွေ Monitor တွေကို eye level နဲ့အညီနေရာချပါ။ 

📝ရေများများသောက်ပြီး အစားကိုသေချာစားဖို့ကလည်း အားအင် ပြည့်၀ဖို့အတွက်အရေးကြီးတဲ့ အချက်တွေပဲဖြစ်ပါတယ်။

📝 အိပ်ချိန်ကိုလည်း အနည်းဆုံး ၆ နာရီရှိအောင် လုပ်နိုင်ရင်တော့အကောင်းဆုံးပဲဖြစ်ပါတယ်။

📝 အရေးကြီးတဲ့အချက်တစ်ခုကတော့ personal life နဲ့ work ကြားမှာ စည်းထားထားဖို့ပဲဖြစ်ပါတယ်။ အလုပ်ချိန်အလုပ် ၊ ကိုယ့်အတွက်အချိန်ဆိုပြီးသပ်သပ်ထားရင် stress တွေလည်းနည်းနိုင်မှာပါ။

 Developer ကြီးတို့အတွက် ဒီအချက်လေးတွေက အထောက်အကူဖြစ်မယ်လို့မျှော်လင့်ပါတယ်။ 

Developer ကြီးတို့သိကြတဲ့ အခြား self care tips လေးတွေရှိရင်လည်း sharing လုပ်ပေးသွားကြပါဦးနော် 👀

#developer
#selfcare