Skip to main content
whitep4nth3r logo whitep4nth3r

posts about contentful

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 Contentful C logo in blue, yellow and red.
    • The pink Jamstack logo that features a blocked white J shape on a pink background.
    • The Netlify logo in the green gradient.
    A screenshot of the Contentful entry editor, showing the Netlify preview app in the sidebar which comprises two buttons. The top button is labelled Build Netlify Preview and the bottom button is labeled Open Netlify.

    Build a CMS preview workflow for your Jamstack site

    22 Feb 2022 10 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

    • 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 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 Contentful C logo in blue, yellow and red.
    • A yellow square with the black letters JS at the bottom right.
    An illustration of web browser windows, the GraphQL logo, the Grammarly logo and a video embed representation.

    Rich Text field tips and tricks from the Contentful DevRel team

    26 May 2021 4 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.
    • 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 illustrated image of a number screens covered in different type of content assets, representing linked asset entries

    Exploring linked entries and assets in Contentful with JavaScript via REST and GraphQL

    13 Apr 2021 7 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