Clean code is every developers dream, but getting the can often lead to wasted time obsessing over changes or arguing over code style in a pull request. Instead, we can use a linter and formatter, which will give us our clean code nirvana, with a simple command. Let’s see how with Biome. What is a...
MDX is one of, if not, the most popular ways to manage content as a developer, but configuring an app to use it can prove to be a challenge. Let’s see how we can set up MDX in a Next.js App Router app. What is MDX? MDX is a content format that combines Markdown with...
Favicons are one of the basic building blocks of building a website and adding one isn’t anything new, but gone are the days where we’re forced to use .ico files, where instead, we can take advantage of formats like SVG to create adaptive experiences based on your visitors system appearance. What are Adaptive Images? An...
Pagination is a great way to improve the the way your visitors use your app, allowing them more easily get to the data the need. We’ll see how we can easily add a pagination component to our React app and even use Suspense to prevent it from impacting performance! What are we going to build?...
PDFs have given the world a common format for sharing documents and media in a way that is highly compatible among a wide variety of devices, but it can often be tricky to generate them programmatically. We’re going to explore some options for how we can generate a PDF using JavaScript in different environments. The...
Web scraping is a common technique to programmatically get valuable information from a website that might not have a publicly accessible API. Let’s see how we can easily build our own web scraper endpoint using Next.js App Router API Routes and Puppeteer. What is a Web Scraper? A web scraper is a tool that uses...
Modern tools allow you to build API endpoints right inside your framework with safe defaults to prevent cross-origin attacks. But what if you want to make a request from another host? What if you want to make sure it’s only one host, or a couple hosts, but not ALL hosts? Let’s see how we can...
Communication is critical to any product or service and while a single email blast might be straightforward, what if you wanted you wanted more control over how or when that email was being sent? Like based on when someone interacts with part of your app? Or different messages based on who they are? That sounds...
Modals aren’t anything new, but gone are the days that we need to install bloated libraries to one to our app. Instead, let’s see how we can drop in a new modal to a React app using the HTML Dialog element. What is modal or dialog? Modals and dialogs are similar UI patterns, but with...
Calendars run the world (at least mine), but constantly creating new events for the things you care about can be a pain, which is also true for your visitors adding your events to their calendar. So let’s fix that with an Add to Calendar button with dynamically generated calendar links. How can we dynamically generate...
Adding analytics to your website is critical for being able to have a better understanding of how your visitors use your app including gauging performance and finding usability issues. Let’s see how we can use Plausible, a privacy-focused analytics tool, to gain insights into our Next.js App Router apps. What is Plausible? Plausible considers itself...
Emails are one of the most impactful ways to communicate to an audience but it’s also one of the most challenging formats for developers to build consistent and great experiences. But now we have a tool in our belt that takes advantage of the UI framework we love, React, and brings it front and center...
Sitemaps and RSS feeds may feel like dated technology, but they’re critical components of making a blog or content-driven site discoverable. Luckily, Next.js makes it super easy in the App Router to get dynamic feeds set up. What is a Sitemap? A sitemap is ususally an XML document that includes a comprehensive list of links...
As the world becomes more connected, it’s even more critical to be able to communicate in languages other than our own. Using simple browser APIs and tools like OpenAI’s GPT, we can create a custom translator app that translates whatever we say to a wide variety other languages. What is the Web Speech API The...
Nearly all websites have some form of navigation and a common pattern is styling the active link, or the link that represents the current page. This is typically simple with easy access to the current path, but how does that work with the Next.js App Router? Tip: We step through a bit of context before...
One of the biggest pain points of building a blog is figuring out where to write and mange your posts. There is no shortage of Headless CMS options out there, so its important to figure out what makes them special, including a great UX and… one that promotes your blog for you? What is Hashnode?...
Social sharing buttons are great for sharing a link, but it misses the interesting part that people want to share, the content! We can use the Selection API to read text selected on a page allowing our visitors to easily share any text from a page. Getting Text Selections in React with the Selection API...
Detecting clicks is a fundamental way to engage with your visitors on interaction. While it’s easy to detect clicking on something, what about clicking outside of it? Adding Event Handlers in React Often when working with interactions, you’re looking to detect a click or some kind of event directly related to a specific element. This...
Writing content is hard enough, so you want to build a writing an editing experience that you or your client loves. Let’s see how we can easily add a beautiful WYSIWYG editor to a React app in minutes, complete with an AI assistant, with Novel. What is a WYSIWYG editor? A WYSIWYG editor, or What...
There are a lot of products for building a blog, but they often don’t leave a lot of room for flexibility for how you develop and manage your content. Instead, we can use an app platform like Appwrite to build a custom solution, including easily using a database to store and interact with our content...
Code blocks and text inputs are great ways to show and interact with data, but they often fall short for giving visitors an easy way to copy what’s inside. Using the Clipboard API, we can easily set up a copy action to give our visitors a better user experience. Copying to Clipboard using the Clipboard...
Scrolling to an element or location on a page can help improve a user’s experience by directing them immediately to their area of interest, whether that’s deep in the page or simply back to the top of a page. To help with this, we can use native browser APIs right inside of React that allow...
Data runs the world, but to effectively use that data, you need a way to visualize it. How can we easily spin up beautiful data dashboards in React with Tremor? What is Tremor? Tremor is a component library built on top of popular CSS framework Tailwind that gives a set of building blocks that help...
Uploading files can be a bit tricky, particularly if you want your visitor to select a file and upload it from a form. How can we easily allow our visitors to select the file they need, even add some drag and drop, and create a seamless experience for sending FormData? Uploading files in React When...
One of my favorite ways of interacting with Cloudinary is using the Node.js SDK. But how do you use Node inside of a React app? Up until now, it was quite challenging, but the game has changed with server components. In this blog post, we’ll learn how to use the Node SDK to build a...
Raycast is a powerful productivity tool that allows you to interact with your system, services, and applications right from a launcher. How can we extend these capabilities to boost our productivity for our own tasks? We’ll learn how we can use Raycast Extensions to create our own launcher capabilities using React. Getting Started with Raycast...
Integration tests are one of the most reliable methods to harden your app, but it’s missing one thing… what the visitors are actually seeing in the UI! How can we use Visual Regression Testing to level up our integration tests and gain confidence in our work? We’ll take a look at Applitools Eyes and how...
Have you ever used the Wayback Machine from the Web Archive? It’s an incredible tool that lets you access past versions of a website as a snapshot in history, complete with actual HTML, images, and more. In this tutorial, we’re going to build our own website archive that uses GitHub Actions to automatically take a...
AI is here and as developers, we need to use it to empower us in our work. How can we use tools like the OpenAI SDK with generative images and language models to create a completely custom person or character? What is OpenAI? OpenAI is a currently non-profit organization focused on AI research. They’ve made...
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...
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...
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...
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...
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...
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...
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...
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...
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?...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
Next.js is a powerful web framework that allows developers to easily spin up new React applications, but what if we want to add data to our pages? We’ll look at how we can use the Next.js data fetching APIs to create both static and dynamic pages. Why is creating pages important in React? Before we...
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...
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...
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...
Automation typically includes purely code-based tasks that don’t even think about a browser, but some tasks need to interact and use the browser as a human would like performing a search on a site. How can we leverage tools that can automate the browser and pack it into a serverless API endpoint to make easily...
Tests are critical part of any codebase, making sure our application is behaving as expected, but how does that apply to testing APIs like Next.js serverless functions? While there are great tools like Postman that can make actual requests to an endpoint, how can we test the code that actually gets executed inside of the...
NextAuth.js makes adding authentication with providers like Twitter easy, but that doesn’t mean we automatically have access to use those providers’ APIs. How can we take advantage of the active session to interact with APIs like Twitter’s? What is NextAuth.js? NextAuth.js is an all-in-one solution for adding authentication to a Next.js application. If you followed...
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...
WordPress and JavaScript-based frameworks like Next.js and Gatsby make powerful combos, delivering a great CMS editing experience with a fast and performant front end, but if we’re using WordPress headlessly, we don’t automatically have a mechanism to trigger a new deploy. How can we take advantage of web hooks to make sure our websites are...
As developers, we have a variety of code tasks that are all important steps to get to the end goal of delivering great apps. Linting for instance can help avoid bugs and save your team’s sanity for code style preferences. How can we take advantage of linting in our Next.js apps and even automate the...
In a rapidly changing JavaScript-based world, it seems like there’s a new thing to learn every day, but not everything has clear promise in the value it’s able to bring to the dev community. Enter Astro, coming from the team that brought you Snowpack, with the ultimate goal of shipping less JavaScript. What is Astro?...
WordPress is King CMS for a reason. It provides a great editing experience and is well known for those who consider themselves technical or not. But with a default installation, the content you can manage is a bit limited. How can we extend that with custom fields via ACF and use that data when querying...
Part of what makes the web a great place is the ability for developers to personalize content and app experiences to the person using it. How can we add authentication to a Next.js app to tailor those experiences for our visitors? What is authentication? Authentication is the process of identifying a person or entity and...
Being able to communicate with others is a critical component of what makes people and businesses collaborate on the web. That usually starts with having some kind of form or interaction that triggers a notification or email. How can we use SendGrid to make sure those emails get delivered? What is SendGrid? SendGrid is an...
Markdown is a popular format for authoring. MDX takes that up a notch giving authors more tools to create interactive experiences. How can we take advantage of MDX in frameworks like Next.js to build projects with content sourced from MDX? What is MDX? MDX is a document format that allows people to write JavaScript and...
SEO is a critical part of any website or application. Without it, Google might not be able to find your page or it might not look right in search results or social platforms. How can we leverage popular WordPress plugin Yoast SEO using a headless WordPress instance with Next.js and WPGraphQL? What is SEO? SEO,...
Blogs are a great way to get down your thoughts to help others learn, keep track of progress, or even to help reinforce an idea to help yourself learn. WordPress is a popular blog platform that’s been around for a while and Next.js is a modern popular web framework for building React apps. How can...
Images are a large part of how the web is made. It creates beautiful and interesting things that makes our experiences dynamic. But too much of that, especially when not optimized, can create bad experiences, with slow loading pages. That’s where Next.js and Cloudinary step in to provide powerful optimizations and rich dynamic images. Thanks...
Twitch has become a large community of streamers that have continued to build communities where people can share common interests. While typically the stream is doing most of the talking, the chat provides a way for the audience to interact with and engage with the content creators. How can we take advantage of that chat...
Building dynamic web apps that can be statically hosted, commonly known as the Jamstack, is a powerful way to help provide a fast and reliable experience to your website visitors. There are a lot of options for how you can do this, such as AWS S3, Azure Static Web Apps, Netlify, and Vercel, but there’s...
GitHub Actions are a powerful tool to automate all kinds of tasks in your workflow. While there are a ton of options available on the Marketplace, those existing Actions might not fit your use case or infrastructure. How can we write our own GitHub Action to automate our project’s tasks? What are GitHub Actions? GitHub...
A critical component of any development project is the tests that make sure that project is always doing exactly what it’s supposed to be doing. There are a ton of testing tools available to us, but not all of them test what someone actually experiences. How can we use Applitools to visually test our project...
Next.js has been steadily growing as a must-have tool for developers creating React apps. Part of what makes it great is its data fetching APIs to request data for each page. But how can we use that API to make GraphQL queries for our app? What is GraphQL? GraphQL is a query language and runtime...
Automation is a powerful tool. It both saves us time and can help reduce human error. But automation can be tough and can sometimes prove to be costly. How can Github Actions help harden our code and give us more time to work on features instead of bugs? What are Github Actions? Actions are a relatively...