Why don’t we talk about minifying CSS anymore? 🔗
Remember Grunt files? [...]
whitep4nth3r.com RSS Feed
Posts
Your background images might be causing CLS 🔗
I broke the first rule of preventing CLS. Shame on me. [...]
How I fixed my brutal TTFB 🔗
I was EMBARRASSED. [...]
What is INP and why you should care 🔗
Your website performance is now trash until you optimize for INP. [...]
My blog post workflow 🔗
Tools, apps, workflow, brain stuff. [...]
The future of Jamstack is anti-capitalist 🔗
Down with capitalism. - Mike Neumegen [...]
Ramblings about JavaScript scope, weird errors and frameworks 🔗
I did learn the thing. But I forgot to remember the thing. [...]
How to deal with API rate limits 🔗
API rate-limiting is a minefield. Why are there no standards? [...]
Entertainment as Code 🔗
Learn about streaming live coding, and how writing silly code in front of a live audience is a powerful (and hilarious) way to build community. [...]
Twitter ruined your link previews: here’s how Cloudinary can help 🔗
Learn how to overlay text on your Open Graph images using the Cloudinary API and SDKs. [...]
How to fix error: invalid character in entity name in RSS feeds 🔗
My RSS feed was broken for OVER A WEEK because I used an invalid character in the XML. [...]
Fallbacks for HTTP 404 images in HTML and JavaScript 🔗
What if an image doesn’t exist anymore? What if someone accidentally deleted an image in your CMS? How do you detect and deal with this? [...]
Everything I install and set up on a new MacBook as a web developer 🔗
Here are the developer tools, browsers, utility apps and other useful things I install on a new dev machine to help productivity. [...]
A story about HTTP status codes and why you should read documentation 🔗
Recently, I wrote some bad code. But this highlighted the importance of correct HTTP status codes, and how I should really read documentation. [...]
Using hooks to monitor and error track with Sentry when self-hosting Directus 🔗
Learn how to set up Sentry monitoring and error tracking for your self-hosted Directus project by building custom hooks. [...]
How to use jQuery with Astro 🔗
Understanding how to use jQuery in an Astro project was hard to Google. So I wrote my own guide for you and my future self. [...]
From LCP to CLS: Improve your Core Web Vitals with Image Loading Best Practices 🔗
Learn all about image lazy loading and how it can help improve performance, UX and core web vitals. [...]
5 reasons you should hire me as your next developer experience engineer 🔗
I’m excited to be looking for my next role as a Developer Experience Engineer. Here are five reasons why you should hire me. [...]
How I deploy my website using my Apple Watch 🔗
TL:DR; a serverless function and build hook on Netlify, and an Apple Shortcut. [...]
The best light/dark mode theme toggle in JavaScript 🔗
Learn how to build The Ultimate Theme Toggle™️ for your website using JavaScript, CSS custom properties, local storage and system settings. [...]
A/B test CMS authored content with Netlify Edge Functions 🔗
Learn how to run an A/B test using content from your CMS and Netlify Edge Functions. [...]
How to split traffic and A/B test different page layouts on the same URL 🔗
Learn how to split traffic for A/B testing between different page layouts without changing the URL using Netlify Edge Functions. [...]
The universal CSS * selector isn't actually universal 🔗
For my ENTIRE career I have been living with an enormous misconception: the universal CSS selector doesn't *actually* select EVERYTHING. [...]
Hide text in CSS pseudo elements from screen readers with this one weird trick 🔗
Learn how to hide decorative text generated by CSS from screen readers, so that your weird designs don't interrupt the flow of the text. [...]
The Acronyms of Rendering on the Web 🔗
Learn about different types of rendering on the web, and how it impacts user experience, site performance, and SEO. [...]
Improve E-commerce Site Performance with Rendering Strategies 🔗
Learn how to optimize UX, site performance and SEO by taking a strategic approach to how you render different pages of your e-commerce store. [...]
Make time 🔗
I used use a week of PTO to see what tips and tricks I could experiment with to try and fix my life. Here’s how it went. [...]
We actually need more JavaScript frameworks 🔗
Join me as I share my weird and winding journey through the JavaScript framework landscape. [...]
How do I get started in web development? 🔗
Asking “How do I get started with web dev?” is like asking “How do I get started with cooking?” [...]
2022: what I made, what I learned, and what I didn't do 🔗
Let's take a look back at 2022: what I made, what I learned — both professionally and personally — and what I didn't get around to. [...]
How to get the user’s timezone in JavaScript with Edge Functions 🔗
You don‘t need client-side JavaScript to localize dates and times according to timezone — use timezone data in Netlify Edge Functions. [...]
A responsive striped CSS gradient inspired by 80s VHS tapes 🔗
Create a responsive, horizontal-striped CSS gradient inspired by 80s VHS tapes using CSS custom properties and a linear gradient. [...]
Single-page applications, multi-page applications, the history of Twitter tech, and a failed project 🔗
After I changed my mind about writing new JavaScript frameworks, I paused development on a new project, What the Framework (WTF). Here's why. [...]
Personalize your static site based on a previous site referral 🔗
Learn how to use Netlify Edge Functions to personalize static HTML pages based on the HTTP referer header. [...]
I changed my mind about writing new JavaScript frameworks 🔗
Maybe you *should* write a new JavaScript framework. And here’s why. [...]
Rewrite your git history in 4 friendly commands 🔗
Did you make a series of unfortunate commits? Learn how to clean up your nonsense. [...]
What's the difference between : and :: in CSS? 🔗
I spent years Googling this question before the information stayed in my brain. Sound familiar? Then this post is for you. [...]
Rewrite HTML and transform page props in Next.js with Next.js Advanced Middleware 🔗
Learn how to use Next.js Advanced Middleware from Netlify. [...]
Add personalization to static HTML with Netlify Edge Functions — no browser JavaScript required 🔗
Check out the video tutorial and accompanying walk-through. [...]
We're all living on it. But what exactly is The Edge? 🔗
What is The Edge? What are Edge Functions? And what impact does this new technology have on the Jamstack and the web? [...]
How to view Google Lighthouse scores for your site in Netlify 🔗
Install the integration. Check your scores. Profit. [...]
Should I write a new JavaScript framework? 🔗
Do you often ask yourself, should I write a new JavaScript framework? Here's some things you should consider, and some tips to get you started. [...]
How to deploy an Astro site 🔗
Deploy an Astro project as a static, server-rendered, or edge-rendered site, try out some Netlify templates, and learn how to deploy to Netlify. [...]
Build a business card CLI tool 🔗
Learn how to use Node.js, npm and npx to build a CLI tool to output a business card to the terminal. Bonus demo repository included! [...]
Level up your link previews in Slack 🔗
Add extra metadata to the head tag in your web pages to show richer previews in Slack when your link is unfurled. [...]
Light and dark mode in just 14 lines of CSS 🔗
Combine two CSS custom properties with a media query to get set up with light and dark mode in seconds. [...]
What is Jamstack? 🔗
Let's explore Jamstack, “Jamstack-adjacent” technologies, and how you can get started building on the Jamstack. [...]
We're all living on it. But what exactly is The Edge? 🔗
But what is The Edge? What are Edge Functions? And why does it matter? [...]
HTML is all you need to make a website 🔗
HTML-only websites are a controversial and divisive topic. But why? [...]
How I massively improved my website performance by using the right tool for the job 🔗
I rebuilt my website AGAIN with the aim of using as little JavaScript as possible to improve performance. Did I succeed? And what did I learn? [...]
How to format dates for RSS feeds (RFC-822) 🔗
Here's a selection of links, guidance and code snippets to help you format dates for RSS feeds (RFC-822). [...]
How to delete all merged git branches with one terminal command 🔗
Automate your git cleanup! Here's a shell function to add to your bashrc/zshrc file to delete all merged git branches in one command. [...]
Why you should ship your silly side projects 🔗
Let's take a look at what we learned building a very silly site for the Netlify Dusty Domains project in December 2021. [...]
A prototype is all you need to launch a site 🔗
Catch up on a Twitch live stream where I prototyped Women of Jamstack with 11ty and YOLO deployed it to Netlify on a custom domain. [...]
Build a CMS preview workflow for your Jamstack site 🔗
Learn how to preview your draft content stored in Contentful by building a custom app that builds a preview branch of your static site. [...]
How to deploy your Netlify site with an Elgato Stream Deck 🔗
Use a little serverless function to kick off a site build with a button. [...]
How I improved your Google Lighthouse SEO score with a lot of research and one quick PR 🔗
Why has Google Lighthouse been penalising us for canonical links on different domains? I set out to solve this conundrum once and for all. [...]
How to build an HTML-only accordion — no JavaScript required! 🔗
You don't need JavaScript to build accordions! Use HTML only and just four lines of code. [...]
Debug your CSS layouts with this one simple trick 🔗
Are you battling with layouts in CSS? Use this one line of CSS to help you debug what's up and get you back on the road to success. [...]
How to use really long environment variables in Netlify functions 🔗
Here’s how you can use a Netlify build plugin to use longer environment variables in your functions. [...]
An introduction to GraphQL and how to use GraphQL APIs 🔗
Here's everything I learned this year about GraphQL for anyone getting started. [...]
How to load responsive images in AVIF and WebP using the HTML picture element 🔗
A complete guide on how to serve responsive images in WebP and the new AVIF format where supported, using the HTML picture element. [...]
Contentful's Fast Forward 2021 Day 2 Keynote 🔗
Join Salma and Stefan Judis on a journey through time where they explore how content management and software development has evolved. [...]
TIL: How to use GraphQL variables to give my queries type safety 🔗
How can you make sure your GraphQL queries are safe from nasties? Let’s find out. [...]
Next.js Dynamic Routes with Contentful's GraphQL API — with Jason Lengstorf 🔗
In this episode of Learn with Jason, I teach Jason how to use Contentful’s GraphQL API to power Next.js dynamic routes. [...]
What is a REST API? 🔗
REST? API? What does it all mean? Let’s break it down. [...]
This box will change your life 🔗
Are you struggling with margins, paddings and layout in web development? Understanding the CSS box model will change your life. [...]
Ecommerce and Next.js on the Jamstack — with Colby Fayock 🔗
I sat down with Colby Fayock to chat about Next.js and how all of its features help enable developers to build great experiences on the web. [...]
How to build a personalized image social sharing app with Cloudinary and Next.js 🔗
Encourage your event attendees to share their tickets for your next virtual event! [...]
Why I love building with Next.js — a fireside chat with Cassidy Williams of Netlify 🔗
I joined Cassidy Williams to talk about the performance benefits of Next.js, and how developers can make the most of the JavaScript framework. [...]
What is an API? 🔗
Let's learn about application programming interfaces. [...]
A Next.js complete beginner tutorial using the Spotify API 🔗
I'm joined by Ebonie (metalandcoffee_) where we set up a new Next.js and Spotify API project to curate music recommendations. [...]
How to avoid using relative path imports in Next.js 🔗
Say goodbye to ../really/long/and/silly/paths/to/components in your Next.js application and define absolute imports with a jsconfig.json file. [...]
How I set up my new Next.js projects with a handy bash script 🔗
After I create a new Next.js application I run this bash script to prepare my app for development — just the way I like it. Give it a try! [...]
How to add Algolia InstantSearch to your Next.js application 🔗
Every content website needs a search box. [...]
How to prevent the collapse of society by building an accessible web 🔗
It’s 2031. Society, as we knew it in 2021, has officially collapsed. How do you ensure your website is accessible amidst a raging apocalypse? [...]
How to filter entries by linked references in GraphQL 🔗
Check out this quick guide that shows you how to get the data you need using the linkedFrom field in your query. [...]
How to use GitHub actions and Contentful webhooks to show your latest blog posts on your GitHub README 🔗
Want to show your latest blog posts on your GitHub README? Here's how I do it using the power of GitHub actions and webhooks in Contentful. [...]
How to make your font sizes accessible with CSS 🔗
Here's how to make sure your website respects font size preferences specified in browser settings using two important CSS concepts. [...]
What is BEM in CSS? 🔗
Did you change CSS somewhere and something unexpected happened somewhere else? I have the solution for you. [...]
When to use aria-labels in your HTML 🔗
This is one of the most important ways to use aria-labels so your code provides contextual information to screen-readers and assistive tech. [...]
Paginating your Contentful blog posts in Next.js with the GraphQL API 🔗
In this post, we’re going to build a set of article list pages that display a number of blog post summaries per page. [...]
Exploring linked entries and assets in Contentful with JavaScript via REST and GraphQL 🔗
An investigation into the inner workings of the Contentful REST API and GraphQL API. [...]
Rendering linked assets and entries in the Contentful Rich Text field 🔗
Take a deep dive into rendering linked assets and entries in the Contentful Rich Text field using both the REST and GraphQL APIs. [...]
How to build, test and release a node module in ES6 🔗
If you Google "build test release npm module" this is the top result. Cool, huh? [...]
3 ways to use Puppeteer and Node.js to screenshot web pages and generate Open Graph images for socials 🔗
Take screenshots of browser pages and generate dynamic images to share on your social media accounts. [...]
My Twitch live coding setup in OBS 🔗
I often receive questions about how I set up OBS to stream live coding on Twitch — so let’s take a look! [...]
How to generate an RSS feed for your blog with JavaScript and Netlify functions 🔗
On demand RSS feeds — a neat use for serverless functions. [...]
How to make your code blocks accessible on your website 🔗
How do you ensure your code blocks adhere to Web Content Accessibility Guidelines (WCAG) standards? [...]
How to build a lightweight microblogging site with Contentful, vanilla HTML, CSS and JavaScript 🔗
Learn how to build a lightweight microblog with Contentful and vanilla HTML, CSS and JavaScript. [...]
My non-traditional journey into tech and DevRel 🔗
Learn about what led Salma to DevRel and how she accidentally increased engagement in the Contentful Community by 200% on her first day. [...]
FAQs: Frequently Asked Questions 🔗
A list of questions I am frequently asked whilst I am live streaming on Twitch — and the answers. [...]
5 tips for leading teams with an empathy-first approach 🔗
Here's me trying to sum up my time as an engineering team lead as I move into DevRel in 2021. [...]
6 things I learned about streaming live coding in my first 6 weeks on Twitch 🔗
The most important part of your stream is YOU. [...]