Notes & learnings

You kick off a few coding agents, walk away, and your team has no idea whether anything's happening. So I built agentblip: it turns your local Claude Code and Codex sessions into your Slack status, formatted on your own machine. Open source, MIT.

A chatbot that's wrong wastes a sentence. An onchain agent that's wrong moves money you can't claw back. The moment you point a model at a wallet, the interesting part stops being the model. Here's what 'everything around it' actually is.

Vibe coding is the right tool for a prototype because nothing's at stake. Onchain, a wrong output is a wrong transfer, so the demo working tells you almost nothing about whether you can trust it with a wallet.

Every onchain bot I've shipped has the same hard boundary: probabilistic judgment on one side, deterministic consequences on the other. The model turns messy language into a number. Code the model can't touch turns that number into an action. Every time the boundary blurs, the blur is where the loss came from.

Mermaid's default output is fine, but it always looks like a tool drew it. tldraw can redraw the same diagram in a warm, hand-sketched style, and if you do the conversion at build time, you ship plain SVGs with zero client JS. Here's a framework-agnostic remark plugin that does it, with light and dark variants and content-hash caching.

The same prediction that warms a focus ring as your cursor approaches can do something far more useful: start loading the next page. intently watches where the cursor is heading, prefetches the link you're aimed at, and prerenders the one you're committed to via the Speculation Rules API. Why I built it when quicklink, instant.page, and ForesightJS already exist, and where it actually helps.

Most UIs wait for a click. The good ones react to intent: a focus ring that warms as your cursor approaches, a button that leans into you, a nav item armed before you arrive. The math is a point-to-rectangle distance and a falloff curve, and it's a few lines of pointermove. Plus where it earns its keep and where it quietly breaks accessibility.

Argent is Glacé's metal sibling: chrome, gold, and gunmetal surfaces that ripple like mercury. Why CSS couldn't fake this one, how a WebGL shader becomes a component kit, the browser's secret WebGL context cap, and writing my own shader to escape a license.

The first thing everyone proposes for verifying AI inference is to re-run the model and diff the outputs. It can't work: GPU floating-point is non-associative, so two honest nodes disagree in the low bits, and the tolerance you add to forgive that honest jitter is exactly the gap an adversary hides a cheaper model inside.

Treat planning as a search problem: generate a plan, score it against a rubric, critique it, rewrite it, keep the best, and stop when the score plateaus. A downloadable Claude Code skill that hardens any plan (project, code migration, research) and tells you when more iteration is just noise.

Glacé is a small React kit where the glass actually refracts. The edges bend the backdrop like a real lens, not blur it. Here's the technique (displacement maps, per-element filters, edge profiles), the bugs along the way, and the honest caveats.

There are exactly four ways to prove an AI model ran honestly: re-execution, opML, TEEs, and zkML. Plot them on trust-strength versus dollars-per-inference and the field collapses into one frontier, with an empty bottom-right corner that every 'trustless AI' landing page secretly claims.

Agents feel best inside the apps you already text in: iMessage, Telegram, WhatsApp, Slack. But iMessage gives you no buttons, and a Slack bot has to juggle many users and orgs at once. Two very different engineering problems, one goal: make the agent feel like a person. How to architect both, with the gotchas.

Auto-routing picks a cheap model for easy prompts and a frontier model for hard ones, automatically. The papers claim 85-98% savings. An independent benchmark found a commercial router doing worse than no routing at all. The real number is ~20-25%, and here's exactly why.

There's an HTTP status code reserved since 1997 and never used: 402 Payment Required. Coinbase finally wired it to something real. Here's the exact 402 → sign → settle → 200 loop, why EIP-3009 is the right primitive, and the honest number: a ~$7B ecosystem moving ~$28K of real volume a day.

A three.js plane rendered to a hidden canvas, then read pixel-by-pixel and rewritten as ASCII characters in a <pre>. The trick is sampling the render at one pixel per glyph. From B3's ai-arena.

Real loads stutter: a burst, a pause, a crawl at the end. This pure-CSS laser beam fakes that with a hand-tuned width track and two offset flickering glows. No JS. Pulled from basement.fun.

A 2D cartridge card with molded-plastic edges, built from one clip-path polygon stacked four times. No 3D, no canvas, just layered shapes, a noise texture, and a luminance-aware accent. Pulled from basement.fun.

A list of email and social OSINT tools made the rounds framed for phishing. Flip it: the same tools are what an attacker runs before a targeted email, so run them on yourself first. What your address leaks, and how to shut it down.

A Bayer 4×4 ordered dither that fakes more shades than you have, plus an animated CRT subpixel mask for the shimmering-phosphor look. Both are small canvas passes, no shaders. Pulled out of ai-arena.

mesq shipped a gorgeous open-source infinite-terrain scene in r3f. I didn't rebuild it, I reskinned it. A new theme palette and moonlit lighting turn a sunny field into a midnight one. Same shaders, different mood.

A one-line upgrade for CSS animations: trade the default ease and linear for cubic-bezier(0.6, 0.6, 0, 1). It starts fast and settles slow, which reads as smooth. Push the curve past 1 and you get a bounce.

A 3D cube in pure CSS transforms: three faces pushed out with translateZ, shaded from a single hex by nudging HSL lightness. No canvas, no library, optional logo and spin.

jhey's CSS trick: intersect a grid-of-dots mask with a Perlin-noise mask using mask-composite, then animate mask-position. The dots twinkle, and it's a single element instead of thousands of animated nodes.

Why app icons use squircles and not rounded rectangles, and how to make one in the browser: an SVG squircle clip, a top sheen, an inset rim, and a glare that sweeps across on hover.

The explorer.b3.fun hero is a grid of live blocks, and you can play snake on it where the blocks are the food. Here's that idea pulled out into a standalone, dependency-free toy.

No WebGL. A preserve-3d box with six faces, a drag that writes one rotation variable, and a drop-shadow trick that recolors a transparent PNG so one shell works for any accent. Pulled out of basement.fun.

The Web Share API hands a title, text, and URL to the operating system and opens the same native share sheet every app uses. Here's a share button that uses it, with a graceful fallback for desktop.

getDisplayMedia grabs a stream of the screen, window, or tab; MediaRecorder captures it to a webm you can play back and download. A full screen recorder, no libraries, nothing uploaded.

The Battery Status API gives you charge level, charging state, and time-to-full from JavaScript, and pushes events when they change. Here's a battery widget built on it, with a fallback for the browsers that dropped it.

navigator.onLine plus the online and offline events give you reactive connectivity in a few lines. Here's a status pill and a slide-in toast built on them, with the one caveat worth knowing.

Drop a picture, pick a block size, export a pixel-art PNG. The whole effect is drawing the image tiny, then scaling it back up with image smoothing turned off.

Accuracy vs reasoning-token budget isn't a staircase. It's an inverted U that bends back down as the model talks itself out of correct answers. There's a measurable crossover where a trace flips more right answers to wrong than the reverse, and once you can see it you can write a stopping rule that buys back roughly half the compute for a few points of accuracy.

A single backdrop-filter blurs uniformly with a hard edge. Stack a few blur layers, mask each to an overlapping gradient band, and the blur ramps smoothly, perfect for fading the ends of a marquee.

Alex Krasikau's dynamic pixel grid, ported to a themeable canvas component. A field of pixels flickers random opacities inside a circle whose radius pulses on a sine wave.

Fourteen of the twenty most-profitable Polymarket wallets are bots. A prediction market is the one LLM benchmark you can't overfit, because it takes your money when you're miscalibrated, so your Brier score is your edge. Derived from scratch, with a live calibration demo.

Petr Knoll's frosted glass button, ported to a component. backdrop-filter for the frost, layered inset rims, and an animated conic-gradient border + sheen powered by @property angle interpolation.

jh3y's glowy CTA, ported to a React component. Orbiting stars, a conic spark sweep, and a star ring tipped into 3D with transform-style: preserve-3d, all driven by one --active variable.

Recreating a soft, pressed-in segmented toggle from a Sketch recipe: a gradient pill, two opposing inset shadows for the depth, and a raised thumb that slides between sun and moon. Pure CSS.

A system prompt that strips the AI tells out of generated writing: conversational tone, varied rhythm, real emotional context, and a hard list of things to avoid. Drop it in before you ask for any copy.

Garry Tan's SOUL.md entry that tells your coding agent to ship the complete thing, not a plan to build it. Drop it into your agent's system prompt / SOUL.md / CLAUDE.md.

scroll-state container queries let the browser tell you when a sticky element is stuck, so you can restyle it on scroll with pure CSS. No scroll listeners, no animation library. Chromium-only for now.

Smooth in-page scrolling plus scroll-margin-top, so jumping to a heading lands it below your sticky header instead of tucked behind it. The fix everyone forgets until a link feels broken.

Timers, counters, prices, scores, live data. If a number updates in place, give it tabular figures so it stops jittering. One CSS property: font-variant-numeric: tabular-nums.

The button I actually ship: a class-variance-authority component whose depth comes from two pseudo-element layers (gradient fill, inner-light rim) and a color-matched shadow. Eight variants, four sizes, asChild.

Throwaway inboxes are how spam, trial-abuse, and fake accounts get in. Checking the email domain against a maintained disposable-domains list at signup takes minutes and pairs well with Cloudflare Turnstile.

A workshop I gave my team: intelligence got commoditized, the engineering value stack flipped, and the job is now shepherding products and orchestrating agents. The talk, the deck, and what I'd tell anyone trying to stay ahead of it.

Bots hammer every site for /.env, /.git, /wp-login and a hundred other 'leaky paths'. Here's a single Cloudflare WAF custom rule that blocks them before they ever reach your origin, plus a generator and a Claude Code skill to apply it.

Most loading skeletons are hand-sized grey boxes that don't quite match the content, so the page jumps when data lands. Keep the real content mounted, shimmer it in place, and wipe it in with a mask. Zero layout shift, pure CSS.

How to make a dark tile look lit from within, with a colored glow rising off the bottom edge, using four stacked inset box-shadows and one outer bloom. No gradients-on-gradients, no images, no blur filters.

A single drop shadow vanishes on a dark background. Here's the layered box-shadow system that reads as real depth in dark UIs: a top light line, an inner hairline, an edge ring, and ambient shadows that double with negative spread.

Recreating a physical, illuminated push-button in CSS: a gunmetal bezel, a recessed lit-glass panel, a glossy sheen, and a colored light bloom. Three nested layers, layered gradients, inset shadows. No images.

How to puff a flat blue rectangle into a tactile, pressable call-to-action using nothing but layered box-shadows: drop, ring, inset stroke, and a top sheen, plus hover and press states. Tailwind and plain-CSS versions.

How a flat rectangle becomes a tactile, pressable button: two clipped gradients for fill and stroke, a three-part box-shadow, and hover/press states that actually move. Tailwind and plain-CSS versions.

The setTimeout(debugger) trick: pause the page mid-hover so you can finally inspect tooltips, dropdowns, and other hover-only elements in the Elements panel. Comes with a bookmarklet to do it in one click.

Why I replaced the soft gradient fade on a logo marquee with edges that disintegrate into graduated pixel blocks: bigger, blurrier, and fainter the further out they go.