>Digital-flame

Is 2 strings are anagrams ? Decision through hash. Complexity O(n).

const s = 'abc';
const s1 = 'cba';

const s2 = 'ac';
const s3 = 'bb';

const hash = (str) => {
let res = 0;  
for (i = 0; i < str.length; i++) {   
  numValue  = str.charCodeAt(i);    
  res = res + (numValue * numValue - numValue - 97) * 35; // to be continued...  
  }   
  return res;  
}
  

document.body.innerHTML = 
  `<div>
 
  <p>${s} = ${s1}   ${(hash(s) === hash(s1))}</p>
  <p>${s2} = ${s3}  ${(hash(s2) === hash(s3))}</p>
  
  </div> `

as i understood esLint + Prettier will clean and beautify your code, but not all – some thigs you will fix manually.

install eslint, better locally as below (source)

npm install eslint --save-dev

if no package.json create it through the terminal wizard with command

npm init

create a esLint config file through the terminal wizard with command

npx eslint --init

let’s config .eslintrc.js like this

Continue reading →

simplification of work with actions, reducers, etc…

Source

import { createSlice, createAction } from '@reduxjs/toolkit'
import { createStore, combineReducers } from 'redux'

const incrementBy = createAction('incrementBy')
const decrementBy = createAction('decrementBy')

const counter = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: (state) => state + 1,
    decrement: (state) => state - 1,
    multiply: {
      reducer: (state, action) => state * action.payload,
      prepare: (value) => ({ payload: value || 2 }), // fallback if the payload is a falsy value
    },
  },
  // "builder callback API", recommended for TypeScript users
  extraReducers: (builder) => {
    builder.addCase(incrementBy, (state, action) => {
      return state + action.payload
    })
    builder.addCase(decrementBy, (state, action) => {
      return state - action.payload
    })
  },
})

const user = createSlice({
  name: 'user',
  initialState: { name: '', age: 20 },
  reducers: {
    setUserName: (state, action) => {
      state.name = action.payload // mutate the state all you want with immer
    },
  },
  // "map object API"
  extraReducers: {
    [counter.actions.increment]: (
      state,
      action /* action will be inferred as "any", as the map notation does not contain type information */
    ) => {
      state.age += 1
    },
  },
})

const reducer = combineReducers({
  counter: counter.reducer,
  user: user.reducer,
})

const store = createStore(reducer)

store.dispatch(counter.actions.increment())
// -> { counter: 1, user: {name : '', age: 21} }
store.dispatch(counter.actions.increment())
// -> { counter: 2, user: {name: '', age: 22} }
store.dispatch(counter.actions.multiply(3))
// -> { counter: 6, user: {name: '', age: 22} }
store.dispatch(counter.actions.multiply())
// -> { counter: 12, user: {name: '', age: 22} }
console.log(`${counter.actions.decrement}`)
// -> "counter/decrement"
store.dispatch(user.actions.setUserName('eric'))
// -> { counter: 6, user: { name: 'eric', age: 22} }

Source

1. Add the SVG image using an <img> tag.

<img src="dotted-arrow.svg" class="filter-green"/>

2. To filter to a specific color, use the following Codepen(Click Here to open codepen) to convert a hex color code to a CSS filter:

For example, output for #00EE00 is

filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);

3. Add the CSS filter into this class.

    .filter-green{
        filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
    }

Input with clearButton

Source

And counter from Rei on his blog and the source code on github

Source

Documentation

SimpleExample

MyCounter

Source

Source

Docs in russian

selecting data from the state and transfer calculations from view to selectors