initial commit

project_51_claude_code/1_40001_introduction_to_claude_code.html

@@ -0,0 +1,41 @@
+<!-- Enlighter Metainfo
+{
+  "id": 40001,
+  "title": "Introduction to Claude Code",
+  "next_button_title": "Let's get started!"
+}
+-->
+
+<h5>Welcome to Semi-Deterministic Workflows with Claude Code!</h5>
+<p>In this course, you'll learn how to harness the power of AI to streamline your development process. We'll be using Claude Code, a cutting-edge tool from Anthropic that integrates the advanced reasoning of the Claude 3 model family directly into your command line.</p>
+
+<h5>What is Claude Code?</h5>
+<p>Claude Code is a command-line interface (CLI) that acts as your AI coding partner. It can help you with a wide range of development tasks, from generating boilerplate code and writing unit tests to debugging complex issues and designing application architecture. By bringing AI into your terminal, Claude Code helps you code faster, smarter, and with greater consistency.</p>
+
+<h5>What are you going to learn?</h5>
+<p>You will learn about a powerful software development approach called semi-deterministic workflow. This method combines the consistency of automated scripts with the creative problem-solving of large language models. By the end of this tutorial, you'll be able to build robust applications more efficiently by letting the AI handle the heavy lifting while you guide the overall strategy.</p>
+
+<h5>What You Will Build</h5>
+<p>In this course, you will create a simple task manager application using Claude Code and a semi-deterministic workflow approach. This workflow combines the predictability of automated processes with the intelligence of AI-driven decision making.</p>
+
+<p>The task manager will feature:</p>
+<ul>
+<li>Add, edit, and delete tasks</li>
+<li>Mark tasks as complete</li>
+<li>Filter tasks by status</li>
+<li>Clean, modern interface</li>
+</ul>
+
+<p>But more importantly, you'll learn how to set up workflows where Claude Code handles architectural decisions while maintaining consistent coding standards.</p>
+
+<h5>Understanding Semi-Deterministic Workflows</h5>
+<p>Semi-deterministic workflows represent a powerful approach to software development that combines the best of both worlds:</p>
+
+<p><strong>Deterministic part:</strong> Pre-configured rules and automatic actions such as code formatting, testing, commits, and consistent project structure. These elements remain predictable and standardized.</p>
+
+<p><strong>Semi-deterministic part:</strong> Claude makes intelligent decisions about code structure, architecture, feature implementation, and improvements based on the current context and project needs.</p>
+
+<p>This approach allows you to maintain coding standards while leveraging AI's creativity and problem-solving capabilities for complex development decisions.</p>
+
+<h5>What's Next</h5>
+<p>Now that you have an understanding of Claude Code and semi-deterministic workflows, it's time to set up your environment. In the next stage, we'll install and configure Claude Code to get you ready for building our task manager application.</p>

project_51_claude_code/2_40002_installing_claude_code.html

@@ -0,0 +1,67 @@
+<!-- Enlighter Metainfo
+{
+  "id": 40002,
+  "title": "Installing Claude Code",
+  "next_button_title": "I've installed it!"
+}
+-->
+
+<h5>Installing Claude Code</h5>
+<p>Before we begin building our task manager, we need to install Claude Code CLI. Claude Code is a powerful command-line tool that brings Claude's capabilities directly into your development environment.</p>
+
+<h5>System Requirements</h5>
+<p>Make sure your system meets these requirements:</p>
+<ul>
+<li><strong>Operating Systems:</strong> macOS 10.15+, Ubuntu 20.04+/Debian 10+, or Windows 10+ (with WSL 1, WSL 2, or Git for Windows)</li>
+<li><strong>Hardware:</strong> 4GB+ RAM</li>
+<li><strong>Software:</strong> Node.js 18+</li>
+<li><strong>Network:</strong> Internet connection required for authentication and AI processing</li>
+<li><strong>Shell:</strong> Works best in Bash, Zsh or Fish</li>
+</ul>
+
+<h5>Installation Steps</h5>
+<p>Let's install Claude Code using npm. The installation is straightforward but there are important considerations for different operating systems.</p>
+
+<callout>Install Claude Code globally using npm. Run this command in your terminal:
+
+npm install -g @anthropic-ai/claude-code
+
+Important: Do NOT use `sudo npm install -g` as this can lead to permission issues and security risks.</callout>
+
+<h5>Verify Your Installation</h5>
+<p>After installation, let's verify that everything is working correctly.</p>
+
+<callout type="chat">Run this command to check your Claude Code installation:
+
+  claude doctor
+</callout>
+
+<h5>Authentication</h5>
+<p>Claude Code offers several authentication options. For this tutorial, we'll use the most common approach:</p>
+
+<callout type="chat">Navigate to your project directory and start Claude Code:
+
+cd your-project-directory
+claude
+</callout>
+
+<p>You'll be prompted to authenticate. Choose one of these options:</p>
+<ol>
+<li>Anthropic Console (requires active billing at console.anthropic.com)</li>
+<li>Claude App with Pro or Max plan</li>
+<li>Enterprise platforms (Bedrock or Vertex AI)</li>
+</ol>
+
+<ul interactive>
+  <li title="Claude Code is installed">
+  </li>
+  <li title="Claude Code authentication is successful">
+  </li>
+</ul>
+
+<img style="margin: auto; display: block; width: 800px;" src="https://ucarecdn.com/974f9e4a-5542-47db-b3af-ded1cc09b9a6/" alt="Claude Code" title="Claude Code">
+
+<h5>What's Next</h5>
+<p>Now that you have Claude Code installed and authenticated, you're ready to start building our task manager application using semi-deterministic workflows. In the next stage, we'll set up our project structure and create the foundation for our intelligent development workflow.</p>
+
+<alert>If any of these checks fail, don't proceed to the next stage. Revisit the installation and authentication steps, or consult the Claude Code documentation for troubleshooting.</alert>

project_51_claude_code/3_40003_creating_your_first_app_with_claude_code.html

@@ -0,0 +1,91 @@
+<!-- Enlighter Metainfo
+{
+  "id": 40003,
+  "title": "Creating Your First App with Claude Code",
+  "next_button_title": "Set up hooks"
+}
+-->
+
+<h5>Time to Get Hands-On</h5>
+<p>Now that Claude Code is installed and authenticated, it's time to experience its power firsthand. In this stage, we'll create a basic task manager application structure and see how Claude Code can intelligently generate code, suggest architecture, and set up development environments.</p>
+
+<p>This hands-on practice will demonstrate the Claude Code in action - we'll provide the requirements, and Claude Code will make smart decisions about implementation details.</p>
+
+<h5>Setting Up Your Project</h5>
+<p>Let's start by creating a dedicated workspace for our task manager application. We'll set up the basic project structure manually first, then let Claude Code enhance it with intelligent suggestions.</p>
+
+<h5>Step 1: Create Project Structure</h5>
+
+<p>Let's set up the basic project structure with npm and create our initial files:</p>
+
+<callout>
+npm init -y
+mkdir src
+cd src
+touch index.html app.js style.css
+cd ..</callout>
+
+<p>This creates a basic structure with a `package.json` file and our main source files in the `src` directory.</p>
+
+<h5>Step 2: Generate Your Application Structure</h5>
+<p>Now comes the exciting part - let's start Claude Code and see how it can help us build our application:</p>
+
+<p>Here's where the magic happens. We'll give Claude Code a clear prompt about what we want to build, and it will make intelligent decisions about the implementation:</p>
+
+<callout label="Copy and paste to Claude Code">
+I'm creating a simple Task Manager web application. Help me set up the basic project structure with HTML, CSS and JavaScript. Create a package.json file with necessary development scripts, including live-server for local hosting.
+
+The task manager should include:
+- Add new tasks
+- Mark tasks as complete/incomplete
+- Delete tasks
+- Filter tasks by status (all, active, completed)
+- Clean, modern interface
+
+Please set up the complete file structure and provide the initial code for all files.
+
+Run the app after generating all the files
+</callout>
+
+<h5>What to Expect</h5>
+<p>After running this prompt, Claude Code will demonstrate several key capabilities of semi-deterministic workflows:</p>
+
+<ul>
+<li><strong>Intelligent Architecture Decisions:</strong> Claude will suggest an appropriate file structure and code organization</li>
+<li><strong>Development Environment Setup:</strong> It will configure package.json with useful scripts for development</li>
+<li><strong>Modern Web Practices:</strong> The generated code will follow current best practices for HTML, CSS, and JavaScript</li>
+<li><strong>Complete Implementation:</strong> You'll get working code that you can immediately test and run</li>
+</ul>
+
+<h5>Verification Steps</h5>
+<p>Once Claude Code finishes generating your application, let's verify everything is working correctly:</p>
+
+<callout>
+Check the project structure. Verify that there are:
+
+- Updated package.json with development scripts
+- HTML file with proper structure
+- CSS file with modern styling
+- JavaScript file with task management functionality</callout>
+
+<p>Now let's run and test the application.</p>
+
+<callout>Install dependencies and test your application:
+
+npm install
+npm start
+</callout>
+
+<img style="margin: auto; display: block; width: 800px;" src="https://ucarecdn.com/650f2dc0-06fd-41e6-8ec9-202e848e57be/" alt="Task Manager Application" title="Task Manager Application">
+
+<p>By the end of this stage, you should have:</p>
+
+<ul interactive>
+  <li title="A complete project structure with all necessary files"></li>
+  <li title="A working task manager application that runs in your browser"></li>
+</ul>
+
+<alert>If your application isn't working as expected, don't worry! In the next stage, we'll explore how to iterate and improve the application using Claude Code's debugging and enhancement capabilities.</alert>
+
+<h5>What's Next</h5>
+<p>Congratulations! You've successfully used Claude Code to generate a complete web application. In the next stage, we'll dive deeper into the semi-deterministic workflow by customizing and enhancing the application, demonstrating how Claude Code can adapt to changing requirements while maintaining code quality.</p> 

project_51_claude_code/4_40004_setting_up_deterministic_hooks.html

@@ -0,0 +1,139 @@
+<!-- Enlighter Metainfo
+{
+  "id": 40003,
+  "title": "Setting Up Deterministic Hooks",
+  "next_button_title": "Let's automate!"
+}
+-->
+
+<h5>Automating with Deterministic Hooks</h5>
+<p>In the previous stage, you saw how Claude Code can make intelligent decisions to generate a complete application. Now, we'll focus on the deterministic part of our workflow by setting up hooks. Hooks are automated actions that run at specific points in the development process, ensuring consistency and quality without manual intervention.</p>
+
+<h5>Understanding Hooks</h5>
+<p>Hooks in Claude Code are the deterministic core of your workflow. They automatically perform specific actions at key moments:</p>
+<ul>
+    <li><strong>PreToolUse:</strong> Executes before each file change is applied. Useful for validation or backups.</li>
+    <li><strong>PostToolUse:</strong> Executes after each file change is applied. Perfect for formatting, linting, or running tests.</li>
+    <li><strong>Stop:</strong> Executes when Claude completes a task. Ideal for final actions like committing changes or sending notifications.</li>
+</ul>
+<p>By automating these routine tasks, you can focus on the creative aspects of development while maintaining a high standard of code quality.</p>
+
+<h5>Step 1: Create Hooks Configuration File</h5>
+<p>First, we need to create a directory and a file to store our hook configurations. Claude Code looks for these configurations in a <code>.claude</code> directory in your project root.</p>
+
+<callout>Create the necessary directory and file for your hooks:
+
+mkdir .claude
+touch .claude/settings.json
+</callout>
+
+<h5>Step 2: Configure Your Hooks</h5>
+<p>Now, let's instruct Claude to populate our <code>hooks.json</code> file. We will configure hooks for automatic logging of all the bash commands used by Claude Code agent.</p>
+
+<callout>
+Create a .claude/logger.py file with the follwowing content:
+
+#!/usr/bin/env python3
+"""
+Command logging hook.
+Logs all Bash commands with timestamps and descriptions.
+"""
+import json
+import sys
+from datetime import datetime
+from pathlib import Path
+
+
+def main():
+    try:
+        # Read input
+        input_data = json.load(sys.stdin)
+        tool_name = input_data.get('tool_name', '')
+
+        # Log all tool actions (not just Bash)
+        if not tool_name:
+            sys.exit(0)
+
+        # Extract tool info
+        tool_input = input_data.get('tool_input', {})
+        session_id = input_data.get('session_id', 'unknown')
+
+        # Format log entry based on tool type
+        timestamp = datetime.now().strftime('%Y-%m-%d %H:%M:%S')
+
+        if tool_name == 'Bash':
+            command = tool_input.get('command', '')
+            description = tool_input.get('description', 'No description')
+            log_entry = f"[{timestamp}] [{session_id[:8]}] BASH: {command} - {description}\n"
+        else:
+            # For other tools, log the tool name and key parameters
+            key_info = str(tool_input)[:100] + '...' if len(str(tool_input)) > 100 else str(tool_input)
+            log_entry = f"[{timestamp}] [{session_id[:8]}] {tool_name.upper()}: {key_info}\n"
+
+        # Append to log file
+        log_file = Path.cwd() / 'claude-logs.txt'
+        try:
+            with open(log_file, 'a') as f:
+                f.write(log_entry)
+        except Exception as e:
+            print(f"Warning: Could not write to command log: {e}", file=sys.stderr)
+
+
+    except json.JSONDecodeError:
+        print("Error: Invalid JSON input", file=sys.stderr)
+        sys.exit(1)
+    except Exception as e:
+        # Don't fail the command due to logging errors
+        print(f"Warning: Command logging error: {e}", file=sys.stderr)
+        sys.exit(0)
+
+
+if __name__ == "__main__":
+    main()
+
+</callout>
+
+<p>We have created a simple logger script, but in fact you can create more complex hooks in the language you like.</p>
+
+<p>How we have to configure the conditions under which the script will be executed. Let's ask an assistant to create a configuration file:</p>
+
+<callout>
+ Create a .claude/settings.json file with the following content:
+
+ {
+  "hooks": {
+    "PostToolUse": [
+      {
+        "matcher": "Bash",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "python .claude/logger.py"
+          }
+        ]
+      }
+    ]
+  }
+}
+</callout>
+
+<p>In this configuration, we set up a <code>PostToolUse</code> hook that triggers our logging script after every use of the <code>Bash</code> tool. This way, every command executed by Claude will be logged with a timestamp and description.</p>
+
+<p>Now in the terminal, ask Claude Code to do some analysis of your project filesystem:</p>
+
+<callout label="Copy and paste to Claude Code">How much space does my current project occupy?</callout>
+
+<p>After Claude completes the task, check the <code>claude-logs.txt</code> file in your project root. You should see a log entry for the bash command that was executed.</p>
+
+<p>By the end of this stage, you will have a more robust and automated workflow:</p>
+
+<ul interactive>
+  <li title="A .claude/settings.json file with configuration for logging hook is created."></li>
+  <li title="Claude Code authomatically logs the bash commands"></li>
+</ul>
+
+<p>Feel free to test your custom hooks. For more information about how the Claude Hooks can be configured, refer to <a href="https://docs.anthropic.com/en/docs/claude-code/hooks">official documentation</a></p>
+
+<warning>If you notice that the hook does not work as expected, calling <code>/hooks</code> and then selecting <code>Disable all hooks</code>, and then re-enable it by calling <code>/hooks</code> again.</warning>
+
+<p>With deterministic hooks in place, your workflow is now smarter and more efficient. In the next stage, we'll explore the other side of the coin: creating semi-deterministic custom commands that empower Claude to make intelligent decisions within a structured framework.</p>