Cookie Corner

Frontend Technologies

• HTML5: Semantic markup for better accessibility and SEO
• CSS3: Using modern features like CSS Variables, Flexbox, and Grid
• Vanilla JavaScript: No frameworks, just pure JavaScript for optimal performance
• Component-Based Architecture: Modular components via Server Side Includes (SSI)
• Responsive Design: Mobile-first approach with media queries for all screen sizes
• Web Fonts: Using Google Fonts with preconnect for faster loading

Performance Optimizations

• Resource Preloading: Critical assets are preloaded for faster rendering
• Deferred Loading: Non-critical JavaScript loads after the page is rendered
• Hardware Acceleration: CSS transforms and will-change property for smoother animations
• Element Pooling: Cookie crumb effects use object pooling to minimize garbage collection
• RequestAnimationFrame: Used for smooth animations with optimal performance
• Responsive Tables: Mobile-optimized tables with semantic structure preservation
• CSS Transitions: Smooth state changes with optimized transition properties
• Dynamic Component Loading: Navigation elements loaded dynamically for better maintainability

Backend & Deployment

• Docker & Docker Compose: Containerized deployment with high availability setup (replicas: 2)
• Nginx: Alpine-based web server with security optimizations and performance tuning
• Traefik: Reverse proxy handling TLS termination, automatic certificate renewal, and security headers
• Gitea Actions: CI/CD pipeline for automated testing and deployment
• Zero-downtime Updates: Using start-first update strategy with health checks
• Watchtower: Automated container updates with lifecycle management
• Log Rotation: Configured via logrotate to maintain system performance

Security Features

• HTTP Security Headers: Configured through Traefik with HSTS preloading
• SSL/TLS: Automatic certificate renewal via Let's Encrypt
• Docker Security: Read-only filesystem, no new privileges, and resource limitations
• Rate Limiting: Prevents abuse and brute force attempts
• Protected File Access: Nginx configuration prevents access to sensitive files
• Container Health Checks: Regular monitoring to ensure service availability
• GDPR Compliance: Clear documentation of cookie usage and privacy practices
• Technical Cookie Documentation: Transparent implementation details of all cookie types
• Enhanced Browser Compatibility: Cross-browser fixes for consistent security implementation

Feature Implementation Details

// Element pooling for cookie crumbs
const crumbPool = [];
const POOL_SIZE = 25;

// Initialize the crumb pool
for (let i = 0; i < POOL_SIZE; i++) {
    const crumb = document.createElement('div');
    crumb.className = 'cookie-crumb';
    crumb.style.position = 'absolute';
    crumb.style.display = 'none';
    document.body.appendChild(crumb);
    crumbPool.push({ element: crumb, inUse: false });
}

// Load navigation components dynamically
async function loadComponent(elementSelector, componentPath) {
    try {
        const response = await fetch(componentPath);
        if (!response.ok) throw new Error(`Failed to load ${componentPath}`);
        const html = await response.text();
        document.querySelector(elementSelector).innerHTML = html;
    } catch (error) {
        console.error(`Component loading error: ${error.message}`);
        // Fallback content is already in place via noscript tag
    }
}

// Load header and footer navigation on DOMContentLoaded
document.addEventListener('DOMContentLoaded', () => {
    loadComponent('header nav', 'components/header-nav.html');
    loadComponent('footer nav', 'components/footer-nav.html');
});

// Display a random wisdom quote from our collection of 101 quotes
function displayRandomWisdom() {
    // Using RequestAnimationFrame for smooth transitions
    requestAnimationFrame(() => {
        const randomIndex = Math.floor(Math.random() * COOKIE_WISDOM.length);
        const wisdomText = COOKIE_WISDOM[randomIndex];
        const wisdomElement = document.querySelector('.wisdom-card p');
        
        // Apply fade-out transition
        wisdomElement.style.opacity = 0;
        
        // Update text and fade in
        setTimeout(() => {
            wisdomElement.textContent = wisdomText;
            wisdomElement.style.opacity = 1;
        }, 300);
    });
}

Project Structure

www.kekz.org/
├── .gitea/
│   └── workflows/       # Gitea Actions CI/CD configuration
├── components/
│   ├── footer-nav.html  # Footer navigation component
│   └── header-nav.html  # Header navigation component
├── css/
│   └── minified/        # Optimized CSS files
│       ├── style.min.css        # Minified stylesheet
│       └── style.optimized.css  # Further optimized stylesheet
├── favicon/
│   ├── apple-touch-icon.png  # iOS home screen icon
│   ├── favicon.svg      # Vector favicon for modern browsers
│   └── manifest.json    # PWA manifest file
├── images/
│   ├── cookie-cursor.svg  # Custom cursor image
│   └── cookie-texture.svg # Background texture
├── js/
│   ├── script.js        # Main JavaScript with interactive features
│   └── wisdom-quotes.js # Collection of 101 IT wisdom quotes with 18 ASCII art designs
├── nginx/
│   ├── nginx.conf       # Optimized web server configuration
│   └── logrotate.conf   # Log rotation configuration
├── templates/           # SSI templates for consistent page structure
│   ├── footer.html      # Footer template
│   ├── head.html        # Head section template
│   └── header.html      # Header template
├── 404.html             # Custom error page
├── 500.html             # Server error page
├── cookie-policy.html   # Cookie policy page
├── privacy-policy.html  # Privacy policy page
├── technical-cookies.html  # Technical cookies documentation
├── tech.html            # Technical details page
├── docker-compose.yml   # Container orchestration
├── index.html           # Main page
├── secret-cookie-jar.html  # Interactive cookie jar access demo
├── robots.txt           # Search engine crawler instructions
├── sitemap.xml          # Site structure for search engines
└── README.md            # Project documentation

Latest Updates (March 27, 2025)

• Component Architecture: Reorganized site structure with modular components for navigation
• Dynamic Loading: Added dynamic loading of navigation elements for better maintainability
• Enhanced No-JS Support: Improved fallback support for users with JavaScript disabled
• Policy Updates: Updated privacy and cookie policy documentation
• Browser Compatibility: Added cross-browser fixes for consistent experience
• Performance Improvements: Enhanced CSS transitions and animations
• SEO Optimization: Improved sitemap and metadata structure
• Template System: Implemented Server Side Includes (SSI) to reduce code redundancy