Colby Fayock
Posts
Exploring GitHub Copilot X: AI-Powered CLI Commands and More
GitHub recently released Copilot X, which brings even more AI-powered goodness to the tools you use beyond the code editor. This includes being able to use Copilot for automatically adding tags to your pull requests or AI-powered docs that scope your searches to the actual documentation that you’re trying to look up answers for, including...
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...
How to Optimize Images with Responsive Sizes & AI Cropping in Next.js with 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...
How to Generate Video Thumbnails On-the-Fly & Add Hover Preview Effects with Cloudinary
Building engaging experiences on the web means building excitement and adding interactions with ways to delight your visitors. Thumbnails with hover effects are one way to help give sneak peaks for videos, but you need to have all of those assets for your video. How can we auto generate these effects on the fly with...
How to Create an Image Placeholder Service API with Cloudinary & Netlify Functions
Building the web is hard. The web revolves around content, but when building things, we might not have the content yet! To solve this, let’s build a custom image placeholder service with serverless APIs so we can carefully craft our experiences while waiting for our content to be delivered. What is an Image Placeholder Service?...
How to Update Static Content in Next.js Automatically with Incremental Static Regeneration (ISR)
Having a Headless CMS gives us a lot of flexibility for how we build apps and display content, but with our frontend decoupled from our backend, it won’t automatically stay up to date. To fix this, we can use Next.js Incremental Static Regeneration to keep our content fresh with configurable cache invalidation. What is a...