Colby Fayock

Posts

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

  • Uploading Files in React from a Form with Drag and Drop

    Uploading files can be a bit tricky, particularly if you want your visitor to select a file and upload it from a form. How can we easily allow our visitors to select the file they need, even add some drag and drop, and create a seamless experience for sending FormData? Uploading files in React When...

  • How to Improve Integration Tests with AI in Next.js with Playwright & Applitools

    Integration tests are one of the most reliable methods to harden your app, but it’s missing one thing… what the visitors are actually seeing in the UI! How can we use Visual Regression Testing to level up our integration tests and gain confidence in our work? We’ll take a look at Applitools Eyes and how...