Code With Happer

JavaScript ရဲ့ `using` နဲ့ `await using` Syntax (ECMAScript Explicit Resource Management)

အဲ့ Syntax နှစ်ခုက ECMAScript Explicit Resource Management proposal ဆိုတဲ့ ခေါင်းစဉ်အောက်မှာ introduce လုပ်ထားတဲ့ feature တစ်ခုပါ။

ဒီ using ဆိုတဲ့ Syntax ကို I/O Operation တွေ Socket နဲ့ တခြား resources တွေလိုမျိုးတွေ auto-close ဖို့ သုံးနိုင်ပါတယ်။

using နဲ့ await using ဆိုတဲ့ syntax တွေက C #, Java, and Python တို့လိုမျိုး scoped လုပ်ထားတဲ့ resource တွေကို structured cleanup တဲ့ Syntax တွေပဲဖြစ်ပါတယ်။

Automatically disposes of resources (calls Symbol.dispose or Symbol.asyncDispose) at the end of the block.

using နဲ့ await using တွေက synchronous အတွက်ဆိုရင် Symbol.dispose ကိုခေါ်ပြီးတော့ asynchronous အတွက်ဆိုရင် Symbol.asyncDispose ကိုခေါ်ပြီး cleanup လုပ်ပါတယ်။

JavaScript မှာ resource lifetime တွေကို clean up လုပ်ဖို့အတွက် method တွေအများကြီးရှိလာနိုင်ပါတယ်။ .close(), .releaseLock(), .return() ဆိုပြီးတော့ပေါ့

ဒါပေမဲ့ using syntax ကိုသုံးမယ်ဆိုရင်တော့ Automatic Clean Up ဖြစ်မှာဖြစ်ပြီးတော့ code က လည်း clean နေမှာပါ။

using syntax ကိုမသုံးရင်ရှုပ်နေမှာပါ။

const a = getA();
try {
const b = getB();
try {
...
} finally {
b.dispose();
}
} finally {
a.dispose();
}

using ကိုသုံးလိုက်မယ်ဆိုရင်တော့

using a = getA(), b = getB(); // a နဲ့ b ကို block scope မှာ automatically dispose လုပ်တယ်

using က block လုံးမှာ resource တွေကို manage လုပ်ပြီး, block က end အကုန် resource တွေကို dispose လုပ်သွားတယ်

ဒီ using syntax က error expection ဖြစ်ခဲ့မယ်ဆိုရင်တောင် automatically dispose လုပ်ဖို့ grantee ထားပါတယ်။

ဒီ feature က browsers တွေအကုန်လုံးမှာတော့ available မဖြစ်သေးပါဘူး ဒါပေမဲ့ ကျွန်တော့် Chrome Version 136.0.7103.93 နဲ့ V8 13.6.233.8 မှာ တော့ သုံးလို့ရနေပါပြီ

Learn More: https://github.com/tc39/proposal-explicit-resource-management?tab=readme-ov-file

Free ဖြစ်လာတဲ့ GSAP Animation Libarary

GSAP ဆိုတာကတော့ Popular Animation Libarary တစ်ခုပဲဖြစ်ပါတယ်။ အခုရက်ပိုင်းအတွင်းမှာ Pricing တွေအကုန်လုံး free ဖြစ်သွားတာမလို့ animation feature စုံစုံလင်လင်သုံးလို့ရနေပါပြီ

QUIC Protocol နဲ့ HTTP/3

လက်ရှိ HTTP Version တွေဖြစ်တဲ့ HTTP/1.1 နဲ့ HTTP/2 တွေက TCP ကို relay လုပ်ထားပါတယ်အဲ့တာကြောင့် connection setup တွေက delays ဖြစ်နိုင်သလို head-of-line blocking ကြောင့် unreliable network တွေမှာ performance က ကျစေပါတယ်။

Head-of-Line Blocking ဆိုတာက HTTP/1.1 နဲ့ HTTP/2 protocols တွေမှာအဖြစ်များတဲ့ problem တစ်ခုပါ။ packet တွေကို sequence အနေနဲ့ပို့ပါတယ်။ Client က Server ကို Multiple Requests တွေပို့လိုက်တဲ့အခါ request တွေကို server ကတစ်ခါတည်း response လုပ်လို့မရပါဘူး။ ပထမဆုံး request အတွက် packet တစ်ခုမအောင်မြင်ခဲ့ရင်၊ အခြား packet များလည်း အချိန်ကြာစောင့်ရပါမယ်။

HTTP/3 ကတော့ QUIC ဆိုတဲ့ Quick UDP Internet Connections ကိုသုံးထားတာဖြစ်ပါတယ်။ TCP မသုံးပဲ UDP ကိုသုံးထားတဲ့အတွက် performance bottlenecks မဖြစ်နိုင်ပါဘူး။ Packet တစ်ခု loss သွားရင်တောင် loss သွားတဲ့ packet ကိုပြန်ပို့မှာပါ။

Ternary Chains: Good or Evil?

Ternary Chains တွေဆိုတာက If-Else Statement လိုမျိုး conditions တွေစစ်ပြီး value တစ်ခုကိုရွေးပေးတာပဲ။

Ternary operator က condition ? true_value : false_value ဆိုပြီး write ရပါတယ်။

Ternary Chains တွေက Simple Condition တွေ Maps တွေ Configuration လိုနေရာမျိုးမှာ သုံးရတာအဆင်ပြေပါတယ်။

ဒါပေမဲ့ Ternary Chains တွေက အရမ်းများလာမယ်ဆိုရင်တော့ Debug လုပ်ရတာ ခက်လာမှာပါ။

ရိုးရှင်းတဲ့ decision trees မှာ ternary chain နဲ့သုံးလို့ရပေမဲ့ large condition logic တွေမှာတော့ if-else နဲ့သွားတာက အဆင်ပြေမယ်ထင်ပါတယ်။

Partial Prerendering ဆိုတာဘာလဲ?

Partial Prerendering (PPR) ဆိုတာက Next.JS ရဲ့ experimental feature တစ်ခုဖြစ်ပြီးတော့ canary version မှာပဲ တွေ့နိုင်ပါတယ်။

PPR သုံးလိုက်မယ်ဆိုရင် static နဲ့ dynamic components တွေကို route တစ်ခုထဲမှာပေါင်းနိုင်မှာပါ။ Build Time မှာ Next.js က prerender လို့ရသမျှ route တွေကို prerender လုပ်မှာပါ။ dynamic code တွေပါလာခဲ့မယ်ဆိုရင်တော့ အဲ့ဒီ component ကို နဲ့ wrap လိုက်မယ်ဆိုရင်တော့ fallback UI ကို prerender လုပ်မှာဖြစ်ပြီးတော့ dynamic content တွေက server ကနေ parallel နဲ့ stream အနေနဲ့ဝင်လာမှာဖြစ်ပါတယ်။

အဓိက concept ကတော့ Static content ကိုမြန်မြန်ပြဖို့ပါပဲ။

ဉပမာပြောရမယ်ဆိုရင် PPR သုံးလိုက်တဲ့ page တစ်ခုဆိုရင် static portion တွေဖြစ်တဲ့ Navbar, Product info တွေကိုအရင်ပြမှာဖြစ်ပြီးတော့ dynamic portion ဖြစ်တဲ့ Cart, Recommended products လိုမျိုးတွေကို stream လုပ်ပြီးပြမှာပါ။

Canary version မှာပဲရှိတာမို့ production မသုံးရသေးပါဘူး။ static export မှာလည်းသုံးလို့မရပါဘူး။ Suspense fallback မထည့်ရင် build time မှာ error ထွက်နိုင်ပါတယ်။

Redis ဆိုတာဘာလဲ?

Redis ဆိုတာက Remote Dictionary Server လို့ခေါ် ပြီးတော့ Key-Value လိုမျိုး data တွေကိုသိမ်းဖို့သုံးပါတယ်။

အများစုက Redis ကို Database မှာ read operation လျော့ဖို့ နဲ့ database caching လုပ်ဖို့သုံးတဲ့အပြင် သူ့မှာ အားသာတာတစ်ချက် Big O Time Complexity မှာ O(1) access time ဖြစ်နေတာပါ။

Redis မှာက value က basic data တွေအပြင်မဟုတ်ပါဘူး geolocation, hashes, sorted sets လိုမျိုးတွေလည်းပါပါသေးတယ်။

Redis က publisher/subscriber ကို support ပေးတာမလို့ real-time message လည်းဖြစ်ပါတယ်။

caching ဆိုတဲ့သဘောအတိုင်း key တိုင်းကို expiry ထားလို့ရပါတယ်။ Storage မဟုတ်ပဲ RAM ကိုသုံးတာမလို့ Look Up Time ကတော်တော် မြန်နေမှာပါ။

Redis က ram မှာ storage ပေမဲ့ durability ကိုလည်း support ပေးပါတယ်။

Redis မှာ Graph Data တွေအတွက် RedisGraph, Search Feature အတွက် RedisSearch, Redis AI တွေကို လည်း extend လုပ်နိုင်ပါသေးတယ်။

ဒီလောက်ဆိုရင်တော့ Redis ကိုအကြမ်းဖျင်းနားလည်သွားလောက်မှာပါ။

TypeScript: Record Type

TypeScript မှာ beginner တွေအများစုက {} လိုမျိုး object တွေသိမ်းတဲ့အခါမှာ props: Object လို့သိမ်းကြမှာပါ။

Object မှာ curly bracket လိုမျိုး object အပြင် class တွေလည်းသိမ်းလို့ရနေပါလိမ့်မယ်။ ဘာလို့လဲဆိုတော့ JavaScript မှာ every class is the object ဖြစ်နေလို့ပါ

အဲ့တာဆို key value လိုမျိုး data တွေကိုဘယ်လို type safe ဖြစ်အောင်သိမ်းမလဲ?

Record ဆိုတဲ့ type ကိုသုံးပြီးသိမ်းလို့ရပါတယ်။

Record ကိုသုံးမယ်ဆိုရင် key နဲ့ value type တွေကိုလည်း define လုပ်လို့ရပါတယ်။ ဉပမာ Record လို့သုံးရင် key တွေက string ဖြစ်ရမှာဖြစ်ပြီးတော့ value တွေကတော့ number ဖြစ်ရမှာပါ။

ဒီလောက်ဆိုရင်တော့ Object ကိုမသုံးပဲ Record ကိုသုံးပြီး key value properties တွေသိမ်းဖို့ အကြမ်းမြင်းနားလည်သွားလောက်မှာပါ။

React မှာ Form Input Values တွေကို useState နဲ့ မ track သင့်ပါဘူး

React Tutorials အမျာစုမှာ input state ကို useState နဲ့ track လေ့ရှိပါတယ် useState ကိုသုံးပီုး realtime validation တွေလုပ်လို့ရပါတယ် ဒါပေမဲ့ မလိုအပ်တဲ့ UI rerender တွေကိုဖြစ်စေပါတယ်

ပြီးတော့ real time validation တွေက app တိုင်းမလိုအပ်ပါဘူး

useRef Hook ကိုသုံးပြီး FormData API နဲ့ input ‌ထဲက data တွေကို form submit လိုက်ရုံနဲ့ grab လိုက်လို့ရပါတယ်

Express.JS Clean Architecture Guide

https://wintkhantlin.vercel.app/posts/best-pratices-of-express-js

Best Pratices of Express.JS A guide to maintaining clean code and scalable architecture in Express.JS and similar frameworks