Colby Fayock

Posts

  • How to Build an AI Voice Translator in Next.js with Web Speech API & OpenAI

    As the world becomes more connected, it’s even more critical to be able to communicate in languages other than our own. Using simple browser APIs and tools like OpenAI’s GPT, we can create a custom translator app that translates whatever we say to a wide variety other languages. What is the Web Speech API The...

  • How to Style Active Links in Next.js App Router

    Nearly all websites have some form of navigation and a common pattern is styling the active link, or the link that represents the current page. This is typically simple with easy access to the current path, but how does that work with the Next.js App Router? Tip: We step through a bit of context before...

  • How to Build a Blog with Next.js App Router & Headless Hashnode

    One of the biggest pain points of building a blog is figuring out where to write and mange your posts. There is no shortage of Headless CMS options out there, so its important to figure out what makes them special, including a great UX and… one that promotes your blog for you? What is Hashnode?...

  • How to Share Selected Text in React with the Selection API

    Social sharing buttons are great for sharing a link, but it misses the interesting part that people want to share, the content! We can use the Selection API to read text selected on a page allowing our visitors to easily share any text from a page. Getting Text Selections in React with the Selection API...

  • How to Detect Clicks Anywhere on a Page in React

    Detecting clicks is a fundamental way to engage with your visitors on interaction. While it’s easy to detect clicking on something, what about clicking outside of it? Adding Event Handlers in React Often when working with interactions, you’re looking to detect a click or some kind of event directly related to a specific element. This...

  • How to Add an AI-Powered WYSIWYG Editor in React & Astro with Novel

    Writing content is hard enough, so you want to build a writing an editing experience that you or your client loves. Let’s see how we can easily add a beautiful WYSIWYG editor to a React app in minutes, complete with an AI assistant, with Novel. What is a WYSIWYG editor? A WYSIWYG editor, or What...

  • How to Create a Blog with Astro & Appwrite

    There are a lot of products for building a blog, but they often don’t leave a lot of room for flexibility for how you develop and manage your content. Instead, we can use an app platform like Appwrite to build a custom solution, including easily using a database to store and interact with our content...

  • How to Copy to Clipboard in React

    Code blocks and text inputs are great ways to show and interact with data, but they often fall short for giving visitors an easy way to copy what’s inside. Using the Clipboard API, we can easily set up a copy action to give our visitors a better user experience. Copying to Clipboard using the Clipboard...

  • How to Scroll to an Element in React

    Scrolling to an element or location on a page can help improve a user’s experience by directing them immediately to their area of interest, whether that’s deep in the page or simply back to the top of a page. To help with this, we can use native browser APIs right inside of React that allow...

  • How to Build Data Dashboards in React with Tremor & Tailwind

    Data runs the world, but to effectively use that data, you need a way to visualize it. How can we easily spin up beautiful data dashboards in React with Tremor? What is Tremor? Tremor is a component library built on top of popular CSS framework Tailwind that gives a set of building blocks that help...