Forem: professorjrod

Implementing ISR: Elevating Your App Performance with Netlify's New Next.js 14 Runtime

professorjrod — Tue, 26 Mar 2024 23:07:43 +0000

Have you heard of ISR? Do you want to implement it in your Next app but don't know how? Or, have you already tried to implement ISR, but it didn't work on Netlify?

If you answered YES! to any of these questions, well this post is for you then!

Note: This blog post is accompanied by a YouTube video :)

ISR Overview

For the unfamiliar, Incremental Static Regeneration (ISR) is a feature that can greatly improve the performance and scalability of Next.js applications. ISR is a newly optimized approach to web development that combines the benefits of static generated content with dynamic data updates.

Normally, when you want to update a page, you might have to rebuild the whole website. But with ISR (Incremental Static Regeneration), you only need to update specific pages. So, instead of a potentially LONG build time (and a potential performance hit), you can quickly refresh just the pages that need to be updated. This helps keep your website fresh and responsive without a lot of extra work or waiting.

One significant advantage of using static pages is that they involve minimal data transfer, leading to faster loading times. Additionally, you can cache static pages, further enhancing their speed and efficiency when serving them to users. Because the pages being server are plain HTML, this also provides superior SEO in order to boost your page to the top of search engine results.

When you have an app with potentially millions of pages, like a blog site, or something like Wikipedia, build times can take AGES. So when you use ISR, you get to keep the benefits of Static Site Generation while also being able to scale to millions of pages.

ISR on Netlify

In the past, I have tried to implement ISR on my app, but for some reason it didn't work when I deployed on Netlify. I tried testing it using a simple two page app, using both a time-based revalidation as well as on-demand revalidation.

Turns out, ISR wasn't actually officially supported by Netlify- When I was desperately scrolling through their forums trying to make it work, I came accross threads like this one and was a bit dissapointed to see that ISR wasn't fully supported.

It kind of worked, like when you used a time based revalidation it seemed to work most of the time. But when you tried to revalidate on demand, by say hitting an API route, then you were out of luck.

However, coming back to the topic with my latest project, I was pleasantly surprised to see that it's now working with the latest runtime! It's actually open source, so you can check it out here if you're curious: https://github.com/netlify/next-runtime

When I tried it out I was pleasantly surprised. It definitely works with the newest Netlify runtime, and it works well!

My implementation

Time based revalidation

First, I had a blog app that was statically generated. I went to my index page and I added the revalidate keyword in my getStaticProps function

export const getStaticProps = async (context) => {
  const data = await getBlogPosts();

  return {
    props: {
      posts: data,
    },
    revalidate: 60,
  };
};

This instantly began working, and like clockwork, every 60 seconds my page would be regenerated upon new content. I updated MongoDB and refreshed the page after a minute and I would see the new content, delivered to my browser as blazing fast HTML! 😎

But, what if a user uploads some content to my blog and they don't see their post immediately? Wouldn't that be super confusing and a not-so-great user experience?

I decided to implement out On-Demand revalidation!

On Demand Revalidation

On the Next Api, all I had to do was follow the official documentation and use the revalidate() property supported by Next.js

export default async (req, res) => {
  if (req.method === "POST") {
    console.log("POST REQUEST");
    if (req.body.title && req.body.content && req.body.industry) {
      const newPost = {
        title: req.body.title,
        content: req.body.content,
        industry: req.body.industry,
        author: Date.now(),
      };

      const insertedId = await addBlogPost(newPost);
      res.revalidate("/blog");
      res.revalidate("/blog" + "/insertedId")
      res.status(200).json(insertedId);
    } else {
      res.status(400).json({ error: "title,body,or content missing" });
    }
  }
};

As you can see, whenever a user hits my API with a valid POST request, I call the function to add a blog post to MongoDB.

When the post request is received and validated, we call res.revalidate("/blog"). This revalidate updates the index page which has all of the blog posts on it.

Then, we call another res.revalidate("/blog" + "/insertedId") which uses the same identifier I use in each individual page's slug.

Combining these two, whenever a user uploads to the API a new blog post, both of the relevant pages are statically generated as HTML without having to build any of the other static pages I use. Nice. Super painless to add to my app and it really improved the performance.

Taking advantage of Netlify's Cache-tagging and purge API

Netlify also supports the Cache-Tag and Netlify-Cache-Tag response headers, which allows you to associate an object objects—to a tag that can be purged simultaneously across all of Netlify’s Edge, without the need for a new deploy.

Here's a quick example you can implement in your app:

// pages/api/products/[productId].js

export default async function handler(req, res) {
  const {
    query: { productId },
  } = req;

  const resp = await fetch(`https://your-api.com/products/${productId}`);
  const json = await resp.json();
  const body = `<!doctype html><html>
    <head>
        <title>Product Details</title>
    </head>
    <body>
        <h2>Product Details</h2>
        <div>
          <h3>${json.name}</h3>
          <p>${json.description}</p>
          <p>Price: ${json.price}</p>
        </div>
    </body><html>`;

  res.setHeader("Content-Type", "text/html");
  res.setHeader("Cache-Control", "public, max-age=0, must-revalidate"); // Tell browsers to always revalidate
  res.setHeader("Netlify-CDN-Cache-Control", "public, max-age=31536000, must-revalidate"); // Tell Edge to cache asset for up to a year
  res.setHeader("Cache-Tag", `${productId},product-details,proxy-api-response`); // Tag all product details responses with these tags
  res.status(200).send(body);
}

Content tagged with these headers can be purged using a Netlify Function to call Netlify’s Purge API.

In this example, this API call will purge all the site’s content tagged with product-details —while leaving the remaining site’s content cached on the CDN.

// pages/api/purge.js

import { purgeCache } from "@netlify/functions";

export default async function handler(req, res) {
  const cacheTags = ["product-details"]; // Include product details cache tags
  await purgeCache({ cacheTags });

  res.status(202).send("Purged successfully!");
}

Now, all you have to do is hit http://website/purge and voila! Everything tagged "product-details" is purged, and the rest of your site remains cached on your CDN! 😎

Conclusion

I always use Netlify, and admittedly I was a bit disappointed when I first tried this feature as on-demand revalidation didn't work. Their caching is super helpful for serving super fast pages. But now that it works with the latest runtime, I am stoked!

If you combine Next.js ISR feature, along with Netlify's cache-tagging and purge API, you have some serious control over your site's content, which is great-- especially for e-commerce where SEO is king. I highly recommend giving it a try!

Anyways, that's the wrap of this post, this was kind of a longer article than I normally write. Leave a comment if you enjoyed it or have a request for anything else you would like to see discussed!

Next.js Tips, Tricks, and Features you Probably Don't Know

professorjrod — Fri, 13 Jan 2023 20:56:14 +0000

If you aren't already familiar, Next.js is a framework for building web applications using React and Node.js.

Why did the Next.js developer stop working on his code? Because it was too "next-tremely" hard!

My goal with this article is to make it "next-tremely" easy for you!

From dynamic routing, code splitting, server-side rendering, static optimization, and more, we will explore the capabilities of Next.js and how to use them to build high-performance web applications.

Whether you are a beginner or an experienced developer, this post will provide you with valuable insights on how to take full advantage of Next.js to build production-ready web applications with ease!

The features we are talking about today include:

Dynamic routing

Dynamic routing allows for creating URLs that change based on the information displayed on the page.

Code splitting

Code splitting is a technique that allows for loading only the necessary code for a specific page, improving the performance of the application.

Server side rendering

Server side rendering involves rendering the initial state of a web page on the server before sending it to the client, saving load time

Other built-in optimizations

Dynamic Routing

In complex applications, using predefined paths for routes may not be sufficient. Next.js allows developers to use dynamic routes by adding brackets to a page, known as [param]. This allows for creating flexible URLs also known as URL slugs, pretty URLs, and other similar terms.

In this way, Next.js allows for dynamic, parameterized routes to be easily handled without the need for additional configuration.

Consider the following page pages/post/[pid].js:

import { useRouter } from 'next/router'

const Post = () => {
  const router = useRouter()
  const { pid } = router.query

  return <p>Post: {pid}</p>
}

export default Post

Any route like /post/1, /post/abc, etc. will be matched by pages/post/[pid].js. The matched path parameter will be sent as a query.

Server-side rendering

Server-side rendering (SSR) improves the initial load time of a web page by generating the initial state of the page on the server, and sending it as a fully rendered HTML document to the browser. This makes the page more SEO friendly, and allows for faster rendering of the page as the browser does not have to spend time executing JavaScript to render the page.

This is opposed to client-side rendering, where the browser loads and renders the JavaScript, which can take longer and make it less user friendly.

Implementation

In Next.js, server-side rendering is implemented by using a function called getServerSideProps. This function let you fetch data from an API or a database and then pass it as props to your component before the component is rendered on the server.

Here's an example of how you might use getServerSideProps:

import ProductPage from '../components/ProductPage';

export default function Product({product}) {
  return <ProductPage product={product} />;
}

export async function getServerSideProps({params}) {
  // fetch data from an API or database
  const product = await fetch(`https://my-api.com/products/${params.id}`).then(res => res.json());

  return { props: { product } };
}

In this example, the getServerSideProps function is used to fetch data for a specific product based on the {params.id} passed in the URL. The data is then passed as a prop to the Product component.

Once the user navigates to a specific product page, Next.js will execute the getServerSideProps function on the server, fetch the data and render the Product component along with the fetched data before sending it to the browser.

By using server-side rendering, Next.js allows developers to build fast and efficient web applications that are easy for search engines to crawl and index.

Automatic code splitting

This next one isn't so much a tip or trick-- but a showcase of some of the cool stuff that's done for you behind the scenes.

Code splitting is a way of breaking down large JavaScript files into smaller chunks. This way, when a user visits a page, the browser doesn't have to download all the code at once, just the code needed for that specific page. This makes the page load faster and improves the overall performance of the application.

In Next.js, this is done automatically by using a feature called dynamic imports. This allows developers to split the code into smaller chunks that are only loaded when they are needed.

Next.js also splits the code by route, it generates a separate JavaScript file for each page, and it will only download the JavaScript code that's needed for the current page the user is visiting.

Client side navigation

next/link

next/link is a component provided by Next.js that allows you to create client-side navigation between pages in your application. It works by using the href and as props to specify the target route and the actual URL to be displayed in the browser.

Here is an example of how you might use next/link to create a link to a product page:

import Link from 'next/link'

export default function Home() {
  return (
    <div>
      <Link href="/product/123">
        <a>Product 123</a>
      </Link>
    </div>
  )
}

When the user clicks on the link, Next.js will use the href and to navigate to the correct route and update the URL displayed in the browser.

It's worth noting that when you use next/link to navigate between pages, Next.js uses React hydration to perform the navigation. React hydration is the process of taking a pre-rendered HTML and re-activating the React components on the client.

This way, the browser doesn't have to re-render the entire page, instead, it just needs to hydrate the pre-rendered HTML and attach the JavaScript event handlers. This process is faster and it provides a better user experience by avoiding the sudden flash of loading content.

Meta tags

next/head

Very similar to next/link, next/head is a component provided by Next.js that allows you to easily add meta tags and other head elements to your pages.

With next/head, you can set the title, description, keywords, and other meta tags for your pages, and also add custom head elements such as scripts, stylesheets, and links.

To use next/head, you simply import it and then use it as a component in your page. Here's an example of how you might use next/head to set the title and description for your homepage:

import Head from 'next/head'

export default function Home() {
  return (
    <div>
      <Head>
        <title>My Homepage</title>
        <meta name="description" content="Welcome to my homepage!" />
      </Head>
      <p>Welcome to my homepage!</p>
    </div>
  )
}

Here, the Head component is used to set the title and description meta tags for the homepage.

When the page is rendered, the title and description will be added to the head section of the HTML document.

It's worth noting that you can use next/head inside any component in your pages/ directory, not just the top-level component. This allows you to set specific meta tags and head elements for each page in your application.

Also, since we mentioned it earlier, you can use next/head along with getServerSideProps to set meta tags dynamically based on the request context.

Conclusion

Next.js is a fantastic framework for building web apps. I personally tend to gravitate to it because it offers features like dynamic routing, code splitting, server-side rendering, and static optimization to help you create performant and efficient apps.

Tools like next/link and next/head make it easy to handle client-side navigation and set meta tags for your pages. Whether you're a beginner or an experienced developer, Next.js is a great choice for building web apps. With the right approach, you can create high-quality, production-ready apps in no time.

If you are looking for more resources to learn more about Next.js, check out the official docs

I hope you use these tricks in this post in your next project! Stay tuned for a part 2! Thanks for reading, and HAPPY CODING!!

How To Give your React App a Holiday Theme with react-snowfall

professorjrod — Sun, 25 Dec 2022 22:24:40 +0000

Are you looking to spice up your React portfolio, personal projects, or websites with a fun holiday theme?

React-snowfall is a library that allows you to easily add a snowfall effect to your React project. Whether you want to bring some winter cheer to your website or just want to give your users a fun surprise, react-snowfall makes it easy to do so.

And who knows, with enough snowflakes, you might even be able to convince your boss to give you a day off because of "blizzard conditions"! So why wait? Let's get started!

Installation

To install react-snowfall, you will first need to make sure you have a React project set up. Then, you can use either npm or yarn to install the library. Using npm, you can install react-snowfall by running the following command in your terminal:

npm install react-snowfall

If you prefer to use yarn, you can run the following command instead:

yarn add react-snowfall

Once react-snowfall is installed, you can import it into your React component and start using it to add a snowfall effect to your project.

Customization

One of the great things about react-snowfall is that it offers a wide range of customization options. For example, you can change the appearance of the snowflakes by using a different image. To do this, you can use the images prop and pass in an array of the images you want to use.

For example, if you wanted to use a different snowflake image instead of the default snowflake, you could do something like this:

import snowball from './snowball.png';
const snowflake1 = document.createElement('img')
snowflake1.src = '/assets/snowflake-1.png'
const snowflake2 = document.createElement('img')
snowflake2.src = '/assets/snowflake-2.jpg'

const images = [snowflake1, snowflake2]
<Snowfall
  // Applied to the canvas element
  style={{ background: '#fff' }}
  // Controls the number of snowflakes that are created   (default 150)
  snowflakeCount={200}
  // Pass in the images to be used
  images={images}
/>

This would cause the snowflakes in your snowfall effect to be replaced with the snowball images. Keep in mind that you'll need to make sure the image is properly sized and formatted for use as a snowflake.

There are many other customization options available in react-snowfall, so be sure to explore the documentation to see all the possibilities!

Other notes

React-snowfall is a great library for adding a snowfall effect to your React project. Whether you want to bring some winter cheer to your website or just want to surprise your users with a fun effect, react-snowfall has you covered.

Just don't blame me if your boss makes you shovel virtual snow instead of giving you a day off!

Thanks for reading, happy holidays, and HAPPY CODING!!!

Zustand 101: A Beginner's Guide to Global State Management in React

professorjrod — Fri, 16 Dec 2022 18:16:30 +0000

If you're a React developer, you've probably heard of Redux, a popular JavaScript library for managing application state.

However, if you're looking for a simpler and more lightweight alternative, you might want to consider Zustand.

If you don't know already, global state management is the process of centralizing the shared state of a web application.

This helps to ensure that different parts of the application can communicate and share data with one another, and can reduce the risk of inconsistencies or bugs like prop drilling.

Zustand is a state management library for React that is easy to use, lightweight, fast, and most importantly: it is super simple to learn! Zustand allows you to manage your application's state in a simple and intuitive way, without the need for complex reducers and action creators like Redux.

Creating a Store

The first step in using Zustand is to create a store. A store is an object that holds your application's state and provides methods for updating that state.

To create a store, you'll need to import create from Zustand. The create function takes a function that returns your initial state as an argument:



import create from 'zustand';

const useCountStore = create((set) => ({
  count: 0,
}))

In this example, we've created a store with an initial state of { count: 0 }. Because the purpose of Zustand is to provide global state, the value of count can later be accessed in any component.

Updating State

Once you've created your store, you can update the state using the set method provided by the store. The set method takes a function that receives the current state as an argument and returns the new state:



store.set(state => ({ count: state.count + 1 }));

It's good practice to scope these functions in your store so that they can be accessed globally. It's kind of overkill for our simple use but it's good practice.



const useCountStore = create((set) => ({
  count: 0,
  increaseCount: () => set((state) => ({ count: state.count + 1 })),
  resetCount: () => set({ count: 0 }),
}))

Consuming State

To access the state from your React components, you'll need to use the useStore hook provided by Zustand. The useStore hook takes a function that receives the current state as an argument and returns the state values that you want to access. Here's an example of how we can display count to the screen:



import { useStore } from 'zustand';

function MyComponent() {
  const count = useStore(state => state.count);

  return <div>{count}</div>;
}

In this example, we've used the useStore hook to access the count value from the store and render it in a div element. Simple!

Modifying State

Modifying the state is very similar to accessing it. You will again use the useStore hook, but this time we can assign the function we want to access to a variable to use in our React component.



import { useStore } from 'zustand';

function MyComponent() {
  const count = useStore(state => state.count);
  const increaseCount = useStore(state => state.increaseCount)

  return (
    <div>
      {count}
      <button onClick={increaseCount}>Click me to increase the count!</button>
    </div>
  );
}

Now, if you click the button, count will be increased by 1. Because the state is global, all React components accessing count will display the count + 1 when mounted.

Wrapping Up

That's all you need to know to get started with Zustand in your React application! As you can see, it's a simple and intuitive way to manage your application's state without the complexity of Redux.

Give it a try and see how it can make your state management easier, more efficient, and easier to maintain. Thanks for reading and HAPPY CODING!!!

Jest: How to use its powerful unit tests with React

professorjrod — Sat, 03 Dec 2022 11:05:12 +0000

Why did I learn the Jest testing library, you ask?

Well, let me tell you: it's because I'm a total jokester, and I wanted to make sure all my code was as hilarious as I am.

Plus, with Jest, I can be confident that my code is working properly, even when I'm cracking myself up with puns and dad jokes. It's the perfect combination of function and fun-ctionality!im so sorry

Snapshot Testing

One of the coolest features of Jest is snapshot testing. This is a technique that allows you to capture the current state of a component or function and save it as a "snapshot" that you can use for later comparison.

When you run your tests again, Jest will compare the current state of the component or function to the saved snapshot and report any differences. This is an awesome way to quickly and easily catch changes in the rendering of your UI that you didn't expect.

For example, suppose you have a simple React component that displays a list of items:

import React from 'react';

const List = ({ items }) => {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

export default List;

To test this component with Jest, you can use a snapshot test like this:

import React from 'react';
import { render } from '@testing-library/react';
import List from './List';

test('List component renders items correctly', () => {
  const items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
  ];

  const { container } = render(<List items={items} />);

  // Take a snapshot of the rendered component and save it to a file.
  // The snapshot file will be stored in a __snapshots__ directory
  // next to the test file.
  expect(container).toMatchSnapshot();
});

In this test, we use Jest's render function from the @testing-library/react package to render the List component and capture its output. We then use Jest's toMatchSnapshot matcher to take a snapshot of the rendered component and save it to a file. The first time you run this test, Jest will create the snapshot file and save it in a snapshots directory next to the test file.

If you run the test again, Jest will compare the current output of the component to the saved snapshot and report any differences. For example, if you change the List component to display the items in reverse order:

import React from 'react';

const List = ({ items }) => {
  return (
    <ul>
      {items.reverse().map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

export default List;

When you run the tests again, Jest will detect the change in the output of the component and report a failure:

FAIL  src/__

Sweet... Failure!

Mocking

Mocking is a technique in software testing that involves replacing the dependencies of a unit under test with fake objects, so that the behavior of the unit under test can be controlled and the output can be predicted.

In the case of Jest, mocking can be used to stub the behavior of certain functions, allowing you to control the output of those functions in your tests. This can be a useful tool for isolating units of code and testing their behavior in a controlled way.

// myModule.js
export const myFunction = (x) => {
  // some complex logic...
  return x + 1;
}

// myModule.test.js
import { myFunction } from './myModule';

jest.mock('./myModule');

test('myFunction adds one to the input', () => {
  // Replace the implementation of myFunction with a fake that always
  // returns 5.
  myFunction.mockImplementation(() => 5);

  // Now, when we call myFunction in our test, it will always return 5
  // regardless of the input.
  expect(myFunction(2)).toBe(5);
  expect(myFunction(10)).toBe(5);
  expect(myFunction(-5)).toBe(5);
});

In this example, we use Jest's mockImplementation function to replace the implementation of myFunction with a fake that always returns the same value. This allows us to test the behavior of our code that depends on myFunction without having to worry about the complex logic inside myFunction itself.

Mocking can be a powerful tool for testing, but it should be used with caution. Overuse of mocking can lead to tests that are fragile and difficult to understand, so it's important to strike a balance when using this technique in your tests.

In conclusion

Jest is a powerful and easy-to-use JavaScript testing framework that can help you write effective and reliable tests for your code.

With features like snapshot testing, mocking, and code coverage, Jest has everything you need to confidently build and deploy your JavaScript applications. So, give Jest a try and HAPPY CODING!!!!

GraphQL vs tRPC: Which one is better for your project?

professorjrod — Sat, 03 Dec 2022 10:31:45 +0000

Are you tired of using clunky, outdated APIs for your projects? Are you ready to take your development to the next level with modern, efficient technologies? If haven't already, you need to check out tRPC and GrapQL!

Note: tRPC is intended for full-stack TypeScripters

They're quickly rising in popularity and I am seeing them mentioned frequently. But one thing I notice is a lot of people aren't really sure what sets them apart!

GraphQL and tRPC are both technologies for building APIs, but they have some key differences.

One of the main differences is that GraphQL is a query language for APIs, whereas tRPC is a fully typesafe (the t stands for TypeScript) remote procedure call (RPC) framework. This means that with GraphQL, clients can specify exactly the data they need from the API, and the server will return only that data, whereas with tRPC, the server provides a pre-defined set of procedures that the client can call to perform certain actions or retrieve data.

GraphQL uses a schema

Another key difference is that GraphQL is based on a [schema](https://www.ibm.com/cloud/learn/database-schema), which defines the types of data that can be queried and the relationships between them. This allows for strong typing and self-documentation of the API, which can help with development and debugging. tRPC, on the other hand, does not have a schema and relies on convention and pre-agreed upon data formats for communication between the client and server. ```js type Query { posts: [Post] users: [User] comments: [Comment] } type Post { id: ID! title: String! content: String! author: User comments: [Comment] likes: Int } ``` Strongly typed example of a GraphQL schema GraphQL really draws a hard line between your frontend and backend. It is especially useful with larger development teams, or teams that can't communicate well because the data that is being exchanged is essentially pre-defined to fit together- but the implementation is left to the developer. On the other hand with tRPC, you can think of it like exposing functions already defined in the backend to the frontend or vice-versa. This can make it easier to understand and use the API, especially for developers who are familiar with the concepts of RPC. ```ts import { createReactQueryHooks } from '@trpc/react'; import type { AppRouter } from '../pages/api/trpc/[trpc]'; export const trpc = createReactQueryHooks(); ``` Example hook defined using API's type signature that can be called from the client, typically using a higher order component
In contrast, GraphQL requires clients to construct their own queries to retrieve data, which can be more complex and require a deeper understanding of the schema and data relationships. Another difference is that GraphQL can be used with any transport layer, such as HTTP or [WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API), while tRPC is built on top of HTTP/2 and uses gRPC as the transport layer. This means that tRPC requires HTTP/2 support on both the client and the server, whereas GraphQL can be used with any HTTP client.

Conclusion

Overall, the main differences between GraphQL and tRPC are their approach to defining and accessing data, their reliance on a schema and strong typing, and the transport layers they use.

Both technologies have their own advantages and use cases, and as always-- which one is right for your project will depend on your specific requirements.

Thanks so much for reading! Transfer of data is the name of the game, so I always like to learn about new technologies. If you enjoyed this blog post consider giving me a like so other people can find this resource :) HAPPY CODING!!!!!

Guide to Layouts and Page Specific Layouts in NextJS

professorjrod — Wed, 30 Nov 2022 19:53:23 +0000

Layouts are a powerful abstract concept in NextJS.

It is a declarative way of telling Next the general layout of your pages without reusing code. Most commonly, this is just a navbar and a footer.

However, some use cases require pages to have their own layouts, rather than one for every single page. Some even require nested layouts!

Personally, I found it rather confusing trying to figure out how layouts work when I was getting started. Let me break it down for you.

If you haven't used layouts in NextJS, this is how they work.

import Navbar from './navbar'
import Footer from './footer'

export default function Layout({ children }) {
  return (
    <>
      <Navbar />
      <main>{children}</main>
      <Footer />
    </>
  )
}

This is your standard Layout component. Here we are passing a React component as props, and rendering it in between a Navbar and a Footer.

Children is going to be the page components that are being passed as props. This will come from your main app component.

In order to use this, we can import it in app and pass our page components as props like so:

import Layout from '../components/layout'

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

For those new to React, this is an example of a higher order component

Now that you have imported and used the Layout component, all of your pages from app are going to be formatted as you did in the layout definition. In this case, they will all have a <Navbar> above and a <Footer> below.

But what if you need a different layout? What if some pages need to have a sidebar as well as the <Navbar> and <Footer>?

// Detect dark theme var iframe = document.getElementById('tweet-1595762654530129920-448'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1595762654530129920&theme=dark" }

This is called a page specific layout. There are a lot of different ways to implement this, and some have their own advantages and disadvantages. But I think the simplest and most effective way is by creating a new property for our page components.

First, make the layout. You can do so just like the first example. Import the component that you want to incorporate in the layout, then declare children as props.

import React from "react";
import Sidebar from "../comps/sidebar";

export const SidebarLayout = ({ children }) => {
  return (
    <div>
      <Sidebar />
      {children}
    </div>
  );
};

export default SidebarLayout;

Above, we declared that the <Sidebar> is going to live above the components. Now in order to actually render this to the screen, it's going to be a little different.

First, in the component that needs a specific layout, import the layout.

Then you need to give it a new property. I like to use PageLayout. I do this at the bottom of the component before my exports.

import React from "react";
import SnapshotLayout from "../layouts/snapshot";

const MyNotes = (props: any) => {
  return (
    <div>
      <textarea placeholder="Write notes here!"></textarea>
    </div>
  );
};

MyNotes.PageLayout = SnapshotLayout;

export default MyNotes;

By adding MyNotes.PageLayout = SnapshotLayout;, we have given our new JSX element the property PageLayout. It's value is the layout we just made. This isn't going to render correctly though - Next doesn't know what to do with this information yet.

Now in order to render the correct layout for each page, let's add logic for it in App.

import React from "react";
import Layout from "../components/layout";
import "../styles/globals.css";

const MyApp = ({ Component, pageProps } ) => {
  return (
    <Layout>
      {Component.PageLayout ? (
        <Component.PageLayout>
          <Component {...pageProps} />
        </Component.PageLayout>
      ) : (
        <Component {...pageProps} />
      )}
    </Layout>
  );
};

export default MyApp;

Here, we have done two things. First we make a ternary statement. We check if the property PageLayout exists on a component. If so, render it with the PageLayout as a higher order component.

If not, simply render it without the page specific layout.

This works because we defined the property PageLayout in our component. When App retrieves a component, it's properties become accessible. The layout becomes it's own component because we extract it and declare it as a component. <Component.PageLayout> in this example would be the same as writing <SidebarLayout>.

The advantage of rendering layouts this way is scalability. Say you want to make more layouts for pages. All you have to do is create the layout, and import it in your component, and set it as the value of the component's PageLayout property.

Still confused? Typescript user? Watch this amazing video! It's a great, clear explanation of NextJS layouts and how to render them conditionally!

This is the repository for today's blogpost: https://github.com/professorjrod/layout-test

Thanks so much for reading! This article was a doozy, honestly. Page layouts ain't easy! If you enjoyed this blog post consider giving me a like so other people can find this resource :)

Have a great day and HAPPY CODING!!!

The Queue Data Strucure and How to Implement a Queue in Ruby

professorjrod — Sun, 20 Nov 2022 15:42:59 +0000

If you don't already know what a queue is, it's quite simple.

I'm sure all of us have been in queues before-- like at the grocery store or bank. The person in the front of the line is helped first, then the second person, then third, and so forth.

The exact same concept is what defines a queue in computer science.

The queue data structure always behaves like a real queue. The element that was inserted first will always be removed from the queue first. A common term for this is First in First Out (FIFO).

How can we implement a queue in Ruby?

You can use an array as a queue in ruby if you use certain Array methods

Array#unshift
Array#pop

Example:

queue = Array.new
queue.unshift "apple"
queue.unshift "orange"
queue.unshift "banana"

# queue is: ["apple", "orange", "banana"]

queue.last  # peek returns "banana"

queue.pop # "banana"
queue.pop # "orange"

# queue is: ["apple"]

Here we use Array#unshift to add an element to the queue. Array#pop removes the first element from the queue, and Array#last peeks at the first element.

There are some other useful methods like Array#size and Array#empty? that are commonly used by developers for queues.

Built-in Queue Class

If you are a syntax sugar eater like myself (Ruby 4 lyfe), you will be happy to learn that Ruby has a built-in Queue class.

Unlike the array implementation from before, the Ruby Queue class is thread-safe and commonly used for coordinating work in multi-threaded programs.

It is especially useful in threaded programming when information must be exchanged safely between multiple threads. Ruby's Queue has many methods that are more are less the same as Array.

It has similar methods to add elements to the back of the queue, such as #push, #enq, and #<< (the shovel).

It also has similar methods as the Array class to remove elements from the queue like #pop, #deq, and #shift.

#Create a new QUEUE q1
queue = Queue.new
 
queue.push(5)
queue.push(6)
 
#Prints the element
             puts queue.pop
                 puts queue.pop

5
6

You can see here that the Queue methods are basically exactly the same as Array, but there is some built0in magic behind the scenes in order for multi-threading to work.

For instance jn the example above, calling pop again to the empty queue will put your current thread to sleep & wait until something is added to the queue.

The SizedQueue

The SizedQueue in Ruby is the same as the regular Queue class but with a size limit, hence the name.

Whenever the queue is full, the push (and <<) methods will suspend the current thread until and item is taken off the queue

queue = SizedQueue.new(5)

queue.push(:oranges)
queue.push(:apples)
queue.push(:blue)
queue.push(:orange)
queue.push(:green)
# At this point, the SizedQueue is full

queue.push(:throw_expection)
# data_structures/queues/queue.rb:81:in `push': No live threads left. Deadlock? (fatal)
# 1 threads, 1 sleeps current:0x00007ff54f407130 main thread:0x00007ff54f407130
# * #<Thread:0x00007ff54f86ef38 sleep_forever>
#    rb_thread_t:0x00007ff54f407130 native:0x000000010dd24dc0 int:0
#    data_structures/queues/queue.rb:81:in `push'
#    data_structures/queues/queue.rb:81:in `<main>'
#   from data_structures/queues/queue.rb:81:in `<main>'

One useful thing about the sized queue is that you can choose to raise an exception, passing true as an argument like so:

queue.push(:throw_expection, true)
# data_structures/queues/queue.rb:83:in `push': queue full (ThreadError)
#   from data_structures/queues/queue.rb:83:in `<main>'

And that's it! If you want, leave a comment and I will add some more Ruby implementations of the queue data structure. I hope this helped for my peeps out there studying Data Structures and Algorithms! HAPPY CODING!

How React Router can cause unexplained behavior with your browser

professorjrod — Thu, 03 Nov 2022 01:01:02 +0000

Recently a friend was having a super weird bug with their React app. Whenever you would interact with a link, instead of being routed to the correct client-side component, the screen is replaced with raw JSON.

However, if you use your browser's refresh button after this, it suddenly renders correctly. Like so:

They were pulling their hair trying to figure this out!

What's going on?

Well, it turns out it has to due with the way browsers handle http requests from the URL.

React Router isn't actually "routing" anywhere from a HTTP sense -- it's just rendering different JavaScript/HTML and storing its "location" in the URL.

When you visit a URL that happens to be exactly the same as your API route. When that happens, your browser makes a GET request back to the server for that route, so you just get whatever your server sends.

Your server routes and your React Router routes SHOULD NOT conflict. How can we fix this?

Well, it's pretty simple--

You really have three options here:

1.
Use a hash router

This is a that uses the hash portion of the URL (i.e. window.location.hash) to keep your UI in sync with the URL. It's the difference between website.com/api and website.com/#/api

Because of this URL hash, it puts no limitations on supported browsers or web server. Server-side routing is independent from client-side routing, which prevent just rendering JSON.

2.
Redirect all HTTP requests to root,

meaning /, /something and /anything will serve /. Then host your API on another subdomain, like api.mydomain.com

3.
Choose a route to serve your API from

This can be something like mydomain.com/api. Forward all requests from any route EXCEPT /api and it's subroutes to the root.

Personally, I would go with option 3 as I believe it's cleanest. Just forward all requests except if it's an API request. Super simple.

I hope this helps anyone who is having trouble with their browser rendering JSON instead of their React component! This was a weird thing I have never encountered before so I thought I would share it with the world!

Thanks so much for reading! Have a great day and HAPPY CODING!

How to Bootstrap a New Project Using NestJS and React

professorjrod — Mon, 17 Oct 2022 05:33:32 +0000

NestJS is an efficient, scalable framework on Node.js for building server side applications. It is quickly growing in popularity, and currently is my favorite server side framework (Rails will always have a place in my heart though).

Before we get started, you're going to need to install Node.js and npm. I highly recommend using a package manager like nvm if you don't have one already.

A great use for Nest is to pair it with a React frontend because your whole codebase can then be in the same language. No need to find a Ruby dev for the backend and a PHP dev for your front end. Typescript baby!

Anyways, getting started with using NestJS and React is super simple and I'll walk you through it.

Note: Nest is written in Typescript, so if you haven't already made the transition from Javascript well--here's why you should

Setting up

First, you're going to want to create seperate folders for your frontend and backend so



$ mkdir frontend && mkdir backend

Now let's initialize a new Nest project. If you haven't already, you need to download @nestjs/cli. To do this:



$ npm i -g @nestjs/cli
$ nest new backend

Great! Now, for the frontend we're actually going to use Create React App. It's an officially supported way to create single-page React applications. It offers a modern build setup with no configuration.



$ npx create-react-app frontend --template typescript

Awesome! Now, we have downloaded everything for a good start.

Dev servers

You can start the development for the backend by using:



$ npm start:dev

and the frontend development server with:



$ npm start

Make sure you're in their respective directories, of course.

Testing

If you haven't set up testing for your app, now is the time. By default, Nest uses Jest. In order for Jest to transpile Typescript you will need to install ts-jest.

You can do so with:



$ npm i -D @nestjs/testing ts-jest @types/jest

If you're having problems you might need to make a config file so Jest knows what files to transpile:



$ npx ts-jest config:init

And that's it! If you have any problems, definitely check out the official documentations here:

NestJS
Create-React-App
Jest
ts-jest

And, as always, you can clone the repo if you'd like

For my next blog post I'll probably setup another interesting stack! This stuff is definitely nice to have in one source. Hope this helps and HAPPY CODING!!!

How to use Faker: My Favorite Ruby Gem

professorjrod — Thu, 13 Oct 2022 06:10:53 +0000

Faker is a Ruby gem that is used for generating fake data such as names, addresses, and phone numbers.

It's also my favorite Ruby gem as of lately.

I've been finding myself making a lot of projects that need some sort of data. Usually, most people would either use an API or make their own dataset. But Faker makes it a lot simpler.

Here's how you use it:

First, install it and add the library to your script

require 'faker'

Then, you're gonna want to check out the documentation for all of the different methods. Here's the github page

Let's make some fake identities today.

fake_person = Faker::Name.name
puts fake_person

I'm starting with just a first name.

Nice! Now let's make it a bit more interesting. I'm gonna add some real-life details that a normal person would have. Again, there's lots of options just checkout the docs!

fake_person = { first_name: Faker::Name.first_name, 
last_name: Faker::Name.last_name, 
email: Faker::Internet.email, 
phone: Faker::PhoneNumber.phone_number }
puts fake_person

Nice! Its coming along nicely.
A lot of the time when I'm using the Faker gem, I'm usually creating a database seed or something. So let's try that here. I'm just going to put it in a loop.

10.times do |i|
  fake_person = { first_name: Faker::Name.first_name, last_name: Faker::Name.last_name, email: Faker::Internet.email,
                  phone: Faker::PhoneNumber.phone_number }
  puts "Person #{i + 1}: #{fake_person}"
end

Awesome! This is the power of Faker! Isn't that cool? A bunch of fake identities. You could create a fake world out of them!

Try using faker in your next project! It's a lot of fun. Also, I added an Escape from Tarkov category for all you Tarkov fans out there with a TON of in game categories so stay tuned for the next release!

HAPPY CODING!

How to effortlessly implement client-side routing with ReactJS using React Router v6

professorjrod — Thu, 06 Oct 2022 00:18:25 +0000

In order to use this guide, you must first have a working React app OR follow along using this demo.

What is client-side routing and React Router?

Client-side routing is the internal handling of a route inside of your JS file that is rendered to the front end (or client).
React Router is the standard routing library for React.

Getting Started

In the parent component of the pages you would like to route to, import BrowserRouter and Route, and Routes from React Router.

import { BrowserRouter, Route, Routes } from "react-router-dom";

Next, render BrowserRouter around the components that you will be using. In this example, we have the components Home, About, and Topics.

import { BrowserRouter, Route, Routes } from "react-router-dom";
export const Example = () => (
<BrowserRouter>
  <Home/>
  <About />
  <Contact />
</BrowserRouter>
)

Now, wrap them with Routes. This is new in React Router v6.

import { BrowserRouter, Route, Routes } from "react-router-dom";
export const Example = () => (
<BrowserRouter>
  <Routes>
    <Home/>
    <About />
    <Contact />
  </Routes>
</BrowserRouter>
)

Great, now if we want to actually route to these components whenever a button is clicked. (Or some other event, of course). To do so, import Route from our library and pass the components as props to the route.

You also need to pass a string with the desired path to route. It's a good idea to stick with "/" for the main or "home" component/s of your app.

import { BrowserRouter, Route, Routes } from "react-router-dom";
export const example = () => (
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<Home/>} />
      <Route path="/about" element={<About />} />
      <Route path="/about/contact" element={<Contact />} />
    </Routes>
  </BrowserRouter>
)

Now we can link to these components using the paths we defined. Great!

Incorporating the routes into our app

If you have a button that you want to use to link to these components, all you need to do is import Link from our library in the component that you want route from.

Plain text works here, but I chose to add a Button component so it looks a little nicer. Now that we have made a component to link everything up, all we have to do is import it to the root component and put the component inside of the BrowserRouter to be rendered inside of Example

import { BrowserRouter, Route, Routes } from "react-router-dom";
export const Example = () => (
  <BrowserRouter>
    <Buttons/>
    <Routes>
      <Route path="/" element={<Home/>} />
      <Route path="/about" element={<About />} />
      <Route path="/about/contact" element={<Contact />} />
    </Routes>
  </BrowserRouter>
)

You're going to want to make sure that it's inside of the component, but you don't need it inside of since it's they are just the buttons and not components meant to be routed to.

Now, whenever we click on a button in ButtonContainer, the linked component will render. And whenever you click another button, the previous component will unmount and then the next linked component will render.

Lastly

This pretty much works like a page redirect, but faster since we don't have to retrieve HTML from a web server or rerender unnecessary components.
This is the power of React Router!

In this article we learned how to implement basic client-side routing in React using React Router v6 and discovered just how simple it can be!
I have gotten some interest in nested routing, so if you'd like to see another article on React Router leave a comment! HAPPY CODING!!!