Since the release of NextJS v9.3, we’ve been given three different rendering options for our React apps.

• Client-Side Rendering
• Server-Side Rendering
• Static-Site Generation

Each of these methods has its use cases and benefits. Let’s explore the situations where we’d want to choose one of these over another and some examples of how to implement each in our code.

1) Client-Side Rendering

I recently began using a powerful JavaScript charting library called Highcharts, and while the docs and API reference on their developer page are extensive, one thing I found I was missing was a quick reference to each of the chart types, and the type of data they expect.

Whether or not you are building your charts in Javascript, or using the Gem version of the library, the syntax remains the same. The chart type can be declared in the ‘chart’ option in your chart object:

chart: {
    type: 'area'
}

There are many chart types, and in the docs, it’s…

I’ve only started really digging into the heart of NextJS, but I came across an amazing animations library called Framer Motion that allows for easy-to-implement microinteractions and full page transitions that you write directly into your React components.

This is all fine and good, but with both of these being relatively new technologies, it’s not unusual to run into some bugs and quirks. It wasn’t long until I found a pretty serious challenge that needed to be hurdled.

Let me outline the issue: While using traditional CSS modules in my NextJS app, when clicking a link to another route, Framer…

Page loading speed has become one of the hottest topics in modern web design. It’s estimated that 25% of users will navigate away from a page if it takes more than 3 seconds to load, and one of the most significant factors in a pages loading time is the size and number of images that it needs to load. For as long as the internet has existed, developers have been plagued by this problem and have tried to create standards for lean, responsive images to craft the web.

NextJS is a popular new React Framework that brings a number of…

This past weekend, I participated in my first ‘hackathon’, organized by Cody Green of Flatiron School. As a recent graduate of their software engineering program, I’d heard this term ‘hackathon’ several times, but never really had an idea of what to expect to participate in one. In fact, I used to think it sounded like a bunch of anonymous masked hackers with laptops in a dark room racing to see who could crack a cypher and steal the Declaration of Independence first.

Error handling is one of those inescapable constants in life, right alongside paying taxes. Handling errors in your application will greatly impact the user experience, and it’s important to take the time to weed out all the edge cases and handle any errors your app may encounter

Today I’ll be looking specifically at a method for handling validation errors using a Rails 6 API managing a postgreSQL database, with a React front-end.

Rails Setup

Something that really drew me to Ruby on Rails was how simple and easy it was to handle validation errors on your inputs. Active Record builds in a…

Advances in studio recording technology has undeniably changed the landscape of the music industry over the last decade, allowing producers to create and release music from smaller workspaces, with a workflow approaching the speed of thought.

One of my favorite side effects of this new culture is how these production technologies are making their way into the world of web development. One prime example is now a standard feature built right into your browser: The Web Audio API brings music production tools right to your fingertips, allowing you to build synthesizer and effect emulators with nothing more than vanilla…

Image and file storage is a hurdle that every website or application worth its salt needs to jump. Cloudinary is a robust tool that tackles the task of file uploading and referencing with easy implementation, and a free tier that allows developers to learn the tools before rolling out their functionality into a production deployment. In Rails 6, we can use the existing Active Storage framework to cleanly connect to Cloudinary and allow our users to upload images and files seamlessly to our application. The Cloudinary docs and blogs are quite extensive and informative, however, I still ran in to…