Chris Shank ChrisShank

🎯

Focusing

𝕮 • Dissoℓving the web from the inside out with @folk-js

ChrisShank / trial.html

Last active October 31, 2024 22:01

	<!DOCTYPE html>
	<html>
	<head>
	<title>My experiment</title>
	<script src="https://unpkg.com/[email protected]"></script>
	<script src="https://unpkg.com/@jspsych/[email protected]"></script>
	<script src="https://unpkg.com/@jspsych/[email protected]"></script>
	<script src="https://unpkg.com/@jspsych/[email protected]"></script>
	<link
	href="https://unpkg.com/[email protected]/css/jspsych.css"

ChrisShank / resize-observer.ts

Created November 18, 2024 00:26

Resize Observer Manager

	export type ResizeObserverEntryCallback = (entry: ResizeObserverEntry) => void;

	export class ResizeObserverManager {
	#elementMap = new WeakMap<Element, Set<ResizeObserverEntryCallback>>();
	#elementEntry = new WeakMap<Element, ResizeObserverEntry>();

	#vo = new ResizeObserver((entries) => {
	for (const entry of entries) {
	this.#elementEntry.set(entry.target, entry);
	this.#elementMap.get(entry.target)?.forEach((callback) => callback(entry));

ChrisShank / main.ts

Created June 20, 2025 12:06

How I define custom events

	import {MyEvent} from './my-event.ts';

	document.addEventListener(MyEvent.name, (e) => {...});

ChrisShank / main.js

Last active August 18, 2025 04:22

custom HTML elements as domain objects in JS

	// We can use custom HTML elements as domain objects to abstract away and compose DOM operations as if they are regular JS objects.

	class TodoItem extends HTMLElement {
	#completed = document.createElement('input');
	#text = document.createElement('input');
	#button = document.createElement('button');

	constructor() {
	super();