Giving a Telegram bot's photos a real social preview card.
Share an image from a bot to Twitter or a chat and no card shows. A step-by-step on why you need a tiny page per photo, what tags it carries, and how to point share links at it.
Engineering.
Adding a graph interface to your app with React Flow and Dagre.
React Flow draws nodes and edges; it does not lay them out or know your data. A concrete example: deriving a graph from app state, placing it with Dagre, and not relaying out on every keystroke.
Parsing #placeholder# templates when a regex is not enough.
The pattern #([^#]+)# cannot tell an escaped hash from a delimiter. A small state-machine tokenizer that splits literals from placeholders and honours backslash escapes.
Counting and sampling a combinatorial space without enumerating it.
Configurations, generated test inputs, procedural content: many features hide an option space too large to list. How to get the exact total, draw a uniformly random item, and list distinct ones from one recursive walk, shown on a text generator.
Measuring how much text fits before the browser renders it.
To place text on a slide you have to know it fits before you draw it. Measuring with a canvas, wrapping Unicode correctly, and correcting for the gap between canvas and DOM.
Splitting text into balanced carousel slides without AI.
Where do the slide breaks go? A fixed character count cuts sentences and leaves uneven slides. How we turned the split into an optimization with a small cost model and dynamic programming.
Why HTML-to-image export uses the wrong font, and how HarfBuzz fixes it.
Rasterizing an SVG to PNG through an image element races the font load and usually loses, so the export comes out in a fallback font. The fix is to convert text to vector paths before rasterizing, with HarfBuzz for shaping.
Drawing connector lines between words in wrapping text.
An SVG overlay can connect words across two lines of HTML, but only if it knows where the browser put them. How we measure word positions and keep the curves attached through wraps, resizes, and font loads.