Nathan Knowler knowler

Remix Deferred

Remix Deferred is currently implemented on top of React's Suspense model but is not limited to React. This will be a quick dive into how "promise over the wire" is accomplished.

SSR + Hydration

It isn't rocket science, but a quick recap of how frameworks such as react do SSR:

Load data
Render the app

	<?php
	declare( strict_types=1 );

	$wp_dir = '/application/www/wp/';

	$preload_patterns = [
	$wp_dir . "wp-includes/Text/Diff/Renderer.php",
	$wp_dir . "wp-includes/Text/Diff/Renderer/inline.php",
	$wp_dir . "wp-includes/SimplePie/*/.php",
	$wp_dir . "wp-includes/SimplePie/*.php",

	background #e8e9ec
	foreground #33374c

	selection_background #d2d4dd
	selection_foreground #33374c

	cursor #33374c
	cursor_text_color #e8e9ec

	# white

	// If the user has been on the page for over 12 hours, the next link
	// click will do a full page transition to get new code
	import React from "react";
	import { BrowserRouter, useLocation } from "react-router-dom";

	let hour = 3600000;

	export default function StaleAppRouter(props) {
	let [isStale, setIsStale] = useState(false);

	# Usage:
	# Copy this file with the same name "note-link-janitor-gh-action-workflow.yml" to the <repo>/.github/workflows/ folder
	# I keep all my *.md files in SRC and run janitor only on that folder. If you keep it in the root of repository or any other folder, feel free to update it on line 37 of this file
	# The workflow gets triggered every time you push to your repository
	name: note-link-janitor-gh-action-workflow

	# Run this workflow every time a new commit pushed to your repository
	on: push

	jobs:

	import path from "node:path";
	import fse from "fs-extra";
	import svgstore from "svgstore";
	import { glob } from "glob";
	import prettier from "prettier";

	let HEROICONS_PATH = path.join(process.cwd(), "node_modules/heroicons");
	let ASSETS_PATH = path.join(process.cwd(), "assets");

	let OUTFILE = path.join(process.cwd(), "app/components/sprite/index.svg");

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Single File Web Component</title>
	</head>
	<body>
	<template id=single-file>
	<style>
	h1 {

	/*
	Made by Elly Loel - https://ellyloel.com/
	With inspiration from:
	- Josh W Comeau - https://courses.joshwcomeau.com/css-for-js/treasure-trove/010-global-styles/
	- Andy Bell - https://piccalil.li/blog/a-modern-css-reset/
	- Adam Argyle - https://unpkg.com/[email protected]/normalize.min.css / https://codepen.io/argyleink/pen/KKvRORE

	Notes:
	- `:where()` is used to lower specificity for easy overriding.
	*/

	export default function MyMessage({ html, state }) {
	const { attrs } = state
	const { message='' } = attrs
	return html`
	<h1>${ message }</h1>

	<script type="module">
	class MyMessage extends HTMLElement {
	constructor() {
	super()

	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;
	}