Nerdy Momo Cat

March 27, 2026

Webtrotion 2.4.x has landed with support for tab blocks and Heading 4.

I think one of the biggest reasons why I'm still maintaining this whole setup instead of using one of the prevalent Notion-to-website converters out there is: no one else is going to introduce and add components at the rate that I need them, and Notion has been shipping fast lately. I think this gives me a good idea of what is available, what can be done versus what can’t be done.

See, here are the headings in order, depicted by non-Taylor Swift songs.

Manchild

So Easy to Fall in Love

bad idea right?

And see, heading 4 is real now

Yes, Notion now supports full tiny-heading mode. Something to note here is that in Webtrotion, we set the page title as H1 and then move down every corresponding heading, so the H1 inside the page becomes H2, H2 becomes H3, and so on. So this H4 on the web page actually renders as H5.

And so are tab blocks

Say, if you have a Notion database where you keep adding the same URL 17 times (same link, different casing, extra tracking params, whatever), this script [a] will: pull all pages from the database, normalize the URL (so duplicates actually match), keep the oldest page, archive the duplicates.

And yes I’m showing both versions in tabs [b]. And the whole point with tabs is: I can keep the site clean without a ton of toggles and such.

#!/usr/bin/env python3"""dedupe_notion_urls.pyArchives duplicate rows in a Notion database based on a URL property.Keeps the oldest page (by created_time) for each normalized URL.Setup:  export NOTION_TOKEN="secret_..."  python dedupe_notion_urls.py --db <DATABASE_ID> --property "External URL" --dry-runThen remove --dry-run to actually archive duplicates.Requires:  pip install requests"""from __future__ import annotationsimport argparseimport osimport reimport sysfrom urllib.parse import urlparse, urlunparseimport requestsNOTION_VERSION = "2022-06-28"def normalize_url(u: str) -> str:    u = (u or "").strip()    if not u:        return ""    # make sure it parses (allow people to paste without scheme)    if not re.match(r"^[a-zA-Z][a-zA-Z0-9+.-]*://", u):        u = "https://" + u    p = urlparse(u)    # normalize host + strip tracking + strip fragments    scheme = p.scheme.lower() or "https"    netloc = p.netloc.lower()    path = re.sub(r"/+$", "", p.path)  # trim trailing slashes    # drop query entirely (simple, aggressive dedupe)    # (you can keep whitelisted params if you want)    query = ""    fragment = ""    return urlunparse((scheme, netloc, path, "", query, fragment))def notion_headers(token: str) -> dict:    return {        "Authorization": f"Bearer {token}",        "Notion-Version": NOTION_VERSION,        "Content-Type": "application/json",    }def query_database(token: str, database_id: str, start_cursor: str | None = None) -> dict:    url = f"https://api.notion.com/v1/databases/{database_id}/query"    payload = {"page_size": 100}    if start_cursor:        payload["start_cursor"] = start_cursor    r = requests.post(url, headers=notion_headers(token), json=payload, timeout=60)    r.raise_for_status()    return r.json()def archive_page(token: str, page_id: str) -> None:    url = f"https://api.notion.com/v1/pages/{page_id}"    payload = {"archived": True}    r = requests.patch(url, headers=notion_headers(token), json=payload, timeout=60)    r.raise_for_status()def get_url_prop(page: dict, prop_name: str) -> str:    prop = page.get("properties", {}).get(prop_name)    if not prop:        return ""    if prop.get("type") != "url":        return ""    return prop.get("url") or ""def main() -> None:    p = argparse.ArgumentParser()    p.add_argument("--db", required=True, help="Database ID")    p.add_argument("--property", default="External URL", help="URL property name")    p.add_argument("--dry-run", action="store_true")    args = p.parse_args()    token = os.environ.get("NOTION_TOKEN")    if not token:        print("Missing NOTION_TOKEN env var", file=sys.stderr)        sys.exit(1)    pages = []    cursor = None    while True:        data = query_database(token, args.db, cursor)        pages.extend(data.get("results", []))        if not data.get("has_more"):            break        cursor = data.get("next_cursor")    # group by normalized URL    groups: dict[str, list[dict]] = {}    for pg in pages:        raw = get_url_prop(pg, args.property)        norm = normalize_url(raw)        if not norm:            continue        groups.setdefault(norm, []).append(pg)    duplicates = []    for norm, items in groups.items():        if len(items) <= 1:            continue        items.sort(key=lambda x: x.get("created_time", ""))        keep = items[0]        trash = items[1:]        for t in trash:            duplicates.append((norm, keep["id"], t["id"]))    print(f"Found {len(duplicates)} duplicate pages to archive")    for norm, keep_id, dupe_id in duplicates:        print(f"- {norm}\n    keep: {keep_id}\n    archive: {dupe_id}")        if not args.dry_run:            archive_page(token, dupe_id)    if args.dry_run:        print("(dry-run) No pages were archived")if __name__ == "__main__":    main()

// dedupe_notion_urls.js//// Archives duplicate rows in a Notion database based on a URL property.// Keeps the oldest page for each normalized URL.//// Setup://   export NOTION_TOKEN="secret_..."//   node dedupe_notion_urls.js --db <DATABASE_ID> --property "External URL" --dry-run//// Then remove --dry-run to actually archive duplicates.//// Requires Node 18+ (global fetch).const NOTION_VERSION = "2022-06-28";function normalizeUrl(u) {  u = (u ?? "").trim();  if (!u) return "";  // allow missing scheme  if (!/^[a-zA-Z][a-zA-Z0-9+.-]*:\/\//.test(u)) u = "https://" + u;  const url = new URL(u);  url.protocol = (url.protocol || "https:").toLowerCase();  url.hostname = url.hostname.toLowerCase();  // trim trailing slashes  url.pathname = url.pathname.replace(/\/+$/, "");  // drop query + fragment (aggressive dedupe)  url.search = "";  url.hash = "";  return url.toString();}function parseArgs() {  const args = process.argv.slice(2);  const out = { property: "External URL", dryRun: false };  for (let i = 0; i < args.length; i++) {    const a = args[i];    if (a === "--db") out.db = args[++i];    else if (a === "--property") out.property = args[++i];    else if (a === "--dry-run") out.dryRun = true;  }  if (!out.db) {    console.error("Usage: node dedupe_notion_urls.js --db <DATABASE_ID> [--property \"External URL\"] [--dry-run]");    process.exit(1);  }  return out;}function headers(token) {  return {    Authorization: `Bearer ${token}`,    "Notion-Version": NOTION_VERSION,    "Content-Type": "application/json",  };}async function queryDatabase(token, databaseId, startCursor) {  const res = await fetch(`https://api.notion.com/v1/databases/${databaseId}/query`, {    method: "POST",    headers: headers(token),    body: JSON.stringify({ page_size: 100, ...(startCursor ? { start_cursor: startCursor } : {}) }),  });  if (!res.ok) throw new Error(`Query failed: ${res.status} ${await res.text()}`);  return res.json();}async function archivePage(token, pageId) {  const res = await fetch(`https://api.notion.com/v1/pages/${pageId}`, {    method: "PATCH",    headers: headers(token),    body: JSON.stringify({ archived: true }),  });  if (!res.ok) throw new Error(`Archive failed: ${res.status} ${await res.text()}`);}function getUrlProp(page, propName) {  const prop = page?.properties?.[propName];  if (!prop) return "";  if (prop.type !== "url") return "";  return prop.url ?? "";}(async function main() {  const token = process.env.NOTION_TOKEN;  if (!token) {    console.error("Missing NOTION_TOKEN env var");    process.exit(1);  }  const args = parseArgs();  const pages = [];  let cursor = undefined;  while (true) {    const data = await queryDatabase(token, args.db, cursor);    pages.push(...(data.results ?? []));    if (!data.has_more) break;    cursor = data.next_cursor;  }  const groups = new Map();  for (const pg of pages) {    const raw = getUrlProp(pg, args.property);    const norm = normalizeUrl(raw);    if (!norm) continue;    if (!groups.has(norm)) groups.set(norm, []);    groups.get(norm).push(pg);  }  const duplicates = [];  for (const [norm, items] of groups.entries()) {    if (items.length <= 1) continue;    items.sort((a, b) => (a.created_time ?? "").localeCompare(b.created_time ?? ""));    const keep = items[0];    for (const dupe of items.slice(1)) {      duplicates.push({ norm, keepId: keep.id, dupeId: dupe.id });    }  }  console.log(`Found ${duplicates.length} duplicate pages to archive`);  for (const d of duplicates) {    console.log(`- ${d.norm}\n    keep: ${d.keepId}\n    archive: ${d.dupeId}`);    if (!args.dryRun) await archivePage(token, d.dupeId);  }  if (args.dryRun) console.log("(dry-run) No pages were archived");})().catch((err) => {  console.error(err);  process.exit(1);});

I spent the past four weeks with LLM coding assistants shipping five new features, mostly because I finally sat down and decided to just get them done. Multiple author support is something I wanted for potential guest posts and collaborative blogs down the line, external content (especially custom components) from GitHub was something I wanted for my own playable interfaces (like LLM chat components), gallery layouts make visual content work better (and hopefully is used by someone), copy as markdown is for the LLM era where I'm pasting posts into Claude and ChatGPT all the time anyway, and cover backgrounds finally make those Notion cover images do something useful instead of just sitting there being read in Webtrotion but never used.

Some of these were harder than they looked (OG images for author pages, ugh, that was an interesting hassle to complete), and some were easier, like cover backgrounds took maybe an hour [a].

Most of these plans were drafted using Claude Code with a mixture of Opus 4.5 and Sonnet 4.5. I initially had them drafted by GPT 5.2 on Codex, but they weren't as good, so I modified them (and used Claude Code for that too!). The initial implementation was always done by Claude Code again with a mixture of Sonnet and Opus on the 4.5 series, and then fixes were done by Codex with the GPT 5.1 codex model on medium thinking as well as with Gemini Pro 3.0. The biggest reason why I preferred Codex over Gemini is it's really hard to control Gemini to not make edits to things, and I wish either Codex or Gemini shipped with a plan-only mode like Claude Code has, because why do they keep making edits to things without being asked? I realized that if I have a new feature in mind, the best way to get started is always Claude Code for me, for some reason.

Multiple Author Support

I went back and forth on how to implement this. The obvious approach was to make a separate Authors database and use Notion's relation property to link posts to authors, which would give maximum flexibility (each author could have a full page with custom layout, rich content, whatever), but it also means asking users to create a second database, get another database ID, manage relations, and I'd have to parse two data sources during the build, which just felt like too much complexity for what's essentially a guest post feature.

I also considered using a rich text property where people could just type names and color/link them however they want, but then I'd have to parse arbitrary text to extract author names, and building individual author pages from that would be a nightmare because how do you even tell where one author name ends and another begins if someone decides to get creative with their formatting.

So I went with a multi-select property, which is simple (add an Authors multi-select to your database, create options for each author, and assign them to posts), and you lose some flexibility in how author pages look, but honestly? Author pages aren't that important, this feature is mostly for guest posts anyway, so keeping it simple made more sense than building out this whole elaborate author management system that maybe three people would use.

// <<shiki-transform>>// constants-config.json5{  // === Site Information ===  // Basic details about your website used for metadata, RSS feeds, and SEO.  "site-info": {    // Your name or the name of your site's author.    author: "Your Name",    // Your custom domain name (e.g., "example.com"). Do NOT include "https://" or trailing slash.    "custom-domain": "",    // The sub-directory your site is deployed in (e.g., "/blog"). Leave empty if at root.    "base-path": "",    // === Multi-Author Support ===    // If the Authors property doesn't exist in your Notion database, settings below are ignored.    // Personal URL for the site's author (from "author" field above).    // Leave blank to link to author page (if enabled) or show as plain text.    "site-author-url": "",     // Avatar/photo URL for the site's author.    "site-author-photo": "",     // Configure author handling for posts with a multi-select Authors property in Notion.    // When a post's Authors property is empty, the site's author (above) is used as fallback.    authors: {       // If true, builds /authors/ index and /authors/[author]/ pages.      "enable-author-pages": true,       // If true, only show bylines and build author pages when at least one post has a non-default author.      "only-when-custom-authors": true,     },   },}

How Author Pages Work

Set "enable-author-pages": true under site-info → authors in constants-config.json5, and Webtrotion builds an /authors/ index page listing all authors who have written posts, plus individual /authors/[author]/ pages for each author, showing their bio, photo, and all their posts. The author page layout is similar to tag pages, with the addition of author image on the left, name on right with post count, description on bottom [b] as shown below, and posts listed below.

If author pages are enabled, they also generate OG images, which was an interesting project and hassle to complete, which I did. The OG image generation pulls the author photo if you provided one and uses a two-column layout with the photo and description, similar to how the actual author page is structured.

If you set "only-when-custom-authors": true, bylines and author pages only appear when at least one post has a non-default author, so when all posts use the site author, the feature stays hidden (clean and minimal for solo blogs that don't need all this author attribution stuff).

Author Bios and Photos

In your Notion database, edit the Authors multi-select property and add descriptions to individual author options, using shortcodes to specify URLs and photos like this:

 <<author-url>>https://example.com<<author-url>>  <<author-photo-url>>https://example.com/photo.jpg<<author-photo-url>>  Author description text goes here.

For the site author (the one specified in site-info → author in your config), use site-author-url and site-author-photo in your config instead of the shortcode system, because the site author isn't part of the multi-select, they're the fallback.

Bylines

Bylines now show "By [Author Name]" in post listings, stream views, and hero sections, and the logic works like this: if you don't have an Authors property on your database because you're still using an older version, it always uses the site author from your config; if you have the Authors property but it's empty on a post, it falls back to the site author; and if the Authors property has values, it uses only those authors, ignoring the site author completely.

If an author has an external URL (set via the shortcode in the multi-select description), you'll see a little icon in the byline that links out, and clicking the author name takes you to their author page if enabled, or on the author page itself, if there's an external URL, you'll see a "Visit my website" button, which is good for guest posts where authors want to link back to their own site and get a backlink from here.

Image Format Conversion

Satori, which is the library used for OG image generation, only accepts JPG, JPEG, or PNG, so originally if your featured image or author photo wasn't one of those formats, I just ignored it and you'd get a broken OG image or no image at all, but now I try to use Sharp to convert it to PNG first, so if you link to a WebP or AVIF or whatever, it downloads it, converts it, and uses it, allowing more flexibility and fewer edge cases where OG images just don't generate.

External Content

The External URL property is new in 2.3, and it does two things depending on what URL you give it.

If the External URL matches one of the GitHub folder prefixes you configured in external-content → sources, Webtrotion treats it as content to import. It downloads the files from that GitHub folder during the build, rewrites all the asset paths, and renders everything with the same typography, popovers, margin notes, cite-this sections you'd get with native Notion content. This works for any Markdown/MDX/HTML you have in a repo, for example Jupyter notebook outputs, R Markdown docs etc.

If the External URL doesn't match any of those folder prefixes, Webtrotion treats it as a link-out post. It still renders your Notion metadata (excerpt, tags, publish date, everything) in listings and on the post page, but clicking the post preview opens that external URL in a new tab instead of rendering your post content. Perfect for "I wrote this elsewhere" or "I was on this podcast" announcements where you want the post to show up on your site but the actual content lives somewhere else.

// === External Content ===// URL prefixes that tell the site to fetch GitHub content and render it locally.// Add public *parent* GitHub folder/file URLs (/tree/... or /blob/...) used in Notion's "External URL" field.// Each External URL in Notion should point to a post folder inside one of those parents.// If it matches a prefix, the build downloads and renders it as internal Markdown/MDX/HTML."external-content": {  // Toggle external content pulled from remote sources via Notion's "External URL" field. Must be true to use features below.  enabled: false,  // Remote folders containing external content files.  sources: {    // Each subfolder is treated as a markdown post. Supports media, styled using corresponding Notion blocks.    // Example: github.com/yourname/repo/tree/main/markdown    markdown: "",    // Each subfolder is treated as an MDX post. Supports custom components/media, lightly Notion-styled.    // Example: github.com/yourname/repo/tree/main/mdx    mdx: "",    // Each subfolder is treated as an HTML post. Supports assets, no styling applied.    // Example: github.com/yourname/repo/tree/main/html    html: "",  },  // Remote component folders MDX can import from (downloaded to src/external-content/custom-components).  // Also usable for markdown codeblocks via `mdx-inject` shortcode above; supports media, no styling applied.  "custom-components": "",}

Link-Out Posts

If you want your "Now" or "Linklog" collection to send people to an external article, you can set External URL to that destination (YouTube, another blog, a PDF, whatever), and Webtrotion still renders the Notion excerpt, tags, publish date, even comments count in listings, but clicking the preview opens the external link in a new tab instead of rendering your post.

If you already use Webtrotion, make sure your database has a URL property literally named External URL (reuse it for everything external and you're done, no need to create multiple properties for different use cases of External Content).

Pulling Content from GitHub Repos

Create a folder for each post (like markdown/my-post/) under those repo paths, drop your index.md or index.mdx or index.html plus any media inside that folder, then link your Notion page's External URL to that folder URL, and at build time (and in astro dev too, so local preview works), Webtrotion hits the GitHub Tree API, copies anything under those folders into src/external-posts/<folder>, mirrors assets under public/external-posts/<folder>, and writes a short hash as the cache key so if nothing changed, we skip the redownload and you don't waste time refetching stuff that's already there.

The frontmatter still comes from Notion (title, excerpt, tags, publish date), so your listings stay consistent even though the body comes from GitHub, which means you can have content living in multiple places but everything still looks unified (kinda?) on your site.

Markdown Posts

Markdown posts get parsed by the same block builder Notion uses, and I try to convert them as closely as possible to Notion block format. Callouts, toggles, tables, inline code, even the shortcode triggers like <!DOCTYPE html> <!-- inject --> behave exactly like their Notion equivalents, and footnotes, citations, interlinked sections are all extracted the same way, so the page still gets margin notes, backlinks, cite-this sections if you configured them.

I'm aiming for "looks indistinguishable from Notion," but if you drop raw HTML inside your Markdown you'll need to style it yourself because I can't parse arbitrary HTML and figure out what it's supposed to look like.

MDX Posts

MDX posts compile into real Astro components, and I only apply minimal base typography so you're free to design entirely custom layouts, import data, render charts, whatever, without fighting the Notion look. MDX is slightly messier and I wasn't perfect here, so if you want to contribute improvements, I'd love the help, because there are definitely edge cases I haven't handled well.

HTML Posts

HTML posts just get their <body> inner HTML dropped into the page after the asset URLs are rewritten. I don't touch the styling at all, whatever CSS you bundled with that HTML controls the entire experience, so use this for microsites or experiments where you already have complete markup somewhere else and you just want it to shove it on to your Notion-based site.

All three formats (Markdown, MDX, HTML) get included in RSS feeds and post listings, so external content shows up everywhere native Notion posts do. The real advantage here is that you can build completely custom HTML, interactive components, or experimental layouts that would be impossible in Notion, while still keeping everything organized in your Notion database with proper metadata, tags, and publish dates.

Notion Still Controls Metadata

Even when a post is 100% external, Notion is the source of truth for title, excerpt, author (from your Notion page title/fields), tags and collections (so listing filters, pinned posts, and RSS feed keep working), and publish date plus updated date (so Last Updated hero blocks tell the truth), which means you can mix and match however you want. Write a short intro in Notion, flip the "External URL" to a GitHub folder, and the page glues them together, or keep Notion blank and let the external Markdown [d] own the whole content, whatever works for your workflow.

Custom Components

The custom components repository slot is optional but powerful. Anything inside it ends up in src/components/custom-components for MDX imports and public/custom-components for assets, so external MDX posts and code blocks in your normal Notion based posts can import FancySlider from '@/components/custom-components/FancySlider.astro' and reuse the same interactive slider you already show on native posts.

To use custom components, set "external-content" → "enabled": true in your config. If you only want custom components and don't need to import external content, you can leave the sources object empty.

You can use these components directly inside Notion code blocks using the mdx-inject shortcode. Build a before/after image comparer, a "what's my setup?" component, whatever you want in your custom components repo, then drop it into any Notion post inside a code block. It compiles at build time, so there's still zero runtime JS unless your component adds it.

The simple "external HTML embed" shortcode you've been using didn't change, this release just makes it way easier to keep a shared library of components without copy/pasting them into multiple codeblocks every time you want to use something.

Gallery Layouts

Set "listing-view": "gallery" under collections-and-listings in constants-config.json5, and instead of the traditional vertical list with excerpts, you get a card-based grid layout. The layout shows three cards per row on large screens, two on medium, and one on small devices, and each card uses the FeaturedImage as a thumbnail, or if there's no featured image, it generates a colored block with the first letters of the post title, which keeps things visually consistent even when you forget to add images.

// <<shiki-transform>>// constants-config.json5{  // === Collections & Post Listings ===  // Configure how your posts are organized and displayed in lists.  "collections-and-listings": {    // The slug of the Notion page you want to use as your website's home page.    "home-page-slug": "home",    // If true, a section with the 5 most recent posts will be displayed on the home page.    "recent-posts-on-home-page": true,    // The number of posts to show on each page of a paginated list.    "number-of-posts-per-page": 10,    // The name of the Notion 'Collection' property value for pages in the main navigation menu.    "menu-pages-collection": "main",    // An array of 'Collection' names where posts should be displayed in full on list pages.    "full-preview-collections": ["Stream"],    // If true, any post with a slug starting with underscore will be hidden from lists.    "hide-underscore-slugs-in-lists": true,    // Listing view style for post lists.    // "list" (default): Traditional vertical list with title, date, excerpt, and tags.    // "gallery": Card-based grid layout with FeaturedImage thumbnails.    "listing-view": "gallery",   },}

Tags are capped at three visible (if a post has five tags, it shows three and then "+2" so card sizes stay consistent and you don't end up with weird wrapping), and the cards have a bouncy thing when you hover over them.

This is a global setting, so it affects everywhere: collections that aren't stream-based, recent posts if you have that enabled, tag pages, author pages, everything shows gallery layout instead of the traditional list view. You can still use "listing-view": "list" which is the default for traditional vertical lists, and I'm not making this configurable per collection [e] for the foreseeable future.

Copy as Markdown

This feature does two things: first, it generates an index.md file alongside the index.html for every post, so at posts/my-post/ you get both the rendered HTML and a clean Markdown version, which means you can curl that Markdown file if you need to reference a post in Claude Code or use it for documentation or whatever (I don't know why you'd need this but just in case you do, it's there).

// <<shiki-transform>>// constants-config.json5{  // === Block Rendering & Visual Display ===  // Global settings for how Notion content blocks and media are displayed.  "block-rendering": {    // If true, clicking on an image will open it in a full-screen lightbox/modal view.    "enable-lightbox": true,    // If true, embedded content like tweets will span full width on smaller screens.    "full-width-social-embeds": false,    // If true, images from Notion will be optimized (converted to WebP, resized).    // Warning: Can increase build time but helpful for site size.    "optimize-images": true,    // If true, all pages/posts are converted to markdown format and saved alongside HTML.    "process-content-to-markdown": true,   },}

Second, it adds a floating copy button on every page except your home page, and clicking it copies the Markdown version straight to your clipboard, ready to paste into Claude or ChatGPT or whatever LLM you're using.

Turn on "process-content-to-markdown": true under block-rendering in constants-config.json5 (this is on by default), and during every build, Astro runs a markdown-exporter integration that grabs the .post-body HTML for each rendered page, removes scripts, popover templates, margin-note helpers, basically anything that wouldn't make sense in a Markdown mirror, rewrites links and image sources so they're absolute, and converts the result with Turndown plus GFM, folds in footnotes and citations from the cache, and slaps a YAML frontmatter block on top with title, slug, canonical URL, timestamps, tags, excerpt, author, external URL.

The exporter caches output in tmp/markdown-cache, so if you rebuild without touching a post, it reuses the previous .md and doesn't waste time regenerating the same content.

Why? Because I copy content into LLMs all the time. I have a changelog for a library and I ask "what do I need to change given this changelog?" and paste it into ChatGPT or Claude, and if I copy the HTML, important stuff might get lost because sections weren't expanded or popover content didn't get included or whatever. The Markdown export gives me a clean version with everything flattened out. I made the output as clean as I could, but if you find edge cases where the conversion is weird and you have a patch in mind, let me know.

Cover Images as Hero Backgrounds

Set "cover-as-hero-background": true under theme in constants-config.json5, and when a post has a cover image, Webtrotion displays it as a low-opacity tinted background behind the hero section (title, date, tags), with the text staying readable thanks to an overlay.

// <<shiki-transform>>// constants-config.json5{  // === Theme Customization ===  // Customize the look and feel of your site, including colors and fonts.  theme: {    // Currently only the classic theme is supported.    preset: "classic",    // Define your site's color palette.    // Colors MUST be in RGB format, with spaces between numbers (e.g., "255 255 255").    colors: {      bg: { light: "249 249 249", dark: "28 30 32" },      text: { light: "34 39 42", dark: "255 255 255" },      link: { light: "85 123 118", dark: "199 200 203" },      accent: { light: "203 41 65", dark: "41 188 136" },      "accent-2": { light: "17 17 17", dark: "237 237 237" },      quote: { light: "203 41 65", dark: "205 254 183" },    },    // Just specify the font names - no URLs, no escaping needed!    // Automatically loads weights [400, 500, 600, 700] and styles [normal, italic].    "fontfamily-google-fonts": {      // Main body/UI font - can be sans-serif OR serif.      "sans-font-name": "Roboto",      // Monospace font for code blocks.      "mono-font-name": "Roboto Mono",    },    // Enable using the cover image as the hero background (with overlay for text readability).    // When enabled, displays a low-opacity tinted banner behind title/date/tags.    "cover-as-hero-background": true,   },}

This applies in two places: stream view when you're using full post previews, and individual post pages, so anywhere there's a hero section, the cover image can now be the background instead of just sitting there unused.

Cover images were always being read from Notion but never used. When this codebase started (forked from the original Astro Notion blog), the original developer was making use of them, so I figured I should too, and instead of just appending the image at the top like a banner, which looks kind of not my style, this provides a tinted background behind the hero section, which feels more editorial, like you're reading a magazine feature instead of a plain blog post.

The height is defined by the content length, not the image size, so it doesn't matter if your cover image is portrait or landscape or square, it just fills whatever space the hero content needs. The opacity gradient moves from 50-70% top to bottom, and the tint opacity itself is set to 0.4, so I tried to make sure everything stays readable even with busy background images, but if you pick a really chaotic cover image you might need to adjust things.

If a post doesn't have a cover image, the hero section renders normally (no cover, no background, simple as before).

The above is an example of cover rendering on a normal post page and you can see that I tried my best to make the text still be pretty visible.

Optimizations and Pagespeed Improvements

After I was done with all these feature implementations, I ran pagespeed, and was disappointed to see a significant decline in scores. So, here are the things I did to bump it up.

Cover Image Background Optimization

I wasn't planning to optimize this, but after implementing the basic cover background feature, I realized cover images load immediately and can be pretty large files, so I spent a couple more hours adding progressive loading.

I tried generating two versions: a tiny quality 5 placeholder that shows up instantly with just enough pixels to show color and rough composition, and a full quality 85 version that gets swapped in later. The swap happens on idle using requestIdleCallback, or falls back to a 250ms timeout after page load if the browser doesn't support it, so the full resolution image downloads in the background without blocking anything important. If the full image fails to load for any reason, the placeholder just stays there, which is fine because it's already visually similar enough that most people won't notice.

Then I ran PageSpeed and checked LCP, and it didn't work. The placeholder image wasn't being considered LCP — it was the full image.

So I tried multiple AI coding models, aka, Gemini, Claude, and Codex but none of them could solve the problem correctly. They even suggested checking the user agent and not swapping the image if it was Lighthouse or PageSpeed, which is extremely stupid. So I went back to Google like a caveman and found this:

This is such a well-written article, and it boils down to two things. First, I was setting the quality to 5, but that's not a high enough threshold. The BPP threshold [^ft_what-is-bpp] should be at least 0.05 to count as LCP, so I set the quality to 20 or 25. Second, the strategy uses CSS's multiple backgrounds feature: high-res on top, low-res underneath. The browser loads both, but the low-res shows first and counts as LCP if it meets the BPP threshold. When the high-res loads, it automatically covers the low-res with no JavaScript needed.

And this worked! I decided to use 5 vs 65 qualities and they no longer show up in LCP!

From the link, the second restriction we need to get around is the bits per pixel (BPP) threshold announced in Apr 2023. Again, to stop people gaming the system, Chrome decided that only images of a certain quality (or entropy) will be considered as your LCP element. This prevents people using incredibly low quality images in order to register a fast LCP time.

Well, you might think that was the end of my problems, but apparently it wasn't because some of the Unsplash images decided to be at least 5MB and Notion does none of the optimization on its own end. So I decided to do some optimization myself, and even with quality set to 65, I was getting images ranging from 0.5MB (for the LQIP) to 1.5MB (for the full-quality image), which was diabolical for an image that loads immediately as LCP. Given that this site uses a middle-aligned layout with reasonable max-width for reading, I decided that 2100px max width is good enough for cover images. I didn't do this optimization for other images because someone might want to host their gallery on this or whatever. But for cover images, 100% I'm going to cap them at 2100 pixels wide, which accounts for 3x DPR on a ~700px layout (700×3 ≈ 2100).

Other Optimizations

Beyond cover images, I made several other performance improvements:

Notion icons are now cached: Before this, I was just linking out to Notion's page for default SVG icons, which meant the browser had to make external network requests to Notion's servers every time someone loaded a page with icons. Now I'm actually downloading and caching them locally during the build, so if you use the same icon across multiple posts, it only gets fetched once and then reused everywhere from your own domain. This shaves off a bunch of network requests for visitors and makes page loads faster, especially if you have a lot of pages with a lot of icons.

OG images cached for authors, tags, and collections: I was already caching OG images for posts, but author pages, tag pages, and collection pages were regenerating their OG images on every build even when nothing changed. Now all of them are cached properly, and I'm relying on the data source's last edited time to decide whether to regenerate those OG images or not. This makes incremental builds way faster since OG image generation with Satori isn't exactly quick.

Font format optimization: Astro's experimental font API was including both woff and woff2 formats by default when pulling from Google Fonts, but modern browsers support woff2 across the board now, and it's smaller and better compressed. I created a provider wrapper over the Google Font provider that defaults to only woff2 (unless no woff2 is found), cutting down on font file sizes and eliminating redundant font downloads.

Search CSS optimization: The pagefind CSS (the styles for the search functionality) was being included in the critical path where it didn't need to be unless someone was actually using search, which was blocking initial render. Now it only loads the first time someone clicks the site search button, presses ⌘+K, or uses a query (q) parameter, so most page loads don't pay that CSS cost at all and initial render is faster.

Cover background quality adjustment: After implementing the dual-image loading strategy for cover backgrounds, I realized the full-resolution image quality was set to 85, which was unnecessarily high for a background image that's tinted and partially obscured anyway. I dropped it to 65, which cut the file size significantly without any noticeable visual difference behind the tinted overlay. I also had to fix an issue where external cover images from Unsplash (which Notion uses as a cover provider integration) weren't being downloaded and optimized. The problem was that my code was checking if the file extension was an image format, but Unsplash URLs include query parameters like https://images.unsplash.com/photo-1663789049904-a1e1e216c829 ?ixlib=rb-4.1.0&q=85&fm=jpg&crop=entropy&cs=srgb, so the extension check was failing. I added special handling to look at the fm= (format) parameter in the query string to determine whether something can be downloaded as an image, if the url was from Unsplash, so now Unsplash cover images get pulled down during build and optimized properly.

Bluesky comments lazy loading: The Bluesky comments component was firing its API calls immediately when the custom element connected to the DOM, which meant it was happening during initial page load, if there was a cover image (because that takes long to load) even though the comments are way down at the bottom of the page. I had to fix this issue, and the solution now works in four stages: first, wait for page load by checking window.onload (or immediately if document.readyState is already complete); second, wait for the browser to be truly idle using requestIdleCallback (with a setTimeout fallback for browsers that don't support it); third, only then attach the scroll, mousemove, and other interaction listeners; and fourth, when the user finally interacts, trigger the initialization which starts the IntersectionObserver and the background fetch. This keeps comments from blocking initial render and lets the page become interactive faster.

KaTeX fonts: I ran into a font loading time problem with KaTeX fonts. I discovered that KaTeX now, as of two months ago provides an option to use swap as the default method. I asked multiple AI models to fix this, and they suggested complicated solutions but never thought to check for this simple option. I had to Google it myself, again, like a Neanderthal. Here's the GitHub issue that led me to the fix.

What's Next

This is the last release for 2025, and early next year whenever I hyperfocus on improving Webtrotion again, I'm going to be focusing on two things:

Theme Presets

I added a theme → preset variable in the config but it doesn't do anything yet. Planning to actually ship theme presets in 2026, right now I'm thinking Scholar (clean, academic, serif-heavy with good typography for long-form reading), Neon Techno (dark backgrounds, bright accent colors, that cyberpunk aesthetic), Pastel/Barbie (soft pinks and purples, rounded corners, very 2024), Playful (squiggles, hand-drawn borders, asymmetric layouts), and New Brutalist (raw, minimal, high contrast, no bullshit).

You can already customize colors, fonts, and cover-as-hero backgrounds in the config, so I'm trying to figure out what else should change per theme. Layout spacing? Border styles? Button shapes? Heading treatments? If you have opinions on this, open an issue or discussion on the repo.

Autogenerated "More Like This" Section

This one's pretty far out into the future, maybe before custom CMS but I don't know when it'll happen. The idea is to embed posts, rely on tags, and calculate a similarity score with weighted importance on tags, title, and embedded content, then auto-add a "More Like This" section at the bottom of each post.

The mechanics of doing this on a static site are interesting and frustrating. I really do not want to ask for another key to be set up in the Github environment, and then I would need to spend time especially figuring out caching and making it work with GitHub Actions. I want to try implementing it just to see how good it is from an LLM/small embedding model perspective and whether it's even possible, and to see if it would actually be valuable for the kind of people who use Webtrotion.

Maybe a Custom CMS?

This is pure speculation, but maybe by next year there's a custom CMS that covers everything I use Notion for and I can de-associate this project from Notion entirely. The dream is being able to use terminal apps like Claude Code to write in Markdown without actually writing long-form Markdown myself, buttons should be able to compose in rich text, something that gives me Notion's WYSIWYG editing but stores everything as clean Markdown that LLMs can edit directly.

Maybe coding LLMs get powerful enough to build something like that just for me, but realistically that's 2028 territory, not 2026, so I'm not holding my breath.

I'm planning to write a post about why I keep using Notion as a CMS despite all its quirks and limitations, and once I've written it, I'll link it here too.

For now, enjoy the some sprinkled new features and the "bring your own content" workflow. Happy holidays and happy token burning on your cute-sy (and fun!) side projects 😃.

November 7, 2025

Now that Webtrotion supports direct font names, has simplified font configuration, you might want to test how different fonts would look on your website. To do this, open the dev console [a] on any Webtrotion powered website, like this one, and paste this snippet into the console tab after changing the sans and mono font names to the ones you want to try [b].

(function() {  const sans = 'Inter';      // change to any Google Sans font  const mono = 'Geist Mono';  // change to any Google Monospace font  // Create Google Fonts URL with all weights + italics  const googleFontsURL = `https://fonts.googleapis.com/css2?family=${sans.replace(/ /g,'+')  }:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=${mono.replace(/ /g,'+')  }:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap`;  // Inject link tag for Google Fonts  const link = document.createElement('link');  link.href = googleFontsURL;  link.rel = 'stylesheet';  document.head.appendChild(link);  // Override CSS variables globally  const style = document.createElement('style');  style.textContent = `    :root {      --font-sans: '${sans}', system-ui, sans-serif !important;      --font-mono: '${mono}', monospace !important;      --default-font-family: '${sans}', system-ui, sans-serif !important;      --default-mono-font-family: '${mono}', monospace !important;    }  `;  document.head.appendChild(style);  // Apply sans font to body immediately  document.body.style.fontFamily = `var(--font-sans)`;})();

I finally shipped two things I've been wanting since day one: footnotes [a] and citations [1]. These have been on my list forever, and I'm really happy to have them working now. These are the first and probably only pseudo blocks I wish Notion had [b], so I ended up creating them myself [c]. They work across posts and pages, play nicely with dark/light themes, and slot right into Webtrotion's interlinked content system. No client-side JS btw. Just clean static output.

Why I Built This

Footnotes make the page calmer. They keep the main thread clean while preserving context and side-quests. And I do have many side quests. Citations are the other half: you get to attribute ideas properly, link sources, and still keep readers in the flow with hover previews and a clean reference section at the end. You could just use footnotes for citing stuff, but I like my bib files, so I built proper citation parsing too.

All of this renders statically during the build, which is how I like it.

Moving to JSON5 Config

One more thing: Webtrotion's configuration file now uses JSON5 format. This means you can finally have comments directly in your config file [d]. The file is now called constants-config.json5 instead of constants-config.json.

JSON5 lets you:

• Add inline comments to explain what each setting does
• Use trailing commas without breaking things
• Write cleaner, more readable config files

The configuration structure has also changed significantly. Instead of a flat structure, settings are now organized into logical sections like notion, site-info, collections-and-listings, theme, tracking, comments, block-rendering, shortcodes, and auto-extracted-sections. This makes the config much more navigable, especially as the file has grown to support more features.

Font Configuration Simplified

One big change: fonts are now way simpler to configure. This now uses the Astro Experimental Fonts API.

Old way:

• Main fonts: You had to provide a combined-url with the full Google Fonts URL, escape spaces in font names (Roboto\\ Mono), and pick between sans/serif/mono
• OG image fonts: You had to provide title-font-url and footnote-font-url with full Google Fonts URLs

New way:

• Main fonts: Just type the font name. "sans-font-name": "Roboto" and "mono-font-name": "Roboto Mono". No URLs, no escaping. Webtrotion auto-loads weights [400, 500, 600, 700] and styles [normal, italic] [e].
• OG image fonts: Just type the font name and weight for both the title and the footnote. Example: "title-font-name": "Kreon" and "title-font-weight": 500.

The system handles all the URL generation and loading for you now.

How Footnotes Work in Webtrotion

Handling footnotes in digital writing can be a pain. You want the context without derailing the paragraph. Webtrotion's build‑time footnote system lets you choose the authoring style that fits your workflow.

Configuration: footnotes

Here's the relevant section from constants-config.json5:

// === Footnotes Configuration ===// Settings for both manual (sitewide) and automatic (in-page) footnotes.footnotes: {	// The slug for a single, dedicated page that contains all footnotes for the entire site.	// This is a legacy method for manual footnote management.	"sitewide-footnotes-page-slug": "_all-footnotes",	// Settings for the modern, automatic in-page footnote system.	"in-page-footnotes-settings": {		enabled: true,		// Defines where the system should look for footnote content.		// Important: Only ONE of these source options can be 'true' at a time.		source: {			// Looks for definitions at the end of a text block, like `[^ft_1]: My footnote content.`Sepearate it by two soft new lines (using shift+enter). This is the method that will work when you export Notion content to Markdown.			"end-of-block": true,			// Uses inline LaTeX-style footnote command: \footnote{content here}. Use \{ and \} for literal braces (useful for LaTeX compatibility).			"inline-latex-footnote-command": false,			// Treats the first n set of child block(s) indented under a parent block as the footnote content. (n = number of footnote markers in the parent block)			"start-of-child-blocks": false,			// Uses Notion comments on a block as footnote content.			// Requires granting "Read comments" permission to your Notion integration. Else falls back to 'end-of-block' method.			"block-comments": false,			// Not yet implemented.			"block-inline-text-comments": false,		},		// The prefix for footnote markers in your Notion text. e.g., `[^ft_1]` for a prefix of `ft_`.		"marker-prefix": "ft_",		// If true, a collated list of all footnotes will be automatically generated at the bottom of the page.		"generate-footnotes-section": true,		// (Recommended) On large screens, displays footnotes in the margin. On smaller screens, it falls back to a popover.		"show-in-margin-on-large-screens": true,	},},

Key Settings for Footnotes

• sitewide-footnotes-page-slug: Legacy manual collector (e.g., _all-footnotes). The in‑page system is recommended for most occurences.
• enabled: Toggle in‑page footnotes.
• source: Pick exactly one of the three modes as defined here.
• marker-prefix: Default is ft_. Change to note_ if you want markers like [^note_1].
• generate-footnotes-section: Auto‑collate the footnote section at page bottom (also generates backlinks with popovers to where the footnotes came from).
• show-in-margin-on-large-screens: Shows footnotes in the margin on large screens, falls back to popovers on smaller screens. Set to false for popovers everywhere.

Pick One Source Mode

Choose Your Own Marker Prefix

The marker-prefix setting is just a namespace for your footnote markers. By default it's ft_, so your markers look like [^ft_1], [^ft_note] [i].

Why have a prefix at all? Because if you're using standard Markdown footnote syntax elsewhere (like [^1]), you don't want collisions. The prefix keeps Webtrotion's footnotes separate. You can change it to note_ or fn_ or anything you want. Just keep it consistent across your site.

Maybe Show a Collated Footnote Section at The End of Page

Set generate-footnotes-section to true and Webtrotion will automatically collect all your footnotes and dump them in a neat little section at the bottom of the page. It's like endnotes in a website or a white paper. Each one gets a popover based backlink so readers can jump back to where the footnote was mentioned.

If you set it to false, footnotes only exist as inline popovers or margin notes. No bottom section at all. I keep mine on because some people like to scroll down and read all the tangents at once.

Choose Footnote Display Mode

Set show-in-margin-on-large-screens to control how footnotes appear.

Margin notes on large screens (show-in-margin-on-large-screens: true): This is the option I use. On desktop or tablets with enough space, footnotes appear in the right margin — like marginalia. On phones, they fall back to popovers because there's no margin space.

Always popover (show-in-margin-on-large-screens: false): Every footnote marker, when hovered (on larger screens) or clicked (on smaller screens), shows a little popover overlay. Simple, consistent across all screen sizes.

The Older Sitewide Footnotes Page

This is the legacy method, from before I built the automatic in-page system. You'd create a single dedicated Notion page (like "All Footnotes") and manually add your footnote content there, then reference it from other pages. Set the slug in sitewide-footnotes-page-slug.

The in-page system is way better — it's automatic, it's per-page, and you don't have to maintain a giant footnote index manually. I'm keeping the sitewide option around for backwards compatibility, as well as for situations where you need to reference the same “footnote” at multiple places.

Citations with BibTeX

For students, researchers, and anyone who writes with sources, the citation system should be useful. Manage citations in a standard .bib file and have them rendered with in-text markers and an optional bibliography section. All processing happens at build time, and you get hover or click previews just like with footnotes.

For example, I can cite where the tufte style footnotes came from, they originated here [1]. Note how if the citation has a URL, which it does in this case, it also renders the URL as a clickable link.

This is how it renders:

Configuration: citations

Here's the relevant section from constants-config.json5:

// === Citations Configuration ==="auto-extracted-sections": {  citations: {    // If true, a "Cite this page" section will be added to each page.    "add-cite-this-post-section": false,    // Configure how BibTeX citations are extracted and processed.    "extract-and-process-bibtex-citations": {      // If true, enables BibTeX citation processing.      enabled: false,      // Supported .bib file sources: GitHub Gist, GitHub repo file, Dropbox, and Google Drive public share links.      "bibtex-file-url-list": [        // Example: "https://gist.githubusercontent.com/username/gist-id/raw/file.bib"      ],      // The pattern for in-text citations. Only one format is supported at a time.      "in-text-citation-format": "[@key]", // or "\cite{key}" or "#cite(key)"      // The citation style for the bibliography. Only one format is supported at a time.      "bibliography-format": {        "simplified-ieee": true, // For ICML/NeurIPS style        apa: false, // For ACL-style academic writing      },      // If true, a collated bibliography section will be automatically generated at the bottom of the page.      "generate-bibliography-section": false,      // If true, show citations in the right margin on large screens (≥1024px). On smaller screens, citations will display as popovers.			"show-in-margin-on-large-screens": false,    },  },}

Key Settings for Citations

• add-cite-this-post-section: Auto‑add a "Cite this page" block with a pre‑formatted reference, so that people can add your post to their own bibtex file.
• enabled: Turn on BibTeX processing.
• bibtex-file-url-list: One or more .bib file URLs. Supports GitHub Gist, GitHub repo files, Dropbox, and Google Drive public share links. Note: Google Drive and Dropbox links don't provide public last-updated timestamps, so these files will be fetched and processed on every build.
• in-text-citation-format: Choose your marker pattern. Supports [@key] (pandoc), \cite{key} (LaTeX), or #cite(key) (Typst).
• bibliography-format: simplified-ieee (for ICML/NeurIPS style) or apa (for ACL-style academic writing).
• generate-bibliography-section: Auto‑add a bibliography to the page.
• show-in-margin-on-large-screens: Shows citations in the margin on large screens, falls back to popovers on smaller screens. Set to false for popovers everywhere.

Add "Cite this page" Section

Set add-cite-this-post-section to true if you want Webtrotion to automatically add a "Cite this page" section at the end of each page. This generates a pre-formatted BibTeX entry for the page itself, making it easy for readers to cite your work in their own papers or bibliographies.

The generated entry includes your page title, author (from your config), the publication date, and the URL. Handy if you're publishing research notes, technical articles, or anything citation-worthy. I keep mine off because most of my posts are informal, but if you're writing academic content, turn it on.

Enable BibTeX citation processing

This is the master switch. Set enabled to true under extract-and-process-bibtex-citations to turn on the entire citation extraction system. If this is false, none of the citation processing happens — no parsing, no formatting, no bibliography generation. Everything else in this section only matters if this is true.

Simple on/off toggle. Turn it on when you need citations, leave it off if you don't.

Link your BibTeX files

The bibtex-file-url-list is where you tell Webtrotion where to find your .bib files. You can have one or multiple files, and they need to be publicly accessible URLs.

Supported Hosting Options for .bib Files

"bibtex-file-url-list": [  "https://gist.githubusercontent.com/username/gist-id/raw/file.bib",  "https://gist.github.com/username/gist-id",  "https://github.com/username/repo/raw/main/references.bib",  "https://www.dropbox.com/s/xyz/references.bib?dl=0",  "https://drive.google.com/uc?export=download&id=FILE_ID",],

GitHub Gist (recommended): Supports smart caching via last-modified timestamps. Use the raw URL or the Gist page URL.

GitHub repo file (recommended): Same smart caching as Gist. Use the raw URL or the file URL.

Dropbox: Public share links work (dl=0 or dl=1). No last-modified timestamp, so it fetches every build.

Google Drive: Use the export URL format shown above. Fetches every build like Dropbox.

Why use Dropbox or Google Drive? Better bib can auto-sync from Zotero to these.

Performance Note

Webtrotion doesn't parse your entire 6,000-entry .bib file and convert it all to JSON. That was the first version and it crashed immediately. Instead, it only parses and caches the entries actually cited on each page.

On subsequent builds, if the .bib file hasn't changed (based on last-modified timestamp for GitHub sources), Webtrotion skips the fetch entirely. This keeps build times fast even with large bibliographies.

Dropbox and Google Drive don't provide public last-modified timestamps, so those get fetched on every build. If build speed matters and you have a large .bib file, use GitHub or Gist instead.

Example BibTeX File

Here's what a typical .bib file looks like:

@book{sweig42,  title     = {The Impossible Book},  author    = {Stefan Sweig},  year      = 1942,  month     = mar,  publisher = {Dead Poet Society}}@article{steward03,  title     = {Cooking behind bars},  author    = {Martha Steward},  year      = 2003,  publisher = {Culinary Expert Series}}@book{impossible,  title     = {The impossible book},  author    = {Stefan Sweig},  year      = 1942,  month     = mar,  publisher = {Dead Poet Society}}

You can use any standard BibTeX entry types: @article, @book, @inproceedings, @misc, etc. Webtrotion parses the common fields (author, title, year, publisher, journal, booktitle, etc.) and formats them appropriately.

Choose your Citation Syntax

The in-text-citation-format setting controls which syntax you use in your Notion text to mark citations. You have three options, and they all produce the same output — pick whichever feels natural.

Standard Markdown/pandoc style ([@key]): If you're used to writing in Markdown or use pandoc elsewhere, this will feel familiar. This is also supported by Typst. Example: [@sweig42]

LaTeX style (\cite{key}): For the LaTeX users, muscle memory is real. Example: \cite{sweig42}

Typst style (#cite(key)): If you use Typst for typesetting, this is especially handy because using the @ symbol in Notion triggers the annoying date/page popup. Example: #cite(sweig42)

The key is whatever you defined in your BibTeX entry. For example, if your .bib file has:

@book{sweig42,  title     = {The Impossible Book},  author    = {Stefan Sweig},  year      = 1942,  month     = mar,  publisher = {Dead Poet Society}}

Then you'd cite it in Notion as [@sweig42], \cite{sweig42}, or #cite(sweig42), depending on which format you chose in your config.

During the build, Webtrotion will:

Pick your bibliography style

The bibliography-format setting controls how citations are formatted both in-text and in the bibliography. You have two options:

simplified-ieee: Numbered citations in square brackets. In-text: [1], [2], etc. Good for NeurIPS, ICML style. The bibliography lists entries in citation order with [1], [2] prefixes (de-duplicated for multiple occurences).

apa: Author-year style. In-text: [Sweig, 1942], [Steward, 2003]. Better for humanities and social sciences, ACL-style papers. The bibliography lists entries alphabetically by author.

Both formats get hover previews. Readers can click or hover over [1] or [Sweig, 1942] to see the full reference in a popover, and then click through to jump to the bibliography if you have generate-bibliography-section enabled.

Generate the bibliography section

Set generate-bibliography-section to true and Webtrotion collects all citations from the page and builds a formatted bibliography at the end. Each entry gets backlink buttons that jump you to where you cited it — same UX as footnotes, but better because one source can be cited multiple times.

If you set it to false, citations still format properly and you still get hover previews, just no collected references section. Good for informal writing where you want to drop paper links without the formality of a bibliography.

The "Back to Content" button

When you click a citation to jump to the bibliography, you get a dynamic "back to content" button that takes you right back to where you were reading. I hate one-way jumps in PDFs, so I made sure this works smoothly.

Choose Citation Display Mode

Set show-in-margin-on-large-screens to control how the first occurrence of citations appear. That is, you get margin notes on large screens if true, otherwise they’re always popovers. For multiple occurrences of the same citation key, they’re always popovers after the first one.

Some Other Things That I Worked On

Mon Nov 03 2025: add extra delay because that didn't work well enough on long pages like this oneMon Nov 03 2025: wait for fonts and RAF before initializing margin notes in second phaseSun Nov 02 2025: show margin notes even if just on for citations and citations are enabledSun Nov 02 2025: citations are now extracted inside footnotes and shown in margin if the setting is enabledSat Nov 01 2025: set pagefind weight to 10 for title and remove pagefind for citethispageSat Nov 01 2025: fix bluesky tab not found on idle rather than clickSat Nov 01 2025: preload only few fonts instead of all fontsSat Nov 01 2025: simpler config for fonts of og imageSat Nov 01 2025: simplify font config and usageSat Nov 01 2025: keep jump backs to "Jump to"Sat Nov 01 2025: custom emojis, files and external links for icons now work in callout and page icons.Sat Nov 01 2025: optimize ncode mermaid loadingSat Nov 01 2025: improve pageinsights by using astro experimental font api and removing googlefontsoptimizerFri Oct 31 2025: att2 at improving pagespeedFri Oct 31 2025: aim to fix pagespeed insightsFri Oct 31 2025: do not show jump to bibliography, cite this page, footnotes section at the end of the post preview full componentFri Oct 31 2025: fix citation caching issueFri Oct 31 2025: weird parsing bug fix in github actions att1Fri Oct 31 2025: don't show url in formatted citation textFri Oct 31 2025: support url in formatted citationsFri Oct 31 2025: fix footnote positioning, and feed pages show footntoe popovers on hover on large screensThu Oct 30 2025: load margin notes after font load and fix caching for bibThu Oct 30 2025: avoiding duplicate footnote/citation IDs when the same content appears multiple times in a page in popoversThu Oct 30 2025: simplify key for footnote displayWed Oct 29 2025: fix marker extraction for citationWed Oct 29 2025: do not parse markers from inline code for citations and footnotesWed Oct 29 2025: style: update footnote and citation display terminology from 'popup' to 'popover' for consistencyTue Oct 28 2025: fix-citation-storageTue Oct 28 2025: style: remove Cite This Page component from PostPreviewFull and [...page] for cleaner layoutTue Oct 28 2025: style: disable citation features in configuration for general useTue Oct 28 2025: style: remove unsupported feature note in citations configuration and clarify in-text citation pattern descriptionTue Oct 28 2025: Merge pull request #35 from nerdymomocat-templates/add-and-process-citationsTue Oct 28 2025: cleaned up unsused codeTue Oct 28 2025: style: simplify author formatting logic in formatCitation function for APA in-text citationsTue Oct 28 2025: style: update version and cacheVersion in package.json for release 2.1.0Tue Oct 28 2025: style: reorder citation and footnotes sections for improved clarity and consistencyTue Oct 28 2025: style: refactor footnote handling to utilize FootnoteContent component for improved structure and readability and handle all attachment types consistentlyTue Oct 28 2025: style: update footnote handling to show popovers in footnotes sectionTue Oct 28 2025: style: update footnote source options and improve footnote renderingTue Oct 28 2025: style: update footnote and citation marker styles for improved readabilityMon Oct 27 2025: style: update font styles for citation and footnote markersMon Oct 27 2025: refactor: update import paths for NBlocksPopover, Icon, BibliographySection, and CiteThisPage componentsMon Oct 27 2025: npm run formatMon Oct 27 2025: move citation marker component to popover folderMon Oct 27 2025: Merge branch 'main' into add-and-process-citationsMon Oct 27 2025: Merge pull request #34 from nerdymomocat-templates/re-arrange-componentsMon Oct 27 2025: refactor: remove unused imports and clean up code across multiple componentsMon Oct 27 2025: move files aroundMon Oct 27 2025: match citation marker and footnote marker to nblocks popoverMon Oct 27 2025: refactor: remove debug logging from popover click event handlingMon Oct 27 2025: Attemptt 1 for bibliographySun Oct 26 2025: plan: update in-text citation format and bibliography configuration for improved citation processingSun Oct 26 2025: Merge branch 'main' of github.com:nerdymomocat-templates/webtrotion-astro-notion-cms-website-blog into add-and-process-citationsSun Oct 26 2025: refactor: move linked content symbol logic to utils and update footnote display to use alphabetical indexingSun Oct 26 2025: feat: update citations configuration and desired planSun Oct 26 2025: feat: update citations configuration and implementation plan to support new features and processing optionsSun Oct 26 2025: feat: add initial citations configuration and processing documentationSun Oct 26 2025: Merge pull request #33 from nerdymomocat-templates/fix-footnotes-not-on-pages-only-postsSun Oct 26 2025: refactor: remove unused footnote functions and integrate footnotes handling in main page (menu bar pages) contentSun Oct 26 2025: Merge branch 'main' of github.com:nerdymomocat-templates/webtrotion-astro-notion-cms-website-blogSun Oct 26 2025: Remove 'v' query parameter from Notion links to ensure correct page and block link parsing.Sun Oct 26 2025: Merge pull request #32 from nerdymomocat-templates/fix-nested-popovers-for-footnote-content-and-popover-show-for-margin-contentSun Oct 26 2025: refactor: streamline popover creation and visibility handlingSun Oct 26 2025: refactor: optimize popover event handling, popovers work for margin notes and improve device-specific selectorsSun Oct 26 2025: refactor: remove breaking prettier-ignore comments from BaseHead and PostComments componentsSun Oct 26 2025: fix: specify event types for repository creation trigger in GitHub Actions workflowSun Oct 26 2025: Merge pull request #31 from nerdymomocat-templates/refractor--change-references-to-interlinked-contentSat Oct 25 2025: refrac formatting errorsSat Oct 25 2025: feat: add citations configuration for processing BibTeX citations and in-text citation formattingSat Oct 25 2025: refactor: update footnotes and interlinked content references to use new auto-extracted sections structureSat Oct 25 2025: refractor base.astro by moving scripts into their own files and moving style to global css and updating popover scripts to use latest versions of their libraries and remove config for headings (instead use constant)Sat Oct 25 2025: npm run formatSat Oct 25 2025: refactor: remove popovers configuration and simplify related components for cleaner codeSat Oct 25 2025: fix: handle errors in cache file access checks and improve logging commentsSat Oct 25 2025: changed name reference to interlinked content in constants and usage in filesSat Oct 25 2025: run formatSat Oct 25 2025: feat: update popover styles and dynamic background color generation for improved UI consistencySat Oct 25 2025: refactor: enhance workflow clarity by restructuring jobs and improving comments; streamline cleanup and build processesSat Oct 25 2025: feat: add shallow checkout step to improve workflow speed during initializationSat Oct 25 2025: fix: enhance cleanup detection logic for upstream template sync; implement robust checks for push events and SHA comparisonSat Oct 25 2025: fix: enhance cleanup detection logic for upstream template sync; improve commit message parsingSat Oct 25 2025: feat: streamline GitHub Actions workflow by consolidating initialization and cleanup steps; enhance clarity and efficiencySat Oct 25 2025: feat: consolidate template cleanup logic into main workflow; remove redundant template-cleanup.ymlSat Oct 25 2025: feat: add automated template cleanup workflow for new repository initialization and upstream syncSat Oct 25 2025: fix: improve footnotes styling and enhance comments in constants-config.json5; aim to fix margin note positioning on loadSat Oct 25 2025: npm run format aftermathSat Oct 25 2025: Add upgrade notice for version 2.0.0Sat Oct 25 2025: Merge pull request #30 from nerdymomocat-templates/claude-code-features-and-fixes-webtrv2-fixSat Oct 25 2025: webtrotion v.2.0.0Sat Oct 25 2025: fix: fix rss links and footnote links (space issue)Sat Oct 25 2025: add comments for: 1 level Nested table of contents for headings (callouts, toggles, columns) [apparently was already implemented]Sat Oct 25 2025: dark mode and theme correction for footnotesSat Oct 25 2025: implement json5 reading for constants-configSat Oct 25 2025: failed: Theme change animationSat Oct 25 2025: fix: Fix symbols in interconnected stuff to also include combos and not just repetitions so that the length remains smallerSat Oct 25 2025: fix: Descriptions in OG images for tags and collectionsSat Oct 25 2025: fix: Links inside simple tables are not read right nowSat Oct 25 2025: updated docsSat Oct 25 2025: completed-implementationFri Oct 24 2025: almost everything worksThu Sep 11 2025: Merge pull request #26 from nerdymomocat-templates/feature/replace-numeric-iterator-with-symbolsThu Sep 11 2025: fix: update tmpHTMLCache version from vC to vDThu Sep 11 2025: feat: Update linkText to "Jump to" for specific sectionsThu Sep 11 2025: feat: Update symbols, rename functions, and fix sr-only issueThu Sep 11 2025: feat: Replace numeric iterators with Unicode symbols for interlinked contentThu Sep 11 2025: Merge pull request #25 from nerdymomocat-templates/feature/query-param-searchThu Sep 11 2025: feat: Implement search from query parameterThu Sep 11 2025: Merge pull request #24 from nerdymomocat-templates/feature/update-tags-page-uiThu Sep 11 2025: fix: adjust padding for tag count display in tags indexThu Sep 11 2025: feat: Update tags UI across the siteThu Sep 11 2025: feat: Update tags UI across the siteThu Sep 11 2025: feat: Update tags UI across the siteThu Sep 11 2025: feat: Update tags UI across the siteThu Sep 11 2025: feat: Update tags page UIThu Sep 11 2025: feat: Update tags page UIThu Sep 11 2025: Merge pull request #23 from nerdymomocat-templates/fix-twitter-bookmark-error-emojiThu Sep 11 2025: fix(bookmark): prevent twitter emoji from being displayed as imageThu Sep 11 2025: Merge pull request #22 from nerdymomocat-templates/fix/def-inject-render-shortcode-wraps-to-newlineThu Sep 11 2025: fix: Add robust, commented handling for newlines in code directivesWed Sep 10 2025: fix: add checkout step to recover cache workflowWed Sep 10 2025: feat: add GitHub Actions workflow to recover cache based on user-defined keyWed Sep 10 2025: Merge pull request #21 from nerdymomocat-templates/remove-pnpm-mentionsWed Sep 10 2025: Merge branch 'main' into remove-pnpm-mentionsWed Sep 10 2025: Merge pull request #20 from nerdymomocat-templates/fix-inline-code-backgroundThu Sep 11 2025: Fix(style): Retain inline code background color from NotionWed Sep 10 2025: chore: update .gitignore and .prettierignore to remove pnpm references; modify package.json and package-lock.json to remove pnpm versionThu Sep 04 2025: Merge pull request #19 from nerdymomocat-templates/gemini-update-to-new-notion-apiThu Sep 04 2025: fix: update @notionhq/client version to 5.0.0Tue Sep 02 2025: refactor: npm run formatTue Sep 02 2025: refactor: enhance getBlock function to support forced refreshTue Sep 02 2025: refactor: remove unused AppBskyFeedDefs import from utils.tsTue Sep 02 2025: refactor: move giscus to first positionTue Sep 02 2025: refactor: update data source caching to use dynamic file naming based on resolved data source IDTue Sep 02 2025: refactor: update Notion client integration to use data source ID and improve data retrieval logicTue Aug 26 2025: Merge pull request #18 from nerdymomocat-templates/update-and-cleanupTue Aug 26 2025: chore: update dependencies and improve buildcache directory handlingTue Apr 29 2025: chore: update HTML cache version in package.jsonTue Apr 29 2025: refactor: rename checkbox icon keys for consistency in style helpersSat Mar 01 2025: Update README.mdSat Mar 01 2025: refactor: shorten readme, remove netlify.toml and update .editorconfig for tab indentation and final newline settingsFri Feb 28 2025: refactor: fix typo in echo message and update cache clearing condition in Astro workflowFri Feb 28 2025: refactor: update cache clearing condition for constants-config in Astro workflowFri Feb 28 2025: refactor: remove unnecessary condition for saving cached constants-config in Astro workflowFri Feb 28 2025: refactor: update cleanup logic for constants-config cache to add all trimming if constants-config changedFri Feb 28 2025: refactor: improve cache cleanup messages in Astro workflow for clarityFri Feb 28 2025: refactor: enhance caching logic for constants-config in workflows and always try to process filesFri Feb 28 2025: refactor: update caching logic for old_package.json in workflowsFri Feb 28 2025: refactor: update cache handling in Astro workflow to improve file trimming logicFri Feb 28 2025: Merge pull request #17 from nerdymomocat-templates/segmented-caching-and-invalidationFri Feb 28 2025: refactor: enhance caching logic in GitHub Actions workflows and update package.json cache versioningFri Feb 28 2025: refactor: remove console log statements in blocksHtmlCacher integrationFri Feb 28 2025: refractor: fix headings setup and add predev and prebuild-local scripts to remove html-cacheFri Feb 28 2025: refactor: simplify cache removal condition in GitHub Actions workflow (cache-hit is not true for partial match so we just check if tmp exists)Fri Feb 28 2025: refactor: remove unnecessary console log for cache value in ReferencesSection componentFri Feb 28 2025: Merge pull request #16 from nerdymomocat-templates/notion-blocks-html-cacheFri Feb 28 2025: refactor: invalidating the HTML cache not only when a blog post is updated but also when any linked pages (referenced within the post) are modified. ideally just slug, title & excerpt, but couldn't do that rn.Fri Feb 28 2025: refactor: enhance caching mechanism for static references and blocks in ReferencesSection componentFri Feb 28 2025: refactor: rename headings cache directory for consistency in PostPreviewFull and related filesFri Feb 28 2025: refactor: update import paths to use tsconfig based paths for improved clarity and consistency, @ doesn't work with astro integrations (other than type imports)Fri Feb 28 2025: refactor: standardize indentation and formatting in [...page].astroFri Feb 28 2025: refactor: improve JSX formatting and consistency in MentionLink componentFri Feb 28 2025: refactor: remove unused jsxImportSource directive in MentionLink componentFri Feb 28 2025: refactor: change imports to use type imports for Mention and RichText interfacesFri Feb 28 2025: refactor: replace hardcoded paths with BUILD_FOLDER_PATHS constants for improved maintainabilityFri Feb 28 2025: refactor: add directory creation integration for cache and output pathsFri Feb 28 2025: feat: implement headings caching with superjson for improved performanceFri Feb 28 2025: feat: use HTML caching for blog posts to try to imp??? performanceFri Feb 28 2025: feat: add block HTML caching integration to optimize build processFri Feb 28 2025: move to superjson for date parrsing (fixing ogimage read) and setup for html cacheThu Feb 27 2025: feat: add helper function to transform GitHub Gist URLs for embeddingThu Feb 27 2025: feat: enhance theme toggle functionality with system preference supportThu Feb 27 2025: theme toggle now actually works with system preference listenerTue Feb 25 2025: fix: add data-pagefind-ignore attribute for non-mermaid code blocksTue Feb 25 2025: remove unused depsTue Feb 25 2025: fix: increase request timeout from 2000ms to 10000ms for improved reliabilityMon Feb 24 2025: fix: remove request timeout constant and set default timeout to 2000msMon Feb 24 2025: fix: update color variables to use color-mix for improved theming consistencyMon Feb 24 2025: run formatMon Feb 24 2025: fix: update BASE_PATH constant to include BASE environment variableMon Feb 24 2025: fix: update RSS stylesheet link generation to use BASE_PATH and clean up loggingMon Feb 24 2025: testing base path issues in integrationMon Feb 24 2025: fix: correct syntax for retry parameters in Notion API clientMon Feb 24 2025: fix: add logging for base path in RSS styles and configure retry parameters for Notion API callsMon Feb 24 2025: fix: normalize basePath in redirect paths and adjust mobile button indentationMon Feb 24 2025: fix: update RSS stylesheet link generation to use dynamic navigation helperMon Feb 24 2025: chore: remove commented-out integrations from astro.config.ts for cleaner codeMon Feb 24 2025: Merge pull request #15 from nerdymomocat-templates/tailwind-v4Mon Feb 24 2025: fix huge rss issue that happened due to trailing slash in slugMon Feb 24 2025: style: update mobile button class for improved layout consistencyMon Feb 24 2025: fix border upgradeMon Feb 24 2025: style: clean up unused CSS properties and enhance datatable styling for better layoutMon Feb 24 2025: fix: update simple-datatables to use latest version for improved stabilityMon Feb 24 2025: chore: remove Tailwind CSS configuration fileMon Feb 24 2025: run formatMon Feb 24 2025: style: adjust iframe scaling for better responsiveness in NotionEmbed componentMon Feb 24 2025: feat: add color normalization function for theme colors in CSSMon Feb 24 2025: style: improve CSS for better touch action and scroll behaviorMon Feb 24 2025: style: enhance datatable sorter styles for better visibility in dark modeMon Feb 24 2025: run formatMon Feb 24 2025: add cursor pointer to buttons for improved interactivityMon Feb 24 2025: increase text size in footerMon Feb 24 2025: Merge remote-tracking branch 'origin/main' into tailwind-v4Mon Feb 24 2025: refactor print styles for SocialList component for improved visibilityMon Feb 24 2025: refactor print styles for improved layout consistency across componentsMon Feb 24 2025: fix screen print query issue kinda, still issue in codeblockMon Feb 24 2025: update media query syntax for responsive font size in theme CSSMon Feb 24 2025: add custom variant for dark mode in theme CSSMon Feb 24 2025: at least it runs now and ran formatMon Feb 24 2025: Update Callout.astro to show border when color is defaultFri Jan 31 2025: changed mentions -- config file still needs to be correctedThu Jan 30 2025: run formatThu Jan 30 2025: Merge pull request #14 from nerdymomocat-templates/fix-trailing-slashesThu Jan 30 2025: fix trailing slashes for seoThu Jan 30 2025: fix: simplify Notion embed URL validation with regex patternFri Jan 24 2025: update astroFri Jan 24 2025: add notion page emedding and run formatterMon Dec 23 2024: fix: improve cache deletion regex for better matching of keysMon Dec 23 2024: fix: update site-page-link class to use text-link for better styling consistencyMon Dec 23 2024: fix: add support for cache deletion using a GitHub token in workflowsMon Dec 23 2024: test: if new gh cli actions work with actions workflow tokenMon Dec 23 2024: fix: update cache deletion logic to use repository context instead of repository IDMon Dec 23 2024: test: update cache clearing logic to include both 'web' and 'blog' trotion and testMon Dec 23 2024: fix new no cache ymlMon Dec 23 2024: try adding deletion in actions workflow -- might revertSun Dec 22 2024: refactor: remove font-weight classes from link elements for consistencySat Dec 14 2024: refactor: clean up unused functions and imports in various modulesTue Dec 10 2024: update all packages

Performance and Pagespeed

The footnotes and citations features, as well as the other features I'd added before, added a lot of JavaScript and content to pages, which initially tanked my PageSpeed Insights scores. So I spent a few days fixing that. I think given that Webtrotion is optimized for text-heavy websites and not marketing sites with shaders and such, it should have a good enough pagespeed score.

Font loading: I switched to Astro's experimental Font API and ditched the Google Fonts optimizer. Now I only preload the fonts actually needed instead of loading everything upfront. This alone made a noticeable difference.

Icon handling: Instead of using img src for icons (even Notion's default ones), I now download and serve them locally. This reduces external requests and improves load times, plus it means less calls to notion’s own tracking.

Caching strategy: I implemented HTML caching for rendered blog posts and added BibTeX file caching so the site doesn't re-parse citation data on every build. The cache also invalidates when linked pages change, not just when the post itself updates.

Margin notes timing: This was tricky. Margin notes need to calculate their position, but if they initialize before fonts load, the positioning breaks. So now they wait for fonts and requestAnimationFrame before initializing. I also added extra delays for really long pages because even that wasn't enough sometimes.

GitHub Actions improvements: Rewrote the caching workflow and added template cleanup workflows to be smarter. They now detect when config changes and invalidate the right caches automatically. Also added a workflow that lets you manually delete caches using a personal github API key, which is useful if you do not like to see clutter.

Conditional preconnects: Added smart preconnects for external resources that are conditionally loaded. If you have simple-datatables enabled for tables, glightbox for image galleries, or giscus for comments, the site now adds <link rel="preconnect"> tags, and only adds them when those features are actually used on the page. This means the browser can start establishing connections to those domains earlier, but only when needed, keeping the critical path lean for pages that don't use those features.

Other optimizations: Optimized Mermaid diagram loading, adjusted Pagefind search weights so titles rank higher, and cleaned up a bunch of unnecessary components from the preview layouts. I also made sure that all external scripts (like glightbox) and external CSS (for example, for simple-datatables) are imported dynamically and avoid the critical path.

It's not perfect, but the scores are way better now and the site still feels snappy.

Improving UI Components

While working on footnotes and citations, I ended up fixing a bunch of smaller UI issues that had been bothering me.

Icon improvements: Custom emojis, files, and external links now work for callout and page icons. Before, you were limited to Notion's default emoji set, but now you can use any custom emoji or even link to external icon files, same as you can in the Notion UI.

Tags redesign: The tags page got a complete refresh. The old design felt cluttered and the tag counts were hard to read. Now it's cleaner, with better spacing and more consistent styling across the site. Also the tags on the side show the number of posts with that tag too!

Theme toggle with system preference: The theme toggle now has an option that respects system preferences. If your OS is set to dark mode, the site defaults to dark mode too. It also listens for system theme changes, so if you switch your OS theme while the site is open, it updates automatically.

Search from query parameter: You can now trigger search directly from the URL. Useful for linking to specific search results or building search-based workflows. Just add ?search=your-query to any page URL and it will open the desired pagefind dialog.

Dark mode polish: A lot of small dark mode issues got fixed. Data table sorters weren't visible enough in dark mode, and some interactive elements weren't obvious as clickable. Added cursor pointers to buttons and improved the overall consistency of hover states.

Responsive improvements: Fixed iframe scaling in embedded content so it doesn't break the layout on mobile. Improved touch interactions and scroll behavior across the board. Also spent time on print styles because apparently some people still print web pages, and the old print layout was embarrassingly broken.

Small fixes: Twitter bookmark embeds were showing an emoji as an image, which looked ridiculous. Fixed that. Also cleaned up a bunch of unused CSS and tightened up the datatable styling so it doesn't feel so cramped.

Better Notion Fidelity

Notion page embedding: Added support for embedding Notion pages (including database pages and database views) directly into your posts. This is useful when you want to reference or showcase other Notion pages within your blog content. And this is especially nice with the new maps view!

Styling improvements: Made the site match Notion's styling more closely in a few places [j]. Callouts with default colors now show a subtle border like they do in Notion. Small things, but they make the site feel more cohesive.

How It Was Built

I built this with AIs' help; mostly Claude Code for the heavy lifting (core implementation, complex logic) and Gemini-CLI for cleanup, refactoring, and writing this post. Claude Code handled the architecture well. Gemini-CLI is less useful for big-picture stuff but fine for smaller tasks.

Some bugs that came up:

• The Ghost Popover on Mobile: This was a hair-pulling bug. On mobile, the citation popovers would appear, but you couldn't click on anything inside them. Clicks were just passing right through to the content behind it. After many false leads (was it a Tailwind class? Padding? Z-index?), I discovered the solution was to reuse the exact same Astro component that was already working for other popovers (NBlocksPopover) and ensure the DOM structure was identical, right down to an empty <span> with a special data attribute. I still do not know why the original error was happening.
• Nested Popovers: Getting popovers to work when footnote content itself contained popovers (like links or mentions) was trickier than expected. The event handling kept interfering with itself. After several attempts at streamlining popover creation and visibility handling, I finally got it working with careful device-specific selectors. Desktop and mobile needed different interaction patterns, and getting both to work without breaking each other took multiple tries.
• Performance Boost: Initially, I had three separate functions that traversed the entire block tree to find footnotes, citations, and interlinked content. This was inefficient. I refactored this into a single, unified extractPageContent function that collects everything in one pass, making the build process significantly faster.
• The "Back to Citation" Button: After getting the core feature working, I realized that jumping to the bibliography was a one-way trip. And I always hate that when I read papers in pdf. So, I added the "Back to citation" button that dynamically appears on the bibliography entry you jumped from, making for a much smoother user experience.
• The BibTeX → JSON Cache Overflow: Claude Code had it initially set up such that it tried to convert and cache the entire .bib file into JSON. When I tested it with 6,000 entries, everything crashed. I had to walk the AI through fixing that to only parse the citations actually used in each page.
• Tailwind v4 Migration: Upgrading to Tailwind v4 was more painful than expected. It's a breaking change that required rewriting a lot of styling code. Media query syntax changed, dark mode variants needed updating, and there were CSS issues everywhere. One commit message I made said "at least it runs now" which pretty much sums up how that went. Had to fix dozens of small styling issues after the initial upgrade.
• Cache Deletion Workflow: Getting GitHub Actions to properly delete caches took way too many attempts. The GitHub CLI and API kept changing requirements for authentication and permissions. First tried using the default workflow token, then had to switch to using the repository context instead of repository ID, then finally got it working with a personal access token. Ended up with a separate workflow that lets you manually delete caches when things get stuck.
• RSS Trailing Slash Bug: Discovered a huge bug where RSS feeds were completely broken due to trailing slash inconsistencies in slug formatting. This affected how URLs were generated across the entire site and took a while to track down because the error only showed up in the RSS feed, not on the actual pages.
• Same id for footnote/citation popovers: Claude Code fixed this immediately (gemini-cli went on a wild unproductive chase). This is because I [k] was assigning random ids to normal popovers but not here.
• BibTeX caching: The amount of errors I had to fix here made me think I was dealing with a 2023 AI model, not clade sonnet 4.5. I don't know why it believes it should complicate everything, but it did. Gemini cli is good enough to fix targeted issues like these.
• Handling Margin Notes: The more conditions you have, the harder it is to get AI to code something without missing edge cases. I wanted to support both footnotes and citations in the margin, with each being toggleable. But this creates a cascade of questions [l], like: What happens if a citation is inside a footnote? Does it show up in the margin or not? Unlike footnotes, citations can repeat - does only the first occurrence show in the margin, or all of them? What about subsequent occurrences - do they become popovers? What if citations are shown in the margin but footnotes aren't, and the first occurrence of a citation is inside a footnote? Do we show it in the margin anyway? And if the second occurrence is in the main content but we only show first occurrences in the margin, what then? Oh, and then what if the same citation appeared in the same block multiple times and that block is the first occurrence of that citation? How do we handle that? 🤦‍♀️
• Using native <Image /> components in Astro: One of the persistent issues in the build was content layout shift caused by storing all images in public. And adding all notion image to downloads to public meant I had to manually write code to optimize images to webp when optimization was enabled, handle different URL patterns based on optimization settings, and couldn't reliably determine layout sizes or generate mobile-specific srcset attributes. So I refactored the code to use Astro's native Image component, which turned out to be far from straightforward. Why? First, I was downloading files during the post-build process rather than before, but Vite needed to glob all these files beforehand. Second, my hacky HTML caching system skips Astro component calls, so I had to copy optimized files from the previous build into dist to account for that. Third, dist also carries the original files as a fallback, but I didn’t want that increased size, so I wrote an integration to delete those [m]. Finally, Astro doesn't natively support setting srcset with just mobile width and original size, so I had to hack that functionality into the code.

It was a great learning experience, and it's incredibly rewarding to see these powerful features come to life in Webtrotion.

February 27, 2025

I added a 3-way Theme toggle enhancing the existing 2-way toggle, allowing switching between system, light, and dark modes, which I'm quite happy about. This was implemented using GitHub Copilot with Claude 3.5s Sonnet.

Most of the time was spent finding a suitable icon (tried searching for light dark and sun moon with a single path that would work with my system. I found one on Iconify but had to modify it. Something to note, while I attempted to use LLMs for the modification, it wasn't successful, so I used SVG Path Editor instead. As shown in the image below, you can now switch between three theme modes rather than just two.

You can look at the GitHub gist below to see the conversation with GitHub Copilot.

Read in the embed:

February 25, 2025

Webtrotion is a single-file configuration system that uses constants-config.json. Using LLMs, I created a simple HTML script that generates JSON you can copy directly into your constants-config.json.

While this isn't polished, I created it mainly to test an LLM's ability to generate pure HTML rather than defaulting to React for 1000+ line projects. I didn't spend time refining it since I expect limited usage, but it's here if you need it.

January 31, 2025

My partner always hated how opening the screen on the laptop used to lead to turning on the laptop. Of course he switched off from macOS but I would like to collect these tips and trips together at some place just to make sure that I have them at hand and don't go searching over the internet. And so this is written by MacRumors linked below and I'm copy pasting the relevant stuff here.

#!/bin/bash# This script modifies the Mac's startup behavior using the nvram command.# Run this script in Terminal with the appropriate option.echo "Choose an option to modify startup behavior:"echo "1) Prevent startup when opening the lid or connecting to power"echo "2) Prevent startup only when opening the lid"echo "3) Prevent startup only when connecting to power"echo "4) Undo changes (restore default behavior)"read -p "Enter your choice (1-4): " choicecase $choice in    1)        sudo nvram BootPreference=%00        echo "Startup is now prevented when opening the lid or connecting to power."        ;;    2)        sudo nvram BootPreference=%01        echo "Startup is now prevented only when opening the lid."        ;;    3)        sudo nvram BootPreference=%02        echo "Startup is now prevented only when connecting to power."        ;;    4)        sudo nvram -d BootPreference        echo "Startup behavior restored to default."        ;;    *)        echo "Invalid choice. No changes made."        ;;esac# The user will be prompted for their administrator password when running the script.# Terminal does not display the password while typing.

December 17, 2024

One of the major reasons I avoid screenshots/videos in my posts generally is because of how cumbersome it is to take them. And I wish I could kinda "tear off" commands from different apps and place it onto a temporary menu bar.

For example, when I was writing this post All The Menu Bar Weather Apps for MacOS — I really wanted to convert all screenshots to text. Why, you might ask? Because the workflow requires so many clicks in order.

So, I usually have my clop optimize on clipboard on. But given this required stitching of different images — I didn’t want to optimize each image and have it progressively get worse. So, this is what it looked like —

Pause auto-optimizations in Clop, then show desktop in Supercharge. Use Shottr to capture any window (note that this doesn't create a file). Copy the image in Shottr, then capture additional windows (like settings or preferences). Open clipboard history in Raycast (which doesn’t have a paste stack) multiple times to Paste all images into the last Shottr image, turn optimization back on in Clop, and copy the final image from Shottr.

Oh, now I want to generate image captions, here is what that looked like —

First, paste the image into Notion, then open ChatGPT and paste the image into ChatGPT to generate a caption. Copy the generated caption into Notion, replace line breaks using Shift+Enter, and finally cut and paste the text into the image caption field that is opened by a click on the caption button.

I wish there was a way to create a workflow hotbar on the go, one where I could put all the actions I need to take across various apps into one place, and then discard the hotbar. Sure, I can assign keyboard shortcuts to all these actions — but I possibly never need to use these actions again, and if I need to, I am not going to remember the shortcuts I assigned to them. I don’t even know if tear-off hotbars are possible in MacOS, but I wish they were.

I have wanted a menu bar weather app for a long time, and I can’t find any that fit all my criteria. So, off I went looking at all the recommendations for weather apps, and found 17 of them. Yes, SEVENTEEN.

Criteria

The main criteria in my mind are:

• Free or cheap one-time purchase (Apparently this is hard because Apple Weather API costs money? What? Why? Apple is retrieving that data anyway, might as well provide a local API?)
• Shows feels like temperature
• Doesn’t show up in the dock
• Allows for switching between a list of cities in the menu bar popup
• Shows weather for the week and next few hours
• (Extra) Shows sunrise and sunset times
• (Extra) Opens on login and has a shortcut to open/close the menu bar dropdown

Things I personally do not care about:

• Hyperlocal weather information
• Radar maps or any other graphical information
• Making weather apps fun
• And where the weather information is coming from. Till it is coming from any trusted source, I am happy.
• Update time being more frequent than 30 or 60 minutes.
• Desktop widgets, or control panel widgets because I never ever open or use those sections.

How hard can it be to find something like this? Apparently, very hard. I was so excited when Apple Weather launched their menu bar option in macOS 15.2, but apparently, it doesn’t show feels like — and only shows temperature for the next few hours. 🤷‍♀️

Apps

Here are some other apps that I have tried grouped as, “Considering” and “Not Considering”. Something to consider is, given that apple now has their menu bar option that would be enough for most people, some apps might stop receiving updates and may not be compatible with future versions of OS.

You can open toggles below to see screenshots of the app in the menu bar and most of the available settings for that app. Captions and alt text generated using GPT-4o.

Considering

Big Weather (Mac App Store‎Big Weather): Has everything I need for free, except it doesn’t show feels like temperature in menu bar but does show it in the popup. Also the hourly graph is kinda hard to understand, but I will probably get used to it. Sometimes doesn’t get current location, which is a pain. Some permission toggle switching later, it works, yay!

Menu Weather Pro (Mac App Store‎Menu Weather Pro): Honestly, the perfect app for me, and the one I used to use, except since macOS 15, the popup opens in bottom left rather than sticking to the menu bar area. I also realized that I remembered incorrectly - even this app doesn’t show feels like in the menu bar icon, I need to open it to see that information. But it has everything I need for free.

Weather Forecast App: Menu Bar (Mac App Store‎Weather Forecast App: Menu bar): Costs $10/year. Allows for multiple locations. Shows feels like, UV index and everything else I might need in the popup. The status bar value is the real temperature and there is no option to change that though.

Weatherly (Mac App Store‎Weatherly): Exactly what I need, but is $10/year. It doesn’t show UV data but that is okay, I can see that on mobile when I leave my house, I do not need it on my laptop.

Not Considering

I don’t like UI/UX

Meteorologist (SourceForgeMeteorologist): This is known as the most powerful app and it definitely looks that way. But I do not really like the submenu deign which requires me to hover over stuff to understand the weather. It is too text heavy for me, similar to Forecast Bar, and I am not a fan of that, even though I know some people might be.

Forecast Bar (Mac App Store‎Forecast Bar - Weather + Radar): Something about this app is too hard for me to understand and it also requires a subscription, thought that is cheaper at $5/year. It does have location switching, weather forecast etc., it also shows feels like temperature on popup — I am unsure if it can show feels like temperature in the menu bar because currently it just shows the app icon.

Doesn’t support multiple locations

Vetero (Mac App Store‎Vetero° Weather): Also $10/year for showing feels like temperature, and doesn’t have location switcher.

Weather Dock (Mac App Store‎Weather Dock): Fixed to a single location. You can type another location in, but there isn’t a list you can switch between. You can show feels like temperature in the menu bar. Also costs $10/year.

DatWeatherDoe: Free, shows UV index, allows only for one location and doesn’t show feels like temperature.

Sparrow Weather (Mac App Store‎Sparrow Weather): Shows colorful today and tomorrow’s weather at current location. Is free, but doesn’t support multiple locations, and doesn’t show feels like temperature.

Weather Graph (App Store‎Weathergraph weather widget): It is $24/year, so already more expensive than the apps that do what I need to. It doesn’t support multiple locations even in the paid plan. This is pretty, has loads of options to customize but none of the things I need.

Menubar Weather (Mac App Store‎MenuBar Weather): It is a location permission issue — similar issue to BigWeather, so I needed to toggle permission on and off multiple times to get it to work. It is pretty good, has option to show feels like temperature, just doesn’t have a location switcher. Free if you use your own API (though I couldn’t get that to work) or pay $10/year for apple weather.
Uses own API key, and I even when I provided that, I couldn’t get it to work. Also, the screenshots on App Store do not show an option to use feels like or switch locations. I even tried the trial option that remains stuck on the two seconds screen too.

Missing items in menu bar

Looks Like Rain (App Store‎Looks Like Rain): This is a really pretty app with a location switcher and feels like temperature in the menu bar and costs $10/year. Also, it has an option to click on a day and see predictions for that day. But, it doesn't show the actual weather in the menu bar without clicking, which is a sad choice. If it showed the current temperature on the menu bar, it would be my preferred weather app.

Dear Sun (Mac App Store‎Dear Sun): Doesn’t show feels like temperature. Costs $10/year. Everything else is perfect. I wish it had the feels like view though. I really wish this showed the feels like temperature, I would grab it in a second over Weather Forecast App or Weatherly.

Mercury Weather (App Store‎Mercury Weather): Too expensive for what I need ($14/year), doesn’t have any feature that I want in the menu bar. App of the year though, but doesn’t meet my needs at all.

Qwik Weather: Only shows the “nowcast”, aka, the current conditions in a location, and does have a location switcher. Allows to use your own API key, which makes sense given it is free. I want some basic hourly and current week forecast though.

Doesn’t work

Tenki (Mac App Store‎Tenki): I am unable to get the city to change and there doesn’t seem to be an option for multiple locations.

I am going to try both big weather and weather forecast app or hope that menu weather pro fixes itself sometime in the near future, I guess. If there is any information that you want me to add about an app, leave a note on the bluesky thread or giscus and I’ll add that information for the app.

December 13, 2024

Remember how I was excited about the preview options in Arc, and then when I stopped using Arc, I shifted to Chrome and found an extension called MaxFocus to give me the same preview options (Read more here: Link Previews in Chrome using MaxFocus)? Well, Safari has an inbuilt option for link previews (and I learnt about it here) — you can use force touch on your touchpad or use ⌃+⌘+D while hovering over the link (similar to bringing up the dictionary) to bring up the preview popup. That is awesome! Honestly, there are so many shortcuts with ^ and ⌥ that I am still learning them (see other shortcuts you might like here).

November 27, 2024

Almost exactly an year ago, I had published Webtrotion. Webtrotion was mainly meant to be used by me, and it is still very much mainly just used by me, and no one else - and that is okay. I made sure to provide enough configurability such that if I wanted to change things around later down the line without directly modifying the code, I could, and hopefully that would help other people adopt the website too.

In the last 2 weeks, I added 3 features: integrated umami tracking, added bluesky as comments functionality, and added RSS with content. And Dec 5, 2024, I updated to Astrov5.

Not much has changed honestly on first glance, and the images below are a bit different also because of the changes in original page, but you can see the slight differences here.

Background Context

I had started my personal website back in May of 2023 based off Quarto. But I never enjoyed writing content in Quarto. Sure, I could make it look nice and fancy, but I had to accept the fact, that I would never like writing long-form content in markdown. I really love block based editors. It is a pretty simple UX change, but the fact that I can drag things around and put things side by side, apparently, matters a lot to me. So, when I could not stick to using Quarto and the convoluted yaml system I had, I decided to find ways that allowed me to author in anything else than markdown, and those that were free. Especially because, I just wanted to host them as a static website, I did not need fancy stuff, and I wanted it to be portable enough such that if my plans change, I am not hoisting it around.

Which landed me on deciding on Notion. Sure, I played around with other WYSIWYG editors, but no other editor comes close to Notion, and ultimately, that is why I was looking around in the first place, right? And I found two major camps of options — using Notion’s public site and render it on your own, similar to super or react notion, or use Notion’s API. I wanted to go down the API route. Why? It feels safer in a way. The biggest problem though, is that you cannot render collections through API — and I kinda made peace with it; if I was choosing markdown, I wouldn’t be rendering Notion collections anyway, so why should this make a difference.

Choosing to Develop Webtrotion

Honestly, when I first decided to use Notion as a CMS, there were hundreds of existing options. From GitHub solutions using public pages to platforms like super.so that could render databases (which I still can't), the choices were many. Then there were indie apps claiming to use Notion as a CMS - some popular ones with high price tags, and free ones charging based on the number of websites. I'm glad I chose none of those options. Since I didn't want to make my pages public, most options were automatically eliminated. I'm also relieved I avoided those newer apps because, except for maybe two (the expensive ones), all of them are now defunct - and you never want your blog to be defunct. That's why I use GitHub Pages. While GitHub Pages might not last beyond 10 years, that lifespan is acceptable to me. The typical one-year or six-month lifetime of an indie project, hoping for adoption from the Notion community though, doesn’t sit well with me. So, I decided to find a base repository I could develop that didn't use React (which I wanted to avoid) but worked with vanilla JavaScript and CSS.

Deciding on the Base Repository

Long story short, I found Otoyo’s github repository that did most of what I wanted, in a template format that I didn’t really like. I really like Astro’s cactus template, not because I had used Astro before, but because it was pretty aesthetic 🤷‍♀️. I knew that I didn’t know enough about the area to start this on my own, so I asked someone on fiverr to merge the two for me. The major change I wanted to make was, I needed to host the complete website, not just the blog component. So, late October, 5 months after I started using Quarto, I asked someone on fiverr to help me out — to combine otoyo’s github repository with Astro cactus’ looks.

And they did it! It didn’t have everything I wanted, but it did have enough for me to get started a month later, thanksgiving of 2023. And here were my initial commits to the repository, mostly focussing on improving the looks and making it look like I wanted to.

Adding Features

Over the past few months, I added multiple features to the setup. While I was making a decision, I did think, what if I found the perfect integration — and then realized that if I was dependent on someone else for a solution, I wouldn’t be able to integrate things that I wanted. So, I set out to do just that. Making it look more like Notion when need be, look a tiny bit better in many use cases, but also integrate some shortcode like functionality.

So, here is a list of all features added above and over what already existed in Otoyo’s and Astro Cactus’ implementation:

Improvements

Performance

• Webp image transformation for reduced image size
• Cache system that works with github pages
• Preload and LazyLoad strategies for videos
• Twitter and TikTok embed improvements

Access

• Support for slugs in any language (auto and explicit)
• Theme toggle between light and dark mode
• Responsive font sizes (14px mobile, 16px desktop)
• Scroll to top functionality
• Improved accessibility with ARIA labels
• Better semantic HTML structure
• Enhanced keyboard navigation
• Improved print styling and optimization
• Converted checkboxes to icons in ToDo component

Match what Notion Does

• Support for audio blocks
• Support for custom emoji in mentions
• Match colors with exact Notion colors
• Block based linking support
• Support for link mentions and link previews
• Better table of contents with floating functionality (that also works on mobile)
• Improved table styling with Notion-like gray tables
• Tag descriptions support

Additional Features

Setup and Layout

• Stream-like preview for posts (Google Blogger style)
• View transitions support
• Generate OpenGraph images
• Add last updated date option
• Add social links to footer
• Allow font configuration for both text and open graph images
• Support for google analytics and umami
• Command+K (⌘K) or Ctrl+K search functionality
• Support for BlueSky and giscus comments
• Pin posts to top functionality
• Recent posts on homepage option
• Interlinked content section
• Generate RSS, now with content

Content

• Shiki transforms for code blocks
• Popover implementation for links and mentions
• HTML rendering options via shortcodes (@July 4, 2024):
  • <!DOCTYPE html> <!-- iframe --> for iframe rendering
  • <!DOCTYPE html> <!-- inject --> for direct body injection
• Support for data tables with search and sort functionality

Looking Back

Honestly, I enjoyed this project a lot. It got me back into using JavaScript and experimenting with different interesting styles. I really like Astro, though there's an issue with it being so new - every update might bring unexpected issues that I run into, even within the same major version. And then, I do not like the newer content loaders for Notion, which tend to flatten everything. That's probably the next thing I'll look into.

I really enjoyed this process. I can add custom components and use this website for whatever I want. While it may not support newsletters (like substack) or have an integration with ghost/buttondown, and isn’t as future safe and easy/quick to build as a markdown based website, I think it was worth continuing because I've never updated a site as frequently as I have with this setup.

This project also led me to accept that I don't like writing in Markdown, which has been a significant "accept what I can’t change, change what I can, and know the difference" moment for me. I realized I prefer writing in block based, rich-text editors (so, mostly, Craft and Notion). Notion did launch their Sites 2.0 feature by the way, which offers almost everything you'd want, but it requires a custom domain and additional payments for that custom domain to be connected. I really wanted a static site, and while previous issues like changing slugs are now fixed, it's still a trade-off. You can at least showcase your inline database when using Notion's built-in site feature, though I wish there was a way around some limitations. But I get to do nice code blocks using shiki, and, I get bluesky comments.

All in all, I really liked this experience as I achieved my main goal: having a website that I actually want to write and publish on. That has been the most important outcome.

November 26, 2024

Two days ago, I added this comment to Making Webtrotion:

After Emily’s post, there was a flurry of efforts to use bluesky as a commenting system. I am actually surprised more people didn’t use Twitter as a commenting system when their API was free for all. That led to Cory creating a package, which was react based. So, I tried finding if people had previously added bluesky comments to astro, and of course they had: see graysky, snorre (also has the option to reply from the comment section but needs bluesky app password, I’ll revisit this after OAuth), and Jade’s (statically builds comments, and doesn’t update in real-time). Then I found Lou’s post here and was relieved to know that you can do this without react. I ended up using the version by Matt here (the person whose code I am using for Bluesky post embeds now work on Webtrotion as well). The good part about Matt’s version is that it has an option to search for did:{xx}plc:{{yy} format, instead of expecting people to find the exact at format URI. And lastly, I used this post from Jack to auto-search a post (and the idea of using a echo-feed-emoji). There is a react version of this (modified from Cory’s version) here by Nico.

Update Nov 27, 2024, 04:20 AM: I saw this cool trick by Garrick here to filter out hidden, blocked or not found replies and added that to the script.

All this together, and webtrotion now has its bluesky commenting system. I am not going to add an explicit URL here to show that auto-search works, while I added an explicit URL to the Bluesky post embeds post.

	"bluesky-comments": {		"show-comments-from-bluesky": false,		"auto-search-for-match": {			"turn-on-auto-search": false,			"author": "",			"echo-feed-emoji": ""		}	}

The variables look like this:

const post_slug = new URL(  getPostLink(post.Slug),  import.meta.env.SITE).toString();const bluesky_url = post.BlueSkyPostLink || "";const BLUESKY_COMM = {  "show-comments-from-bluesky": true,  "auto-search-for-match": {    "turn-on-auto-search": false,    "author": "",    "echo-feed-emoji": "",  },};

Here is the latest version of the script:

November 25, 2024

Initially, I hadn't even considered that Bluesky posts wouldn’t embed correctly on Webtrotion. I'd spent lots of time working on tweet embeds to make them look more aligned with Notion's style. Interestingly, Bluesky embeds don't even work in Notion right now—they just show up as cut-off web pages.

Then I saw this post (which I'll embed below) that lets you use Bluesky comments as post comments and shows threads in those comments. That sounded awesome! While implementing that feature will take some time, I tried to mention the post and discovered that embeds actually work. So now Bluesky post embeds work on Webtrotion—yay!

They still don't have dark mode support, and I need to adjust the line spacing and font sizing, but I wanted to share this now since, you know, just in case the platform takes off.

Anyhow, the post in question:

How it looks like on the web

And, how it looks like on Notion

How it previously looked like on Webtrotion

And now, with the update

October 1, 2024

As of Nov 5, 2024, Stackie has multiple Twitter posts that could be interpreted as endorsements of Trump. I want to clarify that my testing of this app occurred before I was aware of that position, and it doesn't reflect the values I hold dear.

Stackie (FAQ) is a new app that was suggested to me on Twitter feed from HeyDola (another app that I use for scheduling from images and text, because it works with whatsapp and is free). And it looked fun! It is very similar in idea to what I have implemented in Use Notion’s Property Description As Text → DB add-itor (the example there being a money tracker) and comes halfway through what I mentioned in The Components of a PKMS. But this is a self contained app, has way better UX than hosting your own script, is clean and somehow really clicked for me, because it comes really close to what I wanted (want?) to make in Trying to Build a Micro Journalling App.

To be honest, Notion's AI properties and Notion’s AI add option will get you there pretty often. It is probably too much for you would want if all you are looking for is tracking. There have been other apps that do something similar — hints being the one I can recall off the top of my head, but they all integrate with external apps or are meant for power users or developers (for example, AI add to Supabase database).

When you open the app it starts with a baseline of inbox database. It comes with its own templates, and ideally you should be prompted to select at least one during onboarding to get a feel of how it works. The templates are prompted databases, where each field can either be a date/time, number, boolean or text. The templated database and properties are all customizable which is a huge win!

The entry box when you have created all your “stacks” let's you type in anything and chooses which stack it is most likely to belong to — another affordance I really appreciate. It works with photos too, both understanding the text in the photo (so you can capture a snippet of an event you attended if you are tracking all events you attend in a month), and understands the objects in the photo — so you can click a photo of a cheeseburger and it will understand that it should go to the calorie tracking stack and figuring out the breakdown of nutrients for that log. And it works with voice, so you can speak and it will transcribe and process that information. It seems to use internal dictate option, so doesn't seem to be as good as whisper (proper nouns are hard for example) — but I might be wrong about their processing mechanism.

It can process into multiple databases and add multiple entries at once! It seems to only be additive at the moment though, you cannot edit entries through the universal text box (you can go to the entry and edit it though). There is no export option, but that disappointingly seems to be the norm for iOS and beta apps. You currently cannot do anything with the data you record like you can do in Notion (add it up, set limits etc), so it might not be satisfying to use as a habit tracker and hard to get a view of data you might want, but it is a great starting point. It is what Collections DB could look like, with integrated AI. The app is iOS only, so wouldn’t be something I use, but definitely something worth looking at.

Some images from the app

August 20, 2024

Disclaimer: I received a free license key to test this app and post a review. The review content is entirely my own, with no conditions placed on its content or sentiment.

Popclip is the usual app that people use for interactions with content on MacOS. Xylect takes it one step further, it aims to function like Google’s smart lens AI feature, it tries to predict what someone might want to do with selected text, rather than giving you a list of all possible options.

So, let’s go through all the five (six?) claimed abilities at the moment.
[Expand toggles to see screenshots]

The summarization feature works fine, but with the new writing tools in the latest version of Apple Mac OS, you probably won't need it. You can simply right-click on non-native apps or click the magic button on native apps to summarize content, and it will show up in a pop-up. I know it's an intentional step rather than an automatic pop-up, but I don't think it's worth getting the app just for this feature. Xylect is faster than Apple’s summarization, and that time savings adds up when you use the tool multiple times a day.

I checked out the translation feature, and it seems to send the text to a backend model for translation, which is fine as it includes contextual information. However, it responds with a lot of text, even when I'm trying to translate just a single word. I wish this was more thoughtfully designed.

The "Add to Calendar" feature works, but it requires a very specific date and time format. It doesn't fit in the title itself; it just creates a Google Calendar or Apple Calendar link based on the time. I'm not a big fan of that. Instead, I use Hey Dola for these purposes. It's free right now, though it might not stay that way. I'll link it here if you want calendaring with text or images, which makes it much easier.

The spell check feature in Xylect works per word and doesn't understand context. So, while it can correctly spell "enable," it corrects "flght" to "fight" instead of "flight" because it's choosing the nearest correct word rather than the one that fits the context, even though you have the word "tracking" nearby.

The calculation option for the selected math text didn't work for me at all. It seems like it's sending the text as a prompt to a machine learning model and returning the answer, rather than performing the calculation on the backend, so I wouldn't rely on this feature.

The flight feature is nice, but I often end up using Raycast for flight tracking anyway. Some flights work, some don't. It's integrated with FlightAware, so I'm not sure how much of it is a Xylect’s issue versus a FlightAware issue. It seems to work for US flights but not for Indian flights, whereas I can use Raycast for both types of flights.

August 18, 2024

Introduction

Last November, a new launcher called Monarch was released (public version available since Februrary 2024), and I really liked the idea behind it. I wanted to test it out, but I usually wait 10 to 12 months before writing about or testing an application. This is especially true given the current indie app development culture, where apps are often launched for a short period to gauge interest and then shut down if they don't gain enough traction. Now, 10 months have passed since Monarch's launch, and it's become quite popular on Reddit, so I decided to give it a try.

Notably, this will be a completely blind test for me—I haven't used Monarch before, seen it in action, or watched others use it. It's rare for me to have the chance to test an app without any prior exposure, so it will be interesting to see how this experience unfolds.

When you open Monarch, it greets you with multiple permissions, which is fairly normal for any Apple application. Then, it shows you a box with the latest update for Monarch. The screenshot below is a scroll capture, but it has a normal-sized pop-up window similar to what you would see in Raycast.

When you open Monarch, you don't get a walkthrough like you do in Raycast, which makes it significantly more difficult for me. Even though I've used Raycast before, part of the difficulty comes from the fact that you don't have any other method to use this application without relying on key combinations that aren't shown to you unless you've read the user manual.

It starts in a collapsed mode similar to Raycast, rather than showing all previous commands, which is fine as a decision. Then you have to switch modes using the tab key. While it does say you can press tab to move to a different mode, it's very unclear how to trigger certain actions within that mode.

Initial Walkthrough

Playing with Clipboard History

For example, when I took a screenshot, it got saved to clipboard history. You can press tab to move to a different mode, but the only visible option is using the enter key, and everything else is hidden. You might see numbers on clipboard items because I pressed ⌘ + ⇧ + 4 to take a screenshot, which I wouldn't have known without reading the user manual. Unlike Raycast, where you can press the ⌘ + K to see actions associated with an item, you can't do that here.

Another important point is that clicking doesn't work at all in Monarch for me; you always need to use keyboard shortcuts. This doesn't sit well with me, even though I'm a keyboard person. Sometimes I prefer clicking around rather than trying to remember or figure out key commands, especially since it's hard to know which key commands might clash with other system-wide shortcuts.

Playing with Unit Conversions

One of the first things I try with any launcher application is how well it handles unit conversions and similar tasks that I used to rely on Google for. Since I started using Raycast, I haven't needed Google for these tasks, and Monarch works pretty well with unit conversions.

However, one odd thing missing in Monarch, which kind of works in Raycast, is the ability to combine two currencies and get an output in another currency, even if it's one of the two. This feature works for measurements, lengths, distances, and similar tasks, as shown in the screenshots here.

Another feature is that all calculations you perform are saved as commands and appear in your recent history. However, filtering these commands by their origin, such as whether they came from the calculator, isn't easy, so you often see a mix of commands based on your activities. I really like Raycast's option to view just the calculator history, which includes all conversions and calculations, but that's something Monarch lacks. Additionally, I couldn't open just the calculator history without performing a calculation, which might be why I found the feature to be missing.

Monarch also seems to be missing features like a flight tracker for pasted flight codes. I also had trouble with time calculations, especially with daylight savings changes, but don't quote me on that since I didn't test it thoroughly. Overall, Monarch seems fine to me. It's not particularly special, but it handles all the calculations you might need with a system like this.

Playing with Settings

The first thing I wanted to do was change Monarch's shortcut. It was such a hassle with the cursor sometimes not working and the main instruction at the bottom not doing its job properly. I had to go into the settings, change it, and press enter to save it because initially, the enter key prompt kept getting stuck on copying the answer to the clipboard. I really didn't like that experience. You can change the shortcut and kind of change the theme, but you can't sync it to the system, at least not in the way I saw it. So, you always have this dark screen, dark theme pop up. I'm a fan of system-synced settings rather than dark themes, which might be influencing my opinion here.

Just a heads-up: the "Manage Keyboard Shortcuts" is actually a button, which wasn't obvious to me at first. In hindsight, it should have been. Clicking it opens a panel within the application where you can change the keyboard shortcuts. The process is quite unintuitive. After clicking to change a shortcut, you need to click another button on top of the pop-up that says "Click here to record a new shortcut," then press Enter to save it, and press Enter again to save all shortcuts. I expected to just click and change the shortcut directly.

One crucial point to mention is that you can only have three keys in a shortcut, with two being modifiers, or four keys, with three being modifiers and one a letter. This is important because many people, like me, are tired of clashing keyboard shortcuts and often use a hyperkey, where the capital key maps to Command (⌘), Option (⌥), Control (^), and Shift (⇧) pressed together. Unfortunately, you can't set shortcuts that work with a hyperkey in Monarch.

Starting with Using Monarch

Reading the Manual

So I think this is where I ended up reading the manual. Much of it didn't make sense to me. There were so many hidden keyboard shortcuts. I'm not usually a keyboard person per se, even though I use keyboard shortcuts a lot. It seemed like it was still very much an alpha version (even though it is a public release and not a closed release version), aka it's still a 0.6.7 version, not a 1.0 version. But there were some things that did not feel intuitive to me at all. And so I ended up reading the manual that they had on their website.

Hidden Commands

After reading the manual, I discovered several hidden commands that don't appear when you type them in the search bar. This means that even if you're specifically looking for them, they won't show up, which I find frustrating.

Monarch has a great emoji and symbol picker. Personally, I'm not a huge fan of Raycast’s picker and often use Rocket because I prefer Slack-style emojis. As you'll see in the screenshots, even if you type "symbol," you won't find the symbol command in the application. You really need to read the manual to use the app effectively, which isn't a great user experience. If someone types "emoji" or "symbol," they should be able to find what they're looking for. While there's a shorthand using a colon to search for emojis or symbols, this should be included as a learning feature rather than the only method.

And as we saw when l explored the settings and keyboard shortcuts, you'll find an option to set a shortcut for emoji search. However, unless you know this feature exists, you won't go to the keyboard settings to set it up. You can't set the shortcut right when you open the panel; you need to go to the settings. This is one advantage I miss from Raycast, where you can easily configure and set up commands with keyboard shortcuts directly in the panel. Monarch only allows certain commands to have shortcuts, and you must go to the settings to configure them, unlike Raycast, where you can do it in the panel itself.

Popup Window Woes

For example, the window that shows updates and the settings window cannot be dragged, but the general popup window can be moved around, although it won't remember its place. This is quite frustrating for me because I often have something on the side that I don't want to be covered by the popup window. You can't resize it, which is expected and doesn't bother me, but I really hope this issue gets fixed in the next version.

Monarch Modes

I read Monarch's blog and found their mode-switching system, which you can access using the Tab key, quite confusing. The distinction between modes and built-in applications isn't clear to me. When I look through the commands, it's hard to tell what qualifies as a mode versus a non-mode. For instance, there's an app launcher mode, a clipboard history mode, a color picker mode, an emoji picker mode, and even a note mode, currently not mentioned in the user manual. However, I don't see why the emoji picker is a mode while the definition command is part of the app launcher. It seems more practical to integrate all these functions into one command or panel. Raycast has a similar setup with sandboxed components, but Monarch doesn't seem to utilize this approach effectively by separating out and giving direct access to the history. Overall, I think the concept could be improved by simplifying it into built-in commands versus system information access, rather than cycling through different in-command applications.

App Launcher

I won't go into much detail about app launcher mode because I think you're already familiar with it, similar to how you'd use Spotlight. You can toggle various system commands, open applications, use shortcuts for those applications, perform calculations, convert units, manage time zones, control volume, open folders, search between them, create superlinks and variables (which I'll discuss below), open webmarks in any browser, view your command history, and quit or launch applications. It's pretty much what you'd expect from any Spotlight or Spotlight replacement that acts as a launcher.

Clipboard History

Alright, the clipboard history here is similar to any other clipboard history. However, one unique feature compared to Raycast is that you can paste multiple items and pause the clipboard.

Now, let me explain why I dislike the missing command key or action key here. I had to thoroughly read the entire clipboard history manual to figure this out. You can navigate with arrow keys, but deciding which items you want—whether all items, text, links, or images—is really hard to figure out. The cursor sometimes works, sometimes doesn't. You can edit a clipboard history by hovering over it and clicking the edit button.

The manual says you can delete a clipboard history, but as you'll see in the screen recording, pressing ^ + Delete didn't delete the clipboard history item for me.

Update Aug 19, 2024: I just realized that I am using ^ + D not ^ + Delete to delete the clipboard item. That is on me. The ^ + Delete shortcut does work, please ignore my attempts at deleting the clipboard entry in the video.

You can rename clipboard items, and you'll see in this screen recording that I can rename any item and then search based on that name. Another interesting feature is that if you have a color in your clipboard history, it renders that color, making it easy to identify. You can also multi-paste by selecting multiple items, holding the Shift key, and then pasting them all together.

However, I didn't see OCR search, which is built into Raycast. I might be wrong, and if I am, I'll issue a correction here, but I think OCR history is one of the biggest reasons I use Raycast clipboard history.

Monarch also doesn't show the number of items and the history length. Raycast does, but it's pretty hidden on their website. It has a storage limit of 256 items, so if Monarch has more, that's a good deal.

Color Picker

The color picker here is like any other color picker, but there are many hidden keyboard commands. To pick a color, you need to press Command + 1 or click on the color picker, which is fine, but it wasn't obvious to me at first. Personally, I use the extension color picker in Raycast. One thing I like about this color picker is that all the commands are contained inside this panel, unlike Raycast where each command can show up when you search for something. This might be something you like or dislike. For me, it's something I'm still ambivalent about. Some days I like seeing each command in the search, some days I don't. Here, you have the option to pick colors, add them to palettes, and save them.

You can create multiple palettes and see all the recent colors you've picked, then save them to different palettes. There's nothing special about it, but one thing I like, unlike Raycast, is that it names the colors. I find that really interesting. I don't know where these names come from, but seeing names like "ebony clay" or my usual "Nerdy Momo Cat color," which is apparently "albescent white" (which I thought was a form of light pastel orange), is really interesting. I have no qualms about this; it works as it is supposed to.

Additionally, the colors copied to your clipboard show up as tiny colored snippets, making it easy to go through the list and pick all the colors quickly rather than adding them to palettes. Great job on the color picker mode here!

Notes

Lastly, let's talk about notes. These pop-ups appear in the same window, and you can set a keyboard shortcut to make them immediately visible. The notes are saved as markdown files in a folder you choose.

You can type in markdown and also use keyboard based formatting aka ⌘ + B bolds text and so does **, create task lists, and paste images, which is pretty cool for a markdown-based note-taking app. It saves images in base64 format, and I've attached a screenshot. The links don't seem to work for me, though they might for others. You can have a scrolling node, but only one note can be open at a time. You can create multiple notes, but it's a pretty basic popup like note application.

Your browser does not support the video tag.

Working with notes in monarch showing use of H1, bold and adding an image

I'm unsure why you would use this over something like Apple's Quick Note or opening a note in a new tab and making it stay on top. As someone who has invested time in various note-taking applications and isn't a fan of markdown, this is nice but not essential for me.

Update Aug 19, 2024: You might prefer Monarch notes if you want to avoid system lock-in, maintain a repository of notes on your own system rather than in an inaccessible database, and use floating notes in full-screen mode. Monarch is one of the few pop-up note applications that works with full-screen applications, unlike Apple's QuickNote or many other similar tools.

According to the developer, there's no syncing of notes between installations. However, if you sync the folder itself, you can achieve syncing by pointing to the same folder where the notes are saved. The notes work fine, but I couldn't find a way to keep them on top, which I really wanted. The developer mentioned on Reddit that there's a way to do this, possibly with a keyboard shortcut, but I couldn't find it.

However, it's better than any Raycast implementation of notes I've found. It's not a sticky; it's an actual note, which might be a useful differentiation from Raycast if you're considering why you might need another note-taking app.

Available Commands in App Launcher Mode

Search the Web

There are several reasons why I've been considering whether I need a launcher other than Raycast. I'm not necessarily looking to switch, but if there was something unique, I might. One reason is that you can't search the web directly within a Raycast window; it always opens the search term in a browser, which isn't what I'm usually looking for.

Sometimes, I just want to see the results in an iframe within the application. I'm not sure how difficult that is to implement in a macOS application, but that's my ideal user experience. I was curious if Monarch could do this, but unfortunately, when you type a term and click "search the web," it opens in the default web browser instead of showing results within the app. This is unlike some launchers on Linux (the names that I cannot recall at the moment), which display results in a pop-up, making it especially useful for looking up places on Google Maps, or searching for a term quickly for example.

Shortcuts for applications

You can create shortcuts for accessing applications, like typing "GC" to open Google Chrome instead of typing the full name every time. However, keep in mind that these applications are ordered alphabetically, not by frequency of use. So, even if you click on Google Chrome a hundred times, Google Chat will still appear above it in the pop-up, as shown in the screenshot. It doesn't learn from your habits. I'm not sure how difficult it is to implement a feature that learns from usage, but for now, you'll need to type "GC" or something similar to open Google Chrome each time.

Emojis, Symbols and Definitions

As I mentioned before in hidden commands, emojis and symbols are a really nice addition and quite useful. In Monarch, you also have the option of continuous select, which I discovered by accident when I kept pressing the command key to take a screenshot. You can press command and enter to continuously select multiple emojis in a row and then paste them all together. The search is fine, though it doesn't offer synonym-based search or mapping particular emojis to search terms for later use. It's pretty basic but somehow feels better than Raycast in general. You can also search for symbols here, so if you type "rupee," you'll find the rupee symbol, which is easier than using the globe key Apple inbuilt search, which I've never been a fan of and never ended up using.

Open Camera

The "Open camera" command launches your default camera app, but the escape key doesn't fully close it; instead, it minimizes to a single entry view without actually shutting down, which can be a bit buggy. Be cautious using this command if you don't want to force quit and restart the app. This issue though was observed on the new macOS 15.1 beta, suggesting it could be a beta-related problem rather than an issue with the app itself.

Variables

Unlike Raycast, where snippets expand anywhere, Monarch's variables expand only within the app.

Update Aug 19, 2024: The developer informed me that a system-wide snippet expansion tool is in the works and should be available within Monarch soon. It's important to note that the developer views variables differently from snippets, which is accurate. For instance, you can set a variable like "rent," and since it's sandboxed within Monarch itself, you don't have to worry about every occurrence of "rent" in your entire system being replaced by your specific rent value. However, you can still perform calculations using the rent variable. Moving forward, you can consider variables as Monarch-sandboxed expansions, while the upcoming snippets feature will function as system-wide text expansions.

Superlinks

I'm honestly not someone who uses superlinks much, so I'm just going to leave you with a screenshot showing all the options you can configure in superlink. You can decide whether you want a superlink to go to a particular link and which browser to open it with. You can also set it to match a check so that it brings an already open tab into focus in your browser. I don't think Raycast has this feature at the moment. You can define dynamic variables in these links, etc. Personally, I've never found an obvious use for superlink. I often forget the query term I need, whether I'm navigating to GitHub or doing a Google search.

Instant Send

Instant Send is a feature that lets you call Monarch based on a text selection, similar to how you might use PopClip, but now with Monarch. It includes built-in recognition tools. For example, if you select a link, it offers options to create a super link to open with a specific app, copy a clean URL by removing query parameters, search the web for that URL, and trim the text.

If you select normal text, it still offers web search but also allows you to trim the text and convert it into different cases like sentence case, Pascal case, Camel case, etc. The most useful one might be converting it to title case and back to sentence case.

Currently, I'm on macOS beta 15.1, and often when I select text and press the Instant Send key, it triggers an error in Privacy and Security. I'm unsure if this is a macOS beta issue or a Monarch issue. Out of 15 attempts, it either didn't use the selected information and instead used the clipboard data, possibly due to the assistive API not working, or it opened an error box, as shown in the screenshot. I only managed to get to the screen for selecting normal text and seeing its actions about one out of 20 times. When I pressed sentence case or title case, it sometimes ran the text action but couldn't replace it, likely because it was reading from the clipboard instead of the selection.

I know assistive APIs in macOS can be messy, but I feel this feature isn't polished enough and needs improvement. I should note that I'm using it with the Electron app Notion, and I'm not sure if that interaction affects it, but I wanted to make that clear.

Conclusion

I generally like the idea of Monarch Launcher, but it doesn't quite match up to Raycast. There were three main reasons I was looking for an alternative to Raycast, one of which was notes. I want something like Numi but without built-in calculations. It should stay on top, allow multiple notes in a single window, and enable quick switching. I don't need markdown, but I do want highlights. Monarch comes closest to fulfilling my needs in this area.

Additionally, I appreciate the ability to pause clipboard history and select multiple items to paste, a feature I wish Raycast had. It feels like Raycast is adding more features for pro users, which I find disappointing. My main reason for exploring other launchers was to see if anyone had replicated Raycast AI using personal API keys. I like how Rayacast AI stays on top, allows multiple conversations, and has a nice UI/UX, but it only works for the inbuilt Raycast AI mechanism, which canmot be replicated by any extension. I was curious if Monarch could use API keys for cloud or OpenAI, especially since Raycast Pro is expensive and has usage limits.

The UI/UX polish of Monarch is geared towards heavy keyboard users. I missed Raycast's popup transparency when I switched back. I don't like how keyboard-focused Monarch is without visible actions. I prefer keyboard shortcuts for frequent tasks but want visible access for less common actions. Configuring keyboard shortcuts for specific commands is also difficult, and the animations feel janky, possibly due to my reduced motion settings. It works as a Windows application, and the list movement feels janky and non-macOS-like.

I might revisit Monarch in a year or two, but for now, Raycast offers much more. I also wanted to add that, personally, I don't mind apps with many features as long as they meet my needs. I prefer apps that can maximize functionality down the road rather than those where a selling point is having a limited feature set, and this is especially true for apps I use often and are deeply integrated into my workflow. Monarch seems designed for users who want a better spotlight without a freemium model, but maybe, I'm not the target audience for daily-use apps that aren't cluttered by features I don't often use.

I do app reviews for fun and would never put them behind a paywall. If this helped you in anyway, please consider buying me a coffee here:

Feed my software & bakery addiction @  

August 6, 2024

I came across this post on reddit today where they use birefnet for background removal and then Florence for object detection, and the Florence model ends up restoring their background. No, this isn’t a training data issue. TIL, Apparently some background removal apps just set the transperancy of background pixels to 0 — they still have all the original color information in them. And all someone would need to do to restore the image would be to set all pixels to be opaque.

A pretty huge privacy risk, especially for someone like me, who uses this as an alt account

August 2, 2024

Aug 1, 2024, I saw ProperHonestTech’s video on my Youtube timeline titled “Mac owner? STOP doing these 11 things!” — and I don’t usually watch these, but this one I did. And I learnt two new things.

Screensharing

You can learn more about screensharing on MacOS here. It seems like it internally uses a Facetime API because you see those controls pop up in the menu bar.

[Expand toggles to see screenshots]

Screensharing is a hidden application. It doesn’t show up on your Application or Launchpad. You need to open screensharing app using Raycast or Spotlight.

It opens up a screen showing all the connections you have. You can also create groups to manage all connections you have had.

Then you can enter a hostname or apple id (yes, any apple id) to connect to.

And voila, now you are screensharing.

You can also modify what you see on the toolbar

And modify the settings for display scaling and quality

Screensharing shares microphone by default. You can mute the microphone in the Connection menu item. It also shares clipboard by default which can be changed in the Edit menu item.

You can copy paste or drag text, images and files during screensharing. Universal clipboard is not available during screensharing. You can’t have both Screen Sharing and Remote Management on at the same time.

Document Templates

You can create document templates, such that you don’t need to worry about modifying the original document, hence, called “stationery” in MacOS. To do this, select the document and use Get Info or ⌘ + I . In the general section, select Stationery pad. Make sure it is a document you can edit, and not a folder or an alias.

Now, everytime you open that document, it will duplicate itself — without you needing to worry about modifying the original.

July 26, 2024

I have this little shortcut that takes an URL, gets HTML of the page, takes a screenshot, tags it based off some heuristics and saves it to Notion. The most frustrating part has been to use my trackpad to click done. Well, apparently you can press fn + return or 🌐 + return to do it! And no, ⌘ + return or just return doesn’t work here.

Side note: Accepting text replacement on MacOS doesn’t happen with tab or return; it happens with space.

July 26, 2024

Today I learnt that Tailwind doesn’t automatically scale base font sizes based off screen or viewport sizes. Sure there are plugin options and complicated stuff, but I am not a front end wizard, and adding this to my global.css helped. You check out the difference in font size for this website on mobile and desktop.

html {    font-size: 14px;    @media screen(sm) {      font-size: 16px;    }  }

July 20, 2024

If you are like me and use CapsLock as your hyperkey and sometimes wonder why it didn’t get triggered, apparently there is a built in delay. You can turn it off by using the following command in your terminal.

hidutil property --set '{"CapsLockDelayOverride":0}'

July 11, 2024

TIL: You can set an accent color in CSS and it magically updates across your HTML user-interface controls! Just one line: accent-color and your whole app gets a color refresh!

Just like this →

body {  accent-color: #ffc0cb;}

Below are test html iframes with different accent colors

July 9, 2024

The main reason this feedback is in Notion rather than in Leaflet, is (a) I like it to be in one place where I can access it later rather than it being lost, but, more importantly, (b) I really want toggles in leaflet for controlling information overload visibility.

Testing on Jul 13, 2024

This is the first time I am trying Leaflet. Instead of trying to use Leaflet and then jot down my notes later, I instead decided to record my thoughts and then summarize them.

tl;dr

(disclosure: generated with gemini)

Initial Setup & UI Quirks:

• Link Redirection with Notion-esque IDs: Right off the bat, Leaflet generated a unique ID for my document. The format reminded me a lot of Notion, which threw me for a second.
• Button Placement & Responsiveness: The layout is clean with a top button and a cool gradient button at the bottom that says "Write something." Resizing the window works well; the buttons adjust nicely.
• Confusing Toolbar Situation: Clicking "Write something" unleashes two toolbars – one at the top right and one at the bottom. Here's where it gets weird:
  • Both toolbars stick around even when the screen size changes.
  • Three icons are duplicated on both toolbars. Not sure what the thought process was there.
  • Tooltips on the top icons appear faster than the bottom ones. I almost missed them entirely!
  • There's a random black "icon" on the bottom toolbar that seems pointless.

Writing Experience & Missing Features:

• No Slash Commands: Sadly, my beloved slash commands don't work here.
• Intrusive "Add New Block" Toolbar: Typing a slash transforms the bottom toolbar, while the right toolbar awkwardly shifts below. It's very in-your-face, even when grayed out.
• Image Handling:
  • Adding images is smooth – rectangles, squares, pasting – it all works.
  • No column blocks, which is a bummer.
• Link Functionality:
  • Pasting a link renders a preview with the OG image and description.
  • Pasting a Leaflet link into Notion doesn't work as expected. It doesn't pull the Leaflet document title.
  • The Leaflet link structure is cool though, not as clunky as Notion's.
• Mobile Friendliness:
  • Link previews render fully on mobile, unlike Notion's cropped versions. More like Craft, which I prefer.
• Not a True Block-Based Editor:
  • This was a letdown. I was expecting block-based functionality.
  • Adding content above existing elements, especially images, is a nightmare.
  • No drag-and-drop for rearranging content. Huge miss!

Text Formatting & Highlights:

• Basic Formatting Toolbar: Selecting text reveals a standard toolbar (bold, italic, etc.).
• Keyboard Shortcut Confusion:
  • Tooltips show "Control + B" for bold, which is odd for a Mac. Should be "Command + B." And neither shortcut actually works.
• Highlight Color Choices:
  • Default gray highlight is an odd choice. Green would fit the "Leaf" theme better.
  • The color picker options don't look interactive at first glance.
  • You can select and overwrite the hex codes, which is a plus.
  • The color selection pop-up stays open even after you've picked a color. A bit strange.
  • Love the real-time preview when changing highlight colors!
• Inline Links:
  • No keyboard shortcut for adding inline links.
  • Pasting a link over selected text doesn't auto-create a link (unlike Notion or Github).
  • Clicking the inline link button makes the text selection disappear, which is disorienting.
• Markdown Support:
  • Basic Markdown for headings (H1, H2, H3) works.
  • Converting between heading levels is clunky. It seems to append hashtags internally instead of properly converting.
  • The paragraph behavior is strange, especially when switching from a heading.

Cards & Collaboration:

• Card UX:
  • Opening a card creates a right-side pane, but it doesn't auto-scroll to the center.
  • Cursor placement in the "Write something" field is slightly off, which is visually distracting.
• Card Design Similarities:
  • "Add a card" and "External URL" look too similar. Different colors or backgrounds would help differentiate them.
• Real-Time Card Updates:
  • The card preview dynamically updates with content and formatting changes. Super cool!
  • Only the H1 and the paragraph directly below it appear in the card preview.
• Collaborative Features:
  • Collaboration works smoothly.
• Gradient Button Confusion:
  • The gradient button controls document design, which isn't immediately obvious.
• Design Options:
  • Background colors, images, and accent text customization are all great additions.
  • A color picker for the page color would be fantastic.
  • It's unclear what "accent" text affects until you have content on the page.
• Card Focus Issues:
  • Clicking on a card with existing text doesn't place the cursor in the document or center the pane.
• Document Navigation:
  • "Cut" functionality works despite the message saying it's not supported.
  • Block selection doesn't seem to work on desktop.
  • Inserting content between images remains a challenge.
  • The "multi-column view" seems to refer to the side tabs, which is a neat feature.
• Card Overload:
  • Adding multiple cards can lead to a long scroll. Collapsible sections or a way to limit visible cards would be helpful.

Missing Features & Future Ideas:

• Essential Text Editing:
  • Table of contents or navigation for headings is a must-have.
  • Find and replace functionality is needed.
  • Columns within pages would be a game-changer.
• Embeds & Rich Content:
  • Embeds for services like Partiful or Luma would be amazing.
  • Comments and annotations are essential for collaboration.
• Power User Features:
  • Ink & Switch-style math input fields would be incredible.
  • A built-in sketch block would be a huge differentiator.
  • Toggles for hiding and revealing content are crucial for organization.
• Media & File Handling:
  • File uploads, tables, and video embeds are important for various use cases.
• Lower Priority Features:
  • User accounts, home pages, and granular sharing aren't critical right now.
  • "Key-value blocks" seem like Google Docs variables, which could be interesting but not a high priority.

July 9, 2024

For some time, I had Kiko card on my list of apps that I would recommend to anyone. Then I decided to download it on the teeny tiny iOS device I have — iPhone SE3 for the sole purpose of airtag tracking and using Mela. And while it is nice, the lifetime plan is pretty expensive at $30 for what is basically a text → image app (pretty similar to Typeshare). And while the split text is pretty nice, it is “not intelligent”, aka it splits more poorly than LaTeX does, which isn’t a compliment. I do love the options bar though, and it renders really pretty images, so if the free plan templates are enough for you, give it a shot.

July 8, 2024

It was Sunday, and for the first time since November when I started working on Webtrotion, I decided to run npm run format. This would ensure the code was properly formatted rather than the mess it had become after my extensive changes.

When I saw the beautifully formatted code, I thought, "What if I launch it on Product Hunt?" To be clear, this wasn't my ideal first launch on Product Hunt, the first time I had put much more effort in, but ended up not launching in the end (the failed launch tweet that I had to specifically ask for removal).

Look at those screenshots (on larger screens only)!

For Webtrotion, the entire process, from the idea of launching to actually doing it, took about four hours with effort ranging from 5 to 15 minutes. Incredibly, I woke up this afternoon to find myself in the top 15 for the day with 100 upvotes, and I'm still in disbelief about how it happened. Some comments and reposts on my Twitter post definitely helped.

It's astonishing how something I worked on for myself and decided to launch in a matter of 15 minutes, with hastily scraped together screenshots annotated using Shottr, ended up being such an amazing moment compared to a launch I had prepared and planned for. I guess one of the main differentiating factors is the freedom I felt. This was an open-source GitHub repo with no money to be made, no Lemonsqueezy link, and no tiers—just a passion project. It solidifies the one thing I know about myself: passion projects and figuring stuff out drive me more than money. Wanting something often cripples me, but because Webtrotion is a free-for-all niche project, I had nothing to lose and everything to gain. And I gained 😊.

Support me on product hunt!

July 7, 2024

One reason I believe I was having trouble getting pages indexed was due to the DOM size. This assumption is based on two observations: (a) when I had the same site in Quatro, it was much easier to get indexed; and (b) Notion returns a very shell-based HTML to Google's crawler (no images, colors, or icons). Most of my pages are stuck in "Discovered - currently not indexed." While I can't guarantee this will help, one major factor contributing to the large DOM size was the popovers I was creating.

So, I asked Claude and GPT-4, and they told me about the <template> tag. I never knew about it before, but it reduced the DOM size from around 2000 to about 1200 (see here). Not sure if it would make a difference, but a smaller DOM size always helps!

June 28, 2024

So, Notion's got these new site versions, right? And now we gotta think about whether to stick with Notion or go for something external. Let's break it down.

First up, pricing and domains. You need a Plus plan for custom domains, which is free for education but costs extra otherwise. Notion charges you $8 for the custom domain thing, and you get five sites or however many domains you want. Sounds cool, but it might be a pain if you're trying to host a bunch of project sites with custom domains. Webtrotion, works with Notion's free plan. You can host a site from a single database on GitHub Pages for free, which is neat but has its limits. And you can host on subpaths as well, aka, example.com/blog.

Notion sites are great if you want sub-pages inside posts, inline databases, table row colors, cropped images, post display options (Webtrotion has either a stream or a list view) or those fancy new preview cards. Webtrotion can't do that stuff unless you get into some complicated scraping business. But here's where Webtrotion shines: consistent URLs (Notion's URLs go crazy if you change titles), custom tag pages, no unnecessary property visibility, better custom headers, custom persistent footers, floating table of contents on mobile, stream view, custom styling, theming and colors, add html embeds, actually useful (sortable and searchable) simple tables and it can pull out references, block mentions, post comments using giscus (you need to be signed into Notion to comment), and even make RSS feeds. Oh, and it's got this cool Shiki transform for code blocks that I added recently.

When it comes to hosting and SEO, Webtrotion on GitHub Pages can be a bit iffy with Google indexing. Notion's got the upper hand here with their new Google Analytics and SEO stuff. But Webtrotion auto-generates those social media (OG) sharing images, while with Notion, you gotta do it manually every time. Update-wise, Notion sites are instant. Webtrotion on GitHub? Every eight hours, but you can tweak that to be 10 minutes, but not instant.

So, why am I sticking with Webtrotion? Because I want and prefer traditional website, and using Notion as my CMS. I want to be able to provide people with a URL and know where it lands, not having to worry about link rot, or add redirects, and change some fonts, pin posts etc. But honestly, it depends on what you need. I wish someday Notion lets us embed blocks into public websites. That'd be the best of both worlds.

June 20, 2024

Introduction

Honestly, ever since Whisper first came out and people realized you could do proper and really good voice translation, there has been no shortage of audio apps on the web. They all claim to do the same thing: think out loud, speak whatever you want for as long as you want, and eventually get a clean result, whatever "clean" might mean.

Onboarding

The first thing it gets right is that when you open the app, you can directly record a note. It displays all the basic features right there. You can record notes, create summaries, or modify specific notes or groups of notes. We'll discuss that later. Additionally, you can use the AI features, which include intelligent suggestions. However, some of these points are a bit vague and don't really show up in the initial walkthrough or usage of the app.

Press the record button and start speaking. When done, press stop. A new pop-up with a play button will appear, indicating your voice is being transcribed. The interface is clean and free of intrusive pop-ups or CTAs, something I'd highly recommend to other apps.

Using the app

Code-switched recordings

With that context, you'll understand how I'm testing this app. You cannot have separate workspaces here. Since I can't separate my personal Hinglish thoughts into a different workspace, I tried 3 code-switched recordings. Each recording is transcribed differently, making it messier than I had hoped.

In one recording, everything is transcribed to Hindi, including my English speech and English words in Devanagari characters. In the second recording, there's a mix of Hindi and English characters, but it inconsistently uses English characters for English words, which is odd and not very useful. In the third recording, everything I said in Hindi was translated into English.

As a speech and language researcher working with LLMs and speech models, I know this isn't an issue with VoiceNotes specifically but inherent to Whisper modes. However, there are ways around it. Users could choose between languages, selecting up to three for transcription. The main option they’ve provided is to always have transcriptions in a certain language, which is often messy and inaccurate, contrary to the claims in the FAQ.

Note Features

Overview

Clicking on a note gives you around 10 options. You can add to it as a thread, a recently released feature, or edit the transcript. Tagging notes, which we'll discuss later, is also possible. You can create a version with specific instructions or use default versions. Sharing the note publicly makes it appear in the sidebar for quick access. Additionally, you can regenerate the title and transcript since the audio is stored and can be replayed.

Add a threaded note

The app now lets you add to a thread, linking one note to another, but I'm unsure of its actual functionality beyond seeing them in a delve view, like "Oh, I was thinking about X and Y." I'm uncertain how that helps solve a problem. One specific thing to note is Voicenotes' Related Notes feature, which we'll discuss later. It seems to either malfunction when adding to a thread or inherit the parent’s Related Notes.

The "Add to thread" feature has a bug where any new note shows a popup saying "Adding to XYZ thread," even if it's not being added. You need to click the "X" button to close out of the popup.

The not-good tagging system

Remember how I mentioned you can apply tags to these notes? It's true—you can define your own tags, and they show up in the sidebar, as you can see in the screenshot here. However, tags are probably the weakest point of this app experience.

The founders claim tags are obsolete because all necessary information is in the transcription modality. I disagree. People still value organization, glanceable views, and not having to chat with an AI. An AI-run system struggles with tens of thousands of notes. With tags, you know you're accessing all the information you've created in the app.

My disappointment with tags in this application stems from two main issues: the lack of auto-tagging based on predefined tags and the inability to scope based on tags. You can't click on a tag to ask questions solely based on that tag or a collection of tags, nor can you perform boolean queries on tags for searching or chatting. This feature would integrate with the AI mindset while giving users control over filtering. It would also mitigate the absence of a workspace component, allowing tags for personal, work, or multi-use purposes. Nested tags would enhance organization, especially if added automatically, while still letting you decide the scope of tags for different situations.

Create something from your note

In the video below, I'll demonstrate the create option's capabilities: generating summaries, extracting main points, a handy copy feature, creating tweets, and following custom instructions.

The custom instructions option isn't highlighted in the note’s create menu. You need to go to the toolbar at the bottom to find it, which isn't obvious. I only discovered you could add custom options by toggling all the buttons during this review.

Using the bottom toolbar to create something is a cool feature that lets you select multiple notes at once, perfect for creating a to-do list, for example. However, you'll notice the absence of filtering and sorting options due to the lack of a tag ecosystem, which I sorely missed during testing.

Search

The search functionality is not semantic, which is disappointing, especially since you already have representations stored for related notes. I expected a hybrid search mechanism to bring up related notes. For example, when I searched for "headache," a note mentioning "migraine" didn't appear in the results. I was expecting some kind of semantic search or an option to choose between keyword versus semantic search. The default expected option is for people to use "Ask My AI," but it doesn't feel like a UX I want to use. I'm still accustomed to using search boxes and entering short queries rather than formulating questions for a chatbot.

AI Features

Related Notes

The related note option is quick, which is great. One thing to test over time is how well it works with over 500 or 600 notes, especially since you can't use tags to refine the model's understanding. Customization for defining related notes would be useful, addressing either a customization issue or a general problem with the related note architecture.

I feel the app relies too much on basic cosine similarity over entire content or asking a smaller model to pick relations, neglecting hybrid or more nuanced matches. Semantic similarity isn't effective for longer texts, which they should improve. Additionally, the related notes feature fails with bilingual notes, not matching or calculating relations correctly. They should consider using an English vector representation for all notes to enhance this feature. Hopefully, this will improve in the coming months.

Ask Me Something

The "Ask me something" call to action at the top of the navigation toolbar is meant for journaling, where the app asks you a question to answer as a recorded note. However, this isn't clear within the app. It would be better to replace it with a pop-up prompt like "Suggest something for me to talk about." The current phrasing is too similar to asking the app something and may not be perceived as the app asking the user a question.

Ask my AI

The Ask AI feature is the main selling point, similar to Google Notes but with AI capabilities. Unlike Notion's AI, you can dictate notes using audio instead of typing. It works well for English notes but struggles with bilingual or code-switched notes, posing a significant issue for tasks involving two languages simultaneously.

When the "Ask My AI" feature works, it's cool because it shows the sources it used. However, the sources are often scattered, highlighting weaknesses in the related notes feature and the overall retrieval and re-ranking processes. These basic issues need fixing to make the app more viable, contributing to my negative experience.

If you ask a question through voice, you have 20 seconds, and the answer is spoken back to you, which is a cool interaction I'd like to see in more apps. If you type something, you read it in text; if you speak something, you might just want to hear it back, and I really like that. However, the answers are pretty generic and cover many irrelevant sources.

The Ask AI feature includes a chat history similar to Notion's Ask AI. While this history isn't searchable using AI or semantic search, which is a bit of a miss, it does allow you to revisit past conversations. One notable omission is the inability to save the model's response as a note in a database, especially since notes are meant to be voice notes. It would be beneficial to add context to a thread or use the new "add to a thread" feature to include text notes, similar to how Create adds content to a note. I wish you could also attach AI responses to those notes.

Settings

The language setting option lets you choose a default language for transcription.

The setting option lets you modify AI responses. While I'm unsure if it affects suggested questions, the “what would you like your AI to know about you” option influences persona-based answers, like “Suggest me something to do for the week.” The "names to remember" feature improves transcription accuracy by recognizing specific terminology or names, as shown in the screenshot.

Commentary on FAQs and Release Notes

FAQs

The FAQs offer valuable insights into how the founders envision users engaging with the app.

The shorter, the better. Shorter notes tend to focus on one subject and are often easier and more enjoyable to rediscover in the future.
See here

They say "the shorter, the better," which confuses me, especially since one benefit of subscribing or opting for a believer plan is the ability to record notes longer than one minute. I would expect them to appreciate or have a way to process longer notes rather than condensing them into a single vector.

Are my notes really private?

• Yes. My wife and I use the app for our most personal notes, so we designed the platform to be private knowing we'll have to hire team members in the future.
• All notes are secured on the cloud, not used for AI training, and only retrieved upon authenticated user requests.

See here

I'm not a fan of how they've written this privacy policy. It tries to be conversational, but privacy, especially with AI, needs specific addressing. They ensure they won't train AI on these systems, but they should mention that this data isn't processed using a secure cloud-hosted whisper. Instead, it's sent to OpenAI for transcription. They later discuss which models they use, so the data is transmitted to those models, which they haven't included in their privacy promises.

What AI models do you use?

We use the best-in-class (and therefore most expensive) models such as GPT-4 and Claude Opus for most tasks. We sometimes use a faster model like Claude Haiku for features such as Related Notes which do not require high intelligence.
See here

This highlights why the related note features are weak. Claude Haiku isn't effective for matching across multiple long notes, especially in different languages. They'd need a Cartesian product of all notes to determine related metrics. Using Gemini Flash or a vector store with better embedding models and a hybrid search would be more beneficial. Or decomposing into important topics and adding auto tags would significantly improve the related note section.

How does Voicenotes compare with apps like X and Y?

• The honest answer is that we don’t know. I’m sure there are some great products for specific use-cases, but Aleesha and I set out to build Voicenotes because we couldn’t find anything that we would use ourselves. And our use-case was very simple: take quick notes and make sense of it when we need them with minimal effort.
• Our goal is to build the most delightful product for our daily use.

See here

I don't like this answer. Apps should always be compared with others in the same genre to help users decide why they should choose yours. Highlight the unique features your app offers. Sindre does this well, using FAQs to address competitors directly. For example, they can say, "Our competitor is AudioPen, which doesn't offer semantic search and is just for transformation," or "Your Android speech recorder doesn't do XYZ or have a state-of-the-art whisper model." While it's challenging to keep up with evolving software, you're already tracking competitors, so make this information visible to your users.

Release Notes

They've made some cool updates since the first release. The UI is better, and they finally added dark mode, so you don't blind your eyes at night. The ability to pause recordings is nice. However, I don't see the point of keyboard shortcuts on the web app; I'd prefer a menu bar app since you still have to click on the webpage to use keybindings. They added custom instructions in April, which is a nice touch. Related notes were released in May, and I hope this feature gets more refined as the app matures.

They released Android and iOS apps with an offline feature, but it's unreliable. When I used them, they lost multiple voice recordings and couldn't transcribe them, no matter how many times I tried. This feature feels very much in the alpha phase and isn't worth buying the app for.

Comparison to Other Apps

AudioNote apps are dime a dozen, and your phone likely has built-in functionality for this. Major non-native recording apps like AudioPen or TalkNote focus on quickly capturing thoughts and transforming them into readable formats like text blogs, quotes, or tweets. VoiceNotes stands out with its integration of personal knowledge management (PKM) features, such as related notes and AskMyAI, offering enhanced audio notes with an inbuilt retrieval system.

The main difference compared to general recording apps like Google Recorder is that Voicebnotes lacks multi-speaker diarization options, so you can't have speaker labels. This is fine since it's designed for personal use rather than multi-speaker scenarios. It doesn't handle transcriptions well, especially for closed captions, so you won't get accurate phrases like "Oh, noise about this." Scrolling through a transcription can be messy, which ties back to the founders' preference for shorter pieces. However, I believe transcriptions should be as long as you need, as speaking out loud should capture all your thoughts rather than limiting them.

While Google Recorder struggles with accents and code-switching, Whisper handles them better. Google Recorder also has a default language limitation, whereas VoiceMemos currently lacks transcription until the new iOS version in September 2024. VoiceMemos' keyword search feature is a bit unreliable, but Google Recorder excels in this area. These are the main differences you'll notice as compared to the usual recording apps on your phone. Additionally, the PKM-like retrieval in Voicenotes is a nice bonus.

Conclusion

Even after two months, I keep coming back to this app because I genuinely enjoy using it. The UX is fantastic. I'm tempted to buy the believer plan, but I'm unsure if I'd use it enough to justify the $50 cost. I love how easy it is to use and the helpful features throughout the platform, like sources in AskMyAI and specific instruction for transformations.

I feel it's not for me or many others. If your needs are simple and you do well with keyword-based searches, the Google recorder app or voice memos will suffice. However, if you seek something more powerful and enhanced, it lacks enough features for me to recommend it widely.

For example, there's no auto-tagging, and the related notes feature isn't very useful. I tested it with specific paper readings and tried to find notes or audio notes. It's quite generic, so you might be better off using a recording app on your phone, exporting the transcriptions to Notion or Google Drive, and then using NotebookLM or Gemini with extensions to search or reason over your notes.

This app nails the UX but leaves me uncertain about its overall appeal. However, it’s a hit on Twitter, especially among those who write newsletters or tweet to build communities. For journaling or research ideation, it feels both underpowered and overpowered, yet still not enough for me. However, it hits all the right spots in taste and design, which is a bummer because I love the design. I'm not usually a design person, but the UX feels snappy and well thought out for this application.

I do app reviews for fun and would never put them behind a paywall. If this helped you in anyway, please consider buying me a coffee here:

Feed my software & bakery addiction @  

June 19, 2024

Introduction

So, a week back I received an email saying that I now have access to impel ai.

Website look comparison
Thankfully, the main concept of the website has remained consistent throughout the year, which is more than can be said for many AI apps out there right now.

This is how their website looked back in 2023:

And this is how it looks Jun 19, 2024:

Setup

The first thing I did was open up impel.ai but it is a completely different website. The actual website is tryimpel.com.

This is the screen that opens up, so at this point, I expect a summarize and chat feature, smart tasks, and a privacy-focused experience.

The second step is to provide every single access known to man, with no way to move forward without it. I understand they need microphone access to summarize meetings, but there are other features they claim to have that should be accessible without these elevated permissions.

Onboarding

The first option takes you to the WWDC 2024 keynote on TechCrunch and provides a summary of the article on the right, always pinned to the top. Additionally, a summary is provided on the right, pinned near the top right close to the menu bar. You need to click the "Create Summary" button, but it's not clear when or if you need to click it.

Just a heads-up: the pop-up on the side doesn't close automatically. So, whenever you try something new in the on-body, you'll need to manually close the pop-up to see the next one appear on the window.

The second onboarding screen directs you to a YouTube video where you need to click the summarize button. First, remember to click the close button, then proceed to the summarize button. If you check the screenshot, you might notice something odd—it starts off in Chinese. I'm not sure why that happens.

So, here's a weird thing that happened during the onboarding process. While I was navigating away from the video, I had Twitch running in the background. I was dictating my thoughts about the app for this post, and somehow, the app started using the Twitch audio along with what I was saying. It either picked up the audio through the app itself or through my headset's microphone—I’m not sure which. The result was a strange, jumbled summary of the Twitch conversation and my own words. It was pretty weird and intrusive because, although I had given microphone access, this was not what I expected. It felt very omnipresent and not something I was looking for.

Okay, so the next onboarding screen took me to this integration spot where it says the app uses carbon to connect your data. The options it provides include Dropbox, Google Drive, Notion, and a web scraper. I used the Notion connection, but as you'll see later in the post, it didn't seem to impact my searches. I couldn't find anything from Notion or referenced in the answers provided. It might not be implemented, live, or discoverable—none of which are great at the moment.

After completing the onboarding, you'll arrive at a summary screen displaying all the summaries the app has created and the estimated time it has saved you. I'm not sure how this is calculated—probably based on the number of words and reading speed, which I find a bit misleading since people don't usually read that way, and that's what the AI is doing. But aside from that, the screen looks fine. However, you'll notice it already includes Chinese characters and some odd summaries, like a mix-up of what I was saying on the microphone—things I didn't ask for or expect at all.

The main distinguishing feature they've been promoting is that you don't have to do anything with the prompt. When the model sees your laptop, it understands what should be added to your backlog based on what's on the screen. However, it's still not available. They claimed it was trained at least 12 months ago, which is absolutely disappointing.

I then checked if the Notion Connection impacted search or conversation, but it didn't seem to. I posted a recent article I wrote about defining and using AI to add locks, but it didn't reference anything from the Notion Connection.

The Summaries view has a quirky bug with the select drop-downs, allowing multiple to open at once and overlap. It's not a major issue, but worth mentioning in terms of design. Overall, the app looks really cool and is great for demos. It includes basic filtering mechanisms to identify whether the summary was generated from an article, video, or other sources. However, it lacks the auto-tagging features you'd expect from an LLM application. It does have sorting, making it similar to a gallery view of database points you'd expect from any modern application.

It says they prioritize privacy by avoiding external data transfers, which makes it unclear whether they're sending data to OpenAI or not. I've linked the privacy policy here: Privacy Policy

The app claims to store all data locally, including summaries, chats, sensitive information, and documents. However, I'm unsure where they're getting the summaries from. It doesn't seem to be a local model because it hasn't changed any data storage availability on my device, suggesting it might be cloud-based. The privacy policy indicates that all generated content is stored on a computer which seems to be specific to what happens after generation rather than during generation.

The last thing I tried was uploading a PDF about prompting techniques. I was extremely disappointed. The UI is pretty cool, with a card-like structure that opens up into a center panel, reminiscent of a notion center view. The colors are really nice. But when you go into the chat and ask about the document, it doesn't understand or process much.

I'm not sure what's happening here. Even a basic RAG should have performed much better than their current outputs. I don't know if they're trying to feed everything into the context, but it's baffling how this can be so poor when it should just be a minimal v0 implementation of either a RAG or a large context window.

Conclusion

You can skip this for now; there's nothing much to see. But if you're looking for design inspiration, their designs and UI/UX are impeccable to look at, if not impressive to use.

I do app reviews for fun and would never put them behind a paywall. If this helped you in anyway, please consider buying me a coffee here:

Feed my software & bakery addiction @  

June 19, 2024

I created a script to use AI to add logs and notes to habitify habits through todoist.

import { blob } from "https://esm.town/v/std/blob";import process from "node:process";import { TodoistApi } from "npm:@doist/todoist-api-typescript";import Instructor from "npm:@instructor-ai/instructor";import Jimp from "npm:jimp";import OpenAI from "npm:openai";import { z } from "npm:zod";const force_update_database = false; // set force update database to true// if you added new items to habitify after running this script// for the first time.// INST: Add these keys in val env variables// NOTE: the image notes don't work at the moment, and if you add a image note,// the task is skippedconst TODOIST_API_KEY = process.env.TODOIST_API_KEY;const HABITIFY_API_KEY = process.env.HABITIFY_API_KEY;const OPENAI_API_KEY = process.env.OPENAI_API_KEY;const DEF_TIMEZONE = "America/Los_Angeles"; // Get your timezone from here: https://stackoverflow.com/a/54500197var add_to_habitify_todoist_project_id = "XXXX"; // INST: Project ID goes herevar todoist_dict_mapping = { // Note: You can choose to leave this dict empty and it will still work  "Image Notes": { // This is for a section that is image notes only for any habit without adding a log    "todoist-section-id": "XXXX", // INST: section id for just image notes section goes here    "habitify-area-name": "undefined", // keep this value as undefined    specialPrompt: "only_image", // keep the value as only_image  },  "Text Notes": { // This is for a section that is text notes only for any habit without adding a log    "habitify-area-name": "undefined", // keep this value as undefined    "todoist-section-id": "XXXX", // INST: section id for just image notes section goes here    specialPrompt: "only_text", // keep the value as only_text  },  Cats: {    "todoist-section-id": "XXXX", // section id for the area goes here    "habitify-area-name": "Cats", // INST: habitify area name goes here. Match exactly    specialPrompt: "", // keep the value as empty text  },  Food: { // You do not need to have a section that tracks calories, it is just a bonus    "todoist-section-id": "XXXX", // section id for the area goes here    "habitify-area-name": "Health", // INST: habitify area name goes here. Match exactly    specialPrompt: "track_calories", // keep the value as track_calories if you want to    // estimate calories based on entry. the estimation is pretty wild and can vary by +/- 500 kCal at least  },  // ADD any other sections as areas here to help the model choose amongst less habits.  // Keep specialPrompt value as empty strng};const todoistapi = new TodoistApi(TODOIST_API_KEY);const oai = new OpenAI({  apiKey: OPENAI_API_KEY ?? undefined,});const client = Instructor({  client: oai,  mode: "TOOLS",});function getHabitifyAreaName(section_id) {  if (!section_id) {    return ["undefined", ""];  }  for (var key in todoist_dict_mapping) {    if (todoist_dict_mapping[key]["todoist-section-id"] === section_id) {      return [        todoist_dict_mapping[key]["habitify-area-name"],        todoist_dict_mapping[key]["specialPrompt"].toLowerCase(),      ];    }  }  return ["undefined", ""];}function convertDateObject(due) {  function convertToISOWithOffset(datetimeStr, timezoneStr) {    const date = new Date(datetimeStr);    const [, sign, hours, minutes] = timezoneStr.match(      /GMT ([+-])(\d{1,2}):(\d{2})/,    );    date.setUTCMinutes(      date.getUTCMinutes()        + (parseInt(hours) * 60 + parseInt(minutes)) * (sign === "+" ? 1 : -1),    );    return (      date.toISOString().split(".")[0]      + `${sign}${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`    );  }  const formatDate = (date, datetime, timezone) => {    let isoString = datetime ? datetime : date;    if (timezone && timezone.startsWith("GMT") && timezone.length > 3) {      return convertToISOWithOffset(datetime, timezone);    } else {      return isoString;    }  };  const date_as_string = due    ? formatDate(due.date, due.datetime, due.timezone)    : new Date().toISOString();  return date_as_string;}async function getCommentsForTask(taskId) {  try {    const comments = await todoistapi.getComments({ taskId });    return comments;  } catch (error) {    console.error(`Error fetching comments for task ${taskId}:`, error);    return [];  }}async function resizeAndConvertImage(imageBuffer) {  try {    const image = await Jimp.read(imageBuffer);    const resizedImage = await image.resize(800, 800, Jimp.RESIZE_BILINEAR);    const jpegBuffer = await resizedImage.quality(80).getBufferAsync(Jimp.MIME_JPEG);    if (jpegBuffer.length >= 2000000) {      console.error("Error: Resized image size should be smaller than 2MB");      return null;    }    return jpegBuffer;  } catch (error) {    console.error("Error processing image:", error);    return null;  }}async function downloadImage(url) {  try {    const response = await fetch(url, {      headers: {        Authorization: `Bearer ${TODOIST_API_KEY}`,      },    });    if (!response.ok) {      throw new Error(`HTTP error! status: ${response.status}`);    }    const imageBuffer = await response.buffer();    const resizedImageBuffer = await resizeAndConvertImage(imageBuffer);    return resizedImageBuffer;  } catch (error) {    console.error("Error downloading or processing image:", error);    return null;  }}async function createZodSchema(habitKeys, specialPrompt) {  const transformDate = (date) => {    if (!date.includes("T")) {      date = date + "T23:00:00"; // if no time is included, consider it completed at 11pm    }    const parsedDate = Date.parse(date);    const dateObj = isNaN(parsedDate) ? new Date() : new Date(parsedDate);    const pad = (num) => String(num).padStart(2, "0");    const year = dateObj.getFullYear();    const month = pad(dateObj.getMonth() + 1);    const day = pad(dateObj.getDate());    const hours = pad(dateObj.getHours());    const minutes = pad(dateObj.getMinutes());    const seconds = pad(dateObj.getSeconds());    // console.log(date);    let offsetSign, offsetHours, offsetMinutes;    const [datePart, timePart] = date.split("T");    if (      date.endsWith("Z")      || !timePart      || (timePart && !timePart.includes("+") && !timePart.includes("-"))    ) {      // Create a DateTimeFormat object for Pacific Time      const pacificTime = new Intl.DateTimeFormat("en-US", {        timeZone: DEF_TIMEZONE,        hour: "2-digit",        minute: "2-digit",        second: "2-digit",        hour12: false,      });      // Format the date to get the correct Pacific Time offset      const pacificParts = pacificTime.formatToParts(dateObj);      const pacificHours = parseInt(        pacificParts.find((p) => p.type === "hour").value,        10,      );      const pacificMinutes = parseInt(        pacificParts.find((p) => p.type === "minute").value,        10,      );      // Calculate the offset in minutes between the local time and UTC      let offset = (pacificHours - dateObj.getUTCHours()) * 60        + (pacificMinutes - dateObj.getUTCMinutes());      // Adjust for day boundary crossing      if (offset > 720) {        offset -= 1440; // Subtract a full day in minutes      } else if (offset < -720) {        offset += 1440; // Add a full day in minutes      }      const absOffset = Math.abs(offset);      offsetHours = pad(Math.floor(absOffset / 60));      offsetMinutes = pad(absOffset % 60);      offsetSign = offset <= 0 ? "-" : "+";    } else {      const offset = dateObj.getTimezoneOffset();      const absOffset = Math.abs(offset);      offsetHours = pad(Math.floor(absOffset / 60));      offsetMinutes = pad(absOffset % 60);      offsetSign = offset <= 0 ? "+" : "-";    }    return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}${offsetSign}${offsetHours}:${offsetMinutes}`;  };  let habitSchema;  if (specialPrompt === "only_text" || specialPrompt === "only_image") {    habitSchema = z.object({      name: z.enum(habitKeys),      note: z.string().default(""),      date: z.string().transform(transformDate),    });  } else if (    specialPrompt    && (specialPrompt.includes("calorie") || specialPrompt.includes("food intake"))  ) {    habitSchema = z.object({      unit: z.string().default("kCal"),      name: z.enum(habitKeys),      value: z.number().default(1),      note: z.string().default(""),      date: z.string().transform(transformDate),    });  } else {    habitSchema = z.object({      unit: z.string().default("rep"),      name: z.enum(habitKeys),      value: z.number().default(1),      note: z.string().default(""),      date: z.string().transform(transformDate),    });  }  // Define the schema for the list of habits  const habitsListSchema = z.array(habitSchema);  return z.object({ habits: habitsListSchema });}function createPrompt(habitKeys_str, specialPrompt) {  let prompt =    "You are processing content into a list of habit objects. Based on the options of habits, infer appropriate values for the fields:\n";  prompt += "The habits you can choose from are: " + habitKeys_str + ".\n";  if (specialPrompt === "only_image" || specialPrompt === "only_text") {    prompt +=      "You are extracting the name of the habit, the date of the habit (if mentioned, or otherwise an empty string), and any note if it exists about a habit (if mentioned, or otherwise an empty string). Remember, a note is associated with only 1 habit and will say 'note that' or something like that.\n";  } else if (    specialPrompt    && (specialPrompt.includes("calorie") || specialPrompt.includes("food intake"))  ) {    prompt +=      "You are tracking habits related to calorie or food intake. You are extracting the name of the habit which will be something like 'track calories' or 'track food intake'. As the next step, estimate the calories for the food mentioned in the text as and use that as the value, the unit will be kCal, the date of the habit (if mentioned, or otherwise an empty string), and the food mentioned in the text will be the note for the habit along with the estimated calories in paranthesis.\n";  } else {    prompt +=      "You are choosing the unit (like min or kg), the default is rep. You are choosing the value of the habit, the default is 1. You are getting the date of the habit, if mentioned, or otherwise an empty string. You are extracting any note if it exists about a habit, if mentioned, or otherwise an empty string. Remember, a note is associated with only 1 habit and will say 'note that' or something like that.\n";  }  prompt += "Infer and in step 1 ";  prompt = prompt    + (specialPrompt        && (specialPrompt.includes("calorie") || specialPrompt.includes("food intake"))      ? "a list with a SINGLE habit object that matches the calorie or food intake option from valid options"      : "create a list of all the habits extracted from text that match the options")    + "; and then as step 2 assign values to each of these habits' properties based on the provided content and the aforementioned context.";  return prompt;}async function process_text(habits_list, text, specialPrompt) {  // console.log(habits_list);  const habitKeys = Object.keys(habits_list);  const zod_schema = await createZodSchema(habitKeys, specialPrompt);  const sys_prompt = createPrompt(habitKeys.join(), specialPrompt);  const processed_message = await client.chat.completions.create({    messages: [      { role: "system", content: sys_prompt },      { role: "user", content: text },    ],    model: "gpt-4o",    response_model: {      schema: zod_schema,      name: "habit and value extraction",    },    max_retries: 3,  });  return processed_message;}async function addLog(habit_id, unit_type, value, target_date) {  const url = `https://api.habitify.me/logs/${habit_id}`;  const headers = {    Authorization: HABITIFY_API_KEY,    "Content-Type": "application/json",  };  const body = {    unit_type: unit_type,    value: value,    target_date: target_date,  };  try {    const response = await fetch(url, {      method: "POST",      headers: headers,      body: JSON.stringify(body),    });    if (!response.ok) {      throw new Error(`HTTP error! status: ${response.status}`);    }    const jsonResponse = await response.json();    return jsonResponse;  } catch (error) {    console.error("Error:", error);    process.exit(1);  }}async function addTextNote(habit_id, created, content) {  const url = `https://api.habitify.me/notes/${habit_id}`;  const headers = {    Authorization: HABITIFY_API_KEY,    "Content-Type": "application/json",  };  const body = {    created: created,    content: content,  };  try {    const response = await fetch(url, {      method: "POST",      headers: headers,      body: JSON.stringify(body),    });    if (!response.ok) {      throw new Error(`HTTP error! status: ${response.status}`);    }    const jsonResponse = await response.json();    return jsonResponse;  } catch (error) {    console.error("Error:", error);    process.exit(1);  }}async function addImageNote(habit_id, created_at, imageBuffer) {  const url = `https://api.habitify.me/notes/addImageNote/${habit_id}?created_at=${encodeURIComponent(created_at)}`;  const headers = {    Authorization: HABITIFY_API_KEY,    "Content-Type": "image/jpeg",  };  try {    const response = await fetch(url, {      method: "POST",      headers: headers,      body: imageBuffer,    });    if (!response.ok) {      console.log(response);      throw new Error(`HTTP error! status: ${response.status}`);    }    const jsonResponse = await response.json();    return jsonResponse;  } catch (error) {    console.error("Error:", error);    process.exit(1);  }}async function get_habitify_database(){  const habits_list = await blob.getJSON("habitify_database");  if (!habits_list || force_update_database)  {    const HABITIFY_API_KEY = process.env.HABITIFY_API_KEY;    const url = "https://api.habitify.me/habits";    const headers = {      Authorization: HABITIFY_API_KEY,      "Content-Type": "application/json",    };    try {      const response = await fetch(url, { method: "GET", headers: headers });      if (!response.ok) {        throw new Error(`HTTP error! status: ${response.status}`);      }      const jsonResponse = await response.json();      // Filter habits      const filteredHabits = jsonResponse.data.filter(        (habit) => !habit.is_archived && habit.log_method === "manual",      );      // Group habits by area      const habitsByArea = {};      filteredHabits.forEach((habit) => {        const area = habit.area && Object.keys(habit.area).length > 0          ? habit.area.name          : "undefined";        if (!habitsByArea[area]) {          habitsByArea[area] = {};        }        habitsByArea[area][habit.name] = {          id: habit.id,          name: habit.name,          unit_type: habit.goal.unit_type,        };        if (area !== "undefined") {          if (!habitsByArea["undefined"]) {            habitsByArea["undefined"] = {};          }          habitsByArea["undefined"][habit.name] = {            id: habit.id,            name: habit.name,            unit_type: habit.goal.unit_type,          };        }      });      // Log the result JSON      console.log(JSON.stringify(habitsByArea, null, 2));      await blob.setJSON("habitify_database", habitsByArea);      return habitsByArea;    } catch (error) {      console.error("Error:", error);      process.exit(1);    }  }  else  {    return habits_list;  }}export default async function(interval: Interval) {  const habits_list = await get_habitify_database();  var tasks = await todoistapi.getTasks({    projectId: add_to_habitify_todoist_project_id,  });  for (const task of tasks) {    console.log(task);    task.imageComments = null;    if (task.commentCount > 0) {      const imageComments = [];      const todoist_comments = await getCommentsForTask(task.id);      for (const comment of todoist_comments) {        // console.log(comment);        if (comment.attachment && comment.attachment.resourceType === "image") {          const imageBuffer = await downloadImage(comment.attachment.image);          if (imageBuffer) {            imageComments.push(imageBuffer);          }        }      }      task.imageComments = imageComments ? imageComments : null;    }    /// START---REMOVE ONCE UPLOAD IS FIXED    if (task.imageComments) {      continue;    }    /// END---REMOVE ONCE UPLOAD IS FIXED    const [habitifyAreaName, specialPrompt] = getHabitifyAreaName(      task.sectionId,    );    const processed_task = await process_text(      habits_list[habitifyAreaName],      task.content        + " dated "        + convertDateObject(task.due)        + "\n"        + task.description,      specialPrompt,    );    const habits = processed_task.habits;    console.log(habits);    for (const habit of habits) {      if (specialPrompt != "only_image" || specialPrompt != "only_text") {        await addLog(          habits_list[habitifyAreaName][habit.name].id,          habit.unit,          habit.value,          habit.date,        );      }      if (habit.note) {        await addTextNote(habits_list[habitifyAreaName][habit.name].id, habit.date, habit.note);      }      if (task.imageComments) {        for (const imageComment of task.imageComments) {          await addImageNote(            habits_list[habitifyAreaName][habit.name].id,            habit.date,            imageComment,          );        }      }    }    await todoistapi.deleteTask(task.id);  }}

Note: The image notes option doesn’t work at the moment because the habitify API documentation isn’t clear about the kind of object type it expects and no matter what I tried it refused to work.

Unlike the other times I have done these scripts, let’s do a walkthrough of this script, in case you want to write one of your own. I’ll walk you through my thought process, my desired coverage, the issues I ran into, and the resultant code.

Imports and constants

import { blob } from "https://esm.town/v/std/blob";import process from "node:process";import { TodoistApi } from "npm:@doist/todoist-api-typescript";import Instructor from "npm:@instructor-ai/instructor";import Jimp from "npm:jimp";import OpenAI from "npm:openai";import { z } from "npm:zod";const force_update_database = false; // set force update database to true// if you added new items to habitify after running this script// for the first time.const TODOIST_API_KEY = process.env.TODOIST_API_KEY;const HABITIFY_API_KEY = process.env.HABITIFY_API_KEY;const OPENAI_API_KEY = process.env.OPENAI_API_KEY;const DEF_TIMEZONE = "America/Los_Angeles"; // Get your timezone from here: https://stackoverflow.com/a/54500197

This script integrates multiple APIs and libraries to manage tasks and data across different platforms. Here's a breakdown of its components and functionalities:

Define todoist information

var add_to_habitify_todoist_project_id = "XXXX"; // INST: Project ID goes herevar todoist_dict_mapping = { // Note: You can choose to leave this dict empty and it will still work  "Image Notes": { // This is for a section that is image notes only for any habit without adding a log    "todoist-section-id": "XXXX", // INST: section id for just image notes section goes here    "habitify-area-name": "undefined", // keep this value as undefined    specialPrompt: "only_image", // keep the value as only_image  },  "Text Notes": { // This is for a section that is text notes only for any habit without adding a log    "habitify-area-name": "undefined", // keep this value as undefined    "todoist-section-id": "XXXX", // INST: section id for just image notes section goes here    specialPrompt: "only_text", // keep the value as only_text  },  Cats: {    "todoist-section-id": "XXXX", // section id for the area goes here    "habitify-area-name": "Cats", // INST: habitify area name goes here. Match exactly    specialPrompt: "", // keep the value as empty text  },  Food: { // You do not need to have a section that tracks calories, it is just a bonus    "todoist-section-id": "XXXX", // section id for the area goes here    "habitify-area-name": "Health", // INST: habitify area name goes here. Match exactly    specialPrompt: "track_calories", // keep the value as track_calories if you want to    // estimate calories based on entry. the estimation is pretty wild and can vary by +/- 500 kCal at least  },  // ADD any other sections as areas here to help the model choose amongst less habits.  // Keep specialPrompt value as empty strng};

Instantiate clients

const todoistapi = new TodoistApi(TODOIST_API_KEY);const oai = new OpenAI({  apiKey: OPENAI_API_KEY ?? undefined,});const client = Instructor({  client: oai,  mode: "TOOLS",});

This code snippet initializes clients for interacting with the Todoist API, OpenAI, and an AI-driven Instructor tool. Here's a breakdown of each line:

Helper functions

function getHabitifyAreaName(section_id) {  if (!section_id) {    return ["undefined", ""];  }  for (var key in todoist_dict_mapping) {    if (todoist_dict_mapping[key]["todoist-section-id"] === section_id) {      return [        todoist_dict_mapping[key]["habitify-area-name"],        todoist_dict_mapping[key]["specialPrompt"].toLowerCase(),      ];    }  }  return ["undefined", ""];}function convertDateObject(due) {  function convertToISOWithOffset(datetimeStr, timezoneStr) {    const date = new Date(datetimeStr);    const [, sign, hours, minutes] = timezoneStr.match(      /GMT ([+-])(\d{1,2}):(\d{2})/,    );    date.setUTCMinutes(      date.getUTCMinutes()        + (parseInt(hours) * 60 + parseInt(minutes)) * (sign === "+" ? 1 : -1),    );    return (      date.toISOString().split(".")[0]      + `${sign}${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`    );  }  const formatDate = (date, datetime, timezone) => {    let isoString = datetime ? datetime : date;    if (timezone && timezone.startsWith("GMT") && timezone.length > 3) {      return convertToISOWithOffset(datetime, timezone);    } else {      return isoString;    }  };  const date_as_string = due    ? formatDate(due.date, due.datetime, due.timezone)    : new Date().toISOString();  return date_as_string;}async function resizeAndConvertImage(imageBuffer) {  try {    const image = await Jimp.read(imageBuffer);    const resizedImage = await image.resize(800, 800, Jimp.RESIZE_BILINEAR);    const jpegBuffer = await resizedImage.quality(80).getBufferAsync(Jimp.MIME_JPEG);    if (jpegBuffer.length >= 2000000) {      console.error("Error: Resized image size should be smaller than 2MB");      return null;    }    return jpegBuffer;  } catch (error) {    console.error("Error processing image:", error);    return null;  }}async function downloadImage(url) {  try {    const response = await fetch(url, {      headers: {        Authorization: `Bearer ${TODOIST_API_KEY}`,      },    });    if (!response.ok) {      throw new Error(`HTTP error! status: ${response.status}`);    }    const imageBuffer = await response.buffer();    const resizedImageBuffer = await resizeAndConvertImage(imageBuffer);    return resizedImageBuffer;  } catch (error) {    console.error("Error downloading or processing image:", error);    return null;  }}

This code snippet defines several helper functions to facilitate operations related to task management and image processing:

Get image comments information from Todoist

async function getCommentsForTask(taskId) {  try {    const comments = await todoistapi.getComments({ taskId });    return comments;  } catch (error) {    console.error(`Error fetching comments for task ${taskId}:`, error);    return [];  }}

The getCommentsForTask function is designed to retrieve comments associated with a specific task in Todoist. Here’s a concise breakdown:

• Function Purpose: Fetches comments for a given taskId from Todoist.
• Parameters: Accepts taskId as an input, which is the identifier for the Todoist task.
• Process:
  • The function makes an asynchronous call to todoistapi.getComments, passing an object with taskId.
  • If successful, it returns the comments array.
  • If an error occurs during the fetch operation, it logs the error and returns an empty array to ensure the function handles failures gracefully.
• Error Handling: Errors are caught in the catch block, logged with a descriptive message including the taskId, and the function returns an empty array as a fallback.

This function is essential for integrating comment data from Todoist into other parts of the application, allowing for enhanced task management and user interaction.

Create the zod schema

async function createZodSchema(habitKeys, specialPrompt) {  const transformDate = (date) => {    if (!date.includes("T")) {      date = date + "T23:00:00"; // if no time is included, consider it completed at 11pm    }    const parsedDate = Date.parse(date);    const dateObj = isNaN(parsedDate) ? new Date() : new Date(parsedDate);    const pad = (num) => String(num).padStart(2, "0");    const year = dateObj.getFullYear();    const month = pad(dateObj.getMonth() + 1);    const day = pad(dateObj.getDate());    const hours = pad(dateObj.getHours());    const minutes = pad(dateObj.getMinutes());    const seconds = pad(dateObj.getSeconds());    // console.log(date);    let offsetSign, offsetHours, offsetMinutes;    const [datePart, timePart] = date.split("T");    if (      date.endsWith("Z")      || !timePart      || (timePart && !timePart.includes("+") && !timePart.includes("-"))    ) {      // Create a DateTimeFormat object for Pacific Time      const pacificTime = new Intl.DateTimeFormat("en-US", {        timeZone: DEF_TIMEZONE,        hour: "2-digit",        minute: "2-digit",        second: "2-digit",        hour12: false,      });      // Format the date to get the correct Pacific Time offset      const pacificParts = pacificTime.formatToParts(dateObj);      const pacificHours = parseInt(        pacificParts.find((p) => p.type === "hour").value,        10,      );      const pacificMinutes = parseInt(        pacificParts.find((p) => p.type === "minute").value,        10,      );      // Calculate the offset in minutes between the local time and UTC      let offset = (pacificHours - dateObj.getUTCHours()) * 60        + (pacificMinutes - dateObj.getUTCMinutes());      // Adjust for day boundary crossing      if (offset > 720) {        offset -= 1440; // Subtract a full day in minutes      } else if (offset < -720) {        offset += 1440; // Add a full day in minutes      }      const absOffset = Math.abs(offset);      offsetHours = pad(Math.floor(absOffset / 60));      offsetMinutes = pad(absOffset % 60);      offsetSign = offset <= 0 ? "-" : "+";    } else {      const offset = dateObj.getTimezoneOffset();      const absOffset = Math.abs(offset);      offsetHours = pad(Math.floor(absOffset / 60));      offsetMinutes = pad(absOffset % 60);      offsetSign = offset <= 0 ? "+" : "-";    }    return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}${offsetSign}${offsetHours}:${offsetMinutes}`;  };  let habitSchema;  if (specialPrompt === "only_text" || specialPrompt === "only_image") {    habitSchema = z.object({      name: z.enum(habitKeys),      note: z.string().default(""),      date: z.string().transform(transformDate),    });  } else if (    specialPrompt    && (specialPrompt.includes("calorie") || specialPrompt.includes("food intake"))  ) {    habitSchema = z.object({      unit: z.string().default("kCal"),      name: z.enum(habitKeys),      value: z.number().default(1),      note: z.string().default(""),      date: z.string().transform(transformDate),    });  } else {    habitSchema = z.object({      unit: z.string().default("rep"),      name: z.enum(habitKeys),      value: z.number().default(1),      note: z.string().default(""),      date: z.string().transform(transformDate),    });  }  // Define the schema for the list of habits  const habitsListSchema = z.array(habitSchema);  return z.object({ habits: habitsListSchema });}

The createZodSchema function dynamically constructs a Zod schema based on provided habit keys and a special prompt. This schema is used to validate and parse data related to habits. Here’s a detailed explanation:

This function is crucial for ensuring that habit data conforms to expected formats and values, facilitating reliable data processing and storage.

Get habitify habits detail

async function get_habitify_database(){  const habits_list = await blob.getJSON("habitify_database");  if (!habits_list || force_update_database)  {    const HABITIFY_API_KEY = process.env.HABITIFY_API_KEY;    const url = "https://api.habitify.me/habits";    const headers = {      Authorization: HABITIFY_API_KEY,      "Content-Type": "application/json",    };    try {      const response = await fetch(url, { method: "GET", headers: headers });      if (!response.ok) {        throw new Error(`HTTP error! status: ${response.status}`);      }      const jsonResponse = await response.json();      // Filter habits      const filteredHabits = jsonResponse.data.filter(        (habit) => !habit.is_archived && habit.log_method === "manual",      );      // Group habits by area      const habitsByArea = {};      filteredHabits.forEach((habit) => {        const area = habit.area && Object.keys(habit.area).length > 0          ? habit.area.name          : "undefined";        if (!habitsByArea[area]) {          habitsByArea[area] = {};        }        habitsByArea[area][habit.name] = {          id: habit.id,          name: habit.name,          unit_type: habit.goal.unit_type,        };        if (area !== "undefined") {          if (!habitsByArea["undefined"]) {            habitsByArea["undefined"] = {};          }          habitsByArea["undefined"][habit.name] = {            id: habit.id,            name: habit.name,            unit_type: habit.goal.unit_type,          };        }      });      // Log the result JSON      console.log(JSON.stringify(habitsByArea, null, 2));      await blob.setJSON("habitify_database", habitsByArea);      return habitsByArea;    } catch (error) {      console.error("Error:", error);      process.exit(1);    }  }  else  {    return habits_list;  }}

The get_habitify_database function retrieves and processes habit data from Habitify, caching it locally for efficiency. Here’s a concise breakdown:

Use LLMs to process text into matched habits

function createPrompt(habitKeys_str, specialPrompt) {  let prompt =    "You are processing content into a list of habit objects. Based on the options of habits, infer appropriate values for the fields:\n";  prompt += "The habits you can choose from are: " + habitKeys_str + ".\n";  if (specialPrompt === "only_image" || specialPrompt === "only_text") {    prompt +=      "You are extracting the name of the habit, the date of the habit (if mentioned, or otherwise an empty string), and any note if it exists about a habit (if mentioned, or otherwise an empty string). Remember, a note is associated with only 1 habit and will say 'note that' or something like that.\n";  } else if (    specialPrompt    && (specialPrompt.includes("calorie") || specialPrompt.includes("food intake"))  ) {    prompt +=      "You are tracking habits related to calorie or food intake. You are extracting the name of the habit which will be something like 'track calories' or 'track food intake'. As the next step, estimate the calories for the food mentioned in the text as and use that as the value, the unit will be kCal, the date of the habit (if mentioned, or otherwise an empty string), and the food mentioned in the text will be the note for the habit along with the estimated calories in paranthesis.\n";  } else {    prompt +=      "You are choosing the unit (like min or kg), the default is rep. You are choosing the value of the habit, the default is 1. You are getting the date of the habit, if mentioned, or otherwise an empty string. You are extracting any note if it exists about a habit, if mentioned, or otherwise an empty string. Remember, a note is associated with only 1 habit and will say 'note that' or something like that.\n";  }  prompt += "Infer and in step 1 ";  prompt = prompt    + (specialPrompt        && (specialPrompt.includes("calorie") || specialPrompt.includes("food intake"))      ? "a list with a SINGLE habit object that matches the calorie or food intake option from valid options"      : "create a list of all the habits extracted from text that match the options")    + "; and then as step 2 assign values to each of these habits' properties based on the provided content and the aforementioned context.";  return prompt;}async function process_text(habits_list, text, specialPrompt) {  // console.log(habits_list);  const habitKeys = Object.keys(habits_list);  const zod_schema = await createZodSchema(habitKeys, specialPrompt);  const sys_prompt = createPrompt(habitKeys.join(), specialPrompt);  const processed_message = await client.chat.completions.create({    messages: [      { role: "system", content: sys_prompt },      { role: "user", content: text },    ],    model: "gpt-4o",    response_model: {      schema: zod_schema,      name: "habit and value extraction",    },    max_retries: 3,  });  return processed_message;}

This code snippet consists of two functions, createPrompt and process_text, which uses large language models (LLMs) to process text and extract habit-related information based on specified criteria.

Add logs, image notes or text notes

async function addLog(habit_id, unit_type, value, target_date) {  const url = `https://api.habitify.me/logs/${habit_id}`;  const headers = {    Authorization: HABITIFY_API_KEY,    "Content-Type": "application/json",  };  const body = {    unit_type: unit_type,    value: value,    target_date: target_date,  };  try {    const response = await fetch(url, {      method: "POST",      headers: headers,      body: JSON.stringify(body),    });    if (!response.ok) {      throw new Error(`HTTP error! status: ${response.status}`);    }    const jsonResponse = await response.json();    return jsonResponse;  } catch (error) {    console.error("Error:", error);    process.exit(1);  }}async function addTextNote(habit_id, created, content) {  const url = `https://api.habitify.me/notes/${habit_id}`;  const headers = {    Authorization: HABITIFY_API_KEY,    "Content-Type": "application/json",  };  const body = {    created: created,    content: content,  };  try {    const response = await fetch(url, {      method: "POST",      headers: headers,      body: JSON.stringify(body),    });    if (!response.ok) {      throw new Error(`HTTP error! status: ${response.status}`);    }    const jsonResponse = await response.json();    return jsonResponse;  } catch (error) {    console.error("Error:", error);    process.exit(1);  }}async function addImageNote(habit_id, created_at, imageBuffer) {  const url = `https://api.habitify.me/notes/addImageNote/${habit_id}?created_at=${encodeURIComponent(created_at)}`;  const headers = {    Authorization: HABITIFY_API_KEY,    "Content-Type": "image/jpeg",  };  try {    const response = await fetch(url, {      method: "POST",      headers: headers,      body: imageBuffer,    });    if (!response.ok) {      console.log(response);      throw new Error(`HTTP error! status: ${response.status}`);    }    const jsonResponse = await response.json();    return jsonResponse;  } catch (error) {    console.error("Error:", error);    process.exit(1);  }}

This code snippet defines three asynchronous functions (addLog, addTextNote, and addImageNote) that interact with the Habitify API to add different types of entries: logs, text notes, and image notes. Here's a detailed breakdown of each function:

Each function is designed to handle specific types of data entries in Habitify, ensuring that logs, text notes, and image notes are correctly added to the system with robust error handling and response management.

Main function

export default async function(interval: Interval) {  const habits_list = await get_habitify_database();  var tasks = await todoistapi.getTasks({    projectId: add_to_habitify_todoist_project_id,  });  for (const task of tasks) {    console.log(task);    task.imageComments = null;    if (task.commentCount > 0) {      const imageComments = [];      const todoist_comments = await getCommentsForTask(task.id);      for (const comment of todoist_comments) {        // console.log(comment);        if (comment.attachment && comment.attachment.resourceType === "image") {          const imageBuffer = await downloadImage(comment.attachment.image);          if (imageBuffer) {            imageComments.push(imageBuffer);          }        }      }      task.imageComments = imageComments ? imageComments : null;    }    /// START---REMOVE ONCE UPLOAD IS FIXED    if (task.imageComments) {      continue;    }    /// END---REMOVE ONCE UPLOAD IS FIXED    const [habitifyAreaName, specialPrompt] = getHabitifyAreaName(      task.sectionId,    );    const processed_task = await process_text(      habits_list[habitifyAreaName],      task.content        + " dated "        + convertDateObject(task.due)        + "\n"        + task.description,      specialPrompt,    );    const habits = processed_task.habits;    console.log(habits);    for (const habit of habits) {      if (specialPrompt != "only_image" || specialPrompt != "only_text") {        await addLog(          habits_list[habitifyAreaName][habit.name].id,          habit.unit,          habit.value,          habit.date,        );      }      if (habit.note) {        await addTextNote(habits_list[habitifyAreaName][habit.name].id, habit.date, habit.note);      }      if (task.imageComments) {        for (const imageComment of task.imageComments) {          await addImageNote(            habits_list[habitifyAreaName][habit.name].id,            habit.date,            imageComment,          );        }      }    }    await todoistapi.deleteTask(task.id);  }}

The main function brings together the integration between Todoist and Habitify, processing tasks from Todoist and logging corresponding activities in Habitify based on various criteria. Here's a concise breakdown of its operations:

If you found this useful, please consider buying me a coffee here:

Feed my software & bakery addiction @  

June 18, 2024

MaxFocus is a new-ish extension focussing on creating link previews on any link you hover on. It works on apps that do not allow for iframe embeds (like Notion), and hence is different than the majority extensions out there. You really do not need the PRO option with this one, unless you really want AI summaries of the page, but I can usually skim the page faster than the AI can generate a good summary of. The looks and feel are customizable and you can make it look just like Arc, which is a feature that I always missed when I switched back to Chrome.

The features setting is a bit messy, but this quick guide should probably help.

And this is how the popup looks like

Something you might find frustrating is, you cannot access right click menu inside this popup. When I open articles like these, I often want to save them to reader. But because clicking on the top link opens it in a new tab, and I cannot access right click to use the Save to Reader option, I often end up needing to copy link address and then saving it in Reader. I wish the share option copied or provided MacOS or custom share menu than the QR code it has at the moment.

Sidenote Jun 17, 2024: Chrome is testing native Link Previews too, and it would be fun to see what they entail

This is what the native Chrome link previews look like. They are basically a headless window, always on bottom right, if you click on them you open the site on a new tab. Not a huge fan at the moment.

June 15, 2024

So, like everyone else, I have too wandered down the roads of using doodle, when2meet, zcal and all other 800 alternatives to the problem. Until 5 months back that is, when I found, schej.it; and trust me, it is the best app ever (in my opinion) for finding a time to meet. Allows you to overlay your google calendar, restrict participant visibility, send google calendar invite based on the decided time, everything you can think of.

June 15, 2024

Apparently, friction logs are a thing. And it is embarrassing, especially as someone who tests a lot of apps, that I did not know of this term.

So, ah, well, I do friction logs. And honestly, I do them pretty well. So well, that I also do friction logs as a service, look at Scratches and Scribbles – Friction Logs as a Service.

General Purpose Apps

My Month with Superlist - The Good, The Bad, and The Wishlist: Superlist is the new contender on the block that aims to merge Todoist+Notion, or create a linear for personal projects.

The Horse Browser: A new browser that allows you to delve into areas organizing them into a tree like structure as you browse normally through links.

Texts vs. Beeper: The (App)solute Winner Is?: Texts (and) Beeper, the only two “all-in-one” messaging apps out there.

My Annoyances With Notion: I use Notion so much, that my appreciation and complaints about Notion are spread out through out this website. But this is a dump of my tiny “annoyances” with Notion.

Using val.town for the first time: Val.town has now been my go to cloud function platform of choice, for all those functions that take mere milliseconds to run, but you want them to run often.

Link Previews in Chrome using MaxFocus: This isn’t as much of a friction log, as it is a tips and explainer once I did figure this extension out. The extension replicates everything I loved about Arc’s link previews.

I used Leaflet: A new document writing app, made for ephemeral documents that supports nesting, formatting and does not have visible markdown.

I used Monarch Launcher: A kind of new kid on the block as a replacement for a Raycast Launcher which is developed by a single person and aims to do things much more intuitively I guess.

AI Apps

Impel AI: Expect to be Unimpressed Jun 19, 2024: Nothing about this app is a good deal.

Voicenotes: Hitting Half of the Right Notes: An audio notes + retrieval app, which is pretty good for what it is, but still not all the way there. The UX and design feels and works really well though, and the AI part is thoughtfully integrated, making it one of the better apps out there

Down the Rabbit Hole

Apparently, given friction logs are a thing, you should check out these too:

April 24, 2024

I have been wanting to unlike all pages on Facebook that I liked as a teen in 2010. Because I stopped using Facebook pretty early (around 2014) — I thought unliking all of them made perfect sense. I did find some extensions to do so, that are now defunct; and 2 console tricks, that no longer work because Facebook keeps changing it layouts.

That is, until I landed on this comment on a gist.

Long story short; log into Facebook, open this link, install TamperMonkey if you don’t have it, paste and save the code below as user script, refresh that page and let it run. This uses the activity log to unlike pages, so when you go to your likes; there might still be brands that you ned to go to pages of and unlike and unfollow manually. The reload built into the script is required because after a few iterations, Facebook stops loading your earlier activity unless you refresh the page.

// ==UserScript==// @name         Facebook Auto Unlike// @namespace    http://tampermonkey.net/// @version      2024-04-24// @description  Automatically unlikes posts on Facebook// @author       You// @match        https://www.facebook.com/usrID/allactivity?activity_history=false&category_key=LIKEDINTERESTS&manage_mode=false&should_load_landing_page=false// @icon         https://www.google.com/s2/favicons?sz=64&domain=facebook.com// @grant        none// ==/UserScript==(function() {    'use strict';    function runAutomation() {        setTimeout(() => {            const options = [].slice.call(document.querySelectorAll('[aria-label="Action options"]'));            options.forEach(option => option.click());            setTimeout(() => {                const menuItems = [].slice.call(document.querySelectorAll('[role="menuitem"]'));                const unlikeItems = menuItems.filter(item => item.innerText.includes('Unlike'));                unlikeItems.forEach(item => item.click());                setTimeout(() => {                    location.reload();                }, 3000); // 10 seconds after clicking unlike            }, 3000); // 5 seconds after clicking action options        }, 3000); // Start 5 seconds after page load    }    // Run the automation function when the page loads    window.addEventListener('load', runAutomation);})();

April 9, 2024

Why?

This is a two-fold problem on my end:

One of the things I am most excited by in scope of LLMs is structured data extraction from curated unstructured data, while still allowing for manual pushes in the right direction. And this gives me a good, yet, private ground for RAG, memory and context testing of LLMs on my end, for purely research purposes.

Ideally something like this would use generative UI like the vercel AI sdk, but, I am no shape or form equipped enough to be good at that, so that isn’t happening. Instead I might just try doing something like potluck — but again, that is a far fetched dream.

Someday I will be good enough to modify or build all tools around my workflow

Existing Apps

Logbook

Nothing to see here right now

April 4, 2024

I don't understand why people rave about Linear. Sure, it is a bit faster than Notion but then I have way less content in Linear. It also does not instant search for some reason? So the search results show up when you press enter and then you have to retype your query if it doesn't bring up what you wanted it to. The flat design is up my alley, but interactions are heavily keyboard based and require reading documentation — example how do you move an existing issue as a subtask of another issue? You then use Cmd+K to type Mark Issue As which isn't obvious at all? You can't drag issues into one another for some reason? You can't assign project just by typing like Todoist. 🤷🏽‍♀️ Am I missing something here?

March 3, 2024

I finally synced the block list and muted word list between my main and alt accounts on twitter, and I feel so relieved 😅. You might be wondering how I did it?

At the moment, it's a completely non-automated process because API costs money. I downloaded the archived data through X, extracted the block list and mute list from block.js and mute.js using GPT4 code analysis, and then copied and pasted the curl commands into a for loop for all the darn accounts with userid as a variable. I even took a scrolling screenshot of muted words, converted it into a list using GPT4-V, and muted those through a bash script with cookie tokens.

You can sense my desperation from this. I was tired of seeing the same nonsense across multiple accounts for over a year, and I just had to do something about it.

Mar 3, 2024, 08:52 PM: I got tired of trying to find userids from usernames for new blocks, because of course I wasn’t going to download the archive every time. There are websites you can do it from, but I wanted an option to not leave the website, and hence this comment from github helped. Paste it into console and voila.

id = JSON.parse(document.evaluate(    '//script[@type="application/ld+json"]',     document.lastChild,     null,    XPathResult.ANY_TYPE, null).iterateNext().textContent).author.identifier;

Someday, I will use these libraries but today is not that day

February 10, 2024

Introduction

The freeform app is a digital whiteboarding solution from Apple. It is a pretty good app, that is again, Apple only, but supports all devices (yes, including Apple Vision Pro, yes, you can have an 80 inch whiteboard right in front of you). It is collaborative like most Apple productivity apps, and it is better built than most people give it credit for.

The Basics

Freeform is an infinite canvas. So, unlike the notes app, you can extend it in all directions. It is collaborative, so you can ask other people to join in. And it supports apple pencil, so you can actually use it as a whiteboard. Because there are so many whiteboarding apps, and I have tried to use many of them, I’ll possibly talk some enhancements that other apps provide, relevant to the feature that i am talking about.

Board

The core component of the freeform app is a board. The board is a container, which allows you to add any kind of content to it. A board can contain any kind of item, and we will talk about items next. You can sort, duplicate or favorite a board. If you duplicate a shared board, the copy isn’t shared.

Content Types

Items are the kind of elements you can add to your board. Freeform supports eight types of elements: sticky notes, handwriting and drawing, shapes, images, links, files, textboxes and connectors. As a short introduction to the uncommon ones, sticky notes allow you to add “a note” to top of anything on the board, links show a preview (Open Graph (OG)) image, and connectors allow you to connect two items with a line where the line moves when either of the content it is connected to moves. Most other files show first page as previews.

Formatting and Styling

Freeform provides all basic styling options that you might need, namely, bold underline, italics, colors (both from a list of presets, and the color wheel), alignment, list types, font types and font sizes.

To copy and paste styling in Freeform, select the formatted item, tap the tools, choose Copy Style. Then select the item to style, tap tools, choose Paste Style to match fonts, colors, line weights, corners, or shadows.

To apply consistent text styling, first format an item as you want it to look. Tap Copy Style, then tap to select other items and Paste Style to match fonts, colors, etc. You can also Save as Insert Style so new items added will automatically have that styling.

Sharing and Collaboration

To manage sharing settings for a Freeform board, open Shared boards, Control (^) + click the board, and choose Manage Shared Board. You can lock for view only, allow editing, enable participant adding, change individual access/permissions, invite others with a link, or copy the link to share.

To collaborate in Freeform, click the Collaborate button, enable Participant Cursors, then jump to another user's location by clicking their name, or follow along as they work by choosing Follow Along from their More options.

Starting with macOS 15 and iOS/iPadOS 18, you have the option to send a copy. Using this feature provides you with a link that, when shared, duplicates the board into the recipient's account. This is particularly useful for sending templates or versions of a board where you don't want people to see synced changes. If you make changes after generating a link, these won't be reflected in the original link (similar to how it works when sharing Apple Shortcuts).

You can also export a board as a PDF while browsing All Boards or when you have opened the board. To do it while browsing All Boards, touch and hold the thumbnail or name of the board, then tap Export as PDF. You cannot export boards to png or an image though which is a weird decision on Apple’s end.

Apple Intelligence

Freeform currently supports the available writing tools in Apple Intelligence for MacOS 15.1 and iOS/iPadOS 18.1 in supported regions. These writing tools include Proofread, Rewrite, Friendly, Professional, Concise, Summary, Key Points, List, and Table.

Image Playground and image generation that is deeply integrated into a Freeform board are planned features, but they have not yet been released as of Sep 24, 2024.

The Details

Board: By default, the board comes with this dotted pattern as the background. You can toggle the dots using the square button (the tooltip will say Hide the dot grid at the bottom right). You can also snap to grid using by turning on the Snap To Grid option in the View menu. You can now pan around the board on macOS easily by clicking and dragging on the canvas while the spacebar is pressed. You can zoom using pinch but also using the zoom menu on the bottom left, which allows for percentage based zooming, and two other options, namely, zoom to fit selection and zoom to fit content. If you lock any item on the boards, they can’t be moved or changed.

Sticky Notes: Sticky notes can be placed over any content on the board. They are mostly used to provide feedback or add comments to the board. If you use the double click to add text to sticky note, the text will move along with the note (behaves similarly to adding text to a shape in any other app), but if you handwrite it, it won’t move along with the note.

Images: You can also drag a photo or video into your board from Photos, the Finder, or another app. To customize images in Freeform, use the many formatting options in Format > Image, like removing backgrounds, adding shadows, rounding corners, and more. To put an image inside a shape, overlay a shape on top of the image, then select both the image and the tape. Tap Mask with Shape to put the image inside the shape as a frame or mask.

Handwriting and Drawing: Starting with MacOS 15, iOS/iPadOS 18, Freeform now allows you to work with handwritten text in a similar way to Apple Notes, providing options to search, translate, and copy as text. The app has tools like Fill, Crayon, Fountain Pen, and Ruler, and you can swipe right on the toolbar to see more. Tap a tool to select it. Double tap to adjust qualities like thickness and opacity. Using the select tool, you can then delete, resize, or straighten portions. The Snap to Shape option helps smooth hand-drawn lines. Drawings can also be cut, copied, or duplicated like other items by tapping to select and using the formatting options. Hold the pencil on screen after completing the shape in one stroke to snap it to the correct/clean shape.

Shapes: Tap to add shapes, lines, and arrows. Select to format - change fill, stroke, shape. Or draw freehand then smooth and straighten strokes. To easily create a connected diagram like a flowchart use the shape picker and connectors, drag an arrow to where you want the next shape, then select it from the menu that pops up. You can also quickly add evenly spaced, aligned shapes by holding down on a connector arrow and releasing when the preview matches what you want.

In Freeform, multipart shapes can be split into individual parts for editing. Overlapping shapes can be combined in different ways - united, intersected, subtracted from, or excluded. After adding shapes, tap More to break apart or Arrange to combine using various options. To change size, width or length, tap to select any shape or line, drag the blue dots to adjust overall size and proportions. For shapes, green dots alter specific attributes like number of sides; for lines, they adjust curvature.

To apply consistent text styling, first format an item as you want it to look. Tap Copy Style, then tap to select other items and Paste Style to match fonts, colors, etc. You can also Save as Insert Style so new items added will automatically have that styling.

Files: You can add media by tapping the plus icon and selecting options like Stickers. On an iPad, you can also drag and drop files into Freeform from Split View, or copy/paste items. Double-tap any added photo, video, or file to preview the full item within Freeform. When you preview a PDF file in Quick Look, you can mark up the file directly in the preview window without needing to open the full file. If you are previewing a 3D object file, you can rotate and view the object from all angles by clicking the Rotate button and dragging.

You can insert files from your iPad or iCloud Drive into Freeform, and in most cases they are copied over. When linking to collaborative iCloud documents though, it instead creates a “live” link and other participants can open the live file from Freeform to work on it together.

Connectors: You can use connector lines between any two items. Click the Show Connectors button in the lower-right corner, then drag one of the arrows up, down, left, or right, to add a connector line to the other item.

Remember that you can only have one connector line between 2 items, so if you are using connector lines to create a diagram, you can’t show a 2 way process like A → B, and B → A that uses the same shapes.

Descriptions: You can add descriptions to most multimedia content in the board, this is mainly to enable accessibility, but also allows you to improve search inside boards as mentioned below.

Search: To search all Freeform boards, enter text in the sidebar search field. To find/replace text in one board, open it, press Command-F, enter text, use arrows to navigate results, click Replace and enter new text, or click All to replace all. tarting with MacOS 15, iOS/iPadOS 18, Freeform now allows you to work with handwritten text in a similar way to Apple Notes, providing options to search, translate, and copy as text. Unlike the Notes app though, Freeform does not index content inside files attached inside the boards, and just searches the text associated with text boxes, links and descriptions.

Position Items on Board: You can select an item, then drag from the center to reposition it, or drag a side dot to freely resize in any proportion. On iPad, you can also rotate an item by placing two fingers on it and turning. To move multiple items together, select them then align or group - on Mac Control-click and select Constrain Proportions before resizing proportionally. On iPad, match one item's size to another by starting to resize, touching the item to match, then lifting both fingers when Match Size appears. With grouped items, you can move, rotate, or resize them together as one unit for easier manipulation. You can also align objects such that they are evenly distributed on the board. Select all the items you want to arrange choose Arrange > Align Objects or Distribute Objects to evenly align or space items vertically, horizontally, or distributed across the board.

Scenes: Scenes act as bookmarks on the canvas, created based on your current view. When you click "Add Scene," your current view becomes a scene that you can rename, replace, print, and export as a PDF. This feature is useful when working with multiple pipeline information and you want to export only one part. Scenes can be deleted and have different zoom levels, allowing you to create nested scenes within a particular scene. Unlike frames, which have a table of contents structure, scenes are more like canvas placements bookmarked for easy viewing.

• Math Notes: Freeform only supports math notes on iOS and iPadOS. If you write or type a basic or scientific expression with an equals sign, you'll see a popup saying “solve”, clicking on which results in a solution inserted or suggested inline on your board. Unfortunately, I wasn't able to get graph mode working in Freeform, which is disappointing. Freeform doesn't support sliders to change numerical values in math mode, as that feature is limited to macOS, which isn’t under Freeform’s current math mode coverage.

The Arcana

Freeform is (from what I remember) one of the only apps that Apple has made, that doesn’t turn on iCloud by default. When you first open Freeform, you’ll see a dialog box asking you start syncing with iCloud. This is primarily because Freeform does store all the files that you add to the board with it, with each board easily ramping up to being 10s of GBs in size.

By default, the board comes with this dotted pattern as the background. You can toggle the dots using the square button at the bottom right (the tooltip will say Hide the dot grid at the bottom right).

You can zoom the board by pinching out, but also through the zoom menu on the bottom left of the board. That provides you with two other options, zoom to selection and zoom to fit content. If you have sometimes zoomed in too much to the exact point you needed, you can zoom to fit content to get an overhead view. Zoom to fit selection is nice, if you want to for example, have a grid view, created using 4 rectangles in 2x2 shape, and want to zoom into one of the rectangles.

• To collaborate in Freeform, click the Collaborate button, enable Participant Cursors, then jump to another person’s location by clicking their name, or follow along as they work by choosing Follow Along from their More options.
  • If you share the collaboration link in Messages - you'll get notifications in the conversation when changes are made.
• To apply consistent text styling, first format an item as you want it to look. Tap Copy Style, then tap to select other items and Paste Style to match fonts, colors, etc. You can also Save as Insert Style so new items added will automatically have that styling.
• On iPad, to match item sizes while resizing any shape, start resizing with one finger, then use a second finger to touch and hold the sized item to match. When Match Size appears, lift both fingers. Even Muse doesn’t index content inside the board, so there is that.
• You can insert files from your iPad or iCloud Drive into Freeform, and in most cases they are copied over. When linking to collaborative iCloud documents though, it instead creates a “live” link and other participants can open the live file from Freeform to work on it together.
• When you share stuff to a Freeform board from any other app, it gets added to the right. Hence, if you are creating sections in your board to have “unsorted stuff”, you should put your unsorted boards to the right.

If you enjoyed reading this and found something that clicked for you, please consider supporting me by buying me a coffee here:

Feed my software & bakery addiction @  

February 7, 2024

Just a tiny Shottr appreciation post, for everything it has. When I started using Shottr, I didn’t have Cleanshot X. The only reason I got Cleanshot X was because (a) it had a deal on AppSumo; and; (b) I can record videos with my face in them easily.

But for everything screenshot related (and now you can paste in multiple screenshots too!); you should definitely use Shottr.

February 2, 2024

Updates

• Sep 24, 2024: Apple intelligence (here), highlight text (here), collapsible sections (here), improved PDF search (here), audio content (here), handwriting improvements (here), math notes (here). Fixed handwriting and live transcription device support to include models with A14 bionic (h/t u/ciappetti)

Sep 10, 2024: macOS 15, iOS 18 and iPadOS 18 have notes about what’s new in Notes, I will add them to the sections in due time but you can check them here

• Feb 3, 2024: Syncing Apple Notes to Google Keep or Gmail (here)

Introduction

The notes app that comes with Apple is pretty good. It is very much a slightly watered down, but single app version of Google Docs (you might not know how much it can do, check that here: Google Docs Is Underrated), just locked to Apple devices. But there are a few things that make it special, which we will talk about here. Most of these suggestions will focus on the MacOS app, but I will add some details about the iOS app too.

The Basics

Notes app is inbuilt into the apple ecosystem. Notes in your app are associated with accounts if you enable online sync, and with your device, if you keep it offline (use Enable the On My Mac account). You can have notes contained in different accounts visible in the same application. If you sync them via iCloud, they are available almost everywhere, including, but not exclusive to iPhone, iPad, MacBook. You can also enable Access iCloud Data on the Web, allowing you to read notes on iCloud online.

Content Types

You can have 10 types of content on the notes app: Images, Audio, Math Notes, Attachments, Text, Tables, Checklist, Sketch, Tags and App Links. Besides the obvious ones, App Links are deep links to specific components of an app: for example, if you use Spark Email, you can link to a particular email using app links.

Formatting Options

You can format text in Notes app as: Bold, Italic, Underline, Strikethrough and Highlight (highlight is newly added in macOS 15, iOS/iPadOS 18) from the top toolbar. From the right click context menu though, you can change fonts, make the size bigger or smaller, show as subscript or superscript, and change colors. You can also change indentation, but that is only available from the Format menu up top, rather that right click menu.

You also have multiple options for paragraph styles, all accessible from the toolbar itself, namely, Title, Heading, Subheading, Body, Monostyled (code styling but you cannot highlight syntax), Bulleted List, Dashed List, Numbered List and Block Quote.

You can also add URLs (of websites or internal links of notes) to your note using ⌘+K. You can also think about using Pronotes if you want to use markdown to write your text.

Access Options

You can control access to your notes in 2 ways: sharing and locking. Locked notes can be opened using either a password or through touch id. Sharing allows you to share notes through a link or especially invite other people. You can decide whether the invited person can just view or edit (collaborate on) the note, and whether they can invite other people. Access also works on a folder level and we will talk about it in the details part.

You can quickly save content from other apps to Notes without switching apps by using the Share feature - just hit Share on the content, and select Notes to create a new note with the content inserted.

Apple Intelligence

The latest beta also adds audio summaries, with audio being a new type of content recently added to Notes that is much more integrated than other attachment formats.

Of course, there are planned features that would be released in late 2024 or early 2025. These include integration with Siri for on-screen awareness of what you're talking about when the Notes app is open, the ability to ask questions like "What was the quote from the book notes I took last night about circulation?" and give commands such as "Add this photo to my recipe for whole wheat no-knead bread," which will automatically choose the appropriate note to append it to.

Complete Apple Intelligence will also bring Image Playground, to be released later, which will let you use an image generation wand with different stylistic choices to create images directly in the Notes app.

The Details

Content

Attachments

You can change the size of the pdf document to show as much or as little information as you need. You can markup these documents and the best part is, the document is horizontally scrollable and the markup shows up in the previewed embed, making it amazing for quick referencing. The view as option shows up by clicking the arrow near the file name. The markup on pdfs is collaborative and in my opinion, it is the easiest way for a group of people to mark up a pdf.

You can crop a PDF or a scanned document, to zoom in on a specific area. To do this, open Markup view, Control (^)+click a thumbnail, select Crop Page, drag the handles to enclose the area to keep, then click Done to save changes or Cancel to revert. You can rotate a PDF or scanned document to be oriented in landscape or portrait by using Control(^)+click on a thumbnail, then choosing Rotate Left or Right.

Images: For images on the other hand, you can view them only as small or large and add markups to them. But the view as option shows up by selecting the image and opening the right click menu.

• Math Notes [Video incoming tbd] :

  Math notes are an integration with the calculator application to be able to perform some mathematical calculations inside your notes. You can open special math notes from the calculator, or use the math note feature inline. You can now also perform unit conversions similar to how you used to in Spotlight inside your notes app, with the answer being suggested inline (works with currency, volume, weight etc.).

  Math notes consist of variables that can be assigned a value. Variables cannot have space between them, so x = 7 works but hello world = 7 assigns 7 to world, not hello world. On MacOS and iPadOS, hovering and staying over a value brings up a slider that allows you to change the value of a variable. On iPadOS/iOS, this works with tapping the numeric value as well (handwritten or typed).

  That brings me to my last point, tapping the variable y or = on iOS/iPadOS (but not on MacOS) gives you the option to insert a graph (a new one or add a line to the current one). This is especially nice if you want to see different graphs for varying coefficients or intercepts by changing the numerical value using the slider option.

App Links: You can have App Links on your notes, that can be added using the attachment icon on the top right of the note. App Links are deep links to specific components of an app: for example, if you use Spark Email, you can link to a particular email using app links.

Checklist: You can self sort checklist in a group, such that the checked items move to the bottom of the group. This can be enabled using Automatically sort checked items option in the app settings. The good part about this is that you can separate these lists by just some text in between, allowing you to create “grouped” lists.

• Tables: You can create pretty basic tables in Apple Notes. These behave very similarly to the tables you would have in a word processing software, as in, they are not spreadsheets, they don’t do calculations, you can’t merge cells, all you can do is add or remove a column/row in-between or at the end. You can drag rows or columns to different positions. They are very much like Notion’s simple tables in a sense that you cannot have any other content besides text in any of the cells.
• Sketch aka Handwriting

  Sketch is possibly the main reason I still use Apple Notes besides inline markup. You can add a sketch on your iPhone or iPad but not on your MacBook. Sketches that you add through your iPhone or iPad though will appear in the Notes app on MacBook too. You can add all basic markup in a sketch.

  A note doesn’t need to be either sketch or text. You can mix and merge these two things across the complete note vertically but not horizontally, i.e., you can have text below or above a sketch but not beside a sketch. This is similar to how Notes work in general, i.e., they have a linear flow and do not support columns unlike Notion. You can select handwritten notes and paste them as typed text in another area using the Copy as Text option.

  Starting with iPadOS 18 ((devices with A14 Bionic, or M1 and above), handwriting got a massive upgrade. Apple now uses on device models to automatically refine your chicken scratch into more legible (smoother and straighter) handwriting while trying to maintain your writing style. Spell-check now works for handwritten words too. Remember, how you could previously copy handwriting as text to paste into other apps? Now you can paste text as handwriting — with additional benefit of reflow (handwriting reflow should work on iPad), i.e., the content will auto-adjust and move to next line if needed when you are pasting something in between, working similar to scribble (cross to remove a sentence, add space in middle etc) while retaining your handwriting.

For both sketch and text, if you type or write phone numbers, addresses or dates, you get relevant Apple application options, for example, to Facetime a person or add to contacts, or add an event to calendar.

Organization and Search

Honestly, Apple Notes excels in search. That is the jam. Sure, it hangs a bit when you have too many notes, but which app doesn’t (yes, Obsidian does too). And sure the iCloud sync is wonky, but hey, you signed up for it when you entered an all apple ecosystem.

You can view all your notes in a list or a gallery. You get six ways to organize content in Apple Notes: Tags, Folders, Smart Folders, Search, Smart Search, and Pins.

• Tags are the method to have a note appear in multiple collections. Clicking on the tag on the left sidebar have two options for filtering: any and all, with, each tag have 3 states: included, unselected, and excluded. This is a special part with Apple Notes and I really appreciate that. Tags can be written on the top of the note or anywhere inline and they are automatically associated with the note.

Folders allow you to place notes into specific collections. One note can reside in only one folder. You can share folders with people, sort them or group them. You can have any level of nesting for folders.

Smart Folders allow you to collect all notes based of either all or any based on a collection of rules. You can have 1 or no (but not multiple) rule from each category: Tags, Date Created, Date Edited, Shared, Mentions, Checklists, Attachments, Folders, Locked Notes, Pinned Notes and Quick Notes. The 1 or none constraint implies that you cannot do something like: Include notes matching any of the following filters: Attachments: Scans + Attachments: Maps.

• Basic search works using keywords, finding information inside attachments and handwritten content. You can search in one account or across multiple accounts. On iOS, you have the option to search within a note and can choose whether to match whole words and make the search case-sensitive.

Smart Search has some of the options from Smart Folders, but you are looking them up on the fly. These namely are searching for shared or locked notes, or, filter notes based on whether they have checklists, tags, drawings, scans, and, attachments. You can only select one of these smart search filters.

• Pinned notes work on an account level, so, you can pin in the All Notes folder.

The Arcana

• You can drag and drop emails from your Mail account to your Notes app. This links them directly to the mail account. It is very similar to adding an app link. The app link method works for other clients too (I use it with Spark), whereas the drag and drop can be a hit or a miss.
• While you cannot send a checklist item to reminders, you can drag and drop a note from the Notes app to the reminders app to create an internal link (check it out here).
• If you sync your notes under a gmail account, they show up in Google Keep or in Google Mail. It seems to (? unsure, can change, no official Apple guideline) depends on which account is the default. If you have an iCloud account set as the default, they sync to GMail, otherwise they seem to sync to Google Keep.
• Notes app indexes all content inside the attachment and in handwritten content, so you can always search for a word in the PDF that you attached or a handwritten lecture you wrote. PDF search now takes you to the exact location of the match inside a PDF, starting with macOS 15 and iOS/iPadOS 18, instead of just finding the matching attached PDF.

You can add a scanned document or a sketch to a Notes app that is open on your MacBook, through your iPhone or iPad.

• The sketch component has many amazing features that are not even prevalent in the most common handwriting apps. I think it is one of the least “known” features in the space, because most videos are either made by productivity gurus who type their notes, or people who use goodnotes or notability instead. The following points combine features of the sketch component (available on both iPhone and iPad) with benefits of Apple Pencil (works only on iPad).
  • You can move the tool palette around on iPad. You can write using apple pencil as text using the A pencil which works in scribble mode rather than drawing mode.
  • When you draw, you can tilt your Apple Pencil to shade a line. You can draw perfect shapes by pausing the tip on screen after drawing a rough shape with a single stroke.
  • To add a space between words, use your Apple Pencil to tap and hold the spot where you want to add it. To add space between handwritten text in Notes, use the hold down on the screen to select the text, then drag the triangle that appears up or down, or use the Insert Space Above option to add a draggable horizontal line for adjustable spacing.
  • You can select handwritten notes and paste them as typed text in another area using the Copy as Text option.
  • For both sketch and text, if you type or write phone numbers, addresses or dates, you get relevant Apple application options, for example, to Facetime a person or add to contacts, or add an event to calendar. (Example here) You can use this trick to associate a note
  • Starting with iPadOS 18 (on M series iPads), handwriting got a massive upgrade. Apple now uses on device models to automatically refine your chicken scratch into more legible (smoother and straighter) handwriting while trying to maintain your writing style. Spell-check now works for handwritten words too. Remember, how you could previously copy handwriting as text to paste into other apps? Now you can paste text as handwriting — with additional benefit of reflow, i.e., the content will auto-adjust and move to next line if needed when you are pasting something in between, working similar to scribble (cross to remove a sentence, add space in middle etc) while retaining your handwriting.
• You can create a new note by saying "Hey Siri, start a new note" and then dictating the content, which Siri will transcribe and save for you.
• You can crop a PDF or a scanned document, to zoom in on a specific area. To do this, open Markup view, Control (^)+click a thumbnail, select Crop Page, drag the handles to enclose the area to keep, then click Done to save changes or Cancel to revert. You can rotate a PDF or scanned document to be oriented in landscape or portrait by using Control(^)+click on a thumbnail, then choosing Rotate Left or Right.

You can add links to other notes using the right click context menu, >> or ⌘ + K. These are not backlinks, but rather internal links, which is often good enough for daily use. You can add the link to a word in a current text or use the connected note title as preview text.

• To import text files into Notes as individual notes, go to File > Import and select TXT, RTF, RTFD, HTML, or ENEX formats. To export a note as a PDF, click the note, go to File > Export as PDF, name it, add tags, and click Save. You can also open a note directly in Pages by selecting the note and going to File > Open in Pages.
  If you want to export Apple Notes in a useful format, I’ll suggest installing Obsidian, and using its import plugin to import Apple Notes. You don’t need to use Obsidian once you are done with the install.
• Quick Notes are one of the most integrated features of the Notes app, basically new notes tagged by a specific type that are meant for one-off or “draft” content.
  • If you enable quick notes, you can tap on a lock screen with apple pencil and open a quick note.
  • In Note app settings, you can decide whether you want to open a new quick note every single time, or resume from the last quick note.
  • You can set hot corners in your Settings app to open quick notes.
  • You can set a new note from iPhone control center, the only app you can use to write something without unlocking your phone. In the control center, if you press and hold the new note button, you can directly open the context menu for new note, photo, scan, checklist as well, to directly jump into a “template” you want.
• On MacOS and iPadOS, hovering and staying over a value brings up a slider that allows you to change the value of a variable. On iPadOS/iOS, this works with tapping the numeric value as well (handwritten or typed). Tapping the variable y or = on iOS/iPadOS (but not on MacOS) gives you the option to insert a graph (a new one or add a line to the current one). This is especially nice if you want to see different graphs for varying coefficients or intercepts by changing the numerical value using the slider option.
• On the top of the note where it says the date, it usually shows the last updated time. Clicking on it changes it to showing Created time, and clicking again will show the Edited time. If you move to a different note, the date UI moves back to its default state.
• If you often find yourself wanting to create a backdated note, such that you can use the sorting feature, there is an Evernote template trick. If you export a note from Evernote or even have a template .enex file, you can modify the created and updated time to be a date that you want to set the new note to be and then import that file into Apple Notes.

Extensions

If you enjoyed reading this and found something that clicked for you, please consider supporting me by buying me a coffee here:

Feed my software & bakery addiction @  

February 1, 2024

The App List

Apple comes with multiple in-built apps. While some of them have very defined scopes, like Apple Music or Apple Arcade, some of them don’t (like Notes, Reminders). They are easy to get into but hard to experience all features of. Those are the apps we will focus on in this post.

This document is interspersed with personal opinions, and is not just a listing of features, similar to how I did for Google Docs (Google Docs Is Underrated ). I am no longer an apple devices only person (was one for an year), so you will see some comments about how/why/whether the interoperability can matter.

The one “app” we will look at besides these — is the System Settings app. There are some hidden treasures in there, that we should definitely explore! The last thing we will look at is the magic of ⌥ or the Option key. It changes the context menus so often, that you might miss so many options in the operating system.

Communication

Productivity

Entertainment and Home

Creativity

Exploration

Health and Fitness

And all others

Notes App

The notes app that comes with Apple is pretty good. It is very much a watered down, but single app version of Google Docs (you might not know how much it can do, check that here: Google Docs Is Underrated), just locked to Apple devices. But there are a few things that make it special, which we will talk about here. Most of these suggestions will focus on the MacOS app, but I will add some details about the iOS app too.

Freeform App

The freeform app is a digital whiteboarding solution from Apple. It is a pretty good app, that is again, Apple only, but supports all devices (yes, including Apple Vision Pro, yes, you can have an 80 inch whiteboard right in front of you). It is collaborative like most Apple productivity apps, and it is better built than most people give it credit for.

Other Applications

One of the most common use cases that I see is recording content. MacBook comes with an inbuilt screen recorder that can be accessed using shortcuts mentioned here or through the app. Even though the app is named screenshot, it also acts as a screen recorder. You can also choose the option to show/hide mouse clicks, and whether you want to record a portion of the screen or the whole screen. Screenshot also interacts with ⌥ , Space and ⇧ keys.

It does have 2 issues though: it doesn’t work with presenter overlay so you cannot record your webcam, and it has no way to record output audio. QuickTime Player, another Apple app allows you to record internal audio (output audio), but it is an either/or situation - you either record your microphone or the internal sound. While you can use something like blackhole as audio device, that will be complicated and it still does not solve the lack of webcam.

Facetime

(and other video calling softwares)

MacOS comes with inbuilt video conferencing features, namely, Portrait, Center Stage, Studio Light and Reactions. Reactions are turned on by default in MacOS Sonoma, and I will sincerely suggest to turn them off. Portrait blurs your background, Center Stage kinda (not really, because it is inbuilt you know) shifts the camera direction so that you are in center of the screen, and Studio Light relights your image and background.

One of the newer features though is Presenter Overlay, which allows you to customize screen share, only in Facetime and Zoom. To add a presenter overlay when screen sharing in FaceTime, click the Video icon, select Screen Share, then under Presenter Overlay choose Off for a separate window, Small for a movable cropped view, or Large to prioritize the video feed over the shared screen.

Screen Sharing

You can learn more about screensharing on MacOS here. It seems like it internally uses a Facetime API because you see those controls pop up in the menu bar.

[Expand toggles to see screenshots]

Screensharing is a hidden application. It doesn’t show up on your Application or Launchpad. You need to open screensharing app using Raycast or Spotlight.

It opens up a screen showing all the connections you have. You can also create groups to manage all connections you have had.

Then you can enter a hostname or apple id (yes, any apple id) to connect to.

And voila, now you are screensharing.

You can also modify what you see on the toolbar

And modify the settings for display scaling and quality

Screensharing shares microphone by default. You can mute the microphone in the Connection menu item. It also shares clipboard by default which can be changed in the Edit menu item.

You can copy paste or drag text, images and files during screensharing. Universal clipboard is not available during screensharing. You can’t have both Screen Sharing and Remote Management on at the same time.

Finder

• You can create document templates, such that you don’t need to worry about modifying the original document, hence, called “stationery” in MacOS. To do this, select the document and use Get Info or ⌘ + I . In the general section, select Stationery pad. Make sure it is a document you can edit, and not a folder or an alias. Now, everytime you open that document, it will duplicate itself — without you needing to worry about modifying the original.

• You can batch rename items. Select multiple items and ^ + click one of them and then choose Rename. You can choose to replace, add or change text in the names, define the format by choosing where to put the index, counter and date.
• On desktop, you can quick arrange your files using Stacks. When you save a file to it, it will be added to the appropriate stack. Right click on desktop or press ^ + ⌘ + 0 and choose Use Stacks. You can browse files in desktop stack using two fingers on trackpad, expand a stack by clicking it, collapsing by clicking the down arrow, and change the grouping mechanism using Right click > View > Group Stacks By or ^ + click > Group Stacks By .

Apps I have don’t use

• Photos: I have never used the Photos app that comes with Apple devices. I do not want them to be locked into an ecosystem, and I very much prefer Google Photos’ features, so that won’t change anytime. Here is the official guide to Photos app though:
  Bookmark for https://support.apple.com/guide/photos/welcome/mac

  Quick Tips:

  • Photo’s live text that can be enabled by first selecting text and then using Control (^) + Click on selected text allows you to perform these actions: copy, definitions, translations, web searches, sharing, calling, emailing, and opening links.
  • Duplicates appear automatically in the Duplicates album in the sidebar.
  • To copy the subject of a photo, simply perform a Control (^) + Click on the photo and select the option Copy Subject. You can then paste the subject into various applications such as documents, emails, text messages, or notes.
  • To access information about popular landmarks, art, plants, flowers, pets, and other objects in a photo, simply open the photo and locate the Info button in the toolbar. If a Visual Look Up icon is present on the photo, click on it to gather relevant details.

The “System Settings” App

You can set a legacy contact, a person who can access your data after your death. Makes things much easier with photos and notes (more here). Automatic Verification privately authenticates you to participating apps and websites, so that you don't have to complete a CAPTCHA. All you have to do is sign in to the app or site (more here).

You can set basic app limits using Screen Time feature in Settings. These can be defined on a per app basis, and can be set to be blocked during downtime.

Spotlight

and QuickTime Player

Spotlight search range. You can decide what kind of things you want to show up in Spotlight using Siri & Spotlight. For example, you can choose to exclude Fonts, because who, other than designers ever wants to string match with a font?

You don’t need a different app to manage your storage, you can do that through settings (and figure out the apps/files using the most space)

I usually set the double click on window title to zoom, use tabs for documents and set up hot corners, as the bottom right hot corner to open quick note. This is because I have dock on left, which triggered by moving the cursor to bottom left corner.

Keyboard Shortcuts

Turn on tab for navigation, such that you can move between button and other pointer event components in MacOS

Want to change keyboard shortcuts for any menu options? For example Duplicate Tab still does not have a shortcut in Google Chrome. You can set it under Keyboard Shortcuts, on a global or per app basis.

One of the first things I change are the shortcuts for screenshot. I switch around the shortcut for copy to clipboard and save to file, because often, I am just pasting it somewhere, and I just need it copied to clipboard. An extra tip here courtesy ProperHonestTech, if you use ⌘ + ⇧ + 5 to take a screenshot for a window, it auto adds a shadow around it. You can avoid it by pressing the ⌥ key before you click the Capture button.

If you look at the services tab, you not only decide the keyboard shortcut for them, but also whether they show up or not. For example, for files and folders, you can turn on New Terminal at Folder as an example of inbuilt app, or Send File via KDE Connect as an example of installed app.

You can set up other things too, such as Clop installs Optimize with Clop under Pictures or turn on the option for Search with Google under Searching.

You can decide services that work with text selection. Did you know that you can make a sticky note out of selected text for example and set up a keyboard shortcut to do it?

Extensions

If you scroll down to Privacy and Security section, you will see extensions. Extensions add more options to your files.

The markup options in Actions and Photos should be selected by default

Did you know that quick look options can be extended? For example, the two apps I mentioned above show a better preview of markdown files or of code files, using syntax highlighting.

Share extensions can be used by in-built and installed apps. One of the main ones that adds more to this is — Neardrop, that allows you to send files like Airdrop to android phones. This is how, for example, Mela adds the extension to the share menu.

Did you know that apple has an inbuilt option to convert images, remove background, trim videos and create pdfs? Yup. You can turn them on in Quick Actions in the Extensions section.

The Magic of ⌥ and ^ Keys

Along with the ones below, there's also this post by Saurabh I found Mar 2, 2025 about interesting shortcuts in many other Apple apps. Check it out below!

Most people know basic shortcuts that come use the Command (⌘) key. But the Option (⌥) and Control (^) keys are not often ignored, even though in combination with Command (⌘) and/or Shift (⇧) , they can have many different functions.

System

• ⌘ + ⌥ + esc : Force quit an app.
• ⌘ + Click: On a non-focussed window to click on something without focussing it.
• ⌘ + ,: Open the preferences menu in many apps (default for Apple apps)
• ^ + ⌘ + Space: Character Viewer
  What does character viewer look like?

  

• ⌥ + ⌘ + V: Move the files in the Clipboard from their original location to the current location.
  I use the app Command X to cut and paste into a different location instead of remembering this shortcut.
• ⌘ + Y: Use Quick Look to preview the selected files. ⌘ + ⌥ + Y: View a Quick Look slideshow of the selected files.
• ⌘ + ⌥ + H: Hide all windows but the current one.
• ⌘ + Tab: Switch to the next most recently used app among your open apps. if you use the shortcut ⌘ + ⌥ + H to hide the windows, then you can access them using ⌘ + Tab, unlike when you minimize them. ⌘ + `: Switch between the windows of the app you're using.

  Note: The second key might vary based on keyboard layout. It is the key right above the Tab key on the keyboard.

• ⌥ + ⌘ + power button: Put your Mac to sleep.
• ⌃ + ⌘ + Q: Immediately lock your screen.
• ⌃ + ⇧ + ⌘ + T: Add selected Finder item to the Dock.
• ⌥ + ⌘ + Del: Delete item skipping moving to trash.
• ⌥ + ⇧ + Keyboard/Display Brightness Up/Down: Adjust the display brightness in smaller steps. Add the Control (^) key to this shortcut to make the adjustment on your external display, if supported by your display.
• ^ + Down Arrow: Show all windows of the front app.
• ⌥ + Drag: Copy the dragged item. The pointer changes while you drag the item.
• ⌥ + ⌘ + Drag: Make an alias of the dragged item. The pointer changes while you drag the item.
• ⌥ + Right click: Show the option to change the always open with property.
• ⌥ + click on green traffic light: Maximize window instead of go into full screen. I also set double click on window title to maximize (here).
• ⌘ + ⇧ + / , aka ⌘ + ? : Search through menu bar items

Documents and Text

• ⌥ + ⇧ + ⌘ + V: Paste and Match Style: Apply the style of the surrounding content to the item pasted within that content.
• ⌃ + P: Move up one line.
• ⌃ + N: Move down one line.
• ⌃ + A: Move to the beginning of the line or paragraph.
• ⌃ + E: Move to the end of a line or paragraph.
• ⌥ + ⇧ + ↑: Extend text selection to the beginning of the current paragraph, then to the beginning of the following paragraph if pressed again.
• ⌥ + ⇧ + ↓: Extend text selection to the end of the current paragraph, then to the end of the following paragraph if pressed again.
• ⌥ + ⇧ + ←: Extend text selection to the beginning of the current word, then to the beginning of the following word if pressed again.
• ⌥ + ⇧ + →: Extend text selection to the end of the current word, then to the end of the following word if pressed again.
• ⌃ + D: Delete the character to the right of the insertion point. Or use Fn + Delete.
• ⌘ + K: Add a web link.
• ⌃ + ⌘ + D: Show or hide the definition of the selected word. This also shows link previews in Safari! (the more you know)

• You can create document templates, such that you don’t need to worry about modifying the original document, hence, called “stationery” in MacOS. To do this, select the document and use Get Info or ⌘ + I . In the general section, select Stationery pad. Make sure it is a document you can edit, and not a folder or an alias. Now, everytime you open that document, it will duplicate itself — without you needing to worry about modifying the original.

On the Internet 🌐

If you enjoyed reading this and found something that clicked for you, please consider supporting me by buying me a coffee here:

Feed my software & bakery addiction @  

January 31, 2024

I recently discovered this app called Clop. And man, it is so good. I often take these 3MB full screen screenshots and directly paste them into Notion (including on these pages rendered as a website), and Clop basically auto-optimizes any images on clipboard, whether shot directly, or if you use ⌘+C in your finder on an image file.

The free version works for all images (though doesn’t have an option to auto-convert to webp, I so wish it did!). The paid version (or with limits on the free version) can also work with videos and pdfs, though, I haven’t tested that part much.

January 26, 2024

Notion Feeling Clunky

Block and Page complaints

• Simple Tables are heavily underpowered for me, you can't bulk apply colors, you can't add anything other than text in those boxes (each cell imo should be a block, that I can add images or bookmarks or content of any kind into). I would have expected them to behave like basic tables in craft (you can sort filter them, have dropdowns, but can't have complicated formulas etc) -- so something that can still be represented as a markdown but is actually capable.
• Workspace buttons: I replicate so many callouts throughout my document, that I usually end up needing to have a page of "templated blocks" that are used on various pages. It would be great if we could add template blocks to slash commands that are available throughout the workspace
• backlinks are the things i was most excited for, and i used the least in notion - there is no way to see which blocks the backlinks come from, it shows just the pages, the backlinks are not filterable nor editable in-place, and you can't even get a page's backlinks in API
• there is a single consolidation block in notion (table of contents, which also, doesn't work for headings inside toggles, and if placed inside a toggle, still shows the complete page's ToC) -- which makes it really hard to consolidate stuff for me on pages. There is no highlight, callout consolidation block to, for example, get all highlights from a page.
• As someone who treats 99% of the things as "tasks"; I wish Notion had the ability to add a checkbox to anything (images, embeds, pdfs, files, web bookmarks). (basically todo block should kinda behave like a callout i guess?)
• I would really like the ability to have icons inside text (and not needing to resort to emojis). on that note, i would like to be able to add alt text to images and videos (other than captions) for accessibility reasons.
• synced block content not searchable within a non-original page in Notion when the filter is set to the current page
• buttons on a "homepage" or "dashboard page" cannot add content to page X, they can only add page Y to database A.
• i'd love better page mentions for properties, especially rendering @ page X, if it has a date property or person property or status/checkbox property, when mentioned on page, have those be inline and modifiable inline properties. (so checking a box inline would lead to checking the box on specific property)
• task view in home is a nice thing, but I would really like the option to have checkboxes on page content be visible in one place. this might be less of an issue if backlinks worked by creating synced blocks in page that could be manipulated from the page, so i can @ page X in a todo block and then see all checkboxes there, but that doesn't work
• more than page preview hover card, it would be helpful to have block mention hover card. i often can get a gist of what the page is about from the name and the cover kinda covers half of the card, but block mentions are usually hidden and it would be nice to hover and see a quick preview.

Buggy UI/UX

• Cursor placement issues sometimes clicking on the bottom of the page forces the cursor inside the last element if it is a toggle or a callout and I want it to be a new block and there is no way to do that other than press enter, get to next line, press del usually.
• Tabs cannot be rearranged in the desktop app. I get that it is an electron app, but so is VS code, so I know it is not an electron limitation
• When I switch to a new workspace on desktop, often the last open page from the previous workspace still shows up on the main content part of the window
• when you have a link and you hover on it, the popup copy button sometimes is so far that by the time the cursor reaches it, the popup closes. it probably needs the same triangle cursor movement thing that is suggested for sub-menus on navigation bars.
• I think even basic pencil interactions are broken for iPad. Clicks sometimes do not register. Taps are annoying. It often works in mobile mode when there is no need to. For me, the app is unusable on iPad.
• shortcuts sometimes work, sometimes they don't. sometimes cmd+opt+m actually asks me to write a caption. sometimes it minimizes the app?
• I can't paste over blocks or paste blocks over selection? I can paste selected text over selected text just fine, but if either of the selections are blocks, it doesn't work.
• The desktop app at a certain width tries to hide the sidebar if it opens side peek. it causes layout shift.

General UX complaints

• brown, orange and yellow are too similar in dark mode
• please remove ai from every context menu for people who are not subscribed to ai
• checkboxes that align with the general rounded UI in notion please
• quick add on android would have been awesome if it had an option to add a block to a page rather than adding a subpage with the specified content to a page. on quick add, please let us select values for properties rather than just the title and content.
• I wish you could favorite pages into teamspace (or create collapsible headers in favorites) -- either works; but that is my usual usecase. Database pages are usually not accessible from sidebar directly unless i favorite them but if I favorite 20 pages, then I cannot find anything, because I am dumb.
• please switch into insert mode rather than / mode when a new block is inserted. i add a new block, i need to press esc to exit menu then i can start typing 😅
• Can't select non-contiguous items whether on board or blocks with Cmd+Click

Databases

• database properties, i wish there was a way to delete multiple multi-select property options at once. and an option to remove multiple properties at once.
• i feel like dates are the clunkiest elements of notion. there is no in-built date referencer so all the dates are kinda there, but you can't see everything that mentions date X. you need to write them a certain way - 22 jan 2024 doesn't work, jan 22 2024 doesn't? reminders need 3 clicks to happen because you can't write time in the database box (thankfully you can in mentions) -- but reminders still need a click. you can't reschedule items by a day or 2 days or change reminders or snooze them, which i get, but it is just really clunky in my experience.
• remove duplicate efforts and have some auto-linking for relations mechanism (i.e., if page X from database A in mentioned on page Y from database B, and db B has a relation to db A, auto add page X to the relation)
• i should not need to write scripts to identify possible duplicates in notion database, and this becomes really hard for something like reference management, because it is hard to know if something was already added or not.
• my company uses notion and the sprint board template. for the planning meeting, someone has to go and change filters and it is a clunky process htat is frustrating to watch. ideally it should be possible to have a block that feeds into database views, so that you don't need to click around 10 times to get the temp view filter you want.

Speed Issues

• Page loading is really slow for a database that is not-cached. Slow enough that I sometimes end up clicking the card 4-5 times before it actually opens
• There is at least a 3s load time on data views I have never opened even if they only have 10 items in view
• databases are not usable beyond 300 rows imo, they take too long to load, or open, or sort, or filter, and need to be broken down. but because you cannot reference and filter a whole database in formulas (and you need to add all pages as a relation that you want to filter on), you really can't have broken down databases consolidated into one view
• settings speed - i have been staring at the sites in settings for over 2 minutes now with just the skeleton animation

Manual Drudgery

I am thankfully okay with scripting, so I used run a bunch of scripts that do some of this stuff, but they break so often, that I am just using 2 external scripts at the moment:

January 24, 2024

I have been wanting to explore paper reading apps that work on a spatial canvas like structure. I do want them to work with Apple Pencil because I feel the most comfortable writing with papers, so heptabase is not on the list. I am not looking for paper annotation apps like Highlights, more for excerpting regions of paper into a canvas I can drag those “components” around in. The main thing I am looking for that isn’t a usual part of most canvas apps like tldraw or concepts, is the ability to locate the “snippet” or excerpt back in the pdf.

The main app that does this is Muse, but (a) it is an expensive (fairly priced subscription) for just paper reading, and (b) I would pay that much if you could share the boards on web, but you need the Muse app, unfortunately.

So, I tried other apps, and I am going to try BoardNotes for a bit, because that kinda checks the boxes of snippets, canvas, Apple Pencil, and pdf locator. GUGA on the other hand is collaborative, has snippets, has a great canvas, works well with Apple Pencil, but does not have pdf locator unless the specific pdf is already open. Neither of them have a macOS app like Muse does, or have publicly shareable boards, but they both are pretty cheap, a one-time purchase. Kosmik 2.0 seems to have public universes as a thing even for free plans, and there is an extract option, that doesn’t remember pdf location, but remembers the pdf the extraction came from. Or maybe I should stop trying to find something and just use Muse or Liquid Text (though I am unsure how it compares with MarginNote).

Some apps that I tested

January 18, 2024

Val town script here (which you can import as a module if you want!)

Demo using the template Money Database

Bookmark for https://www.val.town/v/nerdymomocat/add_to_notion_w_ai_webpage

Your browser does not support the video tag.

A video demonstrating the use of function - with an http endpoint

And the outcome of the demo video above. Shows 3 entries, 2 of type debit, 1 of credit, across various inferred categories etc.

• Uses instructor and open ai (with gpt-4-turbo) to process any content into a notion database entry.
• Use addToNotion with any database id and content.

await addToNotion(  "DB_ID_GOES_HERE",  "CONTENT_GOES HERE"//"for example: $43.28 ordered malai kofta and kadhi (doordash) [me and mom] jan 3 2024");

Prompts are created based on your database name, database description, property name, property type, property description, and if applicable, property options (and their descriptions).

Supports: checkbox, date, multi_select, number, rich_text, select, status, title, url, email. Filters properties where either type is title or description starts with ✨.

• Uses NOTION_API_KEY, OPENAI_API_KEY stored in env variables and uses Valtown blob storage to store information about the database.
• Use get_notion_db_info to use the stored blob if exists or create one, use get_and_save_notion_db_info to create a new blob (and replace an existing one if exists).

January 15, 2024

These two comments on reddit exactly explain why I don't watch productivity content. Whether it be youtube or twitter or anything else — I do not want to be productive running courses, I do not want to be productive running a productivity business - but the content creation grind requires so much input — that sooner than later, that becomes your job, either the content itself, or the course itself, or the business teaching about productivity. And I do not fault creators for that. But, that isn’t me. And now it isn’t relatable. Ali Abdaal used to stand out for his content being productive at being/or learning to be a doctor, but that is no longer the case.

That+sponsorships -- but the latter is not productivity sphere related.

January 14, 2024

As much as I like Scenario, and am on the fence about AI art, I really do not like terminology shift from training → pre-training, and fine-tuning → training. Companies can say things like "train on your art", which still means the model was pre-trained on scraped art.

And the math & opt-in/opt-out debate aside -- I do not like the "lying by omission" aspect of it.

Like, a platform isn't more ethical than midjourney just because it provides services to fine-tune a model on a set of art samples. 🤷🏽‍♀️

January 7, 2024

I know, I know. I decided not be critical in the new year and only reinforce positivity, but what is up with really poorly done AI images used as thread’s main points or OG images for links? You want to save money by not paying an illustrator but you also want to save time by not spending hours and hours actually getting the perfect image? Is that what it is?

Because otherwise, how do you explain these images at all?

January 6, 2024

Scripts

Application Tips

FAQs

January 6, 2024

One of my goals this year is to create animated illustrations. Do you all have recommendations for programmatic animation libraries that can animate illustrations (not divs/elements/simple shapes)? I'd use procreate dreams but you cannot configure those with trigger states, so I can't have them be interactive and procreate is not vector based so I can't export a svg 😟

One of the hard parts about this not being associated with a project is I have open ended questions about the scope.

• Do I need trigger animations for illustrations or is that need coming from data animations?
• Am I looking for video exports, runtimes (like rive) or svgs?

January 5, 2024

Honestly, val.town is cool and fun and I have never been able to get something up and running as quickly as I have on val.town. Once repl.it stopped allowing you to run flask apps without upgrading, I knew it was only a matter of time, when I would need to switch to a different cloud function app.

I was able to move my reference manager from repl to val.town Jan 4, 2024: Notion Reference Manager

Here is a quick friction log:

I tried to use it as an IDE (based on around 3 hours of exploration), but there were a few challenges:

• The all-scripts-on-one-page layout made it feel less like an IDE.
• There was a noticeable delay between clicking run and seeing the output.
• The auto-format code feature often didn't work as expected.
• Every save increased the version, which was a personal irritation as I prefer versions to represent actual changes.
• Sometimes, saving didn't work if I collapsed the tab group.
• For it to feel like a true script IDE, it might need code folding functionality.

On the positive side, I appreciated the TypeScript argument suggestions. So, I've been using it more as an executable pastebin. Overall, I like how compact and clean the interface is, considering how much you can do with it.

January 5, 2024

One benefit of owning my codebase for notion based blog is -- I can fix things that no other developer would be interested in fixing.

For example, my post pages were fine, but my stream page had an overflow of code block, which I hacked a fix for in an hour 😅

BEFORE

AFTER

January 5, 2024

Notion Reference Manager and the corresponding valtown script

• Add just the paper name with semicolon at the end ; and watch it fill in!
• Add NOTION_API_KEY as env variable in val.town
• Add your database id to here const PAPERPILE_DB_ID = "DB_ID_GOES_HERE";
• Make sure you have shared the database with the integration (and hence the API key)
• Remember to change the script to run automatically every 15 minutes
• Have fun?

import process from "node:process";import { Client } from "npm:@notionhq/client";import { fetch } from "npm:cross-fetch";var currentDate = new Date();currentDate.setMonth(currentDate.getMonth() - 2);var lastCheckDate = currentDate.toISOString().split("T")[0];export default async function (interval: Interval) {  const NOTION_API_KEY = process.env.NOTION_API_KEY;  const PAPERPILE_DB_ID = "DB_ID_HERE";  if (!NOTION_API_KEY || !PAPERPILE_DB_ID) {    throw new Error("Please fill in your API key and database ID");  }  let dont_update = [];  const notion = new Client({ auth: NOTION_API_KEY });  const databaseId = PAPERPILE_DB_ID;  const queryResponse = await notion.databases.query({    database_id: databaseId,    page_size: 100,    filter: {      and: [        {          property: "Name",          rich_text: {            contains: ";",          },        },        {          property: "Created Time",          date: {            on_or_after: lastCheckDate,          },        },      ],    },  });  const relevant_results = queryResponse.results.filter(    (i) => !dont_update.includes(i.id)  );  console.log(    `Checked database, found ${relevant_results.length} items to update.`  );  const all_updated = [];  for (var i of relevant_results) {    let semscholar_query = i.properties.Name.title[0].plain_text.replace(      /[^\w\s]/gi,      " "    ); /*+ " " + i.properties["Author(s)"].multi_select.map(x => x.name).join(", ")*/    console.log(semscholar_query);    let fields = `url,title,abstract,authors,year,externalIds`;    const j = await fetch(      `https://api.semanticscholar.org/graph/v1/paper/search?query=${encodeURIComponent(        semscholar_query      )}&limit=1&fields=${encodeURIComponent(fields)}`    )      .then((r) => r.json())      .catch(function () {        console.log("Promise Rejected");      });    if (!(j.total > 0)) {      console.log("No results found for " + semscholar_query);      continue;    }    const paper = j.data[0];    // get bibtex    let all_external_ids = paper.externalIds;    //    console.log(paper)    // console.log(all_external_ids)    let doi_to_add = null;    let bibtext_to_add = null;    if (paper.externalIds.DOI) {      doi_to_add = paper.externalIds.DOI;    } else if (paper.externalIds.PubMed) {      doi_to_add = paper.externalIds.PubMed;    } else if (paper.externalIds.PubMedCentral) {      doi_to_add = paper.externalIds.PubMedCentral;    } else if (paper.externalIds.ArXiv) {      doi_to_add = "arxiv." + paper.externalIds.ArXiv;    }    if (doi_to_add) {      //   const bib = await fetch('https://api.paperpile.com/api/public/convert', {      //   method: 'POST',      //   headers: {      //     'Accept': 'application/json, text/plain, */*',      //     'Content-Type': 'application/json'      //   },      //   body: JSON.stringify({fromIds: true, input: doi_to_add.replace("arxiv.",""), targetFormat: "Bibtex"})      // }).then((r) => r.json());      //   if (!(bib.error) && bib.withErrors==false)      //   {      //     bibtext_to_add=bib.output;      //     if (bibtext_to_add.indexOf('abstract')!=-1)      //     {bibtext_to_add = bibtext_to_add.split('abstract')[0]+ bibtext_to_add.split('abstract')[1].split('",').slice(1).join('",');}      //   }      let bib = await fetch("https://doi.org/" + doi_to_add, {        method: "GET",        headers: {          Accept: "application/x-bibtex; charset=utf-8",          "Content-Type": "text/html; charset=UTF-8",        },        redirect: "follow",      }).then((r) => r.text());      // console.log(bib);      // if (!(bib.error) && bib.withErrors == false) {      //   bibtext_to_add = bib;      // }      if (bib != "" && bib != null && bib.startsWith("@") == true) {        bib = bib.replace(/\$.*?\$/g, "");        bib = bib.replace(/amp/g, "");        bibtext_to_add = bib;        console.log("Found bib");        // console.log(bib)      }    } else {      let authors = [];      if (paper.authors != null) {        for (var jj = 0; jj < paper.authors.length; jj++) {          authors.push(paper.authors[jj].name);        }      }      console.log(authors.toString());      let bib_str =        "@article{" + paper.paperId + ",\n title = {" + paper.title + "},\n";      if (paper.venue != null && paper.venue != "") {        bib_str += "venue = {" + paper.venue + "},\n";      }      if (paper.year != null && paper.year != "") {        bib_str += " year = {" + paper.year + "},\n ";      }      if (paper.authors != null && paper.authors != []) {        bib_str += "author = {" + authors.join(" and ") + "}\n";      }      bib_str += "}";      console.log(bib_str);      bibtext_to_add = bib_str;    }    // get tldr from semantic scholar    let sem_scholar_ppid = paper.paperId;    let tldr = null;    const tl_f = await fetch(      `https://api.semanticscholar.org/graph/v1/paper/${encodeURIComponent(        sem_scholar_ppid      )}?fields=${encodeURIComponent("tldr")}`    ).then((r) => r.json());    if (tl_f.tldr) {      tldr = tl_f.tldr.text;    }    let updateOptions = {      page_id: i.id,      properties: {        Name: {          title: [            {              type: "text",              text: {                content:                  paper.title ||                  i.properties.Name.title[0].plain_text.replace(";", ""),              },            },          ],        },        Authors: {          multi_select: paper.authors            .filter((x) => x)            .map((x) => ({              name: x.name.replace(",", ""),            }))            .slice(0, 100),        },        Abstract: {          rich_text: [            {              text: {                content:                  (paper.abstract || "").length < 1900                    ? paper.abstract || ""                    : paper.abstract.substring(0, 1900) + "...",              },            },          ],        },        Link: {          url: paper.url,        },        Year: {          number: paper.year,        },      },    };    if (tldr) {      updateOptions.properties.tldr = {        rich_text: [          {            text: {              content: tldr,            },          },        ],      };    }    if (doi_to_add) {      updateOptions.properties.DOI = {        rich_text: [          {            text: {              content: doi_to_add,            },          },        ],      };    }    if (bibtext_to_add) {      updateOptions.properties.Bibtex = {        rich_text: [          {            text: {              content: bibtext_to_add,            },          },        ],      };      if (bibtext_to_add != "") {        updateOptions.properties.In_Text_Citation = {          rich_text: [            {              text: {                content: bibtext_to_add.split("{")[1].split(",")[0],              },            },          ],        };      }    }    try {      await notion.pages.update(updateOptions);      all_updated.push(i.properties.Name.title[0].plain_text);    } catch (e) {      console.error(`Error on ${i.id}: [${e.status}] ${e.message}`);      if (e.status == 409) {        console.log("Saving conflict, scheduling retry in 3 seconds");        setTimeout(async () => {          try {            console.log(`Retrying ${i.id}`);            await notion.pages.update(updateOptions);          } catch (e) {            console.error(              `Subsequent error while resolving saving conflict on ${i.id}: [${e.status}] ${e.message}`            );            // dont_update.push(i.id);          }        }, 3000);      } else {        // dont_update.push(i.id);      }    }    console.log("Updated " + i.properties.Name.title[0].plain_text);  }}

January 5, 2024

Add to a notion page as a callout or to a page name to notion database through todoist (corresponding valtown script)

import process from "node:process";import { TodoistApi } from "npm:@doist/todoist-api-typescript";import { Client } from "npm:@notionhq/client";const TODOIST_API_KEY = process.env.TODOIST_API_KEY;const todoistapi = new TodoistApi(TODOIST_API_KEY);const NOTION_API_KEY = process.env.NOTION_API_KEY;const notion = new Client({  auth: NOTION_API_KEY,});var add_to_notion_todoist_project_id = "PROJECT_ID_HERE";var todoist_dict_mapping = {  "habit": {    "todoist-section-id": "SECTION_ID_HERE",    "notion-map-type": "page",    "notion-id": "PAGE_ID_HERE",  },  "papers": {    "todoist-section-id": "SECTION_ID_HERE",    "notion-map-type": "database",    "notion-id": "DB_ID_HERE",  },};function getNotionId(section_id) {  if (!section_id) {    return [todoist_dict_mapping["dump"]["notion-map-type"], todoist_dict_mapping["dump"]["notion-id"]];  }  for (var key in todoist_dict_mapping) {    if (todoist_dict_mapping[key]["todoist-section-id"] === section_id) {      return [        todoist_dict_mapping[key]["notion-map-type"] || todoist_dict_mapping["dump"]["notion-map-type"],        todoist_dict_mapping[key]["notion-id"] || todoist_dict_mapping["dump"]["notion-id"],      ];    }  }  return [todoist_dict_mapping["dump"]["notion-map-type"], todoist_dict_mapping["dump"]["notion-id"]];}function convertDateObject(due) {  function convertToISOWithOffset(datetimeStr, timezoneStr) {    const date = new Date(datetimeStr);    const [, sign, hours, minutes] = timezoneStr.match(/GMT ([+-])(\d{1,2}):(\d{2})/);    date.setUTCMinutes(date.getUTCMinutes() + (parseInt(hours) * 60 + parseInt(minutes)) * (sign === "+" ? 1 : -1));    return date.toISOString().split(".")[0]      + `${sign}${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;  }  const formatDate = (date, datetime, timezone) => {    let isoString = datetime ? datetime : date;    if (timezone && timezone.startsWith("GMT") && timezone.length > 3) {      return convertToISOWithOffset(datetime, timezone);    } else {      return isoString;    }  };  return {    start: due ? formatDate(due.date, due.datetime, due.timezone) : new Date().toISOString(),    end: null,    time_zone: due && due.datetime && due.timezone && due.timezone.startsWith("GMT") && due.timezone.length > 3      ? null      : (due && due.datetime && due.timezone ? due.timezone : "America/Los_Angeles"),  };}async function addCalloutToNotionPage(page_id, content, date) {  console.log(JSON.stringify(date));  const response = await notion.blocks.children.append({    block_id: page_id,    children: [{      "callout": {        "rich_text": [{          "type": "mention",          "mention": {            "type": "date",            "date": date,          },        }],        "icon": {          "type": "external",          "external": {            "url": "https://www.notion.so/icons/circle-dot_lightgray.svg",          },        },        "children": [{          "paragraph": {            "rich_text": [{              "text": {                "content": content,              },            }],          },        }],      },    }],  });  console.log(JSON.stringify(response));}async function addPageToNotionDatabse(database_id, content) {  const response = await notion.pages.create({    "parent": {      "type": "database_id",      "database_id": database_id,    },    "properties": {      "Name": {        "title": [{          "text": {            "content": content,          },        }],      },    },  });}export default async function(interval: Interval) {  var tasks = await todoistapi.getTasks({    projectId: add_to_notion_todoist_project_id,  });  for (const task of tasks) {    console.log(task);    const [mappedNotionType, mappedNotionId] = getNotionId(task.sectionId);    if (mappedNotionId)    {      if (mappedNotionType == "page" && mappedNotionId) {        addCalloutToNotionPage(mappedNotionId, task.content, convertDateObject(task.due));      }      else if (mappedNotionType == "database" && mappedNotionId) {        addPageToNotionDatabse(mappedNotionId, task.content);      }      todoistapi.deleteTask(task.id);    }  }}

• The script either adds a page with content as title to database (which I use with Notion Reference Manager), or adds the content in callout with date to a page.
• Uses a single project in Todoist and sections to identify which page/database the content goes into

January 2, 2024

2024

2023

Under appreciated iOS apps

I switched back from iOS to android and this was a series of under appreciated iOS apps.

December 28, 2023

For 2024, I am sticking to Notion, Todoist, Raindrop, Reader, and Google Keep.

My list of apps to check out later has shortened -- Tana and Heptabase for notes, Superlist for todos, and Matter if they have a native android+tweet capture in 2025 I guess.

I think what helped was realizing, I want something that is online-first (that is sync across devices at the same time is a major thing) and collaboration first. That removed Capacities from the list. I don't know if Tana plans to have collaboration on objects (rather than workspace).

December 1, 2023

On the Roadmap

Bugs

API issues

⬜

Fix issue with notion.site being messed up because it thinks everything is part of its own site

There is no difference in API response, which is why 🤷‍♀️

⬜

Image links

Doesn’t show up in API

⬜

API issue: Inline code background is overriden to default

⬜

Synced blocks currently do not update due to cache

⬜

Cannot correctly figure out if there is interlinked content or not which leads to empty table of contents sometimes, fix that

⬜

Datatables do not follow table-layout:auto

⬜

Fix this

⬜

Add lightbox expansion to youtube videos

⬜

Shift to to make the bluesky embeds smaller

Features

Completed

In Jan 2026

✅

Because pagespeed js now loads later, when I first click search or press cmd+K, text box loses focus, fix that

In Dec 2025

✅

cover image usage

✅

Add gallery view rather than of list view

✅

Multiple authors

In Nov 2025

✅

Very much later, possibly never: include random .md or .html files on page with the nice layout, tags, rss, sitemap, post listings etc.

✅

Maybe this can be done by converting notion page into mdx instead of directly to html (keeping eventual output exactly the same)

✅

or it can be done by allowing a mixture of content — how?

✅

Maybe start with basic stuff, aka, what about content published elsewhere? Can we find a way to list it such that it redirects on clicking on listing?

In Oct 2025(Claude code, Gemini-cli and I)

✅

Bib files

✅

Support footnotes — i can try to rely on comments (though unfortunately they do not how block text, only block id) — but they won’t be replicated if the page is downloaded as markdown (comments are exported in html though); so I want to use in-page features.

✅

Fix symbols in interconnected stuff to also include combos and not just repetitions so that the length remains smaller

✅

Use tag descriptions for hover and tag page and collection description for collection page

✅

Tag descriptions

✅

Collection descriptions

✅

Descriptions in OG images

✅

1 level Nested table of contents for headings (callouts, toggles, columns) [Was done before idk when]

✅

Links inside simple tables are not read right now

✅

Popups don’t show on margin notes

✅

If you get block links/page links using copy link when the page is open in peek mode, it adds v= in the href that is then pasted leading to the href not being processed correctly.

✅

Footnotes not on pages only on posts. We might want them on pages though?

✅

Uploaded icons to pages do not show up in page mentions (linked ones do)

✅

Try adding this for images instead of optimizing myself?

Image opt

Bookmark for https://github.com/lyonsyonii/astro-preload#readme

Bookmark for https://alpacat.com/posts/astrojs-assets

Or

Bookmark for https://docs.astro.build/en/recipes/dynamically-importing-images/

Bookmark for https://github.com/markteekman/accessible-astro-components

In Sep 2025

✅

Add option to download cached content using workflow

✅

Pre-filled search results based off query parameters

✅

Notion wraps default shortcode for inject and iframe

✅

Fix:

✅

Fix too many tags all in new line issue:

In Dec 2024

✅

Need to fix this: [WARN] Astro.request.headers is unavailable in "static" output mode, and in prerendered pages within "hybrid" and "server" output modes. If you need access to request headers, make sure that output is configured as either "server" or output: "hybrid" in your config file, and that the page accessing the headers is rendered on-demand. — started happening when I upgraded to astro 4.16 😠

No longer happens in v5, but I will check it out if it reappears

✅

Add option to remove caches from repo using github token

So automatic authentication doesn’t work with gh actions-cache extension AND it is deprecated

Neither does the new gh actions

Attempt 1

name: Deploy to GitHub Pageson:  push:    branches: [main]  schedule:    - cron: "0 */8 * * *"  workflow_dispatch:permissions:  contents: read  pages: write  id-token: writeconcurrency:  group: "pages"  cancel-in-progress: trueenv:  BUILD_PATH: "."  NOTION_API_SECRET: ${{ secrets.NOTION_API_SECRET }}jobs:  build:    runs-on: ubuntu-latest    environment: github-pages    timeout-minutes: 45    steps:      - name: Checkout your repository using git        uses: actions/checkout@v4      - name: Setup Node        uses: actions/setup-node@v4        with:          node-version: 21      # Idea from https://www.voorhoede.nl/en/blog/super-fast-npm-install-on-github-actions/      - name: Cache node manually        id: npm-cache        uses: actions/cache@v4        with:          path: ./node_modules          key: modules-${{ hashFiles(format('{0}/package-lock.json', env.BUILD_PATH)) }}      - name: Install dependencies        if: steps.npm-cache.outputs.cache-hit != 'true'        run: npm ci --ignore-scripts        working-directory: ${{ env.BUILD_PATH }}      - name: Setup Pages        id: pages        uses: actions/configure-pages@v5      - name: Restore cached tmp        if: steps.npm-cache.outputs.cache-hit == 'true'        id: cache-tmp-restore        uses: actions/cache/restore@v4        with:          path: ./tmp          key: ${{ runner.os }}-${{steps.pages.outputs.origin}}-${{steps.pages.outputs.base_path}}-tmp-blogtrotion-${{ github.run_id }}-${{ github.run_attempt }}          restore-keys: ${{ runner.os }}-${{steps.pages.outputs.origin}}-${{steps.pages.outputs.base_path}}-tmp-blogtrotion-      - name: Restore cached public        if: steps.npm-cache.outputs.cache-hit == 'true'        id: cache-public-restore        uses: actions/cache/restore@v4        with:          path: ./public          key: ${{ runner.os }}-${{steps.pages.outputs.origin}}-${{steps.pages.outputs.base_path}}-public-blogtrotion-${{ github.run_id }}-${{ github.run_attempt }}          restore-keys: ${{ runner.os }}-${{steps.pages.outputs.origin}}-${{steps.pages.outputs.base_path}}-public-blogtrotion-      - name: Set and log environment secrets and variables and then Build with Astro and postbuild for pagefind        env:          NOTION_API_SECRET: ${{ secrets.NOTION_API_SECRET }}          GITHUB_PAGES: true          SITE: ${{ steps.pages.outputs.origin }}          BASE: ${{ steps.pages.outputs.base_path }}        run: |          echo "NOTION_API_SECRET = $NOTION_API_SECRET"          echo "GITHUB_PAGES = $GITHUB_PAGES"          echo "SITE = $SITE"          echo "BASE = $BASE"          npx --no-install astro build          # or if you prefer yarn, use: yarn build          # --site and --base flags can be included if needed for Astro          # --site steps.pages.outputs.origin" \          # --base steps.pages.outputs.base_path"          npx --no-install pagefind --site dist        working-directory: ${{ env.BUILD_PATH }}      - name: Save new tmp cache        id: cache-tmp-save        uses: actions/cache/save@v4        with:          path: ./tmp          key: ${{ runner.os }}-${{steps.pages.outputs.origin}}-${{steps.pages.outputs.base_path}}-tmp-blogtrotion-${{ github.run_id }}-${{ github.run_attempt }}      - name: Save new public cache        id: cache-public-save        uses: actions/cache/save@v4        with:          path: ./public          key: ${{ runner.os }}-${{steps.pages.outputs.origin}}-${{steps.pages.outputs.base_path}}-public-blogtrotion-${{ github.run_id }}-${{ github.run_attempt }}      - name: Upload artifact        uses: actions/upload-pages-artifact@v3        with:          path: ${{ env.BUILD_PATH }}/dist  deploy:    needs: build    runs-on: ubuntu-latest    name: Deploy    environment:      name: github-pages      url: ${{ steps.deployment.outputs.page_url }}    steps:      - name: Deploy to GitHub Pages        id: deployment        uses: actions/deploy-pages@v4  workflow-keepalive:    if: github.event_name == 'schedule'    runs-on: ubuntu-latest    permissions:      actions: write    steps:      - uses: liskin/gh-workflow-keepalive@v1

Info

Bookmark for https://cli.github.com/manual/gh_cache_delete

Bookmark for https://docs.github.com/en/actions/writing-workflows/choosing-what-your-workflow-does/accessing-contextual-information-about-workflow-runs#github-context

Bookmark for https://github.com/azu/github-actions-overwrite-cache-example

✅

Fix RSS, currently it only has the title and not the complete content and I DO NOT WANT THAT

Some internet stuff for this

Bookmark for https://blog.damato.design/posts/astro-rss-mdx/

Bookmark for https://scottwillsey.com/rss-pt2/

Bookmark for https://scottwillsey.com/sanitize-html/

Bookmark for https://equk.co.uk/2023/02/22/atom-feed-generation-script/

Bookmark for https://www.jsonfeed.org/

Bookmark for https://birtles.blog/2023/10/02/rss-the-hard-way/

Bookmark for https://github.com/wezm/rsspls

Bookmark for https://chrismorgan.info/feed.xml

✅

Look at copy method here: https://github.com/otoyo/astro-notion-blog/issues/205

In Nov 2024

✅

Embed bluesky

In Notion

Mentions bluesky post

✅

Comments using bluesky (see https://graysky.app/blog/2024-02-05-adding-blog-comments, A comment system on top of ATProto and Bluesky, Adding Bluesky Comments to Your Astro Blog, https://www.coryzue.com/writing/bluesky-comments/, https://bsky.app/profile/louee.bsky.social/post/3lbsizqjik22o, https://nicoritschel.com/writing/bluesky, https://github.com/ascorbic/bluesky-comments-tag, https://jack.is/posts/bluesky-comments and https://emilyliu.me/blog/comments)

✅

Fix the display option of bluesky comments, aka, if no post is found or there is an error, remove that tab (and remove the complete comments div if there is no giscus involved)

✅

Add umami as an option: https://github.com/yeskunall/astro-umami

https://github.com/umami-software/umami/discussions/2826#discussioncomment-10815810

✅

Support for custom emojis

Liamm_top asked to see if there is a way to fix this for Chinese deployment which needs:

✅

Fix the slug regex to support chinese characters Mar 8, 2024

✅

Deploy to vercel

✅

Caching in vercel? (somehow it works — see https://github.com/nerdymomocat-templates/webtrotion-astro-notion-cms-website-blog/issues/3

✅

Collections are being cleared in slug for chinese characters and tags Mar 8, 2024

✅

Icon has issues in satori when deploying on custom domains or has base URL? Mar 7, 2024

✅

Remove pnpm Feb 25, 2024

✅

OG image font for a different language Mar 7, 2024

In Sept 2024

✅

Paste as mentions in notion doesn’t work?

The fudge, does not show up in API too?

In Aug 2024

✅

#IMP

✅

There is overscroll on chrome on iOS (not on safari, not even on arc). Aug 18, 2024: apparently this is only on iPhone SE and I do not have the patience to figure it out

✅

And the back to top button overlaps the toc button on pages,

✅

and the toc size is too tall for iOS (because address bar thing and SE is tiny)

✅

Currently the font size is fixed for any screen/viewport size but this shouldn’t be the case. so i need to find a way to fix that.

✅

Search on mobile also has open tags which is irritating

✅

Headings on same page should not show a popup, they should directly link to that position on click. The popup is useless in that case.

Problem? Currently there is no way to know if the linked block is on the same page or is on a different page; and the idea is we want the headings popup to show up if it is on a different page.

In June/July 2024

✅

Issue with meta scraper sometimes (some URLs are fine in the same run)

Details

Seems like a kofi blocking thing? Yeah and found Jul 25, 2024 that even using dub.sh or something like that also does not work

I tried doing something like this but I do not like how it looks:

<!--Commenting here so that it does not inject --><!DOCTYPE html> <!-- inject --><script src='https://storage.ko-fi.com/cdn/scripts/overlay-widget.js'></script><script>  kofiWidgetOverlay.draw('nerdymomocat', {    'type': 'floating-chat',    'floating-chat.donateButton.text': 'Buy me a coffee',    'floating-chat.donateButton.background-color': '#F3E1C6',    'floating-chat.donateButton.text-color': '#4F1116'  });</script>

i tried this too but did not like how long af it was\

<!--Commenting here so that it does not inject --><!DOCTYPE html> <!-- inject --><a  href="https://ko-fi.com/nerdymomocat"  target="_blank"  rel="noopener noreferrer"  class="flex w-full min-w-0 max-w-full grow select-none items-stretch overflow-hidden rounded border border-gray-200 no-underline dark:border-gray-800">  <div    class="flex-bookmark-text overflow-hidden p-3 text-left text-textColor/90"  >    <div      class="mb-0.5 h-6 overflow-hidden truncate whitespace-nowrap leading-5"    >      Support Nerdy Momo Cat on Ko-fi! Buy her a hot chocolate ❤️    </div>    <div      class="h-8 overflow-hidden text-xs leading-4 opacity-80"    >      Support Nerdy Momo Cat On Ko-fi. Ko-fi lets you support the people and causes you love with small donations    </div>    <div class="mt-1.5 flex max-w-full">      <div class="mr-1.5 h-4 w-4 min-w-4">        <img          class="inline-block max-w-full"          loading="lazy"          src="https://www.google.com/s2/favicons?domain=ko-fi.com"          alt="title"          decoding="async"        />      </div>      <div        class="overflow-hidden truncate whitespace-nowrap text-xs leading-4"      >        https://ko-fi.com/      </div>    </div>  </div>  <div    class="flex-bookmark-image relative hidden sm:block"  >    <img      class="!absolute h-full w-full object-contain object-right"      loading="lazy"      src="https://storage.ko-fi.com/cdn/useruploads/138404e3-801f-4922-beb3-0db70efc0578_ed507fa6-95c6-4a2f-9dc9-e97d8d19cab4.png"      alt="title"      decoding="async"    />  </div></a>

thought about using this but i do not like how it adds extra useless javascript

<!--Commenting here so that it does not inject --><!DOCTYPE html> <!-- inject --><script type='text/javascript' src='https://storage.ko-fi.com/cdn/widget/Widget_2.js'></script><script type='text/javascript'>kofiwidget2.init('Support my bread addiction', '#4A1510', 'I2I6X8MM3');kofiwidget2.draw();</script> 

this looks ugly

<!--Commenting here so that it does not inject --><!DOCTYPE html> <!-- inject --><div>    <a href="https://www.buymeacoffee.com/yourusername" target="_blank" rel="noopener noreferrer"        style="            background-color: #f59e0b;            color: white;            font-weight: 500;            border-radius: 6px;            padding: 8px 16px;            display: inline-flex;            align-items: center;            justify-content: center;            text-decoration: none;            transition: background-color 0.3s ease-in-out;            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);        "        onmouseover="this.style.backgroundColor='#d97706'"        onmouseout="this.style.backgroundColor='#f59e0b'"    >        <span style="font-size: 1.125rem; margin-right: 8px;">☕</span>        Buy me a coffee    </a></div>

✅

Fix plain text does not match, using plaintext

✅

scrolling expanding table of contents (this can be done using intersection observer — I am not sure it is worth doing though? Or it might be)

✅

Fix the distance between toc and toc button on mobile

✅

Fix:

[Shiki] 10 instances have been created. Shiki is supposed to be used as a singleton, consider refactoring your code to cache your highlighter instance; Or call highlighter.dispose() to release unused instances.

Solved — use this transformers = {TRANSFORMER_FUNCTIONS_ARR} instead of changing array based on shortcode because it creates a new highlighter then.

✅

⚠️ keep an eye on build times though!

✅

And maybe move metascraper out and just use noembed instead?

Bookmark for https://noembed.com/

✅

Use expressive code? though I am not sure how we will get that information from Notion? Maybe from a caption? Or from a shortcode at start of the code block like code inject?

Also update here:

Bookmark for https://github.com/expressive-code/expressive-code/issues/28#issuecomment-1904949907

More update here:

AstroAstro 4.11 | Astro with Pine Wu, Anthony FuShiki

• Attempted here: 1

✅

Starlight also has an interesting mobile menu implementation btw

✅

Add sort, filter to tables?

Simple Data Tables, Sortable, List.js, Filterlist

In March 2024

✅

Clicking read more (on mobile at least) does not close the popup?

✅

dynamically load og image fonts

✅

Fix OG image generation with the logo

✅

add a print stylesheet

✅

Set the bookmarks to take full width?

✅

Add error fixing to astro notion tweet, because if someone deletes the tweet that has been embedded, the build stops

✅

Fix web-bookmark sizing being all over the place

✅

Tags on the page when they wrap do not have vertical spacing

✅

Do not height restrict mermaid previews

✅

bold headings by default

✅

extend bookmark full width if no image

---

✅

Static Regeneration

Docs

Bookmark for https://logsnag.com/blog/implementing-isr-in-astro

Bookmark for https://vercel.com/docs/frameworks/astro

Bookmark for https://developers.netlify.com/guides/how-to-do-advanced-caching-and-isr-with-astro/

Bookmark for https://docs.astro.build/en/guides/middleware/

✅

Menu bar on mobile only clicks on words not the whole line

✅

sticky header (CANCELLED - I DO NOT LIKE THIS MUCH)

✅

referenced pages, referenced in pages etc

✅

Remember for later, we did not move collections out like tags because we would kinda need to have all collections list page and that makes no sense

Oh, it already gives an error anyway

✅

html embedded into iframe rather than inserted into div - some 5 min exploration did not work

✅

Fix lightbox

✅

google maps embed

✅

pdf embed

✅

OG only for recent entries in single page preview collections

Lol! Later? I did it Nov 28, 2023, 05:44 AM just because it was absolutely NOT needed

✅

Only run cron if anything in notion has been updated (might need to look into build adapters)

✅

incremental builds (On-Demand Incremental Static Regeneration) when astro implements them

kinda doing them right now with aggressive caching of API requests at elast

✅

Issues with sitemap:

Screenshot

Bookmark for https://rodneylab.com/astro-sitemaps/

✅

Sometimes when the page height is tiny, like this one because information is all hidden in toggles or stream posts, giscus loads immediately causing a 500ms block time at least. Look into this for that

Bookmark for https://www.brycewray.com/posts/2023/08/making-giscus-less-gabby/#fnref:3

Jun 14, 2024

✅

Pinned posts for a collection?

✅

Email clicks should copy email and show a toast, not open a mailto: link.

✅

When linking to a block that is a toggle, and it is shown in popup, it feels weird, that I can click the arrow, but nothing opens up