Michael Stramel stramel

Ideal Image Component

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

	/**
	* 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, '');

	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)

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

	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 => {

	<!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>

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

	const { CustomStyleInterface } = window.ShadyCSS;

	class ShadyStyle extends HTMLElement {

	__style = null;

	constructor() {
	super();

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