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).

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.

For this Instructable, you will need an installed copy of EAGLE and a PCB Layout that you want to add some graphics to. I am using SparkFun’s FT232RL USB-to-Serial Breakout PCB (EAGLE Files) for example purposes.

Chris Hernandez of Microsoft posted on his blog, “One of the main goals with Windows 7 in general has been to be better than Vista.” Chris’ quote scares me. Being better than Vista is not what I am looking for. I want an OS that makes me want to upgrade from XP. XP has served me well and I want a clear upgrade path. What are the killer new features? What makes Win7 an “upgrade”?

I have been using Windows 7 on my laptop for a few months. I do like some UI improvements, but compared to XP it misses the mark. Compared to Vista, Win7 is better. Although, Win7 requires pretty good hardware to install where XP is able to install on my pieced together machines with parts 8-10 years old in some cases. I hope by the time Windows 7 is on the shelf, someone figures out that we are not looking for an upgrade from Vista, we are looking for a real upgrade to XP.

Examples of Web 2.0 applications are Google Mail, Basecamp Project Manager, and UberNote – Note Management.

I recently became aware of UberNote by reading through articles at The Tech Brief. The UberNote application (almost wanted to call it software because you forget that this is a web application since it is so useful and easy to use) allows for quick note-taking, advanced editing, and intuitive tagging.

I am a note-taker. I always have a notebook in my pocket, so I never miss a fleeting idea – maybe one about how toothbrushes with a blue strip fade prematurely while using whitening toothpaste – wouldn’t want to lose that gem. There are times that I email thoughts to myself, leave voice mails on my Skype (which are the only voicemails I get), write on the back of a placemat at a diner – you get the idea. After getting invited to use the UberNote site, I have been putting my thoughts online and have found this a way to keep track of my little thought nuggets that will return literally tens of dollars someday in the future.

I recommend trying UberNote, joining their forums, and helping them shape their initial product offering. Check it out soon, so you don’t miss Web 2.0 and before the Web moves to 3.0 and maybe even Web 3.0 beta.