Forem: Ewenike Chukwuemeka Emmanuel👨‍💻

Build on Chain Without Smart Contracts

Ewenike Chukwuemeka Emmanuel👨‍💻 — Mon, 22 Sep 2025 09:54:40 +0000

One of the issues web2 developers face when trying to build on chain is usually the complexity that comes with web3 and smart contracts.

Deploying on chain is relatively expensive, this also deters web2 developers from migrating to web3.

In this article, I will show you a solution to these problems. A way by which you can build on chain without learning solidity, the expensive fees etc.

The PWR Chain Solution: Decoupling Consensus from Execution, PWR Chain redefines blockchain development by introducing a modular architecture that separates consensus from execution. Unlike traditional blockchains, where computation and storage are tightly coupled with the consensus mechanism, PWR Chain operates as a decentralized data layer. This layer serves as an immutable, verifiable source of truth, while allowing developers to process data off-chain using familiar Web2 tools like Python, Java, or SQL.

The result is a platform that combines the trust and transparency of blockchain with the scalability, flexibility, and accessibility of Web2 development. At the heart of this innovation are Verifiable Immutable Data Applications (VIDAs) — self-contained programs that operate off-chain but anchor their state to PWR Chain’s immutable ledger. VIDAs eliminate the need for smart contracts, enabling developers to build decentralized applications without learning new languages or worrying about gas fees. By decoupling execution from the blockchain, PWR Chain ensures that applications can scale horizontally, integrate seamlessly with existing systems, and remain secure with post-quantum cryptography.

Why you should use PWR Chain:

No Smart Contracts, No Problem:
Smart contracts often require developers to learn Solidity or other blockchain-specific languages, which can feel alien to those accustomed to Python, Java, or JavaScript. With PWR Chain, developers can write VIDAs in their preferred programming languages, leveraging the tools and frameworks they already know. This lowers the barrier to entry, allowing Web2 developers to build decentralized applications without retraining or retooling.

Cost Efficiency:
Gas fees are a major pain point in Web3 development. Deploying and executing smart contracts on traditional blockchains can cost hundreds or even thousands of dollars, depending on network congestion. VIDAs, on the other hand, process data off-chain, eliminating gas fees entirely. Developers only interact with PWR Chain’s ledger to record critical actions or state updates, which are designed to be lightweight and cost-effective. This makes PWR Chain an attractive option for startups, indie developers, and enterprises looking to minimize costs.

Horizontal Scalability:
Traditional blockchains often struggle with scalability, as every node must process and store all transactions. PWR Chain’s modular architecture allows developers to add unlimited VIDAs without congesting the network. Each VIDA operates independently, processing its own data off-chain while relying on the blockchain for immutability and verifiability. This ensures that applications can scale to meet the demands of global enterprises or high-traffic consumer apps.

Familiar Development Environment:
PWR Chain’s VIDAs integrate seamlessly with existing Web2 workflows. Developers can use standard IDEs, libraries, and debugging tools to build and test their applications. Whether you’re building a financial app, a supply chain tracker, or a gaming platform, you can leverage the same tools you use for Web2 development while still benefiting from blockchain’s trust guarantees.

Enterprise Integration:
For enterprises, PWR Chain offers a bridge between legacy systems and decentralized technology. VIDAs can connect to existing ERP, CRM, or database systems via APIs, enabling businesses to anchor critical actions — like financial transactions or supply chain records — to the blockchain without overhauling their infrastructure. This makes PWR Chain an ideal choice for industries like finance, healthcare, and logistics, where auditability and security are paramount.

This is How PWR Chain Works:

Define the Application Logic:
Suppose you’re building a decentralized supply chain tracking system. Using Python, you write a VIDA that processes data about shipments, verifies supplier credentials, and calculates delivery timelines. This logic runs off-chain, so you don’t need to worry about gas fees or blockchain-specific constraints.

Anchor to the Ledger:
When a shipment is confirmed, the VIDA records a hash of the transaction data (e.g., supplier ID, timestamp, and delivery details) to PWR Chain’s immutable ledger. This ensures that the transaction is tamper-proof and verifiable by anyone.

Enable Cross-App Communication:
If your supply chain app needs to interact with a payment system (another VIDA), PWR Chain’s Conduit Nodes facilitate trustless communication. These nodes follow app-specific rules to ensure secure, decentralized data exchange without relying on centralized intermediaries.

Verify Results:
Anyone — whether a user, auditor, or third party — can verify the application’s state by checking the data anchored to PWR Chain’s ledger. This transparency ensures trust without requiring users to run complex blockchain nodes.
As a Developer, this is how you can use PWR Chain in the real world.

Finance: Build decentralized lending platforms that integrate with existing banking systems, using VIDAs to process loan calculations off-chain while recording approvals on-chain.

Supply Chain: Create transparent, tamper-proof supply chain trackers that sync with enterprise ERP systems, ensuring auditability without sacrificing performance.

Gaming: Develop decentralized games where in-game assets are verifiable on-chain, but gameplay logic runs off-chain for low latency and cost.

Healthcare: Store patient records securely, with VIDAs handling data processing and blockchain anchoring critical updates like treatment histories.

Conclusion

The hassle that comes with building on chain has ended since the creation of PWR chain. Web2 developers can now easily build on chain by utilizing the incredible powers of PWR Chain.

By decoupling consensus from execution and introducing Verifiable Immutable Data Applications (VIDAs), PWR Chain empowers developers to build decentralized applications using familiar Web2 tools like Python, Java, and SQL — without the need for smart contracts, proprietary languages, or expensive gas fees. This revolutionary platform combines the trust and transparency of blockchain with the scalability, flexibility, and cost-efficiency of traditional development, making it accessible to indie developers, startups, and global enterprises alike. (documentation)

Don`t Read This Article, You Might Regret It

Ewenike Chukwuemeka Emmanuel👨‍💻 — Wed, 04 Jun 2025 02:35:30 +0000

Have you ever been in a position where you wished if you could bookmark social media posts and get reminded of them? Or maybe you are reading an article but you don`t have time to finish it up, you wished if you could bookmark it and get reminded of it later.

There is a chrome extension that will enable you to bookmark any link (URL) of anything and get reminded of it based on the time you sechulded for it.

Reminder

The name of this extension is called reminder (reminder), it allows you to bookmark any link and set a reminder for that link. It has a built in calendar that enables you to choose anytime and date you want to be reminded of the link.

Notification

When it`s your scheduled time, the extension takes you to a new tab with a sound that will grab your attention. In that tab, you will see the link of the thing you bookmarked, you can either click on the link to visit the bookmark or you can close the tab.

Persistence

Your bookmarks won`t be deleted if you reboot your PC, the bookmarks are stored on your browser, making them persistent, even if you reboot your PC.

Translation

The extension also comes with a translation feature that enables you to translate words from one language to another. It has a dropdown, where you get to choose which language you are translating from, vice versa.

You can install the extension from chrome web store, link

Go ahead and start being more productive with Reminder 😊!

This Chrome Extension will Make You More Productive As A Developer

Ewenike Chukwuemeka Emmanuel👨‍💻 — Mon, 21 Apr 2025 05:09:44 +0000

There is a chrome extension that will enable you to bookmark any link (URL) of anything and get reminded of it based on the time you sechulded for it.

Reminder
The name of this extension is called reminder (reminder), it allows you to bookmark any link and set a reminder for that link. It has a built in calendar that enables you to choose anytime and date you want to be reminded of the link.

Notification
When it`s your scheduled time, the extension takes you to a new tab with a sound that will grab your attention. In that tab, you will see the link of the thing you bookmarked, you can either click on the link to visit the bookmark or you can close the tab.

Persistence
Your bookmarks won`t be deleted if you reboot your PC, the bookmarks are stored on your browser, making them persistent, even if you reboot your PC.

Translation
The extension also comes with a translation feature that enables you to translate words from one language to another. It has a dropdown, where you get to choose which language you are translating from, vice versa.

You can install the extension from chrome web store, link

Go ahead and start being more productive with Reminder 😊!

How To Build A Dynamic Modal In Next js

Ewenike Chukwuemeka Emmanuel👨‍💻 — Sat, 05 Apr 2025 08:43:28 +0000

As developers, we want to show users different UIs based on certain conditions. Maybe you want to show different kinds of messages for celebrations, paid users or different kinds of warnings. Creating separate modals for each case can be repetitive and stressful.

You can easily create a dynamic modal that shows different kinds of messages or UIs to users using logical AND condition. For this article, we will be using Next.js for our code examples.

Prerequisites
To follow along, you should have:

Basic knowledge of React or Next.js
A good understanding of JavaScript fundamentals
Node.js installed on your machine
A modern web browser (like Google Chrome)

What is Logical AND (&&) condition
It is a condition that allows us to evaluate expressions in Javascript and return a value if our expression is truthy.

const data = "success"
{data === "success" && <p>You are welcome to the world of coding</p>}

In our example above, we can only render

You are welcome to the world of coding

if only the data is equal to success. We can choose any words or value we want to use, you will be able to render the text as long as it's true. You can clearly see what we can do with this condition right? that's good, let's keep going.

export default function SubmissionRejectionModalPage() {
    const modalRef = useRef<HTMLDivElement>(null);
    const modalContentRef = useRef<HTMLDivElement>(null); // Ref for modal content
    const modalSvc = useContext<ModalService>(ModalSvcContext);

    // Function to close the modal
    const closeModal = () => {
        modalSvc.closeModal(APP_MODALS.SUBMISSION_REJECTION_MODAL);
    };

const data = "Off-Topic or Misleading";
    return (
        <main
            className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-[10]"
            tabIndex={-1}
            ref={modalRef}
        >
            {/* Modal content */}
            <div
                ref={modalContentRef}
                className="w-[343px] p-6 rounded-lg bg-white dark:bg-dark-50 min-h-[200px] md:w-[512px]"
            >
                {/* Modal header */}
                <div className="flex items-center justify-between">
                    {data === 'Copyright or Plagiarism' && (
                        <h4 className="text-2xl font-bold leading-9">Copyright or Plagiarism</h4>
                    )}
                    {data === 'Low Quality or Lacks Detail' && (
                        <h4 className="text-2xl font-bold leading-9">
                            Low Quality or Lacks Detail
                        </h4>
                    )}
                    {data === 'Spam or Promotional Content' && (
                        <h4 className="text-2xl font-bold leading-9">
                            Spam or Promotional Content
                        </h4>
                    )}
                    {data === 'Duplicate or Already Covered' && (
                        <h4 className="text-2xl font-bold leading-9">
                            Duplicate or Already Covered
                        </h4>
                    )}
                    {data === 'Off-Topic or Misleading' && (
                        <h4 className="text-2xl font-bold leading-9">Off-Topic or Misleading</h4>
                    )}

                    {/* the delete icon */}
                    <i className="fa-solid fa-xmark cursor-pointer" onClick={closeModal}></i>
                </div>

                {/* Modal content text */}

                {data === 'Copyright or Plagiarism' && (
                    <p className="mt-6 text-base leading-6">
                        The content includes copyrighted material or is not original. Ensure you
                        have the right to share all elements included.{' '}
                    </p>
                )}
                {data === 'Low Quality or Lacks Detail' && (
                    <p className="mt-6 text-base leading-6">
                        The submission is too vague, unclear, or missing key information. Consider
                        adding more depth or improving readability.{' '}
                    </p>
                )}
                {data === 'Spam or Promotional Content' && (
                    <p className="mt-6 text-base leading-6">
                        Submissions should provide value beyond self-promotion. If relevant, try
                        adding insights or making it more educational.
                    </p>
                )}
                {data === 'Duplicate or Already Covered' && (
                    <p className="mt-6 text-base leading-6">
                        Similar content already exists. Try adding a new angle, unique insights, or
                        a fresh perspective.{' '}
                    </p>
                )}
                {data === 'Off-Topic or Misleading' && (
                    <p className="mt-6 text-base leading-6">
                        The content does not fit the platform's theme or contains unverified
                        information. Please ensure it aligns with Web3 and is factually accurate{' '}
                    </p>
                )}



                {/* Button to close the modal */}
                <Button className="blue w-full mt-6 text-sm" onClick={closeModal}>
                    Ok, got it!
                </Button>
            </div>
        </main>
    );
}

As you can clearly see that we can render different UIs with the help of Logical AND (&&) condition. We don`t have to create different modals, this allows us to write clean and effective code.

Conclusion
Logical AND (&&) condition allows us to render a value if the expression is true. With this, we can easily create a dynamic modal that will show different UIs based on the logic. We don`t have to create separate modals for each case, which could be repetitive and stressful.

You now understand what Logical AND (&&) condition is and how to use it. You can go ahead and flex your newly acquired skills😊.

Happy coding!

How To Create A Tooltip With Floating UI

Ewenike Chukwuemeka Emmanuel👨‍💻 — Sat, 16 Nov 2024 03:09:49 +0000

In software development, good user experience is usually one of the most important things to consider when building software. You don't have to make your users guess how to use your software application; this might affect the usability of your application, which is not what you want.

Most users are impatient, they might not be patient enough to explore and see how your app works, but with a tooltip, you can easily guide them through your application like a tour guide.

Today, we will be discussing how to build a tooltip easily with Floating UI.

Tooltip

Tooltips are small but informative popups that appear when a user hovers over, clicks on, or focuses on an element. Some tooltips might not require a user to trigger them; instead, they can serve as guides when a user visits your application for the first time, providing context and instructions automatically.

Floating UI

Floating UI is an amazing library that will enable you to create awesome tooltips that can easily adjust their positions based on the screen size. You don`t have to worry about responsiveness, Floating UI will handle that for you.

Sometimes, creating efficient tooltips can be time consuming, it involves some steps that you might find boring to take, that`s why you have to use libraries like Floating UI.

Prerequisites you need to understand this article

Basic knowledge of React js.
Basic understanding of javascript.
You must have Node js installed on your computer (for your React application to run)
And finally, a web browser like Google Chrome.

Let`s install Floating UI

We have to install Floating UI in our React js application. And we can do that by running this command.

npm install @floating-ui/react

We need to import lots of functions from the Floating UI library, these functions will enable us to create a tooltip effortlessly.

`
import {
useClick,
useFloating,
useInteractions,
flip,
offset,
useDismiss,
} from '@floating-ui/react';

Destructure useFloating

`
const {
refs: calendar1Refs,
floatingStyles: calendar1FloatingStyles,
context: calendar1Context,
} = useFloating({
open: isOpen1,
onOpenChange: setIsOpen1,
placement: 'bottom-end',
middleware: [
flip({
fallbackPlacements: ['right'],
}),

offset({ mainAxis: 20, crossAxis: 70 }),
],
});
`

Refs

This enables us to connect our tooltip with it`s reference effortlessly. Our reference should look like this.

<i
      className="fa-light fa-calendar cursor-pointer text-gray-500"
            ref={calendar1Refs.setReference}
           ></i>

While our tooltip should look like this.

{isOpen1 && (
            <div
             className="absolute z-10 bg-white"
             ref={calendar1Refs.setFloating}

            >
             <Calendar onChange={handleSelectDate1} />
            </div>
           )}The difference here is that our tooltip reference has “setReference” while our tooltip has “setFloating”. This will enable them to be connect, making sure that the tooltip floats around it`s reference.

FloatingStyles

The floatingStyles is an object that contains CSS styles which determine the exact position and dimensions of your floating element (like a tooltip) in relation to its reference element.

{isOpen2 && (
          <div
           className="z-[9999]"
           ref={calendar1Refs.setFloating}
           style={calendar1FloatingStyles}
           {...calendar1TooltipFloatingProps()}
          >
           <Calendar
            onChange={(date) => hanledSelectDate2(date)}
           />
          </div>
         )}

Context

In Floating UI, context (like calendar1Context in this case) provides a way to manage and share state and interactions across multiple hooks. This helps us to share events like click, hover etc. It also helps to dismiss the interactions seamlessly, ensuring that each tooltip or floating element behaves consistently.

const click1 = useClick(calendar1Context);
 const dismissCalendar1ToolTip = useDismiss(calendar1Context);

Open

The open prop is very important for the visibility of our tooltip. It helps us to manage the visibility of our tooltip based on a component’s internal state.

We first create a useState with a default value of false so that we can hide the tooltip until a user clicks on it. This useState tracks whether the tooltip is currently open or not.

const [isOpen, setIsOpen] = useState(false);

onOpenChange

This callback helps us to update the setIsOpen value. So whenever a user clicks or trigger an event, we will set the false value in the isOpen to true, vice versa.

Placement

This helps to determine where to place our tooltip in relation to it`s reference. We can decide to place our tooltip in any of these positions;

bottom
bottom-end
bottom-start
left
left-end
left-start
right
right-end
right-start
top
top-end
top-start

Flip

The flip middleware that is inside the middleware array automatically adjusts the floating element’s position if there isn`t enough space in the specified direction. Here, if there’s not enough space below, it will attempt to position it using the fallback placements (['bottom-end']). We can choose any position we want based on available space.

middleware: [
   flip({
    fallbackPlacements: ['bottom-end'],
   }),

    ],

Offset

This middleware creates spacing between the reference and the floating element. mainAxis: 20 creates a 20px gap in the primary direction (below the reference, in this case), while crossAxis: 50 creates a 50px offset along the perpendicular axis.

middleware: [
   offset({ mainAxis: 20, crossAxis: 50 }),
  ],

This is how the configuration should look like

const [isOpen, setIsOpen] = useState(false);
 const {
  refs: calendar1Refs,
  floatingStyles: calendar1FloatingStyles,
  context: calendar1Context,
 } = useFloating({
  open: isOpen,
  onOpenChange: setIsOpen,
  placement: 'bottom-end',

  middleware: [
   flip({
    fallbackPlacements: ['bottom-end'],
   }),

   offset({ mainAxis: 20, crossAxis: 50 }),
  ],
 });

 const click = useClick(calendar1Context);
 const dismissImageToolTip = useDismiss(calendar1Context);

 const {
  getReferenceProps: calendar1TooltipReference,
  getFloatingProps: calendar1TooltipFloatingProps,
 } = useInteractions([click, dismissImageToolTip]);

The demo

Click this link to watch the demo video.

From the video, you can clearly see that our tooltip adjusts its position if the space isnt enough to contain it. It uses the position of the fallbackPlacements we defined.

Conclusion

Floating UI provides a powerful and flexible way to implement tooltips in React applications. With its automatic positioning and rich customization options, you can create tooltips that enhance your application’s user experience while maintaining reliable functionality across different devices and screen sizes.

It involves so many functions and objects like; refs, floatingStyles, context, useState for state management, onOpenChange, placement, flip and offset.

By following this guide, you now have the knowledge to implement responsive and user-friendly tooltips in your React applications. Experiment with different configurations and middleware to create the perfect tooltip experience for your users.

Happy coding 😊

How To Implement Dark/Light Themes in Next.js (React js) with Tailwind CSS

Ewenike Chukwuemeka Emmanuel👨‍💻 — Mon, 22 Jul 2024 11:29:58 +0000

Having an application or a website that enables users to choose themes is really nice and awesome in this modern day web. These days, people spend most of their time online and they are really hurting their eyes, providing such feature will improve the user experience.

In this article, we are going to discus how to build a Next js application that will enable users to choose between light and dark themes using Tailwind CSS and make it to be persistent.

Prerequisites you need to understand this article

1.Basic knowledge of React or Next js.
2.Basic understanding of javascript.
3.You must have Node js installed on your computer (for your React or 4.Next js application to run)
5.And finally, a web browser like Google Chrome.

Let`s install Next js

We have to install the latest version of Next js by running this command in our terminal.

npx create-next-app@latest

You will see some questions, asking you to choose what you would like to install along side with Next js. Make sure that you install Tailwind CSS through this way or you can also go to the official website of Tailwind CSS and read the documentation to install it manually. You can use your arrow keys to choose what you want to install and then click enter to select it.

Let`s start coding

We need to modify the config file of our Tailwind CSS with a special property value so that we can easily change theme of our application. We have to add this darkMode: “class” in the config file.

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  darkMode: "class",
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [],
};
export default config;

Here, we are checking if the app is done loading, then we will get the theme that the user might have selected previously from the local storage. If the user haven`t selected any theme previously, then we will set the theme to light.

const [theme, setTheme] = useState<any>( typeof window !== "undefined" ? localStorage.getItem("theme") : "light" );

Here we are using useffect to select the theme automatically once the page is done loading. We are checking the value in the useState if it is dark theme, once it`s dark theme, we add the dark class to our application which will give it a dark theme effect through the help of Tailwind CSS. We also store the latest value or theme to the local storage and also trigger the function whenever a user updates the theme.

useEffect(() => {
    if (theme === "dark") {
      document.documentElement.classList.add("dark");
    } else {
      document.documentElement.classList.remove("dark");
    }
    localStorage.setItem("theme", theme);
  }, [theme]);

This function helps users to switch themes. Here we are using ternary operator to check the value of the theme to update it accordingly. If the value of the theme is dark, we will then update the value of the theme to light, vice versa.

const toggleTheme = () => {
    setTheme(theme === "dark" ? "light" : "dark");
  };

Here we are using the dark class in Tailwind CSS to give each element a different kind of style if the application is in dark theme, you can clearly see that you can hide some elements if you don`t want them to be visible in the dark theme.

`
import { useState, useEffect } from "react";
import DarkModeIcon from "@mui/icons-material/DarkMode";
import WbSunnyIcon from "@mui/icons-material/WbSunny";

export default function Home() {
const [theme, setTheme] = useState(
typeof window !== "undefined" ? localStorage.getItem("theme") : "light"
);

useEffect(() => {
if (theme === "dark") {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}
localStorage.setItem("theme", theme);
}, [theme]);

const toggleTheme = () => {
setTheme(theme === "dark" ? "light" : "dark");
};
return (

{/* logo */}

    <svg
      id="logo-88"
      width="40"
      height="41"
      viewBox="0 0 40 41"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        className="ccustom"
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M13.7146 0.516113C11.4582 0.516113 9.2943 1.41245 7.69881 3.00794L0 10.7067V14.2307C0 16.7204 1.06944 18.9603 2.77401 20.5161C1.06944 22.0719 0 24.3118 0 26.8015V30.3255L7.69881 38.0243C9.2943 39.6198 11.4582 40.5161 13.7146 40.5161C16.2043 40.5161 18.4442 39.4467 20 37.7421C21.5558 39.4467 23.7957 40.5161 26.2854 40.5161C28.5418 40.5161 30.7057 39.6198 32.3012 38.0243L40 30.3255V26.8015C40 24.3118 38.9306 22.0719 37.226 20.5161C38.9306 18.9603 40 16.7204 40 14.2307V10.7067L32.3012 3.00794C30.7057 1.41245 28.5418 0.516113 26.2854 0.516113C23.7957 0.516113 21.5558 1.58555 20 3.29012C18.4442 1.58555 16.2043 0.516113 13.7146 0.516113ZM25.7588 20.5161C25.6629 20.4286 25.5688 20.3387 25.4766 20.2465L20 14.7699L14.5234 20.2465C14.4312 20.3387 14.3371 20.4286 14.2412 20.5161C14.3371 20.6036 14.4312 20.6935 14.5234 20.7857L20 26.2623L25.4766 20.7857C25.5688 20.6935 25.6629 20.6036 25.7588 20.5161ZM22.2222 30.3255L22.2222 32.0085C22.2222 34.2525 24.0414 36.0717 26.2854 36.0717C27.363 36.0717 28.3965 35.6436 29.1585 34.8816L35.5556 28.4845V26.8015C35.5556 24.5575 33.7364 22.7383 31.4924 22.7383C30.4148 22.7383 29.3813 23.1664 28.6193 23.9284L22.2222 30.3255ZM17.7778 30.3255L11.3807 23.9284C10.6187 23.1664 9.58524 22.7383 8.50762 22.7383C6.26359 22.7383 4.44444 24.5575 4.44444 26.8015V28.4845L10.8415 34.8816C11.6035 35.6436 12.637 36.0717 13.7146 36.0717C15.9586 36.0717 17.7778 34.2525 17.7778 32.0085V30.3255ZM17.7778 9.02373V10.7067L11.3807 17.1038C10.6187 17.8658 9.58524 18.2939 8.50762 18.2939C6.26359 18.2939 4.44444 16.4747 4.44444 14.2307V12.5477L10.8415 6.15063C11.6035 5.38864 12.637 4.96056 13.7146 4.96056C15.9586 4.96056 17.7778 6.7797 17.7778 9.02373ZM28.6193 17.1038L22.2222 10.7067L22.2222 9.02373C22.2222 6.7797 24.0414 4.96056 26.2854 4.96056C27.363 4.96056 28.3965 5.38864 29.1585 6.15063L35.5556 12.5477V14.2307C35.5556 16.4747 33.7364 18.2939 31.4924 18.2939C30.4148 18.2939 29.3813 17.8658 28.6193 17.1038Z"
        fill="#FF630B"
      ></path>
    </svg>

    {/* links */}
    <ul className="flex items-center justify-between gap-x-3">
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
    {/* toggle */}
    <div className="cursor-pointer" onClick={toggleTheme}>
      <DarkModeIcon className=" dark:hidden" />
      {/* sun */}
      <WbSunnyIcon className="hidden dark:block" />
    </div>
  </nav>

  {/* theme con */}
  <div className="flex items-center justify-center w-[500px] mt-[20px] h-[500px] bg-red-600 dark:bg-black">
    {/* text con */}
    {/* <div> */}
    <h6 className="  text-center dark:hidden">Light theme</h6>
    <h6 className=" hidden text-center dark:block dark:text-white">
      Dark theme
    </h6>
    {/* </div> */}
  </div>
</main>

);
}
`

The result

Conclusion

Applications with dark and light themes makes it easier for users to have good user experience, giving them the flexibility to choose any theme of their choice which will make them to stay longer in your application leading to increase in sales.

We can achieve this easily with Nextjs, Tailwind CSS and the browser`s local storage to make it persistent.

Now with your newly acquired knowledge, go and make the web a better place.

Happy coding 😊!

How To Verify Forms Using Formik in React js

Ewenike Chukwuemeka Emmanuel👨‍💻 — Fri, 19 Jul 2024 20:48:00 +0000

In our modern web, forms are a very crucial part of the web, we use it to collect data from users. Forms can be used to onboard users on a platform, for surveys, etc.

However, managing form state, validation, and submission logic can often become cumbersome and error-prone, especially as forms grow in complexity

Formik

Formik is an awesome library that helps you to manage form states, validations, and other amazing features like showing the number of characters a user is giving to the input field while they are typing.

In this article, we are going to explore Formik, how to use it for form validation, submission logic, and how easy it is to manage form states.

Prerequisites you need to understand this article

1.Basic knowledge of React js.
2.Basic understanding of how form works in React js.
3.Basic understanding of javascript.
4.You must have Node js installed on your computer (for your React application to run)
5.And finally, a web browser like Google Chrome.

For this article, I will be using an online code editor called Codesandbox. You can go ahead and use it as well, you can also create normal React js application on your computer.

Codesandbox is an online code editor that allows developers to write code on the web even without their laptops. It safes a lot of time, instead of installing React js, Next js or any other framework, codesandbox allows you to choose them in seconds insteading of wasting time to install them. It allows you to equally select libraries too in seconds. This is amazing right? The most interesting part is that it has free version you can use

Installation

For us to use Formik, we have to install it before we could use it.

npm install formik --save

We also have to install another library called yup, yup will help us to validate the input fields based on our preference. We can decide how long an input field should be, the characters it must contain etc.

npm i yup

After that, we can setup the formik and start connecting it with our form.

import { useFormik } from 'formik';
import * as yup from "yup";

const formik = useFormik({
    enableReinitialize: true,
    initialValues: {
      name: "",
      surname: "",
      number: "",
    },

    validationSchema: yup.object({
      name: yup
        .string()
        .trim()
        .max(10, "name cannot be more than 10 characters"),

      surname: yup
        .string()
        .trim()
        .max(10, "Surname cannot be more than 10 characters"),

      number: yup
        .string()
        .trim()
        .max(5, "Your number cannot be more than 5 digits"),
    }),

    onSubmit: (values) => {},
  });

You can clearly see how I used yup to decide how long an input field should be, you can also checkmate passwords, links, etc. with Yup.

Let`s create the form

We have to create the form and connect the input fields with the Formik, we have to make sure that the name we are giving the input fields matches with its reference in Formik initialValues.

Check the input field below, you can clearly see that the name is qual to the name in the initialValues on the formik setup. Without this, you might experience issues with your input field.

<input type="text" placeholder="Your name" name="name" value={formik.values.name} onChange={formik.handleChange} onBlur={formik.handleBlur} />

import * as yup from "yup";
import { useFormik } from "formik";
import { useState } from 'react';

export default function Form() {
const [isSubmitting, setIsSubmitting] = useState(false);
const [submissionError, setSubmissionError] = useState(null);
const formik = useFormik({
enableReinitialize: true,
initialValues: {
name: "",
surname: "",
number: "",
},

validationSchema: yup.object({
  name: yup
    .string()
    .trim()
    .max(10, "name cannot be more than 10 characters"),

  surname: yup
    .string()
    .trim()
    .max(10, "Surname cannot be more than 10 characters"),

  number: yup
    .string()
    .trim()
    .max(5, "Your number cannot be more than 5 digits"),
}),

 onSubmit: async (values) => {
  setIsSubmitting(true);
  setSubmissionError(null);

  try {
    const response = await axios.post('/api/submit', values);
    console.log('Form submitted successfully:', response.data);
    // Optionally reset form
    formik.resetForm();
  } catch (error) {
    setSubmissionError(error.message || 'Failed to submit form');
  } finally {
    setIsSubmitting(false);
  }
},

});
return (

{/* label con */}

Your name

{formik.values.name.length}/10

      {/* input control */}
      <div className="input-control">
        <input
          type="text"
          placeholder="Your name"
          name="name"
          value={formik.values.name}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
        />
      </div>

      {formik.touched.name && formik.errors.name && (
        <div className="error">{formik.errors.name}</div>
      )}
    </div>

    {/* surname con */}
    <div>
      {/* label con */}
      <div className="flex-con">
        <label htmlFor="">Your surname</label>
        <h6>{formik.values.surname.length}/10</h6>
      </div>
      {/* input control */}

      <div className="input-control">
        <input
          type="text"
          placeholder="Your surname"
          name="surname"
          value={formik.values.surname}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
        />
      </div>
      {formik.touched.surname && formik.errors.surname && (
        <div className="error">{formik.errors.surname}</div>
      )}
    </div>

    {/*  number con */}
    <div>
      <div className="flex-con">
        <label htmlFor="">Your number</label>
        <h6>{formik.values.number.toString().length}/5</h6>
      </div>

      {/* input control */}
      <div className="input-control">
        <input
          type="number"
          placeholder="Your number"
          name="number"
          value={formik.values.number}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
        />
      </div>
      {formik.touched.number && formik.errors.number && (
        <div className="error">{formik.errors.number}</div>
      )}
    </div>

    <button
      className={`  ${formik.dirty ? "btn" : "btn-grey"}`}
      type="button"
      disabled={isSubmitting || !(formik.isValid && formik.dirty)}
    >
     {isSubmitting ? 'Submitting...' : 'Send'}
    </button>
  </form>
</main>

);
}
`

The enableReinitialize

The enableReinitialize option in the useFormik hook is a crucial feature that allows Formik to reinitialize the form state with new initial values. By default, Formik only initializes the form state once, and subsequent changes to the initial values will not be reflected in the form state. By setting enableReinitialize to true, Formik will reinitialize the form state with new initial values whenever the initialValues prop changes. This is particularly useful when working with dynamic forms, where the initial values may change based on user interactions or other application state changes. By enabling reinitialization, you can ensure that your form state remains up-to-date and accurate, even as the initial values change.

Value

You can clearly see how we are accessing the value of each input field from Formik in real time without using any useState.

Make sure that you are really accessing the right state, as you can see from the example, we are correctly accessing each state value.

Onchange

We are using the built-in onChange function in Formik to update each input state while the user is typing. So we dont really need to create anything else, thats cool right 😊?

OnBlur

We are also using the onBlur function in formik to let Formik know when an input field loses focus so that it can check if a user is actually giving the right input value.

The error message

We display the error message we specified in yup for each input field whenever the input field doesn`t match with our validation. You can clearly see that in the code.

The length of the input value

We can also show the length of an input value while a user is typing, this will help users to know the length of what they are typing.

The button

The style of the button is dynamic, when all the input fields are empty, the button will have some certain kind of style. But when we have a value in one of the input fields, the style of the button changes as well.

The button is also disabled if we don`t have any value in the input fields and the content of the button is dynamic too. We also disable the button when we are submitting the form data.

This will prevent users from submitting empty forms.

OnSubmit

The submit function allows us to send the form data to our desired endpoint or location. You can write any logic there, just make sure that the submit function is connected to the form so that it can be triggered when a user clicks on the send button.

In our case, we are trying to send the form data to an endpoint, although it`s not real. But the logic is sending the form data to an endpoint with the help of Axios.

As you can see, it`s very easy to manage and validate form values with Formik.

Conclusion

Managing form states and validation are very essential steps to making sure that we are actually getting the right data from users but doing this is usually not a work in the park.

Formik is a very amazing library that helps us to manage form data effectively, it also has other amazing features like getting the length of an input value, the handleChange function, the handleBlur function, error messages, etc.

With the combination of yup, we can actually validate the input values based on our preference.

I hope you now understand the basics of Formik and how to verify forms with Formik and Yup.

You can study more about Formik here and Yup here.

Happy coding 😊!

How To Use TanStack (React Query)

Ewenike Chukwuemeka Emmanuel👨‍💻 — Fri, 19 Jul 2024 20:01:06 +0000

In today modern web development, HTTP request is very crucial for applications, so the need for efficient data management becomes increasingly critical. This article will expose you to Tanstack, it`s key features and how to get started.

Tanstack

Tanstack is an amazing library for data management in applications, it addresses data management issues for asynchronous data operations. It helps developers to carryout HTTP requests easily.

What is HTTP request?

HTTP request (Hypertext Transfer Protocol) is usually a message sent by a browser to the server to initiate a communication and to request data or actions. HTTP is very important to the World Wide Web, it is a fundamental part of the web. Without it, we might not have applications.

HTTP request allows frontend applications to perform GET, POST, PUT, DELETE, PATCH etc actions on the server through an endpoint.

Benefits of using Tanstack

Caching and Data Synchronization: With built-in caching mechanisms, tanstack optimizes the performance of your application by storing data locally. This reduces the number of requests, which will make your application to be much faster.

Optimistic Updates: Tanstack facilitates optimistic updates, this enables developers to update the UI accordingly. It has amazing states like, the error, isLoading. You can use these to conditionally render a loading state while the data is loading.

Automatic Pagination and Infinite Loading: Handling large datasets becomes effortless with tanstack’s support for automatic pagination and infinite loading. Developers can seamlessly fetch and display data in chunks, enhancing application performance and user experience.
How to use Tanstack

First, we have to install tanstack by running npm i react-query on our terminal.

We have to inject the QueryClientProvider in our application so that we can be able to use Tanstack. We will also provide it with the queryClient as a prop. You can create this in the index.js file of your application.

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import Nav from "./Nav";
import { BrowserRouter } from "react-router-dom";
import { QueryClientProvider, QueryClient } from "react-query";

const root = ReactDOM.createRoot(document.getElementById("root"));
const queryClient = new QueryClient();
root.render(

);

reportWebVitals();
How To Fetch Data With Tanstack

Now, we are going to fetch some data from an endpoint using Tanstack. We need to import useQuery from react-query (Tanstack).

import { useQuery } from "react-query";

Then we will destructure it and get the isLoading, data and the error states from it. These states will enable us to carryout the optimistic UI updates. This will enable us to conditionally render different UI based on the state of the data.

const id = useParams() const { isLoading, data, error } = useQuery(["post", id.id], () => getSignleQueryFunc(id.id) )

Then we have to pass a query, a query is a declarative dependency on an asynchronous source of data that is tied to a unique key. This query will help us to fetch data. In our case, we have an array of a string (post) an the id of each post. It doesn`t really matter, just make sure that it is unique.

Here is an example from the Tanstack documentation.

import { useQuery } from 'react-query'

function App() {
  const info = useQuery('todos', fetchTodoList)
}

Next, we have to include the query function, this query function enables us to fetch the data from an endpoint. In our case, we created our function in a separate file and imported it. Here is our query function

export async function getSignleQueryFunc(id) {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${id}`
  );
  return response.json();
}

This is the final result

import { useQuery } from "react-query";

import { getSignleQueryFunc } from "./getSignlePost";
import { useParams } from "react-router-dom";

export default function Posts() {
  const id = useParams();
  const { isLoading, data, error } = useQuery(["post", id.id], () =>
    getSignleQueryFunc(id.id)
  );

  if (error && data == undefined) return <p>Error fetching post</p>;

  return (
    <main>
      <h1>post</h1>
      <div>
        {isLoading ? (
          <div>Loading...</div>
        ) : (
          <div>
            <h3>{data.title}</h3>
            <p>{data.body}</p>
            <p>the number is {data.id}</p>
          </div>
        )}
      </div>
    </main>
  );
}

As you can clearly see how easy it is to use Tanstack (react query) to fetch data. You don`t need to use useStates anymore to determine the state of your data. In this example, we fetched single posts.

Mutations

Mutations enables you to create, delete and update data. Tanstack has useMutation which you will use to create, delete and update data.

We have to pass the mutation function to the useMutation, and then supply the function with the necessary parameters for the specific mutation operation you want to perform. In our case, we will be updating the posts.

Here is how it is done
`
import { editPostFunc } from "./editPost";
import { useQuery, useMutation } from "react-query";
import { useParams } from "react-router-dom";
import { useState, useEffect } from "react";
import { getSignleQueryFunc } from "./getSignlePost";

export default function UpdatePost() {
const id = useParams();
const { data } = useQuery(["post", id.id], () => getSignleQueryFunc(id.id));
const [title, setTitle] = useState("");
const [body, setBody] = useState("");

useEffect(() => {
if (data) {
setTitle(data.title || "");
setBody(data.body || "");
}
}, [data]);

const itemUpdate = useMutation(editPostFunc, {
onSuccess: () => {

  console.log("Post updated successfully");
},
onError: (error) => {

  console.error("Error updating post:", error);
},

});

const handleSubmit = (e) => {
e.preventDefault();
const updatedData = {
id: id.id,
title: title,
body: body,
userId: data.userId,
};
itemUpdate.mutate(updatedData);
};

return (

hello everyone

type="text"
placeholder="first input"
name="title"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
type="text"
placeholder="second input"
name="body"
value={body}
onChange={(e) => setBody(e.target.value)}
/>
click

</main>

);
}`

Here is how our editPostFunc looks like

export async function editPostFunc(updatedData) { const res = await fetch(https://jsonplaceholder.typicode.com/posts/${updatedData.id}`,
{
method: "PUT",
body: JSON.stringify({
id: updatedData.id,
title: updatedData.title,
body: updatedData.body,
userId: updatedData.userId,
}),
headers: {
"Content-type": "application/json; charset=UTF-8",
},
}
);
return res.json();
}
`

As you can see, we are fetching each post and storing the values in the useStates so that we can be able to edit them in the input fields. Once we are done editing it, we call the handleSubmit function. In this function, we are creating an object with the necessary property values, this includes the states we updated.

We will then send the object to the mutation function for the update. We also check if the edit was successful or not by console logging the result we are getting whenever we try to update a post.

You can clearly see how easy it is to carryout HTTP requests with Tanstack.

Difference between useQuery and useMutation

Use cases: useQuery is used to fetch data while useMutation is used for modifying data.

Conclusion

HTTP request is a very essential part of modern web development, it allow browsers to initiate a communication with a server to perform some actions like GET, POST, PUT, DELETE, PATCH etc. Tanstack on the other hand helps to make things easier for developers, it has some many benefits like optimistic UI updates, simplified data fetching etc.

I believe you have seen how easy it is to use Tanstack to handle HTTP requests and data management. Check out the Tanstack documentation here for more understanding and to explore other features of Tanstack.

Happy coding!

How to build filter functionality in an e-commerce website in React js

Ewenike Chukwuemeka Emmanuel👨‍💻 — Sat, 06 Jan 2024 11:48:38 +0000

Nowadays, e-commerce applications comes with lots of items in them. These items can sometimes be very had for customers to find what they are looking for easily. Most customers are impatient to be scrolling and be looking for what they want.

As developers, our goals is to solve problems and make life easier for users. Adding a filter functionality to an e-commerce application will not only help customer to find what they are looking for easily, it will also improve the user experience which will lead to increase in sales.

Today, we will discuss how to implement filter functionality in React js.

Prerequisites you need to understand this article

Basic understanding of HTML.
Basic understanding of CSS.
Basic understanding of JavaScript.
Basic understanding of React js.
You must have Node js installed on your computer (for your React application to run)
And finally, a web browser like Google Chrome.

For this article, I will be using an online code editor called Codesandbox. You can go ahead and use it as well, you can also create normal React js application on your computer.

Now, let's dive into the exciting world of React.js and start building our filter functionality!

Let`s talk about the filter method in JavaScript. Filter method in JavaScript returns the items in an array that matches with the logic assign to it.
It returns a copy of items that satisfy a specified condition.

`
const languages = ["java", "php", "javascript", "css" "c"];

const selectedLanguages = languages.filter((lang)=> lang.length == 3)
console.log(selectedLanguages)
// expected result is css and php

`
Why are we getting only css and php? because these are the only items in the array that have 3 letters. Every other items in the array is either above or below 3 letters. If you check the logic of our code, you will clearly see that we are looking for items with 3 letters.

That is how filter method works in JavaScript, it returns items that matches with the logic you assign to it. In our case, we store those items in a variable called selectedLanguages

`
import { useState } from "react";
import "./styles.css";

export default function App() {
const data = [
{
id: 1,
name: "Shirt",
price: 300,
image: "https://m.media-amazon.com/images/I/81n3upEij0L._AC_UL320_.jpg",
},
{
id: 2,
name: "Shoe",
price: 10,
image: "https://m.media-amazon.com/images/I/61VrbOtzDXL._AC_UL320_.jpg",
},
{
id: 3,
name: "Watch",
price: 30,
image: "https://m.media-amazon.com/images/I/71E00KpHBvL._AC_UL320_.jpg",
},
{
id: 4,
name: "Bangle",
price: 5,
image: "https://m.media-amazon.com/images/I/613xQziz5HL._AC_UL320_.jpg",
},
{
id: 5,
name: "Necklace",
price: 300,
image: "https://m.media-amazon.com/images/I/6191eeBha+L._AC_UL320_.jpg",
},
{
id: 6,
name: "Ring",
price: 3,
image: "https://m.media-amazon.com/images/I/618fjry4-tL._AC_UL320_.jpg",
},
];
const [items, setItems] = useState(data);

const pricesCheck = (itemPrice) => {
const newItems = data.filter((product) => product.price <= itemPrice);
setItems(newItems);
};

return (

Search by prices

  <button onClick={() => pricesCheck(5)}>$5</button>
  <button onClick={() => pricesCheck(10)}>$10</button>
  <button onClick={() => pricesCheck(15)}>$15</button>
  <button onClick={() => pricesCheck(20)}>$20</button>
  <button onClick={() => pricesCheck(300)}>$300</button>

  <div className="items-con">
    {items.map((item) => {
      return (
        <div className="menu-item-con" key={item.id}>
          <img src={item.image} alt="" />
          <div className="item-name-price-con">
            <p className="food-title">{item.name}</p>
            <p>${item.price}</p>
          </div>
          <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit.
            Provident eveniet suscipit atque eius ab sunt cum perspiciatis
            harum laborum natus?
          </p>
        </div>
      );
    })}
  </div>
</div>

);
}

`
Here is the result

Let`s break the code down
We created an array of objects, which is obviously the items in our application. I intentionally used this method so that you can understand me better. In a real world example, the items might be coming from an API.

 const data = [
    {
      id: 1,
      name: "Shirt",
      price: 300,
      image: "https://m.media-amazon.com/images/I/81n3upEij0L._AC_UL320_.jpg",
    },
    {
      id: 2,
      name: "Shoe",
      price: 10,
      image: "https://m.media-amazon.com/images/I/61VrbOtzDXL._AC_UL320_.jpg",
    },
    {
      id: 3,
      name: "Watch",
      price: 30,
      image: "https://m.media-amazon.com/images/I/71E00KpHBvL._AC_UL320_.jpg",
    },
    {
      id: 4,
      name: "Bangle",
      price: 5,
      image: "https://m.media-amazon.com/images/I/613xQziz5HL._AC_UL320_.jpg",
    },
    {
      id: 5,
      name: "Necklace",
      price: 300,
      image: "https://m.media-amazon.com/images/I/6191eeBha+L._AC_UL320_.jpg",
    },
    {
      id: 6,
      name: "Ring",
      price: 3,
      image: "https://m.media-amazon.com/images/I/618fjry4-tL._AC_UL320_.jpg",
    },
  ];

You can use this free API endpoint to access random list of items that you can render and filter based on your preference. Here is the website.

We then created a useState where we stored those array of objects which will enable us to map through them and render them on the screen. This approach will also help us to determine what we will render.

const [items, setItems] = useState(data);

We also created a function where we made use of the JavaScript filter method to determine which itmes we want to render. As you can see, we instructed JavaScript to only return items that matches with the logic we gave and store them in a variable called newItems. After that, we update the items state with the newItems so that we can render those items we want on the screen.

The pricesCheck function we created has a parameter called itemPrice. Whenever a user clicks on the button, the function will be called. Each button has a specific price on them (argument), which will help users to determine price range of items they want to see.

const pricesCheck = (itemPrice) => {
    const newItems = data.filter((product) => product.price <= itemPrice);
    setItems(newItems);
  };

The remaining part is the jsx where we render each items and the buttons for filtering.

<div>
      <div className="btns-con">
        <div className="prices">
          <p>Search by prices</p>
          <button onClick={() => pricesCheck(5)}>$5</button>
          <button onClick={() => pricesCheck(10)}>$10</button>
          <button onClick={() => pricesCheck(15)}>$15</button>
          <button onClick={() => pricesCheck(20)}>$20</button>
          <button onClick={() => pricesCheck(300)}>$300</button>
        </div>
      </div>

      <div className="items-con">
        {items.map((item) => {
          return (
            <div className="menu-item-con" key={item.id}>
              <img src={item.image} alt="" />
              <div className="item-name-price-con">
                <p className="food-title">{item.name}</p>
                <p>${item.price}</p>
              </div>
              <p>
                Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                Provident eveniet suscipit atque eius ab sunt cum perspiciatis
                harum laborum natus?
              </p>
            </div>
          );
        })}
      </div>
    </div>

Furthermore, you can also improve on this logic or also include categories so that you better understand the concept of filter method in JavaScript.

Now you have seen how easy it is to create a very nice filtering functionality with React js and css. This example is beginner friendly.

Conclusion
Filtering functionality is very important and nice to be in your application. It enables users to find what they want easily.
The JavaScript filter method returns list of items that matches a specific logic assigned to it.

Now, i believe that you can easily implement this amazing functionality to your applications to foster good user experience.
Happy coding

Portle vs Madcap Flare

Ewenike Chukwuemeka Emmanuel👨‍💻 — Thu, 14 Dec 2023 11:01:45 +0000

Effective documentation is very crucial to the success of software development and product management. Documentation facilitates swift onboarding, promotes collaboration, and serves as a crucial resource for troubleshooting and debugging. Without effective documentation,organisations will find it difficult to sell their services like APIs. It will be very difficult for team members to collaborate when there is no effective documentation.

As a technical writer, you need a very good and efficient documentation tool that can help you convey your information to your audience. A tool that will allow you to express yourself effectively by including code snippets, links, images etc.

In this article, we will be discussing two amazing documentation tools that will help you to write effective documentation. We will be explaining some of their amazing feature that will help you in writing efficient documentation.

Portle
Madcap Flare

Portle: Portle is an amazing documentation tool that helps you (or your team) as a technical writer to write efficient documentations easy and fast. Portle is a solution crafted to streamline the creation of user-facing documentation, by offering a simplified approach to documentation.

Features of Portle

Ability to invite team members
Ability to add custome domain
Release notes
Versioning

Ability to invite team members : Efficient documentation can be a very duanting task, which requires expertise and effort. Portle has an amazing feature that allows you to invite your team members to help you out or to work together. Imagine having a new junior staff in your team, it will be some how difficult for the staff to navigate the world of effective documentation. But with Portle, you can easily take the staff by the hand and teach him how to write amazing documentations by helping you out in the little ways he can.

The ability to add team members to your Portle account can be very helpful. It will enable effective scrutinization, collabration amongst writers, which will enable them to write effective documentation that will be beneficial to the targeted audience.

How to add a team member: Head over to Portle (sign up if you have not), go to the settings. You will see 4 tabs namely domain, Plans and billing, user management account management. Select the user management, you will see an interface that will enable you to invite a team memeber by their emails.

Ability to add custome domain: Portle has another powerful feaure that makes documentation an amazing experience. The ability to add custome domain for your documentation is an awesome experience. For instance, your company is hosting an event like an hackathon, you can easily write down the instructions for the participants to follow. With Portle, you create a dedicated portal at hackathon.yourdomain.com, offering clear and accessible documentation to participants during the event.

How to add custome domain in Portle: Head over to Portle (sign up if you have not), go to the settings. You will see 4 tabs namely domain, Plans and billing, user management account management. Select the domain tab, you can see a button that says connect new domain. Click on it and upload the necessary informations to enjoy this feature.

Release notes: Still working on it

Versioning: Still working on it

Madcap Flare: Madcap flare is also an amazing tool that has been around for decades. This tool helps you to create, manage and publish content for your audience. It enables you to write effective documentation easily and fast.

Madcap flare has awesome and amazing features which can help you in your technical documentation. Here are some of the amazing features Madcap flare has to offer.

Features of Madcap flare

1.Single-Source Authoring
2.Responsive Design
3.Multilingual Support
4.Importation of different file formats

Single-source authoring : Madcap flare has a feature that allows you as a technical writer to create content in a single-source format. This will enable you to write and maintain content in one location and then publish it in multiple formats like PDF etc.

As a technical writer, you might want your documentation to be accessible in many format. MadCap flare can help you to write the documentation once and publish it to both the web and the printer, ensuring consistency which will save you lots of time.

Responsive design: As a technical writer, your main goal should be for your documentation to be accessible for your audience to consume. Nowadays, people use different kinds devices with different screen sizes. Having a documentation that can fit in any screen size will be a nice experience for your audience. Madcap flare allows you to write responsive documentation that can adapt to different screen sizes.

Multilingual Support: Madcap flare has a feature that enables you to write, manage and publish documents in multiple languages. A large number of people do not speak nor understand English, as a technical writer, reaching a wide range of your targeted audience in their different languages will make the documentation so helpful to them.

Importation of different file formats: The ability to import different file formats can really help you to write effective documentation as a technical writer. Madcap flare has an amazing feature that enables you to import different kinds of file formats.

Comparison
Portle and Madcap flare are two amazing documentation tools, that have features that can help you write effective and efficient documentation easily. However, just like every other softwares out there, they have their pros and cons.

Portle is a powerful modern documentation tool that will help you to write efficient documentation. As a modern day tool, it might not have the features that Madcap flare currently have, but you can get your work done with it. It also has a very easy to understand user interface and affordable pricing.

Madcap flare is an amazing documentation tool that has been around for a long time, it has lots of amazing features that can help you write documentations. One of the downsides of Madcap flare is that the user interface might not be easy for a new user to understand it. Because of it`s lots of features, Madcap flare costs more than Portle. Most of the features might not be used all the time in your documentation.

The two tools are amazing, you just have to choose the one that is good for you and your team.

Conclusion
The importance of effective documentation can never be neglected, poor documentation can lead to loss of potential costumers. It will make your product or services hard to use by your costumers.

Efficient documentation can bring about more revenue, clear communication between you and your targeted audience, effective collaboration amongst your team members and good time management.

We have explored two amazing documentation tools that can help us write efficient documentation. Portle and Madcap flare are amazing tools that has their pros and cons. But can help us achieve efficient documentation.

Next js Routing

Ewenike Chukwuemeka Emmanuel👨‍💻 — Tue, 28 Nov 2023 07:30:35 +0000

Next js is a framework that has revolutionized the way we developers build websites and web applications. It has lots of amazing tools that are so helpful for your web application. Next js has amazing features like server-side rendering, automatic code splitting, client-side routing, optimized SEO and other amazing features.

These features has attracted lots of developers and companies to use Next js.

Next js has an in-built routing system that makes it a nice framework, unlike React js, that uses third party libraries for it`s routing.

In this article, we will discuss how to create a navigation bar in Next js, exploring the in-built Next js routing system. We will also discuss about the importance of using Next js. Furthermore, We will also compare Next js with it`s cousin React js.

Prerequisites you need to understand this article

Basic understanding of HTML.
Basic understanding of CSS.
Basic understanding of JavaScript.
Basic understanding of React js.
You must have Node js installed on your computer
And finally, a web browser like Google Chrome.

What is a framework
A framework is a pre-built, standardized collection of tools, libraries and best practices that helps software developers to build good user interface. Furthermore, frameworks also makes development of software much faster and easier for developers.

What is Next js
Next js is an awesome framework built by a company called vercel, this framework was built with some React js features which makes it easier for front-end developers that uses React js to quickly use it too. However, even with close similarities between React js and Next js, Next js has a very different routing or navigation system with React js, which makes it look very new to developers who has experience in React js.

Next js uses a file-system based router where folders are used to define routes. What does that mean, it simply means that Next js creates routing based on the file structure of your application.
Each component you want to create, you will create a folder for each of the components, these folders will have a file that must be page.js inside them. This page.js file in each folder, is where you will write your codes for each component you want your users to see.

Note
You can use any extension for the page file, you can use .js, .jsx and .ts

As you can see here, all of the folders has page.js file where the components for each folder is written. If a user wants to navigate to our dashboard, all they need to do is to use this path /dashboard and they will see our dashboard.

Note: All of your component folders will be in the app folder.

Let`s code
Create a new folder in your favorite code editor (I will be using Visual Studio Code), head over to your terminal and run this command npx create-next-app@latest to create Next js inside that folder. Make sure you end the command with ./ with a little space in between them like this npx create-next-app@latest ./, this will create Next js in that current folder.

When you run that command, you will get this question press enter to continue the installation.

After that, you will also see these questions, make sure you select the answers like I just did in this image. To select the answers, you have to use your (left and right) arrows accordingly, then press enter.

After the installation process, you will have a screen like this

Now we will create 3 folders inside our app folder, each of these folders will have a page.js file where we will be writing the components for each folder.

Now that we have created our folders and pages, let`s start building each component inside the pages of each folders.

"use client"
const Analytics = () => {
    return ( 
        <section>
            <h1>This is the analytics page</h1>
        </section>
     );
}

export default Analytics;

"use client"
const dashboard = () => {
    return ( 
        <section>
        <h1>This is the dashboard</h1>
        </section>
     );
}

export default dashboard;

"use client"
const Settings = () => {
    return ( 
        <section>
            <h1>This is the settings page</h1>
        </section>
     );
}

export default Settings;

Let us view what we have been creating since, head over to your terminal and run this command npm run dev to view your work on the browser. Once the command has finish running, you have to go to your browser and paste this url http://localhost:3000 to view what we have been building.
You must see something like this on your browser

Now go ahead and change the url of your application by adding a slash, and then, the name of the folder you want to see. Like this /settings.

Note This is case sensitve, make sure that it is the exact folder name that you type, if not, you will get a 404 error message.

Now i know you will be wondering, "will my users have to type the page they want to see manually?" No they will not, you will have to create another folder (your navigation) with a page file, like other folders. Inside that page, create a navigation links and import the navigation component inside the layout.js file. Like this

Navigation The navigation consists of navigation links, we make use of the in-built link in Next js and use that to replace the normal anchor tag.

"use client"
import Link from 'next/link'
const Navigation = () => {
    return ( 
        <main>
            <nav className='bg-red-500'>
        <ul className='flex '>
          <li className='p-3 cursor-pointer'><Link href="/">Home</Link></li>
          <li className='p-3 cursor-pointer'><Link href="/analytics">Analytics</Link></li>
          <li className='p-3 cursor-pointer'><Link href="/dashboard">Dashboard</Link></li>
          <li className='p-3 cursor-pointer'><Link href="/settings">Settings</Link></li>
        </ul>
      </nav>
        </main>
     );
}

export default Navigation;

Layout page This page is where you import any component you want to seen across all components, like your navigation and footer components.

You are supposed to have something like this

The home page here is that page.js file inside the app folder, that file carrys the template code you will see when you run npm run dev command in your terminal. You have to clear those template codes up and create what you want as your home page.
Here is mine

Conclusion
Next js uses file based routing system that enables developers to build fast and easy to implement navigations based on their file structure. It does not need an additional library for that, which is very cool.

Now you have seen how easy it is to implement navigation in Next js. Happy coding!

Demystifying the Ternary Operator in JavaScript

Ewenike Chukwuemeka Emmanuel👨‍💻 — Wed, 27 Sep 2023 16:37:55 +0000

Have you ever wondered if we can remove that curly brackets that comes with if and else statement? Or you wish if you can just use it inside your jsx (if you use React js) without writing any function?

Ternary operator will help you achieve the same result, you can write simple conditional logic in one line, yes one line 😊. Ternary operator will also help you to write conditional codes in your jsx. Ternary operator will help you write clean and efficient codes as a developer.

In this article, we will understand what is ternary operator, it`s syntax and how to use it.

Prerequisites you need to understand this article

Basic understanding of HTML,CSS and JavaScript
Basic knowledge of any JavaScript framework like React js
A web browser like Google Chrome

What is Ternary Operator

Ternary operator is a concise conditional operator in Javascript, that allows developers to write conditional statements in a single line of code. Ternary operator makes developers` code more readable and clean.

Syntax

Ternary operator is made up of the condition, the logic that will be implemented if the condition is true, then the logic that will be implemented if the logic is false.

condition ? expression_if_true : expression_if_false;

Example

import React from 'react';

class MyComponent extends React.Component {
  render() {
    const isLoggedIn = true;


    return (
      <div>
        <p>{isLoggedIn? "We have a user" : "No user"}</p> 
      </div>
    );
  }
}

export default MyComponent;

From this simple code, I am checking if the variable isLoggin is true or false, if it`s true our p tag will display "We have a user", like this

If the variable is false then our p tag will display "No user", it`s very simple.

Here is a more complex example

import { useState } from "react";
import products from "./DemoCartMenuData";
import { useContext } from "react";
import { Link } from "react-router-dom";
import  {CartContext}  from './Context';
import StarBorderIcon from '@mui/icons-material/StarBorder';

const DemoCartMenu = () => {

    const {addToCart}   = useContext(CartContext);
    const {cartItems} = useContext(CartContext);

    const {errorMessage}= useContext(CartContext);

    const [items, setItems]= useState(products);

    const cheapItemFisrtFunction=(price)=>{
        const cheapItem15 = products.filter((itemP)=> itemP.price <= price)
        setItems(cheapItem15)
    }
    const cheapItemSecondFunction = (price)=>{
        const cheapItem20 = products.filter((itemP)=>itemP.price >= price)
        setItems(cheapItem20)
    }
    const cheapItemThirdFunction = (price)=>{
        const cheapItem30 = products.filter((itemP)=> itemP.price >= price)
        setItems(cheapItem30);
    }

    const cheapItemFourtFunction= (price)=>{
        const cheapItem40 = products.filter((itemP)=> itemP.price >= price)
        setItems(cheapItem40)
    }
    const fullProducts = (prod)=>{
        if(prod === "all"){
            setItems(products)
        }
    }

    const changeBtnBg = (e)=>{

    const buttons = document.querySelectorAll('.filter-btn');

    buttons.forEach((button) => {
        button.classList.remove("active");
    });

    e.target.classList.add("active");
    }

    return ( 
        <section className="product-section">
            <h3>Filter products by price</h3>
            <div className="filter-btn-con" onClick={changeBtnBg}>
            <button onClick={()=>cheapItemFisrtFunction(15)} className="filter-btn">💲15 below</button>
            <button onClick={()=>cheapItemSecondFunction(20)} className="filter-btn"> 💲20 and above </button>
            <button onClick={()=>cheapItemThirdFunction(30)} className="filter-btn"> 💲30 and above </button>
            <button onClick={()=>cheapItemFourtFunction(40)} className="filter-btn"> 💲40 and above </button>

            <button onClick={()=> fullProducts("all")} className="filter-btn">All</button>
            </div>


            <div className="items-grid-con">
            {
                items.map((item)=>{
                    return(
                        <div className="item-con">
                            <Link to={`/ItemDetails/${item.id}`}>
                            <div className="img-con">
                                <img src={item.img} alt={item.name} />
                            </div>
                            </Link>
                            <div className="item-details-con">
                            <div className="item-price-name-con">
                                <p>{item.name}</p>
                                <p> 💲{item.price}</p>
                            </div>
                            <div className="item-rating-con">
                            <StarBorderIcon className="rating"/> <StarBorderIcon className="rating"/><StarBorderIcon className="rating"/><StarBorderIcon className="rating"/>

                            </div>

                            //this code here
                            <button onClick={()=> addToCart(item)}>
                                { cartItems.find((tem)=> tem.id===item.id)?"Item is in cart":"Add to cart"}</button>
                            </div>




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

        </section>
     );
}

export default DemoCartMenu;

If you check the code above, you will see this small piece of code


<button onClick={()=> addToCart(item)}>{ cartItems.find((tem)=> tem.id===item.id)?"Item is in cart":"Add to cart"}</button>

This code checks whether any of the items I am rendering has been added to the cart or not. If the id of the products matches with any id of an item in the cart, the button will display "Item is in cart" if not, the button will display "Add to cart". Click this link to watch a simple demonstration of what I am trying to explain Link

NOTE This is one of my old e-commerce project.

Now that you have understood what ternary operator is, how to use it, when to use it and why you should use it. You can now go ahead and build amazing applications with your newly acquired super power 😊.

Conclusion
Ternary operator is a concise conditional operator in JavaScript, that enables developers to write clean and readable codes. It only takes one line, it also allows you to implement simple logic in your jsx.

I believe you now understand what a ternary operator is and why you should use it.

Please if you have any question let me know in the comment section I will reply to your questions. Please don`t forget to like this article for other developers to see it.

Happy coding!