2026 3

Editing images with code and AI

Andreessen Horowitz published an interesting article titled The Next Frontier of Visual AI Is Code. Here’s the summary. A lot of our work is visual: ads, slides, dashboards, logos, videos, architecture, etc. We can generate visual output either as: Pixels (like Nano Banana a photo), or as Code (like Claude generating an SVG) Code is more powerful: AI can inspect the output and improve fast in a loop: Code > Render > Inspect > Revise. ...

Using SVG favicons with Unicode

Browsers support SVG favicons as data: URLs. For example, this SVG: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"> <circle cx="16" cy="16" r="15" fill="#2563eb"/> <path fill="#fff" d="m16 7 2 7 7 2-7 2-2 7-2-7-7-2 7-2Z"/> </svg> … can be: Compressed via svgomg Converted to a data: URL via svgviewer Inserted into HTML like this: <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2215%22%20fill%3D%22%232563eb%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m16%207%202%207%207%202-7%202-2%207-2-7-7-2%207-2Z%22%2F%3E%3C%2Fsvg%3E"/> The fun part is that you can use text inside the SVG, styled as you wish: ...

Creating a favicon from SVG

I use a tiny SVG favicon.svg. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"> <circle cx="16" cy="16" r="15" fill="#2563eb"/> <path fill="#fff" d="m16 7 2 7 7 2-7 2-2 7-2-7-7-2 7-2Z"/> </svg> It’s small enough that I usually inline it in HTML: <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle cx='16' cy='16' r='15' fill='%232563eb'/><path fill='%23fff' d='m16 7 2 7 7 2-7 2-2 7-2-7-7-2 7-2Z'/></svg>"> But sometimes I need a /favicon.ico because I don’t want to change the HTML (e.g. generated content, others’ code, too many files to change) and /favicon.ico is the default browsers look for. ...

2025 1

Things I Learned - 19 Oct 2025

This week, I learned: ⭐ “… most engineers don’t have public commits. Senior engineers at large tech companies don’t work on open-source projects for the most part.” Why AI Can’t Do Hiring Cloudflare’s Sandbox feature in their Workers looks impressive. It supports streaming, web access to the container, and long-running processes. So we can spawn off a task and have it run a server (at least for a while) or a scraper. Gemini API has a Google Maps tool that it can refer to - like Google Search. Maps Grounding Earlier we needed humans to label data for RLHF. Now we don’t since AI can simulate it. This is a pattern. Once AI learns from a human, that human skill can be automated. How GPT-5 Thinks — OpenAI VP of Research Jerry Tworek The <output> element has a for= attribute indicating which <input> elements it is linked to and a form= attribute indicating which form it belongs to. This works well with screen readers. A good reason to use it more. Examples. Meta built a Code World Model. Basically an LLM that acts like a Python interpreter! sudo apt install moreutils installs a set of useful packages: chronic. Runs a command quietly (suppressing output) unless it fails — good for cron jobs where you only want noise on errors. chronic backup.sh combine. Combines lines from two input streams/files using boolean operations (AND, OR, XOR). combine AND fileA fileB errno. Look up symbolic names, numeric codes, and descriptions for standard errno values. errno -l; errno ENOENT; errno 2 ifdata. Query network interface properties (IP, byte counts, errors) in a script-friendly format. ifdata -sip eth0; ifdata -bops eth0 ifne. Run a command only if stdin is not empty, passing the input through. find . -name core | ifne mail -s "Core files found" admin isutf8. Check whether a file or stdin is valid UTF-8. isutf8 somefile.txt lckdo. Run a command while holding an exclusive lock to prevent concurrent runs. lckdo /var/run/mylockfile.cmd myscript.sh mispipe. Pipe two commands, but return the exit status of the first one (useful in pipelines). cmd1 mispipe cmd2 parallel. Run multiple commands in parallel, reading them from stdin or arguments. parallel < jobs.txt pee. Like tee, but sends stdin to multiple commands in parallel. echo "foo" | pee cmd1 cmd2 ⭐ sponge. Soak up all input before writing to output — enables in-place edits safely. sort file | sponge file ⭐ ts. Prefix each input line with a timestamp. tail -f logfile | ts vidir. Edit a directory listing in your editor to rename, move, or delete files in bulk. vidir ~/myfolder vipe. Insert a text editor into a pipeline to manually edit streamed input before output. cat file | vipe | wc -l zrun. Transparently decompress compressed files before passing them to a command. zrun cat file.gz Despite 20 years of SVG experience, I learnt new things from A Friendly Introduction to SVG and A Friendly Introduction to Paths Setting a <rect> width/height or a <circle> radius to zero removes the element instead of drawing a point. There’s no option to draw the stroke on the inside or outside of a shape/path. Only the center. You can override a path’s pathLength attribute to create a new internal scale for its length. It’s unclear where I can use this. <path> arcs have this syntax: A [rx],[ry] [rotation] [large-arc-flag] [sweep-flag] [end-x],[end-y]. SVG first fits an ellipse to these parameters and then draws the arc. If rx and ry of an arc is too small to connect the points, the SVG spec scales up rx and ry. [large-arc-flag]=1 literally uses the larger arc of the fitting ellipse. This is less common. [sweep-flag]=1 its the ellipse to make the connecting arc go clockwise. 0 is anti-clockwise. [rotation] is rarely used because we usually draw arcs and then rotate them. stroke-linejoin automatically flips from miter (sharp) to bevel (cut) if the sharp edge protrudes too long (e.g. small angles). Increasing stroke-miterlimit increases the cutoff (default: 4) ⭐ Always include a thoughtful gallery of examples with tools / libraries. This does more than showing what a tool can do. It’s use-case / domain transfer: showing what it’s useful for in real life - opening ideas, suggesting workflows. It’s style transfer: showing how to use it. ⭐ Here’s what expert AI coders increasingly focus on. Thomas Dohmke Delegation: context engineering agents for success; parallelizing. Verification: efficiently reviewing and testing code/output; setting stop-points. Expanding scope: instead of time saved as the metric. Education: teaching AI-based coding, debugging, reviewing/testing. Product management: combining requirements + UI design + architecture + engineering + deployment. Cross-discipline: blending code with design, governance, finance, marketing, … (“computational creators”). Notes from Taylor’s How I’m using coding agents: October 2025 Left monitor: 2-4 desktops (e.g. work, side-project). Right monitor: things I always want available Plan next task while first executes. Use plan mode to write to a plan file. Don’t start big tasks if you have meetings scheduled soon. Recent open source package hack methods seem to work more because of people/process than systems (Filippo): Phishing the author Pull requests running unsafe code in CI Taking over expired domain / user ID Stealing long-lived tokens uv run --python 3.14 --isolated --with-editable '.[test]' pytest runs pytest on a local project with a specific Python version. Simon Willison Notes from the State of AI Report 2025: Reasoning models are more fragile. Irrelevant phrases make reasoning models spend FAR more tokens and get wrong answers #21 AI systems are able to teach experts new concepts #41 An environment providing feedback / rewards enables continuous learning #52 E.g. Multi-robot chemical labs at U.Liverpool and NCSU #60 RLHF has a fundamental flaw: humans reward sycophancy #71 We can read what people are typing from brain signals outside the skull #73 Model intelligence-to-price ratio doubles every ~6 months #94 The AI companies’ valuations are also roughly doubling every ~6 months #181 OpenAI is offering Governments giga-watt campuses to run OpenAI models for citizens #122 A 1GW clusters costs $50bn capex and $11bn per annum #130 China has added ~10X the energy capacity as the US in 2024 #146 NVIDIA challengers are still far away #161 LLMs can “read between the lines” even if training data is censored #268 LLMs can pass information via hidden signals #270 Prediction: A major retailer reports >5% of online sales from agentic checkout. AI agent advertising spend hits $5B. #304 OpenAI’s leadership guide says: Align Explain WHY AI thoughtfully. Set a goal, e.g. everyone uses ChatGPT 20 times/day (Moderna). Use it yourself. Show how. Have business leaders run AI sessions Activate Launch an AI skills proram Set up an AI champions network Encourage experimentation (dedicated time, workshops, hackathons, …) Link to performance evaluations Amplify Create an AI knowledge base Share success stories (weekly) Create internal groups (Teams, Slack, …) Celebrate AI wins Accelerate Unblock AI tools and data access Simplify project selection. Quick feedback, clear priorities Unblock projects with a cross-functional council Give resources to successful teams Govern Publish a responsible AI playbook (what’s safe to try) Audit AI practices quarterly

2021 2

I’ve a theory. PowerPoint can do anything. (Excel too). Shape operations are especially powerful. In this tutorial, I create an address card icon and export it as SVG. I don’t need Sketch / Illustrator for this. They’re great. But no, thanks. I’m pretty good with PowerPoint 😄 Have you seen PowerPoint do anything that made you go “Wow! This is cool!”? Do share. I’d love to hear about it. http://www.s-anand.net/blog/designing-complex-shapes-in-powerpoint/ LinkedIn

Designing Complex Shapes in PowerPoint

I use PowerPoint instead of Adobe Illustrator or Sketch. I’m familiar with it, and it does everything I need. One of the features I’m really excited by in PowerPoint is the ability to manipulate shapes. Let’s say you have a rectangle and a circle. You can select both of these shapes and in the Shape Format > Merge Shapes dropdown, you can: merge them with a union combine them (like an XOR operation in Boolean algebra) fragment them, which breaks them up into pieces intersect them subtract them This is so powerful that you can create any kind of shape. Let’s take an icon from Font Awesome at random – say an address card – and create it. ...

2020 1

Create SVG with PowerPoint

With Office 365, PowerPoint supports SVG editing. This is really powerful. It means you can draw in PowerPoint and render it on the web – including as interactive or animated visuals. For example, the SVG in this simulator was created just with PowerPoint. The process is simple. Draw anything. Select any shapes and right-click. Select Save As Picture… and choose SVG. For example, you can use PowerPoint to create Smart Art, export it as SVG, and embed it into a page. See this example on CodePen. ...

2011 2

India district map

I put together a district map of India in SVG this weekend. So what? You can now plot data available at a district level on a map, like the temperature in India over the last century (via IndiaWaterPortal). The rows are years (1901, 1911, … 2001) and the columns are months (Jan, Feb, … Dec). Red is hot, green is cold. (Yeah, the west coast is a great place to live in, but I probably need to look into the rainfall.) ...

Visualising student performance 2

This earlier visualisation was revised based feedback from teachers. It’s split into two parts: one focused on performance by subject, and another on performance of each student. Students’ performance by subject This is fairly simple. Under each subject, we have a list of students, sorted by marks and grouped by grade. The primary use of this is to identify top performers and bottom performers at a glance. It also gives an indication of the grade distribution. ...

2010 1

Visualising student performance

I’ve been helping with visualising student scores for ReportBee, and here’s what we’ve currently come up with. Each row is a student’s performance across subjects. Let’s walk through each element here. The first column shows their relative performance across different subjects. Each dot is their rank in a subject. The dots are colour coded based on the subject (and you can see the colours on the image at the top: English is black, Mathematics is dark blue, etc.) ...