⦇⦀∙ˇ∎ˇ∙⦀⦈ lxynox

Features

Add to home screen
Install banner
Offline support
App shell
Push notifications?
Background sync?
Server side rendering (SEO + improve First Meaningful Paint(FMP))

In fact, React.cloneElement is not strictly associated with this.props.children. It's useful whenever you need to clone react elements(PropTypes.elements) to add/override props(such as attaching event handlers or assigning key/ref attributes) as react elements are immutable.

React.cloneElement( element, [props], [...children] ) is almost equivalent to: <element.type {...element.props} {...props}>{children}</element.type>

However, children prop in react, is specially used for containment(aka composition) of other components, e.g,

Features

Add to home screen
Install banner
Offline support
App shell
Push notifications?
Background sync?
Server side rendering (SEO + improve First Meaningful Paint(FMP))

What ('s the problem)

How can we improve image loading experience while waiting the browser download the image?

Doing nothing
Display some solid color / placeholder ✅
Progressive image loading

Why

axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      // The request was made and the server responded with a status code
      // that falls out of the range of 2xx
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
 } else if (error.request) {

References

Build time

webpack define plugin

	const COLORS = {
	blue: ['#1E88E5', '#90CAF9'],
	brown: ['#6D4C41', '#D7CCC8'],
	gray: ['#212121', '#BDBDBD'],
	green: ['#388E3C', '#A5D6A7'],
	red: ['#E53935', '#EF9A9A'],
	orange: ['#F4511E', '#FFAB91'],
	purple: ['#8E24AA', '#E1BEE7'],
	yellow: ['#FFD600', '#FFF59D'],
	}

	var el = document.createElement('script');
	el.src = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.core.min.js";
	el.type = "text/javascript";
	document.head.appendChild(el)

	//////////// https://twitter.com/sophiebits/status/1058448900460138497
	// alternative use `console.group`, `console.groupEnd`, pen: https://codepen.io/zzzzBov/pen/yQLyyG/

	function log(format, ...args) {
	let indent = ' '.repeat(new Error().stack.match(/\n/g).length - 2);
	if (typeof format === 'string') {
	console.log(indent + format, ...args);
	} else {
	console.log(indent, format, ...args);
	}

	{
	"window:devtools": "command+alt+i",
	"window:reload": "command+r",
	"window:reloadFull": "command+shift+r",
	"window:preferences": "command+,",
	"zoom:reset": "command+0",
	"zoom:in": "command+plus",
	"zoom:out": "command+-",
	"window:new": "command+n",
	"window:minimize": "command+m",