Colby Fayock

Posts

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

  • How to Automate Code Linting in Next.js with ESLint & Husky Git Hooks

    As developers, we have a variety of code tasks that are all important steps to get to the end goal of delivering great apps. Linting for instance can help avoid bugs and save your team’s sanity for code style preferences. How can we take advantage of linting in our Next.js apps and even automate the...

  • 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. What is Astro?...

  • How to Add Custom Fields in Headless WordPress with ACF & WPGraphQL

    WordPress is King CMS for a reason. It provides a great editing experience and is well known for those who consider themselves technical or not. But with a default installation, the content you can manage is a bit limited. How can we extend that with custom fields via ACF and use that data when querying...

  • How to Authenticate Next.js Apps with Twitter & NextAuth.js

    Part of what makes the web a great place is the ability for developers to personalize content and app experiences to the person using it. How can we add authentication to a Next.js app to tailor those experiences for our visitors? What is authentication? Authentication is the process of identifying a person or entity and...

  • 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? What is SendGrid? SendGrid is an...

  • How to Source MDX Content in Next.js to Dynamically Create Pages for a Blog

    Markdown is a popular format for authoring. MDX takes that up a notch giving authors more tools to create interactive experiences. How can we take advantage of MDX in frameworks like Next.js to build projects with content sourced from MDX? What is MDX? MDX is a document format that allows people to write JavaScript and...

  • How to Manage SEO in Headless WordPress with Yoast SEO and WPGraphQL

    SEO is a critical part of any website or application. Without it, Google might not be able to find your page or it might not look right in search results or social platforms. How can we leverage popular WordPress plugin Yoast SEO using a headless WordPress instance with Next.js and WPGraphQL? What is SEO? SEO,...

  • How to Create a Headless WordPress Blog with Next.js WordPress Starter

    Blogs are a great way to get down your thoughts to help others learn, keep track of progress, or even to help reinforce an idea to help yourself learn. WordPress is a popular blog platform that’s been around for a while and Next.js is a modern popular web framework for building React apps. How can...