DEV Community: Aung Myat Moe

Bootstrap vs. Tailwind CSS

Aung Myat Moe — Mon, 27 Nov 2023 17:30:00 +0000

Website တစ်ခုတည်ဆောက်တော့မယ်ဆိုရင် Web Page တွေလိုအပ်ပါတယ်။ ၎င်း Web page တွေကိုလည်း Web Dev တွေအနေနဲ့အလှဆင်ဖို့လိုပါမယ်။ Web Development ကိုလေ့လာတဲ့သူတိုင်းမသိမဖြစ်ဖြစ်တဲ့ HTML နဲ့ CSS ကိုအသုံးပြုပြီးအလှဆင်ကြပါတယ်။ နောက်ကြတော့ Productivity ဖြစ်စေဖို့ရန် အသင့်သုံးလို့ ရတဲ့ CSS Framwork တွေကိုအသုံးပြုကြပါတယ်။ CSS Framwork တွေထဲမှာမှ လူသုံးအများဆုံးထြစ်တဲ့ Bootstrap နဲ့ ခုမှ Trend တာမကြာသေးတဲ့ Tailwind css တို့ရဲ့ Pros and Cons တွေကိုယှဉ်ပြမှာဖြစ်ပါတယ်။ Twitter Bootstrap Bootstrap သည် CSS Framwork တွေထဲမှာ ထိပ်ဆုံးမှာရပ်တည်နေပြီးတော့လူသုံးအများဆုံး Framwork ဖြစ်ပါတယ်။ သူ့ရဲ့ methodology က OOCSS ( Object Oriented CSS) ဖြစ်ပါတယ်။ OOCSS ကိုအောက်ပါအတိုင်းApply လုပ်ပါတယ်။ What is CSS Object? CSS object ဆိုတာအခြေခံအားဖြင့် Visual patterns တွေ repeat တဲ့ pattern‌‌ေတွဖြစ်ပါတယ်။ ၎င်း patterns တွေသည် independent html,css,Js snippet တွေကို abstract လုပ်နိုင်ပါတယ်။ ၎င်းကို CSS Object လို့ခေါ်ပြီးတော့ သူတို့က Reusable ဖြစ်ပြီးတော့ Site တစ်ခုလုံးမှာသုံးနိုင်ပါတယ်။ OOCSS မှာ Main Principle နှစ်ခုရှိတယ်။ 1.Separate structure and skin Border, background တွေကို skin အဖြစ်ခွဲခြားလိုက်ပြီးတော့ ၎င်း skin က ‌တစ်ခြား Object တွေမှာလည်း ပြန်ပြီးတော့ သုံးနိုင်ပါတယ်။ ဉပမာ

#button {
width: 200px;
height: 50px;
padding: 10px;
border: solid 1px #ccc;
background: linear-gradient(#ccc, #222);
box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}
#box {
width: 400px;
overflow: hidden;
border: solid 1px #ccc;
background: linear-gradient(#ccc, #222);
box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}
#widget {
width: 500px;
min-height: 200px;
overflow: auto;
border: solid 1px #ccc;
background: linear-gradient(#ccc, #222);
box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

ခု example မှာဆိုရင် background တွေwidth တွေ box shadow ကထပ်ခါထပ်ခါရေးထားရတယ်။ ပြီးတော့ id နဲ့ပဲ select ထားတဲ့အတွက် နောက် တစ်ခါထပ်ပြီး override လုပ်ခွင့်မရှိဘူး ဒီ့အတွက် Principle 1 သုံးပြီးတော့ Skin နဲ့wigetတွေကိုခွဲထုတ်လိုက်ပါတယ်။

.button {
width: 200px;
height: 50px;
}
.box {
width: 400px;
overflow: hidden;
}
.widget {
width: 500px;
min-height: 200px;
overflow: auto;
}
.skin {
border: solid 1px #ccc;
background: linear-gradient(#ccc, #222);
box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

တစ်ခုဆီခွဲထုတ်လိုက်တဲ့အပြင် class အဖြသ်သတ်မီတ်ပေးထားတဲ့အတွက် override ပြန်လုပ်ခွင့်ရှိပါတယ်။ example of override:

id="unique override" (Wrong)
class="btn btn-primary" (Override)

Class မှာတော့ override လိုရမှာဖြစ်လို့ class အဖြစ်ထားတာဖြစ်တယ်။ OOCSS ကတော့ class ပဲသုံးရမယ်လို့မပြောထားဘူး။ သို့သော် class နဲ့သာသင့်လျော်လို့class ကိုသုံးရခြင်းဖြစ်တယ်။

2.Separate container and content

Container block တွေနဲ့. Content တွေကိုသပ်သပ်ခွဲထားကမှာဖြစ်တယ်။

#footer h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.5em;
line-height: 1;
color: #777;
text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px;
}

အထက်ပါ ဥပမာမှာဆိုရင် footer ထဲမှာရှိတဲ့. h3 tag ကို style တွေ apply ထားတာကိုတွေ့ရမှာပါ။ Descending လုပ်ထားတဲ့အတွက် individual tag တွေပဲသုံးလို့ရမှာဖြစ်တဲ့အတွက် reusable မဖုသ်ပါဘူး။ ဒီ့အတွက်အောက်ပါအတိုင်းအသုံးပြရပါတယ်။

.w-100{
width:100%;
position:relative;
overflow:hidden;
}
.h3{
font-size:150% ;
/* This font size should declared at body selector */
font-weight:300;
}

ခုလိုပြန်ကြေညာလိုက်ရင် h3 class ကိုဘယ်နေရာမှာသုံးသုံးအဆင်ပြေမှာဖြစ်သလို w-100 class ကလည်းနေရာတစ်ကာမှခေါ်သုံးလို့ရမှာဖြစ်တယ်။ Bootstrap example:

<footer class="w-100">
<h1 class="display-1">Hello From OCSS</h1>
</footer>

ခု OOCSS ကိုအနည်းငယ်ဖော်ပြရခြင်းမှာ နှိုင်းယှဉ်တဲ့အခါပိုပြီးလွယ်ကူစွာနားလာ်ဖို့ဖြစ်တယ်။ OOCSS အရ Bootstrap ကိုဖွဲ့စည်းတည်တောက်ထားတာဖြစ်တယ်။ ဒီ့အတွက်

<button class="btn btn-primary">Btn</button>

ဆိုပြီးတော့အလွယ်သုံးနိုင်တာဖြစ်တယ်။ Tailwind css သည် utility css ဖြစ်တဲ့အတွက် ကျွန်တော်တို့ ဘာသာcss အတွက် class name တွေခေါင်းစားခံပြီးရေးစရာမလိုတော့ဘူး။ သူတို့ရေးပြီးသားကိုပဲပြန်ပြီးတော့ ပြင်သုံးလို့ရမယ်လို့ပြောထားတယ်။ [Ref Link: https://tailwindcss.com/ https://tailwindcss.com/docs/utility-first ] ကျွန်တော်တို့က stylesheet ကိုကိုယ့်ဘာသာရေးစရာမလိုတော့ဘူး။ သို့သော် utility class တွေဖြစ်တဲ့အတွက် သူတို့ရဲ့class ကို ထပ်ခါထပ်ခါ repeat လုပ်သုံးနေရမှာပါပဲ။ example:

<button class="bg-green-400 p-1">Tailwind Button</button>

Background class နဲ့ padding class ကိုနောက် button ရေးရင်လည်းထပ်သုံးရမှာပါပဲ။ Stylesheet။ မရေးပေမဲ့ class name တွေကိုတော့ပြန်ရေးရတာဖြစ်တယ်။

Pros and Cons

Bootstrap

Pros: အသုံးပြုရလွယ်ကူ မြန်ဆန်တယ် CDN link နဲ့တန်းချိတ်သုံးလို့ရတယ်။ Sass or Less နဲ့ Modified လို့ရတယ် Special Components တွေအသင့်သုံးလို့ရတယ် (eg.Modal, Collapse Box) Community strong ဖြစ်တယ် Greate Grid System Cons: components တွေကိုအစီတကျသတ်မှတ်ထားသလိုရေးမှရမယ်။ File Size အနည်းငယ်ကြီးတယ် Js plugin ပါလို့။ (At BS5 jQuery removed) Customize ဖို့ Features နည်းတယ်။ Site တွေရဲ့ Visual ဆင်တူနေမယ်။ Tailwind: Pros: File Size သေးတယ်။ (CSS ပဲပါတာမို့လို့ပါ။) Customize နိုင်တယ်။ ကိုယ်ပိုင် Framwork တစ်ခုပြန်ရေးနိုင်တယ်။ Custom Components တွေပြန် Compile ပေးတဲ့ Feature ရှိတယ်။ ( I love this one👀) Cons: 1.Normal Case ကအစ Plug-in ထည့်နေရတယ်။ (suck) eg.heading tag တွေအကုန်ညီနေတာမျိုး။ 2.ကိုယ်ပိုင် Grid System မပါ။ 3. Productivity မဖြစ်။ ( Components တွေကိုယ့်ဘာသာတည်‌‌ေဆာက်ထားမှရပါမယ်။ မတည်ဆောက်ခင်အခြေအနေကိုယှဉ်ပြထားတာဖြစ်ပါတယ်။) 4. CDN ချိတ်လို့ရသော်လည်း CDN နဲ့သာ Class တွေခေါ်သုံးနေရရင်အချိန်ကုန်တယ်။ (suck) 5. Special Components တွေမပါ။ (eg.modal) Code Example Bootstrap-5

<button class="btn btn-outline-primary">Bootstrap</button>

Button ကောင်းကောင်းတစ်ခုကိုအလျင်အမြန်တည်ဆောက်ပြီးပါပြီ။ထို့ပြင် Hover feature တွေလည်းပါပြီးသားဖြစ်တယ်။

Tailwind CSS

<button class="bg-green-400 p-1 focus:ring-2 focus:bg-green-600 focus:ring-green-600 focus:ring-opacity-50 focus:outline-none focus:ring-offset-2 rounded text-white font-serif font-bold float-right clear-both mb-2">
Tailwind Button
</button>

Hover effect ပါပါအောင် တော်တော်လေးရေးရပါတယ်။ ခုလိုမရေးချင်ရင် Component အဖြစ်ပြန် apply ပေးလို့ရပါတယ်။ (CDN မှာတော့မရပါဘူး။)

//tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
.btn{
@apply bg-green-400 p-1 focus:ring-2 focus:bg-green-600 focus:ring-green-600 focus:ring-opacity-50 focus:outline-none focus:ring-offset-2 rounded text-white font-serif font-bold float-right clear-both mb-2;
}

အထက်ပါ Code ကို Build ပေးတဲ့အခါ

<button class="btn">Tailwind</button>
လို့ခေါ်သုံးလို့ရမယ်။ ဒါလေးတော့ကောင်းတာပေါ့။ သို့သော် တကယ့် Project ကြီးရေးတော့မယ်ဆိုရင် မိမိဘာသာရေးထားတဲ့ Components တွေကိုပါရေးထားမှအသုံးပြုနိုင်မှာဖြစ်တယ်။
Summary
Bootstrap ကမြန်မြန်ဆန်ဆန်သုံးလို့ရတယ်။ Website တစ်ခုအသာလေးရေးနိုင်တယ်။သပ်ရပ်တယ်။
Tailwind ကြတော့ Class name တွေရေးရမယ်ထပ်ခါထပ်ခါ။ ( မရေးချင်ရင်အစကတည်းက Components တွေရေးထား ၊သူများဟာသုံးချင်ရင်လည်းသုံးပေါ့ 2017 ကတည်းကဆိုတော့ရှိပါတယ်ရှာကြည့်ပါ။) Tailwind ရှိတော့ကိုယ့်ဘာသာ CSS stylesheet မရေးရတော့ပဲ Tailwind သုံးပြီး ရေးထားလို့ရတယ်။ CSS ကိုကျွမ်းထားဖို့တော့လိုမယ်။ Framwork ဖြစ်ပေမဲ့အသင့်သုံးမရပါဘူး။
My Opinion
Bootstrap ခူးပြီးခပ်ပြီးသားထမင်းပွဲနဲ့တူတယ်။
Tailwind ရတ်ပြီးသားစပါးပင်အဆင့်ပဲရှိတယ်။ ကိုယ့်ဘာသာ ပြုပြင်ပြောင်းလည်းပေးမှသာ ‌ကောင်းမွန်တဲ့ ဆန်ကောင်းသို့မဟုတ် စကွဲတွေထွက်မှာဖြစ်တယ်။
Productivity
Bootstrap သုံးပြီးခဏအတွင်း‌ Web Page တစ်ခုရမယ်။
Tailwind ကိုယ့်ဘာသာ Components တွေရေးထားတာရှရင်တော့ရမယ်။ မဟုတ်ရင်တော့ မရပါဘူး။ကိုယ့်ဘုသာရေးထားတဲ့CSSလိုပဲအချိန်ကြာပါမယ်။ (အဲ့တော့ Components တွေကြိုရေး‌ထားပေါ့။မရေးချင်ရင်ဝယ်သုံး။ <`- I don't do that👀)
ဘယ်ဟာသုံးသင့်တယ်ဆိုရင် Bootstrap ပဲကျွန်တော်က Prefer ဖြစ်တယ်။ Tailwind ကိုတော့ ကိုယ့် ရဲ့Personal site ရေးမှပဲသုံးဖြစ်မှာပါ။အချိန်ကြာလို့။
ကိုယ့် taste နဲ့ကိုယ်ဆိုပေမဲ့ Tailwind လည်းစမ်းသုံးကြည့်ပါ။ ဘယ်ဟာက ပိုလွယ်လဲတွေ့လာရပါမယ်။
ခုခေတ်မှာက Content is king မဟုတ်တော့ပါဘူး။ Speed is king ဖြစ်ပါတယ်။ကိုယ်ကြိုက်တာကို‌သုံးနိုင်ပါတယ်။နောက် Article မှာထပ်တွေ့ပါမယ်။

Time to reveal my new portfolio

Aung Myat Moe — Wed, 18 Oct 2023 08:13:45 +0000

Features * Markdown based CMS * Rich Text Editor * Fully Accessible * Light/Dark Mode * Syntax Highlighting ## Tech Stack | Motivation | Stack | |------------|---------------| | Design | Spot Light UI | | Frontend | Next JS | | Styling | Tailwind | ## Infrastructure | Motivation | Stack | |------------|------------| | Deployment | Vercel | | Domain | Name Cheap | | CMS | Tina | Website Address https://www.aungmyatmoe.me/ ## Light House Score Portfolio အသစ်လုပ်ဖို့အတွက်လွန်ခဲ့တဲ့ ၆လကတည်းက စဉ်းစားထားပေမဲ့ မေမေ Breast Cancer ဖြစ်တော့သေချာမလုပ်ဖြစ်လိုက်ဘူး။ အရင်က Nuxt နဲ့ပဲ Develop ဖို့စိတ်ကူးထားပေမဲ့လို့ SSG ကလက်ခံလောက်တဲ့အထိမကောင်းသေးတာကြောင့် Next ကိုပဲရွေးဖြစ်လိုက်ပါတယ်။ Next ကိုစကြည့်တော့ Version အသစ်ကြောင့် Overwhelming ဖြစ်သွားပေမဲ့ Next ရဲ့ Latest feature ဖြစ်တဲ့ App Directory ကိုပဲသုံးဖြစ်သွားပါတယ်။ သူ့ရဲ့ Mechanism က PHP နဲ့နီးစပ်သွားတဲ့အတွက်ကြောင့် SOC အရ Layout တွေခွဲတဲ့အခါမှာလူနားလည်တဲ့ Convention တွေကိုသုံးနိုင်တာကြောင့်မို့လို့ ပိုပြီးတော့ Convenient ဖြစ်တာကြောင့်မို့လို့သုံးဖြစ်သွားပါတယ်။ React 18 မှာ Server Side Component တွေကို Proposal မှာထားပေမဲ့ Next က Support ထားတာကြောင့်ထည့်သုံးထားပါတယ်။။ ကျွန်တော်သဘောကျလို့ပါ။ SSC တွေက Natural ဆန်တယ်ပြောရမယ်။ Server Side Style ကိုလုံးဝခံစားရတယ်။ ကျွန်တော်က Laravel သမားမို့လေ။ မလိုအပ်ဘဲနဲ့ Side Effect တွေမသုံးရတာက အကောင်းဆုံးပါ။ Rendering ပိုင်းကိုကြည့်ရင် အရင် Pages Directory ထဲမှာထက်စာရင်ပိုမြန်တယ်ပြောရမယ်။ ဘာလို့ဆို Server Components တွေကို Client Side မှာ Render မချရတော့တာကြောင့်မို့လို့ တော်တော်သဘောကျရပါတယ်။ Partial Hydrated တဲ့အခါမှာလည်း မြန်တာကြောင့်မို့လို့တော်တော်လေးမိုက်ပါတယ်။ Partial Hydrated တာက Server Components တွေထဲ Client Component ထည့်သုံးတဲ့အခါကိုပြောတာပါ။ Styling အတွက်ကတော့ Tailwind CSS ကိုပဲသုံးဖြစ်ပါတယ်။ Bootstrap နဲ့ Project Domain နဲ့မကိုက်တာကြောင့်ပါ။ Tailwind Class တွေကိုစီရေးတဲ့ပုံစံကိုပဲသုံးပါတယ်။ CSS in JS ကိုသဘောမကျတာကြောင့်။ မျက်စိလည်းနောက်တယ်။ JSX ကမျက်စိနောက်ရတဲ့အထဲ။ Tailwind ကိုသုံးတဲ့အခါမှာ Class တွေကိုဘယ်လိုစီမလဲဆိုတာက အရေးကြီးပါတယ်။ ဒါ့ကြောင့် Utility Class တွေကိုအရင်ထားပြီးတော့ Decorations Class တွေကိုနောက်မှာထားတဲ့နည်းကိုသုံးထားပါတယ်။ ဒါမှပိုပြီးတော့ Natural ဖြစ်သွားမှာဖြစ်တာကြောင့်ပါ။ ကိုယ်က Blogging ရတာလည်းသဘောကျတာကြောင့်မို့ Blog လေးပါတစ်ခါတည်းထည့်ပြီး Develop ထားပါတယ်။ Blog အတွက် Data တွေကို Database ထဲမှာမထားဘဲနဲ့ Markdown File တွေအနေနဲ့ထားပါတယ်။ Database Cost ကိုလျှော့ချင်တာကြောင့်ပါ။ မွဲနေတာကြောင့်ကောပေါ့။ Markdown Based ဖြစ်တာကြောင့်မို့လို့ Post တင်တဲ့အခါမျိုးမှာလွယ်အောင်လုပ်ဖို့စဉ်းစားရပါတယ်။ ဒီ့အတွက်ကြောင့် Tina CMS ကိုသုံးထားပါတယ်။ သူက Forestry ကထုတ်ထားတဲ့ Open Source CMS ပါ။ Documentation ကလည်းရှယ်ကောင်းပြီးတော့ Facility ကလည်းမိုက်တယ်။ ဒါ့အပြင် External Service Integration ပိုင်းမှာလည်းလွယ်တာကြောင့်ပဲရွေးဖြစ်သွားပါတယ်။ Blog Content တွေကို Generate ဖို့အတွက် File တွေကို Read ရတာကြောင့် နှေးလာတာမျိုးဖြစ်ခဲ့ပါတယ်။ ဘာဖြစ်လို့လဲစစ်လိုက်တော့ I/O မှာ Blocking ဖြစ်နေတာကိုတွေ့ရပါတယ်။ ပထမဆူံးကိုယ်က Synchronous ကိုသုံးမိတာ‌ကြောင့်။ အကုန်လုံးကို Asynchronous ဖြစ်အောင်ပြန်ပြီးတော့ Refactor ခါမှ Performance ကလက်ခံနိုင်တဲ့အနေအထားပြန်ရောက်လာပါတယ်။ Project ကိုအရင်က Closed Source အနေနဲ့ထားမလို့စဉ်းစားထားပေမဲ့ React ကို ၃နှစ်၊ ၄နှစ်လောက်လုပ်ထားပြီးတော့ Quality ကောင်းတဲ့ပုံစံမျိုးကိုမတွေ့ရတာကြောင့် ဒီလိုရေးရတယ်ဆိုတာပြချင်တာကြောင့် Open Source ပေးထားပါတယ်။ GitHub Repository https://github.com/amm834/aungmyatmoe.me Contribute ချင်ရင် ဒီမှာ Contribute လို့ရပါတယ်။ Warmly Welcome ပါ။ Proposal Searching နဲ့ Cloudinary ကတော့ Proposal အဆင့်မှာရှိနေပါတယ်။ ## Learning Resources ကျွန်တော်က Next ကိုကြည့်တာ ၃ပတ်တောင်မပြည့်သေးပါဘူး။ ဒါပေမဲ့လည်း လွယ်လွယ်ကူကူ Develop ထားပါတယ်။ ဘာလို့ဆို Next ကလွယ်တာရဲ့ Next Level ကိုရောက်နေလို့ပါ။ ဒီမှာကျွန်တော့်ရဲ့ Learning Resources တွေပါ။ https://nextjs.org/learn/foundations/about-nextjs https://beta.nextjs.org/docs

What's new PHP 8.1?

Aung Myat Moe — Wed, 18 Oct 2023 08:13:30 +0000

ခုလ၂၅ ရက်နေ့မှာ PHP ရဲ့ **Version 8.1 Stable Release** ထွက်မှာဖြစ်လို့ Feature အသစ်တွေကိုပြောသွားမှာဖြစ်ပါတယ်။ ## Enum Enum က v8.1 မှာ Support ပေးမယ့် Data Type အသစ်တစ်မျိုးဖြစ်ပြီးတော့ long term အနေနဲ့ Enumerated Type လို့ခေါ်ပါတယ်။ Enum ကို Support ပေးသင့်တာကြာပါပြီ။ အသုံးဝင်တဲ့ Type မို့လို့ဖြစ်ပါတယ်။

php enum Role { case ADMIN; case USER; }

PHP မှာ Role တွေသတ်မှတ်တဲ့အခါ 1 (သို့မဟုတ်) 0 ၊ String Literal တွေနဲ့သတ်မှတ်ကြပါတယ်။ ဒီလိုအခြေအနေမျိုးမှာဆိုရင် Enum တွေကိုအသုံးပြုနိုင်မှာဖြစ်ပါတယ်။ သူတို့ရဲ့ Default Value တွေကတော့ Array Position တွေလိုမျိုးပဲ 0 ကနေစမှာဖြစ်ပါတယ်။ Enum တွေကိုခေါ်သုံးချင်တဲ့အခါ Enum::KEY အဖြစ်နဲ့ခေါ်သုံးလို့ရပါတယ်။ Role Enum က Admin ကိုခေါ်ချင်ရင် Role::ADMIN လို့လှမ်းခေါ်ရုံပါပဲ။ သိကြတဲ့အတိုင်း PHP သည် Dynamic Typed Language အမျိုးအစားဖြစ်တဲ့အတွက် Enum တွေကို Custom String Value တွေပေးလို့ရပါတယ်။ Enum တွေကို Custom Value ပေးချင်ရင် အောက်ပါအတိုင်းပေးလို့ရပါတယ်။ Technical Term အရ Backed Enum လို့ခေါ်ပြီးတော့ Custom Value မပါတဲ့ Enum တွေကို Pure Enum လို့ခေါ်ပါတယ်။ Backed Enum တွေကို Return Value သတ်မှတ်တဲ့အခါမှာ String (သို့မဟုတ်) Integer နှစ်မျိုးပဲသတ်မှတ်လို့ရမှာကိုသတိပြုပါ။

php enum Role:string { case ADMIN = "admin"; case USER = "user"; }

Database Table ထဲက Role တွေမှာ String Literal နဲ့သတ်မှတ်ထားတဲ့အခါမျိုးဆိုရင် Role Enum ကိုသုံးပြီးတော့ အောက်ပါအတိုင်းတိုက်စစ်လို့ရမှာဖြစ်ပါတယ်။

php if(auth()->role === Role::ADMIN->value) next(); else return false;

Enum တွေဟာ Class လိုမျိုးပဲ Method တွေပါသတ်မှတ်လို့ရပါတယ်။

php enum Cards { case JACK; case QUEEN; case KING; public function name(): string { return match($this) { Cards::JACK => 'jack', Cards:: QUEEN => 'queen', Cards::KING => 'king', }; } } $card = Cards::KING; $card->name(); // king

Enum ထဲမှာ Static Function တွေကိုလည်းသတ်မှတ်နိုင်မှာဖြစ်ပါတယ်။ Cards::JACK အစား self::JACK အဖြစ်လည်းအသုံးပြုလို့ရပါတယ်။ Enum တွေသည် Object ပဲဖြစ်တဲ့အတွက်ကြောင့် ဘယ် Enum ရဲ့ instance ဖြစ်မဖြစ်ကိုလည်းစစ်လို့ရပါတယ်။

php $card insanceof Status; // true

Enum ရဲ့ Name ကိုလိုချင်ရင် $card->name အဖြစ်နဲ့ယူလို့ရပါတယ်။ PHP RFC ကတော့ Debugging အတွက်ပဲသုံးသင့်တယ်လို့ပြောထားပါတယ်။ ## Fibers Fibers တွေက **v8.1** မှာ Support ပေးမယ့် Low Level Mechanism တစ်ခုဖြစ်ပါတယ်။ Thread တွေ Parallel အလုပ်လုပ်ဖို့အတွက် Support ပေးထားတဲ့ကောင်ဖြစ်ပါတယ်။ v7.0 မှာကတည်းက Support ပေးပေမဲ့ခု Fiber က Higher Level Abstraction ပုံစံအဖြစ်နဲ့ Support ပေးတာဖြစ်ပါတယ်။ ကွာတာက PHP မှာ Support ပေးတဲ့ Thread က Green Thread ဖြစ်တဲ့အတွက် User Level Space မှာပဲအလုပ်လုပ်မှာဖြစ်ပါတယ်။ Green Thread ကို Java VM v1.1 မှာသုံးခဲ့ပါတယ်။ JVM မှာ Implement လုပ်ထားတဲ့ Green Thread Model က Java ကိုနှေးစေတဲ့အတွက်ဖြုတ်လိုက်တာဖြစ်ပါတယ်။ PHP မှာ Fiber Implement လုပ်ရတဲ့အဓိကအကြောင်းအရင်းက Asynchronously အလုပ်လုပ်နိုင်ဖို့အတွက်‌ဖြစ်ပါတယ်။ ဒီနေရာမှာ Async ကိုရှင်းဖို့လိုပါတယ်။ ကျွန်တော်တို့ Request သုံးခုပို့စရာရှိတယ်ဆိုပါစို့။ Synchronous အရဆိုရင် ပထမတစ်ခုကိုပို့မယ်။ ဒုတိယတစ်ခုကိုပထမတစ်ခုပို့ပြီးမှပို့မယ်။ တတိယတစ်ခုကိုလည်းဒုတိယတစ်ခုပို့ပြီးမှပို့မယ်။ အစဉ်လိုက်အလုပ်လုပ်လိမ့်မယ်။ အစဉ်လိုက်ပို့တဲ့အခါမှာ တစ်ခုပြီးမှတစ်ခုလုပ်ရတဲ့အတွက်ကြောင့် စောင့်ရတဲ့အချိန် (Waiting Time) ပိုကြာပါတယ်။ ဒါ့ကြောင့် PHP ရဲ့ I/O Process တွေမှာကြာပါတယ်။ Waiting Time ကို Reduce လုပ်နိုင်ဖို့အတွက် Parallel အလုပ်လုပ်ခိုင်းဖို့လိုပါတယ်။ ဒီအတွက် Asynchronous ဖြစ်လာရတာဖြစ်ပါတယ်။ ခုလိုမျိုး PHP ရဲ့အားနည်းချက်တွေကြောင့် Node JS မှာရနိုင်တဲ့ Asynchronous ပိုင်းကိုမရနိုင်တာဖြစ်ပါတယ်။ Framework တွေအတွက် အဓိကဖြစ်တဲ့အတွက်ကြောင့် ကျွန်တော်ကတော့သုံးမပြတော့ပါဘူး။ JavaScript ရတယ်ဆိုရင် Promise.all နဲ့အလုပ်လုပ်ပုံအတူတူပါပဲ။ ## Array Unpacking

php $a = [1, 2, 3]; $b = [4,5,6, ...$a]; // [4, 5, 6, 1, 2, 3]

Associated Array တွေမှာလည်းအသုံးပြုနိုင်မှာဖြစ်ပါတယ်။ ## Readonly Properties Value ကို Read ရုံပဲ Access စေချင်ရင် Read Only ကိုသုံးနိုင်မှာဖြစ်ပါတယ်။

php class Post { public function __construct( public readonly string $title, ) {} }

## First Class Callable

php function foo(int $a, int $b) { /* … */ } $foo = foo(...); $foo(a: 1, b: 2);

Argument တွေကို Passing မပေးချင်တဲ့အခါသုံးနိုင်ပါတယ်။ ## Pure intersection types

php function generateSlug(HasTitle&HasId $post) { return strtolower($post->getTitle()) . $post->getId(); }

Multiple Interface တွေ နဲ့တွဲအလုပ်လုပ်တဲ့အခါမျိုးကြရင်အဆင်ပြေပါမယ်။ အထက်က ဥပမာမှာဆိုရင် $post က HasTitle နဲ့ HasId Interface ကို Implement ထားတဲ့ကောင်ဖြစ်မှရပါမယ်။ခုလိုအချိန်မျိုးကြရင်သုံးလို့ရမှာပါ။ ## Never return data type Program Flow ကို Break ပါသွားတဲ့ Function တွေမှာအသုံးပြုနိုက်ပါတယ်။ Redirect function မှာဆိုရင် Header ကို Sent ပြီးတာနဲ့ Code Execution ရပ်လိုက်မှာဖြစ်ပါတယ်။ ဒီလိုအခြေအနေမျိုးဆိုရင် void အစား never ကိုသုံးရတာသင့်တော်ပါတယ်။

php function redirect(mixed $url): never { header("Location: $url"); exit; }

## array_is_list Function Indexing Array ဖြစ်၊ မဖြစ်စစ်ချင်တဲ့အခါမျိုးမှာသုံးနိုင်ပါတယ်။

php $list = ["a", "b", "c"]; array_is_list($list); // true

## Final class constants PHP ရဲ့ constant တွေကို Inheritance လုပ်တဲ့အချိန်မှာ Override လို့ရပါတယ်။ Override မဖြစ်စေချရင် Parent Class ရဲ့ Constant မှာ final လေးထည့်ပေးရုံပါပဲ။

php class Foo { final public const X = "foo"; }

ကျန်တဲ့ Minor changes တွေကို Rfc မှာသွားကြည့်လို့ရပါတယ်။ https://wiki.php.net/rfc

Luhn Algorithm (or) Mod10 Algorithm

Aung Myat Moe — Wed, 18 Oct 2023 08:13:19 +0000

ခုချိန်က Social Media တွေကို VPN ခံသုံးနေရတဲ့အချိန်ဖြစ်တယ်။ များသောအားဖြင့် Free VPN တွေသုံးကြတာများပါတယ်။ကျွန်တော်ကတော့ Free Trial ကိုပဲသုံးတယ်။ကြော်ငြာတွေကိုမျက်စိနောက်လို့။ ခုပြောမယ့်အဓိကအကြောင်းအရင်းက Bank Card တွေအကြောင်းနဲ့ Validated Random Visa အကြောင်းကိုပြောပြသွားမှာပါ။နပ်တဲ့သူအတွက်ဆိုရင်အသုံးဝင်ပါလိမ့်မယ်။ Bank Card တွေကထုတ်တဲ့ Card အမျိူးအစားတွေကိုကြည့်ရင် Visa,master , American Express စသဖြင့်အမျိုးအစားများစွာရှိတာကိုတွေ့ရပါမယ်။Card Number တွေကို Bank တွေက Customer အတွက် ထုတ်ပေးတဲ့အခါ Algorithm တွေသုံးပြီးထုတ်ပေးပါတယ်။ ### သူတို့ဘယ် Algorithm ကိုသုံးသလဲ? Bank တွေအသုံးအများဆုံး Algorithm က Luhn Algorithm ဖြစ်ပါတယ်။IBM က Computer Scientist ကတီထွင်ခဲ့တာဖြစ်ပါတယ်။ သူက Credit Card Number တွေကို Valid ဖြစ်မဖြစ်စစ်တဲ့နည်းကိုဖန်တီးခဲ့တာဖြစ်တယ်။ ဒါ့ကြောင့်သူ့နာမည်ကိုအစွဲပြုပြီး Luhn Algorithm လို့ခေါ်တာဖြစ်တယ်။ ### Luhn Algorithm အလုပ်လုပ်ပုံ Credit Card Number တွေကို Valid ဖြစ်မဖြစ်စစ်တဲ့အခါ သမာရိုးကျနည်းလမ်းနဲ့ Database ထဲ မှာသိမ်းပြီး User ရဲ့ Credit Card မှန်မမှန်တိုက်စစ်တာမဟုတ်ပါဘူး။ Weak Point များပါတယ်။ ဒါ့ကြောင့် Algorithm သုံးပြီးတိုက်စစ်ပါတယ်။ #### ဘယ်လိုတွက်သလဲ? တွက်ချက်တဲ့လုပ်ငန်းစဉ်ကြ‌တော့သင်္ချာသုံးပြီးတွက်တာပဲဖြစ်တယ်။ Card Number => 5300 7219 7517 4530 အထက်ပါ Card number ကို Valid ဖြစ်မဖြစ်တွက်ကြည့်ပါမယ်။ Card Number ကို Index No 0 ကနေစသတ်မှတ်လိုက်ပါ။ ပြီးတဲ့နောက်မှာ မကိန်းတွေကို ပေါင်းလိုက်ပါ။ အထက်ပါဉပမာမှာဆိုရင် မကိန်းတွေက 3+0+2+9+5+7+5+0 ရဲ့ပေါင်းလဒ်ကိုပေါင်းရမှာဖြစ်ပါတယ်။ဒီတော့ပေါင်းလဒ်က 31 ရပါတယ်။ ပြီးနောက် * စုံကိန်းတွေကို 2 နဲ့မြှောက်ပါတယ်။ * ၉ ထက်ကြီး ရင် ပေါင်းလို့ရတာကိုယူရပါတယ်။ * ဉပမာ - 18 ဆိုရင် 1+8 = 9 ကို ယူရပါတယ်။ ဒီတော့စုံကိန်းပေါင်းလဒ်က 29 ရပါတယ်။ စုံကိန်းပေါင်းလဒ် => 29 မကိန်းပေါင်းလဒ် => 31 စုစုပေါင်း => 60 ‌နှစ်ခုပေါင်းလို့ရတဲ့ရလဒ်ကို 10 နဲ့ ထပ်စားတဲ့အခါ အကြွင်း (Modulus) က 0 ဖြစ်နေရင် Valid ဖြစ်ပါတယ်။မဟုတ်ရင် Invalid ဖြစ်ပါတယ်။ အထက်ပါနည်းက Math နဲ့တွက်တဲ့ပုံစံပါ။ Programmer ကတော့ ကိုယ်နှစ်သက်တဲ့ Programming Language သုံးပြီး Implement လုပ်ယုံပါပဲ။ ဒီနေရာမှာ စုံကိန်းကိုနှစ်နဲ့မြှောက်လို့ရတဲ့ရလဒ် က 9 ထက်ကြီးသွားရင် 9 ပြန်နုတ်လိုက်တာကလည်း ပေါင်းတာနဲ့အတူတူပါပဲ။ **For Example** 9 * 2 = 18 = 1 + 8 = 9 9 * 1 = 18 = 18 - 9 = 9 ကိုယ်ကြိုက်နှစ်သက်သလို Program ပြန်ရေးနိုင်ပါတယ်။ကျွန်တော်က Flexible ဖြစ်တာကိုပြောပြတာ။ အထက်ပါ အတိုင်း Bank တွေက Bank Card Number တွေကိုစစ်ပါတယ်။ ကျွန်တော်ကတော့ Validator အပြင် Credit Card Number Generator ပါတဲ့ package လေးရေးထားပါတယ်။ Package မှာ Main Feature နှစ်မျိုးပါပါတယ်။ **Validation** နဲ့ **Validated Credit Card Number** ထုတ်ပေးခြင်းပါ။ Package နှစ်ခုလုံးက CLI Support ပေးပါတယ်။ CLI ကနေလည်းစမ်းကြည့်လို့ရပါတယ်။ CLI အတွက်တော့ရည်ရွယ်တာမဟုတ်ပါဘူး။ Validation ကတော့ ကိုယ်ရဲ့ Credit Card Number 💳 တွေ Valid ဖြစ်မဖြစ်စစ်လို့ရမှာဖြစ်တယ်။ Developer ဆိုရင်‌တော့ Payment Method တွေမှာထည့်ပြီးစစ်လို့ရမယ်။ သတိထားရမှာက Card Number ကို ပဲ Valid ဖြစ်မဖြစ်ပဲစစ်လို့ရမှာပဲ‌‌ဆိုတာပါ။ တကယ်သုံးရင် Billing Date နဲ့ CVV/CSV တို့ကိုပါတိုက်စစ်ဖို့လိုပါမယ်။ Generator ကတော့ ရှင်းပါတယ်။ Valid ဖြစ်တဲ့ Card Number တွေကို Algorithm သုံးပြီးစစ်ထုတ်လိုက်ပါတယ်။ Billing Date နဲ့ CVV ကတော့ Random ထုတ်ပေးလိုက်ပါတယ်။ Generator ကနေထွက်လာတဲ့ကောင်တွေကို Google Play Store မှာသုံးလို့ရပါတယ်။ သို့မဟုတ် အခြား ကိုယ်သုံးချင်တဲ့နေရာတွေမှာသုံးကြည့်လို့ရပါတယ်။ ဒါပေမဲ့ Porn Site တွေတော့သွားမလုပ်ပါနဲ့။မရပါဘူး။သူတို့ကတကယ့်ဘဏ်တွေနဲ့ချိတ်စစ်ထားတာမို့လို့ပါ။ Only Fan တော့ရပါတယ် ကိုယ့်ဘာသာသုံးတတ်သလို ချဲ့ထွင်သုံးပါ။ Validate လုပ်တဲ့အခါ ငါ့ Credit Card ကြီးများခိုးသွားမှာလားစိုးရိမ်စရာရှိပါတယ်။ ခိုးစရာမရှိပါဘူး။ True/False ပဲ ပြန်ပေးတာမို့လို့ပါ။ Opens source ဖြစ်လို့ Source Code တွေကိုသွားကြည့်လို့ရပါတယ်။ **Validator ** https://github.com/amm834/luhn **Generator** https://github.com/amm834/cc အသုံးပြုပုံသေးစိတ်ကို အထက်က Link တွေကနေပဲသွားကြည့်နိုင်ပါတယ်။ ခုချက်ချင်းသုံးဖို့ဆိုရင် အောက်ပါအတိုင်းလုပ်နိုင်ပါတယ်။ Requirement ကတော့ မိမိရဲ့ Linux OS ဖြစ်စေ၊ Window oS ဖြစ်စေ၊ Mac OS ဖြစ်စေ Node နဲ့ NPM ပါဖို့လိုပါတယ်။ Android (aarch64/arm64) တွေကတော့ Termux လိုအပ်ပါမယ်။ Android ဖုန်းပေါ်မှာ Development Environment Seup လုပ်ပုံကိုအောက်ပါ Link ကနေသွားကြည့်နိုင်ပါတယ်။ https://amm834.github.io/Development-Environment-Setup-For-Android/ **Installation** Globally သုံးမယ်ဆိုရင်

npm install - g panify panify - g 489504

ထွက်လာတဲ့ Format က Array Object format ပါ။

javascript [{ card_number: 4895042852684341, month: 2, year: 2025 }, ...]

Card number ကို Validate ဖြစ်မဖြစ်စစ်ကြည့်လို့ရပါတယ်။ ထွက်လာတဲ့ Card Number ကို Copy ယူလိုက်ပါ။ပြီးရင် Validate ဖြစ်မဖြစ်အောက်ပါအတိုင်းစစ်လို့ရပါတယ်။

panify--validate 4895042852684341 ➜ ~panify--validate 4895042852684341 ✅ Your credit card numbers 4895042852684341 is valid 🎉

အထက်မှာသုံးပြတာက CLI မှာအလွယ်သုံးချင်တဲ့အခါ သုံးတဲ့ပုံပါ။ Project တွေမှာ သုံးဖို့ဆိုရင်တော့ အထက်မှာဖော်ပြထားတဲ့ GitHub Repo မှာသွားကြည့်လို့ရပါတယ်။ Free Trail သုံးဖို့ဆိုရင်တော့စိတ်ချရပါတယ်။ ကျွန်တော်ခုလည်းသုံးနေတာမို့လို့ပါ။ Contribution လုပ်ချင်ရင်လည်းလာလုပ်လို့ရပါတယ်နော်။‌ နောက်ပိုင်းထပ်ထည့်မယ့် Feature လေးထပ်ထည့်ချင်ရင်ထည့်လို့ရပါတယ်။ ကျွန်တော်စဉ်းစားထားတာက‌တော့ Credit Card တွေရဲ့ ဖွက်ထားတဲ့ No ရှာဖို့ပါ။ **Example** - 4895041928xxxxxxx ဒါ့ကြောင့် Contribute လုပ်ချင်ရင်လာလုပ်ပါ။

The developing of Wuttyi programming language

Aung Myat Moe — Wed, 18 Oct 2023 08:07:25 +0000

### Tech Stack * JavaScript * Syntax (Parser Generator) * Vitepress (for Documentation) * Version - v1.0.0 (Zoro) အခုရက်ပိုင်း Higher Level Abstraction တွေချည်းလုပ်နေရတာအရမ်းပျင်းနေတာနဲ့ Programming Language ပိစိသေးသေးလေး Develop ထားပါတယ်။ Language ကသေးပြီးတော့ Syntactic Sugar သိပ်မဖြစ်တာကလွဲရင်ပေါ့။ LISP like ဆိုတော့လေ။ သိတဲ့အတိုင်း Params တွေနဲ့ချည်းပဲ။ အပျော်တမ်းရေးထားပေမဲ့လို့ Language နဲ့အဆင်ပြေတဲ့ Parser Generator ကိုသုံးထားပါတယ်။ syntax လို့ခေါ်ပါတယ်။ သူက State အနေနဲ့ Parse Tree ကိုပြန်ထုတ်ပေးတာပါ။ pcode လိုပုံစံမျိုးပါ။ JavaScript Parser ဖြစ်ဝာာကြောင့်မို့လို့ Array State လိုက်ပြန်ထွက်ပါတယ်။ ဒီမှာ State Machine တွေကိုသိဖို့လိုနေပြီနော်။ Language Implementation က Tree Walker အနေနဲ့ Implement ထားတာပါ။ ဒါ့ကြောင့် Interpreter လို့ပြောလို့ရပါတယ်။ Interpreter ကသေးတာမို့လို့ နောက်ခံ Theory Background ရှိပြီးသားဆိုရင် လွယ်လွယ်ကူကူနားလည်နိုင်ပါတယ်။ Source Code ကိုကြည့်ပြီးတော့နားလည်နိုင်တာမျိုးပါ။ ဒီ Interpreter Implement တော့ DS & Algo တချို့ Abstract အနေနဲ့ပါလာပါတယ်။ ဒါပေမဲ့နော် Source Code ထဲသွားရှာနေရင်တွေ့မှာမဟုတ်ပါဘူး။ Thinking model အနေနဲ့ပါတာပါ။ ဥပမာပြောရရင် Stack, Tree ဒီလိုကောင်တွေပေါ့။ ဆိုပါစို့ ဒီနိုင်ငံမှာ Data Structure & Algorithm လို့ပြောလိုက်တာနဲ့ ဆရာကြီးဆိုပြီးကောက်မြင်သွားတာပဲ။ အဲ့ကောင်တွေက အလွတ်ကျက်ထားရမှာမဟုတ်ဘူး။ ချသုံးရမှာ။ Practically မသုံးတတ်ရင် Time and Space Complexity Problems တွေကိုအလွတ်‌ကျက်ပြီးတော့ ဘယ်မှာသွားသုံးမှာလဲ။ ### Language Feature Language တစ်ခုလုံးက Expression ပါပဲ။ ဝင်လာသမျှ ချက်ချင်း Evaluate လုပ်ပြီးတော့ Result တန်းပေးနိုင်တာမျိုးပါ။ ဒါ့ကြောင့် If statement လိုကောင်တွေတောင် Variable အနေနဲ့ပြန် Assign လို့ရ‌ပါတယ်။ Variable Shadowing, Block Scope လိုကောင်တွေလည်းသုံးရအောင်လုပ်ထားတယ်။ Block Scope Implement တော့ပြဿနာတက်ပါတယ်။ Current Scope အပြင်က Variable ကိုလှမ်း access လုပ်တဲ့အခါမျိုးပေါ့။ အဲ့တာကို Scope Resolution သုံးပြီးတော့ Implement ထားတယ်။ ဒါ့ကြောင့် JavaScript လိုမျိုး Block Construct ကိုရမယ်။ ‌Language မှာ Basic Construct တွေပဲဆောက်ထားတာပါ။ while, set တို့လိုပေါ့။ for loop ပြန်လိုချင်တော့ for loop အတွက် သပ်သပ် implement တာမျိုးမလုပ်ပါဘူး။ On the fly မှာ ပြောင်းပစ်တာပါ။ Just In Time (JIT) complication technique ကိုသုံးထားတာပါ။ တော်တော်ကြာ VM မှာမှ JIT သုံးရမယ်၊ ဘာပုတယ် ညာပုတယ်ဖြစ်နေပါအုံးမယ်။ VM မှတင်သုံးရတာမျိုးမဟုတ်ဘူးဆိုတာပြချင်တာပါ။ ခုနောက်ပိုင်းလူသုံးများတဲ့ Lambd Expression လို၊ HoFs တွေ၊ Closure တွေပါ Support ပေးထားပါတယ်။ Closure က Variable Object (Current Scope က variable) တွေကို Capture ရိုက်နိုင်အောင်လည်းလုပ်ထားတယ်။ Paradigm နဲ့ပတ်သက်ရင် FP ကလူသုံးများတဲ့ Feature တွေတော်တော်ပါပေမဲ့ OO ကတော့ Basic လောက်ပဲပါပါတယ်။ Object and Class Inheritance ထိပဲပါပါတယ်။ Paradigm Construct ကမတရား deep လို့။ အချိန်နည်းနည်းပေးနိုင်ရင်ကိုယ်ပိုင် Programming Language လေး Implement ကြည့်ပါ။။ JavaScript ပဲရလို့ဆိုပြီးတော့ Butthurt မဖြစ်တော့ဘူးပေါ့ ။ ကိုယ်လည်းနောက်မို့ဆိုတစ်ဝက်လောက်နဲ့ထားခဲ့မှာ။ ဒါပေမဲ့ပတ်‌အာချောင်ထားတော့ရှက်ရှက်နဲ့အပြီးသတ်လိုက်ရပါတယ်။ ### Documentation Website for Wuttyi Language https://wuttyi.vercel.app/

Leveraging RabbitMQ and Kafka for Efficient Saga and Pub-Sub Integration

Aung Myat Moe — Mon, 16 Oct 2023 17:30:00 +0000

Sagas and pub-sub are two important patterns in distributed systems. Sagas allow for complex transactions to be coordinated across multiple services, while pub-sub provides a way to decouple services and communicate asynchronously. RabbitMQ and Kafka are two popular messaging systems that can be used to implement sagas and pub-sub. However, each system has its own strengths and weaknesses.

RabbitMQ is a good choice for sagas because it provides support for transactional messages. This means that if one step in a saga fails, all of the previous steps can be rolled back.

Kafka is a good choice for pub-sub because it is highly scalable and can handle very high volumes of data. To implement a saga using RabbitMQ and Kafka, we can use the following approach:

Use RabbitMQ to coordinate the execution of the saga steps.
Use Kafka to communicate between the different services involved in the saga.
Use the transactional features of RabbitMQ to ensure that the saga is either completed successfully or rolled back in its entirety.

This approach allows us to combine the strengths of both messaging systems to create a powerful and flexible solution for sagas and pub-sub. A simple example of a saga is an order processing system. The saga might involve the following steps:

Reserve inventory for the items in the order.
Charge the customer's credit card.
Ship the items to the customer. If any of these steps fail, the saga should roll back all of the previous steps.

To implement this saga using RabbitMQ and Kafka, we could do the following:

Create a RabbitMQ exchange for the saga.
Create a Kafka topic for each step in the saga.
Create a RabbitMQ queue for each service involved in the saga.
Bind the queues to the exchange using routing keys that correspond to the saga steps.

When a customer places an order, the order processing service would publish a message to the RabbitMQ exchange. The exchange would route the message to the queue for the first step in the saga.The service that owns the first step in the saga would then consume the message from its queue. If the step is successful, the service would publish a message to the Kafka topic for the next step in the saga.

The service that owns the next step in the saga would be subscribed to the Kafka topic. When it receives a message, it would consume the message and execute the step.This process would continue until all of the steps in the saga have been completed successfully. If any of the steps fail, the service that owns the step would publish a message to a special RabbitMQ queue for saga compensation.

The saga compensation queue would be consumed by a separate service that would roll back all of the previous steps in the saga. This approach allows us to implement a robust and scalable saga system using RabbitMQ and Kafka. By combining the strengths of RabbitMQ and Kafka, we can create a powerful and flexible solution for sagas and pub-sub. This approach can be used to implement complex distributed systems in a reliable and scalable way.

Sync Microservices System Design in Nustshell

Aung Myat Moe — Mon, 25 Sep 2023 15:27:08 +0000

When I first learned about the system we had to implement, it appeared deceptively simple and concise. However, the reality was far from straightforward. The organization's diverse branches had their databases, and this forced us to reconsider how we would approach the design and development of the system.

The challenge of integrating a legacy system with a modern one became evident, especially as we aimed to incorporate multi-tenancy. While multi-tenancy is suitable for databases sharing the same schema and location, our situation required a different approach. Consider a scenario where we execute a write command on database B - in the event of a bug, we need robust logging and monitoring. To address this concern, we decided to segment our services.

These services are internally composed and exposed via an API gateway, offering a clear separation of internal implementation details from other developers. This approach allows us to foster collaboration with junior team members while still maintaining control over the system's architecture.

To ensure the success of our system, we've applied various design patterns and techniques:

Circuit Breaker : Given the network's inherent unreliability, we've implemented circuit breakers to gracefully handle failures and disruptions.
API Gateway : We've established an API gateway to streamline and manage external communication with our services.
Database per Service : Each service has its dedicated database, ensuring data isolation and scalability.
Schema per Service : We've adopted a schema-per-service approach, allowing each service to manage its data structure independently.
API Composition : Our system leverages API composition to assemble complex functionalities from multiple services.
Sync Communication : Synchronous communication is utilized when needed, ensuring data consistency and reliability.
Service per Team : We've organized teams around specific services to enhance ownership and accountability.
Remote Procedure Invocation (RPI): RPI enables seamless communication between services, enhancing system cohesion.
Self-Registration : Services self-register to simplify dynamic service discovery and orchestration.
Routing : We've implemented routing mechanisms to efficiently direct requests to the appropriate services.
Service Discovery : Dynamic service discovery ensures that services can locate and communicate with each other.
Observability : To monitor system health and performance, we've integrated observability tools and practices.
Handling Failures and Latency : Our system has robust strategies in place to deal with failures and mitigate latency issues.

These design patterns and techniques collectively empower our system to navigate the complex landscape of multi-tenancy, network unpredictability, and evolving requirements while maintaining flexibility, reliability, and manageability."

Research and Develop Thinking for UI/UX

Aung Myat Moe — Sat, 09 Sep 2023 17:30:00 +0000

UX တွေကို R&D များများလုပ်ခိုင်းဖို့လိုပါတယ်။ နောက်သိရမှာက UX တင်မဟုတ်ဘဲနဲ့ DX ပါ။ Developer Experience ကိုသိထားဖို့လိုတယ်။ Stakeholders တွေနဲ့အရင်စကားပြောရတာက များသောအားဖြင့် UX တွေဖြစ်တယ်။ DX ကဘယ်အပိုင်းတွေမှာ Stuck နိုင်တယ်ဆိုတာကိုပါ Estimate ထဲထည့်ပြီးတွက်ထားနိင်ဖို့၊ တွက်တတ်ဖို့ Practice လုပ်သင့်တယ်။

Avoid DDD to overwrap Laravel App

Aung Myat Moe — Thu, 07 Sep 2023 17:30:00 +0000

Laravel လို Structured ရှိပြီးသား Framework တွေမှာ DDD Apply ရတာနည်းနည်း Handy ဖြစ်တယ်။ Namespace သပ်သပ်ခွဲထုတ်တာထက်၊ Domain တွေက Application Layer Level ဖြစ်တာကြောင့် App Directory အောက်မှာဝင်ရေးတာပိုအဆင်ပြေတယ်။ Controller တွေကို Domain အနေနဲ့ထားတာမျိုးတော့သဘောမကျပါဘူး။ သူ့နေရာသူထားပြီးတော့ Domain Name အပေါ်ကနေ Folder အနေနဲ့ထပ်အုပ်ပေးတာက FDD ကို Promote လုပ်သလိုမျိုးဖြစ်သလို DDD ရဲ့ Feel ကိုလည်းအရသာမပျက်တော့ဘူးပေါ့။ ဒီနေရာမှာ DTOs လို၊ Context လိုကောင်တွေကိုသက်ဆိုင်ရာ Domain အောက်မှာပဲထားသင့်သလို၊ Models a.k.a Projections တွေကိုလည်း Domain အောက်မှာပဲထားဖို့လိုပါတယ်။ ကျန်တဲ့ migration လိုကောင်တွေကို Bloated Infrastructure အနေနဲ့ယူဆရင်လည်းအလုပ်ဖြစ်တာမို့ Folder တွေအောက်မှာခွဲထားပြီးတော့ရှိပြီးသား Laravel Structure ကိုမဖျက်ဘဲနဲ့ Boilerplate Code တွေကိုလျှော့ပြီးထည့်လို့ရပါတယ်။

Plug and Play in Microservices

Aung Myat Moe — Wed, 06 Sep 2023 17:30:00 +0000

Mail Notification တွေကို Service ခွဲထားတာက Application တစ်ခုတည်းမှာနှစ်ခုလုပ်ခိုင်းတာထက်ပိုပြီး Effective ဖြစ်တယ်။ Mail ချည်းသက်သက် Scale Out လို့ရတယ်။ Mail အတွက် Redis ကို Main Application က Reddit Server နဲ့ခွဲထားတာထိန်းရသိမ်းရပိုလွယ်သလို၊ Infra Coupling ဖြစ်တာကိုရှောင်လို့ရတယ်။ သပ်သပ်စီခွဲထားလိုက်တော့ Mail ဘယ်နှစ်သိန်းပို့ရမယ်တို့ဘာတို့ကြရင် အဲ့ Mail Service ကိုပဲသပ်သပ် Scale ပေးလိုက်ရုံပဲ။ ဒါပေမဲ့ Main Application မှာမရဘူးလားဆိုရင်လည်းရတယ်။ Service ခွဲလိုက်ရုံပဲ။ အဲ့တော့ကိုယ်ကြိုက်တဲ့ Language or Framework နဲ့ပြောင်းရေးလို့ရသလို၊ တခြား

Laravel Folio and Volt (Alpha Stage Review)

Aung Myat Moe — Mon, 04 Sep 2023 17:30:00 +0000

Laravel နဲ့ Inertia ကိုသုံးရတဲ့ Vibe ထက် Livewire သုံးရတာသဘောပိုကျတယ်။ Inertia သုံးတဲ့အခါမှာ React or Vue ရတဲ့ Laravel သမားတွေအတွက်အဆင်ပြေတယ်ခံစားရပေမဲ့ PHP နဲ့ JavaScript Prop Passing လုပ်ရတဲ့ Feel က Messy ဖြစ်တယ်လို့ခံစားရတယ်။ ဒါပေမဲ့ Frontend Routing ကိုသေချာမရတဲ့သူတွေအတွက် Inertia က Full stack ရေးလို့ကောင်းတယ်။ Frontend နဲ့ Backend ကို Colocating လုပ်ပြီးရေးတာကကောင်းတယ်လို့ပြောလို့ရတယ်။ ဘာလို့ဆိုရင် FDD လို့ခေါ်တဲ့ Feature Driven Approach သွားရင်အဆင်ပြေလို့။ Next တို့၊ Remix တို့ဆိုရင်လည်းဒီ approach ကိုသွားနေတာ။ Client Side JavaScript Load နည်းအောင်ရယ်၊ Server Side Level Code တွေတစ်နေရာတည်းစုရေးလို့ရအောင်ရယ်လုပ်တာမျိုးကတူတူပါပဲ။ Livewire ကို Laravel Folio နဲ့ Livewire Volt နဲ့ပေါင်းသုံးရင် Next Vibe ရတယ်လို့ပြောလို့ရတယ်။ ဒါပေမဲ့သူ့ရဲ့ Syntax Vibe က Vue နဲ့သွားဆင်တယ်။ Vue SFC လိုမျိုး PHP နဲ့ View ကို File တစ်ခုတည်းမှာရေးလို့ရတာမျိုးပေါ့။ Volt ကကြတော့ Functional Component ရေးလို့ရအောင်လုပ်ပေးထားတာလို့ပြောလို့ရတယ်။ အရင်က React ကို Class Base နဲ့ရေးတာကို Functional Component အနေနဲ့ပြန်ရေးတာမျိုးပေါ့။ Livewire ကြတော့ PHP Class ပေါ့။ ဒါပေမဲ့ပြောစရာတစ်ခုရှိတာက Class Instance ကိုပြန်ပြန်ထောက်ပြီးမှ State တွေကိုရတဲ့အတွက် Auto Completion လည်းမကောင်းသလို၊ FP Vibe နည်းနည်းတော့ပျောက်တယ်။ မသိတဲ့သူအတွင် $this ကဘာကြီးလဲဆိုတာကမေးစရာရှိမယ်။ ဒီတစ်ခုကလွဲရင်ကျန်တဲ့ FP API တွေက Concise ဖြစ်တယ်ပြောရပါမယ်။ Laravel Blade သီးသန့်ထက် အောက်က Tech Stack နဲ့ဆိုရင် Productivity ဖြစ်တဲ့ Laravel Application တွေရေးနိုင်မယ်လို့ယူဆတယ်။ Laravel Folio (Laravel File Based Routing) Livewire (Blade in Reactive Way) Volt (Livewire SFCs)

State Management in Micro Frontend

Aung Myat Moe — Mon, 04 Sep 2023 17:30:00 +0000

Micro Frontend မှာ State ထိန်းရတာခက်တယ်ဆိုတယ်ဆိုတာက Single Global Store ဆိုပြီးတွေးတဲ့ Mindset ကိုဖျောက်ဖို့လိုအပ်တယ်။ အဲ့တာက Everything is AWS ဆိုပြီးတွေးသလိုမျိုးပဲ။ Google Cloud, Azure ဒီကောင်တွေကိုမေ့ထားသလိုပေါ့။ DevOps တွေ Infrastructure ကို Distributed ထားသလို Micro State တွေကို Micro Level ပဲထားပြီးခွဲထားဖို့လိုအပ်ပါတယ်။ Authentication လိုကိစ္စတွေကိုကြတော့ Backend မှာထားသင့်ပြီးတော့ Auth Service နဲ့ပဲပြောသင့်တယ်။ ဒီနေရာမှာ Session ထက် JWT ကို Secure Cookies မှာထားပြီး Talk တာမျိုးကပိုကောင်းတယ်။ Host တဲ့ Shell Level မှာသာ Routing System ကို History Router or Framework Agnostic Router သုံးသင့်တယ်။ ဒါမှမဟုတ်ရှိပြီးသား Framework Router တွေနဲ့ Bind ပြီးသုံးသင့်တယ်။ Micro frontend မှာ Fail First Handling ရှိဖို့လိုအပ်ပါတယ်။ User Level မှာပြထားတာမို့ အဲ့ Service Level ကို ဘာဖြစ်နေတယ် Service Unavailable ဖြစ်တယ်ဆိုတာကိုပြရင်ရပါတယ်။