Explore snippets
Discover reusable code snippets, examples, fixes, and ideas shared by developers, students, and teams.
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>
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>
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')) {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)) {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';Animated Modern Login Form
A sleek, animated login form with email and password fields, glowing Sign In button, and smooth hover effects.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Animated Login Form</title>
<style>
Modern Animated Login Form
An animated login form with email and password fields, glowing Sign In button, and smooth hover effects.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Animated Login Form</title>
<style>Animated Login Form
A modern login form with email and password fields, glowing Sign In button, and smooth hover animations.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Animated Login Form</title>
<style>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 -->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">