stramel / storage.ts

Created February 7, 2024 18:48

	/**
	* Checks if the specified Web Storage API exists and is accessible
	* @param storage - Web Storage API
	* @returns true, if the Web Storage API is accessible
	*/
	const isStorageEnabled = (storage?: Storage): storage is Storage => {
	if (!storage) return false;
	try {
	const key = `__storage__test`;
	storage.setItem(key, '');

stramel / createFieldArray.ts

Created March 31, 2020 21:54

Field Array store and hook factory

	import { createContext, createElement, useContext, useEffect, useMemo, useState, ReactNode } from 'react'
	import { useFormContext } from 'react-hook-form'

	function createFieldArray<T>(name: string) {
	const storeContext = createContext()

	function StoreProvider({children, defaultValue}: {children: ReactNode, defaultValue: T[]}) {
	const { register, setValue, unregister } = useFormContext()
	const [items, setItems] = useState<T[]>(defaultValue)

stramel / useArrayField.ts

Created March 31, 2020 17:19

Creates an array field on your form

	import { useEffect, useState } from 'react'
	import { useFormContext } from 'react-hook-form'

	export default function useArrayField<T>({ name, defaultValue = [] }: { name: string; defaultValue?: T[] }) {
	const { register, setValue, unregister } = useFormContext()
	const [items, setItems] = useState<T[]>(defaultValue)

	// Manually register our array field
	useEffect(() => {
	register({ name })

stramel / server.js

Last active May 5, 2022 07:27

NX Next.js Custom Server

	const express = require('express')

	module.exports = async function customServer(app, settings, proxyConfig) {
	const handle = app.getRequestHandler()
	await app.prepare()
	const server = express()

	if (proxyConfig) {
	const proxyMiddleware = require('http-proxy-middleware')
	Object.keys(proxyConfig).forEach(context => {

stramel / object-from-path.js

Created June 13, 2019 06:43

Playing around with creating an object from a path string for react-hook-form

stramel / index.html

Last active March 3, 2019 11:49

Untitled benchmark (https://jsbench.github.io/#d9932d79f4b4afbfb587ea827bffbd51) #jsbench #jsperf

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>Untitled benchmark</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
	<script src="./suite.js"></script>
	</head>
	<body>
	<h1>Open the console to view the results</h1>

stramel / shady-style.js

Last active February 15, 2019 02:34

[WIP] ShadyStyle

	import "@webcomponents/shadycss/custom-style-interface.min.js";

	const { CustomStyleInterface } = window.ShadyCSS;

	class ShadyStyle extends HTMLElement {

	__style = null;

	constructor() {
	super();

stramel / intersectionObserver.js

Last active March 18, 2019 16:10

[WIP] IntersectionObserver element

	class MyIntersectionObserver extends HTMLElement {
	constructor() {
	super();
	this._observer = null;
	this._visited = false;
	this._root = null;
	this._rootMargin = '0px';
	this._threshold = 0;

	this._shadowRoot = this.attachShadow({ mode: 'open' });

stramel / index.html

Created January 22, 2019 17:54 — forked from TimothyGu/index.html

for-of loop vs forEach (https://jsbench.github.io/#cec5fd6009b622c72311e8f447e101be) #jsbench #jsperf

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>for-of loop vs forEach</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
	<script src="./suite.js"></script>
	</head>
	<body>
	<h1>Open the console to view the results</h1>

stramel / Features.md

Last active February 12, 2019 04:04

(WIP) Ideal Image (Maybe Video) Component

Ideal Image Component

Features

"Modern Browser" compliant (no IE)
A11y
Lazy-loading
- lazyload attribute (https://caniuse.com/#feat=lazyload)
- IntersectionObserver polyfill for lazyload
Manual trigger