Forem: Gatesvert81

Developer to designer and back to developer... maybe?

Gatesvert81 — Sat, 30 Mar 2024 23:22:12 +0000

Introduction

So, I am here today to share my journey on how I have "roamed" from craft to craft finding the perfect thing. I have loved to develop; in fact, I love to develop. I remember my first line of HTML code displaying a Hello world on my screen and thought,

My Journey

Well yeah, we all know that feeling. It's great but short-lived, mostly dies after you encounter your first bug or a series of errors at line 31 when the code ends at line 16.

So yeah, I learned to code in JavaScript which I used to build websites, C++ which is my favorite language for a reason I do not know, and I never used it for anything to be honest. I just learnt it so I can look cool. Hey, don't judge me.

I started losing motivation to code and program after I saw a lot of people online doing cool stuff, making money with their skills and I couldn't even get my npm to start. Just kidding but I started feeling that imposter syndrome and soon after I had some empty plates to fill up with food and the coding wasn't getting me any money. I tried applying for some jobs but wasn't getting in, maybe because I was an amateur, I can't tell, but I knew I was not a top-tier developer. I mostly looked cool in college amongst my friends because I could program but that was it. For context, I am offering food processing engineering, which is just an unrelated course so anytime someone sees me program and got to know I don't offer a computer course they are amazed. I still didn't get any b*tches with that, DAMNNN.

Switching Career

So yeah, shid got more real, and before I could realize it after 3 years of coding and very little progress I started drifting to design. I realized I loved the front-end design aspect of developing so I thought to myself getting into design would be a great idea. After some exploring Adobe Illustrator, because I loved it more, I decided being a brand designer (an aspect of graphic design) was perfect. My first gig as a graphic designer, a couple of weeks after I got into design, was to make a flyer. When I received the payment I just was lit, cause even though the money was small, I had made something within a short period. I decided to go all in and tried setting up a studio. I got hit by bad habits, mostly a lack of focus, discipline, and time management, which led to using very little of my potential.

Refection and Lessons

After all this and much reflection I realized maybe it's not the skill, but I am the problem. Because people are making money out of each of these crafts, and there is one variable here and that's me. So probably I am the problem. I feel bad writing this and I don't know who it's going to help out there.

The lessons I have learned from this journey are:

Habits
Most things work out, we just don't have the write habits to do the things that need to be done. Taking the initiative to build those habits may be beneficial and would increase our chances of success.
Patience
I remember feeling like I should be handed the world's best gigs at my level, but little did I know it takes time. I did a little research and realized most people who succeed have been doing the thing for a long; especially in tech where you cannot just come out of the blue. Even now with booming stuff all over the internet, most of those people having their shid booming have been in the game for long.
Execution is KING
I have had a lot of projects I never completed, some I never even started. Ideas are pawns but execution is king. You'll save yourself so much disappointment and regret when you execute.
Have fun.
Last but not least have fun. Explore and find happiness cause most of the beginning stages are going to be full of boredom, stress, and loneliness. I'd say I wish I had more fun. Yeah, let me not forget, make friends of similar interests. Some that are at a higher level than you are, some on the same level, and some are beneath you. This would have helped me a lot. Of course, I did have some programming bros, but I rarely engaged.

Conclusion

I'm taking on a new path to merge this design and programming. I can't tell the head and tail of this blog but hey, to whoever read and found inspiration or learned something from this, I hope you don't repeat my mistakes and

Happy coding 😎

How to use React useReducer asynchronously

Gatesvert81 — Sun, 22 Jan 2023 22:26:34 +0000

Introduction

When building large projects with large states, managing them becomes a lot, in this case using a reducer function helps extracts logic for optimizing performance and making the code simple and readable. According to the official React page

useReducer
is usually preferable to useState
when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one.

Because of the way useEffect is implemented, coming from redux, you can’t use it as a asynchronous function. But from my scouting and try and error, I found an easy way to implement it asynchronously.

Implementation

Let’s say we want to fetch some data from an Api and add it to our App.

const initialState = {
  posts: [],
};

const reducer = async (state, action) => {
  const { type, payload } = action;
  switch (type) {
    case "getPost":
      const results = await axois.get(
        "https://jsonplaceholder.typicode.com/posts"
      );
      return {
        ...state,
        posts: {
          ...state,
        },
      };
    default:
      return state;
  }
};

import React, { useEffect, useReducer } from "react";

function Posts() {
  const [state, dispatch] = useReducer(reducer, initialState, third);

  useEffect(() => {
    dispatch({ type: "getPost" });

    console.log(state);
  }, []);

  return <div>Posts</div>;
}

export default Posts;

this returns a Error in your code after dispatching the ‘getPost’ type.
To safely asynchronously fetch your data and add it to your state, you must fetch the data first before dispatching the reducer. By doing this we get our fetch results then add it to our state.

const initialState = {
  posts: [],
};

const reducer = (state, action) => {
  const { type, payload } = action;
  switch (type) {
    case "getPost":
      return {
        ...state,
        posts: {
          posts: payload.posts,
        },
      };
    default:
      return state;
  }
};

import React, { useEffect, useReducer } from "react";

function Posts() {
  const [state, dispatch] = useReducer(reducer, initialState, third);

  const handleGetPosts = async () => {
    const results = await axois.get(
      "https://jsonplaceholder.typicode.com/posts"
    );
    dispatch({
      type: "getPost",
      payload: {
        posts: results,
      },
    });
  };

  useEffect(() => {
    console.log(state);
  }, [state]);

  return <div>Posts</div>;
}

export default Posts;

With this simple code we can use useReducer hook asynchronously. there are other methods, but I think this is the simplest method.

Conclusion

Hope this clearly solves your problem with implementing useReducer asynchronously.
!Thank you for reading this blog.
I post a blog weekly. Please don't forget to buy me a coffee, Mathias Martey. Follow me on twitter @blaq_xcobar

How to implement a design system in your project.

Gatesvert81 — Sun, 15 Jan 2023 15:37:38 +0000

Introduction

I have been creating websites and subtly implementing something I didn’t know was powerful, a design system. According to uxpin

Design system documentation is a valuable resource that works to help design teams combine and present usage guidelines. It also helps share, consume, and execute these rules. This ultimately helps designers and developers to model their efforts around delivering a more predictable UI.

It helped me freely implement designs and avoid ambiguous UI. This is a simple thing to do yet powerful. In this article I will guide you in the steps I take and how I structure my project (CSS) to make use of design systems.

Importance of Implementing design systems

Design Systems, when properly implemented, can provide many benefits to a design team. Design (and development) work can be created and replicated quickly and at scale.

It brings a much predictable UI outcome.
It also helps faster website production.
fast design replication and update
It creates a unified language within and across teams

Tech stack

For this project I will use

Next.js (React library)
Tailwindcss (for css styling)

Feel free to use any JavaScript and CSS library or framework of your choice.

Design files

First of all, you need to get the design mockup for the project. I use figma for my UI designs and I recommend it to anyone. Creating a design system from scratch can be stressful and you might miss out on some important elements that may not come to you initially. So, I found a free Design System Template – Figma that has a great start for a design system implementation.

Getting Started

Let's begin by creating our project and installing the necessary packages.

Create next app and give it any name of your choice

npx create-next-app design-system

Move to the project directory and install necessary dependencies

cd design-system
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npm install framer-motion

Set up tailwind for styling you'll find all these setup config in Tailwind framework setup
add these to your global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

add these to your tailwind.config.js file

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

initialize project

npm run dev

Colors

Common colors in a Design System include 1 to 3 primary colors that represent your brand. You can include a range of tints (a color mixed with white) and shades (a color mixed with black) to give designers some additional options. I configure my tailwind with the colors pertaining to the project.

Accent Colors: An accent color is a contrasting color used to draw attention to key pieces of a web page. I use this for CTAs (Call to actions)
Primary, secondary, neutral Colors: I use this for component hierarchy such as buttons, text headings, etc.
Status Colors: I use this mostly in notifications to indicate the status of the notification.

Configure tailwind.config.js file with your custom colors.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./pages/**/*.{js,ts,jsx,tsx}", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      // Color
      colors: {
        // Primary colors with interaction
        primary: "",
        "primary-focus": "",
        "primary-content": "",
        // Secondary colors with interaction
        secondary: "",
        "secondary-focus": "",
        "secondary-content": "",
        // Accent colors with interaction
        accent: "",
        "accent-focus": "",
        "accent-content": "",
        // Neutral colors with interaction
        neutral: "",
        "neutral-focus": "",
        "neutral-content": "",
        // base colors with interaction
        "base-100": "",
        "base-200": "",
        "base-300": "",
        "base-content": '',
        // Status colors
        info: '',
        "info-content": '',
        success: '',
        "success-content": '',
        warning: '',
        "warning-content": '',
        error: '',
        "error-content": '',
      },
    },
  },
};

Spacing

The system you use for spacing is best when it is rhythmic and balanced. It is possible to set a scale, for example multiple of 4. Icons tend to be based on 4 (16, 24, 32, etc.) so that they can be scaled more easily. I typically don’t change anything from tailwindCss spacings since it helpful and useful in most cases. You can do that change if you have a special need for your project.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./pages/**/*.{js,ts,jsx,tsx}", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
            // Color
      colors: {},
      // Spacing
     spacing: {
        0: "0px",
        1: "1px",
        // Add your spacing system
      },
  },
};

Base

Typography

Most Design Systems include only two fonts: one font for headlines and body text. You can get free fonts from google fonts or download a pleasing one from any source but keep it simple. Make the design from the base html elements.

Headings These are the font designs (sizing and styling) for the different heading heir ache.
Form
Other html elements

@layer base {
  html, body {
    @apply p-0 m-0 font-sans scroll-smooth bg-white dark:bg-black dark:text-white 
  }

  a{
    @apply text-inherit cursor-pointer
  }

  main,
  section {
    @apply w-full h-fit p-5 
  }

  /* Typography */
  h1 {
    @apply text-5xl md:text-7xl font-semibold normal-case
  }

  h2 {
    @apply text-4xl md:text-5xl font-semibold normal-case
  }

  h3 {
    @apply text-3xl md:text-4xl font-semibold normal-case
  }

  h4 {
    @apply text-2xl md:text-3xl font-semibold normal-case
  }

  h5 {
    @apply text-xl md:text-2xl font-semibold normal-case
  }

  h6 {
    @apply text-base md:text-xl font-semibold lowercase
  }

  p {
    @apply text-base md:text-sm font-medium
  }

  /* form base elements  */

  input {
    @apply
  }

  textarea {
    @apply
  }

  button {
    @apply
  }

  label {
    @apply
  }

  fieldset {
    @apply
  }

}

Components

These are css class components made for easy access to

Font sizing
Button stylings
Transitions and animation
Card sizing

@layer components {
  /* Font sizing  */
  .text-link{
    @apply 
  }

  .text-extra-small{
    @apply 
  }

  .text-small{
    @apply 
  }

  .text-medium{
    @apply 
  }

  .text-large{
    @apply 
  }

  .text-extra-large{
    @apply 
  }

  /* Button styling */

  .primary-btn{
    @apply 
  }

  .secondary-btn{
    @apply 
  }

  .cta-btn{
    @apply 
  }

  .tollbar-btn{
    @apply 
  }

  .default-btn{
    @apply 
  }

  .color-btn, .accent-btn{
    @apply 
  }

  .icon-btn{
    @apply 
  }

  /* Card sizing */

  .extra-small-card {
    @apply
  }

  .small-card {
    @apply
  }

  .medium-card {
    @apply
  }

  .large-card {
    @apply
  }

  .extra-large-card {
    @apply
  }

  /* Transitions and animation */
  .spin{
    @apply
  }

}

Conclusion

To conclude, Design Systems are essential elements for the design of websites. They make it possible to create an important base for all the elements of a site and to speed up the design phase. Implement this in your next project and improve your website developments.
! Thank you for Reading.
I post a blog weekly every Thursday. Please don't forget to buy me a coffee, Mathias Martey. Follow me on twitter @blaq_xcobar

Creating a toast notification system for you react web app

Gatesvert81 — Sun, 08 Jan 2023 18:06:03 +0000

Introduction

I was developing a web app for a company and needed to implement a toast notification system. I don't like using a lot of npm packages for my projects to avoid them being bulky and prevent crashes when they are not managed properly. So, I set out to make my own simple toast notification system that works great with my app. For those who don't know what a toast notification is, according to design-systems;

Toast notifications are used to communicate low severity level information to users in an unobtrusive way.

In today's Article, we will develop a simple and light toast notification for our react web apps. Try the live demo React-notification-system

Tools used in Project

React (I will use Nextjs for this project)
Tailwind for styling with a plugin DaisyUI, a simple tailwind component for making customisable styles for our projects
Framer motion for animations

Pre-requisite knowledge

Since you are here, I can guess you know a little of React but these are the main react hooks I will use in this project

useReducer
useContext
react custom hooks
useCallback

All these can be accessed int the Official React documentation.

Project setup

Let's begin by creating our project and installing the necessary packages.

Create next app and give it any name of your choice
npx create-next-app notification-system
Move into the project directory and install necessary dependencies



cd notification-system
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npm install framer-motion

Set up tailwind for styling, you'll find all these setup config in Tailwind framework setup
add these to your global.css file in the main directory ```css

@tailwind base;
@tailwind components;
@tailwind utilities;

- add these to your tailwind.config.js file

```javascript


/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

initialize project npm run dev

Project logic

Let's goooo, we are done with the project set up. The main point of this is to get the use notified with messages. We will use the reducer function to put all our notifications in one place, serve it to the whole app using useContext and use it within our project using react custom hook. I will explain as we progress.

Create Reducer

We will need to create Actions for the notification. Create a src folder in your main directory and add a Reducer folder.

Create a file and name it notificationAction.js. We will fill it with our Actions



// These are actions set for our notification and it will make more sense as we progress
export const notificationAction = {
  SUCCESS: "SUCCESS",
  WARNING: "WARNING",
  ERROR: "ERROR",
  ALERT: "ALERT",
  DELETE: "DELETE",
  ADD: "ADD",
  INACTIVE: "INACTIVE",
};

Create a file in the same (Reducer) folder and name it notificationReducer.js.



import { notificationAction } from "./notificationAction";

// Initial notification state. It's empty for now
export const notificationInitialState = {
  notifications: [],
};

// Our reducer function
export default (state = notificationInitialState, { type, payload }) => {
  switch (type) {
    case notificationAction.ADD:
      // Add notification to the list (state..notifications)
      return { notifications: [...state.notifications, payload.notification] };
    case notificationAction.DELETE:
      // Remove/Delete notification
      const deleteNotifcation = state.notifications?.filter(
        (notification) => notification.id !== payload.id
      );
      return { notifications: [...deleteNotifcation] };
    case notificationAction.INACTIVE:
      // Make notifcation inactive
      const notifications = state.notifications?.map((notification) => {
        if (notification.id === payload.id) {
          return {
            ...notification,
            active: false,
          };
        }
        return notification;
      });
      return { notifications: [...notifications] };
    default:
      return state;
  }
};

Create a last file in the Reducer Folder with name index.js, this file will export all reducer functions and action to organize our app.



import { notificationAction } from "./notificationAction";
import notificationReducer from "./notificationReducer";
import { notificationInitialState } from "./notificationReducer";

export { notificationInitialState, notificationReducer, notificationAction };

Create Context

This folder holds the notification context and serves it to our app. Create a folder in the src folder and name it Context. Create a file with name Notification.js. In this folder we use useReducer hook to serve our Reducer to the app, useReducer hook takes the reducer function as the first parameter and the intitial state as the second parameter and returns an array that contains the state and dispatch function respectively. The state acts like useState's state.

First, we create our function and add our reducer to the useReducer hook.



function Notification({ children }) {
  const [state, dispatch] = useReducer(
    notificationReducer,
    notificationInitialState
  );
return ()
}
export default Notification;

Next create a function called notify that we will call each time we need to make a toast notification. it will take two (2) parameters, type and message (will explain that in that soon). Set the id of the notification (I will use their index count) and dispatch with type ADD notification. Our notification will have an id (which we will use to track a notification), type (whether our notification is a success toast, warning toast, information/alert toast or an error toast), message (the text for our notification) and active to display or hide our notification. Clear the notification with setTimeout function (feel free to use any length of time, I am using 6 seconds) . We return the id of the notification.



...

  const notify = (type, message) => {
    const notificationId = state.notifications.length;
    dispatch({
      type: notificationAction.ADD,
      payload: {
        notification: {
          id: notificationId,
          type: type,
          message: message,
          active: true,
        },
      },
    });
    setTimeout(() => {
      closeNotification(notificationId);
    }, 6000);
    return notificationId;
  };
...

To hide our notification create a closeNotification function that will set the active key of our notification to false. To delete our notification after hiding it, create a deleteNotification function that will delete a second after the notification is hidden.



  const deleteNotifcation = (id) => {
    dispatch({
      type: notificationAction.DELETE,
      payload: {
        id: id,
      },
    });
  };

  const closeNotification = (id) => {
    dispatch({
      type: notificationAction.INACTIVE,
      payload: {
        id: id,
      },
    });
    setTimeout(() => {
      deleteNotifcation(id);
    }, 1000);
  };

Create a function called showNotification athat will display our notifications. For this function we use useCallback hook which will run our function whenever the state change. This function will map all our notifications at the top of our website . We will create the NotificationCard Component later.



...
const showNotifications = useCallback(
    () => (
      <>
        {state.notifications.map((notification) => (
          <AnimatePresence key={notification?.id}>
            {notification?.active && (
              <motion.div
                initial={{
                  opacity: 0,
                  scale: 0.8,
                  y: "10%",
                }}
                animate={{
                  opacity: 1,
                  scale: 1,
                  y: "0%",
                }}
                exit={{
                  opacity: 0,
                  scale: 0.8,
                  y: "10%",
                }}
              >
                <NotificationCard
                  type={notification?.type}
                  message={notification?.message}
                />
              </motion.div>
            )}
          </AnimatePresence>
        ))}
      </>
    ),
    [state]
  );
...

Create the Context to serve the app with our notification. Add it before the react function.



export const NotificationContext = createContext();

In the Notification function return the context provider and the value. Display the showNotification function on top of the site.



  return (
    <>
      <NotificationContext.Provider value={value}>
        <div className="w-full h-fit fixed left-0 top-0 pt-10 flex flex-col justify-center items-center gap-3 z-50">
          {showNotifications()}
        </div>
        {children}
      </NotificationContext.Provider>
    </>
  );

Go to the _app.js in the pages folder wrap the app with our context



import Notification from "../src/Context/Notification";
import "../styles/globals.css";

function MyApp({ Component, pageProps }) {
  return (
    <Notification>
      <Component {...pageProps} />
    </Notification>
  );
}

export default MyApp;

Set the value of the Context Provider



  const value = {
    notifications: state?.notifications,
    notify,
    closeNotification,
  };

The Notification.js should have this in it



import { AnimatePresence, motion } from "framer-motion";
import React, {
  createContext,
  useCallback,
  useEffect,
  useReducer,
} from "react";
import NotificationCard from "../Components/NotificationCard";
import {
  notificationAction,
  notificationInitialState,
  notificationReducer,
} from "../Reducer";

export const NotificationContext = createContext();
function Notification({ children }) {
  const [state, dispatch] = useReducer(
    notificationReducer,
    notificationInitialState
  );

  const deleteNotifcation = (id) => {
    dispatch({
      type: notificationAction.DELETE,
      payload: {
        id: id,
      },
    });
  };

  const closeNotification = (id) => {
    dispatch({
      type: notificationAction.INACTIVE,
      payload: {
        id: id,
      },
    });
    setTimeout(() => {
      deleteNotifcation(id);
    }, 1000);
  };

  const notify = (type, message) => {
    const notificationId = state.notifications.length;
    dispatch({
      type: notificationAction.ADD,
      payload: {
        notification: {
          id: notificationId,
          type: type,
          message: message,
          active: true,
        },
      },
    });
    setTimeout(() => {
      closeNotification(notificationId);
    }, 6000);
    return notificationId;
  };

  const showNotifications = useCallback(
    () => (
      <>
        {state.notifications.map((notification) => (
          <AnimatePresence key={notification?.id}>
            {notification?.active && (
              <motion.div
                initial={{
                  opacity: 0,
                  scale: 0.8,
                  y: "10%",
                }}
                animate={{
                  opacity: 1,
                  scale: 1,
                  y: "0%",
                }}
                exit={{
                  opacity: 0,
                  scale: 0.8,
                  y: "10%",
                }}
              >
                <NotificationCard
                  type={notification?.type}
                  message={notification?.message}
                />
              </motion.div>
            )}
          </AnimatePresence>
        ))}
      </>
    ),
    [state]
  );

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

  const value = {
    notifications: state?.notifications,
    notify,
    closeNotification,
  };
  return (
    <>
      <NotificationContext.Provider value={value}>
        <div className="w-full h-fit fixed left-0 top-0 pt-10 flex flex-col justify-center items-center gap-3 z-50">
          {showNotifications()}
        </div>
        {children}
      </NotificationContext.Provider>
    </>
  );
}

export default Notification;

Create Custom hook

Use a custom hook to access the values of the context easily. Create a folder in the src folder and name it Hooks. Create a folder in the Hooks folder and name it useNotification. We use useContext to get our context from notification and use it in any component in the app provided the component is a child of the Notification Context.



import React, { useContext } from "react";
import { NotificationContext } from "../Context/Notification";

function useNotification() {
  const context = useContext(NotificationContext);

  if (context === undefined) {
    throw new Error("useNotification must be used within NotificationContext");
  }
  return context;
}

export default useNotification;

Usage

Before we use the notification system we need to create the NotificationCard component. Create a Components folder in the src folder and create a file called Notification.js. Add a react function in the folder with props type and message. I am using the card UI from Daisy UI.



import React, { useEffect, useState } from "react";
import { notificationAction } from "../Reducer";

function NotificationCard({ type, message }) {
  const [bgColor, setBgColor] = useState("bg-white");
  useEffect(() => {
    switch (type) {
      case notificationAction.ALERT:
        setBgColor("bg-info");
        break;
      case notificationAction.ERROR:
        setBgColor("bg-error");
        break;
      case notificationAction.SUCCESS:
        setBgColor("bg-success");
        break;
      case notificationAction.WARNING:
        setBgColor("bg-warning");
        break;
      default:
        setBgColor("bg-gray-300");
        break;
    }
  }, [type, message]);

  return (
    <div className={`card w-96 ${bgColor} text-primary-content`}>
      <div className="card-body">
        <h2 className="card-title">Notification</h2>
        <p>{message}</p>
      </div>
    </div>
  );
}

export default NotificationCard;

we use useEffect and a switch statement to change the color and message for each notification.

open index.js in the pages folder and clear the default text in the main tag leaving the function .



import Head from "next/head";



export default function Home() {

  return (
    <div className="">
      <Head>
        <title>Notification Web App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
<main>
</main>

    </div>
  );
}

Add 4 buttons from daisyUI inside the main tag, this will be used to trigger the notifications. These button will be use for the four different notification type.



<button className="btn btn-info">Info</button>
<button className="btn btn-success">Success</button>
<button className="btn btn-warning">Warning</button>
<button className="btn btn-error">Error</button>

Use our custom useNotification hook and destructor the notify function.
const { notify } = useNotification();
- Add an onClick function to the buttons and run the notify in them. Add the notificationAction as the first parameter for the type of notification we want and the message as the second parameter.



...
<button
          className="btn btn-info"
          onClick={() =>
            notify(
              notificationAction.ALERT,
              "This is an  information notification"
            )
          }
        >
          Info
        </button>
        <button
          className="btn btn-success"
          onClick={() =>
            notify(
              notificationAction.SUCCESS,
              "This is an success notification"
            )
          }
        >
          Success
        </button>
        <button
          className="btn btn-warning"
          onClick={() =>
            notify(
              notificationAction.WARNING,
              "This is an warning notification"
            )
          }
        >
          Warning
        </button>
        <button
          className="btn btn-error"
          onClick={() =>
            notify(notificationAction.ERROR, "This is an error notification")
          }
        >
          Error
        </button>
...

index.js should have this code



import Head from "next/head";
import Image from "next/image";
import useNotification from "../src/Hook/useNotification";
import { notificationAction } from "../src/Reducer";
import styles from "../styles/Home.module.css";

export default function Home() {
  const { notify } = useNotification();

  return (
    <div className="w-full h-screen">
      <Head>
        <title>Notification Web App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className="w-full h-full flex justify-center gap-3 items-center">
        <button
          className="btn btn-info"
          onClick={() =>
            notify(
              notificationAction.ALERT,
              "This is an  information notification"
            )
          }
        >
          Info
        </button>
        <button
          className="btn btn-success"
          onClick={() =>
            notify(
              notificationAction.SUCCESS,
              "This is an success notification"
            )
          }
        >
          Success
        </button>
        <button
          className="btn btn-warning"
          onClick={() =>
            notify(
              notificationAction.WARNING,
              "This is an warning notification"
            )
          }
        >
          Warning
        </button>
        <button
          className="btn btn-error"
          onClick={() =>
            notify(notificationAction.ERROR, "This is an error notification")
          }
        >
          Error
        </button>
      </main>
    </div>
  );
}

Enjoy

Open the console and run the app, and it should be open in http://localhost:3000



npm run dev

Your app should look like this

Try the live demo React-notification-system

When you click on the button you should receive toast notifications at the top of the app. You can change the position in the Notification.js function in the Context folder.

Info Toast
Success Toast
Warning Toast
Error Toast

Conclusion

This is a simple toast notification you can implement in your own app. I hope this helps to improve the usability of your app. I post a blog weekly every Thursday. Get access to the github repo here. Please don't forget to buy me a coffee, Mathias Martey. Follow me on twitter @blaq_xcobar

Why Reading Documentation is Important

Gatesvert81 — Tue, 06 Dec 2022 23:06:19 +0000

INTRODUCTION
Documentation is one of the most important resource a developer can have. When a new technology, framework or library is designed, the developers make a documentation explaining how to use that technology.

MY EXPERIENCE
When I started learning React I never really read the documentation. I always watched tutorials, which is good. But I later realized I missed quit a number of lessons I would have learnt if I had also reported to the official react documentation. Recently I developed a project and used an npm package ( react-intersection-observation) for detecting the presence of a component in the view port. I came across this package in a youtube tutorial which did exactly what I wanted and I never saw the importance in reading the documentation. During the project, I wanted to trigger the detection once but I couldn't. I did a try and error using useState and useEffect here and there but to no avail. I finally decided to check the documentation only to find out there was a triggerOnce property that would do what I wanted. I had already wasted the time and I could never retrieve it.

HOW TO LEARN FROM DOCUMENTATION
Whichever way you prefer to learn a new technology, whether by watching tutorials, reading a book or having someone teach you always take time to go through the official documentation. Take an example like learning React, after learning react hooks by watching tutorial or otherwise, refer to the section o the official documentation about hooks. Take time and go through, chances are you'll find something new or get a clearer explanation on something you didn't quite get which will save you hours of debugging.

CONCLUSION
I would like to conclude with this qoute.
10 hours of debugging can save you 1 hour of reading documentation- Anonymous

Sounds funny but I have experienced this many times. It's still not a habit to me but though conscious effort I know it'll become an habit. Also try visiting official documentation when you receive unusual error and chances are you'll find the solution hidden there.
Please don't forget to buy me a coffee, Mathias Martey. Follow me on twitter @blaq_xcobar