Skip to content

Instantly share code, notes, and snippets.

View ChrisShank's full-sized avatar
🎯
Focusing

Chris Shank ChrisShank

🎯
Focusing
View GitHub Profile
@ChrisShank
ChrisShank / README.md
Last active May 1, 2024 23:54
Perfect Arrow starterkit

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

  1. Install the NPM package perfect-arrow using a package manager of your choice.
@ChrisShank
ChrisShank / musing.md
Last active May 2, 2024 19:39
Musings on a behavioral paradigm for building web applications

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
@ChrisShank
ChrisShank / editor.ts
Last active November 4, 2023 00:48
Monaco with custom language support
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";
@ChrisShank
ChrisShank / xstate-routing.js
Created October 19, 2021 00:32
My *current* approach to handling routing with xstate
/**
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 { inspect } from '@xstate/inspect';
import {
assign,
createMachine,
interpret,
sendParent,
spawn,
actions,
send,
SpawnedActorRef,
@ChrisShank
ChrisShank / machine.js
Created April 25, 2021 06:43
Generated by XState Viz: https://xstate.js.org/viz
const clientMachine = Machine(
{
id: 'client',
initial: 'idle',
context: {
error: null,
response: null,
},
states: {
idle: {
@ChrisShank
ChrisShank / machine.js
Created April 21, 2021 23:45
Generated by XState Viz: https://xstate.js.org/viz
const machine = Machine(
{
id: 'app',
initial: 'loading',
states: {
loading: {
type: 'parallel',
states: {
animation: {
initial: 'animating',
@ChrisShank
ChrisShank / freecodecamp-build-a-pomodoro-clock.markdown
Created August 10, 2017 01:26
freeCodeCamp: Build a Pomodoro Clock