xdmorgan

Data structure notes

WYSIWYG config structure

wysiwyg:
  p: para # single assigment tag:key
  para: p, ul, ol, p.small # multiple assignment list key:selectors

Type style data object

xdmorgan

import React from 'react'
import useEventListener from '@use-it/event-listener'

function getRect(el) {
  return el ? el.getBoundingClientRect() : {}
}

function useWatchHeight() {
  const ref = React.useRef()
  const [height, setHeight] = React.useState('auto')

xdmorgan

const Mailchimp = require("mailchimp-api-v3");
const validate = require("./validations");

const { MAILCHIMP_API_KEY } = process.env;

exports.handler = async (event, context) => {
  // require an API key or throw everytime
  const [is_valid_env, invalid_env_response] = check_env(process.env);
  if (!is_valid_env) return invalid_env_response;
  // 0. validate request body

xdmorgan

const Mailchimp = require('mailchimp-api-v3')
const validate = require('./validations')

const { MAILCHIMP_API_KEY } = process.env

exports.handler = async (event, context) => {
  // require an API key or throw everytime
  if (!MAILCHIMP_API_KEY) {
    return {
      statusCode: 500,

xdmorgan

// Sassified version of the approach discussed here...
// big up: https://eager.io/blog/smarter-link-underlines/

@mixin underline($fg: #000, $bg: #fff, $size: 1px, $ink: 0.03em, $pos: 87%) {
  background: linear-gradient($bg, $bg), linear-gradient($bg, $bg),
    linear-gradient($fg, $fg);
  background-size: 0.05em $size, 0.05em $size, $size $size;
  background-repeat: no-repeat, no-repeat, repeat-x;
  text-shadow: $ink 0 $bg, -$ink 0 $bg, ($ink * 2) 0 $bg, -($ink * 2) 0 $bg,
    ($ink * 3) 0 $bg, -($ink * 3) 0 $bg, ($ink * 4) 0 $bg, -($ink * 4) 0 $bg,

xdmorgan

import React, { useRef, useState, useEffect } from 'react'
import cx from 'classnames'
import styles from './marquee-v2.module.scss'

export default function Marquee({
  children,
  className = undefined,
  reverse = false,
  ...props
}) {

xdmorgan

import React from 'react'

export default function YouTubeEmbed({ videoId, ...props }) {
  return (
    <iframe
      width="560"
      height="315"
      src={idToEmbedURL({ id: videoId })}
      frameborder="0"
      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"

xdmorgan

/**

"Static Tracking" for values that will not change

```js
const [onTrack] = useStaticTracking({ category: 'Home Page', label: "Register" })

return <Button onClick={onTrack} />
```

xdmorgan

// example config maps
$skeletor: (
  breakpoints: (
    sm: 500px,
    md: 750px,
    lg: 1000px,
    xl: 1250px
  ),
  colors: (
    red: red,

xdmorgan

const calculateGridItemWidth = (span, cols = 24, gap = 16) =>
  ((window.innerWidth - (cols + 1) * gap) / cols) * span + gap * (span - 1);

this.calculateGridItemWidth(18)