Colby Fayock

Posts

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

  • How to Add Webcam Photo Filters & Effects in React with Cloudinary

    Apps like Instagram, Snapchat, and TikTok made adding fun filters to your photos easy. But what if you wanted filters in your own app? We can use Cloudinary with pre-built and custom filters on top of using existing device’s webcams to liven up the experience for our customers. What are photo filters? If you’ve used...

  • How to Trigger a Function when Scrolling to an Element in React Intersection Observer

    Whether we’re trying to delay loading heavy resources or trying to add some delight to our app experience, being able to trigger functionality after a visitor scrolls to a certain point is handy tool in our belt. But what do you track and how do you track it? How can we detect if someone scrolled...

  • How to Automatically Tag & Categorize Images Using AI with Google Vision & Cloudinary

    Images and video are a great way to create visual experiences, but when dealing with large amounts, it can be difficult to manage without tools to provide things like searchability. To help, we can use the power of AI, to categorize and label our media as we import them into our project with tools like...

  • How to Authenticate Spotify Web API Requests in Next.js with Netlify API Auth

    The web is full of awesome APIs that we can use to add feature sto our apps, but often using those APIs includes a long process of registering an app and figuring out authentication so you can simply make a request. With Netlify’s new API Authentication, we can easily enable third party services and instantly...

  • How to Generate Personalized Social Media Cards for Landing Pages with Next.js & Cloudinary

    You’ve likely seen conference websites or other apps that dynamically create images and social cards based on your registration. It’s a great way to personalize an experience for an individual, especially when sharing online. What’s behind the magic of the dynamic social cards and how can we build landing pages with our own dynamic images...

  • How to List & Display Cloudinary Image Resources in a Gallery with Next.js & React

    There are variety of services that let us upload an image and see the result, but what if we want to view all of the images we’ve uploaded over time or provide a custom dashboard for managing those the images? Managing images on the web Whether you’re a developer uploading images for your website or...

  • How to Personalize Content & Jamstack Web Experiences with Uniform & Next.js

    Building apps on the Jamstack gives us fast and reliable apps, but just because our front end may be static, doesn’t mean it can’t be dynamic. How can we use Uniform to give the control of content back to those who actually manage the content and add a personalization layer to our Jamstack apps with...

  • How to Optimize Images on Netlify with the Cloudinary Build Plugin

    Netlify makes building and deploying Jamstack apps super easy, but without additional tools, your images are going to get deployed “as is”, leaving lots of potential room for saving precious bytes. Instead, we can use the Cloudinary Netlify Plugin and get automatic optimization and modern formatting to make sure we’re delivering as great and lean...