Welcome to Space Jelly!
Sign up for my newsletter to get the latest tutorials straight to your inbox.
My Space Jelly Blog
How to Programmatically Upload Images to Cloudinary in React & Next.js
Tue Nov 23 2021
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
Wed Nov 10 2021
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
Tue Oct 26 2021
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
Wed Oct 20 2021
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
Tue Oct 12 2021
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
Fri Oct 01 2021
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
Tue Sep 21 2021
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
Thu Sep 09 2021
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
Wed Sep 01 2021
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
Thu Aug 26 2021
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…