EvgeniyaPronina

//Как оказалось IOS автоматом добавляет эту штуку на событие :focus, если у select или input свойство font-size меньше 16px. Лаконичное решение из мета-тега:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

/*
 * no input shadow on iOs devices
 */
input[type=text],
input[type=tel],
input[type=email],

EvgeniyaPronina

<Formik>
 {(formik) => (
    <form onSubmit={formik.handleSubmit}>
    <Formik>
       {(subformik) => (
          <form >
              <input name="username" onChange={subformik.handleChange} value={subformik.values.username} />
               {/** i also have access to formik here too */}
              <button onClick={() => subformik.submitForm()}>Submit Inner</button>

EvgeniyaPronina

function compare(a, b, increase = true) {
  if (a < b) {
    return increase ? -1 : 1;
  }
  if (a > b) {
    return increase ? 1 : -1;
  }
  return 0;
}

EvgeniyaPronina

// add 
<meta name="pinterest" content="nopin">

EvgeniyaPronina

export function formatTimeDiff(dateTime) {
  const date = new Date(dateTime);
  const currentDate = new Date();
  let diff = (+currentDate - +date) / 1000;

  const days = Math.floor(diff / (3600 * 24));
  diff -= days * 86400;

  const hours = Math.floor(diff / 3600) % 24;
  diff -= hours * 3600;

EvgeniyaPronina

// Wrap ProductList, ProductTable to get the higher order components
const ProductListWithData = withProductData(ProductList);
const ProductTableWithData = withProductData(ProductTable);


// Use the higher order components just like normal components.

<div>
  <ProductListWithData />
  <ProductTableWithData />

EvgeniyaPronina

import React, { Component } from "react";

class ProductData extends Component {
  state = {
    products: []
  };

  componentDidMount() {
    getProducts().then(products => {
      this.setState({

EvgeniyaPronina

Examine CSS for an element that appears via JavaScript - Hit F8 (same as “Pause script execution” button) while the element is visible

Search for an element using CSS selectors - after cmd+F write selector instead of text

Edit the box model directly - just double click on “Computed” box model 

Increment/decrement values in the Styles panel

Up/Down arrow keys increment/decrement by 1
ALT+Up/Down arrow keys increment/decrement by 0.1

EvgeniyaPronina

transform: translateZ(0);
// or
will-change: transform; // (или что там меняется, может быть opacity, например).

EvgeniyaPronina

Examine CSS for an element that appears via JavaScript - Hit F8 (same as “Pause script execution” button) while the element is visible

Search for an element using CSS selectors - after cmd+F write selector instead of text

Edit the box model directly - just double click on “Computed” box model 

Increment/decrement values in the Styles panel

Up/Down arrow keys increment/decrement by 1
ALT+Up/Down arrow keys increment/decrement by 0.1