WIT-Academy

အားလုံးပဲ မင်္ဂလာပါ။
ဒီတစ်ပတ်မှာတော့ JavaScript ထဲက Date Time Format အမျိုးမျိုးကို ပြောင်းပုံကို မျှဝေပေးသွားမှာ ဖြစ်ပါတယ်။ Date Time Format တွေဆိုတာ UI မှာရော၊ System Ajax တွေအတွက်ပါ မရှိမဖြစ် အသုံးပြုနေကြတဲ့ အပိုင်းပဲ ဖြစ်ပါတယ်။

const date = new Date("2026-01-21T13:30:00Z");
TZ ဆိုတာကတော့ TimeZone ပဲ ဖြစ်ပါတယ်။

const now = new Date();
ဒီနေ့ ရက်စွဲကို ရယူခြင်း ဖြစ်ပါတယ်။

const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
console.log(timeZone);
Time Zone ကို ရယူခြင်း ဖြစ်ပါတယ်။

const formatted = now.toLocaleString("en-US", {
year: "numeric",
month: "2-digit",
day: "2-digit",
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
timeZoneName: "short"
});
Output: 01/21/2026, 09:30:00 PM GMT+8

now.toISOString()
Output: 2026-01-21T13:30:00.000Z

const readableFormat = date.toLocaleString("en-GB", {
day: "2-digit",
month: "short",
year: "numeric",
hour: "2-digit",
minute: "2-digit",
hour12: false,
timeZone: "UTC"
});
Output: 21 Jan 2026, 13:30

const sqlFormat = date
.toISOString()
.slice(0, 19)
.replace("T", " ");
Output: 2026-01-21 13:30:00

အားလုံးပဲ မင်္ဂလာပါ။

ဒီတစ်ပတ်အတွက် မျှဝေပေးသွားချင်တဲ့ အကြောင်းအရာကတော့ JavaScript ES6 အသုံးပြုနည်းလေးပဲ ဖြစ်ပါတယ်။ ECMAScript 2015 (ES6) ကို JavaScript ရဲ့ ထင်ရှားတဲ့ Features အနေနဲ့ မိတ်ဆက်ပေးခဲ့ပါတယ်။ ထို့အတွက်ကြောင့် Advanced ES6 Features တွေကို Production Products တွေမှာ ပိုမို အသုံးချလာကြပါတယ်။

let, const (Block Scope)
---------------------------------
let, const တို့သည် Block Scope ဖြစ်ပါတယ်။ နှစ်ခုစလုံးက Block Scope ဖြစ်သော်လည်း const သည် Scope အတွင်းမှာ variable ကို reassign လုပ်လို့ မရပါဘူး။ let ကတော့ ရပါတယ်။

let counter = 20;
const counter2 = 20;

counter = 10;
counter2 = 10;

counter2 လိုင်းက Error ပြမှာ ဖြစ်ပါတယ်။ သို့သော် Object Attributes, Array List တွေကို Update လုပ်လို့ ရပါတယ်။

const list = [ 10 ];
list.push(20);
console.log(list); // [ 10, 20 ]

သို့သော် အောက်ကလိုတော့ မရပါ။

list = [ 10, 20 ]; // Const Error

Classes with Private Fields
-------------------------------------
class Account {
= 0;

deposit(amount) {
this. += amount;
}

getBalance() {
return this. ;
}
}

const myAccount = new Account();
myAccount.deposit(100);
console.log(myAccount.balance); // Undefined
console.log(myAccount.getBalance()); // Outputs: 100

အားလုံးပဲ မင်္ဂလာပါ။

ဒီတစ်ပတ်မှာတော့ Chart.js မှာ Gradient ထည့်တာကို မျှဝေပေးသွားမှာ ဖြစ်ပါတယ်။ Chart.js ဆိုတာ Web Developer တော်တော်များများ အသုံးပြုနေကြတဲ့ Chart အမျိုးအစား မြောက်များစွာကို Options, Parameters အမျိုးမျိုးနဲ့ လုပ်ဆောင်နိုင်တဲ့ JS Library တစ်ခုပဲ ဖြစ်ပါတယ်။

အသုံးပြုဖို့အတွက် canvas ကို ID နဲ့ သတ်မှတ်ပေးရမှာ ဖြစ်ပါတယ်။


Canvas Context ကို ကြေညာပါမယ်။
const ctx = document.getElementById('gradientChart').getContext('2d');

ထို့နောက် Canvas Context မှာ Gradient Fill လုပ်ဖို့အတွက် သတ်မှတ်ပါမယ်။
const gradientFill = ctx.createLinearGradient(0, 0, 0, 400);
gradientFill.addColorStop(0, 'rgba(102, 126, 234, 0.5)');
gradientFill.addColorStop(0.5, 'rgba(118, 75, 162, 0.25)');

လိုင်းတွေကို အရောင်ထည့်ဖို့အတွက် သတ်မှတ်ပါမယ်။
const gradientStroke = ctx.createLinearGradient(0, 0, 700, 0);
gradientStroke.addColorStop(0, ' ');
gradientStroke.addColorStop(0.5, ' ');

ထို့နောက် Datasets အောက်က ကုဒ်ကို ထည့်ပါမယ်။
{
label: 'Revenue ($k)',
data: [30, 45, 38, 65, 48, 72, 85, 78, 92, 88, 105, 120],
fill: true,
backgroundColor: gradientFill,
borderColor: gradientStroke,
borderWidth: 3,
tension: 0.4,
pointBackgroundColor: ' ',
pointBorderColor: gradientStroke,
pointBorderWidth: 2,
pointRadius: 5,
pointHoverRadius: 8,
pointHoverBackgroundColor: ' ',
pointHoverBorderColor: ' ',
pointHoverBorderWidth: 2
},

ထို့နောက် ကျန်တဲ့ ကုဒ်ကိုတော့ ပုံမှန်ရေးတဲ့အတိုင်း ထည့်ပေးပါမယ်။
// Chart configuration
const config = {
type: 'line',
data: data,
options: {
responsive: true,
maintainAspectRatio: true,
interaction: {
intersect: false,
mode: 'index'
},
plugins: { ... }

အားလုံးပဲ မင်္ဂလာပါ။🙋

သာယာအေးချမ်းသော အားလပ်ရက်လေးမှာ လေ့လာနိုင်ရန်အတွက် ဒီတစ်ပတ်မှာတော့ 【Pinia Tips for Vue】ဆိုတဲ့ ခေါင်းစဥ်နှင့်ပတ်သက်ပြီး ဝေမျှပေးထားပါတယ်။

Youtube Channel Link :

Pinia Tips for Vue အားလုံးပဲ မင်္ဂလာပါ🙋ဒီတစ်ပတ်မှာတော့ 【Pinia Tips for Vue】ဆိုတဲ့ ခေါင်းစဥ်နှင့်ပတ်သက်ပြီး ဝေမျှပေးချင်ပါတယ်။

အားလုံးပဲ မင်္ဂလာပါ။ 🙋
ဒီတစ်ပတ်မှာတော့ 【Basic Excel & Word Knowledge Sharing】ဆိုတဲ့ ခေါင်းစဉ်ဖြင့် ဝေမျှပေးသွားပါမယ်။

Youtube Channel Link :

Basic Excel & Word Knowledge Sharing အားလုံးပဲ မင်္ဂလာပါ🙋ဒီတစ်ပတ်မှာတော့ 【Basic Excel & WordKnowledge Sharing】ဆိုတဲ့ ခေါင်းစဥ်နှင့်ပတ်သက်ပြီး ဝေမျှပေးချင်ပါတယ်။blog က...

အားလုံးပဲ မင်္ဂလာပါ။
ဒီတစ်ပတ်အတွက် မျှဝေပေးသွားချင်တဲ့ အကြောင်းအရာကတော့ Chart.js ရဲ့ Advance ဖြစ်မယ့် Event, Label Customization အကြောင်းပဲ ဖြစ်ပါတယ်။

label (tooltip) ကို Customize ပြင်မယ်ဆိုရင် options ထဲက plugins ရှိ tooltip ထဲက callbacks မှတဆင့် label ကို ပြင်ပေးရမှာပဲ ဖြစ်ပါတယ်။

options: {
plugins: {
tooltip: {
callbacks: {
label: (context) => {
return Sales: ${context.raw} units;
}
}
}
}
}

OnHover အတွက် အောက်က ကုဒ်အတိုင်း ရေးပေးလို့ ရမှာ ဖြစ်ပါတယ်။

options: {
onHover: (event, elements) => {
if (!elements.length) return;

const point = elements[0];

const datasetIndex = point.datasetIndex;
const dataIndex = point.index;

const datasetLabel = chart.data.datasets[datasetIndex].label;
const value = chart.data.datasets[datasetIndex].data[dataIndex];
const label = chart.data.labels[dataIndex];

console.log('Hover:', {
datasetLabel,
label,
value
});
}
}

အားလုံးပဲ မင်္ဂလာပါ။ 🙋
ဒီတစ်ပတ်မှာတော့ 【Adobe After Effects for Beginner (Part 2)】ဆိုတဲ့ ခေါင်းစဥ်နှင့်ပတ်သက်ပြီး ဝေမျှပေးထားပါတယ်။

Youtube Channel Link;
https://youtu.be/BQGe3XuGBHA

Blog (Part 1) ကိုတော့ အောက်ပါလင့်ခ်မှတစ်ဆင့် အသေးစိတ်ဖတ်ရှုနိုင်ပါတယ်။ 👇
https://www.spiceworksmyanmar.com/blog/adobe-after-effects-for-beginner/

Adobe After Effects For Beginner - Web Development & Tech Blog | Spiceworks Myanmar After Effects ကို စပြီး အသုံးပြုမယ့်သူတွေအတွက် မဖြစ်မနေသိထားသင့်တဲ့ Text Animation လေးလုပ်ပုံကို ပြောပြပေးသွားမှာဖြစ်ပါတ

အားလုံးပဲ မင်္ဂလာပါ။
ဒီတစ်ပတ်မှာတော့ Chat.js Library ရဲ့ Core Attribute များအကြောင်းကို မျှဝေပေးသွားမှာ ဖြစ်ပါတယ်။

Chart.js ဆိုတာ Web Application တွေမှာ အလွန် အသုံးများတဲ့ JS Library တစ်ခုပဲ ဖြစ်ပါတယ်။ သူ့ Core Attributes တွေမှာဆိုရင် Data Handling, Animation, Chart Behavior, Styling စသည်ဖြင့် စုံစုံလင်လင်ပါဝင်မှာ ဖြစ်ပါတယ်။

1. Chart Type (type)
Chart အမျိုးအစား (bar, line, pie, doughnut, radar, polarArea, bubble, scatter) အများအပြားကို ထောက်ပံ့ပေးထားပါတယ်။

2. labels
x-axis မှာ ပြမယ့် Label တွေကို ပြဖို့အတွက်ပဲ ဖြစ်ပါတယ်။ ဥပမာ - labels: ['January', 'February', 'March', .... ]

3. datasets
သူကတော့ Chart ပေါ်က Data Point လေးတွေအတွက်ပဲ ဖြစ်ပါတယ်။ Line Chart မှာဆိုရင် data: [120, 150, 180] ကဆိုရင် Data Point X-Axis နဲ့ သွားပါတယ်။
datasets: [{
label: 'Sales',
data: [120, 150, 180],
backgroundColor: 'rgba(54, 162, 235, 0.5)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]

4. responsive
သူကို true ထားမယ်ဆိုရင် Chart ကို Auto Resize လုပ်ပေးမှာ ဖြစ်ပါတယ်။

5. plugins
သူကတော့ tooltips, legends, titles စတာတွေကို visibility, value တွေကို Configure လုပ်တဲ့အခါမျိုးမှာ သုံးမှာ ဖြစ်ပါတယ်။

plugins: {
legend: {
display: true,
position: 'top'
}
}

အားလုံးပဲ မင်္ဂလာပါ။🙋
ဒီတစ်ပတ်မှာတော့ 【n8n Automation】ဆိုတဲ့ ခေါင်းစဥ်နှင့်ပတ်သက်ပြီး ဝေမျှပေးချင်ပါတယ်။

Youtube Channel Link;
https://youtu.be/aMyMy806We4?si=W_rUSHzXGq-AW8gh

Blog ကိုတော့ အောက်ပါလင့်ခ်မှတစ်ဆင့် အသေးစိတ်ဖတ်ရှုနိုင်ပါပြီ။ 👇
https://witlab.ph/blog/n8n-automation-boosting-productivity-in-the-digital-era/?lang=en

n8n Automation: Boosting Productivity in the Digital Era - WIT LAB % We excel in utilizing cutting-edge technology, programming languages, and frameworks to deliver high-quality digital solutions.

အားလုံးပဲ မင်္ဂလာပါ။

ဒီတစ်ပတ်အတွက် မျှဝေပေးသွားချင်တဲ့ အကြောင်းအရာကတော့ Chart.js ရဲ့ အခြေခံ အသုံးပြုပုံပဲ ဖြစ်ပါတယ်။ Chat.js ဆိုတာ Pie Chart, Line Chart, Graph Chart စသည်တို့ကို မိမိ Web App တွေမှာ dynamic data (သို့ ) static data တွေနဲ့ ပြသချင်တဲ့အခါမှာ အသုံးပြုလို့ ရပြီး Animated Graph များ ဖြစ်ပြီး ရွေးချယ်စရာ Options များလည်း စုံစုံလင်လင် ရှိပါတယ်။

အရင်ဦးဆုံး CDN ချိတ်ဆက်ပါတယ်။


Graph/Chart ပေါ်ဖို့အတွက် Canvas တစ်ခုကို ထည့်ပါမယ်။ အဲ့မှာ Size (width, height) ကို သတ်မှတ်ထားပါမယ်။


ထို့နောက် ထဲမှာ အောက်ပါ ကုဒ်ကို ထည့်ပါမယ်။

အောက်က ကုဒ်ကတော့ အပေါ်မှာ ထည့်ထားတဲ့ canvas ကို id နဲ့ variable တစ်ခုနဲ့ ခေါ်သုံးပါမယ်။
const ctx = document.getElementById('myChart');

ထို့နောက် Bar Chart ကို အသုံးပြုပြီး လစဥ် Sale Data ကို (၅) လစာ ထုတ်တဲ့ ပုံစံမျိုး ရေးသားခြင်း ဖြစ်ပါတယ်။
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [{
label: 'Monthly Sales',
data: [12, 19, 8, 15, 22],
borderWidth: 1,
backgroundColor: 'rgba(54, 162, 235, 0.5)'
}]
},
options: {
scales: {
y: { beginAtZero: true }
}
}
});

datasets ကတော့ x axis အတွက် လိုအပ်သော ဒေတာကို ထည့်ပေးခြင်း ဖြစ်ပြီး data ဆိုတာကတော့ y-axis အတွက် လိုအပ်သော ဒေတာကို Array နဲ့ ထည့်ပေးတာ ဖြစ်ပါတယ်။ label ကတော့ graph/chart မှာ data point တွေအတွက် Label TIp အတွက် ဖြစ်ပါတယ်။

အားလုံးပဲ မင်္ဂလာပါ။ 🙋
ဒီတစ်ပတ်မှာတော့ 【jQuery (.append, .appendTo, .wrap)】ဆိုတဲ့ ခေါင်းစဥ်နှင့်ပတ်သက်ပြီး ဝေမျှပေးချင်ပါတယ်။

Youtube Channel Link;

jQuery (.append, .appendTo, .wrap) အားလုံးပဲ မင်္ဂလာပါ🙋ဒီတစ်ပတ်မှာတော့ 【jQuery (.append, .appendTo, .wrap)】ဆိုတဲ့ ခေါင်းစဥ်နှင့်ပတ်သက်ပြီး ဝေမျှပေးချင်ပါတယ်။

အားလုံးပဲ မင်္ဂလာပါ။
ဒီတစ်ပတ်အတွက် မျှဝေပေးသွားချင်တဲ့ အကြောင်းအရာကတော့ Javascript Class အသုံးပြုပုံပဲ ဖြစ်ပါတယ်။ Javascript မှာ function တွေကို များသောအားဖြင့် အပြင်မှာ ရေးလေ့ရှိပါတယ်။ အခုအခါမှာတော့ function တွေကို class name ထဲ ထည့်ရေးကြည့်ကြပါမယ်။

class constructor နဲ့ တည်ဆောက်ပါမယ်။ class အတွင်းထဲမှာဆို this နဲ့ ခေါ်ထောက်လို့ ရပါတယ်။

class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}

greet() {
return Hello, I’m ${this.name} and I’m ${this.age} years old.;
}
}

အသုံးပြုပုံ -
const person1 = new Person("John", 30);
console.log(person1.greet());

Output -
Hello, I’m John and I'm 30 years old.

နောက်တစ်ခုကတော့ extend ဖြစ်ပါတယ်။ သူကတော့ Person class ကို Employee ကနေ extend လုပ်တာပဲ ဖြစ်ပါတယ်။

class Employee extends Person {
constructor(name, age, position) {
super(name, age); // Call parent constructor
this.position = position;
}

work() {
return ${this.name} is working as a ${this.position}.;
}
}

const emp = new Employee("Alice", 28, "Developer");
console.log(emp.greet());
console.log(emp.work());

inheritance (extend) လုပ်ထားတဲ့အတွက် Person class ထဲက function တွေကို ယူသုံးလို့ ရမှာ ဖြစ်ပါတယ်။