Alex Cory alex-cory

Next Video

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

	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}`);

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

	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);

	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)
	}

	/* 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'

	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,

	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 }) => (

	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;
	}
	`

	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