Skip to main content
whitep4nth3r logo whitep4nth3r

Blogs and tutorials

Filter posts

    • An icon of a laptop with angled brackets on the screen.
    • An icon of angled brackets with a forward slash in the middle.
    A screenshot of the HTML details page on MDN.

    How to build an HTML-only accordion — no JavaScript required!

    11 Feb 2022 2 min read

    • The CSS3 logo featuring a white 3 at the centre of a blue shield shape.
    A screenshot of the same view as above, but with the CSS rule applied in the CSS dev tools. The iPhone preview window has been updated to show outlines around each HTML element on the page.

    Debug your CSS layouts with this one simple trick

    6 Feb 2022 2 min read

    • The Netlify logo in the green gradient.
    • The NodeJS logo in white, featuring the letters JS outlined by a hexagon.
    • An icon of a cloud with an up arrow at the centre.
    A Netlify branded image with a dark green background with a radial gradient, with the text

    How to use really long environment variables in Netlify functions

    18 Jan 2022 4 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.
    • An icon of a laptop with angled brackets on the screen.
    An illustration of a woman with a laptop making a thinking pose, next to the logo of GraphQL and a question mark on a green background.

    An introduction to GraphQL and how to use GraphQL APIs

    13 Dec 2021 10 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 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.
    • The pink Jamstack logo that features a blocked white J shape on a pink background.
    • A white triangle representing the Vercel logo.
    • The Netlify logo in the green gradient.
    A thumbnail for the Learn with Jason show, featuring head shots of whitep4nth3r and Jason, with the title

    Next.js Dynamic Routes with Contentful's GraphQL API — with Jason Lengstorf

    10 Oct 2021 90 min read

    • The Contentful C logo in blue, yellow and red.
    • An icon of a laptop with angled brackets on the screen.
    An illustration of three web browser windows with lots of interlocking blocks in yellow, blue and green.

    What is a REST API?

    4 Oct 2021 8 min read

    • An illustration of a white coffee cup with two white steam lines coming from the top.
    The Polywork homepage, showing six neomorphic colourful characters on a bright purple background. The headline in the middle reads

    Why I love Polywork as a developer advocate — and it's not for the reason you think

    20 Sep 2021 6 min read

    • The pink Jamstack logo that features a blocked white J shape on a pink background.
    • A white triangle representing the Vercel logo.
    • An icon of a laptop with angled brackets on the screen.
    A Youtube thumbnail featuring my headshot against a red background on the left, Colby on the right pulling a silly face, and the title in the middle which reads Ecomm & Next.js. Ecommerce on the Jamstack.

    Ecommerce and Next.js on the Jamstack — with Colby Fayock

    16 Sep 2021 48 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.
    • A white triangle representing the Vercel logo.
    • The Netlify logo in the green gradient.
    A screenshot from the Building with Next.js Cassidy Williams and Salma Alam-Naylor Architecting with Next.js 2021 video showing Cassidy on the left and Salma on the right against a Netlify branded background.

    Why I love building with Next.js — a fireside chat with Cassidy Williams of Netlify

    1 Sep 2021 1 min read

    • The Contentful C logo in blue, yellow and red.
    • An icon of a laptop with angled brackets on the screen.
    An illustration of blue and yellow rectangles on a blue background, representing application layers, with some wheel cogs in the top left and bottom right corners.

    What is an API?

    11 Aug 2021 9 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