Skip to content

Instantly share code, notes, and snippets.

View nhducit's full-sized avatar
🚀

nhducit nhducit

🚀
View GitHub Profile
@paulirish
paulirish / what-forces-layout.md
Last active March 28, 2024 09:16
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

FWIW: I (@Rondy) am not the author of the content presented here, which is an outline from Edmond Lau's book. I've just copy-pasted it from somewhere and saved as a personal gist, before it got popular on newsnews.ycombinator.com. I don't remember where exactly the original source is from and neither could find the author's name, so I cannot give him/her the proper credits.


Effective Engineer - Notes

@jboner
jboner / latency.txt
Last active March 28, 2024 03:39
Latency Numbers Every Programmer Should Know
Latency Comparison Numbers (~2012)
----------------------------------
L1 cache reference 0.5 ns
Branch mispredict 5 ns
L2 cache reference 7 ns 14x L1 cache
Mutex lock/unlock 25 ns
Main memory reference 100 ns 20x L2 cache, 200x L1 cache
Compress 1K bytes with Zippy 3,000 ns 3 us
Send 1K bytes over 1 Gbps network 10,000 ns 10 us
Read 4K randomly from SSD* 150,000 ns 150 us ~1GB/sec SSD
@kevin-smets
kevin-smets / iterm2-solarized.md
Last active March 26, 2024 23:40
iTerm2 + Oh My Zsh + Solarized color scheme + Source Code Pro Powerline + Font Awesome + [Powerlevel10k] - (macOS)

Default

Default

Powerlevel10k

Powerlevel10k

@vasanthk
vasanthk / System Design.md
Last active March 26, 2024 07:53
System Design Cheatsheet

System Design Cheatsheet

Picking the right architecture = Picking the right battles + Managing trade-offs

Basic Steps

  1. Clarify and agree on the scope of the system
  • User cases (description of sequences of events that, taken together, lead to a system doing something useful)
    • Who is going to use it?
    • How are they going to use it?
@egmontkob
egmontkob / Hyperlinks_in_Terminal_Emulators.md
Last active March 26, 2024 01:51
Hyperlinks in Terminal Emulators
@staltz
staltz / introrx.md
Last active March 26, 2024 00:52
The introduction to Reactive Programming you've been missing
@gaearon
gaearon / slim-redux.js
Last active March 25, 2024 19:12
Redux without the sanity checks in a single file. Don't use this, use normal Redux. :-)
function mapValues(obj, fn) {
return Object.keys(obj).reduce((result, key) => {
result[key] = fn(obj[key], key);
return result;
}, {});
}
function pick(obj, fn) {
return Object.keys(obj).reduce((result, key) => {
if (fn(obj[key])) {
@paulirish
paulirish / rAF.js
Last active March 22, 2024 00:00
requestAnimationFrame polyfill
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
// MIT license
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
@sebmarkbage
sebmarkbage / Infrastructure.js
Last active March 14, 2024 17:40
SynchronousAsync.js
let cache = new Map();
let pending = new Map();
function fetchTextSync(url) {
if (cache.has(url)) {
return cache.get(url);
}
if (pending.has(url)) {
throw pending.get(url);
}