Gentleman Programming Book

https://the-amazing-gentleman-programming-book.vercel.app
Admin
A comprehensive programming guide covering clean code, architecture, agile methodologies, and modern...
Tokens:104,822
Snippets:1,277
Trust Score:7.8
Update:4 months ago
Show doc for...
Tokens:
Raw
### Fetch API Examples

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter16_Frontend-Manual

Demonstrates basic GET and POST requests using the Fetch API, including JSON handling and a timeout implementation.

```javascript
// Simple GET
const response = await fetch('/api/users');
const users = await response.json();

// POST with JSON
const newUser = await fetch('/api/users', {
	method: 'POST',
	headers: {
		'Content-Type': 'application/json',
	},
	body: JSON.stringify({
		name: 'Gentleman',
		email: 'gentleman@dev.com',
	}),
});

// Timeout for fetch
async function fetchWithTimeout(url, timeout = 5000) {
	const controller = new AbortController();
	const timeoutId = setTimeout(() => controller.abort(), timeout);

	try {
		const response = await fetch(url, { signal: controller.signal });
		return await response.json();
	} finally {
		clearTimeout(timeoutId);
	}
}
```

--------------------------------

### Install a Plugin Manually in Nvim

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter05_NVIM

Create a new file in the 'plugins' folder and add the repository URL to install a plugin manually. Nvim will automatically install it on the next launch.

```lua
return {
    "repository-url",
}
```

--------------------------------

### Install Git

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter05_NVIM

Installs the Git version control system using Homebrew, which is necessary for cloning repositories.

```bash
brew install git

```

--------------------------------

### Install WSL and Set Default Version

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter05_NVIM

Installs the Windows Subsystem for Linux and sets the default version to 2 for optimal resource utilization.

```bash
wsl --install
wsl --set-default-version 2

```

--------------------------------

### Install styled-components

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter09_React

Command to install the styled-components library, a popular CSS-in-JS solution for React.

```bash
npm install styled-components
```

--------------------------------

### Initial Project Setup Commit

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter15_IA-Driven-Development

This commit marks the initial setup of the project structure and routing using scope-rule-architect and git-workflow-manager.

```git
COMMIT: feat: initial project setup with routing
```

--------------------------------

### Install Oh My Fish Framework

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter05_NVIM

Installs the Oh My Fish framework, a configuration manager for the Fish shell, enabling easy installation of themes and plugins.

```fish
curl https://raw.githubusercontent.com/oh-my-fish/oh-my-fish/master/bin/install | fish

```

--------------------------------

### Main Usage Example

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter03_Hexagonal_Architecture

Demonstrates how to wire up the different components (repository, service, controller) and initiate a bank account creation.

```typescript
// File main.ts
// Usage example
import { BankAccountRepository } from "./bank-account-repository";
import { BankAccountService } from "./bank-account-service";
import { BankAccountController } from "./bank-account-controller";

const bankAccountPort = new BankAccountRepository();
const bankAccountService = new BankAccountService(bankAccountPort);
const bankAccountController = new BankAccountController(bankAccountService);

bankAccountController.createBankAccount("John Doe", 20);
bankAccountController.createBank
```

--------------------------------

### Angular Component for Deferred Loading Example

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter12_Angular

A basic Angular component demonstrating deferred loading setup. It uses a timeout to simulate content readiness.

```typescript
@Component({
 selector: 'app-error',
 standalone: true,
 templateUrl: './error.component.html',
 styleUrls: ['./error.component.scss'],
})
export class ErrorComponent {
 isContentReady = false;

 ngOnInit() {
  setTimeout(() => {
   this.isContentReady = true;
  }, 5000);
 }
}
```

--------------------------------

### Install Homebrew Package Manager

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter05_NVIM

Downloads and executes the installation script for Homebrew, a package manager for macOS and Linux.

```bash
set install_script (curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)

```

--------------------------------

### Example Project Structure

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter15_IA-Driven-Development

Presents a detailed example of a project structure adhering to the 'Scope Rule' and 'Screaming Architecture' principles. It differentiates between local feature code, global shared code, and cross-cutting infrastructure.

```bash
src/
  features/
    task-management/
      task-management.tsx     # Main container
      components/
        TaskList.tsx          # Secondary container
        TaskItem.tsx          # Presentational
      services/
        TaskService.ts
      hooks/
        useTasks.ts
      models.ts

  shared/                     # GLOBAL = 2+ features
    components/
      Button.tsx
      Modal.tsx
    hooks/
      useLocalStorage.ts
    utils/
      formatters.ts

  infrastructure/             # Cross-cutting
    api/
    auth/
    monitoring/

```

--------------------------------

### Install Nvim using Homebrew

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter05_NVIM

Installs the latest version of Neovim (Nvim) and its dependencies using the Homebrew package manager.

```bash
brew install nvim

```

--------------------------------

### Install Node.js and NPM

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter05_NVIM

Installs Node.js and its package manager, NPM, using Homebrew. These are required for web development plugins and language servers.

```bash
brew install node
brew install npm

```

--------------------------------

### Complete Composition Example with Slots and Communication

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter09_React

A comprehensive example demonstrating component composition with distinct content slots and parent-child communication for actions. This pattern enhances flexibility and reusability.

```javascript
const Panel = ({ title, content, actions }) => {
 return (
  <div className='panel'>
   <div className='panel-header'>
    <h2>{title}</h2>
   </div>
   <div className='panel-content'>{content}</div>
   <div className='panel-actions'>{actions}</div>
  </div>
 );
};

const App = () => {
 const handleSave = () => {
  alert('Saved!');
 };

 const handleCancel = () => {
  alert('Cancelled');
 };

 return (
  <Panel
   title='Settings'
   content={<p>Here you can configure your preferences.</p>}
   actions={
    <div>
     <button onClick={handleSave}>Save</button>
     <button onClick={handleCancel}>Cancel</button>
    </div>
   }
  />
 );
};

```

--------------------------------

### Install Jest for Angular Unit Testing

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter12_Angular

Installs Jest, its Angular preset, and types for Angular testing. These are development dependencies.

```bash
npm install --save-dev jest @types/jest jest-preset-angular
```

--------------------------------

### Complete Example with Lazy Loading and Context API

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter09_React

A comprehensive example demonstrating lazy loading, nested routes, and authentication handling using React Context API. Ensures efficient loading and modular code organization.

```javascript
// App.js
import React, { Suspense, lazy } from 'react';
import {
 BrowserRouter as Router,
 Routes,
 Route,
 Navigate,
} from 'react-router-dom';
import { UserProvider } from './UserContext';
import Login from './pages/Login';
import PrivateRoute from './components/PrivateRoute';

const Dashboard = lazy(() => import('./pages/Dashboard'));
const Home = lazy(() => import('./pages/Home'));
const Profile = lazy(() => import('./pages/Profile'));
const Settings = lazy(() => import('./pages/Settings'));

const App = () => {
 return (
  <UserProvider>
   <Router>
    <Suspense fallback={<div>Loading...</div>}>
     <Routes>
      <Route path='/login' element={<Login />} />
      <Route
       path='/dashboard'
       element={
        <PrivateRoute>
         <Dashboard />
        </PrivateRoute>
       }
      >
       <Route path='home' element={<Home />} />
       <Route path='profile' element={<Profile />} />
       <Route path='settings' element={<Settings />} />
      </Route>
      <Route path='*' element={<Navigate to='/login' replace />} />
     </Routes>
    </Suspense>
   </Router>
  </UserProvider>
 );
};

export default App;

```

--------------------------------

### Start Claude Code

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter15_IA-Driven-Development

Navigate to your project directory and start the Claude Code application. Ensure you are in the correct project folder before initiating.

```bash
# Navigate to your project
cd /path/to/your/project

# Start Claude Code
claude

```

--------------------------------

### Install Fish Shell and Set as Default

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter05_NVIM

Installs the Fish shell and configures it as the system's default shell. This involves finding the Fish path, adding it to available shells, and then setting it as the default.

```bash
brew install fish
// set as default:

which fish
// this will return a path, let‘s call it whichFishResultingPath

// add it as an available shell
echo whichFishResultingPath | sudo tee -a /etc/shells

// set it as default
sudo chsh -s wichFishResultingPath

```

--------------------------------

### Complete React Context API Example

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter09_React

Demonstrates a full application structure using React Context API for state management across multiple components.

```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import { GentlemanProvider, useGentlemanContext } from './GentlemanContext';

const Father = () => {
 const { gentlemanContextValue, setGentlemanContextValue } = 
  useGentlemanContext();

 return (
  <div>
   <h1>Father Component</h1>
   <button onClick={() => setGentlemanContextValue('Shared Value')}> 
    Set Context Value
   </button>
   <Child1 />
  </div>
 );
};

const Child1 = () => {
 return (
  <div>
   <h2>Child1 Component</h2>
   <Child2 />
  </div>
 );
};

const Child2 = () => {
 const { gentlemanContextValue } = useGentlemanContext();

 return (
  <div>
   <h3>Child2 Component</h3>
   <p>Context Value: {gentlemanContextValue}</p>
  </div>
 );
};

const App = () => (
 <GentlemanProvider>
  <Father />
 </GentlemanProvider>
);

ReactDOM.render(<App />, document.getElementById('root'));
```

--------------------------------

### Project Specifications File Content Example

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter15_IA-Driven-Development

This is an example of the `PROJECT_SPECS.md` file content, detailing project description, user stories with acceptance criteria, data structure, and business rules for the TaskFlow application. This file provides essential context for AI agents.

```markdown
# TaskFlow - Project Specifications

## Project Description
TaskFlow is a personal task manager that allows organizing work with projects, priorities, and statuses. Everything is stored in localStorage.

## User Stories

### Epic 1: Basic Task Management

#### US-001: View task list
As a user, I want to see a list of tasks to know my pending work

**Acceptance Criteria:**
- Show empty list with "No tasks" message initially
- Each task displays: title, priority (color badge), status
- Tasks sorted by creation date (newest first)
**Technical Notes:** Use mocked data initially

#### US-002: Create new task
As a user, I want to create a new task to add pending work

**Acceptance Criteria:**
- Form with fields: title (required, 3-100 chars), description (optional), priority (select: low/medium/high)
- "Create" button disabled if title invalid
- Task appears immediately in list after creation
- Clear form after successful creation
**Validations:** Title between 3-100 characters

[... rest of user stories ...]

## Data Structure
Interface Task {
  id: string;        // UUID
  title: string;     // 3-100 chars
  description?: string;
  priority: 'low' | 'medium' | 'high';
  status: 'TODO' | 'IN_PROGRESS' | 'DONE';
  project: 'Personal' | 'Work' | 'Study' | 'General';
  createdAt: Date;
  updatedAt: Date;
}

## Business Rules
- Status transitions: TODO → IN_PROGRESS → DONE (and back)
- Default project is "General"
- Priority colors: low=green, medium=yellow, high=red
- All data persisted to localStorage key: taskflow_tasks


```

--------------------------------

### Install react-router-dom with npm

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter09_React

Installs the react-router-dom library using npm. This is a prerequisite for implementing routing in a React application.

```bash
npm install react-router-dom

```

--------------------------------

### Application Setup with User Registration

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter08_Clean_Architecture_Front_End

The main App component in React, setting up the UserRepository and handling the user submission logic by creating a RegisterUser use case.

```javascript
import React from "react";
import UserComponent from "./UserComponent";
import UserRepository from "./UserRepository";

function App() {
  const userRepository = new UserRepository();

  const handleUserSubmit = (user) => {
    try {
      const registerUser = new RegisterUser(userRepository, user);
      registerUser.execute();
      alert("User registered successfully!");
    } catch (error) {
      alert(error.message);
    }
  };

  return <UserComponent onSubmit={handleUserSubmit} />;
}
```

--------------------------------

### Install react-router-dom with yarn

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter09_React

Installs the react-router-dom library using yarn. This is an alternative to npm for package management.

```bash
yarn add react-router-dom

```

--------------------------------

### Install LazyVim Dependencies

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter05_NVIM

Installs essential command-line tools required for LazyVim, including GCC, fzf, fd, and ripgrep.

```bash
brew install gcc
brew install fzf
brew install fd
brew install ripgrep

```

--------------------------------

### Example: Implement US-002 (Create Task) - Planning

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter15_IA-Driven-Development

Act 1 of implementing US-002: Tony plans the task based on project specifications.

```text
> I need to implement US-002 from the project specs
```

--------------------------------

### Install SASS for SCSS Modules

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter09_React

Command to install the SASS compiler, enabling the use of SCSS files within a React project.

```bash
npm install sass
```

--------------------------------

### Install build-essential Package

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter05_NVIM

Updates package lists and installs the 'build-essential' package, which contains essential tools for compiling software. This is primarily for Linux systems.

```bash
sudo apt-get update
sudo apt-get upgrade
sudo apt-get install build-essential

```

--------------------------------

### Compound Components Example

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter16_Frontend-Manual

Illustrates the compound component pattern using Tabs, where related parts are managed under a single parent component.

```html
<Tabs defaultValue='tab1'>
	<Tabs.List>
		<Tabs.Trigger value='tab1'>Tab 1</Tabs.Trigger>
		<Tabs.Trigger value='tab2'>Tab 2</Tabs.Trigger>
	</Tabs.List>
	<Tabs.Content value='tab1'>Content 1</Tabs.Content>
	<Tabs.Content value='tab2'>Content 2</Tabs.Content>
</Tabs>

```

--------------------------------

### Context Provider Location Example

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter09_React

Illustrates how components outside the Provider cannot access context state, highlighting the importance of provider placement.

```html
<MyContext.Provider>
  <Father>
    <Child1 />
  </Father>
</MyContext.Provider>

<FatherOutsideContextProvider>
  <Child2 />  // Cannot access the context state
</FatherOutsideContextProvider>
```

--------------------------------

### Composition Example

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter09_React

Demonstrates building complex components by composing simpler ones using the `children` prop. This avoids prop drilling and promotes reusability.

```javascript
const Father = () => {
 const sharedProp = 'Shared Information';

 return (
  <Child1>
   <Child2 sharedProp={sharedProp} />
  </Child1>
 );
};

const Child1 = ({ children }) => {
 return <div>{children}</div>;
};

const Child2 = ({ sharedProp }) => {
 return <div>{sharedProp}</div>;
};

```

--------------------------------

### MongoDB User Adapter Implementation

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter07_Clean_Architecture

An example of an adapter for a MongoDB database, demonstrating how to fetch and save user data while abstracting database-specific operations.

```typescript
class MongoDBUserAdapter implements UserDatabaseAdapter {
    constructor(private db: DatabaseConnection) {}

    async fetchUser(userId: string) {
        const userDocument = await this.db.collection('users').findOne({ id: userId });
        return new User(userDocument.name, userDocument.email);
    }

    async saveUser(user: User) {
        await this.db.collection('users').insertOne({
            id: user.id,
            name: user.name,
            email: user.email
        });
    }
}
```

--------------------------------

### TypeScript Compiler Configuration

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter10_TypeScript

A basic `tsconfig.json` file example showing compiler options like target, output directory, and strict mode.

```json
// tsconfig.json
{
 "compilerOptions": {
  "target": "es6", // Indicates which version of JavaScript we want to transpile to
  "outDir": "./dist", // Folder where the transpiled files will be saved
  "strict": true // Enables all strict checks
 },
 "include": ["src/**/*.ts"], // Files to include in the transpilation
 "exclude": ["node_modules"] // Files or folders to exclude
}

```

--------------------------------

### Direct Import Example

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter13_Barrels

This snippet shows how to import a module directly from its source file, bypassing barrel exports for greater dependency precision.

```javascript
import { useFoo } from './Foo/foo';

```

--------------------------------

### CSS Specificity: Point System Examples

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter16_Frontend-Manual

Demonstrates how different CSS selectors contribute points to specificity, determining which rule applies. Higher points win.

```css
/* Specificity: 0-0-1 (1 element) */
p {
	color: black;
}

/* Specificity: 0-1-0 (1 class) */
.text {
	color: blue;
}

/* Specificity: 0-1-1 (1 class + 1 element) */
p.text {
	color: green;
}

/* Specificity: 1-0-0 (1 ID) */
#paragraph {
	color: red;
}

/* Specificity: 1-1-1 (1 ID + 1 class + 1 element) */
p#paragraph.text {
	color: purple;
}

```

--------------------------------

### Creating and Encoding a Simple Image in Go

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter04_GoLang

Demonstrates how to create a basic RGBA image, set pixel colors, and encode it into a PNG file. Ensure the output file path is valid.

```Go
package main

import (
	"image"
	"image/color"
	"image/png"
	os
)

func main() {
	// Create a new RGBA image with dimensions 100x100
	img := image.NewRGBA(image.Rectangle(0, 0, 100, 100))

	// Set all pixels to black
	for x := 0; x < 100; x++ {
		for y := 0; y < 100; y++ {
			img.Set(x, y, color.Black)
		}
	}

	// Set the pixel at the center to red
	img.Set(50, 50, color.RGBA{255, 0, 0, 255})

	// Create a PNG file to save the image
	file, err := os.Create("simple_image.png")
	if err != nil {
		panic(err)
	}
	defer file.Close()

	// Encode the image to PNG format and save it to the file
	err = png.Encode(file, img)
	if err != nil {
		panic(err)
	}

	println("Simple image generated successfully!")
}


```

--------------------------------

### Install Playwright for Functional and E2E Testing

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter12_Angular

Installs Playwright test runner as a development dependency.

```bash
npm install --save-dev @playwright/test
```

--------------------------------

### Create React Project with Vite

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter09_React

Command to initialize a new React project using Vite, a fast build tool. Select React and TypeScript during the setup process.

```bash
npm create vite@latest

```

--------------------------------

### Launching a Goroutine in Go

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter04_GoLang

Illustrates how to execute a function concurrently using the `go` keyword. The example shows a function running as a goroutine alongside the main function.

```Go
	go f(x, y, z)


```

```Go
package main

import (
  "fmt"
)

func say(s string) {
  for i := 0; i < 3; i++ {
    fmt.Println(s)
  }
}

func main() {
  // Launch a new goroutine to run the say function with "Hello"
  go say("Hello")

  // Print "World" 3 times in the main function
  for i := 0; i < 3; i++ {
    fmt.Println("Gentleman")
  }
}


```

--------------------------------

### Good Screaming Architecture Example

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter15_IA-Driven-Development

Illustrates a 'screaming architecture' where directory names clearly indicate the application's functionality. This structure aids immediate understanding of the app's purpose.

```bash
src/
  features/
    shopping-cart/        # It's a cart!
    user-authentication/  # Authentication!
    task-management/      # Task management!

```

--------------------------------

### Server and Client Component Example

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter16_Frontend-Manual

Illustrates a Server Component for data fetching and rendering, and a Client Component for user interaction. Server Components run exclusively on the server, while Client Components can run in the browser.

```javascript
// Server Component - runs on the server
async function ProductList() {
	const products = await db.products.findMany();
	return (
		<ul>
			{products.map(p => (
				<li key={p.id}>{p.name}</li>
			))}
		</ul>
	);
}

// Client Component - runs in the browser
('use client');
function AddToCartButton({ productId }) {
	const [loading, setLoading] = useState(false);
	return <button onClick={() => addToCart(productId)}>Add</button>;
}
```

--------------------------------

### Using Project Specs in Agent Commands

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter15_IA-Driven-Development

This example shows how to reference the `PROJECT_SPECS.md` file when issuing a command to an agent, ensuring the agent has complete project context. Alternatively, the file can be added to `CLAUDE.md` for persistent availability.

```bash
> @PROJECT_SPECS.md Use tdd-test-first to create tests for US-002
```

--------------------------------

### Install Testing Library for Angular User-Centric Tests

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter12_Angular

Installs the Testing Library for Angular and its Jest DOM matchers. These are development dependencies.

```bash
npm install --save-dev @testing-library/angular @testing-library/jest-dom
```

--------------------------------

### Basic CI/CD with GitHub Actions

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter16_Frontend-Manual

This workflow automates the build and deployment process for a Node.js application on push to the main branch. It includes steps for checking out code, setting up Node.js, installing dependencies, running tests, building the project, and deploying.

```yaml
name: Deploy
on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm ci
      - run: npm test
      - run: npm run build
      - run: npm run deploy

```

--------------------------------

### Install Zellij Terminal Multiplexer

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter05_NVIM

Installs Zellij, a terminal multiplexer that allows users to manage multiple terminal panes and run commands concurrently.

```bash
brew install zellij

```

--------------------------------

### Importing Multiple Packages in Go

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter04_GoLang

Shows how to import multiple packages efficiently using parentheses. This avoids repeating the 'import' keyword for each package.

```go
import (
    "miProject/cmd/web/routes"
    "miProject/internal/models"
)

```

--------------------------------

### Numeric Enums Starting from Zero

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter10_TypeScript

Defines a numeric enum where members automatically increment starting from 0. Useful for representing a fixed set of related numeric constants.

```typescript
enum Direction {
 Up,
 Down,
 Left,
 Right,
}

console.log(Direction.Up); // Output: 0
console.log(Direction.Left); // Output: 2
```

--------------------------------

### Create Map using make

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter04_GoLang

Use the `make` function to create and initialize a map with a specific key-value type. This is useful when the map needs to be populated dynamically.

```Go
type Persona struct {
  DNI, Nombre string
}

var m map[string]Persona

func main() {
  m = make(map[string]Persona)
  m["123"] = Persona{"123", "pepe"}
  fmt.Println(m["123"])
}
```

--------------------------------

### Basic Fetch API GET Request

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter09_React

Make a GET request to a specified URL using the fetch API. The response is parsed as JSON, and any errors are caught and logged.

```javascript
fetch('https://api.example.com/data')
 .then(response => response.json())
 .then(data => console.log(data))
 .catch(error => console.error('Error:', error));
```

--------------------------------

### Create an Unbuffered Channel

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter04_GoLang

Shows how to create a new channel for integers using the make function.

```Go
ch := make(chan int)
```

--------------------------------

### Playwright Login Test Example

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter12_Angular

End-to-end test for login functionality using Playwright. This example fills credentials, clicks submit, and asserts redirection and header text.

```typescript
import { test, expect } from '@playwright/test';

test('Login functionality', async ({ page }) => {
 await page.goto('http://example.com/login');

 await page.fill('input[name="username"]', 'admin');
 await page.fill('input[name="password"]', '1234');
 await page.click('button[type="submit"]');

 await expect(page).toHaveURL('http://example.com/dashboard');
 await expect(page.locator('h1')).toHaveText('Dashboard');
});
```

--------------------------------

### Deferred Loading with Placeholder Example

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter12_Angular

Demonstrates the combined use of @defer and @placeholder for managing user experience. @defer controls loading timing, while @placeholder provides visual feedback.

```html
@defer (on timer(3000ms)) {
<p>Content loaded after 3 seconds</p>
} @placeholder {
<p>Loading content...</p>
}
```

--------------------------------

### Service Worker Installation and Fetch Handling

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter16_Frontend-Manual

Defines a Service Worker to cache assets during installation and serve them from the cache during fetch events. Register the service worker in your main application script.

```javascript
// sw.js
const CACHE_NAME = 'my-app-v1';
const ASSETS = ['/', '/index.html', '/styles.css', '/app.js'];

// Installation: cache assets
self.addEventListener('install', event => {
	event.waitUntil(caches.open(CACHE_NAME).then(cache => cache.addAll(ASSETS)));
});

// Fetch: serve from cache
self.addEventListener('fetch', event => {
	event.respondWith(
		caches.match(event.request).then(cached => cached || fetch(event.request))
	);
});

// Register
if ('serviceWorker' in navigator) {
	navigator.serviceWorker.register('/sw.js');
}

```

--------------------------------

### Numeric Enums Starting from a Specific Number

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter10_TypeScript

Defines a numeric enum where the first member is explicitly assigned a starting number, and subsequent members increment from there. Useful for custom numeric ranges.

```typescript
enum Direction {
 Up = 1,
 Down,
 Left,
 Right,
}

console.log(Direction.Up); // Output: 1
console.log(Direction.Right); // Output: 4
```

--------------------------------

### User Info Adapter Example

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter07_Clean_Architecture

Demonstrates how an adapter transforms data between external and internal formats. Use this to map data structures when interacting with external systems or APIs.

```typescript
class UserInfoAdapter {
    convertToInternalFormat(externalData: { name: string; lastName: string }) {
        // Transform external data to internal format
        return {
            firstName: externalData.name,
            lastName: externalData.lastName
        };
    }

    convertToExternalFormat(internalData: { firstName: string; lastName: string }) {
        // Prepare internal data to send externally
        return {
            name: internalData.firstName,
            lastName: internalData.lastName
        };
    }
}

```

--------------------------------

### Reading and Copying Data with io.Reader

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter04_GoLang

Demonstrates how to use io.Reader and io.Copy to read data from a string and write it to a buffer. Ensure the reader and writer are properly initialized.

```Go
func (T) Read(b []byte) (n int, err error)

```

```Go
package main

import (
	"fmt"
	"io"
	"strings"
)

func main() {
  data := "Gentleman Programming"


  // create a new io.Reader reading from data
  reader := strings.NewReader(data)

  // create a buffer to store the copied data
  var buffer strings.Builder

  // copy data from the reader to a buffer. io.Copy reads from the reader and writes to the writer until either EOF is reached on the reader or an error occurs
  n, err := io.Copy(&buffer, reader)
 
  if err != nil {
    fmt.Println("Error:", err)
  } else {
      fmt.Println("\n%d bytes copied successfully. \n", n)

      // access the data copied into the buffer
      fmt.Println("Copied Data:", buffer.String())
    }
}

```

--------------------------------

### Configure Jest for Angular Projects

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter12_Angular

Sets up Jest with the Angular preset, specifies a setup file for after environment initialization, and ignores end-to-end and functional test files. It also configures global setup.

```javascript
module.exports = {
 preset: 'jest-preset-angular',
 setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
 testPathIgnorePatterns: [
  '<rootDir>/node_modules/',
  '.*\.e2e\.spec\.ts$',
  '.*\.functional\.spec\.ts$',
 ],
 globalSetup: 'jest-preset-angular/global-setup',
};
```

--------------------------------

### Complete Example: Combined Enums and Mapped Types

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter10_TypeScript

A full demonstration of combining enums, deriving a union type, and creating a mapped type for flexible property definition. Includes a usage example.

```typescript
enum Numbers1 {
 'NUMBER1' = 'number1',
 'NUMBER2' = 'number2',
}

enum Numbers2 {
 'NUMBER3' = 'number3',
}

const myNumbers = { ...Numbers1, ...Numbers2 } as const;
const mixValues = Object.values(myNumbers);

type MixNumbers = (typeof mixValues)[number];

type Enums = {
 [key in MixNumbers]: any;
};

// Usage example
const example: Enums = {
 number1: 'This is number 1',
 number2: 42,
 number3: { detail: 'Number 3 as an object' },
};

console.log(example);

```

--------------------------------

### Basic Go Program Structure

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter04_GoLang

A minimal Go program demonstrating package declaration, import, variable declaration with type inference, and function definition.

```go
package main - package name

import "fmt" - fmt package is imported, no path because it's Go's own

var number int = 2

func main() {
    i, j := 42, 2701 - local variables to the method, i with value 42 and j with value 2701

    fmt.Println(i) - using the "Println" method of the "fmt" package
}

```

--------------------------------

### TypeScript String Primitive Type

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter10_TypeScript

Example of declaring a variable with the string primitive type.

```typescript
let name: string = 'Gentleman';

```

--------------------------------

### TypeScript Boolean Primitive Type

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter10_TypeScript

Example of declaring a variable with the boolean primitive type.

```typescript
let isActive: boolean = true;

```

--------------------------------

### TypeScript 'void' Return Type

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter10_TypeScript

Example of a function that returns 'void', indicating it does not return any value.

```typescript
function warnUser(): void {
 console.log('This is a warning!');
}

```

--------------------------------

### Go Routine with Select and Default Case

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter04_GoLang

Illustrates using a select statement with a default case, which executes if no other case is ready. This prevents blocking indefinitely.

```Go
func say(s string, ch chan string) {
  for i := 0; i < 3; i++ {
    fmt.Println(s)
    ch <- s // Send "Hello" to the channel after each print
  }
  close(ch) // Close the channel after sending messages
}

func main() {
  // Create a channel to hold strings
  ch := make(chan string)

  // Launch a new goroutine to run the say function
  go say("Hello", ch)

  // Use select with default case
  for {
    select {
    case msg, ok := <-ch:
      if !ok {
        fmt.Println("Channel closed. Exiting.")
        break
      }
      fmt.Println("Received:", msg)
    case <-time.After(1 * time.Second):
      fmt.Println("Timeout waiting for message.")
      break
    default:
      fmt.Println("Nothing to receive or timeout yet.")
    }
  }
}
```

--------------------------------

### Immutability Example in TypeScript

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter10_TypeScript

Shows how TypeScript prevents type changes for variables, enforcing immutability.

```typescript
// Immutability example in TypeScript
let x: number = 10;
// x = "Type change"; // This will generate an error in TypeScript.

```

--------------------------------

### Typing Example in TypeScript

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter10_TypeScript

Illustrates how to declare variables with boolean and number type annotations in TypeScript.

```typescript
// Typing example in TypeScript
let isActive: boolean = true;
let quantity: number = 123;

```

--------------------------------

### Initialize Go Array

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter04_GoLang

Initializes an array with a specified size and provides initial values for its elements.

```Go
var a = [2]int{2, 3}

fmt.Println(a) - [2 3]
```

--------------------------------

### HTTP Cache-Control Headers

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter16_Frontend-Manual

Provides examples of Cache-Control directives for managing browser and proxy caching behavior.

```http
# Never cache
Cache-Control: no-store

# Cache but always revalidate
Cache-Control: no-cache

# Cache for 1 hour
Cache-Control: max-age=3600

# Cache for 1 year (for versioned assets)
Cache-Control: max-age=31536000, immutable
```

--------------------------------

### Create a Buffered Channel

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter04_GoLang

Demonstrates creating a channel that can hold a specified number of values without blocking the sender.

```Go
ch := make(chan int, 100)
```

--------------------------------

### Basic TypeScript Example

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter10_TypeScript

A simple TypeScript code snippet demonstrating variable declaration with a type annotation.

```typescript
// Basic TypeScript example
let message: string = 'Hello, TypeScript!';
console.log(message);

```

--------------------------------

### TypeScript Type Error Example

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter10_TypeScript

Demonstrates a type error in TypeScript when assigning a string to a variable declared as a number.

```typescript
number = 'this should fail'; // Error: Type 'string' is not assignable to type 'number'.

```

--------------------------------

### Basic React Router Configuration

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter09_React

Sets up the main router for a React application using BrowserRouter, Routes, and Route components. Includes a catch-all route for redirection.

```javascript
import React from 'react';
import {
 BrowserRouter as Router,
 Routes,
 Route,
 Navigate,
} from 'react-router-dom';
import Login from './pages/Login';
import Dashboard from './pages/Dashboard';

const App = () => {
 return (
  <Router>
   <Routes>
    <Route path='/login' element={<Login />} />
    <Route path='/dashboard' element={<Dashboard />} />
    <Route path='*' element={<Navigate to='/login' replace />} />
   </Routes>
  </Router>
 );
};

export default App;

```

--------------------------------

### Defining a Public Function in Go

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter04_GoLang

A public function in Go is defined with an uppercase starting letter. It can be accessed from other packages after importing them.

```go
func MyFunction()

```

--------------------------------

### Defining a Private Function in Go

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter04_GoLang

A private function in Go is defined with a lowercase starting letter. It cannot be accessed from outside its own package.

```go
func myFunction()

```

--------------------------------

### Importing a Single Package in Go

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter04_GoLang

Demonstrates how to import a single package in Go. The package path is specified after the 'import' keyword.

```go
import "miProject/cmd/web/routes"

```

--------------------------------

### DOM Tree Structure Example

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter16_Frontend-Manual

Illustrates the hierarchical structure of the DOM, showing how HTML tags are represented as nodes in a tree.

```text
document
└── html
    ├── head
    │   ├── title
    │   └── meta
    └── body
        ├── header
        │   └── nav
        └── main
            └── article

```

--------------------------------

### Go Routine with Select and Timeout

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter04_GoLang

Demonstrates using a select statement to wait on a channel or a timeout. Useful for handling concurrent operations with a time limit.

```Go
func say(s string, ch chan string) {
  for i := 0; i < 3; i++ {
    fmt.Println(s)
    ch <- s // Send "Hello" to the channel after each print
  }
  // Close the channel after the loop finishes sending messages
  close(ch)
}

func main() {
  // Create a channel to hold strings
  ch := make(chan string)

  // Launch a new goroutine to run the say function
  go say("Hello", ch)

  // Use select to handle messages from the channel or a timeout
  for {
    select {
    case msg, ok := <-ch: // Receive message and check channel open state
      if !ok {
        fmt.Println("Channel closed. Exiting.")
        break
      }
      fmt.Println("Received:", msg)
    case <-time.After(1 * time.Second): // Timeout after 1 second if no message received
      fmt.Println("Timeout waiting for message.")
      break
    }
  }
}
```

--------------------------------

### TypeScript Tuple Primitive Type

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter10_TypeScript

Example of declaring a tuple in TypeScript, which is an array with a fixed number of elements of known types.

```typescript
let tuple: [string, number] = ['hello', 10];

```

--------------------------------

### Barrel Export Example

Source: https://the-amazing-gentleman-programming-book.vercel.app/en/book/Chapter13_Barrels

This snippet shows a typical barrel export file that re-exports modules from other files within the same directory.

```javascript
// Foo/index.js
export { useFoo } from './foo';
export { FooContext } from './FooContext';
export const foo = 1;

```
Tokens:
Raw