Colby Fayock

Posts

  • 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. What is Passwordless Authentication? Passwordless authentication is...

  • 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 is a sponsored post by...

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

  • How to Generate BlurHash Placeholders with Cloudinary Custom Functions & Netlify

    Images help create visual experiences, but loading that media can slow page loads due to high file sizes. Instead we can take advantage of placeholder images like BlurHashed images to still deliver a great experience while deferring the loading of the full source. We’ll see how we can add custom processing to Cloudinary using BlurHash...

  • How to Automatically Optimize Headless WordPress Images and Videos with the Cloudinary Plugin

    Media optimization is a critical part of delivering performant apps, but when dealing with a headless CMS like WordPress, at what point do you integrate for a great developer experience? We can use the Cloudinary WordPress plugin to easily provide blanket optimization of any type of WordPress site, headless or not. Note: if you’re currently...

  • How to Detect Long Press Gestures in JavaScript Events in React 

    Interactions on the web are traditionally all about clicks, but then we had swipes, other gestures, and another option on click-like events: long press. How can we implement a long press interaction in our React apps without requiring native mobile tools? What is a long press? When dealing with a variety of devices, a click...

  • How to Save State to LocalStorage & Persist on Refresh with React.js

    React’s state APIs give developers great ways to maintain personalization or the items you have in your shopping cart, but once you refresh the page, they’re gone! How can we can we store those values for a customer’s session locally without having to worry about a database? What is React State? React is a popular...