DEV Community: Chimezie Innocent

JavaScript Array.at() method

Chimezie Innocent — Tue, 06 Jun 2023 03:25:43 +0000

Before the arrival of Array.at() method, JavaScript developers have used many and different ways to return items from an array but there was still need to use negative indexing to get the last item. Array[0] will return the first item but to return the last item you would use Array[ Array.length - 1 ] as described below;

const names = [ 'Billy', 'Tony', 'Peter', 'Timothy', 'Andrew']

const getFirstName = names[0]
console.log(getFirstName)  // Billy

const getLastName = names[names.length - 1]
console.log(getLastName)  // Andrew

This has been one of the ways to achieve this. You can also do this with other methods like pop, slice and splice. See below;

// pop
const names = [ 'Billy', 'Tony', 'Peter', 'Timothy', 'Andrew']
const getLastName = names.pop()
console.log(getLastName)  // Andrew


// slice
const names = [ 'Billy', 'Tony', 'Peter', 'Timothy', 'Andrew']
const getLastName = names.slice(-1)
console.log(getLastName)  // ['Andrew']


// splice
const names = [ 'Billy', 'Tony', 'Peter', 'Timothy', 'Andrew']
const getLastName = names.splice(-1)
console.log(getLastName)  // ['Andrew']

All the above methods returns the last item but one thing to note; the splice method modifies the array unlike the others. That means it overwrites the original array and returns a new array after the splice method has been performed.

// splice
const names = [ 'Billy', 'Tony', 'Peter', 'Timothy', 'Andrew']
const getLastName = names.splice(-1)

console.log(getLastName)  // ['Andrew']
console.log(names)  // [ 'Billy', 'Tony', 'Peter', 'Timothy' ]

Using Array.at() method
Array.at() method makes it very easy to return the last item. With the Array.at(), you can now easily get the last item using negative indexing. This method takes an integer value and returns the item at that index, allowing for positive and negative integers.

const names = [ 'Billy', 'Tony', 'Peter', 'Timothy', 'Andrew']
const getLastName = names.at(-1)
console.log(getLastName) // Andrew

const names = [ 'Billy', 'Tony', 'Peter', 'Timothy', 'Andrew']
const getSecondLastName = names.at(-2)
console.log(getSecondLastName) // Timothy

const names = [ 'Billy', 'Tony', 'Peter', 'Timothy', 'Andrew']
const getFirstName = names.at(0)
console.log(getFirstName) // Billy

Array.at() method also works on strings too

const myName = 'Chimezie Innocent'
const getFirstLetter = myName.at(0)
console.log(getFirstLetter) // C

const myName = 'Chimezie Innocent'
const getLastLetter = myName.at(-1)
console.log(getLastLetter) // t

Getting started with Tailwind css

Chimezie Innocent — Sun, 29 Nov 2020 22:49:58 +0000

I have been a lover of vanilla css for ages, practically because I was too lazy to learn a framework. Tried out bootstrap and Sass but went back to vanilla after a while (yeah I know, many persons hate vanilla css). Few months ago, I stumbled unto Tailwind css on twitter and decided to give it a try and then, here we are...did you get it?, I don't think you do, lol never mind.

P/S: I didn't choose tailwind because it's better than bootstrap or Sass or other frameworks but maybe because I simply like the name.

So, do you want to get started using tailwind as your postcss in your React, then come along with me on this little journey.

The very first thing is to create a new react-app if you've not done that already...let's call it tailwind-css

npx create-react-app tailwind-css

then, you cd into your react folder and install the following dependencies

cd tailwind-css
npm i tailwind-css postcss-cli autoprefixer
npx tailwindcss init --full
touch postcss.config.js

the above code works you right into your folder, installs the dependencies, and creates a file called tailwind.config.js and postcss.config.js

The next thing is to cd into your src folder and create a styles folder with two css files; main and tailwind

cd src
mkdir styles
touch main.css
touch tailwind.css

Yeah, I love using the terminal so the codes. What I did above is open up the src folder and create another folder called styles, in your styles folder create two files called main.css and tailwind.css. In your tailwind.css file, import the following...

@tailwind base;

@tailwind components;

@tailwind utilities;

Next is to open your postcss.config.js file and write the small code

module.exports = {
    plugins: [ require('tailwindcss'), require('autoprefixer') ]
};

This imports the installed dependencies viz tailwind and autoprefixer from your package.json. Next, we head over to package.json file and make a little editting.
Under the scripts line, where your start code is written, add this line of code to it

"build:css": "postcss src/styles/tailwind.css -o src/styles/main.css"

Careful here, what this does is it looks for the following directory, builds and passes the outputs into the output directory so make sure you follow my steps or if not, try and place your tailwind and main directory accurately. After this, we run this code

npm run build:css

to build into the main.css file(after successful build, open up main.css to see the output)

Now you'are all set to write your very first tailwind css, to see the magic head over to your app.js component or any component you want to create and import main.css file into the component and enjoy.....

import '../styles/main.css';

One more thing, I had a little challenge when installing and using tailwind in my css. When I ran my npm run build:css, I got some errors like

TypeError: Object.entries(...).flatMap is not a function

Solution: If you get this error too, this is a node problem. Upgrade your node to the latest version and wallaa!!!, your code should build now

Also, I got another error that looked like this

Error: true is not a PostCSS plugin

Solution: This is a postcss error, check if you properly installed postcss-cli and not postcss. If you did the latter, what you can do is deleting the installed dependency and install the correct one. And that's it...Thank you for sticking with me through here and also check tailwindcss.com doc for more concepts.

Building a simple React Modal

Chimezie Innocent — Sun, 29 Nov 2020 22:48:50 +0000

I have always used the react-modal package whenever I wanted to use a modal in a project but along the way, I wanted to build mine from scratch and it was so easy that I wondered why I resorted to the npm package. This will be a short article and very apt so come along.

First, Lets create two components; A home and a modal component for better comprehension. In the home component, lets have a simple h1 tag with a button and a function

import React, { Component } from 'react';
import './Home.css';
import Modal from './Modal';

class Home extends Component {
    state = {
        open: true
    };

    openModal = (e) => {
        e.preventDefault();
        this.setState({
            open: !this.state.open
        });
    };

    render() {
        return (
            <main>
                <section>
                    <h1>React-Modal</h1>
                    <button
                        onClick={(e) => {
                            this.openModal(e);
                        }}>
                        Open Modal
                    </button>
                </section>

                <Modal open={this.state.open} onClose={this.openModal} />
            </main>
        );
    }
}

export default Home;

and in the modal component, lets add same tags and a function too.

import React, { Component } from 'react';
import './Modal.css';

class Modal extends Component {
    onClose = (e) => {
        this.props.onClose && this.props.onClose(e);
    };

    render() {
        if (this.props.open) {
            return null;
        }

        return (
            <section className="modal-container" id="modal">
                <div className="modal-content">
                    <h1>Notify Me</h1>
                    <button onClick={this.onClose}>Close Modal</button>
                </div>
            </section>
        );
    }
}

export default Modal;

Let me explain a bit...We are setting our initial state to true and on click of the button, our state will be updated to false. Then we import the modal component which we created and pass a prop of open and onClose to it.

On the modal component, we got the passed prop and returns null if our state is true and the onClose function changes the state from true to false when close-modal button is clicked.

Now, if we run this code, we will see the raw structure but the modal isnt working yet so let's head over to CSS and design the magic.

/* -------------Home.css--------------------- */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

main {
    text-align: center;
    padding-top: 20px;
}

/* -------------Modal.css--------------------- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.modal-container {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    z-index: 99;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: #f4f4f4;
    margin: 50px auto;
    width: 467px;
    height: 400px;
    max-width: 100%;
    max-height: 100%;
    border: 1px solid #ccc;
    padding: 40px 60px;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
}

and that is all...the modal-container is used as the background overlay to dim the home page while the modal-content is displayed on it. You can style your modal and even animate it to appear from top, left, bottom, fade in as you wish...lets do a little slide-down animation and call it a wrap

/* -------------Modal.css--------------------- */
.modal-content {
    background-color: #f4f4f4;
    margin: 50px auto;
    width: 467px;
    height: 400px;
    max-width: 100%;
    max-height: 100%;
    border: 1px solid #ccc;
    padding: 40px 60px;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
        animation: dropdwn ease-in-out 700ms;
}

@keyframes dropdwn {
    0% {
        opacity: 0;
        margin-top: -250px;
    }
    25% {
        opacity: 0.25;
        margin-top: -200px;
    }
    50% {
        opacity: 0.5;
        margin-top: -100px;
    }
    75% {
        opacity: 0.75;
        margin-top: -50px;
    }
    100% {
        opacity: 1;
        margin-top: 0px;
    }
}

and that is all...Ciao

Googling your errors as a Junior Developer

Chimezie Innocent — Sun, 29 Nov 2020 22:46:33 +0000

There is this misconception among junior developers about coding errors. When they encounter errors and bugs, they seem to get frustrated and think Oh! I'm not getting it and if this occurs more often they question themselves like "Am I sure this journey is for me" funny but yeah, you're are meant for this journey. P/S: You should know this happened to me and so many others that started this journey.
Bugs and Errors however, are painful to encounter and it proves we are not getting our desired results but be it as it may, we will always and will never run out of them but what matters is what you do when you encounter them. I think this also distinguishes juniors from senior and expert developers in the sense of what I will explain below.
When developers encounter errors, usually the senior devs know what to do about it but junior devs get easily frustrated because they don't even seem to know what the error means talk more of how to look for their solution. When I started out, I would always go back to my code from line one to make sure if I made any typo or syntax mistake-this is what we all do except that I was doing it the wrong way and trust me, this took a whole lot of time thereby adding to my frustrations.
To curb such horrible and tedious time wasted, I decided to write this article to help some junior developer out there next time he encounters errors. Below are few ways I go about mine.

Read the ERRORS: As I stated earlier, I would usually go back to my code to look for my problem not even knowing what the problem is. I believe many other junior devs do so, and when they can't seem to solve it on their own they would either ask for help or close their computer.
First things First, when errors occur there is an error message for you to know what went wrong. Even if you don't understand(we all don't at first) the jumbotron displayed there, a careful skimming would show you at least a line or word you will probably understand.
As you go through your error lines, you will see the line in your code where they error occurred with some detailing about why it occurred. You can now easily go back to that specific line and check what you did wrong. This will save you a whole lot of time especially when you have long lines of code in your editor.
Also, if you don't seem to know what went wrong in your code, note the word(keyword) you understood in your error display and surf the web with it. Google is designed to solve erroneous algorithms for us that if you simply type in "watchman error", be sure to get thousands of related results to watchman error and then you can surf through to find one relating to your error(P/S: There are clouds of witnesses to any error you will ever encounter in your life).
Copy and Paste the ERROR: After going through your displayed errors and you still don't understand it, look for a line or couple of lines talking about the error and copy it and paste the copied error in your google search. Same as always, you will get thousands of results to your error.
Ask Questions Online: One more important thing about reading your errors is it helps when you are asking for help. For instance you are having an error and you note the word watchman among the errors, you can streamline your questions better like "I am having watchman errors, any way to fix it" with some screenshots, rather than asking a generic question. I don't think I have done this before since I always seem to find someone who has done so for me but you can do so maybe if answers you see online isn't helping you situation. This is asking for help about your errors so people who have encountered and overcome such or who knows better will answer you. Below are several platforms for this purpose;

StackOverflow
Quora
Github(Github Issues)
Reddit
StackExchange and so many more.

Knowing how to google your problems will give you an edge over your peers because while they are crying and getting frustrated about their errors, you're fixing yours and helping them fix theirs. This methods have helped me a lot and I hope it helps someone too. "Tschüss"

HOW TO BLUR A BACKGROUND IMAGE IN REACT-NATIVE

Chimezie Innocent — Thu, 09 Jan 2020 11:48:04 +0000

This is quite different from my react article because even though both are Facebook technologies and bear the name react, they are not really alike. So lets go ahead and write some magics now, hope your fingertips are ready for some abracadabra.

So lets have some Views and Text but before doing that, we will first import our ImageBackground or Image from react-native like below

   import {ImageBackground, View, Text} from 'react-native';

Then lets go ahead and write the following tags and elements

   <ImageBackground source={require('your picture')}>
      <View>
     <Text> CSS Tricks </Text>

     <Text>You can style your Text and View as you deem fit</Text>
      </View>
   </ImageBackground>

Now, lets import StyleSheet and write the CSS below.

   import {ImageBackground, View, Text, StyleSheet} from 'react-native';

   const styles = StyleSheet.create({
    ImageBackground: {
        flex: 1,
        width: null,
        height: null
    },
        container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba( 0, 0, 0, 0.6 )'
    },
   }

You set the backgroundColor of your View using alpha style.That's the trick, if you use opacity on the container, both the texts will be affected.Look at the full code below

import React, { Component } from 'react';
import { View, Text, ImageBackground, StyleSheet } from 'react-native';

class Trick extends Component {
    render() {
        return (
            <ImageBackground source={require('your picture')} style={styles.ImageBackground}>
                <View style={styles.container}>
                    <Text style={styles.text}> CSS Tricks </Text>

                    <Text style={styles.text}>You can style your Text and View as you deem fit</Text>
                </View>
            </ImageBackground>
        );
    }
}

export default Trick;

const styles = StyleSheet.create({
    ImageBackground: {
        flex: 1,
        width: null,
        height: null,
    },
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba( 0, 0, 0, 0.6 )',
    },
    text: {
        color: 'white',
        fontSize: 24
    }
});

Different from React right?, hope it solves your problem. Thanks

HOW TO BLUR A BACKGROUND IMAGE IN REACT

Chimezie Innocent — Thu, 09 Jan 2020 10:20:10 +0000

The first time I tried this, I used opacity on the image but it didn’t work like I wanted, the styling made even the overlay texts to be opaque by taking the same opacity styling with the image. And so I went into finding a solution for this and after long trials, searches, Stack Overflows, I finally stumbled unto the answer and yeah it’s kind of a trick, CSS tricks actually.

Lets create a js file and inside it have two divs, and some heading tags like below



  <div className="container">

      <div>
        <h1> CSS Tricks </h1>
        <h5>
          You can now style the second div and 
          heading tags as you see fit
        </h5>
      </div>

  </div>

That would be enough for now, then we head over and create a css file and start writing the magic



  .container {
    position: relative;
    color: white;
    /*Note, you can change the color to your choice depending on your 
    image and what color blends with it*/
}

.container::after {
    content: "";
    opacity: 0.8;
    background: rgb(26, 31, 41) url("your picture") no-repeat fixed top;
    background-blend-mode: luminosity;
    /* also change the blend mode to what suits you, from darken, to other 
    many options as you deem fit*/
    background-size: cover;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    z-index: -1;
    height: 500px;
}

This is it. The little css that will suite your web image displays...Below is the full code image

Hope this article meets you well and be a solution, Thanks.

What is Git and GitHub

Chimezie Innocent — Sun, 08 Dec 2019 22:22:59 +0000

What is Git and GitHub?
GitHub is a Git repository hosting service, while Git is a command line tool. Git is a revision control system, a cloud based platform to manage your source code history while GitHub is a hosting service for Git repositories. Git is a tool you install locally in their computer while GitHub is an online service that stores code pushed to it from computers running the Git tool.
The key difference between Git and GitHub is that Git is an open-source tool developers install locally to manage source codes, while GitHub is an online service to which developers who use Git can connect with to upload or download resources.
Below is a concise summary of how to use git and GitHub, the why and benefits of using them. For the sake of this article, I will be explaining how it runs only on Ubuntu.
Before you can use git and GitHub you must first download git locally into your computer as explained in the definitions above and the way to do that is:

Download git in your terminal using the code: sudo apt-get install git
You can check your version with the command: git — version
Next, you assign a username and email to your git - git config –global user.name Vic-Orlands git config –global user.email chimezieinnocent39@gmail.com
You can check to see your configurations with the command line: git config –list

Now, you’ve done that. You can go further to create your local repository, initialize it and also keep track of your files. Don’t mind the English words, Repository is just a file location where you are storing all the files related to your project, initializing it simply means giving git access to track changes made to your projects and there it is, very easy to grasp.
Before we fast-track to using Git, you should get yourself familiar with the following command line because you will be using it a lot.

cd .. — cd with double dots stands for change directory) this returns you or takes you back to an upper directory or a previous directory. Also cd is used to enter a folder, for instance: cd Desktop takes you into the desktop directory and it can be used to log into any directory too. The syntax is “cd followed by the directory name”.
ls: to see the available files in a directory.
mkdir test: to create a new file with the name ‘test’.
touch index.html: to create a html file in a folder.
rm test: to delete a file called test. Now we are done with that, lets look at how to use git in our files locally and remotely. When you are inside a folder after opening it in your vscode or atom or any other text editor your using, input the command in your terminal: git init: this creates a new git sub-directory in the current directory. It allows git keep track of changes in your files as you work on it. git add: After that, you use ‘git add’ to tell Git to add a file to the repository. This is after you have finished coding to a certain point of your choice. Example: git add filename or git add(To add multiple files at once). After you have added the file, you can now stage a commit and leave a commit message. Commit messages serve as a reminder of the changes that were made to a file and staging is simply preparing an added file for committing: git commit -m “Added HTML and CSS files” git status: This shows you the progress of your files…It displays your files as red showing it has not been added to the staging area and shows green when you have successfully staged or added it for committing. The output of the status command will tell you if any tracked files have been modified.

git rm: To remove a file from the repository. The syntax is git rm filename
git branch -a: Lists all the local and remote branches.
What is a branch?
Branches are used for editing files without disturbing the working portions of a project. The main branch is called ‘master’ and is usually reserved for clean, working code. When making changes to your code, it’s customary to create a new branch and name it after the issue being fixed or the feature being implemented. Because Git keep tracks of file changes, you can jump from branch to branch without overwriting or interfering with other branches in the repo.
git checkout branch: This simply means moving from one branch into another so you can make necessary changes as you work. The syntax is git checkout branch-name.
A shortcut for creating a branch and switching to that branch simultaneously is to use the “-b” flag with the checkout command : git checkout -b new-branch.

git pull: Downloads all changes from the remote repo in github and merges them into your local repository. (the syntax is “git pull origin master”-origin being the remote repo and master being your local branch).
To copy every file from a remote repository to your local system, use git clone followed by the remote repo’s. Example: URL: git clone https://github.com/Vic-Orlands/myrepo.git.
Git push: This uploads your repository into the remote repository. That is, from your local computer to the repository in GitHub. The syntax is git push [remote-name] [branch-name], git push origin header.
Benefits of using Git and GitHub
The benefits are clear as it saves and aids collaboration and such but I will list a few.

Learning to work with others or Collaboration.
Documentation.
Backup or Storage and Security.
Open source contributions and Last but not least,
It is your CV as a developer. Nowadays a lot of companies especially tech companies look into your GitHub profile too and if you are not from some great university or firm, a good GitHub profile is certainly going to help you.

Collaboration is the name of the game on GitHub!