DEV Community: Louis Liu

Automate the Boring Stuff: Electron macOS Signing & Notarization in One Git Push

Louis Liu — Tue, 02 Jun 2026 05:26:43 +0000

Bringing your imagination to life through desktop apps has become easier with AI. As a web developer, I started creating desktop apps with Electron + TypeScript. Turning my ideas into real apps is much easier nowadays. However, sharing my app with others on macOS became a problem. There are two blockers:

macOS has Gatekeeper, which prevents users from opening unsigned apps. This creates a bad user experience.
How can I distribute my app to others?

The first issue is easy to resolve: you just need some money. Simply join the Apple Developer Program. My answer to the second issue is to use electron-builder and GitHub Actions to build a CD pipeline.

Let's see how I did it. First, let's get the Apple credentials in order.

Prerequisites

Before you start, you need an Apple Developer Program membership ($99/year). Without it, you cannot obtain a "Developer ID Application" certificate, and Apple's notarization service will reject your submissions.

Required Setup: Five Environment Secrets

All secrets must be configured at GitHub → repo → Settings → Secrets and variables → Actions → New repository secret.

1. APPLE_ID

Your Apple ID email address used to sign into the Apple Developer Program at developer.apple.com.

2. APPLE_TEAM_ID

A 10-character team identifier (example: A1B2C3D4E5). Location:

Sign in to developer.apple.com/account
Click Membership details in sidebar
Copy the Team ID value

Alternative method from a Mac with Developer ID certificate installed:

security find-identity -v -p codesigning | grep "Developer ID Application"

3. APPLE_APP_SPECIFIC_PASSWORD

A one-off password Apple's notary service uses instead of your real Apple ID password. It does not unlock your Apple account — only the notarytool API.

Steps to create:

Visit account.apple.com and sign in
Navigate to Sign-In and Security → App-Specific Passwords
Generate new password labeled your-app-notarize
Format: xxxx-xxxx-xxxx-xxxx

4. CSC_LINK (Code-Signing Certificate)

Your Developer ID Application certificate, exported as .p12 and base64-encoded.

Certificate Creation (one-time):

Open Keychain Access → Certificate Assistant → Request Certificate from Authority
Save to disk as .certSigningRequest
Visit developer.apple.com/account/resources/certificates/list
Create Developer ID Application certificate, upload CSR
Download .cer file and add to login keychain

Export Process:

Open Keychain Access, select login keychain
Locate Developer ID Application: Your Name (TEAMID)
Select certificate and private key child item (Cmd-click both)
Right-click → Export 2 items → Save as your-app-signing.p12
Choose strong export password for CSC_KEY_PASSWORD

Base64 Encoding:

base64 -i your-app-signing.p12 -o your-app-signing.p12.b64
pbcopy < your-app-signing.p12.b64

Paste clipboard contents as CSC_LINK value. Delete .p12 and .b64 files afterward.

5. CSC_KEY_PASSWORD

The password chosen when exporting the .p12 file — enter as literal string without encoding or quotes.

Tip: CSC_LINK and CSC_KEY_PASSWORD are magic variable names that electron-builder reads automatically — you don't need to reference them in your scripts.

Project Configuration

With secrets in place, your Electron project needs four pieces of configuration: the electron-builder config, an entitlements plist, a notarization script, and a stapling script.

electron-builder Configuration

Create an electron-builder.json (or add the equivalent keys to package.json) with the signing-related fields:

{
  "appId": "com.example.myapp",
  "productName": "my-app",
  "directories": {
    "output": "build",
    "buildResources": "resources"
  },
  "afterSign": "scripts/notarize.cjs",
  "afterAllArtifactBuild": "scripts/staple.cjs",
  "files": [
    "out/**/*",
    "resources/**/*",
    "package.json"
  ],
  "mac": {
    "category": "public.app-category.productivity",
    "hardenedRuntime": true,
    "gatekeeperAssess": false,
    "entitlements": "resources/entitlements.mac.plist",
    "entitlementsInherit": "resources/entitlements.mac.plist",
    "target": [
      { "target": "dmg" },
      { "target": "zip" }
    ]
  },
  "dmg": {
    "artifactName": "${productName}-${version}-${arch}.dmg"
  },
  "asar": true,
  "npmRebuild": false
}

Key fields to understand:

Field	Why it matters
`afterSign`	Points to the notarization script. electron-builder calls it after code-signing finishes but before packaging into DMG/ZIP.
`afterAllArtifactBuild`	Points to the stapling script. Called after all artifacts (DMG, ZIP, blockmap) are written.
`hardenedRuntime: true`	Required for notarization. Without this, Apple will reject your submission.
`gatekeeperAssess: false`	Skips the local `spctl --assess` check, which can give false negatives on CI.
`entitlements` / `entitlementsInherit`	Path to the entitlements plist. `entitlementsInherit` applies the same entitlements to nested helper binaries.

Entitlements Plist

Electron apps need specific entitlements to run under Apple's Hardened Runtime. Create resources/entitlements.mac.plist:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN"
  "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
    <key>com.apple.security.cs.allow-jit</key>
    <true/>
    <key>com.apple.security.cs.allow-unsigned-executable-memory</key>
    <true/>
    <key>com.apple.security.cs.disable-library-validation</key>
    <true/>
    <key>com.apple.security.cs.disable-executable-page-protection</key>
    <true/>
  </dict>
</plist>

Why these entitlements? Electron's V8 engine uses JIT compilation and dynamic code generation, which the Hardened Runtime blocks by default. These four entitlements re-enable what Electron needs to function:

allow-jit — Lets V8 mark memory as executable for JIT-compiled code.
allow-unsigned-executable-memory — Allows V8 to execute dynamically generated code that isn't signed.
disable-library-validation — Permits loading native Node modules (.node files) that aren't signed with the same team ID.
disable-executable-page-protection — Allows pages to be both writable and executable (needed by V8).

If your app uses Apple Events (e.g., reading the frontmost app), also add:

<key>com.apple.security.automation.apple-events</key>
<true/>
<key>com.apple.security.temporary-exception.apple-events</key>
<true/>

Notarization Script (`afterSign` Hook)

Install the @electron/notarize package first:

npm install --save-dev @electron/notarize

Then create scripts/notarize.cjs:

const path = require('path');
const { notarize } = require('@electron/notarize');

module.exports = async function notarizeHook(context) {
  const { electronPlatformName, appOutDir, packager } = context;

  // Only notarize macOS builds
  if (process.platform !== 'darwin') return;
  if (electronPlatformName !== 'darwin') return;

  // Gate on NOTARIZE env var so local builds skip this
  if (process.env.NOTARIZE !== 'true') {
    console.log('[notarize] Skipping (NOTARIZE != true).');
    return;
  }

  const appleId = process.env.APPLE_ID;
  const appleIdPassword = process.env.APPLE_APP_SPECIFIC_PASSWORD;
  const teamId = process.env.APPLE_TEAM_ID;

  if (!appleId || !appleIdPassword) {
    console.warn('[notarize] Missing APPLE_ID or APPLE_APP_SPECIFIC_PASSWORD.');
    return;
  }

  const appName = packager.appInfo.productFilename;
  const appPath = path.join(appOutDir, `${appName}.app`);

  console.log(`[notarize] Notarizing ${appPath} ...`);

  await notarize({
    appBundleId: packager.appInfo.bundleId,
    appPath,
    appleId,
    appleIdPassword,
    teamId,
    tool: 'notarytool',
  });

  console.log('[notarize] Done.');
};

How it works:

electron-builder calls this function after signing the .app bundle.
It checks for NOTARIZE=true — this lets you skip notarization during local development (npm run build won't try to notarize).
It submits the .app to Apple via notarytool (the modern replacement for altool).
The function blocks until Apple's servers return a success/failure response (typically 1–5 minutes).

Stapling Script (`afterAllArtifactBuild` Hook)

After notarization succeeds, you should staple the notarization ticket directly to your artifacts. This way, users can verify your app even without an internet connection.

Create scripts/staple.cjs:

const { execFileSync } = require('child_process');
const path = require('path');
const fs = require('fs');

function staple(targetPath) {
  execFileSync('xcrun', ['stapler', 'staple', '-v', targetPath], {
    stdio: 'inherit',
  });
}

module.exports = async function stapleHook(context) {
  if (process.platform !== 'darwin') return;
  if (process.env.NOTARIZE !== 'true') {
    console.log('[staple] Skipping (NOTARIZE != true).');
    return;
  }

  const { appOutDir, electronPlatformName, packager } = context;
  if (electronPlatformName !== 'darwin') return;

  // Staple the .app bundle
  const appName = packager.appInfo.productFilename;
  const appPath = path.join(appOutDir, `${appName}.app`);
  if (fs.existsSync(appPath)) {
    staple(appPath);
  }

  // Staple DMG and ZIP artifacts
  const { outDir } = packager;
  for (const f of fs.readdirSync(outDir)) {
    if (f.endsWith('.dmg') || f.endsWith('.zip')) {
      staple(path.join(outDir, f));
    }
  }
};

Why a separate script? The afterSign hook runs after the .app is signed but before DMG/ZIP artifacts are created. The afterAllArtifactBuild hook runs after all artifacts exist — so that's when we can staple everything.

Why staple the .app too? The .app inside the DMG should have the ticket stapled before the DMG is created. Since afterAllArtifactBuild runs after DMG creation, we staple the .app as well so that if anyone extracts it directly, it's still stapled.

The `NOTARIZE` Environment Variable

Both scripts check process.env.NOTARIZE !== 'true' before doing anything. This is a simple gating mechanism:

In CI — set NOTARIZE: true in the workflow env block. Notarization and stapling run automatically.
In local development — don't set it. Running npm run build && npx electron-builder --mac will sign (if you have a certificate in your keychain) but skip notarization entirely, saving 1–5 minutes per build.

Local Verification

Before pushing to GitHub Actions, test the signed build locally:

export CSC_LINK="$(base64 -i your-app-signing.p12)"
export CSC_KEY_PASSWORD='your-p12-password'
export APPLE_ID='you@example.com'
export APPLE_APP_SPECIFIC_PASSWORD='xxxx-xxxx-xxxx-xxxx'
export APPLE_TEAM_ID='A1B2C3D4E5'
export NOTARIZE=true

npm run build
npx electron-builder --mac --arm64 --publish never

Success indicators:

Log shows: signing ... identity=Developer ID Application: Your Name (TEAMID)
Log shows: [notarize] Notarizing /.../your-app.app.
Log shows: [notarize] Notarization complete.
Log shows: [staple] ... The staple and validate action worked!

Common failure causes:

Incorrect Team ID (must match certificate)
Missing entitlements file (resources/entitlements.mac.plist)
Revoked or mistyped app-specific password

GitHub Actions Workflow

Below is the complete workflow file (.github/workflows/build.yml). It builds for both x64 and arm64 using a matrix strategy, then merges artifacts into a single GitHub Release.

name: Build and Release

on:
  push:
    tags: ['v*']
  workflow_dispatch: {}

permissions:
  contents: write

jobs:
  build-macos:
    runs-on: macos-15
    strategy:
      matrix:
        arch: [x64, arm64]
    env:
      CSC_LINK: ${{ secrets.CSC_LINK }}
      CSC_KEY_PASSWORD: ${{ secrets.CSC_KEY_PASSWORD }}
      APPLE_ID: ${{ secrets.APPLE_ID }}
      APPLE_APP_SPECIFIC_PASSWORD: ${{ secrets.APPLE_APP_SPECIFIC_PASSWORD }}
      APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
      NOTARIZE: true
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 24
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Build app
        run: npm run build

      - name: Build Electron app (per-arch)
        run: |
          if [ "${{ matrix.arch }}" = "arm64" ]; then
            npx electron-builder --mac --arm64 --publish never
          else
            npx electron-builder --mac --x64 --publish never
          fi

      - name: Rename latest-mac.yml per architecture
        run: |
          if [ -f build/latest-mac.yml ]; then
            mv build/latest-mac.yml build/latest-mac-${{ matrix.arch }}.yml
          fi

      - name: Upload macOS artifacts
        uses: actions/upload-artifact@v4
        with:
          name: macos-artifacts-${{ matrix.arch }}
          path: |
            build/*.dmg
            build/*.zip
            build/latest-mac-${{ matrix.arch }}.yml
            build/*.blockmap
          retention-days: 1

  create-release:
    needs: [build-macos]
    if: startsWith(github.ref, 'refs/tags/v')
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Download all artifacts
        uses: actions/download-artifact@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 24

      - name: Merge macOS update manifests
        run: |
          mkdir -p combined
          node scripts/merge-latest-mac.cjs \
            --x64 macos-artifacts-x64/latest-mac-x64.yml \
            --arm64 macos-artifacts-arm64/latest-mac-arm64.yml \
            --out combined/latest-mac.yml

      - name: Create GitHub Release
        uses: softprops/action-gh-release@v1
        with:
          files: |
            macos-artifacts-*/**/*
            combined/latest-mac.yml
          draft: true
          generate_release_notes: true
          token: ${{ secrets.GITHUB_TOKEN }}

Key points about this workflow

workflow_dispatch: {} — This lets you trigger the workflow manually from the GitHub Actions UI, which is useful for testing your signing/notarization setup without creating a release tag.

Why --publish never? — We don't want electron-builder to push artifacts anywhere. Instead, we upload them as GitHub Actions artifacts, then combine them in the release job.

Why matrix builds instead of --mac --x64 --arm64? — Building both architectures in a single job would work, but matrix builds run in parallel, cutting your CI time roughly in half.

Why rename latest-mac.yml? — Each arch build produces a latest-mac.yml manifest. If both artifacts upload with the same filename, one overwrites the other. Renaming to latest-mac-x64.yml / latest-mac-arm64.yml preserves both, so the release job can merge them.

Merging Multi-Arch Update Manifests

When you build for x64 and arm64 separately, each build produces its own latest-mac.yml — the manifest that electron-updater uses to check for updates. You need to merge these into a single latest-mac.yml that lists both architectures.

Create scripts/merge-latest-mac.cjs:

const fs = require('fs');
const path = require('path');

function parseArgs() {
  const args = process.argv.slice(2);
  const opts = {};
  for (let i = 0; i < args.length; i++) {
    if (args[i].startsWith('--')) {
      const key = args[i].slice(2);
      opts[key] = args[i + 1] && !args[i + 1].startsWith('--')
        ? args[++i]
        : true;
    }
  }
  return opts;
}

function parseManifest(text) {
  const o = { files: [] };
  let current = null;
  for (const line of text.split(/\r?\n/)) {
    if (/^version: /.test(line))
      o.version = line.replace(/^version:\s*/, '').trim();
    else if (/^\s*-\s+url: /.test(line)) {
      current = { url: line.replace(/^\s*-\s+url:\s*/, '').trim() };
      o.files.push(current);
    } else if (current && /^\s{2,}(sha512|size|blockMapSize): /.test(line)) {
      const m = line.trim().match(/^(sha512|size|blockMapSize):\s*(.*)$/);
      if (m) current[m[1]] = m[2].trim();
    } else if (/^path: /.test(line))
      o.path = line.replace(/^path:\s*/, '').trim();
    else if (/^sha512: /.test(line) && !o.sha512)
      o.sha512 = line.replace(/^sha512:\s*/, '').trim();
    else if (/^releaseDate: /.test(line))
      o.releaseDate = line.replace(/^releaseDate:\s*/, '').trim();
  }
  return o;
}

function toYAML(o) {
  let out = `version: ${o.version}\nfiles:\n`;
  for (const f of o.files) {
    out += `  - url: ${f.url}\n`;
    if (f.sha512) out += `    sha512: ${f.sha512}\n`;
    if (f.size) out += `    size: ${f.size}\n`;
    if (f.blockMapSize) out += `    blockMapSize: ${f.blockMapSize}\n`;
  }
  out += `path: ${o.path}\nsha512: ${o.sha512}\n`;
  out += `releaseDate: ${o.releaseDate}\n`;
  return out;
}

function main() {
  const { x64, arm64, out } = parseArgs();
  if (!x64 && !arm64) {
    console.error('Supply --x64 and/or --arm64 manifest paths.');
    process.exit(1);
  }

  const x64Data = x64 && fs.existsSync(x64)
    ? parseManifest(fs.readFileSync(x64, 'utf8'))
    : null;
  const arm64Data = arm64 && fs.existsSync(arm64)
    ? parseManifest(fs.readFileSync(arm64, 'utf8'))
    : null;

  if (!x64Data && !arm64Data) {
    console.error('Neither manifest file exists.');
    process.exit(1);
  }

  const merged = {
    version: (x64Data || arm64Data).version,
    files: [],
    path: (x64Data || arm64Data).path,
    sha512: (x64Data || arm64Data).sha512,
    releaseDate: [x64Data?.releaseDate, arm64Data?.releaseDate]
      .filter(Boolean)
      .sort()
      .pop(),
  };

  for (const m of [x64Data, arm64Data]) {
    if (!m) continue;
    for (const f of m.files) {
      if (!merged.files.find((e) => e.url === f.url)) {
        merged.files.push(f);
      }
    }
  }
  merged.files.sort((a, b) => a.url.localeCompare(b.url));

  const yaml = toYAML(merged);
  if (out) {
    fs.mkdirSync(path.dirname(out), { recursive: true });
    fs.writeFileSync(out, yaml);
    console.log(`Merged manifest -> ${out}`);
  } else {
    process.stdout.write(yaml);
  }
}

main();

What does the merged manifest look like?

version: 1.0.0
files:
  - url: my-app-1.0.0-arm64.dmg
    sha512: abc123...
    size: 95000000
  - url: my-app-1.0.0-arm64.dmg.blockmap
    sha512: def456...
    size: 100000
  - url: my-app-1.0.0-x64.dmg
    sha512: ghi789...
    size: 98000000
  - url: my-app-1.0.0-x64.dmg.blockmap
    sha512: jkl012...
    size: 102000
path: my-app-1.0.0-x64.dmg
sha512: ghi789...
releaseDate: '2025-01-15T12:00:00.000Z'

electron-updater reads this file and picks the correct architecture-specific artifact to download.

Triggering a Release

To trigger the workflow, you need a version tag. Here's a helper script (scripts/release.sh) that bumps the version and creates the tag:

#!/usr/bin/env bash
set -euo pipefail

NEW_VERSION="${1:?Usage: ./scripts/release.sh <version>  e.g. 0.1.0}"

# Ensure working tree is clean
if [ -n "$(git status --porcelain)" ]; then
  echo "Working tree is dirty. Commit or stash changes first."
  exit 1
fi

# Stay in sync with remote
git fetch origin
git merge-base --is-ancestor origin/main HEAD || {
  echo "Local main is behind origin. Pull first."; exit 1;
}

# Bump version in package.json (no auto-tag from npm)
npm version "$NEW_VERSION" --no-git-tag-version

# Update lockfile
npm install --package-lock-only

# Commit and tag
git add package.json package-lock.json
git commit -m "chore(release): bump version to $NEW_VERSION"
git tag -a "v$NEW_VERSION" -m "Release v$NEW_VERSION"

echo ""
echo "Done. To publish:"
echo "  git push origin main"
echo "  git push origin v$NEW_VERSION"

Then run:

./scripts/release.sh 0.1.0
git push origin main
git push origin v0.1.0

Pushing the tag triggers the workflow (because of on: push: tags: ['v*']), which builds, signs, notarizes, staples, and creates a draft GitHub Release for you to review before publishing.

Ending

That's it — with these pieces in place, every git push origin v* gives you a signed, notarized, and stapled macOS build ready for distribution. No more Gatekeeper warnings, no manual steps. Push a tag, review the draft release, and ship it.

I'm using this workflow in two of my projects — Snap Mind and deskopilot. Feel free to check them out for a real-world reference.

You Can Probably Use Claude Code for Free at Work

Louis Liu — Wed, 13 May 2026 02:03:18 +0000

If your company has already deployed Claude models on Microsoft Foundry, you can basically use Claude Code for free and save $17/month on a Claude subscription.

Check Your Access to Foundry

Microsoft Foundry (formerly Azure AI Studio) is a unified, enterprise-grade AI platform-as-a-service designed for developers to build, customize, and deploy AI applications and agents.

Go to https://ai.azure.com/nextgen
Click Build on the top navigation bar
Click Models in the side menu

Make sure your organization already has Claude models deployed in Foundry (for example claude-opus-4-7).

Connect Foundry Models to Claude Code

I recommend using Entra ID + Azure CLI authentication. It's safer and more convenient than managing API keys manually.

Install Azure CLI before continuing:

https://learn.microsoft.com/en-us/cli/azure/install-azure-cli?view=azure-cli-latest

After installing Azure CLI, sign in with:

az login

Set the following environment variables to enable Microsoft Foundry integration in Claude Code.

I usually put them in my .zshrc.

# Enable Microsoft Foundry integration
export CLAUDE_CODE_USE_FOUNDRY=1

# Azure resource name (replace {resource} with your resource name)
export ANTHROPIC_FOUNDRY_RESOURCE={resource}

# Or provide the full base URL:
# export ANTHROPIC_FOUNDRY_BASE_URL=https://{resource}.services.ai.azure.com/anthropic

In the current Foundry UI, resource are renamed to project.

Set the model variables to match your deployment names.

By default, the opus alias on Foundry may still resolve to Opus 4.6. To make sure Claude Code uses Opus 4.7, explicitly set:

export ANTHROPIC_DEFAULT_OPUS_MODEL='claude-opus-4-7'
export ANTHROPIC_DEFAULT_SONNET_MODEL='claude-sonnet-4-6'
export ANTHROPIC_DEFAULT_HAIKU_MODEL='claude-haiku-4-5'

Common Issues

Wrong Azure tenant

If your company uses multiple Azure tenants, az login may authenticate against the wrong one.

Check your current tenant with:

az account show

Switch tenants if needed:

az login --tenant <tenant-id>

Deployment name mismatch

The model name in Claude Code must match the deployment name configured in Foundry.

For example:

export ANTHROPIC_DEFAULT_OPUS_MODEL='claude-opus-4-7'

must exactly match the deployment name shown in the Foundry Models page.

Side Notes

Some companies provide Azure subscriptions or enterprise credits for internal development.

So even if your IT team has not deployed Claude models yet, you may still be able to deploy them yourself.

Just make sure you have permission before creating resources.

Building a Mini Basketball Game as a VS Code Extension

Louis Liu — Sat, 28 Feb 2026 08:58:54 +0000

I've always wanted to build my own game. Recently, I started learning game development. My first experimental project is a VS Code extension called Swipe Hoop.

It's a basketball mini-game you can play inside VS Code. I wanted to call it "Swipe Basketball" but due to VS Code Marketplace review policies, I couldn't use words like "basketball" or "game" in the extension's name.

It’s a small experiment, but it was surprisingly fun to build.

You can install the extension through Marketplace or just search Swipe Hoop in VS Code. Hope you enjoy the game!

Gameplay

Stop Copy-Pasting to ChatGPT — Meet Snap Mind

Louis Liu — Sat, 14 Feb 2026 08:34:51 +0000

This is a submission for the GitHub Copilot CLI Challenge

What I Built

I built Snap Mind, an AI-powered desktop assistant that brings large language models directly into your daily workflow — without context switching.

The core idea is simple but powerful:

👉 Select any text

👉 Press a hotkey

👉 Instantly get AI help

Instead of opening ChatGPT or switching tabs, Snap Mind lets you translate, rewrite, summarize, or explain text right where you work. The goal is to make AI feel native to the operating system — fast, invisible, and always within reach.

Key Features

⚡ Blazing Fast — trigger AI with a single keystroke
🧠 Works Anywhere — usable inside any application
🎯 Custom Prompts — tailor AI actions to your workflow
✍️ Multi-purpose — translation, summarization, rewriting, explanations, and more
🔄 Zero context switching — stay in your flow state

Why I Built This

While LLMs are powerful, the friction of opening web apps and copy-pasting text breaks focus. I wanted AI to feel like a native superpower — something that responds instantly to intent.

Snap Mind is my attempt to make AI interaction:

faster
more contextual
and more ergonomic for everyday work

Demo

🔗 GitHub Repo: https://github.com/Snap-Mind/snap-mind
🌐 Website: https://snap-mind.github.io/

Example Use Cases

Translate selected text instantly
Rewrite emails to sound more professional
Summarize long articles
Explain code snippets in place
Generate quick replies without leaving your editor

My Experience with GitHub Copilot CLI

GitHub Copilot CLI significantly accelerated my development workflow while building Snap Mind.

How I Used It

I used Copilot CLI to:

scaffold boilerplate code
generate shell commands
speed up debugging workflows
explore unfamiliar APIs quickly
iterate on prompt templates

One particularly helpful workflow was using Copilot CLI to quickly generate and refine command-line interactions during early prototyping. It reduced the cognitive overhead of context switching and let me stay focused on product design.

Impact on My Development Experience

What worked well:

🚀 Faster iteration loops
🧩 Reduced time spent on repetitive tasks
🔍 Helpful for exploring unfamiliar code patterns
💡 Great for quick command suggestions

What I learned:

Copilot CLI shines most when you:

give clear, focused prompts
use it interactively during development
treat it as a collaborator, not an autopilot

Overall, it helped me move from idea → prototype → usable tool much faster.

My New Year Portfolio Challenge!

Louis Liu — Fri, 23 Jan 2026 10:52:20 +0000

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI

About Me

I'm Louis, a full-stack web developer with a strong focus on web technologies.

Portfolio

Or access it in your browser: https://dev-valley-315140115302.us-west1.run.app/

How I Built It

I have always wanted to create a personal homepage that reflects my unique style. As a big fan of video games, I want to have gaming elements in my page. Based on this idea, I used Google AI Studio to bring this personal homepage to life.

What I'm Most Proud Of

98% of the code was written through vibe coding. I'm very pleased that I successfully implemented map switching and interactions between characters and objects. Furthermore, I added a mini-game (here's a hint: it's a fishing game). Although the art style isn't perfect and there is a lack of instructions, I think I've done a good enough job.

What Really Happens When an LLM Chooses the Next Token🤯

Louis Liu — Mon, 12 Jan 2026 03:16:54 +0000

LLM outputs sometimes feel stable. Sometimes they suddenly become random.

Often, the only thing that changed is a parameter.

So what actually happens at the moment an LLM decides which token comes next?

The short answer is simple:

it samples one token from a probability distribution.

Let’s break that moment down with visuals.

The Core Idea

Given a prompt, the model predicts a probability distribution over possible next tokens.

For example:

Twinkle twinkle little

At this point, the model assigns a probability to each candidate token.

You can imagine them laid out on a 0–100 scale:

Higher probability → larger segment
Lower probability → smaller segment

Sampling: What Actually Happens

Next comes sampling.

A practical way to think about it:

Generate a random number

See which segment it falls into

Output the corresponding token

Since “star” has the largest segment, it’s the most likely result:

Twinkle twinkle little star

Temperature, Top-p, and Top-k

only affect this sampling step.

From here on:

Temperature = 1
Top-p = 1
Top-k = 10

We’ll change one parameter at a time.

Temperature

Temperature does one thing:

it stretches or flattens probability differences.

Lower temperature → strong preferences → stable output
Higher temperature → flatter distribution → more randomness

In this example:

The gap between “star” and “car” is 19.6
With Temperature = 0.5, the gap grows to 36.1

With Temperature = 1.68, lower-probability tokens become more competitive:

Key point:

Temperature doesn’t remove tokens.

It only changes how strongly the model prefers one over another.

Top-p (Nucleus Sampling)

Top-p controls how much probability mass is kept.

The process is straightforward:

Start from the highest-probability token
Keep adding tokens until cumulative probability ≥ Top-p
Drop the rest

With Top-p = 0.6, only tokens covering 60% of total probability remain.

The remaining tokens are then renormalized:

This means:

The number of tokens is dynamic
More peaked distributions keep fewer tokens

Top-k

Top-k is simpler.

Keep only the top K tokens.

Top-k = 1 → always pick the most likely token
Top-k = 5 → sample from the top 5

Everything else is ignored.

In one line:

Top-k limits quantity
Top-p limits probability mass

Demo

All visuals in this article come from:

👉 LLM Sampling Visualizer

If sampling parameters feel abstract,

five minutes with this tool builds intuition faster than reading more text.

References

Git Deep Dive: Mastering rerere

Louis Liu — Wed, 12 Nov 2025 18:00:00 +0000

No, It's Not a Typo: Let's Talk About git rerere (Reuse Recorded Resolution)

git rerere helps Git remember how you resolved a conflict previously, and automatically reuses that resolution when the same conflict occurs again. This can be a huge time-saver with recurring merge conflicts.

How to enabled it

Globally:

git config --global rerere.enabled true

Per project:

git config rerere.enabled true

Check status:

git config --get rerere.enabled

Example

I'm updating hello.txt on main and feature/earth branch.

Hello!

On main branch:

Hello World!

On feature/earth branch:

Hello Earth!

Now, if we try to merge feature/earth into main, we’ll get a conflict:

git checkout main
git merge feature/earth

Conflict:

<<<<<<< HEAD
Hello World!
=======
Hello Earth!
>>>>>>> feature/earth

We edit the file to:

Hello Universe!

Then stage and commit:

git add hello.txt
git commit

Git will record the resolution:

Recorded resolution for 'hello.txt'.
[main 7fd7eda] Merge branch 'feature/earth'

Next time Git encounters the same conflict, it will automatically reuse the previous resolution:

git merge feature/earth

You got:

Auto-merging hello.txt
CONFLICT (content): Merge conflict in hello.txt
Resolved 'hello.txt' using previous resolution.
Automatic merge failed; fix conflicts and then commit the result.

Useful commands

# Manually trigger rerere
git rerere

# Forget a recored resolution
git rerere forget <file>

# Check the rerere cache
ls .git/rr-cache/
cat .git/rr-cache/<conflict-id>/preimage

If you don’t want Git to auto-resolve using rerere, you can reset the file:

git checkout --conflict=merge <file>

Advanced

When Git detects a conflict during a merge or rebase, it generates a hash key based on the conflicting content — this becomes the conflict-id.

Git then stores:

The preimage (conflicted content)
The postimage (your resolved version)

These are saved under .git/rr-cache/.

File Structure:

.git/
└── rr-cache/
    ├── <conflict-id>/
    │   ├── preimage      # The file before conflict resolution
    │   ├── postimage     # The file after conflict resolution
    │   └── thisimage     # Temporary file used during auto-resolution

Important Notes

The conflict-id is not a Git object, even though it looks like one.
It’s stored locally only — it won’t be pushed to the remote.
If you delete .git/rr-cache, the resolution is gone forever.

Summary

git rerere is a powerful but often overlooked tools. It can save you a lot of time when dealing with recurring merge conflicts.

🧠 Bringing AI to One Keystroke

Louis Liu — Tue, 21 Oct 2025 00:47:43 +0000

This is a submission for the 2025 Hacktoberfest Writing Challenge: Maintainer Spotlight

AI is powerful — but using it still feels… awkward.
Every time I want AI to help me rewrite a sentence, summarize a paragraph, or translate a message, I have to switch apps, paste text, and then jump back into my workflow. It breaks focus.

I live inside Slack, Notion, VS Code, and a dozen other tools every day. I wanted AI to feel invisible — something that’s just there, one keystroke away.

That’s how SnapMind was born.

🧠 What Is SnapMind?

SnapMind is a desktop AI assistant that brings LLMs directly into your daily workflow.

Select any text, hit a hotkey, and instantly:

✍️ Rewrite or polish your content
🌍 Translate text on the fly
📑 Summarize long paragraphs
💡 Explain code or concepts — without leaving your current app

It’s like having ChatGPT, DeepL, and Grammarly in one lightweight popup — always ready, never intrusive.

⚡️ What makes SnapMind Special

SnapMind isn’t just another AI app — it’s a workflow enhancer.
It’s built around three core principles:

Speed: AI should be accessible in a single keystroke.
Seamlessness: Stay in flow — no context switching.
Customization: Save and trigger your favorite prompts instantly.

❤️ Why I Love Maintaining SnapMind

I really appreciate the convenience that AI brings, but most AI applications haven't truly integrated into my work. I still need to frequently switch between different products to achieve my goals. I hope there can be software that truly integrates into my daily work, acting like an invisible partner to help me complete tasks when I need it. This is also the reason SnapMind was created.

I’m deeply grateful to everyone who’s starred the repo. I'm hoping there are more people who will open issues or share feedback. Together, we’re building the kind of AI tool we actually want to use.

🌍 Join Me

If you believe AI should be simple, fast, and seamlessly integrated into your workflow — join me!

⭐️ Star SnapMind on GitHub
💬 Open an issue or PR
🌟 Share your favorite use cases

Let’s make AI one keystroke away.

GitHub SnapMind 👉 https://github.com/Snap-Mind/snap-mind

Building a Custom Key Binding Recorder in React

Louis Liu — Thu, 02 Oct 2025 12:31:26 +0000

I’ve been working on a desktop AI assistant — SnapMind — that lets you instantly interact with LLMs from anywhere on your system. One of the core features is triggering prompts with customizable hotkeys.

By default, the app comes with built-in hotkeys, but I wanted users to be able to define their own key bindings.

At first, I considered using a third-party library for this. But I soon realized it wasn’t too hard to build my own lightweight recorder, so I decided to implement it from scratch. In this post, I’ll share the key points of how I designed this component.

Rules

The component should allow users to provide up to 2 modifier keys and one main key. Once a valid key binding is captured, the recording should stop.

Start listening when the input is focused
The final key binding = up to 2 modifiers + 1 main key
Automatically commit once a valid combination is captured (≥1 modifier + 1 main key)
Provide a reset button to clear user inputs

States

Here’s how I structured the component’s state:

const [keybindings, setKeybindings] = useState<string | null>(null); // The final result
const [modKeys, setModKeys] = useState<Set<string>>(new Set()); // Active modifiers captured (max 2)
const [mainKey, setMainKey] = useState<string | null>(null); // Main (non-modifier) key
const [recording, setRecording] = useState(false); // Indicate recording state
const inputRef = useRef<HTMLInputElement | null>(null); // Input reference

Listen to key down

Initially, I wanted the component to display key presses in real time — for example, showing Ctrl + Shift + C when held, then Ctrl + C once Shift is released. That would have been cool, but I realized a simpler approach was enough: just capture the combination on key down and persist it until reset.

const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
  if (!recording || disabled || keybindings) return;
  e.preventDefault();
  const k = e.key;
  const nextMods = new Set(modKeys); // Use Set here so it won't record duplicated keys
  let nextMain = mainKey;
  if (isModifier(k)) {
    // Handle keys like Ctrl and Shift.
    const lower = k.toLowerCase();
    if (nextMods.has(lower) || nextMods.size < 2) { // We're using Set, so I don't care about capture duplicate modifiers
      nextMods.add(lower);
    }
  } else if (!nextMain && isAllowedMainKey(k)) { // I don't want to capture keys like F1~F12 and other special keys
    nextMain = k;
  }
  // Update state if changed
  if (nextMain !== mainKey) setMainKey(nextMain);
  if (nextMods.size !== modKeys.size || Array.from(nextMods).some((m) => !modKeys.has(m))) {
    setModKeys(nextMods);
  }
  // Attempt to finalize immediately once we have both parts
  attemptCommit(nextMods, nextMain);
};

Display recorded keys

Displaying the result is straightforward. I also reorder the modifiers so users won’t see something like Shift + Ctrl + C (which feels unintuitive). The captured key names from the browser event are mapped to more readable labels.

function orderModifiers(mods: string[], platform: 'mac' | 'other') {
  const rankMac: Record<string, number> = { meta: 1, shift: 2, alt: 3, control: 4 };
  const rankOther: Record<string, number> = { control: 1, shift: 2, alt: 3, meta: 4 };
  const rank = platform === 'mac' ? rankMac : rankOther;
  return [...mods].sort((a, b) => (rank[a.toLowerCase()] ?? 99) - (rank[b.toLowerCase()] ?? 99));
}

function printModifier(k: string) {
  switch (k.toLowerCase()) {
    case 'meta':
      return 'Command';
    case 'alt':
      return 'Option';
    case 'control':
      return 'Ctrl';
    case 'shift':
      return 'Shift';
    default:
      return k;
  }
}

function normalizeMain(k: string) {
  if (k.length === 1) return /^[a-z]$/i.test(k) ? k.toUpperCase() : k;
  if (/^f\d{1,2}$/i.test(k)) return k.toUpperCase();
  const map: Record<string, string> = {
    escape: 'Esc',
    ' ': 'Space',
    arrowup: 'Up',
    arrowdown: 'Down',
    arrowleft: 'Left',
    arrowright: 'Right',
    enter: 'Enter',
    tab: 'Tab',
    backspace: 'Backspace',
  };
  return map[k.toLowerCase()] || k;
}

function formatDisplay(mods: string[], main: string | null, platform: 'mac' | 'other') {
  if (!main) return orderModifiers(mods, platform).map(printModifier).join('+');
  const ordered = orderModifiers(mods, platform).map(printModifier);
  return [...ordered, normalizeMain(main)].join('+');
}

Demo

I added a 🔴 indicator to show whether the component is currently recording.

Here's the source code to the component.

A few years ago, I would have reached for a third-party library whenever I needed functionality like this. Now, with help from AI, I find it faster and cleaner to implement simple business logic myself.

If this sounds interesting, feel free to give SnapMind a try — I’d love to hear your feedback!

GitHub Repo: https://github.com/Snap-Mind/snap-mind

Letting AI Build My App's Auto Updates (and Fixing the Pitfalls)

Louis Liu — Thu, 25 Sep 2025 15:49:55 +0000

It’s been two weeks since I last shared an update about my AI assistant project — SnapMind.

The development experience was smooth with GitHub Copilot, especially when I added auto-update feature. I didn’t start by reading the Electron Updater documentation. Instead, I asked AI to generate an initial implementation for me. After I figured out how it works, I read the documentation to verify the update workflow.

Of course, not everything went perfectly. On my Apple Silicon MacBook, the auto-updater mistakenly installed the x86 version of the app instead of the ARM build. Let’s just say it was a confusing few minutes before I realized what happened 😅😂 The AI doesn't know my build artifact structure, so it didn't remind me that the Electron updater could take the wrong YAML file. Context management is crucial.

Let's take a look at the updates!

Auto Updates

Now you don’t need to manually download new installers from GitHub. You can check for and install updates directly inside the app.

More Providers

DeepSeek and Qwen are supported.

Customize Hotkeys (Beta)

You can now set your own hotkeys to trigger prompts.
This should’ve been there from the start, but I want the setup experience to feel great, so it’s still in beta for now.

Currently, beta version can only be downloaded through GitHub Release page.

There are already great desktop apps like ChatBox, DeepChat, LM Studio, and Cherry Studio. They support multiple LLMs, MCP servers, and many other advanced features.

But here’s the thing: I got tired of constantly copying and pasting text or switching apps just to ask AI a question.

SnapMind is designed to work directly with the content you already have — no extra steps, no wasted time.

🙌 I’m building SnapMind to make AI truly practical for daily workflows. What’s your use case? Share your routine in the comments — I’d love to see how SnapMind can help you. Give me a star🌟 on GitHub if you think SnapMind could help you!

Project link: https://github.com/Snap-Mind/snap-mind

Is AI Pushing Software Engineers to the Next Efficiency Test?

Louis Liu — Thu, 18 Sep 2025 12:07:10 +0000

The momentum of AI development remains strong, and it has become an unavoidable topic in our daily lives. Since AI entered our work routines, discussions about whether it might replace humans have been ongoing. In software development, this question is particularly relevant: is AI a productivity booster, or does it present new challenges for software engineers?

AI in Real-World Development Scenarios

Earlier this year, my organization purchased GitHub Copilot licenses for our team. Naturally, any investment comes with an expectation of return, so the question of “how to leverage AI to improve work efficiency” quickly became a topic on the table.

Efficiency is often measured directly: a feature that used to take a full day to develop—can it now be completed in half a day? Many imagine AI as a “magic tool” that can instantly turn any developer into an experienced engineer. Online stories often emphasize speed—people with little programming experience have used AI to quickly build a small product and even launch it.

Before seeing these cases, my view of AI was mostly positive. I enjoyed using AI to help write code because it reduces repetitive work and frees me from thinking about trivial details. But when efficiency becomes the main focus, I began to hesitate: can AI really help me deliver more within the same amount of time?

The Cost of Speed

When discussing AI-assisted coding, the first thing people mention is speed: features launch faster, iterations progress quicker, and delivery cycles shorten. But in software engineering, is speed the only metric that matters?

In a business context, software engineers typically work as part of a team, which is very different from an individual building a product from scratch. Can AI truly integrate into an existing codebase? While enjoying the benefits AI brings, we also need to consider potential risks.

Consistency: Different developers may use prompts differently, resulting in AI-generated code with inconsistent styles. Time saved in the short term may lead to long-term maintenance costs.
Dependency: Over-reliance on AI, even for simple tasks, may actually reduce overall efficiency.
Quality: AI can generate large volumes of code quickly, but these outputs still require human review. If reviews fall behind, potential issues may go unnoticed.
Accuracy: When generated code doesn’t match expectations, humans still need to refactor or regenerate it.
Maintainability: Seemingly completed features may later demand extra time for maintenance due to messy structure or poor readability.

Speed has its value, but if the focus is solely on being fast, the result may ultimately become unmanageable.

Value Beyond Speed

Many articles discussing AI-assisted development focus on rapid iteration and delivery speed. I believe it’s more important to recognize AI’s ability to help developers focus on complex problems and improve accuracy.

As noted by IBM in their AI in Software Development article:

Gen AI assists in code generation and automates repetitive coding tasks. Gen AI-powered tools help developers focus on complex problems, while AI-driven autocompletion and real-time suggestions improve speed and accuracy.

In other words, AI is not simply about “writing code faster.” Its true value lies in freeing developers from repetitive work and allowing them to focus on truly complex and creative tasks.

A Broader Perspective

Software development involves more than just the engineering team. Requirements gathering, analysis, UI/UX design, maintenance support, and product documentation can all leverage AI to improve efficiency. These areas are often overlooked, yet they represent some of the most untapped potential for AI to add value.

Defining Efficiency in Practice

So, can AI truly improve software development efficiency? This is a question that can only be answered through practice.

If we start with the assumption that “AI saves time” and work backward from there, teams may face risks. Efficiency is not just speed; it is stable delivery, consistent style, reliable quality, and maintainability over time.

Coding is not only about being “fast”; it also requires coordination and rhythm within the team. The value of AI may not lie in compressing a week’s work into three days, but in allowing developers to focus their limited energy where it matters most.

This is not the first time a method or tool has challenged team efficiency. The previous wave was agile development. Many companies, in adopting agile, focus on speed, but often simply increase pressure on the team without fully understanding agile principles. AI is similar: on the surface, it promises efficiency, but its true value lies in understanding the underlying principles and applying them thoughtfully.

AI is not a simple accelerator—it is an opportunity for us to redefine what efficiency truly means.

Reference:

IBM: AI in Software Development

Bring AI Into Any App With One Keystroke

Louis Liu — Wed, 10 Sep 2025 05:21:40 +0000

AI is powerful, but the way we interact with it still feels clunky. Most of the time, I have to open a browser or launch a desktop app, type in my question, and then copy the result back into my workflow.

I reply to numerous messages on Slack every day. If I want AI to rewrite something for me, I need to copy the text, paste it into ChatGPT, adjust the response, and then copy it back. It works—but it’s disruptive.

What if AI could be just one keystroke away, seamlessly integrated into whatever I’m doing? That’s the idea behind SnapMind.

What’s SnapMind?

SnapMind is a desktop AI assistant that brings LLMs anywhere in your system. Just select text + hit a hotkey, and you can instantly:

Translate
Rewrite
Summarize
Explain

— all without leaving the app you’re working in.

In short: it’s a quick prompt launcher for your daily workflow.

Demo

Bind your favorite prompts to hotkeys, and trigger them instantly on selected text.

Features

⚡ Blazing Fast — AI in a single keystroke
🎯 Seamless Experience — Works in any app without breaking your flow
🛠 Highly Customizable — Save prompts for the tasks you do most

Use Cases

🌍 Instant Translation — Translate any text on the fly
✍️ Polish & Rewrite — Make content clearer, shorter, or more professional
📑 Summarize in Seconds — Get key takeaways from long reports
💡 Quick Explanations — Highlight concepts, code, or terms for clarity
📬 Smart Drafting — Generate emails, replies, or snippets in seconds
📚 Learning Companion — Check grammar, simplify content, aid understanding
🧠 On-the-fly Brainstorming — Turn raw notes into structured thoughts

What’s Next?

Here’s what’s coming to SnapMind:

🔗 Support for more AI providers (OpenAI, Azure OpenAI, Anthropic, Google AI — with more on the way)
🖼️ Image input/output: select an image and send it to AI or ask AI created an image for you.
📝 Better markdown rendering for easy copy & paste
🔄 Auto-updates via Electron Builder
...

I’d love to hear from you:

What use cases do you want SnapMind to support?
Do you have cool workflows or scenarios where SnapMind could made you more productive?

👉 Try it now at Github - SnapMind. ⭐️ It will very be helpful if you can give the repo a star! ⭐️

DEV Community: Louis Liu

Automate the Boring Stuff: Electron macOS Signing & Notarization in One Git Push

Prerequisites

Required Setup: Five Environment Secrets

1. APPLE_ID

2. APPLE_TEAM_ID

3. APPLE_APP_SPECIFIC_PASSWORD

4. CSC_LINK (Code-Signing Certificate)

5. CSC_KEY_PASSWORD

Project Configuration

electron-builder Configuration

Entitlements Plist

Notarization Script (afterSign Hook)

Stapling Script (afterAllArtifactBuild Hook)

The NOTARIZE Environment Variable

Local Verification

GitHub Actions Workflow

Key points about this workflow

Merging Multi-Arch Update Manifests

Triggering a Release

Ending

You Can Probably Use Claude Code for Free at Work

Check Your Access to Foundry

Connect Foundry Models to Claude Code

Common Issues

Wrong Azure tenant

Deployment name mismatch

Side Notes

Building a Mini Basketball Game as a VS Code Extension

Gameplay

Stop Copy-Pasting to ChatGPT — Meet Snap Mind

What I Built

Key Features

Why I Built This

Demo

Example Use Cases

My Experience with GitHub Copilot CLI

How I Used It

Impact on My Development Experience

My New Year Portfolio Challenge!

About Me

Portfolio

How I Built It

What I'm Most Proud Of

What Really Happens When an LLM Chooses the Next Token🤯

The Core Idea

Sampling: What Actually Happens

Temperature

Top-p (Nucleus Sampling)

Top-k

Demo

References

Git Deep Dive: Mastering rerere

How to enabled it

Example

Useful commands

Advanced

File Structure:

Important Notes

Summary

🧠 Bringing AI to One Keystroke

🧠 What Is SnapMind?

⚡️ What makes SnapMind Special

❤️ Why I Love Maintaining SnapMind

🌍 Join Me

Building a Custom Key Binding Recorder in React

Rules

States

Listen to key down

Display recorded keys

Demo

Letting AI Build My App's Auto Updates (and Fixing the Pitfalls)

Auto Updates

More Providers

Customize Hotkeys (Beta)

Is AI Pushing Software Engineers to the Next Efficiency Test?

AI in Real-World Development Scenarios

The Cost of Speed

Value Beyond Speed

A Broader Perspective

Notarization Script (`afterSign` Hook)

Stapling Script (`afterAllArtifactBuild` Hook)

The `NOTARIZE` Environment Variable