Maxiviper117

FROM php:8.4.5-fpm

# Update package list and install dependencies
RUN apt-get update && apt-get install -y \
    #-- Needed only for compiling native PHP extensions
    build-essential \                
    #-- Required for gd extension
    libpng-dev \                     
    #-- Required for gd extension
    libjpeg-dev \                    

Maxiviper117

🎨 Primary Color Roles

Role	Description	Typical Use Cases
Primary	The main brand or theme color. Highly visible and dominant in the UI.	Filled buttons, active states, top app bar, tabs
On Primary	Color used for text and icons on top of Primary. Ensures legibility.	Text inside filled buttons, icons on colored bars
Primary Container	A softer, often lighter version of Primary used for containers.	Background for cards, dialogs, or selected UI elements
On Primary Container	Color for text/icons on top of Primary Container.	Headings, text, and icons in primary-colored containers

---

Maxiviper117

Cache Class with Automatic Cleanup

This guide demonstrates how to use an updated Cache class in your Node.js or TypeScript projects. The class includes a Time-to-Live (TTL) mechanism for cache entries, automatic cleanup of expired items, and a method to stop the cleanup process when needed.

1. Cache Class Code

Copy the following code into a file (e.g., Cache.ts):

export class Cache<T> {

Maxiviper117

Guide: Implementing CSRF Protection in SvelteKit

Cross-Site Request Forgery (CSRF) is a security vulnerability where an attacker tricks users into submitting unintended requests. This guide will show you how to implement CSRF protection in your SvelteKit app using a server hook.

---

Step 1: Configure SvelteKit to Allow Custom CSRF Handling

By default, SvelteKit has built-in CSRF protection that checks the request’s origin. Since we are implementing our own CSRF middleware, we must disable SvelteKit’s built-in CSRF origin check.

Open your svelte.config.ts (or svelte.config.js) and update it like this:

Maxiviper117

CSRF Token Setup Using Root Layout’s Server Load Function

This guide shows you how to generate a CSRF token once in your root layout so that every page automatically receives the token, reducing duplication and ensuring consistency across your SvelteKit app.

---

1. Generate and Store the CSRF Token in +layout.server.ts

Create (or update) your root layout server file (+layout.server.ts) to check for an existing CSRF token in cookies. If not present, generate a new token using Node’s crypto module and set it in a cookie:

Maxiviper117

/**
 * Defer animations for elements that are not initially in view.
 * It removes animation classes starting with "animate-" from elements that are not visible,
 * stores those classes, and re-applies them when the element scrolls into the viewport.
 */
export function deferAnimations() {
    // Helper to check if an element is in the viewport
    function isInViewport(el: HTMLElement): boolean {
        const rect = el.getBoundingClientRect();
        return rect.bottom > 0 && rect.top < window.innerHeight;

Maxiviper117

Caching External Images in Svelte using Service Workers

This guide explains how to cache external images used in <img> elements in a Svelte application using a service worker. This improves performance and enables offline availability of images.

---

1. Register the Service Worker in Svelte

In your main Svelte component (e.g., src/routes/+layout.svelte), register the service worker:

Maxiviper117

import { Component, type ReactNode } from "react";

interface ErrorBoundaryProps {
    children: ReactNode;
    fallback?: ReactNode;
    onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
    resetButtonText?: string;
    showResetButton?: boolean;
}

Maxiviper117

<?php

namespace App\Console\Commands;

use Illuminate\Console\Command;
use Illuminate\Support\Facades\Route;

class GenerateRoutesJs extends Command
{
    protected $signature = 'routes:generate-js';

Maxiviper117

{
    "github.copilot.chat.commitMessageGeneration.instructions": [
      {
          "text": "Generate commit messages following the Conventional Commits specification. Use the following structure strictly:\n\n<type>[optional scope]: <short description>\n\nOptional body: Include a detailed explanation of the change if necessary. Wrap text at 72 characters per line.\n\nOptional footer: Include metadata such as issue references or breaking changes. Use keywords like 'BREAKING CHANGE:' followed by an explanation, and reference issues with 'Closes #<issue_number>'.\n\nTypes must be one of the following:\n- feat: For introducing new features.\n- fix: For bug fixes.\n- docs: For documentation-only changes.\n- style: For changes that do not affect code functionality (e.g., formatting).\n- refactor: For code changes that neither fix a bug nor add a feature.\n- test: For adding or modifying tests.\n- chore: For non-code tasks such as updating dependencies.\n\nThe short description must be imperative (e.g., 'add featu