Colby Fayock
Colby FayockPosts
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...
How to Use AI to Generate a Custom Pokémon with OpenAI ChatGPT & DALL-E
AI is here and as developers, we need to use it to empower us in our work. How can we use tools like the OpenAI SDK with generative images and language models to create a completely custom person or character? What is OpenAI? OpenAI is a currently non-profit organization focused on AI research. They’ve made...
How to Build Search for a Serverless Database with Aggregations Using Xata in Next.js
Databases are a critical, sometimes painful, component of a website or app. We need a way to store information to build personalized experiences, but databases can be complex and tricky to pull the data we need efficiently. Enter Xata, which takes a new approach storing data automatically in multiple types of stores (relational DB, search/aggregations...
How to Build React Apps Faster with Codux Visual IDE
Writing code and making it look great can be a challenge when you’re stuck copy and pasting styles from your design tool to your IDE. So why not let your design tool code for you? Disclaimer: This post is sponsored by Codux. Learn more about sponsored content. What is Codux? Codux is Visual IDE that...
Optimize Images in Next.js Next Cloudinary
Optimizing images is a critical part of building great experiences for the web, but what else can we do for maximum performance? We’ll use Next Cloudinary to automatically optimize images, serve them responsively, and dynamically crop them with AI to deliver the best experience we can for our visitors. What is Next Cloudinary? Next Cloudinary...
How to Add Passwords Authentication and Login in Next.js with Clerk
Passwords are becoming a thing of the past, where using social logins or emails gives your visitors a simpler and safer way to log in. But that ultimately comes with a lot of complexities, where we can instead use Clerk to manage it all in one easy-to-use SDK. Disclaimer: This post is sponsored by Clerk...
How to Optimize & Dynamically Resize Images in Astro with Cloudinary
Astro brings high performance to the web development world, but what about all of your images? How can we reduce the amount of pixels we’re sending to our visitors without sacrificing quality using Cloudinary’s automatic image optimization? What is Astro? Astro is a web framework that allows developers to build highly performance websites. They ship...
How to Create a NextAuth.js Custom Adapter with HarperDB & Next.js
NextAuth.js has easy out-of-the-box authentication, but if you want to BYOD (bring your own database), your stuck with a few existing Adapters or figuring our your own solution. How can we build a Custom Adapter so we can persist our authentication sessions with a performant database like HarperDB? Disclaimer: This post is sponsored by HarperDB...