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
var mediaJSON = { "categories" : [ { "name" : "Movies",
"videos" : [
{ "description" : "Big Buck Bunny tells the story of a giant rabbit with a heart bigger than himself. When one sunny day three rodents rudely harass him, something snaps... and the rabbit ain't no bunny anymore! In the typical cartoon tradition he prepares the nasty rodents a comical revenge.\n\nLicensed under the Creative Commons Attribution license\nhttp://www.bigbuckbunny.org",
"sources" : [ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" ],
"subtitle" : "By Blender Foundation",
"thumb" : "images/BigBuckBunny.jpg",
"title" : "Big Buck Bunny"
},
{ "description" : "The first Blender Open Movie from 2006",
"sources" : [ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" ],
@jakub-g
jakub-g / async-defer-module.md
Last active June 4, 2026 20:19
async scripts, defer scripts, module scripts: explainer, comparison, and gotchas

<script> async, defer, async defer, module, nomodule, src, inline - the cheat sheet

With the addition of ES modules, there's now no fewer than 24 ways to load your JS code: (inline|not inline) x (defer|no defer) x (async|no async) x (type=text/javascript | type=module | nomodule) -- and each of them is subtly different.

This document is a comparison of various ways the <script> tags in HTML are processed depending on the attributes set.

If you ever wondered when to use inline <script async type="module"> and when <script nomodule defer src="...">, you're in the good place!

Note that this article is about <script>s inserted in the HTML; the behavior of <script>s inserted at runtime is slightly different - see Deep dive into the murky waters of script loading by Jake Archibald (2013)

@staltz
staltz / introrx.md
Last active June 3, 2026 23:23
The introduction to Reactive Programming you've been missing
@sindresorhus
sindresorhus / esm-package.md
Last active May 28, 2026 08:41
Pure ESM package

Pure ESM package

The package that linked you here is now pure ESM. It cannot be require()'d from CommonJS.

This means you have the following choices:

  1. Use ESM yourself. (preferred)
    Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide.
  2. If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
  3. Stay on the existing version of the package until you can move to ESM.
@faressoft
faressoft / dom_performance_reflow_repaint.md
Last active May 17, 2026 03:50
DOM Performance (Reflow & Repaint) (Summary)

DOM Performance

Rendering

  • How the browser renders the document
    • Receives the data (bytes) from the server.
    • Parses and converts into tokens (<, TagName, Attribute, AttributeValue, >).
    • Turns tokens into nodes.
    • Turns nodes into the DOM tree.
  • Builds CSSOM tree from the css rules.
@paulmillr
paulmillr / active.md
Last active May 13, 2026 17:15
Most active GitHub users (by contributions). https://paulmillr.com

Most active GitHub users (git.io/top)

The list would not be updated for now. Don't write comments.

The count of contributions (summary of Pull Requests, opened issues and commits) to public repos at GitHub.com from Wed, 21 Sep 2022 till Thu, 21 Sep 2023.

Because of GitHub search limitations, only 1000 first users according to amount of followers are included. If you are not in the list you don't have enough followers. See raw data and source code. Algorithm in pseudocode:

githubUsers
import * as React from 'react';
const useIsFirstRender = (): boolean => {
const isFirst = React.useRef(true);
if (isFirst.current) {
isFirst.current = false;
return true;
} else {
@BurnedChris
BurnedChris / benchmark-satori.ts
Last active March 12, 2026 23:13
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';
@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
@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