Before I proceed, I want to explain what NYSC means, so that whenever I use it in this article, you will understand what I mean.

• NYSC: It means National Youth Service Corps. It is a one-year compulsory service for my country, Nigeria. In this one-year period, university graduates are deployed to various states in the country to use their qualifications to contribute to the growth of various sectors in the country.

One of the main life mantras I have carried for the major parts of my life is

No matter how difficult something is, if it's doable, then I can do it.

I will tell you why this has been very significant to my journey.

Background Story

Maybe I always knew I would go into tech. I said "maybe," because I have always had this love for computers and how they work. In fact, at some point after my graduation from high school, I worked under someone to learn how to repair computer hardware for 6 months or so. I am not sure now.

Standing here now, I don't think I can still remember much of what I learned from those months. Aside from installing software, 😂🤣. And that one important life lesson also

What you learn without continuous practice, you forget.

During my last year in high school, All I wanted to study at the university was medicine.

Medicine because people had always told me that I would do well as a medical doctor, and I just somehow settled for that in my heart and because I was good in chemistry and biology in high school, so it made sense, or so I thought.

I tried for 2 years to get into medical school, but all to no avail. Now I am happy it didn't work out, but at the time I was really tired and frustrated, and I started to doubt myself if I was as good as I thought I was. It was during this period that I started learning computer hardware repair, as I mentioned earlier, and at that point, I started to develop an interest in computer science.

So I applied to a university to study Computer Science, and at the same time, I was also applying to an aviation college to study Aircraft Engineering. The admission to study aircraft engineering came out first, and I went for it. I didn't pursue computer science any longer. I was also fascinated by the aviation industry, so I said to myself that it wouldn't hurt to try it.

Journey into Tech

That was how I started my journey to becoming an aircraft engineer. During my second year in school studying aircraft engineering, I and six other students were paired and given a project to "Design and construct a gas turbine engine using LED to show its working principle as a teaching aid." This is where the journey into tech started for me. During the project, I was in charge of the construction of the project. Part of the project involved us using Arduino micro-controllers to program the LED used for the construction, to show the various aircraft turbine engine phases from intake to exhaust. You can learn more about the aircraft turbine engine here

C++ was the programming language we used. After the project was completed, I started playing around with microcontrollers and building electrical circuits. I continued like that until my final university project, when I also designed and constructed a magnetic chip detector for aircraft inspection, I designed the wiring diagram and also built the electrical circuits. In the project, I also used Arduino to signal the device whenever it comes into contact with another metal. You can read more about magnetic chip detector here

All of these projects planted the love of programming in me, but I never really built on it until I graduated from university. During the period when I was waiting to be called up for NYSC, I came across the Sololearn App. I installed it on my phone and I started learning web development. At this point, my previous laptop had packed up, so I didn't have a laptop.

Due to Covid19, my NYSC was delayed, so I had to ask my elder brother for money to get a new laptop to enable me to really focus on learning web development while I went for NYSC.

So I started downloading videos online and reading articles, I couldn't afford to buy courses at the time, but thank God for free resources, that was how I started learning Frontend Development, I started from understanding how the web works to learning HTML, to CSS (I spent a lot of time here😂) and then to JavaScript. When I started JavaScript, I was frustrated a lot of times, and for days I felt discouraged. I will often remember my mantra "If it's doable, then I can do it". Other times I get frustrated and abandon it for some days, but I still find myself coming back.

And I continued that way, learning and building projects with HTML, CSS, and JavaScript until I was called for NYSC. I was posted to a different state from the one I was based in, and I was posted to work in an aviation college as I was an aircraft engineering graduate. So I worked as an aircraft technician there for one year. During that period, I worked as an aircraft engineer, carrying out daily checks, inspections, and modifications by day, and as a programmer by night. On some days, I bring my laptop to work so I can code whenever I have free time. During this period also, I did two internships where I was introduced to ReactJS, NextJS, Open Source, Collaboration with other engineers and designers, and so on. And that was how I continued to learn and hone my skills in Frontend engineering until the NYSC period came to an end. That was in December 2021.

After NYSC, I needed to apply for my Aircraft license and seat for the exams

But, I decided to forgo that and take my shot at Tech because I love it and find it fulfilling. It was actually not an easy decision to make, but it was worth it. Maybe someday I will go apply for my aircraft licence. But for now, Tech is all I can think about at this moment.

Conclusion Some days, I beat myself up for not going fully into tech early, but like they say, "Better late than never." If you have read to this point, thank you. I write about web technologies and I am passionate about simplifying programming concepts, especially for newbies. I am also open to Technical Writing, Developer Advocate, and Frontend Development Roles

Finally, everyday life gives you an opportunity to show love to someone and make their life easier. Use it ❤.

What if you can use a VS Code extension for API requests without leaving your Code editor, Don't you think it will increase your productivity? well, personally for me it has.

Introducing Thunder Client, I found out about this extension a few days back, I know others might have heard of it or have even used it, But for those who haven't Thunder Client is a VS Code extension that allows you to make API requests right from your VS Code, its lightweight, easy to use, supports collections and environment variables and also allows for scriptless testing.

Ranga Vadhineni in a blog article on Medium, said Postman inspired him to create the Thunder Client extension, and you can tell from the interface that it's somewhat similar. He also talked about the reason why and the goals for the extension, you can read more on that.

If you are familiar with Postman, then it's easy for you to get up and running with Thunder Client, all you have to do is:

• Go to your VS Code extension marketplace
• Search for Thunder Client
• Install Thunder Client
• The Thunder Client icon will appear on VS code sidebar, Click on it
• Click on New Request
• Start making API requests. It's that simple

Resources

1. Thunder Client - Lightweight Rest API Client Extension for VS Code. this video will give you a quick run-through of the extension
2. Thunder Client with JSON Server Rest API, In this video, you will learn how to use this extension to make various API requests from GET, POST, PATCH, PUT etc. using JSON server.

That's all the information I have for you, for now, see you in my next article. Remember to be kind and stay hydrated😎.

Anchor tags

If you are just learning React, you must be familiar with what the anchor tag does from HTML. the anchor tag is used for the same function in React too, which is to serve as a link between two pages in the same application or a different application.

<a href="https://www.aviatorcodes2.com">My Website</a>

The value of the href attribute is usually a URL that links to an external page, a path to a section or page in the same application, email or phone number. The anchor tag also accepts other attributes like download, target, media,rel etc. [source]

Link

Link, is used to allow your users to be able to successfully navigate around your application. Link accept props to whose value is either a string or an object which are called locator descriptor,

• string: if it's a string, it represent an absolute path to link to, e.g. /users/123, Link doesn't support a relative path but anchor tag does, relative path is a location that is relative to a current directory, relative path makes use of single or double dot (.), (..) which helps you locate the current directory and the parent directory e.g. ../users/user123
• Object: an object, can have the following keys:

1. pathname: a string representing the path to link to.
2. query: an object with a key:value pair to be stringified
3. hash: A hash to put in the URL
4. state: State to persist the location. [source]

// string
<Link to="/users">Users</Link>

// Object
<Link to={`/users/${user.id}`}>{user.name}</Link>

More reasons..

Since anchor tag and Link fundamentally help us link different pages in our application together, so the question now is, why is Link special aside from the fact that it accepts string and object, Are there any more differences between the two? yes, there is.

The anchor tag href attribute would trigger a page refresh every time it is clicked, you will even notice the reload icon on your browser load every time you click an anchor tag link

These reloads will continually reset the application states which we don't want, because it will affect the performance of your application. Whenever you need to navigate through your application use Link of react-router as it does not trigger a page refresh, using Link also makes your React application pages load faster. Since React is used to create single page applications, make sure you choose Link or Navlink when creating routes within your application

You have seen when to use Link so when should you use anchor tags? use <a/> tags when you need to link your application to an external URL.

Quick Demo on how to use Link

• After creating your react application with npx create-react-app my-app, install react-router-dom using this command

  npm install react-router-dom
  // or
  yarn install react-router-dom
  

• Create the various pages of your application and inside your App.js import those various pages and wrap them inside react router. eg.

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import NotFound from './pages/NotFound';

function App() {
  return (
    <>
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/not-found" element={<NotFound />} />
        </Routes>
      </Router>
    </>
  );
}
export default App;

• After the above step, you can now use these routes anywhere in your application, all you have to do is, inside the page or component where you need either of the routes, import Link and pass the route path "/", "/about" or "/not-found" to the to props of the Link tag. e.g. Inside the not-found page, I can create a Button, Text or Icon which I will wrap with the Link tag that will route my users back to the home page any time they click on it

import { Link } from 'react-router-dom';

function NotFound() {
  return (
    <div>
          <h1>Oops! Something is wrong</h1>
          <p>404 - Page not found!</p>
          <Link to="/">
            Back To Home
          </Link>
    </div>
  );
}
export default NotFound;

Thank you for reading, see you in my next article. Remember to stay hydrated✌

I had always been frustrated at the amount of time and disk space it takes to install node modules in my project using NPM, especially if it's just a small application I intend to build, I will always say,

I later switched to Yarn, but even though Yarn offered me a considerably faster time for installation and some other benefits under the hood, you can read more about the difference between NPM and Yarn here. It still occupied lots of disk space, and a part of me wasn't still satisfied, a voice in my head kept saying

And then, finally, I found out about PNPM, PNPM which stands for "Performant NPM" has been around for a while now, but for some strange reasons, I just recently found out about it after some research. And I discovered that it's a lot faster than NPM/Yarn and can save me a lot of disk space, so what is this PNPM, and what makes it so fast.

Why PNPM?

If you go through the PNPM documentation, under the motivation section here, the PNPM team explained the motivation behind PNPM. And also, the Package Manager Benchmark is available for you to go through, this Benchmark compares the performance of NPM, Yarn, and PNPM. It's also important to note that this Benchmark is updated on a daily basis, you can find it here, the Package Manager Benchmark also has a page that contains the results of automated performance benchmarks, it runs every 4 hours.

How PNPM works compared to NPM

Before we dive into how PNPM works, I want to quickly explain NPM, to further explain this, I created a sketch to illustrate these explanations, in my explanation I will be talking about the benefits, folder structure, and how they both do what they do

NPM

The benefits of NPM include

• Huge community of developers
• Really popular
• Shipped with node js

So let's say React and Express depend on a particular dependency in the body-parser, but they each depend on a different version of that dependency, what npm does is to copy and paste those two different versions of the same dependency into the body-parser, that only cause problems in terms of size and speed. The same thing happens in the global NPM or Yarn cache, anytime it finds something on the cache, NPM tries to copy-paste it, which ends up taking a significant amount of time and more space.

PNPM

If you are like me that have a lot of projects on my computer, you would notice that all these node modules that have to be installed into all of these projects using NPM, just end up taking up lots of space in my machine thereby making my computer performance slower with time because of the space it accumulates with time on my disk. That's why I personally like PNPM, it's speed and less disk space, so let's try to understand how it achieves that.

Benefits of PNPM

• Install using the global store
• Dependencies are symlinked to reduce complexity
• Hard linking from the global store (This prevents many copies of the same dependency)
• Uses less disk space than NPM/Yarn

From the diagram above, we can see that PNPM uses a different folder structure of the node modules and why it does that is for

• Security
• To fix unexpected bugs that might be introduced from NPM
• It does the Hard linking and Symlinking instead of copy-paste like in the case of NPM

There are two major concepts in understanding PNPM which are Hard linking and Symlinking, I will be using the PNPM diagram above to sharply explain that.

What is Hard Linking in PNPM

The hard link is the connection between the global PNPM store and that of a PNPM powered project node_modules, what is the significance of this connection you might ask, so let's say you have a particular express dependency that has a size of 3Mb for example, it will look as if it occupies the same space on your project and your PNPM global store, but however that dependency of 3Mb is the same space on the disk addressed from two different locations, So that dependency occupies 3Mb and not 6Mb, So it means that Hard Links points to the same place in the disks where the original files are.

What is Symlinked in PNPM

After hard links are created with the global node_modules, Symlinked is then created to link projects that use the same dependencies together, let's go back to the diagram above.

From the diagram, let's say we have two different projects using a particular dependency of express, what happens is, that the express file in that project's node_modules (i.e the current project you are working on), only installs the configuration of that express dependency, remember that we have another project somewhere using that particular dependency too, what PNPM does is to link the body-parser of this current project with the body-parser of the other project containing the same dependency needed in this current project, that is what is called Symlinked, so the body-parser of the other projects have that particular dependency downloaded on it, so instead of re-downloading the same dependencies in two different projects, the body-parser of the current project is now Symlinked with the body-parser of the other project that already contains the dependency needed in this current project.

I really hope this explanation is not confusing, but however, I will post links to video materials that will help you understand the PNPM a lot better, the goal is for you to start using PNPM and give me your feedback

How to Install PNPM

Installing PNPM is pretty straightforward, and you are at liberty to choose between different instances, you will need to install PNPM globally on your machine, using any of the following commands:

Using NPM

npm install -g pnpm

This will work if you have curl installed

curl -fsSL https://get.pnpm.io/install.sh | sh -

, if you don't have curl, you can use wget by running

wget -qO- https://get.pnpm.io/install.sh | sh -

or Windows Powershell

iwr https://get.pnpm.io/install.ps1 -useb | iex

There are other installation options also available, you can explore them in PNPM official documentation here

PNPM CLI Commands

Another interesting thing about PNPM is that it has almost similar CLI commands as NPM and Yarn, so you don't necessarily need to start learning new stuff, For a new project, after installing PNPM globally, you can run, PNPM documentation has a detailed description of the various CLI commands, you can check it out here

Drawbacks

I have seen some complaints about PNPM performance on larger applications, I haven't personally used it in a large-scale application so I can't confirm that.

Youtube Links further understanding

1. What is PNPM
2. Use pnpm instead of npm or yarn for JavaScript & TypeScript

Thank you.😊

Requirements

1. You will need to have Node installed, to be able to use NPM or Yarn alternatively.
2. Notion Account (The free version will do)
3. Text Editor (VS code)
4. Basic Knowledge of NextJS

Objectives

The objective of this article is to help you understand

1. How to use Notion as a CMS for your Projects.
2. Understand NotionAPI work and how to make requests to the API using NextJS
3. Working with your console in debugging and checking API response
4. Understand how getStaticProps works

Notion is no longer just a platform that you use to take notes, create todos, or write blog posts, it is a lot more powerful than that. with the introduction of NotionAPI in May 2021, Notion unleashed a world of new possibilities. You will be exploring some of these possibilities in this article.

NOTE: it is important to state that this article does not cover all used cases of the NotionAPI, the essence of this article is to give you a basic knowledge of what is possible with the NotionAPI.

Create a new Notion Integration

Before diving into the code, you will need to setup up everything you need on your Notion, I will explain this stage step by step

1. Before creating a new integration you will first need to have a Notion account, go to Notion to create an account or Login if you have an account already. The free version works fine
2. After logging in, you can now proceed to create a new notion integration, you can do this by visiting https://www.notion.com/my-integrations. For this article, you will just need to provide a name for the integration and click on save changes. For a more detailed step by step guide, go to the notion docs here.

If you follow all the steps accurately, you should have something similar to this copy the secret Internal Integration Token and save it somewhere. Ensure you scroll down and click on save changes.

Create your Notion Database

• Go back to your logged-in Notion account here, on the left-hand side of your screen, you will see a menu, click on New Page from the menu options.

• After clicking on New Page, a new interface should appear, give it a name (I named mine Employees), then under database, select table. you should have something like this.

I know you can't wait to dive strength into the code, but it's also important we have this part covered.

Link Database to Integration

After you have created your employee's database, it's time to link this database to the integration you created in step 2.

1. Click on share, and a modal will pop up
2. Click on Invite, and another modal will pop up
3. Select the Integration you created in step 2. I named mine <Victor's Notion tutorial> You have successfully linked your database to your Integration, What this means is that you have given access to the NotionAPI to be able to fetch data from the database you created.

Getting your Database ID

You will need to get the unique ID of your employee's database, Each page you create in Notion has a unique ID, there are two ways to get your ID.

• Click on share and a modal will pop up, you should see copy link, click on it to copy the link.

• If you are using a browser and not the Notion Desktop Application, you can get your database ID from the database URL.

Paste the copied link into your text editor, the whole link is not the Database ID, but the link contains the Database ID. In my own case, this is my copied URL the highlighted part is the ID of my Database. Cut the Database ID out and paste it somewhere, you will be needing it soon.

Now, you should have your Secret Internal Integration Token and Database ID. You can now proceed to the code.

Project Setup and Code

Before we you begin coding, you need to setup your NextJS project, do this by following these few steps:

• Open your command terminal
• cd into your desired directory
• run npx create-next-app notionapi-tutorial use any project name you prefer, I used ``notionapi-tutorial as mine
• After the installation is complete, cd into the project directory. e.g cd notionapi-tutorial
• run npm install @notionhq/client to install Notion Client you will be needing it to initialize a notion client.
• open your project on your code editor, if you're using VScode use, code . to open your code editor directly from your terminal.

Create a .env file

Inside your project root directory, create a .env file. The file will house your Secret Internal Integration Token. This is how your folder structure should look like

inside your .env file save your secret internal Integration like this.

NOTION_ACCESS_TOKEN="secret_PxgG8c3bmVm9ZZXR0kQ595uyr8beFN6OEV3HfcrfcEF"

NOTE: .env or .env.local are used to save secret keys. Don't push your .env file to Github. By default, NextJS .gitignore will prevent this file from being pushed to an online repository like Github.

Clean up your index.js file

Empty your index.js file, for starters, your index.js file should only have this code below

export default function Employees() {

  return <div></div>
}

Using the getStaticProps Method

getStaticProps is a method in NextJs, it is used when the Data will be coming from a headless CMS which is what you are about to do and a lot more other things. See the NextJS Documentation for other uses of getStaticProps

inside your index.js file, import Client and create a getStaticProps function

import { Client } from "@notionhq/client";


export default function Employees() {

  return <div></div>

export async function getStaticProps() {
  const notion = new Client({ auth: process.env.NOTION_ACCESS_TOKEN });

  // passing your database id
  const databaseId = "c2085328946447ed80cc67c251b24843";
  const response = await notion.databases.query({
    database_id: databaseId,
  });

  console.log(response);
}

• You are using the getStaticProps method to get your Notion access token from .env and to use that access token to fetch data from Notion
• const notion = new Client({ auth: process.env.NOTION_ACCESS_TOKEN }); creates a new Notion Client.
• In your const databaseId variable you are assigning it to the Database ID that you created for your employees. You remember your Database ID right?
• Your response variable should be set to await because this is a async function, we need to wait for this call to return data before we continue.

The console.log(response) is to help you check if you are getting a response from the database, so go to your terminal console to see if there is a response. Here is mine

This response is the entry you had in your database, you might see an error like this on your browser or terminal Don't worry about that error for now, as long as you are getting your response on the console, you are good to go.

Now you need to do something with the response you are getting, so the getStaticProps method will return props which you are going to set to the response you got. just like this; This is the complete code for the getStaticProps Method

import { Client } from "@notionhq/client";


export default function Employees() {

  return <div></div>

export async function getStaticProps() {
  const notion = new Client({ auth: process.env.NOTION_ACCESS_TOKEN });

  // passing the database id
  const databaseId = "c2085328946447ed80cc67c251b24843";
  const response = await notion.databases.query({
    database_id: databaseId,
  });

  console.log(response);
// the method returns props
  return {
    props: {
      results: response.results
    },
  };
}

Render the Results

You are making progress, now that you have your response assigned to your results,

• You will need to pass in results into your Employees component as a props, this will enable you to use the results within your Employees function
• Also import a useEffect, inside your useEffect function, console.log the results This is how your code should look

import { Client } from "@notionhq/client";
import { useEffect } from "react";


export default function Employees() {

  useEffect(() =>{
    console.log(results);
  });

  return <div></div>

export async function getStaticProps({ results }) {
  const notion = new Client({ auth: process.env.NOTION_ACCESS_TOKEN });

  // passing the database id
  const databaseId = "c2085328946447ed80cc67c251b24843";
  const response = await notion.databases.query({
    database_id: databaseId,
  });

  console.log(response);
// the method returns props
  return {
    props: {
      results: response.results
    },
  };
}

Debugging using your browser console

Spin your project on your browser by running npm run dev or yarn run dev. You should see a blank page for now, but when you open the browser console, you should be able to see an array of 3 objects.

The Array has 3 objects because the employee database created earlier has 3 data. when you expand the array you should be able to see the data in more detail. under properties, you should see two fields which are the Name and Tags fields which are the exact fields that were created in the Notion Employee database.

Expand the Name field, and located where the Employee name is. For you to be able to render that name on the browser, you will have to note the various fields the name is nested in. I highlighted mine below, to serve as a reference for you. Expand the Tags also, and located tags, I also highlighted the various nested fields

The levels I underlined are what you will use in our code to render the Name and Tags on the Browser, so take note of them.

getDatabaseDisplay function

Now that you know how the object is structured, you can go ahead with the final steps.

• create a function getDatabaseDisplay inside your index.js file, that will display all of your employees' Names and Tags.
• Pass the getDatabaseDisplay function into the div of your Employee component.

this is how the getDatabaseDisplay function will be

const getDatabaseDisplay = () => {
    let jsx = [];
    results.forEach((employee) => {
      jsx.push(
        <div className="card" key={employee.id}>
          <p>{employee.properties.Name.title[0].plain_text}</p>
          <span>{employee.properties.Tags.multi_select[0].name}</span>
        </div>
      );
    });
    return jsx;
  };

The whole project code

import { Client } from "@notionhq/client";
import { useEffect } from "react";



export default function Employees({results}) {

  useEffect(() =>{
    console.log(results);
  });


  const getDatabaseDisplay = () => {
    let jsx = [];
    results.forEach((employee) => {
      jsx.push(
        <div className="card" key={employee.id}>
          <p>{employee.properties.Name.title[0].plain_text}</p>
          <span>{employee.properties.Tags.multi_select[0].name}</span>
        </div>
      );
    });
    return jsx;
  };

  return <div>{getDatabaseDisplay()}</div>
}

export async function getStaticProps() {
  const notion = new Client({ auth: process.env.NOTION_ACCESS_TOKEN });

  // passing the database id
  const databaseId = "c2085328946447ed80cc67c251b24843";
  const response = await notion.databases.query({
    database_id: databaseId,
  });

  console.log(response);
  return {
    props: {
      results: response.results
    },
  };
}

Congratulations, you now have a project completely powered by Notion, this is how mine looks on my browser. I added a few lines of CSS to make it look better, if you need it, go to the repository of this project, under globals.css here

As I stated earlier, This article doesn't cover all the used cases of the NotionAPI, this article is just to give you an idea of the wonderful things you can achieve with Notion. I have linked relevant resources below, go and explore them, If you have any questions about the NotionAPI, I will gladly answer them or direct you to resources that will. Thank you.

Relevant Resources

1. NotionAPI Documentation
2. Power your Blog with Notion, No Code

What is CSS Flexbox

CSS Flexbox provides a way of properly sectioning content on your website so that it's easy to style them and make them responsive. As a Frontend Developer, it is important to know how the Flexbox model works and how to move contents inside the model.

I will be going through a few levels in the Froggy game and also explain as I go through them. After which you can go play the rest of the game yourself, do will to drop your feedback here, when you're done. I will also be dropping resources at the end of this article to help you understand CSS Flexbox better. But in the main time, let's dive right in...

justify-content

Let me quickly explain what's happening here, the container is our model, our job is to move the frog(s) from its current position and place it/them inside the lilypads. the side labelled code is where we will be writing our code, finally, at the top, we are giving useful tips to help us understand what we need to do.

Note: for every flexbox container, the first thing to do is to put a display: flex; on the container, without this, the flexbox properties will not apply. also one of the major advantages of using flexbox and its properties is that, as the browser resizes, the content resizes with it, so there is no overlapping content, all contents will remain in its rightful position expect its altered.

The first four levels focus on helping us master justify-content. justify-content is a property of the Flexbox layout, its function is to help us move content within a flexbox container in a horizontal direction (x-axis), so if you need to move content from left to right or right to left, justify-content is your guy, the justify-content property accepts five values

flex-start: // Items align to the top of the container.
flex-end: // Items align to the bottom of the container.
center: // Items align at the vertical center of the container.
baseline: // Items display at the baseline of the container.
stretch: // Items are stretched to fit the container.

align-items

level 5 introduces align-items, which is also a flexbox property that helps us move content within our flexbox container in a vertical direction(y-axis), so if you need to move content from the top to the bottom or vice versa of its present container, align-items will get the job done, align-items accept five values which are:

flex-start: // Items align to the top of the container.
flex-end: // Items align to the bottom of the container.
center: // Items align at the vertical center of the container.
baseline: // Items display at the baseline of the container.
stretch: // Items are stretched to fit the container.

Combining justify-content and align-items

There are certain contents you will need to move both horizontally and also vertically to achieve your desired result, an example will be when you want to center content in a div, lets consider the example in level 6

the right answer for this level is

#pond {
  display: flex;
  justify-content: center;
  align-items: center;
}

justify-content: center; will centralize the frog horizontally, align-items: center; will then centralize the frog vertically, in doing this, the frog will be well aligned to the center, where the lilypad is positioned. we can combine other values of align-items and justify-content to move content around the div container. you will encounter those kinds of exercises at other levels of the game.

flex-direction

By default, contents inside a div/container will stack up in columns(y-axis) but immediately you introduce display: flex; on that container, all the content stacks up in rows(x-axis). flex-direction allows you to manipulate the axis you want the content in a div/container to be in. the flex-direction property accepts four values

row: // Items are placed the same as the text direction.
row-reverse: // Items are placed opposite to the text direction.
column: // Items are placed top to bottom.
column-reverse: // Items are placed bottom to top.

flex-direction also changes the default behaviour of justify-content and align-items, with flex-direction: column; the justify-content now works in the vertical axis instead of horizontally, align-items will now be used to centralize content in the horizontal axis. keeping this in mind, lets consider the exercise in level 11.

the answer will be

#pond {
  display: flex;
  flex-direction: column;
  justify-content: flex-end
}

flex-direction, justify-content and align-items

There are certain situations where you will need to combine these three Flexbox properties, flex-direction, justify-content and align-items. a proper knowledge of how they all work individually, will be a useful skill at that point. for example, let's consider level 13

the answer to this level will be

#pond {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: flex-end
}

the first thing I needed to do was to reverse the way the frogs appear in the row with flex-direction: row-reverse;, then, I used justify-content to centralize it in the horizontal direction and finally, align-items: flex-end; to move the frogs to the bottom of the container.

In other not to make this article too verbose, I will be stopping here, if you want to master CSS flexbox skills I will recommend you go through all the levels in Froggy, you will get to master other CSS Flexbox properties like order, flex-wrap, flex-flow, align-self, align-content and how to combine them to achieve your desired results.

The game becomes more complex as you go, so if you don't understand any level, you can always drop a screenshot or mention the level in the comment section of this article. myself or someone else will help you explain that level, the code that will be used to solve it and why it is used.

Resources on flexbox

1. CSS-Tricks (Blog)
2. Flex-box CSS in 20 minutes (Youtube)
3. Froggy (Flex-box Game)

I personally love to define Search Engine Optimization (SEO) as every activity carried out to ensure that your website ranks well on search engines. These activities cover the following areas; Content (Optimized for keywords), Strategy, and Technology. Developers are not necessarily concerned about content and strategy, where the Developer comes in is in the Technology. So it's important that every Developer learns more about SEO and ways of improving SEO in their projects. If this is your first time hearing about SEO I will recommend you go through this Beginners SEO Starter Guide by Google and if you already know about SEO and want to learn more, here is an Advance SEO Starter Guide also by Google

Improving SEO in Reactjs and Nextjs Application

For better understanding, I will illustrate this using an example, so let's set up a barebone React or Nextjs application using npm create-react-app <projectName> or npm create-next-app <projectName> on your command line, you can replace npm with yarn if you wish, cd into your project and open the project on your code editor. Here are the steps I just explained.

npm create-next-app seo-tutorial
cd seo-tutorial
code .

So in my index.js, I used the following code, which contains an h2 tag and an img.

import React from 'react';

const Home = () => {
  return (
    <div>
     <h2>Cat and Dog</h2>
     <img src='https://www.seekpng.com/png/detail/375-3758118_dog-and-cat-real-cat-and- 
        dog.png' width="300" height="300"/>
    </div>
  )
}
export default Home;

I served it, and this is how it looks on the browser

I will open my DevTools and click on Lighthouse to check the SEO score of this site I just rendered on the browser, I will unchecked other categories, leaving just SEO and Accessibility because they work hand in hand

I then clicked on Generate Report to get the SEO score, this is the current SEO score of our cat and dog site

The job now is to move that score from 70% to 100%, If you are following along on your own computer, after generating the report, scroll down, and you will see some suggestions from Lighthouse on the things you need to do to get the score to 100%. for my cat and dog site, this is the recommendation I got.

So let's work on getting that SEO score to 100%

Steps

1. Wrap the content in a main tag
2. Change the h2 tag to h1
3. inside the img tag, add an alt tag
4. import Head from next/head
5. Inside the Head tag, add a Title, Meta content type, Meta description, Meta viewport

import React from 'react';
import Head from 'next/head'

const Home = () => {
    return (
        <main>
            <Head>
                <title>Cat and Dog Site</title>
                <meta name="description" content="This is a site for Dogs and Cats" />
            </Head>
            <h2>Cat and Dog</h2> 
            <img src = 'https://www.seekpng.com/png/detail/375-3758118_dog-and-cat-real-cat-and-dog.png' width = "300" height = "300" alt= "Picture of a Cat and a Dog"/>
        </main>
    )
}

export default Home;

So let's say we have a website with different pages, another thing we can do instead of adding Meta content type and Meta viewport to the Head of every page since they don't change, won't change, what we can do now is to create a global document where we can put the Meta content type and Meta viewport and any other thing you want to do globally in your application. The Title and Meta description will change on every page which is why they can't be added to the global document.

In Nextjs, you create a global document by creating a new file named _document.jsx, there is a section in Nextjs documentation where you can find more information about the essence of this custom document and how the file should be structured here, So after creating the _document.jsx file, I will just copy and paste the code structure provided on the documentation page inside my _document.jsx file. The last thing I need to do now, is to add lang="en" to my Html tag inside the _document.jsx

This is the code for the _document.jsx

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        <meta httpEquiv="Content-Type" content="text/html; charset=utf-8" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

After this is done, I will rerun my cat and dog site to see the current SEO score, if we have gotten to 100% SEO and Accessibility.

Bonus: Here is a trick, you can also use this curl http://localhost:3000/ inside your project terminal, to see how your website will appear to web crawlers. I am using http://localhost:3000/ because that's the port my project was served on in the browser, yours might be different. ensure your project is served on your browser before running this command.

Learn more about SEO

1. SEO for Developers in 100 Seconds
2. Ultimate guide to SEO meta tags

Disclaimer: This article isn't a single source of truth as regards documenting APIs with Redocly, in fact for a better understanding of how Redocly works, I recommend that you visit the Redocly documentation. however, this article provides step by step approach on how technical writers or developers, can run their documentation using Redocly, locally(preview) on their local machine.

Requirement: You must already have written your documentation in YAML or JSON. If you don't have that already or you don't know how to go about it, I'll advise you to visit YouTube for tutorials on writing JSON and YAML, sadly, I don't have any to recommend. Let's proceed

Publishing Docs locally with Redocly command-line tools

Before we dive into the step by step tutorial, I will like to state some of the functions of the Redocly command-line tools(CLI);

1. With the Redocly CLI, you are able to split your OpenAPI definition into smaller files, which can later be referenced using the JSON reference tag $ref in the main OpenAPI file, similar to how a UI can be split into different components and worked on separately e.g A homepage UI can be divided into Navbar, Header, Hero etc, each having there own files which can later be referenced from the main file to form the complete Homepage UI. This structure also helps for collaboration, different technical writers can be given a particular API feature to document. Open-source to the moon🚀🤗.

2. The Redocly CLI also helps you to check your OpenAPI definition against a ruleset, this is to ensure that you are adhering to best practices. through this, you are able to notice errors in your document before publishing. NOTE: You can customize how strict the linting ruleset will be.

3. The Redocly CLI helps you bundle all your OpenAPI definition smaller files into a simple file, which enables you to render your API documentation locally as a single file and also feed that file to an API documentation tool to publish. You can learn more about the Redocly CLI features here.

Redocly step by step tutorial

• Download and Install node, if you don't have it installed already. You need it installed before you can work with Redocly.
• Create a folder, name it anything you want. Now include your YAML or JSON documentation file inside the folder you created. you will soon see why you need to do this later on.
• Now that the folder you created contains your Documentation file, cd into that folder from your command terminal or open the folder with VS code and open your VS code terminal.

• Run this command on the opened terminal

  npx create-openapi-repo
  

  Redocly recommends using npx when installing the create-openapi-repo because it's something you have to install only once.

• During the installation, the CLI ask several questions

“Do you already have an OpenAPI/Swagger 3.0 definition for your API? (y/N)”: type y, and press enter/return.

“Please specify the path to the OpenAPI definition (local file):” Here, you will type in the name and language of your YAML or JSON documentation you included on the folder at first (mine is openapi_openweathermap.yml) This is to point to the file Redocly will be rendering. Press enter/return.

“API Name: (OpenWeatherMap API).”: The CLI immediately detects the title of your YAML or JSON document. OpenWeatherMap API is the title of my YAML document that's why i have (OpenWeatherMap API) yours will be different, depending on the Title of your document. Press enter/return.

“The following folders will be created: openapi and docs. You can change them by running create-openapi-repo <openapiDir> <docsDir> Proceed? (Y/n)” Type y and press enter/return

The CLI breaks your OpenAPI file into smaller files into an openapi folder, Redocly then installs some node_modules folders and initializes a git repository. when this is done, you can open your folder using your preferred text editor (such as VS Code, Atom, or Sublime Text).

• Install the openapi cli: after the create-openapi-repo finish installing, run the openapi cli command using the npm(recommended) or yarn package. either through the command line or your text editor terminal.

  npm i -g @redocly/openapi-cli@latest
  

  yarn global add @redocly/openapi-cli
  

  This is to allow you to use some openapi CLI commands with it throwing an error in the terminal. run openapi --version to ensure that the installation was done successfully. You should get a response such as 1.0.0-beta.87.

• Run the following command

  openapi lint
  

  The lint command helps check for errors in your documentation. If there are no errors, you should get the response below. But if there is an error, you will also get a response on your terminal pointing out where the error is coming from.

• Preview the Redoc output

  openapi preview-docs
  

  After running the above command, you should get this output in your terminal.

your documentation should serve at port 127.0.0.1:8080 on your browser.

This is the final step and also the goal of this article. If the above steps are followed carefully, you should be able to preview your documentation on your browser on this port 127.0.0.1:8080. Here is mine

After you preview your documentation locally, when you are ready to publish it live, check the Redocly Youtube channel for tutorials on how to publish your documentation using Redocly Community Edition for free. Thank you

So in this article, I want to try to explain the bubble sort algorithm to you in clear terms and I hope you find it useful. Also, I will ask that you first open the CodeSandbox embedded link below on a different tab, so that you can follow along as I explain the code line by line. go to the bubblesort.js file, that's where the code is.

Embedded from CodeSandbox

How bubble sort works

We compare two adjacent numbers in an array, we ask the question, is the first number bigger than the second number? if the answer is yes then the bigger number bubbles up(swapped with the smaller number). Note this happens when the array should be sorted in ascending order, but in cases where the array should be sorted in descending order, the smaller number bubbles up instead.

let's say we have an array of numbers that should be bubble sorted in ascending order, let's take this array as an example:bubblesort = [23, 0, 3234, 22, 111, 555, 33, 222] From the array, what happens is, 23 and 0 will be compared together if 23 is bigger than 0, the two numbers will be swapped, so we will now have bubblesort = [0, 23, 3234, 22, 111, 555, 33, 222] notice that 23 has now been bubbled up, next will be 23 and 3234, the function will then again compare both numbers, notice that in this case, 23 is less than 3234 so no swap will happen in this case, the array will remain the same, the function now moves to the next two adjacent numbers, which is 3234 and 22 by now, you should already quess what will happen, since 3234 is greater than 22, 3234 will be bubbled up, and this step will continue and because 3234 is greater than all the numbers in our array, it will continue to be swapped with the numbers it is compared with until it gets to the last number in the array which is 222 same thing will happen, since 3234 is greater than 222, both numbers will swap positions, now making 3234 the last number in the array. you should have bubblesort = [0, 23, 22, 111, 555, 33, 222, 3234] at this point, what I call the first pass has occurred. I hope I am not losing you at this point? Because this is where it get's interesting. The first pass, get's the largest number in an array to its correct position, the second pass will now get the second largest number to its right position.

First pass we had bubblesort = [0, 23, 22, 111, 555, 33, 222, 3234] for the second pass, we have to start comparing numbers again from the beginning of the array, not the original array but the new array we got from the first pass which is bubblesort = [0, 23, 22, 111, 555, 33, 222, 3234] just like we did during the first pass, 0 and 23 will be compared together to check which is greater, since 0 isn't greater than 23, no swap will happen, then 23 and 22 will be compared, since 23 is greater than 22, they will both be swapped, and this will also continue until we get a new array which is bubblesort = [0, 22,23, 111, 33, 222, 555, 3234] those this make sense now? I encourage you to get a pen and paper and write it down if you are still not getting it and follow the steps. If you are following along, this is what you should get in your different passes

• First pass: bubblesort = [0, 23, 22, 111, 555, 33, 222, 3234]

• Second pass: bubblesort = [0, 22,23, 111, 33, 222, 555, 3234]

• third pass: bubblesort = [0, 22,23, 33, 111, 222, 555, 3234]

• fourth pass: bubblesort = [0, 22,23, 33, 111, 222, 555, 3234]

• fifth pass: bubblesort = [0, 22,23, 33, 111, 222, 555, 3234]

• sixth pass: bubblesort = [0, 22,23, 33, 111, 222, 555, 3234]

• seventh pass: bubblesort = [0, 22,23, 33, 111, 222, 555, 3234]

In our case, because of the way our numbers were arranged, the array was already sorted after the third pass. So why didn't the function stop after the third pass since our array was already sorted? while that is because we told our function to go through the array arr.length - 1 times.

Let's explain our function line by line now

function bubbleSort(arr) {
  for (var i = 0; i < arr.length - 1; i++) {
    for (var j = 0; j < arr.length - 1 - i; j++) {
      if (arr[j] > arr[j + 1]) {
        var temp = arr[j];
        arr[j] = arr[j + 1];
        arr[j + 1] = temp;
      }
    }
  }
  return arr;

Our first for loop is responsible for the number of passes, The reason why after the first pass, the function didn't just stop there is because of this loop, if the function had stopped at the first, the aim will not be achieved, because, at that point, the array wasn't sorted yet, we had only succeeded in sorting the largest number in the array to its position, we still had other numbers to sort.

for (var i = 0; i < arr.length - 1; i++)

var i = 0 here we initialised a variable i before the loop starts, telling it to start from 0 because in programming counting starts from 0 instead of 1. i < arr.length - 1 here we are telling the function not to exceed arr.length - 1 i should be less than arr.length - 1 times. Since we had 8 numbers in our array, the function should go through the array 7 times, because we don't have to go through the array the last time. i++here we are telling the function to increase i by one each time the code in the block is executed in other words, each time a pass is completed. so after the first pass, var i = 0 will increase to var i = 1 until it gets to var i = 7 when it get here, the code will be terminated since we told the function to stop at i < arr.length -1

For each pass, Our second for loop is responsible for making sure that after the first two adjacent numbers are compared, it doesn't stop there but also continues to compare the other numbers in the array, like in the case of our first pass, when 23 and 0 were compared and the swap was done, our for loop is responsible for making sure that 23 and 3234 and so on.

for (var j = 0; j < arr.length - 1 - i; j++)

var j = 0; here j is initialized with a value of 0 as our starting point, j < arr.length - 1 - i; is to ensure that the function doesn't go beyond the scope of the array and the - i added means that, the current value of i at every pass, should also be subtracted from the length of the iteration, we don't need to go through the whole array at every pass, and understandably so, because after the first pass we had the highest number in the array locked in its right position already, so no need comparing it with other numbers during other passes, and so on. For j++ it means that, after the first two numbers are compared, increase the value of j by 1 var j = 1; the same thing happens when the second numbers are compared, j will increase to var j = 2; and since we have set a timeout, when j gets to var j = 7; it breaks from that loop and goes back to the first for loop. it is that simple.

Also, our second for loop also contains the function responsible for comparing two numbers and also the function for swapping them if the condition is met.

if (arr[j] > arr[j + 1]) {
        var temp = arr[j];
        arr[j] = arr[j + 1];
        arr[j + 1] = temp;
      }

at this point, we are telling our function that, if the first number is less than the second number, do NOTHING but if the first number is greater than the second number that is to be compared, do the following:

1. create a var temp and give it the value of the first number (Since the first number is greater)
2. then assign arr[j] to arr[j + 1]
3. Finally, assign the new value of arr[j + 1] to temp the swapped has happened. I hope this makes sense to you.

Another way to refactor the above code

function bubbleSort(arr) {
  for (var i = 0; i < arr.length - 1; i++) {
    for (var j = 0; j < arr.length - 1 - i; j++) {
      if (arr[j] > arr[j + 1]) {
        [ arr[j], arr[j+ 1] ] = [arr[j+ 1], arr[j] ] // swap there positions
      }
    }
  }
  return arr;

I really hope this makes sense to you and it helps you understand Bubble sort better.

That being said and now that I have gotten that explanation out of the way lets find our way back to CSS and CSS Modules.

Advantage of CSS Modules over Regular CSS

When working on components, developers take the Single Responsibility Principle, what this means is; you want your component to handle less responsibility as possible. The same approach is used when styling our components, since each component has its own stylesheet, you wouldn't want those stylesheets to override one another. Let's quickly first see how stylesheets can override each other using this example.

From the image above, I gave className="example" to the tags marked with red. Because I imported the Demo.js inside App.js, If I go ahead to Demo.css and style the example className, let's give it a color of blue. it not only affects the tag in the Demo component, but it also affects the App.js because both tags have the same className. why is this bad? Imagine we are both collaborating on a project together, and while working on a component, I gave a className of example to a tag within my component, unknowing to you, you also used the same className="example" on a tag within the component you are working on, Remember, we are both working on different components on the same project. If everything stops there, we are good nothing will override another but what if I now need to import your component into the component I am working on? Our stylesheet begins to conflict with each other and this may take another extra time to debug.

BEM Naming Convention

So how do we fix this? One way of preventing this kind of error is by using the BEM Naming Convention in naming our classes. What this means is, instead of you naming your classes like I did above className="example" You should instead name it with something perculair to the component you are working on, for example; className="example" will become className="demo-example" in doing this, you are somewhat sure that classes won't clash

CSS Modules

Another sure way of preventing this error which is actually the main reason for the article is through CSS Modules. The goal of CSS Modules is to protect overlapping class names. The best part is, it is actually simple and straightforward.

Steps to follow

1. Change your CSS filename to include module.css so instead of having Demo.css for our stylesheet we will change it to Demo.module.css. do the same thing for all your CSS files
2. import your CSS file into your component file. in our case, we will input Demo.module.css into Demo.js
3. We will then use an object-oriented approach in giving a className to our tags. where we normally use

   <h5 className="example">Hard coded inner section</h5>
   

   to grab the h5 tag using className="example" so that we can style it in our CSS file, but using CSS Modules it's a bit different

   <h5 className={styles.example}Hard coded inner section</h5>
   

using this approach, you are sure that your styles won't overlap.

not to worry, I faced the same challenge too when I deployed my first React App. There are very simple things you need to do before you can successfully deploy your site on Github pages.

Allow me to walk you through the steps in getting your React App live using Github Pages.

Step 1: Install gh-pages npm package

You do this by opening your terminal and running this npm or yarn command

npm install gh-pages --save-dev

yarn install gh-pages --save-dev

the npm package may likely take some time to complete, depending on your network strength. This step installs the gh-pages npm package and also designate it as a development dependence. To confirm if the installation was successful, go to the package.json file on your project, you should see something like this

Step 2: Add a homepage property to your package.json file

While you are still on the package.json file in your project, add a homepage property using this format:

"homepage": "https://{insert your Github username}.github.io/{insert the repo-name}",

NOTE: This format is only for your project, for a Github user page and a Custom domain page, you will use a different format. "homepage": "https://{insert your Github username}.github.io" for a Github user page and "homepage": "https://{website URL}" for a custom domain page.

Step 3: Add a deployment script to your package.json file

Still, on your package.json file, locate your script object and add a predeploy property and a deploy property.

"predeploy": "npm run build",
"deploy": "gh-pages -d build",

at this point, your React App now includes deployment scripts

Step 4: Add a remote path

If you haven't added a remote path, that points to your Github repository, this will be the best time to do so using this Git command

git remote add origin https://github.com/{insert your username}/{insert repo-name}.git

in my case, I'll run

git remote add origin https://github.com/Aviatorscode2/pexels-photoapp.git

This is so that you can Git can push changes made on your local repository to the repository of the same project on Github.

We are almost there

Step 5: Deploy your React App to Github Pages

Open your terminal and run

npm run deploy

yarn run deploy

This code will cause the predeploy and deploy scripts we added in Step 3 to run

How it works: The predeploy script will create a distributed version of your React App, it creates a folder name build and stores it there. Then the deploy script will push the content built during predeploy to the gh-pages branch of the Github repository.

Step 6: Buiding your site from Github pages

This is the final step, when you return back to your project repository on Github, you will notice that you have an additional branch called gh-pages

1. Click on settings from your Github repository
2. click on pages
3. Select gh-pages as the Branch Github pages will build your project from and root as the folder
4. Click on save

Wah Lah, your React App is live

Programming Term

Concurrency: Is a property of programs and systems that allows tasks to run in overlapping time pperiods.

If you just started learning frontend development, you must have come across the position property and you're wondering what's about. As the name implies, the CSS position property is used to position an element within a container, there are about 5 CSS position properties; relative, absolute, static, sticky and fixed see here.but for the purpose of this post, we will be focusing on the relative and absolute position property

why and when do we use position relative and absolute?

Position: relative;

relative positioning is somehow similar to static positioning, it maintains its original position in the HTML document but can be made to move to a different position and also overlap on top of another element.

.positioned {
      display: relative;
      top: 20px;
}

When you give a position: relative; to an element or div, you can move it to your desired final position by using the top, bottom, right and left properties in CSS.

it's also important to note that the top, bottom right and leftproperties is different from the margin-top, margin-bottom, margin-left and margin-right properties it is explained further in this StackOverflow thread

Position: absolute;

from the image above, when you change the position of the element to absolute, it no longer follows the document flow, it behaves as if it's not part of the document flow, it is floating in space (smiles). the top, bottom, left and right properties don't work the same way in absolute as they did in relative positioning, so rather than giving it a position relative to its position in the document flow, the position now becomes relative to the nearest container (not necessarily its direct parent) that has a position other than position: static. To make its position relative to its parent container, you need to give the parent container a position of relative.

.positioned {
      display: absolute;
      top: 50px;
}

top:50px; now becomes the distance between the element/div and its nearest container and this is irrespective of the other div within that 50px distance, if there is any div within that distance, it overlaps on it.

When should I use relative or absolute positioning?

position: relative; positions an element relative to its current position in the document flow without affecting the layout of other elements around it while position: absolute; positions an element relative to its parent container and it also changes the layout of the document flow and the elements around it.

So it actually depends on you or the UI you're implementing, knowing what they do and how it works helps you use them properly.

other relevant resources on CSS positioning

1. Absolute positioning inside relative positioning
2. Difference between CSS position absolute versus relative

Programming Terms

Recursion: This is a technique in programming where a function and algorithm calls itself repeatedly until a given condition is met.