Space Jelly - Web Development Tutorials for _This_ Universe

Latest

  • 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. How can we dynamically generate...

Tutorials by Tech

  • Next.js
  • React
  • Cloudinary
  • Node.js

Featured Course

View All Courses
Create an eCommerce Store with Next.js and Stripe Checkout

Newsletter

Get new web dev tutorials in your inbox!

Sign up to receive all things Space Jelly and more free content straight to your inbox!

Some More Recent Posts

  • 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. What is Plausible? Plausible considers itself...

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

  • 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. What is a Sitemap? A sitemap is ususally an XML document that includes a comprehensive list of links...

  • 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. What is the Web Speech API The...

  • 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? Tip: We step through a bit of context before...