Discover gists

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

A better GeoJSON

GeoJSON is a widely-used format for encoding geographic data. It's flexible and human-readable, and because it's just JSON it's easy to integrate into web applications.

But it has some real warts, and if we wanted to we could certainly come up with a better format. After tweeting about my frustrations, I was asked to elaborate. Here goes:

Redundancy

GeoJSON geometries can be one of seven types: Point, MultiPoint, LineString, MultiLineString, Polygon, MultiPolygon and GeometryCollection.

Are Web Standards Toast?

I find myself in a tempest in a toaster. Yesterday I (and much of the web standards world) learned about two possible new HTML elements proposed by Google, std-toast and std-switch. I had no idea what “toast” meant in the context of the web, a problem shared my many other people. It turns out it’s a UI pattern, those little notices that pop up and then disappear without user interaction.

But wow, new HTML elements! This is the holy grail. In my part of the web we don’t even dream about new HTML elements. Oh, we’ve tried, but Hixie didn’t much care for footnote, WICG didn’t much care for list titles, and no one much cared about author. Just last week the author of the extensible web manifesto warned me to never expect new HTML elements, due to the difficulty of changing the parser.

But my concern wasn’t so much about the nature of the new elements, but of how we learned about them and what that says about how web standardization works. My [first tweet](https://twitter.com

	import { h, Component } from 'preact';
	import Markup from 'preact-markup';
	import register from './preact-custom-element';

	// just a proxy component: WC -> Preact -> WC
	const A = () => <x-b foo="initial foo from <x-a>" />;

	// stateful component that can re-render
	class B extends Component {
	render(props, state) {

	type HTMLElementPrototype = HTMLElement extends { prototype: infer Prototype }
	? Prototype
	: never;

	declare namespace h {
	namespace JSX {
	interface Element {}
	type LibraryManagedAttributes<E, _> = E extends {
	prototype: infer Prototype;
	}

	import fetch from 'node-fetch';

	export async function requestSnapshot(url, data) {

	const response = await fetch('https://little-paper-d118.bkardell.workers.dev', {
	method: 'POST',
	mode: 'no-cors',
	headers: {url: url}
	});

	/* JSON XPath search */ (await import('https://unpkg.com/espath')).default(window.dataLayer, '//string')

	/* cookie to object */ Object.fromEntries(document.cookie.split('; ').map(entry => entry.split('=')))

	/* cookie to object */ (await import('https://v2.crocdn.com/_plugins/cookie-to-object.js')).default()

	/* css elements search / document.querySelectorAll ('')

	/* xpath element search / (await import('https://unpkg.com/queryxpath/queryxpath.es.js')).queryXPathAll ('//')

	function camelToKebab(string) {
	const tag = document.createElement('span')
	tag.dataset[string] = true
	return tag.attributes[0].name.split(/^data-/)[1]
	}

	let _str = (function(){
	const tag = document.createElement('span')
	return {
	propToAttr: (string) {
	tag.dataset[string] = true
	return tag.attributes[0].name.split(/^data-/)[1]
	},
	attrToProp(string) {
	tag.setAttribute(`data-${string}`, true)
	return Object.entries(tag.dataset)[0][0]

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="style.css" />
	<link rel="stylesheet" href="leaflet/leaflet.css" />
	</head>
	<body>
	<div id="map"></div>
	<script src="leaflet/leaflet.js"></script>