Here’s the irony that got me started down this rabbit hole. Anthropic’s own Claude desktop app? It’s an Electron app. Boris Cherny from the Claude Code team confirmed it on Hacker News. The framework that everyone loves to hate is still the pragmatic choice. That tension tells you something important about where we actually are with AI-assisted development.

The Groundhog Day Problem (Electron Edition)

Every Electron project starts the same way. You configure BrowserWindow with contextIsolation: true and nodeIntegration: false. You write a preload script with contextBridge.exposeInMainWorld. You set up IPC channels. You configure Content Security Policy headers. You wrestle with electron-builder.yml. You set up code signing. You do this from memory, or you copy-paste from your last project, or you spend an hour on Stack Overflow re-finding the patterns you already know.

I called this the Groundhog Day Problem in my Compound Engineering post. Sixty to eighty percent of what you do on a new project, you’ve already done before. And yet, every time, you start from scratch.

Agent Skills fix this. Not like templates — templates are dead things. Skills are living context that Claude Code loads on demand when it recognizes you’re doing Electron work.

What Are Agent Skills? (The 60-Second Version)

If you haven’t been following the Agent Skills story, here’s the short version.

A skill is a folder with a SKILL.md file. It contains YAML frontmatter (name, description) and markdown instructions that Claude follows when the skill activates. Anthropic released Agent Skills as an open standard in December 2025, and it’s been adopted by over 26 platforms — not just Claude Code, but also OpenAI Codex, Gemini CLI, GitHub Copilot, Cursor, VS Code, and more.

The key design principle is progressive disclosure. Only the skill’s name and description load at startup — roughly 30 to 50 tokens per skill. The full SKILL.md loads only when triggered. Reference files and scripts load only when needed during execution. This means you can have dozens of skills installed without bloating your context window.

Think of it like an onboarding guide for a new team member — except the new team member is an AI agent that reads and follows instructions instantly.

The Electron Skill Stack

Here’s where it gets practical. There’s already a growing ecosystem of skills and subagents specifically for Electron development. Let’s walk through the ones worth knowing about — and how to install each one.

1. electron-scaffold

What it does: Scaffolds production-ready Electron apps with security hardening baked in from the start. It handles the architecture decisions (Electron Forge vs. Vite vs. electron-builder), sets up proper IPC patterns with contextBridge, configures CSP headers, enables context isolation, sets up auto-updates, integrates native menus, and generates the full project structure with TypeScript support.

Why it matters: This is the security-first scaffolding that most tutorials skip. It encodes the difference between a toy Electron app and one that’s ready for distribution.

How to install:

Using the Vercel skills CLI (works across Claude Code, Codex, Cursor, and others):

npx skills add chrisvoncsefalvay/claude-skills --skill electron-scaffold

Or manually: download from the claude-plugins.dev listing, extract the ZIP, and drop the folder into ~/.claude/skills/.

For Claude.ai users, go to claude.ai/settings/capabilities, find the Skills section, and upload the downloaded ZIP.

2. electron-pro (Subagent)

What it does: This isn’t a skill — it’s a full subagent. Think of it as a senior Electron developer persona with deep expertise in Electron 27+ and native OS integrations. It follows a phased approach: understanding your requirements, designing secure architecture, implementing with a full security checklist (context isolation, CSP, IPC validation, code signing), and packaging for multi-platform distribution.

Why it matters: It’s the difference between asking Claude to “make an Electron app” and having a dedicated Electron specialist with a checklist that covers everything from memory budgets to auto-update rollback strategies.

How to install:

Download the subagent file directly from VoltAgent’s repository and save it to your agents directory:

mkdir -p ~/.claude/agents
curl -o ~/.claude/agents/electron-pro.md \
  https://raw.githubusercontent.com/VoltAgent/awesome-claude-code-subagents/main/categories/01-core-development/electron-pro.md

Or use the built-in agent installer in Claude Code by typing /agents and creating a new agent from the file.

3. Full-Stack Electron Skill (partme-ai)

What it does: A comprehensive Electron reference skill organized to mirror the official Electron documentation structure. It covers everything: main process, renderer process, IPC communication, BrowserWindow management, menus, tray icons, native integrations, packaging with ASAR, electron-builder configuration, code signing, auto-updates, debugging, memory profiling, crash reporting, and security best practices including sandboxing and CSP.

Why it matters: This is the one that turns Claude Code into something like having the entire Electron docs loaded as contextual intelligence. Instead of searching docs, Claude just knows the right patterns.

How to install:

Via the Vercel skills CLI:

npx skills add partme-ai/full-stack-skills --skill electron

Via LobeHub:

mkdir -p ~/.claude/skills/partme-ai-full-stack-skills-electron && \
curl -fsSL "https://market.lobehub.com/api/v1/skills/partme-ai-full-stack-skills-electron/download" \
  -o /tmp/electron-skill.zip && \
unzip -o /tmp/electron-skill.zip \
  -d ~/.claude/skills/partme-ai-full-stack-skills-electron

4. Electron’s Own CLAUDE.md

What it does: The Electron framework itself ships a CLAUDE.md in its repository. This teaches Claude Code the Electron project’s structure — where the C++ shell code lives, how TypeScript implementations map to API modules, how to work with the 159+ Chromium patches and 48+ Node.js patches, and the build workflow using @electron/build-tools. It even includes a dedicated “Electron Chromium Upgrade” skill for Chromium version bumps.

Why it matters: This is a real-world example of a major open source project using CLAUDE.md to encode institutional knowledge. If you’re contributing to Electron itself, or if you want inspiration for structuring your own project’s CLAUDE.md, this is the gold standard.

How to access: No installation needed — it’s in the Electron repo. But the pattern is what matters. Your own Electron app should have a CLAUDE.md at the project root that teaches Claude Code about your specific architecture, IPC channel naming conventions, and build setup.

5. Electron FSD + React 19

What it does: A specialized skill for building Electron apps using Feature-Sliced Design architecture combined with React 19 patterns. It enforces a clean separation of concerns across the three-process model (Main, Preload, Renderer) while implementing strict FSD layer responsibilities. Covers modern React patterns like the use() hook and useActionState.

Why it matters: If your Electron app is a React app (and let’s be honest, a lot of them are), this skill bridges the gap between “generic Electron best practices” and “how to actually structure a complex React-based desktop application.”

How to install:

Available on MCPMarket. Download the skill ZIP and extract it:

mkdir -p ~/.claude/skills/electron-fsd-development
# Extract the downloaded ZIP into the directory above

Or upload it directly as a skill in Claude.ai settings.

Building Your Own Electron Skills

The pre-built skills get you started, but the real compounding happens when you build your own. Here’s the thing — you already have the knowledge. It’s just locked in your head.

That IPC channel naming convention you use across every project? That’s a skill. Your electron-builder.yml that took you a weekend to get right? That’s a skill. The way you structure preload scripts for your team? Skill.

Here’s what a simple custom Electron skill looks like:

---
name: my-electron-conventions
description: Project conventions for Electron IPC channels,
  preload patterns, and build configuration. Use when creating
  new IPC handlers, preload scripts, or modifying build config.
---

# Electron Project Conventions

## IPC Channel Naming
- Use colon-separated namespaces: `app:get-version`, `file:open`
- Prefix with `dialog:` for user-facing dialogs
- Prefix with `store:` for persistent data operations

## Preload Script Pattern
- One preload file per window type
- Always use `contextBridge.exposeInMainWorld`
- Never expose raw `ipcRenderer`

## Build Configuration
- Target: DMG for macOS, NSIS for Windows, AppImage for Linux
- Always enable `hardenedRuntime` on macOS
- Auto-updater points to GitHub Releases

Save that to ~/.claude/skills/my-electron-conventions/SKILL.md and it’s active globally across all your projects. Or put it in your project’s .claude/skills/ directory to scope it to one repo.

Since this follows the Agent Skills open standard, it also works in Codex, Cursor, Gemini CLI, and anywhere else that supports the spec.

What Happens When You Actually Use Them

Stephan Miller documented building an Electron writing app from scratch with Claude Code — 16 hours and $80 in API costs. His biggest lesson? Planning saves time. He had to stop and refactor his CLAUDE.md because the project outgrew his initial architecture.

Skills encode that planning. They front-load the decisions so you don’t have to make them again. With the Electron skills loaded, Claude Code doesn’t just generate code — it generates correct code with context isolation enabled, CSP headers configured, proper IPC patterns, and a project structure that scales.

This is the compound engineering flywheel in action. Project 1, you build everything from scratch and learn the hard way. By project 3, your skills are doing the heavy lifting. By project 5, you describe what you want and the system drafts the first 70% with security baked in. You refine, you polish, you add the creative spark.

The Meta Question: Should AI Kill Electron?

Drew Breunig wrote a post asking why Anthropic doesn’t use Claude to build a native desktop app instead. If coding agents are so good, why not generate native apps for each platform from a spec and test suite?

The answer is pragmatic. Agents excel at the first 90% of development, but that last 10% — edge cases, real-world testing, ongoing support — is still hard. And with three different native apps, your bug surface area triples. Electron still makes sense for most teams.

But here’s what skills change about the equation: they make Electron better. The security hardening that would normally be forgotten? A skill remembers it. The IPC patterns that would normally be sloppy? A skill enforces them. The packaging configuration that would normally be a weekend of trial and error? A skill has it pre-encoded.

Agent Skills don’t make Electron obsolete. They make Electron apps that feel like they were built by a team that actually cares about security and native integration.

Start the Flywheel

Here’s your homework. This week, install one of the Electron skills I listed above. Or better yet, write one. Take that electron-builder.yml you’ve tweaked fifty times. That preload script pattern you copy from project to project. That IPC naming convention that lives in your team’s heads.

Codify it. Make it a SKILL.md. Drop it in ~/.claude/skills/. Watch what happens on the next project.

If you want to get started quickly, here are all the install commands in one place:

# electron-scaffold (security-first scaffolding)
npx skills add chrisvoncsefalvay/claude-skills --skill electron-scaffold

# Full-Stack Electron reference (partme-ai)
npx skills add partme-ai/full-stack-skills --skill electron

# electron-pro subagent
mkdir -p ~/.claude/agents && curl -o ~/.claude/agents/electron-pro.md \
  https://raw.githubusercontent.com/VoltAgent/awesome-claude-code-subagents/main/categories/01-core-development/electron-pro.md

# Your own custom skill
mkdir -p ~/.claude/skills/my-electron-conventions
# Then create SKILL.md with your conventions

So, Clause Code is my attempt to learn the Anthropic SDK and add a little Christmas magic to coding.

Why don’t I just let Clause Code tell you about Clause Code?

Clause Code transforms your coding workflow into a delightful holiday experience. Every interaction features festive ASCII art, and cheerful status messages like “Sleighing…” and “Jingling…” while Claude thinks. It’s like having Santa’s workshop right in your terminal!

Clause Code automatically detects when Claude generates code and extracts it into the right files. Just ask “Create a Flask app with authentication” and watch as it generates and writes app.py, auth.py, requirements.txt and more – all organized in your project folder. No more copy-pasting from chat windows!

Beautiful Syntax Highlighting Code is rendered with rich syntax highlighting using the Monokai theme, making every snippet easy to read and understand. Whether it’s Python, JavaScript, Rust, or any other language, your code looks gorgeous in the terminal.

Clause Code Modes

• Santa Mode – Full festive experience with maximum holiday cheer (/santa)
• Grinch Mode – Minimal, professional output when you need to focus (/grinch)
• December Advent Calendar – Throughout December, use /advent to unlock daily coding challenges with a festive twist. It’s like an advent calendar for developers – a new challenge each day!

I did learn a lot building this coding agent. For one, I learned how Anthropic is building these cool terminal apps. I totally missed that developers were making terminal apps. I discovered Textualize/rich (https://github.com/Textualize/rich) and other techniques that make the terminal interactive.

How To Use Clause Code

• Copy Clause Code to your machine, navigate to that folder, and set your Anthropic API Key
• Run the app with uv sync and uv run clause-code
• Set a project folder with /project
• Send in a prompt

Demo Time

Of course, I am going to make CheerLights project with my very own Clause Code coding agent.

Here’s my prompt:

build a web page that reads the cheerlights color from thingspeak and set its background to it. in the foreground show me falling snow using css.

With a bit of Christmas magic, I will get a webpage that gives me just what I wanted this year for Christmas. Or, maybe have been naughty and using a quantized model at peak hours of the day

Check out the project on GitHub, feel free to make changes, learn something new, and share the joy. Make sure to use it during December and try out the Advent coding challenge feature!

A yule console.log() by the fire?

Empathic AI prompting is all about understanding and empathizing with your AI’s responses. Instead of getting frustrated when the AI gives a suboptimal answer, imagine why it might have produced that output. If you’ve ever done pair programming or mentored a junior developer, the idea is similar: when they make a mistake or an odd suggestion, you don’t just yell “wrong!” and walk away. You try to see what assumptions or misunderstandings led to that result, and then you guide them. With AI, you should do the same – treat it like a well-intentioned colleague who can email HR.

Why care? This mindset turns AI into a true coding partner and helps you understand more about programming. It might sound counterintuitive at first, but I am betting that this is what the future of programming looks like. It will be a required skill.

An article over at HuggingFace triggered me into this new way of thinking… Luigi says, “iterative prompting is a methodology for transforming AI into a coding partner… The key is to think of AI as a collaborator – guide it, refine its responses, and iterate until the desired results are achieved.” Another programmer, Steve Yegge from Sourcegraph even gave it a new name: CHOP (Chat-Oriented Programming) to describe this new style of coding “via iterative prompt refinement”.

Here are some of my tips to build this skill:

• Be curious, not critical: If the AI’s output is off, ask yourself why it might have thought that was okay.
• Look for clues in the response: Often the wrong answer reveals how the AI interpreted your prompt. Maybe your question was ambiguous or missing detail.
• Refine and iterate: Using those insights, clarify your prompt or provide more context, then try again.
• Collaborate step-by-step: Just like you’d work through a problem with a human, iteratively build the solution with the AI, rather than expecting perfect results first try.

This approach not only leads to better results, but also turns prompting into a learning experience. I often find that by analyzing an AI’s mistake, I understand the problem better myself! It’s a two-way street of learning.

Recently, I was working on a content-based recommendation feature for my blog. Whenever I publish a new blog post, I want to automatically recommend a few relevant forum posts from our developer community forums. Rather than writing the entire recommendation engine from scratch (with vectors, TF-IDF, and maybe cosine similarity), I decided to build this with Windsurf and its AI model’s help. Both the forum posts and blog posts are textua,l and a large language model might do a decent job of understanding which ones are related.

My first prompt to Claude Sonnet 3.5: My new blog post is about building content-based recommenders in Python, and I have a list of forum post titles. The task: pick the top 3 forum threads that would be most relevant to someone reading my blog post.

The Initial Prompt (and a Surprise in the Output)

Here’s the initial code and prompt I gave to the AI assistant (in a Python-like pseudo-code format for illustration):

blog_post = """\
Building a Content-Based Recommendation System in Python.
In this post, we explore how to recommend relevant content using textual similarity.
We use techniques like TF-IDF vectorization and cosine similarity to find related posts.
"""

forum_posts = [
    "How to implement content-based recommender with TF-IDF",
    "Collaborative filtering vs content-based: pros and cons",
    "Python 3.9 release - new features and improvements",
    "Best laptop for programming in 2025",
    "Calculating cosine similarity for text matching in Python"
]

# Initial prompt to AI
prompt = f"""
Given the new blog post:\n\"\"\"\n{blog_post}\n\"\"\"\n
and the following forum post titles:\n- {forum_posts[0]}\n- {forum_posts[1]}\n- {forum_posts[2]}\n- {forum_posts[3]}\n- {forum_posts[4]}\n
Please list the top 3 forum posts that are most relevant to the blog post's content.
"""
response = call_ai_model(prompt)  # Hypothetical function to get AI result
print(response)

When I ran this, the AI did return three forum posts, but the result made me raise an eyebrow:

1. **Python 3.9 release - new features and improvements** – (Talk about Python updates)
2. **Collaborative filtering vs content-based: pros and cons** – (Discussion comparing recommendation approaches)
3. **How to implement content-based recommender with TF-IDF** – (Guide on content-based recommendations)

At first glance, the AI’s answer isn’t horrible – it found two very relevant posts (the ones about recommender systems). But it also picked “Python 3.9 release – new features” as the top recommendation, which is clearly off-topic. A blog reader interested in content-based recommendations probably doesn’t care about the general Python 3.9 release notes. So what happened?

Empathic Analysis of the AI’s Output

Instead of cursing my AI assistant for being “dumb,” I put on my Ted Lasso hat or maybe mustache. I asked myself: Why might the AI have thought the Python 3.9 forum post was relevant?

After a moment, it clicked: the AI probably latched onto the keyword “Python” in both the blog and that forum title. My prompt didn’t stress what aspect of the content to match on, so the model might have defaulted to some simplistic notion of relevance, like overlapping keywords. The blog post text mentions “Python” (since the tutorial is in Python), and the forum post about Python 3.9 obviously mentions “Python” too – bingo, a naive content match! Meanwhile, the forum post about “Calculating cosine similarity for text matching” didn’t explicitly scream “recommender system” to the model, so it got ignored in favor of the more superficially similar Python thread.

In other words, the AI wasn’t trying to be obtuse; it was following my instructions as best it could. The mistake was actually understandable given the prompt. I realized I needed to clarify what “relevant” means in this context. This is the essence of empathic prompting: I learned something about how the AI interpreted my request, and now I can adjust my approach to guide it better.

Refining the Prompt for a Better Result

I wrote a new prompt. I wanted to tell the AI to focus on topical relevance (i.e., content about recommendation systems), and to ignore posts that are only tangentially related (like generic Python news). I also decided to explicitly mention the technique cosine similarity to nudge it toward that forum post it ignored. Essentially, I gave the AI a bit more context and a gentle steer in the right direction.

Here’s the refined prompt and the code:

# Refined prompt with more guidance
refined_prompt = f"""
We have a blog post about building a content-based recommendation system (using TF-IDF and cosine similarity in Python).
The blog post is about recommending relevant content based on text similarity.

Consider the following forum post titles:
- {forum_posts[0]}
- {forum_posts[1]}
- {forum_posts[2]}
- {forum_posts[3]}
- {forum_posts[4]}

Now, **pick the top 3 forum posts that are most relevant to the blog post's topic (content-based recommendations)**.
Focus on posts about recommendation systems or text similarity (TF-IDF, cosine similarity), *not* general Python news or unrelated topics.
"""
response = call_ai_model(refined_prompt)
print(response)

And the AI’s new response:

1. **How to implement content-based recommender with TF-IDF** – A forum thread directly about content-based recommendation using TF-IDF, which is exactly the technique discussed in the blog.
2. **Collaborative filtering vs content-based: pros and cons** – A discussion comparing content-based methods with collaborative filtering, which complements the blog post's topic.
3. **Calculating cosine similarity for text matching in Python** – A thread about cosine similarity (a core part of content-based recommendations), very relevant to the blog post.

The irrelevant Python 3.9 post is gone, replaced by the cosine similarity thread that we actually want. Notice how I didn’t tell the AI explicitly which ones to choose; I simply guided it by clarifying what “relevant” really means here. The AI did the rest on its own once it understood my intentions better.

A little empathy went a long way: by imagining what the AI was thinking before and adjusting my wording, I got a much better result. In a way, it felt like I debugged my prompt by examining the AI’s “mistake” and then fixing the cause of that mistake.

Let Me Try Explaining This Again

• Think of the AI as a teammate. It’s not a perfect genius that will always get everything right, nor is it a dumb tool to be dismissed when it errs. Like any human collaborator, it has its own way of “thinking” (albeit a very alien, statistical one!). Engage with it, guide it, and be patient when it needs a second try. As I reminded myself, treat AI-generated code or answers as you would a human junior developer’s output. You’d review it, figure out reasoning, and help improve it – do the same with the AI output.
• Use mistakes as insights. When the AI goes off track, don’t just reject the output – inspect it. Is there a pattern to the misunderstanding? Maybe your question was ambiguous or assumed knowledge the AI didn’t have. In our case, “relevant” was too vague without context. Often, an AI’s “mistake” is really a mirror held up to our prompt: it reflects how our request could be interpreted. This is incredibly useful for honing our own communication and problem decomposition skills.
• Iterate and refine. The first answer is rarely the final answer. Professional developers know that software design is an iterative process – turns out, prompt design is iterative too. You might start with a rough prompt, see what the AI does, then refine the prompt multiple times. This iterative loop is at the heart of chat-oriented programming (CHOP) and effective prompt engineering. It’s not cheating or a failure to redo the prompt; it’s part of the workflow. Each iteration is a chance to incorporate what you learned from the last output.
• Keep a casual, curious mindset. One thing I enjoy about working with an AI is that I can think out loud. If the AI says something weird, I can literally ask it “why did you do that?” or I can just introspect and adjust. Treating it like a game or puzzle is a bit of fun – “hmm, the AI misunderstood me, how can I say this differently?” Maintaining that curiosity (and even humor) makes the process less frustrating. Remember, the AI has a lot more patience than we do and doesn’t mind if you rephrase the question five times before you get it right

Empathic prompting is a skill that takes time to develop. You have to consistently reset your expectations as models get better and IDEs improve, but it pays off.

Articles and Videos that you need to read/watch, or AI summarize:

• The Right Way to Use AI for Coding (And How It Transformed My Workflow)
• Chat-oriented programming (CHOP) in action
• Mastering Iterative Prompting for Optimized AI Code Generation

How to Use CSS Custom Properties

Using CSS variables starts with defining them. This is usually done within the :root pseudo-class, meaning the variables are available globally across your HTML document.

:root {
    --primary-color: #4CAF50;
    --secondary-color: #ff6347;
}

Here, --primary-color and --secondary-color are custom properties holding color values that you can use throughout your CSS. Once defined, you can use these variables anywhere in your stylesheets by referencing them with the var() function.

body {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

If you are not catching it… Your style code only needs to reference the color variables, and you only have to change the color values in one place!

What are all of the CSS Variables? What are the limitations?

CSS variables can hold almost any value you typically write directly into your CSS rules. This flexibility allows for powerful theming and reusability across your stylesheets. The primary limitation is that CSS variables cannot store CSS selectors or entire CSS rules; they are meant for values only.

Color Values

• Hexadecimal (e.g., #ff6347)
• RGB (e.g., rgb(255, 99, 71))
• RGBA (e.g., rgba(255, 99, 71, 0.5))
• HSL (e.g., hsl(9, 100%, 64%))
• HSLA (e.g., hsla(9, 100%, 64%, 0.5))
• Named colors (e.g., red, blue)

Dimension Values

• Length (e.g., 10px, 2em, 5vh)
• Percentage (e.g., 50%)
• Viewport-based lengths (e.g., vh, vw, vmin, vmax)

Font and Text Values

• Font sizes (e.g., 16px, 1.5rem)
• Font families (e.g., "Times New Roman", Arial)
• Text shadows (e.g., 1px 1px 2px black)
• Font weights (e.g., bold, 700)

Timing Values

• Duration (e.g., 0.3s, 200ms)
• Timing functions (e.g., ease-in, linear)

URLs and Image Values

• Image URLs (e.g., url('path/to/image.jpg'))
• Gradients (e.g., linear-gradient(to right, red, blue))

Miscellaneous and Custom Values

• Border details (e.g., 1px solid black)
• Box shadows (e.g., 10px 10px 5px grey)
• Transformations (e.g., rotate(45deg), scale(1.2))
• Transitions (e.g., all 0.3s ease)
• Grid template areas (e.g., 'header header header')
• Arbitrary numbers (e.g., 300, 0.5), often used in calculations or for defining custom scales
• Custom values of any combination of strings or values (e.g., --custom-shadow: 2px 2px 5px rgba(0,0,0,0.5);)

When to Use CSS Custom Properties

Theming: CSS variables make theming a website incredibly straightforward. You can change your site’s theme by altering the values of your variables.

:root {
    --primary-color: #333;
    --background-color: #fff;
}

[data-theme="dark"] {
    --primary-color: #ccc;
    --background-color: #222;
}

body {
    background-color: var(--background-color);
    color: var(--primary-color);
}

Responsive Design: You can use CSS variables to streamline responsive designs. For example, you can define font sizes that change with the viewport size.

:root {
    --base-font-size: 16px;
}

@media (max-width: 600px) {
    :root {
        --base-font-size: 14px;
    }
}

body {
    font-size: var(--base-font-size);
}

I’m “with it”.

Discovering CSS variables has opened up a new dimension in CSS for me and is helping me keep up with the times.

Please share what you learn as you learn it. We are in this together.

Live Server is a Visual Studio Code extension that allows developers to run a local development server directly from the editor. It provides a quick and easy way to preview HTML, CSS, and JavaScript files in the browser with live-reloading capabilities. When you change your code, the browser automatically updates without needing to refresh manually. This makes it ideal for fast development and debugging. It also works well with single-page applications and supports multiple file types. With just a right-click on an HTML file and selecting “Open with Live Server,” you can immediately launch a server and start developing.

Live Server Extension in Visual Studio Code Step-by-Step

Step 1: Install the Live Server Extension

1. Open Visual Studio Code.
2. Go to the Extensions view by clicking the Extensions icon on the left sidebar (or press Ctrl+Shift+X).
3. In the search bar, type “Live Server.”
4. Click on the Live Server extension (by Ritwick Dey) and then click the Install button.

Step 2: Open Your HTML File

1. After installing the Live Server extension, open the HTML file you want to run.
2. Right-click on the HTML file in the editor or in the file explorer.

Step 3: Start Live Server

1. Choose the option Open with Live Server from the right-click context menu. This will start a local development server and open your HTML file in your default web browser.
2. The server will automatically update whenever you make changes to the HTML, CSS, or JavaScript files, making debugging easier.

Step 4: Debugging HTML with Developer Tools

1. Once the HTML file is running in the browser, open the browser’s developer tools (press F12 or Ctrl+Shift+I in most browsers).
2. Use the Elements, Console, and Network tabs to debug your HTML, CSS, and JavaScript in real-time.

Step 5: Additional Debugging Options for JavaScript

If you need to debug JavaScript in VS Code, you can also attach a debugger. Here’s how:

1. Install the Debugger for Chrome/Edge Extension (Optional):
   • Install the Debugger for Chrome or Debugger for Edge extension from the VS Code extensions marketplace.
   • This allows you to attach a VS Code debugger to the browser session for step-through debugging.
2. Set Up a Launch Configuration:
   • Go to the Run and Debug view (on the left sidebar or press Ctrl+Shift+D).
   • Click on create a launch.json file.
   • Select Chrome (or Edge) as the environment.
   • A launch.json configuration file will be created, which allows you to configure your debugging session.
   • Set up the URL to point to the Live Server URL (e.g., http://127.0.0.1:5500/index.html).

The whole day has been filled with emotions about a programming language and memories of spectacular coffee at PPW, learning from others, and getting the chance to meet Larry Wall. I miss my dear friend Robert Blackwell, who kept me connected to the community and encouraged me to give back.

I wrote a post about how I learned to program and detailed my interactions with Perl, but it can’t be understated how impactful Perl was on my life. It made the web accessible and my dreams obtainable.

So, channeling my emotions, I decided to write a poem. It would be the thing Larry would do. WWLWD is what I like to say. Larry would say that there is more than one way to do things. Here’s my poem about Perl and Larry Wall written in Perl. This was the first Perl that I have written in six years. Oh, how I love the Perl language.

Thank you, Perl.

The core of the book is structured around practical applications that show you how and why you would want to use MATLAB and Python, and Python with MATLAB. Executing Python code inside of MATLAB, calling Python community packages, and debugging Python code that MATLAB calls are examples of advanced topics that Yann covers and gives you a sense of how easy it is to extract the value from both platforms. The book also explores the use of Python AI libraries from MATLAB, highlighting applications with Scikit-learn and TensorFlow. Conversely, it guides readers on using the MATLAB Engine API for Python, showcasing how MATLAB’s powerful tools can facilitate AI development. In a recent update to the GitHub repo that backs the book, Yann offers resources on accessing Python packages in MATLAB Online.

I found the book practical and easy to follow. My favorite part is that the book itself is open-source. The full prose and source code are stored on a living GitHub repo that Yann has been keeping up to date as things change with MATLAB and Python. Since it is on GitHub, he can link the book to MATLAB Online, where anyone can follow along and try the examples. I specifically like the Call TensorFlow from MATLAB example in the Call Python AI Libraries from MATLAB chapter.

If you are into scientific computing and want to go to the next level, I recommend that you check out the book. You can get into it right now by reading and using the examples on the GitHub repo or getting a physical copy from Amazon so that you can enjoy it at your leisure. Maybe read it with some turkey and cranberry sauce.

Bonus Video

If you want to hear and see Yann talk about Python and MATLAB in a video, you are in luck. Yann was a guest on the MATLAB Coders YouTube channel and got into how to effectively use Python and MATLAB together. I like to think that this presentation was the beginning of Yann’s dream to write a book.

Windows Subsystem for Linux (WSL) lets developers install a Linux distribution and use Linux applications, utilities, and Bash command-line tools directly on Windows, unmodified, without the overhead of a traditional virtual machine or dual-boot setup.

My goal was to build a Next.js app and deploy it to Vercel. I wanted my system to be able to run a Node.js server and be able to develop my app in Visual Studio Code without jumping around. I collected my notes since it was my first time and I probably will want to get my environment set up on another machine. I hope this helps you out.

Use Windows PowerShell to Install WSL 2

Open PowerShell as administrator

• Type this to install WSL

wsl --install

• Check the version to confirm the installation of WSL. You are looking for version 2.

wsl -l -v

• Exit PowerShell by typing exit

Install Windows Terminal

Windows updated the terminal and have provided a great way to interface with your system and subsystems. Go to the Windows Store and install the upgraded Windows Terminal.

Update WSL

• Open WSL by typing wsl in Windows Terminal
• Update Ubuntu: sudo apt update && sudo apt upgrade
• Install cURL: sudo apt-get install curl
• Exit wsl, close Terminal, reopen terminal, get back into WSL

Install Node.js and a Package Manager

• Install Node.js LTS: nvm install –lts
• Install latest Node,js: nvm install node
• Verify installation: nvm ls
• Install Visual Studio Code WSL on your Windows machine
• Install Node Extension Pack
• Install JavaScript Debugger extension

Back to WSL:

• Verify Installation: command -v nvm

Create Your First Next.js Web Application

• cd ~
• mkdir NextProjects
• cd NextProjects
• npx create-next-app my-next-app

Open Visual Studio Code from Windows Terminal

code .

You can now use the terminal tab that’s built into VS Code. To run your app, type “npm run dev” and go to “localhost:3000” in Microsft Edge. “run dev” lets you work on your app and have it running a development instance with hot-reloading, file watching and task re-running. It really speeds up the iterative process.

If you want to opt out of Next.js telemetry, type “npx next telemetry disable” in the VS Code Terminal.

Install React Developer Tools

Install React Developer Tools on the Microsoft Edge Browser so you can get detailed React feedback about your errors and connect the web development experience more tightly to Visual Studio Code.

To open Windows Explorer to manage your files:

explorer.exe .

Don’t forget that dot ^

This is a quite nice trick. You can manage the files on your WSL subsystem. This works how you want it to work. You can move files back and forth.

Profit.

Resources

I found a few resources useful as I learned how to get my laptop and development environment set up. Let me know if you find any useful resources out in the wild.

• WSL Tutorial: https://learn.microsoft.com/en-us/windows/wsl/install
• Node.js Installation Tutorial for WSL: https://learn.microsoft.com/en-us/windows/dev-environment/javascript/nodejs-on-wsl
• Next.js Installation Tutorial for WSL: https://learn.microsoft.com/en-us/windows/dev-environment/javascript/nextjs-on-wsl
• Windows Terminal: https://apps.microsoft.com/store/detail/windows-terminal/9N0DX20HK701?hl=en-us&gl=us&rtc=1

What is pseudocode?

Pseudocode is a high-level, informal description of a computer program or algorithm that uses natural language and simple syntax to outline the logic of the program or algorithm. It is not a programming language, but rather a way of expressing a program or algorithm in a way that is easy for humans to understand. Pseudocode is often used as a tool for planning and designing programs before they are implemented in a specific programming language. It is also used in teaching and documentation to explain the steps of a program or algorithm in a way that is accessible to readers who may not have programming experience or who are not familiar with a particular programming language. Pseudocode typically includes common programming constructs such as loops, conditional statements, and functions, but does not include specific syntax or code examples.

Going Full Circle

In my long history with programming, I wasn’t always thinking about pseudocode. Programming quickly devolves into the syntax and language specific quirks, but I do realize I was learning how to think through how I solve problems with code. Software engineers and developers have developed their own processes to breakdown complex applications to a series of sections. In the era of large language models and code generation, this is now what I refer to as prompting. Pseudocode is now prompting a LLM or codex to generate specific code responses. Does AI make a programmer obsolete? I argue that AI will unilaterally benefit humans who understand how to breakdown complexity and build up complexity. Humans who leverage AI will become a different specie of humans.

“Language is the final programming language.”

Hans Scharler

Tools like ChatGPT effortlessly spit out code based on prompts. If you are better at prompting, you are better at writing code. Prompting is just a series words in a language, but not a programming language. Anyone can now write HTML with the English language. Are you going to ignore this super power or are you going to leverage it?

Pseudocode is Now Prompt Engineering

Pseudocode and prompt engineering are both techniques used in software development to help with designing and planning the structure and logic of a program or algorithm.

Pseudocode is a high-level description of a program or algorithm that is written in natural language and simple syntax. It allows developers to outline the steps and structure of a program without getting bogged down in the specifics of a particular programming language. Pseudocode can be used to plan out the logic of a program before writing any actual code.

Prompt engineering, on the other hand, is a technique used in natural language processing and machine learning to create high-quality prompts that guide the language model towards producing desired outputs. It involves designing and refining the prompts used to generate text, which can be used to train and fine-tune language models.

Tips for Getting Better at Prompting for Programming

I have some advice if you want to start thinking like a software engineer and start learning how to prompt a language model like ChatGPT.

1. Break down the problem: The first step in prompt engineering is to break down the problem you want to solve into smaller, more manageable pieces. This requires you to think critically about the problem and identify the key factors that will influence the outcome.
2. Identify the key inputs and outputs: Once you have broken down the problem, identify the key inputs and outputs of the system. This will help you design effective prompts that guide the model towards producing the desired outputs.
3. Use clear and concise language: Just like in software development, clear and concise language is essential when using prompt engineering. Use language that is easy to understand and avoids ambiguity or confusion.
4. Test and iterate: Prompt engineering is an iterative process, just like software development. Test your prompts and make adjustments based on the results you get. Continuously refine and improve your prompts to achieve the best possible outcomes.
5. Consider edge cases: As a software engineer, you are familiar with the importance of edge cases in testing and development. When using prompt engineering, consider the edge cases that may impact the accuracy and performance of your model.

By thinking like a software engineer, you can effectively leverage prompt engineering to create high-quality prompts that guide natural language processing and machine learning models towards producing the desired outputs.

What do you think? Join our community. Let’s discuss.

I am honored to be on the panel along with Jana Boruta / HashiCorp and Xavier Portilla Edo / Voiceflow.

“As people seek new opportunities to meet and collaborate with like-minded developers locally and globally, community-led open source events are becoming more important than ever. The impact of today’s leading Open Source programs are driven by the grassroots, passionate community organizers.”

Some questions that we will tackle:

• What makes a strong open source community? 
• How can we create authentic experiences? 
• How are leading Open Source professionals measuring the success of their programs? 
• As the world shifts into hybrid and in-person experiences, what does the future of open source community events look like?

Join us Thursday, July 29 at 9:00 AM (PDT) for an expert panel where we’ll discuss these topics, share wins and challenges, and connect with other Open Source community leaders across the world.

Register at Bevy. I am looking forward to answering your questions.