Skip to content

Instantly share code, notes, and snippets.

View Maxiviper117's full-sized avatar
🚧
Building

David Maxiviper117

🚧
Building
View GitHub Profile
@Maxiviper117
Maxiviper117 / CSRFProtectionSveltekit.md
Created March 9, 2025 16:15
Guide: Implementing CSRF Protection in SvelteKit

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
Maxiviper117 / Sveltekit_CRSF_Token_Setup.md
Created February 28, 2025 08:58
CSRF Token setup in Sveltekit

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
Maxiviper117 / deferAnimations.js
Last active February 23, 2025 17:17
Defers Tailwind-Animated classes until elements enter the viewport, enhancing performance and user experience.
/**
* 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
Maxiviper117 / caching-external-images.md
Created February 19, 2025 18:21
Service Worker-based caching of external images in a Svelte app for offline support.

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
Maxiviper117 / ErrorBoundary.tsx
Created January 31, 2025 09:12
Flexible and reusable React error boundary with custom fallback, error logging, and reset functionality.
import { Component, type ReactNode } from "react";
interface ErrorBoundaryProps {
children: ReactNode;
fallback?: ReactNode;
onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
resetButtonText?: string;
showResetButton?: boolean;
}
@Maxiviper117
Maxiviper117 / GenerateRoutesJs.php
Last active January 9, 2025 13:51
Laravel Artisan command to generate a JavaScript file with routes as structured objects for frontend use.
<?php
namespace App\Console\Commands;
use Illuminate\Console\Command;
use Illuminate\Support\Facades\Route;
class GenerateRoutesJs extends Command
{
protected $signature = 'routes:generate-js';
@Maxiviper117
Maxiviper117 / settings.json
Created January 6, 2025 08:35
Vscode Github Copilot Commit message instructions
{
"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
@Maxiviper117
Maxiviper117 / fzf-config.zsh
Created December 22, 2024 09:09
fzf ZSH config
# ------------------------------------------------------------------------------
# FZF Configuration
# ------------------------------------------------------------------------------
# Source fzf's key bindings and completion (if installed via Homebrew or similar)
[ -f ~/.fzf.zsh ] && source ~/.fzf.zsh
# Adjust default FZF options (feel free to tweak)
export FZF_DEFAULT_OPTS="--height=70% --reverse --border"
@Maxiviper117
Maxiviper117 / tailwind4-css-color-gen.js
Last active November 25, 2024 10:06
Tailwind 4 Generate Color Shades Dynamically using chroma-js
import fs from "fs";
import chroma from "chroma-js";
// Define your custom colors
const colors = {
primary: "#1E40AF", // Blue
secondary: "#10B981", // Green
tertiary: "#9333EA", // Purple
accent: "#F59E0B", // Amber
};
@Maxiviper117
Maxiviper117 / tailwind.config.js
Last active November 22, 2024 08:50
Tailwind with chroma-js custom color shades
import type { Config } from 'tailwindcss';
import plugin from 'tailwindcss/plugin';
import chroma from 'chroma-js';
const domainScale = [100, 200, 300, 400, 500, 600, 700, 800, 900];
function generateShadesInverted(baseColor, steps = 9) {
const scale = chroma
.scale(['white', baseColor, 'black'])