Skip to content

Instantly share code, notes, and snippets.

View AlexVipond's full-sized avatar

Alex Vipond AlexVipond

View GitHub Profile
@smhmd
smhmd / tailwind-config.d.ts
Last active June 14, 2021 20:16
TailwindCSS Types
/**
* Original source: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/tailwindcss/tailwind-config.d.ts
* The types from `@types/tailwindcss` only cover the default configuration.
*/
export type Variant =
| 'responsive'
| 'first'
| 'last'
| 'odd'
@bendc
bendc / easing.css
Created September 23, 2016 04:12
Easing CSS variables
:root {
--ease-in-quad: cubic-bezier(.55, .085, .68, .53);
--ease-in-cubic: cubic-bezier(.550, .055, .675, .19);
--ease-in-quart: cubic-bezier(.895, .03, .685, .22);
--ease-in-quint: cubic-bezier(.755, .05, .855, .06);
--ease-in-expo: cubic-bezier(.95, .05, .795, .035);
--ease-in-circ: cubic-bezier(.6, .04, .98, .335);
--ease-out-quad: cubic-bezier(.25, .46, .45, .94);
--ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
@paulirish
paulirish / what-forces-layout.md
Last active July 22, 2024 06:32
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