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

    • The Netlify logo in the green gradient.
    • 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 cloud with an up arrow at the centre.
    Personalisation at the edge, with no client side JavaScript

    Add personalization to static HTML with Netlify Edge Functions — no browser JavaScript required

    11 Aug 2022 8 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

    • A yellow square with the black letters JS at the bottom right.
    White text on a black background which says should I write a new JavaScript framework

    Should I write a new JavaScript framework?

    22 Jun 2022 1 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

    • 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 terminal showing the command npx whitep4nth3r which has output a box with a list of links inside, the titles of the links are coloured with the brand colours, eg youtube is white text on a red background, and there's a little intro paragraph as well.

    Build a business card CLI tool

    8 Jun 2022 5 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

    • The CSS3 logo featuring a white 3 at the centre of a blue shield shape.
    • An icon of angled brackets with a forward slash in the middle.
    Two columns, the left said light mode in black on a white background, the right says dark mode in white on a black background.

    Light and dark mode in just 14 lines of CSS

    11 May 2022 3 min read

    • The pink Jamstack logo that features a blocked white J shape on a pink background.
    The Jamstack logo in which on a red to orange gradient background.

    What is Jamstack?

    10 May 2022 7 min read

    • The Netlify logo in the green gradient.
    • 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.
    A youtube thumbnail showing a screenshot of my stream in black and white, with a code example of an edge function and some emoji pointing hands. There is also the white panther logo and a netlify logo at jaunty angles.

    We're all living on it. But what exactly is The Edge?

    26 Apr 2022 7 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