Mark Funk mfunkie

https://twitter.com/snookca/status/1073299331262889984?s=21

‪“‬In what way is JS any more maintainable than CSS? How does writing CSS in JS make it any more maintainable?”

‪Happy to chat about this. There’s an obvious disclaimer that there’s a cost to css-in-js solutions, but that cost is paid specifically for the benefits it brings; as such it’s useful for some usecases, and not meant as a replacement for all workflows. ‬

‪(These conversations always get heated on twitter, so please believe that I’m here to converse, not to convince. In return, I promise to listen to you too and change my opinions; I’ve had mad respect for you for years and would consider your feedback a gift. Also, some of the stuff I’m writing might seem obvious to you; I’m not trying to tell you if all people of some of the details, but it might be useful to someone else who bumps into this who doesn’t have context)‬

So the big deal about css-in-js (cij) is selectors.

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

	javascript:(function () {
	var active;
	var magnifier;

	var config = {
	scale: 75,
	size: 160,
	image:
	'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAOtMSURBVHgBrL2JmuS4zQQYyK/e/42b2EkRcUDVY/vf3bKnK0spkSCOwMFDdep0F9D9z3/8jfjvfe379/nnn8/8ffqfazXfNY7a+V77XsXz/fk2gn9+8+o//3yb+efSP9fm7+jj+89zb+G2Md9/H2A/35/nmtqfNqfvnr+zv2Yb/9x/YpykjW3c5jyuZzxFOmYMddvxdQQN7/H85fr7+3m+a9N3ya+hA+r7PG1eWmroJy+f+5//7ee+f3+fAeV0QgY1fOiQpfofum9nz7OHn3vz6bY/8v/S+X2W8unh29CdfFMfKY/gbS/5//MF9eBLy/eGD/XYcmGf5PXhtTN8Hxm7r9Ad9pn2Eboj+SPtZNp7Pv/zz+efcZwWzzrsY/X5Hcsaw9D7JbggmtIeT8hC16RD2LpyIJ6fe+n5/WP1ug8UB3a16FGs5pejI50KNMTRqJ4nxuKevz/Tfl0lGF1/nqsYxHQ7mvXPr88/9zbBokJF2ko49J1/tLhG4fkbYRjdVOPnMvzXvf/5xDYevRrg4p2PUpzhHHlgnpAy0TAGUexsjKLMaff7vX42P9hvVQ1wmGgaVdOcef3Lqw9u3xLkUEY6SXNodX1GBqAy9+0XIbfRmOJjyLF/CT+3WdLesAH2lVd9an7jkZdQ76UHNbI+//yvKq+HBoweSZ/68orGGMwaJ1OPo/oa42DT0+B95ozkpt1nvE1lhMVMhQs7CF0cxbnjnRs+dXXz80+/f1IGo4hz+9MV++4BSOp5fVq8fcBhQ

	//
	// VisionViewPlaygroundApp.swift
	// VisionViewPlayground
	//
	// Created by Steven Troughton-Smith on 21/09/2023.
	//

	import SwiftUI

	@main

	import invariant from "tiny-invariant";

	class AmalgoBox extends HTMLElement {
	get input() {
	return this.querySelector("input") as HTMLInputElement;
	}

	get button() {
	return this.querySelector("button") as HTMLButtonElement;
	}

	function useAbortController() {
	const abortControllerRef = React.useRef()
	const getAbortController = React.useCallback(() => {
	if (!abortControllerRef.current) {
	abortControllerRef.current = new AbortController()
	}
	return abortControllerRef.current
	}, [])

	React.useEffect(() => {

	#!/bin/bash

	# To install: just copy this script to your machine and name it whatever you want.
	# Let's say you named it toggle-desktop-icons.sh, then all you need to do is make
	# the script executable, like this:
	#
	# chmod +x toggle-desktop-icons.sh
	#
	# Now you can execute the script directly in the terminal any time you want to
	# show/hide the desktop icons, like this:

	function mapValues(obj, fn) {
	return Object.keys(obj).reduce((result, key) => {
	result[key] = fn(obj[key], key);
	return result;
	}, {});
	}

	function pick(obj, fn) {
	return Object.keys(obj).reduce((result, key) => {
	if (fn(obj[key])) {

	let Thing = (props) => (
	<div>look {props.name}! no state!</div>
	)

	render(<Thing name="Ma"/>, el)

	/**
	* Basic proof of concept.
	* - Hot reloadable
	* - Stateless stores
	* - Stores and action creators interoperable with Redux.
	*/

	import React, { Component } from 'react';

	export default function dispatch(store, atom, action) {