<![CDATA[Space Jelly]]> https://spacejelly.dev RSS for Node Mon, 16 Mar 2026 23:16:57 GMT Mon, 16 Mar 2026 23:16:57 GMT <![CDATA[Lint & Format JavaScript with Biome]]> 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.

]]> https://spacejelly.dev/posts/lint-format-javascript-with-biome https://spacejelly.dev/posts/lint-format-javascript-with-biome Thu, 12 Sep 2024 12:03:12 GMT <![CDATA[MDX in Next.js]]> 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.

]]> https://spacejelly.dev/posts/mdx-in-nextjs https://spacejelly.dev/posts/mdx-in-nextjs Thu, 05 Sep 2024 15:00:17 GMT <![CDATA[Light & Dark Mode Favicons]]> 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.

]]> https://spacejelly.dev/posts/light-dark-mode-favicons https://spacejelly.dev/posts/light-dark-mode-favicons Thu, 29 Aug 2024 12:30:24 GMT <![CDATA[Pagination in React with Next.js & Drizzle ORM]]> 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!

]]> https://spacejelly.dev/posts/pagination-in-react-with-next-js-drizzle-orm https://spacejelly.dev/posts/pagination-in-react-with-next-js-drizzle-orm Thu, 22 Aug 2024 15:46:43 GMT <![CDATA[Generate a PDF in React]]> 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.

]]> https://spacejelly.dev/posts/generate-a-pdf-from-html-in-javascript https://spacejelly.dev/posts/generate-a-pdf-from-html-in-javascript Thu, 15 Aug 2024 12:04:57 GMT <![CDATA[Build a Web Scraper with Puppeteer & Next.js API Routes]]> 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.

]]> https://spacejelly.dev/posts/build-a-web-scraper-with-puppeteer-next-js-api-routes https://spacejelly.dev/posts/build-a-web-scraper-with-puppeteer-next-js-api-routes Thu, 08 Aug 2024 12:53:18 GMT <![CDATA[How to Fix CORS Errors & Allow Cross-Origin API Requests]]> 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 deal with CORS and open up an endpoint while maintaining safe cross-origin requests.

]]> https://spacejelly.dev/posts/how-to-fix-cors-errors-allow-cross-origin-api-requests https://spacejelly.dev/posts/how-to-fix-cors-errors-allow-cross-origin-api-requests Thu, 13 Jun 2024 12:38:59 GMT <![CDATA[How to Build a Notification System in Next.js with Knock]]> 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 like a lot of work, but it doesn’t have to be! We’ll see how we can easily set up an in-app and email notification system in Next.js with Knock.

]]> https://spacejelly.dev/posts/how-to-build-a-notification-system-in-next-js-with-knock https://spacejelly.dev/posts/how-to-build-a-notification-system-in-next-js-with-knock Thu, 06 Jun 2024 12:31:13 GMT <![CDATA[How to Create a Modal in React with HTML Dialog]]> 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.

]]> https://spacejelly.dev/posts/how-to-create-a-modal-in-react-with-html-dialog https://spacejelly.dev/posts/how-to-create-a-modal-in-react-with-html-dialog Thu, 23 May 2024 19:29:59 GMT <![CDATA[How to Create an Add to Calendar Button in React with Tailwind CSS]]> 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.

]]> https://spacejelly.dev/posts/how-to-create-an-add-to-calendar-button-in-react-with-tailwind-css https://spacejelly.dev/posts/how-to-create-an-add-to-calendar-button-in-react-with-tailwind-css Thu, 09 May 2024 12:09:14 GMT <![CDATA[How to Add Analytics in Next.js with Plausible]]> 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.

]]> https://spacejelly.dev/posts/how-to-add-analytics-in-next-js-with-plausible https://spacejelly.dev/posts/how-to-add-analytics-in-next-js-with-plausible Fri, 12 Apr 2024 18:18:27 GMT <![CDATA[How to Send Emails in React with React Email & Resend]]> 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 to building great emails.

]]> https://spacejelly.dev/posts/how-to-send-emails-in-react-with-react-email-resend https://spacejelly.dev/posts/how-to-send-emails-in-react-with-react-email-resend Fri, 05 Apr 2024 21:52:09 GMT <![CDATA[How to Add a Sitemap & RSS Feed in Next.js App Router]]> 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.

]]> https://spacejelly.dev/posts/how-to-add-a-sitemap-rss-feed-in-next-js-app-router https://spacejelly.dev/posts/how-to-add-a-sitemap-rss-feed-in-next-js-app-router Fri, 29 Mar 2024 13:40:54 GMT <![CDATA[How to Build an AI Voice Translator in Next.js with Web Speech API & OpenAI]]> 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.

]]> https://spacejelly.dev/posts/how-to-build-an-ai-voice-translator-in-next-js-with-web-speech-api-openai https://spacejelly.dev/posts/how-to-build-an-ai-voice-translator-in-next-js-with-web-speech-api-openai Thu, 29 Feb 2024 13:15:05 GMT <![CDATA[How to Style Active Links in Next.js App Router]]> 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?

]]> https://spacejelly.dev/posts/how-to-style-active-links-in-next-js-app-router https://spacejelly.dev/posts/how-to-style-active-links-in-next-js-app-router Thu, 22 Feb 2024 13:12:51 GMT <![CDATA[How to Build a Blog with Next.js App Router & Headless Hashnode]]> https://spacejelly.dev/posts/how-to-build-a-blog-with-next-js-app-router-headless-hashnode https://spacejelly.dev/posts/how-to-build-a-blog-with-next-js-app-router-headless-hashnode Thu, 15 Feb 2024 13:24:02 GMT <![CDATA[How to Share Selected Text in React with the Selection API]]> 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.

]]> https://spacejelly.dev/posts/how-to-share-selected-text-in-react-with-the-selection-api https://spacejelly.dev/posts/how-to-share-selected-text-in-react-with-the-selection-api Sun, 11 Feb 2024 20:19:02 GMT <![CDATA[How to Detect Clicks Anywhere on a Page in React]]> 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?

]]> https://spacejelly.dev/posts/how-to-detect-clicks-anywhere-on-a-page-in-react https://spacejelly.dev/posts/how-to-detect-clicks-anywhere-on-a-page-in-react Thu, 01 Feb 2024 13:51:49 GMT <![CDATA[How to Add an AI-Powered WYSIWYG Editor in React & Astro with Novel]]> https://spacejelly.dev/posts/how-to-add-an-ai-powered-wysiwyg-editor-in-react-astro-with-novel https://spacejelly.dev/posts/how-to-add-an-ai-powered-wysiwyg-editor-in-react-astro-with-novel Thu, 25 Jan 2024 16:19:12 GMT <![CDATA[How to Create a Blog with Astro & Appwrite]]> 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.

]]> https://spacejelly.dev/posts/how-to-create-a-blog-with-astro-appwrite https://spacejelly.dev/posts/how-to-create-a-blog-with-astro-appwrite Thu, 18 Jan 2024 13:02:48 GMT <![CDATA[How to Copy to Clipboard in React]]> 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.

]]> https://spacejelly.dev/posts/how-to-copy-to-clipboard-in-react https://spacejelly.dev/posts/how-to-copy-to-clipboard-in-react Fri, 12 Jan 2024 02:13:41 GMT <![CDATA[How to Scroll to an Element in React]]> 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 us to programmatically jump and smooth scroll for our visitor.

]]> https://spacejelly.dev/posts/how-to-scroll-to-an-element-in-react https://spacejelly.dev/posts/how-to-scroll-to-an-element-in-react Thu, 04 Jan 2024 13:41:46 GMT <![CDATA[How to Build Data Dashboards in React with Tremor & Tailwind]]> https://spacejelly.dev/posts/how-to-build-data-dashboards-in-react-with-tremor-tailwind https://spacejelly.dev/posts/how-to-build-data-dashboards-in-react-with-tremor-tailwind Mon, 21 Aug 2023 02:24:08 GMT <![CDATA[Uploading Files in React from a Form with Drag and Drop]]> 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?

]]> https://spacejelly.dev/posts/uploading-files-in-react-from-a-form-with-drag-and-drop https://spacejelly.dev/posts/uploading-files-in-react-from-a-form-with-drag-and-drop Thu, 27 Jul 2023 16:43:28 GMT <![CDATA[Image Gallery with Search in Next.js with Cloudinary Node SDK]]> 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 simple image gallery with search functionality using server components and server actions in a Next.js React app.

]]> https://spacejelly.dev/posts/image-gallery-with-search-in-next-js-with-cloudinary-node-sdk https://spacejelly.dev/posts/image-gallery-with-search-in-next-js-with-cloudinary-node-sdk Wed, 07 Jun 2023 14:27:13 GMT <![CDATA[Creating Custom Raycast Extensions with React]]> 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.

]]> https://spacejelly.dev/posts/creating-custom-raycast-extensions-with-react https://spacejelly.dev/posts/creating-custom-raycast-extensions-with-react Thu, 18 May 2023 12:32:00 GMT <![CDATA[How to Improve Integration Tests with AI in Next.js with Playwright & Applitools]]> 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 we can easily integrate it into our testing strategy with a Next.js app.

]]> https://spacejelly.dev/posts/how-to-improve-integration-tests-with-ai-in-next-js-with-playwright-applitools https://spacejelly.dev/posts/how-to-improve-integration-tests-with-ai-in-next-js-with-playwright-applitools Thu, 27 Apr 2023 12:35:34 GMT <![CDATA[Website Archive with Automated Screenshots in Astro with Playwright & GitHub Actions]]> 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 screenshot with Playwright, upload it to Cloudinary, and create a nice static web archive app in Astro.

]]> https://spacejelly.dev/posts/website-archive-with-automated-screenshots-in-astro-with-playwright-github-actions https://spacejelly.dev/posts/website-archive-with-automated-screenshots-in-astro-with-playwright-github-actions Fri, 14 Apr 2023 13:22:02 GMT <![CDATA[How to Use AI to Generate a Custom Pokémon with OpenAI ChatGPT & DALL-E]]> 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?

]]> https://spacejelly.dev/posts/how-to-use-ai-to-generate-a-custom-pokemon-with-openai-chatgpt-dall-e https://spacejelly.dev/posts/how-to-use-ai-to-generate-a-custom-pokemon-with-openai-chatgpt-dall-e Wed, 29 Mar 2023 13:43:25 GMT <![CDATA[Exploring GitHub Copilot X: AI-Powered CLI Commands and More]]> 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 some of the demos they have available like React and MDN. In this post, we’ll dive into the GitHub Copilot CLI, which allows you to build commands using AI.

]]> https://spacejelly.dev/posts/exploring-github-copilot-x-ai-powered-cli-commands-and-more https://spacejelly.dev/posts/exploring-github-copilot-x-ai-powered-cli-commands-and-more Mon, 27 Mar 2023 14:55:36 GMT <![CDATA[How to Build Search for a Serverless Database with Aggregations Using Xata in Next.js]]> 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 engine) giving developers a way to query, search, and aggregate the data at scale, all without the pain.

]]> https://spacejelly.dev/posts/how-to-build-search-for-a-serverless-database-with-aggregations-using-xata-in-next-js https://spacejelly.dev/posts/how-to-build-search-for-a-serverless-database-with-aggregations-using-xata-in-next-js Tue, 24 Jan 2023 02:05:48 GMT <![CDATA[How to Build React Apps Faster with Codux Visual IDE]]> 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?

]]> https://spacejelly.dev/posts/how-to-build-react-apps-faster-with-codux-visual-ide https://spacejelly.dev/posts/how-to-build-react-apps-faster-with-codux-visual-ide Wed, 18 Jan 2023 02:20:48 GMT <![CDATA[Optimize Images in Next.js Next Cloudinary]]> 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.

]]> https://spacejelly.dev/posts/how-to-optimize-images-with-responsive-sizes-ai-cropping-in-next-js-with-next-cloudinary https://spacejelly.dev/posts/how-to-optimize-images-with-responsive-sizes-ai-cropping-in-next-js-with-next-cloudinary Fri, 16 Dec 2022 13:10:20 GMT <![CDATA[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.

]]> https://spacejelly.dev/posts/how-to-add-passwords-authentication-and-login-in-next-js-with-clerk https://spacejelly.dev/posts/how-to-add-passwords-authentication-and-login-in-next-js-with-clerk Thu, 27 Oct 2022 12:54:22 GMT <![CDATA[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?

]]> https://spacejelly.dev/posts/how-to-optimize-dynamically-resize-images-in-astro-with-cloudinary https://spacejelly.dev/posts/how-to-optimize-dynamically-resize-images-in-astro-with-cloudinary Thu, 20 Oct 2022 11:57:03 GMT <![CDATA[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?

]]> https://spacejelly.dev/posts/how-to-create-a-nextauth-js-custom-adapter-with-harperdb-next-js https://spacejelly.dev/posts/how-to-create-a-nextauth-js-custom-adapter-with-harperdb-next-js Wed, 05 Oct 2022 07:00:00 GMT <![CDATA[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 Cloudinary?

]]> https://spacejelly.dev/posts/how-to-generate-video-thumbnails-on-the-fly-add-hover-preview-effects-with-cloudinary https://spacejelly.dev/posts/how-to-generate-video-thumbnails-on-the-fly-add-hover-preview-effects-with-cloudinary Thu, 11 Aug 2022 14:32:29 GMT <![CDATA[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.

]]> https://spacejelly.dev/posts/how-to-create-an-image-placeholder-service-api-with-cloudinary-netlify-functions https://spacejelly.dev/posts/how-to-create-an-image-placeholder-service-api-with-cloudinary-netlify-functions Wed, 13 Jul 2022 20:09:25 GMT <![CDATA[How to Update Static Content in Next.js Automatically with Incremental Static Regeneration (ISR)]]> https://spacejelly.dev/posts/how-to-update-static-content-in-next-js-automatically-with-incremental-static-regeneration-isr https://spacejelly.dev/posts/how-to-update-static-content-in-next-js-automatically-with-incremental-static-regeneration-isr Wed, 06 Jul 2022 19:26:57 GMT <![CDATA[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 in a Netlify Function.

]]> https://spacejelly.dev/posts/how-to-generate-blurhash-placeholders-with-cloudinary-custom-functions-netlify https://spacejelly.dev/posts/how-to-generate-blurhash-placeholders-with-cloudinary-custom-functions-netlify Thu, 16 Jun 2022 12:55:25 GMT <![CDATA[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.

]]> https://spacejelly.dev/posts/how-to-automatically-optimize-headless-wordpress-images-and-videos-with-the-cloudinary-plugin https://spacejelly.dev/posts/how-to-automatically-optimize-headless-wordpress-images-and-videos-with-the-cloudinary-plugin Fri, 20 May 2022 17:40:00 GMT <![CDATA[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?

]]> https://spacejelly.dev/posts/how-to-detect-long-press-gestures-in-javascript-events-in-react https://spacejelly.dev/posts/how-to-detect-long-press-gestures-in-javascript-events-in-react Fri, 08 Apr 2022 14:18:13 GMT <![CDATA[How to Save State to LocalStorage & Persist on Refresh with React.js]]> https://spacejelly.dev/posts/how-to-save-state-to-localstorage-persist-on-refresh-with-react-js https://spacejelly.dev/posts/how-to-save-state-to-localstorage-persist-on-refresh-with-react-js Thu, 17 Mar 2022 20:45:04 GMT <![CDATA[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.

]]> https://spacejelly.dev/posts/how-to-add-webcam-photo-filters-effects-in-react-with-cloudinary https://spacejelly.dev/posts/how-to-add-webcam-photo-filters-effects-in-react-with-cloudinary Sun, 13 Mar 2022 20:53:18 GMT <![CDATA[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?

]]> https://spacejelly.dev/posts/how-to-trigger-a-function-when-scrolling-to-an-element-in-react-intersection-observer https://spacejelly.dev/posts/how-to-trigger-a-function-when-scrolling-to-an-element-in-react-intersection-observer Thu, 03 Feb 2022 14:49:13 GMT <![CDATA[How to Automatically Tag & Categorize Images Using AI with Google Vision & Cloudinary]]> https://spacejelly.dev/posts/how-to-automatically-tag-categorize-images-using-ai-with-google-vision-cloudinary https://spacejelly.dev/posts/how-to-automatically-tag-categorize-images-using-ai-with-google-vision-cloudinary Fri, 21 Jan 2022 14:25:21 GMT <![CDATA[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 gain access to our favorite tools.

]]> https://spacejelly.dev/posts/how-to-authenticate-spotify-web-api-requests-in-next-js-with-netlify-api-auth https://spacejelly.dev/posts/how-to-authenticate-spotify-web-api-requests-in-next-js-with-netlify-api-auth Thu, 13 Jan 2022 13:30:43 GMT <![CDATA[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 to share?

]]> https://spacejelly.dev/posts/how-to-generate-personalized-social-media-cards-for-landing-pages-with-next-js-cloudinary https://spacejelly.dev/posts/how-to-generate-personalized-social-media-cards-for-landing-pages-with-next-js-cloudinary Thu, 06 Jan 2022 16:04:51 GMT <![CDATA[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?

]]> https://spacejelly.dev/posts/how-to-list-display-cloudinary-image-resources-in-a-gallery-with-next-js-react https://spacejelly.dev/posts/how-to-list-display-cloudinary-image-resources-in-a-gallery-with-next-js-react Thu, 16 Dec 2021 18:48:06 GMT <![CDATA[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?

]]> https://spacejelly.dev/posts/how-to-personalize-content-jamstack-web-experiences-with-uniform-next-js https://spacejelly.dev/posts/how-to-personalize-content-jamstack-web-experiences-with-uniform-next-js Thu, 09 Dec 2021 00:22:11 GMT <![CDATA[How to Optimize Images on Netlify with the Cloudinary Build Plugin]]> https://spacejelly.dev/posts/how-to-optimize-images-on-netlify-with-the-cloudinary-build-plugin https://spacejelly.dev/posts/how-to-optimize-images-on-netlify-with-the-cloudinary-build-plugin Thu, 02 Dec 2021 01:32:00 GMT <![CDATA[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?

]]> https://spacejelly.dev/posts/how-to-programmatically-upload-images-to-cloudinary-in-react-next-js https://spacejelly.dev/posts/how-to-programmatically-upload-images-to-cloudinary-in-react-next-js Tue, 23 Nov 2021 15:50:17 GMT <![CDATA[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.

]]> https://spacejelly.dev/posts/how-to-create-thumbnail-images-using-face-detection-with-cloudinary https://spacejelly.dev/posts/how-to-create-thumbnail-images-using-face-detection-with-cloudinary Wed, 10 Nov 2021 16:30:50 GMT <![CDATA[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?

]]> https://spacejelly.dev/posts/how-to-schedule-daily-email-reports-with-github-actions-gmail-cron https://spacejelly.dev/posts/how-to-schedule-daily-email-reports-with-github-actions-gmail-cron Tue, 26 Oct 2021 15:16:20 GMT <![CDATA[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?

]]> https://spacejelly.dev/posts/how-to-create-css-custom-properties-that-dynamically-update-with-react-javascript https://spacejelly.dev/posts/how-to-create-css-custom-properties-that-dynamically-update-with-react-javascript Wed, 20 Oct 2021 13:26:55 GMT <![CDATA[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?

]]> https://spacejelly.dev/posts/how-to-export-sass-variables-to-javascript-with-next-js https://spacejelly.dev/posts/how-to-export-sass-variables-to-javascript-with-next-js Tue, 12 Oct 2021 13:21:31 GMT <![CDATA[How to Create Pages in Next.js with Static & Dynamic Data]]> 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.

]]> https://spacejelly.dev/posts/how-to-create-pages-in-next-js-with-static-dynamic-data https://spacejelly.dev/posts/how-to-create-pages-in-next-js-with-static-dynamic-data Fri, 01 Oct 2021 15:59:53 GMT <![CDATA[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?

]]> https://spacejelly.dev/posts/how-to-use-the-github-graphql-api-to-add-your-pinned-repositories-in-next-js-react https://spacejelly.dev/posts/how-to-use-the-github-graphql-api-to-add-your-pinned-repositories-in-next-js-react Tue, 21 Sep 2021 02:28:23 GMT <![CDATA[How to Add a Dynamic Table of Contents to Static HTML in React with Rehype]]> https://spacejelly.dev/posts/how-to-add-a-dynamic-table-of-contents-to-static-html-in-react-with-rehype https://spacejelly.dev/posts/how-to-add-a-dynamic-table-of-contents-to-static-html-in-react-with-rehype Thu, 09 Sep 2021 02:23:04 GMT <![CDATA[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?

]]> https://spacejelly.dev/posts/how-to-add-custom-dynamic-favicons-in-react-next-js https://spacejelly.dev/posts/how-to-add-custom-dynamic-favicons-in-react-next-js Wed, 01 Sep 2021 01:44:00 GMT <![CDATA[How to Use Puppeteer to Automate Chrome in an API with Netlify Serverless Functions]]> 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 accessible?

]]> https://spacejelly.dev/posts/how-to-use-puppeteer-to-automate-chrome-in-an-api-with-netlify-serverless-functions https://spacejelly.dev/posts/how-to-use-puppeteer-to-automate-chrome-in-an-api-with-netlify-serverless-functions Thu, 26 Aug 2021 15:40:28 GMT <![CDATA[How to Test Serverless Functions with Jest & Next.js API Routes]]> 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 function?

]]> https://spacejelly.dev/posts/how-to-test-serverless-functions-with-jest-next-js-api-routes https://spacejelly.dev/posts/how-to-test-serverless-functions-with-jest-next-js-api-routes Fri, 20 Aug 2021 21:46:55 GMT <![CDATA[How to Make Twitter API Requests with NextAuth.js Session Tokens]]> 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?

]]> https://spacejelly.dev/posts/how-to-make-twitter-api-requests-with-nextauth-js-session-tokens https://spacejelly.dev/posts/how-to-make-twitter-api-requests-with-nextauth-js-session-tokens Fri, 06 Aug 2021 16:34:46 GMT <![CDATA[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?

]]> https://spacejelly.dev/posts/how-to-use-browser-event-listeners-in-react-for-search-autocomplete-in-javascript https://spacejelly.dev/posts/how-to-use-browser-event-listeners-in-react-for-search-autocomplete-in-javascript Wed, 14 Jul 2021 22:04:22 GMT <![CDATA[How to Automate Deployments on Content Change in WordPress with WP Webhooks and Netlify]]> 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 always up to date?

]]> https://spacejelly.dev/posts/how-to-automate-deployments-on-content-change-in-wordpress-with-wp-webhooks-and-netlify https://spacejelly.dev/posts/how-to-automate-deployments-on-content-change-in-wordpress-with-wp-webhooks-and-netlify Mon, 05 Jul 2021 19:07:02 GMT <![CDATA[How to Automate Code Linting in Next.js with ESLint & Husky Git Hooks]]> 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 task away?

]]> https://spacejelly.dev/posts/how-to-automate-code-linting-in-next-js-with-eslint-husky-git-hooks https://spacejelly.dev/posts/how-to-automate-code-linting-in-next-js-with-eslint-husky-git-hooks Sun, 27 Jun 2021 14:39:03 GMT <![CDATA[How to Use Astro to Build React Apps without JavaScript]]> 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.

]]> https://spacejelly.dev/posts/how-to-use-astro-to-build-react-apps-without-javascript https://spacejelly.dev/posts/how-to-use-astro-to-build-react-apps-without-javascript Tue, 22 Jun 2021 22:00:10 GMT <![CDATA[How to Add Custom Fields in Headless WordPress with ACF & WPGraphQL]]> 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 WPGraphQL in our apps?

]]> https://spacejelly.dev/posts/how-to-add-custom-fields-in-headless-wordpress-with-acf-wpgraphql https://spacejelly.dev/posts/how-to-add-custom-fields-in-headless-wordpress-with-acf-wpgraphql Wed, 09 Jun 2021 01:52:02 GMT <![CDATA[How to Authenticate Next.js Apps with Twitter & NextAuth.js]]> 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?

]]> https://spacejelly.dev/posts/how-to-authenticate-next-js-apps-with-twitter-nextauth-js https://spacejelly.dev/posts/how-to-authenticate-next-js-apps-with-twitter-nextauth-js Tue, 25 May 2021 23:11:13 GMT <![CDATA[How to Send Emails with SendGrid and Next.js Serverless Functions for a Contact Form]]> 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?

]]> https://spacejelly.dev/posts/how-to-send-emails-with-sendgrid-and-next-js-serverless-functions-for-a-contact-form https://spacejelly.dev/posts/how-to-send-emails-with-sendgrid-and-next-js-serverless-functions-for-a-contact-form Tue, 11 May 2021 01:25:09 GMT <![CDATA[How to Source MDX Content in Next.js to Dynamically Create Pages for a Blog]]> 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?

]]> https://spacejelly.dev/posts/how-to-source-mdx-content-in-next-js-to-dynamically-create-pages-for-a-blog https://spacejelly.dev/posts/how-to-source-mdx-content-in-next-js-to-dynamically-create-pages-for-a-blog Wed, 05 May 2021 00:31:08 GMT <![CDATA[How to Manage SEO in Headless WordPress with Yoast SEO and WPGraphQL]]> 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?

]]> https://spacejelly.dev/posts/how-to-manage-seo-in-headless-wordpress-with-yoast-seo-and-wpgraphql https://spacejelly.dev/posts/how-to-manage-seo-in-headless-wordpress-with-yoast-seo-and-wpgraphql Wed, 28 Apr 2021 02:38:54 GMT <![CDATA[How to Create a Headless WordPress Blog with Next.js WordPress Starter]]> 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 we use them together to build a fast and reliable blog?

]]> https://spacejelly.dev/posts/how-to-create-a-headless-wordpress-blog-with-next-js-wordpress-starter https://spacejelly.dev/posts/how-to-create-a-headless-wordpress-blog-with-next-js-wordpress-starter Wed, 21 Apr 2021 01:01:10 GMT <![CDATA[How to Use Cloudinary Images in Next.js with Blurred Placeholders]]> 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.

]]> https://spacejelly.dev/posts/how-to-use-cloudinary-images-in-next-js-with-blurred-placeholders https://spacejelly.dev/posts/how-to-use-cloudinary-images-in-next-js-with-blurred-placeholders Tue, 30 Mar 2021 22:57:06 GMT <![CDATA[How to Create a Twitch Chat Bot with Node.js, TMI.js, & Heroku]]> 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 and use a node.js bot to interact back with the audience?

]]> https://spacejelly.dev/posts/how-to-create-a-twitch-chat-bot-with-node-js-tmi-js-heroku https://spacejelly.dev/posts/how-to-create-a-twitch-chat-bot-with-node-js-tmi-js-heroku Tue, 23 Mar 2021 14:37:08 GMT <![CDATA[How to Use Cloudflare Pages to Host & Deploy a Next.js App]]> 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 a new kid on the block, coming from a dominant force on the web: Cloudflare Pages.

]]> https://spacejelly.dev/posts/how-to-use-cloudflare-pages-to-host-deploy-a-next-js-app https://spacejelly.dev/posts/how-to-use-cloudflare-pages-to-host-deploy-a-next-js-app Mon, 08 Mar 2021 21:54:57 GMT <![CDATA[How to Create a Custom GitHub Action with Node & JavaScript]]> 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?

]]> https://spacejelly.dev/posts/how-to-create-a-custom-github-action-with-node-javascript https://spacejelly.dev/posts/how-to-create-a-custom-github-action-with-node-javascript Fri, 05 Feb 2021 00:02:17 GMT <![CDATA[How to run Visual Regression Testing on a Next.js App with Cypress and Applitools]]> 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 and make sure it’s actually working right?

]]> https://spacejelly.dev/posts/how-to-run-visual-regression-testing-on-a-next-js-app-with-cypress-and-applitools https://spacejelly.dev/posts/how-to-run-visual-regression-testing-on-a-next-js-app-with-cypress-and-applitools Thu, 10 Dec 2020 12:00:42 GMT <![CDATA[How to Fetch GraphQL Data in Next.js with Apollo GraphQL]]> 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?

]]> https://spacejelly.dev/posts/how-to-fetch-graphql-data-in-next-js-with-apollo-graphql https://spacejelly.dev/posts/how-to-fetch-graphql-data-in-next-js-with-apollo-graphql Tue, 01 Dec 2020 12:00:40 GMT <![CDATA[How to Use Github Actions to Automate Tests and Slack Notifications]]> 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?

]]> https://spacejelly.dev/posts/how-to-use-github-actions-to-automate-tests-and-slack-notifications https://spacejelly.dev/posts/how-to-use-github-actions-to-automate-tests-and-slack-notifications Wed, 03 Jun 2020 12:00:00 GMT