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 / 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 / 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 / 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 ပရောဂျက် အသစ်တစ်ခုကို အခုလို တည်ဆောက်ယူလိုက်ပါ။

@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 / linux-commands
Last active October 5, 2023 07:04
Essential Linux Commands
ls, ls -la # list files
cd # change directory
pwd # current path
touch # create new files
cat # read file content
echo # output content
less # read big file
mkdir, mkdir -p # create directory
cp, cp -r # copy file, directory
mv # move or rename file, dir
@eimg
eimg / wasm.md
Last active August 30, 2022 15:08
Hello Web Assembly

C နဲ့ရေးတဲ့ကုဒ်ကို Browser ထဲမှာ Run ကြမယ်

Step-1

https://mbebenita.github.io/WasmExplorer/ ကိုသွားပါ။ ရေးလိုတဲ့ C/C++ ကုဒ်ကိုရေးပါ။ ဥပမာ -

int add(int a, int b) {
	return a + b;
}