Arek Bartnik arekbartnik

My FE/DOM Libraries

a gist to recap the current status, also available as library picker!

Minimalistic Libraries

do one thing only and do it well

µhtml (HTML/SVG auto-keyed and manual keyed render)
augmentor (hooks for anything)
wickedElements (custom elements without custom elements ... wait, what?)

About This Gist

This gist summarizes the handleEvent(event) pattern features, something standard, something described by me many times, written in my tiny book, tweeted about, and yet it's something most Web developers ignore.

The `handleEvent` ASCII Doodle

                  ┌---------------------------------┐
var handler = {   | any object that inherits or     |

Fixing macOS 10.14, 10.15, 12

Dark main menu without the rest of dark mode

Set Light mode
defaults write -g NSRequiresAquaSystemAppearance -bool Yes
Log out and log back in
Set Dark mode

iOS restrictions re: bringing up the keyboard on programmatic focus

I can't find exact specifications on this, but it seems that iOS restricts bringing up the keyboard via programmatically focusing on <input>. It only brings up the keyboard in response to explicit user interaction.

iOS focus on input field only brings up keyboard when called inside a click handler.
It doesn’t work if the focus is async.

This presents a curious problem when you want to autofocus an input inside a modal or lightbox, since what you generally do is click on a button to bring up the lightbox, and then focus on the input after the lightbox has been opened. Without anything fancy, it actually works ok. The problem shows up when you try to add something fancy like a setTimeout or a promise.then(). I don't know why people would want to use a setTimeout here, but waiting for a promise is actually a pretty common use case. E.g. we try to batch dom manipulations like getting a lightbox to show up inside `requestAnimati

	type State = {
	added: boolean;
	interval: false \| ReturnType<typeof setInterval>;
	inFrame: boolean;
	callbacks: Array<SetFocusedCallback>;
	};

	type EnrichedHTMLIFrameElement = HTMLIFrameElement & { ___onWindowFocusHandled: boolean };

	type SetFocusedCallback = (focused?: boolean) => void;

	import React, { useContext } from "react";

	//styles
	import * as S from "./styles";
	import * as A from "styles/shared-components";

	//components
	import Header from "components/Header";
	import { AuthContext } from "components/Auth";
	import SpinnerComponent from "components/Spinner";

	import React from "react";
	import { Location } from "@reach/router";

	let scrollPositions = {};

	class ManageScrollImpl extends React.Component {
	componentDidMount() {
	try {
	// session storage will throw for a few reasons
	// - user settings

	// Elements with `data-observe` toggle `data-visible`
	// between `true` and `false`

	if ('IntersectionObserver' in window) {
	const callback = (entries, observer) => {
	entries.forEach(entry => {
	entry.target.setAttribute('data-visible', entry.isIntersecting)
	})
	}

	/* eslint no-undef: 0*/
	/* eslint react/jsx-no-undef: 0*/
	import React from "react"

	const chart = {
	id: "purchase",
	initial: "fetchingWorkshopData",
	states: {
	fetchingWorkshopData: {
	on: {

	<!-- generated via npm run build && npx create-polyfill-service-url analyse --file public/bundle.js -->

	<script crossorigin="anonymous" src="https://cdn.polyfill.io/v3/polyfill.min.js?features=Array.from,Array.isArray,Array.prototype.entries,Array.prototype.fill,Array.prototype.filter,Array.prototype.forEach,Array.prototype.indexOf,Array.prototype.keys,Array.prototype.map,ArrayBuffer,console,DataView,Date.prototype.toISOString,document,fetch,Function.prototype.bind,globalThis,Map,Object.create,Object.defineProperties,Object.defineProperty,Object.entries,Object.getOwnPropertyDescriptor,Object.getOwnPropertyDescriptors,Object.getOwnPropertySymbols,Object.getPrototypeOf,Object.keys,Object.setPrototypeOf,Promise,Reflect,Reflect.construct,Set,Symbol,Symbol.iterator,WeakMap,WeakSet"></script>