alex-cory

const toEmoji = (num) => {
  if (num === null || num === undefined || Number.isNaN(num)) return '⛔';
  if (num === 10) return '🔟';
  if (!isFinite(num)) return '🔁';
  
  return String(num)
    .replace('-', '−')
    .replace('.', '⏺️')
    .replace(/\d/g, digit => `${digit}️⃣`)
    .replace(/⏺️(\d{0,2})\d*/, (match, p1) => `⏺️${p1}`);

alex-cory

/**
 * Outputs
 * 🌐 - API request -- potential others 🗺️ 🌎
 * 💥❌ - useEffect unmount -- potential others 🚫
 * 💥 - useEffect -- 
 * ??? - in render function
 * ??? - callback function
 */

alex-cory

Next Video

Goals

• make video event listeners behave the same across all browsers
• simplify the syntax
• reduce bundle size compared to libraries like video.js, and others with sizes of ~15MB
• improve performance
  • reduce renders
  • in PWAs using videos - ex: storing local videos

alex-cory

indexedDB.databases().then(dbs => {
    var promises = dbs.map(db => {
        return new Promise((resolve, reject) => {
            var req = indexedDB.deleteDatabase(db.Name);
            req.onsuccess = resolve;
            req.onerror = reject;
            req.onblocked = reject;
        });
    });
    Promise.all(promises).then(console.log).catch(console.error);

alex-cory

import { useEffect, useRef } from 'react'
import { isMobile } from 'react-device-detect'

export const getElement = (id = '') => {
  if (typeof window === 'undefined') return console.warn('getElement - no window object available')
  // if we are passing an element as the ID
  if (typeof id !== 'string') return id
  return document[id.startsWith('.') ? 'querySelector' : 'getElementById'](id)
}

alex-cory

/* Syntax */
import useRouter, { routes } from 'use-next-router'

// see this to implement: https://stackoverflow.com/questions/67764930/proxy-route-strings
// routes.api.posts => '/api/posts'
// routes.api.posts({ postId: 'ID' }) => '/api/posts/ID'
// routes.api.posts({ postId: 'ID' }).query({ name: 'alex' }) => '/api/posts/ID?name=alex'
// routes.api.posts.query({ name: 'alex' }) => '/api/posts?name=alex'
// routes.api.profiles({ profileId: 'ID' }).posts({ postId: 'ID' }).query({ name: 'alex' }) => '/api/profiles/ID/posts/ID?name=alex'

alex-cory

const isObject = v => Object.prototype.toString.call(v) === '[object Object]'

Object.entries({
'{}': {},
 Set: new Set([1,2,3,4]),
 Date: new Date(),
 null: null,
 undefined: undefined,
 string: 'string',
 NaN: NaN,

alex-cory

import { PusherProvider } from '@harelpls/use-pusher'

// _app.js
const config = {
  clientKey: 'your-pusher-client-key',
  cluster: 'us2',
  // required for private/presence channels
  authEndpoint: '/api/pusher/auth'
}
const App = ({ Component, pageProps }) => (

alex-cory

import styled, { css, keyframes } from 'styled-components'

export default Skeleton	export const skeletonKeyframes = keyframes`
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
`

alex-cory

  const { data: todos, loading } = useFetch('https://jsonplaceholder.typicode.com/todos', {
    data: [], // <- we set this so our initial `data` is an array
  }, []) // <- this empty array signifies, run onMount