Daniel Rose danielrose7

Embed field guide: responsive iframes and honest browser boundaries

A robust third-party embed is not just an iframe with width: 100%. Our preferred public API is a purpose-named custom element backed by a vendor-origin iframe. It is still two documents with a small protocol between them: the host owns placement and width; the iframe owns application logic, storage, and sensitive inputs; a deliberately narrow message contract connects the two.

This guide distills lessons from building and browser-testing embedded forms and booking flows.

Custom element outside, iframe inside

Claude Prompt Patterns

Best practices for writing effective Claude prompts, based on Anthropic guidance as of spring 2026.

Structure: Use XML tags

XML tags are the strongest signal for separating prompt sections. Claude was trained to treat them as semantic boundaries.

Tag Type

category of tag
has_many :tags
optionally belongs to a parent tag type (nested option)

Tag

specific field
belongs_to :tag_type
optionally belongs to a parent tag (nested option)

	/**
	* guardPrintTitle — fix Chrome PDF print filename via document.title guard
	*
	* When printing a PDF inside an iframe, Chrome uses `document.title` — not the
	* iframe's own `<title>` — to pre-fill the "Save as PDF" filename. Frameworks
	* like React (<Head>), Next.js, or Vue router can reset the title between our
	* set and Chrome's read via their own lifecycle/rendering.
	*
	* This function temporarily sets `document.title` to the desired filename and
	* uses a MutationObserver to enforce it against framework resets. Returns a

	import { useState } from 'react';

	import isEqual from 'lodash.isequal';

	/**
	* Memoizes by deep equality — returns the previous reference when
	* content is unchanged, even if the input is a new object. Avoids
	* unnecessary downstream invalidation that `useMemo` can't prevent
	* when its deps are new references with identical data.
	*

	# Delete local branches merged to the default branch + their worktrees
	# Catches both true merges (git) and squash merges (GitHub PR status)
	# Reads default branch from origin/HEAD — works with main, staging, etc.
	# Usage: trim [--force] (--force skips confirmation)
	trim() {
	local repo_root
	repo_root="$(git rev-parse --show-toplevel 2>/dev/null)" \|\| { echo "Not in a git repo"; return 1; }

	local base_branch
	base_branch="$(git symbolic-ref refs/remotes/origin/HEAD 2>/dev/null)"

	# Worktree-aware branch switcher
	#
	# The problem: git won't let you checkout a branch that's already open in a
	# worktree. The error message tells you exactly where to go — so why not just
	# go there automatically?
	#
	# $ git checkout some-branch
	# fatal: 'some-branch' is already checked out at '/Users/dan/work/admin.worktrees/some-branch'
	#
	# Instead of copying that path, this alias catches the error and cd's there.

	/**
	* pdfMake's getBase64 provides for an async callback that does not allow for error handling (at least in v0.2.x)
	* this recreates their OutputDocument.getBase64() behavior with accessible error handling
	*/
	export const generatePdfBase64 = (
	pdf: TCreatedPdf,
	{
	endStream = true,
	readChunkSize = 1024 * 1024 * 1024, // 1 GiB (matches pdfmake's OutputDocument.bufferSize)
	timeoutMs = 15 * 1000,

	# add to runs tests for both modified and untracked files ending in .test.ts extension
	alias jestdiff="git status --porcelain \| grep -E '\.test\.ts$' \| awk '{print \$2}' \| xargs pnpm jest"

	import { Prisma, PrismaClient } from '@prisma/client';
	import get from 'lodash.get';

	describe('prisma extensions', () => {
	it('RLS extension sets app policy helpers', async () => {
	// #region setup
	const userId = 'user_123';
	const organizationId = 'org_456';
	const membershipRole = 'admin';
	const setRlsSql = Prisma.sql`SELECT set_rls_app_context(${userId}, ${organizationId}, ${membershipRole});`;