React

Posts

  • How to Use the GitHub GraphQL API to Add Your Pinned Repositories In Next.js & React

    OSS projects can be hard work and when you’re spending your time working on them, you want to be able to proudly display those projects. While GitHub has a Pinned mechanism, you would need a custom solution to do the same for your own website. How can we instead use the GitHub GraphQL API to bring our Pinned Repositories to our website?

  • How to Add a Dynamic Table of Contents to Static HTML in React with Rehype

    It’s common to see content managed in a headless CMS available as static HTML, which in the land of JavaScript frameworks can seem somewhat limiting. How can we process and transform that HTML ourselves with tools like rehype, providing a richer experience for our visitors? Why do we want to process HTML? Often when we’re...

  • How to Add Custom Dynamic Favicons in React & Next.js

    Browsers ship with a ton of ways to make your web app your own. With CSS, HTML, and JavaScript, we can do whatever we want within the walls of the browser tab. But it doesn’t include a ton of ways to customize the outside of that experience except tools like favicons, which are almost as old as the web itself! How can we take advantage of favicons in the modern world of React and Next.js?

  • How to Use Browser Event Listeners in React for Search and Autocomplete

    The web (mostly) revolves around interactions, where people might be trying to accomplish a task or check in on something. As developers, we need a way to hook into these interactions regardless of the tools we use. While React gives us a lot of help with this out-of-the-box, how can we break free to leverage the full APIs of browsers?

  • How to Use Astro to Build React Apps without JavaScript

    In a rapidly changing JavaScript-based world, it seems like there’s a new thing to learn every day, but not everything has clear promise in the value it’s able to bring to the dev community. Enter Astro, coming from the team that brought you Snowpack, with the ultimate goal of shipping less JavaScript.

  • How to Send Emails with SendGrid and Next.js Serverless Functions for a Contact Form

    Being able to communicate with others is a critical component of what makes people and businesses collaborate on the web. That usually starts with having some kind of form or interaction that triggers a notification or email. How can we use SendGrid to make sure those emails get delivered?

  • How to Use Cloudinary Images in Next.js with Blurred Placeholders

    Images are a large part of how the web is made. It creates beautiful and interesting things that makes our experiences dynamic. But too much of that, especially when not optimized, can create bad experiences, with slow loading pages. That’s where Next.js and Cloudinary step in to provide powerful optimizations and rich dynamic images.

  • How to run Visual Regression Testing on a Next.js App with Cypress and Applitools

    A critical component of any development project is the tests that make sure that project is always doing exactly what it’s supposed to be doing. There are a ton of testing tools available to us, but not all of them test what someone actually experiences. How can we use Applitools to visually test our project and make sure it’s actually working right?

  • How to Fetch GraphQL Data in Next.js with Apollo GraphQL

    Next.js has been steadily growing as a must-have tool for developers creating React apps. Part of what makes it great is its data fetching APIs to request data for each page. But how can we use that API to make GraphQL queries for our app?