Skip to content

Instantly share code, notes, and snippets.

View NE-SmallTown's full-sized avatar
💭
yea, tired.

Heaven NE-SmallTown

💭
yea, tired.
109 followers · 285 following
  • feel free to leave a message.
  • Nowhere, Nowhere.
View GitHub Profile
@NE-SmallTown
NE-SmallTown / firefoxBackgroundBug.html
Created January 22, 2018 06:13 — forked from cburgmer/firefoxBackgroundBug.html
Workaround for bug in Firefox when rendering background images in HTML to a canvas
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test case for bug in Firefox where a background image in a SVG isn't rendered to the canvas unless a workaround is applied</title>
</head>
<body>
<canvas id="canvas" style="border:1px solid black;" width="200" height="200"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas"),
@NE-SmallTown
NE-SmallTown / user-timing-rum.js
Created January 21, 2018 08:54 — forked from pmeenan/user-timing-rum.js
Support routine for adding W3C user timing events to a site. Includes some basic polyfill support for browsers that don't support user timing or navigation timing (though the start time for non-navigation timing support could be improved with IE < 9 to use IE's custom start event).
// Support routines for automatically reporting user timing for common analytics platforms
// Currently supports Google Analytics, Boomerang and SOASTA mPulse
// In the case of boomerang, you will need to map the event names you want reported
// to timer names (for mPulse these need to be custom0, custom1, etc) using a global variable:
// rumMapping = {'aft': 'custom0'};
(function() {
var wtt = function(n, t, b) {
t = Math.round(t);
if (t >= 0 && t < 3600000) {
// Google Analytics
@NE-SmallTown
NE-SmallTown / promise-monad-proof.js
Created January 8, 2018 16:14 — forked from briancavalier/promise-monad-proof.js
A proof that Promises/A is a Monad
//-------------------------------------------------------------
//
// Hypothesis:
//
// Promises/A is a Monad
//
// To be a Monad, it must provide at least:
// - A unit (aka return or mreturn) operation that creates a corresponding
// monadic value from a non-monadic value.
// - A bind operation that applies a function to a monadic value
@NE-SmallTown
NE-SmallTown / Article.md
Created January 7, 2018 12:58 — forked from Warry/Article.md
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:

@NE-SmallTown
NE-SmallTown / jsx_explicit_do_generator_cases.md
Created November 19, 2017 04:47 — forked from clemmy/jsx_explicit_gexp_cases.md 
*{{ a: 1 }} // { a: 1 }

*{
  ({ a: 1 })
} // { a: 1 }
@NE-SmallTown
NE-SmallTown / what-forces-layout.md
Created September 26, 2017 03:25 — forked from paulirish/what-forces-layout.md
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.

Element

Box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
  • elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
  • elem.getClientRects(), elem.getBoundingClientRect()
@NE-SmallTown
NE-SmallTown / coordinating-async-react.md
Created September 19, 2017 01:23 — forked from acdlite/coordinating-async-react.md
Demo: Coordinating async React with non-React views

Demo: Coordinating async React with non-React views

tl;dr I built a demo illustrating what it might look like to add async rendering to Facebook's commenting interface, while ensuring it appears on the screen simultaneous to the server-rendered story.

A key benefit of async rendering is that large updates don't block the main thread; instead, the work is spread out and performed during idle periods using cooperative scheduling.

But once you make something async, you introduce the possibility that things may appear on the screen at separate times. Especially when you're dealing with multiple UI frameworks, as is often the case at Facebook.

How do we solve this with React?

@NE-SmallTown
NE-SmallTown / flexible-ext.js
Created August 4, 2017 08:57 — forked from MeCKodo/flexible-ext.js
flexible and ant-design-mobile mix
;(function(win, lib) {
var doc = win.document;
var docEl = doc.documentElement;
var metaEl = doc.querySelector('meta[name="viewport"]');
var tid;
var flexible = lib.flexible || (lib.flexible = {});
var ua = navigator.userAgent;
var matches = ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);
var UCversion = ua.match(/U3\/((\d+|\.){5,})/i);