DEV Community: Sokaribo Senibo

How to create a Bottom Tab Navigator using react-navigation in React Native

Sokaribo Senibo — Thu, 09 Feb 2023 10:10:42 +0000

Have you ever used a mobile application without a navigation tab? Chances are, the answer is no. Navigation tabs are crucial components in mobile applications, as they offer a straightforward and organized method for navigating through various sections. In the case of cross-platform mobile applications, such as React Native apps, navigation tabs can be developed using the react-navigation library. This library simplifies the creation of navigation tabs, resulting in navigation tabs that are both efficient and functional.

This article outlines a step-by-step guide on how to use the react-navigation library to create bottom tab navigation in React Native apps.

Prerequisite

Basic understanding of React Native.
Node.js v14 or greater installed
NPM v7 or greater installed
A code editor (I’ll be using VS Code)
A physical mobile device or emulator

Getting started with React Native

React Native is a cross-platform framework for building mobile apps that can run on both iOS and Android. It allows developers to build fast-responsive apps using familiar technologies such as HTML, CSS, and JavaScript.

Think of React Native as building a house. Just like how you need different components, such as bricks, roofing sheets, doors, and paint, to build a physical house, you also need various prebuilt components in React Native to create your mobile app. These native components handle everything from basic tasks such as displaying text to complex features such as integrating maps and charts. As a result, React Native apps tend to have a more native look and feel compared to other cross-platform development frameworks that rely on web view to display a mobile app.

Thanks to React Native's wide range of customizable components and its large open-source community, which constantly contributes to its development. React Native has become an attractive option for developers and the go-to option for major companies such as Facebook, Airbnb, Tesla, and Uber.

What is react-navigation?

React-Navigation is a third-party library of React Native that allows you to add to your application various navigation patterns such as stack navigation, drawer navigation, tab-based navigation, and more.

One of the best parts of React-Navigation is that it is written entirely in JavaScript, providing a single API for building navigation across both iOS and Android. This means that you don't have to worry about the different native navigation components for each individual platform, but instead, you can focus on the navigation logic and customization of your app.

The react-navigation library provides the ability to create a bottom tab navigation, which is a navigation pattern that allows users to quickly and easily access the major sections of your application through a series of icons with labels located at the bottom of the screen. Placing the tabs at the bottom of the screen, below the app's main content, makes the icons easily accessible with a simple thumb gesture. Each icon represents a different section of the application, and tapping on the icon navigates the user to that section.

Now that we've covered a basic overview of React Native and the react-navigation library, let's get started with building a bottom-tab navigation using the react-navigation library. Here is a quick outline of the process we will take:

Create project and install relevant libraries
Set up navigator screens
Build bottom tab navigation component
Export component and run application
Customize the bottom tab navigation

Each of the processes has a series of steps you have to follow. Alright then, let's get started.

Create project and install relevant libraries

Step 1: Requirements

The easiest way to get started with building a React Native app is by using Expo Go. Expo is a powerful set of tools and services that make it easier to develop, test and deploy React Native apps on both iOS and Android devices.

To get started, we'll need the following:

A recent version of Node.js installed on your computer. The latest version can be downloaded from the official website (https://nodejs.org/).
A physical mobile device or an emulator with the Expo Go app installed from either the Google Play Store or the iOS App Store respectively.

Step 2: Install Expo Command Line Interface (CLI)

The Expo CLI is required to create and run React Native projects, as it provides a set of tools and services for building, testing, and deploying applications. It also includes additional features such as live reloading and easy access to native APIs.

To install the Expo CLI, open your terminal and run the following command:

npm install -g expo-cli

Step 3: Create a React Native Project

In this step, we'll create a new React Native project using the Expo CLI we just installed.

To create a new project named “BottomTabApp”, run the following command in your terminal:
```
npx create-expo-app BottomTabApp
```
Once the project is created, change to the project directory by running the following command in the terminal:
```
cd BottomTabApp
```

Changing the directory enables you to run the command to start the development server for your React Native project in that specific project’s environment.

Step 4: Install the Required Packages

In this step, we’ll install the required dependencies to ensure that your React Native project runs smoothly. These dependencies include npm packages and the @react-navigation/bottom-tabs package, which is required to add the bottom tab navigation to your project.

To install the npm packages, run the following command in your terminal:
```
npm install
```
To install the @react-navigation/bottom-tabs package, also run the following command in your terminal:
```
npm install @react-navigation/bottom-tabs
```

Step 5: Explore the Project Structure

Your project directory structure should look like the following:

Step 6: Run the development server

Finally, start the project server by running the following command:
```
npx expo start
```
After starting the development server, you will get the following output from your terminal.

This confirms that you should now be able to preview the app on an emulator or physical device.

To view the app on your physical Android or iOS device:

Make sure the device is connected to the same network as your laptop.
For Android, open the Expo Go app and scan the QR code displayed in your terminal.
For iOS, use the default iOS camera app to scan the QR code in your terminal

Alternatively, if you have an emulator installed on your laptop, you can view the app by:
- Typing "a" if it's an Android emulator.
- Typing "i" if it's an iOS emulator.

Expo Go will automatically reload when changes are made, so you can quickly see the results of your changes.

Set up navigator screens

In the following steps, we will be creating and setting up the required screens for each of the tabs in our bottom tab navigation.

Step 7: Create tabs pages

Within the BottomTabApp directory, create a new file for each tab you want in your app. In this example, we'll create three files: Home.js, Settings.js, and Profile.js. Once you have created these files, your new project directory structure should look like this:

Step 8: Import Page Components in Home.js:

Import the required React, View, and Text components from the react-native library in the Home.js file. Importing these components allows you to construct the user interface for the screen.

import React from 'react';
import { View, Text } from 'react-native';

Step 9: Create a functional component in Home.js

Create a functional component named Home that returns a View component with styles to center both its horizontal and vertical alignments. Inside the View, place a Text component that displays the text "This is the Home Page".

Finally, export the component using the export default statement to make it available for use in other parts of the application.

const Home = () => {
    return (
        <View style={{alignItems:'center', justifyContent:'center', flex:1}}>
            <Text>This is the Home Page</Text>
        </View>
    )
}

export default Home

Step 10: Import and create component in Settings.js

In the Settings.js file, repeat the same process as in steps 8 and 9, but create a functional component named Settings with a Text component inside displaying the text "This is the Settings Page".

import React from 'react'
import { View, Text } from 'react-native';


const Settings = () => {
    return (
        <View style={{alignItems:'center', justifyContent:'center', flex:1}}>
            <Text>This is the Settings Page</Text>
        </View>
    )
}

export default Settings

Step 11: Import and create components in Profil.js

In the Profile.js file, repeat the same process as in steps 8 and 9, but create a functional component named Profile with a Text component inside displaying the text "This is the Profile Page".

import React from 'react'
import { View, Text } from 'react-native';


const Profile = () => {
    return (
        <View style={{alignItems:'center', justifyContent:'center', flex:1}}>
            <Text>This is the Profile Page</Text>
        </View>
    )
}

export default Profile

Build bottom tab navigation component

Step 12: Create the navigation page

Within the BottomTabApp directory, create a new file to serve as the main navigation component for the app. This helps to keep the code organized and easier to maintain. The new file structure should now look like the following:

Step 13: Import the necessary libraries

In the BottomNavigation.js file, import the required libraries including React, createBottomTabNavigator, NavigationContainer, and the Home, Settings, and Profile components created in previous steps.

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import Home from './Home';
import Settings from './Settings';
import Profile from './Profile';

The createBottomTabNavigator creates a bottom tab navigation structure, while the NavigationContainer acts as a container for the navigation structure, providing the necessary context for the navigation to work.

Step 14: Define the bottom tab navigator function

Create the bottom tab navigator using the createBottomTabNavigator function.

const Tab = createBottomTabNavigator();

Using const instead of function is a matter of preference, but const is commonly used when defining variables that won't be changed throughout the program, while function is used for defining reusable blocks of code that return a value.

Step 15: Define and import screen components as constants

In this step, we will define the individual screen components for the bottom tab navigator, which in our case includes the HomeScreen, SettingsScreen, and ProfileScreen. Each component returns a React component as its JSX expression: Home, Settings, and Profile, respectively. These components represent the UI for each of the different screens in your tab-based navigation system.

const HomeScreen = () => {
  return <Home />;
};

const SettingsScreen= () => {
  return <Settings />;
};

const ProfileScreen= () => {
  return <Profile />;
}

Step 16: Create the Bottom Tab Screens Navigator

Next, we will create a constant App component that will contain the bottom tab navigator, which is responsible for rendering the different screens (Home, Settings, and Profile) in the tab-based navigation system.

const App = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
};

The Tab.Navigator component defines the bottom tab navigator. The Tab.Screen components define each of the individual screens. The name property specifies the name of the screen, and the component property specifies the React component that should be rendered for the screen.

Step 17: Wrap App Component in Navigation Container and Export it as Default

Define the BottomNavigation component and export it as a React functional component. The component should returns a NavigationContainer component that wraps the App component defined in the previous code.

export default BottomNavigation = () => {
  return (
    <NavigationContainer>
      <App />
    </NavigationContainer>
  );
};

The NavigationContainer component manages the navigation state and dispatches the navigation actions. While exporting BottomNavigation as the default component makes it easily importable in other parts of the application to render the bottom tab navigation system.

Render component and run the application

Step 18: Import necessary libraries and components in App.js

Open the App.js file, and import the required libraries and components including React, View, StatusBar, as well as the navigation component BottomNavigation.

import React from 'react';
import { View } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import BottomNavigation from './BottomNavigation';

Note: The StatusBar component from expo-status-bar is used to display the status bar of the device, which shows the battery level, network status, and other information.

Step 19: Export App Component

Finally, in this step, the App component is defined as a default export function. The component returns a View component that takes up the full screen of the device and contains two nested components: StatusBar and BottomNavigation defined earlier.

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <StatusBar style="auto" />
      <BottomNavigation />
    </View>
  );
}

Congratulations! By following these steps, you have successfully created a bottom tab navigation using the react-navigation library for a React Native app. The end result should be a functional bottom tab navigation in your app that allows you to easily navigate between the different tabs or screens.

Outcome:

Customizing the bottom tab navigation

Let’s go further and customize the tab. You can customize the tab by passing additional options to the Tab.Screen component in the BottomNavigation.js file.

Step 20: Change the active icon tint color

Let’s change the default active icon color from blue to red. To achieve this, pass an object with tabBarOptions key to the Tab.Navigator component. The tabBarOptions object will then have an activeTintColor key with the desired color value.

<Tab.Navigator
     tabBarOptions={{
       activeTintColor: 'red',
     }}>
       <Tab.Screen name="Home" component={HomeScreen} />
       <Tab.Screen name="Settings" component={SettingsScreen} />
       <Tab.Screen name="Profile" component={ProfileScreen} />
     </Tab.Navigator>

Step 22: Next, let’s customize the icons

Import an icon library. For this example, we will be using the Ionicons library. The use of "Ionicons" is of personal preference. Other libraries such as the MaterialCommunityIcons library can also provide icons for your app.
```
import Ionicons from 'react-native-vector-icons/Ionicons'
```

Pass the icons using the tabBarIcon key in the Tab.Screen component for each of the screens. A list of available icons can be gotten from the Ionic official website

<Tab.Navigator
      tabBarOptions={{
        activeTintColor: 'red',
      }}
    >
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          headerShown: false,
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="ios-home" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Settings"
        component={SettingsScreen}
        options={{
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="ios-settings" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Profile"
        component={ProfileScreen}
        options={{
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="ios-person" color={color} size={size} />
          ),
        }}
      />
</Tab.Navigator>

Congratulations once again!

You have successfully customized the bottom tab navigation, changing the icon as well as its active tint color.

Output:

Conclusion

By following this step-by-step guide, we have successfully created a bottom tab navigation using the react-navigation library for React Native apps. You also learned how to customize the bottom tab navigation by changing the active tint color and adding icons to the tabs. The end result should be a functional bottom tab navigation system within your app, which allows for easy navigation between the different screens.

If you encounter any issues or errors, don't hesitate to refer back to the instructions and double-check your code. It's also a good idea to check the official documentation for the react-navigation library for additional information and resources.

Fundamentals of Blockchain, Ethereum and Smart Contracts

Sokaribo Senibo — Wed, 26 Jan 2022 11:41:39 +0000

The Web3 ecosystem has seen exponential growth in the past few years. This ecosystem, which offers a decentralized paradigm for digital assets, is enabled by blockchains, which have become the bedrock of world-wide record-keeping systems. This article explains fundamental concepts in Web3, such as Blockchains, Ethereum, and Smart Contracts, and why they are useful.

What is Blockchain?
History of Blockchain and Ethereum
Ethereum and Smart Contracts
The Architecture of Blockchain
Benefits of Blockchain Technology
Conclusion

What is Blockchain?

A blockchain is a distributed ledger technology that maintains a continuously growing list of ordered records, called "blocks," linked together using cryptography. They are a network of computers that have the same digital history of transactions, deals, contracts, and all other things of value that can be represented in the form of digital assets.

Each block contains a cryptographic hash of the previous block, a timestamp, and transaction data (generally represented as a Merkle tree). The timestamp proves that the transaction data existed when the block was released, which is required to get into the hash of the block. Also, because each block carries information about the previous one, they form a chain, with each successive block reinforcing the ones before it, which makes data manipulation difficult since data in one block cannot be modified retrospectively without impacting all following blocks.

In essence, blockchain can be likened to an obsessive club whose members like to keep track of things. The club has a ton of complicated rules to ensure that every member writes down the exact same set of records about what happens each day (whether it’s bird sightings, or beer tastings, or flower sales). Once data is recorded and accepted, it becomes exponentially difficult to change because everybody will need to be present and agree to the change, and more records are being added to it. Also, every member is obligated to never stop talking about the club.
Then, usually outsiders are welcome to come check out their records at the club.

Here is the point.

Blockchain provides a space to store digital information that everyone can contribute to, but no one can change, and no single person or entity controls it. In this sense, a blockchain serves as the foundation for immutable ledgers, or transaction records that can't be changed, erased, or destroyed. Because of this, blockchains are also known as distributed ledger technology (DLT).

Hence, at its core, blockchain allows you to agree on data with strangers across the internet. Rather than depending on a single person or entity to keep track of everything, everyone on the network shares that responsibility.

Blockchain has become one of the most significant innovations of the 21st century given its ripple effect from the financial industry to manufacturing, education, and other diverse sectors.

History of Blockchain and Ethereum

The blockchain concept was first proposed by Cryptographer David Chaum in his 1982 dissertation "Computer Systems Established, Maintained and Trusted by Mutually Suspicious Groups". The dissertation which proposed cryptographically secured chain of blocks was further improved in 1991 by Stuart Haber and W. Scott Stornetta, their goal was to implement a system where document timestamps could not be edited. In 1992, Haber, Stornetta, and Dave Bayer incorporated Merkle trees to the design, which improved its efficiency by allowing several document certificates to be collected into one block.

By 2008, Satoshi Nakamoto conceptualized the first decentralized blockchain. Nakamoto significantly improved the architecture by incorporating a difficulty parameter to steady the pace at which blocks are added to the chain and employing a Hash cash-like approach to timestamp blocks without having them to be signed by a trusted party. The design was later implemented in 2009 and became a core component of the bitcoin cryptocurrency, where it serves as a public ledger for all transactions on the network.

Years later Vitalik Buterin, co-founder Bitcoin Magazine published a white paper that proposed a decentralized application platform. The proposal paved the way for blockchain technology to be adopted for purposes other than cryptocurrency. Blockchain technology was later separated from currency in 2014, and its potential for other financial, interorganizational transactions was explored. The move to establish blockchain technology beyond currency gave birth to the Ethereum blockchain system.

In 2015, the Ethereum Frontier network launched, enabling developers to write smart contracts and decentralized apps that could be deployed to a live network. Then the Linux Foundation launched the Hyperledger project, which is a multi-project open-source collaborative effort to advance cross industry blockchain technologies.

The growth of Blockchain and Ethereum has been consistent through the years and is gaining more adoption as we move into the Web3 era. Governments and enterprises now look to blockchain to tackle a variety of cases from voting, to real estate, intellectual rights, vaccine distribution and internet of things.

Ethereum and Smart Contract

Ethereum is a decentralized blockchain platform that creates a peer-to-peer network for securely executing and verifying application code, known as smart contracts.

The idea of smart contracts was originally described in 1993 by computer scientist and cryptographer Nick Szabo as a kind of digital vending machine. They are short programs that can be deployed and run on a blockchain to automatically execute transactions if certain conditions are met without requiring the help of an intermediary company or entity.

In traditional contracts, a document describes the terms of the relationship and agreement between two parties. If one Party A violates the terms, Party B has the right to take Party A to court for not complying with the agreement. A smart contract fortifies such agreements in code so the rules are automatically enforced without the involvement of courts (or any other third party).

Smart contracts allow participants to transact without the need for a trusted central authority. Transaction records are immutable, verifiable, and securely distributed across the network, giving participants full ownership and visibility into transactional data. As a cost of processing transactions on the network, a sender must sign transactions and spend Ether which is Ethereum's native coin.

The adoption of smart contracts has yielded benefits from speed efficiency and accuracy, to trust and transparency, to security and savings.

The Architecture of Blockchain

The traditional web architecture employs client-server networks, in which the server stores all the necessary information in one location for easy updating and control by a number of administrators. Whereas, blockchain uses a peer-to-peer network, in which each participant in the network has the right to maintain, approve, and update new entries.

A blockchain organizes data into groups called blocks, each of which contains a set of data and has a specific storage capability. When full, they are closed and connected to the preceding block, producing a data chain known as the blockchain. All new information that follows that freshly added block is compiled into a newly formed block that will then also be added to the chain once filled. Also, each block is given an exact time stamp when it is added to the chain.

All blockchain structures can be categorized into the following:

Private blockchain architecture - This means the blockchain network is in a restrictive environment like a closed network. They are controlled by specific authorized users. The private blockchain is also referred to as permissioned blockchains or enterprise blockchains. They are typically fast and can handle transactions more quickly than public blockchains.
Public blockchain architecture - As opposed to private blockchain architecture, the public blockchain architecture is accessible to everyone and permissionless. They are completely independent of organizations and can run as long as there are computers connected to them. Participants can access past and current records, conduct mining activities, find bugs, and propose changes because the source code is open source.
Hybrid blockchain architecture- A hybrid blockchain architecture combines both private and public blockchain architecture. It allows organizations to set up a public permissionless system alongside a private restricted system, which enables them to control access to specific data stored in the blockchain and what data is available publicly.
Consortium blockchain architecture-This is also known as a federated blockchain and is similar to a hybrid blockchain. The main difference compared to a hybrid blockchain is that multiple organizational members collaborate on a decentralized network. They limit access to the blockchain to a particular group of organizations, eliminating the risks that come with just one entity being in control of the blockchain.

Some of the core components of the blockchain architecture include:

Block- These are data structures that store a set of transactions and redistribute them to all nodes in the network. * Chain- A set of blocks that are arranged in a specific order
Transaction- The smallest building block of a blockchain system (records, information, and so on), that serves as the blockchain's purpose.
Node - A user or computer with an independent copy of the whole blockchain ledger within the blockchain architecture.
Miners- Dedicated nodes that execute block verification before adding anything to the blockchain structure.
Consensus protocol- A collection of rules and agreements that govern how blockchain transactions are carried out.

Benefits blockchain technology

Blockchain provides several benefits for individuals, organizations and enterprises. Some of the benefits include:

Trust- Due to its complicated computations and cryptographic evidence among participating parties, blockchain transactions are validated and trustworthy. Also,
Security and decentralization- Each member of the blockchain system have access to the entire distributed database. in contrast to a central based system, consensus algorithm allows for control of the network. Also, every transaction in the blockchain ledger cannot be modified nor removed.
Transparency and Anonymity- The blockchain system is almost impossible to tampering, and each participant has a randomly created address, which protects the users' privacy.

Conclusion

Blockchain has emerged as a viable technical solution for enterprises all around the world. It has shown to be an effective technique for dealing with complex challenges. As a result, the advantages of blockchain technology for enterprises, also translate into a need for blockchain skills.

This article is part of a series on Web3, follow and signup to stay updated.

I hope you found this tutorial helpful! Feel free to reach out to me for technical writing services (I can fit myself into your budget)

Send me an email: Sokaribosenibos@gmail.com

My LinkedIn Profile: Sokaribo Senibo Sokaribo

Web3 Series
Understand and make money from Web 3 today

How to develop an AR copy paste app from scratch

Sokaribo Senibo — Wed, 26 Jan 2022 11:38:38 +0000

So I decided to try out this cool project: an Augmented Reality (AR) copy-paste app.

The app combines Augmented Reality and Machine Learning to find distinct objects in the surroundings, then copies, trims, and pastes the object in an image editing software on your computer automatically.

This article explains how to develop the AR app yourself.

Table of Content

AR Copy Paste
Understanding the process
Prerequisites
Downloading and setting up relevant packages
Setting up a local server on your laptop
Setting up your mobile phone
Setting up the app
Congratulations

Introduction

The demand for AR applications has seen tremendous growth over the last couple of years and is still rising. This demand is a result of the way AR can interpret, manipulate, and enhance the view of the real world.

AR stands for Augmented Reality and refers to an interactive 3D experience that combines the view of the real physical world with computer-generated elements in real-time.

The AR Copy Paste app is a project that enables you to digitalize real-world objects around us. The app combines Augmented Reality and Machine Learning to find distinct objects in the surroundings, then copies, trims (removing the background automatically, and keeping the object only), and pastes the object in an image editing software on your computer directly.

The app, which is a cool beginner's AR project, makes the job of creatives easier, as they are now able to point their phone camera at an object and copy-paste it onto their computer almost automatically.

Understanding the Process

AR Copy Paste is made possible by a combination of Augmented Reality, Machine Learning, and open-source technologies such as the Boundary-Aware Salient Object Detection (BASNet) and Scale Invariant Feature Transform (SIFT).

BASNet makes it possible to accurately identify people and objects in the real world and remove the background surrounding the object automatically. While SIFT matches the coordinates on the phone with the computer screen, enabling you to place the digital captures of the object in specific positions on your computer screen.

The AR Copy Paste can be used on Android or iOS mobile phones with a variety of image editing computer applications such as PowerPoint. The entire process of developing the AR Copy Paste app is done through three (3) independent modules, which include:

Local Server setup
External salient object detection service setup
Mobile App setup

Now that you have a fair understanding of AR and understand the process involved, let us get started on creating an AR Copy Paste App.

Prerequisite

An Android or iOS mobile device
Photoshop installed
A code editor (I'll be using VSCode)
Basic understanding of command prompt (I'll be using Anaconda Prompt)

Downloading and setting up neccesary packages

Step 1: Connect your mobile device and computer to the same wifi network

Ensure your computer and the mobile device to be used for the project are connected to the same internet.

Step 2: Download the AR Copy Paste GitHub files

The GitHub files can be found on https://github.com/cyrildiagne/ar-cutpaste. Clone the repository by clicking on "Code" and "Download Zip". Make sure to unzip the file after downloading it.

Step 3: Open photshop and enable remote connection

Set the service name to "Photoshop Server" and password to "123456". Also copy out your IP Address.

Note: You can change the server name and password to whatever you want; just remember to use it wherever a server name and password are required.

Step 4: Set photoshop canvas size to 2560 by 1440 pixels, 300pixels/inch resolution, and Transparent background, then create another layer

Step 5: Open the downloaded AR-cut-paste GitHub file and navigate to server/src/

Open the "main" file with a code editor and ensure the Photoshop password is correct. Additionally, change the host address to the copied Photoshop IP address.

After editing, save the file and close it.

Then open the "ps" file and edit the doc offset to zero (0) on both X and Y. Then edit the password. After editing, save the file and close it.

Setting up the local server

Step 6: Run your command prompt as administrator (I'll be using Anaconda Prompt)

Step 7: Navigate to ar-cutpaste-master/server, copy the destination address and paste into your command prompt

cd C:...\GitHub\AR-cutandpaste\ar-cutpaste-master\server

Step 8: Pip install and run virtualenv

#to install virtualenv
pip install virtualenv

#to run virtualenv
virtualenv -p python3.7 venv

This creates a virtual environment.

Step 9: Activate the environment

navigate to the script folder in the command prompt and activate the environment.

#navigate into the venv folder
cd venv

#navigate into the Scripts folder
cd Scripts

#activate the environment
.\activate

Notice the change in the path in the command prompt

Note: if .\activate does not work, it may mean you need to install Bash

After activating the environment, navigate back to the server

#navigate out of the Scripts folder
cd ..

#navigate out of the venv folder
cd ..

Step 10: After navigating back to the server in the command prompt, pip install -r requirements

#pip install (copy and paste)pip install -r requirements.txt

Step 11: Setup the external salience object detection service

Option 1: Set up your model service (this requires a CUDA GPU)

As mentioned above, for the time being, you must deploy the BASNet model (Qin & al, CVPR 2019) as an external HTTP service using this BASNet-HTTP wrapper (requires a CUDA GPU)

You will need the deployed service URL to configure the local server

Make sure to configure a different port if you're running BASNet on the same computer as the local service.

Option 2: Use a community provided endpoint

A public endpoint has been provided by members of the community. This is useful if you don't have your CUDA GPU or do not want to go through the process of running the service on your own.

Use this endpoint by launching the local server with --basnet_service_ip http://u2net-predictor.tenant-compass.global.coreweave.com

We will be using option 2, hence run the following code in your command prompt

#copy and paste the following code
python src/main.py --basnet_service_ip http://u2net-predictor.tenant-compass...  --photoshop_password 123456

Ensure the Photoshop password matches the one you adopted

Congratulations so far! Your server is now running.

Setting up mobile device

Step 12: Download the expo app from the Android store or iOS store

Download and install the Expo app on your mobile device

Step 13: Download and install node.js on your computer

Download the recommended version

Configure the app on your computer

Step 14: Run another command prompt as administrator and navigate to ar-cutpaste-master/app

Copy the address and paste in the command prompt

cd C:...\GitHub\AR-cutandpaste\ar-cutpaste-master\app

Step 15: Install npm

#copy and paste to install npm
npm install

Step 16: Navigate to ar-cutpaste-master/app/components/ and edit the Server file with your code editor

After editing to your IP address, edit your mask path, then save and close the file.

mask = Image.open('cut_mask.png').convert("L").resize((256,256),resample=Image.BICUBIC, reducing_gap=2.0)

Step 17: Start npm

#copy and paste to start npm
npm start

After starting npm a QR will pop up on your screen.

Step 18: Scan QR code with the Expo app on your mobile phone

Hurray! All you have to do now is snap the object you want with your mobile phone and watch it transfer automatically to your computer.

Congratulation!

You have successfully built an AR Copy Paste App.

Phew, that was a lot of things we just covered. In this article, we developed an app that can find distinct objects in the surroundings, then copies, trims, and pastes the object in an image editing software on your computer automatically.

I hope you found this tutorial helpful! Feel free to reach out to me for technical writing services (I can fit myself into your budget)

Send me an email: Sokaribosenibos@gmail.com

My LinkedIn Profile: Sokaribo Senibo Sokaribo

My Twitter account

Understand and make money from Web 3.0 Today!

Sokaribo Senibo — Mon, 03 Jan 2022 02:15:10 +0000

The invention of the world wide web is one of the greatest inventions in the world. This invention, which made the internet available to all, has become an important part of how we live and interact.

This article summarizes the evolution of the web, what Web 3.0 is, its benefits and opportunities, and how to make money with Web 3.0 today!

Keywords: Web 3.0, Web 2.5, Web 2.0, Web 1.0, Dapps

Table of content

The evolution of the web
- Web 1.0
- Web 2.0
- Web 2.5
- Web 3.0
Features of web 3
Advantage of web 3.0
Opportunities in web 3.0
How to make money from web 3.0 Today
Conclusion

The evolution of the web

The World Wide Web (WWW), also known as "the Web", was invented in the year 1989 by Sir Tim Berners-Lee, a British computer scientist born in London. After graduating from Oxford University, Berners-Lee worked as a software developer at CERN, a massive particle physics facility in Geneva, Switzerland, where scientists from all over the world came to the site to use their accelerators. However, Sir Tim noticed that communication was a problem. At that time, different types of information were kept on different computers, but accessing them required logging in to several computers, and sometimes you had to learn a different program on each computer.

In March 1989, Tim outlined his vision for the web in a document called "Information Management: A Proposal." The basic concept was to combine the evolving technologies of computers, data networks, and hypertext into a powerful and easy-to-use global information system.

As a result, the web was originally conceived and then developed to meet this demand for automated information-sharing between scientists in universities and institutes around the world.

By October 1990, Tim built the first web page editor and browser, "WorldWideWeb.app", and the first web server, "httpd," based on three fundamental technologies that have since become the foundation of today's web.

HTML (Hypertext Markup Language): The markup (formatting) language for the web.
- URI (Uniform Resource Identifier): A type of "address" that is unique to each online site and is used to identify it. It is also commonly called a URL.
- HTTP (Hypertext Transfer Protocol): allows for the retrieval of linked resources from across the internet.

The terms "internet" and "web" are not interchangeable, but two distinct but related concepts. The Internet is basically a network of networks that connects millions of computers throughout the world, allowing any computer to speak with any other computer. The World Wide Web (WWW) is a method of accessing information through the internet by displaying web pages on a browser. Information is linked together by hyperlinks and can include text, images, audio, and video.

Web 1.0

In December 1990, Tim teamed up with another scientist, Robert Cailliau, who rewrote Tim's initial proposal. Their goal was to combine hypertext with the internet in order to create web pages.

On June 8th, 1991, the www project was announced to the world. The project, which started as a means to allow high-energy physicists to share data, news, and documentation, began spreading to other areas and having gateway servers for other data.

On August 6, 1991, the world's first web page was launched.

The first implementation of the web represents web 1.0.
Web 1.0, also known as the "Syntactic Web" or the "Read Only Web," was the first generation of the web, running from 1990 to 2000. The role of users was limited to reading only the information provided by the content producer.

It was a one-way communication purely based on a client-pull model (HTTP) that could be initiated by the client only. It was slow and had a chunky nature. There were few writers and a large number of readers, which resulted in user starvation for content and a slow network. Web 1.0 was designed with the assumption that the web was for publishing rather than participation, which meant that only information could be read with no interaction with the web pages. It used software as an application and not as a service. Whenever new information is entered into the web pages, they need to be refreshed every time.

Examples of Web 1.0 are static websites and personal sites, and the core web technologies used are HTML, HTTP, and URI, although other protocols such as XML, XHTML, and CSS are also used.

Web 1.0 makes use of both server-side scripting such as ASP, PHP, JSP, CGI, and PERL and client-side scripting like JavaScript, VBscript, and Flash.

Web 2.0

The term "Web 2.0" was coined by Darcy DiNucci, an information architecture consultant, in her January 1999 article "Fragmented Future". At the unveiling of Palm Inc.'s first web-capable personal digital assistant (supporting Web access with WAP), DiNucci envisioned the Web "fragmenting" into a future that expanded beyond the browser/PC combo it was associated with. She focused on how the basic information structure and hyper-linking mechanism introduced by HTTP would be used by a variety of devices and platforms. As a result, her "2.0" designation refers to the next version of the Web rather than the term's present meaning.

In 2004, the concept gained momentum when O'Reilly Media and Medialive hosted the first Web 2.0 conference. In their opening remarks, John Battelle and Tim O'Reilly defined the "Web as a Platform," where software applications are built upon the Web as opposed to the desktop. According to them, the unique aspect of this approach is that "customers are building your business for you." They claimed that user-generated material (in the form of ideas, words, videos, or photographs) could be "harnessed" to generate value.

Web 2.0 does not refer to any specific technical upgrades to the internet. It simply refers to a shift in how the internet is used in the 21st century. This new version allows users to actively participate in the experience rather than just acting as passive viewers who take in information.

Web 2.0 which is also referred to as the social web or read-write web, lasted from 2000 to 2010 and continues even now. In this era, every user can be a content producer, and content is distributed and shared between sites.

Instead of merely reading a Web 2.0 site, a user is invited to contribute to the site's content by commenting on published articles or by creating a user account or profile on the site, which may enable increased engagement. By increasing emphasis on these already-extant capabilities, they encourage users to rely more on their browser for user interface, application software ("apps"), and file storage facilities. This type of computing is referred to as "network as a platform".

Key characteristics of Web 2.0 include:

Rich user experience: this refers to the experience that is transported from the desktop to the browser, and the creation of dynamic content that responds to human interaction.
Web Oriented Architecture (WOA): This describes how Web 2.0 applications expose their functionality so that other apps may use and integrate it, resulting in a much richer range of applications. Examples include feeds, RSS feeds, online services, and mashups.
Social Web: This describes how web 2.0 websites tend to connect considerably more with end-users and make them an essential part of the website, either by adding their profile, commenting on content, uploading new content, or providing user-generated content (e.g., personal digital photos).

Some examples of Web 2.0 include social networking websites, self-publishing platforms (e.g., WordPress' easy-to-use blog and website creation tools), "tagging" (which enables users to label websites, videos, or photos in some fashion), "like" buttons (which enable a user to indicate that they are pleased by online content), and social bookmarking.

Web 2.0 technologies include HTML5, CSS3, and Javascript frameworks like ReactJs, AngularJs, VueJs, etc.

Web 2.5

The paradigm shift from web 2.0 to web 3.0 is what we refer to as web 2.5, which is also called the "symbiotic web". Web 2.5 represents the mutual dependence of the end-user and the content creator. The symbiosis is based on a data exchange, in which customers give up data in return for access to services, convenience, and cheaper pricing. This symbiotic data flow is fundamentally benign; it is the driving force behind many recent beneficial improvements in online services, and it has resulted in a significant increase in appealing and productive products and services available on the internet.

Also, Web 2.5 focuses on mobile computing and the evolution of mobile technologies. Mobile computing now plays a critical role in engaging a larger audience through native and mobile web apps. Hence, more and more applications are entering the mobile market to establish a presence by focusing on mobile customers.

The transition from Web 2.0 to Web 2.5 is marked by a reversal of fortune for the once-promising "content supplier". They not only now supply information to customers, but now also extract information from the users in a variety of ways, ranging from monitoring their activities online to persuading them to submit as much personal information as possible. This personal information is in turn used by the content providers to tailor the information they deliver to individuals.

Web 2.5 placed significant doubt on the future of the web and was contrary to the benign vision Tim Berners-Lee had of the web. In Web 2.5, control could be taken from users, choices made for them rather than by them, and not necessarily to their advantage, but rather for the profit of those who wield the control. This doubt is addressed in Web 3.0, which is intended to give the user greater authority, allowing them to locate what they want or need by using "intelligent agents" to scan the internet, thereby expanding on Tim Berners-Less's notion of the semantic web.

The future of the web is bright if the notion of the symbiotic web is grasped.
Web 2.5 technologies include Progressive Web Apps (PWA), Accelerated Mobile Pages (AMP), cookies, etc.

Web 3.0

In 2009, Satoshi Nakamoto purportedly invented Bitcoin, the world's first cryptocurrency. He envisioned his innovation as a peer-to-peer currency system and alternative payment method devoid of any central control or rules. His invention, which was aimed towards decentralization, anonymity, and freedom, became a building block for Web 3.0.

Web 3.0 is developed based on the concepts of decentralization, anonymity, and freedom of influence. It is decentralized in the sense that it operates on a distributed peer-to-peer paradigm, with no one entity having the ability to directly influence or modify the system's direction. Anonymous is based on the fact that users' identities have no bearing on their ability to participate in the system. Free of influence as there are no restrictions or rules.

In this era, networks are peer-to-peer decentralized, developed, operated, and maintained by users, rather than by enterprises. Computers can interpret information like humans via Artificial Intelligence and Machine Learning, which helps to intelligently generate and distribute useful content tailored to a particular user's needs.

Most significantly, Web 3.0 obscures the long-term power that big technology corporations and governments have had over users. Unlike in Web 2.0 and Web 2.5, where content creators and controllers had a lot of power, the user has more power in Web 3.0.

Some of the examples of Web 3.0 are Apple’s Siri, Google's Cloud API, and Wolfram Alpha.

Key features of web 3.0

Semantic web: Semantic markup refers to the communication gap between humans and computerized applications. One of the biggest challenges of displaying information on the web is that applications cannot provide context to data and, therefore, can’t understand what is relevant. Through the use of some semantic markup (or data interchange formats) in Web 3.0, data could be put in a form not only accessible to humans via natural language but able to be understood and interpreted by machines and software applications as well.
3D Graphics and Virtual Identity: Web 3.0 will transform the internet's future as it evolves from a simple two-dimensional web to a more realistic three-dimensional cyber environment. 3D design is widely used in Web 3.0 websites and services such as online games, e-commerce, the real estate industry, and so on. Also, this feature allows individuals to take on the role of an avatar in a virtual environment and explore, meet other inhabitants, participate in individual and/or group activities, and so on, just as they would in real life. Popular virtual worlds include Second Life, Red Light, etc. All interactions between avatars take place in the virtual world and have no bearing on real-time events.
Artificial Intelligence: This refers to the ability to decrypt natural language and understand intentions. This feature makes it easier to recognize real from fake and provides more reliable data. By combining this capacity with natural language processing, Web 3.0 allows computers to comprehend information in the same way that people do, resulting in quicker and more relevant results. They become more intelligent to satisfy the needs of users.

Advantages of Web 3.0

In simplicity, Web 3.0 improves on the flaws of Web 2.0 and Web 2.5, which we can categorize into the following:

Trust
Anonymity
Control
Rich user experience

Trust

Some may argue that the most significant contribution of the blockchain is automatic trust. By establishing a network of trust, the blockchain can go beyond the protection that digital IDs can provide.
Some blockchains allow for the construction of "smart contracts," which are blockchain-attached programs that run when triggered by a specific blockchain event. The main thing to remember about smart contracts is that the contract is the software code.

As a result, smart contracts are significantly more reliable than legal contracts. Legal contracts are enforced by the legal system, which varies in its trustworthiness from one location to the next, but is never flawless. The outcome of a legal contract dispute is never definite. Smart contracts, on the other hand, may be completely trusted. A simple example of a smart contract is given by the movement of goods through a supply chain. Goods are dispatched with an RFID tag that reports their location when read. When the goods reach specific locations, the smart contract can automatically enact payment—for transport, warehousing, or import duties. Payments are thus predictable and can be trusted to occur.

Naturally, smart contracts can be far more complex than that example. They can cover many situations that are currently covered by legal contracts, diminishing the possibility of fraud.

Anonymity and control

Most of the platforms and applications we use daily demand that we provide personal information in order to utilize them. As a result, data leaks occur, and the proprietors of such sites simply sell our data for profit. Web 3.0 app makers can create Dapps that allow users all over the world to utilize them without submitting any sensitive or personal data. This is made possible by blockchain technology.

Also, the proprietors of those platforms can make decisions that may or may not affect you. You have no control over the platform in this situation, and all it takes is a single order to cut you off. Using blockchain, Web 3.0 apps (Dapps) overcome this limitation. Everything is now decentralized, and there is no longer a single "Point of Failure" that could be exploited to take control of the system. Web3 could deliver a future that is truly autonomous and empowers the users to make decisions for themselves using Smart Contracts to keep the system trustless, anonymous, and free from external control.

Rich user and personalized experience

As intrusive as advertisements might be at times, there's no denying the convenience of being able to quickly click over to a unique offer for something you actually need or desire but might otherwise overlook.
Web 3.0 promises a considerably more customized surfing experience. Websites will be able to automatically adapt to our device, location, and any accessibility needs we may have, and web apps will become significantly more aware of our usage patterns.

The multidimensional Web 3.0 will help more than just websites; web apps will begin to provide significantly richer experiences for consumers. Consider a mapping service like Google, which is now able to combine the basics of location search with route guidance, hotel recommendations and live traffic updates. This simply wasn’t possible in the Web 2.0 era.

Opportunities in Web 3.0

Human dependence on the web has increased over the years. Many people are unable to imagine their lives without it. As this demand increases, so too will the opportunities available.

Some of the opportunities thanks to Web 3.0 include:

**The New Order:" The Web 2.5 model is used by the majority of applications today, just as the web 1.0 model was used by the majority of apps in the late 1990s. Many Web 2 companies are already transitioning to Web 3.0 models and planning for the future. Also, with Web 3.0, it is now easier to start a company via token systems compared to the traditional method of venture capital.
*Metaverse: * This is a combination of multiple elements of technology, including virtual reality, augmented reality, and video, where users "live" within a digital universe. It also translates to a digital economy, where users can create, buy, and sell goods. And, in the more idealistic visions of the metaverse, it's interoperable, allowing you to take virtual items like clothes or cars from one platform to another. Decentraland is a well-known example of this concept.
- DeFi: DeFi stands for "Decentralized Finance," and as the name implies, it is finance based on a decentralized approach. DeFi has been around for a while and allows individuals to take the capabilities of standard peer-to-peer blockchain transactions to a whole new level, allowing some Dapps to operate as decentralized banks. DeFi enables some Dapps to function as banks, providing services such as lending and borrowing, investments, insurance, trading, and liquidity pools, which are all examples of financial services.

How to make money from web 3.0 today!

Web 3.0 is the next big thing. Hence, understanding how to take advantage of this technology and generate consistent income from it is an added advantage.

If you're a creative who wants to achieve financial independence by doing what you love, web 3.0 can help you achieve this goal.
Web 3.0 offers legal ways to earn money online from the comfort of your home. Here are some ways to leverage this power:

Decentralized Autonomous Organizations (DAOs):
NFTs:
Cryptocurrencies:
Web creator platforms:
Dapps and web 3.0 technology development:

Decentralized Autonomous Organizations (DAOs)

In the traditional way of building a company, individuals relied on venture capital and gave away a percentage of their company to raise the funds required to scale the idea and company, which comes with lots of uncertainties. In Web 3.0, the process of starting and scaling an idea is easier. The project, which solves a real problem, is announced. Then anyone can participate in building it or investing in it from day one.

The company announces the release of x number of tokens and gives 10% to the early builders, puts another 10% up for sale to the public, and sets the rest aside for future payment of contributors and funding of the project. Stakeholders can use their tokens to vote on changes to the future of the project, and the people who helped build the project can sell some of their holdings to make money after the tokens have been released. People who believe in the project can buy and hold ownership, and people who think the project is headed in the wrong direction can signal this by selling their stake.

Unlike companies we see today, DAOs are organizations owned and managed by their members. DAOs are managed by a set of rules or agreements (smart contracts in the form of code) that are automatically implemented without human intervention depending on specific activities on the blockchain. When starting a DAO, you can earn money by convincing others to invest in your business idea. You can also reach a large number of investors, resulting in a large amount of financing for your business. All you need is a good concept and a team of blockchain developers to get started.

NFTs

Did you know that a Png or gif can be sold for $50,000? If you don't, then it's time for you to start exploring the world of NFTs. NFT stands for Non-Fungible Token. They are art pieces, but instead of being shown in museums, they are digital, similar to the wallpaper on your phone or random photos you download from the Internet.

Trading NFTs right now is one of the most unfair ways to make a profit. You are literally selling a 200kb Png, gif, mp3, or jpeg for millions of dollars. Thanks to the Metaverse concept, NFTs sell at ridiculous prices. NFTs may be used in the metaverse to show that you support a certain project or that you are a member of a particular community within or outside of the virtual world. As a result, like-minded people may establish communities where they can share ideas and work on initiatives.

Cryptocurrencies:

The cryptocurrency industry has grown substantially since Satoshi Nakamoto published the original Bitcoin whitepaper in 2008. More than a decade later, most people are aware of the terms "Bitcoin" and "cryptocurrency". Since 2009, the crypto space has created its fair share of wealth for early adopters and investors. While the early gains in crypto have already been made, the industry remains in the initial stages of development. There are a variety of ways to make money and produce revenue in this space. However, because of the inherent volatility of crypto assets, the majority of them are high-risk, while some require subject knowledge or skill.

Web 3.0 creator platforms:

Unlike Web 2 platforms, where data from users is gathered and sold by those in control, on the Web 3.0 platform, users are paid for their data. They have complete control over their information and censorship.

Some examples of web 3.0 content platforms for earning income are:

Gitcoin.co:

Gitcoin allows individuals to earn by contributing to open-source projects.
Mirror.xyz:

Mirror is known to be the first decentralized writing platform. Mirror's publishing platform revolutionizes the way we express, share, and monetize our thoughts. Mirror operates not only on a user-owned, decentralized, crypto-based publishing network. Writers on this platform get paid in cryptocurrency (Ethereum). Writers may also sell NFTs on the platform to raise funds for their projects.
Flixxo:

Flixxo is a decentralized video distribution platform that runs on a decentralized blockchain network.
Unlike YouTube, Facebook, and TikTok, users on this network have complete control over how their videos are distributed and monetized. Creators can receive payments directly from viewers without any intermediary services. The native token of flixxo, FLIXX, may be used to watch videos, share them with others, and be utilized outside of the flixxo ecosystem.

Dapps and DAOs developer:

There are several DAO projects released every day, which means an increase in opportunities for developers to look for projects they love and earn from them by contributing to the project. Also, with the increase in popularity and adoption of Web 3.0, there is an increase in demand for Web 3.0 apps (Dapps) and technologies.

Conclusion

Web 3.0 is gaining traction in a variety of industries, including music, video streaming, and even gaming.
There are thousands of people passionately working to make this space more accessible for all. Soon you will be using web 3.0 apps without even knowing it.

To stay updated and informed about new and emerging technologies and careers, sign up for my newsletter.

If you have any questions or just want to chat, feel free to DM me

LinkedIn: www.linkedin.com/in/sokaribosenibo/
Email: sokaribomoshea@gmail.com
Website: sokaribosenibo.com

The advantage of CCMS in technical writing

Sokaribo Senibo — Mon, 20 Dec 2021 21:01:05 +0000

Technical communication and technical writing have become a constantly evolving field, from providing support for products to a knowledge-centered field that focuses on contributing knowledge that adds value to an organization. As it evolves its needs have become more complex and dynamic, hence the need for content management systems.

This article summarizes the role and advantages of a component content management system (CCMS) in technical writing.

Table of content

What is CMS and CCMS?
Features of CCMS
The benefit of CCMS in technical writing
Conclusion

Keywords

Content management systems, Component content management systems, technical communications, Technical writing, technical documentation

What are CMS and CCMS?

Technical writers produce diverse content, from business documents to technical manuals, marketing materials, and a wide range of other textual and audiovisual data. The way these contents are saved, organized, and modified can have a big impact on the productivity and efficiency of a project.

Content management systems (CMS) are platforms designed to save, collect, organize, modify, and publish content in diverse mediums. They can be described as text editors run by a relational and searchable database. A content management system enables technical authors to know what exists, where it exists, if it even exists, and who published it.

Common CMS editors for technical documentation include:

MadCap Flare
RoboHelp
Wikis
SharePoint
Wix
Joomla

Component content management systems (CCMS), on the other hand, are a type of CMS that segments content into discrete, self-contained components that can be easily shared and reused across a wide range of publications and channels. They enable technical writing teams to create, manage, publish, and store content at a granular level (component).

Common CCMS editors for technical documentation include:

Oxygen XML-Author
Adobe FrameMaker
Xyleme

The primary difference between a typical CMS and a CCMS is the level of content management. A typical CMS manages content at a document level, while a CCMS manages content at a component level.

Components here refer to self-contained, structured, and reusable information that has "the ability to be recycled in numerous outputs for multiple audiences."

Within CCMS, content is managed at the level of words, paragraphs, topics, concepts, or assets, usually through the use of an XML-based data model like Darwin Information Typing Architecture (DITA) or DocBooks.

Two main features that separate CCMS from other content management systems are metadata and granularity. Metadata enables CCMS editors function regardless of scale, while granular control of components distinguishes and adds special functions to CCMS.

The benefits of CCMS in technical writing

Until the emergence of CCMS and other component-based authoring tools, Microsoft Word was the most frequently utilized tool for documentation. In that era of Microsoft Word-based documentation, technical writers had to worry about both content and layout, which were tightly intertwined. Changes to either content or the layout usually caused problems with the later, hence an additional publishing application is usually necessary to generate sophisticated formats that Microsoft Word does not support, such as EPUB or CHM.

If documents shared information, the most common method of reuse was copying and pasting. When the reused information was updated, it had to be manually updated everywhere it was used, which resulted in inconsistent and out-of-date content.

When documents were written for users who spoke a variety of languages, the manual burden of copying and pasting increased as the number of languages increased. Also, documents were often kept on the local computers of technical writers and were not uploaded and shared until they were completed, creating barriers for technical authors to reuse information written by others, limiting access to other departments, and generating safety and knowledge management issues. This kind of technical documentation process, which produces inefficient effort, inconsistent and out-of-date information, and dissatisfied users, could be resolved using a content management system.

CCMS empowers organizations and technical writers to:

Manage Effectively

The capacity to reuse information using a single-sourcing technique, which prevents information inconsistency, saves the time spent updating information, and lowers the cost of both authoring and translation, is one of the major benefits of adopting CCMS. CCMS also has a variety of built-in, branded templates and corporate taxonomy alignments, which can eliminate design inconsistencies and improve the end-user experience.
Update easily

CCMS enable technical writers to search for a keyword in a publication and jump to a specific page without logging in to multiple systems. The built-in reporting system, enable authors to see exactly where each piece of content has been used (and reused). Also, thanks to metadata tagging, technical authors can track content lifecycle and tag properties at the component level (paragraph, image, question table, etc.). Data is provided at the most granular level, which can state; who authored a specific piece of content, to when it was last modified, expiration dates, and more.
Publish quickly

With centralized, reusable content, built-in publishing templates, collaborative processes, and seamless upgrades at the component level, CCMS reduces publishing time. Also, translation costs are reduced and communication is streamlined with collaborative review sessions, real-time feedback, as well as the ability to track activity at the version level to gain an accurate picture of content and user histories in order to support legal discovery, simplify audit requests and facilitate regulatory compliance.

The cost of adopting CCMS can be a pain for many companies, but in reality, it saves you a lot of money in the long run. CCMS offers a better way to create, store, and deploy content by automating and simplifying the workflow of documentation, which enables you to leverage information assets and promote collaboration on a fundamental level.

Fundamentals of technical writing

Sokaribo Senibo — Mon, 13 Dec 2021 09:54:48 +0000

Starting a career in technical writing can be a frustrating process due to the abundance of information and misconceptions about what technical writing is and how to get started.
This article summarises in detail the fundamentals of what you should know and consider when getting started in technical writing.

What is technical writing?
The role of the technical writer
Skills required in technical writing
The technical writer's toolbox
Design thinking and the writing process
Starting a career in technical writing
Summary

What is technical writing?

Technical writing is a unique sphere that unites communication and technology.
It is the art of providing detail-oriented instructions to help users comprehend a specific skill, technology, or product. There are misconceptions that technical writing is just about writing. In reality, it is also about researching, understanding a technology, determining the audience, problem solving, and more.

Technical writing is part of a bigger field called Technical communications, which encompasses a set of activities that people do to discover, shape, and transmit technical information. The major difference between technical communication and the other kinds of writing is that technical communication has a somewhat different focus on purpose and audience.

The role of the technical writer

In simple terms, the role of a technical writer is that of a translator, whose aim is to explain difficult subjects to a specific audience in clear, easy-to-understand text.
In organizations, technical writers work with multidisciplinary teams to develop a communication strategy, acting as a mediator between the more technical staff and the less technical readers. A technical writer’s responsibility extends beyond just writing to understanding the entire project, from high level goals to the intricacies of implementation.
Depending on the industry and company, documents created by technical writers can be divided into the following broad categories;

UI Based Docs
Developer Docs
Deployment Docs

UI-based docs are documents that capture details of the software user interface. They specify how the end user may navigate the UI of a product or software. They include product manuals, repair manuals, user guides, etc.

Developer Docs are documents that describe every aspect of how developers should interface with a given software or library. A subset of developer docs is API (Application Programming Interfaces) documentation.

Deployment documents, on the other hand, are documents that assist users in deploying and securing a product or software on another product or software. They include SDK (Software Development Kit) Documentation, which are helper documents or libraries that guide developers when they create apps for a specific product or platform.

In general, technical writers produce technical documents that show the user the layout of products or processes, explain what lies ahead, and define how to navigate each step to achieve the desired result.

Skills required in technical writing

Different documentation requires a different set of skills. However, there are fundamental skills required in technical writing.

Critical and Creative Thinking Capabilities

The importance of creative and critical thinking cannot be overemphasized. Technical writers have to be able to think through a problem, break it down into manageable bits, and make seasoned and clear judgments. They have to be empathetic and have the ability to teach or describe terms in ways suitable for the intended audience.
Writing and Research Skills

An effective technical writer has to be an investigative reporter as well as a journalist. As a result, it is critical for technical writers to understand and have a good grasp of English, be a good team player, be able to conduct research and gather data through interviews, and put the results and information into clear writing.
Testing and Troubleshooting Skills

Part of a technical writer’s primary task is to be familiar with the product’s features. As a result, before producing documentation, a technical writer may be invited to participate in product testing, which assists in the creation of an easy-to-understand guidebook.
They have to go through each feature of the product one by one. After that, build a list of features that work well and another list of ones that don’t. In other circumstances, features may function properly, but the product design itself may be unappealing.

Technological innovation is consistently moving forward; new features and products are continuously designed. Hence, technical writers have to be able to quickly adapt and work with diverse technical tools. Technical writers are lifelong learners.

The Technical Writer's Toolbox

There are several software and tools required in technical writing depending on the project and company.
Fundamental technical tools for technical writers can be categorised into the following;

Text development tools
Help or web authoring tools
Style guides
Publishing tools

There are several available options for each of the above categories of tools.

Text development tools

These are word processing, document processing, and desktop publishing packages that support authoring. Several technical writers use a basic word processing program like Microsoft Word. Although Word is adequate for short business documents, it can be inadequate for technical writing as it is not designed for long, complex documents.
Other options include;

FrameMaker
MarkDown
DocBook
AuthorIT, etc.

For a structured authoring environment, Extensible MarkUp Language (XML) authoring tools may be adopted in place of document or desktop publishing tools. Examples of XML tools include XMetal, Arbortext editor, In.Vision, and Oxygen.

Help or web authoring tools

To develop online help or web based materials, there is a need for a help or HTML tool. For online help, tools such as RoboHelp and Flare can be used. To write HTML, Dreamweaver can be used. To create documents for more than one output (example, print and HTML), a text development tool with conversion capabilities or compatible third party conversion tools should be adopted.
There are several third-party tools that can convert word processing files to other formats, including online help, HTML, HTML Help, JavaHelp, and XML. ePublisher and MIF2GO are examples of third-party conversion tools.

Style guides

A technical writer's style guide is a set of guidelines that technical writers must follow when writing technical documentation. They define the style that should be adopted in technical writing. These style guides enable documentation to be written in a clearer, consistent tone and style.
These guidelines explain issues such as:

The word count
Punctuation
Capitalization
Word choice and terminology
Highlighting
Acronym use
Use of charts and figures

The style guide adopted is usually dependent on the type of documentation project. Most companies and technical writers develop their own style guides and distribute them to all employees in either printed or online forms. Other companies and technical writers may follow the guidelines in an established reference such as:The Chicago Manual of Style, _The Handbook of Technical Writing, Open SUSE, etc.

The Chicago Manual of Style is a guide that focuses primarily on grammar and writing style. It provides guidance for punctuation, capitalization, abbreviations, hyphens, dashes, plurals, and possessiveness. Technical writers can adopt this style when writing software documentation or technical information for the web.

The Handbook of Technical Writing offers guidelines for writing in a variety of technical contexts. The style guide provides tips for professional communication, organization and style, document design, tables, graphics, math notation, punctuation usage, and how to write technical documentation for other geographic regions.

Open Suse is an open-source style guide for developers and designers who are creating software documentation.
The technical writer's style guide is a one-page document that provides guidelines for grammar, formatting, punctuation, capitalization rules, hyphenation of compound words (receipts vs. receipts), etc. It also specifies the preferred fonts as Liberation Sans Narrow with Arial or Times New Roman as backup font choices. Moreover, the guide has a DocBook markup at the end to help you select the right XML element and make your document easy to translate from English.

There are several technical writing style guides available, but it is important to adhere to a technical writing style guide that defines the communication standards for the documentation to be created. Technical writing style guides are fundamental considerations for any technical writing project. They are the blueprint for writers to follow when creating technical documentation.

The Technical Writing Process

Technical writing goes beyond just sitting down and typing; it also includes various tasks such as visual design, editing, and project management.
The following technical writing process can be adopted:

Understand the task
Define your audience
Set up a doc plan
Get Started
Review and publish

Starting smart and following a process encourages success in technical writing.

Understand the project

Understanding the project sets you up for success and makes your writing time more effective. Take time to clearly understand the task at hand. Note all the requirements; document type, subject area/content, scope, and goal of the project. It is important to identify the needed deliverables.
Define your audience

One of the major writing factors in technical writing is the audience. Every technical writing project is targeted towards a specific user. Hence, the user should always be at the forefront of the technical writer’s mind. Enough knowledge should be gathered about who will use the document and what the user will be looking for when they read the document.

According to Janet Mizrahi,

"Knowing the audience, your reader, is imperative for successful writing..." In essence, we have to psych out the reader to accomplish our writing goal. We cannot do that unless we analyze the reader accurately. "
Set up a doc plan

After understanding the task and the user of the document, conceptualize your document. Technical information can be complex. It is important to create an outline or overall project plan with a list of tasks for each deliverable and a draft schedule. Tasks can include outlining, creating storyboards, writing, editing, designing visual content, reviewing, and so on. While setting out your document, it is important to research the project.
Get started

It is time to get started. Start writing by following the doc plan, having the audience in mind and understanding the project. Create the content, create the visuals, consult the subject matter experts (SMEs), and discuss with the team.
Review and publish

After writing, it is important to review the project to ensure it achieves the goal of the project, is tailored to a specific user, is consistent with the style guide, and aligns with the doc plan. After reviewing, you may publish or submit the project.
There are several platforms to publish articles and projects, such as Dev.to, Hashnode, and GitHub.

Starting a career in technical writing

Technical writing, just like any profession, has various processes, rules, best practices, skills, and so on that need to be understood.
There are several online learning platforms and certifications available to learn these processes and skills and kickstart a career in technical writing.
Preferred options include;

After learning, the major aspect of starting a technical writing career is to practice and build a portfolio. A portfolio proves proficiency in technical writing and showcases technical writing skills to hiring managers and companies in search of technical writers.

To build a portfolio, follow the following process:

Choose a technology or topic of interest
Write a tutorial on the technology or topic of interest
Write a how-to guide
Write a reference document
Write an explainer document for the technology or topic of interest

Conclusion

By understanding what you are getting into, learning the fundamentals, practicing intelligently, building a relevant portfolio, and developing a practice routine, it becomes easier to make progress quickly and consistently. There are several open source projects available on GitHub to improve your technical writing skills. Open source projects are projects that are free to use, study, modify, and distribute. To learn more about open source projects visit Ruth Ikegah's blog.
Also, joining a technical writing community is important to stay updated with relevant information and improvements in the technical writing profession.

There are several technical writing communities available, such as:

Technical writers tend to spend a lot of time in front of a computer, so it is important to have an ergonomic workspace to prevent repetitive motion injuries like carpal tunnel syndrome and other problems such as eyestrain. Always consider the height and position of your chair and keyboard, your posture, and the lighting condition of the work environment.

As you progress in your journey as a technical writer, there are other things you need to learn and consider. This article is intended to serve as a foundation for technical writing.

Feel free to reach out to me for clarifications, questions, job opportunities, etc.

DEV Community: Sokaribo Senibo

How to create a Bottom Tab Navigator using react-navigation in React Native

Prerequisite

Getting started with React Native

What is react-navigation?

Create project and install relevant libraries

Step 1: Requirements

Step 2: Install Expo Command Line Interface (CLI)

Step 3: Create a React Native Project

Step 4: Install the Required Packages

Step 5: Explore the Project Structure

Step 6: Run the development server

Set up navigator screens

Step 7: Create tabs pages

Step 8: Import Page Components in Home.js:

Step 9: Create a functional component in Home.js

Step 10: Import and create component in Settings.js

Step 11: Import and create components in Profil.js

Build bottom tab navigation component

Step 12: Create the navigation page

Step 13: Import the necessary libraries

Step 14: Define the bottom tab navigator function

Step 15: Define and import screen components as constants

Step 16: Create the Bottom Tab Screens Navigator

Step 17: Wrap App Component in Navigation Container and Export it as Default

Render component and run the application

Step 18: Import necessary libraries and components in App.js

Step 19: Export App Component

Customizing the bottom tab navigation

Step 20: Change the active icon tint color

Step 22: Next, let’s customize the icons

Congratulations once again!

Conclusion

Fundamentals of Blockchain, Ethereum and Smart Contracts

Table of Contents

What is Blockchain?

History of Blockchain and Ethereum

Ethereum and Smart Contract

The Architecture of Blockchain

Benefits blockchain technology

Conclusion

How to develop an AR copy paste app from scratch

Table of Content

Introduction

Understanding the Process

Prerequisite

Downloading and setting up neccesary packages

Setting up the local server

Congratulations so far! Your server is now running.

Setting up mobile device

Configure the app on your computer

Congratulation!

Understand and make money from Web 3.0 Today!

Table of content

The evolution of the web

Web 1.0

Web 2.0

Web 2.5

Web 3.0

Key features of web 3.0

Advantages of Web 3.0

Trust

Anonymity and control

Rich user and personalized experience

Opportunities in Web 3.0

How to make money from web 3.0 today!

Decentralized Autonomous Organizations (DAOs)

NFTs

Cryptocurrencies:

Web 3.0 creator platforms:

Dapps and DAOs developer:

Conclusion

The advantage of CCMS in technical writing

Table of content

Keywords

What are CMS and CCMS?

The benefits of CCMS in technical writing

Manage Effectively

Update easily

Publish quickly