Blog

Behind the implementation, design decisions, and tools I use.

Explore by Topic

Browse related articles as focused series. Start from the topic that matches your interest.

Creative Coding

12 articles

Mathematical simulations, nature visualization, and generative art in the browser

Start series →

Browser Game Development

7 articles

Game loop design, collision detection, pathfinding, and tooling for browser games

Start series →

Canvas vs DOM & Interactive UI

5 articles

Canvas vs DOM tradeoffs, CSS interactions, custom physics, and portfolio design

Start series →

Claude Code Workflow

4 articles

Large-scale refactoring, CLAUDE.md design, and session management with Claude Code

Start series →

Web Audio & Sound Programming

3 articles

Audio synthesis, instrument implementation, and physics simulation references

Start series →

TanStack Start × Cloudflare

4 articles

Full-stack setup with TanStack Start and Cloudflare Pages, plus Tailwind v4 migration

Start series →

Small M&A Financial Due Diligence

7 articles

Hands-on financial due diligence for small M&A — key metrics, verification, cost reality, and converting findings into deal terms

Start series →

12 minAI-Driven DevelopmentQuality AssuranceClaude Code

How to Guarantee Quality When AI Mass-Produces Your Code — The 4-Layer Gate System Behind 200 Components

The real quality machinery behind ~200 AI-built interactive components: four pre-commit hooks, data invariant tests, real-browser pixel smoke tests, and a quality-score + PR-proposal pipeline — documented down to the file names.

11 minSmall M&AFinancial DDDD Checklist

The Small M&A Quick DD Checklist — Documents to Request First and What to Verify

A working checklist for small M&A financial DD: the eight documents to request first with the purpose of each, statement-vs-tax-return reconciliation, balance verification, and how to build the question list — everything a buyer can do alone.

10 minSmall M&AFinancial DDDD Cost

Financial DD Costs — Market Rates, and When to Outsource, DIY, or Use Tools

How much to spend on financial due diligence: the ¥500K–1M full-DD market rate, cost-effectiveness by deal size, the screen → narrow → outsource sequence, and scoped delegation — a budgeting guide for small M&A buyers.

13 minPersonal M&AFinancial DDFinancial Statements

The Minimum Financial Numbers for an Individual M&A Buyer — What to Check in the Statements

For time-poor individual buyers: which numbers in the financial statements matter. Six values from roughly twelve line items — normalized EBITDA, net debt, CCC, current ratio, equity ratio, and operating margin — mapped to the exact BS/PL accounts.

12 minFinancial DDFinancial StatementsWindow Dressing

Where Financial Statements Hide Profit Adjustments and Window Dressing — Small M&A Red Flags

Where a seller's statements distort: tax-driven profit compression (director pay, insurance, private expenses) versus appearance-driven dressing (pulled-forward sales, inflated inventory, double books) — which accounts each shows up in, and how reconciliation and turnover-day analysis detect them.

14 minSmall M&AFinancial DDM&A Failures

Five Financial Failure Patterns in Small M&A — Were the Post-Closing Landmines Visible in DD?

Finance-driven small M&A failures reduced to five patterns — profitable-but-broke, profit illusion, net-debt blind spot, off-balance liabilities, working-capital starvation — each mapped to the DD metric or procedure that detects it before closing.

15 minSmall M&AFinancial DDAsset Deal

Share Deal vs. Asset Deal: How Financial DD Scope Changes — Which One Inherits Off-Balance Liabilities?

How DD priorities shift between small M&A structures: a share deal universally succeeds to off-balance liabilities and tax risk, weighting DD toward liability hunting; an asset deal shifts the battleground to asset existence and unit-level earning power. With a comparison table and the exceptions.

21 minSmall M&AFinancial DDDue Diligence

Small M&A Financial Due Diligence: The Complete Guide — Six Numbers to Check Before Buying a Company

A complete guide to buyer-run first-pass financial DD for small M&A deals. Drawing on three EXITs on the sell side of DD and building a financial DD tool: the six metrics, verification, process, and converting findings into price terms.

5 minSEOIndexNowCloudflare

IndexNow x Cloudflare Pages — Instant URL submissions from sitemap.xml

A practical workflow: treat sitemap.xml as the source of truth, then submit all URLs to IndexNow right after a Cloudflare Pages deploy to shorten discovery time for new content.

14 minSimulationAgent-BasedCanvas API

Ant Colony Simulation — Emergent Swarm Intelligence Through Pheromones

Implementing pheromone-based pathfinding with an agent-based model to reproduce ant swarm intelligence in the browser. Explores how evaporation and diffusion parameters affect emergent patterns.

🐜Ant Farm🐦Boids🦠Game of Life
29 minWeb Audio APIMusicBooks

Audio Programming References — Where Web Audio API Meets Music Theory

Key insights from implementing 11 music components including Piano, Guitar, and Theremin with Web Audio API, plus a curated list of books and resources for audio programming.

🎹Piano🎸Guitar📡Theremin
14 minCanvas APIGameCollision

Building a Breakout Game in the Browser — Mastering Reflection Angles and Level Design with Canvas API

Implementing a Breakout game using Canvas API and requestAnimationFrame. Covers paddle reflection angle calculation, block layout level design, and score management through component implementation.

🧱Breakout🏓Pong🪩Pinball
19 minDeveloper ExperienceToolsWorkflow

Browser Game Developer Setup 2026 — The Toolchain Behind 203 Components

A tour of the development environment for building 203 browser games and interactions. Claude Code-centric workflow, bun + Biome + Vite, and parallel development with Git Worktree.

💧Fluid Simulation🪩Pinball🎹Piano
29 minReactCanvas APIDebug

Top 10 Bugs from 203 Canvas/DOM Components — Patterns Revealed by Real Data

Bugs encountered during the development of 203 interactive components, tallied from git history. The most frequent patterns and their fixes presented in a Top 10 format.

💧Fluid Simulation🪩Pinball🦠Game of Life
16 minClaude CodeAI DevelopmentReact

Bulk-Fixing 200 Components with Claude Code — The Full Pipeline of Classification, Fixing, and Verification

A practical record of bulk-fixing bugs across 203 interactive components with Claude Code in 6 commits and 100+ files. The entire process of classification, templating, and verification.

💧Fluid Simulation🎹Piano🏃Maze Runner
21 minClaude CodeAI DevelopmentDeveloper Experience

Growing CLAUDE.md — Three Months of Evolving an AI Collaboration Config File

A record of continuously updating CLAUDE.md over 3 months across 323 commits. Rules that worked, rules that didn't, and the limits of "advisory" configuration.

💧Fluid Simulation🧱Breakout🦠Game of Life
25 minCanvas APIReactPerformance

Canvas vs DOM — Decision Criteria from 203 Components with Real Benchmark Data

The decision criteria used to assign 203 interactive components between Canvas API and DOM, explained with real examples and measured performance data.

🫧Bubble Wrap💧Fluid Simulation🪨Gravity Drop
18 minMathematicsAudioCanvas API

Sound Synthesis with Fourier Series — Harmonics and Waveform Construction

Synthesizing square, sawtooth, and triangle waves with Fourier series and visualizing them with epicycles. Experience how adding harmonics changes timbre through Web Audio API sound synthesis.

〰️Fourier Series🎤Sound Waves📟Oscilloscope
25 minPhysicsArchitecturePerformance

The Limits of a 180-Line Custom Physics Engine — Why I Dropped Matter.js and What I Couldn't Cover

Built a custom 2D physics engine in 166 lines of physics.ts, reducing Matter.js's 300KB to 4KB. The trade-offs of focusing on gravity, collision, and bounce while giving up constraints, friction, and stacking.

🪨Gravity Drop⚫Newton's Cradle🎱Elastic Collision
26 minPhysicsChaosCanvas API

Visualizing Double Pendulum Chaos — RK4 Integration and Sensitivity to Initial Conditions

Implementing a double pendulum simulation covering Lagrangian mechanics equation derivation, RK4 integration stability, NaN prevention, and visualization of sensitivity to initial conditions.

🔗Double Pendulum🔔Pendulum Wave🦋Lorenz Attractor
19 minAlgorithmMazeVisualization

Comparing Maze Generation Algorithms — Structural Differences Between Recursive Backtracking, Kruskal, and Prim

Comparing the characteristics of multiple maze generation algorithms including recursive backtracking, Kruskal's, and Prim's, and the structural differences in the mazes they produce.

🏃Maze Runner🏰Maze 3D🟢Tilt Maze
24 minClaude CodeAI DevelopmentProductivity

One Session, One Task — The Principle I Learned from Claude Code Context Management

While developing 203 components with Claude Code, "one session, one task" proved to be the most impactful productivity principle. Real examples of context exhaustion and countermeasures.

💧Fluid Simulation🏃Maze Runner🫧Bubble Wrap
25 minBooksPhysicsMathematics

Three Books That Shaped My Physics Simulations — The Knowledge Behind 203 Implementations

The physics and math knowledge behind 203 interactive demos came primarily from three books. A concrete look at which chapters informed which implementations.

💧Fluid Simulation🔗Double Pendulum🪐N-Body
18 minPhysicsCanvasGame Development

Pinball Physics Simulation — Implementing Flippers, Bumpers, and Gravity with Canvas API

Implementing pinball physics with Canvas API. Covers flipper rotational motion, bumper restitution, gravity, and ball behavior.

🪩Pinball🧱Breakout⚫Newton's Cradle
25 minMathematicsSimulationCanvas API

Exploring the Reaction-Diffusion Parameter Space — Four Faces of the Gray-Scott Model

Varying feed/kill rates in the Gray-Scott Reaction-Diffusion model produces entirely different patterns: spots, stripes, coral, and cell division. Implementation on a 200x200 grid with exploration notes.

🧫Reaction Diffusion🧬Particle Life💎Crystal Growth
15 minSimulationCellular AutomataComplexity

Sandpile Model and Self-Organized Criticality — Running the BTW Model in the Browser

Visualizing self-organized criticality in the browser through an implementation of the Bak-Tang-Wiesenfeld sandpile model. Measuring power-law avalanche distributions and the formation of fractal patterns.

🏔️Sand Pile⏳Sand Fall🦠Game of Life
21 minTailwind CSSCSSDark Mode

What Broke in the Tailwind CSS v4 Migration — @custom-variant and Dark Mode Implementation Notes

Breaking changes encountered migrating from Tailwind CSS v3 to v4, and implementation patterns for dark/light mode using @custom-variant.

🫧Bubble Wrap🪨Gravity Drop🎛️Fidget Zone
26 minTanStack StartCloudflareVite

TanStack Start x Cloudflare Pages — A Complete Record of Pitfalls and Solutions

Five landmines hit while deploying TanStack Start v1 to CF Pages — Vite plugin ordering, ServerFn bugs, FOUC prevention, and more — with workarounds shown in real code.

🧫Reaction Diffusion☀️Solar System🎹Piano
18 minArchitectureTanStack StartNext.js

Why I Didn't Choose Next.js — The Decision Criteria for Picking TanStack Start

A record of the technical decision to choose TanStack Start + Cloudflare Pages over Next.js for a portfolio hosting 203 interactive components.

💧Fluid Simulation🎹Piano🧱Breakout
5 minTypeScriptPhysicsCanvas API

Building a Custom Physics Engine for the Browser from Scratch

How I built a lightweight 180-line physics engine in TypeScript instead of using Matter.js for my portfolio site. Reduced bundle size from 300KB to 4KB while maintaining 60fps.

🪨Gravity Drop🎱Elastic Collision🫧Bubble Wrap
8 minCanvas APIPerformanceAnimation

60fps Particles with Canvas API — Smooth Animation Design for 200+ Particles

Design techniques for running 200+ particles at 60fps using Canvas API with requestAnimationFrame, fixed timestep, DPI scaling, and spatial partitioning.

🎆Fireworks🧬Particle Life🎨Gravity Painter
9 minWeb Audio APITypeScriptSound

Building Browser Instruments with Web Audio API — Piano, Guitar, and Kalimba

Technical walkthrough of implementing playable Piano, Guitar, and Kalimba in the browser using Web Audio API's OscillatorNode, GainNode, and ADSR envelopes.

🎹Piano🎸Guitar🎵Kalimba
10 minSimulationPhysicsCanvas API

Fluid Simulation in the Browser — Real-Time Computation on a 100x60 Grid

Running a real-time fluid simulation by simplifying the Navier-Stokes equations on a 100x60 grid. Implementation details of diffusion, advection, and pressure solver.

💧Fluid Simulation🔧Fluid Pipes💧Water Ripple
9 minMathCanvas APIFractal

Drawing Fractal Mathematics in the Browser — From Mandelbrot Set to Barnsley Fern

Rendering fractals in the browser using complex number iteration, escape time algorithm, IFS (iterated function systems), and recursive drawing.

🔍Mandelbrot🌿Barnsley Fern🌳Fractal Tree
9 minProcedural GenerationCanvas APIMath

Generating Natural Terrain with Perlin Noise — Why Randomness Can Be Beautiful

Step-by-step implementation of natural terrain generation with Perlin noise, from the mathematics of gradient noise to octave composition and 3D mesh rendering on Canvas.

🏔️Perlin Landscape🌳Fractal Tree🌟Starfield
9 minPhysicsTypeScriptGame Development

Collision Detection Fundamentals — Circles, Rectangles, and Impulse-Based Response

A deep dive into circle-circle and circle-rectangle collision detection algorithms, restitution-based bounce control, and the math behind impulse-based collision response, explained through the physics.ts implementation.

🎱Elastic Collision🪩Pinball🧱Breakout
8 minCSSUIAccessibility

Interactive UI with Pure CSS — Practical Use of transform, transition, and Custom Properties

CSS techniques using transform, transition, and custom properties demonstrated through DOM+CSS-based interactive UI components like FidgetSpinner, InfiniteKnob, and ToggleSwitch.

🎛️Fidget Zone🔄Infinite Knob🫠Lava Lamp
9 minPhysicsSimulationCanvas API

Visualizing Wave Equations in the Browser — Interference, Diffraction, and Resonance

Implementing 1D and 2D wave equations with finite difference methods and visualizing interference, diffraction, and resonance patterns on Canvas. Rendering techniques for WaveInterference, WaveEquation, and ChladniPlate.

🌊Wave Equation🌊Wave Interference🔬Chladni Plate
11 minAlgorithmVisualizationTypeScript

Visualizing Pathfinding Algorithms — Watching A*, BFS, and DFS Solve a Maze

Techniques for visualizing the search process of A*, BFS, and DFS implemented in the MazeRunner component, with a comparison of each algorithm.

🏃Maze Runner👻Pac-Man🐍Snake
10 minSimulationAlgorithmCanvas API

The World of Cellular Automata — From Game of Life to Wave Function Collapse

Design patterns for rule-based cellular automata and grid optimization with Uint8Array, explored through implementations of Game of Life, WaveFunctionCollapse, and SandFall.

🦠Game of Life🧩WFC Generator⏳Sand Fall
10 minTypeScriptGame DevelopmentReact

Designing a Type-Safe Game Loop in TypeScript — State Management for Snake and Tetris

Game state management and frame rate control using TypeScript's type system, explored through Snake, Tetris, and Breakout implementations.

🐍Snake🟦Tetris🧱Breakout
10 minPhysicsSimulationCanvas API

The N-Body Problem in the Browser — Implementing Gravitational Simulation

Implementation details of gravitational calculations, vector operations, integration methods, and orbit rendering used in the NBody, SolarSystem, and GravityWell components.

🪐N-Body☀️Solar System🕳️Gravity Well

Blog FAQ

Quick answers about what this blog covers and how to branch into the rest of the site.

What kind of posts are on the sakimyto.com Blog?

It focuses on technical posts drawn from the real implementations on this site: Canvas API, physics simulation, Web Audio, React performance, TanStack Start, and Cloudflare Pages.

Browse topic hubs
Where should I start if I am new here?

Start with the Topic Clusters near the top of the page. They route you into a focused topic page, then into the most relevant articles in that series.

Open the home pageStay on Blog
Can I try the demos after reading an article?

Yes. Many posts connect directly to Play interactions or mini games, so you can move from reading into a live demo without leaving the site.

Go to PlayBrowse Arcade
What if I also want tool or setup recommendations?

Use Picks for comparison guides covering the tools and books actually used in this workflow. Blog and Picks intentionally link into each other.

Browse Picks