Colby Fayock

Posts

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

  • How to Programmatically Upload Images to Cloudinary in React & Next.js

    Image and asset managers like Cloudinary give you a lot of power in being able to automatically optimize and transform images, but when building an app, you can’t expect each user to upload manually in your dashboard. How can you share that power and give your visitors the ability to upload their own images from...

  • How to Create Thumbnail Images Using Face Detection with Cloudinary

    Creating a gallery of images on a page can be trivial, but what if you don’t have control over how the images are created? Ending up with different sizes and formats can turn a good looking gallery into a mess. Instead, we can use Cloudinary image transformations and Face Detection to make sure we’re always...

  • How to Schedule Daily Email Reports with GitHub Actions, Gmail, & Cron

    GitHub Actions are a great way to automate our daily code tasks, but what about that report you have to generate every day for your boss’s boss? How can we use GitHub actions and cron to generate and email a daily report? What are GitHub Actions? GitHub Actions are configurable tasks that run a set...

  • How to Create CSS Custom Properties That Dynamically Update with React & JavaScript

    CSS variables have been around with tools like Sass, but only recently have they become native to CSS. Now that we have them available right in our browsers, how can we use JavaScript and tools like React to dynamically update the values? What are CSS Custom Properties? tl;dr they’re variables! They’re the CSS Spec’s way...

  • How to Export Sass Variables to JavaScript with Next.js

    Building web apps with Sass helps to give you CSS superpowers, but it’s another tool where you typically have to manage another set of configurations and settings outside of JavaScript. How can we make both Sass and a Next.js JavaScript app play nicely so we only have to define those configurations in one spot? What...