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
/* eslint-disable react/display-name */
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable unicorn/consistent-function-scoping */
// @ts-nocheck
import React, { useState, useRef, useEffect, useLayoutEffect } from 'react';
import dynamic from 'next/dynamic';
function canUseDom() {
return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
const seq = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')
const RandomUtil = {
randomIntRange(min: number, max: number): number {
return parseInt((Math.random() * (max - min) + min).toString(), 10)
},
randomInt(n: number) {
return this.randomIntRange(0, n)
},
randomSeq(count: number): string {
@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 / active.md
Created January 2, 2025 15:19 — forked from paulmillr/active.md
Most active GitHub users (by contributions). http://twitter.com/paulmillr

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
@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 / readme.md
Created October 15, 2024 10:51
Next ENV

Next page

client: publicRuntimeConfig server: process.env

  • publicRuntimeConfig ở client check NEXT_DATA sẽ lộ hết config

  • Muốn dấu ở client thì thêm NEXT_PUBLIC_ vào trước tên biến truy cập bằng process.env

@hunghg255
hunghg255 / main.js
Created October 10, 2024 07:51
nextTick nodejs
const getDataService = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('data');
}, 1000);
});
};
const getA = async () => {
process.nextTick(async () => {
export default async function getSeoDataFromLink(url: string) {
try {
if (!url) {
throw new Error('URL is required');
}
if (url.includes('tiktok')) {
const rest: any = await fetch(`https://www.tiktok.com/oembed?url=${new URL(url)}`).then(
(res: any) => res.json(),
);
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
box-sizing: border-box; /* 1 */
border-width: 0; /* 2 */
@hunghg255
hunghg255 / dom_performance_reflow_repaint.md
Created August 17, 2024 10:14 — forked from faressoft/dom_performance_reflow_repaint.md
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.