A major cause of rift between user interface (UI) designers and frontend developers is the issue of having an awesome UI design being difficult to translate into real life features.

Almost every frontend developer has faced similar fears at certain points during their coding journey. This article will help you understand how CSS displays work with regards to flexbox and grid layout.

Table of Contents:

• Origin of CSS
• Basic Structure of CSS
• CSS Layout (Flex and Grid)
• How to Use the Flex Layout in CSS
• How to Use the Grid Layout in CSS
• Similarities between Flex and Grid
• When to Use Flex
• When to Use Grid
• Conclusion

Origin of CSS

The earliest websites were not only static, but were also text-based. During the early years of the World Wide Web, web pages were written in markup languages such as XHTML and the like.

This is what they looked like:

https://www.history.com/news/the-worlds-first-web-site

With advancements in various technologies, technology enthusiasts were interested in making websites look more pleasant by adding some design. This led to the development of Cascading Style Sheets, better known as CSS.

Although CSS has gone through several evolutions, it is responsible for the aesthetics of websites. Imagine a website or a software application with just text and no design.

Hey! This article is not about history, so let’s get straight to business.

As a software developer majoring in client side applications (often referred to as front-end development), you’d agree with me that CSS is that lovely fellow who looks simple yet sophisticated.

CSS can keep you awake at night while trying to find out why your page is not aligning as expected or the reason your page content is chopped off on certain screens and not responsive too.

One of the reasons why beginners in software development often abandon front-end to major in back-end is the “stress” that comes with writing CSS code, especially with vanilla CSS where you have to manually input virtually every style rule. This is because CSS requires some level of calculation mixed with attention to the most minimal detail.

A major aspect of CSS that often creates confusion is the CSS layout — writing the CSS rule for the page layout can be a bit confusing as a beginner.

In the sections that follow, we'll focus on:

• The similarities between flex and grid displays.
• When to use flex or grid.

Basic Structure of CSS

Before discussing the CSS display in detail, let’s take a brief look at the CSS structure.

For starters, the CSS structure is a box-model. This means that every webpage is treated like a box, similar to having a pizza in a pizza box.

The pizza box here represents the browser page while the pizza represents the content of your website or application, which can be text, graphics, or multimedia.

A box of pizza

CSS box model

CSS Layout (Flex and Grid)

Now that you know how CSS structures the content of every web or application page, a vital aspect of CSS which you should get a grasp of is the layout, which is the crux of this article.

In architecture, every building has its structure. The structure for a commercial building might differ from that of a residential building. Same goes for front-end development.

The purpose of the application goes a long way in the selecting a layout for the. For instance, an e-commerce website would opt for a grid layout for proper arrangement and display of their products.

The layout of every website or application determines how the content on the page will be arranged: either in stacks of rows and columns or just columns across various screen-sizes.

It is also worthy to note that you can use more than one display on a particular webpage. This means that you can display a particular div as a grid and another div as a flexbox. It all boils down to the content of each div and how you want them to appear.

There are two ways to design the layout of a web page’s content in CSS:

• Flex
• Grid

How to Use the Flex Layout in CSS

The flex layout uses a method of arranging the web content in rows (main axis) or columns (perpendicular axis). This implies that it is a one-dimensional layout. The main axis can move in reverse order, from right to left.

The flex direction can be set to:

• Row
• Row-reverse
• Column
• Column-reverse

Using flexbox does not split the screen or content into equal parts. It is worthy to note that, flexbox doesn’t consider splitting content into equal columns across the row or stacking columns in the same alignment. Rather, it expands or shrinks the content to contain the available screen space.

Below is a diagram of a flex display using rows:

A graphical representation of a display set to flex

How to Set Display to Flex

To create a flex layout:

• Give the parent element a style rule of flex display
• Give the children element some margin and padding for a better look
• Specify the direction of the flex if there is a need to

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Setting Display to Flex</title>
<style>
    .fl{
        display: flex;
        flex-wrap: wrap;
    }
    .ex {
        flex-direction:row;
        flex: 1 0 100px; 
        margin: 5px; 
        padding: 10px; 
        background-color: #0000FF; 
        border: 1px solid #ffff; /* I added a border all round each column for better visibility and separation of the columns */
    }
</style>
</head>
<body>

<div class="fl">
    <div class="ex">Content 1</div>
    <div class="ex">Content 2</div>
    <div class="ex">Content 3</div>
    <div class="ex">Content 4</div>
    <div class="ex">Content 5</div>
</div>

</body>
</html>

The code above styles the body by selecting the parent container and assigning it a layout of flex. Then the direction of the children element is set to row using the flex-direction rule.

How to Use the Grid Layout in CSS

The grid layout, on the other hand, divides a web-page into 12 equal columns. These columns can be further split into the desired rows and columns.

The entire screen (100%) divided into 12 gives about 3.33% per column. The screen can also be styled using the number of columns in multiples of 2. That is: 2,4,6,8,10 and 12 with each number specifying the number of columns or width the element is expected to occupy.

How to Set Display to Grid

• Set the parent element's display to grid
• Specify the dimension(i.e rows or columns) of the grid using the grid-template property
• Give some spacing(margin,padding, row-gap, etc) to the child element so the grid can be more visible

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Setting Display to Grid</title>
<style>
    .fl{
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* This would display the children elements in  three equal columns with equal width */
        gap: 5px; /* To set a gap between  thegrid items */
    }
    .gr {
        padding: 20px; 
        background-color: #0000FF; 
        border: 1px solid #ffff; /* I added a border all round each column for better visibility and separation of the columns */
    }
</style>
</head>
<body>

<div class="gr">
    <div class="gr">Content 1</div>
    <div class="gr">Content 2</div>
    <div class="gr">Content 3</div>
    <div class="gr">Content 4</div>
    <div class="gr">Content 5</div>
</div>

</body>
</html>

Similarities between Flex and Grid

• They are both responsive layouts: Irrespective of which layout you decide to use for your application, provided that you style the properties correctly, both layout types are responsive to different screen sizes.

• Setting the parent element's layout first: In styling a flex or grid layout, the parent element is the one styled with the exact layout in question.

When to Use Flex

CSS flex is popular for its order ability (row-reverse, column-reverse), which enables the developer to reorder content without having to change the HTML content manually. There are several uses cases of the CSS flex, such as:

• Building One-dimensional Layouts: For web-pages or sections with a single layout, it is best to use flex as it helps in proper arrangement of the content.
• Alignment and Distribution of Content: Thanks to justify-content, align-self and other properties, alignment and distribution of content is made easy using flex.
• Displaying Columns in Equal heights: Using the align-items property and setting it to a value of stretch, that is: align-items:stretch, CSS flex ensures that columns within a flexbox are of equal heights. This implies that if there is a higher column, other columns will be stretched to meet up with the highest column. You can use CSS flex to display your columns in equal height irrespective of the height of the content.

When to Use Grid

The grid layout is the most commonly used by frontend developers because it allows you to place elements on different sections of the browser page while maintaining proper alignment. You can use the grid layout when:

• Building a Responsive Design: Often times, user interfaces are developed to be adaptable to whatever screen they're being displayed on. In such cases, the grid layout is your best bet because it gives room to flexibility and resizing of the element.
• Control of whitespace: Unlike the flex display that leaves some white space at the extreme, the CSS grid controls white space by distributing elements equally along the row and also based on the allocated column space.
• Consistency in Design Layout: The CSS grid offers a consistent pattern in the structure of a web page. This arrangement of elements makes future editing of the page easier.

Conclusion

One tip that comes very handy when styling a page is to choose which of the display modes to employ.

Once that is settled, the various sections of the page can follow suit bearing in mind what the entire body holds.

Although not an advice, recent practices have seen developers use grid more often than flexbox. Whichever the case, ensure not to mix up the code for the respective displays so you do not run into errors.

Happy Coding!

Large Language Models, or LLMs, let users enter a prompt (some question or set of instructions) and then the LLM generates a response. People in tech are using them for everything from creating code examples to generating graphs and charts and beyond.

Sounds useful, right? Well, I'm sure you've heard talk about AI taking over a whole bunch of jobs. And as developers and content creators, we want to carry out our roles without worrying about some AI stepping in.

After all, robots are now being used in some parts of the world as waiters, and executive assistants are also being replaced by digital virtual assistants. And of course creatives such as technical writers are not left out.

So we need to learn how to use and take advantage of these new tools. In this way, they can help us, not push us out.

Even though technology is racing down the fast lane, there are many ways for you to stay relevant. In this article, I'll talk about two of the major players in the AI/LLM space – ChatGPT and Bard AI – and explain how you can use them to your benefit.

Here's what we'll cover:

• How AI works
• AI tools and their applications
• The major AI tools used in writing
• Google Bard vs ChatGPT

How AI Works – An Overview

Before we dive into the tools themselves, we should understand briefly how Artificial intelligence works at a high level.

Artificial Intelligence is the technology that allows computers (or machines generally) to "think" and behave independently of human input.

Although there are some fundamental concepts and frameworks behind it such as data science and machine learning, artificial intelligence is now being used throughout various fields, both technical and not traditionally technical.

The AI works by being fed data so that it can train ("learn") and produce some output based on its training. So the output depends on the data it learns on, to a large extent.

This is true for LLMs as well as other types of AI models – if you don't ask the LLM the right question or feed it the right prompt, you won't get the output you desire.

For example, if I want to generate a professional summary for a Web Developer Role and I accidentally request one for a Graphic Designer instead, it will generate the professional summary based on the role of a Graphics Designer. So you'll need to learn how to ask the LLM the right questions.

As long as you feed the AI the right data, it can do all sorts of things – from photo generation to content idea generation to helping you create useful code examples for your technical tutorials. So in fact, AI can help Creatives, Software Developers, and many others be more productive and save time so they can focus on the truly important problems.

Here's something to remember, though: as a writer, irrespective of your genre, you should not rely solely on AI to do the writing for you. While AI is helpful in generating outlines and ideas, it doesn't have your background knowledge, it might not understand the context or your audience, and sometimes its writing just won't be as good as yours.

So embrace your skills and your authenticity, and use AI as an enhancer to help you write better.

A you read this guide, note that my intention is to show you how you can use the AI tools listed here to do your work more effectively. You should not use these tools or technologies for any nefarious or dishonest purposes.

AI Tools and Their Applications

Almost everyone uses AI in some form these days, even without realizing it. Irrespective of your career field, there’s likely some AI software to help ease your workload.

Although there are different classes of AIs based on their learning methods, this article won't bore you with too many technical terms. So I'll just briefly go over the different types of AI software that can help make your tasks easier and faster.

Below is a table showing some popular AI applications and their use cases:

These applications are grouped based on the functions they perform, even though they're built by different companies.

AI Tools for Writing

With the advent of writing assistants such as OpenAI’s ChatGPT and Google’s Bard, some people have begun to wonder – will writers start losing their jobs? But as one of my connections said on LinkedIn recently, tech is an enabler, and so is AI.

Some writers have started using these AI tools to generate topic ideas and help them improve their skills, as we briefly discussed above. But other writers are using AI tools to entirely write content for them.

This is not a good idea for many reasons – not least of which being that the AI could be plain wrong. It also won't have your finesse, your awareness of context and other subtleties, and it may sound stiff and overly formal. Plus, it'll take away a lot of the benefit you get as a writer and developer from researching and writing your own articles.

Just always remember that moderation is key and human intelligence will always still stand out. So learn and use these tools, but don't overly rely on them to do your job for you...or they might end up doing just that in the long run.

Let’s take a look at two of the major generative AIs used by writers and developers: ChatGPT and Google’s Bard.

What is ChatGPT?

In November 2022, OpenAI alongside Microsoft launched a Large Language Model (LLM) that could generate responses based on the user’s input (questions), whether that input was text or code.

This model that is based on a text generative pre-trained model known as ChatGPT. Prior to this model of chatbot, there had been several chatbots such as the instant responder you find on websites and also different virtual help desks used by Fintechs.

From generating a résumé to generating software code in different programming languages, ChatGPT became the “darling” everyone sought to know.

How does ChatGPT work?

The ChatGPT takes in your instructions, also referred to as prompts. These instructions are then used to generate a result relative to your prompt.

The more prompts the LLM receives, the better it gets at learning. This implies that the model is trained based on the user's input.

Example of a prompt:

In 5 sentences, explain how AI works

Output from ChatGPT

You should also bear in mind that your prompt should be well constructed and clear, otherwise the generated result might what you want (or might not be that helpful).

Note that I used the free version of ChatGPT for this article. More features are available on the premium version.

You can use ChatGPT in many different ways depending on your needs. Here are some examples of ways you can use it.

• ChatGPT can help you debug your code. You can enter a prompt requesting a code snippet or example for a certain task, and the LLM will generate it for you. This is not to say that you can depend solely on ChatGPT to build or debug your projects. Just like enzymes that speed up reactions, ChatGPT helps you debug codes faster by pointing you in the direction you should go.
• Also, the Assistant API from ChatGPT can be consumed to build an instant messaging AI in your project. Although still in the beta stage, the Assistant API can help Software Developers build mini-ChatGPTs in their individual projects. That way, your users can ask questions and get responses based on the underlying LLM's abilities and knowledge.
• Writers often complain about idea generation and writers' block. One way ChatGPT can work for you as a Technical Writer is to help you generate content ideas. It just depends, as always, on the prompt you enter.
• It can also help you start writing about your ideas. Some writers have issues getting down that first sentence or making an outline for a draft. With ChatGPT, you can perform these tasks more quickly and use the LLMs ideas as jumping off points.

Again, this is not to encourage you to depend solely on AI for content generation, as the human touch still stands out. But it can certainly help you get started.

While ChatGPT can help you in many ways, the earlier models (like GPT-3) also had their downsides. But now, the latest model of GPT-4 has many improvements, including being able to use plugins to get more current information. But you may need to pay for premium usage in some cases.

There are other ways you can use ChatGPT, and you can read more here to find out.

Google's BARD AI

Google's BARD is the newest LLM kid on the block.

As expected, in the first quarter of 2023, Google released its own language based-model chatbot called Bard AI. Although still in the Beta stage (as at the time of this article), Google Bard AI is gradually catching the attention of the tech community.

How does Bard work?

Like other LLMs, Bard accepts prompts and generates results in response to the prompt. Bard is built on Google's LaMDA (Language Model for Dialogue Applications), which generates finely-tuned responses and improves specificity.

Screenshot showing Bard responding to a prompt

Bard can perform various operations such as:

• Review software development code errors and suggest solutions. Just remember that AI shouldn't be used as the ultimate error finder or solver for your code reviews. The LLM may not understand the entire architecture of your program based on the piece of code you feed it via the prompt.
• Bard prides itself on its specific and fine-tuned responses, which of course are quite helpful in Technical Writing. Bard tries as much possible to keep prompt responses concise and authentic. In cases where it sources from any external web-page, the URL is referenced.

ChatGPT vs BARD AI

Both of these tools can be helpful to you as a dev or technical writer – it just depends on how you use them and what your needs are.

If you'd like to see them compared directly, here's a live demo of both ChatGPT and Google Bard:

Note: The information provided here is based on what was available at the time, and may not reflect the most up-to-date details about ChatGPT and BARD AI.

Wrapping Up

Technologies can help enhance our capabilities as human beings. And Artificial Intelligence tools should be no different. You can use them to help you perform basic tasks or build creative solutions. This is why you should get acquainted with how they work and try them out in your projects.

Whether it is ChatGPT or Google’s Bard AI, the goal remains achieving efficiency and genuine results in the simplest way possible.

If you want to be an efficient programmer, you'll want to cultivate your ability to debug code. It's one of the main skills you'll need as a software developer or programmer. This means you need to learn all about errors, too. 🤷

Errors can come in many forms – from as little as an omission of a semicolon to as huge as a crashed database. They're all part of the bittersweet experience of programming.

Regardless of your stage in programming, you most likely will come across at least one type of error while coding. The error could come up during writing code, running it, or even testing it. And there's usually a specific remedy to each error. This implies that not all errors are handled or solved the same way.

Errors in programming are also referred to as bugs. These bugs prevent your program from doing what it's instructed. Once you have a grasp of common errors, you'll be able to figure out the right treatment for the error you're experiencing.

To debug errors in your source code, you'll need to understand:

• The sources of the errors in your code – What exactly is the cause of the errors displaying?
• The types of errors –Now that I have an error, what type is it? What should I do to clear these red lines off my screen?

This article will focus on how to answer these questions.

Where Do Errors Come From in Coding?

The first step in finding a solution is knowing exactly the source of the problem. This will guide you in suggesting or building a solution. When writing your code in whatever programming language you use, errors can occur due to different factors.

The main sources of error include:

Human Errors

Even though Artificial Intelligence plays a larger and larger role in many operations, the fact remains that humans still write source code.

Errors caused by omission, knowledge gaps, or the lack of proper structure come from the developer.

When a developer lacks the technical knowledge of the syntax of a particular language, there's bound to be errors in the source code. Or if they mean one thing and write another in code, the conflict in logic will always result in an error.

So, before you venture into coding in any language, make sure you understand the structure behind it and the rules that govern its programs. This will help you write fewer errors into your code that you then have to debug.

Machine Errors

For issues such as low memory, little storage space, and slow CPU processing speed, the machine also plays a role in causing errors. In fact a machine with a slow memory can cause runtime errors (errors due to slow code execution).

When getting a computer, if you're able, make sure to get one that matches up to the tasks you'll send its way. You should also use cloud storage and other cloud operations to reduce the risks of errors caused by your machine.

Procedural Errors

Solving a problem requires following certain methods. Programming has its underlying methodology which you should follow whenever possible.

This is why standard bodies exist, such as the World Wide Web consortium. It ensures that certain standards are followed when developing programs.

Errors can occur when you ignore the standard methods entirely and try to maneuver your own way. Such code may not go beyond your machine as it may not be production worthy.

Study the procedures for building and operating the solution you are coding and try to follow them.

Types of Coding Errors

Errors can occur regardless of your skill in programming. Your coding prowess is displayed when you can confidently decipher the error message and figure out what type of error occurred.

Many programming languages have similar structures, especially Object Oriented Programming languages (such as Python and JavaScript). These similarities in structure means that they also have similar error patterns.

In programming, the most common errors are:

Syntax Errors

The word "syntax" simply means arrangement. In programming, syntax is the arrangement of the code following a set of rules or patterns.

Just like in the English language where the letters are arranged from A - Z, programming languages also have their syntax you'll need to follow so the program runs seamlessly.

When you're writing in English, for example, if you don't follow the grammar and syntax rules of the language, your words won't make a lot of sense. The same is true in programming: if you don't adhere to the syntax rules of the programming language, you'll get a Syntax Error.

Therefore, a syntax error is that error caused by disobeying the rules guiding a particular language. And the error message that pops up prevents your program from running.

Syntax Errors can be caused by various factors such as incorrect spelling, omitted punctuation, wrong use of quotes (" "), incorrect declaration of variables and values, and more.

As small as these errors may seem, they can break your source code if not properly solved. When any of these syntax errors occur, your compiler responds in two ways:

• It highlights the code line where the error has occurred: This will help you know the exact spot to check for your mistake.
• It gives at least a one sentence explanation of the error type.

In most cases, the compiler will indicate that it is a "Syntax Error" and sometimes point to what was omitted, included, or misplaced. Here's an example:

// importing the required dependencies and components
import { BrowserRouter as Router, Route, Switch,Redirect } from 'react-router-dom';
import './App.css';
import Home from './components/Home';
import About from './components/About';
import Projects from './components/Projects';
import Contact from './components/Contact';
import Nav from './components/Nav';


function App() {
  return (
    <div className='App'>
      <Router>
        {/* <Nav /> */}
        <Switch>
          <Route exact path='/'  component={Home}/>
          <Route  path='/About'  component={About} />
          <Route path='/Projects' component={Projects} />
          <Route path='/Contact'  component={Contact} />
          <Redirect to ="/" />

        </Switch>
      </Router>  
    </div>

The above snippet is from a React.js project. According to React syntax, if you declare a component you must use it, otherwise it'll throw a syntax error as seen in the screenshot below:

Syntax error

In the example, the Nav component was declared in the set of import statements but it wasn't called in the routing statement. Because of this, it displays an error message in the terminal.

Beginners in programming often encounter syntax errors as they're learning – especially if you're juggling between two different languages at the same time. With consistent practice, you can get better at writing your source code that complies with the syntax rules of the language you're using.

Logic or Semantic Errors

Another word for logic is reasoning. Writing source code for any program requires a lot of reasoning. Remember that coding is a means of providing solutions to problems. So your solution must follow the logic that guides it.

Also referred to as a semantic error, a logic error is an error that occurs when a program outputs something different from what was intended. Whenever your program behaves in a way that's different from what you outlined it to do, you have encountered a logical error.

import pandas as pd
import numpy as np
a = 5
b ="10"
print(c=a+b)

In the above example, it is clear that the compiler couldn't add a string and a number because the number in the string was not implicitly converted to the int datatype.

You can also see that there is a syntax error in this program as well when you look at the print() statement. You can debug the logic error by converting the string to an integer datatype as show below:

import pandas as pd
import numpy as np
a = 5
b = Int("10")
print(c=a+b)

Unlike a syntax error, a logic error may not prevent your program from running. Instead, it will run but display an incorrect output.

What Causes Logic Errors?

Wrong Declaration of Data Type: Using the example above, the second variable is a string because of the quotes surrounding it. So, the compiler assumes that you want to place both variables side by side. So always make sure you're meticulous with your data type declaration and conversion.

Incorrect sequence: Say you were to write, "Code love I to". Well, this sentence makes no logical sense because the words are not placed in the proper order.

The same goes for programming languages. When the code is not sequential, the compiler again assumes a meaning for your code and then gives you an output different from your expectations.

For instance, a function (in JavaScript) that is declared locally will be available globally due to the semantics of JavaScript function scope. So, if you'd need that particular function all through your source code, it is better to declare it in a global scope.

Scope in JS simply means the location of a declared variable and how it can be accessed. A variable has a global scope if it can be accessed anywhere along the entire source code. A local variable is one limited to only the block within which it is declared. The difference between a global variable and a local variable is the accessibility.

var age =prompt("Enter your age")

 if (age<18){
 console.log("you are a minor")
 }
 else{
 console.log("You are" + age + "years old")
 }

In the above code snippet, the variable "age" is globally declared that is why it can be called anywhere in the entire source code.

Incorrect Sequence is a logical error because variables must be rightly declared if they are to be used repeatedly.

Misplaced Conditional Statement, Boolean or Logical Expressions: Logical expressions such as if-else, do-while, and the rest are the major causes of logical errors. When they're not properly placed, there's every tendency to get an incorrect output. Most programs rely a lot on logical expressions, so you need to know how to use them.

Logical errors can happen to anyone, regardless of skill level – just like all errors. So spend some time getting your logic right before you start coding. Some programmers go as far as drawing a schematic diagram to emphasize the logic they want for their program.

Runtime Error

Every program has a certain amount of time it takes to execute. As a programmer, it is your duty to ensure that your program loads in the shortest possible time.

Remember, a slow program won't do well in the marketplace. Nobody wants an application that "wastes" their time, right?

Runtime, in simple terms, is the time taken for a program to execute or run. You can have your code syntax well written following a specified logic and still encounter errors as or when your program executes. This problem is caused by a runtime error.

A PC Screen showing error alert

As seen in the above picture, Runtime errors can occur while your program is being executed – the time between interpreting your codes and showing the required output.

These errors can be caused by a non-declared variable, a slow internet connection or many other reasons during the course of code execution.

const country = "Nigeria"
let indp = 1960
    function Election(){
    if ( country == "Nigeria"){
    console.log ( country + "had her "+ "independence in " + indp)
    }
    }
election()

The above code will throw a runtime error because the function being called is different from the one declared.

How to solve runtime errors

The best way to resolve runtime errors is to address them based on their cause. For a non-declared variable, ensure that the variable is properly declared using the right syntax and that the declared variable is the same as that which is called, as illustrated in the code block below:

let name = "Ayomide"
console.log (name + " " +" was my colleague")

In the case of low memory, clear your cache and refresh your browser or restart your computer.

For poor internet connection, switch your internet service provider or close some opened tabs on your browser.

In severe cases, back up your source code and solve the hardware problem that your computer may be experiencing.

Conclusion

Errors can occur in any program, no matter the skill of the programmer. What sets you apart is your ability to find and debug these errors.

The more errors you debug, the better you become at writing clean and performant code. Look out for the next error line and swing into action!

And knowing how to use the command line interface (also known as the command prompt or terminal, depending on your operating system) is one of those skills.

Whether you're doing Web development, Game Development, Application Development, Cloud Engineering, DevOps, or many other disciplines in tech, you'll likely use the command line quite often.

History of the Command Line

In the early days of computers, developers used MS-DOS to navigate around the computer system.

Disk Operating System (DOS) is a kind of operating system that uses commands (words) to interact with the computer.

The DOS didn’t use mouse pointers, icons, or any graphics, so users were stuck with using text-commands to operate the computer system.

For instance, to go to a particular folder, you'd type:

Cd <name of folder>

The command line interface (or CLI for short) is similar to DOS in that it uses commands to perform various operations, like creating files, creating folders, installing programs, and what have you.

The advancement of technology over the years brought about the popular GUI (Graphical User Interface) and made Operating Systems less stressful to use.

Although developers (and non-technical users) often use the GUI these days, sometimes working directly from the CLI is useful or necessary, irrespective of your stack.

What is the CLI? Is it a Programming Language?

_Photo by [Unsplash](https://unsplash.com/@angshu_purkait?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Angshu Purkait / <a href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utmcampaign=api-credit)

If you're new to software development, it's easy to get carried away with the various terminology you'll need to learn. Worry less, you are not doing a spelling bee competition. Rather, you are meant to learn what these terms refer to, how they actually work, and how you can use them.

One of the terms you'll hear quite often is the Command Line Interface (also referred to as Command Prompt or Terminal).

The Command Line Interface (CLI) is an editing environment that is text-based. It uses specified text (known as commands) to interact with the computer and perform numerous operations, including installing and working with programs.

Every operating system comes with an inbuilt command prompt. Some application packages such as Nodejs, Anaconda, Git, and so on also come with their own command prompt.

The same thing goes for Cloud Providers such as AWS, GCP, Azure. Although the CLI bears different names across different platforms or packages, its purpose remains the same: to let you interact freely with the software package or the computer system using text-based instructions known as commands.

So, the CLI is a tool, not a programming language.

A basic knowledge of CLI will help you along your tech journey, especially if you are into Software Development. In fact, you can completely build a program and run it right from the CLI.

This article will:

• Explain how the CLI Works
• Help you locate your CLI according to your OS
• Show you how to perform basic operations using the CLI
• Help you differentiate between the CLI and GUI

How the CLI Works

As briefly discussed earlier, the CLI uses text-based instructions to perform operations. These commands have specific syntax you need to follow and certain text must be written on the same line – otherwise it'll throw an error message.

In the case of CLI in application packages, the commands may be relative to the package in question. But all CLIs follow the same rule of being semantic and on the same line.

To use your CLI:

• Locate the CLI in your PC
• Open it
• Type in your desired commands
• Press the enter key

Later in the tutorial, we'll execute some commands using the CLI so you can better understand how it works.

The Command Line in Different Operating Systems

Every Operating System comes with its default Command Line Interface, though you can choose to install a more advanced CLI depending on your needs.

Some Operating Systems and their respective CLIs are listed below:

• Windows: Command Prompt
• Linux: Linux Bash Shell
• MacOs: Mac Terminal
• Google Cloud Platform: PowerShell, Cloud shell
• Amazon Web Services: AWS Command Prompt
• Microsoft Azure: Azure CLI bash

A picture of Windows command prompt, AWS Cloudshell, MacOs Terminal and Linux Terminal

I currently use Windows OS and Windows Command Prompt, but I'll also show you how you can locate your own Terminal or Command Prompt based on popular Operating systems.

How to Locate your CLI

In Windows

You can access the command prompt in Windows OS using the program directory or using shortcut keys.

Using the program directory, go to your search bar (next to the Windows icon) and type cmd. This will pop up a list of all the command prompts available on your machine, including the default windows cmd. You can now select the one you wish.

Using a keyboard shortcut, press Windows + R on your keyboard and type in cmd on the dialog box that pops up.

A picture showing the run terminal

In MacOS

As in the case of Windows, you can also open the CLI in a Mac OS using the program directory or a keyboard shortcut.

To use the program directory, locate the launchpad and type in Terminal. This will bring it up.

To use the keyboard shortcut, type the combination of the cmd + space bar keys.

Here's how to locate MacOs Terminal and create a file in a directory:

How to Perform Basic Operations Using the CLI

Back in Mathematics class, it was quite easy to memorize formulas and solve equations using those memorized formulas. But knowing when to apply those equations in real life scenarios was – and often continues to be – difficult for many students.

Knowing where your CLI is located and how it works is a good step in the right direction. But let me show you how to get started with the CLI by practicing simple operations right from your Command Prompt.

How to navigate through your PC with the CLI

Navigating through your PC simply means moving from one folder or file to another. If you don't want to use your mouse to direct your cursor, you can move around your PC using the CLI.

For instance in Windows, if you want to open the desktop, take the following steps:

1. Open the CLI (CMD) as explained earlier
2. Next, type in cd Desktop on the command prompt which will take you to your desktop

Keep in mind that this command is for Windows OS (for Mac, for example, it'll be slightly different).

Here's what you'll see:

How to create a folder using the CLI

You may know the usual method of right-clicking on your screen and selecting the "New folder" option on the drop-down menu. But there's a way of creating a new folder using the CLI.

1. First, open your CLI
2. Navigate to the folder or location where you want to create the new folder
3. Enter mkdir
4. Press Enter
5. You can now enter the folder by typing cd

How to install a package using the CLI

Installing a software package or application using the CLI depends on the package in question.

Packages like Node.js (a development package for BackEnd Development) require that you install the Node Package Manager (npm). This package manager is what you'll use to install and run Node and other similar packages.

Some commands for installing software packages via the CLI include:

1. Install <name of package>
2. run <name of package

For instance to install a new instance of a React app:

• Open the terminal

• locate your local environment by typing:

cd Desktop

• Create a directory for the app by typing:

cd Desktop mkdir my_directory

• create the react-app right in the directory by using the command:

npx create-react-app my-app

A terminal showing the commands for installing create-react-app using Windows Command Prompt

Differences Between the CLI and GUI

GUI vs CLI image

As we've discussed, the CLI uses commands to generally interact with the computer.

On the other hand, the Graphical User Interface (GUI) is a method of interacting with the computer using icons, menus, mouse clicks, and pointers.

An Operating System that is GUI-based allows users to freely operate the computer by clicking, dragging, dropping, and other visual methods of interacting with the computer.

Unlike the GUI, the CLI uses less RAM space and interacts with the operating system directly.

To use the GUI, no programming knowledge is required. But to use the CLI, you need to have a certain amount of knowledge of programming and command operations.

Conclusion

As you begin or advance in your tech journey, you'd need to install a lot of programs that are foreign to your Local Machine. Such programs may not have GUI installation methods and may require you to run a line of code or more on your CLI. At such a point, knowledge of using the CLI comes in handy.

There's a general notion that the CLI is difficult to use – and it does take some getting used to. But once you get acquainted with the operations of CLI you'll find it much easier to manage.

Thank goodness you have a handy device manual to help you out. You just need to follow the steps detailed in the manual, and voilà! Your home theater system is ready to blast your favorite songs.

Just like how a device manual guides you through setup and installation, API documentation can help guide you through configuring an API.

What is API Documentation?

Before diving into API documentation, let me briefly explain what an API is and its basic functions.

API is an acronym for Application Programming Interface.

Connection of devices to databases via API

Whether you're a beginner coder or an advanced developer, you'll come across this term often in your software development journey. It is the bridge between your computer, mobile phone, or application and external resources.

In other words, APIs give your software the ability to interact with other software programs, databases, or resources. Instead of writing the program for a particular feature of your application, you can consume a readily available API of a similar feature.

Many APIs are public (free) while others are private and require payment for a private key that lets you access the API. There are different types of APIs like REST (Representational State Transfer), SOAP (Simple Object Access Protocol), and others.

Moving on – so what is API documentation? Well, it's a written guide stating the functions of the API, how to integrate it into your program, and use cases for the API, along with examples.

Keep in mind that API documentation is technical content. This means it will contain some technical terms, but should still be readable and easy to understand.

Who Should Write API Documentation?

APIs are built by software developers. Since software developers are directly involved in building and using APIs, it is easier for them to create the documentation.

The downside of software developers writing API documentation is that they write from a very technical angle, which can make the document quite difficult to comprehend. Another issue is that it will take more time for the API developer to create the document while also developing the API.

So a good alternative is to assign the task of API documentation to a technical writer. A technical writer is someone who combines the expertise of content writing and technical knowledge to produce documentation that's not only technical, but also informative and understandable.

The technical writer learns about the API from the API developers, then creates tutorials, examples, and other content for documentation purposes.

Meanwhile, the API developers oversee the technical writer to ensure that the written documentation is accurate, and they can provide more information to the writer when necessary.

The goal is for everyone to work together to produce documentation that fully explains the API and guides users without confusion.

If you're interested in writing documentation for an API, but don't know where or how to begin, this article will help you get started.

I can feel your excitement from here, so let's dive in!

How to Start Writing API Documentation

When writing API documentation, start by creating several outlines. This will give you an overview of what you intend to write.

The next thing is to gather information for each of the outlines you created. This can be achieved by getting the API description, the language used, other references, and sample cases from the API developers. You can also view a live demo of the API so you have first-hand experience of how it works.

Lastly, combine the details you gathered and arrange them in a logical sequence.

Remember to proofread your document and share it with the API developers for any corrections or additions before going public.

Now that you know where to start, how can you put the bits together so that they become a meaningful whole?

What to Include in API Documentation

1. An Overview

This is similar to the abstract page of a project report.

The overview should contain a summary of the API and the problem it is solving. It could also include the benefits of using this particular API over other similar APIs.

2. Tutorials

This is the primary part of the documentation.

It should include the different content formats you are using to explain the concept of the API to the user. It can also include links for reference and a step-by-step guide for integrating the API and consuming it so it functions properly.

3. Examples

Once you've explained how the API works and/or provided itemized steps, it's a good idea to show examples of calls, responses, error handling, and other operations that have to do with how the developer interacts with the API.

4. Glossary

Though this is optional, I recommend adding a glossary page for your API documentation.

To avoid boring the user with long text blocks, explanations of various terms, schemas, images, and so on that you use throughout documentation can all be pushed to the glossary. Then you can reference these things in the documentation, and link to the glossary.

How to Write Useful API Documentation

Know the API

As we just discussed, you should have first-hand knowledge of the API you are documenting. Remember, your goal is to guide potential users who might not have any knowledge about the API. You wouldn't want to confuse them, right?

If you have a solid understanding of the product's architecture, functionality, and other vital information, you'll be able to write the product description part of the API effectively without doing any guesswork.

If you are not well informed or fully convinced about the API you're writing about, take some time to do your research and gather as much information as you can. Use the API yourself so you gain important insight into how it works.

Use Relatable Content

API documentation is not restricted to written guides alone. You can use short videos or PowerPoint slides to illustrate the integration of the API.

State different use cases while writing the documentation. This will help readers recognize which one is similar to theirs, or find one they can relate with easily.

Also, include some code snippets where and when you think they're necessary. This will make it possible for readers to follow along as they go through the documentation. Just like the popular saying goes, "Tell me and I'll forget. Teach me and I'll remember. Involve me and I'll learn."

Be Clear, Even If You Need to Be Technical

APIs are guides for software or hardware, so you'll need to use some technical terms when writing the documentation. If you're trying to be a technical writer, resist the temptation to be ambiguous.

A good document isn't one with complex grammatical constructions, but rather, one that is relatable, straightforward, and clear. It can only be relatable when it is written in simple and understandable language.

Your API documentation should be in the simplest form possible, yet it shouldn't leave out any important details. Also, make sure you explain acronyms and tech terms the first time you use them, or put them in a glossary toward the end of the documentation.

Itemize the Guide

Documentation is easier to understand if the content is itemized. This is a major reason to write concisely.

Numbering or itemizing the guide in steps helps the user figure out what to do at every point in time. It's similar to reading the alphabet from A to Z.

With clear steps, users can easily go back if they run into an error.

Check For Errors

As many times as you read a document, there'll always be something to change, update, or even delete. This is a typical experience with writers, and it shouldn't make you upset.

Gold passes through several fiery furnaces before it becomes refined. Let's just say your documentation should go through a similar process (not a fiery furnace though) so it comes out as a well-prepared document.

A thorough review process can help you minimize any errors and produce clear documentation.

The Best Tools for API Documentation

Writing API documentation can be quite time-consuming and difficult to maintain. But a good documentation tool can alleviate most, if not all of these issues.

There are numerous tools out there to make your journey of API documentation easier. The benefit of using tools is the collaborative features and standard templates these tools provide, rather than starting from scratch.

Below is a list of some popular tools and their advantages.

Postman

Postman is a platform for building and maintaining APIs with features for creating API documentation.

Postman uses its machine-readable documentation tool to make the API documentation process easier and faster. You can sign up to Postman for free and install it on your PC.

Although Postman provides updates to all API documentation it produces automatically, its UI may be difficult to understand at first.

DapperDox

DapperDox is an open source API Documentation tool that offers various themes for creating your document. This tool combines diagrams, specifications, and other content types to give you better documentation.

It has the advantage of allowing authors to write in GitHub flavored markdown, but updates for this tool are irregular.

SwaggerHub

SwaggerHub is a popular API documentation tool for many technical writers because it's interactive and easy to use.

Though it's beginner friendly, it requires payment for anything other than personal use. So if you're part of an organization and want to use SwaggerHub, your organization will have to pay for it.

Whether you're selecting the tools listed here or an alternative, you should consider the following:

• What setting will you use the tool in? Is it for personal use or as part of an organization?
• How technical are you? Are you a beginner or expert?
• How is the user interface and user experience?

Some awesome examples of API Docs

Below are some APIs documents that will inspire you to start writing great API docs. Each of these documents details the usage of the product API to developers in easy steps and understandable terms.

GitHub API Docs

GitHub offers really helpful documentation – which is no surprise. Check out their API docs here:

REST API is a popular API used by Developers to access data from the web or a database. This documentation by Github includes an overview, guides, and even code on how to use REST API in your program.

The interesting part of these documents is that you can easily understand it irrespective of your skill level.

Paystack API Docs

Are you building an application that requires payment? Paystack is a fintech solution for payments. Their team provides detailed information for developers on how to use the Paystack API in your programs. It is more like providing a handbook on using the API to avoid confusion when consuming the API into your program.

Twitter API Docs

The Twitter API documentation explains how developers can interact with the App. The documents clearly detail different sections (user, tweets, direct messages and so on) and their operations.

Although permission access is required for more information, you can access the basic ones with just a click on the link.

Conclusion

Documentation lays out how a tool works so others can use it properly. API docs aren't always easy to create, but it's not as difficult to create helpful documentation as you might think.

Just remember: start by writing your first draft, improve it daily, and seek help from mentors or senior colleagues when you are stuck.

Now go on and write that API documentation that will ship with the next world-class product.

Let's say you're working on a coding project. You have been writing a bunch of code and staying up late at night to fix bugs. All this is part of the process before you release that software product.

Then you'll check your code to verify that it actually performs what it's been programmed to do. This is where software testing comes in.

This article will discuss the categories of Software Testing and the different types of testing developers most commonly use. You'll see that some of the tests are named for their function. So, when I say API test, I am referring to the tests carried out on the APIs consumed in your source code.

But before going further, let's make sure we know what we mean by Software Testing.

In simple terms, Software Testing is the process of checking the various aspects of a software product to validate the software’s specifications and make sure it's ready to use.

Objectives of Software Testing

From a single line code to a block of code, and even to the finished product, you test software to:

• check for defects and ensure that the product performs as specified
• make sure that the product meets market standards
• resolve any loopholes at the production stage
• prevent future malfunctions of the product

Characteristics of Software Testing

When you test your software, you want to make sure that your tests are:

• Practical
• Reliable
• Authentic
• Capable of finding errors
• Capable of checking the validity of your software

When Should You Test Your Software?

When you test your software will depend on what test you're wanting to perform.

You can test your software during the software development phase – that is, when writing the source code, as in the case of unit testing, API testing, and others.

You can also test after the software has been developed such as in User Interface (UI) Testing.

When Should Testing Stop?

You can stop testing your software when:

• All the necessary tests have been carried out efficiently
• Bugs in the source codes have been reduced to the barest minimum or eradicated
• Testers are done testing
• Product is fully secured against threats
• The product is released

Software Testing Methods

Now that you know what Software Testing means, how exactly is it done?

Software Testing is done based on two main methods:

1. Functional Testing
2. Non-functional Testing

The major difference between these categories of Software Testing is that Functional Testing tests the functionality of a software product while non-functional testing concentrates on the performance of the software product.

Functional Testing

Functional testing is the process of testing software to validate its usefulness with regard to its specifications.

In simple terms, it consists of various tests carried out on the software generally to verify its functionalities.

Functional testing helps the software team know if the software is working as required. Mind you, Functional Testing doesn't mean testing unit functions or modules.

Examples of Functional Testing

Unit Testing

In unit testing, you test individual units or functions of your software's source code. Unit testing can be done automatically or manually.

Automatic unit testing happens with human assistance while manual unit testing is actively done by humans.

The difference between these two methods is that the former is automated while the latter requires hard-coding.

The purpose of unit testing is to ensure that each unit component is working as expected.

API Testing

An application Programming Interface (or API) is a link between your program and an external source. So, if you want your program to do more than just what you code, you could employ the features of another program also. This is what consuming APIs is all about.

For instance, let's say that I want my application to have a map feature. Instead of coding one from the scratch, I could save myself some time and stress by using one of the readily available map APIs.

Using APIs, especially from external sources, comes with its pros and cons, though. And I bet you want to reduce the cons as much as possible. Well, this is why you need to test the API prior to product release.

When you consume a public or private API, while developing your software, you should check for the API's reliability, security, and effectiveness in your product prior to release.

Image representing API

UI (User interface) Testing

The User Interface is the channel of communication between the user and the software.

Every software product is developed with certain specifications for the User Interface. This means that the way the user interacts with the application is predetermined prior to developing the product.

In order to make sure that these specifications are met according to design, you can carry out tests on the UI – and this is known as UI Testing.

The UI Testing involves things like checking if the Sign-Up page is correctly accepting inputs, checking to see if the submit button is functional, and a host of other UI features.

Image of a Payment Page

Integration Testing

Putting components into groups for testing is known as integration testing. Integration testing involves checking how each separate component works together to achieve the common aim of the product.

For instance, in an e-commerce application, the integration tests can check how the Home page connects to the Carts page when the Cart menu is clicked.

The purpose of integration testing is to make sure that components are working in synchrony – that is, that component A works well with component B.

Image of two UI pages

Regression Testing

Software Development involves iteration, which often happens because of bugs in the source code.

After debugging your code, updating the software program, or making any other change to your code, you should test that software to validate its functionality. This testing is called Regression testing.

Examples of regression testing are corrective regression testing, selective regression testing, progressive regression testing, and others.

Non-functional or Performance Testing

Non-functional testing refers to the various tests carried out on a product to check its readiness for the market. Non-functional Tests go a step further to ensure the viability of a product and its worth.

Examples of Non-functional Testing

Volume Testing

The strength of every product lies in its ability to handle different volumes of data. Some software may not function with a large database. To avoid such breakage, you can do volume tests.

Volume test involves feeding a large database to the software to check its functionality based on the large volume of data. Testing your product on different volumes of data shows that your product can withstand more or fewer data at a given time.

Security Testing

In the world today, security is an important and much-discussed topic. Concerns range from physical security down to cyberspace – and everyone wants that assurance of safety when they are on the internet.

One of the issues you'll want to avoid as a software developer is threats to your application. You can perform security testing on your software product to check its level of vulnerability.

Security tests include authentication, authorization confidentiality, and other measures required to protect your software from risks and threats.

Where to put test files in a program folder

Your test files should be together in a test folder inside the root folder of your project. This is for easy navigation and integration into your project.

Conclusion

Now that you know the importance of testing in software development, you should make sure to write code that is error and bug-free when tested.

This will reduce the time you waste fixing bugs and will in turn make the product release date more achievable.

Lastly, be careful to put your test files in the same folder, especially for tests other than unit testing.