uladzislau-stuk

Use cases

Styled components Material UI styled components Material UI css Import styles inside component

Motivation

• Keeps track of which components are rendered on a page and injects their styles and nothing else
• Generate unique class names for components
• Dynamic styling (props)

uladzislau-stuk

Async actions

Usually, for any API request you'll want to dispatch at least three different kinds of actions, An action informing the reducers that the:

• request began
• request finished successfully
• request failed

Note You'll need to design the shape of your application's state before rushing into the implementation

by using this specific middleware, an action creator can return a function instead of an action object. This way, the action creator becomes a thunk.

uladzislau-stuk

Responsive Web Design Principles

The max-width property of 100% scales the image to fit the width of its container, but the image won't stretch wider than its original width.

The height property of auto keeps the original aspect ratio of the image.

Grid

Container properties

grid-template-columns

uladzislau-stuk

Styled-components, CSS

&[data-primary] { 
  background: #f00; 
  color: #fff;
}
&:not([data-primary]) { 
  background: #000; 
  color: #000;
}

uladzislau-stuk

setState func syntax

• state is a reference to the component state at the time the change is being applied
• use if the next state depends on the current state

this.setState((state, props) => {
  return {counter: state.counter + props.step};
})

Great articles

Comprehensive react-redux-links

uladzislau-stuk

Tricks

Get element attribute

// by xpath
const [elementHandle] = await page.$x('.//a/@href');
const propertyHandle = await elementHandle.getProperty('value');
const propertyValue = await propertyHandle.jsonValue();

// by .jsonValue()
const [elementHandle] = await page.$x('.//a');

uladzislau-stuk

1. For components wrapped in HOCs we usually recommend exporting the unwrapped component and mocking any props that the HOC is providing. If you want to test the HOC itself you are allowed to query props on a child component, which should be enough if you're using composition.

What and How to Test with Jest and Enzyme. Full Instruction on React Components Testing

1. Defining the correct order of components’ testing based on project structure Order for test coverage: Independent -> Auxiliary -> Simple -> Complex (From simple to complex)
2. Define what should be omitted in test coverage
3. Snapshot and component logic testing

Main instructions for component testing

1. One component - one snapshot (there are exceptions when you need to test the behavior of a component in two states; for example, in the state of the component before opening the pop-up and after opening. However, even such variant can always be replaced by this one: the first test stores default state of the component without popup in sn

uladzislau-stuk

Make tree from Array

let categories = [
  {id: 'phone', parent: null},
  {id: 'samsung', parent: 'phone'},
  {id: 'apple', parent: 'phone'},
  {id: 'galaxy 5', parent: 'samsung'},
  {id: 'galaxy 6', parent: 'samsung'},
  {id: 'iphone 7', parent: 'apple'},
 {id: 'iphone 8', parent: 'apple'},

uladzislau-stuk

Преимущества Чистые прокси

Воркараунд Закаупка прокси у владельцев ботнетов Ферма 4g модемов IPv6 /48 + AS /24 + AS РосНИИРОС

Капча

uladzislau-stuk

Heroku is a polyglot platform – it lets you build, run and scale applications in a similar manner across all the languages – utilizing the dependencies and Procfile.

Running applications on dynos

Heroku executes applications by running a command you specified in the Procfile, on a dyno that’s been preloaded with your prepared slug

Generally, if you deploy an application for the first time, Heroku will run 1 web dyno automatically. In other words, it will boot a dyno, load it with your slug, and execute the command you’ve associated with the web process type in your Procfile

You have control over how many dynos are running at any given time. Given the Procfile example earlier, you can start 5 dynos, 3 for the web and 2 for the queue process types, as follows: