Forem: Pauline Oraro

Mastering the Basics of UX/UI Design.

Pauline Oraro — Mon, 01 Jan 2024 13:05:53 +0000

Mastering the fundamentals of User Experience (UX) and User Interface (UI) design is important. These disciplines shape the way individuals engage with digital products. We will unravel the fundamental principles that lay the groundwork for creating user-centric digital experiences because UX/UI designers have the power to create visually appealing digital products.

Understanding UX/UI Design
Key Design principles
UX/UI Design process
UX/UI Design tools

Understanding UX/UI Design

User Experience(UX) is the process of creating a product that is easy to use and provides a seamless experience for the user. It works on understanding the needs of the user and creating a product that meets those needs.

User Interface(UI) is the process of creating visually appealing and user-friendly interface that allows users to interact with the product easily. UI designers work on designing the layout, color scheme and typography. They make the product look beautiful and appealing.

UX/UI Design process

Research and analysis
This involves understanding the user's needs, preferences and behavior. UX designers use surveys, interviews to gather data.
User persona creation
After gathering data, UX designers create user personas that represent the user and their needs, helps designers understand the user's needs and design a product that meets those needs.
User journey mapping
It involves the steps that a user takes to complete a task using the product used to identify areas of improvement.
Wireframe creation
They are sketches of the layout of the product. It helps visualize the final product. It allows us to get a basic idea of the layout of any website.
Prototyping
They are working models that allow designers to test the product and get feedback from users.
User testing
This involves evaluating a product by testing it with users.

Key Design Principles

Hierarchy
Helps users move through a product easily.

Information architecture- This is how content is organized across the app or site. The top level is usually a primary navigation menu which you notice when you first open an app or arrive on a site.
Visualy hierarchy- Guides a user's eye to the most important elements on the page for example; headings are larger than body text, links and buttons use different colors.

Consistency
You should maintain uniformity in styles, patterns and interactive elements throughout the interface. It builds familiarity for the users.

Accessibility
This ensures that your product is accessible to many people as possible. This includes catering the needs of people with disabilities.

User-centricity
You should create products that solve users problems. You should must put the user's needs first and make decisions based on what you know about them and what they want from the product.

User control
This involves giving the user the right amount of control over how they interact with a product. This includes incorporating undo and redo functionality, providing cancel buttons and clearly labelling alternative actions and routes the user can take if they want to revert to a particular action.

UX/UI Design tools

Sketch.
Adobe XD.
Figma.
Invision Studio.

A Guide To Writing Clean and Maintainable Code.

Pauline Oraro — Mon, 04 Dec 2023 12:56:06 +0000

When it comes to writing code, the goal is not only to make it work but also to make sure that your code is clean and easy to maintain which is super important for the long run. This blog post will share some simple tips on how to write clean and maintainable code. We'll look at different practices that help you make sure your code is efficient over time. Let's dive into the practices on how to write clean and maintainable code.

Clean code refers to code that is easy to read, understand, and maintain. Clean code is written in a way that reduces complexity and is easy for other developers to comprehend.

Use descriptive and meaningful names.

You should always make a habit to use meaningful names in your code because you will be writing a lot of names for variables, functions, classes. The name that you specify in your code should reveal its use. It should specify the purpose of a variable or function. It will make your code much cleaner and easier to read for yourself and other developers. An example of a variable;

var numberOfUsers = 10;

Keep your code DRY

DRY means don't repeat yourself. Avoid duplicating code within your codebase. The idea behind DRY is to reduce repetition in code by creating reusable components like functions, classes, or modules. This means you can improve maintainability, reduce the chances of introducing bugs when making changes, and make your code more readable.

Follow a consistent coding style.

Choose a coding style that works for you. This includes naming conventions, indentation, commenting, and whitespace usage. It will make your code more readable and easier to understand, even for developers new to the project.

Naming conventions: Follow a consistent naming convention (e.g., camelCase, snake_case, PascalCase) based on the language or community standards.
Indentation: Be consistent with the use of tabs or spaces, and choose one for your entire project.
Commenting: Provide comments to explain your code.
Whitespace usage: Avoid excessive or unnecessary blank lines.

Document and comment your code.

Documentation helps developers and other users understand the code. Include comments in your code to explain how it works and what it does. Additionally, write other documentations such as README files or user manuals, to explain how to use the software. Keep documentation up-to-date to help fellow developers understand the purpose and usage of your code.

Write modular code.

It refers to the practice of breaking down large, complex code into smaller, more manageable units. This makes the code easier to understand, test, and maintain. It offers several benefits:

Reusability: Modular code promotes code reuse that can be used in different parts of the application which saves time and effort in development.
Scalability: By breaking down large code into smaller modules, you can easily modify or remove functionality without affecting the entire codebase. This reduces the risk of introducing bugs.

Organize your project.

A well-structured folder and files make everything clear and easier to understand a project. So make sure that your directory or folder structure should be in an organized manner. It offers several benefits:

Understanding: Developers, including yourself can quickly understand the project's structure.
Navigating easily: An organized structure makes it easy to navigate through the project. Developers can move between files and folders without confusion.

Conclusion

Embrace these practices to keep your code clean and maintainable. Remember, the art of writing code is a journey of continuous improvement, where each line of clean and maintainable code paves the way for the success of your projects in the long term.

Tips For Effective Code Documentation.

Pauline Oraro — Mon, 27 Nov 2023 13:48:40 +0000

In the fast-paced world of software development, writing clear and concise code documentation is a crucial skill that separates good developers from great ones. Whether you're a seasoned coder or just starting on your programming journey, mastering the art of documenting your code can significantly impact the readability, maintainability and collaboration aspects of your projects. In this blog post, we'll delve into essential code documentation best practices and provide practical tips to help you enhance your coding skills. Whether you're aiming to improve your individual coding practices or enhance team collaboration on software projects, our guide is tailored to offer valuable insights and actionable tips. Let's embark on this journey to master the art of code documentation and take your programming skills to new heights.

What is code documentation.

Code documentation refers to the process of creating and maintaining documentation (written text, comments, or other supplementary materials) for a computer program or software project. The main purpose of code documentation is to help developers, users, and other stakeholders understand the functionality, design, and usage of the software.

Tips for effective code documentation.

Start with a comprehensive README file:

It is a foundational principle in effective code documentation. This file serves as the entry point for anyone interacting with the project, whether they are collaborators, contributors, or users. Here is a list of what the README file contains:

Project Overview: The README file provides a brief yet comprehensive overview of your project. It should clearly communicate the purpose of your software so as to help developers understand what your code is designed to achieve.
Installation Instructions: Include step-by-step instructions on how to set up and install your project. This ensures that other developers can easily get your code up and running on their local machines without encountering unnecessary obstacles.
Usage Guidelines: This can include basic code snippets, command-line examples, or even screenshots demonstrating the software in action. Including practical examples helps users quickly grasp how to leverage the project to meet their needs.
Dependencies and Requirements: List any dependencies or external libraries that your project relies on. This information is vital for others to understand the environment your code requires to function properly.
Contributing Guidelines: If you're open to collaboration and contributions from other developers, outline how they can get involved.
License Information: Specify the licensing terms under which your project is released. This is important for legal and ethical reasons, as it clarifies how others can use, modify, and distribute your code.
Contact or Support Information: Provide a way for users or contributors to get in touch with you.

Use meaningful comments:

This emphasizes the importance of providing clear and relevant comments within your codebase to enhance understanding and maintainability. Comments are annotations embedded in the code that are not executed but serve as explanatory notes for developers who read the code in the future. Comments should go beyond merely describing what a piece of code does, they should explain why it's written that way.
As code evolves, it's essential to keep comments in sync with the code changes. Outdated comments that do not reflect the current state of the code can be misleading and counterproductive. When modifying code, take a moment to update or remove any comments that are no longer accurate.

Choose Descriptive Variable and Function Names:

It is a crucial aspect of writing clean and maintainable code. This point emphasizes the importance of selecting names for your variables and functions that clearly convey their purpose and role in the code. It promotes clarity, understanding, and maintainability, contributing to the overall quality of your codebase and making it more accessible to yourself and your collaborators. Descriptive names enhance the readability of your code. When someone, including yourself, reads the code, they should be able to quickly understand the purpose of a variable or function based on its name. This eliminates the need for excessive comments to explain the meaning of each element.

Update Documentation Alongside Code Changes:

Documentation should evolve alongside your codebase. When you make changes to your code, update the corresponding documentation in parallel. This practice prevents the documentation from becoming outdated and ensures that future developers can rely on accurate information. When documentation aligns with the latest version of the code, it accurately represents the current state of the software. Developers who refer to the documentation can trust that the information provided is relevant and applicable to the version they are working on.

Keep it clear and concise:

It is a principle in code documentation that encourages developers to maintain a balance between providing sufficient information and avoiding unnecessary details. The idea is to create documentation that is clear, concise, and directly relevant to the understanding and usage of the codebase. A concise and focused documentation is more likely to be read and understood. Developers often need to quickly grasp the essentials of a codebase, and a redundant documentation can hinder rather than help in this regard.

Conclusion

Code documentation is a craft that requires attention, care, and commitment. By following these tips, developers can create documentation that not only serves as a reliable guide but also fosters collaboration and understanding within development teams.

Debugging Techniques: How To Solve Common Coding Errors.

Pauline Oraro — Sat, 18 Nov 2023 12:24:51 +0000

Debugging is an essential skill for every programmer. No mater how experienced you are, encountering bugs and issues in your code is inevitable. The ability to effectively debug and resolve these problems can significantly impact your productivity and the quality of your software. In this blog post we will explore debugging techniques, helping you to be a more proficient programmer.

The art of reading error messages.

Before you jump into debugging, it is crucial to understand the information provided by error messages. Error messages are your first line of defense in debugging. They hold clues that pinpoint the problem. When encountering an error follow these steps to decode the message effectively;

Read the error message thoroughly- Begin by reading the error message and understand what the error is saying.
Identify the error type- Errors typically fall into categories like syntax errors, runtime errors or logical errors. Knowing the type of error can narrow down the potential causes.
Look for error codes- Error messages often come with error codes or identifiers. These can be useful for searching online or in documentation for more information about the specific error.
Check for line numbers- Many error messages specify the line number where the issue occurred. This is a valuable piece of information that directs you to the exact location in your code that needs attention.
Search for contextual information - Sometimes error messages provide context or suggestions on how to resolve the issue. Read any additional information or suggestions provided.

Isolate the problem

When faced with a bug, don't try to tackle the entire codebase at once, instead embrace the divide and conquer strategy which involves breaking smaller managable pieces to pinpoint and resolve issues.

Isolate the problem area- Begin by identifying where the error or bug is occurring. This might be a specific function, module or a few lines of code. If you are unsure read the error message carefully which points you in the right direction by mentoring line numbers or function names.
Focus on the isolated area- Once you have pinpointed the problem area, concentrate your efforts there.
Use print statements and logs- Insert print statements or log messages strategically within the problem area to track variable values and the flow of your code which will help you understand what's happening and identify the root cause of the issue.
Test incrementally- Test your code after each change make small controlled modifications and check if they resolve the problem. By incrementally testing you can identify the exact change that triggered or fixed the bug.

Utilize debugging tools

Debugging tools are assets for programmers. They offer a more systematic and efficient approach to debugging. Let's explore some of the currently used debugging tools;

Integrated development environment debuggers- Most modern IDEs' offer built-in debugging tools. These tools allow you to step through your code, inspect variables and watch how your program behaves in real time. Examples are; Visual studio, Code blocks, Eclipse.
Standalone debuggers- Some programming languages have standalone debuggers which can use it to debug code that is not tied to a specific IDE. GDB stands for GNU debugger. It is a debugger used for debugging programs written in languages like C and C++.
Browser dev tools- When debugging web applications browser dev tools for example; google chrome dev tools, mozilla firefox dev tools and microsoft edge dev tools can be incredibly useful. They allow you to inspect web page elements, monitor requests and debug Javascript in real time.

Code reviews

No matter how adept a programmer you are, another set of eyes can offer a fresh perspective. During a code review, a fellow developer examines your code for readability and logic errors. An experienced reviewer can spot logical errors, potential security vulnerabilities or inefficient code that might lead to performance issues. Code reviews also provide an opportunity for knowledge transfer within a team. As code is examined and discussed team members gain insights into different parts of the codebase. It fosters a collaborative environment where developers can learn from each other leading to a more skilled and cohesive team.

The Future of Web Development in The Era of AI.

Pauline Oraro — Sat, 11 Nov 2023 08:37:39 +0000

Web development has come a long way since the early days of static HTML pages and simple Javascript animations. The world of web development is constantly evolving and with the rise of AI it is entering a new era. AI technologies have already started to revolutionize the web development landscape making websites smarter, more interactive and user-friendly. In this blog post, we will explore the impact of AI on web development.

Automated web development
One of the most significant changes brought about by AI is the automation of web development tasks. Automated web development is a modern approach to build websites and web applications that leverages automation and pre-built components to simplify the development process. Traditionally web developers have had to write extensive code for various functions like data processing, form validation and user authentication. Tools like AI-powered website builders and content managment systems have emerged, allowing users to create sophisticated websites without deep coding knowledge. This not only speeds up the development process but also makes web development more accessible to non-developers.

Enhanced user experience
AI technologies are playing a crucial role in enhancing the way users interact with websites. Here's how AI contributes to this enhancement;

Chatbots and virtual assistants- many websites now incorporate chatbots or virtual assistants that are powered by AI. These intelligent agents can engage with visitors in real time, answering their questions, assisting with tasks and provide information. They do this through natuaral language processing. By having these chatbots readily available, websites can offer instant support and guidance making the user's journey more convenient and efficient.
Personalization- AI algorithms can analyze user behavior, preferences and past interactions with a website. This data is then used to create a highly personalized experience for each user. From recommending products or content suggestions, personalization makes users feel like the website understands and caters to their individual needs.
Accessibility- AI can make websites more inclusive by ensuring they are accessible to people with disabilities. Screen readers, voice assistants and other AI-driven tools can help users with visual or auditory impairments access and interact with websites ensuring a more inclusive and user-friendly experience for all.
Efficient navigation- AI can improve website navigation by suggesting relevant links, offering search suggestions or guiding users to the information they seek. This ensures that users can easily find what they are looking for, reducing frustration and enhancing the overall experience.

Content generation and curation
Content creation is a time-consuming and labour-intensive aspect of web development. AI-powered content generators such as chat-GPT are already capable of producing human-like text making it easier to draft blog posts product descriptions and other content. AI can assist in creating and curating content, reducing the time and effort required by human content creators.

Improved S.E.O strategies- Search engine optimization is an ever-evolving field in web development. AI is playing a pivotal role in enhancing S.E.O strategies. AI-driven S.E.O tools can analyze vast amounts of data including keyword trends, backlinks profiles and user behavior to fine-tune S.E.O efforts. They can predict algorithm changes, monitor rankings and suggest on-page improvements enabling web developers to stay ahead of the curve and higher search engine rankings.

Streamlined development process- Developers can leverage AI for automated code generation, helping to reduce the time and effort required to write and debug code. Tools like Github Copilot use machine learning to assist developers in writing code more efficiently, offering code suggestions and autocompletions. Testing and quality assurance can also benefit from AI. Automated testing tools powered by AI can identify and report issues more quickly improving the overall quality of web applications. This ensures that web developers can deliver bug-free, reliable products to clients and end-users.

Conclusion
The field of AI is in a constant state of evolution. To remain competitive, web developers need to stay updated on the latest AI developments and adapt to the changing landscape of web development.

Learn React By Building A React Finance Tracker.

Pauline Oraro — Sat, 07 Oct 2023 11:19:00 +0000

In today's fast paced world managing your finances effectively is a necessity. Keeping a close eye on your income and expenses can help you make informed financial decisions, save for your goals and achieve financial stability. Fortunately, technology has made this task more accessible and user-friendly than ever before. In this blog post, we will embark on a journey to create a powerful and customizable financial tracking tool using react.

You can view the code and live demo.

This is what we will be building;

The user can;

Add income and expenses which have a name and a cost.
Remove/delete the transactions.
View the balance.
View their total income and expenses.

Prerequisites.
Setting up the project.
Display the financial details.
Disply the transaction details.
The financial tracker

Prerequisites

Before we dive into the tutorial, make sure you have the following;

Node.js and npm- Ensure you have Node.js and npm(Node Package Manager) installed on your machine. You can download and install them from the official Node.js website.
Basic understanding of React- Familiarize yourself with the basics of React if you haven't already. You can check out the official react documentation for a quick start.
Code editor- You can use a code editor of your choice.

Setting up the project

Let's start by creating a new react application using create-react-app. Open your terminal and run the following command;

npx create-react-app finance-tracker

This command will create a new React project named "finance-tracker". Once the project is created, navigate to the project directory;

cd finance-tracker

Next we are going to install a package that allows us to generate ID's, run the following command;

npm i uuid

Jump into the src folder and create a new folder called components. Within the components folder create other three folders.

moneyDetails- It shows the balance, income and expenses. It has two files; detail.js and details.css.
transactionItem - It contains the history of all transactions and has two files; item.js and item.css.
moneyManager - It is the financial tracker which allows users to add, view and delete transactions. It has two files; manager.js and manager.css.

Here is what the folder structure should look like;

Display the financial details

import './details.css';

//responsible for rendering the balance, income and expenses
const MoneyDetails = props =>{
    //represent the financial values for balance, income and expenses
    const {balanceAmount, incomeAmount, expensesAmount} = props
    return (
        <div className="money-details-container">
            <div className="balance-container">
                <img 
                src = "/balance-sheet.png"
                alt="balance"
                className='details-img'
                />
                <div>
                    <p className='details-text'>Your Balance</p>
                    <p className='details-money' testid="balanceAmount"> Ksh {balanceAmount}</p>
                </div>
            </div>
            <div className='income-container'>
                <img 
                src = "/growth.png"
                alt='income'
                className='details-img'
                />
                <div>
                    <p className='details-text'>Your Income</p>
                    <p className='details-money' testid="incomeAmount">Ksh {incomeAmount}</p>
                </div>
            </div>
            <div className='expenses-container'>
                <img 
                src='/expenses.png'
                alt='expenses'
                className='details-img'
                />
                <div>
                    <p className='details-text'>Your Expenses</p>
                    <p className='details-money' testid="expensesAmount">Ksh {expensesAmount}</p>
                </div>
            </div>
        </div>
    )
}


export default MoneyDetails;

Let's head into the details.js file which is in the moneyDetails folder and type the above code.

The MoneyDetails component is responsible for rendering a summary of financial information which include balance, income and expenses with the provided values.

The component takes three props; balanceAmount, incomeAmount and expensesAmount. They represent the financial values for balance, income, expenses. Props are like arguments passed into react components. They are like function arguments in Javascript and attributes in HTML.

Display all transactions details

//display the history of the user's transactions
const TransactionItem = props => {
    const {transactionDetails, deleteTransaction} = props
    //represent the details of a transaction
    const {id, title, amount, type} = transactionDetails

    //it is called when the delete button is clicked
    const onDeleteTransaction = () => {
        deleteTransaction(id)
    }

    return (
        <li className='table-row'>
            <p className='transaction-text'>{title}</p>
            <p className='transaction-text'>Ksh {amount}</p>
            <p className='transaction-text'>{type}</p>
            <div className='delete-container'>
                <button className='delete-button' type='button' onClick={onDeleteTransaction} testid="delete">
                    <img 
                    className='delete-img'
                    src="/bin.png"
                    alt='delete'
                    />
                </button>
            </div>
        </li>
    )
}

export default TransactionItem;

Let's head into the item.js file which is in the transactionItem folder and type the above code.

TransactionItem component is a functional component that displays all transaction details and allows the user to delete any transaction by clicking the delete button. It takes a single argument "props".

The transactionDetails and deleteTransaction are destructured from the "props" object. It allows the component to access these props easily.

The transactionDetails is further destructured to extract four properties; id, title, amount, type. These properties represent the details of a transactions.

The onDeleteTransaction function is called when the delete button is clicked and responsible for deleting the transaction. It takes no arguments and simply calls the deleteTransaction function with the id of the current transaction as an argument.

The return statement contains the JSX code that defines the structure of the transaction item. The paragraph displays the title, amount and type of the transaction. When the delete button is clicked it triggers the onDeleteTransaction.

The financial tracker

import { v4 } from 'uuid';
import TransactionItem from '../transactionItem/item';
import MoneyDetails from '../moneyDetails/details';
import React from 'react';

//an array that represents transaction types: income and expenses
const transactionTypeOptions = [
    {
        optionId: 'INCOME',
        displayText: 'Income',
    },
    {
        optionId: 'EXPENSES',
        displayText: 'Expenses',
    },
];

class MoneyManager extends React.Component {
    state = {
        transactionsList: [],
        titleInput: '',
        amountInput: '',
        optionId: transactionTypeOptions[0].optionId,
    }

    deleteTransaction = id => {
        const {transactionsList} = this.state;
        const updatedTransactionList = transactionsList.filter(
        eachTransaction => id !== eachTransaction.id,
    )
        this.setState({
        transactionsList: updatedTransactionList,
    })
    }


    onAddTransaction = event => {
            event.preventDefault()
            const {titleInput, amountInput, optionId} = this.state
            const typeOption = transactionTypeOptions.find(
        eachTransaction => eachTransaction.optionId === optionId,
    )
            const {displayText} = typeOption
            const newTransaction = {
        id: v4(),
        title: titleInput,
        amount: parseInt(amountInput),
        type: displayText,
    }
    this.setState(prevState => ({
        transactionsList: [...prevState.transactionsList, newTransaction],
        titleInput: '',
        amountInput: '',
        optionId: transactionTypeOptions[0].optionId,
    }))
    }

    onChangeOptionId = event => {
    this.setState({optionId: event.target.value})
    }

    onChangeAmountInput = event => {
    this.setState({amountInput: event.target.value})
    }

    onChangeTitleInput = event => {
    this.setState({titleInput: event.target.value})
    }

    getExpenses = () => {
        const {transactionsList} = this.state
        let expensesAmount = 0

        transactionsList.forEach(eachTransaction => {
        if (eachTransaction.type === transactionTypeOptions[1].displayText) {
        expensesAmount += eachTransaction.amount
        }
    })

    return expensesAmount;
    }

    getIncome = () => {
        const {transactionsList} = this.state
        let incomeAmount = 0
        transactionsList.forEach(eachTransaction => {
        if (eachTransaction.type === transactionTypeOptions[0].displayText) {
        incomeAmount += eachTransaction.amount;
        }
    })

    return incomeAmount;
    }

    getBalance = () => {
    const {transactionsList} = this.state
    let balanceAmount = 0
    let incomeAmount = 0
    let expensesAmount = 0

    transactionsList.forEach(eachTransaction => {
        if (eachTransaction.type === transactionTypeOptions[0].displayText) {
        incomeAmount += eachTransaction.amount
        } else {
        expensesAmount += eachTransaction.amount
        }
    })

    balanceAmount = incomeAmount - expensesAmount

    return balanceAmount
    }

    render() {
        const {titleInput, amountInput, optionId, transactionsList} = this.state
        const balanceAmount = this.getBalance()
        const incomeAmount = this.getIncome()
        const expensesAmount = this.getExpenses()

        return (
        <div className="app-container">
        <div className="responsive-container">
            <div className="header-container">
            <h1 className="heading">Finance Tracker &#128176;</h1>
            </div>
            <MoneyDetails
                balanceAmount={balanceAmount}
                incomeAmount={incomeAmount}
                expensesAmount={expensesAmount}
            />
            <div className="transaction-details">
            <form className="transaction-form" onSubmit={this.onAddTransaction}>
                <h1 className="transaction-header">Add Transaction</h1>
                <label className="input-label" htmlFor="title">
                    TITLE
                </label>
                <input
                    type="text"
                    id="title"
                    value={titleInput}
                    onChange={this.onChangeTitleInput}
                    className="input"
                />
                <label className="input-label" htmlFor="amount">
                    AMOUNT
                </label>
                <input
                    type="text"
                    id="amount"
                    className="input"
                    value={amountInput}
                    onChange={this.onChangeAmountInput}
                />
                <label className="input-label" htmlFor="select">
                    TYPE
                </label>
                <select
                    id="select"
                    className="input"
                    value={optionId}
                    onChange={this.onChangeOptionId}
                >
                    {transactionTypeOptions.map(eachOption => (
                    <option key={eachOption.optionId} value={eachOption.optionId}>
                        {eachOption.displayText}
                    </option>
                ))}
                </select>
                <button type="submit" className="button">ADD</button>
            </form>
            <div className='hTransactions'>
            <div className="history-transactions">
                <h1 className="transaction-header">History</h1>
                <div className="transactions-table-container">
                    <ul className="transactions-table">
                    <li className="table-header">
                        <p className="table-header-cell" >Title</p>
                        <p className="table-header-cell" >Amount</p>
                        <p className="table-header-cell" >Type</p>
                    </li>
                    {transactionsList.map(eachTransaction => (
                    <TransactionItem
                        key={eachTransaction.id}
                        transactionDetails={eachTransaction}
                        deleteTransaction={this.deleteTransaction}
                    />
                    ))}
                </ul>
                </div>
            </div>
            </div>

            </div>
        </div>
        </div>
    )
    }
}

export default MoneyManager;

Let's head into the manager.js file which is in the moneyManager folder and type the above code.

The MoneyManager component serves as a financial tracker which allows users to add, view and delete transactions, categorize them as income or expenses.

The transactionTypeOptions is an array that contains two objects representing transaction types which are income and expenses. Each object has an optionId and a displayText.

MoneyManager is a class component and it contains;

state- it keeps track of;
- transactionsList - an array to store individual transactions.
- titleInput - a string to represent the title of a new transaction.
- amountInput - a string to represent the amount of a new transaction.
- optionId - the selected transaction type from the dropdown menu. It is initially set to the first option from transactionTypeOptions.

deleteTransaction- It takes an id as an argument and is responsible for removing a transaction from the transactionsList array. It uses the filter method to create a new array that contains transactions where the id does not match the id provided as an argument to the deleteTransaction. The state is then updated to reflect the updated list of transactions.

onAddTransaction - It is called when the user submits the transaction form. It prevents the default form submission extract the titleInput, amountInput and optionId from the component's state. It finds the corresponding transaction type either(income or expenses) from the transactionTypeOptions array. It creates a new transaction. It updates the component state, appends the newTransaction to the existing transactionList.

onChangeOptionId, onChangeAmountInput and onChangeTitleInput are used to handle changes in the input fields and the selection of transaction type. They update the corresponding fields in the component's state.

getExpenses calculates the total expenses by iterating through the transactionsList and summing up the amounts of transactions with the expense type.

getIncome calculates the total income by iterating through the transactionsList and summing up the amounts of transactions with the income type.

getBalance calculates the balance by subtracting total expenses from total income.

You can style your application with my css styling or you can customize your own styling. You can check out the code and live demo.

Building A Simple React Login Form: A Step By Step Guide.

Pauline Oraro — Sat, 23 Sep 2023 07:57:55 +0000

In today's digital age, user authentication is a fundamental aspect of web development. Whether you are building a social media platform, an e-commerce site or a personal blog you need a login form to secure user data. In this step-by-step guide we will walk you through the process of building a simple login form using react. By the end of this tutorial you will have a functional login form that you can integrate into your React application. You can view the code and live demo.

Prerequisites.
Setting up the project.
Creating the LoginForm component in App.js.
1. The App component.
2. The LoginForm component.
3. Constructor.
4. handleChange() method.
5. handleSubmit() method.
6. validate() method.
7. render() method.
Conclusion.

Prerequisites

Before we dive into the tutorial, make sure you have the following;

Node.js and npm- Ensure you have Node.js and npm(Node Package Manager) installed on your machine. You can download and install them from the official Node.js website.
Basic understanding of React- Familiarize yourself with the basics of React if you haven't already. You can check out the official react documentation for a quick start.
Code editor- You can use a code editor of your choice.

Setting up the project

Let's start by creating a new react application using create-react-app. Open your terminal and run the following command;



npx create-react-app react-login-form

This command will create a new React project named "react-login-form". Once the project is created, navigate to the project directory;



cd react-login-form

Now you can open the project in your favourite code editor. Here is what the folder structure should look like;

We will work primarily within the src directory for this tutorial.

Creating the LoginForm component in App.js

This component defines a simple registration form with validation. The form allows users to input their username, email address, password and confirm password. Here is a step by step explanation of the code;



import React from 'react';

import './App.css';

function App() {

  class LoginForm extends React.Component{

    constructor(){

      super();

      this.state = {

        //holds the users values for the form fields

        input: {},

        //holds errors that occur during form submission

        errors: {}

      };

      this.handleChange = this.handleChange.bind(this);

      this.handleSubmit = this.handleSubmit.bind(this);

    }

    //called when the user interacts with any input field

    handleChange(event){

      let input = this.state.input;

      //identify the input field based on its name attribute

      input[event.target.name] = event.target.value;

      this.setState({input})

    }

    //called when the form is submitted

    handleSubmit(event){

      //prevents the default form submission behavior

      event.preventDefault();

      //calls the validate function to check the validity of the form inputs and if it is valid the form is submitted

      if (this.validate()){

        console.log(this.state);

    let input = {};
    input["username"] = "";
    input["email"] = "";
    input["password"] = "";
    input["confirm_password"] = "";
    this.setState({input : input});

    alert("Form is submitted");
  }
}

validate() {
  let input = this.state.input;
  let errors = {};
  let isValid = true;

  //checks if the username is null or undefined
  if (!input["username"]){
    isValid = false;
    errors["username"] ="Please enter your username";
  }

  if (typeof input["username"] !== "undefined"){
    const re = /^\S*$/;
    if(input["username"].length &lt; 6 || !re.test(input["username"])){
      isValid = false;
      errors["username"] = "Please enter valid username"
    }
  }

  if(!input["email"]){
    isValid = false;
    errors["email"] = "Please enter your email address"
  }

  if(typeof input["email"] !== "undefined"){
    var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
    if(!pattern.test(input["email"])){
      isValid = false;
      errors["email"] = "Please enter a valid email address"
    }
  }

  if(!input["password"]){
    isValid = false;
    errors["password"] = "Please enter your password"
  }


  if(typeof input["password"] !== "undefined"){
    var patternPassword = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&amp;*])(?=.{8,})");
    if(!patternPassword.test(input["password"])){
      isValid = false;
      errors["password"] = "The password should contain atleast one lowercase, one uppercase, one digit and one special character. The password should be atleast 8 characters long."
    }
  }

  if ( typeof input["password"] !== "undefined" &amp;&amp; typeof input["confirm_password"] !== "undefined"){
    if (input["password"] !== input["confirm_password"]){
      isValid = false;
      errors["confirm_password"] = "Passwords don't match"
    }
  }

  this.setState({errors: errors});

  return isValid;
}
render(){
  return(
    &lt;div className='container'&gt;
      &lt;h1 className='text-center mb-4'&gt;REGISTRATION FORM&lt;/h1&gt;
      &lt;form onSubmit={this.handleSubmit}&gt;
        &lt;div className='form-group'&gt;
          &lt;label for="username" className='form-label fs-5 fw-bold'&gt;USERNAME:&lt;/label&gt;
          &lt;input
          type="text"
          name="username"
          value={this.state.input.username}
          onChange={this.handleChange}
          className='form-control fs-5'
          placeholder='Enter username'
          id="username"
          /&gt;
          &lt;div className='text-danger form-text fw-bold fs-5'&gt;{this.state.errors.username}&lt;/div&gt;
        &lt;/div&gt;
        &lt;div className='form-group'&gt;
          &lt;label for="email" className='form-label fs-5 fw-bold'&gt;EMAIL ADDRESS:&lt;/label&gt;
          &lt;input
          type="text"
          name="email"
          value={this.state.input.email}
          onChange={this.handleChange}
          className='form-control fs-5'
          placeholder='Enter Email'
          id="email"
          /&gt;
          &lt;div className='text-danger form-text fw-bold fs-5'&gt;{this.state.errors.email}&lt;/div&gt;

          &lt;div className='form-group'&gt;
            &lt;label for="password" className='form-label fs-5 fw-bold'&gt;PASSWORD:&lt;/label&gt;
            &lt;input 
            type="password"
            name="password"
            value={this.state.input.password}
            onChange={this.handleChange}
            className='form-control fs-5'
            placeholder='Enter password'
            id="password"
            /&gt;
            &lt;div className='text-danger form-text fw-bold fs-5'&gt;{this.state.errors.password}&lt;/div&gt;
          &lt;/div&gt;

          &lt;div className='form-group'&gt;
            &lt;label for="confirm-password" className='form-label fs-5 fw-bold'&gt;CONFIRM PASSWORD:&lt;/label&gt;
            &lt;input 
            type="password"
            name="confirm-password"
            id="confirm-password"
            value={this.state.input.confirm_password}
            onChange={this.handleChange}
            className='form-control fs-5'
            placeholder='Enter confirm password'
            /&gt;
            &lt;div className='text-danger form-text mb-5 fw-bold fs-5'&gt;{this.state.errors.confirm_password}&lt;/div&gt;
          &lt;/div&gt;


        &lt;/div&gt;
        &lt;input 
          type="submit"
          value="SUBMIT"
          className='btn btn-success d-flex justify-content-center mx-auto mb-3 px-3'
          /&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  )
}



}

  return (

    <div className="App">

      <LoginForm/>

    </div>

  );

}

export default App;

The App component

This is the main component of the application. It contains the entire registration form.

The LoginForm component

LoginForm is a nested class component within the App component. It represents the registration form itself.

Constructor

The super() statement executes the parent component constructor function and your LoginForm component has access to all the functions of the parent component(React.Component).
The component state is initialized with two properties;

input which holds the user input values.
errors which hold any validation errors that occur during form submission.

The handleChange and handleSubmit methods are bound to the component using bind it ensures that "this" inside these methods refers to the LoginForm component.

handleChange() method

It is called whenever the user interacts with any input fields in the form.
It;

Retrieves the current input state.
Updates the value of the corresponding input field based on the name attribute of the input element that triggered the event.
Sets the updated input state using this.setState.

handleSubmit() method

It is called when the form is submitted. It prevents the default form submission behavior using event.preventDefault(). It calls the validate method to check the validity of the form inputs. If form is valid based on the validate method it logs the current state, clears the input fields and displays an alert message indicating that the form was submitted.

validate() method

It is responsible for validating the form inputs. It initializes input, errors, isValid as variables.

It checks if the username is empty and adds an error message to errors if it is empty. It checks if the username follows a pattern(atleast 6 characters without spaces) and adds an error message if it doesn't follow the pattern.

It checks if the email is empty and adds an error message if it is empty. It validates the email address format using a regular expression and if it doesn't match it adds an error message.

It checks if the password is empty and adds an error message if it is empty. It validates the password against a regular expression(atleast one lowercase, one uppercase, one digit, one special character and atleast 8 characters long). If the given password doesn't match the regular expression, it adds an error message.

It checks if the confirm password matches the password.

It updates the errors state with any validation errors and returns isValid.

render() method

It returns the JSX for rendering the form.

Each input field is associated with a name, value and onChange event handler. The value of each input field is bound to the corresponding property in the input state and the handleChange() method is called when the user interacts with the field.

Error messages are displayed below each input field based on the errors state.

Conclusion

In conclusion, this code defines a React application that contains a registration form component (LoginForm) with input validation. The registration form includes fields for username, email, password, and confirm password, and it provides error messages for each field when validation fails. Key points to note are:

The LoginForm component manages its state to store user input values and validation errors.
Input values and errors are updated in the component's state as users interact with the form.
The validate method checks the validity of form inputs based on specific criteria (e.g., username length, email format, password complexity, and password confirmation).
When the form is submitted, it prevents the default behavior, performs input validation, and displays an alert if the form is submitted successfully.
Upon successful submission, the form fields are cleared, and a success message is displayed.

You can view the code and live demo.

Mastering Javascript: Building An Interactive Shopping List App.

Pauline Oraro — Sat, 16 Sep 2023 15:57:57 +0000

Javascript is the backbone of modern web development. It empowers developers to create dynamic and interactive web applications that can engage users in various ways. In this blog post we will embark on a journey to master Javascript by building a practical web application: an interactive shopping list app. Whether you are a beginner or an experienced developer looking to enhance your Javascript skills, this project will help you gain valuable insights into the language core concepts. You can view the live demo here.

Setting up the project
HTML Structure
CSS Structure
Javascript Structure
Conclusion

Setting up the project

Before diving into coding ensure that you have;

A code editor (codepen, visual studio code or any of your choice).
A web browser.
A basic understanding of HTML, CSS and Javascript.

HTML Structure

Start by building the foundation of your shopping list app with HTML. A typical structure might include;

<div id="header">
  <h1>Shopping List &#128221;</h1>
  <h2>Add what you will buy</h2>
  <input id="inputText" type="text">
  <button onclick="addToList()">ADD</button>
  <ul id="list"></ul>
</div>

Styling with CSS

Make your app visually appealing by styling it with CSS. You can design your shopping list however you like, but here is an example, I used SCSS.

body{
  background-color: #171515;
  font-size: 1.35em;
  #header{
    background-color: #6F5B3E;
    margin: 30px auto;
    padding: 20px 20px 30px;
    text-align: center;
    h1{
      font-family: cursive;
      text-decoration-line: underline;
    } 
    h2{
      font-family: cursive;
    } 
    #inputText{
      font-size: 1.15em;
      font-family: monospace;
      padding: 8px;
      width: 50%;
      background-color: #F9F6F0;
      border: 3px solid #F9F6F0;
      border-radius: 10px; 
    } 
    button{
      font-size: 1.15em;
      font-family: monospace;
      font-weight: bolder;
      padding: 5px;
      margin-left: 20px;
      border: 3px solid #F9F6F0;
      border-radius: 10px;
      background-color: #F9F6F0;
    } 
    #list{
      list-style-type: none;
      margin: 20px auto;
      padding:0;
      font-family: monospace;
      font-size: 1.15em;
    } 
    li{
      font-weight: bold;
      padding: 10px;
    } 
    li:nth-child(even) {
      background-color: #C4AE78;
    } 
    li:nth-child(odd) {
      background-color: #F9F6F0;
    } 
    span.close{
      position: absolute;
      right: 0;
      padding-right: 30px;
      cursor: pointer;
    }
  } 
}

Javascript Structure

This Javascript code defines a function named "addToList()" and adds an event listener to the "document.body" to handle the removal of items from a shopping list when the "X" button is clicked. Let us break down the code;

//add value to list item 
function addToList() {
  //get value from input
  var value=document.getElementById("inputText").value;
  //alert that the text box is empty 
  if(value === "") {
    alert("To add an item type its name into the box") 
  } else {
    //create list item element
    var li=document.createElement("li");
    var textNode =document.createTextNode(value);
    //append value to the list element
    li.appendChild(textNode);
  document.getElementById("list").appendChild(li);
    li.className="item";
    //add X to each list element
    var close=document.createElement("span");
    var closeNode=document.createTextNode("X");
    close.appendChild(closeNode);
    li.appendChild(close);
    close.className="close";
  } 
} 
//have X remove list item when clicked
document.body.addEventListener("click", function(event){
  if(event.target.className == "close") 
    event.target.parentElement.style.display="none"
} );

Function addToList()
This function is called when the "ADD" button is clicked as indicated by the onclick attribute in the HTML code below.

<button onclick="addToList()">ADD</button>

It performs the following actions;

The variable named value

 var value=document.getElementById("inputText").value;

This line retrieves the value entered in the input field with the id "inputText" and stores it in the value variable.

if structure

if(value === "") {
    alert("To add an item type its name into the box") 
  } else {
    //create list item element
    var li=document.createElement("li");
    var textNode =document.createTextNode(value);
    //append value to the list element
    li.appendChild(textNode);
  document.getElementById("list").appendChild(li);
    li.className="item";
    //add X to each list element
    var close=document.createElement("span");
    var closeNode=document.createTextNode("X");
    close.appendChild(closeNode);
    li.appendChild(close);
    close.className="close";
  }

It checks if the "value" is an empty string. If the input is empty it displays an alert message instructing the user to type the name of the item into the input box.
If the input is not empty, the function proceeds to create a new list item "(<"li">)" element, appends the entered text to it, adds a close button represented by an "X" and appends this list item to the unordered list "(<"ul">)" with the id called list.

Event listener

document.body.addEventListener("click", function(event){
  if(event.target.className == "close") 
    event.target.parentElement.style.display="none"
} );

It listens for clicks anywhere on the page and executes the provided function when a click event occurs. The function takes an "event" object as a parameter.

It checks if the clicked element has a class name equal to "close" which corresponds to the "X" button.
If the clicked element has the "close" class, it sets the "style.display" property of the parent element (the list item) to none effectively hiding the list item from view.

Conclusion

In summary this Javascript code allows users to add items to a shopping list by entering text in an input field and clicking the "ADD" button. Each item is added as a list item with a corresponding "X" button to remove it. The event listener on the document body ensures that when the "X" button is clicked the corresponding list item is hidden from view. You can view the live demo here

Mastering The Fetch API In Javascript: A Comprehensive Guide.

Pauline Oraro — Sat, 09 Sep 2023 12:33:16 +0000

In the realm of web development, handling network requests and fetching data from servers is a common task. The fetch API in Javascript has become the go to solution for making HTTP requests that offers a more modern and user-friendly approach compared to XMLHttpRequest. In this guide, we will delve into the fetch API, exploring its capabilities, syntax and best practises to empower you to master this essential tool for web development.

Defination of terms
What is Fetch API
Fetch API syntax
Let's create a random user generator
Conclusion

Defination of terms

Meaning of A.P.I
A.P.I stands for application programming interface. It is a software intermediary that allows two applications to communicate with each other. They are an accessible way to extract and share data within and across applications.

XMLHttpRequest
It is an object in Javascript that allow you to make HTTP requests to a web server from a web page. It is commonly used to retrieve data from a server without requiring the entire web page to be refreshed.

HTTP Requests
The Hypertext Transfer Protocol is designed to enable web clients such as browsers to request resources like webpages, images or data from web servers. HTTP methods define the action to be performed on the resource. The methods are;

get- retrieve data from the server.
post- send data to the server to be processed.
put- update an existing resource on the server.
delete- remove a resource from the server.

What is Fetch API

The fetch API is a Javascript interface that provides a straightfoward and flexible way to make network requests. It allows you to fetch resources such as webpages, images or other files from servers using HTTP or HTTPS protocols. The fetch API uses promises making it more elegant and easier to work with asynchronous operations.

Fetch API syntax

fetch(url)  
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(err => console.error(err));

The fetch (url) initiates a get request to the specified url. This part sends the request and returns a promise that resolves to the response from the server.

The first ".then()" in the promise chain takes the response returned from the fetch call and calls the ".json()" method on it. This method parses the response body as JSON.

The second ".then()" takes the parsed JSON data returned from the previous ".then()" and logs it into the console.

The catch block will catch the error and log it into the console.

Let's create a random user generator

This project example fetches and displays a random user data from the specified url when a button is clicked. You can view the live demo here random user generator.

var img = document.querySelector("img");
var fullname = document.querySelector("#fullname");
var username = document.querySelector("#username");
var email = document.querySelector("#email");
var city = document.querySelector("#city");
var gender = document.querySelector("#gender");
var btn = document.querySelector("button");
var url = 'https://randomuser.me/api';

btn.addEventListener("click", function(){
  fetch(url)
  .then(handleErrors)
  .then(parseJSON)
  .then(updateProfile)
  .catch(printErrors)
})

function handleErrors(res){
  if (!res.ok){
    throw Error("There are some errors:" + res.status)
  }
  return res;
}

function parseJSON(res){
  return res.json().then(function(parsedData){
    return parsedData.results[0];
  });
}

function updateProfile(data){
  img.src = data.picture.medium;
  fullname.innerText = "Name: " + data.name.first + " " + data.name.last;
  username.innerText = "Username: " + data.login.username;
  gender.innerText = "Gender: " + data.gender;
  email.innerText = "Email: " + data.email;
  city.innerText = "City: " + data.location.city;
}

function printErrors(error){
  console.log(error);
}

HTML elements
Select various HTML elements using the document.querySelector and assigns them to variables.

event listener
Add an event listener to the "btn" element for the click event. When the button is clicked it triggers a sequence of actions using the fetch API to retrieve random user data from the specified url.

fetch url
It is chained with several ".then()" and "catch()" methods to handle the asynchronous flow of data.

handleErrors() function
It is called in the ".then()" block after the initial fetch. It checks if the response from the API is successful (HTTP status code 200) using "res.ok". If there is an error (the API returns an error status code) it throws an error with a message including the HTTP status code.

parseJSON () function
It is called after the response is successfully retrieved. It parses the response as JSON data using ".json()" method and returns the first result from the parsed data.

updateProfile() function
It takes the parsed data and updates various HTML elements on the page with user's information.

printErrors() function
If any error occurs at any point in the promise chain they are caught and handled by the function which logs the errors to the console.

In summary, when the button is clicked this code makes an API request to the specified url, handles any potential errors, parses the response as JSON data and updates the page with the retrieved user's information or logs an error if something goes wrong.
It is a simple example of making an API request and updating a web page with the fetched data.

Conclusion

In the world of modern web development, the Fetch API has become an indispensable tool for fetching data asynchronously. Its simplicity, versatility, and seamless integration with Promises make it a valuable asset in building responsive and dynamic web applications. By mastering the Fetch API, you open the doors to a world of possibilities in creating powerful and efficient web solutions.

A Beginner's Guide To Understand Application Programming Interface.

Pauline Oraro — Wed, 06 Sep 2023 16:32:05 +0000

In today's digital age, we always hear about application programming interface or API's in short. What exactly are API's and why are they important in the world of technology? They play a fundamental role in modern software development and the digital services we use daily. In this guide we will demystify API's, explain what they are, how they work and why they matter.

What is an application programming interface
How an API works
Types of API's
Real world examples of API's
Advantages of API's
Disadvantages of API's
Conclusion

What is an application programming interface

An application programming interface is a set of rules and protocols that allow different software applications to communicate and interact with each other. It serves as a bridge between two separate software systems enabling them to exchange data and function properly.

How an API works

Initialization- The API provider creates and publishes the API along with docs that describe how to use it.

Request- A developer initiates communication by sending a request to a specific endpoint of the API. This request typically includes the following components;

endpoint- The URL that represents the specific resources the developer wants to access.
HTTP methods- specifies the type of action to be performed on the resource such as get, post, put and delete.
headers- contain more information about the request.
parameters- additional data that is needed for the request often passed as query parameters in the URL or as part of the request body.

Authentication and Authorization- some API's require authentication to ensure that only authorized users or applications can access their resources. It is typically done using API keys, OAuth tokens and so on. It helps to check the credentials provided in the request to determine if the requester has the necessary permissions.

Server processing- the server processes the request based on the information provided which includes understanding the request methods, headers and parameters as well as ensuring proper authentication and authorization if required.

Response- after processing the request the server generates a response which includes;

data- the requested data often in a structured format like JSON.
HTTP status code- a code that indicates the outcome of the request eg; 200 for success, 404 for not found and 500 for server error.
headers- additional information about the response such as content type and length.

Client handling- the client receives the response from the server and processes it according to the information provided which may involve displaying the retrieved data to the user.

Types of API's

Ownership

Open API's- they are publicly available to developers with minimal restrictions. They may require registration, use an API key or OAuth tokens. They focus on external users to access data or services.

Internal API's- they are designed for internal use within an organization and are hidden from the outside world.

Partner API's- they are exposed to business partners and are not publicly available and need specific entitlement to access them.

Composite API's- combines different data and services API's. You can use them if you need data from various applications or data sources.

Architecture

Representational state transfer(R.E.S.T)- it is a widely used architectural style that uses standard HTTP methods to interact with resources identified by URLs. REST messages are typically simpler and use lightweight data formats like JSON, XML, YAML, plain text or HTML for data exchange. However, REST does not prescribe a specific data format. REST APIs follow a stateless communication model, meaning each request from a client to a server must contain all the information needed to understand and process the request. REST is more lightweight and is commonly used for public APIs, web services, and mobile applications. It's well-suited for scenarios where simplicity, scalability, and ease of use are important.

Protocol

Simple object access protocol(S.O.A.P)- SOAP is a protocol for exchanging structured information in the implementation of web services. It means that it has a defined set of rules and standards for structuring messages. It specifies how data should be formatted, transmitted, and processed. SOAP messages are typically formatted as XML documents. These XML messages have a specific structure with an envelope, header, and body. SOAP is inherently stateful, meaning it can support complex transactions and operations. It includes features like message sequencing and guaranteed message delivery, which make it suitable for applications that require strong reliability and consistency. SOAP is often used in enterprise-level applications, web services that require strong security and transaction support.

System

Database API's- They enable communication between an application and a database managment system.

Web API's- are API's that deliver requests from web applications and responses from servers using Hypertext Transfer Protocol.

Real world examples of API's

Weather Data- Weather services like OpenWeatherMap have APIs that developers can use to fetch current weather conditions and forecasts for specific locations.

Maps and location services- Google Maps offer APIs that developers use to embed interactive maps and location-based features into their apps.

Social Media- Apps like Facebook, Twitter, and Instagram offer APIs that allow developers to integrate their platforms into other apps. For instance, you can log into a website using your Facebook credentials.

Payment processing- PayPal and Stripe provides APIs that enable businesses to accept online payments and manage their financial transactions securely.

News and content- News outlets like The New York Times offer APIs to access their articles and media content for integration into news apps and websites.

Advantages of API's

Security- APIs provide a controlled and secure way to access data and functionality. Authentication, authorization, and rate limiting can be implemented at the API level to protect sensitive information and resources.

Real-Time updates- Many APIs offer real-time data and updates, ensuring that applications have access to the most current information.

Analytics and Insights- APIs often come with built-in analytics tools that allow developers and businesses to monitor how their services are used. This data can be used to make informed decisions and optimize offerings.

Disadvantages of API's

Latency and performance- The performance of your application may be affected by the latency introduced by external API calls. Slow or unreliable APIs can lead to a poor user experience.

Rate limits- Many APIs impose rate limits on the number of requests you can make within a specific time frame. This can be a limitation if your application requires frequent or high-volume access to the API.

Costs- Some APIs are not free, and their usage can incur costs, which can become significant if your application relies heavily on them. Pricing models for APIs vary, and it's essential to understand the pricing structure before integrating them into your application.

Conclusion

In essence, APIs serve as intermediaries that enable different software components to collaborate and share data, functionalities, or services seamlessly. They allow developers to focus on building innovative applications without needing to understand all the intricacies of the systems they are connecting to.

A Beginner's Guide To Javascript async / await.

Pauline Oraro — Fri, 01 Sep 2023 10:45:10 +0000

Javascript is a powerful programming language used extensively in web development. When building web applications, you often encounter tasks that require fetching data from external sources or executing time-consuming operations. Handling these tasks asynchronously is crucial to ensure your application remains responsive and efficient. One of the essential tools for asynchronous programming in Javascript is async and await keywords. In this guide we'll explore what async and await keywords are, how they work and how to use them effectively in your code.

Javascript callbacks
Understanding the meaning of asynchronous
Javascript promises
Introducing async and await keywords
Benefits of async and await
Conclusion

Javascript callbacks

Before we understand the async and await keywords, we must know what are callbacks in Javascript.
A callback is a function that is passed as an argument to another function. It allows a function to call another function and it runs after another function is finished.

function myFirst(a){
    document.write(a)
}
function myCalculator(num1, num2, myCallback){
    let sum = num1 + num2;
    myCallback(sum)
}

myCalculator(10, 10, myFirst);

In the code above, myFirst is a callback function which is passed as an argument in the myCalculator function.

Understanding the meaning of asynchronous

Before diving into async and await , let's briefly understand the meaning of asynchronous in Javascript.

In a synchronous program, code execution happens sequentially. This means one operation must complete before the next one begins. However, when dealing with tasks like data fetching from an API or reading a file or waiting for the operation to be completed can make your application feel slow or unresponsive.

In an asynchronous program it allows your code to execute tasks without waiting for the each task to complete.
Most modern asynchronous Javascript methods don't use callbacks, instead asynchronous programming is solved using promises.

Javascript promises

A promise is an object that represents the completion or failure of an asynchronous operation. They provide a way to work with asynchronous code in a more organized and readable manner.
A promise exists in one of these states;

Pending - initial state when the promise is created.
Fulfilled - the state when the asynchronous operation is successfully completed. The promise holds a result value.
Rejected - the state when the asynchronous operation encounters an error or fails. The promise holds an error value.

A promise that is either resolved or rejected is called settled.
The promise methods are;

then() - it specifies what should happen when a promise is fulfilled. It takes two callback functions which are optional as arguments, one for fulfillment and one for rejection.
catch() - it specifies what should happen when a promise is rejected.
finally() - it specifies a callback that should be executed regardless of whether the promise is fulfilled or rejected.

let promise = new Promise(function(resolve, reject){
    setTimeout(() => {
        const randomValue = Math.random();

        if (randomValue < 0.5) {
            resolve(`success random value: ${randomValue}`)
        } else {
            reject(`error random value: ${randomValue}`)
        }
    }, 2000)
});

promise
    .then((value) => {
        console.log("Promise resolved:", value)
})
    .catch((error) => {
        console.log("Promise rejected:", error)
})
    .finally(() => {
        console.log("Promise operation completed, regardless of success or failure.")
});

Promise constructor
A new promise is created using the promise constructor. The constructor takes a single argument which is called the executor function.
The executor function has two parameters which are resolve and reject. They are provided by the promise system to signal the successful resolution or the rejection of the promise.

setTimeout function
Inside the executor function, a setTimeout function is used to simulate an asynchronous operation with a 2 second delay. After the delay a random value is generated using Math.random.
If the randomValue is less than 0.5, the resolve function is generated indicating a successful resolution of the promise. If the randomValue is greater than 0.5, the reject function is called indicating a rejection of the promise.

methods
After the promise is created, it can be consumed using the then(), catch() and finally() methods.
If the promise is successful the then() callback will be executed, if it is rejected the catch() callback will be executed. The finally() callback executes regardless of the promise outcome.

But there is a more better way to write asynchronous code which is using async and await keywords. They make the asynchronous code more readable and easy to manage. They are built on top of Javascript promises.

Introducing async and await keywords

async and await were introduced in ECMAScript 2017(ES8). They take asynchronous programming a step further by providing a synchronous-like syntax.
async keyword
The async keyword is for a function that is supposed to perform an asynchronous operation. It is used to define a function that returns a promise.
await keyword
The await keyword is used inside an async function to pause the execution until a promise is settled(resolved or rejected). It allows you to write asynchronous code that looks and behaves more like synchronous code making it easier to manage complex asynchronous flows.

function fetchData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            const data = {message:"Data fetched successfully"}
            resolve(data);
        },3000)
    })
}
async function fetchDataAsync(){
    try {
        const result = await fetchData()
        console.log(result.message);
    } catch (error){
        console.error("Error fetching data", error);
    }
}

fetchDataAsync();

fetchData function
The fetchData function returns a promise and inside the promise there is a setTimeout function which simulates a delay of 3 seconds. After the delay, it resolves the promise with an object data containing a message.

fetchDataAsync
The fetchDataAsync is an asynchronous function declared with the async keyword. It uses the await keyword to call the fetchData function. It means that the execution of the fetchDataAsync will pause until the promise returned by fetchData is resolved.

If the promise is resolved successfully without errors the result is stored in the result variable then the message is displayed in the console.

The try and catch block is used to handle potential errors that might occur during the asynchronous operation. If there was an error during the promise resolution, the catch block will catch the error and log an error message along which the specific error that occured.

Benefits of async and await

Readability - asynchronous code written with async and await is easier to read and understand compared to nested callbacks or chained promises.
Error-handling - error handling is simplified through try and catch blocks which makes it easier to manage errors.
Synchronous-like flow - asynchronous code written with async and await looks and behaves like synchronous code making it easier for developers to reason about its flow.

Conclusion

Asynchronous programming is a cornerstone of modern JavaScript development, and async and await are powerful tools that streamline the process. They provide a way to handle asynchronous operations in a synchronous-like manner, resulting in more readable, maintainable, and efficient code.

Building A B.M.I Calculator using Typescript

Pauline Oraro — Sat, 19 Aug 2023 06:59:14 +0000

In today's tech driven world, health and wellness are a paramount importance so is the ability to leverage programming to aid in various aspects of our lives. In this article, we will embark on an exciting journey to create a Body Mass Index calculator using Typescript-a powerful and statically-typed superset of Javascript. Understanding BMI is crucial for assessing one's health and by the end of this tutorial, you will have a functional tool that can help users calculate their BMI based on their weight and height.

What is BMI

The Body Mass Index is a measure that uses your height and weight to work out if your weight is healthy. The calculation is a person's weight in kg divided by the square of height in meters.
If your BMI is;

Below 18.5- underweight range.
Between 28.5 and 24.9- you are in the healthy weight range.
Between 25 and 29.9- you are in the overweight range.
30 or over- you are in the obese range.

Setting up the project

Before you begin ensure you have Node.js and Typescript installed.

Create a project folder called bmi and the bmi folder should have build and src folders. In the build folder it should contain HTML and CSS files and in the src folder it should contain a Typescript file.

Go to the terminal and type;

tsc --init

This creates a typescript configuration file named tsconfig.json which specifies how Typescript should compile your code and what settings to use.
Open it and make the following changes;

"rootDir": "./src"
"outDir": "./build/JS"
"include":["src"]

When you run the Typescript compiler, it will look for Typescript files in the src directory compile them and place the compiled files in the build/JS directory.
The include option specifies which files should be included in the compilation process, so Typescript will include all Typescript files within the src directory.

After that, type this into the terminal;

tsc -watch

This watches for changes in your Typescript files and recompiles them as needed.
This is the folder structure;

Create the HTML file

<div class="container">
        <h1>BMI CALCULATOR</h1>

        <!-- displays the calculated bmi value and its category-->
        <div class="display">
            <p id="result">20.0</p>
            <p id="category">Normal Weight</p>
        </div>

        <!--a range slider for selecting the weight-->
        <div class="row">
            <input type="range" min="20" max="200" value="20" id="weight" oninput="calculate()">
            <span id="weight-val">20kg</span>
        </div>

        <!--a range slider for selecting the height-->
        <div class="row">
            <input type="range" min="100" max="250" value="100" id="height" oninput="calculate()">
            <span id="height-val">100cm</span>
        </div>
    </div>
    <script src="/build/JS/bmi.js"></script>

This HTML code provides a user interface for a BMI calculator where users can input their weight and height using range inputs and a display area for showing the calculated BMI value and its category.

Create a Typescript file.

//the void type does not return any value
function calculate():void{
    //stores the calculated BMI as a string
    var bmi:string;
    //holds the reference to an HTML element with the id result
    var result = document.getElementById("result") as HTMLElement;
    //the height value is extracted from the input element and the value is converted into an integer
    var height= parseInt((document.getElementById("height") as HTMLInputElement).value);
    //the weight value is extracted from the input element and the value is converted into an integer
    var weight =parseInt((document.getElementById("weight") as HTMLInputElement).value);

    //displays weight and height values
    document.getElementById("weight-val")!.textContent = weight + "kg";
    document.getElementById("height-val")!.textContent = height + "cm";

    //calculate the BMI using the height and weight values and toFixed ensures the BMI is rounded to one decimal place 
    bmi = (weight / Math.pow(height / 100, 2)).toFixed(1);
    result.textContent = bmi;
    let category: string;

    //determines the BMI category based on the calculated BMI value
    if(parseFloat(bmi)< 18.5){
        category = "Underweight 😔";
        result.style.color= "#ffc44d";
        //checks if it is between 18.5 and 24.9
    } else if (parseFloat(bmi) >= 18.5 && parseFloat(bmi) <= 24.9){
        category = "Normal weight 🤩";
        result.style.color = "#0be881";
        //checks if it is between 25 and 29.9
    } else if (parseFloat(bmi) >= 25 && parseFloat(bmi) <= 29.9){
        category = "Overweight 😮";
        result.style.color = "#ff884d";
    } else {
        category = "Obese 😱";
        result.style.color = "#ff5e57";
    }

    //display BMI category
    document.getElementById("category")!.textContent = category;
}

This Typescript code calculates the BMI based on user inputs, updates the displayed values and categories on the webpage and adjusts the text color based on the calculated BMI category. This code enables the BMI calculator interface to dynamically update as users interact with the height and weight sliders.

Create the CSS code

Style the BMI calculator.

*, *::before, *::after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    height: 100vh;
    font-family: monospace;
    background-color: #3D5B59;
}

.container{
    background-color: #bd8c92;
    padding: 10px 40px;
    width: 350px;
    margin: 50px auto;
    border-radius: 5px;
}

.container h1{
    text-align: center;
    font-size: 23px;
    margin: 20px auto;
    font-family: cursive;
}

.row{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.display{
    margin-bottom: 30px;
    margin-top: 30px;
    font-size: 20px;
}

#result, #category{
    text-align: center;
    margin-right: 10px;
    font-weight: 1000;
}

.row span{
    margin-bottom: 20px;
    font-size: 20px;
    margin-right: 15px;
}

input[type=range]{
    width: 50%;
    margin-bottom: 20px;
    height: 5px;
    appearance: none;
    background-color: black;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb{
    appearance: none;
    height: 15px;
    Width: 15px;
    background-color: #B5E5CF;
    cursor: pointer;
    border-radius: 100%;
}

You can check out the code on my github.

Forem: Pauline Oraro

Mastering the Basics of UX/UI Design.

Table of contents

Understanding UX/UI Design

UX/UI Design process

Key Design Principles

UX/UI Design tools

A Guide To Writing Clean and Maintainable Code.

Use descriptive and meaningful names.

Keep your code DRY

Follow a consistent coding style.

Document and comment your code.

Write modular code.

Organize your project.

Conclusion

Tips For Effective Code Documentation.

What is code documentation.

Tips for effective code documentation.

Start with a comprehensive README file:

Use meaningful comments:

Choose Descriptive Variable and Function Names:

Update Documentation Alongside Code Changes:

Keep it clear and concise:

Conclusion

Debugging Techniques: How To Solve Common Coding Errors.

The art of reading error messages.

Isolate the problem

Utilize debugging tools

Code reviews

The Future of Web Development in The Era of AI.

Learn React By Building A React Finance Tracker.

Table of contents

Prerequisites

Setting up the project

Display the financial details

Display all transactions details

The financial tracker

Building A Simple React Login Form: A Step By Step Guide.

Table of contents

Prerequisites

Setting up the project

Creating the LoginForm component in App.js

The App component

The LoginForm component

Constructor

handleChange() method

handleSubmit() method

validate() method

render() method

Conclusion

Mastering Javascript: Building An Interactive Shopping List App.

Table of contents

Setting up the project

HTML Structure

Styling with CSS

Javascript Structure

Conclusion

Mastering The Fetch API In Javascript: A Comprehensive Guide.

Table of contents

Defination of terms

What is Fetch API

Fetch API syntax

Let's create a random user generator

Conclusion

A Beginner's Guide To Understand Application Programming Interface.

Table of contents

What is an application programming interface

How an API works

Types of API's

Ownership

Architecture

Protocol

System

Real world examples of API's

Advantages of API's

Disadvantages of API's

Conclusion

A Beginner's Guide To Javascript async / await.

Table of contents

Javascript callbacks