Skip to main content
whitep4nth3r logo whitep4nth3r

posts about tutorials

Blog posts and tutorials

I write and live stream about front end development. Read tutorials and quick tips on HTML, CSS, JavaScript and Jamstack. Click on the categories to filter posts by topic.

    • The Netlify logo in the green gradient.
    • An icon of a blank piece of paper with the bottom right corner turned up.
    • A white triangle representing the Vercel logo.
    next.js plus netlify equals star eyes emoji

    Rewrite HTML and transform page props in Next.js with Next.js Advanced Middleware

    24 Aug 2022 7 min read

    • The Netlify logo in the green gradient.
    • A yellow square with the black letters JS at the bottom right.
    • An icon of a blank piece of paper with the bottom right corner turned up.
    • An icon of a cloud with an up arrow at the centre.
    Personalisation at the edge, with no client side JavaScript

    Add personalization to static HTML with Netlify Edge Functions — no browser JavaScript required

    11 Aug 2022 8 min read

    • The Netlify logo in the green gradient.
    • An icon of a laptop with angled brackets on the screen.
    • An icon of a blank piece of paper with the bottom right corner turned up.
    Published deploy details with the usual links to open published deploy and lock publishing to this deploy. Below is a lighthouse summary section, which shows the following scores. 100 performance, 100 accessibility, 100 best practices, 100 SEO, 80 progressive web app.

    How to view Google Lighthouse scores for your site in Netlify

    24 Jul 2022 2 min read

    • The Netlify logo in the green gradient.
    • A yellow square with the black letters JS at the bottom right.
    • The pink Jamstack logo that features a blocked white J shape on a pink background.
    • An icon of a cloud with an up arrow at the centre.
    • An icon of a laptop with angled brackets on the screen.
    • An icon of a blank piece of paper with the bottom right corner turned up.
    Ben Holmes and me on a live stream, I'm pointing to Ben and he's in a rocket with a space helmet on. We're superimposed on top of the Astro website, with the Netlify logo in the bottom left.

    How to deploy an Astro site

    12 Jun 2022 9 min read

    • A yellow square with the black letters JS at the bottom right.
    • The NodeJS logo in white, featuring the letters JS outlined by a hexagon.
    • An icon of a blank piece of paper with the bottom right corner turned up.
    A terminal showing the command npx whitep4nth3r which has output a box with a list of links inside, the titles of the links are coloured with the brand colours, eg youtube is white text on a red background, and there's a little intro paragraph as well.

    Build a business card CLI tool

    8 Jun 2022 5 min read

    • An icon of a laptop with angled brackets on the screen.
    • An icon of a blank piece of paper with the bottom right corner turned up.
    • The accessibility icon featuring a person in the centre of a circle.
    • The Contentful C logo in blue, yellow and red.
    An illustration of a representation of an image placeholder on a green background, with the text <picture> overlaid.

    How to load responsive images in AVIF and WebP using the HTML picture element

    29 Nov 2021 13 min read

    • The Contentful C logo in blue, yellow and red.
    • The GraphQL logo in the GraphQL pink showing a hexagon shape with blobs on each edge, representing the graph node structure of GraphQL itself.
    • A yellow square with the black letters JS at the bottom right.
    • An icon of a blank piece of paper with the bottom right corner turned up.
    An illustration on a bright yellow background, showing the GraphQL logo, $slug, and a padlock to denote security.

    TIL: How to use GraphQL variables to give my queries type safety

    21 Oct 2021 4 min read

    • The pink Jamstack logo that features a blocked white J shape on a pink background.
    • An icon of a blank piece of paper with the bottom right corner turned up.
    • An icon of a laptop with angled brackets on the screen.
    • A yellow square with the black letters JS at the bottom right.
    • A white triangle representing the Vercel logo.
    A collage of GraphQL conf, Nextjs Conf and Fast Forward Conf social sharing event tickets in a range of desktop and mobile views.

    How to build a personalized image social sharing app with Cloudinary and Next.js

    7 Sep 2021 11 min read

    • The pink Jamstack logo that features a blocked white J shape on a pink background.
    • A yellow square with the black letters JS at the bottom right.
    • An icon of a blank piece of paper with the bottom right corner turned up.
    • An icon of a laptop with angled brackets on the screen.
    • A white triangle representing the Vercel logo.
    A YouTube thumbnail featuring images of myself and Ebonie, the title

    A Next.js complete beginner tutorial using the Spotify API

    4 Aug 2021 1 min read

    • The pink Jamstack logo that features a blocked white J shape on a pink background.
    • A yellow square with the black letters JS at the bottom right.
    • The NodeJS logo in white, featuring the letters JS outlined by a hexagon.
    • An icon of a blank piece of paper with the bottom right corner turned up.
    • A white triangle representing the Vercel logo.
    An illustration showing a web page, a magnifying glass, and the Next.js logo

    How to add Algolia InstantSearch to your Next.js application

    1 Jul 2021 9 min read

    • The Contentful C logo in blue, yellow and red.
    • A yellow square with the black letters JS at the bottom right.
    • An icon of a blank piece of paper with the bottom right corner turned up.
    • The GraphQL logo in the GraphQL pink showing a hexagon shape with blobs on each edge, representing the graph node structure of GraphQL itself.
    Illustration of a GraphQL logo with menu options to the right of it.

    How to filter entries by linked references in GraphQL

    14 Jun 2021 4 min read

    • An icon of a blank piece of paper with the bottom right corner turned up.
    • An icon of a cloud with an up arrow at the centre.
    • The Contentful C logo in blue, yellow and red.
    A screenshot of the GitHub UI showing a link to set up a workflow yourself after clicking on the Actions tab in the UI.

    How to use GitHub actions and Contentful webhooks to show your latest blog posts on your GitHub README

    27 May 2021 4 min read

    • The accessibility icon featuring a person in the centre of a circle.
    • The CSS3 logo featuring a white 3 at the centre of a blue shield shape.
    • An icon of a blank piece of paper with the bottom right corner turned up.
    • An icon of a laptop with angled brackets on the screen.
    A CSS example showing font-size 100% set on the HTML tag.

    How to make your font sizes accessible with CSS

    16 May 2021 3 min read

    • The accessibility icon featuring a person in the centre of a circle.
    • An icon of a blank piece of paper with the bottom right corner turned up.
    • An icon of a laptop with angled brackets on the screen.
    A screenshot of my website, showing how aria labels enrich the context of the HTML in the accessibility tree in Chromium dev tools.

    When to use aria-labels in your HTML

    3 May 2021 3 min read

    • A white triangle representing the Vercel logo.
    • The pink Jamstack logo that features a blocked white J shape on a pink background.
    • An icon of a blank piece of paper with the bottom right corner turned up.
    • The Contentful C logo in blue, yellow and red.
    • A yellow square with the black letters JS at the bottom right.
    • The GraphQL logo in the GraphQL pink showing a hexagon shape with blobs on each edge, representing the graph node structure of GraphQL itself.
    An illustration of multiple browser windows with the Next.js logo

    Paginating your Contentful blog posts in Next.js with the GraphQL API

    22 Apr 2021 13 min read

    • The Contentful C logo in blue, yellow and red.
    • A yellow square with the black letters JS at the bottom right.
    • An icon of a blank piece of paper with the bottom right corner turned up.
    Illustrated image showing how rich text is rendered with JS

    Rendering linked assets and entries in the Contentful Rich Text field

    13 Apr 2021 9 min read

    • The Contentful C logo in blue, yellow and red.
    • A yellow square with the black letters JS at the bottom right.
    • An icon of a cloud with an up arrow at the centre.
    • An icon of a blank piece of paper with the bottom right corner turned up.
    • The Netlify logo in the green gradient.
    A screenshot of the thingoftheday.xyz RSS feed in an RSS reader

    How to generate an RSS feed for your blog with JavaScript and Netlify functions

    8 Mar 2021 5 min read

    • The Contentful C logo in blue, yellow and red.
    • A yellow square with the black letters JS at the bottom right.
    • An icon of a blank piece of paper with the bottom right corner turned up.
    • The GraphQL logo in the GraphQL pink showing a hexagon shape with blobs on each edge, representing the graph node structure of GraphQL itself.
    • The Netlify logo in the green gradient.
    A screenshot of the styled microblog page

    How to build a lightweight microblogging site with Contentful, vanilla HTML, CSS and JavaScript

    5 Feb 2021 9 min read