DEV Community: Abod Micheal (he/him)

Introducing supertext-react: Elevate Your Web Text Animations

Abod Micheal (he/him) — Fri, 08 Sep 2023 03:10:21 +0000

Create Stunning Text Effects with Ease

In the ever-evolving world of web development, enhancing user experiences has become paramount. One way to captivate your audience is through engaging animations, and text animations are no exception. Enter supertext-react, a powerful and flexible React component library designed to simplify the creation of captivating text animations.

The Power of Text Animations

Text animations are a fantastic way to bring life to your web applications. They can convey information more dynamically, provide visual cues, and create memorable user interactions. However, crafting these animations from scratch can be time-consuming and complex.

That's where supertext-react comes in. With this library, you can effortlessly integrate various text animation effects into your React projects, allowing you to focus on delivering an exceptional user experience.

Key Features

supertext-react offers a range of features and components tailored for text animations:

TypingText

Animate text as if it's being typed in real-time. Perfect for creating dynamic headers or simulating user interactions.

LastWordTypingText

Highlight the last word of a sentence, revealing it character by character. Ideal for emphasizing key points or adding a touch of creativity to your content.

Marquee

Add eye-catching scrolling text effects. Whether you want to display breaking news or showcase essential announcements, the Marquee component has you covered.

Seamless Integration

Integrating supertext-react into your projects is straightforward. Simply install the library via npm or yarn and import the desired components into your React application. Then, customize the animations using props to match your design requirements.

// Example import of TypingText component
import { TypingText } from 'supertext-react';

Get Started Today

Ready to elevate your web text animations with supertext-react? Head over to our npm package and GitHub repository to access the library and documentation. You'll find detailed guides and examples to help you get started quickly.

Whether you're building a personal portfolio, a corporate website, or a cutting-edge web application, supertext-react empowers you to create memorable text animations that leave a lasting impression.

Conclusion

In the competitive landscape of web development, delivering engaging user experiences is non-negotiable. supertext-react simplifies the process of adding captivating text animations to your React projects, allowing you to focus on what truly matters—creating an immersive and unforgettable digital journey for your users.

Get started with supertext-react today and unlock the power of text animations in your web applications.

Arrays DS & Algorithms Q&S - Find the largest three distinct elements in a JS array

Abod Micheal (he/him) — Sun, 19 Feb 2023 01:55:55 +0000

i am solving few JS algorithms and DS interview Questions everyday which might be useful to you , check out https://youtu.be/02a1IzWhk1I

Add Scroll animation to react web app using scrollreveal

Abod Micheal (he/him) — Thu, 17 Nov 2022 04:03:27 +0000

firstly lets install the library using

npm i scrollreveal

Let's add the following to the component. If you're using a class component, you must do so in componentdidmount();

//firstly we import using 
import ScrollReveal from "scrollreveal";
//then we create ref 
refs = React.createRef();
//for class component 
 componentDidMount() {
    const config = {
      origin: "left",
      duration: 1000,
      delay: 150,
      distance: "500px",
      scale: 1,
      easing: "ease"
    };

then, following our config in the lifecycle, we add the following code.

ScrollReveal().reveal(this.refs.firs-animation, config);

the tag we want to animate is then given the ref="firs-animation" attribute.

I appreciate your time, Thank you.

Sample code

import React from "react";
import ScrollReveal from "scrollreveal";
class Banner extends React.Component {
 refs = React.createRef();
 componentDidMount() {
  const config = {
   origin: "left",
   duration: 1000,
   delay: 150,
   distance: "500px",
   scale: 1,
   easing: "ease",
  };
  ScrollReveal().reveal(this.refs.box1, config);
}

render() {
 return (
  <div className="banner">
   <div className="banner">
    <div className="Bann" ref="box1">
     <div className="basic">first</div>
     <div className="basic">first</div>
    </div>
    <div className="banner_basic">
     <h6>just a basic example</h6>
     <h6>text,</h6>
    </div>
   </div>
  </div>
 );
 }
}
export default Banner;

Aos works for both class and functional components , link below
https://github.com/michalsnik/aos#animations

How to deploy react projects to heroku

Abod Micheal (he/him) — Mon, 06 Jun 2022 00:31:33 +0000

$ npm install -g heroku

//confirm heroku has been installed , it would show the version
$ heroku --version

$ heroku login -i

//make sure you are in your react project directory

$ git init

$ git add .

$ git commit -m "initial commit"

$ heroku create

$ git push heroku master

Neon - 404 Page Not Found

Abod Micheal (he/him) — Sat, 18 Dec 2021 18:05:16 +0000

Might come out handy

sticky navbar on scroll reactJS [Updated]

Abod Micheal (he/him) — Sat, 25 Sep 2021 08:47:09 +0000

I gave a tutorial on how to add sticky navbar onscroll in react js, and most people got problem in adding the code to their project and I decided to create a library which would be much easier.
GIT https://github.com/abodmicheal/react-js-stickynav

NPM
https://www.npmjs.com/package/react-js-stickynav

react-js-stickynav

A simple react js nav bar onscroll

Intro

Install

npm install --save react-js-stickynav

Usage

length = navigation length , which is the length you want you want your sticky Nav to appear

import React from 'react'
import { StickyNav } from 'react-js-stickynav'
import 'react-js-stickynav/dist/index.css'

const App = () => {
  const style = () => {
    return (
      <style jsx>{`
        .nav {
          transition: all 0.1s linear;
          position: fixed;
          z-index: 2000;
          padding: 20px;
        }
        .scrollNav {
          transition: all 0.5s ease-in;
          z-index: 2000;
          background: #ffffff;
          width: 100%;
          border-bottom: 1px solid #dddddd;
        }
        .styl {
          padding-top: 80px;
        }
      `}</style>
    )
  }
  return (
    <div>
      {style()}
      <StickyNav length='40'>insert your Navbar Component here</StickyNav>
      <div className='styl'>
        <h1>
          Creating a Single-Page App in React using React Router by kirupa |
          filed under Learning React Now that you've familiarized yourself with
          the basics of how to work with React, let's kick things up a few
          notches. What we are going to do is use React to build a simple
          single-page app (also referred to as SPA by the cool kids...and people
          living in Scandinavia). Like we talked about in our React introduction
          forever ago, single-page apps are different from the more traditional
          multi-page apps that you see everywhere. The biggest difference is
          that navigating a single-page app doesn't involve going to an entirely
          new page. Instead, your pages (commonly known as views in this
          context) typically load inline within the same page itself: When you
          are loading content inline, things get a little challenging. The hard
          part is not loading the content itself. That is relatively easy. The
          hard part is making sure that single-page apps behave in a way that is
          consistent with what your users are used to. More specifically, when
          users navigate your app, they expect that: The URL displayed in the
          address bar always reflects the thing that they are viewing. They can
          use the browser's back and forward buttons...successfully. They can
          navigate to a particular view (aka deep link) directly using the
          appropriate URL. With multi-page apps, these three things come for
          free. There is nothing extra you have to do for any of it. With
          single-page apps, because you aren't navigating to an entirely new
          page, you have to do real work to deal with these three things that
          your users expect to just work. You need to ensure that navigating
          within your app adjusts the URL appropriately. You need to ensure your
          browser's history is properly synchronized with
        </h1>
        <h5>
          Creating a Single-Page App in React using React Router by kirupa |
          filed under Learning React Now that you've familiarized yourself with
          the basics of how to work with React, let's kick things up a few
          notches. What we are going to do is use React to build a simple
          single-page app (also referred to as SPA by the cool kids...and people
          living in Scandinavia). Like we talked about in our React introduction
          forever ago, single-page apps are different from the more traditional
          multi-page apps that you see everywhere. The biggest difference is
          that navigating a single-page app doesn't involve going to an entirely
          new page. Instead, your pages (commonly known as views in this
          context) typically load inline within the same page itself: When you
          are loading content inline, things get a little challenging. The hard
          part is not loading the content itself. That is relatively easy. The
          hard part is making sure that single-page apps behave in a way that is
          consistent with what your users are used to. More specifically, when
          users navigate your app, they expect that: The URL displayed in the
          address bar always reflects the thing that they are viewing. They can
          use the browser's back and forward buttons...successfully. They can
          navigate to a particular view (aka deep link) directly using the
          appropriate URL. With multi-page apps, these three things come for
          free. There is nothing extra you have to do for any of it. With
          single-page apps, because you aren't navigating to an entirely new
          page, you have to do real work to deal with these three things that
          your users expect to just work. You need to ensure that navigating
          within your app adjusts the URL appropriately. You need to ensure your
          browser's history is properly synchronized with
        </h5>
      </div>
    </div>
  )
}

export default App

License

MIT © abodmicheal

React dialog box library

Abod Micheal (he/him) — Tue, 21 Sep 2021 00:08:39 +0000

react-js-dialog-box

simple react.js modal box

Intro

Install

npm install --save react-js-dialog-box

Usage

import React from 'react'
import { ReactDialogBox } from 'react-js-dialog-box'
import 'react-js-dialog-box/dist/index.css'

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      isOpen: false
    }
  }

  openBox = () => {
    this.setState({
      isOpen: true
    })
  }

  closeBox = () => {
    this.setState({
      isOpen: false
    })
  }
  render() {
    return (
      <div>
        <button onClick={this.openBox}>Open ReactDialogBox </button>

        {this.state.isOpen && (
          <>
            <ReactDialogBox
              closeBox={this.closeBox}
              modalWidth='60%'
              headerBackgroundColor='red'
              headerTextColor='white'
              headerHeight='65'
              closeButtonColor='white'
              bodyBackgroundColor='white'
              bodyTextColor='black'
              bodyHeight='200px'
              headerText='Hearder '
            >
              <div>
                <h1>Dialog Content</h1>
              </div>
            </ReactDialogBox>
          </>
        )}
      </div>
    )
  }
}

export default App

License

MIT © abodmicheal

React open source Ecommerce web app with PayPal checkout

Abod Micheal (he/him) — Fri, 20 Aug 2021 22:40:07 +0000

Github - https://github.com/abodmicheal/React-projects/

live project - https://abod-zone.web.app

Open sourced react eccomerce web app with PayPal checkout

Abod Micheal (he/him) — Fri, 20 Aug 2021 22:12:58 +0000

Github - https://github.com/abodmicheal/React-projects/

live project - https://abod-zone.web.app

Paypal sandbox accounts and cards for testing

Abod Micheal (he/him) — Fri, 20 Aug 2021 02:28:12 +0000

Sandbox PayPal accounts
demo@userdemo.com

demo1@userdemo.com

demo2@userdemo.com

sb-gt97e7289308@personal.example.com

sb-gt97e7289308@personal.example.com
password: demo1234

PayPal Sandbox cards

Card Type: Visa

Card Number: 4032035468603394

Expiration Date: 11/2025

CVV: 461

Card Type: MasterCard

Card Number: 5110923244897475

Expiration Date: 09/2022

CVV: 628

Card Type: Amex

Card Number: 379763852944764

Expiration Date: 09/2024

CVV: 8353

Card Type: Discover

Card Number: 6011151596637988

Expiration Date: 11/2023

CVV: 040

Learn any programing language, framework or library fast and efficiently

Abod Micheal (he/him) — Sun, 13 Jun 2021 18:26:19 +0000

I'm Abod, and I work as a front end developer.
In this lesson, I'll show you how to learn a new programming language, library, or framework in the quickest possible method.
This strategy has helped me learn a new language quickly, despite the fact that it can be stressful and challenging at times.

This is what I used for Laravel.

I was hired as a freelance web developer to work on a finance online app. Note: I had never used laravel before and had never done a FullStack job before, but I used it and completed the lengthy and complex job in a month without receiving a single complaint from the client. Without realizing it, I learned a lot and was able to solve problems in laravel, as well as answer most interview questions about this framework.
I chose to publish it because I tried it on other frameworks as well.

1)Get a short project-based lesson on the language or library you want to learn, at least a 1hr 30 min video and up to 3 hours, which you could break into two days, 1hr 30 mins one day and 1hr 30 mins the next, but if you can finish the lesson base project in a day, that's fantastic. Simply get the video and follow along with the instructor. You might also include a small function that isn't included in this video like an extra button.

What is the purpose of this? This technique gives us insights into how things are done in the language, introduces you to a few concepts such as declaring a variable, how we use statements in that language, and so on; it essentially exposes you to how that language is used on a real project, which helps you pick up a few things in that language. When you're following the teacher, you'll very certainly notice an error that isn't in the video and that you'll have to solve on your own (or with the help of Google). You might also jot down a few concepts in the language that you don't grasp completely.

Let's move on to the next step now that you've gained a better understanding of this language.

2)If you know a programming language, find out how this one differs from the one you know; if you don't, that's fine; we'll just go through the documentation and look at the table of contents, then identify something you don't know or a concept you haven't seen or worked with in the first step, and write it down alongside what you wrote in the first step. This is the list of items we wish to concentrate on.

We don't know or haven't worked with them because they're unfamiliar to us.

3)We're looking for a course that will offer us a general overview of the language, such as an hour-long film that will offer us a general introduction and principles of the language. NOTE: We are not using a project-based instruction in this section. This section will assist us in gaining general knowledge of the language that we do not currently possess.

4)We go to a website like algoexpert and practice and solve problems in this language, just simple problems; if there are questions you can't answer, google at least 50 to 100 questions and write down a few difficult concepts; spend time on this and google all of the written concepts from step 1 to 4, get to know how it works, and solve questions on algoexpert while you google. Most of the time, we only study a handful of the concepts in step 3, which enhances our capabilities and helps us grasp how to apply the concepts in this language better. In my instance, I was learning the Laravel framework, therefore I searched for Laravel interview questions and Laravel live coding quiz on Google which lead me to
https://app.testgorilla.com/ , https://www.adaface.com/ and https://www.bestinterviewquestion.com/

5) When you are comfortable, jump on a project without a tutorial, any easy project, do it on your own and make sure it is something you can put in your portfolio when you are done, you could try an advanced tutorial, when you run into a problem, google or check a video on how to solve that specific problem and move on to the next.

Steps one through four can be completed in a day or two if you devote a significant amount of time to them, such as 8 hours or more a day. Step five can be completed at your leisure.

Keep in mind that you must complete each job. Please leave a comment if this works for you.
After that, begin establishing a large number of projects or begin working on the project for which you learned this new language or framework.

some useful resources
https://leetcode.com/
https://www.hackerrank.com/
https://www.algoexpert.io/
https://www.pramp.com/
https://interviewing.io/
https://www.interviewbit.com/

Truncate Text In React.js and JS

Abod Micheal (he/him) — Mon, 23 Nov 2020 16:55:56 +0000

Truncate is to shorten by cutting off a part , it has a lot of uses , you might have a post or description you wanna cut short if its longer or more than a certain amount of text.

ill explain how the bellow code works , you could copy and paste code to your project

class Cover extends Component {
    state = {
      banners: [informations or text we wanna truncate (let say i have 300 words)],
    };
  }
  render() {
    //reduce your information or text 
    const truncate = (input) =>
      input?.length > 300 ? `${input.substring(0, 254)}...` : input;

    return (
      <div>
            {truncate(this.state.banners.overview)}
      </div>
    );
  }
}

this code is basically telling the code if your input is greater than 300 it should reduce to 254 and add 3 dots

const truncate = (input) =>
      input?.length > 300 ? `${input.substring(0, 254)}...` : input;

we later called the function in our return and added what we wanna truncate or cut

{truncate(this.state.banners.overview)}