DEV Community: GABRIEL OYIKWU

INTRODUCTION

GABRIEL OYIKWU — Thu, 20 Feb 2025 09:58:54 +0000

Have you ever wanted to make use of Google Chrome on your mobile and seem to be stuck? I would solve that with a user guide that would help you navigate Google Chrome and its features on mobile. Google Chrome is one of the web browsers that you can use to surf the web. In this article, you will learn how to install it on your mobile, why you use the Chrome browser apart from the others, and how to make the best use of it.

WHAT IS GOOGLE CHROME?

Google Chrome is an open-source web browser that was developed by Google in 2008 and runs on different platforms. With Google Chrome, you can get search results that are tailored specifically to you as you type in your text. You can synchronize settings and bookmarks across all your devices. Also, you can use other Google Workspace products like Google Docs, slides, sheets, and more. Google Chrome has functionalities like the extension and you can add web store extensions like project-management tools and editors.

WHY GOOGLE CHROME?

Google Chrome is built for performance. You can optimize your experience with features like energy saver and memory saver. Browsing online is made safe using Google Chrome. Your privacy can be kept in check with intuitive settings. Chrome comes with a password manager which you can store your password safely.

Several extensions are shipped with Google Chrome that you would have access to for a better experience. You can sign in to Chrome from any device. It has several themes and you can customize it for a dark mode and other options. Chrome updates itself automatically and this comes every four weeks.

INSTALLATION

Since this is a mobile user guide, I would start by installing it on Android and then on iOS. To install on Android, follow these steps.

Go to the Google Play Store on your Android device.
Tap Enable.

Continue to begin browsing.

You can find the Chrome app on the home screen. To install Chrome on your iPhone or iPad, follow these steps.

Search for chrome on the App store.
Tap Get.
Follow the on-screen instructions to install. Enter your Apple ID Password when asked.
Tap open to start browsing. Tap Chrome to open Chrome on your home screen.

GOOGLE CHROME ALTERNATIVE (FIREFOX)

Firefox is an open-source web browser built by the Mozilla Development network. With Firefox, you can view all your tabs, recent searches, and favorite sites all in one place.

FAST AND PRIVATE

Firefox provides privacy protection and gives you great speed as the pages load. It has a feature called enhanced tracking protection that blocks those who track you online and makes your page load slowly.

PRIVATE MODE BROWSING

With just one tap, you can get to private mode on Firefox. When you exit from private mode, all your browsing history will be deleted.

EASY SEARCH

Whether you are using a smaller phone or a bigger one, the search bar is brought down to the bottom so that you can access it while surfing the web with one hand.

DARK MODE POWER SAVER

You can switch to dark mode to reduce the straining of your eyes and also save your battery.

ENHANCED FUNCTIONALITY WITH ADD-ONS

Add-ons are extra functionalities that can be added to your browser to carry out advanced tasks like increasing default privacy settings and customizing your experience.

HOW TO USE GOOGLE CHROME EFFECTIVELY

I will be sharing some tips on how to use Google Chrome better.

How to Set Chrome as your default web browser
Open settings on your Android device.

Tap Apps

Tap the ‘’default” apps under Apps Management.

Tap the browser app.

How to browse in incognito mode

Open Chrome on your Android phone.
To the right of the address bar, tap more to open a new incognito tab.

In the left-left corner of the new window that comes up, select the ‘new incognito tab’.
Note: you can only browse in private when you’re using incognito mode.

How to Delete your browsing data.

Open Chrome.
Go to settings, and select Privacy and Security.

Tap Clear data.

Choose a time range like last hour or All time.

Browsing data has been cleared.

How to Turn on Dark Mode

At the top right-hand corner, tap more, and go to setting, then select Theme.

Select the dark theme out of these options.

System default
Dark
Light

CONCLUSION

So far, you have learned about the features of Google Chrome, how to use it, and why it should be your go-to browser. Also, you were able to see a good alternative to Google Chrome.

How I built a personal expense tracker using Reactjs

GABRIEL OYIKWU — Wed, 19 Feb 2025 13:40:26 +0000

Introduction

I started learning a JavaScript framework called Reactjs, and I was able to build a personal finance app using It. The app is to manage your personal income and expenditure and it would have functionalities like adding total income, adding expenses, deleting expenses, and editing expenses like every other CRUD app. I would like to acknowledge @alexandersstudi, who created the UI design in the Figma community that I used.

This is a live demo of the web application https://gabyie-personal-finance.netlify.app/.

I made use of the UseState hook and react-redux toolkit for state management. I used react-router for routing from one page to another. I used Styled components for styling.

Here is the file structure.

Prerequisites

HTML
CSS
JavaScript
Reactjs

I created a functional component with a regular JavaScript function and then exported the default, specifying that the App is the main component. It holds the two pages the web app comprises since it is a two-page application. I used the import keyword to import the Dashboard page and also the Homepage.

Since I am using the styled component library to style the application, I imported it also to set global styles to all the pages, such that any style I add here would be applied to every other page. React app does not come with page routing – it’s what organizes and manages how users navigate through your web application.

I ran this command on your terminal to install React Router to your application.

npm install react-router-dom.

Then, I imported the react-router to the app.js functional component. I wrapped my entire app.js functional component with the Routes and added individual routes for the homepage and Dashboard page. I started creating the homepage with a functional component named Homepage.

The homepage returns an empty wrapper <>...</> nested with a Main component – this begins with a capital letter to signify that it is a React component different from an HTML element which starts with a small letter. It is the container of the Homepage. Nested in it is the ImageContainer component which renders an image.

The next component is a Form component with a level one heading and three inputs with a button. To manage the changes that would occur as the user interacts with the form, I used the UseState hook to manage state change.

First, I set the input that receives the income that is inserted through the form. The HandleNameChange is an event listener that updates the income state. The next state is to set the input to receive the name of the user through the form and it is handled in the handleSubmit event listener which is attached to the form.

Inside the form, I used an if statement to conditionally render the form, such that if there’s no value inserted into the input it does nothing but if it has a value, then, you use the dispatch method to update the state, and the navigate method to route to the dashboard page. Also, I used the guard clause to validate the username input. If one doesn’t input the username, goals, or income, then the form will not be submitted. For the income input, the isNaN method is used to check if someone inputs a value for the income and it is not a number, it won’t be received by the form.

I added a state variable named goals and SetGoals to the component to handle the state for goals. The handleGoalChange event listener updates the goal state once it receives input and then updates the change when it re-renders. Also, inside the handleSubmit event listener, there is an if statement that updates the change using the dispatch method once a value is inserted into the input and displayed the new record is received. Also, the navigate method is used for routing to the dashboard page.

USING REDUX TOOLKIT FOR STATE MANAGEMENT

After installing the Redux toolkit using the appropriate command, I added a new file called store.js and imported the configureStore API from the Redux toolkit to create a store.

To connect the store to the application, I made use of the Provider component from the redux toolkit.

I imported the Provider component from the redux toolkit and the redux store in the main.jsx file. Next, I wrapped the App and Browser Router from the react-router library with the Provider function and passed the store as a prop. This makes all the components in the App have access to the redux store.

Here, I created a slice for the income which contains reducers and actions to update the income.

I created a slice for updating the state of the goals data inserted in the input. This contains reducers and actions.

I created a slice for updating the amount inserted in the input. This also contains reducers and actions.

Next, I created a slice for updating the state when someone inputs the data from the form on the modal window, the description of the expenses is displayed on the screen with the addExpense action. The removeExpense action is to delete the expenses when the delete button is clicked. Then the editItem is for editing the form from the description, to change its values and re-update what was initially selected.

I made use of styled components for styling. Styled components let you remove the mapping between components and styles, as such you create a normal React component that has styles attached to it.

This is the Dashboard page which is created by making a Dashboard component. It starts with the main component, the wrapper for the Dashboard component, and nested in it is the Navbar component, a flex parent with two children: NavLeft and NavRight.

NavLeft has a click event handler that takes you to the home page when you click on the logo. The Nav Right has routing that takes you from the homepage to the dashboard page. There is also a click event handler that reveals a modal window once the button is clicked.

I created a select element that you can select from different options for your expenses. Then below it, you have a cart and a layout for a description of your various expenses in detail.

Here’s an event handler to close the modal window.

Here, I made use of two hooks, first the useNavigate to programmatically navigate to the homepage and the useState hook to manage the change in state of the income and the amount values. I added a progress bar to show the percentage of money spent from the total capital.

I added an event handler – handleGoBack to close the show modal window.

I made use of the useSelector hook to reference the change in state as the user inputs the value for goals.

CONCLUSION

This side project was an engaging one and I was able to learn how to create components with React to manage state using redux-toolkit, and incorporate other libraries into the project. It was a good experience for learning and would love to keep doing more of these in the coming days. I would like to know your thoughts.

How to create a Shopify Onboarding UI

GABRIEL OYIKWU — Mon, 23 Dec 2024 10:39:35 +0000

Introduction

I have been learning about Front-end development and was privileged to join a hackathon. The task was to build a Shopify onboarding dashboard for online stores using HTML, CSS, and JavaScript. I will explain how I set it up and the steps I took to build it.

It was a perfect challenge to showcase my skills; one can only show proof of knowledge in web development after building something. Frantz Kati, a full-stack software engineer and educator, organized this hackathon.

Here is the final app [https://oyiks.github.io/Shopify_clone/].

Prerequisites

For you to build a Shopify onboarding dashboard like this, you would have an understanding of the following:

HTML
CSS
JavaScript.

This is the file structure.

HTML Structure

Here, I added the font as seen in the UI design to the head of the HTML document and linked the CSS file to the HTML.

The navigation starts here with a nav element, the navigation's container. I added a div nested in the nav element so I can add responsive images using the picture element and make the image a link that you can click to go to another page.

Next, I added a div container with a class of search and an input which is a flex child of the nav element.

The next in the navigation bar is a div container with the class btn, and a button with a bell icon. The three attributes on the button are used for accessibility; aria-has-popup indicates an element triggers a popup; aria-expanded indicates the current state of an element; aria-controls specifies the ID of the element.

Next, you have an unordered list which is used for accessibility, with a class of menu-active and ID of profile-menu-content; aria-labelledby attribute for the screen reader to associate the profile-menu with the unordered list; role=”menu” is used to indicate the menu since Ul element is non-semantic in this situation.

Here is the dropdown menu for the button with the bell icon. You have a div container with a class of menu-icon which wraps the dropdown with three list items. The first two are images and the last is an inner container with text.

The next button is wrapped in a div container with a class menu-wrapper and the button has a class of profile-trigger for styling and other attributes for accessibility. Embedded in the button is a placeholder image.

Another dropdown menu begins. There is a div with a list container and an image with text named All Stores inside it, along with a horizontal line.

Next, you have 4 four list elements that nest a paragraph with text in it.

To create a card component, I added a div container with the class advert advert-active. I added another div nested in the div container with the class advert-message which would be one of the flex children. Then, the next flex child is a div container which is the parent of a button element and a cancel icon for closing the card component.

To create an accordion, I added a div, the parent container with a class of accordion-container. Next, I added two divs nested in the accordion container div that would be flex children. Then, I added a div that would carry some text in the header of the accordion.

Next is the progress bar which is given an attribute of max=”100” and value=”0” to show the maximum is 100 and starts at 0.

Now, I want to build the collapsible section. All collapsible have a div container with an image and text.

CSS Styling

I added the fonts needed to the body and gave it a background color of “#b5b5b5”.

I gave the nav container a display flex and a space between it. I also added a background color the same as the design and aligned the items to be the same vertical height.

The progress bar has a width of 72px and a height of 10px, a margin-left of 10px for space at the left-hand side. The accent color is the color that fills the progress bar which is black in this case.

The accordion container is the div container that wraps the accordion. It’s given a border radius on all four sides and a background color of white and is made wide with 888px.

The accordion menu class is the div container with all the collapsible elements. It’s given a display flex so that all the elements stay on the same line and space with all the items aligned at the center.

This is the styling for devices below 480px. A little bit of adjustment to the nav container, reducing the gap, padding, and height.

JavaScript Code

For the functionality with JavaScript, a function is created as shown below.

Inside the ShowMenuComponent function, the button with the bell icon with a class of Alert Trigger is selected and stored as a reference to the MenuTrigger variable. Also, the dropdown menu which is an Ul element with an ID of profile-menu-content is selected and stored as a reference to the menu variable.

Next, I added a click event handler MenuTrigger so that the dropdown menu is shown when the button with the bell icon is triggered. The button with the bell icon has an attribute aria-expanded that is set to true and stored in the variable isExpanded. Menu.classList.toggles adds the class menu-active which makes the dropdown menu active.

All the lists in the dropdown menu are selected and stored as a reference to the variable allMenuItems. Now, there is a conditional statement, if the button with the bell icon is clicked, the aria-expanded attribute is set to false and focused, else it is set to true and the AllMenuItems is focused detecting to assistive technology that the dropdown menu has collapsed and brought back to default. Lastly, you call the function using ShowMenuComponent();.

Next, another function is created to expand the dropdown menu after the second button is clicked. The button with the class profile-trigger is selected and stored as a reference to the variable MenuTrigger. Also, the ID's profile menu is selected and stored as a reference to the variable menu.

A click-event listener is added which toggles the dropdown menu whenever the second button is clicked. Lastly, the function is called using showDropdownMenu();.

Another function is created to toggle the advert component on and off. The cancel-icon class is selected which is an image that behaves like a button and is stored as a reference to the variable AdvertTrigger. Also, the advert class of the advert component div container is selected and stored as a reference to the variable menu.

A click event listener is added to toggle the advert menu component when the cancel icon is clicked. Finally, the function is called using AdvertMenuComponent();.

Another functionality was created to collapse the accordion and expand it. The div container with a class of loading texts for the accordion child elements was selected and reference was stored in the variable AccordionTrigger.

A for loop was created to run through the five accordion child elements with a click event listener inserted inside the loop. Once any of the child elements is clicked, it is displayed, else it stays unexpanded by default. DisplayAccordion(); is used to call the function.

Conclusion

You have come a long way in getting into my head to understand the steps I took in building this Shopify onboarding UI. It was good for me because I had to practically make use of those syntaxes I had been watching from tutorials. This proves to me that building things is really the way to learn, but far better is writing about what you built.

Next, I would write on a budget tracker I built using Reactjs, a framework on JavaScript. Let me know your thoughts.