Skip to content

Instantly share code, notes, and snippets.

View hunghg255's full-sized avatar
:octocat:
Make Frontend Better 👨‍💻

Hung Hoang hunghg255

:octocat:
Make Frontend Better 👨‍💻
View GitHub Profile
@hungdoansy
hungdoansy / scan-pnpm-vuln-packages.js
Last active September 9, 2025 15:14
A Node.js CLI utility for scanning pnpm projects (and workspaces) against a known list of vulnerable package versions.
#!/usr/bin/env node
/*
* Scan pnpm workspace/project for known bad package versions.
*/
const fs = require("fs");
const path = require("path");
const { execFile } = require("child_process");
// 👇 paste your affected list here
@BurnedChris
BurnedChris / benchmark-satori.ts
Last active November 14, 2025 05:18
Benchmark scripts for takumi and satori
//✓ Generated 87 OG images using Vercel OG: docs-new-layout/.c15t → /docs-new-layout/public/og
// ⏱️ Total time: 71725ms (1m)
// 📊 Performance: 3214.4882352941177ms (3s) - avg per image
// 🚀 Throughput: 1.21 images/second
import fs from 'node:fs';
import { cpus } from 'node:os';
import path from 'node:path';
import { ImageResponse } from '@vercel/og';
import ms from 'ms';
import React from 'react';
@ScriptedAlchemy
ScriptedAlchemy / hmr.md
Last active June 25, 2025 06:45
next hmr flow

Next.js Server-Side Hot Module Replacement (HMR) Architecture

Overview

Next.js implements a sophisticated server-side HMR system that coordinates multiple webpack compilers, handles server component updates, and manages complex caching mechanisms. This document provides a comprehensive analysis of the server-side HMR architecture.

High-Level Server Architecture

graph TB
@hunghg255
hunghg255 / main.ts
Created January 4, 2025 06:23
Fix Interactive next paint INP
import { useEffect, useLayoutEffect } from 'react';
export function interactionResponse(): Promise<unknown> {
return new Promise((resolve) => {
setTimeout(resolve, 100); // Fallback for the case where the animation frame never fires.
requestAnimationFrame(() => {
setTimeout(resolve, 0);
});
});
}
@hunghg255
hunghg255 / interval.js
Last active January 2, 2025 02:42
Run code on worker
1 vài thư viện:
https://github.com/developit/workerize
https://github.com/developit/greenlet
https://github.com/Leka74/easythread
https://github.com/GoogleChromeLabs/comlink
@hunghg255
hunghg255 / detect-recursion-functions.js
Last active July 19, 2024 07:45
detect-recursion-functions.js
// npm i @babel/parser @babel/traverse -D
const fs = require('node:fs');
const path = require('node:path');
const traverse = require('@babel/traverse').default;
const parser = require('@babel/parser');
// Change dir folder
import { Dispatch, SetStateAction, useCallback, useState } from "react";
/**
* Returns a stateful value, its previous value, and a function to update it.
*/
export function useStateWithPrev<S>(
initialState: S | (() => S),
initialPrevState: S | (() => S)
): [prevState: S, state: S, setState: Dispatch<SetStateAction<S>>];
// convenience overload when second argument is omitted
/**
@hunghg255
hunghg255 / createComponent.ts
Created May 22, 2024 07:47
Script Create Component
//@ts-nocheck
import { exec } from 'node:child_process';
import fs from 'node:fs';
import inquirer from 'inquirer';
/**
* @returns { Promise<string> }
*/
const chooseComponentDirectory = async (
@hunghg255
hunghg255 / reset.css
Created February 15, 2024 06:48
Reset CSS
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:where([hidden]:not([hidden='until-found'])) {
display: none !important;
@KristofferEriksson
KristofferEriksson / useLocation.ts
Created February 11, 2024 16:44
A React Typescript hook that provides real-time geolocation data, complete with heading and speed metrics
import { useEffect, useState } from "react";
interface LocationOptions {
enableHighAccuracy?: boolean;
timeout?: number;
maximumAge?: number;
}
interface LocationState {
coords: {