Skip to content

Instantly share code, notes, and snippets.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
html, body {
height: 100%;
}
@plugn
plugn / index.html
Last active October 2, 2019 14:49
_.flow() example // source https://jsbin.com/yoheci
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="http://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
@plugn
plugn / zoom2bbox.js
Last active March 30, 2017 16:07
calcBbox(zoom) (with prefined bboxes)
function realMetrics () {
var bbox3 = {
lat: 64.68632,
lng: 97.74531,
nw_lat: 81.413933,
nw_lng: -25.3125,
se_lat: 22.43134,
se_lng: 220.429688
};
@plugn
plugn / index.html
Last active March 10, 2017 13:10
float grid 3 col layout // source https://jsbin.com/veriva
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.clearfix::after {
display: table;
content: "";
@cmckni3
cmckni3 / get-event-listeners.js
Last active November 28, 2024 15:53
Get all event listeners on page
window.getAllEventListeners = () => {
return Array.from(document.querySelectorAll('*')).map(element => {
const listeners = getEventListeners(element);
return {
element: element,
listeners: Object.keys(listeners).map(key => {
return {
event: key,
@paulirish
paulirish / what-forces-layout.md
Last active May 16, 2025 17:21
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
@plugn
plugn / dumpVFS.js
Last active April 8, 2016 13:20
dump vinyl stream
var through = require('through2').obj;
/**
* tools
*/
function dumpVFS (stream) {
return stream.pipe(through(function(file, encoding, done) {
console.log(' * ', file.path); //, file.inspect(), file.contents.toString());
done(null, file);
}));
@tomhodgins
tomhodgins / sketch.html
Last active January 9, 2024 15:16
Draw <svg> inside the browser! On mousedown and touchstart it begins drawing a line, drops nodes as you mousemove or touchmove, and then finishes the line where you mouseup or touchend. It also has support for line width and color, exporting the current drawing by email as well as downloading the drawing as an svg file.You can also import SVGs. h…
<!DOCTYPE html>
<html manifest=sketch.manifest>
<head>
<meta charset=utf-8>
<title>Sketch</title>
<meta name=apple-mobile-web-app-capable content=yes>
<meta name=apple-mobile-web-app-status-bar-style content=black>
<meta name=viewport content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, minimal-ui">
<link href="http://staticresource.com/formal.css" rel=stylesheet type=text/css>
<script>eval(unescape(escape('♶♡♲☠♩☽♤♯♣♵♭♥♮♴☮♣♲♥♡♴♥♅♬♥♭♥♮♴☨☧♣♡♮♶♡♳☧☩☬♣☽♩☮♧♥♴♃♯♮♴♥♸♴☨☧☲♤☧☩☬♦☽♤♯♣♵♭♥♮♴☮♣♲♥♡♴♥♅♬♥♭♥♮♴☨☧♬♩♮♫☧☩☬♭☽♤♯♣♵♭♥♮♴☮♣♲♥♡♴♥♅♬♥♭♥♮♴☨☧♬♩♮♫☧☩☻♩☮♷♩♤♴♨☽☲☰☰☻♩☮♨♥♩♧♨♴☽☲☰☰☻♣☮♦♩♬♬♓♴♹♬♥☽☧♬♩♧♨♴♧♯♬♤♥♮♲♯♤♹♥♬♬♯♷☧☻♣☮♢♥♧♩♮♐♡♴♨☨☩☻♣☮♭♯♶♥♔♯☨☱☰☬☰☩☻♣☮♬♩♮♥♔♯☨☱☹☰☬☰☩☻♣☮♱♵♡♤♲♡♴♩♣♃♵♲♶♥♔♯☨☲☰☰☬☰☬☲☰☰☬☱☰☩☻♣☮♬♩♮♥♔♯☨☲☰☰☬☱☹☰☩☻♣☮♱♵♡♤♲♡♴♩♣♃♵♲♶♥♔♯☨☲☰☰☬☲☰☰☬☱☹☰☬☲☰☰☩☻♣☮♬♩♮♥♔♯☨☱☰☬☲☰☰☩☻♣☮♱♵♡♤♲♡♴♩♣♃♵♲♶♥♔♯☨☰☬☲☰☰☬☰☬☱☹☰☩☻♣☮♬♩♮♥♔♯☨☰☬☱☰☩☻♣☮♱♵♡♤♲♡♴♩♣♃♵♲♶♥♔♯☨☰☬☰☬☱☰☬☰☩☻♣☮♣♬♯♳♥♐♡♴♨☨☩☻♣☮♦♩♬♬☨☩☻♣☮♳♴♲♯♫♥♓♴♹♬♥☽☧♲♥♤☧☻♣☮♬♩♮♥♗♩♤♴♨☽☳☰☻♣☮♬♩♮♥♃♡♰☽☧♲♯♵♮♤☧☻♣☮♢♥♧♩♮♐♡♴♨☨☩☻♣☮♭♯♶♥♔♯☨☴☵☬☱☳☰☩☻♣☮♢♥♺♩♥♲♃♵♲♶♥♔♯☨☴☵☬☱☳☰☬☷☰☬☲☰☰☬☱☰☵☬☱☳☰☩☻♣☮♢♥♺♩♥♲♃♵♲♶♥♔♯☨☱☰☵☬☱☳☰☬☱☴☰☬☵☰☬
@ericandrewlewis
ericandrewlewis / index.md
Last active June 6, 2024 01:43
C++ Pointer Tutorial

C++ Pointer Tutorial

Because pointers can be ugh

"Regular" variables (not pointers)

To understand a pointer, let's review "regular" variables first. If you're familiar with a programming language without pointers like JavaScript, this is what you think when you hear "variable".

When declaring a variable by identifier (or name), the variable is synonymous with its value.