Skip to main content
whitep4nth3r logo whitep4nth3r

Blogs and tutorials

Filter posts

    • 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.
    Front and back sleeve covers of the Sony T-120 Dynamicron VHS tape.

    A responsive striped CSS gradient inspired by 80s VHS tapes

    22 Nov 2022 3 min read

    • A yellow square with the black letters JS at the bottom right.
    • An icon of a laptop with angled brackets on the screen.
    My Twitter profile in Brave browser, showing the install app popup available from the address bar, which asks you to confirm whether you want to install the Twitter PWA on that machine.

    Single-page applications, multi-page applications, the history of Twitter tech, and a failed project

    15 Nov 2022 8 min read

    • The Netlify logo in the green gradient.
    • A yellow square with the black letters JS at the bottom right.
    • An icon of a laptop with angled brackets on the screen.
    Personalization with Netlify Edge Functions plus HTTP referer header — white text on a blue gradient background

    Personalize your static site based on a previous site referral

    25 Oct 2022 10 min read

    • A yellow square with the black letters JS at the bottom right.
    Me with my hands on my head, looking a little confused, with the text I changed my mind, and an embarrassed emoji.

    I changed my mind about writing new JavaScript frameworks

    3 Oct 2022 4 min read

    • 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 CSS3 logo featuring a white 3 at the centre of a blue shield shape.
    Screenshot of dark mode google search results showing the link to the top site I have visited is purple, and the second site in the list which I have not visited, which is blue. Dev tools is open and shows the anchor visited styles coming from the stylesheet.

    What's the difference between : and :: in CSS?

    31 Aug 2022 3 min read

    • The Netlify logo in the green gradient.
    • An icon of a blank piece of paper with the bottom right corner turned up.
    • A white triangle representing the Vercel logo.
    next.js plus netlify equals star eyes emoji

    Rewrite HTML and transform page props in Next.js with Next.js Advanced Middleware

    24 Aug 2022 7 min read

    • 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