Tutorials

You don‘t need client-side JavaScript to adapt and localize dates and times according to timezone — use timezone data in Netlify Edge Functions with JavaScript native Date()!

Learn how to use Netlify Edge Functions to personalize static HTML pages based on the HTTP referer header.

Learn how to intercept and rewrite the response of a Next.js statically generated page and transform page props at the edge with Next.js Advanced Middleware from Netlify.

Personalization and shipping less JavaScript to the browser are hot topics in 2022, and with Netlify Edge Functions, you can achieve dynamic personalization with no client-side JavaScript — resulting in a great developer experience, and an even better end-user outcome. Check out the video tutorial and accompanying walk-through.

How many times have you forgotten to review your Google Lighthouse scores before you’ve pushed out a feature? You’re in good hands with Netlify and Lighthouse Score Visualizations.

Learn how to 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.

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!

Add extra metadata to the head tag in your web pages — such as reading time and author — to show richer previews in Slack when your link is unfurled.

The RSS feed lives on! But I've always found it difficult to Google for the correct date format required for RSS feeds (RFC-822). Here's a selection of links, guidance and code snippets for future me — and you!

In this article we're going to learn how to preview your draft content stored in Contentful by building a custom app that builds a preview branch of your static site. And the good news is — this approach could work for any static site, hosted on any platform, powered by any CMS!

I often use my Elgato Stream Deck to open URLs in my browser. And this got me thinking — what if I could kick off a site build on Netlify at the press of a button? And as it turns out, we can do this with a little serverless function! Let’s take a look.

You don't need JavaScript to build accordions! Here's how to harness the power of native HTML and build an accordion with just four lines of code.

Netlify allows you to manage environment variables that you can use in serverless functions. But there may be times when your environment variables exceed the limit of 256 characters! Here’s how you can use a Netlify build plugin to use longer environment variables in your functions.

AVIF claims to offer 30% better compression than current alternatives such as WebP. It’s optimized for the web, designed with a low computation footprint, and what’s more — it’s open source. But should you be using AVIF? As usual, it depends! And if you'd like to try it out, here's a complete guide on how to serve responsive images in multiple formats to the browser using the HTML picture element.

One of the things I love about GraphQL is how straightforward it is to get up and running with little to no experience. But how can you make sure your GraphQL queries are safe from nasties? Let’s find out.

In this post, we’re going to build an app that generates a personalized image of a ticket to share on socials using Cloudinary and Next.js so you can encourage your event attendees to share their tickets for your next virtual event!

In this video I'm joined by Ebonie (metalandcoffee_) — web developer, Metal DJ and Twitch streamer — where we set up a new project in Next.js to curate music recommendations using the Spotify API.

By the time I had written 15 blog articles on my website, it was getting a little tricky to find what I was looking for in a hurry! So I set out to implement search functionality on my blog.

Do you want to filter your blog posts by linked topics such as “javascript” or “tutorial” via GraphQL? Check out this quick guide that shows you how to get the data you need using the linkedFrom field in your query — it’s pretty nice!

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.

Everyone uses the web differently. Here's how to make sure your website respects font size preferences specified in browser settings using two important CSS concepts.

Confused about when to use aria-label for #a11y? Let's look at one of the most important ways to use aria-labels in your HTML to ensure your website provides contextual information to screen-readers and assistive technologies.

In this post, we’re going to build a set of article list pages that display a number of blog post summaries per page — fetched from the Contentful GraphQL API at build time with Next.js.

Take a deep dive into rendering linked assets and entries in the Contentful Rich Text field using both the REST and GraphQL APIs.

Over the last couple of weeks I’ve had incredible fun building the random code generator live on Twitch. At the time of writing this post, I’ve also merged over 70 pull requests into the repository for the application on GitHub. This got me thinking — what if people could use the same silly random code on their own applications to create even more lols on the web?

Harness the power of a tool called Puppeteer to take screenshots of browser pages and generate dynamic images to share on your social media accounts. Let’s take a look!

After I built my first project with Contentful, I had no idea people would actually want to follow my content using their favorite RSS reader (thanks, Stefan Judis!). So I set out to learn how to generate an RSS feed for my microblog that’s built with no front-end frameworks.

If you’re a developer or technical writer who publishes content on the internet, you’ll want to make sure your code examples are presented beautifully for your audience to consume. But how do you ensure your code blocks adhere to Web Content Accessibility Guidelines (WCAG) standards?

Learn how to build a lightweight microblog with Contentful and vanilla HTML, CSS and JavaScript.