Skip to content

Instantly share code, notes, and snippets.

View gladchinda's full-sized avatar

Glad Chinda gladchinda

View GitHub Profile
@paulirish
paulirish / what-forces-layout.md
Last active May 6, 2024 07:54
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
@nicolasdao
nicolasdao / open_source_licenses.md
Last active May 2, 2024 18:16
What you need to know to choose an open source license.
@gre
gre / easing.js
Last active April 30, 2024 04:58
Simple Easing Functions in Javascript - see https://github.com/gre/bezier-easing
/*
* This work is free. You can redistribute it and/or modify it under the
* terms of the Do What The Fuck You Want To Public License, Version 2,
* as published by Sam Hocevar. See the COPYING file for more details.
*/
/*
* Easing Functions - inspired from http://gizma.com/easing/
* only considering the t value for the range [0, 1] => [0, 1]
*/
EasingFunctions = {
@diachedelic
diachedelic / deep-link-from-browser.js
Last active April 28, 2024 12:51
Deep link to a native app from a browser, with a fallback
@LewisJEllis
LewisJEllis / getRelativeTimeString.ts
Last active March 6, 2024 13:31
Simplified getRelativeTimeString
// from https://twitter.com/Steve8708/status/1504131981444980739
// simplified to a function body of 8 tidy lines
// no loop needed, no 2d array of 3-tuples needed
// just 2 arrays, a findIndex call, and some indexing :)
export function getRelativeTimeString(
date: Date | number,
lang = "en"
): string {
const timeMs = typeof date === "number" ? date : date.getTime();
@Jessidhia
Jessidhia / react-scheduler.md
Last active March 1, 2024 13:51
Implementation notes on react's scheduling model as of (shortly before) 16.8.0

Implementation notes on react's scheduling model as of (shortly before) 16.8.0

While the public API intended for users to use is the scheduler package, the reconciler currently does not use scheduler's priority classes internally.

ReactFiberScheduler has its own internal "mini-scheduler" that uses the scheduler package indirectly for its deadline-capable scheduleCallback.

This is kind of a documentation of implementation details that I suppose will be gone by the end of the year, but what can you do.

@bahmutov
bahmutov / Docker shell commands.sh
Last active February 9, 2024 07:55
A personal cheat sheet for running local Node project in a Docker container
# See list of docker virtual machines on the local box
$ docker-machine ls
NAME ACTIVE URL STATE URL SWARM DOCKER ERRORS
default * virtualbox Running tcp://192.168.99.100:2376 v1.9.1
# Note the host URL 192.168.99.100 - it will be used later!
# Build an image from current folder under given image name
$ docker build -t gleb/demo-app .
@rokotyan
rokotyan / .block
Last active December 12, 2023 13:07
Export SVG D3 visualization to PNG or JPEG
license: mit
@sspencer
sspencer / transparent-gif.js
Created October 31, 2010 22:27
Serve a transparent GIF from NodeJS
// Two ways to serve transparent GIF
var buf = new Buffer([
0x47, 0x49, 0x46, 0x38, 0x39, 0x61, 0x01, 0x00, 0x01, 0x00,
0x80, 0x00, 0x00, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x2c,
0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x01, 0x00, 0x00, 0x02,
0x02, 0x44, 0x01, 0x00, 0x3b]);
res.send(buf, { 'Content-Type': 'image/gif' }, 200);

finally-polyfill

A tiny ~150-byte polyfill for Promise.prototype.finally.

Useful for browsers that support Promise but not the .finally() method.

Usage

npm install finally-polyfill