Space Jelly

Cosmic web dev tutorials that will shock you with joy!

  • Adding yet another post edit

    again again again, yet again editing this post to see on demand revalidation

  • Adding a new post

    Testing this out

  • Another Test

    testing another post revalidating the content of new post route! on-demand revalidation

  • test

    test

  • How to Test Revalidation… Again!

    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 […]

  • 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. Note: if you’re currently […]

  • 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 […]

  • 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 […]

  • 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. Why is creating pages important in React? Before we […]

  • 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 […]

  • 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 […]

  • 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 […]

  • 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 […]

  • 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? What is NextAuth.js? NextAuth.js is an all-in-one solution for adding authentication to a Next.js application. If you followed […]

  • 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 […]

  • 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 […]

  • 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 […]

  • 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. What is Astro? […]

  • 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 […]

  • 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? What is authentication? Authentication is the process of identifying a person or entity and […]

  • 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? What is SendGrid? SendGrid is an […]

  • 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? What is MDX? MDX is a document format that allows people to write JavaScript and […]

  • 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? What is SEO? SEO, […]

  • 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 […]

  • 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. Thanks […]

  • 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 […]

  • 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 […]

  • 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? What are GitHub Actions? GitHub […]

  • 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 […]

  • 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? What is GraphQL? GraphQL is a query language and runtime […]

  • 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? What are Github Actions? Actions are a relatively […]