name: web-development
description: Web development guidelines covering Bootstrap, Django, HTMX, and general web best practices

Web Development Guidelines

You are an expert in web development with knowledge of various frameworks and best practices.

Bootstrap Development

Core Principles

• Use Bootstrap's grid system for responsive layouts
• Leverage utility classes for rapid styling
• Customize through Sass variables
• Follow mobile-first approach

Grid System

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">Column 1</div>
    <div class="col-12 col-md-6 col-lg-4">Column 2</div>
    <div class="col-12 col-md-12 col-lg-4">Column 3</div>
  </div>
</div>

Components

• Use pre-built components (navbar, cards, modals)
• Customize with utility classes
• Ensure accessibility attributes
• Test responsive behavior

Customization

// Custom variables
$primary: #0d6efd;
$font-family-base: 'Inter', sans-serif;

// Import Bootstrap
@import "bootstrap/scss/bootstrap";

Django Development

Project Structure

project/
├── apps/
│   ├── core/
│   ├── users/
│   └── api/
├── config/
│   ├── settings/
│   ├── urls.py
│   └── wsgi.py
├── static/
├── templates/
└── manage.py

Views

from django.views.generic import ListView, DetailView
from django.shortcuts import render, get_object_or_404

class ArticleListView(ListView):
    model = Article
    template_name = 'articles/list.html'
    context_object_name = 'articles'
    paginate_by = 10

def article_detail(request, slug):
    article = get_object_or_404(Article, slug=slug)
    return render(request, 'articles/detail.html', {'article': article})

Models

from django.db import models

class Article(models.Model):
    title = models.CharField(max_length=200)
    slug = models.SlugField(unique=True)
    content = models.TextField()
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    class Meta:
        ordering = ['-created_at']

    def __str__(self):
        return self.title

Forms

from django import forms

class ContactForm(forms.Form):
    name = forms.CharField(max_length=100)
    email = forms.EmailField()
    message = forms.CharField(widget=forms.Textarea)

    def clean_email(self):
        email = self.cleaned_data['email']
        # Custom validation
        return email

HTMX Development

Core Concepts

• Use hx-get, hx-post for AJAX requests
• Update DOM with hx-target and hx-swap
• Trigger events with hx-trigger
• Handle loading states with indicators

Basic Usage

<!-- Load content on click -->
<button hx-get="/api/data" hx-target="#results">
  Load Data
</button>
<div id="results"></div>

<!-- Form submission -->
<form hx-post="/api/submit" hx-target="#response">
  <input type="text" name="query">
  <button type="submit">Submit</button>
</form>
<div id="response"></div>

Triggers

<!-- Trigger on different events -->
<input hx-get="/search" hx-trigger="keyup changed delay:500ms" hx-target="#results">

<!-- Trigger on page load -->
<div hx-get="/initial-data" hx-trigger="load"></div>

<!-- Trigger on intersection -->
<div hx-get="/more" hx-trigger="intersect once"></div>

Swap Options

<!-- Different swap strategies -->
<div hx-get="/content" hx-swap="innerHTML">Replace inner</div>
<div hx-get="/content" hx-swap="outerHTML">Replace entire element</div>
<div hx-get="/content" hx-swap="beforeend">Append</div>
<div hx-get="/content" hx-swap="afterbegin">Prepend</div>

Loading States

<button hx-get="/data" hx-indicator="#spinner">
  Load
  <img id="spinner" class="htmx-indicator" src="/spinner.gif">
</button>

General Best Practices

Performance

• Minimize HTTP requests
• Optimize images and assets
• Use caching strategies
• Implement lazy loading
• Minify CSS and JavaScript

Security

• Validate all user inputs
• Use CSRF protection
• Implement proper authentication
• Sanitize output to prevent XSS
• Use HTTPS

Accessibility

• Use semantic HTML
• Provide alt text for images
• Ensure keyboard navigation
• Maintain color contrast
• Test with screen readers

SEO

• Use proper heading hierarchy
• Add meta descriptions
• Implement structured data
• Create XML sitemaps
• Optimize page speed