DEV Community: Aliyu Adeniji

How to Interact with a Pizza Charity ink! Smart Contract with PAPI and Reactive DOT

Aliyu Adeniji — Tue, 07 Oct 2025 22:18:17 +0000

Introduction

Smart contracts on the blockchain networks are like the the powerhouse that need needed to be controlled and interacted with by workers.

To do this, PAPI(Polkadot-API) is the messenger that allows a seamless interaction with Polkadot smart contracts, it provides modular functions for building decentralized Applications.

In this article, I will show you how to effectively interact with an ink! smart contract using PAPI. We will also use ReactiveDOT to interact with the generated contract typescript bindings in our frontend.

To get started with the project create a new inkathon project using npx create-inkathon-app@latest and follow the prompts.
Change directory to the project you just created using cd pizza_charity and run bun run dev, this will install all dependencies to get ahead in the project.

For the smart contract part, generate and build your pizza charity smart contract in the following steps.

cd contracts/src
cargo contract new pizza_charity
Add your new contract to the contracts/Cargo.toml file.

[workspace]
members = [
    "src/flipper",
    "src/pizza_charity",
]

Build and generate typescript bindings using:

bun run build && bun run codegen

Add the code snippet below to the contracts/scripts/deploy.ts before deployment to initialize the constructor function in your smart contract and supply the default variables.

const main = async () => {
  const initResult = await initApi()

  const deployResult = await deployContract(initResult, "pizza_limited", contracts.pizza_limited, "new", {
    max_order_per_user: 5,
  })

  await writeAddresses({ pizza_limited: deployResult })
}

Deploy your contract to any blockchain of your choice with: CHAIN=<chain-name> bun deploy Replace with the actual name of the chain you want to deploy to. After a successful deployment, you should get the deployment addresses in /contracts/deployments/pizza_charity/<chain>.ts. That is all for the smart contract, let's go ahead with interacting with the smart contract on the frontend.

The reamaining part of this tutorial will be focused on the frontend interaction with the smart contract you just deployed.

The first step is to configure the frontend of the application to the chain where you deployed your contract, go to frontend/src/lib/reactive-dot/config.ts and export your chain configuration as seen below. This configuration sets passethub as the chain on which are interacting with the smart contract, and it sets the frontend ready for wallets interaction with the deployed smart contract.

  export const config = defineConfig({
  chains: {
    passethub: {
      descriptor: passethub,
      provider: getWsProvider("wss://testnet-passet-hub.polkadot.io"),
    },
    // Add more chains here
  },
  ssr: true,
  wallets: [new InjectedWalletProvider()],
})

Import the contract deployment into the frontend/src/lib/inkathon/deployments.ts file.

import { contracts } from "@polkadot-api/descriptors"
import * as pizzaPassethub from "contracts/deployments/pizza_charity/passethub"



export const pizza = {
  contract: contracts.pizza_charity,
  evmAddresses: {
    passethub: pizzaPassethub.evmAddress,
    // Add more deployments here
  },
  ss58Addresses: {
    passethub: pizzaPassethub.ss58Address,
    // Add more deployments here
  },
}

export const deployments = {
  pizza
  // Add more contracts here
}

This will import the generated contract descriptors from polkadot-api and also import the chain we want to interact with.

The contract deployment will be linked with the passethub chain addresses here.

The next step is the actual interaction with the contract. We want to do two types of interaction with the contract.
1. Query the contract and get some information from the contract, for example, you can get the total daily supply of pizza and the remaining pizza for the day.
2. write and sign a transaction to the contract, here, you can request for a certain amount of pizza and get it delivered to you.

To do that, go to the frontend/src/components/web3/contract-card.tsx file in the project's folder, and add the code below to query the contract and get the daily pizza supply and display it in your frontend.

 const queryContract = useCallback(async () => {
    setQueryIsLoading(true)
    try {
      if (!api || !chain) return

      const storageResult = await contract.getStorage().getRoot()

       const result = await contract.query("get_daily_supply", {
          origin: ALICE
        }); 
      const newDailySupplyState = result.success ? result.value.response : undefined
      setDailySupply(newDailySupplyState)
      console.log(dailySupply);

       const result1 = await contract.query("get_remaining_supply", {
          origin: ALICE
        }); 
      const newRemainingSupplyState = result1.success ? result1.value.response : undefined
      setRemainingSupply(newRemainingSupplyState)

      const newMaxOrderPerUserState = storageResult.success ? storageResult.value.max_order_per_user : undefined
      setMaxOrderPerUser(newMaxOrderPerUserState )

    } catch (error) {
      console.error(error)
    } finally {
      setQueryIsLoading(false)
    }
  }, [api, chain])

  useEffect(() => {
    queryContract()
  }, [queryContract])

What exactly is happening in this code block?

We created connection with the Polkadot-SDK node using ReviveSdk and also a connected the pizza contract with the typedApi().
We also created an instance of the pizza contract on the passethub chain.
We are reading the root storage of the contract, this allows us to query every stored items in the contract.
We now used contract.query() to read the contract's functions and return the responses such as getting the total daily supply of pizza.

Let us write a signed transaction to the contract to request for some pizza.

   const orderPizza = useCallback(async () => {
    if (!api || !chain || !signer) return

    // Map account if not mapped
    const isMapped = await sdk.addressIsMapped(signerAddress)
    if (!isMapped) {
      toast.error("Account not mapped. Please map your account first.")
      return
    }

    // Send transaction
    const tx = contract
      .send("order_pizza",
        {
          data: {
            quantity_ordered: quantityOrdered
          },
          origin: signerAddress
        },

      )
      .signAndSubmit(signer)
      .then((tx) => {
        queryContract()
        if (!tx.ok) throw new Error("Failed to send transaction here, please check it", { cause: tx.dispatchError })
      })

    toast.promise(tx, {
      loading: "Sending transaction...",
      success: "Successfully Ordered, your Pizza is on its way",
      error: "Failed to send transaction here too",
    })
  }, [signer, api, chain])

Here, the first thing we did was to check if the accounts interacting with the contract is supported by the substrate runtime, if not, the function can prompt to map the account's address to the Polkadot's type.

We also wrote a contract.send() function that takes three arguments;

The actual function you want to call which is order_pizza function.
The data argument that supplies the contract with the quantity of pizza you want to request, and,
The origin of the transaction which is the user's signer address.

Conclusion.
In this project, we demonstrated the ease of deploying ink! smart contracts and interacted with it from the frontend using Polkadot-API.

With your knowledge of ink! smart contract development and frontend web development, polkadot-API offers you a level playground to make your apps available to users without any hassle.

The case for a different Concurrency in Rust: The difference between Rust and Javascript concurrency.

Aliyu Adeniji — Mon, 11 Aug 2025 16:44:49 +0000

Modern Programming and Software development is increasingly becoming a war of hardware, speed and scalability, and Rust is inherently built to be an envoy that brings them together.

As a project grows, multiple parts of the project may need to perform different operations at the same time, and to do this, such projects may be caught up in the bottlenecks of concurrency. Rust helps in solving this kind of issue with its concurrency and parallelism

In this article, you will learn how concurrency is applicable in the Rust programming language and the differences between concurrency in Rust and Javascript.

What is Concurrency in Rust?

Rust allows you to write highly performance and scalable applications due to its memory safe capability and type-safety, this gives it a high level of concurrency by allowing you to write Rust codes that compile and execute multiple different tasks within the same timespan without each task overlapping another task.

Rust concurrency won't be adequately explained without mentioning some of problems you may encounter while making your programs run concurrently, they include;
Deadlocks; where two different threads are waiting for each other at the same time preventing them both from continuous execution.
Race conditions; where multiple threads are trying to access data in an inconsistent order and,
Bugs; which occur in specific circumstances in the cause of executing multiple threads and and aren't inherently discovered for appropriate fixes.

How does Rust implement Concurrency?

Rust implements concurrency in the following ways by ensuring that once a code compiles, then it's totally safe to run in a multithreaded environment.

Multithreading
Message passing
Shared state concurrency

1. Multithreading in Rust.

This is the process of running multiple processes in a program independently by splitting them into different threads; these multiple threads in Rust use a 1:1 thread model implementation.

Multithreading in Rust is built around two fundamental traits: Send and Sync. The Send trait indicates that ownership of a type can be safely transferred across threads. For example, most types are Send, but Rc is not. This is because Rc maintains non-atomic reference counters, which can lead to race conditions and even double-free errors if multiple threads attempt to modify them concurrently.

The Sync trait ensures that references to a type can be safely shared between threads. That is, a type T is Sync if &T can be safely sent to another thread. Together, Send + Sync mark a type as thread-safe.

Rust enforces thread safety at compile time, preventing data races, and Mutex ensures only one thread can access data at a time, while Arc provides thread-safe shared ownership.

use std::sync::{Arc, Mutex};
use std::thread;

fn main() {
    let counter = Arc::new(Mutex::new(0));
    let mut handles = vec![];

    for _ in 0..5 {
        let counter = Arc::clone(&counter);
        handles.push(thread::spawn(move || {
            let mut num = counter.lock().unwrap();
            *num += 1;
        }));
    }

    for handle in handles {
        handle.join().unwrap();
    }

    println!("Result: {}", *counter.lock().unwrap());
}

With Rust’s ownership structure, you can always ensure that your code is memory safe and that values are only borrowed or inherited when needed and are dropped as soon as they are no longer used by other parts of your code, in the spawned thread, you can use the move keyword to take ownership of a value from the environment using closures, and once the spawned thread is done using the environment values, it immediately drops those values.

2. Message passing to Transfer data across threads.

Another concurrency approach in Rust is the Message Passing method between threads, the Rust standard library uses this approach by providing channels implementation. A channel can be thought of as a route for message passing between threads.

A channel is made up of two distinct halves which are the transmitting half and the receiving half, these two halves are constantly in communication, and the closure of one half will automatically lead to the closure of the other half too.
Let us look at how to pass data between threads using channels.

Import the mpsc::channel from the standard library, the mpsc simply means multiple producer, single consumer, this means that a channel can consist of multiple message senders and a single message receiver.

use std::sync::mpsc;
use std::thread;

fn main() {
    let (tx, rx) = mpsc::channel();

    // Move the receiver into the spawned thread
    let handle = thread::spawn(move || {
        match rx.recv() {
            Ok(data) => {
                println!("Received: {}", data);
            }
            Err(err) => {
                eprintln!("Error receiving: {}", err);
            }
        }
    });

    let data = 42;
    match tx.send(data) {
        Ok(()) => {
            println!("Sent: {}", data);
        }
        Err(err) => {
            eprintln!("Error sending: {}", err);
        }
    }

    // Wait for the thread to finish
    handle.join().unwrap();
}

The MPSC channels are a powerful concurrency allow multiple threads to safely send data to a single receiving thread. Internally, MPSC channels decouple senders from the receiver by introducing an intermediate queue. Each Sender clones a handle to the channel, while the Receiver continuously pulls values. The Rust standard library provides both unbounded channels (which can grow dynamically) and bounded channels (SyncSender), which enforce backpressure when the buffer is full.

An MPSC channel also maintains a shared buffer, often implemented as a linked list or ring buffer guarded by atomic operations. Each sender appends to this buffer without needing exclusive ownership, while the single receiver consumes items in FIFO order. To coordinate access, atomic pointers and memory ordering (Acquire/Release) ensure safe concurrent operations without locks.

For example, using the standard library:

use std::sync::mpsc;
use std::thread;

fn main() {
    let (tx, rx) = mpsc::channel();

    for i in 0..3 {
        let tx_clone = tx.clone();
        thread::spawn(move || {
            tx_clone.send(i).unwrap();
        });
    }

    for received in rx.iter().take(3) {
        println!("Got: {}", received);
    }
}

Here, multiple producer threads send integers concurrently into the same channel. Internally, each send enqueues data, and the receiver dequeues in order.

Libraries like Hopper extend this model by introducing memory- and disk-backed queues. Unlike SyncSender, Hopper allows precise configuration of in-memory and on-disk capacities, ensuring no events are lost under tight resource monitoring. Senders coordinate to write into multiple queue files, while the receiver reclaims disk space by removing exhausted files.

3. Shared State Concurrency

Another way to handle concurrency in a Rust project is through a shared state where many different threads can access the same shared data at the same time, to create a concurrency in a shared state, problems such as data races which can occur when multiple threads try to access the same resources at the same time are prevented by mechanisms such as Mutex.

Shared state concurrency in Rust is primarily managed through synchronization primitives like Mutex. A mutex ensures that only one thread can access a critical section of code or data at a time, preventing race conditions. Internally, Rust relies on atomic operations and memory ordering to provide these guarantees.

A Mutex supports two core operations: lock and unlock. When a thread locks a mutex, it checks whether the locked flag is available. If free, it sets this flag and gains exclusive access; otherwise, it must wait. Unlocking resets the flag, making the mutex available again. Rust uses Ordering::AcquireRelease to enforce memory consistency where no reads or writes can be reordered across a lock or unlock boundary.

Mutex allows only one thread to access a data location at a time in a concurrent environment, this is done through sending signal from the thread that wants to access a data, this thread tries to acquire the mutex’s lock that keeps track of which thread is having access to the data at a point in time.

Check a spin-lock mutex example implemented with an AtomicBool:

use std::sync::atomic::{AtomicBool, Ordering};
use std::thread;

pub struct SpinMutex {
    locked: AtomicBool,
}

impl SpinMutex {
    pub fn new() -> Self {
        Self { locked: AtomicBool::new(false) }
    }

    pub fn lock(&self) {
        while self.locked.swap(true, Ordering::AcqRel) {
            thread::yield_now();
        }
    }

    pub fn unlock(&self) {
        self.locked.store(false, Ordering::Release);
    }
}

Differences between Concurrency in Rust and JavaScript.

Concurrency Execution Models

Rust: Threads with Ownership Guarantees

Rust implements its own parallelism through OS-level threads, with its ownership system providing compile-time guaranteed thread safety:

Thread Creation: thread::spawn creates a native OS thread where each thread gets its own stack and competes for CPU time via the OS scheduler.
Data Transfer: The move keyword in closures transfers ownership of captured variables to the new thread. This is implemented via:
- For Copy types: Bitwise copy
- For non-Copy types: Move semantics (original variable becomes invalid)
Synchronization: Rust's Mutex<T> is a wrapper that enforces that you can only access the contained data when you hold the lock. The type system prevents accessing the data without locking.

JavaScript: Event Loop with Single-Threaded Concurrency

JavaScript's concurrency is different in the following ways:

Event Loop Architecture:
- Single call stack
- Task queue (macro tasks like setTimeout callbacks)
Execution Phases:

   While (queue.hasTasks()):
     1. Execute oldest macro task
     2. Execute all micro tasks
     3. Render if in browser
     4. Repeat

Concurrency Implementation:
- All concurrent operations actually run on the same thread
- I/O operations are handled by the underlying runtime (libuv in Node.js, browser APIs in Web)
- The illusion of concurrency comes from rapid context switching between tasks

Memory Management and Sharing

Rust's Strict Shared-State

use std::sync::{Arc, Mutex};

let data = Arc::new(Mutex::new(0)); // Atomic Reference Counting

Arc (Atomic Reference Counting):
- Thread-safe version of Rc (Reference Counting)
- Uses atomic operations for reference count updates
- Overhead of atomic operations but safe for cross-thread use
Mutex Guard:
- The lock() method returns a MutexGuard which implements:
  - Deref for accessing the data
  - Drop to automatically release the lock
Memory Safety:
- No data races possible at compile time
- All shared access must be explicitly synchronized

JavaScript's Garbage-Collected Sharing

Garbage Collection Implications:
- No compile-time checks for race conditions
- Relies on runtime checks and developer discipline

Performance

Rust's Threading Model

Creation Cost:
- OS threads have non-trivial creation overhead (~1-10µs)
- Stack allocation (default 2MB on Linux)
Synchronization Costs:
- Mutex lock/unlock: ~20-100ns
- Atomic operations: ~1-10ns
- Channels (mpsc): ~50-200ns per message
Memory Overhead:
- Per-thread stack space
- Synchronization primitives add small overhead

JavaScript's Event Loop

Task Scheduling:
- setTimeout(0) actually has minimum 4ms delay (HTML spec)
- process.nextTick() and microtasks have ~1µs overhead
Worker Costs:
- Worker creation: ~5-50ms (includes JS engine initialization)
- Message passing: ~10-100µs per message
- Structured clone adds serialization overhead
Optimizations:
- Hidden classes optimize property access
- Workers reuse same V8 instance when possible

Error Handling

Rust's Compile-Time Verification

let result = thread::spawn(|| {
    panic!("error");
}).join();

match result {
    Ok(_) => {},
    Err(e) => { /* handle panic */ }
}

Panic Propagation:
- Thread panics are captured via JoinHandle
- No silent failures
Compile-Time Checks:
- Borrow checker prevents data races at compile time
- Type system enforces proper synchronization

JavaScript's Runtime Error Handling

try {
    setTimeout(() => { throw new Error("async error"); }, 0);
} catch (e) {
    // This won't catch the error!
}

Error Propagation:
- Asynchronous errors must be handled in their callbacks
- Unhandled promise rejections may terminate the process
Debugging Challenges:
- Stack traces may be truncated across event loop ticks
- Race conditions only appear at runtime
- No static analysis for shared memory access

Choosing the Right Model

Use Rust when:

You need true parallelism and maximum performance
Memory safety is critical
You want compile-time guarantees about thread safety
Low-level control over threading behavior is needed

Use JavaScript when:

You need high-throughput I/O operations
Simple concurrency model is preferred
Rapid development is more important than raw performance

Conclusion

Rust’s approach to concurency through its ownership and borrowing system ensures memory safety without a garbage collection, this enables a level of control over data access and management leading to improved performance in software.

Rust provides extensive safety guarantees for systems programming, while JavaScript offers a more simplified option for event-driven applications.

Variables and Data types in Rust: A simplified approach.

Aliyu Adeniji — Fri, 25 Oct 2024 16:07:32 +0000

Introduction

Rust is a programming language that is well known for its type-safety and performance. Variables and data types are integral parts of all programming languages, hence, understanding variables and data types is essential for any Rust developer. This article explores how Rust handles variable declarations, immutability, control flow, and the variety of built-in data types, providing a solid foundation for building efficient programs.

What are Rust Variables?

Variables are named storage locations in a computer memory; they hold values that are used for the overall functioning of computer programs. The value that a variable hold can be a number, strings of text, or other complex data.

Variables in Rust are immutable by default, meaning that you cannot change the value of a declared variable at a later time, even you cannot mistakenly change the value of a declared variable, this gives Rust an advantage over some other programming languages, this type of immutability improves the safety and concurrency of Rust programs.

In the code block below, we try to change the value of the variable b but when you try to run the code, you will get a compiler error indicating that b is an immutable variable.

 let b = 9;
    println!("The value of b is: {b}");

If you want to change a value of a variable in Rust, you have to explicitly tell Rust that you want to change the value of the variable by declaring the variable to be mutable.

This mutability is also useful in programs that need to dynamically change values of a variable, depending on user’s input or some other scenario.

Check the code block below and see how to make a variable mutable in Rust.

 let mut b = 8;
    println!("The value of b is: {b}");
    b = 39;
    println!("The value of b is: {b}");

Try to run the code block, you will get the two values printed, and in the second print value, the new value of b will be 39. This means that you have been able to change the value of the variable b successfully.

What are Constant Variables in Rust?

Like every other programming language, constants in Rust are always immutable, and in contrasts to variables, you cannot change the values of constants with the mut keyword.

This immutability property of constants is useful for programs where you do not expect the values of a constant to change in anyway.

To declare a constant in Rust, you use the const keyword, and a distinct property of constants in Rust is that you must annotate the data type of the const.

const NUM_OF_ATTENDEES: u32 = 100;

Constants also can be declared anywhere in your code and can be referenced in any part of your code; this makes them globally accessible opposite to variables that are not globally accessible.

One last major difference between constants and variables is that constants can only be set to a const expression, and not the result of a value that can only be computed at run time, that is, before you can declare a constant and for such a constant to be valid, the value of the constant must be known at compile time.

Further explanation, constants cannot be set to depend on input or output of a program.

Check for how to declare a valid const below.

const MAX_POINTS: u32 = 500;

An example of an invalid constant declaration is the one blow which can only be evaluated at runtime.

const RANDOM_USERS: u32 = get_random_users(); // Invalid, as `get_random_users()` is computed at runtime

What is shadowing in Rust?

In a situation where you want to reuse a variable name for some other purpose, you can use shadowing to do this, shadowing allows you to shadow a variable by another second variable.

For example, in the code block below, we can make a shadow of the initial variable by setting it to another value that can also be used, in this way, the compiler will always take note of the last value that the variable is set to and that is what it will actually make use of.

let initial = 20;
let initial = 20 + 1;
println!("The value of initial is: {initial}"):

When you run the code above, what you will get on your terminal is 21 which is the value of the shadowing of the initial variable.

Another usage of Shadowing is when you want to use a variable in a scope that is different from the initial scope of the variable, this will create a shadow copy of the variable and isolate it from the initial scope, thereby maintaining the immutability of the base variable.

Look at how this is done below using the combination of the variable in the previous example and a new variable scope.

let initial = 20;
let initial = 20 +1;
{   let initial = initial *30;
    println!("The value of the initial variable has been updated in this scope to: {initial}");
}   
println!("The value of initial is: {initial}");

When you run the code block above, you will get two values, which are the value of the initial variable in the inner scope created, and also the last value of the initial variable that was declared immediately before the scope.

Another usage of shadowing is that it can be used to change the data type of a variable to another type without expressly writing long lines of code to do that.

Here is a common example of changing a variable data type by shadowing the variable.

let x = " ";      
let x = x.len();

The first variable above will return a string while the second variable will return an integer data type.

What are Rust Data types?

Rust is a statically typed programming language; this makes it mandatory for you to specify the data types you are working with before your programs can be compiled successfully.

This is one of the ways that Rust ensures that there are no conflicts with the data that you get as an output, imagine a programing language that takes in a string data type, and after compilation, it returns an unsigned integer u32. This can lead to issues like memory leak and fake data output, Rust is designed to prevent this.

There are two major data types in Rust, and they are:

Scalar Types
Compound Types

Scalar type data are those that represent a single vale. There are four Scalar types of data types in Rust:

Integers
floating-point
Booleans
Characters

Integer Types

An integer is a number that does not have a decimal or fraction, it is a whole number that can either be a positive number, a negative number, or even a zero number.

Rust integers can either be a signed or unsigned integer, and they have different number of bits they occupy.

A signed integer indicates the possibility of the integer to be of a negative value, in that case, there must be a sign that indicates that, while an unsigned integer indicates that the number will always be a positive value.

An Arch integer is based on the types of a computer architecture, and they are either 32-bit size or 64-bit size.

The table below shows the types and sizes of integers in Rust.

Length	Signed	Unsigned
8-bit	i8	u8
16-bit	i16	u16
32-bit	i32	u32
64-bit	i64	u64
128-bit	i128	u128
arch	isize	usize

Floating-Point Types

The floating-point numbers in Rust are numbers with decimals and they are two types: the f32 and f64 . The default floating-point type is f64, and any decimal number in the Rust programming are always in f64 bits, unless otherwise specified.

Look at the examples below, in the first variable, the floating type is not specified, and by default it is f64 while in the second example, the floating type is indicated to be f32.

let variable_one = 2.0;   //f64

let variable_two: f32 = 7.5;   //f32

Boolean Types

There are no other ways to denote Boolean types in Rust except as either true or false . These are the default Boolean types that are specified with the bool keyword. The example below is an illustration of how to use the Boolean types in Rust.

let is_true: bool = true;

let is_false: bool = false;

Character Type

The character type in rust is simply declared by setting the char variable in quotation. The code block below illustrates the different ways of declaring the character types in Rust.

let a = 'a';
let b: char = 'B';
let smiling_face = '😊';

Compound Types

As the name suggests, compound types are used to group multiple value items into a single type. The two compound types in Rust are: tuples and arrays.

Tuple Type

The tuple type is used to group values of different data types into one, to create a tuple, you must declare the data types of each element in the tuple, separated by a comma.

Tuples have fixed lengths, thus, as soon as they are declared, they cannot change in size in whatever way. The example below is how to declare a tuple in Rust.

let tuple_data:(i32, f64, u8, char) = (-50, 5.5, 1, 'A');

Array Type

Arrays in Rust are also collections of multiple values into a single array, in Rust, all the elements of an array must be of the same data types.

Arrays in Rust have fixed lengths, as such, you cannot modify the size of an array, to have such a collection of arrays that can be modified, you can use a vector collection instead.

The example below is how to create an array in Rust.

let array = [1, 2, 3, 4, 5];

Another way to initialize an array in Rust is as shown in the code snippet below, but this time around, you want to initiate an array with the same values all through.

let array = [7; 6];

To access the elements in a Rust array, you use indexing method by indicating the index of an element you want to access as shown below.

let new_array = [4, 5, 6, 7, 9, 0];

let first_element = new_array[0];
let second_element = new_array[1];

When you run the program to print the first and second elements in the array above, you will get the results according to the index specified.

Lastly on Arays, in Rust, you cannot access and invalid Array element, this is one of the memory safety provisions in Rust, a program where you try to access an invalid array element will always panic and will not run until you resolve the error indicated by the Rust engine.

Conclusion

In Rust, variables and data types are the basics for safe, efficient programming. In this article, we leant about the various ways to work with variables and create standard programs. With all these safety measures in Rust, it prevents common programming errors at compile time.

Understanding primitive types (integers, floats, Booleans) and compound types (tuples, arrays, strings) prepares you for advanced concepts.

Writing your first program in Rust

Aliyu Adeniji — Mon, 14 Oct 2024 06:48:37 +0000

Introduction

Writing your first program in Rust is a great beginning to unlocking a lot of goodies that Rust has to offer.

In this tutorial we will write our first Rust program, and also dive into the rust package manager which is Cargo, we shall learn how to use Cargo and make life easier as a Rust developer.

Creating a project directory

To get started with your program, create a project directory in your Mac, or Linux OS following steps.

mkdir newproject

Change directory into the newly created directory with the code snippet below.

cd newproject

Writing a new Rust project

It has become a general standard to start writing Rusts program with a main.rs file, and rust files have an extension that ends with .rs . That way, our program will follow the same protocol by creating a main.rs file in our project directory.

Open main.rs and write a main function that prints Hello, world! as seen below.

fn main() {

println!("Hello, world");

}

Save your project and run it in your terminal by typing main.rs.

If the program compiles and runs correctly, Hello, world! will be printed in your terminal.

Now, what’s happening in the program we just wrote?

The first part of the program which is the function keyword which is denoted as fn serves as the function definition that serves as the entry point our project and to all Rusts’ programs, this is the first function that runs in every Rust program; therefore it is important to declare a main function that will compile and run without issues.

The other part is the println!("Hello, world"); line that is compiled by the function and prints the line on our terminal, this is called the body of the function. To explain further the println! keyword calls a Rust built-in in function called macro .

What is Cargo?

To make writing programs in Rust even easier, a package manager and build system for Rust was developed. It's called Cargo, there are a lot of libraries in the Rust ecosystem that are working together to deliver the best programming experience to Rustaceans, cargo therefore handles the tasks of downloading the libraries, and it is also used to build the libraries and make them work in your programs.

As you write more complex programs, you will need to use more libraries in the Rust’s ecosystem, therefore you need the service of the package manager, therefore, installing rust with the rustup installation will automatically install Cargo on your local machine.

To confirm if you have Cargo installed on your computer, use cargo —version .

How to create a new project with Cargo.

Getting started with Cargo is as simple as getting started with your Pizza, run the code snippets below and boom, you have a new Cargo project.

 cargo new new_cargo_project
 cd new_cargo_project

To confirm if you have a new Cargo project, check your project’s directory and you should find the new_cargo_project directory which automatically has a src file in that contains a main.rs file.

As per normal standard, lets create a hello world program to test run Cargo.

fn main() {
println!("Hello, world!");
}

Let us build and run the Cargo project in our terminal using the code snippet below.

cargo build

If all goes well, this command builds and runs the cargo project and prints Hello world in our terminal. Once a build is successful, you can always use cargo run to run every new update that you have in your project.

And that is it, we have successfully written a hello world program in Rust.

Conclusion

In this tutorial, we have been introduced to the very beginning of every programing language which is to write a successful hello world function, we also learnt the standard way of working with Rust package manager which cargo and using it to build and run our Rust programs.

Going forward, we shall begin to learn more about the fundamental principles of the Rust programming language and subsequently build more complex projects.

What is Rust Programming?

Aliyu Adeniji — Sun, 06 Oct 2024 15:26:06 +0000

Introduction

Rust is an efficient, memory-optimized, and a fast programming Language that is used to build to build web services and Apps that require speed and efficiency.

Some of the most important features that make Rust stand out among other programing languages is the built in memory safety, this feature allows you to write Rust programs that do not have memory-corrupting bugs.

Rust programs also have a high-performance throughput which makes Rust code to be easy to read and write, this means that writing Rust programs will reduce developmental costs.

Rust concurrency is one other feature that makes it easy for developers to write Rust codes and detect potential vulnerabilities during development, rather than spending more time debugging the code after production.

It allows ownership and type checking that both make sure that every data in the Rust program have one owner at a time and every value holds the correct data type.

My only turn off of the Rust ecosystem is the Versioning system, Rust programs are currently version dependent, meaning that before you can work locally on a Rust program, your local version of Rust must be the same as the version of the program you want to work on, this usually leads to using more time to install dependencies and setting up a development environment, instead of focusing on building the project.

Now, let’s get it Rusty, In this section of the discussion, we wil go ahead and get stared with building with Rust, the most important thing here is getting our development environment well set up, and below is a guide to install Rust on Windows, Linux and MacOS, together with the Rust installation, you also need to install the Rust’s package manager called cargo .

Please note, that you also need a prerequisite knowledge of using a command line tool

How to install Rust on your computer

To install Rust on your Linux or macOS device, simply copy, paste, and run the following line of code in your terminal. The command will download and install the latest Rust version on your system.

$ curl --proto '=https' --tlsv1.2 [https://sh.rustup.rs](https://sh.rustup.rs/) -sSf | sh

To install Rust on a Windows operating system, go to https://www.rust-lang.org/tools/install and go ahead to install Rust on your windows operating system.

To confirm if you have an installation of Rust on your computer run rustc --version .

To make and installation update to your Rust version, run rustup update .

To uninstall Rust, run rustup self uninstall and Rust will be uninstalled from your computer.

Conclusion

In this article, you have learnt a bit of introduction to Rust programming, and you have been able to set up your local development environment, in the coming tutorials, we shall dive deep into the fundamentals of Rust programming.

File attachment in Xata Database: How to build an Online Library.

Aliyu Adeniji — Sun, 24 Sep 2023 16:47:51 +0000

Introduction.

Files and attachments are the core of information distribution in the digital ecosystem, in a relational database, file attachment is a way of structuring the database to meet the needs of the product. A badly structured database usually results in more development time and errors. This is one of the problems that file attachments in Xata Database aim to solve by removing the clumsiness of the database and making it more simplified and structured.

So, what’s up Xata?

Xata is a serverless database platform that provides database optimization in development, providing an easy workflow for web development, with Xata database, developers do not need to worry about scaling, downtime prevention, and database maintenance.

To follow along with this guide, the following are the prerequisites needed;

A Xata Database user account.
Knowledge of JavaScript.
Knowledge of React or NextJjs for frontend development.

File attachments make it easy to store data more efficiently and in an organized manner, meaning that you do not need extra external services for file storage in your database, and you also get to view these files in their original forms, in this blog post, we will build an online library and learn how to attach files to our library database.

With Xata file attachment feature, you can easily save documents of different types, images, videos and other files of your choice on your database without any external file storage services.

Benefits of using Xata File attachment feature includes the following;

With Xata file attachments, you reduce the latency of your project to the barest minimum, Xata allows this by providing built-in CDN capabilities for your file attachments, meaning that your file attachments are fetched along with other records in your database, and you don't need any extra settings to get this up and running, ease of development has always been the focus of the Xata team.
Your relational data and binary objects will be saved in the same data region, and you won't be concerned with compliance boundaries.
Your Database APIs now have the same permissions and authorization, keeping your credentials and permissions the same, this reduces the complexity of authorizations on the client side.
The ability to apply different image transformations to your image files through the same API that points to your data records. with Xata file attachments, image preprocessing before rendering is a thing of the past, you can easily apply several image transformations, ranging from image format change to photo resizing, all depending on your specific needs,

Let’s create our Xata database in the following steps:

Create a Database named library as seen below.
Create a database schema by adding a table, inside the table, add the following columns, recall that we have two file types that we want to include in our database, which are the book cover image and the book file itself.

book-name.
author.
size.
image.
bookfile.

Let us attach our files to our library’s database in the following steps:

On the Admin page of our database, click on add record to add a new book record and its details, as seen below.
For the two file columns, which are book cover image and bookfile, click on the Add files button to select the appropriate files from your local storage.
Click on the create record button, and you will see the new record attached to our database as shown below. That’s all with file attachments in the Xata Database, let’s go ahead and display our data on our Next.Js App.

Let's move on to the Next thing, which is Next.Js.

To get started with our App, create a Next App using the following code snippet:

npx create-next-app@latest --your-app-name

During installation, accept all prompts and set your app to the default settings.

Once your app is installed, run npm run dev to start your development server, and locate your server at http://localhost:3000/. Let us build our App’s structure and give it a little styling for the purpose of this tutorial. Add the following React code to your file to follow along; we will display the book’s name, book author, book size, cover image, and book file on our website, as seen in the React code block below.

import Link from "next/link";
import Image from "next/image";

export default async function Home() {

  return (
    <main className="sm:flex grid items-center justify-between p-5">
          <div className="mx-5 my-10 " key={books.id}>
            <div className="h-[350px] w-[300px] bg-blue-300">
              <div className="">
                <div className=" my-5 mr-5">Book:{books["book-name"]}</div>
              </div>
              <div>
                <div className="my-5 mr-5"> Author: {books.author}</div>
              </div>
              <div>
                <div className="my-5 mr-5">Size: {books.size}</div>
              </div>

              <div>
                <div className="my-5 mr-5">
                  Image:
                  {books.image && (
                    <img
                      src={books.image[0].url}
                      className="h-[120px] w-[120px]"
                      alt={`Image for ${books["book-name"]}`}
                    />
                  )}
                </div>
              </div>
              <div>
                <div className="my-5 mr-5">
                  <button className="bg-red-300 p-1">
                    <Link
                      href={books.bookfile[0].url}
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      download
                    </Link>
                  </button>
                </div>
              </div>
            </div>
          </div>
    </main>
  );
}

The next step is to initialize our library database in the NextJs project and fetch data from our Database and render the data in our App. To fetch data from the database, follow the following steps:
1.To get started with Xata Database in your NextJs project, install Xata using the Command Line Interface (CLI), and authenticate with your Xata account using the code block below:

npm i -g @xata.io/cli
xata auth login 
xata init

Follow the prompts, and your Xata database will be connected to your project, as seen below:

2.After your database is set up with your project, import getXataClient from the directory where you saved it as seen in the code snippet below:

import { getXataClient } from "@/utils/xata";

3.Create a constant for your XataClient using the following code snippet:

const xata = getXataClient();

4.Run the code snippet below to query your library database:

const library = await xata.db.library.getMany();

5.Serialize your library database and return it as a JavaScript object using the following code block:

const serializedLibraryData = JSON.stringify(library);
const DeserializedLibraryData = JSON.parse(serializedLibraryData);

Once the codes above are run successfully, you will have access to your library database and the attached files all in your code editor, the final work of JavaScript is to map over the data and render it dynamically on the website.

To map over the library database, use the following JavaScript code snippet:

The code snippet will check if the deserialized is available on the database, and also make sure that the length of the deserialized data is more than zero, afterwards, it maps over the data accordingly.

{DeserializedLibraryData &&
        DeserializedLibraryData.length > 0 &&
        DeserializedLibraryData.map((books) => ())}

And that's a wrap, now refresh your browser to have up-to date website content and functionality where the public can download any of the books available on the website.

At any point in time, when you make changes to your database on the web UI, run xata pull main and restart your development server to incorporate the changes in your local project file.

Conclusion.

Web development software and projects are the pipeline of data management, and as such, good web projects using simplified and well structured database management should be encouraged for ease of development and exactly this is what Xata serverless database is all about.
In this blog post we have learnt about File attachments in Xata database and built a client facing online library, to build more exciting projects using Xata database, this guide is enough a starter for both experienced and upcoming developers.
Attached is a screenshot of the website's interface.

Link to the github repository for the project is here.
You can also read more on Xata documentation here.

Simplifying Database Management: How to Import and Export CSV Files on Xata Database.

Aliyu Adeniji — Tue, 12 Sep 2023 13:55:38 +0000

Introduction.

“In an ever-evolving world of information distribution, and sharing, database management is fast becoming an integral part of every facet of human existence, at any point in time, if you are not looking for information, you'd be sending information to your others”. Efficient database management is an important aspect of every human endeavor and even business, while this is becoming more difficult, Xata serverless database is providing solutions to make it simpler and more seamless, importing and exporting csv files is one of the innovations that will make your database management a simplified one and allow you to work with several file formats in your database.

In this blog post, we will explore importing and exporting csv files using xata database, with a covid-19 dataset.

What is Xata Database?

Xata Database is a serverless database management service that allows you to maintain an abstract data infrastructure for your project, meaning that with Xata Database, you do not need to worry about setting up an infrastructure at any extra cost.

Xata provides a wide range of Database management service by hosting your database somewhere you do not have to know. All you need to communicate with your Database on Xata are different API endpoints that allow you to create, read, update, and delete data from your hosted database.

Xata also provides an easy-to-navigate UI that makes it easier than what other Database services provide for development and production purposes.

Xata offers two ways of data aggregation, which are:

Aggregations that are executed in Elasticsearch, and
summaries that are executed in PostgreSQL.

Formatting CSV files for smooth import and export on Xata.

To ensure a seamless import and export of data on Xata Database, you should ensure that your CSV files are well formatted and structured into machine-readable formats, a well-structured CSV file will remove errors while working with the data and also remove redundancy of data sections. Format your CSV by ensuring that you do the following:

Ensure a UTF-8 encoding in your file.
Do not leave blank rows in your CSV file.
Make sure that your CSV file conforms to the database format.
Make sure that there is similarity in every row of the data.
Ensure that all lines in your CSV file use the same eliminators.
Make sure all text fields are in quotes.
Use a unique identifier for each record.

Once you have a well-formatted data, the next step is to import your data into Xata, to do this, you need a Xata user account, Xata is free for almost any usage, if you need more advanced usage for your project please visit the billing page to learn about Xata pricing.

After setting up your account, follow the steps below and get your data into Xata ASAP.

Log in to your account and add a new workspace if you don't have one yet, if you already have a workspace, go ahead and create a new database, or you can use an existing database. In this blog post, we created a new database named covid-19_vaccination_databaseas seen below. Xata provides a versioning experience that allows you work in different branches if you so wish, with this, you can have a safe working experience with Xata, choose any branch you wish to follow this tutorial with.
Click on the add a table button on the left menu bar on the page and select import CSV file from the drop-down menu, alternatively you can select the import CSV file button on the get started page as shown below.
Select Browse Destkop to select your desired file from your saved files.
Once your file upload is complete and you are ready to go live, click on begin import, and your CSV file import will begin. If there are no errors, you will get a success page and your CSV file shown in your Xata database successfully. And that's a wrap on CSV file import on Xata Database. What is an import without a corresponding export?

In the next section, We will go through the steps required to export a CSV file from Xata.

Xata allows you to do a lot with your data on the web UI and even through communications with the API endpoints, you can decide to do any kind of modification you like to your data, after all modifications, let's export our data as new CSV file that can be used somewhere else as deemed fit.

To export your data as a CSV file, simply follow the following steps.

Click on the Actions button at the top middle corner of the page, and select how you want to export your CSV file, for this blog post, let us export the current view only.
After a successful export, you can view your new CSV file in your selected storage folder. On opening the modified and exported CSV file, you will get all modifications applied as seen in our file, in this file, we deleted some columns, and they're all removed as seen below.

Data Cleaning and Transformation during import and export.

Data cleaning is an essential part of database management, as such, it is imperative to identify and clean duplicate and inconsistent data from your CSV file during import.

You should also also make sure to define mapping rules between your CSV file and the Xata UI, this makes sure that you are actually working in par with your database.

Conclusion.

Managing database involves dealing with files of different formats, and with the limitations of other databases, Xata database has made it easy to import and export CSV files into your database, this makes it flexible to work with your CSV files in Xata. for more details and explanations, check the official Xata documentation here.

We have been able to import, edit, and export our CSV file in this blog post, go ahead and build great products while flexible with your database.

Step-by-step tutorial on how to create a React Modal.

Aliyu Adeniji — Wed, 23 Aug 2023 16:20:27 +0000

Introduction.

React Modal is a widely used UI component in web development. It allows you to display content in an overlay on top of your website, which can be used for various purposes such as communicating alerts, notifications, or forms. In this step-by-step guide, we will walk through the process of creating a React modal.

Web experience, a lot of times depends on the kind of user interfaces available on websites, a good user interface will print a delightful experience in the minds of web visitors, giving users an exciting web experience is the work of modals in React apps.

Modals are popups that deactivate all other contents of a webpage and allow users to take action on important information on a website, these popups can be in the form of notifications, prompt messages, or even forms that collect data from users.

Modals give visibility to webpages and dialogues on a webpage, and they make sure that users are aware of real-time page updates.

Modals also give flexibility to websites by preserving the original page while displaying new features.

They also make websites simple by keeping all contents of a webpage on a single page making sure that users are not disconnected from the original page contents.

Summarily, Modals are used to grab the attention of users and make them focus on the new information available.

What is React?

React is a declarative, effective, and adaptable JavaScript user interface library. It allows you to create complex user interfaces out of discrete, small chunks of code known as "components." There are several types of components in React. In this tutorial, you will learn how to create Modals that you can use in your React Apps and customize them to your specific needs, for this tutorial, we will build a newsletter signup form Modal.

Setup your React App.

Setup your react app in the following steps:

Create a new React project using npx create-react-app react-modal.
Restructure your React App to a blank web page where you can add your custom codes and start your development server using npm start. Confirm if your app is running successfully by checking your local server on localhost://3000.

Once your app is running, let us start building, builders are winners.

We need to add a bit of styling to our project to be appealing to the readers, find the CSS code in the code block below, you can also add other beauties to it, you know?

.modal {
    position: fixed;
    width: 300px;
    height: 350px;
    background: rgb(122, 6, 6);
    color: white;
    z-index: 10;
    align-items: center !important;
    border-radius: 16px;
    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.04);
  }

  .signupBtn {
    margin: 20px 10px;
    cursor: pointer;
    font-weight: 500;
    padding: 13px 25px;
    border-radius: 15px;
    font-size: 0.8rem;
    border: none;
    color: white;
    background: #910909;
    transition: all 0.25s ease;
    z-index: -1;
    position: fixed;
    justify-items: center !important;
  }

  .subBtn {
    margin: 20px 10px;
    cursor: pointer;
    font-weight: 500;
    padding: 13px 25px;
    border-radius: 15px;
    font-size: 0.8rem;
    border: none;
    color: white;
    background: #910909;
    transition: all 0.25s ease;
    position: relative;
    left: 80px;
   content: initial

  }

  .signupBtn:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px -10px rgba(173, 7, 7, 0.6);
  }

  .modalHeader {
    height: 50px;
    background: rgb(104, 5, 5);
    overflow: hidden;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
  }

  .heading {
    margin: 0;
    padding: 5px;
    color: #bdfa5c;
    font-weight: 500;
    font-size: 18px;
    text-align: center;
  }
  .content {
    margin: 0;
    padding: 5px;
    color: #bdfa5c;
    font-weight: 500;
    font-size: 18px;
    text-align: center;
  }

Let's get to real work!

To toggle the Signup modal, we need a signup button that users will click on and in turn display our form, create a button with the code snippet below.

<button>Signup</button>, to make the button more appealing, style it as you wish.

Create a Modal component that will render the signup form and import the Modal into App.js, this modal is a JSX file that will be rendered dynamically.

Since toggle buttons function by executing changes in state, create a useState hook to manage the state of your signup form Modal whenever the signup button is clicked, using the following code snippet, import useState from React at the beginning of your code using:

import {useState} from React;

Go ahead and define the state function for the toggle button using the snippet below and set it to false by default.

The initial state will make our Sign up Modal form hidden by default.

const [openModal, setOpenModal] = useState(false);

Next, pass an open prop to the Modal component, and set it to the openModal state, recall that we have set the initial state of our Modal component to false, so we’re simply importing the false state to the Modal here.

open={openModal}

Go to the Modal.js file and pass the open prop into the Modal functional component.

The next thing to do is to define the logic that opens and closes the Modal, use the following code snippet to define this logic.

if(!open) return null;

This simply means that if the Modal is not open, do not return anything on the screen.

You will notice that the signup modal is now hidden if the code is rightly implemented.

We want to make the signup button functional and display the form Modal once a click event is applied to it, to do this add the following code snippet to the signup button in App.js.

onClick={() => setOpenModal(true)}.

Recall that the form Modal state is set to false initially, once we click on the signup button, the state will change to true with the code snippet above. Go ahead and test the functionality of the signup button.

Our Modal form is now working, we can go ahead to add other functionalities.

If you notice, we are unable to close our modal yet, even after submitting the form, to close the modal, we need to add a callback function that will return the state of the Modal component to false, add a click event to the Submit button, this will close the form modal once clicked.

onClick={onClose}, pass the onClose to the Modal functional component.

Add the onClose prop to the Modal Component in App.js and pass the openModal state as false to it, this will activate the functionality anytime there is a click event on the submit button.

onClose={()=> setOpenModal(false)}

Try all other functionalities, you should be able to use this Modal in your projects.

You have successfully created a React modal. With this step-by-step guide, you can now customize and style your modal to fit the needs of your web application.

Find a demo of the tutorial guide below.

Conclusion.

In this tutorial, we have established what Modals are and how they can be used in React Apps.

Continuous learning and experimenting with Modals will assist you in creating engaging and user-friendly React Web Applications. Diving deeper into Modal development in your projects will unlock a lot of ways to improve the user experience on your websites.

The link to Github repo for the tutorial is below.

https://github.com/AbuTuraab/react-modal

Thanks for reading, I will be grateful to know if you find this tutorial helpful.

How to build a Note-Taking App with HTML, CSS, and JavaScript.

Aliyu Adeniji — Mon, 10 Apr 2023 09:05:56 +0000

Introduction.

Note-taking is a convenient and easy way of keeping and organizing information on the go without the fear of losing your ideas and information. Note-taking apps are tools that take care of this task using web technologies. In this tutorial, you will learn how to build your own note-taking app with HTML, CSS, and a few lines of JavaScript codes.

This app will have functionalities such as creating new notes, editing and updating existing notes, and deleting unneeded notes. You can also display all available notes once you log into the website. It is assumed that you have basic HTML, CSS, and JavaScript knowledge to follow this tutorial and build your note-taking app afterwards.

To get started, we need a UI that will display everything about our note-taking App using HTML and CSS. The HTML code used for the tutorial can be found below;

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>InstaNote</title>
    <link rel="stylesheet" href="styles.css">

    <link rel="stylesheet" href="https://unicons.iconscout.com/release-pro/v4.0.0/css/line.css">
</head>
<body>

    <div class="popup-box">
        <div class="popup show">
            <div class="content">
                <header>
                    <p>Add a new note</p>
                    <i class="uil uil-times"></i>
                </header>
                <form action="#">
                    <div class="row tile">
                        <label>Title</label>
                        <input type="text" id="input">
                    </div>
                    <div class="row description">
                        <label for="">Description</label>
                       <textarea name="" id=""></textarea>
                    </div>
                    <button class="add-note">Add Note</button>
                </form>
            </div>
        </div>
    </div>
<div class="wrapper">
   <li class="add-box">
    <div class="icon"><i class="uil uil-plus"></i></div>
    <p>Add new note</p>
   </li>

   <li class="note">
    <div class="details">
        <p>This is a Title</p>
        <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. A natus commodi facilis quidem hic molestias, odio consequatur, soluta officia enim delectus adipisci, repellendus et nostrum repudiandae nesciunt. Vitae, ipsa neque?</span>
    </div>


</div>
<script src="index.js"></script>
</body>
</html>

The CSS code used to style this project is also available below;

@import url('https://fonts.googleapis.com/css?family=poppins:wght@400;500;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'poppins', sans-serif;
}

body {
    background: pink;
}

.wrapper {
    margin: 50px;
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(auto-fill, 250px);
}

.wrapper li {
    height: 250px;
    list-style: none;
    background: white;
    border-radius: 5px;
    padding: 15px 20px 20px
}

.wrapper .note {
    display: flex;
    ;
    flex-direction: column;
    justify-content: space-between;
}

.add-box,
.icon,
.bottom-content,
.settings .menu li,
.content header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bottom-content span {
    font-size: 14px;
}

.add-box {
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
}

.add-box .icon {
    height: 78px;
    width: 78px;
    color: pink;
    font-size: 40px;
    border-radius: 50%;
    justify-content: center;
    border: 2px dashed pink
}

.note .details {
    max-height: 165px;
    overflow-y: auto;
}

.note p {
    font-size: 22px;
    font-weight: 500;
}

.note span {
    display: block;
    margin-top: 5px;
    font-size: 16px;
}

.note .bottom-content {
    padding-top: 10px;
    border-top: 1px solid grey;
}

.bottom-content span {
    color: grey;
    font-size: 15px;
    cursor: pointer;
}

.bottom-content .settings i {
    cursor: pointer;
}

.settings {
    position: relative;

}

.settings .menu {
    border-radius: 4px;
    position: absolute;
    bottom: 0;
    transform: scale(0);
    transform-origin: bottom right;
    transition: transform 0.2s ease;
    right: -5px;
    padding: 5px 0;
    background-color: white;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}

.settings.show .menu {

    transform: scale(1);
}

.settings .menu li {
    height: 25px;
    cursor: pointer;
    padding: 17px 15px;
    border-radius: 0;
    justify-content: flex-start;
}

.menu li:hover {
    background: #f5f5f5;
}

.menu li i {
    padding-right: 8px;
}

.popup-box {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 2;
    background: rgba(0, 0, 0, 0.15);
}

.popup-box,
.popup-box .popup {
    opacity: 0;
    pointer-events: none;
    transition: all 0.25s ease;
}

.popup-box.show,
.popup-box.show .popup {
    opacity: 1;
    pointer-events: auto;
}

.popup-box .popup {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    max-width: 400px;
    width: 100%;
    justify-content: center;
    transform: translate(-50%, -50%);
}

.popup .content {
    border-radius: 5px;
    background: #fff;
}

.popup .content header {
    padding: 15px 25px;
    border-bottom: 1px solid #ccc;
}

.content header i {
    color: pink;
    cursor: pointer;
}

.content form {
    margin: 15px 25px 35px;

}

.content form :where(input, textarea) {
    width: 100%;
    height: 50px;
    padding: 0 15px;
    border-radius: 4px;
    border: #ccc 1px solid;
}

.content form .row {
    margin-bottom: 20px;
}

.content form textarea {
    height: 150px;
    resize: none;
}

.content form button {
    width: 100%;
    height: 50px;
    background-color: pink;
    cursor: pointer;
    color: #000000;
    margin: 5;
    border-radius: 4px;
}

form .row label {
    display: block;
    margin-bottom: 6px;
}

form textarea {
    height: 150px;
    resize: none;
}

This is how our App will look like, once the HTML and CSS codes are correctly implemented:

Follow along to add Javascript to our App and make it functional.

The first step in adding functionality to our App is to select all the elements and attributes that will be changed dynamically as we use our App, to do this we can use either document.querySelector(); or getElementById(); to select our elements and attributes.

const addBox = document.querySelector(".add-box");
const popUpBox = document.querySelector(".popup-box");
const closeIcon = document.querySelector("header i");
const titleTag= document.querySelector("input");
const descTag= document.querySelector("textarea");
const addBtn = popUpBox.querySelector("button");
const popupTitle = document.querySelector("header p");

After we have made the necessary selections, we create an array of the twelve months of the year that we will use in our App since we can decide to create a note at any point in time, and we need a record of the time we created every single note.

const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

Let's go ahead and add some JavaScript event listeners to our project. The first event listener we need is the function to add a new note to our App, this will pop up a form that will include a title and a description of our note. The logic behind this event listener is to add the element class of show to the code once the add button is clicked.
Add the following code snippet to add a new note once the add button is clicked.

addBox.addEventListener("click", function(){
   titleTag.focus();
    popUpBox.classList.add("show")
});

This is what we have afterwards;

Once we have entered the details of the new note we want to add, we should be able to close the form and return back to the homepage where all our notes will be displayed, we will add another event listener to add this functionality using the code snippet that follows; this event listener will remove the show element that was added earlier when the button is clicked once again.

closeIcon.addEventListener("click", ()=>{
    popUpBox.classList.remove("show")
});

After we have been able to show our note form, the next step is to be able to get hold of the values of the input of the form which are the title and description of the form, to do this, we will add an event listener to the addBtn so that once it is clicked, the values of the input will be recorded and stored in an array. Then we need a logic to keep track of the dates when a new note is added, we will call a newDate function in this logic, and store this in a variable called dateObj.

Once the details of the new note are recorded, we will store this info in a new variable called noteInfo, this will enable us to keep track of the notes information.

Since we’re storing our data in the local storage of our browser, we will call localStorage.setItem(); as seen in the code block to store our items.

addBtn.addEventListener("click", (e) => {
    e.preventDefault();
     let noteTitle = titleTag.value,
     noteDesc = descTag.value;
      if (noteTitle || noteDesc){


        let dateObj = new Date(),
        month = months[dateObj.getMonth()],
        day = dateObj.getDate(),
        year = dateObj.getFullYear();


        let noteInfo = {
            title: noteTitle, description: noteDesc,
            date: `${month} ${day} ${year}`
        }  
     if(!isUpdate){
             notes.push(noteInfo);
        }else {
            isUpdate = false;
            notes[UpdateId] = noteInfo
        } 
        localStorage.setItem("notes", JSON.stringify(notes));
        closeIcon.click()
        showNotes()
     }
});

We also create a variable called notes that stores all our notes in an array as new notes are being added using the code snippet below since we are using the local storage as our database, we will use localStorage.getItem(); to get this array of our stored notes, if no notes are found in the local storage, an empty array will be passed into the notes variable.

const notes = JSON.parse(localStorage.getItem("notes") || "[]");

Now, we create a function called showNotes(); that will our notes once we load our App, we are going to use a template string in this function to dynamically display the values of all the individual details of the notes on our app, use the code below and call the showNotes(); function immediately after the template string is added.

function showNotes() {
    document.querySelectorAll(".note").forEach(note => note.remove())
  notes.forEach((note, index) => {
    let liTag = `  <li class="note">
      <div class="details">
          <p>${note.title}</p>
          <span>${note.description}</span>
      </div>
      <div class="bottom-content">
          <span>${note.date}</span>
          <div class="settings">
            <i onclick="showMenu(this)" class="uil uil-ellipsis-h"></i>
            <ul class="menu">
                <li onclick="updateNote(${index}, '${note.title}', '${note.description}')"><i class="uil uil-pen"></i>Edit</li>
                <li onclick="deleteNote(${index})"><i class="uil uil-trash"></i>Delete</li>
            </ul>
        </div>
      </div>
     </li>`;
     addBox.insertAdjacentHTML("afterend", liTag)
  });
};
showNotes();

In the close button, we need to clear the inputs field when the popup is closed, this can be implemented by adding the code snippet below to the close button:

closeIcon.addEventListener("click", ()=>{
    titleTag.value = "";
    descTag.value = "";
});

Next, we implement the menu setting, this will enable us to edit or delete a note from the list, we can do this by creating a new function called showMenu(); this will show up once the menu icon is clicked. We will add the class list of the menu element called show also once the menu icon is clicked. And it will be removed whenever any part of the document is clicked.

function showMenu(elem){
   elem.parentElement.classList.add("show")
    document.addEventListener("click", e =>{
        if(e.target.tagName != "I" || e.target != elem){
            elem.parentElement.classList.remove("show")
        }
    });
}

Next we add delete function that will delete a note that we do not wish to have in our notes again, we create a deleteNote(); function. This function will delete the unwanted note, and update the note list in our storage by calling the showNotes(); function.

function deleteNote(noteId) {
    let confirmDel = confirm("Are you sure you want to delete this item?");
    if (!confirmDel) return;

    notes.splice(noteId, 1);
    localStorage.setItem("notes", JSON.stringify(notes));
    showNotes();
}

Going forward, we may wish to make changes to our notes, perhaps, we want to add some texts to the note or we want to remove some parts of the note, to do this, we create an onClick event listener on the javascript template string on the update button and a function named updateNote(); that will be called once the update button on the settings pane is clicked, create the function with the following code snippet and pass to it, the required parameters.

function updateNote(noteId, title, desc) {
    isUpdate = true;
    UpdateId = noteId;
    addBox.click();
    titleTag.value = title;
    descTag.value = desc;
    addBtn.innerText = "Update Note";
    popupTitle.innerText = "Update a Note";
}

And finally, we add a confirmation popup to our deleteNote(); function to make sure that we don’t delete our notes by error, add the following code snippet as a variable to the deleteNote(); function.

confirmDel = confirm("Are you sure you want to delete this item?");

After adding notes, our App looks as illustrated below:

Conclusion.

JavaScript is a powerful programming language that can be used to achieve a lot in technological advances, a Note-Taking App is one important tool that can aid human productivity and focus, in this tutorial, we have successfully built a fully functional Note-Taking App by implementing some JavaScript concepts such as DOM manipulation, event listeners and object-oriented programming.

Going further, you can add other functionalities to your app while improving your JavaScript skills.

How to build a countdown timer with JavaScript

Aliyu Adeniji — Thu, 23 Mar 2023 11:20:34 +0000

Introduction

Countdown timers web components or functions that are used in websites to create notifications of deadlines and events, they're are most commonly used in e-commerce and event management websites to create awareness and urgency about events that are set to occur in future dates. They're also used to motivate product users to take actions before the deadline of the events.

In this tutorial, we will learn how to create a simple countdown timer with Javascript, as usual, we will create a simple HTML project for our app, with some CSS styling to make our project appealing, and finally, we will add JavaScript to make our project functional. By the end of this tutorial, you will have a fully functional countdown timer that you can integrate into your next
launching event.

To get started, create a simple HTML document, with a code editor of your choice, and name it index.html, in the HTML document, create a digital time counter that will be modified using JavaScript in this tutorial similar to the following illustration.

Once our project is ready with some styling, we can start adding the functionalities.
Since we are dealing with dates in our project, it will be useful to create an array of months and weekdays that are going to be useful while building our countdown timer, let's go ahead and create two arrays; one for the months of the year and the other for days of the week as follows;

const months = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December",
];

const weekdays = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
];

The first step is to select the parts of our project that we are going to be changing dynamically using javascript in the following steps;
Select the h4 element with the class of launching which will serve as a header text that bares the launching date of our JavaScript and
const launching = document.querySelector(“.launching”);
Select the launch-container element that will display a launch message once the launch date has arrived.
const launch = document.querySelector(“.launch-container”);
Select the time container that can be used to select the h4 elements containing the times that are changing as the launch approaches, these h4 elements are nested in the div element with the class time container.
const items = document.querySelectorsAll(“.time-format”);

The next step is to set a variable called futureDate that will be our launch date and which we are going to work with in this tutorial, then pass a particular date into the variable in the order of year, month, day, time in hour, minutes, and seconds.

Let futureDate = new Date(2030, 5, 20, 9, 45, 0);
Then, we extract the values of the date we passed into our futureDate variable in order to be able to use them independently.

const year = futureDate.getFullYear();
let date = futureDate.getDate();
const year = futureDate.getFullYear();
const hour = futureDate.getHours();
const mins = futureDate.getMinutes();
const secs = futureDate.getSeconds();

We set the day and month into a reusable variable in order to select the month and day from our month and weekdays array above.

  let day = futureDate.getDay();
  day = weekdays[day];

  let month = futureDate.getMonth();
  month = months[month];

After extracting the details of our futureDate, we can set our launch date dynamically to a template string using the JavaScript textContent function with the following syntax:

launching.textContent = `Launching is on ${day} ${date} ${month} ${year} at ${hour}:${mins}am`;

The launch date will automatically be updated to our set future date as seen below.

Other variables that we will make use of are the future date in milliseconds and the present date in milliseconds, then, we get hold of the difference between both dates using the following syntax:
const remainingDate = futureDate-todayDate;
This syntax will return the difference in the dates in milliseconds, use consle.log to check this. Since our dates are now in milliseconds, we need to convert the milliseconds into days, hours, minutes, and seconds to be displayed on our counter. The conversion is done as illustrated below;

   1s = 1000ms
   1m = 60s
   1hr = 60m
   1d = 24hr
  // values in miliseconds
  const oneDay = 24 * 60 * 60 * 1000;
  const oneHour = 60 * 60 * 1000;
  const oneMinute = 60 * 1000;

calculate all the values and use Math.floor to convert the values into whole numbers.

let days = remainingDate / oneDay;
days = Math.floor(days);
let hours = Math.floor((remainingDate % oneDay) / oneHour);
let minutes = Math.floor((remainingDate % oneHour) / oneMinute);
let seconds = Math.floor((remainingDate % oneMinute) / 1000);

This difference will be used in a getRemainingTime function that will be called every second until the launch date has arrived, once the launch date has arrived, the function will be called and the launch message will be displayed on our project page.

The next step is to create a getRemainingTime Function for our countdown timer, this function will also be invoked immediately after the function’s body separately, to display the launch message once its launching time as shown below, also, in this function we need to set an array of values that will correspond to the days, hours, minutes and seconds in our countdown timer, this values array will be matched with our items variable holding the h4 elements that contain our timer container

 function getRemainingTime() {
            const todayDate = new Date()
            const remainingDate = futureDate - todayDate;
            let days = remainingDate / oneDay;

            days = Math.floor(days);

            let hours = Math.floor((remainingDate % oneDay) / oneHour);
            let minutes = Math.floor((remainingDate % oneHour) / oneMinute);
            let seconds = Math.floor((remainingDate % oneMinute) / 1000);
            const values = [days, hours, minutes, seconds];

            function format(item) {
                if (item < 10) {
                    return (item = `0${item}`)
                }
                return item
            }

            items.forEach(function (item, index) {
                item.innerHTML = format(values[index]);
            });

            if (remainingDate < 0) {
                clearInterval(countdown);
                launching.innerHTML = `<h4> Lauching has started</h4>`
            }
        }
        let countdown = setInterval(getRemainingTime, 1000);
        getRemainingTime()

Save this and your timer will be updated to the exact remaining time to your launch date.
Since we are building a countdown timer, we need to make sure that the time on our screen is automatically updated every second and we do this by setting a new variable called countdown, using the setInterval function just above the getRemainingTime().

let countdown = setInterval(getRemainingTime(), 1000);

In the getRemainingTime() function, we need to control the timer to display the launch message when the remainaingDate() is less than zero, we can do this using the following syntax inside the getRemainingTime() function:

If (remainaingDate<0){
  clearInterval(countdown);
  deadline.innerHTML = `<h4> Lauching has started</h4>`
  }

We use the clearInterval to stop the setInterval that is automatically updating our counter every second since our Launchdate has arrived.

Conclusion
Building a countdown timer with JavaScript is a useful and practical skill for any developer. With just a few lines of code, you can create a countdown timer that accurately counts down to a specific date and time, and can be customized to fit your needs. By following the steps outlined in this tutorial, you should have a countdown timer that you can incorporate into your next Launch, and be able to add more advanced features as needed.

How to generate random color hex codes with JavaScript

Aliyu Adeniji — Thu, 16 Mar 2023 10:24:55 +0000

What are color hex codes?

A color hex code is a way of representing RGB colors using a hexadecimal method that consists of Red, Green, and Blue colors in varying shades. Color Hex codes are used in web development and design to represent colors and give web projects beautiful looks.

The hexadecimal method of colors uses six alphanumerical characters to denote color codes, and these take the RGB values and represent colors with the code. The Hex code is described in a manner similar to #ff5783. In this, tutorial we will learn how to generate random Hex colors using HTML, a bit of CSS, and JavaScript.
To get started, create a simple HTML document, with a code editor of your choice, and name it index.html, in the HTML document, create a color box for the illustration, similar to the one shown below, and style it to a default color of black, the content of the box can be named anything, but for the sake of this tutorial, the content of our color box is a color box, add a span element to take in the hex code that we will use javaScript to modify later in this tutorial dynamically.
The next step is to create a button element that will be the event handler to modify our color hex codes once it is clicked on. You should have a box similar to the one shown below if all the steps are followed.

Next, we add our JavaScript code to dynamically modify our color box.
Follow the following steps to create the logic for the Hex code generator.

Create a new array of alphanumeric characters that will make up our hex codes as seen below.

const hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];

Create another variable to get hold of the button element that will handle the click event.

const btn = document.getElementById(“btn”);

Create the last variable that will change the text of the color box to the hex code that is dynamically generated in our code.

const color = document.querySelector(“.color”);

The next step is to add an event listener that will call the hex code generator function once the button is clicked, we will use a for loop to generate an hex code of six alphanumeric character when it is called, but before that, let us have a function that will generate random numbers from our array called hex.

function getRandomNumber() {
    return Math.floor(Math.random() * hex.length)
};

This function will be useful in our event listener.

Lets go ahead to create the event listener:

btn.addEventListener("click", function(){
});

This event listener will take an anonymous function that will use a for loop to generate our random hex code as follows:

function(){
  let hexColor= "#";
  for(let i=0; i<6; i++){
      hexColor += hex[getRandomNumber()]
  };

The next step is to change the textContent of to the value of our hex code whenever a hex code is generated as follows:
color.textContent = hexColor;
The last step is to set the color of our box to the randomly generated color hex code when the button is clicked on using the code below:
document.getElementById("box").style.backgroundColor= hexColor;
Putting it together, our event listener should look like the code block below:

btn.addEventListener("click", function () {
  let hexColor = "#";
  for (let i = 0; i < 6; i++) {
    hexColor += hex[getRandomNumber()];
  }
  color.textContent = hexColor;
  document.getElementById("box").style.backgroundColor = hexColor;
});

Anytime we click on the button element, the color of the box should change to the value of the generated color hex code as seen below where the color of our box is updated to the color hex code.

Conclusion.

JavaScript is a powerful tool that can be used to actualize anything you can think of as a developer, and this is the superpower of developers. You can use this color hex

How To Add a Live Chat Feature to an existing React Application

Aliyu Adeniji — Sat, 11 Mar 2023 20:46:17 +0000

Introduction.

What is chatwoot?

Chatwoot is an open source software built to interact and engage with Customers, serving as an alternative to Zendesk, Live-Chat and some other softwares. It's great for delivering a delightful Customer experience—and it also improves your support team's productivity & resilience! In addition, it provides real-time data and analytics, so you always know what to do next.

Chatwoot allows for quick and simple interactions with customers, which results in better service delivery. Customers find it simple to use because it is integrated into the website's interface and appears on the website whenever a customer logs in.

You can use the Chatwoot live-Chat feature in your business through various channels such as email, website live-chat, Twitter, Facebook, and many more.

Chatwoot also provides a well-synchronized dashboard that consolidates all of your conversations from various channels into a single dashboard from which you can seamlessly monitor your conversations.

What is React?

React is a declarative, effective, and adaptable JavaScript user interface library. It allows you to create complex user interfaces out of discrete, small chunks of code known as "components." There are several types of components in React. In this tutorial, we will integrate custom Chatwoot with our React Application.

Building your Application:

What is Code Sandbox?

CodeSandbox is a platform for quickly sharing and launching front-end JavaScript apps. That sounds similar to CodePen and JSFiddle, but CodeSandbox is a more focused project that provides full-stack support for JavaScript only. This demo app was created with Code Sandbox; you can fork the Sandbox to get your own copy of the app. You can also create your React app on your desktop and build from it. To do so, run npx create-react-app app-name, which will create the App and installs all the dependencies required for it to run. Once the App is successfully created, change the directory to this new App using cd and start the App using npm start.

Create a new account with ChatWoot.

Chatwoot Dashboard.

After you have created your account, this is how the dashboard will appear. You can then continue with further steps.

1). Create an inbox.

The next step is to create an inbox for your preferred channel; in this tutorial, we will use a website as our inbox channel.

2). Select “Website” as the channel to use.

To complete the configuration, choose the Website channel as shown below.

3). Add your Website details in the form provided below.

In order to successfully create your inbox, you must provide the name of your website and the domain name for it. You may also include optional details like the heading and tagline for your live chat.

4). Add an Agent to your inbox.

Add an agent to handle each inbox you create; the agents can come from different departments within the company; for instance, a financial officer can handle any customer complaints about finances, another can handle user experience, and so on. You can add yourself as an agent to each of your organization's inboxes in order to have access to all of it.

That's all; your inbox has been successfully created, and you’re good to go.

Importing the chatwoot component

To enable this live-chat feature on your React Application, create a file called chatwoot.js, import that file into App.js, and then add the chatwoot widget settings to your App as shown below. You can also customize the chatwoot widget as you see fit; check the chatwoot docs for more detailed information.

// Chatwoot.js
import React from "react";
class ChatwootWidget extends React.Component {
  componentDidMount() {
    window.chatwootSettings = {
      hideMessageBubble: false,
      position: "right", // This can be left or rightlocale: "en",
      // Language to be set
      type: "standard", // [standard, expanded_bubble]
    };
  }
  render() {
    return null;
  }
}
export default ChatwootWidget;

Chatwoot configuration

The next step in getting your live-chat feature up and running is to paste the channel code into the chatwoot.js file you created in your app's components folder, but make sure you don't include the <script> tags.

After completing all of these steps, your Chatwoot.js file (ChatwootWidget component) should resemble the code snippet below. Once you have successfully integrated that, a live chat popup should appear whenever a user logs onto your website.

// chatwoot.js
import React from "react";

class ChatwootWidget extends React.Component {
  componentDidMount() {
    window.chatwootSettings = {
      hideMessageBubble: false,
      position: "right", // This can be left or right
      locale: "en", // Language to be set
      type: "standard", // [standard, expanded_bubble]
    };
    (function (d, t) {
      var BASE_URL = "https://app.chatwoot.com";
      var g = d.createElement(t),
        s = d.getElementsByTagName(t)[0];
      g.src = BASE_URL + "/packs/js/sdk.js";
      g.defer = true;
      g.async = true;
      s.parentNode.insertBefore(g, s);
      g.onload = function () {
        window.chatwootSDK.run({
          websiteToken: "vf2UF4Khej3JZDeJYYQeELEo",
          baseUrl: BASE_URL,
        });
      };
    })(document, "script");
  }

  render() {
    return null;
  }
}

export default ChatwootWidget;

By visiting your site, you can now test your live chat feature, which will appear as shown below.

Conclusion.

Chatwoot was built with several distinctive features primarily aimed at making the developer's job easier while also giving customer support representatives and users a better experience. In this tutorial, we have learned about Chatwoot and how important it is for companies to use a live-chat solution on their Website. We've also learned how to integrate Chatwoot into our React Application from absolute scratch.