Space Jelly
Posts
How to Export Sass Variables to JavaScript with Next.js
By Colby Fayock
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.
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?
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 old as the web itself! How can we take advantage of favicons in the modern world of React and Next.js?
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?
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?
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?
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?
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?
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?
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.
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?
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?
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?
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?
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?
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?
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.
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?
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.
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?
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?
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?
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?