Skip to main content
whitep4nth3r logo whitep4nth3r

Blogs and tutorials

Filter posts

    • An icon of angled brackets with a forward slash in the middle.
    • A white triangle representing the Vercel logo.
    A code example of a Next.js jsconfig.json file, showing how to define absolute paths in your files.

    How to avoid using relative path imports in Next.js

    11 Jul 2021 1 min read

    • An icon of angled brackets with a forward slash in the middle.
    • A white triangle representing the Vercel logo.
    A screenshot of the reset-next.sh gist in GitHub.

    How I set up my new Next.js projects with a handy bash script

    8 Jul 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 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

    • 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 CSS3 logo featuring a white 3 at the centre of a blue shield shape.
    A YouTube thumbnail, showing a screenshot of a live stream with me on the right, and the text WHAT IS BEM in a large font.

    What is BEM in CSS?

    10 May 2021 4 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.
    • 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

    • 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.
    A YouTube thumbnail showing a screenshot from a live stream with the words NODE MODULES?! and the whitep4nther logo

    How to build, test and release a node module in ES6

    10 Apr 2021 5 min read

    • An icon of a cloud with an up arrow at the centre.
    • The NodeJS logo in white, featuring the letters JS outlined by a hexagon.
    • A yellow square with the black letters JS at the bottom right.
    A screenshot of one of my tweets that shows the twitter large summary card open graph image

    3 ways to use Puppeteer and Node.js to screenshot web pages and generate Open Graph images for socials

    17 Mar 2021 6 min read