Free code snippets

Free code snippets, page 2

Small, self-contained patterns from real DEV3 products, each explained, with a live preview where it makes sense. Copy them into your project; commercial use is fine.

200
snippets: 7
stacks

All snippets

Messenger.php

final readonly class OutboundMessage
{
    public function __construct(public string $to, public string $bod…
}
interface Driver
{
    /** Returns the provider's message id. */
    public function send(OutboundMessage $message): string;
}

Laravel · NotificationsSMS and WhatsApp driver abstractionSend text messages through one Messenger facade with swappable SMS and WhatsApp drivers, selected by channel name, plus a log driver for local work.smswhatsappdrivers

cart-drawer.html

<button id="cart-open" type="button" class="rounded-lg border border-…
  Cart (<span id="cart-count">0</span>)
</button>
<div id="cart-backdrop" class="fixed inset-0 z-40 hidden bg-slate-900…
<aside id="cart-drawer" role="dialog" aria-modal="true" aria-labelled…
  class="fixed inset-y-0 right-0 z-50 flex w-full max-w-sm translate-…
  <header class="flex items-center justify-between border-b border-sl…
    <h2 id="cart-title" class="font-semibold">Your cart</h2>
    <button id="cart-close" type="button" class="text-sm text-slate-5…

Tailwind CSS · ModalsSlide-over cart drawerA cart panel that slides in from the right with a backdrop, line items, quantity steppers and a live subtotal.cartdrawerslide-over

DownloadController.php

class DownloadController extends Controller
{
    /** A link that stops working after 24 hours, whatever the downlo…
    public function link(Transfer $transfer): string
    {
        return URL::temporarySignedRoute(
            'transfers.download',
            min($transfer->expires_at, now()->addDay()),
            ['transfer' => $transfer->id],

Laravel · UploadsSigned temporary download URLs with a download capHand out expiring signed links for private files and stop serving them after a fixed number of downloads, without exposing storage paths.signed-urldownloadstorage

SignatureStamper.php

final class SignatureStamper
{
    private const MAX_BYTES = 200_000;
    private const PNG_MAGIC = "\x89PNG\r\n\x1a\n";
    /** Turn a canvas.toDataURL('image/png') string into verified PNG…
    public static function decode(string $dataUrl): string
    {
        if (! preg_match('#^data:image/png;base64,([A-Za-z0-9+/=]+)$#…
            throw new InvalidArgumentException('Signature must be a P…

Laravel · UtilitiesSignature capture and PDF stampingValidate a canvas signature sent as a data URL, then stamp it onto a chosen page of an existing PDF at a percentage position.pdfsignaturefpdi

CodeGenerator.php

final class CodeGenerator
{
    /** 32 symbols, no 0/1/l/o so codes survive being read aloud or p…
    private const ALPHABET = 'abcdefghijkmnpqrstuvwxyz23456789';
    /** Words that must never be handed out because they are routes. …
    private const RESERVED = ['admin', 'api', 'login', 'logout', 'app…
    public static function make(int $length = 6): string
    {
        do {

Laravel · UtilitiesShort-code generator with collision retryGenerate unambiguous random short codes and rely on the unique index to detect collisions, retrying and growing the length when a space fills up.short-codeuniqueretry

settings-page.php

/**
 * Settings page: Settings -> Acme.
 *
 * @package Acme_Core
 */
defined( 'ABSPATH' ) || exit;
add_action( 'admin_menu', static function (): void {
  add_options_page( __( 'Acme settings', 'acme-core' ), __( 'Acme', '…
} );

WordPress · FormsSettings API options pageA complete options page using register_setting, sections and fields with sanitise callbacks and a capability gate.settings-apioptionsadmin

Geofence.php

final class Geofence
{
    /**
     * @param  list<array{0: float, 1: float}>  $ring  polygon vertic…
     */
    public static function contains(array $ring, float $lat, float $l…
    {
        $n = count($ring);
        if ($n < 3) {

Laravel · UtilitiesService-area geofence checkTest whether a latitude and longitude falls inside a stored polygon service area using ray casting, with a bounding-box shortcut.geofencepolygongeojson

testimonial-carousel.html

<section aria-roledescription="carousel" aria-label="Customer testimo…
  <div class="mb-3 flex items-center justify-between">
    <h2 class="text-lg font-semibold text-slate-900">What customers s…
    <div class="flex gap-2">
      <button type="button" data-dir="-1" aria-label="Previous testim…
        class="rounded-full border border-slate-300 px-3 py-1 text-sl…
      <button type="button" data-dir="1" aria-label="Next testimonial…
        class="rounded-full border border-slate-300 px-3 py-1 text-sl…
    </div>

Tailwind CSS · CardsScroll-snap testimonial carouselA swipeable testimonial carousel built on native CSS scroll snapping, with optional previous and next buttons and no slider library.carouseltestimonialsscroll-snap

icons.php

/**
 * Inline SVG icons from /assets/icons/<name>.svg
 *
 * @package Acme_Theme
 */
defined( 'ABSPATH' ) || exit;
/** Tags and attributes a plain icon needs. Anything else is removed.…
function acme_svg_allowed_html(): array {
  $common = array( 'class' => true, 'fill' => true, 'stroke' => true,…

WordPress · UtilitiesSanitised inline SVG icon helperLoad SVG icons from the theme folder, strip anything unsafe with wp_kses and a strict allow-list, and print them inline.svgiconskses

TokenController.php

class TokenController extends Controller
{
    /** Only these can ever be granted. */
    private const ABILITIES = ['orders:read', 'orders:write', 'produc…
    public function store(Request $request): JsonResponse
    {
        $data = $request->validate([
            'name' => ['required', 'string', 'max:60'],
            'abilities' => ['required', 'array', 'min:1'],

Laravel · APIsSanctum tokens with abilities and rate limitsIssue scoped personal access tokens with named abilities, enforce them per route, and rate limit API calls per token instead of per IP.sanctumtokensabilities

ResumeUploadRequest.php

class ResumeUploadRequest extends FormRequest
{
    /** Allowed extension => leading bytes every genuine file of that…
    private const SIGNATURES = [
        'pdf' => '%PDF-',
        'docx' => "PK\x03\x04",
    ];
    public function authorize(): bool
    {

Laravel · UploadsSafe resume upload validationA form request that checks extension, size and real file signature, then stores resumes on a private disk under a random name.uploadvalidationform-request

roadmap.html

<section class="mx-auto max-w-5xl px-4" aria-labelledby="roadmap-titl…
  <h2 id="roadmap-title" class="mb-4 text-xl font-semibold text-slate…
  <!-- One column on phones, a row of columns on large screens -->
  <div class="grid gap-4 lg:grid-cols-3">
    <section aria-labelledby="col-planned" class="rounded-xl bg-slate…
      <h3 id="col-planned" class="mb-3 flex items-center gap-2 text-s…
        <span class="size-2 rounded-full bg-sky-500"></span> Planned …
      </h3>
      <ul class="space-y-2">

Tailwind CSS · LayoutsRoadmap status columnsA public product roadmap laid out as Planned, In progress and Shipped columns that stack on phones, using semantic sections and lists.roadmapcolumnsgrid

review-card.html

<!-- Embeddable review summary card: self-contained, fixed width, no …
<aside class="mx-auto w-full max-w-xs rounded-2xl border border-slate…
       aria-label="Customer reviews summary">
  <div class="flex items-end gap-3">
    <p class="text-4xl font-bold leading-none text-slate-900">4.8</p>
    <div>
      <p class="text-amber-400" role="img" aria-label="4.8 out of 5 s…
      <p class="text-xs text-slate-500">Based on 1,284 reviews</p>
    </div>

Tailwind CSS · CardsEmbeddable review summary cardA compact ratings card with average score, star row, a distribution bar per level and a featured quote, ready to embed on any page.reviewswidgetratings

menu.html

<section class="mx-auto max-w-3xl px-6 py-12" aria-labelledby="menu-t…
  <h2 id="menu-title" class="text-center font-serif text-3xl text-sto…
  <p class="mt-1 text-center text-sm text-stone-500">Prices in USD. A…
  <div class="mt-10 grid gap-10 md:grid-cols-2">
    <div>
      <h3 class="mb-4 border-b-2 border-amber-600 pb-1 font-serif tex…
      <ul class="space-y-4">
      <li class="flex items-baseline gap-3">
        <div class="min-w-0 flex-1">

Tailwind CSS · CardsRestaurant menu card sectionA two-column restaurant menu with category headings, dish names, descriptions, dotted price leaders and small dietary tags.menurestaurantlayout

rest-routes.php

/**
 * REST: /wp-json/acme/v1/bookmarks
 *
 * @package Acme_Core
 */
defined( 'ABSPATH' ) || exit;
add_action( 'rest_api_init', static function (): void {
  register_rest_route( 'acme/v1', '/bookmarks', array(
    array(

WordPress · APIsREST route with permission callback and schemaRegister a REST API route that validates its arguments, authorises with permission_callback and returns a shaped response.rest-apipermission-callbackvalidation

welcome.html

<!-- Place the <style> block inside <head>; the rest goes in <body>. …
<style>
  /* Clients that support media queries get the fluid layout */
  @media only screen and (max-width: 620px) {
    .wrap { width: 100% !important; }
    .pad { padding: 24px 20px !important; }
    .stack { display: block !important; width: 100% !important; paddi…
    h1 { font-size: 24px !important; }
  }

Tailwind CSS · EmailResponsive welcome emailA table-based welcome email with preheader text, a two-column tips row that stacks on phones, and inline styles for every client.emailhtmlresponsive

receipt.html

<!-- Receipt email: totals use a right-aligned table so amounts line …
<style>
  @media only screen and (max-width: 560px) {
    .box { width: 100% !important; }
    .meta td { display: block !important; width: 100% !important; tex…
  }
</style>
<table role="presentation" width="100%" cellpadding="0" cellspacing="…
<tr><td align="center" style="padding:24px 12px;font-family:Arial,Hel…

Tailwind CSS · EmailResponsive receipt emailA transactional receipt email with a meta row, line-item table, right-aligned totals and a mobile layout that stacks the header details.emailreceiptinvoice

related-posts.php

/**
 * Related posts.
 *
 * @package Acme_Theme
 */
defined( 'ABSPATH' ) || exit;
/** @return int[] IDs of related posts, best match first. */
function acme_related_post_ids( int $post_id, int $limit = 4 ): array…
  $key = "acme_related_{$post_id}_{$limit}";

WordPress · UtilitiesRelated posts by shared taxonomy termsQuery the posts that share the most tags with the current one, fall back to its category, and cache the result in a transient.related-postswp-querytaxonomy

Highlight.tsx

export type Part = { text: string; hit: boolean; groups?: string[] };
export function segments(pattern: string, flags: string, text: string…
  let re: RegExp;
  try {
    re = new RegExp(pattern, flags.includes('g') ? flags : flags + 'g…
  } catch (e) {
    return { parts: [{ text, hit: false }] as Part[], error: (e as Er…
  }
  const parts: Part[] = [];

React / Next.js · UtilitiesRegex match highlighterSplit text into plain and matched segments for any regular expression, and render the matches as highlighted marks in React.regexhighlightreact

CaptureReferral.php

class CaptureReferral
{
    public function handle(Request $request, Closure $next): Response
    {
        $code = (string) $request->query('ref');
        // Strict shape first, then a database check, so junk never r…
        $valid = preg_match('/^[A-Za-z0-9]{6,12}$/', $code) === 1
            && User::where('referral_code', $code)->exists();
        $keepFirst = ! config('referrals.last_touch', false) && $requ…

Laravel · MiddlewareReferral attribution cookieCapture a ref code from the URL into a first-party cookie with a validated value and a 30 day window, then read it when the visitor signs up.referralcookieattribution

reveal.js

/**
 * Reveal on scroll. Markup: <div data-reveal data-reveal-delay="120"…
 * Without JavaScript the elements stay visible because the hiding cl…
 */
(() => {
  const items = document.querySelectorAll('[data-reveal]');
  if (!items.length) return;
  const reduce = window.matchMedia('(prefers-reduced-motion: reduce)'…
  if (reduce.matches || !('IntersectionObserver' in window)) return; …

WordPress · AnimationReduced-motion aware scroll revealFade elements in as they enter the viewport with an IntersectionObserver, staggered delays and a full opt-out for reduced motion.scroll-revealintersection-observerreduced-motion

MonthlyGiving.php

class MonthlyGiving
{
    /** Returns the hosted Checkout URL for a monthly gift of any amo…
    public function start(Campaign $campaign, int $cents, string $cur…
    {
        $session = Http::asForm()->withToken(config('services.stripe.…
            ->baseUrl('https://api.stripe.com/v1')
            ->post('/checkout/sessions', [
                'mode' => 'subscription',

Laravel · PaymentsRecurring donations with Stripe subscriptionsStart a monthly gift as a Stripe Checkout subscription with a custom amount, and record each renewal from the invoice-paid webhook branch.stripesubscriptionrecurring

post-extras.php

/**
 * Reading time and table of contents.
 *
 * @package Acme_Theme
 */
defined( 'ABSPATH' ) || exit;
function acme_reading_time( int $post_id = 0 ): int {
  $content = get_post_field( 'post_content', $post_id ?: get_the_ID()…
  $words   = str_word_count( wp_strip_all_tags( strip_shortcodes( (st…

WordPress · UtilitiesReading time and automatic table of contentsFilter the_content to add heading anchors, a linked table of contents and a words-per-minute reading time estimate.the-contenttocreading-time

usePolling.ts

type Options = { interval?: number; maxDelay?: number; enabled?: bool…
export function usePolling<T>(fn: (signal: AbortSignal) => Promise<T>…
  const [data, setData] = useState<T>();
  const [error, setError] = useState<unknown>();
  const fnRef = useRef(fn);
  fnRef.current = fn;
  const runNow = useRef<() => void>(() => {});
  useEffect(() => {
    if (!enabled) return;

React / Next.js · HooksVisibility-aware polling hookPoll an async function on an interval that pauses in hidden tabs, backs off on errors and cancels in-flight work on unmount.reactpollinghook