Skip to content

Instantly share code, notes, and snippets.

View nthung2112's full-sized avatar
🏠
Working from home

Hung Nguyen nthung2112

🏠
Working from home
View GitHub Profile
@arkatsy
arkatsy / zustand-internals.jsx
Last active June 11, 2024 21:35
How zustand works internally
import { useSyncExternalStore } from "react";
// For more on the useSyncExternalStore hook, see https://react.dev/reference/react/useSyncExternalStore
// The code is almost identical to the source code of zustand, without types and some features stripped out.
// Check the links to see the references in the source code.
// The links are referencing the v5 of the library. If you plan on reading the source code yourself v5 is the best way to start.
// The current v4 version contains lot of deprecated code and extra stuff that makes it hard to reason about if you're new to this.
// https://github.com/pmndrs/zustand/blob/fe47d3e6c6671dbfb9856fda52cb5a3a855d97a6/src/vanilla.ts#L57-L94
function createStore(createState) {
@kfox
kfox / README.md
Last active December 4, 2023 11:08
TCP echo server for Node.js

TCP echo server for Node.js

Usage

  1. Make sure you have a modern-ish version of Node.js installed.
  2. Type npx https://gist.github.com/kfox/1280c2f0ee8324067dba15300e0f2fd3
  3. Connect to it from a client, e.g. netcat or similar: nc localhost 9000
@sindresorhus
sindresorhus / esm-package.md
Last active July 15, 2024 20:29
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.
@nthung2112
nthung2112 / DisableReactDevTools.js
Created November 17, 2018 02:30
Disabling the React DevTools
if (
process.env.NODE_ENV === 'production' &&
window.__REACT_DEVTOOLS_GLOBAL_HOOK__ &&
Object.keys(window.__REACT_DEVTOOLS_GLOBAL_HOOK__._renderers).length
) {
window.__REACT_DEVTOOLS_GLOBAL_HOOK__._renderers = {}
}
@ebidel
ebidel / coverage.js
Last active April 27, 2024 04:13
CSS/JS code coverage during lifecycle of page load
Moved to https://github.com/ebidel/puppeteer-examples
@gokulkrishh
gokulkrishh / media-query.css
Last active July 16, 2024 10:52
CSS Media Queries for Desktop, Tablet, Mobile.
/*
##Device = Desktops
##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) {
/* CSS */
@paulirish
paulirish / what-forces-layout.md
Last active July 17, 2024 00:51
What forces layout/reflow. The comprehensive list.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
@lukehoban
lukehoban / asyncloops.js
Last active May 31, 2021 23:18
Async/await and parallel loops
// ES6 w/ Promises
// Note: From a React starter template - see https://t.co/wkStq8y3I5
function fetchData(routes, params) {
let data = {};
return Promise.all(routes
.filter(route => route.handler.fetchData)
.map(route => {
return route.handler.fetchData(params).then(resp => {
data[route.name] = resp;
@roundand
roundand / OpenWithSublimeText3.bat
Last active June 29, 2024 01:16 — forked from mrchief/LICENSE.md
Open folders and files with Sublime Text 3 from windows explorer context menu (tested in Windows 7)
@echo off
SET st3Path=C:\Program Files\Sublime Text 3\sublime_text.exe
rem add it for all file types
@reg add "HKEY_CLASSES_ROOT\*\shell\Open with Sublime Text 3" /t REG_SZ /v "" /d "Open with Sublime Text 3" /f
@reg add "HKEY_CLASSES_ROOT\*\shell\Open with Sublime Text 3" /t REG_EXPAND_SZ /v "Icon" /d "%st3Path%,0" /f
@reg add "HKEY_CLASSES_ROOT\*\shell\Open with Sublime Text 3\command" /t REG_SZ /v "" /d "%st3Path% \"%%1\"" /f
rem add it for folders
@reg add "HKEY_CLASSES_ROOT\Folder\shell\Open with Sublime Text 3" /t REG_SZ /v "" /d "Open with Sublime Text 3" /f
@psebborn
psebborn / countCSSRules.js
Last active April 25, 2023 11:43
Count the number of rules and selectors for CSS files on the page. Flags up the >4096 threshold that confuses IE
function countCSSRules() {
var results = '',
log = '';
if (!document.styleSheets) {
return;
}
for (var i = 0; i < document.styleSheets.length; i++) {
countSheet(document.styleSheets[i]);
}
function countSheet(sheet) {