ai-coding on S Anand

Things I Learned - 29 Mar 2026

Sun, 29 Mar 2026 00:00:00 +0000

This week, I learned:

The Kids Should See This - great collection of videos for curious people. Thej
A jury fined Meta and YouTube $4.2m and $1.8m for building addictive features in their products. That’s a first. NY Times
“I think AI-type tools will actually revolutionize the experimental side of math, where you don’t care so much about individual problems and the process of solving them, but you want to gather large-scale data about what things work and what things don’t.” Terence Tao
The hedonic treadmill (which roughly quantifies a Buddhist principle) says that we revert to a happiness set point (which varies by individual). Worse, those who experience a high kick (e.g. a lottery) don’t get enough kick from normal wins (contrast effect) – Interactive explainer. The happiness neutral
As of today, a LinkedIn search for “llm psychologist” lists 9 people. I’m not alone!
- Anand S, LLM Psychologist, Singapore, Singapore
- Anshul Saxena, PhD, AI Advisor & Trainer | Technology Strategist | LLM Psychologist | Currently teaching humans, machines & business to work smarter through Generative AI and Quantum Computing | 15+ Years Experience, Pune, Maharashtra, India
- Charitarth (Chad) Sindhu, LLM Psychologist / Fractional Business & AI Workflow Consultant/ Digital Nomad, Tokyo, Japan
- Lancelot Salavert, LLM Psychologist, Barcelona, Catalonia, Spain
- Lior Dor(Durahly), Team Lead | Bug Banisher | Ex 8200, Tel Aviv District, Israel. Past: R&D Team Lead and LLM Psychologist at Superwise | A Blattner Tech Company
- maxime bodereau, Lead Creative Art Director | UX Forensics | Ai LLM Psychologist | Visual Alchemist | Codesmith | Brandologist | Full Stack Designer, Nantes, Pays de la Loire, France
- Mei Chen 🦋, LLM Psychologist | Lead Product Engineer | Delivering Agentic Experiences, Toronto, Ontario, Canada
- Shoshannah Tekofsky, LLM Psychologist at AI Digest, Zwolle, Overijssel, Netherlands
- LinkedIn Member, LLM, psychologist, mediator, Prague, Czechia
OpenAI acquired Astral!. This will likely slow down the new wonderful tools accelerating the Python ecosystem. Like with PromptFoo and OpenClaw, this seems to be about talent. The “acqui-hire” mode seems a clear niche career path now, and an alternative to getting hired (you get a much higher salary) or getting acquired (you take on much higher risk).
quickjs-emscripten lets you run isolated JS code securely in the browser, CloudFlare workers, NodeJS, and Deno. It compiles to WASM. @sebastianwessel/quickjs is a higher-level TS wrapper. Simon Willison
Manyana is a CRDT based version control system. It sounds like a good idea but I’m sceptical because merge conflicts are a “what should I do” problem more than “how”. With agents doing more merge conflict management, I am not sure this will offer a concrete benefit - but probably no harm either.
LLMs are able post-train LLMs on new topics. They’re improving fast. Jack Clark
Vibe Coding Fixer and AI Slop Cleaner are real job descriptions - which are morphing into enterprise offerings. But I still seem to be the only official LLM Psychologist
Notes from AI Services - Wrong Mental Models, Right Moment:
- AI services has 3 markets. Automatable work: vanishes in 2 years. Human-in-the-loop work: sustains. Judgement-driven: grows in importance.
- YC: don’t sell access to a tool for $50 a month, use the AI yourself and sell the finished work for $5,000.
- Sell output. Price on outcome. Sell to business, not IT.
- Sell accountability: proven success, with your guarantee.
- Sell authenticity: a brand story representing uniqueness, character, … or whatever… something people respect.
Data transfer between GPU and memory is a bottleck and three approaches are emerging. #
- Taalas is etching LLMs into the chip. Llama 8b runs at 17,000 tok/s (H200 is at 230 tok/s).
- d-Matrix is moving compute into SRAM memory chips. 30,000 tok/s for Llama 70b. Cerebras and MatX are similar: memory-oriented.
- FuriosaAI minimizes data movement. Groq and Sambanova are similar.
- But in the long run, commodity technology usually beats integrated stacks.
GPT 5.4 Nano ($0.2/MTok) and Mini ($0.75/MTok) are good options for bulk OCR, transcription, etc. as cost and quality comparable alternatives to Gemini Flash Lite and Gemini Flash. They can describe 75K photos for $50. Both models are better than GPT-5 Mini on most benchmarks.
Cool AI coding agent git prompt fragments:
- Use git bisect to find when this bug was introduced: …
- Find and recover my code that does …
- Sort out this git mess for me.
- Rewrite history removing …
- Split the last commit into multiple commits grouped logically.
- Start a new repo at … and build just this module … based on … with a similar commit history copying the author and commit dates.
Campaigns Are Knowledge Workers and the Tools Just Caught Up. A powerful framing. I saw this in action a few days ago when a friend was able to automate an outbound campaign with Claude Code.
EARS (Easy Approach to Requirements Syntax) is a simple structure for requirements. For example, “Users should be able to drag tasks between columns. The app needs to work offline too. Handle errors gracefully.” becomes the following - which AI can convert to and is easier to spot errors in. State machines and decision tables are useful alternatives, too.
- REQ-001 (Event): When the user drags a task card to a different column, the system shall update the task status to match the destination column.
- REQ-002 (State): While the application is offline, the system shall store task updates in local storage.
- REQ-003 (Event): When the application reconnects, the system shall synchronize locally stored updates with the server.
- REQ-004 (Unwanted): If synchronization conflicts occur, then the system shall display a resolution dialog to the user.
As of now, avoid using Claude.ai to create (large) visualizations. It runs forever and exhausts credits without generating anything. Claude Code works much better for this.

Sat, 30 Aug 2025 00:00:00 +0000

Here’s my current answer when asked, “How do I use LLMs better?”

Use the best models. O3 (via $20 ChatGPT), Gemini 2.5 Pro (free on Gemini app), or Claude 4 Opus (via $20 Claude). The older models are the default and far worse.
Use audio. Speak & listen, don’t just type & read. It’s harder to skip and easier to stay in the present when listening. It’s also easier to ramble than to type.
Write down what fails. Maintain that “impossibility list”. There is a jagged edge to AI. Retry every month, you can see how that edge shifts.
Wait for better models. Many problems can be solved just by waiting a few months for a new model. You don’t need to find or build your own app.
Give LLMs lots of context. It’s a huge enabler. Search, copy-pasteable files, past chats, connectors, APIs/tools, …
Have LLMs write code. LLMs are bad at math. They’re good at code. Code hallucinates less. So you get creativity and reliability.
Learn AI coding. 1. Build a game with ChatGPT/Claude/Gemini. 2. Create a tool useful to you. 3. Publish it on GitHub.
APIs are cheaper than self hosting. Don’t bother running your own models.
Datasets matter. Building custom models does not. You can always fine-tune a newer model if you have the datasets.

Comic via https://tools.s-anand.net/picbook/

Download the PDF.

Things I Learned - 24 Aug 2025

Sun, 24 Aug 2025 00:00:00 +0000

This week, I learned:

Pilots like to have fun, too. While awaiting landing clearance at Kolkata, our IndiGo pilot weaved tight curves just above the clouds at steep angles, giving us stunning views and a mildly thrilling experience. (Or maybe they were just following a flight path.)
Since LLMs allow ANYONE to become “good enough” in most fields (marketing, medicine, management), and so on, here’re are my guesses on the impact. ChatGPT
- Companies-of-one will grow. Sole founder can handle support functions.
- Specialists will generalize. Consultants will code. Marketers will design.
- Wages will compress. Seniors will earn less as juniors can do more.
- Layers will compress. Organizations need fewer hierarchies as 1 person can do more.
- Shadow apps will grow. Anyone can code. Users build apps with prompts, sheets, agents, outside of IT SDLC. Like Excel sheets.
- Governance will grow. Non-experts are acting like experts. Validation is more important.
- Uneconomical apps will thrive. 1:1 tutoring. Continous decision making or A/B testing.
- Leaders will convince better. Persuasion scales.
- Brand (authenticity, trust, skill), Channel (distribution, audience) and Data are primary differentiators.
Codex and Codex CLI now support image attachments.
Notes from discussion on education with Srikanth Nadhumuni
- Indian higher education has done better, e.g. with the IITs, than primary education, where ASER consistently shows that 5th graders can’t read 2nd grade books.
- The National Education Policy (NEP) is focusing on FLN (foundational numeracy and literacy). The goal is universal FLN by 2027.
- Teacing FLN in local languages beats English. Teachers, parents, community support are high. Learning English as a second language is faster. Other countries (France, Germany, Japan) do this.
- Voice LLMs could help, but may not be toddler-ready, nor strong enough in all local langauges.
- But high-quality textbook translation with local nuances is a one-time human-in-the-loop effort that AI can support.
- India’s 1 crore teachers have a mandatory 50 hrs/year training requirement that is largely under-implemented.
- Senthil Mullainathan is working on extracting features from student answers to questions and generating remedial content purely as a black-box. Results beat explainability.
⭐ Creating systems that rapidly improve from feedback is the key to success. Rapidity, quality of improvement, quantity of feedback are all enablers.
CBDC (Central Bank Digital Currency) is RBI’s Web 3.0 protocal. It allows purpose-driven transfers, e.g. money meant for education can only be spent on education.
Meta-prompts with placeholders is a prompt-improvement technique (similar to LLM interviewing). Have LLMs create the prompt with “fill-in-the-blanks”. This makes it much easier for people to fill out.
MassGen is a multi-agent orchestrator. Early days, experimental. It has multiple agents answer, then vote on each others’ answers, picking the best.
DSPy auto-optimizes prompts based on input-output pairs or evals. Typical improvements are ~10-20%. My opinion: avoid. It’s a good idea, but has too much abstraction that hides the implementation. Worth learning from but not implementing unless you (a) have evals + metrics and (b) you KNOW you need to change models and (c) it’s a long-term project where the learning curve is worth it. Claude and ChatGPT
How LLM “Attention” works: It takes each word’s embedding, moves it closer to similar words’ embeddings (e.g. Apple moves towards phone or orange depending on context). More similar words have a higher pull, like gravity. Luis Serrano
- Similarity isn’t symmetric. E.g. “Coke” moves “drink” more towards it, but “drink” pulls “Coke” less, since “drink” could refer to other things.
- Think of the pull (“Tinder similarity”) as “what A wants” (key matrix, which pulls other words) multipled by “what B offers” (query matrix, which is pulled by other words). This leads to two different similarity matrices.
- Multi-head attention is where a neural net gives different weightages to different similarity matrices based on context.
- Value matrix transforms the embedding space so that the next best next-word is more similar.
Reading the Obsidian docs is like a master class in Markdown note-taking. Features like properties, embedding YouTube, bases, tags, etc. provide food for thought. The ObsidianMD subreddit has interesting tips.
- Summarize takeaways on top of each section
- Use atomic notes: one file per idea. Link liberally
- YAML front-matter you can query, e.g. tags, project, status, …
- Use GFM admonitions, e.g. > [!NOTE]
- Store images in a predictable way, e.g. ![Alt text](./img/2025-08-21-screenshot.webp) – ALWAYS with alt text
- Use diff fences for edits / doc changes
- Task lists with inline dates, e.g. - [ ] 2025-08-21 Draft a letter
How to research better. Abhishek Divekar
- Have an objective when researching. Filter research based on that.
- Research backwards. Pick a relevant paper. Go through relevant citations. Typically, there are only 1 or 2 directly related ancestors.
- Don’t waste time searching. Gemini Deep Research is a great way to find and read papers.
- Don’t read the abstract. Read the introduction, which is the summary. It’s just a page. (The abstract is an LLM-ized versionof the introduction. Not as effective.)
MCPs aren’t much more useful than tool calling for developers. They’re powerful when packaging for external parties (non-developers, other teams, clients, etc.). Developers can work just fine with tool calling. Nitin Agarwal
Cybersecurity AI is an open-source LLM-based cyber-security tool that auto scans networks for vulnerabilities.
⭐ LLMs have solved several complex tasks (e.g. topic modelling, summarization). We need to adopt these as building blocks, like functions, and build better solutions. Abhishek Divekar
codex -c model_reasoning_effort=high lets you run Codex CLI with highest reasoning effort. This has a separate limit that resets every 5 hours. https://x.com/thsottiaux/status/1958035261947781262
Truly agentic systems have high Autonomy, Complexity, and Reliability. Workflows have low autonomy. Agentic systems with high autonomy currently aren’t very complex or reliable, but will improve over time. Deepak Sharma
Allow humans to intervene while agent loops execute, even unsolicited, to improve collaboration. Deepak Sharma
Given the early, experimental days of AI, the better KPIs might be more about experimentation (e.g. number of prototypes) than operational (e.g. cost reduction). Krishnakumar Menon
⭐ Policy-as-code is an emerging theme. Allow users to create their own guardrails policy. Or, take existing policy documents and convert them into an LLM-based evaluator. Krishnakumar Menon
⭐ “Potentially nitpicky but competitive advantage in AI goes not so much to those with data but those with a data engine: iterated data aquisition, re-training, evaluation, deployment, telemetry. And whoever can spin it fastest. Slide from Tesla to ~illustrate but concept is general.” Andrej Karpathy, Dec 2022
The skills AI coding needs are very similar to tech-lead’s or an architect’s. Tanika Gupta #ai-coding
- Estimating tool capability & task allocation
- Task breakdown
- Spec-ing: which of user personas, user-journey maps, wireframes, technical architecture, psuedo-code
- Standards: tech stack, tools, linters, security, doc standards
- Git versioning & collaboration
- Code review. (Using AI.) Providing feedback. Modularity, naming, …
- Automated validation
- Post-mortem. Learning from errors and successes, choices LLM made
The ROI of prompting carefully and using meta-prompts is high. Prompt clarity reduces iterations & dead-ends. The initial time spent (10-15 min) pays off with just a single reduced iteration (time to generate + review). Tanika Gupta
⭐ Prefer passing a spec.md to AI coding agents rather than directly typing-in prompts. This lets you meta-prompt and (collaboratively) iterate on the spec.md, version the prompts as specs, and generate specs as documentation. Tanika Gupta
⭐ Models need environments to learn. So far, we have been providing training data. But an environment to interact with, and learn from by itself, is more powerful. That requires a standard for environments. This is a powerful emerging area.
The crux of experimentation is the learning from a postmortem. From that perspective I have been experimenting a lot but not been documenting or learning from that. Decision logs with post mortem are a more apt device for me.
Gemini API includes a url_context tool to explicitly scrape websites. API
Ontologies are more than taxonomies or schemas. They’re truths or rules, e.g., “no person has more than two parents”. Helps consistency checking and inference. #
- Terminological knowledge (T-Box) is domain rules and constraints (e.g., “a student is a person who attends a course”).
- Assertional knowledge (A-Box) is instance-level facts (e.g., “Mary attends Physics 101”).
- Tools & Formats
  - SHACL. A W3C language for validating RDF graphs. ShEx is easier ad popular.
  - Notation3. A W3C assertion and logic language which is a superset of RDF.
  - EYE Reasoner. Prolog-based N3 (Notation3) reasoner. CLI + API-friendly. Can perform rule-based reasoning and generate new triples.
  - HermiT. OWL 2 DL reasoner. Can check consistency, classify ontologies, compute entailments. CLI and Java API. Modern, maintained.
  - Apache Jena. Java framework for RDF/SPARQL. Built-in reasoners (RDFS, OWL mini/micro/full). CLI via riot, arq (SPARQL query engine). Popular for RDF graph stores + inference.
Do developers feel this way? #ai-coding
In another example of vibe coding, an instructor for my TDS course vibe-coded most of an exam using Copilot and Sonnet. 6/8 questions worked one-shot. The two #ai-coding failures were interesting:
- One failed because of sample vs population stats. Copilot asked for sample variance but coded variance() instead of sampleVariance().
- Another failed because of rounding off. NumPy code rounds off differently from Python or JS code.
Meditation is about noticing distraction and returning to focus. So, distraction is necessary and good. #beliefs
#ai-coding can make us overconfident. (At least, it makes me overconfident.) They create surprisingly good output, but only ~20% of the time. I cannot commit to a specific task based on that. Instead, it’s better to rely on AI coding estimates for portfolios, e.g. promise to share something cool without mentioning what. Or do something cool first, then share.
Notes from podcast with Daniel Kahnemann. The Knowledge Project.
- Happiness is pleasure in the moment. Satisfaction is the meaningful story of our life. When we think, we want satisfaction. When we feel, we want happiness. The thinking brain and feeling brain optimize for slightly different things. E.g. The thinking brain packs the calendar with satisfying tasks that the feeling brain feels unhappy executing Both are good for us. We don’t know which matters more.
- Behavior change is harder than we think. Usually, it’s better not to expect success in changing others, or ourselves. Instead, understand why that behavior makes sense. Our behaviour is an equilibrium of forces. Weakening “bad” forces is easier than strengthening “good” forces, since it lowers tension. That’s inversion!
- Behaviours tell us more about situations than personality. We assume otherwise. That’s an attribution error.
- Motivation is complex. People can do bad things for good reasons and vice versa.
- “Feelings get in the way of clear thinking.” Example: I vibe-coded the last 2 questions of TDS GA7 on Claude Code. It didn’t run. I delayed fixing it for 5 days, afraid it would a major effort. It ended up a 2 min fix. It could have been major, but checking would have helped. Fear prevented that.
- Things that hamper clear thinking: intuition, emotion, beliefs. Beliefs are often formed based on people we admire or identify, not reason.
  - Prefer rules, systems and processes. Willpower is an illusion.
  - Delegate decisions to unemotional agents. (But agents misjudge perceived value of gain or loss!)
  - Break down the problem, analyze it, THEM form an intuition. Be disciplined in delaying intuition or forming an opinion
- Environment shapes thinking but it’s not obvious how, e.g. some people work better in noisy cafes. Some colors are more calming.
- Protect dissenters and dissent. It’s painful and costly, and needs nurturing.
NodeJS runs TypeScript files natively.
Codex can clone any GitHub repo. So I can ask it to pull one or more repos, understand their code, and use that as a template or reference. This makes my repositories (and others’) reusable templates. Using newer libraries and platforms becomes easier, too. #ai-coding
Tracking AI runs an IQ test on various LLMs every week. GPT 5 Pro leads, currently, followed by Claude 4 Opus and Gemini 2.5 Pro. It’s surprising how far behind GPT 5 is at the moment.
LLMs are faster than me. So me learning and doing what the LLM says is a bottleneck. Get out of the way. For example do not learn. Do not execute. Do not verify. Give LLMs the tools to deploy, verify and iterate to improve.

Meta AI Coding: Using AI to Prompt AI

Wed, 13 Aug 2025 09:43:24 +0000

I’m “meta AI coding” – using an AI code editor to create the prompt for an AI code editor.

Why?

Time. The task is complex. If the LLM (or I) mess up, I don’t want re-work. Review time is a bottleneck.
Cost. Codex is free on my $20 OpenAI plan. Claude Code is ~$1 per chat, so I want value.
Learning. I want to see what a good prompt looks like.

So, I wrote a rough prompt in prompts.md, told Codex:

prompts.md has a prompt under the “# Improve schema” section starting line 294.
This is a prompt that will be passed to Claude Code to implement.
Ask me questions as required and improve the prompt so that the results will be in line with my expectations, one-shot.

Codex answered:

I read the “Improve schema” section. A few specifics need your call so I can produce a single, precise prompt.

Masters vs layouts: Remove masters entirely and keep a layouts[], or remove layouts and keep masters[] with shapes acting as the layout? The bullets conflict.

Shape registry: Confirm .shapes is an object map keyed by id at every level (root, master/layout, slide), not arrays. Ordering via z only?

Merge semantics: Confirm deep-merge precedence root.shapes < mid-level (master/layout).shapes < slide.shapes, by id. For arrays like list.items, replace (not concat)?

Theme flattening: Move theme.colors and theme.fonts to root as colors and fonts, or keep theme but allow root aliases? Which do you prefer?

Back-compat: Keep support for old schema, or drop and add a migration utility (CLI/script) to transform old→new? If keep, how long to maintain?

Version: Bump to version: \"2.0.0\" for the new schema?

Validation: Add a JSON Schema file and validate inputs in slidegen.html() (fast fail)? If yes, filename path e.g., schema/slidegen.schema.json?

Tests and samples: Update all decks in tests/ (incl. shapes-demo.json) and tests/index.html to new schema only?

Overrides removal: Confirm slides[].overrides is removed entirely; all overrides via slides[].shapes only.

Any additional fields to normalize while we’re here (e.g., unify unit, enforce %|px, formalize border props)?

Reply with your choices. I’ll then deliver a single, one-shot prompt for Claude Code with exact schema, merge rules, migration plan, test updates, and acceptance criteria aligned to your coding guidelines.

I replied:

masters versus layouts: I want you to remove masters entirely and keep a layouts[]. There currently are layouts inside masters, move them up to one level.

.shapes is not an object map currently. It SHOULD be an object map keyed by id at every level and not arrays and it should be ordered via z only.

The deep merge precedence that you have listed is correct.

For list.items replacement instead of concatenation is correct.

Since we are flattening the themes, we do not want theme at the root level and we do not want theme.colors/fonts aliases.

We do not want to support old schema.

We do not want to migrate from old schema.

We do not want to bump up the version.

We do not want to create a json schema file.

We do want to update all the tests including shapes-demo.json.

We do want to remove slides.overrides entirely, no other fields to normalize.

If you have any other questions, please ask. Else update prompts.md

Codex gave an output. I reviewed it and sent one more prompt:

Drop the house rules.
Allow the root .bg to be overridden by layouts[].bg to be overridden by slides[].bg – and all the .bg values can be { fille, image, image_fit }
layouts must be an object with the .id as key instead of a field. If any of this is unclear, please ask me. Else update prompts.md.

It finally settled on this remarkable prompt.

This prompt was so clear it was easy to review and easy for Claude Code to follow (no inconsistencies).

I plan to use this technique more. You might want to try it, too.

Things I Learned - 10 Aug 2025

Sun, 10 Aug 2025 00:00:00 +0000

This week, I learned:

OpenAI supports a tool "type": "custom" that lets it write code as an argument to a tool call. Great for code / SQL generation. Even more powerfully, you can generate output following specific grammars, e.g. STL files, PostgreSQL dialect, Mermaid/PlantUML diagrams, OpenAPI specs, Vega-Lite JSONs, Cron expressions, GraphQL SDLs, Dockerfiles, Terraform HCLs, or any DSL! # #ai-coding
The OpenAI playground has a GPT-5 Prompt Optimizer that can migrate prompts to GPT-5.
Docsify 4.13.1 is 2 years old and uses marked@1.2.9 which is 5 years old. Newer plugins like marked-directive don’t work with it. Though docsify v5.0.0-rc1 is in development, it may be the better option for modern Markdown plugins. Here’s sample code.
CommonMark has a powerful directive syntax proposal that lets you add classes, attributes, and arbitrary plugins to Markdown. For example, :abbr[MD]{#id .class title="Markdown"} for inline directives. Plugins exist for marked, markdown-it and remark.
biomejs and dprint are gaining traction as prettier alternatives. I’m yet to try them but keen to explore.
- Skip biomejs for now. It uses tabs (not spaces) and does not respect .gitignore by default. Handling these is too much work.
⭐ Code generation is more flexible than tool calling. LLMs can’t write a tool-call loop, for example, but they can write code to run an API in a loop. So, I like telling the LLM to “write code using these APIs” than giving it APIs to tool-call. #ai-coding
npx -y ccusage is an easy way of summarizing your Claude Code usage and cost. My cost so far (since 21 July) is about $10. The median session cost is ~50 cents. Most of it ($7) was from a single temporary coding chat that I kept continuing for way too long, building up the context window. #
defuddle can be used in the browser to get the main content from web pages. A replacement for Mozilla Readability. #
Modern Node.js Patterns for 2025 include these 5 features I’m excited by:
- Single-executable bundling. node --experimental-sea-config sea-config.json builds standalone binaries.
- ES Modules. Use node: prefix for built-in imports. import { createServer } from 'node:http';
- Watch mode. Use node --watch file.js auto-reloads when file.js or dependencies change.
- Env file. Use node --env-file=.env loads .env as environment variables.
- node:test is a full-featured test framework with --watch and coverage.
Concise explanations speed up decisions because they’re faster to read and understand (obvious). They’re also easier to combine with other ideas (less obvious). #
I’ve been uncertain about htmx for some time now. This tutorial, HTMX is hard, so let’s get it right, convinced me that it’s too far from my mental model, so I’m unlikely to ever use it.
⭐ Slow, effortful practice (spaced recall, interleaving topics, self-testing) builds lasting knowledge but looks inefficient and doesn’t help with exams. # #beliefs
GitDoc VS Code extension auto-commits and syncs notes. I dropped gitwatch in favor of this.
It’s interesting that Gemini Deep Research cannot access Google Drive while Gemini can. On the other hand, ChatGPT Deep Research can access Google Drive but ChatGPT cannot.
A trend that AI coding will only accelerate: “It is now possible for tiny teams to make principled software that millions of people use, unburdened by investors. … you need far less money and far fewer employees to reach far more customers. That wave is only just beginning.” # #ai-coding
Typed languages are better suited for vibe coding. This will likely lead to the growth of typed languages (TypeScript, Rust, Go) but also of typing in untyped languages (e.g. Python) # #ai-coding
Instead of Celery, Redis, Kafka, etc. as task queues, we could the file system as a message queue. For example, pending/task-01.json moves to wip/task-01.json to done/task-01.json. Folders for state/tags, files for task details.
Foam is a note-taking VS Code extension. The WikiLinks, tags and backlinking features align naturally with Markdown note-taking. Via Steph Ango who uses Obsidian which nudged me to search for WikiLink-ing features in VS Code.
I’m an open data hawk. But here are things I should remind myself of. #
- Privacy incubates creativity. People self-censor when watched. Privacy shields fragile ideas.
- Power assymetry. Big players can leverage openness more, e.g. Cambridge Analytics + Facebook data.
- Context matters. What’s harmless in one setting can be toxic in another.
- One-way door. Data can’t be unshared. Don’t scrap brakes dreaming of perfect roads. Anticipate tyrannical regimes / cultures.
- Not your call. You don’t share your neighbour’s medical records.
One Punch Man is available as manga. I watched the anime first and assumed that came first. Apparently not.
⭐ In “kind” environments (stable rules, rapid and accurate feedback), specialize. In “wicked” environments (rules shift, feedback is noisy/late), generalize. ChatGPT
Models’ ability to orchestrate longer workflows will improve. Factor that into your application design. Claude Code can already handle over 70 tasks in a workflow
What happens when LLMs play Chinese Whispers / the Telephone Game? Here are learnings. ChatGPT
- Drift increases faster than linear with hops.
- Bigger models do better, but constrained prompts (“Copy the text exactly; change nothing.”) have a bigger impact.
- Low temperature improves copying fidelity.
- But even after “forgetting”, LLMs reproduce rare content if they’re trained on it.
“In fact, React Native looks set to become the most engine-agnostic JavaScript runtime around”. The Many, Many, Many, JavaScript Runtimes of the Last Decade
OMDb (simple) and TMDb (comprehensive) are API-friendly alternatives to the IMDb.
copyparty seems one of the most feature-rich file servers out there. Single Python file, runs on any OS, works with any client, and optimized for speed. Video
Quotes I enjoyed from Linus Torvalds’ TED interview
- I want to not have external stimulation. You can kind of see, on the walls are this light green. I’m told that at mental institutions they use that on the walls. It’s like a calming color. … the main thing I worry about in my computer is – it really has to be completely silent. If the cat comes up, it sits in my lap. And I want to hear the cat purring.
- I did not start Linux as a collaborative project. I started it as one in a series of many projects I had done at the time for myself, partly because I needed the end result, but even more because I just enjoyed programming.
- I’m actually not a people person. But I do love other people who comment and get involved in my project.
- The big point for me was not being alone and having 10, maybe 100 people being involved. Going from 100 people to a million people is not a big deal – to me. Well, I mean, maybe it is if you want to sell your result then it’s a huge deal. But if you’re interested in the technology and you’re interested in the project, the big part was getting the community.
- So Git is my second big project, which was only created for me to maintain my first big project. And this is literally how I work.
- Well, I do code for fun – but I want to code for something meaningful so every single project I’ve ever done has been something I needed.
- Apparently, my sister said that my biggest exceptional quality was that I would not let go.
- I can’t do UI to save my life.
- Good taste is about really seeing the big patterns and kind of instinctively knowing what’s the right way to do things.
- Companies like Google and many others have made, arguably, like, billions of dollars out of your software. Does that piss you off? No. No, it doesn’t piss me off for several reasons. And one of them is, I’m doing fine. But the other reason is – I mean, without doing the whole open source and really letting go thing, Linux would never have been what it is.
- I think one reason open source works so well in code (is that …) Code either works or it doesn’t.
The Uses This site has interviewed professionals for decades. From their repo I scraped the top developer apps post 2020:
CloudFlare has an Iceberg data catalog in R2 Data Catalog. Iceberg is like Parquet but supports metadata, time-travel, and schema edits. But I’m yet to find a single publicly accessible Iceberg catalog. Its open-data adoption is not as high as Parquet’s. Apache Iceberg vs Parquet
Observable Notebook 2 is the new notebook format from Mike Bostock. It is vanilla JS and embeddable into other pages. THis would have been a big deal 2 years ago, but with the LLM ecosystem today, I’m not sure if it matters as much.
To add CORS support to CloudFlare pages protected by Zero Trust, add a _headers file to your repo. (This is different from the Zero Trust CORS which allows automated logins.) Sample _headers that lets logged-in users fetch pages via fetch("...", { credentials: "include" }):
```
/*
  Access-Control-Allow-Credentials: true
  Access-Control-Allow-Origin: https://your-site.example.com
  Access-Control-Allow-Methods: GET, HEAD
  Access-Control-Allow-Methods: *
```
As corporates restrict the use of LLMs, I see employees purchasing personal laptops to use LLMs on. An interesting trend!
openai-python has a CLI. You can run uvx openai api chat.completions.create --stream -m gpt-4.1-nano -g developer 'Translate to Chinese' -g user "Hello" for example
Anthropic has an OpenAI compatible API at https://api.anthropic.com/v1/.
Claude Code tips from Things that didn’t work by Armin Rocher #ai-coding
- Speech-to-text. Cannot stress this enough but talking to the machine means you’re more likely to share more about what you want it to do.
- I maintain some basic prompts and context for copy-pasting at the end or the beginning of what I entered.
- I ended up preloading executables on the PATH that override the default ones, steering Claude toward the right tools, e.g. running python asks it to use uv.
- I use the task tool frequently for basic parallelization and context isolation.
- Simply taking time to talk to the machine and give clear instructions outperforms elaborate pre-written prompts.
- Forcing myself to evaluate the automation has another benefit: I’m less likely to just blindly assume it helps me.
Research indicates that we don’t know in advance which prompts will help. Evals beat prompt engineering. Ethan Mollick

Things I Learned - 08 Jun 2025

Sun, 08 Jun 2025 00:00:00 +0000

This week, I learned:

There’s a very interesting HN discussion on the AI coding of CloudFlare Workers OAuth Provider. My takeaways: #ai-coding
- Write very comprehensive specs.
- Use LLM to create the specs.
- Reviewing is a skill we need to develop.
- Understanding others’ code takes effort.
- But LLM code is easier to review because it’s immediate and has no ego.
- Unit tests are critical.
- Use LLMs for well understood specs, APIs, platforms and libraries to really save time.
- Logic-less stuff like Markdown, JSON and HTML templates are a LOT easier to verify. Do more of that.
- We can only make so many decisions in a day. AI coding saves us that effort.
- Experts are not experts in every area. They benefit from LLMs in other areas.
- LLMs are great for rubber ducking. Speaking and speccing really help.
- LLMs make mistakes. So do most humans.
- LLM speed makes coding more exhausting.
- Use LLMs to understand codebases.
- AI coding could reduce demand for developers. E.g. Sysadmin demand plummeted with cloud infra and infrastructure-as-code.
- But, niche use cases could grow, like how demand for photographers grew despite point-and-shoot cameras.
- Transaction cost of hiring even 1 person is high and that will likely be a bottleneck. Plus people can use LLMs themselves, so that will dampen niche demand.
Google Introduced Google Vids last year. It’s a video creator styled like PowerPoint. Looks promising.
FastMCP looks like an easy way to build MCPs. (Yet to try it)
O3 and to a lesser extent, Claude Sonnet 4, are the models that can accurately summarize complex subjects and create a list of links without hallucinations. Ref
Claude Trace lets you record all interactions with Claude Code.
Elevenlabs now supports emotion and interruption. Ref
Thinking longer alone is not enough to scale intelligence. We need better models, too. Ref
Indian High Court judgements are now available as a public dataset on AWS and updated periodically. Ref
A few observations in AI code editors’ styles.
- O3 is better at finding bugs than Jules, which tends to try and fix them rather than discover them.
- Codex writes more minimal edits in PRs than Jules, which is more verbose.
- Claude Code remains the best at faithfully creating and updating front-end apps.
Deep Research is great for fact-checking my notes! ChatGPT
Web bench evaluates LLMs in web development. Claude Sonnet remains ahead.
Vision language models heavily rely on past training and miss changes they don’t expect. Ref
Pure CSS tooltips are possible. Julia Evans
Google has an OAuth Playground which is a convenient way to get a temporary OAuth token.
At the moment, the best speech to text for Android appears to be ChatGPT’s transcription. The default Android text to speech (which I thought was good) no longer feels adequate. Gemini mis-hears and doesn’t wait till I’m done. Whisper ASR has poor noise cancellation and a 30 second limit.
anyascii is a better alternative to unidecode. It supports more characters and also supports transliteration. I use it to strip out non-ASCII in ChatGPT’s output. Commit
DeepWiki creates docs for humans GitHub repos. Example. It’s verbose, human-facing, and does not understand the nuances of context and implications. Context7 creates llms.txt for LLMs. Example. It’s concise, example-oriented, and works only if there are code snippets relevant (e.g. API calls) that can be generated from the codebase. Like creating an llms.txt automatically, e.g. https://context7.com/textualize/textual/llms.txt #ai-coding
We will move towards an organization structure where developers are embedded with business teams rather than working as a separate group. Sort of like embedded executive assistance instead of a central typing pool. Making AI Work

When to Vibe Code? If Speed Beats Certainty

Tue, 20 May 2025 10:59:50 +0000

I spoke about vibe coding at SETU School last week.

Transcript: https://sanand0.github.io/talks/#/2025-05-10-vibe-coding/

Here are the top messages from the talk:

What is vibe coding

It’s where we ask the model to write & run code, don’t read the code, just inspect the behaviour.

It’s a coder’s tactic, not a methodology. Use it when speed trumps certainty.

Why it’s catching on

Non-coders can now ship apps - no mental overhead of syntax or structure.
Coders think at a higher level - stay in problem space, not bracket placement.
Model capability keeps widening - the “vibe-able” slice grows every release.

How to work with it day-to-day

Fail fast, hop models - if Claude errors, paste into Gemini or OpenAI and move on.
Don’t fight sandbox limits - browser LLM sandboxes block net calls; accept & upload files instead.
Cross-validate outputs - ask a second LLM to critique or replicate; cheaper than reading 400 lines of code.
Switch modes deliberately - Vibe coding when you don’t care about internals and time is scarce, AI-assisted coding when you must own the code (read + tweak), Manual only for the gnarly 5 % the model still can’t handle.

What should we watch out for

Security risk - running unseen code can nuke your files; sandbox or use throw-away environments.
Internet-blocked runtimes - prevents scraping/DoS misuse but forces data uploads.
Quality cliffs - small edge-cases break; be ready to drop to manual fixes or wait for next model upgrade.

What are the business implications

Agencies still matter - they absorb legal risk, project-manage, and can be bashed on price now that AI halves their grunt work.
Prototype-to-prod blur - the same vibe-coded PoC can often be hardened instead of rewritten.
UI convergence - chat + artifacts/canvas is becoming the default “front-end”; underlying apps become API + data.

How does this impact education

Curriculum can refresh term-by-term - LLMs draft notes, slides, even whole modules.
Assessment shifts back to subjective - LLM-graded essays/projects at scale.
Teach “learning how to learn” - Pomodoro focus, spaced recall, chunking concepts, as in Learn Like a Pro (Barbara Oakley).
Best tactic for staying current - experiment > read; anything written is weeks out-of-date.

What are the risks

Overconfidence risk - silent failures look like success until they hit prod.
Skill atrophy - teams might lose the muscle to debug when vibe coding stalls.
Legal & compliance gaps - unclear licence chains for AI-generated artefacts.
Waiting game trap - “just wait for the next model” can become a habit that freezes delivery.

The Magic of Repeated ‘Improve It’ Prompts

Fri, 18 Apr 2025 10:02:37 +0000

What if you keep ask an LLM Improve the code - dramatically!?

We used the new GPT 4.1 Nano, a fast, cheap, and capable model, to write code for simple tasks like “Draw a circle”.

The we fed the output back and asked again, Improve the code - dramatically!

Here are the results.

Draw a circle rose from a fixed circle to a full tool: drag it around, tweak its size and hue, and hit “Reset” to start fresh.
Animate shapes and patterns turned simple circles and squares into a swarm of colored polygons that spin, pulse, and link up by distance.
Draw a fully functional analog clock grew from a bare face to one that builds all 60 tick marks in code—no manual copy‑paste needed.
Create an interactive particle simulation went from plain white dots on black to hundreds of bright, color‑shifting balls that bounce, die, and come back to life.
Generate a fractal changed from a single Mandelbrot image to an explorer you can zoom, drag, and reset with sliders and the mouse wheel.
Generate a dashboard jumped from static charts to a live page with smooth card animations, modern fonts, and a real‑time stats box.

A few observations.

Models are getting much more reliable. Even a low cost model like GPT 4.1 Nano wrote error-free code in ~100 retries.

When pushed, they tend to brag. They attach grand titles like “Ultimate Interactive Circle” or “Galactic Data Universe”. They sin out flash descriptions like “This dramatically upgraded clock features a pulsating neon glow, animated pulsing background glow, highly stylized tick marks, …”

A simple prompt like Improve it can spark new ideas, revealing features such as:

How to Visualize Data Stories with AI: Lessons

Mon, 14 Apr 2025 08:21:24 +0000

I tried 2 experiments.

Can I code a visual data story only using LLMs? Does this make me faster? How much?
Has GitHub Copilot caught up with Cursor? How far behind is it? Can I recommend it?

So I built a visual story for Lech Mazur’s elimination game benchmark (it’s like LLMs playing Survivor) using only the free GitHub Copilot as the AI code editor.

SUMMARY: using LLMs and AI code editors make me a bit faster. It took me 7 hours instead of 10-12. But more importantly:

I procrastinate less. (“Oh, LLMs will make it easy.”)
I get stuck less. (“Oh, LLMs will know that.”)
I avoid ambitious designs less. (“Oh, LLMs will figure something out.”)

Also: GitHub Copilot is almost as good as Cursor at editing code, but slower at applying the edits. I’m perfectly happy recommending the free tier for beginners.

Here’s a breakdown of the process I followed, along with the most insightful lessons I learned.

Research usefulness

I usually visualize data for fun. But Naveen’s pops into my head, asking, “But Anand, what’s the use of all this?” So, I asked O1-Pro: “What are ways in which this can help Straive push its AI business?”

Turns out it can help Straive’s business by pitching multi-agent capabilities that can be useful in:

Understanding AI safety and alignment
Teaching material on group dynamics and negotiation
Scenario-based data-driven decision making to avoid groupthink
Model interactions across reviewers, authors, editors to model bias, integrity, review best practices
Research tool for simulating interactions

Learnings:

💡 Ask LLMs why something is useful. You’ll invariably find plausible uses, even if you’re doing it just for fun.

Ideate visual representations

To expore visualization options, I created the prompt by:

Copying a part of the README.md
Copying part of a log file

Then I added my requirements (which took 10-15 minutes to think of.)

I would like to visualize each game interactively. The authors have created a visualization that looks like the image attached. I would like to do better. Specifically, I’d like to:

Allow the user to step through each stage or play each step in sequence, jumping to any step. (They should be able to link to any step as well.)

Show the game, round, sub-round prominently

Show what the model is saying or thinking NEXT to the model, making it easy to read

Show alliance proposals and rejections as they form, ideally moving the models around as they seek to pair up. Rejections and replacements should be clearly visible

Once alliances are formed, group models together

Clearly show the voting process: who voted to eliminate which which model, how many elimination votes has each model received

Clicking on each model should show all the model’s thoughts and messages up to that point

Keeping these in mind, suggest diverse ways to visualize each step of the game. The primary goal is to make the game easy to follow and understand and tell a GRIPPING, ENGAGING story about the politics of LLMs. Like a Survivor reality show.

I asked both O1 Pro and Gemini 2.5 Pro (exp) for visualization ideas. I liked Gemini’s better. For example, Gemini said,

“Private Conversations: Dim the main stage slightly. Highlight the currently conversing pair.
“Voting Booth Visualization: As each private_vote_reason appears, briefly show the voter’s avatar and their reason text (maybe in a “thought bubble” style) next to the target they intend to vote for.”

But O1 Pro gave me a few powerful ideas. The best was an alliance table:

“Create a table with columns representing each model, rows representing rounds. Each cell shows the ID of the ally that model allied with in that round. If it’s 3+ consecutive alliances, collapse them with a vertical line. If the model was eliminated or had no alliance, leave it blank or use a placeholder icon.”

Learnings:

💡 Ask LLMs for visualization ideas. They’ll suggest things you didn’t think of.
💡 Ask multiple LLMs. Each has a different style of thinking.

Prototype the visual

I stiched together pieces of the UI description and asked GPT 4o to create an image. This took 10-15 minutes. Private chat:

Here’s how I plan to visualize this.

Overall Interface & Navigation

Timeline Scrubber: A prominent timeline at the bottom or top, showing rounds and sub-rounds (conversations, pairing, voting, elimination). Users can click, drag, or use next/prev buttons to navigate. Each step should be linkable (e.g., using URL hashes). Add play/pause controls for auto-stepping.

Game State Dashboard: Always visible area showing: Game ID, Round, Sub-round, Players Remaining, Players Eliminated (Jury).

Central Stage Layout: Models represented as avatars (could be simple circles/icons or more thematic representations) arranged in a central area. Their positions and connections change based on game events.

1. Public Conversation (Round Start)

Talking Heads Circle: Arrange player avatars in a circle. When a player “speaks” (their message appears in the log):

Highlight their avatar.

Display their message in a speech bubble next to them.

Fade previous messages slightly or stack them briefly.

Engaging Element: Animate the avatar slightly (e.g., subtle pulse or glow) when they speak.

Chat Feed Style: A more traditional chat interface on one side, linked to avatars on the main stage. Clicking a message highlights the avatar and vice-versa.

Engaging Element: Use distinct colors or icons for each player avatar and their corresponding messages.

2. Alliance Formation (Preference Proposals/Outcomes/Results)

Dynamic Pairing Dance:

Proposal: An animated arrow or beam shoots from the proposer’s avatar to the target’s avatar. Display text like “P1 proposes to P6 (Rank 0)”.

Acceptance: The arrow solidifies, perhaps pulsing gently. A “Matched” icon appears.

Rejection: The arrow bounces off or shatters. A “Rejected” icon appears briefly.

Replacement: Show the existing accepted proposal being visually “bumped” or overridden by the new accepted one. Clearly label it “Replaced Px”.

Engaging Element: Physically move the avatars closer when a proposal is made, snapping them together when accepted, and pushing them apart on rejection. Use distinct sounds for proposal, acceptance, rejection, replacement.

Preference List Display: When hovering or clicking a player, show their ranked preference list as they build it during this phase. Highlight the status (proposed, accepted, rejected).

Final Pairs: Once preference_result occurs, rearrange the avatars so matched pairs are visually grouped together on the stage, perhaps connected by a clear line or within a shared bounding box.

3. Private Conversations (Paired Chats)

Private Chat Rooms: Dim the main stage slightly. Highlight the currently conversing pair. Display their private messages in separate chat windows or adjacent speech bubbles clearly linked to the pair.

Engaging Element: Use a “spotlight” effect on the active pair. Allow users to click other pairs to view their simultaneous conversations.

Connection Lines: Draw lines between the paired avatars during this phase. Clicking a line could bring up the conversation history for that pair in that round.

Engaging Element: Make the line pulse or glow when new messages are exchanged between the pair.

4. Voting (Reasons & Votes)

Voting Booth Visualization:

As each private_vote_reason appears, briefly show the voter’s avatar and their reason text (maybe in a “thought bubble” style) next to the target they intend to vote for.

As each vote occurs, draw a clear, perhaps slightly dramatic, animated arrow from the voter to the target avatar.

Vote Tally: Display a running count of votes received next to each player’s avatar (e.g., a red badge with the number). Increment this visibly as each vote comes in.

Engaging Element: Use a distinct color (e.g., red) for voting arrows. Add a subtle “target lock” animation on the player receiving a vote. Show if the vote was public or private (maybe different arrow styles).

5. Elimination

Spotlight & Fade: When the elimination event occurs:

Put a dramatic spotlight on the eliminated player.

Display the reason (tie-break, random pick if applicable).

Visually “grey out” or fade the eliminated player’s avatar and move them to a designated “Jury Box” area.

Engaging Element: A brief, dramatic animation or sound effect for elimination. Update the “Players Remaining/Eliminated” dashboard instantly.

6. Jury Speeches & Voting (Final Round)

Finalist Stage: Place the two finalists prominently center stage. Move the Jury avatars to a visible “Jury Box”.

Speech Display: As each finalist gives their speech (subround: 900), display it clearly next to their avatar, perhaps like a closing statement.

Jury Deliberation:

As each private_jury_reason appears, briefly highlight the juror and show their reasoning (maybe visible only on hover/click to avoid clutter).

Show jury votes accumulating for each finalist, similar to the elimination voting tally, but perhaps with a different visual style (e.g., gold stars).

Engaging Element: Build suspense by revealing jury votes one by one or after a short delay.

7. Final Results

Winner Announcement: A clear “Winner” banner or crown appears over the winning avatar.

Rank Display: Show the final ranks clearly, perhaps arranging avatars on a podium or listing them with their rank and partial points.

Game Summary: Offer a summary view showing key stats or moments from the game.

Interactivity (Clicking on Models)

Player Dossier: Clicking any avatar (active or jury) should open a panel or overlay showing:

Player ID & Model Type.

Their full message history (public and private, filterable by round/type).

Their voting history (who they voted for, who voted for them).

Their alliance history (proposals made/received, final pairs).

Their final rank/status.

Engaging Element: Use this panel to show hidden information like private_vote_reason after the vote has occurred.

Draw the user interface for this EXACTLY as it would appear on the screen.

Here’s the prototype it created.

Based on this, I drew out my own, revised, visual:

Learnings:

💡 LLMs can create visual prototypes. ChatGPT’s new 4o image generation converted the description into an acceptable image. Needs to improve, but enough to ideate.
💡 Improving is less work than creating. I rarely sketch visualizations. (Too lazy.) But since this prototype was there, and had some parts that were **WRONG**, I just had to fix it! 🙂

Break down the task

I then described the application to O1 Pro break down this task. Private chat

The URL looks like /#?game=286&line=4 indicating that game 286.jsonl must be loaded and line 4 is the current step we’re in.

The navbar has:

An app title

A game state dashboard with the game number (dropdown), round (number), stage (e.g. voting, alliances, etc.), players (number of players still active)

A timeline scrubber (a range slider) allowing users to jump to the specific line. This changes the URL which then triggers a change in app state.

A light/dark theme picker

The stage on the left as a set of models arranged in a circle. Each model/player has a unique and distinct color, a number inside it indicating the player number, a label above it indicating the model name (e.g. GPT-4o), a set of red dots below it when it receives an elimination vote, an arrow pointing from one model to another when a model talks to, plans an alliance with, or votes to eliminate another model. The arrow color depends on the action. When a model performs any action (speaking publicly / privately, voting, allying, etc.) the conversation or action summary is displayed in a semi-transparent overlay at the center of the circle. Eliminated models are shown with a 10% opacity. Allied models are redrawn next to each other with a line connecting them.

The sidebar on the right has 3 collapsible sections.

CHAT: Shows the history of each model’s public or private conversations. Each conversation begins with a circle with the model/player number in the same color as on the stage, followed by the model name. For private conversations, this is followed by an arrow pointing to the target model/player’s numbered & colored circle. This is followed by the text of the conversation. Private conversations are in a light red background.

ALLIANCES. This is a tabular representation where columns are models that form an alliance. Each row represents a round. The cells contain the model the model in the column header allied with. All models are numbered and colored. If a model in the column header was eliminated, the cell is empty. If it did not ally, the cell shows an empty grey circle. If 3+ consecutive cells show the same model in a column (i.e. the model did not switch alliances), we can replace the middle cells with a vertical line.

ELIMINATIONS. This tabular representation works exactly the same way as alliances, except it captures eliminations. Each column represents a model that voted for elimination. Each row represents a round. The cell contains the model the model in the column header voted to eliminate. All models are numbered and colored. If a model in the column header was eliminated, the cell is empty. If 3+ consecutive cells show the same model in a column (i.e. a model consistently voted against the same model), we can replace the middle cells with a vertical line.

I’d like to use an AI code generator to generate this visualization. Giving the entire spec at once is too much for it to build. I’d like to see the output step by step as well and propose changes. How might I break up this task?

Here’s its (rather good) breakdown:

Plan Your Data Structures
Basic Backend/Server Setup (If Needed)
Minimal Front-End with a Single View
Implement the Timeline Scrubber & URL Sync
Core Stage Visualization (Circle of Players)
Arrow/Line Visualization for Actions
Sidebar 1: CHAT Section
Sidebar 2: ALLIANCES Section
Sidebar 3: ELIMINATIONS Section
Refinements, Theming, & Final Touches

Learnings:

💡 Ask LLMs to break down your task. Its breakdown was better than mine.

To document my workflow, I decided to commit each stage of progress. At this point, I made the first commit to the repo documenting the process so far.

🔗 Commit

Minimal Front-End with a Single View

I skipped Step 1 (my mistake - I was forced to do it later) and didn’t need Step 2 (Backend/Server). So I began scaffolding, i.e. Step 3: Minimal Front-End with a Single View.

At this point, I switched over to GitHub Copilot in Edit mode using Claude 3.5 Sonnet. This is what I used for the rest of the session.

I ran this prompt:

Create an index.html using Bootstrap via CDN. Scaffold it with a navbar

The navbar has:

An app title (Elimination Game)
A game state dashboard with the Game (dropdown), Round (number), Stage (e.g. voting, alliances, etc.), and Players (number of players still active)
A timeline scrubber (a range slider) allowing users to jump to the specific line. This changes the URL which then triggers a change in app state.
A light/dark theme picker. Here is the code for the theme picker. Use the same CDN links overall

<!-- Include Bootstrap 5.3+ and Bootstrap icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>

    <!-- Copy this dropdown anywhere in your page, e.g. inside a navbar -->
    <div class="position-relative" role="group" aria-label="Toggle dark mode" title="Toggle Dark Mode">
      <button class="dark-theme-toggle btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Open navigation menu">
        <i class="bi bi-circle-half"></i> <span class="d-lg-none ms-2">Toggle theme</span>
      </button>
      <ul class="dropdown-menu dropdown-menu-end">
        <li><button class="dropdown-item" data-bs-theme-value="light"><i class="me-2 bi bi-sun-fill"></i> Light</button></li>
        <li><button class="dropdown-item" data-bs-theme-value="dark"><i class="me-2 bi bi-moon-stars-fill"></i> Dark</button></li>
        <li><button class="dropdown-item" data-bs-theme-value="auto"><i class="me-2 bi bi-circle-half"></i> Auto</button></li>
      </ul>
    </div>

  </div>
</nav>

Below the navbar is a section with a stage on the left and sidebar on the right. The stageon the left will contain a large responsive square SVG. The sidebar on the right contains 3 collapsible cards: Chat, Alliances, Eliminations.

It generated this scaffolding.

Learnings:

💡 Claude 3.5 Sonnet remains an excellent model to generate UI. Claude 3.7 Sonnet is even better, but is not currently available in the free Copilot subscription.
💡 Coders micro-manage LLMs. I think a novice will be more efficient and get better results than me. For example:
Did I need to give it the code snippet? Could I have given it a link?
Did I need to say “a range slider” or specify that Round must be a “number”, etc? Could it have inferred?

🔗 Commit

Improve the scaffolding

I gave some feedback on the scaffolding and asked for improvements.

Make the navbar always dark

The sidebar cards must be independently collapsible

For the Game, Round, Stage, and Players, show the label above the value. The label must be small and the value must be large.

Use only me-* margins on the navbar to ensure that there is no left margin mis-aligning the elements at low width. Also place the elements inside a collapsible navbar section at low widths

The stage must have a bottom margin to avoid touching the sidebar’s top on low-width screens

This was the result:

That prompted more feedback from me:

Prefer Bootstrap classes over <style> wherever possible.

Style the “Game” to look exactly like the round, stage, and players. The size of the label and value should match for all 4 elements perfectly.

Ensure that the labels round, stage, players will be visible in light mode against the dark navbar.

At this point, I made 3 manual edits because I felt I could do these better than the LLM:

Broke the “Elimination Game” in the navbar into 2 lines
Replaced fs-5 with fs-4 to get the values have the exact same size, and removed redundant styling on the game selection
Format document with HTML Language Features

Learnings:

💡 Experienced coders are good with feedback. It took me under 10 seconds to spot each problem in the output and code. Writing the feedback felt natural.
💡 Experienced coders need retraining to instruct rather than code. My instinct was to code immediately rather than to prompt.
As soon as I thought of one feedback, I had to fight the urge to fix it and write the feedback instead.
Even when instructing was easier, I chose to code it. e.g. breaking the “Eliminination Game” in the navbar into 2 lines,
Coding can be better if you don’t know what to do. I toggled the font size between fs-4 and fs-5 in rapid succession to figure out the right size.
But I could have experimented by asking the LLM to build a font size toggle or slider!
💡 LLMs could turn coders into good lead developers or managers. Pity.

🔗 Commit

Implement the Timeline Scrubber & URL Sync

On to Step 4: Implement the Timeline Scrubber & URL Sync.

I copied a few logs into a temporary logs/ folder and said:

Create a script.js as an ES module and include it from index.html.

On load, fetch logs/index.txt which contains all log files (*.jsonl), one per line.

The files are formatted as *_TIMESTAMP_YYYYMMDD_HHMMSS.jsonl.

Populate the game dropdown with these values. The option label should look like 25 Jan 2025, 10:30.

The default value for the game dropdown should be empty.

When the game dropdown changes to a non-empty option, fetch the file from logs/[filename] and store it in the global game, parsing the JSONL into an array of objects.

Set the maximum value of the range slider to the length of game.

When the range slider changes or the game dropdown changes, change the URL hash to #?game=[filename]&step=[range-slider-value] without modifying browser history.

When the URL hash changes through any means, call redraw(step) which will draw the current (global) game state at the step specified. For now, just display the step prominently on the stage.

This code worked fine but I like refactoring, so I tried to condense the 111 line code:

Shorten and simplify the code in script.js to be elegant.

User browser functionality more.

For example, use Intl to format dates.

Change the innerHTML of #gameSelect to concisely update the options.

Remove redundant braces, e.g. for single-line blocks.

That brought it down to 74 lines but failed to populate the select dropdown. Rather than debug, I undid the change (Copilot’s Undo feature is cool!) and tried:

Shorten and simplify the code in script.js to be elegant.

User browser functionality more, e.g. use Intl to format dates.

Prefer insertAdjacentHTML and replaceChildren.

Remove redundant braces, e.g. for single-line blocks.

This led to shorter code (69 lines) but still had the same issue. I had to manually correct this line:

// BEFORE
const [_, date, time] = filename.match(/_(\d{8})_(\d{6})/)?.groups ?? [];
// AFTER
const [_, date, time] = filename.match(/_(\d{8})_(\d{6})/) ?? [];

I also

Removed an incorrect px-2 against #gameSelect in index.html.
Decided to use the GitHub CDN and replaced fetch(logs/...) with fetch(https://raw.githubusercontent.com/sanand0/elimination_game/refs/heads/main/logs/...).
Also moved logs/index.txt into logs.txt and changed script.js accordingly
Formatted script.js with Prettier

Visually, nothing changes in a big way but the slider and the dropdown change the URL properly.

Learnings:

💡 Experienced coders suggest precise code improvements. Generally good ones. Like:
“use Intl to format dates”
“Prefer insertAdjacentHTML and replaceChildren” (over document.createElement)
💡 LLMs are good at refactoring. When I asked it to “Shorten and simplify the code in script.js to be elegant”, it reduced the code from 111 lines to 74 lines quite well!
💡 Redo if you don’t like it. Copilot’s “Undo” feature lets you retry until you get it right. Like in Edge of Tomorrow.

🔗 Commit

Plan Your Data Structures

At this point, I needed a good data structure and felt the error in skipping Step 1. But, rather than creating one, I asked ChatGPT:

I would like the game structure to be held in a simple JS object called game. What data structure would help the most in drawing this visual such that it will require very little code (since required information is in this data structure)?

O1 Pro said:

A very convenient way to minimize front-end logic is to store a “timeline of snapshots”: each step in the game has both the event (what just happened) and a “current state” (the entire world after that event). Then, in your UI, you simply pick the snapshot that corresponds to the current line (based on the timeline scrubber) and draw exactly what’s in that snapshot—no extra derivation needed.

This is a brilliant idea. I rarely use this since I’m biased against wasting memory. But in this case, it’s perfect.

Based on that input, I prompted CoPilot:

In script.js, instead of loading the .jsonl into game, create this data structure to make it easy to visualize each step.

Use the sample .jsonl provided to infer the logic for this.

const game = {
  game: "...",
  players: {
    "P1": {
      "id": "Player2_Game1739872030683891_deepseek-fireworks",  // from .player_id
      "model": "deepseek-fireworks",  // everything after the last underscore
    },
    // and so on for all other players
  },
  // For each line, create a step
  steps: [
    {
      step: 0,
      // Current round and subround
      round: 1,
      subround: 1,
      event: {
        // Contents of the original line
      },
      // list active alliances
      active: { "P1": true, "P2": false, ... }
      // For each round so far, list who allied with who, e.g.:
      alliances: [ {"P1": "P6", "P2": "P7", ...}, ... ],
      // // For each round so far, list who voted to eliminate whom, e.g.
      votes: [ {"P1": "P4", "P2": "P1", ... }, ... ],
    },
    // …and so on, for each line in the JSONL
  ]
};

This worked almost perfectly. I made these edits:

Add let currentAlliances = {}; let currentVotes = {}; which it forgot in the code.
Re-apply change #2 I made manually in the last iteration (replacing the URL with the GitHub CDN). That change was not there in the chat window, Copilot did not pick it up.

Learnings:

💡 Coders mess up LLMs. Data structure was the first step the LLM recommended. I skip it. It proved crucial. LLMs do better than LLMs + coders - or doctors.
💡 LLMs can make basic mistakes. Like forgetting to declare variables.

🔗 Commit

I jumped a bit to Steps 8 & 9. They were easier (just tables) and the visual components are independent, so order doesn’t matter.

There are always 8 players. Pick 8 visually distinct dark colors (i.e. on which white will look good as a foreground) as colors: {P1: "#...", P2: ...}.

In the alliances and eliminations cards, draw a table each as follows. The table header is:

| Round | P1 | P2 | P3 | … | P8 |

Instead of P1, P2, etc. draw a badge with background-color based on colors and text as 1 for P1, etc.

steps[step].alliances is a list like [{P1: P7, P2: P3, …}, …]. Render each row as a list like:

| 1 | P7 | P3 | … |

The cell contents are badges exactly like the header. If a player (e.g. P3) does not have an alliance, i.e. steps[step].alliances[round].P3 is missing, leave it blank. If steps[step].active[P3] is false, grey the cell background.

steps[step].votes is almost identical, listing the elimination votes. Populate this in the eliminations card.

Reuse code for this. Write VERY concise code. Use Bootstrap classes as much as possible.

This worked perfectly. I manually made one correction to an earlier mistake I noticed:

Replace slider.max = game.steps.length; with slider.max = game.steps.length - 1;

🔗 Commit

I decided to tweak this to show eliminated players clearly:

Replace the active data structure with eliminated. eliminated[“P1”] = 3 if P1 was eliminated at the end of round 3. eliminated[“P1”] is undefined if P1 is not eliminated.

Using this, in the alliances and elimination tables, color the cells grey only if the player was eliminated BEFORE that round. (We’ll find that only empty cells will be colored grey.)

Again, nearly perfect. I made one manual correction in the logic:

Replace game.steps[step].eliminated[p] <= i + 1 with game.steps[step].eliminated[p] < i + 1

Learnings:

💡 When all goes well, LLMs are surprisingly effective when they do things right. Normally, this step take me half an hour. Now, it took under 5 minutes.
💡 Watch out for subtle bugs. The change in operator (from “<=” to “<”) almost went unnoticed, but makes a big difference on when a player was eliminated.

🔗 Commit

Time to tackle Step 7: Sidebar 1: CHAT Section.

For each step, based on step[].event.type, populate the Chat section with the history of conversations so far:

conversation: This is a public conversation. Show ${event.player_id} ${event.message} with the player ID shown like the badge above. player_id needs to be looked up from game.players since it matches game.players[*].id.

private: This is a private conversation. Show ${event.speaker_id} 🢂 ${event.target_id} ${event.message} with the speaker and target IDs treated as above.

preference_proposal: This is an alliance proposal. Show ${event.proposer} 😍 ${event.target} #${event.rank_of_target}. proposer and target are like “P1”, “P2”, etc.

preference_outcome: This is the outcome of a proposal. Show ${event.target} ❌ ${event.rejected} if event.rejected else ${event.target} ❤️ ${event.accepted} ❌ ${event.replaced} if event.replaced else ${event.target} ❤️ ${event.accepted}. All these are like “P1”, “P2”, etc.

preference_result: This is the outcome of the entire proposal round. Just show “Alliances formed”

private_vote_reason: This is the reason a player gives to eliminate someone. Show ${event.voter_id} 👎 ${event.target_id} ${event.reason}. voter_id and target_id match game.players[*].id

private_revote_reason: Show Same as above

private_jury_reason: Show same as above.

vote: This is the actual vote. Show ${event.voter_id} 👎 ${event.target_id} like above

elimination: Just show “Elimination starts”

final_results: Show Winners: ${winners} where winners is a list of players like [“P5”]

ALL players should be shown as a colored badge with a number. The chat card height should not exceed 15em. Overflow should scroll beyond that. Make sure the chat rendering is elegant. I’ve mentioned the content, but please use any Bootstrap UI component to make the chat more attractive.

Use lit-html to render efficiently. Import it via:

import { render, html } from “https://cdn.jsdelivr.net/npm/lit-html@3/+esm";

Rewrite existing code inside redraw(), drawTable, drawBadge to use lit-html.

This worked perfectly.

Learnings:

💡 Careful and detailed prompting gets excellent results. I explained how to render each conversation type. That took time. But it helped build a reasonably complex visual in a single shot.
💡 LLMs are good at refactoring. It switched code from vanilla JS to lit-html templating like a pro.

🔗 Commit

At this point, I took a step back and wrote down every improvement I could think of on the sidebar UI:

Right align the “Round” column numbers in the alliances and eliminations tables.

Change the “Round” header to “#”

When the slider (step) changes, change the round, stage and players based on the current round, stage, and number of active players.

Set the stage based on steps[].event.type (picking unique light colors for each)

conversation: “Public chat”

private: “Private chat”

preference_*: “Alliances”

private_vote_reason, private_revote_reason, private_jury_reason, vote: “Voting”

elimination: “Elimination”

final_results: “Done”

Set the number of active players using steps[].elininated

Keep the sidebar sections for chat, alliances and eliminations open by default.

Rename the eliminations card section title to “Voting”

Hovering on the player should show the game.players[P1/P2/…].model as a Bootstrap tooltip WHEREVER players are displayed.

Add Bootstrap tooltips around the chats that contain just emojis and players:

😍: ${event.proposer} proposed to ${event.target} (preference rank #${event.rank_of_target})

❌: ${event.target} rejected ${event.rejected}

❤️: ${event.target} accepted proposal from ${event.accepted}

❤️❌: ${event.target} accepted proposal from ${event.accepted} replacing ${event.replaced}`

👎: ${event.voter_id} eliminated ${event.target_id}

Don’t indent or highlight the vote_reason or private conversation chats.

I think you can beautify the chat section further.

This messed up the UI because it couldn’t figure out the elements. So I made a few changes after 5 failed attempts:

Update index.html and script.js to modify the navbar as follows:

Add an id= to the round, stage, and players’ values

When the slider (step) changes, change the round, stage and players based on the current round, stage, and number of active players.

Set the stage based on steps[].event.type (picking unique light colors for each)

conversation: “Public chat”

private: “Private chat”

preference_*: “Alliances”

private_vote_reason, private_revote_reason, private_jury_reason, vote: “Voting”

elimination: “Elimination”

final_results: “Done”

Set the number of active players using len(game.players) - len(game.steps[].eliminated)

This worked perfectly. Then:

Update index.html and script.js to modify the sidebar as follows:

Keep the sidebar sections for chat, alliances and eliminations open by default.

Right align the “Round” column numbers in the alliances and eliminations tables.

Change the “Round” header to “#”

Rename the eliminations card section title to “Voting”

EVERY player badge should show game.players[P1/P2/…].model as a Bootstrap tooltip.

Add Bootstrap tooltips for the emojis

😍: proposed to

❌: rejected

❤️: accepted

👎: eliminated

Don’t indent or shade the chats that are currently indented and shaded (e.g. vote_reason).

If possible, beautify the chats further using Bootstrap classes.

This worked perfectly too.

Learnings:

💡 LLMs will get confused with long instructions and/or codebases. It took 5 failed attempts before I split the prompts. Keep your prompts cohesive. Keep your code bases modular.

🔗 Commit

Core Stage Visualization (Circle of Players)

Now for the most complex visual of the lot. Step 5: Core Stage Visualization (Circle of Players) and Step 6: 6. Arrow/Line Visualization for Actions.

Generate a square, responsive SVG in game stage using Bootstrap.

Import svg from lit-html and use svg where required.

It contains all players laid out in a circle.

Each player is a circle colored based on the player colors.

It contains the player number (1, 2, …) as text inside it in white.

Above the player circle, the player model is visible.

Leave plenty of space for a “center text” at the center of the circle that will contain centered text.

The text may be a full paragraph, so handle the font size and circle size accordingly.

The center text must have elegant rounded corners, and a background rgba(var(–bs-body-color-rgb), 0.1).

We need word wrapping, so use foreignElement to wrap a div which holds the text.

For each step, based on step[].event.type, draw the stage as follows:

conversation: Highlight (via a semi-transparent circle 2-3X the radius of the player) the player to highlight them. Show event.message in the center text.

private: Highlight players event.speaker_id. Draw an black arrow to event.target_id. Show event.message in the center text.

preference_proposal: Yellow arrow from event.proposer to event.target. Center text shows [MODEL NAME 1] proposes to [MODEL NAME 2] where model name is what’s in the tooltip

preference_outcome: (all items in [BRACKETS] are the model name shown in the tooltip)

If event.rejected, red arrow from event.target to event.rejected. Center text: [TARGET] rejects [REJECTED]

If event.replaced, green arrow from event.target to event.accepted and red arrow from event.target to event.replaced. Center text: [TARGET] accepts [ACCEPTED] replacing [REPLACED]

Else: green arrow from event.target to event.accepted. Center text: [TARGET] accepts [ACCEPTED] replacing [REPLACED]

preference_result: Center text shows “Alliances formed”

private_vote_reason: Purple arrow from event.voter_id to event.target_id. Center text: [VOTER_ID] thinks to eliminate [TARGET_ID]: event.reason

private_revote_reason: Show Same as above

private_jury_reason: Show same as above.

vote: Purple arrow from event.voter_id to event.target_id. Center text: [VOTER_ID] voted against [TARGET_ID]

elimination: Center text: “Elimination starts”

final_results: Center text: Show Winners: ${winners} where winners is a list of players like [“P5”]

This nearly worked. I made to UI edits:

Add a width="1000" to the SVG to get a minimim size
Add a font-size: 0.7rem; to the text container so the text will fit

At this point, we’re nearly there!

🔗 Commit

Once I saw the output, I found a bunch of things I wanted to fix or improve:

The model name may contain underscores. So use everything after the second underscore, then replace all underscores with hyphens.

Render eliminated players with an opacity of 0.05, not 0.2.

Move the arrow head to the center of the arrow, not the end, to avoid getting hidden by the player circles.

Center all cells in the alliances and voting tables.

When the page is loaded, check the step as well and render that step.

Clicking on any chat entry should change the URL #?step= to that entry’s step

That worked well. I made a few manual edits:

Fix winner formatting by replacing getModelName(w) with game.players[w].model and playerBadge(w) with badge(w)
Setting the step on page load in the UI: document.getElementById("timelineScrubber").value = step;

- In the alliances and voting tables, make the table header stand out with a contrasting color.
- In the center text message, begin with a <h6> mentioning the speaker or initiator

Learnings:

💡 Write thoughts as precisely as code. This prompt took me considerable time – but not effort, since I was writing out my thoughts.
Given my practice, my thoughts are reasonably close to code (e.g. “We need word wrapping, so use foreignElement”)
But thinking in English lets me to think faster, jump in any order, and even make occasional mistakes

🔗 Commit

Tweaks & Manual Edits

I made a few manual edits.

Show the votes against a player live on the voting table by changing votes: [...roundVotes] to votes: [...roundVotes, {...currentVotes}]
Change the voting arrow color from "purple" to "red"
Added updateHash(gameFile, step); on startup
Replaced the minimum step from 1 to 0

Then I prompted:

- Change all model names in the center text to the badges
- At every step, show all votes against a model via thin 50% transparent red arrows from key to value in game.steps[step].votes.at(-1) object which will look like {P1: "P2", ...}

🔗 Commit

Then I formatted with Prettier, added arrows for alliances, and a few other minor manual changes because I’m tired of LLMs.

🔗 Commit

Finally, I made a series of manual bug fixes

Center textbox is smaller. Highlight on hover
Remove existing alliances before adding new
Improve the arrow and circle styling
Remove eliminated players after jury round
Click on alliance/voting row to jump to a round
Click on chat history to jump to step

🔗 Commit

Learnings:

💡 Coders want to code. After a few hours of telling Copilot in great detail what I want it to do, I just want to do it myself. Thinking is too hard. Coding is easier.
💡 Tiny changes are easier to code than to prompt. Especially for experienced coders.

Add documentation

Finally, I updated the docs.

Add README.md explaining the process, with screenshots (partly with LLM help)
Update home page with scary quotes from LLMs (mostly with LLM help)
Zoom the gameplay a bit for better visibility (manually)
Ensure hash changes update the visual robustly (partly with LLM help)

Then I had it update the home page with instructions:

Using #file:gameplay.webp and #file:quotes.js and #file:script.js update the usage in #file:index.html to provide clear, CONCISE information about all the features in this app and how to use them. Don't miss out any feature.

Improve the look and feel of these instructions. For example, add icons, colors, arrow key icons, etc. to make it look more visually attractive and engaging. Also, replace the title "Usage" with something more actionable. Make this section stand out SUBTLY.

Lessons

In summary, here’s what I learned (with learning categories identified by DeepSeek R1):

Always use LLMs to brainstorm (even if you know it)
- 💡 Ask LLMs why something is useful. You’ll invariably find plausible uses, even if you’re doing it just for fun.
- 💡 Ask LLMs for visualization ideas. They’ll suggest things you didn’t think of.
- 💡 Ask LLMs to break down your task. Its breakdown was better than mine.
- 💡 Ask multiple LLMs. Each has a different style of thinking.
Prototype with LLMs for speed
- 💡 LLMs can create visual prototypes. ChatGPT’s new 4o image generation converted the description into an acceptable image. Needs to improve, but enough to ideate.
- 💡 Improving is less work than creating. I rarely sketch visualizations. (Too lazy.) But since this prototype was there, and had some parts that were **WRONG**, I just had to fix it! 🙂
- 💡 Redo if you don’t like it. Copilot’s “Undo” feature lets you retry until you get it right. Like in Edge of Tomorrow.
LLMs are excellent coders
- 💡 LLMs are good at refactoring. It switched code from vanilla JS to lit-html templating like a pro.
- 💡 When all goes well, LLMs are surprisingly effective when they do things right. Normally, this step take me half an hour. Now, it took under 5 minutes.
- 💡 Claude 3.5 Sonnet remains an excellent model to generate UI. Claude 3.7 Sonnet is even better, but is not currently available in the free Copilot subscription.
But LLMs aren’t infallible
- 💡 LLMs can make basic mistakes. Like forgetting to declare variables.
- 💡 Watch out for subtle bugs. The change in operator (from “<=” to “<”) almost went unnoticed, but makes a big difference on when a player was eliminated.
- 💡 Tiny changes are easier to code than to prompt. Especially for experienced coders.
Careful prompting goes a long way
- 💡 LLMs will get confused with long instructions and/or codebases. It took 5 failed attempts before I split the prompts. Keep your prompts cohesive. Keep your code bases modular.
- 💡 Write thoughts as precisely as code. This prompt took me considerable time – but not effort, since I was writing out my thoughts.
- 💡 Careful and detailed prompting gets excellent results. I explained how to render each conversation type. That took time. But it helped build a reasonably complex visual in a single shot.
Coders need to re-learn coding but do have advantages
- 💡 Coders want to code. After a few hours of telling Copilot in great detail what I want it to do, I just want to do it myself. Thinking is too hard. Coding is easier.
- 💡 Coders mess up LLMs. Data structure was the first step the LLM recommended. I skip it. It proved crucial. LLMs do better than LLMs + coders - or doctors.
- 💡 Coders micro-manage LLMs. I think a novice will be more efficient and get better results than me. For example:
- 💡 Experienced coders need retraining to instruct rather than code. My instinct was to code immediately rather than to prompt.
- 💡 Experienced coders are good with feedback. It took me under 10 seconds to spot each problem in the output and code.
- 💡 Experienced coders suggest precise code improvements. Generally good ones. Like:
- 💡 LLMs could turn coders into good lead developers or managers. Pity.

Things I Learned - 16 Feb 2025

Sun, 16 Feb 2025 00:00:00 +0000

This week, I learned:

Connected Papers shows papers similar to each other based on co-citation and bibliographic coupling for ~50,000 papers.
Notes from a fireside chat with Prashanth Chandrasekar, CEO, StackOverflow, and the StackOverflow team
- There’s a signal that software demand is growing in 2024. Many more students took the StackOverflow survey in 2024. So more students (or other professionals) are shifting into / starting to learn software development.
- The AI Index is a good resource for AI trends.
- Experts are better able to use AI for writing code. Less experienced developers are more likely to use AI for code reviews, project planning, etc.
- There’s a 5% decline in favorability for AI tools compared to 2023, maybe due to disappointing results.
- Pilot groups working on AI are 25-30% more productive. They’re the most enthusiastic. For the rest of the company, it drops off to 5-10%
  - #LEARNING Benefit comes from NEW people becoming programmers, not existing ones getting more effective?
- StackOverflow wants to be where the developer is.
  - The programmer workflow was: Google -> StackOverflow -> GitHub.
  - Now it’s changing to ChatGPT / Cursor -> GitHub.
  - StackOverflow has a partnership with OpenAI and working on a plugin. Same with Google’s Duet AI, GitHub Copilot, many others. They’ll link to StackOverflow.
- StackOverflow is driving integration actively through an enterprise Overflow API
- Q: What tech have you seen blaze through the ranks?
  - Prashanth: Abstraction wins. Stuff that abstracts away things well and more wins. This includes Gen AI.
  - Erin Yepis: Rust (from 3% to 12%). AWS has steady growth.
  - Erin Yapis: I have a time series spreadsheet that I’ll publish.
- Q: What technologies are unusually tightly coupled?
  - Prashanth: AWS & Google Cloud are tightly coupled.
- Q: We have an engagement problem. Might be India-specific. What are low-effort high-return mechanisms to increase engagement.
  - Eric Woodring: Rather than a static web page, integrate it using the API. #TODO
  - Ben Marconi: Use LLMs to write post mortems and push to StackOverflow. #TODO
  - Eric Woodring: “Hydrating” the community helps.
    - We take repeat questions on Teams / Slack and seed them using LLMs.
    - We integrate with the API to auto-add Q&A.
    - Transform documentation into Q&A. Potentially UPDATE existing Q&A if it’s wrong.
- Q: What unexpected lessons about developer behavior have you learned while running StackOverflow?
  - Prashanth: We didn’t expect developers moving away from Google. Now it moved to the IDE.
- Q: What are you learning about developer learning behavior?
  - Ben Marconi: Generating LLM-based onboarding documents.
  - Using StackOverflow for Teams to identify who the experts are to contact for specific topics.
- Q: Are you thinking about leveraging Stack Overflow’s knowledge base for personalized or interactive learning experiences? How?
  - Prashanth: Traditionally, people use StackOveflow for productivity, learning, and flexibility (i.e. to ask/answer questions asynchronously without breaking their flow). So yeah, learning is important for us. (Duh!)
- Q: Could Stack Overflow’s interactions help evaluate the accuracy and relevance of LLM-generated code? Or provide potential metrics on quality?
  - Prashanth: LLM accuracy improves by ~30%. Upvotes / downvotes are reinforcement learning (RL) in steroids, so that helps.
- Q: What are your thoughts on reliance on LLMs potentially deskill-ing developers?
  - Prashanth: A real issue for junior developers, not for senior ones.
  - They’ll come across as knowledgeable.
  - Make internal evaluations and interviews more rigorous.
- Anand’s requests for action:
  - Could I get a copy of Erin’s spreadsheet? Vivek Narayanan will follow-up.
  - Could you help me learn more about hydration? Nick Madison will set up a meeting with customer success group.
I switched to fish shell mainly because:
- Autocomplete and tab completion works perfectly, out-of-box.
- Syntax highlighting is beautiful
- Great multi-line editing
To format with VS Code Ruff, you need to point the ruff.interpreter setting to a Python interpreter. You can’t run the ruff server without Python, even though ruff itself doesn’t need Python.
cd checks all paths specified in CDPATH for the directory name and changes to the first match. That’s pretty convenient!
Flipper Zero is now on my list of “To Buy” tools. It has a variety of hardware devices including NFC, RFID, Bluetooth, Infrared, etc. and is great to reverse engineer or hack devices.

Launching an app only with LLMs and failing

Tue, 07 Jan 2025 04:00:09 +0000

Zohaib Rauf suggested using LLMs to spec code and using Cursor to build it. (via Simon Willison).

I tried it. It’s promising, but my first attempt failed.

I couldn’t generate a `SPEC.md` using LLMs

At first, I started writing what I wanted.

This application identifies the drugs, diseases, and symptoms, as well as the emotions from an audio recording of a patient call in a clinical trial.

… and then went on to define the EXACT code structure I wanted. So I spent 20 minutes spec-ing our application structure and 20 minutes spec-ing our internal LLM Foundry APIs and 40 minutes detailing every step of how I wanted the app to look and interact.

After 90 minutes, I realized that I’m too controlling or too inexperienced in LLM-speccing. But I had a solid SPEC.md.

# Patient Pulse

The application identifies the drugs, diseases, and symptoms, as well as the emotions from an audio recording of a patient call in a clinical trial.

## How the application works

The application is a [Gramener Demo](#gramener-demos).

`script.js` implements this logic:

- Reads `config.json` to get the list of transcripts and renders them, allowing users to select a transcript
- When the user selects a transcript, it reads the audio and prosody files

Once it reads these files, it makes a request to GPT-4o-mini via [LLM Foundry API](#llm-foundry) with the system prompt:

````markdown
You are a clinical trial expert. Read this call transcript. Identify all drugs, diseases, and symptoms mentioned. Return a JSON that mentions each along with the line in the call transcript they occur in. Example:

```json
{
  "symptoms": [
    { "name": "...", "lines": [1, 4] }, // first symptom is mentioned in lines 1, 4
    { "name": "...", "lines": [8] } // second symptom is mentioned in line 8
  ],
  "drugs": [
    { "name": "...", "lines": [6] } // first drug is mentioned in line 6
  ],
  "emotions": [
    { "name": "...", "lines": [9] } // first emotion is mentioned in line 9
  ]
}
```
````

It then renders a UI (via lit-html) that

- Plays the audio
- Maps the emotions in `${filename}.prosody.csv` to the 8 basic emotions on Robert Plutchik's theory of emotions. See [How to map emotions](#how-to-map-emotions)
- Displays [wheel.png](wheel.png), which is a 1080x1080px image of Plutchik's wheel of emotions
- As the audio plays, it
  - displays text up to the currently playing `Text` from `${filename}.prosody.csv`, highlighting the current sentence.
  - displays the emotions as a semi-transparent radar chart on the wheel of emotions
- It allows pausing and resuming the audio.
- It allows users to drag the audio slider to jump to any point in the audio. The transcript and the wheel of emotions are updated to reflect the new position in the audio.

... (and it goes on for 500+ lines.)
```

I did use [O1](https://openai.com/o1/) to help with the spec. Specifically:

- **How to name it.** I asked for short demo names and chose "Patient Pulse".
- **How to arrange emotions.** I asked how to arrange 53 emotions in a circle so similar ones were next to each other.

**My takeaway**: Writing a `SPEC.md` can help, especially if you plan to re-use parts of it. But the spec kept evolving as I built the app, because I often don’t know what I want until I see it. Maybe an “agile” approach would work better for me.

### Cursor messed up the code

I prompted Cursor to `Generate an application based on this spec. @SPEC.md`. Here's the code it generated.

```javascript
import { render, html } from "https://cdn.jsdelivr.net/npm/lit-html@3/+esm";
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";

// Map of Hume emotions to Plutchik's 8 basic emotions
const EMOTION_MAP = {
  Admiration: ["Joy", "Trust"],
  Adoration: ["Joy", "Trust"],
  "Aesthetic Appreciation": ["Joy"],
  // ... (truncated for brevity - use mapping from spec)
};

// ... skipping lots of code ...

/**
 * Main application component
 * @returns {TemplateResult} Main application UI
 */
const App = async () => {
  const config = await fetch("config.json").then((r) => r.json());
  const [selectedTranscript, setSelectedTranscript] = useState(null);
  const [audioPlayer, setAudioPlayer] = useState(null);
  const [currentTime, setCurrentTime] = useState(0);
  const [prosodyData, setProsodyData] = useState([]);
  const [analysisResults, setAnalysisResults] = useState(null);

  const loadTranscript = async (transcript) => {
    setSelectedTranscript(transcript);

  // ... skipping lots of code
};

// Initialize app
render(App(), document.getElementById("app"));
```

This code was a mess. I had told it to use `lit-html`, which doesn’t have `useState`. That’s a React feature, so nothing worked right.

I ended up building the app from scratch. It took four hours and many changes from the original spec, though having a spec did help a bit.

**My learning**: Cursor and I still can’t build a mid-sized app in one go. I’m in the "scaffold and refine" phase.

Things I Learned - 10 Nov 2024

Sun, 10 Nov 2024 00:00:00 +0000

This week, I learned:

OpenFreeMap is a free embeddable OpenStreetMap tile server. You can use MapLibre GL (more features) or Leaflet (simpler) to render it. It offers styling and self-hosting.
Zapier Actions are an easy way to set up custom actions like GMail / Google Calendar APIs for GPTs, since GPTs’ callback URLs keep changing. But they fail often, and don’t work on mobile. At least for me.
LLM Vision Use Cases in manufacturing and earth sciences (via Shivku)
- Automated geoscience image descriptions Ref
- Interpret Wind Turbine photos and charts, construction monitoring, equipment maintenance & charts Ref
- Forecast weather based on cloud photos! Ref
- Analyze thermal image of solar panels, electroluminescence images for warranty claims, ROI estimates from Google Sunroof rooftop images Ref
- Corrosion detection in electricity towers, turbines, storage tanks, penstock. Interpret non-destructive test images Ref
Google counts auto-completion when saying “25% of all the code is written by AI at Google”. “It’s a helpful productivity tool but it’s not doing any engineering at all. It’s probably about as good, maybe slightly worse, than Copilot.” YCombinator
Workflow for AI video creation: Use Meshcapade (meshcapade.com) to generate body movement of a 3D-rendered character. Pass that video to Runway’s video-to-video model to generate any visual. Add music from Suno Ref
Someone sorted the X and Y columns independently for regression. Ref
Android keyboard learning only sends model changes back to server and not local keywords. Model changes are aggregated! Ref
Here is a prompt for audio transcription using Gemini. Ref
- Transcription: Accurately transcribe the audio clip in the original language. Include all spoken words, fillers, slang, colloquialisms, and any code-switching instances. Pay attention to dialects and regional variations common among immigrant communities. Do your best to capture the speech accurately, and flag any unintelligible portions with [inaudible].
- Translation: Translate the transcription into English. Preserve the original meaning, context, idiomatic expressions, and cultural references. Ensure that nuances and subtleties are accurately conveyed.
- Capture Vocal Nuances: Note vocal cues such as tone, pitch, pacing, emphasis, and emotional expressions that may influence the message. These cues are critical for understanding intent and potential impact.
Here are some approaches to large-scale classification of medical codes. ChatGPT
- Fine-Tuning LLMs on Medical Data: Enhance LLMs by training them on medical datasets, such as clinical notes and discharge summaries, to improve their understanding of medical terminology and context.
- Multi-Agent Frameworks: Implement a multi-agent system that simulates real-world coding processes with distinct roles (e.g., patient, physician, coder, reviewer, adjuster). Each agent utilizes an LLM to perform specific functions, enhancing interpretability and reliability. ArXiv
- Retrieve-Rank Systems: Develop a two-stage system where the LLM first retrieves potential ICD-10 codes and then ranks them based on relevance, improving precision in code assignment. ArXiv
- Embedding-Based Approaches: Use LLMs to generate embeddings for ICD-10 codes and medical texts, facilitating the matching of texts to appropriate codes through similarity measures. GitHub
- Hierarchical Classification: Leverage the hierarchical structure of ICD-10 codes by first classifying texts into broader categories before assigning specific codes, reducing complexity and improving accuracy. ArXiv
- Two-Stage Verification Models: Combine LLMs with verification models, such as Long Short-Term Memory (LSTM) networks, to validate and refine the codes suggested by the LLM, balancing recall and precision. ArXiv
- Also, a mixture of models approach might work. Feed any existing NLP model / rules as a second opinion.
GraphRAG is better if data is naturally graph-structured. Else, it’s slow and fills up the context window with even vaguely related stuff. Vigneshbabu, AMAT.
ChatGPT for Windows desktop supports real-time voice and a global shortcut (Alt Space).
uithub converts GitHub repos to Markdown. Just replace “g” in “github.com/…” with “u”. Example
WebContainers are a thing and Bolt.new uses them!
Docling by IBM converts PDF, DOCX, etc. to Markdown. Like PyMuPDF4LLM but better.
Check out Loom and Cleanshot are the recommended tools for screen recording and screenshotting. But Loom is paid and Cleanshot is Mac only.
The Rubik’s cube has a Hamiltonian cycle through every one of its 43 quintillion states. Ref
OmniParser is great at parsing screenshots and identifying bounding boxes.
Recraft.ai is currently SOTA in text to image. It’s fairly impressive and could be a good alternative to Figma.
Zed.dev is an AI code editor by the creators of Atom. It’s written in Rust and is blazing fast. It has native AI integration.
Artificial Analysis has a bunch of new leaderboards and arenas.
- Open AI TTS leads the TTS Leaderboard. ElevenLabs is a bit behind.
- Recraft V3 > Flux 1.1 leads Text to Image Leaderboard
Hertz-Dev is an open source realtime voice chat model. But it doesn’t fit in Google Colab T4’s RAM
Chain of Thought reduces performance where thinking makes humans worse. Ref. Specifically:
- Artificial grammar learning
- Facial recognition
- Classifying data that has exceptions
Creating a LLM-as-a-Judge That Drives Business Results by Hamel Husain.
- Get THE domain expert (or approver) as the tester.
- Create a dataset that is DIVERSE.
- Covers EACH combination of:
  - Features
  - Scenarios: e.g. multiple matches, no match, ambiguous request, invalid/incomplete input, unsupported feature, system error
  - Persona: e.g. new user, expert user, non-native speaker, busy professional, technophobe, elderly user
- Generate data using existing data + synthetic data for each SPECIFIC combination of the above
- Evaluate based only on PASS/FAIL with a CRITIQUE detailed enough for a new employee. Include:
  - Nuances: Something a failed response did well or a passed response didn’t quite do well
  - Improvements: Suggest how model can improve
- Build an SPA to make it easy for the domain expert to review
LLMs can be made to unlearn (copyright material) better by identifying components related to the knowledge to unlearn and applying a larger learning rate to these while leaving other parts unchanged. As opposed to low learning rates for all components. Ref

Sun, 20 Oct 2024 10:37:57 +0000

How can non-programmers build apps?

Claude.ai, Replit.com, Bolt.new, V0.dev, Pythagora.ai and a few other tools write and deploy code just based on a prompt. You should try them out.

But how do you build the skill? Is there a tutorial?" I’m often asked. No, I can’t find a tutorial, but here is my suggestion.

You probably can’t guess what’s easy or hard. e.g. “Take my picture in black & white” is FAR easier than “When’s the next lunar eclipse?
So if the app doesn’t work, try 2-3 times, then GIVE UP! Note it down and try something else. (You’ll soon get a feel for what’s possible.)
Revisit what failed 3-6 months later. It might suddenly become possible.

How can non-developers learn AI coding?

Sun, 20 Oct 2024 10:36:37 +0000

How can non-programmers build apps?

Claude.ai, Replit.com, Bolt.new, V0.dev, Pythagora.ai and a few other tools write and deploy code just based on a prompt. You should try them out.

“But how do you build the skill? Is there a tutorial?” I’m often asked. No, I can’t find a tutorial, but here is my suggestion.

You probably can’t guess what’s easy or hard. e.g. “Take my picture in black & white” is FAR easier than “When’s the next lunar eclipse?”
So if the app doesn’t work, try 2-3 times, then GIVE UP! Note it down. Then try something else. (You’ll soon get a feel for what’s possible.)
Revisit what failed 3-6 months later. It might suddenly become possible.

Leaning into the power of AI coding

Wed, 16 Oct 2024 03:55:59 +0000

Yesterday (15 Oct 2024), I used Cursor to code more than I ever have. (Doing's how we learn, I guess. Not just reading.)

This was mainly to create and publish 2 libraries on npm over 6 hours:

asyncsse - which converts a Server-Sent Event stream into an async iterator that I can use in a for await ... of loop
asyncllm - which standardizes the Server-Sent Events streamed by the popular LLMs into an easy to use form.

This exercise broke several mental barriers for me.

Writing in a new language. Deno 2.0 was released recently. I was impressed by the compatibility with npm packages. Plus, it's a single EXE download that includes a linter, tester, formatter, etc. Like all recent cool fast tools, it's written in Rust. So I decided to use it for testing. Running deno test runs the entire test suite. My prompts included asking it to:

Create a Deno HTTP server to mock requests for the tests. This is cool because a single, simple code chunk runs the server within the test suite.
Serve static files from samples/ to move my tests into files

Writing test cases. Every line of this code was written by Cursor via Claude 3.5 Sonnet. Every line. My prompt was, Look at the code in @index.js and write test cases for scenarios not yet covered. It's surprising how much of the SSE spec it already knew, and anticipated edge cases like:

SSE values might have a colon. I learnt for the first time that the limit parameter in String.split() is very different from Python's str.split. (The splits, then picks the first few, ignoring the rest. Python ensures the rest is packed into the last split.) This helped me find a major bug.
SSE has comments. Empty keys are treated as strings. Didn't know this.

I was able to use it to generate test cases based on content as well. Based on @index.js and @openai.txt write a test case that verifies the functionality created the entire test case for OpenAI responses. (I did have to edit it because LLMs don't count very well, but it was minimal.)

Bridging test coverage gaps. The prompt that gave me the most delightful result was Are there any scenarios in @index.js not tested by @test.js? It did a great job of highlighting that I hadn't covered Groq, Azure, or CloudFlare AI workers (though they were mentioned in the comments), error handling, empty/null values in some cases, tested for multiple tool calls. I had it generate mock test data for some of these and added the tests.

Enhancing knowledge with references. I passed Cursor the SSE documentation via @https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events and asked it to find more scenarios my code at @index.js had not covered. This found a number of new issues.

Generating bindings. I avoid TypeScript because I don't know it. Plus, it requires an compilation step for the browser. But TypeScript bindings are helpful. So I prompted Cursor, using the Composer (which can create new files) to Create TypeScript bindings for @index.js in index.d.ts - which id did almost perfectly.

Check for errors. I typed Check this file for errors on @index.d.ts. I don't know enough to figure this out. It went through the description and said everything seems fine. But I saw a TypeScript plugin error that said, Property 'data' of type 'string | undefined' is not assignable to 'string' index type 'string'.ts(2411). When prompted, it spotted the issue. (The earlier code assumed all properties are strings. But some can be undefined too. It fixed it.)

Documentation. At first, I asked the Composer to Create a README.md suitable for a world-class professional open source npm package and it did a pretty good job. I just needed to update the repository name. I further prompted it to Modify README based on @index.js and share examples from @test.js on asyncllm, which did an excellent job.

Code review. I asked it to Review this code. Suggest possible improvements for simplicity, future-proofing, robustness, and efficiency and it shared a few very effective improvements.

Regex lookaheads for efficient regular expression splitting, i.e. use buffer.split(/(?=\r?\n\r?\n)/) instead of buffer.split(/(\r?\n\r?\n)/) -- and though I haven't tested this, it looked cool.
Restructuring complex if-else code into elegant parsers that made my code a lot more modular.
Error handling. It added try {} catch {} blocks at a few places that helped catch errors that I don't anticipate but don't hurt.

Code simplification. Several times, I passed it a code snippet, saying just Simplify. Here's an example:

const events = [];
for await (const event of asyncLLM(...)) {
  events.push(event);
}

This can be simplified to

const events = await Array.fromAsync(asyncLLM(...))

Packaging. I copied a package.json from an earlier file and asked it to Modify package.json, notable keywords and files and scripts based on @index.js which it did a perfect job of.

Blogging. I wrote this blog post with the help of the chat history on Cursor. Normally, such blog posts take me 3-4 hours. This one took 45 minutes. I just had to pick and choose from history. (I lost a few because I renamed directories. I'll be careful not to do that going forward.)

Overall, it was a day of great learning. Not in the classroom sense of "Here's something I didn't know before", but rather the cycling / swimming sense of "Here's something I now know to do."

Challenge: code in 10 minutes with only an LLM

Wed, 09 Oct 2024 04:18:23 +0000

I gave a bonus assignment in LLM coding to ~1,000 students at the Tools in Data Science course at IITM.

Here is an OPTIONAL project: Record a 10-minute video in which you create an application entirely using LLMs and deploy it.

Any app is fine. Any language. Simple or complex. Business or gaming. Anything is fine. Your choice.
Create the app only using LLMs. You can use an LLM (ChatGPT, Claude.ai, Gemini, Cursor, Cody, etc.) but you can only prompt the app to write code. You can copy-paste code and run code don’t write or edit even a single line of code directly. Use LLMs to debug and edit. Code completion is NOT allowed – only prompting/chatting.
Record the entire process in 10 min. Don’t edit, trim, enhance, or annotate the video. You should record yourself creating the entire app from start to finish. Practice beforehand if you like. Record in 1 take.
Share the video and app. Publish the video publicly anywhere (e.g. YouTube and share the link.) Publish the app publicly anywhere (e.g. GitHub pages, Glitch.me, Heroku, etc.) or upload a ZIP file with the code (for slightly lower marks.)
Submit via a reply to this thread. Multiple submissions per person are fine. Work in groups if you like but only the submitter gets marks.

I will award up to 1 bonus mark at my discretion based on:

How well you prompt the LLM
How impressive the app is (if you’ve hosted it - I probably won’t run your code)
How closely you followed the rules above
This exercise is to help you (and me) learn a topic that’ll probably change the way we all code: using LLMs to code.

Cutoff date: 7 Oct 2024, AoE

Adoption was low but in line with the industry.

About 50 students (around 5% of the batch) attempted this. In contrast, ~70-80% take the (mostly) mandatory graded assignments.

This is comparable with what I see at Straive. When given the option, about 5% of Straive’s 20,000 people uses LLMs on in a given week. (There are many things different there. I’m tracking LLM use, not LLM coding. It’s a work environment, not a learning one. There’s no bonus mark awarded. But still, I see the “around 5%” number popping up often.)

Games were the most popular category, mainly Tic Tac Toe and Snake Game.

This is understandable. They’re easy to think of, implement, and use.

Candy Crush - Video, App / Code
Catch the Ball - Video, App / Code
Flappy Bird - Video, App / Code
Flappy Bird - Video, App / Code
Magic Square - Video, App / Code
Memory Match - Video, App / Code
Memory Match - Video, App / Code
Minesweeper - Video, App / Code
Minesweeper - Video, App / Code
N-Queens - Video, App / Code
Number Guessing Game - Video, App / Code
Open Mines game - Video, App / Code
Rock-Paper-Scissors - Video, App / Code
Rock-Paper-Scissors - Video, App / Code
Sliding Game - Video, App / Code
Snake Game - Video, App / Code
Snake Game - Video, App / Code
Snake Game - Video, App / Code
Snake Game - Video
Snake Game - Video, App / Code
Snake Game + Pomodoro - Video, App / Code
Sudoku - Video, App / Code
Sudoku - Video, App / Code
Tic Tac Toe - Video, App / Code
Tic Tac Toe - Video, App / Code
Tic Tac Toe - Video, App / Code
Tic Tac Toe - Video, App / Code
Tic Tac Toe - Video, App / Code
Tic Tac Toe - Video, App / Code
Tile Matching Game - Video, App / Code
Word scramble game - Video, App / Code
Wordle - Video, App / Code

Productivity Apps / Tools were the next most common. Calculators, Timers, etc.

Again, understandable. They’re easy to think of, implement, and use.

Age Calculator - Video, App / Code
Age Calculator - Video, App / Code
Air Mile Dalculator - Video, App / Code
Birth Day Calculator - Video, App / Code
BMI Calculator - Video, App / Code
BMI Calculator - Video, App / Code
Height Weight Calculator - Video, App / Code
Music playlist - Video
Post-it Notes - Video, App / Code
Timer - Video, App / Code
Timer - Video, App / Code
Todo App - Video, App / Code
Todo App - Video, App / Code
Todo App - Video, App / Code

Real-life apps / tools were diverse and interesting.

This final category of apps were things one might use in real-life. They were more ambitious (mostly), more practical (always), and unique (by far).

This is the 1% that might lead to startup ideas.

Discussion Board - Video, App / Code
Document analysis - Video, App / Code
Dress Designer - Video, App / Code
Image Metadata - Video, App / Code
Inventory management - Video, App / Code
PCOS detector - Video, App / Code
RAG on Streamlit - Video, App / Code
TNEB Power Failure - Video, App / Code

Things I learned.

You can upload files directly into GitHub via the UI (Video)
You can run GUI programs in Python on the mobile via Replit’s tkinter (Video)
You can get the LLM to generate code for Google Scripts (Video)
… and a whole bunch of tricks like adding audio BGM, special powers, emotional prompting, etc.
Typically, 5% are early adopters. 1% are GOOD early adopters.

Comments

Pratyush 10 Oct 2024 1:14 pm: Wow!!! What a creativity by students. I still can’t believe they created AND DEPLOYED them in under 10 minutes. This was a fabulous task, Anand. Thanks for sharing about it.

Cursor custom rules

Sun, 15 Sep 2024 09:37:26 +0000

cursor.directory is a catalog of Cursor rules. Since I’ve actively switched over from VS Code to Cursor as my editor, I reviewed the popular rules and came up with this as my list:

You are an expert full stack developer in Python and JavaScript.

Write concise, technical responses with accurate Python examples.

Use functional, declarative programming; avoid classes.

Avoid code duplication (iteration, functions, vectorization).

Use descriptive variable names with auxiliary verbs as snake_case for Python (is_active, has_permission) and camelCase for JavaScript (isActive, hasPermission).

Functions should receive and object and return an object (RORO) where possible.

Use environment variables for sensitive information.

Write unit tests in pytest for Python and Jest for JavaScript.

Follow PEP 8 for Python.

Always use type hints in all function signatures.

Always write docstrings. Use Google style for Python and JSDoc for JavaScript.

Cache slow or frequent operations in memory.

Minimize blocking I/O operations with async operations.

Only write ESM (ES6) JavaScript. Target modern browsers.

Libraries

lit-html and vanilla JavaScript for frontend development.

D3 for data visualization.

Bootstrap for CSS.

Pandas and DuckDB for data analysis and manipulation.

FastAPI for API development.

Error Handling and Validation

Validate preconditions and errors early to avoid deeply nested if statements.

Use try-except or try-catch blocks for error-prone operations, especially when reading external data.

Avoid unnecessary else statements; use the if-return pattern instead.

Log all errors with user-friendly error messages shown on the frontend.

AI Coding: $12M return for $240K spend?

Sun, 08 Sep 2024 02:05:11 +0000

This is an email I sent to our leadership team a few minutes ago.

We may be witnessing the third major leap in computing productivity, after high-level languages in the 1960s and spreadsheets in the 1980s

In the last few weeks, AI coding really took off. Cursor, Cody, Replit Agents are FAR better than GitHub Copilot.

Research on ~5,000 devs in Fortune 100 shows that even GitHub Copilot makes them ~25% more productive.

Personally, Cursor helped me:

Write faster code (at least 2X). I’ve given away my team (there’s not enough work for them).
Write better code. I now document code for others to replicate - because it’s so easy.
Write complex code. I’ve built stuff I didn’t know how to. WhatsApp agents, AI code writers, even LLM Foundry. Each has opened a client’s door.

So, should we leverage AI Coding for our developers?

Maybe not. Consider these risks.

It costs $10-$20/month/dev. That’s $120-$240K/year for ~1,000 devs.
Clients may not be comfortable with us using AI coding. IP. Security.
Higher productivity reduces our T&M billing, hence revenue.

Maybe yes. Consider these benefits.

We could save 25% per developer. Maybe $4K/month/dev x 25% = $12M/year
We could win more complex engagements. (Pitching AI coding as an edge has worked well, too.)
We could reduce time to get someone to a tech-lead level.

There’s probably no one-size-fits-all answer. We might need to pilot while we strategize.

How might this impact our hiring and training?

1. Hire for AI coding skills. In interviews, I’d look for use of AI coding agents. We need a few AI coding leads to share our engineering future.

2. Hire for dual skills. AI can take care of the code. I’d hire people with good client-facing skills.

3. Train on AI coding. Integrate these into the onboarding process. Train existing devs.

4. Train non-developers. Analysts, designers, managers can become as good as junior devs.

Why am I mailing you?

In Nov 2022, when ChatGPT was released, I thought LLMs were the biggest knowledge leap since Google.

In Sep 2024, with Cursor, Cody, and Replit agents, I think AI coding the biggest productivity leap since Excel.

This is not for immediate action.

Please think over it. Share it. Discuss it. Pilot it. Let’s explore.

Things I Learned - 31 Mar 2024

Sun, 31 Mar 2024 00:00:00 +0000

This week, I learned:

sqlite-schema-diagram generates schemas for SQLite databases using Graphviz
TechEmpower web server benchmarks place Rust servers on top
browser.new is a good example of a browser agent. It slowly but independently does a good job of achieving the result. Example: What crew is common in Ingrid Bergman - Cary Grant films?
twinny is an open source VC Code Copilot alternative.
typesense supports embeddings natively.
Binary embeddings are good enough. Cohere releases binary embeddings.
Extract.langchain.com is a poor early interface to featurize unstructured.io
Hume.ai offers voice emotion API and emotion-based conversational responses. An empathic AI.
Rust is non-trivial. Inspired by We are under DDoS attack and we do nothing, I “wrote” a small binary that serves a parquet file as JSON. It failed and I couldn’t fix it.
spleeter is a better alternative to demucs. Splits audio into
pyannote-audio does speaker diarization
uvicorn is faster than hypercorn but hypercorn supports HTTP/2 and HTTP/3. FastAPI with uvicorn is reasonably fast.
Representational engineering lets you control LLM output based on preference on the fly.
When I set up a training:
- On inviting for DuckDB workshop on Sun evening, Gramener starts accepting immediately, Straive doesn’t.
- Straive has high spread of joining time. When joining Gitlab Pipelines Workshop, Straive starts meeting (e.g. Premlal) many minutes early. Gramener floods in (due to alert). Straive streams in slowly.
- Gitlab Pipelines Workshop acceptances: Gramener 47, Straive 100

Fri, 29 Sep 2023 01:45:53 +0000

My PyCon talks are a way for me to learn. I usually pick topics I don’t know about.

But at PyCon India 2023 the organizers picked “Programming Minecraft with Python” - a talk I’d given before. So, I started exploring ways to game it.

(I like gaming things. It’s boring otherwise. Once, Infosys had me write a 400-page document. I began each page with a letter that spells out a poem.)

Sanjeev Sehgal and I were discussing Hasbro Gaming Studios and how Gramener could help with Gen AI, which gave me an idea.

What if AI could generate code to play Minecraft?

So welcome to JNTU Hyderabad at 11 am tomorrow for “AI Coding & Gaming: Programming Minecraft with Python”. I’ve no idea what’ll happen 🙂

https://in.pycon.org/2023/schedule/

ai-coding on S Anand

Things I Learned - 29 Mar 2026

Things I Learned - 24 Aug 2025

Meta AI Coding: Using AI to Prompt AI

Things I Learned - 10 Aug 2025

Things I Learned - 08 Jun 2025

When to Vibe Code? If Speed Beats Certainty

The Magic of Repeated ‘Improve It’ Prompts

How to Visualize Data Stories with AI: Lessons

Research usefulness

Ideate visual representations

Prototype the visual

Overall Interface & Navigation

1. Public Conversation (Round Start)

2. Alliance Formation (Preference Proposals/Outcomes/Results)

3. Private Conversations (Paired Chats)

4. Voting (Reasons & Votes)

5. Elimination

6. Jury Speeches & Voting (Final Round)

7. Final Results

Interactivity (Clicking on Models)

Break down the task

Minimal Front-End with a Single View

Improve the scaffolding

Implement the Timeline Scrubber & URL Sync

Plan Your Data Structures

Sidebar 2 & 3: ALLIANCES and ELIMINATIONS Sections

Sidebar 1: CHAT Section

Improve Sidebar

Core Stage Visualization (Circle of Players)

Tweaks & Manual Edits

Add documentation

Lessons

Things I Learned - 16 Feb 2025

Launching an app only with LLMs and failing

I couldn’t generate a SPEC.md using LLMs

Things I Learned - 10 Nov 2024

How can non-developers learn AI coding?

Leaning into the power of AI coding

Challenge: code in 10 minutes with only an LLM

Comments

Cursor custom rules

AI Coding: $12M return for $240K spend?

Things I Learned - 31 Mar 2024

I couldn’t generate a `SPEC.md` using LLMs