Setting up parallax with Gratsby.js & Prismic

Last year I was working on a history page that would showcase a list of achievements and milestones over the last 30 odd years that one of our clients had reached. There was a lot of content and we wanted to feature it in an exciting way. Here’s the final product. Let's get straight into it and talk about creating parallax in Gatsby.js!

gatsby-browser.js

Working with Gatsby can be tricky at times as a frontend developer because since it’s a static site generator that creates your site during the build phase you can’t reference the window object like you’re…


All this buzz about generating static files…

When researching different React frameworks for a new project we are barraged with an array of features that both Gatsby.js and Next.js tout to have, such as improved SEO, server-side rendering, and superior performance. However, to find out how these frameworks work and how they differ takes a little more digging beneath the surface. Let’s take a little trip back in time so that we can better understand how they fit in the greater scheme of things.

What is HTML anyway?

The year is 1989 and a rather gifted computer scientist by the…


E-commerce is booming, and with so many platforms to choose from it can be overwhelming to pick where to start. I’m going to walk you through how to create a completely custom experience and forgo the fees and hidden costs built into the likes of Shopify and Amazon. Let's get started.

A word on PCI Compliance

Anyone involved with the processing, transmission, or storage of card data must comply with the Payment Card Industry (PCI) Data Security Standard. A good rule of thumb, when building a PCI compliant checkout, is to not store or manage any credit card information yourself. For this reason, we’re going…


Over the last couple of weeks, I’ve been in the process of revamping my personal site to coincide with the release of some new content. Here’s the final result. I’ve been really loving the look of three.js and was committed to integrating it into the site.

Gatsby

In order to build a site that could handle complex rendering, I chose a static site generator and Gatsby has been my go-to for its ease of use and flexibility with third-party plugins. Since Gatsby is powered by React I was at first a little unsure about how this library would be integrated. I…


Often times you’ll have a fairly complicated assortment of resources to filter through on the front end. I’m going to walk you through our approach to filtering through a resource room with Prismic and Gatsby. If you’re new to Prismic or Gatsby be sure to check out their excellent docs to get started.

Templates

Templates to the rescue! If we structure our CMS in a thoughtful way then we can abstract away a lot of the complexity of filtering on the front-end. In Prismic you’ll need to create a repeatable content type of category and assign a category for each blog…


There is probably a myriad of ways to go about setting up a multi-language site with React and Prismic. However, since the online examples of this are a little thin I figured I’d do a quick run-through of the approach we took when building this manipulated media site for Reuters.

What is Prismic?

Prismic is a CMS that is completely free to use for one team member and scales very affordably for small teams. It also has a very intuitive setup for working with multiple languages. …


I’ve been thinking a lot lately about content management systems (CMS’s). Having spent many hours trying to will a WordPress theme I created to do what I asked of it I was thinking how is it possible that 30% of the web is built on top of this seemingly antiquated system?

I was fixing up a mate’s WordPress site trying to have it so the content would display responsively on all different devices. …

Kahilnayton

Full stack developer based out of Brooklyn, NYC.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store