Whien_Liou madeinfree

Moved to Shopify/graphql-design-tutorial

Construction or operator	Associativity
prefix operator	–
`. .( .[ .{`	–
`[ ]` (array index)	–
`#···`	–
applications, `assert`, `lazy`	left
`- -.` (prefix)	–
`**··· lsl lsr asr`	right
`*··· /··· %··· mod land lor lxor`	left

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?

What is React Fiber? And how can I try it out today?

what?

React Fiber is an ongoing reimplementation of React's core algorithm. It is the culmination of over two years of research by the React team.

why?

A top-level App component returns <Button /> from its render() method.

What is the relationship between <Button /> and this in that Button’s render()?
Does rendering <Button><Icon /></Button> guarantee that an Icon mounts?
Can the App change anything in the Button output? What and how?

Let's Encrypt

Examples of getting certificates from Let's Encrypt working on Apache, NGINX and Node.js servers.

Obtain certificates

I chose to use the manual method, you have to make a file available to verify you own the domain. Follow the commands from running

git clone https://github.com/letsencrypt/letsencrypt
cd letsencrypt

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

	/* file: Recompose.re */
	/* The very definition of a HOC, it's a function that gets a react component and returns another react component */
	type hoc = ReasonReact.reactClass => ReasonReact.reactClass;

	module type CreateWithStateParams = {
	/* This is the secret sauce ingredient, with it the users can pass whatever state they want */
	type state;
	let defaultValue: state;
	};

	('use strict');

	import React from 'react';
	import glamorous from 'glamorous';

	const colors = {
	success: '#29A88E',
	danger: '#C65F4A',
	primary: '#6DCFD3',
	info: '#FFD035',

	axios({
	url: 'http://localhost:5000/static/example.pdf',
	method: 'GET',
	responseType: 'blob', // important
	}).then((response) => {
	const url = window.URL.createObjectURL(new Blob([response.data]));
	const link = document.createElement('a');
	link.href = url;
	link.setAttribute('download', 'file.pdf');
	document.body.appendChild(link);