 

Project productivity highly depends on your choice of product management tools.
<Bold styles={{ 'variant': 'colors.primary' }}>Project management</Bold> requires coordination, management, and overseeing of projects. In the technical space, a project manager sees a project from beginning to end, ensuring the tasks are completed promptly with as little friction as possible. Whether you are freelancing, developing your own project or business, or in a corporate setting, project management is a must.

![Project Management](https://res.cloudinary.com/bytesizedpieces/image/upload/v1685045815/article/project-management-tool/z6qJ7n9ZLC5FsxWyfalsR-transformed_iznjzh.jpg)

Project managers typically need to utilize project management software to see through a project's life. These tools are responsible for the organization and communication necessary to get to the project point fast, plan and see success. These tools indicate progress, ensure proper assignment of responsibilities to teammates, and enable seamless ways to receive status reports and burndown charts.

Let’s take a look at some of the top project management tools that are being used throughout the industry.

## Project Management Tools

1. <Anchor options={{
    'type': 'affiliate',
    'name': 'ClickUp',
    'loc': '1'
}} href="https://clickup.pxf.io/c/3556949/1416724/16855">ClickUp</Anchor>
2. <Anchor options={{
    'type': 'affiliate',
    'name': 'Monday',
    'loc': '1'
}} href="https://mondaycom.grsm.io/umrpf88n8cxx">Monday</Anchor>

## About ClickUp

<Anchor options={{
    'type': 'affiliate',
    'name': 'ClickUp',
    'loc': '2'
}} href="https://clickup.pxf.io/c/3556949/1416724/16855">ClickUp</Anchor> centralizes its focus around productivity.
<br></br>
<br></br>
<Bold>The ClickUp team believes the use of too much of different project management software hinders productivity. Usage of multiple tools silo teams into separate ecosystems and force teams to spend unnecessary time ramping up.</Bold>

<br></br>

![ClickUp One app to replace them all](https://res.cloudinary.com/bytesizedpieces/image/upload/v1685045911/article/project-management-tool/Screen_Shot_2023-05-25_at_1.18.24_PM_tkkycy.png)

ClickUp is unique as it is a flexible project management software that can scale with any simple, to more complex business needs. ClickUp works for every team, empowering the use of one app to plan projects, organize, and collaborate.

### Pros of ClickUp

-   Easy Time Tracking
-   Customizable Portal
-   Collaboration & Communication

#### Easy Time Tracking

ClickUp makes it easier to manage your time at work by offering flexible time-tracking features that help you focus on your work and improve time management.

![Time Management](https://res.cloudinary.com/bytesizedpieces/image/upload/v1685045982/article/project-management-tool/0_SPzykn0XDPnSXuf5_j59cae.jpg)

Use the project management software to track time, set estimates, add notes, and view reports to be more in control of your work hours.

#### Customizable Portal

Another great advantage of ClickUp is it offers **_15+ views_** to choose from, meaning you can view your projects, timelines, and team structure however you like.

Here are just some of the many options for customizing your view for project management:

* List View
* Box View
* Calendar View
![ClickUp Calendar View](https://res.cloudinary.com/bytesizedpieces/image/upload/v1685057170/article/project-management-tool/Drag-and-Drop-tasks-Calendar-View_dfuesj.jpg)
* Board View
![ClickUp Board View](https://res.cloudinary.com/bytesizedpieces/image/upload/v1685057225/article/project-management-tool/board_view_b4x6iu.png)
* Gantt View
* Mind Map View (planning and organizing projects and tasks visual outlines)
![ClickUp Mind Map View](https://res.cloudinary.com/bytesizedpieces/image/upload/v1685057336/article/project-management-tool/mind_map_y8irjj.png)
* Workload View (visualizing your team’s capacity and managing resources)
* Activity View (an aggregated view of all activities across a specific location, people, and project type)

My favorite views ClickUp offers are the board and mind map view.

The mind map is excellent for envisioning flows as a web developer and enacting certain user stories. The board is perfect for quick and easy task management with seamless status updates.

#### Collaboration & Communication

ClickUp offers advanced features for team collaboration and communication.

![Team Collaboration](https://res.cloudinary.com/bytesizedpieces/image/upload/v1685046038/article/project-management-tool/0_xZIF7akULsgH1OTc_ulqb7v.jpg)

Small to large teams are able to streamline all communication in one platform and collaborate with anyone in real time while promoting team transparency, therefore making this highly effective for project management needs.

## About Monday

<Anchor options={{
    'type': 'affiliate',
    'name': 'Monday',
    'loc': '2'
}} href="https://mondaycom.grsm.io/umrpf88n8cxx">Monday</Anchor> aims to help teams and organizations with operational efficiency by tracking projects and workflows, visualizing data, and team collaboration. It includes automation capabilities and supports integrations with other work apps.

![Monday.com with data visualizations](https://res.cloudinary.com/bytesizedpieces/image/upload/v1685046072/article/project-management-tool/0_1En8ALCJf8YDQ6pR_ergaxk.jpg)

Project management software Monday unlocks effortless collaboration by striving to centralize everything you do in one place. With one end-to-end solution, Monday integrates seamlessly with all your favorite tools.

Now let's compare the two project management software ClickUp and Monday. ClickUp has an edge for time-tracking integrations, as well as design and brainstorming tools such as Figma and Miro. Meanwhile, Monday allows capabilities for marketing, sales, and payments while still offering necessities in project management tools such as Kanban boards, timelines, and calendar views.

### Pros of Monday

-   Powerful reporting and analytics
-   Tracking Features
-   Automation Capability

#### Powerful Reporting and Analytics

Data visualizations offered enable users to see their work breakdown structure.

![Reporting and Analytics](https://res.cloudinary.com/bytesizedpieces/image/upload/v1685046101/article/project-management-tool/0_iXrPoalmT0sfyMDr_tgkde8.jpg)

Observe how well team members are performing in the project management software, how fast tasks get done, how tasks change over time, and more.

#### Tracking Features

The use of <Anchor options={{
    'type': 'affiliate',
    'name': 'Monday',
    'loc': '3'
}} href="https://mondaycom.grsm.io/umrpf88n8cxx">Monday's</Anchor> performance insights view enables tracking of how long items spend on a specific status or in a specific phase. With these insights, one can better analyze and enhance productivity.

#### Automation Capability

Monday enables teams or individuals to create their own automated workflows or to choose from pre-prepared templates.

![Automation](https://res.cloudinary.com/bytesizedpieces/image/upload/v1685046128/article/project-management-tool/automation_en5byx.jpg)

Monday offers automation template combinations tailored to your team’s needs and makes them fit into any workflow.

#### ClickUp vs Monday

<Anchor options={{
    'type': 'affiliate',
    'name': 'ClickUp',
    'loc': '3'
}} href="https://clickup.pxf.io/c/3556949/1416724/16855">ClickUp</Anchor> can handle corporate settings, however, is likely best for solo or small companies/teams. ClickUp explicitly focuses on project management through its extensive customization capability, time tracking, and collaboration without emphasis on analysis for streamlining processes.

<br></br>
<br></br>

<Anchor options={{
    'type': 'affiliate',
    'name': 'Monday',
    'loc': '4'
}} href="https://mondaycom.grsm.io/umrpf88n8cxx">Monday</Anchor> offers many of the same features, and both offer integrations to increase the capabilities of each service. The project management tool you need depends on what you’re using it for. For larger organizations, Monday is best because it unlocks team performance analysis, automation for larger processes, and tracking.

---

Remember, developers are creatures that turn coffee into code. So I'd very much appreciate if you <Anchor slug="overcome-imposter-syndrome" action="buy_coffee_overcome-imposter-syndrome_click" href={"https://www.buymeacoffee.com/stefanagloginic"} styles={{ 'display': 'inline-flex', 'alignItems': 'center' }}>bought me a coffee! <TinyIcon alt="buy me a coffee icon" styles={{
    width: '23px',
    height: '23px',
    marginLeft: '3px'
}} src={"https://res.cloudinary.com/bytesizedpieces/image/upload/v1639952578/assets/buymeacoffee_udskx4.png"} /></Anchor> I’m a new writer and I will be posting very frequently on my findings and learnings in the tech industry and beyond. Join my newsletter if you would like to stay tuned!

Thanks for reading again! ❤️


Project management requires coordination, management, and overseeing of projects. In the technical space, a project manager sees a project from beginning to end, ensuring the tasks are completed promptly with as little friction as possible. Project management can be

Decide which project management software ClickUp or Monday to use for planning projects, time management, analytics and reporting and automation.

Project Management Tools ClickUp and Monday

10x your Productivity with Project Management Tools ClickUp and Monday


Metadata and meta tags are underestimated SEO optimization tools. Newer web developers may completely gloss over this powerful technique to improve the discoverability of the websites for which they are responsible. One might discover the lacking of meta tags in a website via tools like <Anchor href="https://www.checkbot.io/">checkbot.io</Anchor>, or one might realize when they share a link to their website, an image doesn’t show up with the link on Twitter or Facebook like other websites! Why is that?

![Vercel OG Image Generation](https://res.cloudinary.com/bytesizedpieces/image/upload/v1672883067/article/og-dynamic-image/og_image_generation_kzk5dv.png)

In this article, we will focus on a few critical concepts before diving into NextJS new open graph dynamic image updates. In order to truly grasp the incredible benefits of this released feature, we need to have a solid understanding of the following:

1.  Metadata meaning and meta tags
2.  Open graph protocol
3.  Shortcomings with the standard method of adding image meta tags
4.  Open graph dynamic images with NextJS

## Metadata meaning and meta tags

To first understand why we care about the recent NextJS release, we need to have a background for the notion of metadata, what it means, and how meta tags fall under the metadata scope.

![What is Metadata?](https://res.cloudinary.com/bytesizedpieces/image/upload/v1672882529/article/og-dynamic-image/metadata_k5fl6r.png)

### What is Metadata?

**Generally speaking, metadata is defined as data that describes data.** A more helpful way to understand metadata is by examining its application in specific areas. In this case, let’s understand metadata when applied to web development.

**In web development, metadata consists of unseen HTML elements that serve the purpose of communicating and clarifying relevant website information for search engines like Google**, ultimately making it a critical role in effective Search Engine Optimization.

Metadata still feels a bit abstract, and this is where meta tags come in to clear up the picture and give it a bit more structure.

![What is a Meta Tag?](https://res.cloudinary.com/bytesizedpieces/image/upload/v1672882529/article/og-dynamic-image/metatag_rktwkv.jpg)

Meta tags help us accomplish the goal of communicating and clarifying the relevant website information for our search engines. **Meta tags are the actual snippets of text that describe a page’s content.** They don’t appear on the page itself, but they are present in the page’s source code for crawlers to parse.

How do we create a meta tag on a website? Let’s examine an example of the usage of meta tags in <Anchor href="http://bytesizedpieces.com/">ByteSizedPieces</Anchor>!

```jsx
<Head>
    <title>ByteSizedPieces blog posts about ReactJS web development</title>
    <meta name="description" content="A web development blog focused on interview preparation, javascript, css, react, accessibility, web development tools, mobile development, and the tech industry." />
</Head>
```

In the above example, we have a few details to make note of.

1.  The `<head>` element we have utilized serves as a container for our metadata and is placed between the `<html>` tag and the `<body>` tag. As such, any metadata should be positioned as children of the `head` element!

2. The `meta` element is our meta tag! Note how we have some attributes, names, and content which tell the search engine crawlers that the meta tag is specifically intending to provide a description of our website, as well as the supplemental content which is the actual description.

<Anchor href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name">
  Meta tags can have several names and provide a range of information.
</Anchor> We can see a full list of the meta tags to a site via inspection of developer
tools.

Looking at Medium, we can see many meta tags set within the `head` element! This explains why Medium does so well in the SEO space!

![Medium Meta Tags](https://res.cloudinary.com/bytesizedpieces/image/upload/v1672882564/article/og-dynamic-image/medium_metatag_brjmef.png)

## Open Graph Protocol

The open graph protocol is another metadata extension that gives websites a unique stance in the social graph. More specifically, whenever you share a URL on social media, Open Graph meta tags (OGP tags for short), inform what supplemental information comes with that URL. It could be the title, description, or in many cases an image.

On Twitter, a supplemental image influences engagement statistics by leaps and bounds. Retweets increased by 150%, clicks increased by 20%, and favorites increased by 90%.

![Engagement increases with images!](https://res.cloudinary.com/bytesizedpieces/image/upload/v1672882702/article/og-dynamic-image/engagement_increase_a54yra.jpg)

The numbers do not lie, and images as metadata are important!

How do we typically communicate the image with the URL? Well, open graph is intended to be generalized across social media platforms. However, one needs to stay attentive to potential unique handling. <Anchor href="https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards">Twitter Cards</Anchor>, for instance, look similar to Open Graph tags, but still deviate from the rulesets of OGP!

To avoid complications, we focus our attention on the general OGP conventions. To turn your own web page into a graph object, you would define a meta tag that follows the rulesets defined by the social media platform. For Facebook, the meta tag for an image would look like the following.

```
<meta property="og:image" content="" />
```

In conjunction with the importance of image metadata with shared URLs on social media, we should note the impact an aesthetic image makes versus one with low quality or visual relevance to the text.

This leads me to my final review topic prior to exploring NextJS OG Dynamic Image release.

# Shortcomings with the standard method of adding image meta tags

We have established that images drive better conversion rates and the quality of images matters. The unfortunate fact is, with large blogs or e-commerce sites, a lot of effort goes into asset creation. The standard method of adding image meta tags requires individually creating images per page. This has proven to be inefficient and a waste of developer and designer time. If only things could be standardized!

![Massive Waste of Time Sign](https://res.cloudinary.com/bytesizedpieces/image/upload/v1672882725/article/og-dynamic-image/waste_of_time_zv887c.jpg)

In comes <Anchor href="https://vercel.com/ambassadors/codezysg">Vercel</Anchor> with their new amazing release for NextJS. Now we can see the beauty behind OG Dynamic Images.

## Open graph dynamic images with NextJS

First we answer the following question.

### What are Open Graph Dynamic Images?

Open graph or OG dynamic images enable social images to be generated on the fly per developer specification. These images can be configured to include dynamic properties, unlocking asset customization as well. Finally, the image generation runs on the <Anchor href="https://vercel.com/docs/concepts/functions/edge-functions">vercel edge</Anchor>, to deliver rapid results based on user local, and is combined with caching for faster results.

Now that we understand what OG dynamic images are, let’s go over how we can create a new API for OGImage and leverage it in our website.

Before we begin, a gentle reminder that this feature is only available to projects that have been brought to version 13 of NextJS, and is still experimental.

### Steps to leverage OG Dynamic Images

1.  Install <Anchor href="https://www.npmjs.com/package/@vercel/og">@vercel/og</Anchor> npm package
2.  Create a new API for OGImage
3.  Use new API

## Install vercel/og npm package

```
npm i --save @vercel/og
```

replace npm with `yarn` or `pnpm` as needed.

## Create a new API for OG Image

First let’s decide what we are going to create.

Our asset is intended for to blog articles. When we share a link on social media to our blog post, ideally we would like to see an image with a background color, our blogs name, the title of the article and the category! OG Dynamic Images will come in handy here, as we will be able to set the dynamic properties for our images, and never have to look back!

Under `pages/api/*` we will want to create a new file `og.js`

Here we will import the `ImageResponse` object from `@vercel/og` . This object is responsible for processing our provided HTML and CSS, and convert that into an appropriate image which the endpoint will serve.

Recall the mention that this process is experimental, therefore we need to enable the experimental edge temporarily via:

```js
export const config = {
  runtime: 'experimental-edge',
};
```

Finally, let’s create a `handler` that takes in a request object, this process should be familiar to any <Anchor href="https://nextjs.org/docs/api-routes/introduction">NextJS endpoint</Anchor>.

Now our `pages/api/og.js` file should look like the following:

```js
// pages/api/og.js

import { ImageResponse } from '@vercel/og';

// enable experimental edge

export const config = {  
  runtime: 'experimental-edge',  
};

export default function handler(req: NextRequest) {}
```

Now we want to define some HTML and CSS and pass it to our imported `ImageResponse` object. For sake of simplicity, we will statically set filler text for the intended dynamic article title and category.

Below is the following rendering:

![Image Generated at the Vercel Edge with Static Fields](https://res.cloudinary.com/bytesizedpieces/image/upload/v1672882754/article/og-dynamic-image/og_image_edge_hljizx.png)

And below is how we did it via HTML and CSS passed to `ImageResponse`.

```js
// pages/api/og.js

import { ImageResponse } from '@vercel/og';

// enable experimental edge
export const config = {  
  runtime: 'experimental-edge',  
};

export default function handler(req: NextRequest) {  
  return new ImageResponse(  
    <div  
      style={{  
        backgroundColor: "#6800A3",  
        backgroundSize: "100%",  
        height: "100%",  
        width: "100%",  
        color: "#F9F9F9",  
        display: 'flex'  
      }}  
    >  
      <div  
        style={{  
          padding: "20px",  
          display: 'flex',  
          flexDirection: 'column',  
          alignItems: 'center',  
          justifyContent: 'center',  
          width: '100%'  
        }}  
      >  
        <h1  
          style={{  
            fontWeight: 900  
          }}  
        >  
          ByteSizedPieces  
        </h1>  
        <h2>Article title should go here</h2>  
        <div style={{  
          'width': '100%',  
          display: 'flex',  
          justifyContent: 'center',  
          alignItems: 'center',  
          textAlign: 'center'  
        }}>  
          <p style={{  
            textAlign: 'center',  
            backgroundColor: '#A341DB',  
            borderRadius: '50px',  
            padding: '5px 10px'  
          }}>Category here</p>  
        </div>  
      </div>  
    </div>  
  );  
}
```

If you want to play with this example, vercel offers an OG Image Playground. I have created a <Anchor href="https://og-playground.vercel.app/?share=jVRtT4MwEP4rTY3hy5LBXowjc8leNPGbURO_7AujN-hklJTihgv_3ZaN0boaBwnp9R7u7rnn2gMOGQHs4zGhX8sU1U8uygQeDofGRmgVhJ8RZ0VK5ixh3EdLfHN377rT_hJ3bLA3-g0K5bnurQGJgUaxsLp2lIjY6gnPSZ9G6jWchOZZEpQ-ctYJ7J3GUVXH1aTZ0BnaOCKUBYTQNFKJem62N7Jc5DF8amdBOYSCslQiZMHFNjUxQUKj9FnANlcASAVwE7ApckHX5ZxJVypbZAWdmuSoHp25tmw1vpJx7Om_2ijL0mW6j5MoI9fVnW1QIyxCs1KAUpi8UAgh1zJ2Y88ooDeZckHDBJCgQn7zmBUJQRGTg8BBwns6XCpkrdKpWTsN7atluaqj_-oiYC-mCtT69cYbnRlnf7TZEsRIYjljzs20P_AWswsg4wT4a0BooUoeylH9DTlPsjPM9shTCFPYyTwQEDFennTIdBm6Uof22GjWcY07mGVq0HPsH3AtDfblZdDBx8ON_YEyCKyKCPvrIMmhg2HLNvS9zNRdI3a1JeOo4XvcroBgX_ACquoH">shareable playground here</Anchor>.

Now we get to the fun part, which are the dynamic traits to the generated image!

Our handler always receives a `Request` object as an argument. From the `req` we will obtain the `url` and retrieve provided `searchParams` .

searchParams are query params set when we use our endpoint via a meta tag. The query params can be dynamic or static depending on the developer. If this isn’t making too much sense, hang tight, when we use the endpoint we are creating it will click!

Let’s expect for now from our query params, a title and category field. We will set fallbacks should something unexpected happen and they are not set correctly.

Then we will just use those fields in our HTML and CSS passed to `ImageResponse`!

```js
// pages/api/og.js

import { ImageResponse } from '@vercel/og';

// enable experimental edge  

export const config = {  
  runtime: 'experimental-edge',  
};

export default function handler(req: NextRequest) {  
    //  get searchParams  
    const { searchParams } = new URL(req.url);  const { title = 'New Article', category = '' } = searchParams;

    return new ImageResponse(  
        <div  
      style={{  
        backgroundColor: "#6800A3",  
        backgroundSize: "100%",  
        height: "100%",  
        width: "100%",  
        color: "#F9F9F9"  
      }}  
    >  
      <div  
        style={{  
          padding: "20px"  
        }}  
      >  
        <h1  
          style={{  
            fontWeight: 900  
          }}  
        >  
          ByteSizedPieces  
        </h1>  
        <h2>{title}</h2>  
        <div style={{  
          'width': '100%',  
          display: 'flex',  
          justifyContent: 'center'  
        }}>  
          <p style={{  
            width: '150px',  
            backgroundColor: '#A341DB',  
            borderRadius: '50px'  
          }}>{category}</p>  
        </div>  
      </div>  
    </div>  
  );  
}
```

Note that we adjusted the image to leverage the title and category variables now!

We have completed the first big part for OG Dynamic Images. The endpoint is set to expect two dynamic fields, a title and category, and will consume the provided HTML and CSS and return an image rendered with those fields.

You can test if the endpoint is working by visiting your running local instance of the app at ```https://localhost:3000/api/og?title=test&category=react```

Note that in the test I have supplied the query params `title` and `category`. We observe an element that when inspected in the Developer Tools, reveals an `img` element. Neat!

Now the final detail comes to bring this full circle.

## Use new API

Define a meta tag in the `head` for the page you would like the asset to display. For me that would be within `pages/posts/[slug.js]`

```jsx
<Head>
    <meta property="og:image"
      content=\`https://bytesizedpieces.com/api/og?title=${getPostShortTitle(frontMatter) || ''}&category=${getPostCategory(frontMatter)}\`
    />
</Head>
```

A few details to note here that are very important for this to work.

You _must_ specify the following attributes:

- property as `og:image`
- content with value set to the _deployed_ instance for your app

Finally, check out how I provided the query params `title` and `category` to the value for the `content` attribute!

frontmatter is a representation of parsed YAML metadata each of my articles begin with. Thus I will achieve at each `bytesizedpieces.com/posts/*` route a dynamically generated asset at the edge, with built in caching!

Amazing!

Vercel is a no brainer. The improvements to NextJS are ever enticing. <Anchor href="https://vercel.com/ambassadors/codezysg">If you are interested in joining Vercel, try it out!</Anchor>

## Custom Fonts in OG Dynamic Image

One final mention, note that the supplied image contains the <Anchor href="https://fonts.google.com/specimen/Poppins">Poppins</Anchor> typeface. If you would like to utilize a custom font, NextJS have accommodated this use case.

By making use of `fetch` you can supply a `URL` instance with the path to your custom fonts, and await the result in the handler. <Anchor href="https://vercel.com/docs/concepts/functions/edge-functions/og-image-examples#using-a-custom-font">Refer to the following documentation to see how this is accomplished.</Anchor>

## Testing

Test open graph images on Facebook, LinkedIn and Twitter separately, or take advantage of an open graph debugger.

1.  <Anchor href="https://developers.facebook.com/tools/debug/">
      Facebook open graph Debugger.
    </Anchor>
2.  <Anchor href="https://cards-dev.twitter.com/validator">
      Twitter open graph Debugger.
    </Anchor>
3.  <Anchor href="https://www.linkedin.com/post-inspector/">
      Linkedin open graph Debugger.
    </Anchor>
4.  <Anchor href="https://metatags.io/">
      All social media, open graph Debugger
    </Anchor>
5.  <Anchor href="https://og-playground.vercel.app/">
      OG Dynamic Image Playground
    </Anchor>

### Documentation to learn more

- <Anchor href="https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation">
    API Documentation for og image generation
  </Anchor>
- <Anchor href="https://vercel.com/docs/concepts/functions/edge-functions/og-image-examples">
    Vercel Examples
  </Anchor>
- <Anchor href="https://vercel.com/new/clone?repository-url=https://github.com/vercel/examples/tree/main/edge-functions/vercel-og-nextjs&project-name=vercel-og-nextjs&repository-name=vercel-og-nextjs">
    Deploying your first social card
  </Anchor>

---

Remember, developers are creatures that turn coffee into code. So I'd very much appreciate if you <Anchor slug="overcome-imposter-syndrome" action="buy_coffee_overcome-imposter-syndrome_click" href={"https://www.buymeacoffee.com/stefanagloginic"} styles={{ 'display': 'inline-flex', 'alignItems': 'center' }}>bought me a coffee! <TinyIcon alt="buy me a coffee icon" styles={{
    width: '23px',
    height: '23px',
    marginLeft: '3px'
}} src={"https://res.cloudinary.com/bytesizedpieces/image/upload/v1639952578/assets/buymeacoffee_udskx4.png"} /></Anchor> I will be posting very frequently on my findings and learnings in the tech industry and beyond. Join my newsletter if you would like to stay tuned!

Thanks for reading again! ❤️

Metadata and meta tags are underestimated SEO optimization tools. Newer web developers may completely gloss over this powerful technique to improve the discoverability of the websites for which they are responsible.

Learn how to use NextJS Version 13 release for Open Graph Dynamic Images by understanding how metadata and metatags lead to better SEO and engagement with users

NextJS Open Graph Dynamic Image

Understanding Open Graph Dynamic Image Meta Tags with NextJS

 
 

 ![Webpack bundle analyzer (package bloat)](https://res.cloudinary.com/bytesizedpieces/image/upload/v1667153748/article/medium-to-mdx/bundle_analyzer_yorhev.png)

The tech industry never stops expanding with alternate solutions. We see a beautiful landing page and get sucked into wanting to integrate these tools into our workflow. The problem with these solutions is that they sometimes can bloat our projects where this could be avoided. <Anchor href="https://www.sanity.io/">Sanity.io</Anchor> was one such product we recently came across that enraptured us.

Sanity offers a viable solution that unlocks rapid content release through a seamless and easy UI. Technical and non-technical individuals can work together, with little effort spent to custom-develop the resources needed. We envisioned potentially integrating Sanity into the ByteSizedPieces blog.

### ByteSizedPieces Background Context

<Anchor href="https://www.bytesizedpieces.com/posts/how-i-built-my-blog">
  ByteSizedPieces was developed
</Anchor> in a way that it would be lightweight, and cost-effective but still performant.
Unfortunately, the website wasn’t user-friendly, or considerate of the time when
it came to adding new content.

The workflow for ByteSizedPieces expected a single individual to make a contribution and it took a lot of time to prepare articles for release. Articles were written on Medium for the ease of the editor and laboriously copied over into the expected <Anchor href="https://mdxjs.com/">MDX</Anchor> syntax.

This was not the best setup, especially considering ByteSizedPieces is run by a capable developer. Allowing time sucks like this to go on for long is unacceptable!

This is where we considered integrating Sanity into the ByteSizedPieces <Anchor href="https://nextjs.org/">NextJS</Anchor> project. We were however reluctant to add yet another heavy dependency to the project when it felt like the problem could be addressed via a script.

## Sanity vs custom script/small package
A quick check of Sanity’s stats on <Anchor href="https://bundlephobia.com/">Bundlephobia</Anchor> showed a large minified **_bundle size of approximately 270 bytes._**

![Sanity Bundlephobia](https://res.cloudinary.com/bytesizedpieces/image/upload/v1667153761/article/medium-to-mdx/sanity_bundlephobia_rugdu4.png)

## Alternative to Sanity (generalize for other tools)
For every fully fleshed out product, there is a simpler solution that isn't pretty to look at but could realistically get the job done.

Let’s see how we can better match the priorities of ByteSizedPieces.

Because we use Medium as my editor, perhaps there already existed a solution that could transfer content on Medium to MDX syntax. This is the point at which we discovered <Anchor href="https://www.npmjs.com/package/medium-to-markdown">medium-to-markdown</Anchor>.

The difference in size between Sanity and medium-to-markdown is _monumental_. Observe that the **_bundle size of the minimized medium-to-markdown package is approximately 260kB_**.

![medium-to-markdown npm package bundlephobia breakdown](https://res.cloudinary.com/bytesizedpieces/image/upload/v1667153885/article/medium-to-mdx/medium_to_md_ydjeuu.png)

Realize this observed bundle size discrepancy makes perfect sense. Solutions like Sanity pull in many other dependencies to create that aesthetic and intuitive UI that would become the admin portal for your content-driven website. Medium-to-markdown hones in on a specific problem and doesn’t offer much flexibility. This approach allows it to be such a light package.

For ByteSizedPieces, Sanity was overkill and would cause unnecessary bloat. <Anchor href="https://tsh.io/blog/reduce-node-modules-for-better-performance/">Here is a fantastic article</Anchor> that breaks down why we should care about bloat for projects, and how we might go about reducing the size of our `node_modules`.

In a nutshell, recall ByteSizedPieces considers performance and cost-effectiveness. **If we are not careful about unnecessary bloat, then our application becomes less performant over time**. We additionally **incur a greater cost for infrastructure management of the resources**.

![A Venn diagram where effective, efficient, and satisfying make for usability](https://res.cloudinary.com/bytesizedpieces/image/upload/v1667154085/article/medium-to-mdx/usability_vd_hn7kog.jpg)

## Medium-to-markdown package evaluation
With all this taken into consideration, we tried to proceed with this more straightforward solution for the time being. Let’s look into the medium-to-markdown package.

After some examination, we, unfortunately, discovered the package didn’t work end-to-end for the preferred ByteSizedPieces workflow. Our blog posts are intended only to be published on <Anchor href="https://bytesizedpieces.com/">bytesizedpieces.com</Anchor>, and we learned that the script was only capable of parsing public, non-paywalled content on Medium.

Not a problem! We decided to take a look at how this script parses the content, and expand its capabilities ourselves.

## Adapted medium-to-mdx script
We have the capability to evaluate how the script performs it's conversions, and adapt it to our needs.

Our priorities for our customized medium-to-mdx script are:

* Enabling the script to consume a draft link
* Parse mdx
* Setup rules for the custom elements ByteSizedPieces uses
* Add YAML template for gray matter to parse for article metadata
* Write converted contents to templates/ where articles are stored
* Generate new article route for sitemap

The medium-to-markdown package mainly relies on 3 dependencies to parse and translate medium content to markdown syntax. The 3 packages are <Anchor href="https://www.npmjs.com/package/turndown">Turndown</Anchor> (the library to convert HTML to Markdown), <Anchor href="https://www.npmjs.com/package/cheerio">cheerio</Anchor> (parses markup and provides an API for traversing/manipulating the resulting data structure), and <Anchor href="https://www.npmjs.com/package/turndown-plugin-gfm">turndown-plugin-gfm</Anchor> (a turndown intended plugin that adds GitHub Flavored Markdown extensions).

The repository was simple enough to comprehend.

We have a series of <Anchor href="https://github.com/dtesler/medium-to-markdown/blob/master/lib/mdConverters.js">converters</Anchor> that just focus on the DOM elements we would encounter in Medium which we would like to parse. For each of those converters, a <Anchor href="https://github.com/dtesler/medium-to-markdown/blob/master/lib/convertFromUrl.js#L14-L16">turndownService appropriate rule</Anchor> gets added. <Anchor href="https://github.com/dtesler/medium-to-markdown/blob/master/lib/convertFromUrl.js#L19-L41">A few more rules get added to the turndownService</Anchor> specific to encountering an anchor in Medium, and <Anchor href="https://github.com/dtesler/medium-to-markdown/blob/master/lib/convertFromUrl.js#L45-L64">two more rules for images, and codeblocks</Anchor>.

<Anchor href="https://github.com/dtesler/medium-to-markdown/blob/master/lib/convertFromUrl.js#L73">
  convertFromUrl
</Anchor> is the function to invoke, provided the URL of the public non-paywalled
medium article. The package requests the URL, targets the body with cheerio then
the article of the Medium retrieved content, and <Anchor href="https://github.com/dtesler/medium-to-markdown/blob/master/lib/convertFromUrl.js#L85">
  invokes the turndownService
</Anchor> configured with the set rules. The turndownService will proceed to do its
magic. The DOM tree gets parsed, and on a match of elements for which rules were
set, the turndownService will invoke the set of handlers to map the elements to the
appropriate replacement.

Now that we understand how the package is accomplishing the conversion from medium content to markdown, we need to consider how we can adjust it to our use case.

We recognize that the primary issue is unpublished content on Medium. Thankfully, Medium provides us with a way to expose these unpublished articles via a draft link.

![Share the draft link in the dropdown of the unpublished article on medium](https://res.cloudinary.com/bytesizedpieces/image/upload/v1667154131/article/medium-to-mdx/draft_link_twr9gf.png)

The draft link is provided to another user with a Medium account, so we probably need to log in to a viable Medium account, and _then_ attempt to visit the draft URL in the same session.

This is starting to sound like we need a headless browser. For this, we decided to use <Anchor href="https://www.npmjs.com/package/puppeteer">puppeteer</Anchor>.

![Puppeteer](https://res.cloudinary.com/bytesizedpieces/image/upload/v1667154161/article/medium-to-mdx/puppeteer_cwzmzb.jpg)

## Headless Browser Puppeteer Login To Medium Flow

1.  Tell puppeteer to start the browser
2.  Visit the home of medium
3.  Select the sign-in button on medium.com
4.  Sign in via Twitter option
5.  Have the page object input the correct Twitter credentials
6.  Visit the draft URL provided

### Tell puppeteer to start the browser

For simplicity, I have removed the irrelevant code. To start, we have a `navigateToMediumUrlWithLogin` function, which will invoke `loginToMedium` and then after that navigate to the draft URL. loginToMedium will start the browser and page via puppeteer and return those relevant values.

```js
async function startBrowser() {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    return { browser, page };
}

...

async function loginToMedium(url) {
    const browserPageObj = await startBrowser();    ...
}

...

export const navigateToMediumUrlWithLogin = async (url) => {
    let browserPageObj = null;
    try {
        browserPageObj = await loginToMedium('https://medium.com/');
    } catch (e) {}
};
```

### Visit the home of Medium

Next, we need to visit Medium using the `page` we received from `startBrowser` . Our `loginToMedium` will now be adjusted to accommodate this next most intent.

```js
async function loginToMedium(url) {
    const browserPageObj = await startBrowser();
    const { page } = browserPageObj;
    page.setViewport({width: 1366, height: 768});
    console.log('Navigating to: ', url);
    await page.goto(url);
    ...
}
```

### Select the sign-in button on medium.com

Still focusing on `loginToMedium` we now need to select the sign-in button on medium.com.

Here is how we accomplished selecting the sign-in button:

```js
async function loginToMedium(url) {
    ...

    const [ anchor ] = await page.$x("//a[contains(text(), 'Sign In')]");
    if (!anchor) {
        return;
    }

    console.log('Selecting sign in prompt at: ', url);

    await anchor.click();

    await page.waitForTimeout(200);

    ...
}
```

### Select login via the Twitter button

Now we need to select _how_ we want to log in. Let’s go with Twitter.

```js
async function loginToMedium(url) {
   ...

   const [div] = await page.$x("//div\[contains(text(), 'Sign in with Twitter')\]");

   if (!div) {
        return;
    }

    console.log('Selecting Sign In With Twitter Prompt on popup at: ', url);

    await div.click();

    await page.waitForTimeout(2000);

    ...
}
```

### Have the page object input the correct Twitter credentials

We are almost done with the flow. We now target the input fields for the Twitter username and password and populate those fields for the account we prefer.

We return the browserObject with the page at the result after signing in.

```js
async function loginToMedium(url) {
    ...

    console.log('Populating Twitter credentials, username first');
    // for twitter login populate username

    await page.click('#username_or_email');
    await page.keyboard.type(credentials.TWITTER_USERNAME);

    console.log('Populating Twitter credentials, password next');

    // for twitter login populate password
    await page.click('#password');
    await page.keyboard.type(credentials.TWITTER_PASSWORD);

    console.log('Attempting to sign in via Twitter profile');

    await page.click("#allow");

    await page.waitForNavigation();

    return browserPageObj;

    ...
}
```

Now that `loginToMedium` is complete, we can proceed with visiting the draft URL we were provided.

### Visit the draft URL provided

We divert our focus back to the`navigateToMediumUrlWithLogin` function. It will use the returned `browserPageObj` to visit the provided URL which is our draft URL, then finally return the `browserPageObj` that should be in the correct context and ready for parsing.

```js
export const navigateToMediumUrlWithLogin = async (url) => {
    let browserPageObj = null;

    try {
        browserPageObj = await loginToMedium('https://medium.com/');
    } catch (e) {
        console.log('Something happened while trying to login to medium', e.message);
        return browserPageObj;
    }

    await browserPageObj.page.waitForTimeout(2000);

    console.log('Now attempting to visit url: ', url);

    await browserPageObj.page.goto(url);

    return browserPageObj;
};
```

For this, we have a `getMarkdownFromPage` function, that we will utilize to pull the HTML from the puppeteer page, use the turndownService to convert to markdown, and write the contents of that markdown to our desired file.

Here is where we tie all of this together. Our script will effectively be calling `convertUrlByLogin` to retrieve the markdown and write the contents to a file.

```js
// retrieve the correct page after successful navigation
// to medium draft url (which requires login)
// from there seek out the article element and use
// turndownService to convert to markdown
export const convertUrlByLogin = async (url) => {
    const browserPageObj = await navigateToMediumUrlWithLogin(url);
    return _getMarkdownFromPage(browserPageObj);
}
```

What is neat about pursuing this approach ourselves instead of relying on the medium-to-markdown package, is that we can custom configure our rules to the turndownService. So we did add our own rulesets so the new elements we map during match occurrences are ByteSizedPieces appropriate.

Perhaps you noticed, why stop at markdown? ByteSizedPieces uses MDX. Although MDX enables the usage of markdown, it enables the usage of React components too!

Our turndownService rules can thankfully provide the React components since they are provided as strings anyways. MDX will be able to correctly handle once our script writes the contents to a file.

Here is an example of a rule set for processing Medium images since ByteSizedPieces uses a custom component for images.

```js
{ // NOTE: This entire rule is bytesizedpieces specific
  ruleName: 'images',
  filter: (node, options) => {
      return (
          node.nodeName === 'IMG' &&
          node.getAttribute('src') &&
          !node.getAttribute('src').endsWith('?q=20')
      )
  },
  replacement: (content, node) => {
    const parentWrapperDiv = node.parentNode;
    let parentNode = null;
    if (parentWrapperDiv) {
        parentNode = parentWrapperDiv.parentNode;
    }

    const captionLabelIdSibling = parentNode ? parentNode.nextSibling : undefined;
    let captionLabelId = '';
    let innerText = '';
    if (captionLabelIdSibling && captionLabelIdSibling.nodeName === 'FIGCAPTION') {
        innerText = captionLabelIdSibling.textContent;
    }

    if (innerText.length > 0) {
        captionLabelId = innerText.toUpperCase().split(' ').join('_');
    }

    return '<Image captionLabelId="' + captionLabelId + '" alt="' + innerText + '" src="' + node.getAttribute('src') + '" />';
}
```

For each article we add some YAML at the top of our files to define some metadata that <Anchor href="https://www.npmjs.com/package/gray-matter">gray-matter</Anchor> parses for us.

Knowing this, we added some logic to insert a YAML template at the start of our newly created file. Later we intend to make the script smarter to attempt to autofill some of these fields, but a template works nicely for the time being.

Here is how the final script looks.

```js
const generateMdFromMediumArticle = async (fileNameArg, mediumPostUrlArg) => {
    if (!fileNameArg) {
        throw new Error('Need to provide file name to convert as argument');
        return;
    }

    if (!mediumPostUrlArg) {
        throw new Error('Need to provide url for medium article to convert as argument');
        return;
    }
    const PATH_FOR_CONVERTED_MD = `${POST_TEMPLATES_FOLDER_NAME}/${fileNameArg}.mdx`;

    const markdown = convertUrlByLogin(mediumPostUrlArg);
    if (markdown && markdown.length > 0) {
        const prettierConfig = await prettier.resolveConfig('./prettierrc.js');

        const formattedMarkdown = prettier.format(markdown, {
            ...prettierConfig,
            parser: 'mdx'
        });

        writeFileSync(PATH_FOR_CONVERTED_MD, `${YAMLTemplate} \\n \\n ${formattedMarkdown}`);
        console.log('Success, file written and should be found at: ', PATH_FOR_CONVERTED_MD);
        return;
    }
```

Finally, here is what I added to `package.json`

`“mediumToMdx”: “node ./scripts/convert-mdx-from-medium-url.mjs && npm run postbuild”`

Note that we developed the script in such a way that when it starts up, it prompts the user for the name of the file they would like to create (which will become the route by default for the article) as well as the URL to the medium link. These arguments get passed on to `generateMdFromMediumArticle` to take it from there.

As a final callout, note `postbuild` being added after the conversion script runs. We wanted to kill two birds with one stone by first writing the new file, then generating an update to the ByteSizedPieces `sitemap` for search engines to reference for indexing purposes.

Sitemap generation is yet another script we added to increase efficiency in the development of the blog, and will be covered in another article.

Let’s see this in action in this very article! Observe how I retrieve the draft link from Medium, start up my script, and show the final markdown transferred result.

![medium-to-mdx script](https://res.cloudinary.com/bytesizedpieces/image/upload/v1667154318/article/medium-to-mdx/medium-to-md-final_rgybng.gif)

## Conclusion

So! What do we gain from this effort?

**Transferring an article to ByteSizedPieces was laborious and took approximately an hour worth of time.**

Adding this custom script **_cut the effort of transferring an article to ByteSizedPieces to 5 minutes._**

The script is not perfect, after the file is generated we need to still go in and make a few edits. The effort to edit and validate the article comprises the majority of the 5 minutes. The script itself runs in ~20 seconds.

Those 55 minutes saved enable us to divert efforts elsewhere for more meaningful content and changes!

The final lesson here is to keep an open mind when deciding what to custom-develop and when we should be using tools. Always bear in mind your original goals and stay true to them.

This script took about 4 hours to get working end-to-end. Though it can use improvements that will happen in time, it works beautifully and saved us from adding a heavy package to ByteSizedPieces.


The tech industry never stops expanding with alternate solutions. We see a beautiful landing page and get sucked into wanting to integrate these tools into our workflow. The problem with these solutions is that they sometimes can bloat our projects where this could be avoided.

Use bundlephobia to assess package size and potential project bloat. Learn how to differentiate between real products like Sanity versus how to create your own solution, in this example learn how to create a Medium to mdx script

When to use a custom solution versus your own

How to decide between the use of custom solutions and ones that bloat your website

 
 
Web application performance becomes critical as your traffic and DAU (daily active users) grow for your application. In the case of bytesizedpieces.com, the more articles we added, the worse the blog performed, which was not ideal!

**Wouldn’t it be nice to know how we can trace with exact certainty why a solution is non-performant, as well as how to go about fixing it in a way that we enhance performance by more than 20% in one go?**

We used <Anchor href="https://pagespeed.web.dev/">pagespeed insights</Anchor> to rank our website performance. Another reliable and popular tool is the open-source <Anchor href="https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en">lighthouse</Anchor>.

![Before Performance Improvements](https://res.cloudinary.com/bytesizedpieces/image/upload/v1665875306/article/improve-app-performance/before_yg5woo.png)

![After Performance Improvements](https://res.cloudinary.com/bytesizedpieces/image/upload/v1665875309/article/improve-app-performance/perf_s769ga.png)

Let’s go over **how we achieved more than a 20% increase in application performance improvement for bytesizedpieces.com!**

### Problem Background

ByteSizedPieces launched with implementation-specific shortcomings we were aware of from the get-go. Sacrifices were made to get a proof-of-concept version of our blog and have it launch faster. If it registered well with users, well, then comes the fun part of improving those pain points!

We recently completed round one of Byte Sized improvements.

In this article we will go over how to:

- Diagnose application performance issues using the Chrome DevTools
- Strategize cost-effective approaches for resolution and further future improvement
- Implement the first round of performance improvement

## ByteSizedPieces Performance Degradation over Time

The Google Console Tool has been a stellar monitoring tool for the search traffic and performance of ByteSizedPieces. As more articles were released, it became apparent the performance of the website was degrading. Each article published resulted in a slower page load time, and we knew this would eventually result in poorer impressions and conversions.

ByteSizedPieces was built in such a way as to be cost-effective for as long as possible. Bearing this in mind, we chose not to utilize a CMS or Content Management System like most blogs.

Each article is preserved statically within the ByteSizedPieces repository, under a `templates` folder, pictured like so.

![ByteSizedPieces Templates](https://res.cloudinary.com/bytesizedpieces/image/upload/v1665875313/article/improve-app-performance/templates_kppyfe.png)

Here is where the problem comes in with the expected growing list of articles. The approach for ByteSizedPieces was to load **_all_** of the articles in templates, order them, and serve them to the client. We added an InfinteScroll component that precluded immediate render of all the posts, however, the majority of work has been done already.

If you’re curious to learn more about how the ByteSizedPieces blog setup is written, we have another article on <Anchor href="https://www.bytesizedpieces.com/posts/how-i-built-my-blog">how ByteSizedPieces is currently built which is actively updated and maintained for accuracy</Anchor>.

Now that we have our suspicions about what the source of the problem is, we next need to ascertain whether our suspicion is accurate, before thinking about how we can hash out a solution.

### Diagnosing application performance issues with the Chrome DevTools

The <Anchor href="https://www.bytesizedpieces.com/posts/chrome-devtools-for-beginners">Chrome DevTools</Anchor> has a number of effective tools that serve to aid developers in debugging, analyzing their applications, and in our case, **diagnosing performance issues**.

We suspect that our initial page load is burdened by all the files being pulled in and served to the client. Let’s see how we can prove that this approach is indeed a problem for website performance.

First, we start by visiting the home page, opening the Chrome DevTools, and selecting the performance tab.

![ByteSizedPieces with chrome devtools performance tab opened](https://res.cloudinary.com/bytesizedpieces/image/upload/v1665875447/article/improve-app-performance/perf_tab_opened_wzam4k.png)

Now we will select the circular arrow next that on hover says “Start profiling and reload page”. Wait for the recording process to complete and for a similar recording to display.

![ByteSizedPieces performance recording results](https://res.cloudinary.com/bytesizedpieces/image/upload/v1665875448/article/improve-app-performance/performance_recording_bdxibz.png)

With the performance tab, I typically first look at the Network view. You can zoom in on an area of interest where it seems like the delay is quite large for the network events that occur.

Here I observed a red line indicating a task that took a while. The DevTools allow me to create a window from start to finish so I can closer evaluate what made this task so long.

![Focus on the long task in Chrome DevTools performance tab](https://res.cloudinary.com/bytesizedpieces/image/upload/v1665875628/article/improve-app-performance/long_task_identification_d4njhz.gif)

Now that we have observed how to adjust the window pane and discover long tasks, let’s move focus to the beginning of the recording, and see what we find there.

![Focus on the long task in Chrome DevTools performance tab](https://res.cloudinary.com/bytesizedpieces/image/upload/v1665875654/article/improve-app-performance/beg_recording_task_k32erm.gif)

In the above, observe that we have moved the sliding window closer to the beginning of the website performance recording.

In the network section we hone in on a task that seems to be quite long, and within the main thread section has been flagged as a long task. When I select the network request, we actually see that this request is for serving the HTML content.

Next, we refer to the Network tab within the Chrome DevTools and try to find that same network request.

![Beginning of the performance recording evaluation](https://res.cloudinary.com/bytesizedpieces/image/upload/v1665875869/article/improve-app-performance/waterfall_network_chxxf1.png)

Upon observing a waterfall breaking down the stages for that task, note that the total duration for requesting HTML from the server takes a whopping 125ms!

_Of course_ we are seeing degrading page performance with each new article! That HTML blob is only getting bigger!

Now how do we go about fixing this?

## Strategize cost-effective approaches for resolution and further future improvement

We can run a simple experiment to test the difference in timing if we try to retrieve less content on the initial page load.

Let’s attempt fetching only 3 of our articles and see how this impacts the timing.

![Network tab timing waterfall in Chrome DevTools](https://res.cloudinary.com/bytesizedpieces/image/upload/v1665876230/article/improve-app-performance/Screen_Shot_2022-10-15_at_4.22.58_PM_dci8gq.png)

By fetching four articles, we went from 125ms to 38ms. Now we’re talking!

### Solution Brainstorming

Going forward, we bear in mind that we ideally want a cost-effective solution, but now that ByteSizedPieces is growing, we need to come up with an effective way to limit the number of articles we retrieve on that initial page load.

Essentially, ByteSizedPieces has grown to the point where it can stand to benefit from introduction of storage.

Here are a few ways we can introduce storage to the web application:

- Database
- CMS (Content Management System)
- Cache

Still bearing in mind the desire for cost effective solutions, we can avoid introducing a database and CMS for a bit longer without sacrificing performance.

Therefore the choice for **a solution to our performance improvements falls to add caching to the website!** Now all the caching articles ByteSizedPieces has released are making sense!

If you haven’t read about the <Anchor href="https://www.bytesizedpieces.com/posts/cache-pro-con">pros and cons of caching</Anchor>, the <Anchor href="https://www.bytesizedpieces.com/posts/cache-system-design">system design strategy</Anchor> for caching, and finally the different <Anchor href="https://www.bytesizedpieces.com/posts/cache-types">types of caching policies</Anchor>, best peruse those articles for clarity on the upcoming discussion.

### Caching Focused Approaches

When it comes to caching, we were considering two viable options.

- Dedicated server
- set of dedicated servers
- in-system in-memory cache

A dedicated server can scale well but will come with an immediate cost, while an in-memory cache system would technically work and could be upgraded so long as ByteSizedPieces is monitored for cache performance degradation. In conjunction, we would need to be cautious to implement our solution in such a way that it can be easily migrated to a more complex system.

Now, ByteSizedPieces is still not large enough to justify a dedicated server. Therefore we opted for considering an in-memory caching approach for our solution.

## Implement performance improvement choice

Let’s observe the areas in the codebase that will be affected by our changes.

First the most obvious will be our Home component. Before we had a `getStaticProps` setup that would retrieve the files that are our articles, map through the list and format and sort the items.

```jsx
export function getStaticProps() {
    const posts = postFilePaths.map((filePath) => {
        const source = fs.readFileSync(path.join(POSTS_PATH, filePath));
        const { content, data = {} } = matter(source);

        return (
            {
                content,
                data,
                filePath,
                formattedFilePath: getMDXFileName(filePath)
            }
        );
    }).sort((first, second) => new Date(second.data.publishedOn) - new Date(first.data.publishedOn));

    return {
        props: {
            posts
        }
    }
}
```

Now instead we need to have a service we can utilize to retrieve an initial set or chunk of blog posts.

We already had an `InfiniteScroll` component leveraged to defer rendering. Perhaps this could be adjusted to instead query for a new chunk of articles. The idea is to leverage the same service and request the next set of items to render at a scrolling point determined by an <Anchor href="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer</Anchor>, instead of just rendering the next set of items from the fully retrieved list.

Now finally we need to think about how the service would work.

Ideally, our service maintaining the content should be a singleton, that will retrieve the posts and retain them in a cache instantiated within the service’s constructor.

We can have the cache store two fields.

The first detail our cache will store is a map where the key is the slug name of the post and the value of the formatted post. We would also have the cache store an array that represents the intended order of the posts. In the case of ByteSizedPieces, the order of the posts is determined by the publishing date.

What we want is a helper method that would get a certain chunk of posts. Given a starting index and a chunk size, we would refer to the cache for retrieval of the relevant set of items.

Finally, we can leverage a NodeJS internal cache module to support our in-system caching solution. In our case, we decided to rely on <Anchor href="https://www.npmjs.com/package/node-cache">node-cache</Anchor> given its appropriate size, high usage, and maintenance.

Let’s take a look at how this can be implemented.

### ContentService Singleton Implementation

```js
// Dependencies
import NodeCache from 'node-cache';
import matter from 'gray-matter';
import fs from 'fs';
import path from 'path';

// Utils
import { getMDXFileName, getPostFilePaths, POSTS_PATH } from '../utils/mdxUtils';

class ContentService {
    constructor () {
        this._cache = new NodeCache();

        const posts = getPostFilePaths().map((filePath) => {
            const source = fs.readFileSync(path.join(POSTS_PATH, filePath));
            const { content, data = {} } = matter(source);

            return (
                {
                    content,
                    data,
                    filePath,
                    formattedFilePath: getMDXFileName(filePath)
                }
            );
        }).sort((first, second) => new Date(second.data.publishedOn) - new Date(first.data.publishedOn));

        // need to set by order of date
        this._cache.set('slugOrder', posts.map(({ formattedFilePath }) => formattedFilePath));
        this._cache.set('postsBySlug', posts.reduce((acc, post) => {
            acc[post.formattedFilePath] = post;
            return acc;
        }, {}));
    }

    getContentBySlug = (slug) => {
        const postsBySlug = this._cache.get('postsBySlug') || {};
        return postsBySlug[slug];
    }

    getContentByPage = (page, itemsPerPage) => {
        const slugOrder = this._cache.get('slugOrder') || [];

        const startIndex = page * itemsPerPage;
        if (page < 0 || startIndex >= slugOrder.length) {
            return [];
        }

        return this._getContentByIndeces(startIndex, startIndex + itemsPerPage);
    }

    _getContentByIndeces = (startIndex, endIndex) => {
        const slugOrder = this._cache.get('slugOrder') || [];
        return slugOrder.slice(startIndex, endIndex).map((slug) => this.getContentBySlug(slug));
    }
}

export default new ContentService();
```

Now that we have the `ContentService` singleton, we need to make the correct adjustments to the relevant routes to take advantage of the caching solution.

First, we needed to update our `Home` component to utilize the new service within `getStaticProps`. This change is simple enough thankfully.

```jsx
export function getStaticProps() {
  const posts = ContentServiceSingleton.getContentByPage(0, ITEMS_CHUNK) || [];

  return {
      props: {
          posts
      }
  }
}
```

With these changes, we now see only the `ITEMS_CHUNK` quantity of articles rendered on the Home page. When we scroll, however, we do not yet see the expected behavior with the next set of items rendering.

We should now add the support necessary for the `InfiniteScroll` component to retrieve the next chunk of items which triggers a state change to re-render with the next set of posts.

What we need to consider, however, is how we will achieve this with our `ContentService` given this logic will execute on the client. Our `ContentService` won’t play nicely on the client given it utilizes `fs` to read the files, which is a server-side only module.

Our solution is to create an endpoint using <Anchor href="https://nextjs.org/docs/api-routes/introduction">NextJS API Routes</Anchor> which are AWS Lambda provisioned serverless functions. The endpoint enables us to utilize our `ContentService`.

Here is what a simplified version of that endpoint looks like.

```jsx
export default async (req = {}, res = {}) => {
    const { page, nextPage } = req.body;

    try {
      const items = ContentServiceSingleton.getContentByPage(page, ITEMS_CHUNK);

      res.status(200).send({
        items,
        nextPage: items.length === ITEMS_CHUNK ? nextPage + 1 : nextPage
      });

  } catch (e) {} // Error handling
};
```

Now we add a handler in our Home page that will use this endpoint like so:

```jsx
getNextPage = async () => {
    const { page, nextPage: oldNextPage, posts: oldPosts = [] } = this.state;

    const res = await fetch('/api/getContentByPage', {
        body: JSON.stringify({
            page,
            nextPage: oldNextPage
        }),
        headers: { 'Content-Type': 'application/json' },
        method: 'POST'
    });

    let posts = [];

    if (res.ok) {
        const { items = [], nextPage } = await res.json();

        this.setState({
            page: oldNextPage,
            posts: [
                ...oldPosts,
                ...items
            ],
            nextPage
        });
    }
}
```

Our `InfiniteScroll` component will consume this method as a prop, and invoke it when the Intersection Observer notices the user has scrolled to expose a bottommost element that we have chosen to reference.

Home or the parent of InfiniteScroll will maintain the state of the posts. The state gets updated when InfiniteScroll invokes the handler with the job of calling our endpoint to retrieve the next chunk of items. We arrive full circle, and now when we scroll to the bottom, we observe the next set of items indeed display!

However, our job is not completely done. We notice some jumpy behavior from the scroll that is jarring for the eye.

Our solution for this is to ease in the newly rendered posts. How better to accomplish this than with a keyframes animation that gradually adjusts opacity from 0 to 1?

ByteSizedPieces uses ThemeUI for styling, therefore we followed the documentation set for <Anchor href="https://theme-ui.com/guides/keyframes">ThemeUI-based keyframe</Anchor> and we are home free!

We open our handy Chrome DevTools one more time with the Network tab selected. We add a filter to focus exclusively on `Fetch/XHR` given we are interested in the API queries to populate the new post.

Let’s test our solution!

![Solution with caching and API endpoint testing](https://res.cloudinary.com/bytesizedpieces/image/upload/v1665875927/article/improve-app-performance/solution_l3y4an.gif)

Beautiful!

We see our posts rendering seamlessly. The last bit is to check if we have successfully improved the performance of ByteSizedPieces. After all, the performance improvement was the point of this effort!

![23% website performance improvement with a few code changes](https://res.cloudinary.com/bytesizedpieces/image/upload/v1665875309/article/improve-app-performance/perf_s769ga.png)

**Adding an in-system in-memory cache storing our blog posts and fetching new chunks via our InfiniteScroll component resulted in a 23% performance improvement!**

Of course, our solution is still not perfect. ByteSizedPieces has several more improvements that can be made to boost this number even more. But we are delighted with these results.

---

Remember, developers are creatures that turn coffee into code. So I'd very much appreciate if you <Anchor slug="overcome-imposter-syndrome" action="buy_coffee_overcome-imposter-syndrome_click" href={"https://www.buymeacoffee.com/stefanagloginic"} styles={{ 'display': 'inline-flex', 'alignItems': 'center' }}>bought me a coffee! <TinyIcon alt="buy me a coffee icon" styles={{
    width: '23px',
    height: '23px',
    marginLeft: '3px'
}} src={"https://res.cloudinary.com/bytesizedpieces/image/upload/v1639952578/assets/buymeacoffee_udskx4.png"} /></Anchor> I’m a new writer and I will be posting very frequently on my findings and learnings in the tech industry and beyond. Join my newsletter if you would like to stay tuned!

Thanks for reading again! ❤️


Web application performance becomes critical as your traffic and DAU (daily active users) grow for your application. In the case of bytesizedpieces.com, the more articles we added, the worse the blog performed, which was not ideal!

Learn how to diagnose website performance issues using Chrome DevTools and implement effective improvements with caching that will dramatically boost the performance percentage on lighthouse.

Diagnose and improve application performance

How to diagnose and improve your website application performance by over 20%


import Bold from '../components/article/Bold';
import BigQuotes from '../components/article/BigQuotes';
import Anchor from '../components/article/Anchor';

FrontEnd development is a versatile practice with many focus points that make it _easy_ to get lost when starting out. FrontEnd development beginners have to navigate rough waters and find their lighthouse amidst an ocean of opinions, tutorials, books, best practice claims, and online courses.

![Learners searching for their lighthouse](https://res.cloudinary.com/bytesizedpieces/image/upload/v1664731817/article/fe-beginner-mistakes/lost_lighthouse_gy3e6z.jpg)

When dealing with learning a huge discipline like FrontEnd development, however, there are common mistakes beginners tend to share.

I’ve sourced feedback from highly qualified fellow FrontEnd developers. Each has been in the field for years, with impressive track records and contributions to the tech world. I’ve spoken with self-starters, freelancers, FAANG engineers, open-source contributors, startup engineers, and Indie Developers to accumulate this list. **Avoid making these mistakes and you’ll be well on your way to mastering the FrontEnd craft!**

## Patience

Patience and perseverance are recurring mentioned themes among the experts. Beginners in the web development discipline tend to be overeager to get hired without giving themselves the time to truly learn and master the craft.

Learning web development is no easy task that can be rushed. Beginners find themselves getting caught up in a “become a dev quick” scheme, which has recently become advertised like it’s a timeboxed guaranteed fitness plan.

_“Master FrontEnd development in 3 months by following this guide!"_... should say no one, ever.

![Timeboxed Unrealistic FrontEnd Beginners Guide](https://res.cloudinary.com/bytesizedpieces/image/upload/v1665888612/article/fe-beginner-mistakes/imageedit_2_9143051473_kha9bt.png)

Do not fall for these ploys to rope you into an inauthentic experience. Learning how to develop applications is a journey filled with trial and tribulation, and the experts want you to persevere through them without becoming disillusioned. Becoming a software engineer is well worth the journey, but success will not be handed to you.

<BigQuotes styles={{'fontSize': '18px', 'fontStyle': 'italic', 'fontWeight': '400'}}>
One mistake beginners make often is not giving yourself the permission to <Bold>take your time to actually learn this stuff</Bold>. Everyone is racing to learn something to get hired as soon as possible but <Bold>learning isn’t a race</Bold>. So they end up with so many knowledge gaps but also, due to the insane time tables, they also end up discouraged if they do not succeed as quickly as possible. Just the other day I had a comment "I have been learning for 5 months! I feel hopeless! No one hires juniors anymore!" 5 months?! Took me way longer to land a job! But because you hear the constant tale of "3 months to land a job in tech!" and the timeline just isn't going to be there for the vast majority. Sure, some may be able to do it, but for most people, it will take a bit longer. <Bold>You need to know and understand the concepts to build a career out of this. Take the time to learn, so you can build a strong career that earns!</Bold>

<br />
<br />

-<Anchor href="https://www.linkedin.com/in/dthompsondev/">Danny Thompson</Anchor> (developer community leader/educator helping people get jobs in tech)
</BigQuotes>

Learning to become a software engineer takes time that varies for every person. Sotware development is not something that can be forced into a specific time period, despite the natural desire to want to know _exactly_ when you will be ready. Forcing oneself to learn something so broad can lead to dangerous repercussions. Feelings of <Anchor href="https://www.bytesizedpieces.com/posts/overcome-imposter-syndrome">imposter syndrome</Anchor> or inability could be avoided if beginners ensure they set realistic expectations for their journey, and avoid referring to others for timelines.

![Imposter Syndrome Visual as intersection between something “easy” and discounting value](https://res.cloudinary.com/bytesizedpieces/image/upload/v1664731847/article/fe-beginner-mistakes/imposter_syndrome_od84iz.jpg)

Maxime is another expert with a different background than Danny Thompson. Maxime is an Indie developer, working on his recent product Birdy. He shares the belief with Danny Thompson that patience is key. He also puts emphasis on picking what you start learning by the supporting community size, applying necessary filters to the courses you choose to take, and above all applying the craft while learning — building!

![Build your apps!](https://res.cloudinary.com/bytesizedpieces/image/upload/v1664731854/article/fe-beginner-mistakes/build_gtdqgw.gif)

### Build to learn

<BigQuotes styles={{'fontSize': '18px', 'fontStyle': 'italic', 'fontWeight': '400'}}>
I’m always thinking about the macro picture when it comes to beginners starting off with learning application development. The biggest mistake is a lack of <Bold>self-discipline and persistence</Bold>. It’s not easy. It will suck. But you gotta keep doing it over and over again to get good at it. It’s like anything you want to learn in life. <Bold>Therefore on the macro level, the biggest mistake beginners make from what I see is giving up too soon</Bold>.

<br />
<br />

As far as micro mistakes:
<br />
1. The biggest of them all: Not learning by building. Find something you want to build and that you are excited about building. It can be anything. Then learn <Bold>only</Bold> what is necessary to build this product. You will improve so much faster and assimilate so much more information by building.
<br />
2. Using a framework that doesn’t have as big a community or as much documentation. When you are starting out, you will have so many issues. If you can’t rely on the community and documentation you are screwed as a beginner. So I would value this over anything else. Pick the most popular framework. React. Only pick the most popular stack. Go on google trends. Check the GitHub stars. Check the npm downloads. Pick the most popular.
<br />
3. Not choosing Javascript. It’s the same as the above. You want the largest community. The biggest ecosystem. The most support. Javascript is very beginner friendly with amazing courses and tutorials out there.
<br /> 
4. Pick a good Udemy course. The highest rated and the <Bold>most recent</Bold>. Watch just enough so that you have a solid base to start building (point #1). When you are building your project and you feel stuck/overwhelmed, go back to the course, it’s time for another learning session. Once you feel like you are a little bit more comfortable, back to building. Build as much as you can.


-<Bold>Maxime Dupré</Bold> (Maker of <Anchor href="http://birdy.so">Birdy</Anchor> & senior dev with 15 years of full-stack web development experience)
</BigQuotes>

### Master the Fundamentals

Mastering the fundamentals is one goal that should be more obvious for beginners, however, given the plethora of routes that can be taken, many get derailed or think they have learned enough before moving on.

![Master the fundamentals for excellence](https://res.cloudinary.com/bytesizedpieces/image/upload/v1664731864/article/fe-beginner-mistakes/master_fundamentals_pvoq7o.jpg)

<BigQuotes styles={{'fontSize': '18px', 'fontStyle': 'italic', 'fontWeight': '400'}}>
What I have found in beginners is they tend to learn the surface level of a language. To be a developer is to question things, to dig deep, to have the curiosity to understand how something truly is working. This drive to <Bold>understand details end-to-end will ultimately lead you to those deeper concepts and provide you with the well rounded understanding you will need to easily pick up the next big thing</Bold>.
<br />
<br />
For instance, many tend to leap right into learning ReactJS because it’s what is observed on job requirements or what many are using. This is synonymous to running before walking. ReactJS is built on Javascript. Ultimately learners end up running into some weird behavior or problems that feel unexpected, and a lack of understanding of the basics are to blame. Learn Javascript first, wholly and completely so you aren’t forced to take steps backwards.
<br />
<br />
<Bold>Javascript fundamentals are critical</Bold> both to the interview for the job and doing the job itself. So as much as you may feel like it isn’t worth the time, <Bold>make sure to learn the fundamentals</Bold>, and trust that it will fast forward your learning capability AND your career!
<br />
<br />
-<Bold>Stefana Gloginic</Bold> (creator of <Anchor href="https://bytesizedpieces.com/">ByteSizedPieces</Anchor>) and Senior Software Engineer at Disney/Hulu
</BigQuotes>

## Be Wary of Dated Teachings

One danger of learning online is ensuring that the teachings are still relevant and provided by a trusted source that delivers high quality content. Oftentimes, lack of familiarity and awareness leads beginners to learn dated or incorrect concepts.

Referring to official documentation has a high chance of being accurate, relevant and maybe most importantly, reliable.

![Documentation illustration](https://res.cloudinary.com/bytesizedpieces/image/upload/v1664731872/article/fe-beginner-mistakes/documentation_qdoiuz.png)

<BigQuotes styles={{'fontSize': '18px', 'fontStyle': 'italic', 'fontWeight': '400'}}>
People tend to google “Tutorial for X” and then go for some video course or tutorial because that was the medium they wanted to go to. They end up with a video course that is outdated 5 years, wasting hours of precious time to learn outdated concepts.
<br />
<br />
Meanwhile, the <Bold>official documentation</Bold> for whatever they want to learn is probably the most up-to-date source to read. Also, once they get on a job and have to learn “smaller” things, it might be the only source on the topic. Reading docs is an important skill — and has to be trained as well. So I’d always encourage people that want to get into a topic to spend at least one hour on the official docs. If they don’t like the style of writing or find them confusing, they can still go for a tutorial or video course afterwards — and might already have some knowledge that allows them to judge if the content they are watching is up-to-date and relevant or not.
<br />
<br />
-<Bold>Lenz Weber-Tronic</Bold> (Senior FullStack Developer and Redux Toolkit maintainer)
</BigQuotes>

## Learn crafts relevant to FrontEnd

Many experts found that once they grasped the fundamentals, what helped jumpstart and accelerate their career was becoming skilled in crafts that were highly relevant to FrontEnd development, but not necessarily “required”.

<BigQuotes styles={{'fontSize': '18px', 'fontStyle': 'italic', 'fontWeight': '400'}}>
I think the biggest mistake is people jumping from technology to technology without actually focusing on what they want to become. If you want to be a front-end dev — learn HTML, CSS, JavaScript, and a framework. Work and focus on those over learning anything else. Build tons of sites, post them on social media, and blog about how you built them.
<br />
<br />
Also, study design and when you visit a website, write down what you like and dislike about it. Put in as many hours as you can to become the best front-end developer that you can be. Over time it will pay off, people will take notice and you’ll be getting offers without even having to apply for positions.
<br />
<br />
-<Anchor href="https://www.thejackforge.com/">Jack Forge</Anchor> (freelancer who focuses on quick builds for agencies and content creators)
</BigQuotes>

Jack Forge emphasizes that after focusing on learning the basics, first HTML, CSS, Javascript, and a framework, building leads to growth. Typically in an industry setting, there is a separation of concern that happens to enable a streamlined assembly line for rapid product delivery. The notion of craft specialization runs strong. However, having an understanding of design understandably unlocks the ability to make decisions that represent the consumer's best interests. Engineers tend to understand the implications of designs. With experience, we start to develop the skill to determine whether a design will have a detrimental impact for the consumer. Therefore having the capability to provide feedback and work with the design team on a deeper level is valuable. It also enables us to solo work on our own applications!

![Design workflow](https://res.cloudinary.com/bytesizedpieces/image/upload/v1664731884/article/fe-beginner-mistakes/design_thought_wibp4m.png)

Dagobert, another expert finds that learning design was a game changer for his career. He landed roles that were design heavy and eventually built a startup, <Anchor href="http://logology.co">Logology</Anchor> around the design premise.

<BigQuotes styles={{'fontSize': '18px', 'fontStyle': 'italic', 'fontWeight': '400'}}>
My tip is to also get into <Bold>learning graphic design / ux / ui</Bold>. Because as a frontend dev, a big part of your value is your ability to make pixel perfect designs and really make a figma file shine throughout your work. But if you don't have any design skill you won't know how to do it well.

<Bold> Also learning design on the side was a game changer for me</Bold>. Then it gave me a big advantage when trying to get hired in companies that focused on that aspect a lot.
<br />
<br />
-<Bold>Dagobert Renouf</Bold> (been a software-engineer for 18 years mostly specializing in FrontEnd. The highlight was when I was tasked to rebuild the univision mobile apps aka a big tv channel in USA in 2017. Now working on my startup <Anchor href="http://logology.co">Logology</Anchor> full time for 4 years with my wife)
</BigQuotes>

Eddie Jaoude, an open source contributor for LinkFree stressed the importance of learning related skills to FrontEnd as well. Although his emphasis is targetted toward staying in the realm of development oriented building.

<BigQuotes styles={{'fontSize': '18px', 'fontStyle': 'italic', 'fontWeight': '400'}}>
Some common mistakes beginners make are:
<br />
<br />
1. Not <Bold>looking into end to end testing</Bold> sooner (for example Cypress)
<br />
2. Not having an appreciation for backend (API, Database)
<br />
<br />
People want to improve their frontend craft and I understand that. But knowing a few more React features is not impressive. Knowing how to test that project, and to make sure the quality is high and consistently kept high will add a lot more value to the project.
<br />
<br />
-<Bold>Eddie Jaoude</Bold> (15+ years experience in fullstack and DevOps, currently contributing to EddieHub’s <Anchor href="https://github.com/EddieHubCommunity/LinkFree">LinkFree</Anchor> project aka the open source alternative to LinkTree)
</BigQuotes>

![Automation Testing with cypress](https://res.cloudinary.com/bytesizedpieces/image/upload/v1664731891/article/fe-beginner-mistakes/cypress_tf05nv.png)

Eddie wants to ensure that testing remains in the minds of learners. Tests help ensure confidence in the delivery and maintenance of products. Testing has the added benefit of ensuring a standard of high-quality. In FrontEnd disciplines particularly, testing is something that could plausibly be skirted, but absolutely should not be and serves as a distinguishing factor for a high-quality engineer.

## Conclusion

Ultimately, our FrontEnd experts of varying background bestowed advising from their experience and observation for web development beginners.

This culminates to the following:

1.  Patience and perseverence is key. Nothing good comes from rushing.
2.  Build applications as you go to learn
3.  Master the fundamentals before moving on to the next thing
4.  Be wary of dated teachings, read documentation!
5.  Learn crafts related to FrontEnd, like design skills and testing

---

Remember, developers are creatures that turn coffee into code. So I'd very much appreciate if you <Anchor slug="overcome-imposter-syndrome" action="buy_coffee_overcome-imposter-syndrome_click" href={"https://www.buymeacoffee.com/stefanagloginic"} styles={{ 'display': 'inline-flex', 'alignItems': 'center' }}>bought me a coffee! <TinyIcon alt="buy me a coffee icon" styles={{
    width: '23px',
    height: '23px',
    marginLeft: '3px'
}} src={"https://res.cloudinary.com/bytesizedpieces/image/upload/v1639952578/assets/buymeacoffee_udskx4.png"} /></Anchor> I’m a new writer and I will be posting very frequently on my findings and learnings in the tech industry and beyond. Join my newsletter if you would like to stay tuned!

Thanks for reading again! ❤️


FrontEnd engineering is a versatile practice with many focus points that make it easy to get lost when starting out. Beginners have to navigate rough waters and find their lighthouse amidst an ocean of opinions, tutorials, books, best practice claims, and online courses

Overview of the common mistakes FrontEnd development learners tend to make, as shared by senior knowledgable experts in the year 2022. Patience, practice building, master fundamentals, read documentation and learn outside of FE skills are all suggested by experts

Mistakes FrontEnd development learners make in 2022

Common mistakes FrontEnd development learners make in 2022 as shared by experts


## Understand types of caches and policies to better build your own system

Cache systems demand a delicate balance for applications, as they have many <Anchor href="https://www.bytesizedpieces.com/posts/cache-pro-con">pros and cons</Anchor>. When done right, caching can be performant, increase application speed and decrease costs. However, the integration of cache systems poses the risk of application reliability downgrade.

![ByteSizedPieces on Cache Policies and Types](https://res.cloudinary.com/bytesizedpieces/image/upload/v1663569821/article/cache-types/cache_policies_and_types_kbypck.png)

Engineers need to be well educated in the approaches that could be taken when <Anchor href="https://www.bytesizedpieces.com/posts/cache-system-design">designing a cache system</Anchor>. Part of the cache system relies on the appropriate selection of caching policies and implementation approaches. The choices an engineer makes should fit the needs of the application behavior.

A cache typically sits in between applications and databases. Its sole purpose is to provide with lightning speed the responses applications request. For the cache to do its job correctly, it needs clearly defined rulesets for _how_ it will obtain the data necessary to remain relevant. With that said, there are **varying types of caching systems governed by carefully selected cache policies, pertaining to data reads and writes.**

**Cache read and write policies** define when the cache and main memory should be updated to maintain the relevance and reliability of the data when it comes to applications.

The event for which the system or application makes a request to retrieve data from a cache, but that specific data is not currently in the cache memory is known as a <Bold styles={{ 'variant': 'colors.primary' }}>cache miss</Bold>.

![Cache miss](https://res.cloudinary.com/bytesizedpieces/image/upload/v1663569853/article/cache-types/cache_miss_fc9sn2.png)

A <Bold styles={{ 'variant': 'colors.primary' }}>cache hit</Bold> is when the system or application makes a request to retrieve data from a cache and the data is in fact present and served to the application.

![Cache hit](https://res.cloudinary.com/bytesizedpieces/image/upload/v1663569851/article/cache-types/cache_hit_c8c3cw.png)

What the cache strives for, are more **cache hits** that contain **accurate representations of the data in the main memory**. This is where the read-and-write policies largely come into play.

**The read and write policy the cache system follows largely relates to the frequency of cache misses and cache hits.**

### Cache Read Policy

<Bold styles={{ 'variant': 'colors.primary' }}>Cache read policies</Bold> depict how the cache is to behave on data retrieval attempts from the application. Should the cache be referenced and the data is not present, then the main memory takes on the responsibility of serving the information needed. This is an occurrence we want to minimize, especially if our application is read-heavy.

### Cache Write Policy

The way in which the cache gets updated when data changes are goverened by the <Bold styles={{ 'variant': 'colors.primary' }}>cache write policy</Bold>.

There are three primary cache write policies.

1.  write-through
2.  write-back
3.  write-around

### Write-through cache writing policy

<Bold styles={{ 'variant': 'colors.primary' }}>Write-through</Bold> is a cache writing policy in which data is written into the cache and the corresponding main memory location simultaneously.

![Write-through cache](https://res.cloudinary.com/bytesizedpieces/image/upload/v1663569887/article/cache-types/write_through_qynj75.png)

**Advantages of write-through**

- Simple
- Reliable
- Aids with data recovery
- Resolves inconsistency problem

The write-through policy is simple and reliable as our data is in constant sync with the main memory location. Any writes to the data will result in an adjustment to the cache, thereby eliminating the risk of a dated cache. In the circumstance of power outages or system failures, we have the cache to aid with the recovery of our data as well. The cache can serve as a backup.

**Disadvantages of write-through**

- High traffic of writes = worsened performance
- Increased latency

A write-through policy puts into question the advantage of having a cache for write operations. Why? The point of a cache is to _avoid_ going to the main memory, and this policy goes to the main memory one-to-one when it comes to writes.

In the circumstance of high traffic, writing to two sources is not performant, and is vulnerable to latency. Therefore, the **write-through cache policy is appropriate for applications that do not have a high write volume.**

### Write-back cache writing policy

<Bold styles={{ 'variant': 'colors.primary' }}>Write-back</Bold> is a cache writing policy in which data is written only to the cache. The data gets written in the <Bold><Italics>background</Italics></Bold> into the corresponding location in the main memory at specified intervals or under specific conditions. The completion confirmation for the write operation remains unblocked when it comes to writes to the backing store or main memory, as this process happens in the background.

![Write-back cache](https://res.cloudinary.com/bytesizedpieces/image/upload/v1663569882/article/cache-types/write_back_h8qskq.png)

**Advantages of write-back**

- Low latency
- High throughput for write-intensive applications

Writing to the cache is much faster than deferring writes to memory. Therefore the write-back solution can manage many more write requests and complete the requests with low latency.

**Disadvantage of write-back**

- Risk of data availability/data loss
- Complex

Should the cache fail, we run the risk of suffering from data loss in the event that the data had not been written yet in the background to the backing store.

A write-back cache is more complex to implement than a cache using the write-through policy, as the cache needs to track which data is present solely in the cache but not yet in the main memory. Any updated data not yet reflected in the cache typically gets marked as **dirty** to indicate the need for a write to the backing store. The data in these locations get written back to the backing store when they are evicted from the cache. The main memory update on the removal rule is an effect referred to as a **lazy write**. As a result of this defined rule, <Anchor href="https://www.youtube.com/watch?v=xU0ICkgTLTo&ab_channel=Udacity">a read miss in a write-back cache often results in two memory access</Anchor>: one to write the replaced data from the cache back to the store, and one to retrieve the needed data.

The write-back cache is beneficial when it comes to applications with high write volume.

### Write-around cache writing policy

The <Bold styles={{ 'variant': 'colors.primary' }}>write-around policy</Bold> has writes go straight to the database first. The cache gets updated after the write to the main memory is complete, or the corresponding key in the cache is deleted to trigger an update the next time a data retrieval from the cache gets attempted.

![Write-around cache](https://res.cloudinary.com/bytesizedpieces/image/upload/v1663569848/article/cache-types/write_around_f5u36k.png)

**Advantages of write-around**

- Up-to-date database
- Fault tolerance
- Avoidance of cache flooding

**Disadvantage of write-around**

- Potentially higher read latency
- Potential higher miss rate

**The write-around policy works for those applications that write fairly often, and don’t tend to re-read recently written data.** The outcome when using this policy results in a cache with values that tend to get read often.

A detail alluded to thus far but not explicitly discussed yet is how we determine when fields in the cache are in need of replacement, given the cache is limited in space.

## Cache Replacement Policies

A <Bold styles={{ 'variant': 'colors.primary' }}>cache replacement policy</Bold> or <Bold styles={{ 'variant': 'colors.primary' }}>cache eviction algorithm</Bold> governs the circumstances under which data is subject to being overwritten. The cache eviction policy is necessary because caches tend to be substantially smaller than the main memory to stay cost-effective and efficient.

There are several popular methodologies for determining when to replace data stored in a cache system.

**Some cache replacement policies**

- First in first out (FIFO)
- Last in first out (LIFO)
- Least recently used (LRU cache)
- Least frequently used (LFU cache)
- Most recently used (MRU cache)

### First in First Out (FIFO)

If one is familiar with <Anchor href="https://www.geeksforgeeks.org/queue-data-structure/">Queues, the FIFO cache policy</Anchor> will envelop the same behavior.

![FIFO (First in First Out)](https://res.cloudinary.com/bytesizedpieces/image/upload/v1663570008/article/cache-types/fif_b6zhlj.webp)

In a **First in First Out or** **FIFO replacement policy**, any item that first got added to the cache is also the first item to be evicted when there is not enough remaining space. The cache evicts blocks according to the order in which they were added, without regard to how often or how many times they were accessed before.

### Last in First Out (LIFO)

If one is familiar with the <Anchor href="https://www.geeksforgeeks.org/stack-data-structure/">Stack as a data structure</Anchor>, a LIFO or last in first out cache likewise follows the behavior of the Stack.

![LIFO (Last in First Out)](https://res.cloudinary.com/bytesizedpieces/image/upload/v1663570009/article/cache-types/lifo_ppur8q.jpg)

In a **Last in First Out or LIFO replacement policy**, any item that last got added to the cache is also the first item to be evicted when there is not enough remaining space.

### Least Recently Used (LRU cache)

Now, this style of cache is more interesting and common in a real-world setting. <Anchor href="https://leetcode.com/problems/lru-cache/">LRU Caches are common interview questions</Anchor> and are highly applicable.

**The Least Recently Used or (LRU Cache)** keeps track of the items added to the cache, and _when_ they get used. This means that the item that has been retrieved last is the first to get evicted from the cache upon a new entry.

![LRU (Least Recently Used) Cache](https://res.cloudinary.com/bytesizedpieces/image/upload/v1663570010/article/cache-types/lru_cache_ppdkul.png)

Any item that gets retrieved or added to the cache gets brought to the forefront, to indicate the recency for which it was used. If an item gets added, we can assume by the natural ordering that follows from our addition/retrieval rulesets that the last item in the cache is the least recently used one. Therefore the last item can be evicted from the cache on insertions to a cache that is void of space.

### Least Frequently Used (LFU cache)

Though it sounds similar to the least recently used cache, the frequency focuses more on how many times a certain item is referred to from the cache! Instead of keeping tabs on how _recently_ a block was accessed, we store a _value_ depicting how many times it was accessed.

**The Least Frequently Used or (LFU Cache)** counts how often an item in a cache is needed. Those items in the cache that are used least often are discarded first.

### Most Recently Used (MRU cache)

For the **Most Recently Used cache or MRU cache**, you guessed it, the item that is _most_ recently used is the first to be replaced in a cache!

You might be wondering why we would ever want to evict the most recently used items from a cache.

A most recently used cache or MRU cache applies to situations for which the older an item is, the more likely it is to be accessed. Occasionally, if you have just seen something then it’s unlikely you’ll want to see it again!

For a more literal example of the benefit of this style of cache. Imagine an individual is assessing the quality of recently traded devices. You just examined a phone and determine that it is of higher quality. Would you want to examine the phone again anytime soon? Probably not!

The way the most recently used cache or MRU cache approach works is by keeping a list of the items, for which the item that is most recently viewed becomes the first to be evicted should a new item be inserted.

## Summary

Caching systems need to follow rulesets that will determine how effective the cache is at doing its job.

The <Bold styles={{ 'variant': 'colors.primary' }}>cache hit ratio</Bold> is a measurement of how many requests a cache is **_able_** to fulfill successfully, in comparison to the number of requests it receives.

Therefore, a cache needs to seek to improve its **cache hit ratio**.

The <Bold styles={{ 'variant': 'colors.primary' }}>cache miss ratio</Bold> is a measurement of how many requests a cache is **_unable_** to fulfill successfully, in comparison to the number of requests it receives.

A cache should seek to minimize the **cache miss ratio** while ensuring that the data remains relevant.

So, how do we accomplish this?

Caches follow **read and write policies**, where a few examples of write policies are:

1.  write-through
2.  write-back
3.  write-around

Each type of policy comes with trade-offs that need consideration. Application needs should be taken into consideration, and those are determined by evaluating the behavior of the application.

Ask questions like:

> Does the application read data often, or write often?

Or

> Does the application have written data become read immediately, or after some time?

Or how about

> Does recently read application data get re-read often?

Every application has an applicable read-and-write policy. Each policy accommodates different needs. The disadvantages of each need to be carefully evaluated and monitored.

The next detail to consider is that caches are a small subset when compared to the size of main memory.

Because of the limited size of a cache, the cache also needs to follow a policy that governs when stored data is subject to be replaced with incoming fresh data. This type of policy is better known as the <Bold styles={{ 'variant': 'colors.primary' }}>cache replacement policy</Bold>.

Some cache replacement policies:

- First in first out (FIFO)
- Last in first out (LIFO)
- Least recently used (LRU cache)
- Least frequently used (LFU cache)
- Most recently used (MRU cache)

---
Remember, developers are creatures that turn coffee into code. So I'd very much appreciate if you <Anchor slug="overcome-imposter-syndrome" action="buy_coffee_overcome-imposter-syndrome_click" href={"https://www.buymeacoffee.com/stefanagloginic"} styles={{ 'display': 'inline-flex', 'alignItems': 'center' }}>bought me a coffee! <TinyIcon alt="buy me a coffee icon" styles={{
    width: '23px',
    height: '23px',
    marginLeft: '3px'
}} src={"https://res.cloudinary.com/bytesizedpieces/image/upload/v1639952578/assets/buymeacoffee_udskx4.png"} /></Anchor> I’m a new writer and I will be posting very frequently on my findings and learnings in the tech industry and beyond. Join my newsletter if you would like to stay tuned!

Thanks for reading again! ❤️

Cache systems demand a delicate balance for applications, as they have many pros and cons. When done right, caching can be performant, increase application speed and decrease costs. However, the integration of cache systems poses the risk of application reliability downgrade

Different types of caches exist to serve the needs of an application by its behavior. Many write policies for caches have trade offs to consider as well as cache replacement policies to dictate when data in the cache is overwritten. Caches need to improve cache hit ratio over cache miss ratio to make applications more efficient.

A developer is a creature that turns coffee into code

If you like what you see in this blog, buy me a coffee!

10x your Productivity with Project Management Tools ClickUp and Monday

Project management requires coordination, management, and overseeing of projects. In the technical space, a project manager sees a project from beginning to end, ensuring the tasks are completed promptly with as little friction as possible. Project management can be...Read more

Understanding Open Graph Dynamic Image Meta Tags with NextJS

Metadata and meta tags are underestimated SEO optimization tools. Newer web developers may completely gloss over this powerful technique to improve the discoverability of the websites for which they are responsible....Read more

How to decide between the use of custom solutions and ones that bloat your website

The tech industry never stops expanding with alternate solutions. We see a beautiful landing page and get sucked into wanting to integrate these tools into our workflow. The problem with these solutions is that they sometimes can bloat our projects where this could be avoided....Read more

How to diagnose and improve your website application performance by over 20%

Web application performance becomes critical as your traffic and DAU (daily active users) grow for your application. In the case of bytesizedpieces.com, the more articles we added, the worse the blog performed, which was not ideal!...Read more

Common mistakes FrontEnd development learners make in 2022 as shared by experts

FrontEnd engineering is a versatile practice with many focus points that make it easy to get lost when starting out. Beginners have to navigate rough waters and find their lighthouse amidst an ocean of opinions, tutorials, books, best practice claims, and online courses...Read more

Understand types of caches and policies to better build your own system

Cache systems demand a delicate balance for applications, as they have many pros and cons. When done right, caching can be performant, increase application speed and decrease costs. However, the integration of cache systems poses the risk of application reliability downgrade...Read more

Join our newsletter to read delightful bytesizedpieces every Monday!

Understand Open Graph Dynamic Image Meta Tags	1
Pros and Cons of Caching Data in Software	2
How to build a Modal in ReactJS (Part One)	3