Chris Shank ChrisShank

freeCodeCamp: Build a Pomodoro Clock

Herein outlines a vision for what a behavioral paradigm for building highly interactive, client-side heavy web applications could look like. It attempts to address problems and challenges with the component paradigm that is commonplace these days. Such challenges include:

Component frameworks cluster on templates. Behavior/state is tighly colocated to a particular component in the tree and as requirements change this behavior must be refactored as it's needed in other places. Over time, more and more state is hoisted up to the root of the component tree.
Event listeners are directly attached to UI elements. This encourages the event-action paradigm, where event listeners have a increasing amount of conditional logic because it has to figure out the qualatative state the application is in to know what side effects to execute. This leads to a large source of bugs (see Horrock's book "Constructing the USer Interface with Statecharts" for a more elaborate explanation).
Behavior is scattered between compone

Perfect Arrow

A custom element to declaratively define arrows between HTML elements. Steve Ruiz's perfect-arrows powers to arrow layout and Sam Thor's viz-observer to observer the movement and resizing of elements.

Warning

This library is still in development. 🚧 Use at your own risk. It's published to npm, but expect breaking changes until we flesh things out.

Usage

Install the NPM package perfect-arrow using a package manager of your choice.

	const machine = Machine(
	{
	id: 'app',
	initial: 'loading',
	states: {
	loading: {
	type: 'parallel',
	states: {
	animation: {
	initial: 'animating',

	const clientMachine = Machine(
	{
	id: 'client',
	initial: 'idle',
	context: {
	error: null,
	response: null,
	},
	states: {
	idle: {

	import { inspect } from '@xstate/inspect';
	import {
	assign,
	createMachine,
	interpret,
	sendParent,
	spawn,
	actions,
	send,
	SpawnedActorRef,

	/**
	This gist is more or less pseudocode for how I think we should deal with routing.
	The largest problem with routing is that is permates all layers of an application (business logic, rendering, ect.)
	and most routing library to be an all in one solution to this problem. As a result routing libraries are becoming more like
	state management libraries than routing libraries. I recommend that we break routing into three distinct concerns:

	1. Application-specific routing logic
	- Use any state management tool you want, xstate is a good fit here
	2. Serializing/deserializing the URL
	- Deals specifically with interacting with the broswers History API and extracting data from the URL

	import "monaco-editor/esm/vs/editor/editor.all.js";
	import "monaco-editor/esm/vs/editor/standalone/browser/accessibilityHelp/accessibilityHelp.js";
	import "monaco-editor/esm/vs/editor/standalone/browser/inspectTokens/inspectTokens.js";
	import "monaco-editor/esm/vs/editor/standalone/browser/iPadShowKeyboard/iPadShowKeyboard.js";
	import "monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneGotoLineQuickAccess.js";
	import "monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneGotoSymbolQuickAccess.js";
	import "monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneCommandsQuickAccess.js";
	import "monaco-editor/esm/vs/editor/standalone/browser/quickInput/standaloneQuickInputService.js";
	import "monaco-editor/esm/vs/editor/standalone/browser/referenceSearch/standaloneReferenceSearch.js";
	import "monaco-editor/esm/vs/editor/standalone/browser/toggleHighContrast/toggleHighContrast.js";

	<head>
	<!-- Forked from https://cristobal.space/note -->
	<meta charset="UTF-8">
	<style>
	body {
	font-family: monospace;
	margin: 12px;
	}
	img {
	width: 100%;

	<!-- To run this benchmark open this HTML file for these 3 different URLs and check out the memory tab in dev tools to compare memory consumption. -->
	<!-- file:///<path to html file>.html#static-handler -->
	<!-- file:///<path to html file>.html#bound-handler -->
	<!-- file:///<path to html file>.html#arrow-handler -->

	<script type="module">
	class StaticHandler extends HTMLElement {
	clicks = 0;

	constructor() {