Mark Malstrom
LightNews LightNews
banner
malstrom.me
Mark Malstrom
@malstrom.me
580 followers 790 following 2.6K posts
Wake me up when the DEFCON levels have changed. They/them.

https://malstrom.me
https://mastodon.social/@markmalstrom
Posts Replies Media Videos
malstrom.me
A roast beef sandwich with fresh mozzarella and roasted red peppers on a French demibaguette with a side of jus dipping sauce — the same sandwich from the 30 Rock episode “Sandwich Day”
November 11, 2025 at 7:17 PM
malstrom.me
November 11, 2025 at 7:17 PM
malstrom.me
November 11, 2025 at 7:17 PM
malstrom.me
November 11, 2025 at 7:17 PM
malstrom.me
November 11, 2025 at 7:17 PM
malstrom.me
November 11, 2025 at 7:17 PM
malstrom.me
November 11, 2025 at 7:17 PM
malstrom.me
What if you could just… await in your component?
export const listContacts = query( (query?: string) => client .contact .list .fetch<ContactRecord[]>({ search: { q: query ?? "" } }), api.contact.list, ); export async function* Sidebar(this: UI.Handle) { const router = this.context.get(Router); this.on(router, { change: () => this.update() }); let query = router.location.searchParams.get("q"); let contacts!: ContactRecord[]; for (const {} of this) { const previous = query; query = router.location.searchParams.get("q"); if (query !== previous || !contacts) { contacts = await listContacts(query); } yield ( <nav> {contacts.length ? ( <ul> {contacts.map(contact => ( <SidebarItem contact={contact} key={contact.id} /> ))} </ul> ) : ( <p> <i>No contacts</i> </p> )} </nav> ); } }
November 10, 2025 at 6:19 PM
malstrom.me
I'm in TypeScript hell
render: anyı } ? Router.› : R[K][K][K][K][K][K][K][K] extends RouteDefs<..› ? { [K in keyof {-readonly [K in keyof RIK][K][K][K][K][K][K][K]]: R[K][K][K] [K][K][K][K][K][K] extends { pattern: infer S extends string; render: anyi } ? Router > : RIK][K][K][K][K][K][K][K][K] extends RouteDefs< ...> ? { [K in keyof { -readonly [K in keyof R[K][K][K][K][K][K][K][K][K]]: R[K] [K][K][K][K][K][K][K][K][K] extends { pattern: infer S extends string; render: any, } ? Router.> : RIK][K][K][K][K][K][K][K][K][K] extends RouteDefs< ...› ? {IK in keyof { -readonly [K in keyof R[K][K][K][K][K][K][K][K][K][K]]:
October 31, 2025 at 10:13 PM
malstrom.me
This is just patently false. You don’t need to import anything to use JSX. JSX looks just as much “like the platform” as directives do. JSX has plenty of ecosystem expectations and tooling burdens without a shared spec.
Why this differs from the JSX/virtual DOM moment It’s tempting to compare criticism of directives to the early skepticism around React’s JSX or the virtual DOM. The failure modes are different. JSX and the VDOM did not masquerade as language features; they came with explicit imports, provenance, and tooling boundaries. Directives, by contrast, live at the top-level of files and look like the platform, which creates ecosystem expectations and tooling burdens without a shared spec.
October 25, 2025 at 2:20 PM
malstrom.me
React and Solid share a syntax, yet that syntax compiles to an entirely different contract for each. By these metrics, JSX is confusing and unstable.
Category Shared Syntax Shared Contract Result ECMAScript ✅ ✅ Stable and universal Framework APIs ❌ ❌ Isolated and fine Framework Directives ✅ ❌ Confusing and unstable
October 25, 2025 at 2:20 PM
malstrom.me
Remix has you covered github.com/remix-run/re...
import { form, query } from '$app/server'; import { error } from '@sveltejs/kit'; import { LocalFileStorage } from '@remix-run/file-storage/local'; import * as v from 'valibot'; const storage = new LocalFileStorage('./user/files'); export const upload = form(v.object({ file: v.file() }), async (data) => { await storage.set(data.file.name, data.file); }); export const download = query(v.string(), async (key) => { const file = await storage.get(key); if (!file) error(404, 'Not found'); return file; });
October 20, 2025 at 5:11 PM
malstrom.me
A screenshot of Chrome showing the Remix Movies website, with navigation for movies, tv shows, and people at the top and a grid of trending movie posters below
October 16, 2025 at 2:14 PM
malstrom.me
Reminds me of some historical event that took place in Germany about 80 years ago but I can’t quite put my finger on which
- When people fainted, we banged on the cages and asked for a doctor. Then the guards came and said, 'We're going to gas you. It was standard for them to say that. They held up a gas cylinder and threatened to press it against us.
October 16, 2025 at 1:15 PM
malstrom.me
Here's an API I want from Remix 3 on the Route API. Bring back fetchers!
const response = await routes.api.data.fetcher({ searchParams: { state: event.currentTarget.value }, { signal } });
October 12, 2025 at 1:41 PM
malstrom.me
Remix v3 will use partial hydration for interactive components
import {press } from "Cremix-run/events/press' import ¡ routes } from ../../routes.ts' export const ImageCarousel = hydrated routes. assets.hreff path: "image-carousel. js#ImageCarousel' 3), function (this: Remix. Handle, { startIndex = 0}: { startIndex?: number } = 0) € let index = startIndex let goPrev = (total: number) => { if (index <- 0) return index = index - 1 this. update( } Let goNext = (total: number) = { if (index >= total - 1) return index = index + 1 this. updateO) v RI 0 Auto Attach: With Flag -- NORMAL -- Q
October 10, 2025 at 8:48 PM
malstrom.me
😎
Remix v3 in CD form
October 10, 2025 at 7:31 PM
malstrom.me
Components work seamlessly with the event encapsulation library
function App (this: Remix. Handle) { Let bpm = 60 return = ( <button on={tempo ((event) => { bpm = event. detail this. update() 3)} > BPM: {bpm} </button> لها ocument. body. appendChild (button)
October 10, 2025 at 6:08 PM
malstrom.me
Compose like so
app > public > entry.tsx>... import events} from "gremix-run/events" import {tempo} from "./01-intro/tempo" let button = document. createELement ("button") let bpm = 60 events (button, l tempo ((event) => { bpm = event.detail update() -), 1) function update() { button. textContent = "BPM: ${bpm} } update () document.body.appendChild(button)
October 10, 2025 at 6:03 PM
malstrom.me
Use `createInteraction` to encapsulate event state logic
app>public > 01-intro> tempo.tsx - remix-jam - ryan Add to Chat *L tempo.tsx> lel tempo Quick Edit 3K tion} from "@remix-run/events" export const tempo = createInteraction< HTMLButtonELemeni number > ("rmx: tempo", (f target, dispatch}) = { Let taps: number[] = [] let resetTimer: number = 0 function handleTap() { clearTimeout (resetTimer) taps.push(Date.nowO)) taps = taps.filter((tap) => Date. now -tap<4000) if (taps. length >= 4) { let intervals = [] for (let i = 1; i ‹ taps. length; i++) { intervals.push (tapsli] - taps[i -11) } let bpm = intervals.map( (interval) => 60000 / interval Let avgTempo = Math.round(
October 10, 2025 at 6:00 PM
malstrom.me
Remix v3 event function
app > public > entry.tsx - remix-jam - ryan entry.tsx>... function handleTap() { resetTimer = window.setTimeout(0) => { taps = [] 4000) X #L to chat, &K to generate events (button, [ dom. pointerdown (handLeTap), dom. keydown ((event) => { if (event. repeat) return if (event.key === "Enter" || event.key === "") { handleTap() } 3), ..• 1) function update() { button. textContent = 'BPM: ${tempo}• } update() document.body.appendChild(button)
October 10, 2025 at 5:56 PM
malstrom.me
Remix v3: available exclusively on compact discs
Ryan Florence holding a CD containing the Remix v3 source code
October 10, 2025 at 5:41 PM
malstrom.me
Why did they call it Bluesky instead of
A store at night on a city street with a neon sign reading “WORLD OF POSTERS”
October 9, 2025 at 11:18 PM
malstrom.me
tits
Alana Haim playing acoustic guitar on the left, Danielle Haim playing the drum kit in the center, and Este Haim playing the bass on the right, all standing on stage in front of a giant light up sign taller than them that is completely red with black dots spelling out the word “TITS” behind them as they play
September 27, 2025 at 5:31 AM
malstrom.me
This is the navigation configuration I'm thinking about for a Liquid Glass Bluesky client
September 22, 2025 at 11:56 PM