hosembafer

Web Image Performance Optimization Guidelines

Images make up 42% of an average web page's total weight.

Image format

Image files should be formatted as WebP (next-gen format) or PNG formats, don't use JPG/JPEG as it can't maintain quality properly.

Prefer WebP (next-gen format) over PNG, use PNG only in particular cases when size/quality is better with PNG.

hosembafer

const case1 = [
  {
    type: "lowshelf",
    frequency: 500,
    gain: 18,
  }
];

const case2 = [
  {

hosembafer

enum OutageType {
  INCIDENT,
  MAINTENANCE,
}

type Outage = {
  type: OutageType;
  services?: string[];
  resolved?: boolean;
  force?: boolean;

hosembafer

...
import createStoreProvider from './store/createStoreProvider';
import { TodoListProvider } from './store/TodoListStore';
import { MessageProvider } from './store/MessageStore';

const StoreProvider = createStoreProvider([
    TodoListProvider,
    MessageProvider,
]);

hosembafer

import React from 'react';

const createStoreProvider = providers => ({ children }) => providers.reverse().reduce((tree, Provider) => <Provider>{tree}</Provider>, children);

export default createStoreProvider;

hosembafer

import React, { useState, useCallback } from 'react';

const Context = React.createContext();

let nextId = 0;

export const TodoListProvider = ({children}) => {
  const [tasks, setTasks] = useState([]);

  const addTask = useCallback(name => setTasks(tasks => ([...tasks, {id: ++nextId, name}])), [setTasks]);

hosembafer

import { useTodoListStore } from '../../store/TodoListStore';

const TodoList = () => {
  const {
    tasks,
    addTask,
    renameTask,
    removeTask,
  } = useTodoListStore();

hosembafer

const MessageItem = ({message, onDismiss}) => {
  const ref = useRef(null);

  const swipeableMessageProps = useSwipeToDismiss(ref, onDismiss, false, 100, 'right');

  return <div ref={ref} className={'Message'} {...swipeableMessageProps}>
    {message}
  </div>;
};

hosembafer

import React from 'react';
import PropTypes from 'prop-types';
import { findDOMNode } from 'react-dom';

class SwipeToDismiss extends React.Component {
  constructor(props) {
    super(props);

    this.node = null;

hosembafer

import {useCallback, useEffect, useState} from 'react';

const useSwipeToDismiss = (ref, onDismiss, removeDOM = false, distanceBeforeDismiss = 100, direction = 'right') => {
  const node = ref.current;

  const [removing, setRemoving] = useState(false);
  const [pressedPosition, setPressedPosition] = useState(false);
  const [positionLeft, setPositionLeft] = useState(false);
  const [animate, setAnimate] = useState(false);
  const [opacity, setOpacity] = useState(1);