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

    • The Twitch Glitch icon in purple and white.
    A screenshot of what I see in OBS when I am streaming live on Twitch

    My Twitch live coding setup in OBS

    13 Mar 2021 7 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 cloud with an up arrow at the centre.
    • An icon of a blank piece of paper with the bottom right corner turned up.
    • The Netlify logo in the green gradient.
    A screenshot of the thingoftheday.xyz RSS feed in an RSS reader

    How to generate an RSS feed for your blog with JavaScript and Netlify functions

    8 Mar 2021 5 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.
    A screenshot of the Colour Contrast Checker Chrome extension showing a failing colour contrast check

    How to make your code blocks accessible on your website

    26 Feb 2021 5 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.
    • The Netlify logo in the green gradient.
    A screenshot of the styled microblog page

    How to build a lightweight microblogging site with Contentful, vanilla HTML, CSS and JavaScript

    5 Feb 2021 9 min read

    • An illustration of a white coffee cup with two white steam lines coming from the top.
    A headshot of Salma wearing black on a red patterned background.

    My non-traditional journey into tech and DevRel

    3 Feb 2021 7 min read

    • The Twitch Glitch icon in purple and white.
    A headshot of Salma in a field with autumnal trees behind her. She is wearing a leather jacket, red moth sweatshirt, and sunglasses.

    FAQs: Frequently Asked Questions

    1 Jan 2021 2 min read