Forem: Lucius Emmanuel Emmaccen

React useReducer

Lucius Emmanuel Emmaccen — Thu, 11 May 2023 09:33:57 +0000

Table of content

Introduction
The useReducer Syntax
2.1. What is a state in React
2.2. What is a dispatch in React
2.3. The Reducer function
2.4. Initial state
2.5. Lazy initialization
How the useReducer hook works
Bailing out of a dispatch
useReducer with Typescript
useState Vs useReducer
When to use useReducer
When not to use useReducer
Recommend videos
Interesting reads
Conclusion

Introduction

State management has been a common topic in the development world over the years. It's a challenging part of the development process, especially for huge applications. This challenge has been solved in many different ways over time and keeps evolving in positive ways.

In this article, we're going to learn from grassroots, what there is to know about the useReducer hook, how it helps you manage application state better (and logic), along with real-world examples of how it works and why you might want to use it in your next or current project.

The useReducer Syntax

const [state, dispatch] = useReducer(reducer, initialArg, init);

The useReducer is a function that takes up to three arguments and returns a state and a dispatch. These three arguments are used to determine what the state is and how the dispatch function works.

Don't worry about understanding this upfront, we'll go through every inch of what this means and how it works.

What is a state in React?

const [state, ...

A state in react is a piece of data that represents the current status of our application. This state can be used to provide information on the screen or perform background computations/calculations that allow our application to function. State is a fundamental idea in React.
Here's a visual example of a state in React, holding some information about a user.

What is a dispatch in React?

const [state, dispatch...

Dispatch in React is simply a function that takes an instruction about what to do, then passes that instruction to the reducer as an "action". In simple terms, see dispatch as a friendly boss that likes to tell the reducer what to do and is happy about it 😎

If you're familiar with Redux, this term dispatch might not be new to you but, we'll go through this article assuming you're new to both Redux and useReducer.

The reducer function

const [state, dispatch] = useReducer(reducer, ...

The reducer function is a special handler that takes in two parameters. The application's current state and an action object, then it uses that to determine/compute the next state of our application (it returns a new state).
Remember how we talked about the dispatch telling the reducer what to do by passing it an action 💭?. These actions usually contain a type (what to do) and a payload (what it needs to do the job).

Here's a typical example of what a reducer function looks like:

function reducer(state, action) {
  switch (action.type) {
    case "FIX_BUGS":
      return { totalBugs: state.totalBugs - 1 };
    case "CREATE_BUGS":
      return { totalBugs: state.totalBugs + 1 };
    case "SET_TOTAL_BUGS":
      return { totalBugs: action.payload };
    default:
      throw new Error();
  }
}

Now we're starting to connect the dots as we'll go through what all these mean visually.

Let’s delve into what’s happening in the switch statement. In a real-world application, you’d most likely have more complex logic in the switch but for this example, we’ll be keeping it simple.

We have three cases in our switch statement, which are case "FIX_BUGS", case "CREATE_BUGS" and case "SET_TOTAL_BUGS". These are the actions we're explicitly trying to handle. The default only fires when we dispatch an action that doesn't match any of our cases. See cases (or action types) as a store of all possible things a particular reducer can do. If the reducer were a person, "cases" would be the skill list on the CV.

Here's a visual representation of how the dispatch tells the reducer what to do.

The initial state

const [state, dispatch] = useReducer(reducer, initialArg, ...

The initial state in a react useReducer function is the starting state of our application e.g. The default state. In the example we used earlier, we're setting the total bugs of our application in the reducer function based on what type of action the dispatch tells us. For this reason, we can set the starting point or default state of our bugs count to say... "0" 🤔? or maybe even "100"? 🐛.

Let's do a hundred! 😎 {totalBugs : 100}

Lazy initialization

const [state, dispatch] = useReducer(reducer, initialArg, init);

The useReducer takes in an optional third parameter we'll call init. This init is going to be a function we'll pass as the third argument to useReducer. This can be useful if we'd like to create the initial state lazily.

A common use case would be a situation where the initial state needs to go through some calculations to arrive at a default state or has to fetch data from an API, etc. It looks something like this in code:

const init = (initalState) => {
  console.log(initalState); // 100

//... do some code magic 🪄
//...

  return inital;  // return desired state

};

How the useReducer hook works

Now that we've gone through the syntax: const [state, dispatch] = useReducer(reducer, initialArg, init); from left to right, it's time to start putting together the pieces in code.

Here's the complete code snippet for our bugs count application.

import { useReducer, useState } from "react";

function reducer(state, action) {
  switch (action.type) {
    case "FIX_BUGS":
      return { totalBugs: state.totalBugs - 1 };
    case "CREATE_BUGS":
      return { totalBugs: state.totalBugs + 1 };
    case "SET_TOTAL_BUGS":
      return { totalBugs: action.payload };
    default:
      throw new Error();
  }
}
const init = (inital) => {
  console.log(inital); // 100
  return inital;
};

export default function App() {
  const [state, dispatch] = useReducer(reducer, { totalBugs: 100 }, init);

  // creating a new state so we don't add extra in the reducer state
  // (this is just for examples)
  const [inputState, setInputState] = useState(0);

  return (
    <div className="App">
      <h1>useReducer</h1>
      <p>{state.totalBugs} Bugs Left 🧑‍💻</p>
      <button onClick={() => dispatch({ type: "FIX_BUGS" })}>FIX_BUGS</button>
      <button onClick={() => dispatch({ type: "CREATE_BUGS" })}>
        CREATE_BUGS
      </button>
      <input
        onChange={(e) => setInputState(+e.target.value)}
        value={inputState}
        type="number"
      />
      <button
        onClick={() =>
          dispatch({ type: "SET_TOTAL_BUGS", payload: inputState })
        }
      >
        SET_TOTAL_BUGS
      </button>
    </div>
  );
}

For a live preview of the working code. I created a sandbox.

From the walkthrough of the useReducer syntax and what each bolt and knot means, to seeing the actual code in action. We can denote that the useReducer is a function that can take up to three arguments and returns a state and a dispatch.

Here's a simple and summarized visual representation of the useReducer lifecycle in code.

Bailing out of a dispatch

If you return the same state in your reducer hook as the current state. React is smart enough to bail out of rendering or firing effects on components depending on that state. This is because React uses the Object.is comparison algorithm and this tells React that nothing has changed.

useReducer with Typescript

useReducer is no stranger to us anymore but how do we actually use it with TypeScript 💭?. Now if you're already familiar with TypeScript, this one should be a piece of cake, however, if you're fairly new, don't worry, we'll have a quick and simple example to get us going.

What we're going to do here is by no means a rule, you're free to use any formula or paradigm that makes you sleep better at night 😉.

Here it is:

import { ChangeEvent, useReducer } from "react";

// for our state
interface State {
  firstName: string;
  lastName: string;
  age: number;
  language: string;
}

// list of all possible types
enum ActionTypes {
  UPDATE = "UPDATE",
  RESET = "RESET"
}

// action type
interface Actions {
  type: ActionTypes;
  payload?: {
    key: string;
    value: string;
  };
}

// if we need to do some work to provide initial state
const init = (inital: State) => {
  console.log(inital);
  return inital;
};

// the default state of our app
const initialState = {
  firstName: "",
  lastName: "",
  age: 0,
  language: ""
};

// the reducer handler function
const userFormReducer = (state: State, action: Actions) => {
  switch (action.type) {
    case "UPDATE":
      return { ...state, [action.payload.key]: action.payload.value };
    case "RESET":
      return initialState;
    default:
      throw new Error();
  }
};

export const UserForm = () => {
  const [state, dispatch] = useReducer(userFormReducer, initialState, init);

  // for input change event
  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    dispatch({
      type: ActionTypes.UPDATE,
      payload: { key: event.target.name, value: event.target.value }
    });
  };

  return (
    <div>
      <h1>TypeScript Example</h1>
      <input
        value={state.firstName}
        type="text"
        name="firstName"
        onChange={handleChange}
        placeholder="first name"
      />
      <input
        value={state.lastName}
        type="text"
        name="lastName"
        onChange={handleChange}
        placeholder="lastName"
      />
      <input
        value={state.language}
        type="text"
        name="language"
        onChange={handleChange}
        placeholder="language"
      />
      <input
        value={state.age}
        type="text"
        name="age"
        onChange={handleChange}
        placeholder=""
      />
      <button
        onClick={() => dispatch({ type: ActionTypes.RESET })}
        type="reset"
      >
        RESET
      </button>
    </div>
  );
};

To test this out yourself, live on Sandbox. I've also included the typescript example.

This article is not about TypeScript, so we won't be explaining what's going on in that code. A few things to note however is that I intentionally put all the TypeScript code in one file. In a real-world application, you'd most certainly create files for different things and your approach might be quite different (Again, whatever helps you sleep better at night 😉).

useState Vs useReducer

const [state, dispatch] = useReducer(reducer, initialArg, init);
//vs
const [state, setState] = useState(initialState)

We won't be creating a webinar or zoom meeting to argue about this, but a rule of thumb is, that everything you can do with a useReducer you can do with a useState. In fact, the useReducer hook is just an alternative to useState with a few clear differences such as:

Readability
Ease of use and,
Syntax

Note 💡
React guarantees that dispatch function identity is stable and won’t change on "re-renders". This is why it’s safe to omit from the useEffect or useCallback hook dependency list.

When to use the useReducer hook

use a useReducer hook over useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one. This is fairly common when your application begins to grow in size. useReducer also lets you improve performance for components that trigger deep updates because you can pass down a dispatch instead of callbacks.

When not to use useReducer

useReducer is awesome, but there are certain scenarios where it doesn't make our lives any easier. Here are a few of such cases:

Don't use a useReducer hook when you're dealing with simple state logic.
When your application needs a single source of truth. You'll be better off using a more powerful library like Redux
When prop-drilling starts to yell at you. This happens when you get trapped in the hellish world of passing down too many props (state) to and from child components to a child component that later comes to hunt you.
When state lifting to parent/top-level components no longer suffices.

Recommend videos

There's always more to learn, so if you'd like to learn more tricks and hacks about the useReducer hook. I'd recommend you look up the video links below

Conclusion

The useReducer is a powerful hook if used properly and I hope we've been able to learn about it without any confusion. If you'd like to contribute to this post or drop feedback, feel free to leave a comment 📝 and drop a like ❣️. Thanks for reading, you're awesome! 😎

Happy Coding!

I'd love to connect with you 🙂

PS: This article was initially published on "Copycat"

Most Software Developers Are Depressed

Lucius Emmanuel Emmaccen — Tue, 29 Mar 2022 08:35:05 +0000

It’s not uncommon to see people in tech talk about the new stuffs that’s out there, and how awesome a technology is.

But… are most engineers really happy? I mean, the “real happiness?”

This is not something that’s talked about a lot and I’d love to hear it from you, if you’ve found happiness, what made it work? And if you’re struggling to find happiness, what really makes you unhappy?

I’ve got a few of mine too but I want this to be a discussion.

Happiness is attainable and we all deserve to be happy

Let’s talk!

Build Your Professional Portfolio Website In 2 Hours Using HTML & CSS.

Lucius Emmanuel Emmaccen — Wed, 23 Mar 2022 08:27:57 +0000

Hello 👋 , in this article we're going to learn how to build a simple, yet professional portfolio using pure HTML and CSS.

There are a million and one reasons to have a personal portfolio website, from helping you have a gallery of your work/projects online, to, improving your chances of getting a job etc. The fact is, not everyone needs to have one and I recently wrote an article explaining in detail what a portfolio is, why you might want to have one and it's importance in the world today.

What We'll Build 💪

Contact Section (Serving as the Nav && Footer)
About Section
Work/Portfolio

It might be important to note that, this tutorial is beginner-friendly, you don't need to have a "god-mode" knowledge of HTML or CSS. We'll walk through the entire code together along with suggestions on how to improve them later because we'll be keeping things super simple and summarized.

File Structure 📂

To follow along with this tutorial, you'll need a file structure such as this:

Warm-Up

Looking at the UI Design and having an overview of where we're going with code and how the finished website will look like, we can begin to mark out some key points such as colours, sections, styles etc.

Because of this, we'll start by creating some global styles following the DRY (don't repeat yourself) principle. Also, for this tutorial, we'll be interchanging between Grid and Flexbox. I promised to make this tutorial simple so, we won't be writing/coding anything complicated.

If you find something you don't understand in this article, that's fine, you can always Google or learn them later. Don't let anything stop you, you're already awesome 👍.

I've decided to paste the code snippets in PNG formats. This is just me trying to compel/encourage you to code it out by hand because it helps with understanding and well as retention.

If you don't want to go through the process of typing it out, head over to the end of the page and visit the GitHub link, you can download the entire project from there 🧑‍💻.

With that out of the way, we're ready to start coding.

Index.html

Your file structure should look something like this 👇

Please, ignore the index.js and README.md files. We won't be needing them for this tutorial. I'm using VS code by the way, you can use any code editor you want.

In your index.html file, create a basic HTML template. You can generate this by typing ! followed by the TAB key. See image for reference 👇

After you've done that, you should have something like this 👇

Few things to note from the image above.

I've included a google font (we'll use this as our font but, feel free to use any font you want)
I've linked the index.css file so we can use it in our index.html.

For everything else, you can put anything you like. e.g the <title> or <meta> tags

Now, run the application and make sure it works as expected. I'm using Live server, a VS Code extension that provides real-time updates of your changes (You don't have to use it though).

To verify that our CSS file have been linked correctly.
In your CSS file, paste: body {background-color: #333;}

Now run the app, you should see a dark background.
If that is not the case, try to verify you don't have a typo when linking your file, either way, I'm sure you'll figure it out 😎!.

Moving forward.

For the files/assets (icons, images) we'll be using in this tutorial, Checkout the GitHub repo, you can download them from there, otherwise you can use Font Awesome, Flat Icon or any icon library of your choice.

CSS Globals and Setup ⚙️

We'll create some global styles/variables and some basic setups, these are properties I know for sure we'll be using more than once in this tutorial and you don't have to know it all at first, just create a global when you notice you're re-writing the same thing more than once.

You might have to click on the image if it appears to be blurry, stretched or unreadable

We'll be coding 3-sections for this portfolio and now that we have all the basic setup ready, let's get coding.

Contact Section (Also the Nav and Footer)

HTML

Visual 🔎

If you didn't miss anything out, you should have this:

You can take some time to understand the HTML structure and how the styles apply. Also, as you move forward with the code, you'll soon come to realize that we're mostly just reusing the CSS we've written in globals earlier (Section: CSS Globals and Setup).

About Section

HTML

Now, if you're wondering what <script>document.write(new Date().getFullYear() - 2013)</script> does. It's javaScript and it's here so we won't have to calculate the years of experience by updating the portfolio/code manually. So if 2012, 2018, or 2020 is the year you started coding? Just replace 2013 in the code with yours.

Though the year you started coding might not exactly pass as experience but... you get the point 🍵

Visuals 🔎

If you don't see something similar to the visual 👆 image above, make sure all your HTML Tags are closed correctly. Do some error checks on your syntax, I'm sure you'll fix it.

Experience Section

HTML

From the snippet above, the duplicateThisDiv class is purely for reference, we won't be styling using that class name. Just duplicate the <div> by as much experience you have.

Visuals 🔎

Portfolio Section

HTML

There's a duplicateThisTag class in the snippet above. You already know what to do 👍

Visuals 🔎

Lastly

The Footer

This is just a replica of the Contact section, so just copy/paste it and use it as your footer. Don't forget to replace the <nav> tag with a footer tag in this case.

Full Design 🎨🖌️

My Thoughts 🤔 💭

I've seen people get better opportunities because they have an online portfolio, including myself (and you don't have to own the greatest portfolio on the planet). If you already have solid years of experience, you might not necessarily need one, however, having one has no disadvantage irrespective of your level in the tech world (I understand that you might have a different opinion).
You can look up some reasons why you should consider having one if you're still unsure about the importance of it.

Pro Tips 💡

Check out AOS to add some life to your website.
Keep an eye out if you want to learn how to host your website online (I'll be posting in a few days)

For design inspiration (To spark your creativity) look up:
1 Behance
2 Dribbble
3 Awwwards
4 Web Design Inspiration
5 Frontend Mentor etc.

Use Compress Now to compress your images (save some file space)
Google fonts For fonts
GitHub repo for this tutorial
Live Website
Website UI Design by Damilare
Cover Design by me ❣️

Conclusion ✅

It's been great having you read up to this point. I post simple tutorials like this, so don't forget to follow me to get more content.
Do play with the comment/discussion area, like and bookmark this blog if you love it or share with others.
Thank you! 🙏

Socials

Interesting reads 📚

Reasons Why You Need To Have A Professional Portfolio.

Lucius Emmanuel Emmaccen — Mon, 02 Aug 2021 09:33:07 +0000

I have often found people to shy away from the practice of having a professional portfolio. While it might seem negligible in some situations, more often than not, it has proven to be of great importance.

In this article, we are going to observe and answer a few questions:

What is a portfolio?
Why do you need one?
What jobs/industries use portfolios
What should go into a portfolio
What should not go into a portfolio
Should you have a "hard copy" or "online" portfolio
How do you create one?

What is a portfolio?

A portfolio is a collection of records or documentation that provides proof of accomplishments, experience, skills, attributions and work samples. It can be a website, a binder or a physical book, depending on the line of work or profession.

It might be necessary to note that a Portfolio is quite different from a Resume.

Design by Nur Praditya

Why do you need one?

Having a portfolio can improve your recognition in a professional or academic setting. It is an opportunity to illustrate your competencies, presents evidence of your skills and abilities, highlights a comprehensive idea of your best work and can be seen as a brochure for the services you are selling. It allows you to show and not just tell.

Portfolios are great for freelancers or independent contractors, business owners or consultants who need to provide work samples to potential clients. The practice of putting together a portfolio:

Serves as a reminder of your past accomplishments and acquired skills
Allows you to showcase your creativity and persona that differentiates you from your competition
A source of motivation, high self-esteem and confidence
Gives you credibility
Makes you a more effective interviewee
Helps potential clients visualize working with you
Can help apply for jobs, scholarships, grants and negotiating promotions and raises.
Can pass for work and learning experience
Helps you to be seen and discovered (e.g. online portfolio)
Allows you to market the services you provide and build a reputation and following.
Demonstrates consistency and compels you to learn/do more

There are more reasons to consider, but I am sure you get the idea.

Design by Outcrowd

What jobs / industries use portfolios?

Years back, it is common to see more people in the Visual Profession having a portfolio, such as Artists and Creative professionals, photographers, architects, teachers, graphic designers, front-end engineers, painters, etc.

In the world today, every professional can benefit from having one, even those in the fields not directly related to visual. e.g. Backend engineers (could create documentation of their involvement in a project, a short video or utilize GitHub etc.), Radio broadcasters/podcasters, Attorneys, judges and politicians, coaches and athletes etc.

Design by Tomasz Mazurczak

What should go into a portfolio?

Anything that spotlights your accomplishments and abilities should go in your portfolio. It should capture an idea of who you are and the services you provide.

Here are some items I would recommend you incorporate in your portfolio:

A short and precise summary of who you are.
Updated resume or CV
List of skills, tools or technologies you use
Work experience
Diplomas (Education), professional certificates and Transcripts (if any)
Reference letters, awards, testimonials, and LinkedIn recommendations
Some of your content (if you create content) e.g. Blogs, YouTube videos, Podcasts etc.
Work samples you have created e.g. Websites, UI/UX designs, project documentation or case studies, video presentations, Artwork (for artists), PowerPoint presentations, Slides etc.
Lists of accomplishments/awards
Thank you notes or emails from clients or co-workers (Testimonials) etc.

What should not go into a portfolio?

You might get tempted to want a whole Wikipedia of things on your portfolio, but more often than not, it does not increase positive perception. Being super precise and detailed is very important when structuring your portfolio (which is beyond the scope of this article) as it can considerably improve the way you are seen as a professional.
Here are a couple of things I have found to be less useful in a portfolio

Having a waterfall of summary in your "About Me" section. A couple of lines of text should pretty much tell the story
Do not put ratings or percentages on your skills. I am guilty as I did it in the past. We could argue all day about it, but the truth is, own your skill and do not put a dent in it. Having things like: HTML(50%), CSS(90%), Photoshop(45%) etc.

Here's a screenshot taken from my first portfolio website

Please, remove the ratings. Your 50% rating might be the 100% a company is looking for.

Overly-complicated, overly-designed layout
Lack of proper structure and personality
Do not tell personal stories.
Do not include your house address (Employers will not perceive you as being security conscious, same for your CV). Your email is just fine.
Only include things relevant to your field of work/study.
Use only high-fidelity images (but one that will still load fast in the browser)
Provide a way to get in touch e.g. A mail, link or a contact form.

Your get-in-touch section might look something like this if you decided to go with a form field:
Screenshot is taken from my current portfolio

Should you have a hard copy or online portfolio?

Whether or not you use an online or hard copy portfolio, all depends on your industry and personal preference. Research your industry for what's common and beneficial, then, make a decision.
whichever industry it is, it might still be beneficial to have an online presence.

How do you create one?

For online portfolios, you can build one for yourself if you are a web developer, have someone build one for you, or use a prebuilt template.
Anyone you decide, be sure to research and make good decisions on what design best suits your field.

For hard-copy portfolios, you can use a ring binder or leather-bound padfolio. Be sure to organize/tab them into sections.

Feel free to google “online portfolio websites” or “online portfolio builder”. You can also get design inspiration from hundreds of websites out there if you are building one for yourself.

Please note: It does not have to be 100% a website.

I have seen people use several platforms as their portfolio, e.g.

Google slides
Google Drive portfolio
A PDF hosted online
A Figma or Adobe Design with a "live link"

Other options you could utilize:

Your LinkedIn profile
GitHub profile with projects having detailed ReadMe.md describing project specifications, features and your involvement
Behance and, many more.

Again, research your industry and find what best suits you.

Pro Tips

Replace practice projects with professional ones as soon as you start having them, e.g. Remove the calculator web app you coded and replace it with your new blog website (even if it is just presentation/static).
Update the CV on your portfolio as you update them on your PC or mobile
Do not waste considerable time trying to make it perfect, it never will. You can always make minor updates later in the future.
Get your portfolio reviewed by a more senior person in your field
You do not need to have a hundred completed projects before you start a portfolio. Start where you're at, and you'll never regret it.

That's pretty much it. This article doesn't cover all you need to know and I'd appreciate it if you can drop more suggestions, Portfolio design Inspiration links, Your thoughts, Your portfolio website link to inspire others, and Comments in the discussion box below. You might provide/say something important to other readers. Also, your feedbacks are welcome if this post needs improvement. Do bookmark, like/unicorn this post for reference (and also to support me)

Keep an eye out. Soon, I will post a step by step process on "How to build a simple online portfolio as a web developer".

Thanks for reading 😊.

How To Create A Global "JSON Search Algorithm" In JavaScript.

Lucius Emmanuel Emmaccen — Mon, 01 Mar 2021 10:24:34 +0000

Writing a Search feature for every single page or section on your website can be really tedious, and even if you create a reusable function, you might end up changing the code multiple times for it to work for new or dynamic types of JSON data.

I first noticed this problem at work, where I had to write and modify my reusable search function to work for new types of "JSON data" or situations where minor changes would require me to handle page-specific search instructions.

For the most part, You'd require to know the keys of the JSON you'll be working with, so let's say you want to implement a search that can... search using First Name, Last Name, Email Address etc your code might look something like this :

If you read the code closely, you'd realize I knew beforehand the keys of the data I'll be working with, and let's presume in the future, the backend changes and email is taken out, or phoneNumber which in this case, the code will break (crash) or the backend includes a new data we'd love to also be able to search with, like age or role, which would result in us changing the code to cater for age etc.

You should already start seeing the problem here so... I decide to come up with a simple algorithm that'll eliminate all these problems by :

Making sure you don't even have to know or care about the keys
Still works, even for changing or dynamic JSON data
Includes combination settings e.g combining first name, last name and middle name in search inputs.
Prevent your heart from racing when your company/friend(s) is/are testing your application
Saves you a lot of time and burnout 😎

Okay, now let's get to it, we'll start from the basics then improve along the way.

Version 1

First, the most basic requirement is your array of data and a function that'll feed on it, so if you have :

We'll start the search code by :

Declaring a search function that takes 3-arguments ( the event (in this case, its the user input), the JSON array, and the function (or variable) that'll receive the result.

After that, we'll fix the code below to prevent the page from refreshing and getting the user input (typed search value)

The second step here would be to loop over the array and get the search result using Array.filter, and what this simply does is loop through the array and do some conditional checks that we'll write, and if the check passes, it'll return the specific data that passes the test. Check the MDN docs for an in-depth information.

So we'll have something like :

Now, it's all starting to look a lot like the old code I complained about, but here comes the trick of this whole saga.

If you remember I said you won't have to worry about knowing the Keys of the JSON data? (`{"Key" : "value"}), well... we're in luck because there's a function for getting the keys (even values) of an object in JavaScript.

We'll be using the Object.keys(yourJSONArray) function, which returns an array of Keys we can loop over. Check the MDN Docs for an in-depth explanation. Then we can perform a forEach on the returned array (as you might have guessed), but in our case, forEach (or even a for-loop) is not an option as we'll be using Array.some and I'll explain why (because I think it's important to note), but first, take a look at the code at this stage.

If you look through the code again, you'll notice that Array.filter returns the data that passes our conditional check, and we're doing the checks on the Object.keys but in this case, we want to stop/terminate the loop immediately we find a matching value. What I mean is, if you type Dev in your search field and the code is currently looping over the first data in the Object:

The checks we'll do here is computing if the current Object Value e.g {"key": "value", "key": "value"} includes the search input, so if the user types Dev in the search box, it'll match firstName and emailAddress and if we have any other value with the word "Dev" it'll match that too, but here's the thing about Array.some, it'll stop looping once we find the first matching value (firstName) and that's why we're not using forEach because we'd have to manually write more code to make it work and we lowkey can't stop a forEach loop (let me know if am wrong).

Let's move forward. The code and conditions we'll write in the Array.some() will :

Get the current value of the Object, and since we don't know the keys beforehand, we'll use data[key] which allows us to get the values of objects with dynamic keys (applies in our case).
Convert the value to a string using JSON.stringify, and it'll look something like : JSON.stringify(data[key])
Convert the value to lower-case because we've also converted the user input to lowercase const input = event.target.value.toLowerCase();

Note: "A" is not equal to "a" and that's why we're comparing both the input and the value at a lower-case level

Trim out any trailing white spaces using .trim(). This will eliminate white spaces at the start or end. For example, " name" or "name " is not equal to "name" and that's why we remove any trailing whitespace. And lastly
Check if it includes the search input value using .includes(inputValue)
pass the result to a function/variable

Let's take a look at the code to get more clear.

At this point, this code is almost ready to ship because right now it works but we can make it better.

Version 2

Why version 2? I'll explain why, if you take a look at the data again, you'll notice that we have "firstName" and "lastname", we could even have "middleName" later in the future. But currently, our code cannot search in combinations of first-and-last-name, it can only match one at a time.

So... what if we could find a way to get around this? Well... there is a way, and we'll do that by including a fourth argument called "combinations" (or you could call it anything you want), so we'll have something like :

The code I wrote at work to combine searching with "firstName" and "lastname" looks like this :

and you can see that it looks ugly, and I had to also know the keys of the object.

Here, we'll allow the user or caller of our function to decide what combinations they want and in what order they want it because think about it, what if they want it in the order: "lastName"-"firstName" or "middleName"-"firstName" or "firstName"-"lastName"-"middleName"? Exactly!

Our implementations will be slightly different and we'll begin by looping over the combinations passed by the caller or user of our function/algorithm.

In the .filter() function we'll fix in our combination logic

Then we'll loop over the combinations and add them in the order that the user of our algorithm wants.

Our current code altogether looks like this:

Good, we made it this far, but... wait a min, something's not quite right about this code 🤔. What's wrong with it? Well... it's full of bugs at the moment, lol. And we'll fix them, but first, what are the obvious bugs am talking about? Here's a list

Bug NO.1

First, I said we don't have to know the key's right? But then am giving the user of our algorithm the ability to provide Keys of the data they want to combine, and what's wrong with this? Well... what if they supplied a key that's not even existent in the JSON data? Bugs! We'll fix it.

In JavaScript, we can check if a key exists in an object by using Object.hasOwnProperty("someKey"). In other words, data.hasOwnProperty("firstName") will return true and data.hasOwnProperty("non-existent-key") will return false

Our improved code should look like this:

Are we done? Nope! Am sorry but we ain't.

Bug NO.2

let's take a moment to think about what would happen if the user never passes a value for objectData and combinations. There's going to be a problem because we're always trying to perform some actions on these arguments, and we can fix the code by providing a default value.

So if we forget to pass a value for these arguments, we'll still be fine, but how do we do that? We do that by providing an empty array as a default value:

Great! We made it even further, are we done? Yea, we are, but... Maybe we ain't 😎.

There's one more thing I'd like to point out about this algorithm. In JSON data, sometimes, values can come back as null, undefined, true or false, you might have seen this a lot if you've consumed some backend data in the past or current.

So, if a user search the word null, undefined, true or false every object/data that has a the value null or undefined etc will show up.

At my workplace, I allowed the search of false and true but not null or undefined because the API I was working with mostly had an {isActive: true} or {isActive: false} key-values, which allows me to search users that are currently activated/deactivated.

I just type "true" or "false" and that does the magic

Version 3

My current code at the time of writing this blog is:

For someone that might want to use the code in a search input will do something like:

And they won't have to worry about what changes about the student data in the future.
Plus even if you're consuming an API with random JSON data (Never seen this happen though) like say, data of persons, and robots, and cat names etc... you get the gist?

you won't have to worry, the search still stands.

The only new thing in my previous snippet (Version 3) is the && (and) || operator and what && simply means is, execute the code on the right if the code to the left (before the &&) is true.
|| simply means, do what's on the left if the condition is true Or do what's on the right if what's on the left is false. I don't feel I should talk much about these operators, if you're not familiar with it, you can look them up, it's no big deal but... it really does save you a lot of typing.

Conclusion

There's no denying the fact that every code can be made better, and if you ever feel you want to improve on the code, or would like to create a say... some React or JS library specifically for "searching" that does more than the 1-thing we learnt here. Feel free to Clone OR Contribute to the GitHub repo.

If you do make a library that gives people that super-power, I'd like to feature you on this blog.

Cheers 🥂 and thanks for reading 😎.

How To Know If An Element Is Visible In Viewport.

Lucius Emmanuel Emmaccen — Tue, 16 Feb 2021 21:57:54 +0000

In this article, we're going to learn how to know/detect if an element is visible in the browser's viewport.

Before we start, I'd like to clarify what a viewport is, relative to our browser engine.

A Viewport is the area (ordinarily rectangular) of our computer graphics (Screen) that is currently being viewed. In other words, it's the area of your computer screen that is currently visible to you (physically).

Check the MDN docs for an in-depth explanation, if mine is not clear enough.

Now, why would this be useful to you? Why would you want to know if an element is currently visible in the browser's viewport?

You might find it useful in situations like :

You want to show an overlay asking your customers to subscribe to your newsletter when they scroll to the footer of your website (e.g If its a blog site, this might indicate they just finished reading and you want them to subscribe)
You want to increase counter values that read when an element becomes visible to users
Trigger animations when e.g "section A" on your webpage comes to view, fadeIn animations, etc
As a progress bar at the top of the screen that tells you how much content is left to view on a page (You might have seen it used on blog sites or any site that involves reading through long text content).
Do some Javascript magic, like play a video, show some short popup ads, toggle a help "BOT" 🤖 etc.

Am sure by now, you're seeing useful things that can be done with this in your mind too and at the end of this article, you'll get even more insight and ideas. So... let's get to it.

Walkthrough

We can achieve this by using the getBoundingClientRect() function on an element which returns a DOMRect object providing information about the size of an element and its position relative to the viewport.
so we have something like yourElement.getBoundingClientRect() or elementInfo = yourElement.getBoundingClientRect()

A DOMRect describes the size and position of a rectangle.

The DOMRect Object returned from getBoundingClientRect() are key-values (in pixels) that can be used to compute our goal and is the smallest rectangle which contains the entire element, including its padding and border-width.
The Object returned looks something like this:

 {
      x: 20,
      y: 5.5,
      width: 882,
      height: 198.890625,
      top: 5.5,
      right: 902,
      bottom: 204.390625,
      left: 20,
    };

Let's go through the explanation in more detail. I've separated the visual presentation in order to avoid confusion.

DOMRect Key-Values (in pixels)

X and Left

Represents the distance from the left between the viewport (browser screen) and the top-left area of the DOMRect (yourElement).

Y and Top

Represents the distance from the top of the viewport (browser screen) and the top of the DOMRect (yourElement).

Width

Represents the width of the DOMRect

Height

Represents the height of the DOMRect

The width and height properties of the DOMRect object returned by the method include the padding and border-width, not only the content width/height. In the standard box model, this would be equal to the width or height property of the element + padding + border-width. But if box-sizing: border-box is set for the element this would be directly equal to its width or height.

You can check the MDN Docs on box-sizing.

Bottom

Represents the distance from the top of the viewport (browser screen) and the bottom of the DOMRect (yourElement).

Right

Represents the distance from the left of the viewport (browser screen) and the right (bottom-right) of the DOMRect (yourElement). It has the same value as x + width, or x if width is negative.

Full Diagram

If you're wondering where I got all these diagrams from, I designed them in Figma

Some Useful Tips

Calculating Partial Visibility

Let's say we want to know if an element is partially visible in the viewport, and we've assigned an evenListner that triggers each time we scroll through the page e.g something like :

window.addEventListener("scroll", () => {
        //Some javascript magic here...
      });

we can achieve this by simply subtracting the top/y value from the viewport height (screen) and also doing a check to make sure the bottom value is greater than 0.
The viewport height can be gotten using window.innerHeight or document.documentElement.clientHeight but usually, it's safer to combine them due to the browser compatibility of innerHeight and documentElement
So you might use something like :

const height = 
window.innerHeight || document.documentElement.clientHeight;

So partial visibility would pass for the condition :
viewportHeight - top is greater than 0 and bottom is also greater than 0

const viewportHeight =
            window.innerHeight || document.documentElement.clientHeight;
// condition 
(viewportHeight - top > 0 && bottom > 0)

If this is getting a little rough, it might be helpful to use the diagram and a pen and paper (I definitely did).

Calculating Full Visibility

Now, this part is almost as easy. The conditions required for full visibility are:
bottom is greater than 0 and bottom is less than or equal to viewportHeight and top is greater than or equal to 0
So it looks something like this:

bottom > 0 && bottom <= viewportHeight && top >= 0

At this point, I think it would be nice to have us view a live website that computes the values of getBoundingClientRect() in real-time.

It'll also help you understand how all the conditions/checks we did earlier pass the visibility test. Just scroll through the page and watch the magic.
It's a super simple webpage with nicely cooked and understandable code 😎.
Feel free to clone/fork the gitHub repo if you want to get familiar with the code.

Now, it's evident that everything we've done so far accounts for the vertically scrollable element (scroll-top-bottom & scroll-bottom-top), but what about horizontally scrollable elements (scroll-left-right & scroll-right-left)?

We'll have to pair the condition with the browser width using :

(window.innerWidth || document.documentElement.clientWidth)

So we'll have something that looks like this:

(right > 0 && right <= width)

Browser Compatibility

That's it and we've come to the end of this tutorial. I hope you found it useful. If you'd like to revisit/keep this post for reference, please, do bookmark it and leave a like/unicorn 🙂. Let me know what you think in the comment/discussion section below (improvements, your thoughts, etc). Cheers 🥂.

Update

While getBoundingClientRect() can help you achieve a lot of things, it's important to know the cost of using it as it fires very rapidly if used in an event listener like 'scroll listener'.

I'd recommend pairing it with a debounce() function, however, in most cases, the IntersectionObserver API does this quite efficiently. It observes changes in the visibility of an element relative to its parent or the top-level document's viewport. It can be used to trigger an action when an element becomes visible or hidden.

So, while getBoundingClientRect() can be used for positioning and sizing, IntersectionObserver is used for observing the visibility of an element. They serve different purposes and cannot be compared in terms of what one can do that the other can't. Read more about IntersectionObserver on MDN

How To Create A "Glassmorphic" Template In Pure HTML & CSS.

Lucius Emmanuel Emmaccen — Mon, 21 Dec 2020 17:02:32 +0000

What Is Glassmorphism?

If you're hearing the term "Glassmorpism" for the first time, well... It only just got my attention a few hours before this post so, What is glassmorphism?

Glassmorphism is a new trend which is getting more traction on websites like Dribble, Behance etc and I've seen a couple of awesome designs made using this trendy UI.

Here's an example by Rishabh Saxena

It is important to note that as of the time of writing this blog, glassmorphism is not widely used on the web yet. So we're going to be exploring the power of our creativity.

Attributes/Characteristics

Translucency (frosted-glass)
Detailed Colors (becomes cloud-like)
Shadows
Everything else...

prerequisites

To follow up with this tutorial, Since it might require we copy-paste some code to test things out, we'll:

Create an HTML and CSS file ( index.html and index.css)
Link to the full working code on GitHub if you ever get stuck.
Link to Live website for reference.

The main CSS property to watch out for is the backdrop-filter. Feel free to get documentations to any CSS or HTML properties on MDN. The backdrop-filter : blur(_px) is what gives it the frosty-like glass effect.
The backdrop-filter does more than just blur a background. Again, check the MDN for the full documentation.

In order for this to work effectively, the element has to be partly translucent (mimicking a glass-effect).

Now, in our index.html let's paste the code block below

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="./index.css" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Glassmorphism" />
    <meta
      name="keywords"
      content="glassmorphism,UIUX"
    />
    <meta name="author" content="emmaccen" />
    <title>Glass Morphism</title>
  </head>
  <body>
    <div class="landingContainer">
      <div class="centered">
        <h1 class="title">Changing The World</h1>
      </div>
      <div class="glassContainer">
        <div class="cover"></div>
      </div>
    </div>
  </body>
</html>

I won't be doing any explanation on the HTML code snippet since its pretty basic.

index.css

body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.landingContainer {
  /* span the entire desktop height : height: 100vh;*/
  height: 100vh;
  font-family: helvetica;
  /* set a gradient background with 3 colours https://coolors.co/ */
  background: linear-gradient(
    to right,
    rgba(32, 191, 85),
    rgba(32, 164, 243),
    rgba(11, 79, 108)
  );
}

.centered {
  /* center content */
  display: flex;
  justify-content: center;
  align-items: center;
  /* so it takes up its containers height (landingContainer)*/
  height: inherit;
}

.title {
  color: whitesmoke;
  /* cover the entire page width : font-size: 10vw;*/
  font-size: 10vw;
  text-align: center;
}

/* The real deal  starts here*/
.glassContainer {
  position: absolute;
  /* center content */
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  width: 100%;
  height: 100%;
}
.cover {
  transition: 0.5s all ease;
  height: 70%;
  width: 70%;
  background-color: rgba(255, 255, 255, 0.25);
  /* box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit; */
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  /* For the fog-like glass effect */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 10px;
}

/* responsiveness */

@media (max-width: 700px) {
  .cover {
    height: 30%;
  }
}

Now for the CSS code above.

I got my colour combo from Coolors.co so, you can mix and match to replace mine.
I've included comments in the code, so I won't have to explain here again. You can Check MDN for full documentation if any CSS property isn't clear. The result should look something like this:

So that's it. This tutorial is pretty basic and I wanted it to be something we can go through in 5-10Mins. I hope this wasn't a waste of your precious time.

My Thoughts

Am really looking forward to 2021 and the awesome real-world application of people's creativity with Glassmorphism. I have a feeling it'll trend for quite a while if done right.

Pro Tips

You can save a lot of time by checking out glassmorphism.com. It's a website that helps you generate glassmorpic CSS styles on the fly. Also, you can modify as you wish (it comes with visual representations too)
Glassmorphism is not limited to the web alone if you build/design native apps, you might want to implement these designs too.

Conclusion

I'm always happy when I get feedback about my blogs, so don't hesitate to play with the comment/discussion area, like and bookmark this blog if you love it or share with others.

You can follow me on Twitter, or send me a sample of what you've created.
You can also fork/clone the repo on GitHub. I have two branches created. The Master/Main branch is what we practised in this tutorial. The Second branch is what we have as the cover image of the article.

If you read up to this point, thank you I appreciate your will to learn and am happy to have you reading this.
Check out other Glassmorphic designs on dribble.com

More Design Inspiration

Design by Aakash Raj Dahal

Mobile design by Brightlab

How To Integrate A Rich Text Editor (WYSIWYG) In Your React.Js Project.

Lucius Emmanuel Emmaccen — Fri, 10 Jul 2020 01:41:41 +0000

In this article, we're going to learn how to "Integrate A Rich Text Editor" in your react.Js project using TinyMCE.

Before we begin, let's do a quick summary of what a "Rich Text Editor" also commonly known as (WYSIWYG) what-you-see-is-what-you-get means, just in case you found this article out of curiosity.

In simple terms: A Rich Text Editor is an interface for editing rich text within browsers, which could also include images, links, audio and videos in a what-you-see-is-what-you-get fashion. These editors aim to reduce the effort for users trying to express their formatting directly as valid HTML markup.

These editors (There're quite a number of them) can particularly be useful if you're creating your very own blog website 😎.
Now that we have a clear understanding of what a Rich Text Editor is, let's get right into it.

Prerequisites

Node.js (and npm)
Access to tinymce.min.js on either : Tinycloud or TinyMCE Self-hosted (what we'll be using) See Installing TinyMCE for details on self-hosting TinyMCE.
Basic React Knowledge. Don't worry if you're a beginner, you can do this !.

Procedures | Processes

If you don't already have React installed on your machine, open your command line or command prompt and install the Create React App package.

 $ npm install -g create-react-app

Create a new React project and "name it anything you want". I named mine WYSIWYG

 $ create-react-app WYSIWYG

Change into the newly-created directory.

 $ cd WYSIWYG

Install the TinyMCE-react package and save it to your package.json with --save.

 $ npm install --save @tinymce/tinymce-react

Open the project using any editor of choice. I use VScode

Inside the Public folder, let's open the Index.html file and paste this code at the head section ( some paste at the bottom... your choice 😎)

<script src="/path/to/tinymce.min.js"></script>

Now that we have a project all set up for our Rich Text Editor, let's start with the INTEGRATION so we can all be happy.

Navigate to your "src" directory and :

Create a "components" folder inside the "src" directory
Inside the "components" folder, create a "RichText.js" file.

After you've done that, paste the code below into your RichText.js file


import React from 'react';
import { Editor } from '@tinymce/tinymce-react';

class RichText extends React.Component {
  handleEditorChange = (e) => {
    console.log(
      'Content was updated:',
      e.target.getContent()
    );
  }

  render() {
    return (
      <Editor
        initialValue="<p>Wow ! ... It Works !!!</p>"
        init={{
          height: 500,
          menubar: false,
          plugins: [
            'advlist autolink lists link image',
            'charmap print preview anchor help',
            'searchreplace visualblocks code',
            'insertdatetime media table paste wordcount'
          ],
          toolbar:
            'undo redo | formatselect | bold italic | \
            alignleft aligncenter alignright | \
            bullist numlist outdent indent | help'
        }}
        onChange={this.handleEditorChange}
      />
    );
  }
}

export default RichText;

Pasting the above code will create a react component containing the TinyMCE editor.

Now let's navigate to our App.js folder and import the RichText component so we can have it rendered in the browser.

import React from 'react';
import RichText from './component/RichText'
function App() {
  return (
    <div className="App">
      <RichText />
    </div>
  );
}

export default App;

To run the app lets open the terminal and run this code (make sure you've checked into your project directory in the terminal. e.g cd pathToProject ) :

  $ npm run start

Now you should see the application up and running in the browser (usually localhost:3000)

That was easy ? wasn't it ??

But we're not done just yet !. Did you notice a warning that pops up in the editor when you try to type anything ( Warning: This domain is not registered with Tiny Cloud ) ??. That's because we've not created an API key.

Don't worry We've completed the easy part, now for the easier part, all that's left is to get rid of that scary warning, but... How do we do that ? well... It's easy 😎.

Let's Follow These Steps

To get an API Key Let's go to the tinycloud page and create an account.
fill in the basic Infos they'll ask (Nothing Personal)
They'll send a confirmation email, so we'd have to open our mail and confirm by clicking the link provide (this redirects to a page where we'll do basic setups)
On the redirect page, we'll add our domain (if we have one e.g ...mycooldomain.com), localhost is by default and we don't have to explicitly include that.
Next, we scroll to the bottom of the page and click on Continue to dashboard. This is where we'll see our API KEY
Copy the API KEY and navigate to the RichText.js file. Inside the <Editor /> component, include the apiKey option in the editor element and paste your TinyMCE API key.

<Editor
  apiKey="your-api-key-goes-here"
  init={{ /* your other settings */ }}
/>

Save the project and watch the magic happen. Voila! We don't have errors anymore !!!.

Check out the working code on my Git repository. Please feel free to fork the project.
There's a lot that can be done with TinyMCE, to explore some more goodies there is, go check out the TinyMCE docs. Also, it can be integrated with other technologies too, such as Angular, Vue etc.
TinyMCE can be customised to include a lot more plugins and Event bindings than we currently have in our project.

PRO TIPS

If you wish to add some spacing (margins or padding) outside the <Editor />, just wrap a <div></div> around it and style accordingly.
To make this project more fun, create a git Repo and push all you've learnt in this post.
Teach someone else 😎
Don't forget to give a thumbs Up and leave comments (please, I love feedbacks)
last but not least, This is my first ever blog post so, don't hesitate to point out errors to help me improve.

Thanks to everyone that took the time out to read this blog and once again, be sure to check out the working code on my Git repository, if you so wish.
Please, feel free to fork and star the project. I wish you all the best.

Forem: Lucius Emmanuel Emmaccen

React useReducer

Table of content

Introduction

The useReducer Syntax

What is a state in React?

What is a dispatch in React?

The reducer function

The initial state

Lazy initialization

How the useReducer hook works

Bailing out of a dispatch

useReducer with Typescript

useState Vs useReducer

When to use the useReducer hook

When not to use useReducer

Recommend videos

More interesting reads from my blogs

Conclusion

Most Software Developers Are Depressed

Build Your Professional Portfolio Website In 2 Hours Using HTML & CSS.

What We'll Build 💪

File Structure 📂

Warm-Up

Index.html

CSS Globals and Setup ⚙️

Contact Section (Also the Nav and Footer)

About Section

Experience Section

Portfolio Section

Lastly

Full Design 🎨🖌️

My Thoughts 🤔 💭

Pro Tips 💡

Conclusion ✅

Reasons Why You Need To Have A Professional Portfolio.

What is a portfolio?

Why do you need one?

What jobs / industries use portfolios?

What should go into a portfolio?

What should not go into a portfolio?

Should you have a hard copy or online portfolio?

How do you create one?

Pro Tips

How To Create A Global "JSON Search Algorithm" In JavaScript.

Version 1

Version 2

Version 3

Conclusion

How To Know If An Element Is Visible In Viewport.

Walkthrough

DOMRect Key-Values (in pixels)

Full Diagram

Some Useful Tips

Browser Compatibility

Update

How To Create A "Glassmorphic" Template In Pure HTML & CSS.

What Is Glassmorphism?

Attributes/Characteristics

prerequisites

My Thoughts

Pro Tips

Conclusion

How To Integrate A Rich Text Editor (WYSIWYG) In Your React.Js Project.

Prerequisites

Procedures | Processes

Navigate to your "src" directory and :

Let's Follow These Steps

PRO TIPS