Forem: Busayo Samuel

Media-Powered Blog Creator, Content Analyzer and Translation App

Busayo Samuel — Sat, 23 Nov 2024 20:30:15 +0000

This is a submission for the AssemblyAI Challenge : Sophisticated Speech-to-Text.

What I Built

I built AudioWhisperer, a web application that include 5 tools to provide speech-to-text functionalities for everyday use:

Blog Tutorial Generator: Transforms audio transcripts into markdown-formatted tutorial articles using Lemur LLM. The front-end displays both the rendered and raw Markdown formats.
Fluency Analyzer: According to several research papers, a way to improve fluency and build the ability to make impromptu speeches is to practice talking about a random topic for 1–3 minutes.
This tool builds up on this theory. It generates 5 random topics, then it allows users to record or upload 1-minute audio samples, and uses Lemur LLM to analyze user's fluency, and it returns an analysis of the transcript, with pain points and suggestions for improvement.
Content Moderation Tool: Uses AssemblyAI's content moderation parameter to identify potentially harmful or sensitive words. The front-end visualizes the data through a bar chart and a table.
Transcript Translation: Provides multilingual transcript translation capabilities.
Subtitle Generation: Allows users to generate, download, and create subtitle files in multiple languages.

Demo

Web link
Server code
Client code

Rendered Blog Page

Markdown Blog page

Content Analyzer Data Page

Subtitle Generator

Translation Generator

Topics Generator

Fluency Analysis

Journey

Assembly AI model's allowed me to create a user-friendly application, where I got to use the audio-to-text feature across all the 5 tools I worked on. In my code, I set the content moderation parameter to true (content_safety: true) to detect and list out sensitive content in media files. I added disfluency tracking by setting disfluencies: true. I also included the language_detection: true parameter, which helped to detect the original language of audio files. This was needed for me to efficiently translate the transcript to other languages.
For generating blog content and analyzing transcript fluency, I used Lemur AI.

My use of Lemur LLM for the blog content generator and fluency analysis qualifies my submission for the "No More Monkey Business" prompt.

Smart Bookmark Manager

Busayo Samuel — Sun, 10 Nov 2024 06:51:31 +0000

This is a submission for the Open Source AI Challenge with pgai and Ollama

What I Built

I built an intelligent bookmark management system for organizing URLs. The app uses a Chrome extension to save bookmarks into a web application.

Features include:

Tags are automatically generated for bookmarks using pgai similarity analysis
Using embeddings generated by Ollama's all-minilm model, searching is more intuitive
Bookmarks can be further saved into collections
Users can share bookmarks secure tokens

Demo

Project link
Code link

Tools Used

pgvector

To store and index embeddings generated from bookmark content
To enable semantic search functionality by finding similar bookmarks based on content meaning

pgai

Used similarity functions to generate relevant tags
Enhanced searching through AI-powered content understanding

Technology Stack

Frontend: React.js
Backend: Node.js, Express
Database: TimescaleDB PostgreSQL
AI Services: Ollama for embedding generation
Authentication: Auth0

Final Thoughts

The most challenging but rewarding aspect was working on the automatic tagging system using pgai's similarity functions. Ideally, my demo should include a link to my Chrome extension, but due to time constraints, I am still in the process of submitting the extension for review.

Prize Categories

This submission qualifies for:

Vectorizer Vibe
Open-source Models from Ollama

Building a Web 3.0 E-commerce App with Hardhat and React.js

Busayo Samuel — Sun, 18 Aug 2024 15:42:32 +0000

Introduction

The first e-commerce platform was created in 1982 by the Boston Computer Exchange (BCE). It wasn't until 13 years later that now-household names like eBay and Amazon came into the picture. When the idea of e-commerce was first introduced, it was met with a lot of skepticism. I understand—I’d be skeptical too if I were asked to trust an invisible company with not only my money but to deliver perfectly fitting shoes. The success we see in e-commerce today is largely due to the tireless efforts of companies that prioritized building trust among their users.

As the web continues to evolve, e-commerce solutions have also had to evolve with it. In a few years, we might see more companies move from using Web 2.0 to adopting Web 3.0 or even Web 5.0. At its core, Web 3.0's selling point is the ability to create an era of trustless transactions where smart contracts are the guarantors of trust. This begs the question, well actually two questions:

Can transactions in a Web 3.0 e-commerce platform truly remain decentralized?
Could a successful Web 3.0 e-commerce store drive higher adoption of Web 3.0 technologies and enhance user trust?

Let’s unpack these questions.

Can transactions in a Web 3.0 e-commerce platform truly remain decentralized?

In theory, a Web 3.0 e-commerce platform could maintain a certain degree of decentralization by automating many aspects of the transactions.

A decentralized storage solution can be used for product information and data. The best option to ensure the safety of user data is through the use of Web 5.0. To learn more about Web 5.0, you can read this article.

Basically, it can be challenging to build a completely decentralized e-commerce platform, but it is not impossible. Some level of centralization might be necessary for reasons like dispute resolution, product quality control, and shipping logistics.

Could a successful Web 3.0 e-commerce store drive higher adoption of Web 3.0 technologies and enhance user trust?

I have no doubt that a successful Web 3.0 e-commerce store will contribute to wider adoption. Here's how:

An e-commerce platform will provide a everyday use case for cryptocurrency technologies.
If a Web 3.0 platform can provide seamless transactions, it would help address skepticism surrounding Web 3.0 and make users more comfortable with making payments through it.
The inherent transparency of blockchain allows users to verify their transactions, so dispute resolution will be much easier.

Knowing all these, it is clear that building more fast and seamless Web 3.0 ecommerce platforms is just what we need for a wider adoption of blockchain technologies.

In this article, you will be provided with the practical knowledge to start building your own Web 3.0 e-commerce application using Solidity, Hardhat, and React.js. Let's get started.

Prerequisites

Before jumping into this tutorial, make sure you have the following:

A basic understanding of Solidity and JavaScript.
Node.js and npm installed on your system.
MetaMask installed in your browser.
A code editor or IDE like VSCode

Setting Up the Development Environment

In your terminal or file directory create a folder called Ethcommerce, and open it in your code editor.

mkdir Ethcommerce
cd Ethcommerce
code .

Setting up a React project

In your project folder, enter the following commands to install React globally and create a new React project inside the root directory:

npm install --global create-react-app

npx create-react-app@latest ./

Setting up Hardhat

Hardhat is an environment that developers use to test, compile, deploy, and debug dApps. Hardhat provides a local Ethereum network designed for development. You can easily deploy your contracts, run tests, and debug Solidity code without dealing with live environments.

In the root of your project, install Hardhat and related dev dependencies:

npm install --save-dev hardhat @nomicfoundation/hardhat-chai-matchers

Then, initialize a new hardhat project. The command below will create starter files for your project:

npx hardhat init

After you run the command above, a menu option list will appear to configure your preferences. Since you already have a .gitignore file, choose “no”, when prompted to create one. For the other options, accept the default settings.

Smart contract development

In the root of your project, navigate to the contracts directory and create a solidity file named Ethcommerce.sol. Then, add the following code to create a new smart contract.

// SPDX-License-Identifier: UNLICENSED
pragma solidity ^0.8.9;


contract Ethcommerce {}

Inside your contract, declare an address variable to represent the owner of the project. In the constructor, assign the value of msg.sender to this owner variable.

 address public owner;
    constructor() {
        owner = msg.sender;
    }

Create a struct called Item in your contract. This struct will define all the properties for each individual store product.

    struct Item {
        uint256 id;
        string name;
        string category;
        string image;
        uint256 cost;
        uint256 rating;
        uint256 stock;
    }

Then create a modifier called onlyOwner. This modifier will ensure that only the owner of the smart contract can list an item in the store.

    modifier onlyOwner() {
        require(msg.sender == owner);
        _;
    }

Listing Products

In a traditional e-commerce application, the seller or admin has permission to list products in the store. The list function in this application serves precisely that purpose.

Before you create the list function, you need to create a mapping and an event. The items mapping will store the products in the smart contract. The List event is emitted once a product has been successfully listed.

mapping(uint256 => Item) public items;
event List(string name, uint256 cost, uint256 quantity);

    function list(
        uint256 _id,
        string memory _name,
        string memory _category,
        string memory _image,
        uint256 _cost,
        uint256 _rating,
        uint256 _stock
    ) public onlyOwner {
        // Create Item
        Item memory item = Item(
            _id,
            _name,
            _category,
            _image,
            _cost,
            _rating,
            _stock
        );


        // Add Item to mapping
        items[_id] = item;


        // Emit event
        emit List(_name, _cost, _stock);
    }

The function above takes in the properties of the struct Item, and these properties are used to create a new product item, which is added to the mapping of items.

Adding tests

Writing tests is an important step when developing smart contract code. Even a small error in the logic can result in your wallet being drained. Since a smart contract becomes immutable once deployed, developers need to write comprehensive tests that cover all aspects of the logic.

Hardhat allows us to use Mocha and Chai to write tests in Javascript. To get started, navigate to the tests folder and create a new file called ethcommerce.js.
Add the code below to your test file:

const { expect } = require("chai")
const {ethers}=require("hardhat")
require("@nomicfoundation/hardhat-chai-matchers")


const tokens = (n) => {
  return ethers.parseUnits(n.toString(), 'ether')
}


// Global constants for listing an item...
const ID = 1
const NAME = "Shoes"
const CATEGORY = "Clothing"
const IMAGE = "https://ipfs.io/ipfs/QmTYEboq8raiBs7GTUg2yLXB3PMz6HuBNgNfSZBx5Msztg/shoes.jpg"
const COST = tokens(1)
const RATING = 4
const STOCK = 5

The tokens function in the code above uses the parseUnits method to convert the ether value passed into the function to wei (the smallest unit in Ethereum).

Add the code below to create a new test suite called Ethcommerce.

describe("Ethcommerce", () => {
    let ethcommerce
    let deployer, buyer

    beforeEach(async () => {
      // Setup accounts
      [deployer, buyer] = await ethers.getSigners()

      // Deploy contract
      const Ethcommerce= await ethers.getContractFactory("Ethcommerce")
      ethcommerce = await  Ethcommerce.deploy()
    })

     //rest of the test
})

The Ethcommerce test suite declares three variables: ethcommerce (representing an instance of the smart contract), and deployer and buyer (representing Ethereum account signers).

The beforeEach function runs before each test in the suite. So, before each test, a new instance of the Ethcommerce contract is created and then deployed.

The code below creates tests to check the contract's deployment behaviour. The first test expects that the owner’s address matches the deployer’s address, which is the first address in the list returned from ethers.getSigners() .

The next tests check the listing behaviour. It ensures that each item property is correctly assigned and that the right event is emitted at the end of the listing.

  describe("Deployment", () => {
        it("Sets the owner", async () => {
          expect(await ethcommerce.owner()).to.equal(deployer.address)
        })
      })


      describe("Listing", () => {
        let transaction

        beforeEach(async () => {
          // List a item
          transaction = await ethcommerce.connect(deployer).list(ID, NAME, CATEGORY, IMAGE, COST, RATING, STOCK)
          await transaction.wait()
        })

        it("Returns item attributes", async () => {
          const item = await ethcommerce.items(ID)

          expect(item.id).to.equal(ID)
          expect(item.name).to.equal(NAME)
          expect(item.category).to.equal(CATEGORY)
          expect(item.image).to.equal(IMAGE)
         expect(item.cost).to.equal(COST)
          expect(item.rating).to.equal(RATING)
          expect(item.stock).to.equal(STOCK)
        })

        it("Emits List event", () => {
          expect(transaction).to.emit(ethcommerce, "List")
        })
      })

Buying Products

In this section, you will create a function in your contract that allows users to buy products listed in the contract. Let’s get into it.

Add the code below to create three variables:

Order: A struct for orders
orderCount: A mapping that keeps track of all orders
orders: Another mapping to store all the orders.

The mapping, orders is a nested mapping. It uses the address of the user placing an order as the key, and the corresponding value is a mapping of all the orders made by that user.

 mapping(address => mapping(uint256 => Order)) public orders;
 mapping(address => uint256) public orderCount;

 struct Order {
        uint256 time;
        Item item;
  }

Add a Buy event in your contract. This event will be emitted every time a user buys a product.

 event Buy(address buyer, uint256 orderId, uint256 itemId);

Add the buy function just after the list function:

  function buy(uint256 _id) public payable {
        // Fetch item
        Item memory item = items[_id];


        // Require enough ether to buy item
        require(msg.value >= item.cost);


        // Require item is in stock
        require(item.stock > 0);


        // Create order
        Order memory order = Order(block.timestamp, item);


        // Add order for user
        orderCount[msg.sender]++; // <-- Order ID
        orders[msg.sender][orderCount[msg.sender]] = order;


        // Subtract stock
        items[_id].stock = item.stock - 1;


        // Emit event
        emit Buy(msg.sender, orderCount[msg.sender], item.id);
    }

The buy function takes in the _id of the product. This _id is used to fetch the product from the mapping of items.

If the msg.value sent along with the buy request is greater or equal to the cost of the item and the item is still in stock, a new order will be created with the timestamp and the item.

The orderCount, item’s stock (item.stock) and items mapping variables will then be updated with the appropriate values.

Finally, a Buy event will be emitted to indicate a successful purchase.

Writing tests for the `buy` function

The test suite for the buy function will be checking 4 scenarios:

Order Count Update: This test case checks whether the buyer’s order count increases by 1 after making a purchase.
Order Details: It checks that the order details (such as timestamp and item name) are correctly stored in the contract after the purchase.
Contract Balance Update: This test case confirms that the contract’s balance (in Ether) is updated by the cost of the purchased item.
Event Emission: Finally, the last test case checks whether the contract emits a ‘Buy’ event during the purchase.

Go to your test file and add the code below:

describe('Buying', () => {
    let transaction;

    beforeEach(async () => {
      // List a item
      transaction = await ethcommerce
        .connect(deployer)
        .list(ID, NAME, CATEGORY, IMAGE, COST, RATING, STOCK);
      await transaction.wait();


      // Buy a item
      transaction = await ethcommerce.connect(buyer).buy(ID, { value: COST });
      await transaction.wait();
    });

    it("Updates buyer's order count", async () => {
      const result = await ethcommerce.orderCount(buyer.address);
      expect(result).to.equal(1);
    });

    it('Adds the order', async () => {
      const order = await ethcommerce.orders(buyer.address, 1);


      expect(order.time).to.be.greaterThan(0);
      expect(order.item.name).to.equal(NAME);
    });


    it('Updates the contract balance', async () => {
      const result = await ethers.provider.getBalance(ethcommerce.getAddress());
      expect(result).to.equal(COST);
    });


    it('Emits Buy event', () => {
      expect(transaction).to.emit(ethcommerce, 'Buy');
    });
  });

Withdrawing

Navigate back to Ethcommerce.sol and add a withdraw function. This function sends the balance of the contract to the owner.


    function withdraw() public onlyOwner {
        (bool success, ) = owner.call{value: address(this).balance}("");
        require(success);
    }

Writing tests for withdrawing

Copy the code below into your test files to check for withdrawal behaviour.

These tests ensure that only the owner of the contract can withdraw and that the contract balance and owner balance are correctly updated when a withdrawal is triggered.

     describe("Withdrawing", () => {
    let balanceBefore

    beforeEach(async () => {
      // List a item
      let transaction = await ethcommerce.connect(deployer).list(ID, NAME, CATEGORY, IMAGE, COST, RATING, STOCK)
      await transaction.wait()

      // Buy a item
      transaction = await ethcommerce.connect(buyer).buy(ID, { value: COST })
      await transaction.wait()

      // Get Deployer balance before
      balanceBefore = await ethers.provider.getBalance(deployer.address)

      // Withdraw
      transaction = await ethcommerce.connect(deployer).withdraw()
      await transaction.wait()
    })

    it('Updates the owner balance', async () => {
      const balanceAfter = await ethers.provider.getBalance(deployer.address)
      expect(balanceAfter).to.be.greaterThan(balanceBefore)
    })

    it('Updates the contract balance', async () => {
      const result = await ethers.provider.getBalance(ethcommerce.getAddress())
      expect(result).to.equal(0)
    })
  })

Enter the command below in your terminal to run your tests:

npx hardhat test

To start the hardhat node, copy the command below:

npx hardhat node

Deploying the contract

Usually, in an e-commerce application, the listing of products is usually done in a dashboard. However, for the purpose of this tutorial, you will be seeding the list of product items from a JSON file.

You can copy the JSON file from my GitHub repository.

In the src directory, create an items.json file and paste the copied content into this file.

Hardhat allows users to create a script file containing deployment instructions. For this project you will create a deploy.js script file. In this file, the products listed in items.json will be seeded into the contract after deployment.

In the root of your project, create a scripts folder, then create a file called deploy.js. In this file, add the following code:

const hre = require("hardhat")

const { items } = require("../src/items.json")

const tokens = (n) => {
  return ethers.parseUnits(n.toString(), 'ether')
}

async function main() {
  // Setup accounts
  const [deployer] = await ethers.getSigners()

  // Deploy Ethcommerce
  const Ethcommerce = await hre.ethers.getContractFactory("Ethcommerce")
  const ethcommerce = await Ethcommerce.deploy()
  await ethcommerce.waitForDeployment()
  const address= await ethcommerce.getAddress()
  console.log(`Deployed Ethcommerce Contract at: ${address}\n`)

  // Listing items...
  for (let i = 0; i < items.length; i++) {
    const transaction = await ethcommerce.connect(deployer).list(
      items[i].id,
      items[i].name,
      items[i].category,
      items[i].image,
      tokens(items[i].price),
      items[i].rating,
      items[i].stock,
    )

    await transaction.wait()

    console.log(`Listed item ${items[i].id}: ${items[i].name}`)
  }
}

// We recommend this pattern to be able to use async/await everywhere
// and properly handle errors.
main().catch((error) => {
  console.error(error);
  process.exitCode = 1;
});

The script above begins by deploying Ethcommerce. Once the contract has been successfully deployed, we proceed to loop through the items from the JSON file. Using the list function, each product item is seeded into the contract.

Run the script with the command:

npx hardhat run ./scripts/deploy.js --network localhost

Make sure your hardhat node is running in another terminal when you run this command.

This will initiate the deployment process for your contract on the local network.

If you check your console, you should see a message that prints out your contract address.

Proceed to navigate to your src folder and create a config.json file. Add the following to the json file:

{
    "31337": {
        "ethcommerce": {
            "address": "*********************”
        }
    }
}

Replace the address's placeholder text (****) with the contract address printed in your console.

Connecting to the front-end

Since this tutorial is focused on smart contracts, I won’t be dwelling much on the styling. You can find the stylesheet for index.css on Github.

Adding the abi (Application Binary Interface) file

When we create a smart contract using languages like Solidity, it compiles into bytecode, which is a low-level, machine-readable format. It’s hard for web applications or even other smart contracts to interact with the bytecode. The ABI serves as a bridge that enables communication between off-chain applications and on-chain smart contracts.

To add the ABI file to your front-end, navigate to artifacts/contracts/Ethcommerce.sol/Ethcommerce.json. This path is where the ABI is stored in your project. Inside the ABI file, locate the array with the key abi and copy it.

In the src directory, create another directory called abis. Inside the abis directory, create an Ethcommerce.json file. Paste the abi array into your newly created JSON file.

Adding Hardhat to Metamask

If you are working with hardhat for the first time, you need to add it as a network to your metamask in order to use the test accounts provided out of the box.

To get started, open your Metamask browser extension and click on Settings. In the list of settings, click on Networks, then click on the Add Network Button at the bottom of the popup to navigate to the networks page. Scroll to the bottom of the page and click on the Add Network Manually text to reveal a form. In the input field for Network name, type "Hardhat".

To get the RPC URL, run this command in your terminal:

npx hardhat node

This command should print out hardhat’s RPC URL, 10 test account addresses and their private keys.

Enter the RPC URL in the provided input field, then use "31337" as the chain ID and finally, add "ETH" as the currency symbol.

Adding Hardhat's test accounts

Click on your account address at the top of Metamask’s extension pop- up.
Next, click on the + Add Account or hardware wallet button.
Select Import Account from the list of options that comes up.
Return to your terminal and copy the private key of the first account from the list of test accounts.
Paste the private key into the provided input field.
Click the import button.

Your new account should now appear in your wallet, funded with a certain amount of ETH.
Repeat the process for 2 to 3 accounts. This gives you the option to switch between accounts and test your application.

Loading products from the smart contract

You’ll be using the abi file, Ethcommerce.json and the config.json file to load the product list into the state in React.

Copy the code below into your App.js file:

import { useEffect, useState } from 'react';
import { ethers } from 'ethers';

// ABIs
import Ethcommerce from './abis/Ethcommerce.json';


// Config
import config from './config.json';


function App() {
  const [provider, setProvider] = useState(null);
  const [ethcommerce, setEthcommerce] = useState(null);

  const [electronics, setElectronics] = useState(null);
  const [clothing, setClothing] = useState(null);
  const [toys, setToys] = useState(null);
  const [account, setAccount] = useState(null);

  const loadBlockchainData = async () => {
    const provider = new ethers.BrowserProvider(window.ethereum);
    setProvider(provider);
    const network = await provider.getNetwork();

    const loadedEthcommerce = new ethers.Contract(
      config[network.chainId].ethcommerce.address,
      Ethcommerce,
      provider
    );
    console.log(await loadedEthcommerce.items(1));
    setEthcommerce(loadedEthcommerce);

    const items = [];

    for (var i = 0; i < 9; i++) {
      const item = await ethcommerce.items(i + 1);
      items.push(item);
    }
    console.log(items, loadedEthcommerce, 'hi');
    const electronics = items.filter((item) => item.category === 'electronics');
    const clothing = items.filter((item) => item.category === 'clothing');
    const toys = items.filter((item) => item.category === 'toys');

    setElectronics(electronics);
    setClothing(clothing);
    setToys(toys);
  };

  useEffect(() => {
    loadBlockchainData();
  }, []);

  return (
    <div>
      <h2>Ethcommerce Best Sellers</h2>
    </div>
  );
}

export default App;

The loadBlockchainData function initializes an Ethereum provider using the BrowserProvider method. It then loads the Ethcommerce smart contract using the contract address in the config.json file and the abi file. The function goes on to fetch item data, and filter them into 3 categories.

Connecting Metamask to the front-end

In this section, you will create the Navigation component. This component will include a button that enables users to connect their wallet to the application. Let's get into it.

In the src directory, create a folder and name it components. Inside the components folder, create a Navigation.js file.

Copy the code below into the file:

import { ethers } from 'ethers';


const Navigation = ({ account, setAccount }) => {
  const connectHandler = async () => {
    try {
      const accounts = await window.ethereum.request({
        method: 'eth_requestAccounts'
      });
      const account = ethers.getAddress(accounts[0]);
      setAccount(account);

    } catch (error) {
      if (error.code === 4001) {
        console.error('User denied connection.');
      }
    }
  };

  return (
    <nav>
      <div className='nav__brand'>
        <h1>Ethcommerce</h1>
      </div>

      <input type='text' className='nav__search' />

      {account ? (
        <button type='button' className='nav__connect'>
          {account.slice(0, 6) + '...' + account.slice(38, 42)}
        </button>
      ) : (
        <button type='button' className='nav__connect' onClick={connectHandler}>
          Connect
        </button>
      )}

      <ul className='nav__links'>
        <li>
          <a href='#Clothing & Jewelry'>Clothing & Jewelry</a>
        </li>
        <li>
          <a href='#Electronics & Gadgets'>Electronics & Gadgets</a>
        </li>
        <li>
          <a href='#Toys & Gaming'>Toys & Gaming</a>
        </li>
      </ul>
    </nav>
  );
};

export default Navigation;

The connectHandler function will attempt to connect to the user’s Ethereum wallet by requesting account access.

If successful, it retrieves the first account from the returned accounts array, converts it to an Ethereum address using ethers.getAddress(accounts[0]), and sets it as the account state variable.

If an account has already been created, a button showing part of the user's address will be displayed. If not, the connect button is displayed.

Add the Navigation component to App.js. Add the code below between the div wrappers:

      <Navigation account={account} setAccount={setAccount} />
      <h2>Dappazon Best Sellers</h2>

Then import the Navigation component at the top of your code:

// Components
import Navigation from './components/Navigation'

Check your page in the browser, and it should look like the image below:

Listing products

In your components directory, create a Section.js file and add the code below into the file:

import { ethers } from 'ethers'
const Section = ({ title, items, togglePop }) => {
    return (
        <div className='cards__section'>
            <h3 id={title}>{title}</h3>
            <hr />
            <div className='cards'>
                {items.map((item, index) => (
                    <div className='card' key={index} onClick={() => 
                     togglePop(item)}>
                        <div className='card__image'>
                            <img src={item.image} alt="Item" />
                        </div>
                        <div className='card__info'>
                            <h4>{item.name}</h4>                            <p>{ether.formatUnits(item.cost.toString(), 'ether')} ETH</p>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
}

export default Section;

This file will display the list of products for each product category. Copy the code below into App.js:

import Section from './components/Section'

This should go right after the h2 tag.

      {electronics && clothing && toys && (
        <>
          <Section title={"Clothing & Jewelry"} items={clothing} togglePop={togglePop} />
          <Section title={"Electronics & Gadgets"} items={electronics} togglePop={togglePop} />
          <Section title={"Toys & Gaming"} items={toys} togglePop={togglePop} />
        </>
      )}

The code above checks to see if all 3 categories have been successfully fetched from the smart contract, before displaying the sections.

Your page should look like this:

Create a toggleProp function to toggle the visibility of a specific product when clicked. So, when a product card is clicked, the product object is saved into the item state and then displayed as a modal on the page.

 const [toggle, setToggle] = useState(false)
 const [item, setItem] = useState({})

  const togglePop = (item) => {
    setItem(item)
    toggle ? setToggle(false) : setToggle(true)
  }

Creating products modal

In your components folder, create a Product.js file. Copy the code below into the file:

import { useEffect, useState } from 'react'
import { ethers } from 'ethers'

import close from '../assets/close.svg'

const Product = ({ item, provider, account, ethcommerce, togglePop }) => {
  const [order, setOrder] = useState(null)
  const [hasBought, setHasBought] = useState(false)

  const fetchDetails = async () => {
    const events = await ethcommerce.queryFilter("Buy")
    const orders = events.filter(
      (event) => event.args.buyer === account && event.args.itemId.toString() === item.id.toString()
    )

    if (orders.length === 0) return

    const order = await ethcommerce.orders(account, orders[0].args.orderId)
    setOrder(order)
  }

  return (
    <div className="product">

    </div >
  );
}

export default Product;

This component takes in a few props including item, which is an object that has the product details.

In the fetchDetails function, the item.id is used to check if the user has bought the product before, so the order details can be saved in the state.

Using useEffect, fetchDetails is immediately called after the component mounts.

  useEffect(() => {
    fetchDetails()
  }, [hasBought])

close.svg is currently not in the project. Go to github to download the file, and then add it to src/assets.

Next, you’re going to create a buyHandler function. This function will access the smart contract and pass the product’s id and cost to the smart contract's buy function.

 const buyHandler = async () => {
    const signer = await provider.getSigner()

    // Buy item...
    let transaction = await ethcommerce.connect(signer).buy(item.id, { value: item.cost })
    await transaction.wait()

    setHasBought(true)
  }

To display the product details add the code below between the div wrapper:

 <div className='product__details'>
        <div className='product__image'>
          <img src={item.image} alt='Product' />
        </div>
        <div className='product__overview'>
          <h1>{item.name}</h1>
          <hr />
          <p>{item.address}</p>

          <h2>{ethers.formatUnits(item.cost.toString(), 'ether')} ETH</h2>
          <hr />
          <h2>Overview</h2>
          <p>
            {item.description}
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima rem,
            iusto, consectetur inventore quod soluta quos qui assumenda aperiam,
            eveniet doloribus commodi error modi eaque! Iure repudiandae
            temporibus ex? Optio!
          </p>
        </div>
      </div>

Just underneath the product__overview div, add the code to display the order details and the button to trigger the buyHandler.

   <div className="product__order">
          <h1>{ethers.formatUnits(item.cost.toString(), 'ether')} ETH</h1>
          <p>
            FREE delivery <br />
            <strong>
              {new Date(Date.now() + 345600000).toLocaleDateString(undefined, { weekday: 'long', month: 'long', day: 'numeric' })}
            </strong>
          </p>
          {item.stock > 0 ? (
            <p>In Stock.</p>
          ) : (
            <p>Out of Stock.</p>
          )}
          <button className='product__buy' onClick={buyHandler}>
            Buy Now
          </button>
          <p><small>Ships from</small> Ethcommerce</p>
          <p><small>Sold by</small> Ethcommerce</p>
          {order && (
            <div className='product__bought'>
              Item bought on <br />
              <strong>
                {new Date(Number(order.time.toString() + '000')).toLocaleDateString(
                  undefined,
                  {
                    weekday: 'long',
                    hour: 'numeric',
                    minute: 'numeric',
                    second: 'numeric'
                  })}
              </strong>
            </div>
          )}
        </div>
        <button onClick={togglePop} className="product__close">
          <img src={close} alt="Close" />
        </button>

Navigate to App.js and add Product to the jsx.

import Product from './components/Product'

The toggle state determines the visibility of the Product modal, so when a product card is clicked, the toggle is set to true.

      {toggle && (
        <Product item={item} provider={provider} account={account} ethcommerce={ethcommerce} togglePop={togglePop} />
      )}

And with that, we have come to the end of this tutorial.

Conclusion

Whew! That was quite a ride. In this tutorial, we explored the true meaning of decentralization for a Web3 e-commerce application and emphasized the importance of building a seamless and fast platform to promote global Web3 adoption. We walked through using Hardhat and React.js to create an application with basic e-commerce functionality. You now have an overview of what it takes to build e-commerce solutions using Web3 technology. However, there's still more ground to cover, including adding email notifications, chat support, and logistics to this application. Feel free to experiment and incorporate these features into the platform. Have fun!

Case Studies: Web3 Integration in Traditional Web Development Projects

Busayo Samuel — Thu, 25 May 2023 21:54:30 +0000

The internet is rapidly evolving with advancements in technology, giving rise to Web3, a next-generation web concept. Web3 promotes user empowerment, control, and ownership in the digital realm through principles such as decentralization, peer-to-peer networks, cryptography, and blockchain. This opens up new opportunities for web development, including dApps, DeFi, NFTs, DID, and smart contracts.

However, integrating Web3 technologies into traditional web projects is a complex task. It requires developers to shift their mindset and approach to application development. Understanding the benefits, challenges, and potential of Web3 technologies is essential, as they can enhance or replace existing web solutions.

This article explores case studies that showcase successful integration of Web3 technologies in traditional web projects. By analyzing the integration methods, outcomes, and best practices from these projects, developers can gain insights and inspiration for incorporating Web3 technologies in their own endeavors.

Integration of Decentralized Finance (DeFi) into Traditional Web Development

Decentralized finance (DeFi) has emerged as a groundbreaking application of Web3 technologies, offering a range of financial services on blockchain platforms. These services include lending, borrowing, trading, investing, and insurance. DeFi's core objective is to provide accessible, transparent, and efficient financial solutions to users, eliminating intermediaries and centralized authorities.

An illustrative example of integrating DeFi protocols into a traditional web development project is MakerDAO. MakerDAO facilitates the creation and management of a stablecoin named DAI, which is pegged to the US dollar. Users generate DAI by collateralizing assets like ETH or other tokens within smart contracts called Vaults. Additionally, users can borrow DAI from peers, with interest rates determined by supply and demand. DAI finds utility in diverse scenarios, such as payments, savings, or trading.

MakerDAO's DeFi functionality harnesses various Web3 technologies. Firstly, it utilizes Ethereum as its underlying blockchain platform, ensuring smart contract security, scalability, and interoperability. Secondly, it leverages IPFS (InterPlanetary File System) as a decentralized storage system, enabling file storage and access without reliance on centralized servers. Lastly, it integrates MetaMask, a web3 browser extension, empowering users to interact with Ethereum dApps, manage accounts, and conduct transactions seamlessly.

Integrating DeFi protocols into MakerDAO yields significant benefits for users and developers alike. Users gain access to a stable and decentralized alternative to fiat currencies, safeguarded against inflation, censorship, or manipulation. Furthermore, it grants users broader financial opportunities and freedom, unhindered by intermediaries or barriers. For developers, this integration encourages a modular and composable web development approach, facilitating the utilization of existing DeFi protocols while constructing new ones atop them.

Several lessons learned and best practices have emerged from integrating DeFi protocols into traditional web development projects:

Balancing decentralization and usability: Understand the trade-offs between decentralization, which enhances security and transparency, and usability, which impacts user experience. Strive to strike a balance by designing intuitive interfaces and workflows for DeFi applications.
Leveraging existing tools and frameworks: Simplify the integration process by utilizing established tools and frameworks tailored for Web3 development. Truffle, Hardhat, and Remix, among others, facilitate the creation and deployment of smart contracts. Likewise, web3 libraries and APIs like Web3.js or Ethers.js facilitate seamless communication between web applications and blockchain platforms.
Rigorous testing and smart contract auditing: Given the immutability of smart contracts once deployed on the blockchain, comprehensive testing and auditing are imperative. Prioritize thorough testing using tools such as Ganache or MythX to identify and address any bugs or vulnerabilities before deploying smart contracts on the mainnet.

By embracing these insights and adhering to best practices, developers can seamlessly integrate DeFi protocols into traditional web development projects, unlocking the transformative potential of decentralized finance.

Implementation of Non-Fungible Tokens (NFTs)

Non-fungible tokens (NFTs) represent a compelling application of Web3 technologies, offering unique and indivisible digital assets that denote ownership and provenance across various content categories. These include art, music, games, and collectibles. NFTs are created and traded on blockchain platforms like Ethereum or Polygon, employing smart contracts and standards such as ERC-721 or ERC-1155.

OpenSea serves as an exemplary instance of a traditional web development project incorporating NFT functionality. OpenSea enables users to create, explore, and trade NFTs across diverse categories and blockchain networks. Users can browse and purchase NFTs from fellow users, while also leveraging OpenSea's tools to build their own NFT collections. Furthermore, users have the ability to participate in auctions, offer bundled NFTs, and create personalized storefronts.

OpenSea seamlessly integrates several Web3 technologies to facilitate its NFT functionality. Firstly, Ethereum serves as the principal blockchain platform, ensuring secure NFT smart contract deployment and interoperability. Secondly, Polygon is utilized as a sidechain solution, providing faster and more cost-effective transactions within the NFT marketplace. Lastly, WalletConnect acts as the web3 wallet integration, enabling users to connect their mobile wallets to OpenSea's web application.

The integration of NFT functionality within OpenSea yields numerous benefits and outcomes for both users and developers. Users gain an avenue for expressing their creativity and identity through digital assets, alongside new opportunities for income generation and value creation. Additionally, users benefit from increased diversity and choice, accessing NFTs spanning various categories and networks. Developers benefit from a more scalable and flexible web development approach, capable of supporting multiple NFT standards, platforms, and integrations with other NFT applications.

When implementing NFT functionality within traditional web development projects, several key lessons and best practices have emerged:

Comprehensive understanding of legal and ethical implications: Developers must grasp the legal and ethical considerations associated with NFTs. Intellectual property rights, royalties, taxation, and environmental impact are some of the crucial issues at play. Consulting with experts or relevant authorities prior to launching NFT applications is essential. Respecting the rights and preferences of original creators and content owners is paramount.
Utilize existing platforms and protocols: Building NFT platforms or protocols from scratch is unnecessary. Developers can leverage established platforms and protocols that offer ready-made infrastructure and tools for NFT creation and trading. Examples include OpenSea, Rarible, or Mintable. Likewise, incorporating existing NFT standards and libraries, such as ERC-721 or OpenZeppelin, streamlines the creation and management of NFT smart contracts.
Test and optimize performance and user experience: NFT applications often face performance and user experience challenges, such as high gas fees, slow transactions, or complex workflows. Developers should rigorously test and optimize their NFT applications to ensure a seamless and satisfying user experience. Exploring sidechain or layer 2 solutions like Polygon or Optimism can enhance transaction speed and cost efficiency.

By embracing these lessons and adhering to best practices, developers can successfully implement NFT functionality within traditional web development projects, harnessing the transformative power of non-fungible tokens.

Implementing Smart Contracts

Smart contracts serve as vital components of Web3 technologies, offering self-executing and immutable programs that operate on blockchain platforms like Ethereum or Solana. These contracts encode and enforce various logic, rules, and agreements, encompassing payments, escrows, voting, governance, and more. Additionally, they possess the ability to interact with other smart contracts or external data sources such as oracles or APIs.

An excellent example of a traditional web development project incorporating smart contracts is Uniswap. Uniswap facilitates token exchanges on Ethereum without intermediaries or order books. Users can effortlessly swap any two tokens via Uniswap's liquidity pools, established and funded by fellow users. Moreover, individuals can contribute liquidity to these pools and earn fees from transactions.

Uniswap's implementation involves several Web3 technologies to enable smart contract functionality. Firstly, it employs Solidity as the smart contract programming language, widely recognized and supported within the Ethereum development community. Secondly, it adopts Uniswap V2 as the smart contract protocol, offering upgrades and enhancements like flash swaps, price oracles, and routing. Lastly, it utilizes Infura as its web3 infrastructure provider, granting users access to Ethereum nodes and APIs without the need for personally maintaining nodes.

By incorporating smart contracts, Uniswap has brought forth numerous advantages for its users and developers. Users benefit from a more efficient and decentralized token exchange system on Ethereum, bypassing centralized exchanges and intermediaries. Furthermore, they can seize opportunities to provide liquidity to pools and earn fees from transactions. For developers, this approach fosters innovation and composability, empowering them to build new applications and integrations on top of Uniswap's smart contract protocol.

When implementing smart contracts in traditional web development projects, it is essential to consider the following lessons learned and best practices:

Understand the security and reliability risks associated with smart contracts. Awareness of vulnerabilities like reentrancy, overflow, or logic bugs is crucial. Developers should adhere to best practices when coding secure and reliable smart contracts. Leveraging tools and frameworks such as Slither, Echidna, or Manticore can aid in preventing, detecting, and rectifying such issues.
Leverage existing standards and patterns to simplify the implementation process. Developers need not reinvent the wheel. By utilizing established standards and patterns like ERC-20 for fungible tokens, ERC-721 for non-fungible tokens, or OpenZeppelin for security and utility libraries, they can access common and reusable functionalities. Similarly, incorporating existing patterns and design principles such as the factory pattern, proxy pattern, or upgradeability pattern can enhance the quality and maintainability of smart contracts.
Conduct thorough testing and careful deployment of smart contracts prior to launch. Deploying smart contracts on the blockchain is an irreversible process. Consequently, any mistakes or modifications can have serious ramifications for users and developers alike. To mitigate risks, developers should rigorously test their smart contracts using tools like Ganache or Hardhat Network before deploying them on the mainnet. Employing secure and efficient deployment tools and services such as Truffle or Remix is also advisable.

Conclusion

This article provides an overview of integrating web3 technologies into conventional web development projects. It explores decentralized finance, non-fungible tokens, and smart contracts as transformative elements in web development.

The integration of Web3 is not solely a technical hurdle; it necessitates a cultural and conceptual shift in mindset for developers and users accustomed to traditional web paradigms. It demands an open-mindedness to experiment and embrace the myriad possibilities and opportunities presented by Web3 technologies.

Image by pikisuperstar on Freepik

A Quick Guide to AI-Powered Data Visualization: Create a Smart Dashboard with LogicLoop.

Busayo Samuel — Fri, 12 May 2023 14:30:36 +0000

INTRODUCTION

LogicLoop is a cloud-based platform that lets you connect to your data source, supercharge your data to perform automations, and design dashboard layouts with just a few clicks. LogicLoop is essentially a no-code tool, as it doesn't require any technical skills or prior experience. However, users need to possess the ability to ask the right questions in order to obtain their desired results.

AI tools and platforms such as LogicLoop enable data analysts to improve productivity and provide data-driven solutions to stakeholders. LogicLoop helps to simplify the process of analyzing, troubleshooting, and creating visually appealing dashboards. Rather than spending hours on focused work, data analysts can leverage the power of these tools to speed up their tasks.

In this article, you will learn how to build a simple sales dashboard using LogicLoop's sales sample dataset. By the end of this article, you will be able to create impressive projects in just a few minutes. Are you curious and excited? So am I! Let's dive in.

SETTING UP AN ACCOUNT

Navigate to the set up page and follow the instructions on the page to create an admin user account.

To activate your account, follow the verification link sent to your email. Then you can sign in.
Enter your company name when prompted, and provide all the required details to access the dashboard page as show in the image below.

CONNECTING TO A DATA SOURCE

With LogicLoop, users have the ability to connect to more than 40 different data sources. Detailed information regarding the process of connecting to each data source can be found on the documentation page. However, for the purpose of this tutorial, the sales sample dataset will be used, and thus, there will be no need to connect to any external data source. To get started, please follow the steps below:

Click on the Rules tab located on the sidebar. You will be redirected to the rules page. The rules feature allows you to create SQL code to extract data from your datasets. Once written, these rules are saved and can be utilized repeatedly.

Click New Rule Query on the right side of the page. You’ll go to the rules page, which shows the following sections:
- The left sidebar lists the tables in the Sample Postgres DBdataset.
- The main section has a text editor where you can enter your SQL queries.

This rules feature lets you create SQL code to extract data from your datasets. You can save these rules and use them repeatedly.

Click the AI query helper menu and select the query generator option. This opens the form for generating queries.

In the text field, type this prompt:

Write a query that selects the top 10 companies with the highest total transaction amount, then selects the product quantity and the total number of orders for each company.
From the dropdown field, choose these tables: Customers, product_orders, and transactions.

Click on the Generate button to submit your prompt. If all goes well, your output should look like the image below.

Copy the output code, paste it in the text editor, and click on the View results button to show your results. If the result obtained is satisfactory
Click on the Save Results button to persist your data.
Then, click on the Add Visualization tab beside the results table to create a new visualization for your data.

Change the visualization name to Amount spent per company. Choose company_name for the X-column and Total amount for the Y-column.

To make more room for the long label names that are angled diagonally, choose the horizontal bar option. This arranges the bars horizontally.

Navigate to the X-axis tab and deselect the sort values option to arrange the chart in ascending order. To change the color of your chart, follow these steps:
- Go to the colors tab.
- Click the icon beside the automatic text.
- In the HEX code field, type #E1CFEC.
- Save your visualization.

Voila! You’ve made and customized your first chart on LogicLoop. Next, you’ll create a dashboard and add your chart to it.

CREATING A DASHBOARD

In this section, you will use LogicLoop Platform's drag-and-drop interface to create a dashboard layout with different components, such as charts, tables, and other widgets. LogicLoop offers a wide range of visualization options, such as bar charts, line charts, pie charts, maps, and more. You can also add text boxes and images to enhance your dashboard. To get started:

Click on the Dashboards tab on the left sidebar. You will be redirected to the dashboard page.
Click the New Dashboard button at the top of the page and enter the name of your dashboard.
Click on the Add Textbox button, a modal will appear.
Enter the title of your dashboard. After saving your text, a card will appear on your dashboard.
Drag and drop the card to your desired location.
Next, click on the Add Widget button, another modal will appear.
Select the name of your rule and choose the Chart option. Your chart should appear on the dashboard as shown in the image below.

Add another widget, this time, select the table option and align it next to the bar chart.
Navigate to the rules page to create a new rule for a time series area chart.
To get the top 10 order quantities by date, type this SQL query in the editor and save your code:

SELECT
  CAST(EXTRACT(YEAR FROM transactions.created_at) AS VARCHAR) || '-' || CAST(EXTRACT(MONTH FROM transactions.created_at) AS VARCHAR) AS Month_Year,
  SUM(transactions.amount_us_dollars) as total_transactions,
  SUM(product_orders.quantity) as order_quantities,
  COUNT(product_orders.order_id) AS total_number_of_orders
FROM
  customers
  LEFT JOIN transactions ON customers.customer_id = transactions.merchant_id
  LEFT JOIN product_orders ON customers.customer_id = product_orders.customer_id
GROUP BY
  Month_Year
ORDER BY total_number_of_orders DESC
LIMIT 100

To create an area chart, follow these steps:
- Click Add Visualization.
- Choose Area as the chart type.
- For the X-column, choose month_year.
- For the Y-column, choose total_number_of_orders. Your chart might look strange, as shown in the image below:

To correct this, go to the X-axis tab and change the scale from Auto-detect to Datetime.
To match the dashboard theme, change the chart color to #E1CFEC. Your chart should look like the image below.

After you save the chart, click the three vertical dots next to Edit visualization.

Select the Add to dashboard option to add your new chart to the dashboard.
Navigate to the dashboard page and you should see the new chart.
To adjust your chart size, drag the bottom right corner of the chart. You can make it bigger or smaller as you like.

Congratulations! You have successfully created your first AI assisted dashboard on LogicLoop.

CONCLUSION

You have just witnessed the power and simplicity of the LogicLoop platform, a tool that lets you harness the potential of your data with AI assistance. No coding skills are required to create stunning and insightful applications that can boost your productivity and creativity. With the LogicLoop platform, you can explore the infinite possibilities of what you can achieve with data and AI. I hope you continue to explore the use cases for LogicLoop and go on to build amazing things.

Build Mobile and Web Apps in a Single Codebase with the Ionic Framework and React JS

Busayo Samuel — Mon, 01 May 2023 19:55:58 +0000

I. Introduction

II. Getting Started with Ionic Framework 6

III. Building a movie app

IV. Deploying the application

V. Testing and simulating on devices

VI. Conclusion

VII. Additional Resources and Recommendations for Further Learning

Introduction

Why do developers prefer cross-platform frameworks? So they don't have to pull their hair out building and maintaining separate codebases for web and mobile apps. It's hard enough to build one app, let alone two!

Thankfully, the Ionic framework enables cross-platform development using React, Angular, and Vue from a single codebase. Pretty cool, right? This provides a seamless experience for both the developer and the user, as the user doesn't have to learn how to interact with a whole new interface, and the developer only has to maintain one codebase instead of two.

In this article, we will go over how to get started with Ionic, create a simple movie app, deploy and test it. So, if you are a front-end developer looking to expand your skills and build cross-platform apps, read on!

Getting Started with Ionic Framework 6

Before you get started with working with Ionic, make sure you have Node JS and npm installed on your computer. If you are using a windows device, install Android studio; if you are using a Macbook, install Xcode.

Install the Ionic CLI globally on your machine by running the following command in your terminal:



npm install -g @ionic/cli

To confirm that the installation was successful, check the Ionic version on your machine with the command below:



ionic --version

Once you have installed Ionic, you are ready to build your first application. In the next section, we will create a starter template for the Ionic application with React.

Building Web Apps with Ionic Framework 6 and React.js

Follow the steps below to get started:

Create a folder for your application and navigate to the directory using the code below:



mkdir movie



cd movie

Run the following command to create a starter template for your ionic app:



ionic start myapp

When prompted to select a framework for your template, choose React. Then, in the following prompt, select the option for a blank template to create a new template.

Your folder structure should look like the image below.

Navigate to the myapp directory with the command below:



cd myapp

Run the command below to spin up your application:



ionic serve

This command starts a local development server and opens the app in your default browser at http://localhost:8100.
Your browser page should look like this

The Ionic framework provides a wide range of UI components that you can use to create a high-quality user interface for your app. These components are designed to look and feel like native components on iOS and Android, providing a seamless user experience. In the next section, we will explore the starter template and the UI components.

Exploring the starter template

The starter template's entry point is main.tsx. This file renders App.tsx, just like in a basic React JS application.
In the App.tsx file, a bunch of pre-installed packages are being imported to handle the routing and styling of the application. The application uses both react-router-dom and @ionic/react-router for routing.

Components

IonApp: IonApp is a component that encapsulates the entire application by providing a foundation for rendering other components.
IonRouterOutlet: To define routes, developers can utilize the <IonRouterOutlet> component, where each <Route> component represents a unique route that the application can handle.
IonPage: The Home.tsx file located in the pages folder is enclosed within the IonPage component. IonPage is a framework-provided component used to establish the structure of a page and contain all its constituent components. The starter template above wraps the Home component with the IonPage component, signifying that the Home component represents the entire page.
IonHeader: This component is used to define the header section of a page. It usually contains a title and other navigation elements.
IonToolbar: The toolbar component is used to create the navigation elements on the page. The component can be customized with various properties such as color, mode, and slot.

Read more on Ionic framework components.

Now that you have gone through the template and have a basic understanding of how Ionic applications are structured, let's start building the movie application in the next section.

Building a Movie App

In this section, you will learn how to build a simple movie app. The app will allow users to browse the latest movie releases and save desired movies to a bookmark list. By the end of this section, you will have a strong understanding of Ionic application development and be on your way to building more complex applications.

Setting Up the App Layout

To get started;

Open the App.tsx file and replace the default code with the following:



import { Redirect, Route } from "react-router-dom";
import { IonApp, IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs, setupIonicReact } from "@ionic/react";
import { list, person, videocam } from "ionicons/icons";
import { IonReactRouter } from "@ionic/react-router";
import MovieList from "./pages/MovieList";
import MovieDetails from "./pages/MovieDetails";
import WatchList from "./pages/WatchList";

/* Core CSS required for Ionic components to work properly */
import "@ionic/react/css/core.css";

/* Basic CSS for apps built with Ionic */
import "@ionic/react/css/normalize.css";
import "@ionic/react/css/structure.css";
import "@ionic/react/css/typography.css";

/* Theme variables */
import "./theme/variables.css";

setupIonicReact();

const App: React.FC = () => (
  <IonApp>
      <IonReactRouter>
        <IonTabs>
          <IonRouterOutlet>
            <Route path="/movies" component={MovieList} exact={true} />

            <Redirect exact from="/" to="/movies" />
          </IonRouterOutlet>
          <IonTabBar slot="bottom">
            <IonTabButton tab="movies" href="/movies">
              <IonIcon icon={videocam} />
              <IonLabel>Movies</IonLabel>
            </IonTabButton>
            <IonTabButton tab="watchlist" href="/watchlist">
              <IonIcon icon={list} />
              <IonLabel>Watch List</IonLabel>
            </IonTabButton>
            <IonTabButton tab="account" href="/account">
              <IonIcon icon={person} />
              <IonLabel>Account</IonLabel>
            </IonTabButton>
          </IonTabBar>
        </IonTabs>
      </IonReactRouter>
    </IonApp>
);

export default App;

In an Ionic application, the hierarchy of the JSX components is critical. The root of the application is wrapped in the <IonApp> component, which is imported from the ionic/react package. This component indicates that the project is an Ionic application. The <IonReactRouter> and <IonReactOutlet> components are also fundamental components of the Ionic routing. On the other hand, the <IonTabs> component is not a fundamental part of the hierarchy, but it allows the application to have a bottom tab bar for navigation.

In the src folder, create a pages folder and add a MovieList.jsx file in the folder. Add the code below to the file:



import React, { useState, useEffect } from "react";
import {
  IonApp,
  IonContent,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonSearchbar,
  SearchbarChangeEventDetail,
  IonPage,
  IonLoading,
} from "@ionic/react";
import axios from "axios";
import { MovieProps } from "../type";
import MovieCard from "../components/MovieCard";

const App = () => {
  const [movies, setMovies] = useState<MovieProps[]>([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      const response = await axios.get(
        `https://api.themoviedb.org/3/movie/popular?api_key=${process.env.REACT_APP_TMDB_KEY}&language=en-US&page=1`
      );
      setMovies(response.data.results);
    };

    fetchData();
  }, []);

  const searchMovies = async (searchText: string) => {
    setLoading(true);
    const response = await fetch(
      `https://api.themoviedb.org/3/search/movie?api_key=${process.env.REACT_APP_TMDB_KEY}&query=${searchText}`
    );
    const data = await response.json();
    setLoading(false);
    return data.results;
  };

  const handleSearch = async (
    event: CustomEvent<SearchbarChangeEventDetail>
  ) => {
    const text = event.detail.value || "";
    if (text.length === 0) {
      return;
    }
    try {
      const results = await searchMovies(text);
      setMovies(results);
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <IonPage>
      <IonLoading isOpen={loading} message={"Searching..."} duration={2000} />
      <IonApp>
        <IonHeader>
          <IonToolbar>
            <div className="toolbar-container">
              <IonTitle>Latest Movies</IonTitle>
              <IonSearchbar
                placeholder="Search movies..."
                onIonChange={handleSearch}
                className="search-input"
              ></IonSearchbar>
            </div>
          </IonToolbar>
        </IonHeader>
        <IonContent>
          <div className="movie-container">
            {movies.map((movie) => (
              <MovieCard key={movie.id} movie={movie} />
            ))}
          </div>
        </IonContent>
      </IonApp>
    </IonPage>
  );
};

export default App;

In the code snippet above, the latest movie list is being fetched from the TMBD website using their API key. To obtain the key, you need to create an account on the TMBD site and request for an API key. Once you have the key, create an .env file in your src folder and add your API key to it, as shown in the code below. Replace "YOUR_API_KEY" with the API key gotten from the TMDB website:



REACT_APP_TMBD_KEY=YOUR_API_KEY

In the useEffect hook in the MovieList page, the API result is fetched using axios and saved in the movies state. The searchMovies function handles searching the TMDB database for movies using the text input obtained from the IonSearchBar component, and the handleSearch function triggers the search when the submit button is clicked.

The IonLoading component is used to display a loading state while searching for movies. The result gotten after the API is then mapped to the MoviesCard component, which will be created later in the article.

Create a type.ts file in the src folder and add the snippet below:



export type MovieProps = {
  title: string;
  poster: string;
  plot: string;
  id: string;
  poster_path:string
  release_date:string
  backdrop_path:string
};

Create a components folder in the src folder and add a MoviesCard.tsx file.
Add the following code to the MoviesCard component:



import { IonCard, IonIcon, IonImg, IonLabel } from "@ionic/react";
import { MovieProps } from "../type";
import { trashBin } from "ionicons/icons";
import { useState } from "react";

type props = {
  movie: MovieProps;
  watch?: boolean;
  handleDelete?: (
    event: {
      preventDefault: () => void;
      stopPropagation: () => void;
    },
    movie: MovieProps
  ) => void;
};
function MovieCard({ movie, watch, handleDelete }: props) {
  const [showSuccessToast, setshowSuccessToast] = useState<boolean>(false);

  return (
    <IonCard routerLink={`/movies/${movie.id}`}>
      <div className="movie-item">
        {watch && handleDelete && (
          <IonIcon
            icon={trashBin}
            slot="start"
            onClick={(e) => handleDelete(e, movie)}
            className="trash"
          />
        )}
        <IonImg
          src= {`https://image.tmdb.org/t/p/w500/${movie.backdrop_path}`}
          alt={movie.title}
        />
        <IonLabel>
          <h2 className="movie-title">{movie.title}</h2>
        </IonLabel>
      </div>
    </IonCard>
  );
}
export default MovieCard;

This component is a simple card displaying an image and the movie title. When a user clicks on any part of the card, they will be redirected to the MovieDetails page. Since the Card component will also be utilized by the WatchList page, the trash bin is being conditionally rendered.
Before proceeding to create the next page in the application, consider adding a styles folder to the application to provide a different look and feel to the MovieList page.

In the src folder, create a global.css file and add the following code to the file:



/* global styles */
ion-content {
  --background: #141414;
  --color: #fff;
}
ion-card {
  z-index: 1 !important;
}
/* home page styles */
.home-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.home-container h1 {
  font-size: 1.5rem;
  margin-top: 20px;
  margin-bottom: 30px;
}

/* movie list styles */
.movie-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 20px;
}

.movie-item {
  position: relative;
}

.movie-item ion-img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 10px;
}

.movie-item .movie-title,
.bookmark,
.trash {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 10px;
  text-align: start;
  font-weight: bold;
  font-size: 1rem;
}
.movie-item .movie-title {
  bottom: 0;
  left: 0;
  right: 0;
}
.movie-details .bookmark,
.movie-item .trash {
  top: 0;
  right: 0;
  font-size: 1.2rem;
}
/* movie details styles */
.movie-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}
.movie-details .text-wrapper {
  margin: 0 auto;
}
.title {
  margin-left: 20px;
  color: #838181;
}
ion-button {
  --background: #5c5b5b;
  --color: white;
  margin-left: 10px;
}
.movie-details h2 {
  font-size: 1.5rem;
  margin-top: 20px;
  margin-bottom: 10px;
}

.movie-details p {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 20px;
  max-width: 40ch;
}
.img-wrapper {

  position: relative;
}
.movie-details img {
  border-radius: 20px;
  max-height: 600px;
  max-width: 400px;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.movie-details .rating {
  display: flex;
  align-items: center;
  font-size: 1.2rem;
  margin-bottom: 20px;
  gap: 5px;
  place-items: center;
}
.movie-details .release-date {
  color: #5c5b5b;
}

.movie-details .rating ion-icon {
  color: #fbc02d;
  margin-right: 10px;
}

/* search bar styles */
.search-container {
  padding: 20px;
}
.toolbar-container {
  display: flex;
  justify-content: start;
  padding: 10px 40px 10px 0px;
}
.search-input {
  width: 400px;
}
ion-toolbar {
  display: flex !important;
}
/* error message styles */
.error-message {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.error-message h1 {
  font-size: 2rem;
  margin-right: 20px;
}

/* loading indicator styles */
.loading-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.loading-indicator ion-spinner {
  --color: #fff;
}

Import the global styles to your App.tsx file like so:



/* Global styles */
import "./global.css";

The movie list should be displayed in a grid layout like the image below.

Add a MovieDetails.tsx file in your pages folder and add the code below:



import React, { useEffect, useState } from "react";
import { RouteComponentProps, useHistory, useParams } from "react-router-dom";
import {
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
  IonImg,
  IonList,
  IonItem,
  IonLabel,
  IonText,
  IonBadge,
  IonButton,
  IonIcon,
  IonLoading,
  IonToast,
} from "@ionic/react";
import {
  arrowBack,
  bookmarkOutline,
  star,
  starHalf,
  starOutline,
} from "ionicons/icons";
import axios from "axios";
import { MovieProps } from "../type";

interface MovieDetails {
  id: number;
  title: string;
  poster_path: string;
  backdrop_path: string;
  release_date: string;
  overview: string;
  vote_average: number;
  vote_count: number;
  genres: { id: number; name: string }[];
}

const MovieDetails: React.FC = () => {
  let watchlist: MovieProps[] = localStorage.getItem("watchlist")
    ? JSON.parse(localStorage.getItem("watchlist")!)
    : [];
  const { id } = useParams<{ id: string }>();
  const [movieDetails, setMovieDetails] = useState<MovieDetails | null>(null);
  const [showSuccessToast, setshowSuccessToast] = useState<boolean>(false);
  const [message, setMessage] = useState({ present: false, message: "" });
  const history = useHistory();

  useEffect(() => {
    const fetchMovieDetails = async () => {
      try {
        const response = await axios.get(
          `https://api.themoviedb.org/3/movie/${id}?api_key=${process.env.REACT_APP_TMDB_KEY}`
        );
        setMovieDetails(response.data);
      } catch (error) {
        console.log(error);
      }
    };

    fetchMovieDetails();
  }, [id]);
  const handleSaveToWatchList = () => {
    const movieId = movieDetails?.id;
    const isMovieInWatchlist = watchlist.find(
      (movie: any) => movie.id === movieId
    );
    setshowSuccessToast(true);
    if (isMovieInWatchlist) {
      setMessage({
        message: "This movie has already been bookmarked",
        present: true,
      });
    }
    if (!isMovieInWatchlist) {
      const newList = [...watchlist, movieDetails];
      localStorage.setItem("watchlist", JSON.stringify(newList));
      setMessage({
        message: "Movie has been successfully bookmarked",
        present: false,
      });
    }
  };

  if (!movieDetails) {
    return (
      <IonLoading
        isOpen={!movieDetails}
        message={"Please wait..."}
        duration={3000}
      />
    );
  }
  let rating = movieDetails.vote_average / 2;
  const starRating = [];

  for (let i = 0; i < 5; i++) {
    if (rating >= 1) {
      starRating.push(<IonIcon key={i} icon={star} />);
      rating--;
    } else if (rating >= 0.5) {
      starRating.push(<IonIcon key={i} icon={starHalf} />);
      rating -= 0.5;
    } else {
      starRating.push(<IonIcon key={i} icon={starOutline} />);
    }
  }
  return (
    <IonPage>
      <IonToast
        isOpen={showSuccessToast}
        message={message.message}
        onDidDismiss={() => setshowSuccessToast(false)}
        duration={5000}
        position="top"
        animated={true}
        color={message.present ? "medium" : "success"}
      ></IonToast>
      <IonHeader>
        <IonToolbar>
          <IonButton onClick={() => history.goBack()} slot="start">
            <IonIcon icon={arrowBack} />
          </IonButton>
          <h1 className="title">{movieDetails.title}</h1>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        {movieDetails && (
          <div className="movie-details">
            <div className="img-wrapper">
              {" "}
              <IonIcon
                icon={bookmarkOutline}
                slot="start"
                color={showSuccessToast ? "success" : "medium"}
                onClick={handleSaveToWatchList}
                className="bookmark"
              />
              <img
                src={`https://image.tmdb.org/t/p/w500/${movieDetails.poster_path}`}
                alt={`${movieDetails.title} poster`}
              />
            </div>
            <div className="text-wrapper">
              <h2>{movieDetails.title}</h2>
              <p className="release-date">
                Release date: {movieDetails.release_date}
              </p>
              <p className="overview">{movieDetails.overview}</p>
              <div className="rating">{starRating}</div>
            </div>
          </div>
        )}
      </IonContent>
    </IonPage>
  );
};

export default MovieDetails;

On the MovieDetails page, the id obtained from useParams is used to fetch movie details and stored in the movieDetails state. Clicking on the bookmark icon calls the handleSaveToWatchList function. This function checks whether the movie has already been saved in the watch list stored in local storage, and adds the new movie to the list if it hasn't been saved yet. If the operation is successful, the IonToast component is triggered by setting showSuccessToast to true.

Add a WatchList page in your pages folder and add the code below:



import React, { useEffect, useState } from "react";
import {
  IonButton,
  IonContent,
  IonHeader,
  IonIcon,
  IonPage,
  IonTitle,
  IonToolbar,
} from "@ionic/react";
import MovieCard from "../components/MovieCard";
import { MovieProps } from "../type";
import { arrowBack } from "ionicons/icons";
import { useHistory } from "react-router";

const WatchList: React.FC = () => {
  const history = useHistory();
  const [list, setList] = useState<MovieProps[]>(() => {
    const watchlist: MovieProps[] = localStorage.getItem("watchlist")
      ? JSON.parse(localStorage.getItem("watchlist")!)
      : [];
    return watchlist;
  });

  useEffect(() => {
    const watchlist: MovieProps[] = localStorage.getItem("watchlist")
      ? JSON.parse(localStorage.getItem("watchlist")!)
      : [];
    setList(watchlist);
  }, [localStorage.getItem("watchlist")]);

  const handleClear = () => {
    localStorage.clear();
    setList([]);
  };

  const handleDelete = (
    event: {
      preventDefault: () => void;
      stopPropagation: () => void;
    },
    movie: MovieProps
  ) => {
    event.preventDefault();
    event.stopPropagation();
    const updatedWatchList = list && list.filter((i) => i.id !== movie.id);
    localStorage.setItem("watchlist", JSON.stringify(updatedWatchList));
    setList && setList(updatedWatchList);
  };

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButton onClick={() => history.goBack()} slot="start">
            <IonIcon icon={arrowBack} />
          </IonButton>
          <IonTitle>Watch List</IonTitle>
        </IonToolbar>
        <IonButton onClick={handleClear}>Clear all</IonButton>
      </IonHeader>
      <IonContent fullscreen>
        <div className="movie-container">
          {list &&
            list.map((movie) => (
              <MovieCard
                key={movie.id}
                movie={movie}
                watch={true}
                handleDelete={handleDelete}
              />
            ))}
        </div>
      </IonContent>
    </IonPage>
  );
};

export default WatchList;

The watch list is initially retrieved from local storage and stored in the watchList state. The list is then mapped and displayed using the movie card component.

Add the new pages to the routes inside the App.tsx file:



<Route path="/movies/:id" component={MovieDetails} exact={true} />
<Route path="/watchlist" component={WatchList} exact={true} />

Great job! You have now created a simple movie web and mobile application using the Ionic framework. However, at the moment, the application can only be viewed on a web browser. In the next section, we will cover how to deploy this application on both iOS and Android platforms.

Deploying the Application

To deploy and use this project as a mobile application for android platforms. Follow the steps below;

Build the application by running the command below:



ionic build --prod

This will create a production-ready version of the application in the www directory.

Deploy to android by running the command below:



ionic capacitor add android

This will add the Android platform to the application.

Run the following command to build the application:



ionic capacitor build android --prod

To deploy the application for iOS platforms, follow these steps;

Deploy the application by running the following command:



ionic capacitor add ios

This will add the iOS platform to the application.

Build the application using the command below:



ionic capacitor build ios --prod

Testing and Simulating on devices

To test the application on devices, you can use Ionic's tools for live-reload and debugging. Simply run the following command in the terminal for android mobiles:



ionic capacitor run android -l --external

or run the command below for iOS devices:



ionic capacitor run ios -l --external

This command will launch the application on your device and enable live-reload and debugging. You can then make changes to the application's code and see the changes immediately on the device. You can either choose to simulate the application on your physical device or use an emulator.

Here is how the application looks on a mobile device.

Best Practices

Here are some best practices to follow when deploying Ionic applications:

Optimize the application's performance for each platform by using platform-specific optimizations, such as lazy-loading and tree-shaking.
Test the application on a wide range of devices and platforms to ensure that it works well for all users.
Use Ionic's tools for debugging and profiling to identify and fix performance issues.
Use Ionic's built-in UI components and styling to ensure a consistent look and feel across all platforms.

By following these best practices, you can ensure that your application is performant, user-friendly, and accessible to a wide range of users.

Conclusion

Whew! You sure have come a long way. You started out from knowing little to nothing about Ionic to building a whole application using the framework.

Together we covered the basics of creating a new Ionic project, adding pages and components, integrating with APIs, and styling the application. We even discussed how to test and deploy the application on both Android and iOS devices.

Ionic Framework's flexibility and ease-of-use make it an ideal choice for building cross-platform applications quickly and efficiently. I hope you keep up the momentum and continue to build amazing things with Ionic. Who knows, your next project could be the next big thing.

Additional Resources and Recommendations for Further Learning

Here are some recommended resources for further learning:

Ionic Documentation : The official Ionic documentation is a great place to start. It offers a comprehensive overview of the framework's features and provides detailed instructions on how to use them.
Ionic Academy : This website is dedicated to teaching developers how to use Ionic. It offers a wide range of tutorials, courses, and articles on various topics related to the framework.
GitHub : GitHub offers a vast collection of open-source projects using Ionic. You can search for Ionic projects on GitHub and see how other developers have implemented various features and functionalities.

Mastering Web Accessibility: A Guide for Frontend Developers

Busayo Samuel — Tue, 11 Apr 2023 11:07:20 +0000

I. Introduction

II. What is web accessibility?

III. Why is web accessibility important?

IV. How to create web-accessible websites
A. Use of semantic HTML
B. Providing text alternatives
C. Use of accessible colors and contrast

VI. Conclusion

Introduction

Although producing aesthetically appealing and useful web apps is a front-end web developer's major goal, the need for ensuring accessibility for all users is sometimes disregarded. The WebAIM Million report examined the home pages of the top 1 million websites and it was discovered that only 3.7% of them adhered to the most basic accessibility guidelines. What this means is that 96.3% of websites are not accessible to people with disabilities, and I think that's just sad. We'll explore online accessibility in this post, including what it is, why it's important, and some advice for improving the accessibility of your own website.

What is web accessibility?

The technique of building websites and web apps that are simple for persons with disabilities, particularly those who have cognitive or physical impairments, is known as web accessibility. Many people with impairments use assistive technology, like screen readers or braille displays, to browse the internet.

Web accessibility therefore entails putting in place the required instruments and assets to incorporate these assistive technologies into your website, enabling everyone to access and interact with your digital content. You can make sure that your website is inclusive and accessible to all users, regardless of their ability, by giving web accessibility a high priority.

Why is web accessibility important?

While we've made progress in making various aspects of society more inclusive, such as education, employment, healthcare, and public spaces, there's still work to be done to ensure everyone can fully participate and thrive.

Web accessibility is important because it ensures that everyone, regardless of their abilities or disabilities, can access and use the web. It also helps to promote inclusivity, diversity, and equality by eliminating barriers to information and technology.

As a front-end developer, I have been guilty of building websites that have little or no accessibility, mainly because it wasn't part of my project description, and I was unaware of the importance of this practice. But now that I am aware, and I believe you are too, how can we incorporate accessibility into our projects? In the next section, we will explore different ways of making a website accessible.

How to create web-accessible websites

Adding web accessibility to your website starts with the design process. The user interface designer has to think about font size, font type, color palette, and the web structure in general.
It is important to note that web accessibility is an iterative process that requires all hands on deck. The web designer, developer, and content writer all have roles to play to ensure that the digital content they are building is accessible to every user who interacts with it. Here are a few ways a front-end developer can improve web accessibility;

Use semantic HTML: Why did the developer use a <div> instead of a semantic tag? Because they wanted to make their HTML more...div-erse! I know, I know, that's a lame dad joke. It's usually much easier to wrap everything in the div tag and call it a day, but the best practice is to use semantic HTML tags that correspond to the content and structure of your page. Semantic HTML is not only important for web accessibility; it also improves the SEO of a website. When you are working on the navigation of your web page, your code should look like this:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">  About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

This will accurately describe the purpose of that section of code, without the need to add comments to your code. You can also wrap the main section of your web page with the main tag like this:

<main>
  <h1>Welcome to My Website!</h1>
  <p>Here is some information about my website...</p>
</main>

The aside tag can also be used to indicate content that is tangentially related to the main content of the page like the code below:

<main>
  <h1>Welcome to My Website!</h1>
  <p>Here is some information about my website...</p>

  <aside>
    <h2>Related News</h2>
    <ul>
      <li><a href="#">Article 1</a></li>
      <li><a href="#">Article 2</a></li>
      <li><a href="#">Article 3</a></li>
    </ul>
  </aside>
</main>

Overall, semantic HTML makes it much easier to navigate your web page using assistive technology.

Provide text alternatives: When you're adding an image, video, or any visual content to your website, you should always provide a text description of what the content depicts. In HTML this is called alt text. This description allows screen readers to understand the overall content of your website. Here is a code example of what an alt text looks like for a video and image markup.

<div>
  <h2>My Video</h2>
  <video src="my-video.mp4" alt="A person skiing down a mountain"></video>

  <h2>My Image</h2>
  <img src="my-image.jpg" alt="A group of people hiking in the mountains">

  <h2>My Chart</h2>
  <figure>
    <img src="my-chart.png" alt="A line chart showing the growth of a company over time">
    <figcaption>A chart showing the growth of my company over time</figcaption>
  </figure>
</div>

The code above not only provides alt text for all the graphics on the page, but it also uses the semantic HTML tag called figure to wrap an image to provide an even more accurate representation of what's on the page.

Use accessible colors and contrast Why did the website with poor color contrast cross the road? to get to the other sight (site). These dad jokes just keep coming to me, but I promise, I'll stop now! Using accessible colors and contrast is primarily a job for designers, but if you're a web developer who also works as a designer, then this section will be useful for you. It is important to consider the needs of people with visual impairments. Always keep in mind that just because you can see the content clearly doesn't mean everyone can.

Here are some key things to take note of when designing for web accessibility;

Choose colors carefully: Consider the contrast between your background and text. Dark backgrounds should not have dark text. You can use this link to check the contrast ratio of your design.

For a better user experience, do not depend on color alone to convey information to the user. Links and action buttons should not be indicated using colors alone; you can add an underline to the link's text to indicate that it is clickable.
Use a legible font: When selecting a font for your website, choose one that is easy to read. Keep in mind that sans-serif fonts like Arial, Verdana, and Helvetica are often easier to read on screens than serif fonts.

Use an appropriate font size: According to Web Content Accessibility Guidelines (WCAG), a font size of 16px is best for body text. You can read more on the guidelines here
Test your designs: Test your website on different devices and screen resolutions to ensure that your font size and type are legible and accessible to all users.
Use ARIA attributes: ARIA (Accessible Rich Internet Applications) attributes are additional attributes that can be added to HTML tags to provide more information on the role and properties of an element. These properties can be read by screen readers to improve their user experience.

While ARIA can provide accessibility advantages in some cases, it should only be utilized as a last resort when other accessibility tools and strategies are insufficient. Overuse or misuse of ARIA can actually create more barriers for disabled people rather than improve their experience. For more context checkout Common Misconceptions About ARIA

An example of a markup with ARIA attributes can be found below:

<div>
<button aria-label="Search">
  <i class="fa fa-search"></i>
</button>
<div role="tabpanel" aria-labelledby="tab1">
  <p>Tab panel content goes here.</p>
</div>
<button aria-expanded="false" aria-controls="collapse1">
  Show More
</button>
<div id="collapse1" aria-hidden="true">
  <p>Additional content goes here.  </p>
</div>
</div>

The example above provides information on the role of a search button with the aria text "Search." The aria-expanded attribute is used to indicate whether the content in the associated div element is expanded or collapsed. The aria-controls attribute is used to reference the ID of the associated div, while the aria-hidden attribute is used to indicate that the content is hidden when it is collapsed.

NOTE: ARIA attributes are defined by the W3C ARIA specification. There is a standardized set of attributes names that are designed to work with screen readers.

Test your website for accessibility
There are a lot of resources out there that make it easy to test the accessibility of your website. Some popular tools include;
- WAVE: This is a free tool that accesses your website for accessibility and also generates a report on its findings. Learn more about WAVE.
- AXE: This is a free Chrome extension aimed at using automated testing to test and improve web accessibility. Learn more about AXE.
- LIGHTHOUSE: Lighthouse is a popular open-source tool used by developers to test the performance and accessibility of websites. It's available here.
- NVDA: NVDA (NonVisual Desktop Access) is a free, open-source screen reader that enables people who are blind or visually impaired to access and navigate the web, as well as other applications and software on their computer. You can download it to interact with your website and get more insights about where accessibility can be improved. It can be downloaded here

Conclusion

In this article, we went through what accessibility is, why it is important, and how you can improve user experience with web accessibility. Including web accessibility to all web projects is a moral responsibility placed upon us all as front-end developers, to enable inclusivity for one and all. I hope one day soon, accessibility becomes just as important as adding aesthetics to a website.
Happy coding!

How to Use Electron.js for Building Desktop Applications with JavaScript, HTML, and CSS

Busayo Samuel — Sun, 09 Apr 2023 15:23:22 +0000

I. Introduction

II. Prerequisites

III. Setting up the Development Environment

IV. Creating the User Interface

V. Building the Application Logic

VI. Packaging and Distributing the Application

VII. Debugging and troubleshooting

VIII. Conclusion

IX: Reading recommendations

INTRODUCTION

Hey besties! As a front-end web dev I've always been fascinated by the internal workings of desktop apps. And can you blame me? The idea of creating a file interface or desktop homepage with code is like one of those puzzles that scratches an itch in the brain. So naturally, I decided to dig deeper into the world of desktop development and feed my cravings.

During my research, I discovered Electron JS, an open-source framework that enables developers to build desktop apps using web development technologies. The framework runs on Chromium and Node.js and supports JavaScript, HTML, and CSS. The best part? It allows developers to build cross-platform desktop applications that function on Mac, Windows, and Linux operating systems. This blew my mind! So I did what any normal developer would do: I tinkered with the newly discovered technology!

This article covers everything you need to know about Electron JS, from building a fully functional desktop application to packaging and distributing it to the public. Whether you're new to desktop application development or looking to expand your skills, this article is a valuable resource for you. By the end of it, you'll have a solid understanding of how to use Electron JS to create and distribute your own desktop applications.

PREREQUISITES

To easily follow this article, it is recommended that you already know the following;

HTML
CSS
JavaScript

SETTING UP THE DEVELOPMENT ENVIRONMENT

To get started, you will need a code editor. I will be using VSCode editor, but you can use any editor that you're comfortable with. Follow these steps to set up your environment;

I. Install Node.js and npm (Node Package Manager) on your machine, if they aren't already installed. You can download them from the official Node.js website.
II. Create a new directory called text-editor for your project and navigate to it using your terminal. Copy the code below to do this.



mkdir text-editor
cd text-editor

III. Initialize a new Node.js project using NPM by running the following command:



npm init

IV. After entering the command, you will be prompted to answer a few questions about your project, such as the name, version, and description. When prompted for the entry point of your application, enter main.js. You can press enter to accept most of the default values for the questions.

V. Install Electron as a development dependency using the following command:



npm install --save electron electron-dialog --save-dev

This command installs Electron JS and saves it as a dependency in your package.json file.

VI. Create a new file called main.js in your project directory. This will be the main entry point for your application. Use the code below to do this.



touch main.js

VII. Add the following code to your main.js file to create a new Electron window and load a basic HTML file:



const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

function createWindow() {
  let win = new BrowserWindow({ width: 800, height: 600 });
  win.loadFile('index.html');
}

app.on('ready', createWindow);

This code imports the electron module from the Electron package, creates a new Electron window with a set height and width, and loads an HTML file called index.html.

VIII. Create a new file called index.html in your project directory and add the basic HTML code below:



<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Text Editor</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

Your folder structure should look like this:

IX. Update your package.json file with the script below.



 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
  },

This script tells npm to start the Electron application by running the electron command and passing in the current directory "." as an argument.
X. Start your Electron application using the following command:



npm start

This command will spin up your application and load the index.html file you created earlier on the screen. If all goes well, your screen should display "Hello world" like the image below.

In the next section we will build the user interface for the text editor application.

CREATING THE USER INTERFACE

The user interface for this application will be a simple text area field with additional functionalities associated with text editors. By the end of this project, you will be able to create and save a new file, edit, copy, paste, add shortcuts and highlight text in your editor. Let's get started.

I. Add a text area and buttons to your index.html file by updating your code to the following:



<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Text Editor</title>
  </head>
  <body>
    <div class="wrapper">
      <textarea id="editor" cols="60" rows="25"></textarea>
      <div class="button-container">
        <button id="openBtn">Open</button>
        <button id="saveBtn">Save</button>
      </div>
    </div>
    <script src="./renderer.js"></script>
    <link rel="stylesheet" href="style.css" />
  </body>
</html>

II. Create a style.css file in the root directory and add the following code to handle the styling:



body{
    background: #202020;
    color: white;
    display: flex;
    width: 100%;
    height: 100%;
    place-items: center;
}
.wrapper{
    width: 50%;
    margin: 0 auto;
}
.button-container{
    display: flex;
    margin-top: 10px;
    gap: 15px;
}

#editor{
    background-color: #3e3e3e;
    color: white;

}
button{
    padding: 10px;
    color: white;
    background-color: rgb(10, 185, 164);
    border-radius: 10px;
    outline: none;
    cursor: pointer;

}
button:hover{
    background-color: rgb(7, 220, 195);
}

To give your application a Windows desktop look and feel, you should opt for Photon CSS.
III. Create a new file called renderer.js in the same directory as main.js, and add the following code to handle the button click event:



const { ipcRenderer } = require("electron");

const editor = document.getElementById("editor");
const openBtn = document.getElementById("openBtn");
const saveBtn = document.getElementById("saveBtn");

openBtn.addEventListener("click", () => {
  ipcRenderer.send("open-file-dialog");
});

saveBtn.addEventListener("click", () => {
  const content = editor.value;
  ipcRenderer.send("save-file-dialog", content);
});
ipcRenderer.on("open-file", (event, filePath, fileContent) => {
  editor.value = fileContent;

});

A basic Electron.js architecture requires two major files called main.js and renderer.js. The renderer.js file sends string messages like the "open-file-dialog" in the code above. The message is received in the main.js file, and event handling for the message will be carried out. The ipcRenderer sends messages to the main.js file to handle the opening and saving of files.

IV. In the main.js file, add the event handling function for opening and saving files:



const { dialog, ipcMain } = require("electron");
const path = require("path");
const fs = require("fs");

ipcMain.on("open-file-dialog", (event) => {
  dialog
    .showOpenDialog({
      properties: ["openFile"],
    })
    .then((result) => {
      if (!result.canceled) {
        const filePath = result.filePaths[0];
        const fileContent = fs.readFileSync(filePath, "utf-8");
        ipcRenderer.send("get-file", fileContent);
        event.reply("open-file", filePath, fileContent);
      }
    })
    .catch((err) => {
      console.log(err);
    });
});

ipcMain.on("save-file-dialog", (event, content) => {
  dialog
    .showSaveDialog({
      properties: ["createDirectory"],
    })
    .then((result) => {
        console.log('saved')
      if (!result.canceled) {
        console.log('saved result')
        const filePath = result.filePath;
        fs.writeFileSync(filePath, content, "utf-8");
        event.reply("save-file", filePath);
      }
    })
    .catch((err) => {
      console.log(err);
    });
});

This code uses the ipcMain handler to call the "file opening dialog" on your desktop. It then sends a message to the renderer.js file with the file content gotten from the newly opened file.

V. Update the createWindow function to add web preferences to Electron window. This allows Electron.js to access the window object for DOM manipulation:



function createWindow() {
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  });
  win.loadFile("index.html");
}
app.on("ready", createWindow);
}

With these changes, your Electron application should now have the basic functionalities of a text editor. In the next section we are going to build up on these functionalities to add additional features such as formatting options (e.g., bold, italic, underline), syntax highlighting, auto-complete, and search and replace functionality.
Your Application should currently look like the image below

ADDING FORMATTING FEATURES

What's a text editor without the ability to format text? In this section, you are going to be adding formatting functionality to the project.

Text bolding

To add this feature to this application, you need to add a button to the interface to trigger the event. In your index.html file, update the code by adding the following:



  <body>
    <div class="wrapper">
      <textarea id="editor" cols="60" rows="25"></textarea>
      <div class="button-container">
        <button id="openBtn">Open</button>
        <button id="saveBtn">Save</button>
        <button id="bold-btn"><b>B</b></button>
      </div>
    </div>
    <script src="./renderer.js"></script>
    <link rel="stylesheet" href="style.css" />
  </body>

The newly created button will be used as bold button. To do this, in the renderer.js file, add an event listener for the bold button and update the text area accordingly:



const boldBtn = document.getElementById('bold-btn');
boldBtn.addEventListener('click', () => {
  const start = editor.selectionStart;
  const end = editor.selectionEnd;
  const selectedText = editor.value.substring(start, end);
  const boldText = `<b>${selectedText}</b>`;
  const newText = editor.value.substring(0, start) + boldText + editor.value.substring(end);
  editor.value = newText;
});

This code listens for the click event on the bold button, gets the selected text in the text area, wraps it in a <b> tag to make it bold, and updates the text area with the new text.

Syntax highlighting

To implement an advanced feature like syntax highlighting, you are going to need an external library called Prism.js. Here's how to use it:

I. Update your index.html file with the Prism library.



<script src="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/prism.js"></script>
<link      href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism-okaidia.min.css" rel="stylesheet"/>

This code adds the prism.js library to the HTML file, so as to make it accessible in the project.

II. In your renderer.js file, update your code by using the Prism.highlight() method to apply syntax highlighting to your text editor:



editor.addEventListener('input', () => {
  const code = editor.value;
  const highlightedCode = Prism.highlight(code, Prism.languages.javascript, 'javascript');
  editor.innerHTML = highlightedCode;
});

This code listens for input events on the text editor, gets the code in the editor, uses Prism.js to highlight the code with JavaScript syntax, and then updates the editor with the highlighted code.

III. To check your highlighted code, create an empty paragraph in your index.html file:



  <p id="paragraph"></p>

IV. Add the highlighted code inside the paragraph:



  editor.innerHTML = highlightedCode;
  paragraph.innerHTML = highlightedCode;

Your editor should look like the image below.

Autocomplete

To include autocomplete functionality in this project, you are going to need another Javascript library called Ace.js. To get started;

II. Add the Ace.js library to your HTML file:



<head>
  <script src="ace.js"></script>
</head>

III. In renderer.js file, create an Ace editor instance and add auto-complete functionality to it:



const editor = ace.edit('editor');
editor.setOptions({
  enableBasicAutocompletion: true,
  enableSnippets: true,
  enableLiveAutocompletion: true,
});
const langTools = ace.require('ace/ext/language_tools');
const completer = {
  getCompletions: function(editor, session, pos, prefix, callback) {
    const completions = [
      {value: 'foo', score: 1000},
      {value: 'bar', score: 1000},
      {value: 'baz', score: 1000},
    ];
    callback(null, completions);
  }
};
langTools.addCompleter(completer);

This code creates an Ace editor instance, sets options for auto-completion, adds a completer object with a list of possible completions, and adds the completer to the editor. When the user types in the editor, the completer will show a list of suggestions based on the user's input.

Undo and Redo

The ability to undo and redo actions will always come in handy in any text editor. To the following code to your renderer.js file;



const editor = document.getElementById('editor');
const undoStack = [];
const redoStack = [];

editor.addEventListener('input', () => {
  undoStack.push(editor.innerHTML);
});

function undo() {
  if (undoStack.length > 1) {
    redoStack.push(undoStack.pop());
    editor.innerHTML = undoStack[undoStack.length - 1];
  }
}

function redo() {
  if (redoStack.length > 0) {
    undoStack.push(redoStack.pop());
    editor.innerHTML = undoStack[undoStack.length - 1];
  }
}

document.addEventListener('keydown', (event) => {
  if (event.ctrlKey && event.key === 'z') {
    event.preventDefault();
    undo();
  } else if (event.ctrlKey && event.key === 'y') {
    event.preventDefault();
    redo();
  }
});

Copy and paste

This is another feature that is very important in any editor. You can quickly add this feature by adding the following code in the renderer.js file.



const copyButton = document.getElementById('copy-button');
const pasteButton = document.getElementById('paste-button');

copyButton.addEventListener('click', () => {
  const selection = window.getSelection();
  const range = document.createRange();
  range.selectNodeContents(editor);
  selection.removeAllRanges();
  selection.addRange(range);
  document.execCommand('copy');
  selection.removeAllRanges();
});

pasteButton.addEventListener('click', () => {
  const selection = window.getSelection();
  const range = document.createRange();
  range.selectNodeContents(editor);
  selection.removeAllRanges();
  selection.addRange(range);
  document.execCommand('paste');
  selection.removeAllRanges();
});

This JavaScript code sets up copy and paste buttons that use the document.execCommand() method to copy and paste text from the editor. The code first selects the entire contents of the editor using a Range object and the window.getSelection() method. It then adds the range to the selection, calls the document.execCommand() method with the appropriate command ('copy' or 'paste'), and removes the range from the selection.

Find and Replace:

In this sub-section we will be adding the find and replace feature in the text-editor. This feature will allow the user to enter a key word and replace all occurrences of that word with a new word.
To do this, in your index.html code, add the following;



<div>
  <input type="text" id="find-input" placeholder="Find...">
  <input type="text" id="replace-input" placeholder="Replace...">
  <button id="find-button">Find</button>
  <button id="replace-button">Replace</button>
</div>

This code will create two input fields for the find and replace texts. It will also create two buttons to trigger the find and replace features.

In your renderer.js file, add the following;



const editor = document.getElementById('editor');
const findInput = document.getElementById('find-input');
const replaceInput = document.getElementById('replace-input');
const findButton = document.getElementById('find-button');
const replaceButton = document.getElementById('replace-button');

findButton.addEventListener('click', () => {
  const searchText = findInput.value;
  const searchRegex = new RegExp(searchText, 'g');
  const editorContent = editor.innerHTML;
  const highlightedContent = editorContent.replace(searchRegex, `<span class="highlight">${searchText}</span>`);
  editor.innerHTML = highlightedContent;
});

replaceButton.addEventListener('click', () => {
  const searchText = findInput.value;
  const replaceText = replace

You have successfully built a text editor from scratch using HTML, CSS and javascript. In the next section, we are going to go through how to package and distribute the text editor application to make it available to the public.

PACKAGING AND DISTRIBUTION

To package and distribute the Electron text editor application for all platforms, you can use the Electron Packager tool. This tool allows you to package the application for multiple platforms including Windows, macOS, and Linux. Here are the steps to package and distribute the application:

I. Install the Electron Packager tool as a dev dependency in the project using npm:



npm install electron-packager --save-dev

II. Add the script below in your package.json file:



"scripts": {
  "package": "electron-packager . --platform=all --arch=all --out=release-builds"
}

III. Run the package script using the following command:



npm run package

This command will create a new directory called release-builds in the project root directory, which will contain the packaged application for all platforms.

The packaged application can now be distributed to users. For example, the developer can create an installer for Windows using the NSIS tool or create a disk image for macOS using the hdiutil command. The packaged application can also be uploaded to a distribution platform such as the Mac App Store or the Microsoft Store.

Code-signing the application for security

Code signing is the process of digitally signing the application with a digital certificate to ensure the authenticity and integrity of the application. Code signing helps users to verify that the application comes from a trusted source and has not been tampered with.

To perform code signing on the text editor application, follow these steps:
I. Obtain a code signing certificate from a trusted certificate authority (CA) such as Comodo, DigiCert, or GlobalSign. Read more on getting a code signing certifcate here.
II. Create a file called electron-builder.yml in the root directory of the project and add the following code to it:



appId: com.example.myapp
productName: My App
win:
  publisherName: My Company
  target: nsis
  signingHashAlgorithms: ['sha256']
  certificateFile: path/to/certificate.pfx
  certificatePassword: mypassword
mac:
  category: public.app-category.developer-tools
  identity: My Company
  entitlements: path/to/entitlements.plist
  entitlementsInherit: path/to/entitlements.plist

III. Replace the appId, productName, publisherName, certificateFile, and certificatePassword with the appropriate values.
IV. For macOS users, create an entitlements file (.plist) that specifies the permissions the application needs to run. Learn more about entitlements files here. If the text editor application needs access to the microphone for some reason, add the following code to the entitlements file:



<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  <key>com.apple.security.device.microphone</key>
  <true/>
</dict>
</plist>

IV. Run the command below to build and sign the application:



electron-builder --mac --win --publish never --config electron-builder.yml

This command will build the application for macOS and Windows, sign it with the code signing certificate, and create a distribution package.

Following the steps above will ensure that your application has been digitally signed and secure for distribution.
Up next, we will discuss how to distribute the application in app stores.

DISTRIBUTION TO APP STORES

Mac OS

Distributing the Electron text editor application through app stores is a great way to reach a wider audience and increase the application's visibility. Here are the steps to distribute the application through app stores:

I. Register as a developer with the app store of your choice. For example, if you want to distribute the application on the Mac App Store, you need to register as an Apple Developer.
II. Generate the necessary certificates and provisioning profiles for the app store.
III. Build the application using the appropriate build configuration for the app store. On the Mac App Store, you need to build the application using the mas configuration. Make sure the following code is present in the electron-builder.yml file:



appId: com.example.myapp
productName: My App
mac:
  target: mas
  entitlements: path/to/entitlements.plist
  entitlementsInherit: path/to/entitlements.plist

IV. Submit the application for review on the app store. The review process usually takes several days or weeks. Follow these steps to submit your application
V. Once the application is approved, it will be available for download on the app store. Users can search for the application by name, or browse the app store's categories to find it.
VI. Maintain the application by releasing updates and bug fixes as needed. App stores typically provide tools to manage application updates and user feedback.

Windows OS

Distributing the application on windows OS can be done using the Microsoft app store. Follow these steps to distribute your application;

I. Register for a Microsoft Partner Center account and create a developer account. Follow this link to learn all about the partner program.
II. Generate a code signing certificate using a tool like OpenSSL or Visual Studio. This certificate will be used to sign the application package. Refer to the sub-section about code signing above.
III. Create a Windows app package by using the msix configuration in the electron-builder.yml file. Use the code below:



appId: com.example.myapp
productName: My App
win:
  target: msix
  certificateFile: path/to/certificate.pfx
  certificatePassword: password

IV. Sign the app package with the code signing certificate using the SignTool utility. Use the following code:



signtool sign /a /t http://timestamp.digicert.com /f path/to/certificate.pfx /p password MyApp.msix

V. Submit the app package to the Microsoft Store through the Microsoft Partner Center portal. The app will undergo a review process before being published.

Linux OS

The Linux OS distributes their application using the Snap store. Follow these steps to get started on the distribution:
I. Create a snap package for the application by using the snap configuration in the electron-builder.yml file. Use the code below:



appId: com.example.myapp
productName: My App
linux:
  target: snap

II. Install the Snapcraft CLI tool and run the snapcraft command in the application directory to create a snap package. Use the code below:



sudo snap install snapcraft --classic
snapcraft

III. Upload the snap package to the Snap Store using the Snapcraft CLI tool. Use the code below:



snapcraft login
snapcraft push myapp_1.0_amd64.snap --release=edge

IV. The application will undergo automated tests before being published to the Snap Store. Once published, users can find and install the application from the Snap Store.

DEBUGGING AND TROUBLESHOOTING

Debugging is an important part of the software development process. A framework or library is not useful if it cannot be easily debugged and Electron applications are no exception. Luckily, the debugging process in an Electron application is fairly straight-forward mostly because they are not using a new technology. Follow the steps below to debug and troubleshoot Electron applications :

Use the developer tools: Electron provides a powerful set of developer tools that can help you debug and troubleshoot your application. You can open the developer tools by pressing Ctrl+Shift+I or Cmd+Option+I. The developer tools include a console, a debugger, and other tools that can help you identify and fix issues in your code.
Check the application logs: Electron applications generate log files that can provide valuable information about errors and exceptions. You can view the logs by opening the console or by using a tool like electron-log.
Use the remote debugger: The remote debugger allows you to debug your application from a separate process or machine. To use the remote debugger, you need to start your Electron application with the --remote-debugging-port flag, and then connect to it using a tool like Chrome DevTools.
Check the system requirements: Electron applications have certain system requirements, such as specific versions of Node.js and Chromium. Make sure that your application is running on a supported platform and that all dependencies are installed correctly.
Use error handling and logging: Proper error handling and logging can help you identify and troubleshoot issues in your code. Make sure that your application handles errors gracefully and logs relevant information about errors and exceptions.

CONCLUSION

In this user guide, we have made a deep dive into the Electron JS framework, and successfully built a fully functional text-editor in the process. We covered the basics of setting up a development environment for creating a text editor desktop application using Electron JS. We also explored more advanced features such as implementing keyboard shortcuts, using third-party libraries and frameworks, and packaging and distributing the application to various app stores.

As with any software development project, debugging and troubleshooting are essential parts of the process. We have discussed some tips and techniques for debugging and troubleshooting Electron applications, including using the developer tools and checking the application logs.

Overall, Electron JS is a versatile and powerful framework that can be used to create a wide range of desktop applications. With the knowledge and skills gained from this user guide, you can confidently create your own desktop applications using Electron JS and take advantage of its many features and benefits. Happy coding!

Reading Recommendations

Building an app with Electron and Vue by Elijah Asaolu: Walks you through the process of building a desktop application using Electron and Vue.js.
Electron Security: Provides a detailed guide on how to secure Electron applications against common vulnerabilities.
Electron vs. NW.JS by Chris Hawkes: Compares two popular desktop application frameworks, Electron and NW.js, and discusses the pros and cons of each.
Electron Apps: A list of popular software companies who have adopted Electron JS.
Neutralino JS: A frame work like Electron JS that allows you to Build lightweight cross-platform desktop apps with JavaScript, HTML, and CSS.

Tableau: Your Ultimate Guide to Data Visualization

Busayo Samuel — Sun, 02 Apr 2023 20:15:28 +0000

I. Introduction

II. Getting Started with Tableau

III. Creating Visualizations

IV. Creating a dashboard

V. Sharing and Collaborating

VI. Conclusion

Introduction

Tableau is one of the most popular data visualization platforms out there and for good reason. Tableau was created by a company called Tableau Software, which was founded in 2003 by Chris Stolte, Christian Chabot, and Pat Hanrahan. They developed Tableau as a data visualization tool to help people see and understand their data better. The first version of Tableau was released in 2004. Since then, Tableau has become a leading data visualization tool used by individuals and organizations worldwide.

Data analysts prefer to use Tableau because it has a simple-to-use platform for combining and displaying data without requiring any coding skills. Tableau has many helpful tools that make it quick and effortless to create data visualizations, and its user interface is straightforward to navigate.

By the end of this user guide, you will be able to navigate around the Tableau interface, create data visualizations and join imported data from multiple sources for data analysis.

Getting started with Tableau

The Tableau has both the desktop and web interface which can both be used for data visualizations, which can then be shared to the public through Tableau public. Since Tableau is basically a free and open source platform, they have a large community of Tableau users who share their data visualizations on the platforms for other people in the community to interact with.

To get started navigate to Tableau public on the web and create an account.

Click on the "Sign up for Tableau Public" button to create a new account. After you have filled in your details and you have signed into your account, you will be navigated to the home page.

To get started, click on "create" on the homepage, then select "web authoring". This will take you to the workbook page where you can work with data and make visualizations.

Getting sample data

To use the workbook page, you need a dataset. Here's how to get it:

Go back to the Tableau public home page.
Click "resources" on the navbar.
Select "Sample data".
Download the "Netflix Movies and TV Shows" dataset. The sample data page can be found here

Importing dataset into Tableau

On the workbook page, you will see a small window appear. In this window, click the button that says "upload file from computer." After that, choose the dataset that you just downloaded and add it to the workbook. To inspect the tables in the dataset, click on the table icon that's located on the right of each of the table names, a new web page will open up. This page contains the details of the selected table.

Connect multiple tables

Tableau helps us to connect different tables that have the same keys easily. You don't need to write any code, you just need to select and drag the tables you want to join together and then choose the common key to merge them. You do not have to physically merge the tables to connect them, pointing out their similar keys is enough for Tableau to intuit their connection.

Drag all the tables to the right side of the screen. If you inspect each table and you will see that they all have a column called "show_id". This column is important because it links all the tables together.

When the tables are on the right side of the screen, click on "update now" on the bottom right side of the screen to update their relationship.

Creating visualizations

Making visuals is a really important job for data experts when they use Tableau. It's not just about computing or getting data and cleaning it. Knowing how to make visual presentations is vital to explain what the data means to you and your listeners. This basically gives the data a voice to narrate its story. Being able to do this is a very important ability that will help you progress in your career as a data analyst.

To start creating visuals in Tableau, go to the bottom of the page and find the tab labeled "sheet 1". Click on this tab to go to the page where you can create your visualization. The image below shows you what your screen should look like.

Creating a line chart

The dataset for this visualization was taken from Tableau's sample data store and has not yet been cleaned. Usually, it's not suggested to clean data on Tableau as it mainly focuses on data visualization. However, for this tutorial, you will be able to modify your data on the worksheet.

We'll use the "Release year" and "show id" columns in the "netflix_titles" table for this visualization. The "Release year" column is in the wrong data type. It is currently a string type, and that is why it has a green "abc" prefixed text, this indicates it's data type. To fix it, hover on "release year" and click on the white arrow that appears. Next, hover on "change data type" and select "date" from the dropdown menu. This will change the data type to date.

Drag the "Release year" to the columns panel on the right hand side of the page. Then drag the "show_id" to the rows panel. This will create a Gnatt chart, but it's not the one we want. Click on "show_id" button on the pane, select "Measure" and choose "count" from the menu that appears. This will count how many times a "show" appears in a given year. If you've done everything correctly, your screen should look like the image below.

To filter the show_id values and remove null values. Drag the show_id column to the filter panel located in the middle column of the page. Click on the new filter button for "show_id" and select "show all values", then deselect "null" to exclude null values in the visualization.

Creating a packed bubble chart

To make a packed bubble chart that counts and aggregates categories, create a new sheet by clicking on the icon with a plus next to "sheet 1" at the bottom of the page. This will give you a blank sheet to create a new chart. You can change the name of the sheet by double-clicking on its current name at the bottom of the page, then typing in the new name and pressing enter to save.

For this chart, select the type column in the netflix_titles table and drag it in the rows pane. Then drag the same column in the columns pane. Select any of the two type columns you selected and click on it, to bring out the drop down menu, hover on "Measure" to select count. This will count the movie type in the table. The second column that was not converted will serve as the label for the the count values.

On the right most part of the page, click on the chart icon with the text "show me" beside it. This will reveal the charts available for use. Select the one with multiple circles to automatically create a packed bubble chart for the movie types. Currently null values are present in the columns. You can remove it by adding the type column to the filter pane and deselecting the null value like you did in the line chart above.

If all goes well, your chart should look similar to the image below.

You can continue experimenting with the other chart types available in the "show me" panel. Up next, you will create a simple dashboard with your charts.

Creating a dashboard.

Tableau has a special page just for making dashboards. To find it, click on "dashboard" in the menu bar. When you click on the dashboard link, a new tab will appear at the bottom of the screen that says "dashboard 1". This shows you that you've created a new dashboard. You can give your dashboard a different name by double-clicking on the text.

Dashboard tools

The left-sidebar on the dashboard interface contains the settings and toolbar needed to build the dashboard. Let's go through the interface.

On the top, there is a tab with dashboard and layout settings as seen below.

Device preview

The default view is the desktop view. The phone view will automatically make the desktop layout stack on top of each other in order to make the desktop layout responsive.

Sheets

The sheets are all your previously created charts. They are automatically loaded on the dashboard. To add a sheet to the dashboard, double click on the name of the sheet or drag and drop the chart to the dashboard builder panel.

Objects

The dashboard can have extra features added to it for specific purposes. You can include a container that goes up and down or side to side to hold your charts, or pictures from outside sources. The "Ask Data" tool is powered by artificial intelligence and allows you to ask a question and receive an answer based on the data available on the dashboard.

Layout

The layout tab allows you to style your dashboard to your preference. Here, you can adjust the size of the dashboard and even the background color to suit the theme of your data or the company that owns the data.

Floating or Tiled layout

When creating a dashboard, how things are arranged is crucial. It can be frustrating when the layout isn't aligning the way you want it to be. Luckily, Tableau helps data analysts by providing two layout options: tiled or floating. This makes arranging things much easier. Floating layout allows you to freely position each view on the dashboard without being restricted to a fixed grid or alignment. This means you can adjust the size and position of each view as needed, allowing for more flexibility and creativity in your dashboard design. However, this can also make it more difficult to maintain a consistent layout and can sometimes result in views overlapping or being hidden behind other views.

Tiled layout, on the other hand, automatically arranges views in a grid-like fashion, with each view taking up an equal amount of space. This provides a more structured and organized look to your dashboard, making it easier to compare different views side-by-side. However, this can also be more limiting in terms of design options, as you are restricted to the predetermined grid.

Ultimately, the choice between floating and tiled layouts depends on your specific needs and preferences for your dashboard design.

Let's get started on creating a simple dashboard with only 4 charts.

Adding charts to the layout

To make the charts on the page movable and adjustable, choose the floating layout located on the sidebar, on the bottom left of the dashboard page.

Increase the size of the chart

To increase the size of the chart, select the chart, then hover on the edges of the chart till you see a double arrow icon, this indicates that the size can be adjusted.

Move the chart

To move a chart on a page, first select the chart. Then, move your mouse cursor to the top area of the chart until you see an icon with arrows pointing in all directions. This icon means that the chart can be moved.

Adjust and change the sizes of the chart till it looks good enough. Here is how my dashboard currently looks.

Great job on creating a Tableau dashboard from scratch! Now, let's learn how to share your visualizations with others, including the public, and work with other team members to collaborate on your project.

Sharing and collaborating

Follow these steps to share your work on Tableau public;

A. Share or publish your visualization:

Open the workbook that contains the visualization you want to share.
Click the "Server" menu in the top navigation bar, and select "Publish Workbook".
In the "Publish Workbook" dialog box, select the project to which you want to publish the visualization, and click "Publish".

B. Set Permissions:

Once the workbook is published, click the "Permissions" button to set the permissions for the visualization.
In the "Permissions" dialog box, select the "Everyone" group, and choose the permission level you want to give them (e.g., "View").
Click "Add" to save the permission changes.

C. Publish to Tableau Public:

To make the visualization publicly accessible, publish it to Tableau Public.
Click the "Server" menu in the top navigation bar, and select "Publish to Tableau Public".
In the "Publish Workbook to Tableau Public" dialog box, enter a title and description for the visualization, and choose the category and tags that apply.
Click "Publish" to upload the workbook to Tableau Public. Share the link:

Once the visualization is uploaded, you can share it with others by sharing the URL.
To get the URL, open the visualization on Tableau Public, and copy the link from the browser address bar.
You can also share the link on social media or embed the visualization on a website.

Collaborate

Tableau allows you to work as a team and collaborate on your visualization. This feature allows for a more efficient and team-oriented workflow. To get started, follow these steps;

Step 1: Invite collaborators
To invite collaborators to your project, click on "Share" in the top right corner of the screen. Enter the email addresses of the people you want to invite and select the level of access you want to give them (Editor or Viewer). You can also include a message to your collaborators.

Step 2: Collaborate on the project
Once your collaborators have accepted your invitation, they can access the project and work on it with you. You can collaborate on different parts of the project by creating and sharing worksheets, dashboards, and stories. You can also leave comments and annotations for your collaborators to see.

Step 3: Manage permissions
You can manage permissions for your collaborators by clicking on "Share" and selecting "Manage Permissions". Here you can change the level of access for each collaborator, remove collaborators from the project, and add new collaborators.

Conclusion

In this user guide, you have hopefully learned what Tableau is, how to import data into a Tableau workbook, how to connect different tables, how to create visualizations, and how to collaborate with other people using the platform. Tableau is an amazing platform for creating data visualizations and I hope you have learned enough in this user guide to continue to build amazing visualizations in Tableau as you continue in your data analytics journey. Happy building!!!

Using ChatGPT and React JS to Create an Automated Cover Letter and Resume Builder

Busayo Samuel — Sun, 02 Apr 2023 12:55:10 +0000

INTRODUCTION

I once heard someone say that looking for work is a full-time job, and I couldn't agree more. It's challenging enough to get ready for interviews and put your best foot forward, but we also have to create a tailored CV and cover letter for each application, which adds another layer of difficulty to the process. I got the idea to use AI to change my cover letters when someone on Twitter suggested combining AI and the keywords from job descriptions to construct one. The results were so fascinating that I decided to build an application on top of the Chat GPT API.

For context, Chat GPT is a type of artificial intelligence (AI) program that is designed to simulate human conversation. It is used in a variety of applications, from customer service chatbots to automated assistant bots. Chat GPT technology is also used to build virtual agents that can answer questions, provide advice, or perform specific tasks. Chat GPT technology is becoming increasingly popular due to its potential to automate processes and reduce human labor. Chat GPT technology is powered by natural language processing (NLP) algorithms, which allows the chatbot to understand the user's input and respond appropriately.

In this tutorial, you will be using react JS and the Chat GPT API to build a resume and cover letter builder.

PREREQUISITES

You should be familiar with React JS and CSS
You should know how to query endpoints

Before we get started, you need to have an account on open AI. You can get started here. After you have created an account, do the following to get your API key;

Click on the avatar on the navbar with your profile picture to open up the dropdown menu
Select "view API keys" to create an API key.
Keep the API key in a safe place, you will make use of it later in the tutorial.

GETTING STARTED

To get the ball rolling;

create a folder in your documents folder and name it "resume_builder" or any name you prefer.
Go to your code editor and open the folder.
In your terminal, enter npx create-react-app@latest ./ to create a react JS starter file in your root folder.
In the root of your folder create a .env file and add your openAI API key in the file. The key will be called REACT_APP_GPT_KEY. For this tutorial, I will be using tailwind CSS for styling, however if you prefer to use other types of styling, that's fine. You will need to install 3 dependencies to get started. In your terminal enter npm install react-router-dom react-toastify react-to-print.

CREATING PAGES AND ROUTES

This application will have just 3 pages, so you will to create a folder called pages inside the src folder. The pages folder contains 3 files called, coverLetter.jsx, Home.jsx and Resume.jsx.
In your App.jsx folder, add this code to create the appropriate routes for all the pages using react-router-dom.

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import { ToastContainer } from "react-toastify";
import "./App.css";
import "react-toastify/dist/ReactToastify.css";
import CoverLetterForm from "./pages/CoverLetterForm";
import Home from "./pages/Home";
import Resume from "./pages/Resume";

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/resume" element={<Resume />} />
          <Route path="/cover-letter" element={<CoverLetterForm />} />
        </Routes>
      </Router>
      <div>
        <ToastContainer
          position="top-right"
          autoClose={3000}
          hideProgressBar={false}
          newestOnTop={false}
          closeOnClick
          rtl={false}
          draggable
          pauseOnHover
        />
      </div>
    </div>
  );
}

export default App;

Did you notice that after the routes, there is a component called ToastContainer? We will be using this to render alerts for the application using react-toastify.

Creating the home page

The home page for this application is a hero section with two navigation buttons and an image. You can style your home page as you deem fit, for this tutorial I will focus more on the functionality part of the application.

Navigating to the resume and cover letter forms

Add the following code to the hero buttons to navigate to different pages in the application. You will need to import useNavigate from react-router-dom.

  <button onClick={()=>navigate('/resume')}>
              Create Resume
  </button>
  <button onClick={()=>navigate('/cover-letter')}>
              Create Cover Letter
  </button>

When you click on the create resume button, you should be navigated to a new page that shows the form for creating the resume. It should look like the image below.

ADDING FUNCTIONALITY TO THE RESUME FORM

The form component is controlled using react useState using the code below.

 const [data, setData] = useState({
    name: dataStorage.name || "",
    position: dataStorage.position || "",
    linkedin: dataStorage.linkedin || "",
    positions: dataStorage.positions || [
      { position: "", duration: "", company: "" },
    ],
  });

The state is an object that contains the name of the applicant, their current position, linkedIn URL, and an array of objects that contains data about the past positions they have held.

Next, you are going to write a code that allows the user to add and remove a new position in the positions array. This can be achieved using the functions below.

 const handleAddPosition = () => {
    setData({
      ...data,
      positions: [
        ...data.positions,
        { position: "", duration: "", company: "" },
      ],
    });
  };
  const handleDeletePosition = (i) => {
    const newPositions = data.positions.filter((item, index) => 1 !== index);
    setData({ ...data, positions: newPositions });
  };
  const handleUpdatePosition = (e, index) => {
    const { name, value } = e.target;
    const list = [...data.positions];
    list[index][name] = value;
    setData({ ...data, positions: list });
  };
 const handleChange = (e) => {
    setData({ ...data, [e.target.name]: e.target.value });
  };

The handleAddPosition is used to create a new position inside the positions array. The spread operator is used to add the current positions in the list and then it adds a new object { position: "", duration: "", company: "" } to the array.

When the add button in the form is clicked the "positions held" form inputs will increase by one as depicted in the image below.

The handleDeletePosition takes in an index value and then uses filter array method to find the index in the array and then filter it out.

The handleUpdatePosition is the function triggered when onChangeis called on any of the form elements. It also takes in an index, which is the position of the object in the array. This index is used to mutate the state values using the values gotten from the user. We will then call setState with the changed value of the positions array.

Lastly, the handleChange function changes the state of name, position and linkedIn. I separated the state change functions in handleChange and handleUpdatePosition to not overcomplicate things because the functions handle state changes for different data types.

Now that our input fields are controlled, it's time to move on to the next big step.

CONNECTING TO THE API

To connect to the API, create a file called api.js in the root of your project and add this code to the file

const DEFAULT_PARAMS = {
    model: "text-davinci-002",
    temperature: 0.7,
    max_tokens: 256,
    top_p: 1,
    frequency_penalty: 0,
    presence_penalty: 0,
  };

  export async function getData(params = "") {
    const params_ = { ...DEFAULT_PARAMS, prompt: params };
    const requestOptions = {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: "Bearer " + String(process.env.REACT_APP_GPT_KEY),
      },
      body: JSON.stringify(params_),
    };
    const response = await fetch(
      "https://api.openai.com/v1/completions",
      requestOptions
    );
    const data = await response.json();
    return data.choices[0].text;
  }

The DEFAULT_PARAMS object contains variable that is Chat GPT specific. It will be sent along with the API request inside a params object.
The function for connecting to the API is called getData. It takes in an argument called params with the default value of an empty string. This params is a series of prompts that will be used to query the GPT endpoint and it will be gotten from our input fields in the frontend. In the Authorization space, you will notice that we are concatenating the "Bearer" string with another string String(process.env.REACT_APP_GPT_KEY). This "REACT_APP_GPT_KEY is the API key gotten from the GPT website, and was saved in your .env file earlier in this tutorial.

Now that the API function has been set up, we can import it in your React file. To do this, you will add this code to your Resume.jsx file

import { getData } from "../api";

After getData has been imported, you will write a function called handleBuildData, this is the function that will be called when you click the submit button. This function will call getData and communicate with chat GPT to get your new Resume. Here is the code for handleBuildData.

 const handleBuildData = async (e) => {
    e.preventDefault();
    //👇🏻 The job description prompt
    //prompt1
    const prompt1 = `I am writing a resume, my details are \n name: ${
      data.name
    } \n role: ${data.position} I have worked ${remainderText()}.
         \n. Can you write a 50 words description for the top of the resume (first person writing)?`;
    //prompt 2
    const prompt2 = `I am writing a resume, my details are \n name: ${
      data.name
    } \n role: ${data.position}. \n During my years I worked at ${
      data.positions.length
    } companies. ${remainderText()} \n Can you write me a list of soft skills seperated by numbers
         a person in this role will possess?.
         The list should be suitable for a resume (in first person)? Do not write 
         "The end" at the end of the list!!!`;
    //prompt3
    const prompt3 = `I am writing a resume, my details are \n name: ${
      data.name
    } \n role: ${data.position}. \n During my years I worked at ${
      data.positions.length
    } companies. ${remainderText()} \n ${JobText()}`;
    //prompt4
    const prompt4 = `I am writing a resume, my details are \n name: ${
      data.name
    } \n role: ${data.position}. \n During my years I worked at ${
      data.positions.length
    } companies. ${remainderText()} \n Can you write me a list seperated in numbers of 5 hard skills a person in this position should possess. The list should be suitable for a resume(in first person)? Do not write "the end" at the end of the list`;

    setLoading(true);
    try {
      const [hardSkills, skills, objective, jobResponsibilities] =
        await Promise.all([
          getData(prompt4),
          getData(prompt2),
          getData(prompt1),
          getData(prompt3),
        ]);
      //👇🏻 put them into an object
      const chatgptData = {
        objective,
        jobResponsibilities,
        skills,
        hardSkills,
      };
      console.log(chatgptData);
      saveToStorage(chatgptData);

      setLoading(false);
      navigate("/resume");
    } catch (Err) {
      setLoading(false);
    }
  };

Yikes!!! That looks like a lot of code doesn't it? Well, let me break down what each line of code is doing so we are on the same track.

There are a total of 4 prompts in this function. A prompt is just like a request or question that you send to Chat GPT, before it can return a reply to you. If you have used the Chat GPT interface, you'd recall that you usually have to input something to the AI before you can get a reply, what you're sending is a prompt and that's exactly what we are trying to do here.

The prompts are in the code above are;

A list of soft skills
A list of job responsibilities
A list of hard skills
An objective for the applicant.

The prompt uses the data gotten from the input fields to support the request and to get a more tailored reply, depending on the information supplied.

A try and catch block is used to catch any possible error that might occur in the code. A promise.all method is used to chain all the getData function calls for each prompt and the result is returned in an array.
This array is then saved in an Object called chatgptData. If you would like to use localStorage to persist your data, you can call saveToStorage to do this. The function can be found below.

 const saveToStorage = ({
    objective,
    jobResponsibilities,
    skills,
    hardSkills,
  }) => {
    const newData = {
      name: data.name,
      position: data.position,
      linkedin: data.linkedin,
      positions: data.positions,
      objective,
      jobResponsibilities,
      skills,
      hardSkills,
    };
    localStorage.setItem("job_info", JSON.stringify(newData));
  };

After the data has been successfully returned, we can then navigate to the resume page, where we populate the fields with our newly returned resume data.

import React, { useEffect,useRef } from "react";
import { useNavigate } from "react-router-dom";
import ResumeHead from "../components/ResumeHead";
import ReactToPrint from "react-to-print";
const Resume = () => {
  const componentRef = useRef();
  const navigate = useNavigate();
  const dataStorage = localStorage.getItem("job_info")
    ? JSON.parse(localStorage.getItem("job_info"))
    : {};
  console.log(dataStorage.jobResponsibilities);
  useEffect(() => {
    if (Object.keys(dataStorage).length < 1) {
      navigate("/");
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [navigate]);
  const replaceWithBr = (string) => {
    return string?.replace(/\n/g, "<br />");
  };
  return (
    <div ref={componentRef} className='my-8'>
      <p
        className="ml-5 mt-4 cursor-pointer font-body text-white hover:underline"
        onClick={() => navigate("/")}
      >
        Back
      </p>
      <div className="sm:w-[90%]  font-medium text-[14px] md:w-[70%] text-gray-900 font-body mx-auto  bg-white my-4 p-4">
        <div className=" ml-auto flex flex-col items-end justify-end">
          <p className="text-[22px] capitalize font-semibold text-gray-700">
            {dataStorage.name}
          </p>
          <p className="text-[14px] uppercase">{dataStorage.position}</p>
          <a
            href={dataStorage.linkedin}
            target="_blank"
            rel="noreferrer "
            className="text-cyan-500 underline"
          >
            Linkedin
          </a>
        </div>
        <ResumeHead text={"Bio"} />
        <p className="">{dataStorage.objective}</p>
        <ResumeHead text={"technical skills"} />
        <p
          dangerouslySetInnerHTML={{
            __html: replaceWithBr(dataStorage.hardSkills),
          }}
          className="-mt-8 font-normal"
        />
        <ResumeHead text={"soft skills"} />
        <p
          dangerouslySetInnerHTML={{
            __html: replaceWithBr(dataStorage.skills),
          }}
          className="-mt-8 font-normal"
        />
        <ResumeHead text={"professional experience"} />
        <div className="border  border-gray-400">
          {dataStorage.positions.map((item, i) => (
            <div className="">
              <div className="flex bg-gray-200 border-b mb-2 px-3 py-1 border-gray-500  justify-between ">
                <div className=" border-right ">
                  <p className="text-gray-900 capitalize text-[16px] font-semibold">
                    {item.position}
                  </p>
                  <p className="capitalize">{item.company}</p>
                </div>

                <p>{item.duration}</p>
              </div>
              <div>
                <p
                  dangerouslySetInnerHTML={{
                    __html: replaceWithBr(
                      dataStorage.jobResponsibilities
                        ?.split("The end")
                        ?.slice(0, dataStorage.positions.length)[i]
                    ),
                  }}
                  className="-mt-8 font-normal px-2 py-2"
                />
              </div>
            </div>
          ))}
        </div>
        <div></div>
      </div>
      <ReactToPrint
        trigger={() => {
          return (
            <button className="bg-cyan-700 transition-all hover:translate-x-1 mb-7 cursor-pointer text-white px-6 py-2 rounded-2xl flex justify-self-center ml-2 sm:ml-14 mt-10">
              Print
            </button>
          );
        }}
        content={() => componentRef.current}
      />
    </div>
  );
};

export default Resume;

In the resume page, the stored data is retrieved and stored inside the dataStorage variable. This variable is then used to populate the resume page with whatever data is needed, depending on the type of resume you want to build.

To print your resume, you will be using the ReactToPrint component gotten from react-to-print package. To do this, create a ref variable called componentRef. This componentRef is then attached to the div that wraps the entire jsx on the Resume page. You can go through the code above to understand better.

At the end of the jsx code, you can add a button for printing and wrap it in the ReactToPrint component like below

 <ReactToPrint
        trigger={() => {
          return (
            <button className="bg-cyan-700 transition-all hover:translate-x-1 mb-7 cursor-pointer text-white px-6 py-2 rounded-2xl flex justify-self-center ml-2 sm:ml-14 mt-10">
              Print
            </button>
          );
        }}
        content={() => componentRef.current}
      />

This will trigger the print method on your browser to come up and you can then either save the page or print it out.

There you have it guys! You just completely built from scratch an optimized resume builder using the chat GPT API. Have fun with it and improve on the code.

The source code for this project can be found here

Analysing the Demographics of Open Source Contribution and Communities Using Microsoft Excel

Busayo Samuel — Tue, 21 Mar 2023 16:02:05 +0000

After completing the Google Analytics certificate course, I seized the opportunity to conduct a data analytics case study on open source contribution. Despite my background as a tech generalist, I had always been fascinated by the world of open-source contribution. In the past, I had hesitated to pursue it, I was basically making flimsy excuses for why I couldn't get started, majorly because I didn't know who to get started. However, this year I took the plunge and embarked on this journey. So far, it has been an enriching experience for me, as I have had the chance to work and communicate with people from diverse demographics.

In this article, I will be talking about how I conducted a data analytics case study on the open source demographics and the observations I made during the analysis.

The datasets

Obtaining the necessary datasets was a challenge, but after several hours of web scraping and research, I finally found the relevant data. For this case study, I will be using datasets obtained from open source surveys conducted by the following sources:

Github
The Linux foundation

Github dataset

In 2017, GitHub collected demographic data by inviting individuals who used open source repositories on their platform to participate in a survey through a dialog box. Furthermore, smaller groups from other open source communities were contacted through various methods, including mailing lists, to participate in the survey. The objective of collecting this data was to track the following:

Behaviors and preferences around consumption and contribution to open source.
Attitudes and practices around privacy in online spaces when participating in open source projects.
Seeking and providing technical help.
Negative experiences encountered in the open source community, and the resulting consequences.
Employer policies regarding the use and contribution to open source.
The demographics of open source participants and their background in technology

Linux foundation dataset

Hilary Carter, a researcher at the Linux Foundation, collected this dataset in 2021. The survey was designed to investigate diversity, equity, and inclusion (DEI) within open source communities. The aim was to gain a better understanding of the demographics of contributors and the dynamics of participation. The objective was to identify areas of improvement in open source communities specifically, in order to promote inclusive cultures in these environments. By identifying sentiments and gaps, this survey can help advance DEI efforts within open source communities

Technologies used

To clean and transform the data, I utilized Microsoft Excel. Additionally, I used Power BI for data visualization.

Insights

Despite the goal of open source communities to provide equal opportunities to all contributors, a notable gap exists across all demographics, particularly in terms of gender, sexual orientation, and race. This discrepancy begs the question of whether open source is genuinely open to all individuals, or if certain demographics face more significant obstacles or lack interest in contributing to open source projects.

Obstacles faced

According to the data, a majority of respondents, 74.63%, reported no difficulties participating in open source projects. However, it is crucial to further look into the percentage of those who reported facing challenges.

According to the data, 53.44% of respondents reported frequently receiving no response when querying about open source projects while only 8.98% did not get ignored.

Up next, we will examine which specific demographics have influenced the open source community.

Age

According to the data visualization above, the highest age group who are contributing to open source are between 35-54 years. It certainly looks like people who have more stability in their career are more likely to contribute to open source projects.

Employment

Let's take a look at the job types of the respondents.

People who are employed full time or have a part-time job may have more opportunities and resources to contribute to open source projects, as they may have more financial stability and access to technology and time. However, it is important to note that open source contributions are not limited to those who are employed, in fact open source contribution has been known to provide a source of employment for people.

Just 13.21% of respondents reported receiving payment for their open source contributions. Of all the people being payed, 39.16% identify as male, 37.07% identify as female while 23.57% identify as non-binary.

Gender

It is important to have gender diversity in open source communities and to create an environment that is inclusive of all gender identities. By having a diverse group of contributors, there can be a wider range of perspectives, experiences, and ideas that can lead to more innovative solutions.

Unfortunately, the open source community has historically been male-dominated, and there have been barriers to entry for women and other underrepresented gender identities. It is important to address these barriers and actively work towards creating a more inclusive environment for everyone.

Of the total number of respondents in the survey, 51.55% identified as male, 24% as female, and 21.18% as non-binary, while other gender identities comprised only 2% of the population. It's important to note that other genders require greater representation.

Efforts to promote gender diversity in open source communities can include creating mentorship programs, offering scholarships or grants for underrepresented groups to attend conferences and events, and implementing codes of conduct to ensure respectful and inclusive behavior. It is also important to highlight and celebrate the contributions of women and other underrepresented gender identities in the community.

Education

Education has always been a significant factor in determining who contributes to open source projects. The survey found that 38% of the respondents had a master's degree or higher, while 23% had a bachelors degree and 16.4% went to college to learn a vocation.

Higher education levels may provide individuals with the technical skills and knowledge necessary to contribute effectively to open source projects. Additionally, formal education can provide individuals with access to mentorship, networking opportunities, and resources that can help them navigate the open source community.

However, it is important to note that formal education is not the only pathway to contributing to open source projects. Many individuals have developed their skills and knowledge through self-study, online courses, and other forms of informal education. There are also resources and initiatives available to support individuals who may not have access to formal education, such as mentorship programs, online communities, and hackathons.

In summary, while education can be a significant factor in determining who contributes to open source projects, it is not the only pathway, and there are resources and initiatives available to support individuals with diverse educational backgrounds.

Diversity

Regrettably, there is a significant lack of diversity in the open source community, with white individuals comprising over half of the population. Only 9% of respondents identified as Black or African American, 9% identified as Asian, and only 7.67% identified as Hispanic or Latino. These statistics underscore the importance of cultivating an inclusive environment that welcomes contributions from individuals of all backgrounds.

Regarding sexual orientation, 41.16% of respondents identified as heterosexual or straight, 12.76% identified as queer, and other sexual orientations comprised the remaining percentage.

It is important to recognize and respect the diverse sexual orientations represented in the open source community, as this can lead to a more inclusive and welcoming environment. The fact that 12.76% of respondents identified as queer highlights the importance of creating a safe space for LGBTQ+ individuals in the open source community.

To support individuals with diverse sexual orientations, open source communities can implement codes of conduct that prohibit discrimination based on sexual orientation or gender identity. They can also promote diversity and inclusivity by featuring LGBTQ+ speakers at conferences and events, and by providing resources and support for individuals who may be facing discrimination or harassment.

Ultimately, creating an open and accepting environment for individuals of all sexual orientations can lead to a more vibrant and innovative open source community.

Conflicts

Building a community of individuals from diverse backgrounds inevitably leads to the occasional conflict. Therefore, I conducted a more in-depth analysis of the issues surrounding conflicts between different demographics and examined which groups are most likely to be affected.

According to the data, only 8% of respondents frequently witnessed or encountered conflicts, while 28.3% reported occasionally witnessing conflicts.

Interestingly, a higher proportion of asexual and bisexual respondents reported experiencing frequent threats compared to heterosexual respondents. However, it is crucial to note that the total number of heterosexual respondents in the survey was significantly higher than that of other groups.

Inappropriate behavior

Data shows that 47.89% of women and 42.6% of non-binary individuals reported experiencing inappropriate sexual advances from other contributors. In contrast, only 5.02% of men reported encountering such behavior.

The survey also included individuals who reported never experiencing inappropriate behavior on open source platforms. Of this population, 58.36% were men, 21.55% were women, and 18.17% identified as non-binary.

This data highlights the need to create a safe space for women and non-binary individuals in open source communities, as they are more likely to encounter inappropriate behavior while contributing to open source.

How do people react to conflicts and inappropriate behavior?

Let's look at how the data answers this question.

According to the survey results of people who spoke up when they witnessed inappropriate behavior, 45.56% of them were male, 26.18 were non-binary and 24.75% of them were women. It is encouraging to see that some members of the community are willing to stand up against inappropriate behavior, but it is also clear from the data below that more needs to be done to encourage more people to speak up and create a safe space for everyone.

While maintaining a professional and safe space for all individuals is a responsibility that falls on the maintainers and sponsors of open source projects, it is equally important for community members to take an active role in identifying and reporting individuals who may be contributing to conflicts and inappropriate behavior. By reporting such behavior to the necessary authorities, members can help to ensure that appropriate measures are taken to safeguard the community and create a more inclusive environment.

Conclusion

The Linux Foundation and GitHub survey provides valuable insight into the demographics of open source communities and contributions. The data shows that open source communities attract individuals from various backgrounds and career paths. Still, there is a significant gender and diversity gap, and more needs to be done to create an inclusive environment for all.

Furthermore, the survey highlights the importance of education, employment, and collaboration in open-source contributions. Open source projects attract contributors from all over the world, making it a global phenomenon.

Overall, the survey confirms what many have always known: open source is vital to the growth of digital technology, and the community needs to work towards creating an inclusive environment for all individuals.

Links to datasets

Linux foundation
Github survey repository
Github survey dataset

Leveraging JavaScript to Bulk-Fetch Data from Airtable

Busayo Samuel — Mon, 27 Feb 2023 14:13:10 +0000

If you are here, that either means you saw the title of this article and since you have been curious about how to solve fetching data in bulk from Airtable, you immediately clicked on the article, or you are a curious cat who loves reading about "bulk fetching data". Well, just in case you are part of the latter category, I will get started by talking about the wonderful platform called Airtable.

Like its name implies, Airtable is a table that floats on air, okay seriously, Airtable is a popular platform among developers for organizing data. Its intuitive drag-and-drop interface and powerful customization options make it easy to create beautiful, functional databases and spreadsheets. Plus, developers can easily link records across multiple tables to access all the data they need in one place. With its flexibility, developers can quickly and easily customize the layout, fields, and even the formulas used to calculate data. This makes Airtable great for storing and fetching data, allowing developers to easily organize tasks, track projects, and manage customer relationships.

If you are a frontend developer like me, and you don't particularly know how to write backend code then Airtable can be very helpful for creating a no-code backend for simple applications that involves just basic CRUD operations.

While Airtable is very easy to use, recently I discovered that you are only able to fetch 100 data at once and to get more data, you'd have to make another API call, so your paginated page is only restricted to 100 data at once. In my case, I really needed to get all the data all at once from the backend and that made me search extensively to discover how to bulk fetch data. So here I am, sharing this little gem so you don't have to do all the searching I did.

Well, let's get to the coding part. To bulk fetch data at once, you'd still have to get 100 data for one API call you make, then use recursion to call the function again till you have nothing left in your table. This method is not advisable if your data is more than 2000 records because you will end up hitting the endpoint so many times and your loading time will be too long, so you might want to consider other options.

Check out this little function to achieve the recursion functionality below.

 function getData({ offset, result = [] }) {
  let url;
  if (offset) {
    url = `https://api.airtable.com/v0/dataTable?pageSize=${items}&offset=${offset}`;
  } else
    url = `https://api.airtable.com/v0/dataTable?pageSize=${items}`;
  const response = await fetch(url, {
    method: "GET",
    headers: {
      Authorization: `Bearer 
${process.env.REACT_APP_AIRTABLE_API_KEY}`,
    },
  });
  const data = await response.json();
  result = result.concat(data);

  if (!response.ok) {
    throw new Error(data.detail || "Something went wrong.");
  }
  if (!data.offset) {
    console.log(result);
    return result;
  } else {
    console.log(result);
    return getData({ offset: data.offset, result });
  }
}

In this function we are accepting an object that contains an offset value and an array of result, which is initialized as empty. The offset is a string that is usually returned by the Airtable endpoint when a request is made for data that is more than 100 records. On our the first API call, the offset is false because we have not hit the endpoint yet.
We will use a conditional statement to check if this offset value is present, if it is, we will append it to the url.
The next step involves calling the endpoint using any method you would like, you can use inbuilt fetch method, axios or even react query, just ensure that the fetch method returns the correct data from the endpoint.

We will then add the data gotten from the endpoint to the currently empty result array.

The next step is to use another conditional statement to check if there is an offset value returned with the endpoint, if there is an offset value, it means that there are more records to be fetched, so we will call the getData({ offset: data.offset, result })
function again with the new offset value. If there is no offset returned then we will just return the result array with all the concatenated values.
There you have it, we were able to fetch all the values from Airtable using Javascript recursion method.

Byeeee!!!👋👋

Forem: Busayo Samuel

Media-Powered Blog Creator, Content Analyzer and Translation App

What I Built

Demo

Journey

Smart Bookmark Manager

What I Built

Demo

Tools Used

pgvector

pgai

Technology Stack

Final Thoughts

Prize Categories

Building a Web 3.0 E-commerce App with Hardhat and React.js

Introduction

Can transactions in a Web 3.0 e-commerce platform truly remain decentralized?

Could a successful Web 3.0 e-commerce store drive higher adoption of Web 3.0 technologies and enhance user trust?

Prerequisites

Setting Up the Development Environment

Setting up a React project

Setting up Hardhat

Smart contract development

Listing Products

Adding tests

Buying Products

Writing tests for the buy function

Withdrawing

Writing tests for withdrawing

Deploying the contract

Connecting to the front-end

Adding the abi (Application Binary Interface) file

Adding Hardhat to Metamask

Adding Hardhat's test accounts

Loading products from the smart contract

Connecting Metamask to the front-end

Listing products

Creating products modal

Conclusion

Case Studies: Web3 Integration in Traditional Web Development Projects

Integration of Decentralized Finance (DeFi) into Traditional Web Development

Implementation of Non-Fungible Tokens (NFTs)

Implementing Smart Contracts

Conclusion

A Quick Guide to AI-Powered Data Visualization: Create a Smart Dashboard with LogicLoop.

INTRODUCTION

SETTING UP AN ACCOUNT

CONNECTING TO A DATA SOURCE

CREATING A DASHBOARD

CONCLUSION

Build Mobile and Web Apps in a Single Codebase with the Ionic Framework and React JS

Introduction

Getting Started with Ionic Framework 6

Building Web Apps with Ionic Framework 6 and React.js

Exploring the starter template

Components

Building a Movie App

Setting Up the App Layout

Deploying the Application

Testing and Simulating on devices

Best Practices

Conclusion

Additional Resources and Recommendations for Further Learning

Mastering Web Accessibility: A Guide for Frontend Developers

Table of Contents

Introduction

What is web accessibility?

Why is web accessibility important?

How to create web-accessible websites

Conclusion

How to Use Electron.js for Building Desktop Applications with JavaScript, HTML, and CSS

TABLE OF CONTENTS

INTRODUCTION

PREREQUISITES

SETTING UP THE DEVELOPMENT ENVIRONMENT

CREATING THE USER INTERFACE

ADDING FORMATTING FEATURES

Text bolding

Syntax highlighting

Autocomplete

Writing tests for the `buy` function