Forem: Faith Pueneh

React Series: React Component

Faith Pueneh — Wed, 12 Apr 2023 22:58:16 +0000

Introduction

When you are developing a single page application using the DOM structure, you will face a challenge when you want to change a specific part of the application. The creation of React.js solved this problem. React.js is a component-based framework, and if you want to build an application with it, you should understand what components are. This article will teach you what components are and how to use them.

Prerequisites

Have a good knowledge of HTML
Have a good knowledge of CSS
Have a good knowledge of Javascript
Have a good knowledge of React

What Is A Component

Every piece of user interface (UI) in React.js is a component.
A component can include everything from the smallest UI in your application, such as a table, button, navbar, or card, to the entire page.

function RedButton() {
  return (
    <button>Click here</button>
  );
}

Components are said to be a fundamental concept in React.js and each component have their own logic and appearance, but they all exist in the same space and are bounded by the parent component. Depending on what you're building, you can create a reusable component that can be used repeatedly on your application.

Benefit Of Component

The advantage of using components is that because UIs are broken down into small pieces, they are easier to understand, reuse where necessary, and modify. A component should only do one thing; if it needs to do more, it should be broken down into subcomponents.

How To Identify A Component

As shown below, each React component begins with a capital letter.

function BlueButton() {
  return (
    <button>Read more</button>
  );
}

The "export default" keyword is used to identify the main component. Knowing the main component in a file allows you to easily import it from other files.

export default function MyApp() {
  return (
    <div>
      <h2>React Component</h2>
      <BlueButton />
    </div>
  );
}

Conclusion

You can build your application with just one component, but this is risky because you will be unable to easily modify it. Breaking down your React application into components is important because the simplicity of your application's components determines its performance.

Best 5 Ecommerce Search Engines for Developers

Faith Pueneh — Thu, 23 Feb 2023 14:13:31 +0000

Every ecommerce website owner wants to increase traffic and sales, and this is possible when users can easily search for and find products they’re looking for. On the flip side, if you don't have a good search engine on your ecommerce store, you'll miss out on sales and visitors because nobody likes to take ages trying to find something.

Using search engines in your ecommerce website has many advantages. Most search tools come with features like autocomplete, faceted search, search analytics, and support to help boost the user search experience.

This article will explain the benefits of using search engines in online stores and introduce you to the top 5 search engines that you can use.

What is Medusa? Medusa is a Node.js-based, open source, composable commerce engine. It is built on abstract layers to allow developers to fully customize the engine and integrate third-party services and tools such as search engines without hacky workarounds.

Why Use Search Engines in Ecommerce Websites?

To avoid losing a significant amount of revenue and customers, ecommerce websites must organize quality ecommerce site searches. Here are some advantages of integrating a search engine into your ecommerce website:

Increase Sales and Revenue: Customers can quickly find the products they are looking for using a search engine, leading to increased conversions and sales.
Analyze Users’ Search Data: You will be able to analyze what your users liked and purchased. The analysis allows you to track your users and determine how to serve them better.
Control Traffic on Your Ecommerce Website: Search engines can help control traffic on ecommerce websites by providing users with fast and relevant results for their search queries. Having a good search engine can reduce the number of backend queries, which could avoid a surge in website traffic during high-traffic periods like Black Friday.

5 Ecommerce Search Engines for Developers

Meilisearch

Meilisearch is a free and open source search engine that can provides advanced search features such as faceted search, full-text search, and typo tolerance. It can handle large data and provide a quick search experience.

By incorporating Meilisearch into an ecommerce website, users can find the information they need quickly, improving the overall user experience. MeiliSearch can also be used to analyze and visualize data, making it a valuable tool for businesses and organizations seeking to gain insights from their data.

Meilisearch is also known for its ease of integration and lightweight nature, making it simple to use and scale.

Unique Features of Meilisearch

Meilisearch is a lightweight and user-friendly search engine.
It is written in Rust and simple to incorporate into any project.
Meilisearch's ability to perform real-time indexing and searching enables fast search results even with large amounts of data.
It provides a simple and intuitive API, making it simple to customize and extend the search engine's functionality.
Meilisearch also has advanced features like ranking algorithms and typo tolerance that other search engines do not always have.

Learn how to integrate MeiliSearch with Medusa by following this documentation.

Algolia

Algolia is a search-as-a-service platform that can be integrated with a website to provide advanced functionality such as instant search, typo tolerance, and faceted search. Even with large data, Algolia's powerful search algorithms can return results quickly and accurately.

By incorporating Algolia into a website, users can find the information they need more quickly, improving the overall user experience.

Additionally, Algolia provides several analytics and monitoring tools to gain knowledge about how people use the search feature and make decisions based on data to make the search experience better. Algolia also provides a simple SaaS solution to set up and scale.

Unique Features of Algolia

Algolia is a search engine for developers that provides quick and relevant search results for web and mobile applications. Some key features that distinguish Algolia from other search engines are as follows:

Algolia is designed for speed, with a distributed architecture that allows for quick search results even when dealing with large data.
Algolia allows developers to create custom ranking algorithms to control the relevance of search results based on their specific use cases. The "search as you type" feature of Algolia provides fast, accurate results as soon as the user starts typing.
Algolia's relevance tuning feature allows developers to fine-tune the relevance of search results by adjusting the weight of various attributes and facets.
Algolia comes equipped with multi-language support, making it easy to develop search experiences for a worldwide audience.
Algolia offers a hosted and managed service, so developers don't have to worry about managing infrastructure or scaling the service as their application grows.

Learn how to integrate Algolia with Medusa by following this documentation.

Typesense

Typesense is a search engine that offers advanced search capabilities like instant search, typo tolerance, and faceted search when integrated into a website. Typesense's search algorithms are designed to produce fast, accurate results, even when dealing with large amounts of data.

Typesense's search algorithms are designed to produce fast, accurate results even when dealing with large amounts of data.

Additionally, Typesense has a fast response time, so search results are received quickly. It can also handle different languages and similar words easily, making it great for businesses and organizations to get information from their data. It is also known for its ease of integration and lightweight nature, making it simple to use.

Unique Features of Typesense

Typesense is a search engine that provides quick and relevant results for web and mobile applications. Among the key features that distinguish Typesense from other search engines are:

Typesense is engineered for quickness, featuring a distributed structure that allows for speedy search outcomes even with a substantial amount of information.
Typesense possesses advanced typo-tolerance capabilities, enabling users to receive relevant search results even when their query contains misspellings or typos.
Typesense allows developers to create custom ranking algorithms that control the relevance of search results based on their specific use case.
Typesense features integrated support for various languages, making it effortless to develop search experiences for a worldwide audience.
Typesense provides a simple and intuitive API, making it simple to customize and extend the search engine's functionality.
It is an open source search engine, that can be effortlessly customized and integrated into projects.

Sphinx

Sphinx is a search engine that can be integrated into a website to provide advanced search functionality such as full-text, Boolean, and faceted search. It is a powerful open-source search engine that can handle large amounts of data and quickly return results.

Furthermore, Sphinx allows you to customize the ranking algorithm and weighting system, which can help businesses and organizations improve the relevance of search results. Sphinx also supports multiple languages and can index and search across multiple data sources, making it a versatile tool for data search and analysis.

Unique Features of Sphinx

Sphinx is a full-text search engine that was specifically designed to handle large amounts of text data. It is frequently used for indexing and searching databases, emails, and other structured data. Some key features that distinguish Sphinx from other search engines are as follows:

Sphinx can handle large amounts of data and scale horizontally by distributing the index across multiple servers.
Sphinx is intended to be fast and efficient, with a small memory footprint and support for real-time indexing.
Sphinx provides developers with the ability to create custom indexing and ranking algorithms, as well as fine-tune the relevance of search results by adjusting the weight of various attributes and facets.
Sphinx includes built-in support for multiple languages, making it simple to create search experiences for a global audience.
Sphinx is an open source search engine that gives developers the ability to smoothly incorporate and adapt it into their ecommerce website.
Sphinx can index and search data from a variety of sources, including MySQL, PostgreSQL, XML, CSV, and JSON.

Elasticsearch

Elasticsearch is a search engine that can quickly and easily index and search large amounts of data. It can be integrated with a website to provide faceted search, full-text search, and geospatial search functionality.

Elasticsearch can also be used to analyze and visualize data, making it a valuable tool for businesses and organizations seeking to gain insights from their data.

Unique Features of Elasticsearch

Elasticsearch is a distributed search engine based on the Lucene library that is designed to handle large amounts of data while providing quick and relevant search results. Elasticsearch differs from other search engines in several ways, including:

Elasticsearch can handle large amounts of data and scale horizontally by distributing the index across multiple servers.
Elasticsearch is designed for speed and efficiency, boasting real-time indexing and search capabilities.
Elasticsearch's flexibility enables developers to create custom indexing and ranking algorithms, as well as finetune the relevance of search results by adjusting the weight of various attributes and facets.
Elasticsearch comes equipped with multi-language support, enabling the easy creation of search experiences for a worldwide audience.
Elasticsearch includes a robust set of analytics and visualization tools that make it simple to build custom dashboards and gain insight into search data.
Elasticsearch is versatile in that it can handle a wide range of use cases, including full-text search, analytics, logging, and more.
Elasticsearch is an open source search engine.

Conclusion

The importance of a search engine on your ecommerce website cannot be overstated because your users are extremely important. They should be able to find what they are looking for on your application quickly and easily, without having to search for hours.

This article introduced you to some fantastic search engines that you could integrate into your application. You can use any of them on your ecommerce website to provide your users with a consistent search experience.

Medusa is a good option for an ecommerce website because it offers an easy way to add search functionality using some of the options given in the article. With all of these in place, you can be confident of creating a fantastic application that your users will enjoy, driving sales, and optimizing your search.

Get started with Medusa by following the quickstart guide.

Should you have any issues or questions related to Medusa, then feel free to reach out to the Medusa team via Discord.

A Guide On Appwrite

Faith Pueneh — Sat, 12 Nov 2022 18:13:18 +0000

Introduction

How does it feel to have a fully secured, open-source, and self-hosted backend platform? that can be deployed on your preferred cloud tools and easily integrated with any frontend framework? That sounds fantastic, doesn't it? Well, don't worry because Appwrite is here to save the day. So, what exactly is Appwrite?
Appwrite is a self-hosted Backend-as-a-Service (BaaS) platform that gives you all of the core APIs, tools, and management console UI you need to build your application faster and more securely. Appwrite is compatible with any operating system, programming language, framework, or platform. This guide will walk you through the Appwrite installation process, its services, its competitors, and why you should use Appwrite.

Installation

Appwrite can be installed in two ways. You can use the one-click installation method to get Appwrite up and running on DigitalOcean or Gitpod pretty quickly. If you want to use this method of installation, you can learn more about it Here.
You will be installing Appwrite using Docker in this guide; if you do not already have Docker installed on your system, please click Here to download and install it.

You can now install Appwrite. To achieve this:

Confirm that you have installed Docker and that it is running.
Go to Appwrite.io.
Click on the Get Started button.
Copy the following command(Appwrite server is stored as a Docker container, which you can quickly set up from your terminal using the docker-compose command).

docker run -it --rm \
    --volume /var/run/docker.sock:/var/run/docker.sock \
    --volume "$(pwd)"/appwrite:/usr/src/code/appwrite:rw \
    --entrypoint="install" \
    appwrite/appwrite:1.0.3

Open your terminal and paste it there.
Press the enter key.
During installation, you will be asked where you want to run your HTTP port, as shown below.

You can make port 80 your default. - You will then be asked to select a secret API, which can be your name, as shown below.

You will be prompted to enter your Appwrite hostname, which should be the local host.
You will be prompted to enter your DNS record; continue to use the hostname for this.
Press the enter key and wait for it to be fully installed; you should see the message Appwrite installed successfully once the installation is complete.

If you go to your Docker, you should see your Appwrite container running, which has 20 other containers, as shown below.

To sign in to Appwrite, open your browser and type

localhost:80

Then enter your information as shown below.

If you do not already have an Appwrite account, you should create one before you can log in. After signing into Appwrite, you'll be able to see your dashboard and create a new project, as shown below.

Appwrite services

These are the Appwrite services; the team service will be covered in detail later.

Users API

The user service is used to manage the users in your project. It is used to search for and block users, as well as to view your user information, current section, and most recent activity. You can also update your user's preferences and personal information through your user service.

Databases API

This service enables you to create structured document collections, query and filter document lists, and manage an advanced set of read and write access permissions.

Storage API

This service enables you to manage your project files by uploading, viewing, downloading, and querying all of your project files. Files are managed in this service using buckets. Collections in the databases service are similar to storage buckets. The difference is that buckets have more power to decide what types of files and sizes you want to allow in that bucket, as well as whether or not to encrypt the files, use antivirus, and much more.

Localization API

This service enables you to modify your app dashboard based on the location of your users. You can get your user's location, IP address, list of countries and continent names, phone codes, currencies, and more by using this service.

Functions API

This service aids in the discovery of custom behavior that can be triggered by any supported Appwrite system event or a predefined schedule.

Avatars API

The service aims to help you complete your daily tasks that are related to your app image, icons, and avatars.

Health API

You can use this service to validate and monitor your Appwrite server instance, ensuring that all of its internal components are up and running and responsive.

Account API

You can use this service to manage and authenticate a user account. It is also used to update user information, retrieve user sections across multiple devices, and retrieve user security logs containing recent activity. You can use the account service to register new user accounts,using the Create Account,Create Magic URL session, or Create Phone session endpoint. You can authenticate the user account using any of the available signing methods. Once a user has been authenticated, a new session object is created to allow the user access to his or her private data and settings.
One of the account service's fantastic features is the multiple sign-in methods, which allow you to authenticate a user. Following authentication, a new session object will be created to allow the user access to his or her private data or settings.

Teams API

The team service enables you to group project users and give them read and write access to project resources such as database documents or storage files.
When a user creates a team, he or she becomes the team owner and can exercise ownership by inviting a new team member. Only team owners can invite users.
You will go through a series of team service sessions that will help you create a team in Appwrite.

Create Team

When a user creates a team, he or she becomes the team owner, and only the owner can invite new members, add new owners, update the team, and delete the team.
Here's an example of how to use the Create Team Endpoint.

import { Client, Teams } from "appwrite";

const client = new Client();

const teams = new Teams(client);

client
    .setEndpoint('https://[HOSTNAME_OR_IP]/v1') // Your API Endpoint
    .setProject('5df5acd0d48c2') // Your project ID
;

const promise = teams.create('[TEAM_ID]', '[NAME]');

promise.then(function (response) {
    console.log(response); // Success
}, function (error) {
    console.log(error); // Failure
});

List Teams

This endpoint returns a list of all the teams that the current user is a member of. You can use the parameters to select your results. It also returns a list of all the latest project teams.
The List Team Endpoint is demonstrated in the code below.

import { Client, Teams } from "appwrite";

const client = new Client();

const teams = new Teams(client);

client
    .setEndpoint('https://[HOSTNAME_OR_IP]/v1') // Your API Endpoint
    .setProject('5df5acd0d48c2') // Your project ID
;

const promise = teams.list();

promise.then(function (response) {
    console.log(response); // Success
}, function (error) {
    console.log(error); // Failure
});

Get Team

You can get a team by its ID using this Endpoint. This resource is accessible for all team members to read.
The Get Team Endpoint is demonstrated in the code below.

import { Client, Teams } from "appwrite";

const client = new Client();

const teams = new Teams(client);

client
    .setEndpoint('https://[HOSTNAME_OR_IP]/v1') // Your API Endpoint
    .setProject('5df5acd0d48c2') // Your project ID
;

const promise = teams.get('[TEAM_ID]');

promise.then(function (response) {
    console.log(response); // Success
}, function (error) {
    console.log(error); // Failure
});

Update Team

You can use this endpoint to update a team using its ID, and the update can be performed by members who have the owner role.
The Update Team Endpoint is demonstrated in the code below.

import { Client, Teams } from "appwrite";

const client = new Client();

const teams = new Teams(client);

client
    .setEndpoint('https://[HOSTNAME_OR_IP]/v1') // Your API Endpoint
    .setProject('5df5acd0d48c2') // Your project ID
;

const promise = teams.update('[TEAM_ID]', '[NAME]');

promise.then(function (response) {
    console.log(response); // Success
}, function (error) {
    console.log(error); // Failure
});

Delete Team

You can use this endpoint to delete a team using its ID, and the update can be performed by members who have the owner role.
The Delete Team Endpoint is demonstrated in the code below.

import { Client, Teams } from "appwrite";

const client = new Client();

const teams = new Teams(client);

client
    .setEndpoint('https://[HOSTNAME_OR_IP]/v1') // Your API Endpoint
    .setProject('5df5acd0d48c2') // Your project ID
;

const promise = teams.delete('[TEAM_ID]');

promise.then(function (response) {
    console.log(response); // Success
}, function (error) {
    console.log(error); // Failure
});

Why Appwrite

There are numerous reasons why you should use Appwrite,

one of which is that it is self-hosted.
Appwrite was designed with scalability in mind.
Appwrite can scale both horizontally and vertically, using a small number of containers to run where each container has its own job.
It is fast and secure.
It can handle access control.
Appwrite has a completely stateless architecture.
It supports multi-tenancy, which means that a single Appwrite instance can support an unlimited number of accounts and projects.
It has pre-built images that you can launch with a single click of the Do button.
It was created to work alongside the stack you are currently using.
It works fine with your current backend.
It supports Cloud functions and has over 15 runtimes, making it simple to implement any custom logic.

Appwrite vs Competitors

Supabase

Both Supabase and Appwrite are fantastic products, but Appwrite focuses on ease of use and increased productivity. This is done by maintaining a positive developer experience.

Firebase

Appwrite has a beautiful user interface, is simple to set up, and is consistent across platforms. Firebase is expensive, has limited scalability, is not open source, relies on a third party, cannot filter queries, and is not flexible.

Parse

Appwrite was created to work in a Docker-oriented environment, making it simple to deploy an infrastructure that already relies on Docker, is security-focused, and includes many security-driven features.

Conclusion

You should now have a good understanding of how Appwrite works, its features, and services. You can join Appwrite's Discord community here. to learn more about it. You can also visit its webpage. or repository .for additional information and resources.

How To Write A User Story

Faith Pueneh — Wed, 28 Sep 2022 00:14:12 +0000

Introduction:

One of the difficulties in developing a software application is determining and meeting the needs of the end user. This problem is easily solved by writing a user's story, which allows us to understand the end user's point of view. This article defines a user story, the benefits of writing one, and how to write one.

What is a user story:

User stories are agile software development tools used to explain a software feature written from the end user's perspective in an easy-to-understand format.
They are not written in detail and should not be big or small.
They only explain how a particular type of work will add value to the end user, who can be either colleagues or external users. They are written down on index cards, sticky notes, and project management software.

Benefits of the User Story:

Some of the benefits of the user story include but are not limited to these:

It helps the teams deliver high-quality content.
It enables collaboration with team members.
It helps in improving transparency.
It reduces risk by giving clarity to the requirement of the user.
It helps in supporting iterative development.
It helps focuses on vocal communication

How to write a user story:

User stories capture the most critical aspects of a requirement:

Who is it aimed at?
What does it expect of the system?
Why is it valuable (optional)?

They are written in this format:
As a [role], [i want to] [so that]
The “role” refers to the user that would interact with the system
The “want to” represents the behavior of the system and is peculiar to each story.
“So that” explains the benefit of the story.
As an example:
As a manager, I want to be able to track my team’s progress so that I can record our successes and failures.

Conclusion:

User stories can be understood by anyone and keep you from becoming entangled in technical jargon. It develops each proposed idea for new functionality from the point of view of real users.

How To Beautifully Organize Your GitHub Profile.

Faith Pueneh — Sat, 12 Mar 2022 00:47:06 +0000

Have you ever come across GitHub profiles looking like this 👇👇

And you are like wow! How do they do that? You will be making your GitHub profile look beautiful and outstanding by using the steps in this article. One of the benefits of organizing your GitHub profile in this manner is that it helps show off your skills and projects to the general audience faster. You will be using the GitHub Profile README hidden feature to do this.

Step One:

Log in to your GitHub account, click on your repository and click on the new button to add a new repository. The repository name will be the same as your profile name as seen below. Make your repository public.

Tick on the ‘Add a README file’ to initialize the repo. You can now click on the ‘ Create repository’ button to create your repository.

Step Two

With one click of the 'Create repository' button, you will see the page below.

Click on the edit icon on the right-hand side, this will take you to the README page showing some GitHub markdown template as seen.

You can start editing the markdown template to whatever you wish and how you will want it to look like.

To add a badge to your profile as seen.

Go to shields.io and use the following syntax to add your badge.



![<Badge Name>](https://img.shields.io/badge/<Badge Text>-<Background Color>?style=for-the-badge&logo=<Icon Name>&logoColor=<Logo Color>)

Below is a Linkedin badge created using the above syntax.



![linkedin](https://img.shields.io/badge/Linkedin-0e76a8?style=for-the-badge&logo=Linkedin&logoColor=white)]

You can use this same procedure to add your skills/tech stack badge to your profile.

Step Three

There are a lot of open-source resources that will help you in beautifying your profile. Below are three resources you can use in adding your git stats, streak, top languages, and profile view.

GitHub Streak

DenverCoder1 / github-readme-streak-stats

🔥 Stay motivated and show off your contribution streak! 🌟 Display your total contributions, current streak, and longest streak on your GitHub profile README

Github Readme Streak Stats

Display your total contributions, current streak
and longest streak on your GitHub profile README

⚡ Quick setup

Copy-paste the markdown below into your GitHub profile README
Replace the value after ?user= with your GitHub username

[![GitHub Streak](https://streak-stats.demolab.com/?user=DenverCoder1)](https://git.io/streak-stats)

Star the repo 😄

Next Steps

Check out the Demo Site or Options below for available customizations.
It is recommended to self-host the project more better reliability. See Deploying it on your own for more details.

⚙ Demo Site

Here you can customize your Streak Stats card with a live preview.

https://streak-stats.demolab.com

🔧 Options

The user field is the only required option. All other fields are optional.

If the theme parameter is specified, any color customizations specified will be applied on top of the theme, overriding the theme's values.

Parameter	Details	Example
`user`	GitHub username to show stats for	`DenverCoder1`

…

View on GitHub

Top Languages and Stats

anuraghazra / github-readme-stats

⚡ Dynamically generated stats for your github readmes

GitHub Readme Stats

Get dynamically generated GitHub stats on your READMEs!

View Demo · Report Bug · Request Feature · FAQ · Ask Question

Français · 简体中文 · Español · Deutsch · 日本語 · Português Brasileiro · Italiano · 한국어 · Nederlands · नेपाली · Türkçe

Please note that documentation translations may be outdated; try to use English documentation if possible.

Love the project? Please consider donating to help it improve!

Are you considering supporting the project by donating to me? Please DO NOT!!!

India has recently suffered one of the most devastating train accidents, and your help will be immensely valuable for the people who were affected by this tragedy.

Please visit this link and make a small donation to help the people in need. A small donation goes a long way. ❤️

Features

View on GitHub

Profile View

antonkomarev / github-profile-views-counter

It counts how many times your GitHub profile has been viewed. Free cloud micro-service.

GitHub Profile Views Counter

Introduction

Try Ÿ HŸPE service as the more robust and feature rich solution.

GHPVС project is proof of concept. This counter designed to be an analytical instrument for you, but not for people who are visiting your profile It could be used to see profile views dynamics as result of development activity, blogging or taking part in a conference.

It counts how many times your GitHub profile has been viewed and displays them in your profile, for free.

Usage

Cloud solution launched as 100% free experience. Help me cut server costs if you like this service.

If you want to see big numbers in your profile, deploy a standalone solution to draw any views count you want without spamming our server. Everybody knows that any counters could be faked.

A billion fake profile views doesn't make you a very popular person, it makes you a person…

View on GitHub

Other features you can add are:

Trophy
Cover picture
Floating image or gif
Spotify playing
README typing SVG
Blog post workflow
Markdown icons
README quotes.

The list goes on, you could browse about these features and see how to add them to your profile.

Final Note:

There is also an easy way of beautifying your Github profile by using a profile README generator profile-readme-generator. This contains all the features, all you need to do is fill in the features you want on your profile and click the ‘Generate Readme’ button, copy the code and paste it on your special repository. It's that simple. I will love to get feedback on how you created your profile and the method you used.

How To Build A Random Quote Generator.

Faith Pueneh — Tue, 22 Feb 2022 06:56:31 +0000

Introduction:

You will be building a simple quote generator using HTML to structure your project, CSS to style and make it look beautiful, and Javascript for the logic. The quote will be randomly generated at the click of the button. This is a beginner project that will help you learn how to use an array and object in javascript.

Prerequisite:

Have a good knowledge of HTML
Have a good knowledge of CSS
Have a good knowledge of Javascript.

HTML :

In every web application, the HTML structure is quite important. It will help you when you are styling your project.

Create an HTML file called index.html.
In the body tag, create two divs and give the first a class of container.
This first div will contain the h3 element with an id called quote for the quotes and the p element with an id called author for the name of the author.
The second div will contain the button element used to randomly choose a new quote.
Give the button an onClick event handler with a function called handleSubmit.

 ...
 <body>
    <div class="container">
      <div class="quotes">
        <h3 id="quote">Quotes</h3>
        <p id="author">Author</p>
      </div>
    </div>
    <div>
      <button onclick="handleSubmit()">Generate Quote</button>
    </div>

    <script src="./js/app.js"></script>
  </body>
...

CSS :

You will be styling your HTML elements, to do this link the CSS to your HTML as seen below.

<link rel="stylesheet" href="css/style.css" />

You won’t be using a CSS framework to style this project, here is the CSS file

body {
  background-color: #09b37d;
}
.container {
  width: 85%;
  height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: auto;
}
.quotes {
  width: 900px;
  height: 450px;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 50px;
  color: #333333;
  background-color: #0ae59f;
  border: 10px solid #055139;
}
.quotes p,
h3 {
  font-size: 1.5rem;
}
.quotes p {
  font-family: "Redressed", cursive;
}
.quotes h3 {
  font-family: "Roboto Mono", monospace;
}
button {
  display: block;
  margin: auto;
  background-color: #055139;
  color: #0ae59f;
  padding: 20px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

You are building this project for mobile screens, to make it responsive on a larger screen you will be using the media query as seen below.

@media screen and (min-width: 992px) {
  .container {
    width: 80vw;
    height: 85vh;
    margin: auto;
  }
}

Javascript:

You have been able to create a structure and style it. Now you are to add functionality to it. If you click on the button, it doesn't generate code yet. To do this,
Link your external javascript file to your HTML as seen below.

<script src="./js/app.js"></script>

In your javascript file create a function called handleSubmit.
Create a variable called quotes and assign an object that has some selected quotes and their authors in it.
To make the quote pick an author, create another variable called randomAuthors, assign an object with an object key that has the quotes variable in it.
To randomly select an author create a variable called authorPicker and assign the randomAuthors with an array that has the math. floor and math. Random in it.
Multiply by randomAuthors.length.

function handleSubmit() {
  let quotes = {
    "— Henry Ford":
      '"Whether you think you can or you think you can’t, you’re right."',
    " — Alice Walker":
      '"The most common way people give up their power is by thinking they don’t have any."',
    "— Herb Brooks": '"Risk something or forever sit with your dreams."',
    "— Steve Jobs":
      '"The only way to do great work is to love what you do. If you haven’t found it yet, keep looking. Don’t settle.”"',
    "— Theodore Roosevelt": '"Believe you can and you’re halfway there."',
    " — Vince Lombardi":
      '"Perfection is not attainable, but if we chase perfection we can catch excellence."',
    " — Audrey Hepburn":
      'Nothing is impossible, the word itself says ‘I’m possible’!."',
    " — Nelson Mandela":
      '"There is no passion to be found in playing small — in settling for a life that is less than you are capable of living."',
    " — Mahatma Gandhi": '"The future depends on what you do today."',
    " — Stephen Covey":
      '"I am not a product of my circumstances. I am a product of my decisions."',
    " — Albert Einstein":
      '"Strive not to be a success, but rather to be of value."',
    " — Farrah Gray":
      '"Build your own dreams, or someone else will hire you to build theirs."',
  };
  let randomAuthors = Object.keys(quotes);
  let authorPicker =
    randomAuthors[Math.floor(Math.random() * randomAuthors.length)];
}

Next, create a variable called quote assign the quote object with an array that has the authorPicker in it.
To get the id for both the h3 and p elements, you will use the document.getElementById to get the id of the quote and the author as seen below.

   ...
 let quote = quotes[authorPicker];
  document.getElementById("quote").innerHTML = quote;
  document.getElementById("author").innerHTML = authorPicker;

Here is the code base in CodePen:

Conclusion:

There are several other ways you can get your quote in javascript. One of which is creating custom data and fetching it into your javascript file. Another way is to get an actual quote generator API and fetch it into your project. You could also create an array containing the quotes and their authors without using an object. Whichever way you decide on using it, I will love to get your feedback. I hope this article was helpful.
Happy coding!!!🙌,🙌,

How To Randomly Change Background Color in Javascript.

Faith Pueneh — Wed, 16 Feb 2022 06:53:39 +0000

Introduction:

In this article, you will learn how to change your background color randomly by using the Javascript built-in Math functions and the hexadecimal color code. You will learn how to use the onClick event function to trigger the button’s action. Changing a background color randomly can be interesting, there are a couple of web applications that this has been used on.

Prerequisite:

Have a good knowledge of HTML
Have a good knowledge of CSS
Have a good knowledge of Javascript.

HTML Structure:

To begin the project create an HTML file called index.html.

In the body tag, create a div with a class called ‘container’.
Create another div in the first div.
Create an h1 tag with its title.
Create an h2 tag with a span tag inside of it. Give the span tag an id called ‘colorCode’ . the span tag holds the random hexadecimal number whenever it is called.
Create a button element with a class called btn- color as seen below



...
 <body>
    <div class="container">
      <div>
        <h1>Click The Button Below To Generate A Random Hex Color Code.</h1>
        <h2>Your backgroud color is : # <span id="colorCode">0f5257</span></h2>
        <button  class="btn-color">
          Generate Color
        </button>
      </div>
    </div>

  </body>
...

CSS Structure:

Create a CSS folder and in it create a file called style.css, this is where you will write all your CSS. To link your CSS to your HTML, in your HTML file, add the following to the head tag.



...
<link rel="stylesheet" href="Css/style.css" />
...

Go back to your CSS file and write down the following code. Please note that you are to start building this project for mobile screens and use a media query to style for larger screens. To make this project responsive on larger screens, you will use a min-width of 992px as seen below.



body {
  padding: 0;
  margin: 0;
  background-color: #0f5257;
}

.container {
  width: 85%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: auto;
}
h1 {
  font-size: 1rem;

}
h2 {
  font-size: 0.9rem;
  margin: 10% 0;
  color: #fff;
}
.btn-color {
  padding: 3% 3%;
  border: none;
  border-radius: 5px;
  color: #0f5257;
  font-size: 1rem;
  cursor: pointer;
}

@media screen and (min-width: 992px) {
  /* For Large Laptops */
  .container {
    width: 100vw;
    margin: auto;
  }
  h1 {
    font-size: 2.5rem;
  }
  h2 {
    font-size: 1.8rem;
  }
  .btn-color {
    padding: 2% 2%;
    margin: auto;
    font-size: 1.7rem;
    font-weight: bold;
  }
}

Here is what it will look like on a mobile screen.

Here is what it will look like on a larger screen.

You will animate the h1 tag using the CSS animation property. In your CSS give the h1 selector the property of animation and give it a name value of ‘hexcolors’ it will last for 5s and it should be infinite alternate. It alternates the colors.



...
h1 {
  font-size: 1rem;
  animation: hexcolors 5s infinite alternate;
}
...

@keyframes add the name-value ‘hexcolors’, we will start animating the text colors at 0%. At 0% it should have a color #fe5e41, at 20% it should have a color of #646e68, at 40% it should have a color of #d8f1a0, at 60% it should have a color of #0075f2, at 80% it should have a color of #c7a27c, at 100% it should have a color of #a23b72.



...
@keyframes hexcolors {
  0% {
    color: #fe5e41;
  }
  20% {
    color: #646e68;
  }
  40% {
    color: #d8f1a0;
  }
  60% {
    color: #0075f2;
  }
  80% {
    color: #c7a27c;
  }
  100% {
    color: #a23b72;
  }
}
...

The color of the h1 text keeps changing as seen below

Javascript Structure:

For the javascript part of the project,

create a folder called js and create an index.js file in it.
Go to your HTML code and link it to your js as seen below.



<script src="./js/index.js"></script>

In your javascript file create a function called handleSubmit and create an array called hexNumbers, input all the hex numbers into it.
Hexadecimal color code start from 0 to 9 and from A to F. ```javascript

function handleSubmit() {
let hexNumbers = [
"0",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"A",
"B",
"C",
"D",
"E",
"F",
];
}

- Create a variable called hexColorCode and assign an empty string to it.  This is where all the hex code you generate goes into. 
- Create a for loop that runs six times, starting from 0 to 5. This loop will generate the hex code for you. 
- Create a variable that generates a random index, this will help in picking a random hex number. 
- You will use the built-in math function to enable you to multiply your hex number array using the math.random function.   This will return a decimal number,  to change the decimal number to a whole number you will use the math.floor function in the codebase.
- Next you will concatenate the hex numbers and the random index variable in the hexColorCode you created earlier on.
```javascript


...
let hexColorCode = "";
  for (var i = 0; i < 6; i++) {
    let randomIndex = Math.floor(Math.random() * hexNumbers.length);
    hexColorCode += hexNumbers[randomIndex];
  }
...

Get the id of the span tag using document.getElementById. This will change the display the hexadecimal color code on the screen. Also get the body tag using document.getElementByTagName, this will the background color of the body on click of the button.



...
  document.getElementById("colorCode").innerHTML = hexColorCode;
  document.getElementsByTagName("body")[0].style.background =
    "#" + hexColorCode;

Here is the code base in CodePen:

Conclusion:

Bravo!!! You have learnt how to use two built-in math functions ( random and floor), just by building this project. You have also learned how to use the for loop. It's time to practice what you have learned. You can use this knowledge in building different awesome projects. A lot of websites change their background color randomly and so this knowledge will definitely not go to waste.

How To Create A Custom Edit Form In DevExtreme Datagrid Using Semantic UI React.

Faith Pueneh — Thu, 02 Dec 2021 06:46:49 +0000

Have you ever tried to change the edit/add form of your DevExtreme grid when creating a CRUD operation and found out you couldn’t do it? In this article, you will learn how to create a custom edit/add form. Before we start the project, let us get to know about Semantic UI and DevExtreme DataGrid.

Semantic UI is a front-end development framework similar to bootstrap. It is designed for theming. It contains prebuilt semantic components that help create beautiful and responsive layouts using friendly HTML syntax. It integrates React, Angular Ember, etc. It uses gulp build tools to help your project preserve its theme changes. Gulp is a javascript tool that allows you to automate tasks like builds, minification, compilation, etc.
You can read more about it here: https://react.semantic-ui.com/.

DevExtreme Datagrid helps us in creating large datasets with integrated server-side support that helps with data sorting, record grouping, filtering, and paging.

To start the project, create a react app called devgrid.

 $ npx create-react-app devgrid

After creating the app in react, cd into the folder and install Semantic UI react, there are two ways you can install it. You can either use npm or yarn.

npm:

$ npm install semantic-ui-react semantic-ui-css

yarn:

$ yarn add semantic-ui-react semantic-ui-css

Import the Semantic minified CSS file into the index.js component, this provides a light weight css version of Semantic UI. It is important you import it so you can see every change you make.

// index.js
import React from "react";
import "semantic-ui-css/semantic.min.css";

Creating The Project

Next you will install the DevExtreme dependencies, create a components folder inside the src folder, then create a component file called DevGrid within the components folder. Import react and DevExtreme UI into the DevGrid components.

npx -p devextreme-cli devextreme add devextreme-react

//DevGrid.js
import React from "react";
import "devextreme/dist/css/dx.common.css";
import "devextreme/dist/css/dx.light.css";

Import the datagrid from DevExtreme.

import DataGrid, {
  FilterPanel,
  FilterRow,
  SearchPanel,
  Paging,
  Editing,
  Export,
  Pager,
  Grouping,
  GroupPanel,
  RowDragging,
  Column,
  RequiredRule,
} from "devextreme-react/data-grid";

Also import the popup from DevExtreme.

import { Popup } from "devextreme-react/popup";

Import the Form, Segment, and Button from Semantic UI.

import { Segment,  Button, Form } from "semantic-ui-react";

To create your custom edit form that will override that of DevExtreme Datagrid, you will structure your codebase in the format below, using the segment element from Semantic UI to wrap every other element.

const DevGrid = () => {
  return (
    <Segment>
      <h1>Welcome To Devgrid</h1>
      <div className="ui info message">
        <div className="header">We Love To Learn.</div>
      </div>

      <div>
        <DataGrid
          id="devgrid"
          className="dx-datagrid dx-row-alt"
          hoverStateEnabled={true}
          columnAutoWidth={true}
          dataSource={DataSource}
          activeStateEnabled={true}
          columnResizingMode="widget"
          allowColumnResizing={true}          
          columnHidingEnabled={true}>
          <RowDragging allowReordering={true} />
          <FilterPanel visible={true} />
          <SearchPanel visible={true} />
          <FilterRow visible={true} />
          <Paging defaultPageSize={10} />
          <Pager
            showPageSizeSelector={true}
            allowedPageSizes={[10, 20, 50, 100]}
            showInfo={true}
          />
          <Grouping contextMenuEnabled={true} />
          <GroupPanel visible={true} />
          <Editing
            mode="popup"
            useIcons={true}
            allowUpdating={true}
            allowDeleting={true}
            allowAdding={true}>
            {" "}
          </Editing>

          <Export
            enabled={true}
            fileName="Devgrid"
            allowExportSelectedData={true}
          />

          <Column dataField="ID" visible={false}></Column>
          <Column dataField="Prefix">
            <RequiredRule />
          </Column>
          <Column dataField=" FirstName">
            <RequiredRule />
          </Column>
          <Column dataField="LastName">
            <RequiredRule />
          </Column>
        </DataGrid>

      </div>
    </Segment>
  );
};
export default DevGrid;

Run your project using yarn start/ npm start in your terminal to see how it looks like in your browser.

This is how your grid and edit form will look like.

To get the data, create a custom data in your project and pass it as a prop to the Datagrid component as shown below.

const myData = [
    {
      ID: 1,
      FirstName: "Leesi",
      LastName: "Heart",
      Prefix: "Mrs.",
    },
    {
      ID: 2,
      FirstName: "Testimonies",
      LastName: "Drake",
      Prefix: "Mrs.",
    },
    {
      ID: 3,
      FirstName: "Olivia",
      LastName: "Regina",
      Prefix: "Mrs.",
    },
    {
      ID: 4,
      FirstName: "Owanate",
      LastName: "Peter",
      Prefix: "Ms.",
    },
    {
      ID: 5,
      FirstName: "Leera",
      LastName: "Samuel",
      Prefix: "Ms.",
    },
    {
      ID: 6,
      FirstName: "Becky",
      LastName: "Craig",
      Prefix: "Mrs.",
    },
    {
      ID: 7,
      FirstName: "Gloria",
      LastName: "Johnson",
      Prefix: "Ms.",
    },
  ];

      <DataGrid
         ...          
          dataSource={myData}
         >
         ...
        </DataGrid>

Your DevExtreme edit/add form looks like this before customizing it.

To modify the form, add the Semantic UI form element. Add the form element as a child of the popup element from DevExtreme. Add another elememt called ‘Form. Field’ inside the form as shown below. In Semantic UI, ‘.field’ is added to forms that contain the label and input element .The popup should be outside the DataGrid.


        <Popup
          title="Create"       

          showCloseButton={false}
          width={700}
          minHeight={"auto"}
          height={600}>
            <Form size="large" >
              <Form.Field>
                <label>ID</label>
                <input placeholder="ID" />
              </Form.Field>
              <Form.Field>
                <label>Prefix</label>
                <input placeholder="Prefix" />
              </Form.Field>
              <Form.Field>
                <label>First Name</label>
                <input placeholder="First Name" />
              </Form.Field>
              <Form.Field>
                <label>Last Name</label>
                <input placeholder="Last Name" />
              </Form.Field>
              <Form.Field></Form.Field>

            <Button.Group>
              <Button positive>Save</Button>
              <Button.Or />
              <Button>Cancel</Button>
            </Button.Group>
          </Form>
        </Popup>

Next create a state that will manage your popup and form component. Set its initial value to false.Create a function to handle your state and set it to true. Call it in your popup and form as shown below.

const [onVisible, setOnVisible] = React.useState(false);

 const handleAddNew = () => {
    setOnVisible(true);
  };

        <Popup

           visible={onVisible}
          >
          <Form size="large" setOnVisible={() => setOnVisible(false)}>

This doesn't make a change on the form, you can still see the DevExtreme form. To make your custom form visible,you need to create a function that you will call in your Datagrid in the DevGrid component. To do this, create a function called onToolbarPreparing. In it create a variable called “tools items”, assign the “tool bar option" to it. Do a for loop that increases the length of the “tools items”. Create a variable called item and assign the tools item to it create an if statement in the for loop that checks if “item.name “ is equal to “addRowButton” when clicked. If equal, it adds up a new form using the "handleAddNew” function.

function onToolbarPreparing(e) {
    let toolsItems = e.toolbarOptions.items;

    for (let i = 0; i < toolsItems.length; i++) {
      let item = toolsItems[i];
      if (item.name === "addRowButton") {
        item.options.onClick = handleAddNew;
        break;
      }
    }
  }

Pass function onToolbarPreparing as a prop to your Datagrid this way

        <DataGrid
          id="devgrid"
          className="dx-datagrid dx-row-alt"
          hoverStateEnabled={true}
          columnAutoWidth={true}
          dataSource={myData}
          activeStateEnabled={true}
          columnResizingMode="widget"
          allowColumnResizing={true}
          onToolbarPreparing={onToolbarPreparing}
          columnHidingEnabled={true}>

Now click on your add button and you will be able to see your custom form.

Here is the code base for DevGrid component

import React, { useState, useEffect } from "react";
import "devextreme/dist/css/dx.common.css";
import "devextreme/dist/css/dx.light.css";
import DataGrid, {
  FilterPanel,
  FilterRow,
  SearchPanel,  
  Paging,
  Lookup,  
  Position,
  Editing,
  Export,
  Pager,
  Grouping,
  GroupPanel,
  RowDragging,
  Column,
  RequiredRule,

} from "devextreme-react/data-grid";
import { Popup } from "devextreme-react/popup";
import { Segment, Button, Form } from "semantic-ui-react";
import axios from "axios";

const DevGrid = () => {

  const [onVisible, setOnVisible] = React.useState(false);

  const myData = [
    {
      ID: 1,
      FirstName: "Leesi",
      LastName: "Heart",
      Prefix: "Mrs.",
    },
    {
      ID: 2,
      FirstName: "Testimonies",
      LastName: "Drake",
      Prefix: "Mrs.",
    },
    {
      ID: 3,
      FirstName: "Olivia",
      LastName: "Regina",
      Prefix: "Mrs.",
    },
    {
      ID: 4,
      FirstName: "Owanate",
      LastName: "Peter",
      Prefix: "Ms.",
    },
    {
      ID: 5,
      FirstName: "Leera",
      LastName: "Samuel",
      Prefix: "Ms.",
    },
    {
      ID: 6,
      FirstName: "Becky",
      LastName: "Craig",
      Prefix: "Mrs.",
    },
    {
      ID: 7,
      FirstName: "Gloria",
      LastName: "Johnson",
      Prefix: "Ms.",
    },
  ];
  const handleAddNew = () => {
    setOnVisible(true);
  };

  function onToolbarPreparing(e) {
    let toolsItems = e.toolbarOptions.items;

    for (let i = 0; i < toolsItems.length; i++) {
      let item = toolsItems[i];
      if (item.name === "addRowButton") {
        item.options.onClick = handleAddNew;
        break;
      }
    }
  }

  return (
    <Segment>
      <h1>Welcome To Devgrid</h1>
      <div className="ui info message">
        <div className="header">We Love To Learn.</div>
      </div>

      <div>
        <DataGrid
          id="devgrid"
          className="dx-datagrid dx-row-alt"
          hoverStateEnabled={true}
          columnAutoWidth={true}
          dataSource={myData}
          activeStateEnabled={true}
          columnResizingMode="widget"
          allowColumnResizing={true}
          onToolbarPreparing={onToolbarPreparing}
          columnHidingEnabled={true}>
          <RowDragging allowReordering={true} />
          <FilterPanel visible={true} />
          <SearchPanel visible={true} />
          <FilterRow visible={true} />
          <Paging defaultPageSize={10} />
          <Pager
            showPageSizeSelector={true}
            allowedPageSizes={[10, 20, 50, 100]}
            showInfo={true}
          />
          <Grouping contextMenuEnabled={true} />
          <GroupPanel visible={true} />
          <Editing
            mode="popup"
            useIcons={true}
            allowUpdating={true}
            allowDeleting={true}
            allowAdding={true}>
            {" "}
          </Editing>

          <Export
            enabled={true}
            fileName="Devgrid"
            allowExportSelectedData={true}
          />

          <Column dataField="ID" visible={false}></Column>
          <Column dataField="Prefix">
            <RequiredRule />
          </Column>
          <Column dataField="FirstName">
            <RequiredRule />
          </Column>
          <Column dataField="LastName">
            <RequiredRule />
          </Column>
        </DataGrid>
        <Popup
          title="Create"
          // showTitle={true}
          visible={onVisible}
          showCloseButton={false}
          width={700}
          minHeight={"auto"}
          height={600}>
          <Form size="large" setOnVisible={() => 
           setOnVisible(false)}>
            <Form.Field>
              <label>ID</label>
              <input placeholder="ID" />
            </Form.Field>
            <Form.Field>
              <label>Prefix</label>
              <input placeholder="Prefix" />
            </Form.Field>
            <Form.Field>
              <label>First Name</label>
              <input placeholder="First Name" />
            </Form.Field>
            <Form.Field>
              <label>Last Name</label>
              <input placeholder="Last Name" />
            </Form.Field>
            <Form.Field></Form.Field>

            <Button.Group>
              <Button positive>Save</Button>
              <Button.Or />
              <Button>Cancel</Button>
            </Button.Group>
          </Form>
        </Popup>
      </div>
    </Segment>
  );
};
export default DevGrid;

Conclusion

With this customization, your form will be having a different look and feel, you could also create multiple forms using different form styles in DevExtreme Datagrid using this method. I choose Semantic UI for the customization because it's a natural language, you can easily make your form responsive, the sleek feel you get when looking at the UI and lastly it is lightweight.