React
Posts
How to Generate Personalized Social Media Cards for Landing Pages with Next.js & Cloudinary
By Colby Fayock
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 to share?
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?
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 a more dynamic and effective experiences?
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 your app?
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 optimally showing our media.
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?
How to Use the GitHub GraphQL API to Add Your Pinned Repositories In Next.js & React
OSS projects can be hard work and when you’re spending your time working on them, you want to be able to proudly display those projects. While GitHub has a Pinned mechanism, you would need a custom solution to do the same for your own website. How can we instead use the GitHub GraphQL API to bring our Pinned Repositories to our website?
How to Add a Dynamic Table of Contents to Static HTML in React with Rehype
It’s common to see content managed in a headless CMS available as static HTML, which in the land of JavaScript frameworks can seem somewhat limiting. How can we process and transform that HTML ourselves with tools like rehype, providing a richer experience for our visitors? Why do we want to process HTML? Often when we’re...
How to Add Custom Dynamic Favicons in React & Next.js
Browsers ship with a ton of ways to make your web app your own. With CSS, HTML, and JavaScript, we can do whatever we want within the walls of the browser tab. But it doesn’t include a ton of ways to customize the outside of that experience except tools like favicons, which are almost as old as the web itself! How can we take advantage of favicons in the modern world of React and Next.js?
How to Use Browser Event Listeners in React for Search and Autocomplete
The web (mostly) revolves around interactions, where people might be trying to accomplish a task or check in on something. As developers, we need a way to hook into these interactions regardless of the tools we use. While React gives us a lot of help with this out-of-the-box, how can we break free to leverage the full APIs of browsers?