Skip to main content
whitep4nth3r logo
Posts tagged

Tutorials

  1. 12 Dec 2022

    How to get the user’s timezone in JavaScript with Edge Functions

    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()!

    Tutorials 4 min read →
  2. 25 Oct 2022

    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.

    Tutorials 10 min read →
  3. 24 Aug 2022

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

    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.

    Tutorials 7 min read →
  4. 11 Aug 2022

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

    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.

    Tutorials 8 min read →
  5. 24 Jul 2022

    How to view Google Lighthouse scores for your site in Netlify

    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.

    Tutorials 2 min read →
  6. 12 Jun 2022

    How to deploy an Astro site

    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.

    Tutorials 9 min read →
  7. 8 Jun 2022

    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!

    Tutorials 5 min read →
  8. 29 May 2022

    Level up your link previews in Slack

    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.

    Tutorials 3 min read →
  9. 21 Mar 2022

    How to format dates for RSS feeds (RFC-822)

    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!

    Tutorials 2 min read →
  10. 22 Feb 2022

    Build a CMS preview workflow for your Jamstack site

    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!

    Tutorials 10 min read →
  11. 15 Feb 2022

    How to deploy your Netlify site with an Elgato Stream Deck

    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.

    Tutorials 4 min read →
  12. 11 Feb 2022

    How to build an HTML-only accordion — no JavaScript required!

    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.

    Tutorials 2 min read →
  13. 18 Jan 2022

    How to use really long environment variables in Netlify functions

    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.

    Tutorials 4 min read →
  14. 29 Nov 2021

    How to load responsive images in AVIF and WebP using the HTML picture element

    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.

    Tutorials 13 min read →
  15. 21 Oct 2021

    TIL: How to use GraphQL variables to give my queries type safety

    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.

    Tutorials 4 min read →
  16. 7 Sep 2021

    How to build a personalized image social sharing app with Cloudinary and Next.js

    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!

    Tutorials 11 min read →
  17. 4 Aug 2021

    A Next.js complete beginner tutorial using the Spotify API

    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.

    Tutorials 1 min read →
  18. 1 Jul 2021

    How to add Algolia InstantSearch to your Next.js application

    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.

    Tutorials 9 min read →
  19. 14 Jun 2021

    How to filter entries by linked references in GraphQL

    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!

    Tutorials 4 min read →
  20. 27 May 2021

    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.

    Tutorials 4 min read →
  21. 16 May 2021

    How to make your font sizes accessible with CSS

    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.

    Tutorials 3 min read →
  22. 3 May 2021

    When to use aria-labels in your HTML

    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.

    Tutorials 3 min read →
  23. 22 Apr 2021

    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 — fetched from the Contentful GraphQL API at build time with Next.js.

    Tutorials 13 min read →
  24. 13 Apr 2021

    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.

    Contentful 9 min read →
  25. 10 Apr 2021

    How to build, test and release a node module in ES6

    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?

    Tutorials 5 min read →
  26. 17 Mar 2021

    3 ways to use Puppeteer and Node.js to screenshot web pages and generate Open Graph images for socials

    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!

    Tutorials 6 min read →
  27. 8 Mar 2021

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

    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.

    Tutorials 5 min read →
  28. 26 Feb 2021

    How to make your code blocks accessible on your website

    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?

    Tutorials 5 min read →
  29. 5 Feb 2021

    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.

    Tutorials 9 min read →