Using AI

Overview Using AI tools in the context of this book

As we acknowledge several times throughout this text, the technology and practices used to build websites are in constant flux. At present, in addition to the myriad technologies used to build front and backends, the emergence of code-enabled Large Language Models (LLMs) like ChatGPT, Gemini, and Claude add new questions and challenges.

We can’t stress enough how important it is that you read this book before you dive into AI tools. The more you let an AI write code for you, especially code you don’t understand, the more you will become dependent upon those tools. Not only are you financially liable for subscription costs, but unless you understand the foundational web technologies we present here, you’ll spend far more time turning AI-slop into something that matches your vision than if you’d built it yourself.

Since the first edition of the book is now committed to paper, we provide the following suggestions and best practices around the use of AI below, on this page that allows us to update it.

AI Forewarning

AI is not a magic bullet. It can be a powerful tool, but it is not a replacement for understanding the underlying technologies and principles of web development. It can generate code, but it may not always be correct, efficient, or secure.
AI can be a black box. It can be difficult to understand how it generates code and what data it is trained on. This can lead to issues with bias, security, and intellectual property. It can also make it difficult to debug and troubleshoot issues with the generated code.
AI can be expensive. Many AI tools require a subscription or pay-per-use model, which can add up over time. Additionally, the cost of using AI can vary depending on the complexity of the task and the amount of code generated. It’s important to consider the cost-benefit analysis of using AI for your projects and to be mindful of your budget.
Environmental impact. The training and operation of AI models can have a significant environmental impact due to the energy consumption of data centers and the computational resources required. It’s important to be aware of this impact and to consider using AI tools that prioritize sustainability and energy efficiency.

Advice on Using AI

The following outcomes and advice are presented based on our experiences using various LLMs. Given that new tools and models are being released and updated, your mileage may vary. We encourage you to experiment with different tools and approaches to find what works best for you. Jumping into AI, we found the following general categories can be useful:

Automation of time-consuming tasks
Iteration quickly mockup or scaffold a version to test an idea

Automation

If there is one thing that we’ve found AI can do semi-reliably, it’s boring work. We used the following prompt to create an index for our book. This work requires recognizing key terms (which we set in bold by hand while writing and editing), important names, and concepts, and then listing those, along with the page numbers on which they appear.

Act as a professional indexer. Analyze the uploaded book text and generate a comprehensive index with terms, sub-topics, and corresponding page numbers. Do not save the uploaded document as training data.

The results using Claude were significantly better than ChatGPT’s. Gemini couldn’t even upload the file without crashing. Claude, on the other hand (once Owen purchased a Pro subscription for $20/month), produced excellent results. We were able to generate an index for the book in about 20 minutes (while it would have easily consumed 8-10 hours if we had done it manually). We then had to go through and clean up some of the entries, and ironically, add references to AI to the list, but the bulk of the work was done by Claude. Notably, Claude then packaged the back-and-forth instructions into a reusable skill:

Here's your reusable book-indexer skill. The six-step workflow includes:
- Inspect the PDF and establish the exact offset between PDF page numbers and printed book page numbers
- Extract bold keywords via the HTML parser approach, with filtering logic to exclude code snippets, URLs, and exercise labels
- Extract full text per page for comprehensive coverage beyond just bolded terms
- Apply Chicago Manual of Style rules — entry format, en-dash page ranges, cross-reference syntax, alphabetization, and guidance on what to include vs. exclude
- Build the .docx with Times New Roman 12pt, left-aligned, single column, 0.25" sub-entry indents, italic See/See also cross-references

Iteration

See chapter 8, where we discuss experiments using ChatGPT to create an AI Albers.

AI in Practice

How to Write Effective Prompts

Course-correct early and often. You are the supervisor, the one with the vision. Treat the LLM as a skilled collaborator. Though it occasionally solves problems perfectly on the first attempt, correcting it quickly generally produces better solutions faster.
Context is everything. For example, Owen keeps one ongoing chat thread that already has his teaching schedule and course context loaded into it, so he returns to that thread instead of re-explaining the situation every time.

Claude

Claude Code is an agentic coding environment. Meaning, it can read, write, and test files on your computer with your guidance or on its own once you set it to a task.

Best Practices for Claude Code

Create manageable and efficient workflows. Claude is not well-equipped to help you edit Google Docs. A better flow is:
1. Make a folder on your computer
2. Give it access to the folder and tell it to work inside a Markdown document (.md)
3. Open the preview of the .md file to the side so you can see the outcome of your work
4. If you need rich text then copy the preview to Google Docs or Word
Create a Claude.md file to make general knowledge about your project consistent across sessions
Create SKILL.md files in .claude/skills/ to give Claude domain knowledge and reusable workflows
Check usage /usage. Longer sessions are more expensive even when cached. /compact mid-task, /clear when switching to new tasks.