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
@paulmillr
paulmillr / active.md
Last active December 5, 2025 05:52
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
@staltz
staltz / introrx.md
Last active December 31, 2025 13:31
The introduction to Reactive Programming you've been missing
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" ],
@faressoft
faressoft / dom_performance_reflow_repaint.md
Last active December 15, 2025 08:47
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.
@jakub-g
jakub-g / async-defer-module.md
Last active December 20, 2025 05:25
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)

@hunghg255
hunghg255 / reactjs-interview-tips.md
Created July 6, 2020 05:59 — forked from paulnguyen-mn/reactjs-interview-tips.md
Bí kíp cho buổi phỏng vấn ReactJS thành công 🎉

Bí kíp cho buổi phỏng vấn ReactJS thành công 🎉

From unplash.com

AGENGA:

  1. Một vài lưu ý chung
  2. Ôn tập kiến thức JS/ReactJS
  3. Cày thuật toán, giải thuật
  4. Tìm hiểu về công ty mà mình xin ứng tuyển
@sindresorhus
sindresorhus / esm-package.md
Last active December 25, 2025 12:39
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.
@ladifire
ladifire / ExampleComponent.tsx
Created January 3, 2022 03:58
Demonstrate how to use Error boundary component in Reactjs
import React from 'react';
import { withErrorBoundary } from 'components/common/MartyErrorBoundary';
export const ExampleComponent = () => {
return (
<div>
Component
</div>
);
import * as React from 'react';
const useIsFirstRender = (): boolean => {
const isFirst = React.useRef(true);
if (isFirst.current) {
isFirst.current = false;
return true;
} else {
@hunghg255
hunghg255 / Use.tsx
Last active December 5, 2023 11:08
Nextjs lazy load component
const Test = lazyLoadHydrate(
() => import('@components/Test/Test'),
true,
() => <div style={{ height: 300 }} />,
);