Alastair Grandison
Snippets

Coding examples

Real bits of code taken from my projects, with one-click copy.

Regex form validation

Validates contact form input client-side with a simple email regex plus a few human-friendly checks. Fields get inline styling and the user gets a clear message if anything is missing or invalid.

regex-validation.js javascript 
// Basic email validation
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

export function validateContactForm(form) {
  const errors = {};
  const fieldStatus = {};

  const checks = {
    name: (value) => {
      const trimmed = value.trim();
      if (!trimmed) return { valid: false, type: "missing", message: "Please enter your name." };
      return { valid: true };
    },
    email: (value) => {
      const trimmed = value.trim();
      if (!trimmed) return { valid: false, type: "missing", message: "Please enter your email address." };
      if (!emailPattern.test(trimmed)) {
        return { valid: false, type: "invalid", message: "Please enter a valid email address." };
      }
      return { valid: true };
    },
    telephone: (value) => {
      const trimmed = value.trim();
      if (!trimmed) return { valid: false, type: "missing", message: "Please enter your telephone number." };
      if (trimmed.replace(/\D/g, "").length < 10) {
        return { valid: false, type: "invalid", message: "Please enter a valid telephone number." };
      }
      return { valid: true };
    },
    message: (value) => {
      const trimmed = value.trim();
      if (!trimmed) {
        return {
          valid: false,
          type: "missing",
          message: "Please enter a message.",
        };
      }
      if (trimmed.length < 5) {
        return {
          valid: false,
          type: "invalid",
          message: "Message must be at least 5 characters.",
        };
      }
      if (trimmed.length > 1000) {
        return {
          valid: false,
          type: "invalid",
          message: "Message must be 1000 characters or fewer.",
        };
      }
      return { valid: true };
    },
  };

  Object.entries(checks).forEach(([name, check]) => {
    const field = form.elements[name];
    if (!field) return;

    const result = check(field.value);
    fieldStatus[name] = result.valid ? "valid" : "invalid";
    if (!result.valid) errors[name] = { label: name, type: result.type, message: result.message };
  });

  return { isValid: Object.keys(errors).length === 0, errors, fieldStatus };
}

Responsive service navigation (Sass)

Uses a Sass map plus an @each loop to generate themed navigation styles. The result is DRY, consistent and scalable.

service-nav.scss scss 
// Sass loop that generates themed navigation dropdown styles
$services: (
  "design": #00e5ff,
  "dev": #ff6a00,
  "seo": #ff2bd6,
);

@mixin mq($min) {
  @media (min-width: $min) {
    @content;
  }
}

.services-nav {
  display: none;

  @include mq(992px) {
    display: flex;
  }
}

@each $name, $color in $services {
  .nav-service--#{$name} {
    position: relative;
    color: #fff;

    &:hover,
    &:focus-visible {
      background: $color;
    }

    &::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 100%;
      transform: translateX(-50%);
      border: 10px solid transparent;
      border-top-color: $color;
      opacity: 0;
      transition: opacity 0.15s ease;
    }

    &:hover::after,
    &:focus-visible::after {
      opacity: 1;
    }
  }
}

Layout-related tweaks (JavaScript)

A tiny utility that keeps layout in sync on wide screens and throttles work with requestAnimationFrame so resize/scroll stays smooth.

layout-tweaks.js javascript 
// requestAnimationFrame-throttled layout syncing (wide screens only)
let raf = 0;

export function syncPanels(assignmentsEl, previewEl) {
  const run = () => {
    raf = 0;
    if (window.matchMedia("(min-width: 992px)").matches) {
      previewEl.style.minHeight = `${assignmentsEl.offsetHeight}px`;
    } else {
      previewEl.style.minHeight = "";
    }
  };

  const schedule = () => {
    if (raf) return;
    raf = requestAnimationFrame(run);
  };

  window.addEventListener("resize", schedule);
  window.addEventListener("scroll", schedule, { passive: true });
  schedule();
}

Product filters hook (React/TypeScript)

A pure TypeScript React hook that memoizes the filtering logic and keeps all the domain rules (category, price range, stock status, text search and so on) in one place.

useProductFilters.ts typescript 
import { useMemo } from 'react'
import type { Product } from '../data/products'

export type ProductFilters = {
  category: string
  brand: string
  size: string
  gender: string
  year: number | null
  minPrice: number | null
  maxPrice: number | null
  inStockOnly: boolean
  query: string
}

export function useProductFilters(
  products: Product[],
  { category, brand, size, gender, year, minPrice, maxPrice, inStockOnly, query }: ProductFilters,
): Product[] {
  return useMemo(() => {
    const normalizedQuery = query.trim().toLowerCase()

    return products.filter((product) => {
      if (category !== 'All' && product.category !== category) return false
      if (brand !== 'All' && product.brand !== brand) return false
      if (size !== 'All' && product.size !== size) return false
      if (gender !== 'All' && product.gender !== gender) return false
      if (year !== null && product.year !== year) return false
      if (inStockOnly && product.in_stock <= 0) return false

      if (minPrice !== null && product.price_in_pounds < minPrice) return false
      if (maxPrice !== null && product.price_in_pounds > maxPrice) return false

      if (normalizedQuery) {
        const name = `${product.brand} ${product.model}`.toLowerCase()
        if (!name.includes(normalizedQuery)) return false
      }

      return true
    })
  }, [products, category, brand, size, gender, year, minPrice, maxPrice, inStockOnly, query])
}

SMTP mail config (PHP)

Sends a contact notification email using PHPMailer, reading SMTP configuration from environment variables.

mail.php php 
<?php
use PHPMailer\PHPMailer\PHPMailer;

/**
 * Send a contact email using SMTP settings from environment variables.
 */
function sendContactEmail(array $data): bool
{
    $host = getenv('SMTP_HOST') ?: '';
    $port = (int) (getenv('SMTP_PORT') ?: 587);
    $username = getenv('SMTP_USER') ?: '';
    $password = getenv('SMTP_PASS') ?: '';

    if ($host === '' || $username === '' || $password === '') {
        return false;
    }

    $mail = new PHPMailer(true);
    $mail->isSMTP();
    $mail->Host = $host;
    $mail->Port = $port;
    $mail->SMTPAuth = true;
    $mail->Username = $username;
    $mail->Password = $password;
    $mail->SMTPSecure = getenv('SMTP_ENCRYPTION') ?: 'tls';

    $mail->setFrom(getenv('SMTP_FROM') ?: $username, 'Portfolio contact form');
    $mail->addAddress(getenv('SMTP_TO') ?: $username);
    $mail->isHTML(false);
    $mail->Subject = 'New portfolio contact form submission';

    $mail->Body = implode("\n", [
        "Name: {$data['name']}",
        "Company: " . ($data['company'] ?: '(not provided)'),
        "Email: {$data['email']}",
        "Telephone: {$data['telephone']}",
        "",
        $data['message'],
    ]);

    return $mail->send();
}

Server-side contact handler (PHP)

Validates request data and builds a structured error response so the front end can show which fields need attention.

contact-handler.php php 
<?php

// A server-side contact handler: validate → save to database → send email.
function validateContact(array $post): array
{
    $errors = [];
    $fieldStatus = [];

    $name = trim($post['name'] ?? '');
    $email = trim($post['email'] ?? '');
    $telephone = trim($post['telephone'] ?? '');
    $message = trim($post['message'] ?? '');

    if ($name === '') {
        $errors['name'] = ['type' => 'missing', 'message' => 'Please enter your name.'];
        $fieldStatus['name'] = 'invalid';
    } else {
        $fieldStatus['name'] = 'valid';
    }

    if ($email === '' || !filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $errors['email'] = ['type' => 'invalid', 'message' => 'Please enter a valid email address.'];
        $fieldStatus['email'] = 'invalid';
    } else {
        $fieldStatus['email'] = 'valid';
    }

    $digits = strlen(preg_replace('/\D+/', '', $telephone));
    if ($digits < 10) {
        $errors['telephone'] = ['type' => 'invalid', 'message' => 'Please enter a valid telephone number.'];
        $fieldStatus['telephone'] = 'invalid';
    } else {
        $fieldStatus['telephone'] = 'valid';
    }

    if (mb_strlen($message) < 5 || mb_strlen($message) > 1000) {
        $errors['message'] = ['type' => 'invalid', 'message' => 'Message must be between 5 and 1000 characters.'];
        $fieldStatus['message'] = 'invalid';
    } else {
        $fieldStatus['message'] = 'valid';
    }

    return ['isValid' => empty($errors), 'errors' => $errors, 'fieldStatus' => $fieldStatus];
}

Custom WordPress shortcode: filterable projects grid

This shortcode powers a dynamic portfolio module by querying custom project posts, applying sanitized taxonomy filters from URL/shortcode input, and rendering a reusable project-card grid with graceful empty-state handling.

functions.php php 

function sbtheme_projects_shortcode(array $atts): string
{
    $atts = shortcode_atts([
        'posts_per_page' => 12,
        'type' => '',
        'show_filters' => 'true',
    ], $atts, 'sb_projects');

    $posts_per_page = (int) $atts['posts_per_page'];
    if ($posts_per_page <= 0 || $posts_per_page > 50) {
        $posts_per_page = 12;
    }

    $base_url = get_permalink();
    $current_filter = sbtheme_get_current_project_type_filter();

    $type_slug = sanitize_title((string) $atts['type']);
    $effective_filter = $type_slug !== '' ? $type_slug : $current_filter;

    $query_args = [
        'post_type' => 'project',
        'posts_per_page' => $posts_per_page,
        'no_found_rows' => true,
    ];

    if ($effective_filter !== '') {
        $query_args['tax_query'] = [[
            'taxonomy' => 'project-type',
            'field' => 'slug',
            'terms' => $effective_filter,
        ]];
    }

    $projects = new \WP_Query($query_args);

    ob_start();

    if (strtolower((string) $atts['show_filters']) === 'true') {
        echo sbtheme_project_type_filters($base_url, $effective_filter);
    }

    if ($projects->have_posts()) {
        echo '<div class="projects-grid">';
        while ($projects->have_posts()) {
            $projects->the_post();
            get_template_part('template-parts/project', 'card');
        }
        echo '</div>';
        wp_reset_postdata();
    } else {
        echo '<p>' . esc_html__('No projects found.', 'small-business-theme') . '</p>';
    }

    return (string) ob_get_clean();
}
add_shortcode('sb_projects', 'sbtheme_projects_shortcode');

syncCreditPackCheckout()

This method processes a successful Stripe credit-pack purchase exactly once by recording the checkout session, locking the user row, and updating the account's credit balance in a single transaction.

StripeBillingService.php php 
    protected function syncCreditPackCheckout(array $session, ?User $user = null): array
    {
        $user ??= $this->resolveUserFromCheckoutSession($session);

        if ($user === null || (string) ($session['payment_status'] ?? '') !== 'paid') {
            return [
                'credits_added' => 0,
                'credited_now' => false,
            ];
        }

        $offerKey = $this->normalizeCreditPackKey(
            (string) (data_get($session, 'metadata.offer') ?: data_get($session, 'metadata.plan'))
        );

        if ($offerKey === null) {
            return [
                'credits_added' => 0,
                'credited_now' => false,
            ];
        }

        $credits = max(
            0,
            (int) (config("billing.credit_packs.{$offerKey}.credits")
                ?: data_get($session, 'metadata.credits'))
        );
        $sessionId = (string) ($session['id'] ?? '');

        if ($credits === 0 || $sessionId === '') {
            return [
                'credits_added' => 0,
                'credited_now' => false,
            ];
        }

        $creditedNow = DB::transaction(function () use ($credits, $offerKey, $session, $sessionId, $user): bool {
            $existingPurchase = CreditPurchase::query()
                ->where('stripe_checkout_session_id', $sessionId)
                ->first();

            if ($existingPurchase !== null) {
                return false;
            }

            $lockedUser = User::query()
                ->lockForUpdate()
                ->findOrFail($user->getKey());

            try {
                CreditPurchase::query()->create([
                    'user_id' => $lockedUser->getKey(),
                    'offer_key' => $offerKey,
                    'credits_granted' => $credits,
                    'stripe_checkout_session_id' => $sessionId,
                    'stripe_payment_intent_id' => is_string($session['payment_intent'] ?? null)
                        ? $session['payment_intent']
                        : null,
                    'stripe_customer_id' => is_string(data_get($session, 'customer')) ? data_get($session, 'customer') : null,
                    'stripe_price_id' => config("billing.credit_packs.{$offerKey}.stripe_price_id"),
                    'amount_total' => is_numeric($session['amount_total'] ?? null) ? (int) $session['amount_total'] : null,
                    'currency' => is_string($session['currency'] ?? null) ? strtolower((string) $session['currency']) : null,
                    'status' => is_string($session['payment_status'] ?? null) ? $session['payment_status'] : null,
                ]);
            } catch (QueryException) {
                return false;
            }

            $lockedUser->credit_balance = $lockedUser->creditBalance() + $credits;

            $customerId = data_get($session, 'customer');

            if (is_string($customerId) && $customerId !== '') {
                $lockedUser->stripe_customer_id = $customerId;
            }

            $lockedUser->save();

            return true;
        });

        return [
            'credits_added' => $credits,
            'credited_now' => $creditedNow,
        ];
    }

Backend architecture, API integration, validation, retries, and deployment-ready app serving

A to-do planner app's Express backend, which securely handles AI suggestion requests, validates and sanitises the model output, retries malformed responses, and serves the production React frontend from the same service.

index.js javascript 
import "dotenv/config";
import { existsSync } from "node:fs";
import path from "node:path";
import { fileURLToPath } from "node:url";

import express from "express";
import OpenAI from "openai";
import { ZodError } from "zod";

import { insightTextFormat, parseInsight } from "./insightFormat.js";
import { INSIGHT_LIMITS } from "../shared/insightShape.js";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const distPath = path.resolve(__dirname, "../dist");

const app = express();
const host = process.env.HOST || "0.0.0.0";
const port = Number(process.env.PORT) || 3001;
const model = process.env.OPENAI_MODEL || "gpt-5-mini";
const allowedOrigins = createAllowedOrigins(process.env.FRONTEND_ORIGIN);

const systemPrompt = [
  "You improve to-do items so they are easier to act on.",
  "Respond only with valid JSON that matches the provided schema.",
  "Keep every field concise, practical, and specific to the item.",
  "Use category grouping when it helps the user batch similar work together.",
  "Every free-text field must read as a complete thought, not a cut-off fragment.",
  "If a field would be too long, rewrite it shorter instead of ending mid-sentence.",
  "Use plain English with standard Latin characters and normal punctuation only.",
  "Do not use emojis, icons, or non-Latin glyphs.",
  "The batchWith field must end with a full stop.",
  "Use short, human-readable tags with only letters, numbers, spaces, apostrophes, ampersands, slashes, colons, plus signs, or hyphens.",
  "Do not invent context that is not implied by the task.",
].join(" ");

const retryPrompt = [
  "Your previous output did not meet formatting requirements.",
  `Keep improvementSummary under ${INSIGHT_LIMITS.improvementSummary} characters.`,
  `Keep nextStep under ${INSIGHT_LIMITS.nextStep} characters.`,
  `Keep batchWith under ${INSIGHT_LIMITS.batchWith} characters.`,
  "Use plain English with standard Latin characters only.",
  "The batchWith field must end with a full stop.",
  "Return complete, natural phrases only.",
  "Do not end with dangling words, unmatched brackets, or trailing hyphens.",
].join(" ");

const finalRetryPrompt = [
  "Your previous output was still too awkward or incomplete.",
  "Use shorter, plainer phrasing.",
  "Prefer one clean sentence per field.",
  "Use only standard Latin characters and punctuation.",
  "End batchWith with a full stop.",
  "Avoid semicolons, parentheses, and multi-part clauses unless they are necessary.",
  "Never leave a field ending on a connector, preposition, or unfinished comparison.",
].join(" ");

const client = process.env.OPENAI_API_KEY
  ? new OpenAI({ apiKey: process.env.OPENAI_API_KEY })
  : null;

app.use((req, res, next) => {
  const origin = req.get("Origin");

  if (origin && allowedOrigins.has(origin)) {
    res.setHeader("Access-Control-Allow-Origin", origin);
    res.setHeader("Vary", "Origin");
    res.setHeader("Access-Control-Allow-Headers", "Content-Type");
    res.setHeader("Access-Control-Allow-Methods", "GET,POST,OPTIONS");
  }

  if (req.method === "OPTIONS") {
    return res.sendStatus(204);
  }

  return next();
});

app.use(express.json({ limit: "32kb" }));

app.get("/health", (_req, res) => {
  res.json({ ok: true });
});

app.post("/api/insights", async (req, res) => {
  const title = String(req.body?.title || "").trim();
  const details = String(req.body?.details || "").trim();

  if (!title) {
    return res.status(400).json({
      error: "A task title is required before requesting AI guidance.",
    });
  }

  if (title.length > 140 || details.length > 600) {
    return res.status(400).json({
      error: "Keep titles under 140 characters and notes under 600 characters.",
    });
  }

  if (!client) {
    return res.status(503).json({
      error:
        "OPENAI_API_KEY is missing. Add it to your environment before using AI insights.",
    });
  }

  const taskSummary = details
    ? `Title: ${title}\nDetails: ${details}`
    : `Title: ${title}`;

  try {
    const insight = await generateInsightWithRetries(taskSummary);

    if (!insight) {
      throw new Error("The model returned unusable structured output.");
    }

    return res.json({ insight });
  } catch (error) {
    console.error("Failed to generate insight:", error);

    const message =
      error?.status === 401
        ? "OpenAI authentication failed. Check OPENAI_API_KEY."
        : error instanceof SyntaxError || error instanceof ZodError
          ? "The AI response was malformed. Please try again."
          : "The AI insight request failed. Try again in a moment.";

    return res.status(500).json({ error: message });
  }
});

if (existsSync(distPath)) {
  app.use(express.static(distPath));

  app.use((req, res, next) => {
    if (req.path.startsWith("/api") || req.method !== "GET") {
      return next();
    }

    return res.sendFile(path.join(distPath, "index.html"));
  });
} else {
  app.get("/", (_req, res) => {
    res
      .type("text/plain")
      .send(
        "Run `npm run dev` for development or `npm run build` before `npm start`.",
      );
  });
}

app.listen(port, host, () => {
  console.log(`AI To-Do server listening on http://${host}:${port}`);
});

function createAllowedOrigins(frontendOrigin) {
  return new Set([
    "http://localhost:5173",
    "http://127.0.0.1:5173",
    ...String(frontendOrigin || "")
      .split(",")
      .map((value) => value.trim())
      .filter(Boolean),
  ]);
}

async function generateInsight(taskSummary, extraInstructions = "") {
  const instructions = extraInstructions
    ? `${systemPrompt} ${extraInstructions}`
    : systemPrompt;

  try {
    const response = await client.responses.parse({
      model,
      store: false,
      instructions,
      input: taskSummary,
      text: {
        format: insightTextFormat,
      },
    });

    return parseInsight(response.output_parsed);
  } catch (error) {
    if (error instanceof SyntaxError || error instanceof ZodError) {
      return null;
    }

    throw error;
  }
}

async function generateInsightWithRetries(taskSummary) {
  const attemptPrompts = ["", retryPrompt, finalRetryPrompt];

  for (const prompt of attemptPrompts) {
    const insight = await generateInsight(taskSummary, prompt);

    if (insight) {
      return insight;
    }
  }

  return null;
}