EdTech at Long Branch • Neil Mastroianni

This project came quickly after the Rooted project. It was the perfect opportunity to take what I learned in their project and expand upon it. I didn't waste any time making sure I learned new things.

What Were Some Things I Learned?

This project represented a huge leap for me. The things I explored in this project include

GatsbyJS
Prismic (via the legacy type builder)
React Headroom
HeadlessUI
React Hook Form
Trello API
Pagination
Disqus

I was already familiar with Gatsby. However, I hadn't used it with Prismic yet. This allowed me to explore the two main ways to make pages in Gatsby. The:

Once these two APIs were understood, it seemed easy to generate pages.

Why Did I Choose Prismic?

I was coming from Contentful on the previous project. I wasn't sure how much content would be created on this site, so I tried to think about this project's long-term prospects. At the time, Prismic offered unlimited "records" and unlimited locales. This has since changed regarding the locales (which is a bummer, but it's understandable).

The Other Main "Selling Point" of Prismic

I wouldn't be the only one creating content on this project. Prismic was more than just a content management system (CMS). When I saw that it was a page builder, making it simple for anyone to build pages with a consistent look, I knew it was the right tool. The "cherry on top" was that it lets you preview documents before publishing.

While it was mostly sunshine and roses with Prismic, there was a hidden trouble I was waiting to discover. To use Prismic with Gatsby, you had to use their legacy type builder. As it turns out, this means it is very easy for content creators to accidentally edit your content models rather than edit the documents. This error can cause all of your documents to disappear in Prismic. For this reason, I avoided Prismic in my next Gatsby project.

What Does React Headroom Do?

Leaving the main navigation at the top (making it "sticky") is intentional for some sites. It might be displaying a phone number or other call to action. For this (and many other sites), getting the navigation out of the way when scrolling down is better.

When the user travels back up the page, they might be looking to see what else your site offers. At this point, it would be great to show the visitor the navigation again. This is exactly what the react-headroom package does.

How Does HeadlessUI Help?

There are many UI packages out there to choose from. Thanks to the people who make Tailwind, I discovered their UI library early on. Menus can be a prickly issue, but a simple menu would be sufficient for this site. The Menu (Dropdown) component was exactly what I wanted.

Headless UI: Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS

Thanks to the HeadlessUI developers' work, the elements look good, are accessible, and accept keyboard navigation. These are nice things to have "out of the box."

Do I Need React Hook Form?

I wouldn't say React Hook Form is necessary for forms, but it makes things easier. I understand that the "traditional" React way of handling forms involves the useRef hook and that when a user types into a text area, for instance, this causes a rerender on each keystroke.

React Hook Form also makes it simple to conditionally add error text if the data entered into the form does not match the desired pattern. I always reach for this package when I do forms on sites now.

How Does Trello Fit In?

I love the Kanban method of task management. When visitors fill out the contact form, their support requests will be posted to our Trello board with a due date of 24 hours after creation.

We had lists set up so that if tasks were better suited to a particular person, we would drop the cards into the appropriate list. We moved the card into the "Done" list when the task was finished. This way, we knew what we were working on, and no requests went unaddressed.

Why Is Pagination Important?

It can be easy to skip over pagination at the beginning of a project. There's little to no content, so you're not concerned about having too much content to show on one page. Thanks to the Gatsby Node API discussed above, paginating content was not too difficult.

// Create blog-list pages
  const posts = result.data.allPrismicPost.nodes
  const postsPerPage = 10
  const numPages = Math.ceil(posts.length / postsPerPage)
  Array.from({ length: numPages }).forEach((_, i) => {
    createPage({
      path: i === 0 ? `/blog/` : `/blog/${i + 1}/`,
      component: path.resolve("./src/templates/blog-index.js"),
      context: {
        // this context is passed to the page as the pageContext prop
        totalPosts: posts.length,
        limit: postsPerPage,
        skip: i * postsPerPage,
        numPages,
        currentPage: i + 1,
        basePath: "/blog",
      },
    })
  })

The above code creates the pages needed for the blog index so that only 10 posts are shown per page. This prevents the "scroll of death" once you have built a library of content.

What Does Disqus Provide?

Many people come from WordPress. I am included in that group. I am used to seeing the ability to comment at the bottom of a post. For statically generated sites like those made with GatsbyJS, comments are not included like they are in WordPress.

There are ways to make this happen, and Disqus is one possible way. Love it or hate it, this addition to the site was absolutely a "can I do it" task for me. I have yet to add comments to a blog since I've done it with this project, but now I know I can if necessary.

Why Did I Ditch Prismic in My Next Project?

I hope you'll take a moment to see my next project and discover what led me to leave Prismic behind in favor of a different "solution."