#html

• Tue, May 13, 2025. Bootstrap has a .stretched-link that makes a link cover the containing block. A clever trick that I discovered when Claude 3.5 Sonnet wrote my code. #html

• Sun, May 11, 2025. Pandoc has several options useful when converting Markdown to HTML (cat file.md | pandoc -f markdown -t html). My favorites: #document-conversion #html #markdown
  • --no-highlight skips code-highlighting. --highlight=pygments adds Pygments styling
  • --wrap=none doesn't wrap the content in a single block
  • --number-sections adds section numbering (<h2>1. Introduction</h2>)
  • --shift-heading-level-by=NUM – shift all headings by NUM levels (e.g., start at <h2> instead of <h1>)
  • pandoc -f markdown-auto_identifiers drops the auto-identifiers extension that generates id=... for each heading
  • pandoc -f gfm uses GitHub flavored Markdown. Run pandoc --list-extensions=gfm to identify the extensions it uses.
  • Pandoc's Markdown extension examples are quite extensive.
  • Auto-enabled GFM extensions:
    • alerts: GitHub-style callouts (info, tip, warning) via > [!TYPE] blocks.
    • autolink_bare_uris: Turns bare URLs into links, without needing <...>.
    • emoji: Parses :smile:-style codes into Unicode emoji characters.
    • footnotes: Enables footnote syntax with [^id] and definitions at the bottom.
    • gfm_auto_identifiers: Uses GitHub’s heading-ID algorithm: spaces → dashes, lowercase, removes punctuation.
    • pipe_tables: Enables table.
    • raw_html: Raw HTML is unchanged.
    • strikeout: Enables strikethrough with ~~text~~.
    • task_lists: Parses - [ ] and - [x] items as checkboxes.
    • yaml_metadata_block: YAML front matter for document metadata, e.g. <title>
  • GFM extensions worth enabling:
    • ascii_identifiers: Strips accents/non-Latin letters in automatically generated IDs.
    • bracketed_spans: [Warning]{.alert} becomes <span class="alert">
    • definition_lists: Term\n: Definition text becomes a definition list
    • fenced_divs: ::: {.note} block creates a <div class="note">...</div>
    • implicit_figures: Standalone images become <figure> with <figcaption>.
    • implicit_header_references: [Section] is treated as [Section][#section]
    • raw_attribute: <b>bold</b>{=html} is inserted as HTML
    • smart: Converts straight quotes to curly, -- to en-dash, --- to em-dash, ... to ellipsis.
    • subscript & superscript: E.g. H~2~O and E = mc^2^

• Sat, May 10, 2025. snapdom is a fast, light, element capture alternative to html2canvas but doesn't work well with non-CORS images or iframes. #document-conversion #html

• Sat, May 10, 2025. Sli.dev is a Markdown slide language. Similar to Marp #ai-coding-tools #github #html #markdown

• Sun, Apr 27, 2025. With LLMs writing code, it's becoming practical to run so many more things in SQL -- such as parsing HTML. Simon Willison #ai-coding-tools #automation #code-agents #dev #future #html #llm-ops #markdown #prompt-engineering

• Tue, Apr 8, 2025. One way to copy as Markdown: copy page contents, paste in text-html.com, copy HTML, paste in Turndown, copy Markdown. #document-conversion #html #markdown

• Sun, Apr 6, 2025. AnimeJS released version 4. It animates HTML, SVG, Canvas, and WebGL with a consistent API. Looks elegant and powerful. #ai-art #html

• Sat, Apr 5, 2025. <select> will soon be very customizable via CSS. Including custom HTML inside options - even SVG. MDN. Edge/Chrome already support it. #future #html

• Thu, Apr 3, 2025. CSS Speech is a W3C spec that lets you control how screen readers should read pages. No browser support now, though. #html #speech-to-text #web-dev

• Thu, Apr 3, 2025. Clipboard2Markdown is a utility that lets you paste rich text and convert it to Markdown. #document-conversion #html #markdown

• Tue, Mar 25, 2025. Cursor with Claude 3.7 Max seems surprisingly good at generating multi-page sites at one shot. Potentially, it can edit large repositories of code as well at one shot. If that's the case, the way we write code will require higher order thinking skills: broad sweeping changes rather than micro edits. #ai-coding-tools #code-agents #dev #github #html #markdown #prompt-engineering #web-dev

• Tue, Mar 18, 2025. Block notes is a notion like library for editor components. Converts to Markdown #html #markdown

• Sun, Mar 16, 2025. Monolith downloads web pages as a single HTML file by embedding content. #document-conversion #html #web-dev

• Sat, Mar 15, 2025. htmlq and pup query HTML. They're like jq for HTML. #github #html #markdown #prompt-engineering #web-dev

• Sat, Mar 15, 2025. What makes client-side computing on the browser powerful is #cloud #html #server #web-dev
  • There's nothing to install
  • Private by default: data stays with client
  • Speed: no latency

• Sat, Mar 15, 2025. MathML Core is a language and layout specification, distinct from MathML 2/3. It's not fully compatible with JATS XML. #html
  • latexmlmath converts TeX to MathML.
  • m|math { font-family: "Noto Sans Math", "Noto Sans" } is a popular OpenType Math font. Browsers default to native fonts: e.g. Cambria Math on windows. Explore at https://fred-wang.github.io/MathFonts/.
  • The people working on this at arXiv are: Deyan Ginev, Fred Wang, and Norbert Preining. Their work is sponsored by NSF.

• Sat, Mar 15, 2025. LibreOffice is now on WASM. ZetaJS provides office in the browser. Has a CDN (that was down from our IP). 35M packaged binary. 100M of in-memory file-system loaded. #document-conversion #html #markdown #web-dev
  • Useful for: Document conversion, Thumbnail generation, Text extraction, Merging / splitting documents

• Fri, Mar 14, 2025. Playwright seems to be the emerging standard for modern browser testing/automation, beating Cypress and Selenium. #future #html #prompt-engineering

• Fri, Mar 14, 2025. Apify is a cloud scraper platform. Here's how they optimize their AI Web agent - Source: #ai-coding-tools #automation #code-agents #html #optimization #prompt-engineering #web-dev
  • Remove redundant tags and attributes (e.g. accessibility, etc.). Explore readability.
  • Add a unique gid to each element.
  • Add the screenshot WITH a "Set of Marks" - "SoM" (read research paper) highlighting important clickable elements.
  • Code output is brittle. Use tools / DSL - e.g. visit_url(url), click_element(text, gid, tagName), etc.

• Tue, Mar 11, 2025. Bots need structured content (e.g. Markdown, XML). Humans need rich content (e.g. HTML). Here are 4 ways to serve both, roughly in increasing order of sophistication: #code-agents #html #markdown #prompt-engineering
  1. Different URLs. E.g. https://example.org/about/ vs https://example.org/about.md (this is how Jekyll or Hugo work). Use for static sites generators.
  2. JavaScript. Inject after Markdown: <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script><script>document.body.innerHTML = marked(document.body.textContent);</script>. Use for dynamically generated static sites.
  3. URL query parameters. E.g. ?format=markdown vs ?format=html vs ?format=json. Use in APIs.
  4. Content Negotiation. Based on the user agent and Accept header, serve Markdown or HTML. Send Vary: Accept to indicate that the response depends on the Accept header. Use for dynamic web apps.

• Thu, Feb 13, 2025. I switched to fish shell mainly because: #ai-coding-tools #github #html #markdown
  • Autocomplete and tab completion works perfectly, out-of-box.
  • Syntax highlighting is beautiful
  • Great multi-line editing

• Sun, Jan 26, 2025. A WebAssembly compiler that fits in a tweet deconstructs a piece of JS that creates a tiny WebAssembly calculator. It's a great walk-through of JavaScript compression tricks and how WebAssembly works. Simon Willison #ai-coding-tools #html #web-dev

• Sat, Dec 21, 2024. What to use for hosting: ChatGPT #chatgpt #cloud #github #hosting #html #server #web-dev
  • GitHub Pages: Static websites, medium files
  • Cloudflare Pages: Static websites, global delivery
  • Vercel: Frontend frameworks (e.g. Next.js) with high DX and ISR, small files
  • Netlify: JAMstack projects, minimal back-end, moderate files
  • Glitch: Small static projects
  • Render: Full-stack apps requiring databases and server-side compute
  • Firebase Hosting: Small sites, limited large files
  • Archive.org: Public archival, large files
  • Google Drive: File sharing, large files
  • Dropbox: File sharing, moderate files
  • Cloudflare R2: Static assets, large file delivery

• Thu, Nov 28, 2024. HTMX focuses on HTML over JS. Like server responses being HTML snippets not JSON. But I need front-end over back-end. Client side apps. HTMX doesn't help much there, e.g. templating, or just plain JS code. #html #web-dev
  • htmx client side templates do can convert JSON to HTML.

• Mon, Nov 25, 2024. Crawl4AI and Firecrawl are tools / libraries to convert websites into LLM Friendly Markdown and extract structured data using LLMs. #ai-coding-tools #code-agents #document-conversion #html #llm-ops

• Sat, Nov 23, 2024. A list of Markdown to Website converters on this thread: #document-conversion #github #html #markdown
  • Jekyll - Ruby - 2008
  • MkDocs - Python - 2014
  • GitBook - JavaScript (Node.js) - 2014
  • MkDocs Material - Python (MkDocs-based) - 2016
  • Docsify - JavaScript - 2016
  • MdBook - Rust - 2017
  • Antora - JavaScript (Node.js) - 2017
  • Docusaurus - JavaScript (React) - 2017
  • JupyterBook - Python - 2019
  • Keenwrite - Java - ~2019
  • Honkit - JavaScript (GitBook fork) - 2019
  • Nextra - JavaScript (Next.js) - 2020
  • Astro - JavaScript/TypeScript - 2021
  • Hugo Book - Go (Hugo-based) - ~2020
  • Clowncar - JavaScript/Node.js - ~2021
  • Quarto - R and Python - 2022
  • Starlight - JavaScript/TypeScript - 2023

• Wed, Nov 20, 2024. Alt Text will very likely be a browser feature. It's important for the Alt text to flow as part of the content when listening to the page. Perhaps even become a part of the browser APIs like speechRecognition. #future #html #speech-to-text

• Mon, Nov 18, 2024. A HTML quine: A page that, when rendered as HTML, shows the HTML source code of the page! #github #html #web-dev

• Mon, Nov 18, 2024. You can enable syntax highlighting just using fonts. Ref #ai-coding-tools #github #html #markdown

• Mon, Nov 18, 2024. HTML is all you need shows examples of using HTML for notebooks instead of Jupyter, Observable, etc. #html #markdown #web-dev

• Fri, Oct 11, 2024. HTML for People is a nice introduction to HTML. #html #web-dev

• Mon, Oct 7, 2024. If you want to create a console.llm() function, a browser extension is the best way, because some pages have Content-Security-Policy that block eval, form submission, fetch from other domains, and script execution. #html #llm-ops

• Sat, Sep 28, 2024. Pyodide can access the DOM and JavaScript in the browser #html

• Wed, Sep 25, 2024. When you paste HTML into Excel, it automatically changes the font of the cell to match the content in the HTML! #html

• Fri, Sep 20, 2024. <link rel="modulepreload"> lets you load and compile modules early! #future #html #prompt-engineering

• Sun, Aug 11, 2024. DocxTemplater is SlideSense but open-core and handles DOCX as well! #document-conversion #html #markdown

• Sun, Apr 14, 2024. W3C is exploring ways to allow web pages to train LLMs, to flag content as AI generated, etc. #future #html #web-dev

• Wed, Apr 3, 2024. CSS nesting is now available in browsers #html #web-dev

• Sat, Mar 2, 2024. You can use slots to stream HTML out of order! #future #html #prompt-engineering #web-dev

• Fri, Feb 23, 2024. htmz is a fantastic way to load HTML into elements! #future #html #markdown #web-dev

• Sun, Jan 7, 2024. In-browser playgrounds has compiled WASM versions of Python, PHP, SQLite. #ai-coding-tools #github #html #web-dev

• Sun, Dec 10, 2023. v0.dev creates web pages from code. Example. #dev #future #github #html #markdown #web-dev