Explore snippets
Discover reusable code snippets, examples, fixes, and ideas shared by developers, students, and teams.
Load PHPMailer Library Once
This function loads the three essential PHPMailer files only once to prevent multiple inclusions during execution.
<?php
function mailer_require_phpmailer(): void
{
static $loaded = false;
if ($loaded) {
return;
}
$base = APP_PATH . '/libraries/PHPMailer/src';
require_once $base . '/Exception.php';
require_once $base . '/PHPMailer.php';
Simple PHP Router with Dynamic User ID Route
This code implements a basic PHP router that directs static URLs to specific files and handles dynamic user ID routes, returning a 404 error...
<?php
$routes = [
'/' => 'home.php',
'/about' => 'about.php',
'/user' => 'user.php'
];
$requestUri = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
function handleRoute($uri, $routes)
{
if (array_key_exists($uri, $routes)) {Responsive Bootstrap Product Card
A modern responsive product card built with Bootstrap 5, featuring a hover animation and a call-to-action button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Card</title>
<!-- Bootstrap -->Simple Login Form
A basic HTML form for user login with username and password fields.
<form action="/login" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br>Language Detection and Translation Loader
Manages front-end language detection, session and cookie handling, and loads language translation scopes from PHP files with fallback suppor...
<?php
declare(strict_types=1);
// ------------------------------------------------------------
// Global language code list
// ------------------------------------------------------------
if (!defined('ALLOWED_LANG_CODES')) {FAQ Section Markup
A simple FAQ section using semantic HTML and details/summary elements.
<section class="faq-section" aria-labelledby="faq-title">
<h2 id="faq-title">Frequently asked questions</h2>
<details>
<summary>Can I use CodShot for free?</summary>
<p>Yes. The free plan is a good way to try the platform.</p>
</details>
Cross-Tab State Sync with BroadcastChannel
Synchronize lightweight UI state between tabs from the same origin.
const channel = new BroadcastChannel('app-preferences');
const preferences = {
theme: 'dark',
compactMode: true,
};
channel.addEventListener('message', (event) => {
if (event.data?.type !== 'preferences-updated') {
return;
}
Async Generator for Paginated API Data
Iterate through paginated API responses without loading every page into memory.
type Page<T> = {
items: T[];
nextCursor: string | null;
};
export async function* paginate<T>(
buildUrl: (cursor: string | null) => string,
): AsyncGenerator<T, void, void> {
let cursor: string | null = null;
do {Next.js Loading Skeleton
Provide instant loading UI for an App Router segment with loading.tsx.
// app/dashboard/loading.tsx
export default function DashboardLoading() {
return (
<main aria-busy="true" aria-label="Loading dashboard">
<div className="skeleton skeleton-title" />
<div className="skeleton-grid">Next.js Server Action Form with useActionState
Connect a Next.js Server Action to a client form with validation and pending state.
// app/actions.ts
'use server';
export type CreateUserState = {
message: string;
errors: {
email?: string;
};
};
export async function createUser(
previousState: CreateUserState,
formData: FormData,
): Promise<CreateUserState> {React Error Boundary Component
Catch rendering errors in a subtree and provide a retryable fallback UI.
import {
Component,
type ErrorInfo,
type ReactNode,
} from 'react';
type Props = {
children: ReactNode;
fallback?: ReactNode;
};
type State = {
hasError: boolean;
};
export class ErrorBoundary extends Component<Props, State> {
state: State = {Dynamic Page with notFound
Render the nearest not-found UI when a requested App Router record does not exist.
// app/products/[id]/page.tsx
import { notFound } from 'next/navigation';
type PageProps = {
params: Promise<{
id: string;
}>;
};
export default async function ProductPage({
params,
}: PageProps) {
const { id } = await params;
Non-Blocking Tabs with useTransition
Switch expensive tab content without blocking urgent UI updates.
'use client';
import { useState, useTransition } from 'react';
const tabs = ['overview', 'activity', 'settings'] as const;
type Tab = (typeof tabs)[number];
export function DashboardTabs() {
const [activeTab, setActiveTab] = useState<Tab>('overview');Optimistic Todo List with useOptimistic
Show a new todo immediately while the asynchronous save operation completes in the background.
'use client';
import { startTransition, useOptimistic, useState } from 'react';
type Todo = {
id: string;
text: string;
pending?: boolean;
};
type Props = {
initialTodos: Todo[];
createTodo: (text: string) => Promise<Todo>;
};
React Form Validation with useActionState
Manage form validation, submission status, and server-style action results with React useActionState.
'use client';
import { useActionState } from 'react';
type FormState = {
message: string;
errors: {
email?: string;
};
};
const initialState: FormState = {
message: '',
errors: {},
};
async function subscribe(
previousState: FormState,PHP Read JSON Request Body
Read and validate a JSON request body in PHP.
<?php
$rawBody = file_get_contents('php://input');
$data = json_decode($rawBody, true);
if (!is_array($data) || json_last_error() !== JSON_ERROR_NONE) {
http_response_code(400);
echo json_encode(['error' => 'Invalid JSON body.']);
exit;
}
Card Grid with Equal Height Cards
Create a responsive Bootstrap card grid where cards keep equal height.
<div class="row g-4">
<div class="col-md-6 col-lg-4">
<div class="card h-100">
<div class="card-body d-flex flex-column">
<h5 class="card-title">Feature title</h5>Offcanvas Sidebar Layout
Open a mobile-friendly offcanvas sidebar with Bootstrap.
<button class="btn btn-outline-secondary" data-bs-toggle="offcanvas" data-bs-target="#accountMenu">
Menu
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="accountMenu">
<div class="offcanvas-header">Responsive Navbar Starter
A simple Bootstrap responsive navbar with collapse behavior.
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container">
<a class="navbar-brand" href="/">CodShot</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">Bootstrap Modal Form Skeleton
A small Bootstrap 5 modal with a form and submit button.
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#newItemModal">
New item
</button>
<div class="modal fade" id="newItemModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">Bootstrap Toast Notification
Show a Bootstrap 5 toast message from JavaScript.
<button class="btn btn-primary" id="showToastBtn">Show toast</button>
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="demoToast" class="toast" role="status" aria-live="polite" aria-atomic="true">
<div class="toast-header">Save UI State to localStorage
Remember a simple UI preference in localStorage.
const checkbox = document.querySelector('#compactMode');
const savedValue = localStorage.getItem('compactMode');
checkbox.checked = savedValue === '1';
document.body.classList.toggle('compact', checkbox.checked);
checkbox.addEventListener('change', () => {Fetch JSON with Error Handling
Fetch JSON data and handle HTTP errors cleanly.
async function loadProfile() {
const response = await fetch('/api/profile');
if (!response.ok) {
throw new Error(`Request failed: ${response.status}`);
}
return await response.json();
}
loadProfile()Simple Form Validation
Validate a small form before submitting it.
const form = document.querySelector('#contactForm');
const emailInput = document.querySelector('#email');
const messageBox = document.querySelector('#formMessage');
form.addEventListener('submit', (event) => {
messageBox.textContent = '';