Forem: Frank Otabil Amissah

How to Build a Developer Blog with Storyblok and Nextjs.

Frank Otabil Amissah — Mon, 08 May 2023 19:06:20 +0000

In this tutorial, I walk you through concise steps to build a developer blog with syntax highlighting using Storyblok as the backend.

Here's a preview of what you'll build.

What's Storyblok?

Storyblok is a headless Content Management System.

You should have a basic knowledge of how to build React and Node applications to follow through this tutorial.

You can install Node's latest version from their official website if you don't already have it installed.

Without further ado let's dive in.

Setting up Storyblok as backend.

Create a new Storyblok account if you don't already have one and create a space for your project.

In Storyblok, your projects are stored in spaces.

Creating Blogpost content folder.

Storyblok uses folders to group contents of similar structure in a space.

Follow these steps to make a folder:

In your content tab, click "+ Create new" and select Folder.
Input Blogpost for the folder name and select "Add new" under content-type.
Input Blogpost as the content-type and check both options under "Folder content settings". Click "Create" when you're done.

You should have a similar setup as the image below.

Creating Author contents folder.

Follow the steps used in making the blogpost folder to create one for authors. You should have a similar setup as the image below.

Creating Blogpost schema.

Schema represents the field structure for data entry.

Follow the steps below to add fields for an excerpt, featured image, article body, and author in Blogpost:

Open the Blogpost folder, click "+ Create new" and select Story.
Enter your article title in the Name input field and click "Create".

To add the fields click "Define" to open the blocks tab on the right of your screen.

Adding Excerpt field.

Now, follow these steps to add an excerpt field:

Input "Excerpt" as the Name for the field.
Click on the icon on the left of the Name input field.
Select "Textarea" and click "Add" to create an excerpt field.

Adding Featured Image field.

Follow these steps to add Featured image field:

Enter "Featured_Image" in the Name input field.
Click the icon on the right, select "Asset" and click "Add" to create a featured image field.
Click on the Featured_image field to open the Edit field tab and set the filetype to "Images" as shown in the image below.

Now, click "Save & Back to fields" to save the settings.

Adding Article body field.

Let's add Article body for the main part of the content.

Enter "Article_Body" in the Name field.
Click on the icon and select "Markdown" as the type.
Click "Add" to add the field.

Adding Author field.

Now let's add your last field.

Enter "Author" in the Name field.
Click the icon, select "Author" and click Add to add the author field.
Click on the Author field to open the Edit field tab. Set Source to "stories" and restrict to content-type author as shown below.

The field creates a relationship between Blog posts and Authors, such that each post has an author assigned, and one author can have many different posts.

Creating Author schema.

For the author folder let's add two fields, one for profile pic and the other for bio.

Adding Profile Photo field.

Navigate into the author folder and follow these steps to add Profile photo field.

Enter "Profile_image" in the Name field, select "Asset" and click "Add".
Click on the Profile_image field to open the Edit field tab, there set the filetype to "Images" and click "Save & Back to fields".

Adding Author Bio field.

Input "Bio" as the Name for the field, select "Textarea" and click "Add" to create a Bio field.

Note: The title of the story entry will be the Author name of the Author so no need to add extra fields for that.

That's it! This should be okay for the tutorial.

I recommend you to add some content to your space before continuing with the rest of this tutorial.

Building the front end.

To start a new Next.js application, run this command in your terminal:



npx create-next-app@latest

On installation choose the options as shown below in the light-blue color.

Note: This tutorial uses the pages directory.

After a successful installation, run the following command to navigate into your project's directory.



cd <project name>

Now, run the following command to install the application dependencies:



npm i next-mdx-remote graphql-request graphql rehype-prism-plus rehype-code-titles

The command above installs next-mdx-remote to serialize markdown returned from Storyblok, graphql and graphql-request to make graphql requests to Storyblok's graphql API, and rehype plugins for syntax highlighting codes in your articles.

Now, run the following command to start a development server on localhost:3000:



npm run dev

If everything was successful, you should have something like this in your browser.

Structuring directory.

Now, let's get ready to create our UI.

Open your text editor and structure your /src directory to look like so.



|--/src
|  |--/Components
|  |  |--Card.js
|  |--/pages
|  |  |--/api
|  |  |--_app.js
|  |  |--_document.js
|  |  |--index.js
|  |  |--/blog
|  |  |  |--[slug].js
|  |--/styles
|  |  |--global.css
|  |  |--Home.module.css
|  |  |--Slug.module.css
|  |  |--prismTheme.css

The "Component" directory is where your UI components will live.

Note: The pages and styles directories are defaults to Next.js applications.

Building UI components and pages.

In your /Component/Card.js file and add the following code:



import Image from "next/image";
import style from "@/styles/Card.module.css";
import Link from "next/link";

function PostCard({ title, content, slug }) {

//post card for archive page

  return (
    <div className={style.postContainer}>
      <div>
        <div className={style.postImage}>
          <Image
            src={content.Featured_Image.filename}
            alt={content.Featured_Image.alt}
            fill
            className={style.imgs}
          />
        </div>
        <Link href={`blog/${slug}`}>
          <h2 className={style.postTitle}>{title}</h2>
        </Link>
      </div>

      {/* post author info */}
      <div className={style.postAuthorInfo}>
        <div className={style.avatar}>
          <Image
            src={content.Author.content.Cover_Photo.filename}
            alt="article image"
            fill
            className={style.avatarRad}
          />
        </div>
        <div>
          <div className={style.postInfo}>
          <h3>{content.Author.name}</h3>

            <p>April 26,2023</p>
          </div>
        </div>
      </div>
      {/* end of post author info */}
    </div>
  );
}

export default PostCard;

The code above creates the postcards for your archive posts as shown below.

Now, let's build a single post page UI for posts.

Override the content inside /pages/index.js with the following code:



import Head from "next/head";
import { gql, GraphQLClient } from "graphql-request";
import Image from "next/image";
import styles from "@/styles/Home.module.css";
import PostCard from "@/Components/Card";
import Link from "next/link";

export async function getServerSideProps() {

  const url = "https://gapi.storyblok.com/v1/api";
//instantiates a client to make request
  const client = new GraphQLClient(url, {
    headers: {
      token: process.env.PublicToken,
      version: "published",
    },
  });

//query strings for retrieving all blog posts
  const query = gql`
    {
      BlogpostItems {
        items {
          id
          name
          slug
          content {
            Featured_Image {
              filename
              alt
            }
            Author {
              name
              content
            }
          }
        }
      }
    }
  `;

// fetch multiple post from Storyblok
  const { BlogpostItems } = await client.request(query);
  return { props: { data: BlogpostItems.items } };
}

export default function Home({ data }) {
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={styles.main}>
        <div className={styles.itemContainer}>
          {data.map(({ id, name, slug, content }) => {
            return (
              <div key={id}>
                <PostCard title={name} content={content} slug={slug} id={id}/>
              </div>
            );
          })}
        </div>
      </main>
    </>
  );
}

The code above fetches data from Storyblok using graphql and renders them on your archive page.

Now, create a pages/blog/[slug].js file and add the following code:



import { gql, GraphQLClient } from "graphql-request";
import { MDXRemote } from "next-mdx-remote";
import {serialize} from "next-mdx-remote/serialize";
import rehypePrism from 'rehype-prism-plus';
import rehypeCodeTitles from 'rehype-code-titles';
import style from "@/styles/Slug.module.css";
import Image from "next/image";

export async function getStaticPaths() {
  const url = "https://gapi.storyblok.com/v1/api";

//instantiates a new client
  const client = new GraphQLClient(url, {
    headers: {
      token: process.env.PublicToken,
      version: "published",
    }
  });

//query string to query  all slugs for pre-rendering
  const querySlug = gql`
    {
      BlogpostItems {
        items {
          slug
        }
      }
    }
  `;

// fetch for post slugs from Storyblok
  const { BlogpostItems } = await client.request(querySlug);
  const paths = BlogpostItems.items.map(({slug}) =>  ({ params: {slug} }));
  return { paths , fallback: "blocking" };
}

export async function getStaticProps({params}) {
  const url = "https://gapi.storyblok.com/v1/api";

  const client = new GraphQLClient(url, {
    headers: {
      token: process.env.PublicToken,
      version: "published",
    },
  });

//query string to query just one post content based on slug in url
  const query = gql`
  query mypost($id: ID!){
    BlogpostItem(id: $id){
      name
      content {
        Date
        Author{
          name
        }
        Article_Body
        Featured_Image {
          filename
          alt
        }
      }
    }
  }`;

// fetching data from Storyblok
  const { BlogpostItem } = await client.request(query, {id: `posts/${params.slug}`});

  const {name, content} = BlogpostItem;

// serialize content with next-mdx-remote.
  const source = await serialize(BlogpostItem.content.Article_Body, { mdxOptions: {
    rehypePlugins: [rehypeCodeTitles, rehypePrism]
  }})

  return { props: { Source: source, name, content } };
}

function SinglePost({ Source , name, content }) {
  return (

  <div className={style.wrapper}>

    <div className={style.imgWrapper}>
      <Image src={content.Featured_Image.filename} alt={content.Featured_Image.alt} fill />
  </div>
  <div><h1>{name}</h1></div>
  <div className={style.postContent}>

    <div>
      <MDXRemote {...Source}/>
    </div>
  </div>
  </div>);
}

export default SinglePost;

The code above check for post slugs matching the URL, fetch the data for that slug and renders them as a single post content on request.

Add the following code to the top of your _app.js file to apply the syntax highlighting theme.



import '@/styles/prismTheme.css'

Adding support for remote images.

By defaults, Nextjs prevents the use of external images in your application.

To allow the use of images from an external source you must add the URL of that source to the next.config file.

In the root of your project directory, override next.config.js with the following:



/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '**.storyblok.com',
      },
    ],
  },
}

module.exports = nextConfig

That's it for our blog pages.

Add the following code to env.local in your root directory to authorize your requests.



PublicToken = "public token"

You can get your token from your space in Settings>Access Tokens.

Styling UI components.

In the styles folder, let's add CSS codes to style our card component and UI pages.

Override the global.css file with the code below:



:root {
  --main-bgColor: #232323;
  --black: #000;
  --white: #fff;
  --gray: #9A9494;
  --light-gray: #eaeaea;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body {
  max-width: 100vw;
  background-color: var(--main-bgColor);
  font-size: 1.1rem;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: #000;
}

Now, create a Card.module.css and add the following code:



.postContainer {
  box-sizing: border-box;
  padding: 20px 20px;
  width: 320px;
  height: 450px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--light-gray);
  border-radius: 12px;
}

.postTitle:hover {
opacity: 0.7;
}

.postImage {
  margin: auto;
  width: 280px;
  height: 198px;
  position: relative;
}
.postTitle {
  margin-top: 25px; 
 font-size: 1.2 rem;
  font-weight: 600;

}

.postTitle:hover {
opacity: 0.6;
}

.postAuthorInfo {
  display: flex;
  flex-direction: row;
  gap: 15px;
}
.postInfo {
  display: flex;
  flex-direction:column;
  gap: 7px;
}
.imgs {
  border-radius: 8px;
}
.avatar {
  width: 57px;
  height: 57px;
  position: relative;
  border-radius: 50%;
}
.avatarRad {
    border: 5px solid gray;
  border-radius: 100%;
}

The code above applies the styling to our Card.js components.

Now, override Home.module.css with the following code:



.main {
  min-height: 100vh;
}

.itemContainer {
  max-width: 1020px;
  margin: 60px auto;
  display: flex;
  flex-direction: row;
  gap: 30px;
  flex-wrap: wrap;
}

/* Mobile */
@media (max-width: 700px) {
  .itemContainer {
    max-width: 320px;
  }
}

/* Tablet and Smaller Desktop */
@media (min-width: 701px) and (max-width: 1120px) {
  .itemContainer {
    max-width: 674px;
    }
}

This code styles your index.js page.

Create a Slug.module.css file and add the following code:



.wrapper{
    background-color: whitesmoke;
    width: 800px;
    min-height: 700px;
    padding: 70px 70px;
    margin: 60px auto;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.imgWrapper {
    width: 100%;
    height: 400px;
    position: relative;
}

/* Mobile */
@media (max-width: 700px) {
    .wrapper {
      max-width: 320px;
      padding: 20px 20px;
    }
    .imgWrapper {
        width: 100%;
        height: 200px;
    }
  }

  /* Tablet and Smaller Desktop */
  @media (min-width: 701px) and (max-width: 1120px) {
    .wrapper {
      max-width: 674px;
      }
  }

This code styles our [slug].js pages.

Add the following code to prismTheme.css to apply the syntax highlight theme.



code[class*="language-"],
pre[class*="language-"] {
    -moz-tab-size: 2;
    -o-tab-size: 2;
    tab-size: 2;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: normal;
    font-family: Menlo, Monaco, "Courier New", monospace;
    font-size: 14px;
    color: #76d9e6;
    text-shadow: none;
}

pre > code[class*="language-"] {
    font-size: 1em;
}

pre[class*="language-"],
:not(pre) > code[class*="language-"] {
    background: #2a2a2a;
}

pre[class*="language-"] {
    padding: 15px;
    border-radius: 4px;
    border: 1px solid #e1e1e8;
    overflow: auto;
    position: relative;
}

pre[class*="language-"] code {
    white-space: pre;
    display: block;
}

:not(pre) > code[class*="language-"] {
    padding: 0.15em 0.2em 0.05em;
    border-radius: .3em;
    border: 0.13em solid #7a6652;
    box-shadow: 1px 1px 0.3em -0.1em #000 inset;
}

.token.namespace {
    opacity: .7;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: #6f705e;
}

.token.operator,
.token.boolean,
.token.number {
    color: #a77afe;
}

.token.attr-name,
.token.string {
    color: #e6d06c;
}

.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
    color: #e6d06c;
}

.token.selector,
.token.inserted {
    color: #a6e22d;
}

.token.atrule,
.token.attr-value,
.token.keyword,
.token.important,
.token.deleted {
    color: #ef3b7d;
}

.token.regex,
.token.statement {
    color: #76d9e6;
}

.token.placeholder,
.token.variable {
    color: #fff;
}

.token.important,
.token.statement,
.token.bold {
    font-weight: bold;
}

.token.punctuation {
    color: #bebec5;
}

.token.entity {
    cursor: help;
}

.token.italic {
    font-style: italic;
}

code.language-markup {
    color: #f9f9f9;
}

code.language-markup .token.tag {
    color: #ef3b7d;
}

code.language-markup .token.attr-name {
    color: #a6e22d;
}

code.language-markup .token.attr-value {
    color: #e6d06c;
}

code.language-markup .token.style,
code.language-markup .token.script {
    color: #76d9e6;
}

code.language-markup .token.script .token.keyword {
    color: #76d9e6;
}

/* Line highlight plugin */
.line-highlight.line-highlight {
    padding: 0;
    background: rgba(255, 255, 255, 0.08);
}

.line-highlight.line-highlight:before,
.line-highlight.line-highlight[data-end]:after {
    padding: 0.2em 0.5em;
    background-color: rgba(255, 255, 255, 0.4);
    color: black;
    height: 1em;
    line-height: 1em;
    box-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
}

Feel free to use any other theme from prism themes.

That's it for our styling! Reload your application to view changes.

Conclusion

You've successfully built a developer blog that supports syntax highlighting with Storyblok and Next.js. I encourage you to deploy your application to any hosting platform and share it with friends.

Thanks for reading this article! If you like more of these articles please follow me. You can also find the source code on this GitHub repo.

A Comprehensive Guide to How JavaScript is Executed.

Frank Otabil Amissah — Sat, 01 Apr 2023 13:03:25 +0000

JavaScript is a powerful programming language used extensively for web development. However, in order to understand how JavaScript is executed in various engines it is important to understand the various components that come together to create a functional JavaScript environment.

In this article, you'll learn how variables are hoisted and the processes involved at the execution phase.

Without further ado, let's dive in.

Execution Context.

JavaScript codes are executed in contexts. An execution context can be thought of as a container that holds all the necessary information about the current state of the program. This includes variables, functions, and objects that are currently available within the current scope. The first execution context created is the global execution context. The global execution context contains all variables and functions declared in the global scope (window object in web browsers and global object in Node.js). The function and variable declarations are bound to the global object using the this keyword and are then stored in a memory heap.

Hoisting of declarations.

The first thing that happens in the execution contexts is hoisting. This is the process of moving all variable and function declarations to the top of their respective scopes. This means that a variable's value or function can be used or called, respectively, before they're declared later in the code.

For example, suppose we have the following code:

let myVar = "Hello "

function fn(){
    console.log(myVar + "John")
}

fn(); // Returns Hello John

JavaScript creates the global object(wrapper) to encapsulate the code and binds all functions and variables to its this keyword. Now, this example is very straightforward, the variable is at the top so it's hoisted and initialized before any other line is executed.

Let's look at the same example in a different way.

let myVar = "Hello "

fn(); // Returns Hello undefined

var lastname = "John"

function fn(){
    console.log(myVar + lastname)
}

Notice that the function fn is called before it's declared in our code, what happens is that, JavaScript first pulls all variable and function declarations to the top of the scope and initializes them into the memory heap it had created and then proceeds to execute the code line by line (from top to bottom).

Also notice that the function returns Hello undefined instead of throwing an error, that's because only declarations are hoisted and a preinitialized to undefined

However, for variables declared using the let and const keywords their values are not initialized, which means trying to use them before their line executes will throw an error,

For example, suppose we have the following code:

fn(); // Returns Cannot access 'myVar' before initialization

function fn(){
    console.log(myVar + "John")
}

let myVar = "Hello "

Notice the error message "Cannot access 'myVar' before".

JavaScript after hoisting variables local to its scope initializes them to undefined, but for let and const variables their values are left uninitialized till the line of declaration has been reached.

It's important to note that, JavaScript engines prevent the execution of any line of code that is yet to be initialized.

Note: All variables except ones declared by let and const are initialized to undefined including function expressions.

Here are examples of function expressions,

let fn_expression = () =>{
    console.log("I'm a function expression")
}

let fn_expression1 = function() =>{
    console.log("I'm too")
}

var fn_expression2 = function fn() =>{
    console.log("I'm just like the others")
}

Funcion Execution Context.

Every time a function is called, a new function execution context is created inside of the global execution context to handle that function call. It follows the same process as the global execution context by creating an argument object (wrapper). The argument objects has information about the local variables of that function, arguments passed to the function and its scope chain.

Function execution contexts may contain another function execution context, to handle this chain JavaScript engines use a call stack.

Call Stack

The call stack is an essential component of the JavaScript runtime environment that helps keep track of the current execution context. It is a data structure that manages the order in which functions are called and executed in the program.

Every time a function is called in JavaScript, its execution context is added to the top of the call stack. This execution context includes information about the function, such as its arguments, local variables, and scope. Once the function completes its execution, its execution context is removed from the top of the call stack, and the control is passed back to the calling function (the function that called it).

The call stack follows the Last-In-First-Out (LIFO) principle, which means that the most recently added item is the first one to be removed. This means that the functions that are called later are added to the top of the call stack, and the functions that are called earlier are at the bottom of the stack.

For example, suppose we have the following code:

function multiply(a, b) {
  return a * b;
}

function square(n) {
  return multiply(n, n);
}

console.log(square(2));

When the program starts running, the global execution context is added to the call stack. When the square function is called with an argument of 2, its execution context is added to the top of the call stack. Inside the square function, the multiply function is called with the argument 2, and its execution context is added to the top of the call stack.

Once the multiply function completes its execution and returns a value, its execution context is removed from the top of the call stack, and the control is passed back to the square function. Once the square function completes its execution and returns a value, its execution context is removed from the top of the call stack, and the control is passed back to the global execution context.

If the call stack becomes too large, it can cause a stack overflow error. This error occurs when the call stack exceeds its maximum size, typically due to an infinite recursive function.

So far I have talked about how synchronous tasks are handled on the call stack. Now let's look at how asynchronous tasks are handled.

Call Queue

JavaScript is a single-threaded language, which means that it can only execute one task at a time. However, it is often necessary to perform asynchronous tasks such as fetching data from a server or waiting for user input. In order to handle these tasks, the JavaScript environment maintains a call queue. Any functions that need to be executed asynchronously are added to the call queue.

When an asynchronous task is initiated, such as a timer or an AJAX request, it is added to the call queue instead of the call stack. The call queue manages the order in which these tasks are executed, ensuring that they are executed in the correct order.

The call queue follows the First-In-First-Out (FIFO) principle, which means that the tasks that are added to the queue first are the first ones to be executed.

For example, suppose we have the following code:

console.log('First');

setTimeout(function() {
  console.log('Second');
}, 1000);

console.log('Third');

When the program starts running, the console.log('First') statement is executed and added to the call stack. Next, the setTimeout function is called, and a timer is created for one second. Since the setTimeout function is asynchronous, it is added to the call queue instead of the call stack. The console.log('Third') statement is then executed and added to the call stack.

After one second, the timer expires, and the callback function is added to the call queue. Since the console.log('Third') statement has already been executed, the callback function is the next task to be executed in the call queue. The callback function is then added to the call stack and executed, resulting in the output of Second.

Tasks added to the call stack from the call queue are handled by an event loop.

Event Loop

When an event is triggered in the program, such as a user clicking a button or a timer expiring, it is added to the call queue. The event loop continuously checks the call queue for tasks that need to be executed. When a task is found, the event loop checks to see if the call stack is empty, when it is, the event loop takes the task from the call queue and adds it to the call stack for execution.

The event loop operates continuously, checking the call queue for tasks and executing them one by one until the call queue is empty.

For example, suppose we have the following code:

console.log('First');

setTimeout(function() {
  console.log('Second');
}, 0);

console.log('Third');

When the program starts running, the console.log('First') statement is executed and added to the call stack. Next, the setTimeout function is called, and a timer is created for zero seconds. Since the setTimeout function is asynchronous, it is added to the call queue instead of the call stack. The console.log('Third') statement is then executed and added to the call stack.

Since the timer for the setTimeout function is set to zero seconds, the callback function is immediately added to the top of the call queue. The event loop then takes the callback function from the call queue and adds it to the call stack. The callback function is then executed, resulting in the output of Second.

Wrapping Up

In this article, you've learned the steps involved when executing JavaScript code in a runtime environment starting from the creation of scope objects, hoisting of scope variables, and understanding how synchronous and asynchronous tasks are handled by the call stack and call queue.

Thanks for reading. Happy coding!

Ultimate Guide to Mutations in Javascript.

Frank Otabil Amissah — Sun, 26 Mar 2023 13:31:32 +0000

Mutations in javascript although simple, can be very tricky to understand.

In this write-up, you'll learn to, assign values to a variable, make shallow copies in javascript, and also you'll understand how mutations work and how to avoid them.

To understand mutations, let's understand the different types of data types available and how variables are assigned and then take it from there.

Without further ado let's dive in.

Javascript data types.

Data types are the different types of values a variable can store. In javascript, there are two distinct categories of data types, primitive data types, and user-defined or object types.

Primitive data types.

In javascript, primitive data types are implemented at the core of the language. Primitive values in javascript include:

string. A sequence of characters. For example, "Hello world!", "Toby" etc.
number. Smaller integer values including decimals. For example -0.3, 5, 10, etc.
bigint. Larger integer values or numbers of great length
Boolean. For example, true or false
undefined.
symbol.
null.

In javascript, primitive values are immutable and do not have any methods although they behave as if they do.

let's understand it by looking at the code blocks below:

let numstr = 5..toString(); 

console.log(numstr) //Returns: 5

Notice that calling .toString() method on 5 returns 5. Let's look at another example

var num = 5; // assigning a primitive of type number to variable num.

let numstr = num.toString(); // converts "num" to string.

console.log(numstr) //Returns 5 

console.log(typeof numstr) //Returns string

In this example, you realize that calling .toString() on the variable also returns 5, what happens is that javascript coerces the variable by wrapping the variable in a wrapper object and then calls the .toString method on the wrapper object but not on the actual primitive value.

Reference / User-defined data types.

User-defined types are data types that are constructed by an author using primitive values and/or other user-defined types. Javascript user-defined types are all objects by default. These include:

Objects literals
Arrays
Functions. Functions are a special type of object.
Dates and any object defined using the new keyword.

Variables.

A variable is a named storage location. Variables point to a location containing a specific data type. For example, a fridge containing a snack, the fridge in this context is your "variable" and the snack is the value of a specific data type.

Assigning variables(primitive and reference types).

To assign a variable, you must declare it using any of these keywords const, let, and var. For example,

const myVar = "something"

//or

let myVAr = "something"

//or 

var myVay = "something"

In these examples "something" can be any of the data types you know. It's also common to see variables defined without being declared. For example,

myVar = "something"

This is allowed in javascript, because javascript is not static typed and also javascript hoists variables.

You can also assign a variable by referencing another variable. For example,

myVar = "something"

myVar1 = myVar // myVar1 is also equal to "something"

In javascript, assigning primitive values to variables like this does not mean myVar1 and myVar are pointing to the same storage location, instead myVar1 points to a different location containing the value it obtained from myVar. This means that changing the value in one variable does not affect the other.

However, assigning object types to variables behaves slightly differently.

Shallow Copy

Let's look at an example,

let obj1 = {name: "John", age: 10};

let obj2 = {name: "John", age: 10};

In this example, both obj1 and obj2 hold objects of similar values but are completely different, both objects point to different memory locations. Changing the values in obj1 does not change that of obj2. Let's look at another example that uses a reference to pass value,

let obj1 = {name: "John", age: 10};

let obj3 = obj1; // obj3 = {name: "John", age: 10};

let arr = [2, 4, 6, 8];

let arr2 = [...arr, 10] //arr2 = [2, 4, 6, 8, 10]

In this example obj3 and arr2 make a shallow copy of obj1 and arr respectively, which means they're pointing to the same memory location, any selective change to either name or age properties of either object variable affects the value of the other object variable, and also changing the values in arr affects arr2.

Note: Passing javascript objects by reference, or using the spread operator creates a shallow copy of the source variable.

In the same context as the latter example let's look at this example

obj3.name = "Doe"; // obj3 becomes {name: "Doe", age: 10};

console.log(obj1) // Returns {name: "Doe", age: 10}

You realize that changing the value of the name property in obj3 changes the value for obj1.name.

Mutations.

Mutation means a change in the original code or data.

Note: Primitive values cannot be mutated. They're read-only. For example,

let num = 5;

let str = "Hello";

num = 8;
console.log(num); //Returns 8 as the new value for num

str[0] = "p"

console.log(str);  //Returns Hello

In the example, notice that it's possible to reassign a primitive value to a variable as in line 3 but it's not possible to change the value "h" at str[0] to p. Let's look at another example involving strings.

let str = "hello";

str = "Hey"

console.log(str); //Returns Hey

In this example, we reassigned the str variable a value of "Hey" and did not just replace a character in the old string.

Mutating object types.

Note: Using const to declare a variable means it cannot be reassigned to a new value for both primitive and object data types. However, for object types, their values can be mutated. For example,

const obj = {
    name: "John",
    Subscribers:50
}

const arr = [{name:"Tutor", Subscribers: 400}, {name:"Doe", Subscribers: 10}]

obj = arr[0] // Returns TypeError: Assignment to constant variable.

Notice the error message says it's not possible to assign a new value.

Now, let's look at an example of mutating a const variable,

const obj = {
    name: "John",
    Subscribers:50
}

const obj2 = obj;

obj2.name = "Dave"

console.log(obj) //Returns { name: 'Dave', Subscribers: 50 }

Notice that the value of the name property in obj has changed or better has been mutated. A metaphor for these examples will be, signing up for an account on Gmail with a name that's already been taken. It throws an error saying "Username already taken"(variable space already filled) but the owner of that specific account can change his username and it updates his details with the change.

Let's look at another example of mutation using the array from the previous example,

const arr = [{name:"Tutor", Subscribers: 400}, {name:"Doe", Subscribers: 10}]

const newArr = [...arr] //making shallow copy

newArr[0].name = "Clement" 

console.log(newArr[0]) //Returns {name:"Clement", Subscribers: 400}

console.log(arr[0]) //Returns {name:"Clement", Subscribers: 400}

The example returns a new name for the first array object, you realize that although the name changed other values did stay the same and the object at that location remains the same object even if we selectively change the number of subscribers too.

Now that we've covered mutation let's look at the opposite or what's not considered a mutation.

Using the same example,

const arr = [{name:"Tutor", Subscribers: 400}, {name:"Doe", Subscribers: 10}]

const newArr = [...arr]

newArr[0] = {name: "Clement", Subscribers: 0}

console.log(newArr) //Returns [{name: "Clement", Subscribers: 0}, { name: 'Doe', Subscribers: 10 }]

console.log(arr) //Returns arr unchanged

Notice the difference in these examples on line 3, In the latter example the position newArr[0] has been assigned a new object. A better metaphor to understand these two examples will be, Taking your Jeep to a garage for painting. Although the Jeep comes out with a different color it remains the same old Jeep(mutating an object). However, a new Lambo entering the same garage after the Jeeps leaves represents a completely different vehicle in the garage(reassign an object).

Note: To avoid mutating variables mistakenly, always reassign values to shallow copies of object types

Wrapping Up.

In this article, we've covered data types, variables, how to assign and reassign variable values, how to make shallow copies of objects and arrays, how to mutate objects, and how to avoid mutating objects.

Did you enjoy this article? If so, get more similar content by following me. Thanks for reading. Happy coding.

How to Build a Link-shortening App with React and Bitly API.

Frank Otabil Amissah — Sun, 19 Mar 2023 01:15:21 +0000

Link shortening is a way to reduce an excessively long URL into a short URL using link management software.

In this tutorial, I teach how to make a link shortener using the Bitly API and React.

Here's a demo of the app.

Bitly is a URL-shortening service and a link management platform.
-Bitly

React is a javascript front-end library for making user interfaces.

Note: This tutorial uses node v18, and react v18.

let's dive in.

Bootstrapping a new react app.

Run the code below in your terminal to start a new react project:



npx create-react-app app_name

The command automatically creates a folder with the name specified for the project.

After react app is set up successfully, navigate into your react project directory by running:



cd app_name

In your project directory, install React-copy-to-clipboard by running the following command in your terminal:



npm install react-copy-to-clipboard

Now, run the following command to view your application on localhost:3000.



npm run start

Restructuring project directory

Open your text editor and structure your ./src directory to look like so,



|--/src
|  |--/icons
|  |--Home.css
|  |--Home.js
|  |--index.css
|  |--index.js

You may delete App.test.js, setupTest.js, and reportWebVitals.js from your directory as you'll not need them in this tutorial.

icons folder will contain icons you'll use in the app.

Making the UI component.

Add the following code to your /src/Home.js file:



import { useState } from "react";
import { CopyToClipboard } from "react-copy-to-clipboard";
import "./Home.css";
import send from './icons/send.png';
import copyicon from './icons/copy.png';
import copiedicon from './icons/copied.png';

function Home() {
  const [longURL, setLongUrl] = useState("");
  const [shortLink, setShortLink] = useState({});
  const [active, setActive] = useState(false);
  const [copy, setCopy] = useState(false);

  function handleChange(e) {
    setLongUrl(e.target.value);
  }

  async function handleSubmit(e) {
    e.preventDefault();
    await fetch("https://api-ssl.bitly.com/v4/shorten", {
      method: "POST",
      mode: "cors",
      headers: {
        Authorization: `Bearer ${process.env.REACT_APP_BITLY_TOKEN}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        long_url: longURL,
        domain: "bit.ly",
        group_guid: `${process.env.REACT_APP_GUID}`,
      }),
    })
      .then((res) => res.json())
      .then((data) => {
        const new_link = data.link.replace("https://", "");
        fetch(
          `https://api-ssl.bitly.com/v4/bitlinks/${new_link}/qr?image_format=png`,
          {
            mode: "cors",
            headers: {
              Authorization: `Bearer ${process.env.REACT_APP_BITLY_TOKEN}`,
            },
          }
        )
          .then((response) => response.json())
          .then((result) => {
            setShortLink(result);
            setActive(true);
          });
      });
    setLongUrl("");
  }

  return (
    <div className="App">
      <h2>A Simple Bitly Link Shortener</h2>
      <div>
        <form method="post" action="" onSubmit={handleSubmit}>
          <input
            name="long_url"
            type="text"
            value={longURL}
            placeholder="Paste your url"
            onChange={handleChange}
          />
          <button type="submit"><img src={send} alt="send icon" id="send_icon"/></button>
        </form>

      </div>

      {/* show on success... */}

      {active ? (
        <div className="show_links">
          <img src={shortLink.qr_code} alt="Qr code" className="qr_img"/>
          <div>
            <h3>Here's your short link...</h3>
            <span>
              <p>{shortLink.link}</p>
              <CopyToClipboard onCopy={()=>{
                setCopy(true);
              }} text={shortLink.link}>{ !copy ? <img src={copyicon} alt="copy icon" width="17px" height="17px"/> : <img src={copiedicon} alt="copy icon" width="17px" height="17px"/>  }</CopyToClipboard>

            </span>
          </div>
        </div>
      ) : (
        ""
      )}
    </div>
  );
}

export default Home;

The async handleSubmit function is called when we click the submit button. You'll notice that it contains two fetch methods, one contained in the other. The first fetch method submits the URL to bitly and passes the bit.ly link received in the response object to the second fetch method which is then used to request the QR code.

The handleChange function is called to update the input field as we type.

Now, go to /src/index.js and override its content with the following code.



import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import Home from "./Home";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Home />
  </React.StrictMode>
);

reportWebVitals(console.log))
reportWebVitals();

The code blocks above imports and renders the home component in the root node.

Adding project icons.

Download the icons from Mediafire, unzip and paste its content in /src/icons.

Styling the component.

Note: In this tutorial, we'll not focus on CSS so I prepared some CSS to add to the project.

In your /src/Home.css file add the following code:



* {
  margin:0;
}
.App {
width:100%;
height:100vh! important;
text-align:center;
background-color:rgb(207, 207, 207);
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
}

h2{
  padding:0 0 20px;
  font-size:2rem;
}

input[type=text] {
  font-size: 1.2rem;
  width: 300px;
  height: 100%;
  border-radius: 8px 0 0 8px;
 background-color: rgb(233, 233, 233);
 text-align: center;
 padding: 10px 20px;
 border: none;
}
input[type=text]:focus {
  outline: none;
  border: none;
}
button{
  font-size:1.2rem;
  box-sizing: border-box;
  height:100%;
  padding:10px 25px;
  border:none;
  border-radius:0 8px 8px 0;
}
button:hover{
  background-color: rgb(39, 137, 179);
}
#send_icon{
  width:21px; 
  height:1.2rem;
  vertical-align: middle;
}
.show_links {
  padding: 10px;
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  column-gap: 20px;
  align-items: flex-end;
  background-color: rgb(233, 233, 233);
  width:400px;
  height:100px;
  animation-name: fadeIn;
  animation-duration: 3s;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.qr_img {
  width: 100px;
  height: inherit;
  background-color: black;
  color: white;
}
.show_links  p {
  width: 200px;
  padding: 10px 15px;
  text-align: left;
  font-weight: 500;
  border: 1.5px solid rgb(179, 179, 179);
  border-radius: 8px;
}
 span {
  display: flex;
  flex-direction:row;
  padding: 10px 0;
  column-gap: 15px;
  justify-content: center;
  align-items: center;
}
h3 {
  text-align: left;
  margin-bottom: 10px;
  color: rgb(39, 137, 179);
}

/*for smaller devices */
@media (max-width:700px){
  h2{
    padding:0 0 20px;
    font-size:1.3rem;
  }
  .show_links {
    padding: 15px;
    margin-top: 20px;
    display: block;
    width:200px;
    height:300px;
  }
  .qr_img {
    width: 200px;
    height: 200px;
    margin: auto;
  }
  h3 {
    margin: 10px 0;
    color: rgb(39, 137, 179);
    font-size: 1.05rem;
  }
  input[type=text] {
    font-size: 1rem;
    width: 170px;
    height: 100%;
    border-radius: 8px 0 0 8px;
   background-color: rgb(233, 233, 233);
   text-align: center;
   padding: 10px 20px;
   border: none;
  }
  button {
    font-size: 1rem;
  }
  #send_icon {
    width: 1.05rem;
    height: 1rem;
    vertical-align: middle;
  }
  .show_links  p {
    width: 170px;
    font-size:0.9rem;
  }
  span {
    column-gap: 10px;
  }
}

Override your ./src/index.css file with the following code:



body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: rgb(233, 233, 233);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

Setting up authentication token.

Now, go to Bitly.com and create an account if you don't already have one.

Enter your Password and generate your API token.

In your root directory, create a .env file and add the following code:



REACT_APP_BITLY_TOKEN = 'enter authorization token here'
REACT_APP_GUID = 'enter guid here'

Guid can be copied from your Bitly account URL https://app.bitly.com/[guid_here]/bitlinks.

Now, add .env to your .gitignore file.

Pushing Repo to GitHub.

Run git init in your projects directory to turn our local environment into a repository.
Now, go on and log in to your GitHub account and make a new repository.
Back in your terminal let's connect the local repository to GitHub, run git remote add origin <url to your GitHub repository>.
Change your branch to match the branch on GitHub by running git branch -M main.
Run git add --all, to stage your files.
Run git commit -m "your_commit_message" to commit your files.
Finally, run git push -u origin main to push to GitHub.

Now, refresh your GitHub repo to reflect changes.

Deploying application on Netlify.

Go to netlify.com and sign up for an account if you don't already have one.

Login and navigate to Sites from your dashboard.
Click "Import from GitHub" and connect Netlify to GitHub on the page that follows.
Next, authorize Netlify and select the repo you just created.
Next, Click "Deploy site" to build.
After a successful build, Netlify will automatically assign a name to your app, you can change that under Site overview >> Site settings tab >> "Change site name".

Let's add our environment variables to Netlify. Copy the content of your .env file, go to Site settings >> Environment Variable >> "Add a variable" and select "Import from a .env file", paste your content and click "Import variable".

Go to the Deploys tab, click "Trigger deploy" and redeploy to use the environment variables in your live app.

Conclusion.

That's it! If you've made it this far without an error then you have successfully built your link-shortening app. Hurray! 🙌. I encourage you to deploy the application and share it with your friends, you can also share it with me on Twitter @amotabil8.

P.S. If you liked the project do react to my post and if you ran into an error do share a comment and I'll do my best to help you resolve it. ✌️

Resources.

Here's a link to the GitHub repository.

Learn more about React.

Learn more about Bitly's API.

Learn more about Netlify.

5 APIs Every Front-end Developer Should Know.

Frank Otabil Amissah — Thu, 02 Mar 2023 02:00:55 +0000

As a developer, there are many instances where you’ll need to use an API. From building a simple portfolio project or a prototype to building robust real-time applications.

APIs saves us the hustle of reimplementing a logic by simply providing an interface to help with the functionalities we wish to have in our application.

Here are five APIs that I love and I think you should try them out.

1. JSON Placeholder API.

The JSON placeholder API is a RESTFUL API for fake content. It’s a go-to API if you need to make a quick prototype for a blog or website. From this API, you can get data for posts, comments, users etc.

Features of the API:

Endpoints to make CRUD operations.
Free to use.
No keys are required.

Learn more about it on their website.

2. Fakestore API.

Like JSON placeholder it provides fake content but is more tailored for e-commerce prototypes. You can fetch product data, reviews, and more from their restful endpoints.

Features of the API:

REST endpoints to make CRUD operations.
Free to use.
No keys are required.

Learn more about the API on their website.

3. Auth0.

Auth0 is a platform for user authentication and authorization. It provides an easy interface to implement authentication methods like multifactor authentication, social logins, and even authorization to backend services.

Some features of the API:

Provides customizable login screens
Free plan of up to 7000 active users
Provides analytics.

Learn more about the API on their website.

4. Stripe API.

The stripe API helps a developer implement stripe's payment platform in his application. The API provides a more robust and secure way to handle payments in applications.

Features of the API:

REST endpoints to make CRUD operations.
Provides webhook endpoint.
Requires key for authentication.

Learn more about it on theirwebsite.

5. Counter API.

The counter API provides an interface to implement a counter into our application. The counter API can be used to keep track of numbers on your application. For example, the number of times a button has been clicked.

Features of the API:

Completely free to use.
No rate limits.
Requires key.

Learn more about it on their website.

Conclusion.
Although this post is limited to a few APIs there are a ton of other APIs out there to help you build any robust app you have ever dreamed of.

If you find this article helpful please react to this post and share your thought about these APIs, you can even comment below some of the APIs you know and I’d love to try them out.

How to Build a Nextjs Blog with Hygraph and Deploy to Vercel in 2023.

Frank Otabil Amissah — Tue, 21 Feb 2023 00:52:36 +0000

As a part of my 100 days coding challenge this year I decided to build a Next.js blog with Hygraph powering my backend and to also document the process in this article.

In this write-up, I will teach you how to build a fully responsive blog in two simple steps.

Here's a preview of the blog you'll build.

You should have a basic knowledge of how to build React and Node applications to follow through this tutorial.

What's Next.js?

Next.js is a react framework for building web apps. Next.js ships with features like Server Side Rendering, Static Site Generation, and Incremental Static Regeneration that abstract a lot of work from the developer so that you can focus on the UI.

What's GraphQL?

GraphQL is a query language for making CRUD operations to an API.

What's Hygraph?

Hygraph is headless CMS that can be used as the backend for your web applications. Hygraph uses GraphQL for making CRUD operations, allowing you to request specific data from an API.

What's Vercel?

Vercel is a platform for hosting your single-page application.

Without further ado let's dive right in.

STEP 1: SETTING UP THE HYGRAPH BACKEND.

Go to hygraph and create an account if you don't already have one.

Now, click Add Project to create a new project. Give the project a name, and description, and select the region you'd like to serve your content from.

ADDING CONTENT SCHEMA's

Now, let's add two Models to the project, one for blog posts and the other for author information.

Models in Hygraph define the structure for adding data. The fields for a model can be added from the Add field section on the right side.

From your Hygraph dashboard, Click on Schema and then click on + Add on the right side of MODELs.

Now, input "Author" as the display name and click Add Model.

In the author model, add two fields Author name field and the Author description field.

Author name: Add a Single line field from the right sidebar and set it as required under the Advanced tab.

Author description: Add a Multi line field from the right sidebar and set it as required under the Advanced tab.

Hurray! you've created your first Model.

Now let's add the Blogpost model, this model comprises a Title field, an Excerpt field, a Slug field, an asset field for the post's featured image, a rich text format field for post content, and a reference field to link the Author model to Post model.

Title: add a Single line field, set as required.

Excerpt: add a Multi line field, set as required.

Slug: add a Slug field. For the Slug field, you'll need to check Generate slug from template under slug options and enter {title} into the slug template field. This allows the slug to be auto-generated using the title field.

Under the validations tab, check Make the field required, Set field as unique, Match specific pattern, and case insensitive.

Featured Image: add an Asset picker field, use coverPhoto as the display name, and set it as required.

Content: Add a rich text field from the right sidebar, and set it as required.

Author reference: Add a reference field to the BlogPost model.
On the Define relationship tab, select Allow only one model to be referenced, Two-way reference, and allow multiple Blogposts per Author.
Now proceed to configure the reference and give it a display name of Author.
Under the reverse field tab, give it a display name of Blogposts.

Well, this is all we'll need for the post model.

Let's add one more thing to the Asset field, go to Asset on the left of your dashboard and add a single line field for the image alt attribute.

You should have a setup like the one below

Recommended: Populate your Post model before continuing with the rest of the article.

STEP 2: BUILDING THE FRONTEND

Now, let's get into some action developing our blog front with Next.js.

To kickstart a Next.js app, run the following command in your terminal:

npx create-next-app@latest

Latest versions of create-next-app will ask if you'd like to use /src or the experimental /app directory, for this tutorial opt for /src directory.

After Next.js installs successfully, run the following command in the terminal:

cd <project name>
code .

Before starting your development server run the command below to install a few dependencies:

npm install next-mdx-remote graphql-request graphql

Now, run the following command to start the development server on localhost:3000.

npm run dev

Now, structure your ./src directory to look like this.

|--/src
|  |--/Components
|  |  |--Layout.js
|  |  |--Nav.js
|  |--/pages
|  |  |--/api
|  |  |--_app.js
|  |  |--_document.js
|  |  |--index.js
|  |  |--[slug].js
|  |--/styles
|  |  |--global.css
|  |  |--Home.module.css
|  |  |--Layout.module.css
|  |  |--SinglePost.module.css

The /Component directory will contain components that your project will reuse. For example the layout component.

The /pages directory contains files that define the routes of our application.

The /styles directory contains the CSS files for styling our components.

Creating Nav component.

In the Component directory, create a Nav.js file containing the code below:

import Style from "../styles/Nav.module.css";
import Link from "next/link";



const menu_itemList = [
  { name: "Home", href: "/" },
  { name: "About", href: "/about" },
];

function Nav({navActive,setNavActive}) {


  return (
    <div className={Style.navBar}>

      <Link href={"/"} onClick={()=>{
          setNavActive(false)
           }}><h1>NextBlog</h1></Link>
      <div
        className={Style.mobiNav}
        onClick={() => {
          return setNavActive(!navActive);
        }}
      >
        <div></div>
        <div></div>
        <div></div>
      </div>

      {/*  */}
      <div className={`${Style.navItems} ${navActive ? Style.active : ""}`}>
        <ul className={Style.navItem}>
          {menu_itemList.map((menu) => {
            return (
              <div
                key={menu.name}
                onClick={() => {
                  setNavActive(false); 
                }}
              >
                <Nav_menu  {...menu} />
              </div>
            );
          })}
        </ul>
      </div>
    </div>

  );
}
export function Nav_menu({ name, href }) {
  return (
    <Link href={href} >
      <li>{name}</li>
    </Link>
  );
}
export default Nav;

The Nav component contains the code for the top navigation bar.

Creating Layout.js component.

In the Component directory, create a Layout.js file containing the code below:

import { useState } from "react";
import styles from "../styles/Layout.module.css";

import Nav from "./Nav";

function Layout({ children }) {
  const [navActive, setNavActive] = useState(false);

  return (
    <>
      <Nav navActive={navActive} setNavActive={setNavActive} />
      <main className={styles.main_style}>{children}</main>
    </>
  );
}

export default Layout;

The code block exports a function that accepts {children} props as an argument and returns the Nav component and the children props wrapped in a fragment.

Styling the Components.

Create a Nav.module.css file containing the following code in the /styles directory.

.navBar {
  display: flex;
  justify-content: space-between;
  padding: 20px 30px;
  background-color: rgb(0, 0, 0);
  color: whitesmoke;
  position: relative;
}
.mobiNav {
  display: none;
}
.navItems ul {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  column-gap: 30px;
}
.navItem li {
  text-align: center;
  padding: 5px 10px;
  font-size: 1.26rem;
  position: relative;
  color: rgba(235, 235, 235, 0.841);
  position: relative;
  /* z-index: inherit; */
}
.navItem li::before {
  content: "";
  width: 0%;
  height: 6px;
  background-color: rgb(255, 255, 255);
  position: absolute;
  bottom: -10px;
  left: 0;
  transition: all 0.3s;
}

.navItem li:hover::before {
  width: 100%;
}
.navItem li:hover {
  color: white;
}


@media screen and (max-width: 700px) {
  .navBar {
    position:fixed;
    top:0;
    width: 100%;
    z-index: 1000;
  }
  .navBar h1{
    font-size: 1.5rem;
  }
  .navBar li {

    font-size: 1rem
  }
  .mobiNav {
    display: flex;
    flex-direction: column;
    row-gap: 4px;
    padding: 6px;
  }
  .mobiNav div {
    width: 23px;
    height: 1.5px;
    border-radius: 1px;
    background-color: rgb(255, 255, 255);
  }
 .navItems{
  position: absolute;
    right: 0;
    top: 67px;
 }
  .navItems ul {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: unset;
    row-gap: 13px;
    list-style: none;
    width: 0;
    height: 100vh;
    overflow: hidden;
        background-color: rgb(0, 0, 0);
    transition: 0.5s;
  }


  .navItems.active ul {
    width: 100vw;

  }

  .navItem li::before {
    display: none;
  }

}

Create a Layout.module.css file containing the following code in the /styles directory.


@media screen and (max-width:700px){
  .main_style{
    width: 100%;
     position: absolute;
     top: 67px;

  }

}

Override the default global.css file with the code below.

:root {
  --max-width: 1100px;
  --border-radius: 12px;
  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
    "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
    "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
}



* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

Layout Nav{
  z-index: 99999999999!important;
}

Making our shared component global.

In pages/_app.js, replace the content with the code below:

import '@/styles/globals.css'
import Layout from '../Components/Layout'

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

The code block imports the layout component you have created and wraps it around ''. The _app.js file serves as the entry point for all routes in the /pages directory.

Fetching data from Hygraph.

You can see that the pages folder contains an index.js file. Let's override it by adding a new index.js file containing the following code:

import Head from "next/head";
import Style from "../styles/Home.module.css";
import Image from "next/image";
import { GraphQLClient, gql } from "graphql-request";
import Link from "next/link";

const url = `${process.env.ENDPOINT}`;

  // instantiating a graphql client...
const graphConnect = new GraphQLClient(url);

const query = gql`
  query {
    blogposts {
      title
      slug
      coverPhoto {
        url
      }
      excerpt
      id
      author {
        authorName
      }
    }
  }
`;

export async function getServerSideProps() {

  // making request to hygraph for posts
  const { blogposts } = await graphConnect.request(query);

  return { props: { blogposts } };
}

function Homepage({ blogposts }) {
  return (
    <>
      <Head>
        <title>Blog Tutorial</title>
      </Head>
      <main className={Style.postcontainer}>
  {/* using array.map() method to iterate each post returned from hygraph */}
        {blogposts.map((blogposts) => {
          return (
            <div  key={blogposts.id}>
              <div className={Style.inside}>
                <div className={Style.img}>
                  <Image
                    src={blogposts.coverPhoto.url}
                    alt="featured text"
                    fill
                  />
                </div>
                <div className={Style.container}>
                  <Link href={blogposts.slug}>
                    <h2>{blogposts.title}</h2>
                  </Link>
                  <p>{blogposts.excerpt}</p>
                  <p>By {blogposts.author.authorName}</p>
                  <Link href={blogposts.slug}>
                    <button className={Style.readButton}>Read More</button>{" "}
                  </Link>
                </div>
              </div>
            </div>
          );
        })}
      </main>


    </>
  );
}

export default Homepage;

Go to your Hygraph project, navigate to Project Settings > API Access, and copy the API endpoint under the "Content API" section.

Now, scroll down to Public Content API and toggle read all... under content permissions.

Paste the endpoint in a .env.local like so

ENDPOINT = 'Paste API enpoint here'

In the index.js file code block, the const query variable is assigned a graphql query string, which is used to query data from Hygraph.

The **new GraphQLClient()** method instantiates a new GraphQLClient and takes our API endpoint as an argument and creates a connection with our project in Hygraph.

You can also notice that the code block contains two functions getServerSideProps function and the Home function.

The async getServerSideProps function runs on a per-request basis and allows us to make a request to hygraph for data, it then returns an array of data(blogposts) as props which is passed to the Home function as an argument.

The Home function accepts props from the getServerSideProps function as an argument, iterates through the array, and returns the data to the UI.

Creating SinglePost Page.**

Now, let's create a single page for each of our blog posts.
Create a new file [slug].js containing the following code.

import { GraphQLClient, gql } from "graphql-request";
import Head from "next/head";
import Style from "../styles/SinglePost.module.css";
import Image from "next/image";
import { serialize } from "next-mdx-remote/serialize";
import { MDXRemote } from "next-mdx-remote";

const url = `${process.env.ENDPOINT}`;


  //instantiating a graphqlclient...
const graphConnect = new GraphQLClient(url);

const query = gql`
  query MyQuery($slug: String!) {
    blogpost(where: { slug: $slug }) {
      title
      author {
        authorName
      }
      content {
        markdown
      }
      coverPhoto {
        alt
        url
      }
    }
  }
`;

export async function getStaticPaths() {

  // querying for slugs from hygraph...
  const { blogposts } = await graphConnect.request(gql`
    query {
      blogposts {
        slug
      }
    }
  `);

  return {
    paths: blogposts.map(({ slug }) => ({
      params: {
        slug,
      },
    })),
    fallback: "blocking",
  };
}

export async function getStaticProps({ params }) {
  // making request to hygraph for each post matching a slug
  const { blogpost } = await graphConnect.request(query, { slug: params.slug });
  const content = blogpost.content.markdown;

  //serializing my markdown response from the rich text field
  const MdxSource = await serialize(content);

  //passing the post together with the serialized post.
  return { props: { post: blogpost, source: MdxSource } };
}

function SinglePost({ post, source }) {
  return (
    <>
      <Head>
        <title>Blog</title>
      </Head>

      <main className={Style.main}>
        <div className={Style.header}>
          <h1>{post.title}</h1>
          <h3>Author: {post.author.authorName}</h3>
        </div>
        <div className={Style.img}>
          <Image src={post.coverPhoto.url} alt={post.coverPhoto.alt} fill />
        </div>

        <div className={Style.mdxs}>
          <MDXRemote {...source} />
        </div>
      </main>
    </>
  );
}

export default SinglePost;

The code block above has three functions getStaticPath, getStaticProps, and a function component.

The getStaticPaths function makes a query to our API and returns paths(slug) as props to getStaticProps.

The getStaticProps function takes the props returned by getStaticPaths and uses it as a variable to query for a post that matches the slug, and returns the post and the serialized content to the function component for rendering.

next-mdx-remoteis used to serialize the markdown content into a readable format.

Adding Support for external Images.

To be able to use external images from our Hygraph you'd need to tweak your next.config file a bit.

Override the next.config file with the code below:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'media.graphassets.com',
        port: '',
        pathname: '/**',
      },
    ],
  },
}

module.exports = nextConfig

Styling the pages.

Now, Let's style our component. Create three CSS module files with the following codes.

Create a Home.module.css to contain this code.

.postcontainer {
  max-width: 800px;
  margin: auto;
  margin-top: 30px;
  margin-bottom: 30px;
  padding: 0 5px;
}
.inside {
  margin-bottom: 30px;
  padding: 10px 20px;
  box-shadow: 0 5px 12px rgb(218, 218, 218), 4px 8px 12px rgb(218, 218, 218);
  display: flex;
  flex-direction: row;
}

.inside div:last-child {
  margin-left: 25px;
}

.inside h2 {
  text-align: justify;
  margin-bottom: 15px;
  font-size: 1.5rem;
  font-weight: 600;
}

.inside p {
  margin-bottom: 15px;
  font-size: 1rem;
}

.readButton {
  padding: 10px 16px;
  background-color: aliceblue;
  font-weight: 500;
  cursor: pointer;
}

.img {
  width: 260px;
  height: 200px;
  position: relative;
}
.container {
  width: 555px;
}
/* Tablet and Smaller Desktop */
@media (min-width: 701px) and (max-width: 1120px) {
  .postcontainer {
    max-width: 80%;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .inside {
    margin-bottom: 30px;
    padding: 10px 20px;
    box-shadow: 0 5px 12px rgb(218, 218, 218), 4px 8px 12px rgb(218, 218, 218);
    display: flex;
    flex-direction: row;
  }

  .postcontainer h2 {
    text-align: justify;
    margin-bottom: 10px;
    font-size: 1.25rem;
    font-weight: 600;
  }
  .inside p {
    margin-bottom: 10px;
    font-size: 1rem;
  }

  .readButton {
    padding: 10px 16px;
    background-color: aliceblue;
    font-weight: 500;
  }

  .img {
    width: 250px;
    height: 200px;
    position: relative;
  }
  .container {
    width: 65%;
  }
}

/* Mobile */
@media (max-width: 700px) {
  .postcontainer {
    max-width: 90%;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .inside {
    margin-bottom: 30px;
    padding: 10px 20px;
    box-shadow: 0 5px 12px rgb(218, 218, 218), 4px 8px 12px rgb(218, 218, 218);
    display: flex;
    flex-direction: column;
  }
  .inside div:last-child {
    margin-left: 0;
  }

  .postcontainer h2 {
    text-align: justify;
    margin: 10px 0;
    font-size: 1.25rem;
    font-weight: 600;
  }
  .inside p {
    margin-bottom: 10px;
    font-size: 1rem;
  }

  .readButton {
    padding: 10px 16px;
    background-color: aliceblue;
    font-weight: 500;

  }

  .img {
    width: 100%;
    height: 200px;
    position: relative;
    display: block;
  }
  .container {
    width: 100%;
  }
}

Now, create a SinglePost.module.css to contain this code.

.main {
  max-width: 700px;
  margin: auto;
}
.header {
  margin-top: 40px;
}
.header h1,
.header h3 {
  margin-top: 10px;
}
.header h1 {
  font-size: 2rem;
}
.header h3 {
  color: #777777;
}
.img {
  margin-top: 20px;
  width: 100%;
  height: 500px;
  position: relative;
}
.mdxs {
  padding: 60px 0;
  font-size: 1.4rem;
  line-height: 1.5;
}
/* CSS for tablets and small laptops */
@media (min-width: 701px) and (max-width: 1120px) {
  .main {
    max-width: 90%;
    margin: auto;
  }
  .header {
    margin-top: 40px;
  }
  .header h1,
  .header h3 {
    margin-top: 10px;
  }
  .header h1 {
    font-size: 2.1rem;
  }
  .header h3 {
    color: #777777;
    font-size: 1.8rem;
  }
  .img {
    margin-top: 20px;
    width: 100%;
    height: 470px;
    position: relative;
  }
  .mdxs {
    padding: 30px 0;
    font-size: 1.15rem;
    line-height: 1.5;
  }
}

/* CSS for mobiles */
@media (max-width: 700px) {
  .main {
    max-width: 85%;
    margin: auto;
  }
  .header {
    margin-top: 40px;
  }
  .header h1,
  .header h3 {
    margin-top: 10px;
  }
  .header h1 {
    font-size: 1.34rem;
  }
  .header h3 {
    color: #777777;
    font-size: 1.15rem;
  }
  .img {
    margin-top: 20px;
    width: 100%;
    height: 280px;
    position: relative;
  }
  .mdxs {
    padding: 30px 0;
    font-size: 1rem;
    line-height: 1.5;
  }
}

That's it! your pages have been styled.

Pushing your code to GitHub

If you've come this far then I'm assuming there's no error, but let's make some additional checks before deploying it to Vercel.

First, run the command below in your project terminal(you must be in your project directory):

npm run lint

The code runs eslint to check for potential javascript errors.

If no errors are found you'd get a "No Eslint warnings or error" message in your terminal.

Now follow these steps to push your code to GitHub:

Log in to your GitHub account and make a new repository(use same name as your local project directory).
Back in your terminal connect the local repository to GitHub by running the following command:

git init
git remote add origin <url to your GitHub repository>

Change your branch to match the branch on GitHub by running

git branch -M main

Run the following command to stage and commit your changes

git add --all
git commit -m "<message>"

Finally, run the following command to push to GitHub

git push -u origin main

Deploying To Vercel.

First, sign up at Vercel if you don't already have an account with them.

Recommended: Sign up with your GitHub account.

Log in and create a new project.
Import your project repository on Vercel.
After successfully importing, click on deploy to deploy your project with Vercel's default settings.
When the deployment is successful, you'd get deployment URLs to view your app and share with friends.

Wrapping Up.

That's it! you've completed this tutorial and deployed your first Single Page Application. Hope you enjoyed the journey.

Find the Source Code on GitHub

Resources:
To learn more about graphql, head over to https://graphql.org/.

Learn more about Hygraph.

You can also find more about Next.js here.

How to add Tailwind CSS to a Next.js application

Frank Otabil Amissah — Sat, 27 Aug 2022 00:29:00 +0000

Hey, if you are looking for a CSS framework that gives you the ability to fully customize your prototype or web app components, you should definitely try tailwindcss.

In this article I will teach you how to install and setup tailwindcss in Next.js.

Introducing the frameworks.

If you're not familiar with these frameworks,

Tailwindcss: Is a utility first CSS framework that helps you to rapidly build nice user interfaces using easy to remember class names.

Next.js: Is a react based JavaScript framework for building modern applications. Next.js adds to react server-side rendering(SSR), static site generation(SSG) and many other functionalities and is also search engine optimized.

Okay, so let's get into it.

Starting a new Next.js project.

Step 1: Create a new Next.js application.
To create a new next application, run the following code in your terminal. Note Next.js requires Node 12 and up.

npx create-next-app project-name

And navigate into your project directory using:

cd project-name

Steps 2: Install tailwindcss.
Once you are in the project directory, run the following code to install tailwindcss and its dependencies.

npm install -D tailwindcss postcss autoprefixer

After tailwind is successfully installed create the tailwind config file by running the following code.

npx tailwindcss init -p

The -p command creates a postcss config file in your project directory.

Your directory should now look like this with the two config files

Step 3: Configuring template paths.
By default all of tailwinds classes are added to your project, to make sure that only classes you have used in your project will be exported with your final code we will need to purge our CSS.

In your tailwind config file add the following code in the content property. The code tells tailwind where tailwind classes have been used.

"./pages/**/*.js"

The file path: the code tells tailwind to look inside the pages folder of the root directory ./pages/ for a .js file or any folder **/ with .js file *.js inside of it.

Note you can add an array of file paths in the content property.

Step 4: Add tailwindcss directives to global.css file.
To add tailwindcss directives navigate to global.css file in the styles folder and add the following code.

@tailwind base;
@tailwind components;
@tailwind utilities;

Creating a basic card with tailwind.

With all setup and ready let make a card to check if tailwind is properly installed.

In your index.js file, replace the content with the following code.

export default function Home() {
  return (
    <div className="w-1/2 mt-32 mx-auto  bg-blue-900 p-10">
      <p className="m-4 text-gray-200">
        Cillum consequat eiusmod adipisicing sint qui mollit. Ut et tempor nulla
        excepteur nulla incididunt qui exercitation incididunt. Sint ex
        adipisicing pariatur nulla ut ex laborum consequat enim. Et non tempor
        laborum irure commodo fugiat mollit nostrud adipisicing nostrud eiusmod
        do. Elit velit amet do enim esse ex ipsum velit. Quis consequat sunt
        dolore dolor commodo enim anim tempor ipsum.
      </p>
    </div>
  );
}

The code is a simple HTML code with a p tag inside a div and tailwind classes added for the styling.

Run npm run dev in your terminal and open localhost:3000 in your browser.

The result should look like the image below

Conclusion

If you have reached this part of the article without a problem, then tailwind is successfully installed in your project.

If you would love to learn tailwinds classes through video lessons like I did, checkout this youtube video from Scrimba.