Skip to main content
whitep4nth3r logo whitep4nth3r

posts about web dev

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.

    • An icon of angled brackets with a forward slash in the middle.
    • An icon of a laptop with angled brackets on the screen.
    git reset --soft INITIAL_COMMIT_HASH git add dot git commit dash m Initial commit git push dash dash force in a mini terminal

    Rewrite your git history in 4 friendly commands

    5 Sep 2022 4 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

    • An icon of a laptop with angled brackets on the screen.
    • An icon of angled brackets with a forward slash in the middle.
    Screenshot of a link shared in Slack showing the title, description, author, reading time and image preview.

    Level up your link previews in Slack

    29 May 2022 3 min read

    • An icon of a laptop with angled brackets on the screen.
    A screenshot of nojson.dev in plain HTML. The text reads In a move considered revolutionary by many, this site has been delivered straight to your device with pure, unadulterated HTML. Our exclusive method is called NoJSON and is able to deliver just HTML over the wire. They said it couldn't be done! - Internet People

    HTML is all you need to make a website

    4 Apr 2022 3 min read

    • Eleventy logo shown as the number 11 + t y.
    • A white triangle representing the Vercel logo.
    • An icon of a laptop with angled brackets on the screen.
    • The pink Jamstack logo that features a blocked white J shape on a pink background.
    A lighthouse report showing a score of 100 for performance, accessibility, best practises and SEO.

    How I massively improved my website performance by using the right tool for the job

    29 Mar 2022 10 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 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

    • 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

    • 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 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.
    • 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 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 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

    • 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