marcandrewb

import { ComponentProps, ComponentType, lazy, Suspense, useMemo } from "react";

type Props<C extends ComponentType<any>> = {
  loader: () => Promise<{
    default: C;
  }>;
} & ComponentProps<C>;

function LazyLoad<C extends ComponentType<any>>({
  loader,

marcandrewb

import { createContext } from 'react';
import { InterpreterFrom } from 'xstate';
import { useInterpret } from '@xstate/react';

import { someMachine } from './someMachine';

export const GlobalStateContext = createContext({ someService: {} as InterpreterFrom<typeof someMachine> });

export const GlobalStateProvider = (props: React.PropsWithChildren) => {
  const someService = useInterpret(someMachine);

marcandrewb

Awesome Personalization

A curated list of hand-picked resources about personalization inspired by the awesome-* trend on GitHub.

The goal is to build a categorized, community-driven collection of excellent resources on the topic. I've been on a steep learning curve on personalization since I founded Croct, so I tried to catalog my resources to help others.

Want to contribute to growing or improving this? Sharing, suggestions, and contributions are always welcome! Please take a look at the contribution guidelines first.

Basics (Start Here)

marcandrewb

export function isElementInView(container: HTMLElement, element: HTMLElement, partial: boolean) {
  if (!container || !element) {
    return false;
  }
  const containerBounds = container.getBoundingClientRect();
  const elementBounds = element.getBoundingClientRect();
  const containerBoundsLeft = Math.floor(containerBounds.left);
  const containerBoundsRight = Math.floor(containerBounds.right);
  const elementBoundsLeft = Math.floor(elementBounds.left);
  const elementBoundsRight = Math.floor(elementBounds.right);

marcandrewb

First, create the global link by returning to the colors folder and using the link command:

cd ../colors
sudo npm link

Once complete, your shell will output:

marcandrewb

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    // the page has been hidden
  } else {
    // the page has become visible
  }
});

marcandrewb

cron syntax

* * * * *  command to be executed
- - - - -
| | | | |
| | | | +----- Day of the week (0 - 7) (Sunday is 0 or 7)
| | | +------- Month (1 - 12)
| | +--------- Day of the month (1 - 31)
| +----------- Hour (0 - 23)

marcandrewb

+-------+-----------+----------------------------------------+
| stage | name      | mission                                |
+-------+-----------+----------------------------------------+
| 0     | strawman  | Present a new feature (proposal)       |
|       |           | to TC39 committee. Generally presented |
|       |           | by TC39 member or TC39 contributor.    |
+-------+-----------+----------------------------------------+
| 1     | proposal  | Define use cases for the proposal,     |
|       |           | dependencies, challenges, demos,       |
|       |           | polyfills etc. A champion              |

marcandrewb

// `ontouchstart` check works on most browsers
// `maxTouchPoints` works on IE10/11 and Surface
export function isTouchDevice() {
  if (!window) return false;
  return 'ontouchstart' in window || navigator.maxTouchPoints;
}

marcandrewb

⌘ - Cmd
⌥ - Option
⇧ - Shift

Key	Description
⌥ F12	Peek at definition
⌥ ↓	Move line down
⌥ ↑	Move line up
⌘ Enter	when opening a file via quick open (⌘ P): Opens file in new split editor