Colby Fayock

Posts

  • How to Export Sass Variables to JavaScript with Next.js

    Building web apps with Sass helps to give you CSS superpowers, but it’s another tool where you typically have to manage another set of configurations and settings outside of JavaScript. How can we make both Sass and a Next.js JavaScript app play nicely so we only have to define those configurations in one spot? What...

  • How to Create Pages in Next.js with Static & Dynamic Data

    Next.js is a powerful web framework that allows developers to easily spin up new React applications, but what if we want to add data to our pages? We’ll look at how we can use the Next.js data fetching APIs to create both static and dynamic pages. Why is creating pages important in React? Before we...

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

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

  • How to Use Puppeteer to Automate Chrome in an API with Netlify Serverless Functions

    Automation typically includes purely code-based tasks that don’t even think about a browser, but some tasks need to interact and use the browser as a human would like performing a search on a site. How can we leverage tools that can automate the browser and pack it into a serverless API endpoint to make easily...

  • How to Test Serverless Functions with Jest & Next.js API Routes

    Tests are critical part of any codebase, making sure our application is behaving as expected, but how does that apply to testing APIs like Next.js serverless functions? While there are great tools like Postman that can make actual requests to an endpoint, how can we test the code that actually gets executed inside of the...

  • How to Make Twitter API Requests with NextAuth.js Session Tokens

    NextAuth.js makes adding authentication with providers like Twitter easy, but that doesn’t mean we automatically have access to use those providers’ APIs. How can we take advantage of the active session to interact with APIs like Twitter’s? What is NextAuth.js? NextAuth.js is an all-in-one solution for adding authentication to a Next.js application. If you followed...

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

  • How to Automate Deployments on Content Change in WordPress with WP Webhooks and Netlify

    WordPress and JavaScript-based frameworks like Next.js and Gatsby make powerful combos, delivering a great CMS editing experience with a fast and performant front end, but if we’re using WordPress headlessly, we don’t automatically have a mechanism to trigger a new deploy. How can we take advantage of web hooks to make sure our websites are...