Skip to content

Instantly share code, notes, and snippets.

View ellemedit's full-sized avatar
🏠
Working from home

Marshall Han ellemedit

🏠
Working from home
View GitHub Profile
@ellemedit
ellemedit / README.md
Last active July 21, 2024 01:49
git shortcut

gacm: Git Add, Commit, and Push Function for Zsh

Overview

gacm (Git Add Commit Merge) is a Zsh function that simplifies the process of adding, committing, and optionally pushing Git changes. It combines git add ., git commit -m, and (optionally) git push into a single command, with an additional option for force push.

Installation

Add the following function to your ~/.zshrc file:

@ellemedit
ellemedit / FormField.browser-test.tsx
Last active July 15, 2024 04:53
[React 19][React Compiler] Accessible and Declarative Form Component
import { expect, test } from "vitest";
import { render, screen } from "@testing-library/react";
import {
FormDescription,
FormError,
FormField,
FormInput,
FormLabel,
@ellemedit
ellemedit / nextjs-mock.ts
Last active July 12, 2024 11:50
NextJS App Router cookie module mock with Bun/TypeScript
import { mock } from "bun:test";
import { ReadonlyRequestCookies } from "next/dist/server/web/spec-extension/adapters/request-cookies";
export function mockNextjsReadonlyCookie() {
mock.module("next/headers", () => {
const cookieMap = new Map<string, { name: string; value: string }>();
const cookies: ReadonlyRequestCookies = {
get: (nameOrCookie: string | { name: string }) => {
const name =
typeof nameOrCookie === "string" ? nameOrCookie : nameOrCookie.name;
@ellemedit
ellemedit / package.json
Last active July 9, 2024 04:02
`~/` alias like subpath import config in Next.js
{
"imports": {
"#styled-system/*": "./src/styled-system/*/index.js", // remove if you don't use pandacss
"#*": {
"react-server": [
"./src/*.ts",
"./src/*.tsx",
"./src/*.server.ts",
"./src/*.server.tsx"
],
@ellemedit
ellemedit / README.md
Created June 21, 2024 01:27
React Form Action + Validation + Focus + State patterns

Usage

function LoginForm() {
  const [state, dispatch] = useActionState(loginFormAction, {});
  const [_isPending, formAction] = useFormAction(async (formData, form) => {
    dispatch({ type: "RESET" });
    const errors = validateForm(formData);
    if (errors != null) {
      dispatch({ type: "SET_INVALID_INPUTS", form, errors });
@ellemedit
ellemedit / prettier.config.mjs
Last active June 20, 2024 12:59
favorite prettier config
/**
* @see https://prettier.io/docs/en/configuration.html
* @type {import("prettier").Config}
*/
const config = {
trailingComma: "all",
printWidth: 120,
tabWidth: 2,
arrowParens: "always",
semi: false,
@ellemedit
ellemedit / package.json
Created June 20, 2024 12:48
Subpath import package.json configuration example
{
// ...,
"imports": {
"#styled-system/*": "./src/styled-system/*/index.js",
"#*": [
"./src/*.ts",
"./src/*.tsx",
"./src/*"
]
}
@ellemedit
ellemedit / README.md
Created June 19, 2024 06:45
A ReactDOM hook that allows you to reset form optionally after submitting

Example:

function Form() {
  const [isPending, onSubmit] = useFormActionHandler((formData, reset) => {
    if (formData.get('condition') === 'X') {
      reset();
    }
    // ...
 });
@ellemedit
ellemedit / .gitconfig
Created March 6, 2024 02:05
my git config
# This is Git's per-user configuration file.
[user]
name = BaHwan Han
email = beingbook@gmail.com
[push]
default = current
[core]
pager = delta
@ellemedit
ellemedit / taste.md
Last active March 1, 2024 01:00
My Taste Next.js

editorconfig

# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

[*]
indent_style = space