html on S Anand

When the prompt is longer than the code

Fri, 05 Jun 2026 17:14:17 +0800

I used pi to create a compact home page for media.s-anand.net using these prompts:

Create index.html - a simple, elegant page that says that this page (media.s-anand.net) serves large media files for Anand - that’s where they should look instead.

… followed by:

Skip the part that says “Please visit …”

… then:

Shorten index.html to just 2-3 elegant rules of CSS. I want it MUCH smaller and simpler.

… and finally:

Center vertically and horizontally.

These prompts ended up being larger than the 471-byte index.html:

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>media.s-anand.net</title>
<style>
  body { min-height: 100vh; display: grid; place-content: center; margin: auto; font: 1.25rem/1.6 system-ui, sans-serif; }
  h1 { font-size: clamp(2rem, 8vw, 4rem); }
</style>
<h1>media.s-anand.net</h1>
<p>This domain serves large media files for <a href="https://www.s-anand.net/">Anand</a>.</p>
</html>

Not that this matters, because:

I didn’t know what I wanted and having an AI coding agent generate a first draft helped with starting trouble and ideation.
I don’t know how to center on the screen and this did it for me.
I am practicing the skill that matters - reviewing - and not the skill AI is taking over - writing code.

Things I Learned - 19 Oct 2025

Sun, 19 Oct 2025 00:00:00 +0000

This week, I learned:

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

Things I Learned - 03 Mar 2024

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

This week, I learned:

You can use slots to stream HTML out of order!
Shane Parrish. Short-term patience podcast
- have a frame of reference to relate EVERY experience to. That helps you evaluate (measure) and learn. That’s part of what Charlie Munger’s lattice of frameworks is about
- when there is a very high or very low interest scenario, low interest scenario then go ultra long term. Issued hundred years when the interest rate regime was very low
- short term optimal is rally long term optimal. So you need to learn to take a loss and look like an idiot to play the long-term game
- grit is a behavior that enables long-term thinking. Short term success gives you the luxury to think about long term
- #IMP power is about optionality. It’s about being in a position where you have the options that can affect the positive change rather than circumstances controlling you. Read Robert greene’s book on the 48 laws of Power
- low leverage enables that
- begin with the end in mind. Always
- how do you think about risk? Well, things do happen. It’s as simple as that
- autonomy and decentralization helps derisk
- do more and more of what works. That’s a powerful way of compounding
- long-term investments are better than frequent trading because you get to reinvest the tax you otherwise would have paid. So unless the alternative is super compelling, stay invested
- if you need to be the person who DOES the thing, you delegate less, leverage list, compound less, because you have to DO. BE A PERSON WHO SETS THE FIELD INSTEAD. The coach, the chess master, the director, patient strategist who Waits for the good hit
Being in Control motivates #Lesson. my cycle tires were flat. I thought it was someone pulling out the air and felt very demotivated. But once I carried my cycle pump, I felt so much more in control and power and felt a whole lot better
SourceGraph is the default platform for private code completion & search
MetaVoice 1B offers voice cloning on American & British accents with 30s training
Qwen 1.5 72B appears to outperform Mistral Medium, making it one of the top non-proprietary models
Llava 1.6 is a substantial improvement over Llava 1.5 and slightly better than CogVLM, Qwen-VL
AI scams are growing. Deepfakes scammed $34m. But voice fake for kidnapping is scarier.
Buildspace’s demo is a great demo of how voice and actions can be used effectively.
demucs does an EXCELLENT job of splitting songs into drums, bass, vocals and others

Always use value= for dynamic HTML options

Mon, 31 Jul 2023 06:45:48 +0000

Even after 30 years of HTML, I learn new things about it.

This Monday morning, I woke up to a mail from Sundeep saying requests for a Data Engineer - AWS/Azure/GCP in our internal fulfilment portal raised an error.

My guess was one of these:

The “/” in the role is causing a problem. (Developer mistake.)
The role exists in one table but not the other. (Recruitment team mistake.)
The application wasn’t set up / restarted properly. (IT mistake.)

All three were wrong. So I dug deeper.

The role was defined as Data Engineer - AWS/Azure/GCP (note the 2 spaces before the hyphen). But the form kept sending Data Engineer - AWS/Azure/GCP (spaces were condensed).

I swear there was NOTHING in the code that changes the options. The relevant line just picked up the role and rendered it inside the <select>:

```markup
<option>{{ row['Role'] }}</option>

I used the browser’s developer tools to inspect the <select> element. It showed the options with the 2 spaces:

<option>Data Engineer  - AWS/Azure/GCP</option>

But, when I selected it and printed the value, it had only one space.

> console.log(document.querySelector("#role").value<br/>'Data Engineer - AWS/Azure/GCP'

That’s when it hit me. HTML condenses whitespaces.

Till date, I only ever used <option value=""> when specifying a value different from what’s displayed. I never thought of using it to preserve the value.

LESSON: If you’re dynamically generating <option>s, ALWAYS use value= with the same value as the text.

How to extend Markdown with custom blocks

Fri, 08 Jan 2021 09:37:48 +0000

One problem I’ve had in Markdown is rendering a content in columns.

On Bootstrap, the markup would look like this:

<div class="row">
  <div class="col">...</div>
  <div class="col">...</div>
</div>

How do we get that into Markdown without writing HTML?

On Python, the attribute lists extension lets you add a class. For example:

This is some content
{: .row}

… renders <p class="row">This is some content</p>.

But I can’t do that to multiple paragraphs. Nor can I next content, i.e. add a .col inside the .row.

Enter markdown-customblocks. It’s a Python module that extends Python Markdown. This lets me write:

::: row
::: col
Content in column 1
::: col
Content in column 2
::: row
::: col
Content in column 1
::: col
Content in column 2

This translates to:

<div class="row">
  <div class="col">Content in column 1</div>
  <div class="col">Content in column 2</div>
</div>

Better yet, we can create our own custom HTML block types. For example, this code:

from markdown import Markdown
from customblocks import CustomBlocksExtension

def audio(ctx, src, type="audio/mp3"):
    return f'''<audio src="{src}" type="{type}">
      {ctx.content}
    </audio>'''

md = Markdown(extensions=[
    CustomBlocksExtension(generators={
        'audio': audio
    }),
])

… lets you convert this piece of Markdown:

md.convert("""
::: audio src="mymusic.ogg" type="audio/ogg"
    Your browser does not support `audio`.
""")

… into this HTML:

<audio src="mymusic.ogg" type="audio/ogg">
  Your browser does not support <code>audio</code>.
</audio>

markdown-customblocks is easily the most useful Python module I discovered last quarter.

Google web authoring statistics

Wed, 25 Jan 2006 12:00:00 +0000

Google web authoring statistics. An analysis of over a billion pages to see how people use HTML markup.

PDF to HTML via Gmail

Sun, 18 Dec 2005 12:00:00 +0000

Convert PDF to HTML via Gmail. This is the only way I know of converting something from PDF into another format. Unfortunately, it doesn’t work for GoogleMail in the UK.

HTML keyboard shortcuts

Wed, 30 Nov 2005 12:00:00 +0000

HTML keyboard shortcuts using the “accesskey” attribute.

Convert pictures to ASCII

Thu, 24 Jan 2002 12:00:00 +0000

Convert pictures to ASCII. In colour. Quite impressive.

w3schools

Fri, 12 Jan 2001 12:00:00 +0000

Learn web-development at w3schools.