Skip to content

Instantly share code, notes, and snippets.

Avatar

Mateusz Burzyński Andarist

View GitHub Profile
View useReducerWithEmitEffect.js
const {useCallback, useEffect, useReducer, useRef} = require('react');
let effectCapture = null;
exports.useReducerWithEmitEffect = function(reducer, initialArg, init) {
let updateCounter = useRef(0);
let wrappedReducer = useCallback(function(oldWrappedState, action) {
effectCapture = [];
try {
let newState = reducer(oldWrappedState.state, action.action);
View safari-whyyyyy.md

Fix absolutely positioned divs when people turn their phones sideways

The problem

In Safari, if you have a layout container that's absolutely positioned to take up, at a minimum, its whole container (which isn't unheard of in "appey" internet home page thingies) using CSS like this:

.absolutely
View 0 basics.md

A series of posts on css-in-js

0. styles as objects

First, an exercise. Can we represent all of css with plain data? Let's try.

let redText = { color: 'red' };
@kdzwinel
kdzwinel / raf_throttler.js
Created Jul 7, 2017
Waiting for IntersectionObserver to get a better support…
View raf_throttler.js
function rafThrottler(callback) {
let rafId = null;
const flush = () => {
callback();
rafId = null;
};
return () => {
if (rafId) {
return;
@paulirish
paulirish / what-forces-layout.md
Last active Jan 20, 2021
What forces layout/reflow. The comprehensive list.
View what-forces-layout.md

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
You can’t perform that action at this time.