Ethan Tech Academy

"Frontend Development ကို Self Study
ဘယ်လိုလုပ်မလဲ"
Front-end Development ပိုင်းနဲ့ပတ်သတ်လို့ ကျွန်တော်ရေးချင်နေတာတော့ကြာပါပြီ။အထူးသဖြင့် ဒီအပိုင်းကို Self Study ဘယ်လိုလုပ်ရမလဲ ဘယ်လိုလေ့လာသွားသင့်လဲ ဆိုတာတွေကို ကျွန်တော်ဖြတ်သန်းခဲ့တဲ့ အတွေ့အကြုံတွေအပေါ်မှာ မူတည်ပြီး ရေးသွားမှာဖြစ်လို့ ဒီခရီးအတွက် အထောက်အပံ့တစ်ခု ဖြစ်စေနိုင်ပါတယ်။
ပထမဆုံးအနေနဲ့ ကျွန်တော် Learning Method နှစ်ခုကို နည်းနည်းလောက်ပြောချင်ပါတယ်။
ဒီ Front-end Development ပိုင်းနဲ့ပတ်သတ်တဲ့ သင်တန်းတွေတတ်တယ်၊ Tutorials တွေကြည့်တယ်၊ သင်တန်းကသင်တဲ့ဆရာနဲ့အတူတူ Code တွေတူတူရေးတယ်၊ side project တွေရေးတယ်၊ လိုအပ်လာရင် Documentation တစ်ခါလောက်သွားဖတ်လိုက်တယ်။ ဒီလိုမျိုး Action တွေဟာ ဦးနှောက်အတွက်သိပ်ပြီး Effort မလုပ်ရတဲ့ အတွက် Active Learning လို့ခေါ်ပါတယ်။ ဒီလို learning မျိုးဟာ လုပ်နေစဉ်ခဏပါပဲ ကိုယ့်ရဲ့ခေါင်းထဲမှာကြာကြာမခံပါဘူး။ ကျွန်တော်ကတော့ Active Learning ထက်စာရင် Passive
Learning Method ကိုသာအားပေးပါတယ်။
Passive Learning ကိုစပြီးမလုပ်ခင် ကိုယ့်ရဲ့ Personal Time Goal တစ်ခုကိုအရင်ဆုံးဆွဲထားဖို့လိုအပ်ပါတယ်။ ဒီနေရာမှာပြောစရာရှိတာက တစ်ယောက်နဲ့တစ်‌ယောက် ဦးနှောက်အာရုံစိုက်နိုင်တဲ့ အချိန်ခြင်းမတူကျပါဘူး။ တစ်ချို့ကလည်း မနက်ပိုင်း Learning လုပ်ရတာပိုအားသန်တယ်၊ တစ်ချို့ကျတော့ ညပိုင်းလုပ်ရတာမျိုးကို ပိုပြီးအားသန်တယ်။ ပြောလိုတာက မနက်ပိုင်းလုပ်လုပ် ညပိုင်းလုပ်လုပ် ကိစ္စမရှိပါဘူး၊ ကိုယ့်ရဲ့ ဦးနှောက်အာရုံစိုက်နိုင်မှု မြင့်နိုင်တဲ့အချိန်မျိုးကို
ကြိုပြီးတော့ Goal တစ်ခုရေးဆွဲထားဖို့တော့
လိုပါတယ်။
နောက်တစ်ခုပြောလိုတာက အချိန်။ Front-end ပိုင်းမှာ တစ်နေ့ 4နာရီလောက်အချိန်ပေးနိုင်မယ်ဆို လုံလောက်ပါတယ်။ 5နာရီလောက်ဆိုလည်း ပိုပြီး Perfect ဖြစ်သလို 3နာရီပေးနိုင်ရင်လည်း အဆင်ပြေပါတယ်။ ဒီအောက်မှာ‌တော့ Frontend
Development အတွက် 4နာရီလောက် Learning လုပ်ဖို့အဆင်ပြေမဲ့ To Do List တစ်ခုထည့်ပေးထားပါတယ်။
(0) Spend minimum 30 minutes on Freecodecamp
(1) 1 hour React Course on Scrimba
(2) Learning about of Computer Science 50
(3) Read 15 Pages a days in Eloquent JavaScript Book
(4) Look up what difference between relative and absolute position
(5) Deep dive in JavaScript documentation
(6) Solve a Code war Challenge
(7) Learning about of Git Command
ဒီဟာကတော့ ကျွန်တော် နမူနာပုံစံလုပ်ပြထားတဲ့ To Do List တစ်ခုပါ။ ကိုယ့်နဲ့သင့်တော်ပြီးအဆင်ပြေမဲ့ To Do List တစ်ခုကို ဒီလိုပုံစံမျိုးလေးဆွဲထားပါ လို့ပြောချင်ပါတယ်။
အပေါ်ကရေးခဲ့တာဟာတွေက Active Learning Zone ထဲမှာပဲရှိပါသေးတယ်။ Passive Learning အတွက်ကခုမှစမှာပါ။ Passive Learning ဆိုတာက Tutorials တစ်ခုကြည့်နေရင်းမှတ်စရာတွေ့ရင် Note တစ်ခုထုတ်လိုက်တာမျိုး၊ Flashcards လုပ်ပြီး လေ့လာတာမျိုး Coding Practice လုပ်တာမျိုးတွေကို Passive Learning လုပ်တာလို့ခေါ်ပါတယ်။တစ်နည်းအားဖြင့် ဦးနှောက်ကို Output များများထုတ်ခိုင်းတာကြောင့် ပိုပြီးတော့မှတ်မိစေလွယ်ပါတယ်။
Flashcards တွေနဲ့ပတ်သတ်ပြီးတော့ ရေးချင်တာလေးတွေရှိပါသေးတယ်။ JavaScript ကို
တစ်နာရီလောက်တော့ လုပ်လိုက်ပါရဲ့ နောက်နေ့ကျ var သုံးရမလား const နဲ့ရေးရမလားနဲ့ သင်ပြီးတာတွေကိုမမှတ်မိတာမျိုး ဇဝေဇဝါ ဖြစ်တာမျိုးတွေကြုံတတ်ပါတယ်။ ဒီလိုမျိုးဖြစ်တာကိုအစားထိုးဖို့ အတွက် Flashcards Create လုပ်ဖို့လိုပါတယ်။ Flashcards သုံးပြီးလေ့လာတာ memory ကို recall ပြန်ခေါ်ပေးတာမို့ Frontend ပိုင်းတင်မဟုတ်ပါဘူး math တို့ physics တို့မှာလည်းသုံးကြပါတယ်။ ကျွန်တော်ကိုယ်တိုင်လည်း Project ရေးနေရင်း တစ်ခါတစ်လေ CSS Color Hexcode တွေရောတာတွေဖြစ်ဖူးပါတယ်။ Flashcards သုံးပြီးနောက်ပိုင်း ဒီလို ရော တဲ့ပြသနာတော်တော်လေးနည်းသွားပါတယ်။အောက်မှာတော့ Flashcards လုပ်ဖို့အတွက် website ကောင်းတစ်ခုထည့်ပေးထားပါတယ်။
https://app.studysmarter.de/home
ဒီအပိုင်းကတော့ Coding Practice များများလုပ်ဖို့ပါပဲ။ Passive Learning ဘက်အတွက်လည်း အကြုံးဝင်ပြီးသားပါ။ Coding Practice လုပ်ဖို့အတွက် Hacker Rank တို့ Leet Code တို့ Codewar တို့ရှိပေမဲ့ ကျွန်‌တော်ကတော့ Hacker Rank နဲ့ Leet Code တို့ကိုမညွှန်းချင်ပါဘူး။ ဒီ website နှစ်ခုက beginners တွေအတွက် ငရဲ နဲ့တူပါတယ်။တော်‌‌တော်လေးခက်တယ်လို့ပြောတာပါ။အဲ့ဒီအစား Codewar မှာသွားပြီး Practice လုပ်သင့်ပါတယ်။ Codewar မှာ ရှိတဲ့ Problemတွေက 1kyu ကနေ 8kyu ထိအဆင့်ဆင့် ခွဲထားပေးတာမို့ ကိုယ့် level နဲ့ကိုက်တဲ့ Kyu ကိုရွေးပြီး solve လုပ်ရုံပါပဲ။
https://www.codewars.com

နောက်ဆုံးကတော့ projects တွေရေးဖို့လိုပါတယ်။ Project တစ်ခုရေးတာက Tutorial 10 hours ကြည့်တာနဲ့ညီပါတယ်။ Project ရေးမဲ့နေရာမှာ ဥပမာ- ဒီနေ့ကိုယ်က HTML,CSS လောက်သင်ခဲ့ရင် သူနဲ့ဆိုင်တဲ့ mini project သေးသေးလေးတွေရှိပါတယ်။ စ‌ပြီးရေးကြည့်ပါ။သူ့အိုးနဲ့သူ့ဆန် ဆိုသလို ကိုယ့်ရဲ့ skill က HTML CSS လောက်ရနေပေမဲ့ React နဲ့ရေးရတဲ့ Project တွေကို သွားခုန်ပြီး ရေးမယ်ဆိုရင် အချိန်သာကုန်မယ် ဘာမှရလာမှာမဟုတ်ပါ။
ကိုယ်ရေးထားတဲ့ project ကိုလည်း GitHub လို Platform မျိုးတွေမှာတင်ထားသင့်ပါတယ်။ ကိုယ်ကိုတိုင်ရေးခဲ့တဲ့ Project တစ်ခုရဲ့ soure code ကို GitHub မှာထိုင်ပြီးကြည့်နေရတာကိုက လက်ရာမြောက်တဲ့ ပန်းချီကားတစ်ချက်ကြည့်နေရသလိုကို အရသာရှိပါတယ်။
ဒီဟာတွေကတော့ Fron-tend Development ပိုင်းနဲ့ဆိုင်တဲ့ Free Materials Stuff တွေပါ။

https://scrimba.com
https://code.org
https://www.frontendmentor.io
https://www.theodinproject.com
https://www.codewell.cc
https://www.udacity.com/course/intro-to-javascript--ud803
https://www.udacity.com/.../object-oriented-javascript...
https://developer.mozilla.org/en-US/
(ရေးခဲ့တဲ့ post တစ်ခုလုံးကိုခြုံငုံပြပြောထား
တာပါ)
0. Documentation များများဖတ်ဖို့
1. Time Goal တစ်ခုတည်ဆောက်ထားဖို့
2. နေ့စဉ်လုပ်မဲ့ ToDoList တစ်ခုထားရှိဖို့
3. Flashcards သုံးဖို့
4. Coding Practice လုပ်ဖို့
5. Projects တွေများများရေးဖို့
6. Note ထုတ်ဖို့
7. Active Learning လျော့ပြီး Passive Learning များများလုပ်ဖို့ပဲဖြစ်ပါတယ်။
နောက်ဆုံးပိတ်ပြောလိုတာကတော့ Keep Going
ပါပဲ။ Front-end Development ပိုင်းမှမဟုတ်
ပါဘူး။ ဘာကိုပဲလေ့လာ လေ့လာ သင်ယူတဲ့ပုံနည်းစနစ် မမှန်ရင်ရှေ့ဆက်မရောက်ဘဲအနားမှာ တဝဲလည်လည်ဖြစ်နေတတ်ပါတယ်။ ကျွန်တော်အပေါ်မှာရေးခဲ့တဲ့ ထိရောက်မှုရှိတဲ့ နည်းလမ်းတွေဟာ Front-end Journey ခရီးအတွက်အထောက်အကူဖြစ်စေနိုင်မယ်လို့ မျှော်လင့်
မိပါတယ်။
Learning today, leading tomorrow!

" Roadmap for PHP developers"

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

အရင်ဆုံး PHP ဆိုတာဘာလဲ?

PHP ဆိုတာ Server side Scripting Language တစ်ခုပါ ။ ပြောချင်တာက ကျွန်တော်တို့ Website ရဲ့ Backend ပိုင်းတွေကိုအလုပ်လုပ်မှာပေါ့ဗျာ ။ အသုံးချလုပ်ဆောင်ချက်တွေ ပါလာတော့မှာပေါ့ ။ ဥပမာ ကျွန်တော်တို့က Username, Email, Password အစရှိတဲ့ Data တွေကို Form ဖြည့်ပြီ ကျွန်တော်တို့က Server side Language တွေ
မပါရင် ဒီ Data တွေက ဘယ်မှမရောက်တော့ဘူး ။ ဒီတော့ ကျွန်တော်တို့ Form က ရလာမယ့် Data တွေကို Database မှာသွားရောက်သိမ်းချင်တာပဲ ဖြစ်ဖြစ် သိမ်းထားတာတွေကို ပြန်လည်ခေါ်သုံးလိုတာဖြစ်ဖြစ် ဒီလိုလုပ်ဆောင်တော့မယ်ဆို PHP လို server side language တစ်ခုခု ကိုလေ့လာထားရပါမယ် ။ဒါက အကြမ်းဖျင်းပြောတာ တခြားလုပ်ဆောင်နိုင်တာတွေလဲအများကြီးရှိပါသေးတယ်

PHP ကိုမလေ့လာခင် ဘာတွေအရင်လေ့လာထားဖို့လိုအပ်လဲ?

PHP မလေ့လာခင်သိထားသင့်တာတွေကတော့ Web fundamental တွေပေါ့ ။ ဘာတွေလေ့လာရမလဲဆို အဓိကအနေနဲ့ Html,css,JavaScript basic လောက်လေ့လာထားသင့်ပါတယ် ။ အဆင်ပြေမယ်ဆို Jquery, Bootstrap ပါ ဆက်လေ့လာထားပါ ။ ဒါတွေက ကျွန်တော်တို့ရဲ့ website ရဲ့ user interface ပိုင်းကိုရေးသားပေးပြီ ဆိုပါတော့ ။ ပြီးရင် ကျွန်တော်တို့ PHP ချက်ချင်းတန်းမလေ့လာသင့်ပါဘူး ။ ဘာလို့လဲဆို PHP လို server side language တစ်ခုအတွက် client နဲ့ server ရဲ့ ဆက်သွယ်ချက်တွေကိုကောင်းကောင်းနားလည်ထားဖို့လိုအပ်ပါတယ် ။ဒီတော့ ဘာတွေလေ့လာရမလဲဆိုရင် ပထမဆုံး website တွေ Internet တွေ ဘယ်လိုအလုပ်လုပ်လဲဆိုတာလေ့လာပါ ။ဒါမှသာ Server ရဲ့ လုပ်ဆောင်ချက်တွေ ကိုနားလည်မှ PHP ကိုလေ့လာရလွယ်ကူမှာပါ ။နောက်ထပ်လေ့လာထားရမှာက HTTP Request,Response လုပ်ဆောင်ချက်တွေ Status Code တွေအကြောင်းတွေလေ့လာ
ထားပါ။

- Website နဲ့ Internet တွေအလုပ်လုပ်ပုံလေ့လာရန်
https://youtu.be/zN8YNNHcaZc

- Http full course
https://youtu.be/iYM2zFP3Zn0

ဒီလောက်လေ့လာထားရင် PHP စကိုင်လို့ရပါပြီ။

အကယ်လို့စလေ့လာလာတော့မယ်ဆို Beginner တစ်ယောက်အနေနဲ့ Basic Concept တွေကိုသေချာလေးလေ့လာထားပါ ။ Data type တွေ loops တွေ Conditional Statement တွေ String,Array အစုံသေသေချာချာလေ့လာပါ ။ ပြီးရင် Session, Cookie တွေအကြောင်းတွေ Composer တွေ Namespace တွေ အစရှိသဖြင့် Beginner level ထဲက ကျေနေအောင်လေ့လာဖို့မှာချင်ပါတယ် ။ ဘာလို့လဲဆို နောက်ပိုင်း Framework တွေ ကိုင်တော့မယ်ဆို အခြေခံမပိုင်ရင်သူများထက်လေ့လာရပိုခက်သွားမှာပါ ။

PHP Basic Concept တွေလေ့လာပြီးရင် ဘာဆက်လေ့လာရမလဲ ။

ဆက်လေ့လာသင့်တာကတော့ OOP (Object Oriented Programming) ပါ ။ ဒီ ကောင်ကို ကောင်းကောင်းအသုံးပြုတက်မှ Project တွေရေးတဲ့အခါ အဆင်ပြေသလို Framework တွေမှာလဲ OOP ပုံစံသာအသုံးပြုထားတော့ အခြေခံအနေနဲ့လေ့လာထားဖို့လိုအပ်ပါတယ် ။ပြီးရင် Composer ရဲ့အလုပ်လုပ်ပုံတွေအသုံးဝင်ပုံတွေကိုလေ့လာထားသင့်ပါတယ် ။ နောက်ပြီးဆက်လေ့လာရမှာကတော့ Database ပဲ ဖြစ်ပါတယ် ။ အများစုကတော့ PHP ကို Mysql နဲ့ပဲတွဲသုံးကြပါတယ် ။ Beginner တစ်ယောက်ဆို Mysql ကိုပဲ ပိုင်ပိုင်နိုင်နိုင်လေ့လာထားသင့်ပါတယ် ။

အထက်ပါလေ့လာစရာတွေကို အောက်ပါ Course တွင်တစ်ဆင့်ချင်းလေ့လာသွားနိုင်
ပါတယ်။

https://www.youtube.com/playlist?list=PLr3d3QYzkw2xabQRUpcZ_IBk9W50M9pe-

ဒါပြီးရင် Project တွေစတင်ရေးသားနိုင်ပါပြီ ။ PHP pure နဲ့ project တွေရေးတဲ့အခါ mini ကနေ pro အဆင့်ထိ တစ်ဆင့်ချင်း တက်ပြီးရေးသားကြည့်ပါ ။ CRUD ကိုကောင်းကောင်းအသုံးပြုပါ။ Ecommerce site လောက်ထိရေးသားနိုင်အောင်ကြိုးစားကြည့်ပါ ။ ကိုယ်လိုအပ်တာတွေ ထည့်ချင်တဲ့ Features တွေကို ရှာဖွေလေ့လာအသုံးပြုပြီး ရေးသားကြည့်ပါ ။

- To Do App With PHP
https://youtu.be/NxeNqHdJFxs

- Login system Project
https://youtu.be/gCo6JqGMi30

- Shopping Cart Project
https://youtu.be/1Ip7_hdSqzY

OK ဒါတွေက server side ရဲ့ beginner level ပဲရှိပါသေးတယ် ။ ဒါတွေပိုင်နိုင်မှ company တွေဘာတွေမှာ သုံးတဲ့ Design pattern တွေ framework တွေအကြောင်းကိုဆက်လေ့လာကြည့်ပါ ။ Design Pattern တွေအမျိုးမျိုးရှိပါတယ် ။ ကျွန်တော်တို့က PHP လေ့လာနေတော့ သူနဲ့အသင့်တော်ဆုံးက MVC design pattern ပါ ။

- MVC(Model View Controller)ရဲ့အလုပ်လုပ်ပုံ
https://www.tutorialspoint.com/design_pattern/mvc_pattern.htm

- Design Pattern လေ့လာရန်
https://youtu.be/NU_1StN5Tkk

ကျွန်တော်တို့ ထပ်ဆောင်းအနေနဲ့ လေ့လာသင့်တဲ့အထဲမှာ Api တွေလဲပါပါတယ် ။ PHP pure နဲ့ Api တွေ စမ်းလေ့လာပါ ။ ပြီးရင် JavaScript Ajax နဲ့ CRUD တွေစမ်းရေးသားကြည့်ပါ ။

- Api with PHP
- https://www.youtube.com/watch?v=OEWXbpUMODk&list=PLillGF-RfqbZ3_Xr8do7Q2R752xYrDRAo

အများစုက ဒီလောက်လေ့လာပြီးရင် Framework တွေသွားကြပါတယ် ။ ဒါပေမယ့် ကြားဖြတ်ပြောချင်တာက အထက်မှာပြောပြခဲ့တာတွေလေ့လာပြီးရင် ကိုယ်ပိုင် Custom MVC Framework ရေးလို့ရတယ်ဗျ ။ အကြီးကြီးမဟုတ်တောင် ကိုယ့် Project အတွက် အဆင်ပြေလောက်တဲ့ ထိပေါ့ ။ PHP Pure မှာ တင် Pro ကျချင်ရင်တော့ အောက်ပါ link မှာ လေ့လာကြည့်လိုက်ပါ ။

https://www.youtube.com/watch?v=WKy-N0q3WRo&list=PLLQuc_7jk__Uk_QnJMPndbdKECcTEwTA1

OK ဒါတွေပြီးရင် Framework ဆက်လေ့လာပါ ။ PHP မှာ Framework တွေ အမြောက်အများရှိပြီး ရေပန်းစားနေတာကတော့ Laravel Framework ပါ ။ နောက် Yii တို့ Symfony တို့လဲရှိပါသေးတယ်။ Framework ဆိုပြီး ကျွန်တော်အသွင်သွင်ပြောနေတာ Framework ရဲ့သဘောတရားက ကျွန်တော်တို့ project အတွက် လိုအပ်တဲ့ package တွေ component တွေကို သက်ဆိုင်ရာ design pattern နဲ့အတူ စုစည်းပေးထားတာလို့မှတ်ယူနိုင်ပါတယ် ။ အလုပ်ကိုလျင်လျင်မြန်မြန်ပြီးမြောက်စေဖို့ ကူည်ီပေးနိုင်တာပေါ့ဗျာ ။ အသင့်သုံးရတဲ့ package တွေ ရှိသလို ကိုယ်တိုင်လဲ လိုသလိုဝင်ရောက်ပြင်ဆင်အသုံးပြုနိုင်ပါတယ်။ နောက်ပီး Security လဲအသင့်တးထည့်သွင်းပေးထားတော့ Pure မှာလို တစ်ခုချင်းလိုက်ရေးစရာမလိုတော့ဘဲ အလွယ်တကူ အလုပ်ပြီးမြောက်စေမှာပါ ။

- Laravel Framework ကိုလေ့လာရန်
- https://youtu.be/ImtZ5yENzgE
- Yii Framework ကိုလေ့လာရန်
- https://youtu.be/whuIf33v2Ug
- Laravel Ecommerce Project ကိုလေ့လာရန်

www.youtube.com/watch?v=o5PWIuDTgxg&list=PLEhEHUEU3x5oPTli631ZX9cxl6cU_sDaR

ကျွန်တော်ပြောချင်တာကတော့ ဒီလောက်ပါပဲ။
ကိုယ်ကအတွေ့အကြုံနဲ့ skill များများသာချင်ရင် Project သာများများရေးပါ ။ ဆက်စပ်လေ့လာသင့်တာတွေမှာ Api တွေအပြင် Npm package တွေ Ajax တွေ Ides တွေအပြင် DevTools ကိုလဲ ပိုင်ပိုင်နိုင်နိုင်လေ့လာထားပါ ။ အရေးကြီးဆုံးကတော့ Security ဗျ။ Framework တွေက အသင့်သုံးတွေထည့်ပေးထားပေမယ့် ။ ကိုယ်က သဘောတရားလောက်တော့ နားလည်ထားသင့်ပါတယ် ။ ဒါမှဘာဖြစ်ရင် ဘယ်ကဖြစ်တယ် ။ ဘယ်ဟာက Attack ခံရတယ်ဆိုတာကို သိလာပြီး ကာကွယ်နိုင်လာပါလိမ့်မယ် ။

Ethan Tech Academy
Learning today, Leading tomorrow