lxynox

Dependency

Peer Dependency

What we need is a way of expressing these "dependencies" between plugins and their host package. Some way of saying, "I only work when plugged in to version 1.2.x of my host package, so if you install me, be sure that it's alongside a compatible host." We call this relationship a peer dependency.

Problem	Solution

lxynox

References

• https://medium.com/@trekinbami/using-environment-variables-in-react-6b0a99d83cf5
• https://12factor.net/config
• https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables

Build time

webpack define plugin

lxynox

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) {

lxynox

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

lxynox

{
  "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",

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))

lxynox

//////////// 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);
    }

lxynox

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,

lxynox

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)

lxynox

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'],
}