Development Setup

This guide outlines the development tools and environment setup used across Response projects.

Node.js Management

n - Node Version Manager

We use n for managing Node.js versions across projects.

Installation:

bash

# Install n globally
npm install -g n

# Install latest LTS Node.js
n lts

# Install specific version
n 18.17.0

# List installed versions
n ls

# Switch between versions
n use 16.20.0

Key Benefits:

Simple, lightweight Node.js version management
No shell integration required
Easy switching between projects with different Node requirements
Automatic latest/LTS version installation

Python & Ansible Management

pyenv - Python Version Management

We use pyenv to manage Python versions and create isolated environments for Ansible installations per repository.

Installation:

bash

# Install pyenv (macOS with Homebrew)
brew install pyenv

# Add to shell profile
echo 'export PATH="$HOME/.pyenv/bin:$PATH"' >> ~/.zshrc
echo 'eval "$(pyenv init -)"' >> ~/.zshrc

Usage:

bash

# Install Python version
pyenv install 3.11.0

# Set global Python version
pyenv global 3.11.0

# Set local Python version for project
pyenv local 3.9.16

# Create virtual environment
pyenv virtualenv 3.11.0 project-ansible

# Activate virtual environment
pyenv activate project-ansible

# Install Ansible in isolated environment
pip install ansible

Per-Repository Ansible Setup:

bash

# In each project directory
pyenv local 3.11.0
python -m venv .venv
source .venv/bin/activate
pip install ansible ansible-core

Local Development Server

Laravel Valet

We use Laravel Valet for local development server management.

Installation:

bash

# Install via Composer
composer global require laravel/valet

# Install Valet
valet install

# Park development directory
cd ~/Sites
valet park

Key Features:

Automatic SSL: Secure sites with valet secure sitename
Custom Domains: Access sites via sitename.test
Multiple PHP Versions: Switch PHP versions per site
Database Integration: MySQL/PostgreSQL support
Sharing: Share local sites with valet share

Common Commands:

bash

# Park current directory
valet park

# List parked sites
valet parked

# Secure a site with SSL
valet secure mysite

# Link specific directory
valet link mysite

# Switch PHP version
valet use php@8.1

# Share site temporarily
valet share mysite

Site Access:

Parked sites: http://foldername.test
Linked sites: http://linkname.test
Secured sites: https://sitename.test

Build Tools & Testing

Vite - Fast Build Tool

We use Vite for rapid development and testing of small jobs and prototypes.

Installation:

bash

# Create new Vite project
npm create vite@latest my-project

# Choose framework (vanilla, vue, react, etc.)
cd my-project
npm install
npm run dev

Key Benefits:

Lightning Fast: Instant server start and HMR
Framework Agnostic: Works with vanilla JS, Vue, React, etc.
Modern ESM: Native ES modules support
Zero Config: Works out of the box with sensible defaults
Optimized Builds: Rollup-based production builds

Common Use Cases:

bash

# Quick HTML/CSS/JS prototype
npm create vite@latest prototype -- --template vanilla

# Vue 3 component testing
npm create vite@latest vue-test -- --template vue

# React component development
npm create vite@latest react-test -- --template react

Development Commands:

bash

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Configuration (vite.config.js):

javascript

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    port: 3000,
    open: true
  },
  build: {
    outDir: 'dist',
    sourcemap: true
  }
})

Deployment Platforms

Netlify - JAMstack Deployment

We use Netlify for deploying Vite projects and small development jobs.

Key Features:

Continuous Deployment: Git-based deployment workflow
Edge Functions: Serverless functions at the edge
Form Handling: Built-in form processing
Identity: User authentication and management
Split Testing: A/B testing capabilities
Asset Optimization: Automatic image and asset optimization

Deployment Methods:

1. Git Integration (Recommended):

bash

# Connect GitHub/GitLab/Bitbucket repository
# Netlify automatically deploys on push to main branch

# Build settings for Vite projects:
# Build command: npm run build
# Publish directory: dist

2. Netlify CLI:

bash

# Install Netlify CLI
npm install -g netlify-cli

# Login to Netlify
netlify login

# Deploy from project directory
netlify deploy

# Deploy to production
netlify deploy --prod

3. Manual Drag & Drop:

Build project locally: npm run build
Drag dist folder to Netlify dashboard

Environment Variables:

bash

# Set via Netlify dashboard or CLI
netlify env:set API_KEY "your-api-key"
netlify env:list

netlify.toml Configuration:

toml

[build]
  command = "npm run build"
  publish = "dist"

[build.environment]
  NODE_VERSION = "18"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

[dev]
  command = "npm run dev"
  port = 3000

Custom Domains:

bash

# Add custom domain via CLI
netlify domains:add yourdomain.com

# Or configure in Netlify dashboard
# Automatic SSL certificates provided

Netlify Functions (Serverless):

javascript

// netlify/functions/api.js
exports.handler = async (event, context) => {
  return {
    statusCode: 200,
    body: JSON.stringify({ message: 'Hello from Netlify!' })
  }
}

Quick Deployment Workflow:

bash

# 1. Create Vite project
npm create vite@latest quick-project -- --template vanilla
cd quick-project
npm install

# 2. Development
npm run dev
# ... develop your project

# 3. Build and deploy
npm run build
netlify deploy --dir=dist --prod

Kinsta - Static Site Hosting

Kinsta provides an alternative to Netlify for static site hosting with enterprise-grade infrastructure.

Key Features:

Google Cloud Platform: Built on premium GCP infrastructure
Global CDN: 260+ edge locations via KeyCDN
Git Integration: Deploy from GitHub, GitLab, Bitbucket
Edge Caching: Advanced caching with automatic purging
SSL Certificates: Free SSL with automated renewal
Build Tools: Support for Node.js, PHP, Python build processes

Deployment Setup:

1. Connect Repository:

bash

# Link GitHub/GitLab/Bitbucket repository
# Kinsta automatically detects build settings

2. Build Configuration:

yaml

# kinsta.yml (optional configuration)
name: my-static-site
build:
  command: npm run build
  output: dist
  node_version: 18
environment:
  NODE_ENV: production

3. Environment Variables:

bash

# Set via Kinsta dashboard
# Support for build-time and runtime variables
API_KEY=your-api-key
DATABASE_URL=your-database-url

Advanced Features:

Preview Deployments: Automatic preview builds for pull requests
Rollback: Instant rollback to previous deployments
Analytics: Built-in performance analytics and visitor insights
Forms: Contact form handling without serverless functions
Redirects: Advanced redirect rules and URL rewriting

Kinsta vs Netlify Comparison:

Feature	Kinsta	Netlify
Infrastructure	Google Cloud Premium	AWS/Multi-cloud
CDN	KeyCDN (260+ locations)	Built-in global CDN
Build Minutes	Generous limits	300/month (free)
Bandwidth	100GB+ included	100GB/month (free)
Forms	Built-in handling	Built-in handling
Functions	Edge functions (limited)	Full serverless functions
Pricing	Premium plans	Free tier available

When to Use Kinsta:

Enterprise Clients: Need premium infrastructure and support
High Traffic: Sites requiring robust CDN and caching
WordPress Integration: Existing Kinsta WordPress hosting clients
Performance Critical: Applications requiring top-tier infrastructure
Global Reach: Projects requiring extensive CDN coverage

When to Use Netlify:

Small Projects: Quick prototypes and development sites
Serverless Functions: Need extensive edge computing capabilities
Free Tier: Budget-conscious projects or testing
JAMstack Focus: Sites built specifically for JAMstack architecture
Developer Experience: Teams prioritizing DX and easy deployment

Deployment Commands:

bash

# Kinsta deployment (via Git integration)
git push origin main  # Automatic deployment

# Manual deployment via Kinsta CLI (if available)
kinsta deploy --site=my-site

# Netlify deployment
netlify deploy --prod

CSS Framework

Tailwind CSS 4 - Utility-First Styling

We use Tailwind CSS 4 as our preferred CSS framework for rapid UI development.

Installation:

With Vite (Recommended for new projects):

bash

# Create Vite project with Tailwind
npm create vite@latest my-project
cd my-project
npm install

# Install Tailwind CSS 4
npm install tailwindcss@next @tailwindcss/vite@next

# Configure vite.config.js
import tailwindcss from '@tailwindcss/vite'
export default {
  plugins: [tailwindcss()]
}

Manual Installation:

bash

# Install Tailwind CSS 4
npm install tailwindcss@next

# Add to your CSS file
@import "tailwindcss";

Key Features in Tailwind 4:

Native CSS: Built on modern CSS features (cascade layers, container queries)
Zero Configuration: Works without config file for most projects
Faster Builds: Oxide engine for lightning-fast compilation
Better IntelliSense: Improved autocomplete and validation
Container Queries: Native @container support
CSS-first: Designed around CSS, not JavaScript

Basic Setup:

css

/* main.css */
@import "tailwindcss";

/* Custom styles */
@layer utilities {
  .text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  }
}

Configuration (optional tailwind.config.js):

javascript

export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx,vue}'],
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#eff6ff',
          500: '#3b82f6',
          900: '#1e3a8a'
        }
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif']
      }
    }
  }
}

Common Utility Patterns:

html

<!-- Layout -->
<div class="flex items-center justify-between p-4">
  <h1 class="text-2xl font-bold">Title</h1>
  <button class="bg-blue-500 hover:bg-blue-600 px-4 py-2 rounded">
    Click me
  </button>
</div>

<!-- Responsive Design -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="bg-white p-6 rounded-lg shadow">Card</div>
</div>

<!-- Container Queries (Tailwind 4) -->
<div class="@container">
  <div class="@lg:grid-cols-2 grid">
    Content adapts to container size
  </div>
</div>

Integration with Build Tools:

Vite Integration:

javascript

// vite.config.js
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [tailwindcss()],
  css: {
    postcss: './postcss.config.js'
  }
})

Webpack/Laravel Mix:

javascript

// webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
   .postCss('resources/css/app.css', 'public/css', [
     require('tailwindcss')
   ]);

WordPress/Sage Integration:

javascript

// bud.config.js
export default async (bud) => {
  bud
    .entry('app', ['@scripts/app', '@styles/app'])
    .postcss({
      plugins: ['tailwindcss']
    })
}

Development Workflow:

bash

# Start development with Tailwind watching
npm run dev

# Build for production (automatically purges unused CSS)
npm run build

# View Tailwind documentation
open https://tailwindcss.com/docs

Best Practices:

Component Extraction: Use @apply directive for component-based styles
Custom Properties: Leverage CSS custom properties for dynamic theming
Responsive Design: Mobile-first approach with responsive utilities
Performance: Tailwind 4 automatically optimizes output for production
Consistency: Use design tokens in theme configuration

VS Code Extensions:

bash

# Install Tailwind CSS IntelliSense extension
# Provides autocomplete, syntax highlighting, and linting

Sample Component Patterns:

css

/* Button component */
@layer components {
  .btn-primary {
    @apply bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded transition-colors;
  }
  
  .card {
    @apply bg-white rounded-lg shadow-md p-6 border border-gray-200;
  }
}

Deployment Considerations:

Tailwind 4 automatically handles CSS optimization
No additional purge configuration needed
Works seamlessly with Netlify and other deployment platforms
CSS output is minimal and optimized by default

Animation Framework

GSAP 3 - GreenSock Animation Platform

We use GSAP 3 for all animation work across projects.

Installation:

bash

# NPM installation
npm install gsap

# CDN usage (for quick prototyping)
# <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

Core Features:

Timeline Control: Complex animation sequences
Performance: Hardware-accelerated animations
Cross-browser: Consistent behavior across all browsers
Plugin System: ScrollTrigger, Morphing, Physics, etc.

Premium Plugins Used:

ScrollTrigger: Scroll-based animations
DrawSVG: SVG path drawing animations
MorphSVG: Shape morphing animations
SplitText: Text animation and effects
Physics2D: Realistic physics simulations

Basic Usage:

javascript

// Simple animation
gsap.to(".element", {duration: 2, x: 100, rotation: 360});

// Timeline with multiple animations
const tl = gsap.timeline();
tl.to(".box1", {duration: 1, x: 100})
  .to(".box2", {duration: 1, y: 100}, "-=0.5")
  .to(".box3", {duration: 1, rotation: 360});

// ScrollTrigger integration
gsap.registerPlugin(ScrollTrigger);
gsap.to(".parallax", {
  yPercent: -50,
  ease: "none",
  scrollTrigger: {
    trigger: ".parallax",
    start: "top bottom",
    end: "bottom top",
    scrub: true
  }
});

Project Integration:

Include GSAP license in project dependencies
Use timeline-based animations for complex sequences
Leverage ScrollTrigger for scroll-based interactions
Optimize performance with will-change CSS property
Test animations across devices and browsers

Development Workflow

Recommended Setup Process

Install Core Tools:

bash

# Node.js management
npm install -g n
n lts

# Python management
brew install pyenv

# Local server
composer global require laravel/valet
valet install

Per-Project Setup:

bash

# Set Node version
n use 18.17.0

# Create Python environment
pyenv virtualenv 3.11.0 project-name
pyenv local 3.11.0

# Install project dependencies
npm install
pip install -r requirements.txt

# Setup local development
valet park
valet secure projectname

Quick Prototyping:

bash

# Create Vite project for testing
npm create vite@latest prototype -- --template vanilla
cd prototype
npm install

# Add Tailwind CSS 4
npm install tailwindcss@next @tailwindcss/vite@next

# Start development
npm run dev

Animation Development:

bash

# Install GSAP
npm install gsap

# Register premium plugins (if licensed)
# Import in your main JS file

Deployment:

bash

# Build and deploy to Netlify
npm run build
netlify deploy --dir=dist --prod

Other Tools & Utilities

Terminal Applications

Warp - Modern Terminal

Warp is our preferred terminal with modern features and AI assistance.

Key Features:

AI Command Search: Natural language command suggestions
Blocks: Output organized in interactive blocks
Workflows: Shareable command sequences
Collaboration: Share terminal sessions and workflows
Modern UI: Native app with IDE-like features

Installation:

bash

# Download from warp.dev or via Homebrew
brew install --cask warp

Useful Features:

Type # for AI command suggestions
Cmd+P for workflow launcher
Cmd+Shift+R for workflow sharing
Built-in themes and customization

Alternative: iTerm2

iTerm2 remains an excellent terminal option with advanced features.

Key Features:

Split Panes: Multiple terminal sessions in one window
Hotkey Window: Global terminal access
Search: Powerful search and highlighting
Profiles: Custom configurations for different projects
Shell Integration: Enhanced shell features

Installation:

bash

# Download from iterm2.com or via Homebrew
brew install --cask iterm2

Window Management

Rectangle - Window Snapping

Rectangle provides keyboard shortcuts for window management.

Key Features:

Keyboard Shortcuts: Snap windows to screen halves/quarters
Multi-Monitor: Works across multiple displays
Customizable: Configure shortcuts and snap areas
Free & Open Source: No cost, actively maintained

Installation:

bash

# Download from rectangleapp.com or via Homebrew
brew install --cask rectangle

Common Shortcuts:

⌃⌥← / ⌃⌥→ - Left/Right half
⌃⌥↑ / ⌃⌥↓ - Top/Bottom half
⌃⌥⌘← / ⌃⌥⌘→ - Left/Right two-thirds
⌃⌥⌘F - Maximize window
⌃⌥⌘C - Center window

Image Optimization & CDN

Squoosh - Image Compression

Squoosh is our go-to tool for image optimization and format conversion.

Key Features:

Format Conversion: Convert between WebP, AVIF, JPEG, PNG
Real-time Preview: See compression results instantly
File Size Comparison: Before/after file size analysis
Advanced Settings: Fine-tune compression parameters
Privacy-First: Processing happens in your browser
Batch Processing: Handle multiple images (PWA version)

Usage:

bash

# Open in browser
open https://squoosh.app/

# Install as PWA for offline use
# Click install button in browser

Workflow:

Drag image to Squoosh interface
Choose output format (WebP for web, AVIF for modern browsers)
Adjust quality settings (usually 75-85% for good balance)
Compare file sizes and visual quality
Download optimized image

Best Practices:

WebP: Use for general web images (good browser support)
AVIF: Use for modern browsers (better compression)
Progressive JPEG: For photos that need broad compatibility
PNG: Keep for images requiring transparency
Target: Aim for 80-90% quality for photos, higher for graphics

Cloudinary - Media Management & CDN

Cloudinary provides comprehensive media management with automatic optimization and global CDN delivery.

Key Features:

Automatic Optimization: AI-powered image and video optimization
Responsive Images: Dynamic resizing and format selection
Global CDN: Fast delivery from 50+ edge locations worldwide
Video Processing: Transcoding, streaming, and adaptive bitrate
Transformations: Real-time image manipulation via URL parameters
Storage & Backup: Secure cloud storage with version control

Account Management:

bash

# Create separate Cloudinary accounts using distinct client emails
# Example: client1@clientdomain.com, client2@clientdomain.com
# This ensures clean separation between client assets and billing

Installation & Setup:

bash

# Install Cloudinary SDK
npm install cloudinary

# Environment variables (.env)
CLOUDINARY_CLOUD_NAME=your-cloud-name
CLOUDINARY_API_KEY=your-api-key
CLOUDINARY_API_SECRET=your-api-secret

Basic Usage:

javascript

// Node.js/Express
const cloudinary = require('cloudinary').v2;

cloudinary.config({
  cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET
});

// Upload image
const result = await cloudinary.uploader.upload('./local-image.jpg', {
  folder: 'client-assets',
  transformation: [
    { width: 1200, height: 800, crop: 'fill' },
    { quality: 'auto', fetch_format: 'auto' }
  ]
});

URL-based Transformations:

html

<!-- Original image -->
<img src="https://res.cloudinary.com/demo/image/upload/sample.jpg" alt="Original">

<!-- Optimized with auto quality and format -->
<img src="https://res.cloudinary.com/demo/image/upload/q_auto,f_auto/sample.jpg" alt="Optimized">

<!-- Responsive with width and crop -->
<img src="https://res.cloudinary.com/demo/image/upload/w_800,h_600,c_fill,q_auto,f_auto/sample.jpg" alt="Responsive">

<!-- Multiple transformations -->
<img src="https://res.cloudinary.com/demo/image/upload/w_400,h_400,c_fill,r_20,e_sepia,q_auto,f_auto/sample.jpg" alt="Styled">

Best Practices:

Client Separation: Use distinct email addresses for each client account
Folder Organization: Organize assets by client/project folders
Auto Optimization: Always use q_auto,f_auto for automatic optimization
Responsive Images: Implement responsive image solutions
Video Optimization: Leverage automatic video compression and streaming

Development Workflow Integration

Combined Workflow Example:

bash

# 1. Open Warp terminal
# 2. Navigate to project
cd ~/Sites/my-project

# 3. Start development
npm run dev

# 4. Use Rectangle to snap terminal and browser
# ⌃⌥← (terminal left half)
# ⌃⌥→ (browser right half)

# 5. Optimize images with Squoosh as needed
# Drag images to squoosh.app
# Download optimized versions to project

# 6. Continue development with improved workflow

Tool Integration

These tools work together to create an efficient development environment. Warp for terminal work, Rectangle for window management, and Squoosh for asset optimization.

Development Environment

This setup provides a consistent, isolated environment for each project while maintaining global tool availability.

GSAP Licensing

Premium GSAP plugins require a commercial license. Ensure proper licensing for production use.

Accurate Lock & Hardware

CHB Foundation

CoSign

Horizon Kinetics

Piesanos

Response

Sally's Pizza

Development Setup

Node.js Management

n - Node Version Manager

Python & Ansible Management

pyenv - Python Version Management

Local Development Server

Laravel Valet

Build Tools & Testing

Vite - Fast Build Tool

Deployment Platforms

Netlify - JAMstack Deployment

Kinsta - Static Site Hosting

CSS Framework

Tailwind CSS 4 - Utility-First Styling

Animation Framework

GSAP 3 - GreenSock Animation Platform

Development Workflow

Recommended Setup Process

Other Tools & Utilities

Terminal Applications

Window Management

Image Optimization & CDN

Development Workflow Integration

Development Setup ​

Node.js Management ​

n - Node Version Manager ​

Python & Ansible Management ​

pyenv - Python Version Management ​

Local Development Server ​

Laravel Valet ​

Build Tools & Testing ​

Vite - Fast Build Tool ​

Deployment Platforms ​

Netlify - JAMstack Deployment ​

Kinsta - Static Site Hosting ​

CSS Framework ​

Tailwind CSS 4 - Utility-First Styling ​

Animation Framework ​

GSAP 3 - GreenSock Animation Platform ​

Development Workflow ​

Recommended Setup Process ​

Other Tools & Utilities ​

Terminal Applications ​

Window Management ​

Image Optimization & CDN ​

Development Workflow Integration ​

Development Setup

Node.js Management

n - Node Version Manager

Python & Ansible Management

pyenv - Python Version Management

Local Development Server

Laravel Valet

Build Tools & Testing

Vite - Fast Build Tool

Deployment Platforms

Netlify - JAMstack Deployment

Kinsta - Static Site Hosting

CSS Framework

Tailwind CSS 4 - Utility-First Styling

Animation Framework

GSAP 3 - GreenSock Animation Platform

Development Workflow

Recommended Setup Process

Other Tools & Utilities

Terminal Applications

Window Management

Image Optimization & CDN

Development Workflow Integration