Skip to content

Instantly share code, notes, and snippets.

int[][] result;
float t, c;
float ease(float p) {
return 3*p*p - 2*p*p*p;
}
float ease(float p, float g) {
if (p < 0.5)
return 0.5 * pow(2*p, g);
/**
* Measures a canvas and splits lines of text so that they fit within the width thereof.
* Requires some text styling to be applied to the canvasContext already, and will not function as expected if that is changed between calculation and drawing of returned lines
*
* @param canvas - <canvas>
* @param text - String the text to measure and break up
* @param padding - the horizontal padding to take into account (assumes left/right padding are equivalent)
*
* @returns [Array] - an array containing lines of text that, when rendered on the canvas will not exceed the canvas' width
*/
@paulirish
paulirish / what-forces-layout.md
Last active April 30, 2024 17:56
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
@craigmaslowski
craigmaslowski / detect-card-type.js
Last active July 10, 2019 18:03
Credit Card Type Detection
// card type prefixes sourced from: https://en.wikipedia.org/wiki/Bank_card_number#Issuer_identification_number_.28IIN.29
var cardTypes = {
'American Express': [
[34],
[37]
],
'Diners Club Intl': [
[300, 305],
[309],
[36],
@wpm
wpm / poll.js
Last active November 14, 2019 09:59
Javascript Polling with Promises
var Promise = require('bluebird');
/**
* Periodically poll a signal function until either it returns true or a timeout is reached.
*
* @param signal function that returns true when the polled operation is complete
* @param interval time interval between polls in milliseconds
* @param timeout period of time before giving up on polling
* @returns true if the signal function returned true, false if the operation timed out
*/
@kitao
kitao / autoreload.pyde
Last active November 11, 2021 20:33
Auto-reload script for Python Mode in Processing
import time
import datetime
import stat
RELOAD_INTERVAL_FRAME = 10
STARTUP_MODULE_NAME = 'main'
def setup():
pushStyle()
start_sketch()
@Jakobud
Jakobud / bootstrap-ms.scss
Last active June 15, 2022 12:42 — forked from andyl/bootstrap_ms.css.scss
Adds in the missing 480px-797px breakpoint range to Bootstrap 3 for SASS
// Bootstrap Mid-Small - col-ms-* - the missing grid set for Bootstrap3.
//
// This is a hack to fill the gap between 480 and 767 pixels - a missing range
// in the bootstrap responsive grid structure. Use these classes to style pages
// on cellphones when they transition from portrait to landscape.
//
// Contains:
// Columns, Offsets, Pushes, Pulls for the Mid-Small layout
// Visibility classes for the Mid-Small layout
// Redefined visibility classes for the Extra Small layout
@jonschlinkert
jonschlinkert / 1. handlebars-subexpression.html
Last active February 3, 2018 05:51
Very powerful combination! Four helpers are used here: `each`, `expand`, `markdown` and `inline`.
{{#each (expand 'content/*.md')}}
{{#markdown}}
{{inline .}}
{{/markdown}}
{{/each}}
@Warry
Warry / Article.md
Created December 11, 2012 00:11
How to make faster scroll effects?

How to make faster scroll effects?

  • Avoid too many reflows (the browser to recalculate everything)
  • Use advanced CSS3 for graphic card rendering
  • Precalculate sizes and positions

Beware of reflows

The reflow appens as many times as there are frames per seconds. It recalculate all positions that change in order to diplay them. Basically, when you scroll you execute a function where you move things between two reflows. But there are functions that triggers reflows such as jQuery offset, scroll... So there are two things to take care about when you dynamically change objects in javascript to avoid too many reflows:

@Goles
Goles / CountryCodes.json
Created July 29, 2012 05:37
Country and Dial or Phone codes in JSON format
[{"name":"Israel","dial_code":"+972","code":"IL"},{"name":"Afghanistan","dial_code":"+93","code":"AF"},{"name":"Albania","dial_code":"+355","code":"AL"},{"name":"Algeria","dial_code":"+213","code":"DZ"},{"name":"AmericanSamoa","dial_code":"+1 684","code":"AS"},{"name":"Andorra","dial_code":"+376","code":"AD"},{"name":"Angola","dial_code":"+244","code":"AO"},{"name":"Anguilla","dial_code":"+1 264","code":"AI"},{"name":"Antigua and Barbuda","dial_code":"+1268","code":"AG"},{"name":"Argentina","dial_code":"+54","code":"AR"},{"name":"Armenia","dial_code":"+374","code":"AM"},{"name":"Aruba","dial_code":"+297","code":"AW"},{"name":"Australia","dial_code":"+61","code":"AU"},{"name":"Austria","dial_code":"+43","code":"AT"},{"name":"Azerbaijan","dial_code":"+994","code":"AZ"},{"name":"Bahamas","dial_code":"+1 242","code":"BS"},{"name":"Bahrain","dial_code":"+973","code":"BH"},{"name":"Bangladesh","dial_code":"+880","code":"BD"},{"name":"Barbados","dial_code":"+1 246","code":"BB"},{"name":"Belarus","dial_code":"+375","