Skip to main content
whitep4nth3r logo whitep4nth3r

learn things

Blog posts and tutorials

I write and live stream about front end development. Read tutorials and quick tips on HTML, CSS, JavaScript and Jamstack.

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 from the W3C Feed Validation Service that shows the dates on the thing of the day RSS feed are incorrect. The highlighted message states that pubDate myst be an RFC-822 date-time.

    How to format dates for RSS feeds (RFC-822)

    21 Mar 2022 2 min read

    • The pink Jamstack logo that features a blocked white J shape on a pink background.
    The women of jamstack logo on a pink and orange gradient background.

    Unicorn Instagram: Catch up on the launch of Women of Jamstack

    17 Mar 2022 1 min read

    • An icon of angled brackets with a forward slash in the middle.
    A terminal window showing the command dam running. It shows output that results in the branch refactor-youtube-call being deleted.

    How to delete all merged git branches with one terminal command

    7 Mar 2022 1 min read

    • An icon of a laptop with angled brackets on the screen.
    • The Netlify logo in the green gradient.
    A screenshot of whitep4nth3r.live, showing a terrible under construction GIF, a sparkly background, a twitch player embed, and a simulated scrolling marquee.

    Why you should ship your silly side projects

    4 Mar 2022 5 min read

    • The pink Jamstack logo that features a blocked white J shape on a pink background.
    • Eleventy logo shown as the number 11 + t y.
    A youtube thumbnail featuring the headline Let's YOLO deploy, my with my arms in the air outlined in a pink and orange gradient, the prototype website in the background, and the eleventy and netlify logos.

    Watch the Women of Jamstack prototype get built and deployed in under 7 minutes

    1 Mar 2022 1 min read

    • 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 Netlify logo in the green gradient.
    • An icon of a cloud with an up arrow at the centre.
    A screenshot showing the new build hook has been added.

    How to deploy your Netlify site with an Elgato Stream Deck

    15 Feb 2022 4 min read

    • An icon of a laptop with angled brackets on the screen.
    A screenshot of Google Lighthouse showing the same article with a canonical link, but this time with an SEO score of 100%.

    How I improved your Google Lighthouse SEO score with a lot of research and one quick PR

    13 Feb 2022 3 min read

    • 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