Skip to content

Instantly share code, notes, and snippets.

View eimg's full-sized avatar

Ei Maung eimg

2.8k followers · 6 following
View GitHub Profile
@eimg
eimg / popover.html
Created April 19, 2024 03:26
HTML popover Attribute Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popover</title>
<style>
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
max-width: 800px;
@eimg
eimg / ES6-overview.md
Last active April 6, 2024 10:36
Overview of some ES6 features

ES6 - Modern JavaScript

ခြောက်ကြိမ်မြောက် တည်းဖြတ်မှုဖြစ်သည့်အတွက် ES6 ဟု အတိုကောက်ခေါ်၍ 2015 ခုနှစ်တွင် ဖန်တီးခဲ့သည့် အတွက် ECMAScript2015 ဟု ရံဖန်ရံခါ ခေါ်သည့် နည်းပညာသည် လက်ရှိ JavaScript (ES5) ကို အဆင့်မြှင့်တင်ထားသည့် နည်းပညာဖြစ်သည်။ ES6 တွင် ပါဝင်လာသည့် လုပ်ဆောင်ချက်များမှ အချို့ကို ရွေးထုတ် ဖော်ပြလိုက်ပါသည်။

Block-scope Variable

မူလ JavaScript တွင် var Keyword ကို အသုံးပြု၍ Variable များ ကြေငြာနိုင်သည်။ ထို Variable များသည် Function-scope သဘောသဘာဝ ရှိကြသည်။ ES6 တွင် let Keyword ကို အသုံးပြု၍ Block-scope Variable များ ကြေငြာအသုံးပြုနိုင်သည်။

let i = 10
@eimg
eimg / file.upload.js
Last active March 7, 2024 05:56
JavaScript FormData Upload
const getFile = async () => {
const [fileHandle] = await window.showOpenFilePicker({
types: [
{
description: "Images",
accept: {
"image/*": [".png", ".jpeg", ".jpg"],
},
},
],
@eimg
eimg / livewire-tutorial.md
Last active January 30, 2024 06:53
Livewire Tutorial

Laravel Livewire Tutorial

Laravel ကို ဘယ် Front-end နည်းပညာနဲ့မဆို တွဲဖက်အသုံးပြုလို့ရပါတယ်။ အဲ့ဒီလို တွဲဖက်အသုံးပြုလို့ရတဲ့ နည်းပညာတွေထဲက Livewire အကြောင်းကို တစ်ခါထဲ လက်တွေ့လိုက်လုပ်ကြည့်လို့ရမယ့် Tutorial ပုံစံနဲ့ ဖော်ပြသွားမှာပါ။ Livewire ကို အကျဉ်းချုပ်အားဖြင့် JavaScript တွေရေးစရာမလိုတော့ဘဲ PHP နဲ့ပဲ Sing-Page Application (SPA) တွေ ဖန်တီးလို့ရတဲ့ နည်းပညာလို့ ဆိုနိုင်ပါတယ်။

Project Setup

စမ်းသပ်ကြည့်နိုင်ဖို့အတွက် ပထမဆုံး Laravel ပရောဂျက် အသစ်တစ်ခုကို အခုလို တည်ဆောက်ယူလိုက်ပါ။

composer create-project laravel/laravel tall
@eimg
eimg / todo-vanilla.js
Created January 28, 2024 03:26
Todo List with Vanilla JS for PWD
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/all.min.css">
</head>
@eimg
eimg / mongo-agg.js
Created January 26, 2024 11:31
Mongo Aggregate Pipeline Example
const pipeline = [
{
$match: { type: 'post' },
},
{
$match: {
owner: { $in: ['1', '2', '3'] }
},
},
{
@eimg
eimg / rtk-starter-2.js
Created January 26, 2024 04:04
RTK Starter Template - Type 2
/*** createAppSlice.js ****/
// import { asyncThunkCreator, buildCreateSlice } from "@reduxjs/toolkit";
// export const createAppSlice = buildCreateSlice({
// creators: { asyncThunk: asyncThunkCreator },
// });
/*** mySlice.js ***/
import { createAppSlice } from "./createAppSlice";
@eimg
eimg / rtk-starter-1.js
Last active January 26, 2024 03:44
RTK Starter Template - Type 1
/*** mySlice.js ***/
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
export const asyncMethod = createAsyncThunk("action/id", async () => {
// fetch and return data
// will become action payload
});
export const mySlice = createSlice({
name: "name",
@eimg
eimg / minimal-react-build.md
Last active January 24, 2024 07:34
The Most Minimal React Build System

The Most Minimal React Build System

ပြီးခဲ့တဲ့ ပို့စ်မှာ React ကို ချဉ်းကပ်ပုံအသစ်နဲ့ ဖော်ပြခဲ့ပါတယ်။ ဘာ Build System မှ မပါပဲ HTML Document တစ်ခုအတွင်းမှာ တိုက်ရိုက်ရေးသားခဲ့ခြင်းဖြစ်ပါတယ်။ ဒီတစ်ခါတော့ အရိုးဆုံးနဲ့ အရှင်းဆုံး Build System တစ်ခုကို တည်ဆောက် ကြည့်ကြမှာဖြစ်ပါတယ်။ ဒီအကြောင်းအရာဟာ ကျွန်တော်ပို့ချနေတဲ့ Rockstar Developer Course မှာ ထည့်သွင်းသင်ကြားမယ့် အကြောင်းအရာ တစ်ခုပါ။ ကြိုစမ်းမထားပဲ လက်တမ်းသင်ရင် အမှားပါပြီး အချိန်ကြာမှာစိုးလို့ အခုလို ကြိုစမ်းပြီး စာအဖြစ် ကြိုရေးထားလိုက်တာပါ။ ဒီ Course မှာ တက်ရောက် သင်ယူနေသူ ဟုတ်ဟုတ် မဟုတ်ဟုတ် JavaScript နည်းပညာတွေကို စိတ်ဝင်စားသူဆိုရင် ဒီပို့စ်က အသုံးဝင်ပါလိမ့်မယ်။

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

Babel in Browser

လက်ရှိ ရိုးရိုး HTML ထဲမှာ ရေးထားတဲ့ နမူနာကို နောက်တစ်ခါ ပြန်

@eimg
eimg / livewire-volt-tutorial.md
Last active October 17, 2023 04:00
Livewire Tutorial with Volt

Livewire Tutorial with Volt

Laravel ကို ဘယ် Front-end နည်းပညာနဲ့မဆို တွဲဖက်အသုံးပြုလို့ရပါတယ်။ အဲ့ဒီလို တွဲဖက်အသုံးပြုလို့ရတဲ့ နည်းပညာတွေထဲက Livewire အကြောင်းကို တစ်ခါထဲ လက်တွေ့လိုက်လုပ်ကြည့်လို့ရမယ့် Tutorial ပုံစံနဲ့ ပြီးခဲ့တဲ့ ပိုစ့်မှာ ဖော်ပြခဲ့ပြီးဖြစ်ပါတယ်။

အဲ့ဒီ Tutorial မှာ Class Component တွေကို အသုံးပြု ဖော်ပြခဲ့ပြီး ဒီတစ်ခါတော့၊ ပုံစံတူ Tutorial ကိုပဲ အသစ်ထွက်ထားတဲ့ Livewire 3 မှာပါတဲ့ Functional Component တွေနဲ့ အနည်းငယ်ပြင်ဆင်ပြီး ထပ်မံဖော်ပြလိုက်ပါတယ်။

Project Setup

စမ်းသပ်ကြည့်နိုင်ဖို့အတွက် ပထမဆုံး Laravel ပရောဂျက် အသစ်တစ်ခုကို အခုလို တည်ဆောက်ယူလိုက်ပါ။