Principles and Practices, Project Management

This week I worked on defining my final project idea and started getting used to the documentation process. The assignment focused on two main parts: Principles and Practices (sketching a potential final project) and Project Management (building a personal website and setting up version control).

Website Development Process

I used Kiro AI assistant to build this website, which significantly streamlined the development process. Kiro helped me set up a modern, responsive website with proper documentation structure and version control integration.

Setting Up Kiro

Kiro is an AI-powered development assistant created by Amazon Web Services (AWS) that helps developers build applications more efficiently. It provides intelligent code generation, debugging assistance, and project management capabilities.

The setup process involved installing Kiro on my Mac M4 Pro and configuring it for web development:

• Downloaded and installed Kiro AI assistant from AWS
• Installed Homebrew package manager for macOS to manage development dependencies
• Set up the development environment with Node.js and modern web tools
• Configured Kiro to work with GitLab for version control integration
• Established project structure and documentation workflow

What is Kiro?

Kiro is Amazon's AI-powered coding assistant that integrates directly into development workflows. It can understand natural language descriptions of what you want to build and generate appropriate code, handle complex project setups, and provide intelligent suggestions throughout the development process. This made it particularly valuable for setting up a comprehensive website with modern web standards and responsive design.

Development Workflow

Working with Kiro allowed me to focus on content and design while the AI handled much of the technical implementation:

• Used natural language to describe website requirements
• Kiro generated responsive HTML/CSS/JavaScript code
• Implemented modern web standards and accessibility features
• Set up automated build and deployment processes

Challenges and Solutions

During the website development process, we encountered several challenges:

Challenge 1: GitLab Integration

Initially had difficulty connecting the local development environment to the GitLab repository. This was resolved by properly configuring SSH keys and setting up the remote repository connection.

Challenge 2: Responsive Design

Ensuring the website worked well on all device sizes required careful CSS media query implementation. Kiro helped create a mobile-first responsive design system.

Challenge 3: Performance Optimization

The initial website was loading slowly due to large images and unoptimized code. We implemented image compression, CSS/JS minification, and lazy loading to improve performance.

Server Configuration & The Service Workers Problem

A critical lesson learned during this project was dealing with service workers and implementing a proper development server configuration.

The Service Workers Issue

Initially, service workers were added to the website for caching and offline functionality. However, this created major problems during development and testing:

• Aggressive Caching: Service workers cached resources so aggressively that changes to the website weren't visible even after refreshing
• Development Nightmare: Made it nearly impossible to see updates during development, requiring constant cache clearing
• User Experience Issues: Visitors would see old versions of the site even after updates were deployed
• Debugging Complexity: Added unnecessary complexity to the debugging process

The Solution: No-Cache Server Implementation

The solution was to completely remove all service workers and create a simple server configuration that explicitly disables caching with headers:

• Cache-Control: no-cache, no-store, must-revalidate
• Pragma: no-cache
• Expires: 0

Why This Approach Works Better

• Immediate Updates: Changes to the website are visible instantly without cache clearing
• Simplified Development: No complex cache invalidation strategies needed
• Better User Experience: Visitors always see the most current version
• Easier Debugging: No hidden caching layers interfering with troubleshooting

Key Lesson: Service workers should never be used in development or educational projects where frequent updates are expected. They're better suited for production applications with stable, infrequently-changing content. This approach is particularly important for Fab Academy documentation where content updates frequently and users need to see changes immediately.

Git Repository Setup

The GitLab repository was already set up for me as part of the Fab Academy program. I only needed to configure SSH keys to connect my local development environment to the remote repository.

SSH Key Configuration

Setting up SSH authentication was essential for secure communication with the GitLab repository. Here's the detailed process I followed:

Step 1: Generate SSH Key Pair

On my Mac M4 Pro, I opened Terminal and generated a new SSH key pair using the following command:

ssh-keygen -t ed25519 -C "oliverabbott@icloud.com"

This created two files in my ~/.ssh/ directory:

• id_ed25519 - Private key (kept secret on my computer)
• id_ed25519.pub - Public key (shared with GitLab)

Step 2: Add Public Key to GitLab

I copied the public key to my clipboard using:

cat ~/.ssh/id_ed25519.pub | pbcopy

Then I navigated to GitLab Fab Cloud, went to my profile settings, selected "SSH Keys," and pasted the public key. I gave it a descriptive title like "Mac M4 Pro - Fab Academy 2026" so I could identify it later.

Step 3: Test SSH Connection

To verify the SSH connection was working, I ran:

ssh -T git@gitlab.fabcloud.org

A successful connection returned a welcome message confirming authentication.

Git Configuration

Before making my first commit, I configured Git with my identity:

git config --global user.name "Oliver Abbott"
git config --global user.email "oliverabbott@icloud.com"

Cloning the Repository

With SSH configured, I cloned my Fab Academy repository to my local machine:

git clone git@gitlab.fabcloud.org:academany/fabacademy/2026/labs/charlotte/students/oliver-abbott.git

This created a local copy of the repository where I could work on my website and documentation.

GitLab Workflow

I'm using GitLab for version control and continuous integration:

• Repository: Hosted on gitlab.fabcloud.org
• Branching Strategy: Main branch for production, feature branches for development
• Commit Messages: Following conventional commit format (e.g., "feat: add week 1 documentation")
• CI/CD: Automated testing and deployment pipeline

Basic Git Commands I Use

Here are the essential Git commands I use regularly:

# Check status of files
git status

# Add files to staging area
git add .

# Commit changes with a message
git commit -m "Add week 1 documentation"

# Push changes to GitLab
git push origin main

# Pull latest changes from GitLab
git pull origin main

File Management

All project files are stored in the GitLab repository following the Fab Academy structure:

• HTML files in the root and assignments directories
• Images compressed and stored locally (no external hosting)
• CSS and JavaScript organized in assets directory
• Documentation files in markdown format

Final Project Proposal

My final project idea is a Pulse Jet Engine that explores the principles of pulse jet propulsion through proper engineering design and testing methodologies.

Initial Design Sketch

Project Description

The pulse jet engine project focuses on understanding the fundamental principles of intermittent combustion propulsion. The design will incorporate proper safety measures and testing protocols while exploring the thermodynamics and mechanical aspects of pulse jet operation.

Who Will Use It

This pulse jet engine system is designed as a propulsion technology with applications across multiple sectors:

• Transportation: Alternative propulsion for specialized vehicles and experimental aircraft
• Aerospace: Propulsion systems for unmanned aerial vehicles and research platforms
• Military Applications: Drone propulsion systems and tactical missile applications
• Research & Development: Academic institutions studying propulsion technologies
• Industrial Applications: Specialized propulsion needs in manufacturing and testing

Design Approach

The project will follow standard engineering practices:

• Comprehensive design analysis and material selection
• Proper testing protocols with appropriate safety measures
• Iterative design improvements based on testing results
• Complete documentation of the design and testing process

Tools and Technologies Used

Learning Outcomes

This week provided valuable experience in:

• Modern web development workflows using AI assistance
• Version control best practices with Git and GitLab
• Project planning and documentation strategies
• Responsive web design principles
• Server configuration and caching strategies
• Critical lesson: Why service workers should be avoided in development and educational projects
• The importance of immediate feedback in development workflows

Fab Academy Student Agreement

Useful Links

• Final Project Details - Pulse Jet Engine
• GitLab Repository
• About Me Page