JayKan

const createLogger = (backgroundColor, color) => {
  const logger = (message, ...args) => {
    if (logger.enabled === false) {
      return;
    }

    console.groupCollapsed(
      `%c${message}`,
      `background-color: ${backgroundColor}; color: ${color}; padding: 2px 4px;`,
      ...args

JayKan

:root {
  --ease-in-quad: cubic-bezier(.55, .085, .68, .53);
  --ease-in-cubic: cubic-bezier(.550, .055, .675, .19);
  --ease-in-quart: cubic-bezier(.895, .03, .685, .22);
  --ease-in-quint: cubic-bezier(.755, .05, .855, .06);
  --ease-in-expo: cubic-bezier(.95, .05, .795, .035);
  --ease-in-circ: cubic-bezier(.6, .04, .98, .335);

  --ease-out-quad: cubic-bezier(.25, .46, .45, .94);
  --ease-out-cubic: cubic-bezier(.215, .61, .355, 1);

JayKan

The 'middleware listener' pattern:
better asynchronous actions in Redux

For reference, here is a standard synchronous Redux action creator:

export const simpleAction = () => {
    return {
        type: actionTypes.PERFORM_SIMPLE_ACTION
    };
}

JayKan

Copied from http://code.lancepollard.com/complete-list-of-html-meta-tags/

Basic HTML Meta Tags

<meta name="keywords" content="your, tags"/>
<meta name="description" content="150 words"/>
<meta name="subject" content="your website's subject">
<meta name="copyright"content="company name">
<meta name="language" content="ES">

JayKan

Advanced memoization and effects in React

Memoization is a somewhat fraught topic in the React world, meaning that it's easy to go wrong with it, for example, by [making memo() do nothing][memo-pitfall] by passing in children to a component. The general advice is to avoid memoization until the profiler tells you to optimize, but not all use cases are general, and even in the general use case you can find tricky nuances.

Discussing this topic requires some groundwork about the technical terms, and I'm placing these in once place so that it's easy to skim and skip over:

• Memoization means caching the output based on the input; in the case of functions, it means caching the return value based on the arguments.
• Values and references are unfortunately overloaded terms that can refer to the low-level implementation details of assignments in a language like C++, for example, or to memory

JayKan

/* Infinite stream of numbers! 
Format: `[number, suspendedStream]` where suspendedStream is really just a
function that, upon calling, returns another `[number, suspendedStream]`.
*/

function head(a) {
  return a[0];
}

function tail(a) {

JayKan

import React, { useMemo } from "react";
import useSubscription from "./useSubscription";

// In this example, "source" is an event dispatcher (e.g. an HTMLInputElement)
// but it could be anything that emits an event and has a readable current value.
function Example({ source }) {
  // In order to avoid removing and re-adding subscriptions each time this hook is called,
  // the parameters passed to this hook should be memoized.
  const subscription = useMemo(
    () => ({

JayKan

const setTokenAfterware = new ApolloLink(async (operation, forward) => {
  return forward(operation).map(async res => {
    const context = operation.getContext();
    const { response: { headers } } = context;

    const token = headers.get["x-token"];
    const refreshToken = headers.get["x-refresh-token"];

    if (token) {
      await AsyncStorage.setItem("token", token);

JayKan

import * as Sentry from "@sentry/node";
import imagemin from "imagemin";
import mozjpeg from "imagemin-mozjpeg";
import sharp from "sharp";
import isJpg from "is-jpg";
import * as aws from "aws-sdk";
import { Upload } from "../../types/graphqlUtils";
import { generateFilename } from "./generateFilename";

export const s3 = new aws.S3({

JayKan

function removeDuplicates(arr) {
  var clean = []
  var cleanLen = 0
  var arrLen = arr.length

  for (var i = 0; i < arrLen; i++) {
    var el = arr[i]
    var duplicate = false

    for (var j = 0; j < cleanLen; j++) {