Anurag Hazra anuraghazra

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

Markdown License badges

Collection of License badges for your Project's README file.
This list includes the most common open source and open data licenses.
Easily copy and paste the code under the badges into your Markdown files.

Notes

The badges do not fully replace the license informations for your projects, they are only emblems for the README, that the user can see the License at first glance.

Translations: (No guarantee that the translations are up-to-date)

🇫🇷 Cette liste en français

Regular Event Loop

This shows the execution order given JavaScript's Call Stack, Event Loop, and any asynchronous APIs provided in the JS execution environment (in this example; Web APIs in a Browser environment)

Given the code

Reference for How to Write an Open Source JavaScript Library

The purpose of this document is to serve as a reference for:

How to Write an Open Source JavaScript Library course by Kent C. Dodds

Watch the series at egghead.io, if you haven't.

(All feedback/discussion should take place in the relevant issue.)

TypeScript Constraint Types Proposal

There's multiple requests for the ability to control a type at a much more fine grained level:

#12424: Mapped conditional types
#12885: Typing function overloads
#12880: Bad inference for lambda closures
Promises wrongfully accept thenables as their generic parameter (thenables can never be the argument to a then callback).

`React.cloneElement` vs. `Render Prop` pattern benchmarking

Run:

babel clone-element-vs-render-prop.jsx | node

Result:

The Rules of React

All libraries have subtle rules that you have to follow for them to work well. Often these are implied and undocumented rules that you have to learn as you go. This is an attempt to document the rules of React renders. Ideally a type system could enforce it.

What Functions Are "Pure"?

A number of methods in React are assumed to be "pure".

On classes that's the constructor, getDerivedStateFromProps, shouldComponentUpdate and render.

	/**
	* LR-parsing.
	*
	* Canonical collection of LR(0) items.
	*
	* by Dmitry Soshnikov <[email protected]>
	* MIT Style License (C) 2015
	*
	* See this "rock-painting" to get the picture of what we're building here:
	*

	var object = {
	value:5,
	increment(){ return ++this.value; }
	};

	/*
	But of course, even though that value is central to what the object is,
	it's not really a _primitive_ value in the sense that we can directly coerce it into a number or string:
	*/

	@font-face {
	font-family: GT Walsheim Pro;
	src: local("GT Walsheim Pro Regular"),local("GTWalsheimProRegular"),url(GTWalsheimProRegular.woff2) format("woff2"),url(GTWalsheimProRegular.woff) format("woff"),url(GTWalsheimProRegular.ttf) format("truetype");
	font-weight: 400;
	font-style: normal
	}

	@font-face {
	font-family: GT Walsheim Pro;
	src: local("GT Walsheim Pro Bold"),local("GTWalsheimProBold"),url(GTWalsheimProBold.woff2) format("woff2"),url(GTWalsheimProBold.woff) format("woff"),url(GTWalsheimProBold.ttf) format("truetype");