Skip to content

Instantly share code, notes, and snippets.

View composite's full-sized avatar
🤡
와이 쏘 씨리우스야 씨벌로마.

Ukjin Yang composite

🤡
와이 쏘 씨리우스야 씨벌로마.
View GitHub Profile
@composite
composite / pass.ts
Created March 16, 2024 08:03
Generate and verify password based on PBKDF2 with SHA-256 using Web Standards. works on modern browser, node(20 or later), and any cloud's edge environment.
const encoder = new TextEncoder();
const ITERATIONS = 65535;
const LENGTH = 64;
const ALGORITHM = 'PBKDF2';
const DIGEST = 'SHA-256';
const DERIVED_KEY = {
name: 'AES-CBC',
length: 256,
} as const;
const USAGES = {
@composite
composite / object-cache.ts
Last active March 16, 2024 10:04
React weak argument using JSON based cache function for Server Component: useful to assign argument as object, array or any serializable values.
import hash from 'object-hash';
export type ObjectCacheFunction<A extends unknown[], V> = (...args: A) => V;
const objectMap = cache(() => new Map<string, any[]>());
export const objectCache = <A extends unknown[], V>(fn: ObjectCacheFunction<A, V>): ObjectCacheFunction<A, V> => {
const map = objectMap();
return new Proxy(
cache((s: string) => fn(...(map.get(s) as A))),
{
@composite
composite / inview.ts
Created February 17, 2024 05:44
React Polymorphic Component for Dummies & IntersectionObserver based Component Example
/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-assignment */
'use client';
import type { ElementType, RefCallback } from 'react';
import { createElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { twMerge } from 'tailwind-merge';
import type { PolymorphicComponentProps } from './polymorphic';
export type InViewProps = {
/**
* The CSS Class that active when inside browser's sight
@composite
composite / safehtml.ts
Last active May 25, 2023 09:18
Safely append plain HTML content from your raw html string for React (caveats: no SSR/SSG friendly. you should handle before use it.)
// other allowed node types
const allowNodes: number[] = [Node.TEXT_NODE, Node.DOCUMENT_FRAGMENT_NODE]
// allowed tags
const allowTags = ['div', 'span', 'p', 'img', 'strong', 'i', 'b', 's', 'br', 'a', 'blockquote', 'code', 'del', 'em', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'kbd', 'ol', 'ul', 'li', 'sub', 'sup']
// allowed tag's attributes
const allowAttrs = ['src', 'width', 'height', 'alt', 'title', 'href', 'style']
// generate almost unique hash that avoid key warning
const unsafeHash = () => Math.random().toString(36).substring(2)
@composite
composite / Dynamic.ts
Last active April 14, 2023 13:35
Just React hook utilities.
import {
type ComponentProps,
createElement,
type ElementType,
type ForwardedRef,
forwardRef,
type MutableRefObject,
type ReactDOM,
type ReactElement,
type Ref,
@composite
composite / HowToUse.vue
Created October 16, 2022 12:19
Legacy event bus pattern for Vue 3 Composition API
<script setup>
import useEventBus from './lib/event-bus'
const bus = useEventBus()
bus
.on('session-change', (...args) => {
// TODO Session Change
console.log('session change event fired', args)
})
@composite
composite / MonacoEditor.vue
Created June 27, 2022 01:58
Monaco Editor for Vue example (SSR not works I don't know why...)
<template>
<div ref="container"></div>
</template>
<script setup lang="ts">
import {defineEmits, onBeforeUnmount, onMounted, ref, toRefs, watch} from 'vue';
import {editor as editorType, IDisposable} from 'monaco-editor';
import ICodeEditor = editorType.ICodeEditor;
export interface CodeEditorProps {
modelValue: string;
@composite
composite / cartesian.ts
Created June 10, 2022 11:28
The useful Typescript utilities
/**
* Array Cartesian Product
*/
const cartesian = <T,>(...arr: (T extends unknown[] ? never : T)[][]) =>
arr.reduce((a, b) => a.flatMap((x) => b.map((y) => [...x, y])), [
[] as T[],
] as T[][]);
@composite
composite / wsl2-network.ps1
Last active February 9, 2023 01:01 — forked from daehahn/wsl2-network.ps1
WSL 2 TCP NETWORK FORWARDING, IMPROVED FOR TASK SCHEDULER! ALSO WORKS ON WINDOWS SERVER 2022!
# WSL2 network port forwarding script v1
# for enable script, 'Set-ExecutionPolicy -ExecutionPolicy Bypass -Scope CurrentUser' in Powershell,
# for delete exist rules and ports use 'delete' as parameter, for show ports use 'list' as parameter.
# written by Daehyuk Ahn, Aug-1-2020
# edited by Ukjin Yang, Jun-7-2022 (Windows Server 2022 also works!)
# Improved features: more detailed logs for Task Scheduler, saved IP check, etc.
If ($Args[0] -eq "list") {
netsh interface portproxy show v4tov4;
exit;
@composite
composite / use-layout-context.tsx
Created April 26, 2022 09:44
React Use Layout Context Hooks API Example
import type React from 'react';
import { createContext, useContext, useEffect, useMemo, useState } from 'react';
/**
* 레이아웃 키값 Map
* @date 2022. 4. 20. - 오후 3:51:50
*
* @export
* @interface LayoutMap
* @typedef {LayoutMap}