DEV Community: HARITH O ONIGEMO

2022 - Year in Review

HARITH O ONIGEMO — Sun, 08 Jan 2023 10:37:53 +0000

Fireworks, interesting fact: In some cultures, fireworks scare away evil spirits and symbolise good luck in the coming of a new year. I love the excitement it brings and the silent moments of reflection when watching the beautiful fireworks show. The atmosphere is a quick reminder that change will always be a constant for as long as we live.

I've always started my year by reflecting on my previous year, highlighting my achievements, weaknesses, and things I could have done better in the past year. I've always been big on being better than I was yesterday; this tradition has always helped.

The challenge in writing Year-in-reviews is finding a great way to start describing yourself and how your year went. I'm going to dump it on here one way or the other. Enough said, "Ladies and Gentlemen, my 2022, in no particular order; enjoy!

The grind

At the beginning of 2022, I remember making a video stating all my goals for the year. Although it was constantly cringing, watching that video was insightful, and I had fun shooting.
The grind has been challenging. In 2022, I needed to propel my career, so I listed a couple of goals for myself. Some of them are:

Learn Vue.js since I already knew React.js
Learn React Native for Mobile Development
Get a paid job or internship
Launch a new portfolio
Learn a backend framework
Shoot more YouTube Videos
Qualify for the Student Learning Assistant (SLA) role at school.

Fast forward a year, and I worked nine months as a Software Engineer Intern at Acumen Digital, building four major projects using Vue and Nuxt.js.

I started learning React Native but pivoted to Flutter after my friends showed me the light ;D

I became the Frontend and Flutter lead at my school's Google Developer Student Club. I gave a seminar on how to get started with Flutter in front of the GDSC Community and some of my lecturers.

I got a contract job as a flutter dev for a startup in Dubai. The startup folded, but I learned a lot, and it was a fantastic opportunity to develop my career.

I got nominated and awarded the SLA role. SLAs are top students the university pays to assist lecturers in junior classes. Since I switched schools, I've always wanted the position, worked hard for it, and got it. It was my best accomplishment this year.

Although I achieved a lot, there were some goals I still needed to complete. I couldn't launch my new portfolio, I needed to learn a new backend framework, and my YouTube channel stayed strong with only five videos. I did not complete these goals because I was lazy and mismanaged my time. This year, I plan on being more intentional with the grind by managing my time more efficiently and breaking down goals into smaller pieces, which I enjoy.

Fitness

My fitness journey started in 2021. One day, I went to the beach, and my beach body was not beach-bodying. I was not too fond of that feeling and promised not to feel that way again.

Going to the gym has impacted my life positively; there's a level of mindset and discipline it takes to be consistent at the gym. There's also a boost in self-confidence and self-love. I developed self-discipline, which I applied to other aspects of my life. Aside from the psychological advantages of going to the gym, the physical elements are also worthwhile. Whenever I look in a mirror, there's this sense of approval, and no feeling is better, trust me. If you've been looking for a sign to start hitting the gym, here's one:

Also, after countless months, the abs are finally abingg. I'm proud of the hard work I put into myself these past couple of years. I plan to continue the momentum and keep breaking barriers in my body.

Relationships

I had the chance to meet many amazing people in 2022, talented individuals from work, hardworking people from school, and warm and beautiful souls in my community.

Friends bring colour to your life; I'm fortunate to be surrounded by friends who care for and respect me. Friends who talk sense into me when I start derailing, people to share the good and bad times, enjoying life and learning lessons. What a blessing, Al-hamdu lillah.

Here are a couple of lessons I learned about relationships in 2022:

Your inner circle affects your personality vastly, be choosy when picking them.
In every relationship, prioritise your heart. There's no such thing as a perfect relationship because there are no perfect people.
It's important to acknowledge that there's a difference between love and compatibility. You can love each other but are not compatible. You deserve to be with someone who harmonises with your personality.

Faith

Al-hamdu lillah, Al-hamdu lillah, Al-hamdu lillahi Rabil'alamin.

I could not have been able to write this article if not for the grace of Almighty Allah. Everything that happened this past year is because he has destined it. Ma Sha Allah

I got closer to Allah this year, I derailed, but he brought me closer, Al-hamdu lillahi. The constant battle between deen and Dunya weighs heavy on my head, but I have faith Allah will make it easy for me. I'm not perfect, but In Sha Allah, I will continue to get closer to him.

Goals for 2023

I'd only end this article if I specified my goals for the new year; that's the whole point of writing this article. 🙃

Possibly, by the grace of God, I hope to achieve the following:

Launch my new portfolio (It's almost ready, I promise 😭)
Learn a backend framework
Shoot more videos on my YouTube channel
Get a well-paying job
Publish an app to the Play/App store
Get my driver's license
Build most of the projects I've had planned with my best friend for a while. (Shout out to Sydney :)
Continue to hit the gym.
Properly manage that online business
Explore my Athletic side, possibly try sprinting again.
Continue to excel at school. (In Sha Allah)

There are a couple more I didn't list. Anyways, this way, I have an idea of how I want my 2023 to look, and I'm satisfied.

Conclusion

2022 taught me a lot. I achieved almost all my goals, met some fantastic people, and better understood myself. It's been a crazy year full of wins and losses, but we thank God, and we move. After writing this article, I think 2023 will be a better year.

If you've reached this far, you like me enough, or my year-in-review engaged you. Either way, thank you. You made publishing this article worthwhile.

Crazy how I did not know how to start this article. I feel so relieved. 😂

That's all, folks! See you all next time I have content for the interweb. 🤓

Building a SPA using Vue-Router

HARITH O ONIGEMO — Thu, 19 May 2022 17:06:20 +0000

Nowadays, more developers adopt the Single Page Application (SPA) architecture for their web applications or static site. This article will talk about the various merits and demerits of SPAs and build one using the Vue JS Library.

What is a SPA?

According to the MDN Web Docs, single Page Applications (SPA) allow users to use websites without loading new pages during navigation. SPAs utilise Client-Side Routing instead of Server Side Routing, which websites traditionally use.

In Server-Side routing, when a user visits a new page, the browser sends a request to the server, asking for the required files to load the page. The server grants the request, and the browser downloads the views and scripts for that page. This process repeats every time the user wants to navigate to other pages within the website.

In Client-Side Routing, when the user visits the website for the first time, the server provides the browser with an index.html file which comes with a bundled script of the entire website. All the necessary HTML, CSS and JavaScript codes are retrieved with a single page load. All the required resources are dynamically retrieved and added to the page. In Vue, when navigation happens, Vue uses Vue-router to check for the differences in the DOM and renders them on the page.

Pros & Cons

Let’s have a look on the pros and cons of the SPA approach

Pros

It is highly reactive
Less load on the server
Better User Experience
Better client-server interaction, the dividing of front-end’s and back-end’s concerns

Cons

SEO is challenging
JavaScript is strictly required
Performance on client side

Alright, enough chit-chat on SPA. Let’s get to the exciting stuff, building SPAs using Vue and Vue-router.

Tools

There are different ways of adding vue-router to a vue project. In this article, we will be using a tool called vue-cli.

Vue-cli

For a new project, vue-CLI would work perfectly. With Vue-cli, we can start our project with one of Vue's many open-source templates, and we can also choose to create our template.

First, we’ll need to install it using

npm install -g vue-cli

Let’s create a new application called spa-app using

vue create spa-app

Then you will be asked to select a preset, use the arrow keys to navigate to Manually select features and press enter

Afterwards, you will be asked to select features needed for your project, use the arrow keys to navigate to Router, press space to select and press enter to proceed.

You will then be asked to choose a version of Vue.js to start the project. We will be using Vue 3, so press enter to proceed.

We won’t use history mode in this article, but just press enter to proceed with it.

We will go with the default options for the linter, so press enter to proceed.

Press enter to select lint on save and proceed.

We will choose the default here also. Press enter to proceed.

If you choose to save these settings as a preset for future purposes, you can by pressing enter and following the steps, but I will not be doing that, so I will type n and press enter.

Vue-Cli will then help us create our project using the required features selected, Initialize a local git repository and install a CLI plugin.

Once Vue-Cli is done creating the application, change the directory to the developed app and run the app by typing

cd spa-app
npm run serve

You should see a page like this on your localhost server.

If you click on the about link, it will take you to the about page without a browser reload.

How does this work? Let us find out. On your code editor, navigate to the src > main.js file. This file is the webpack entry point. The App.vue component, the parent component for all other components, is imported there.

In the src > App.vue file, you will notice a couple of components.

The router-link component serves as an anchor tag to help navigate the user.

The router-view component is a functional component that renders the matched component for the given path.

We know how vue displays links on the page, but configuring Vue-router to our settings is still challenging. Let’s dive deeper into the code.

If you navigate to src > router directory, we will find an index.js file.

The file contains all the logic for telling vue what component to render to the screen with a particular path. If you look closely, we are importing the createRouter and createWebHistory hooks from vue.

The createRouter hook creates a Router instance that the Vue app can use. You pass in all the routes for the website in an array.

The createWebHistory hook is also imported because we chose to use histories with the router during installation. This hook creates an HTML5 history.

If you want to add a new page, you can create a new view in the src > views directory, import it into the src > router > index.js file, add the route as an object in the array, and state the component in the component key-value pair.

Afterwards, you can use the router-link component in any other component to link to that component. Since we are adding a contact view component, you can add a link to your contact page in your App.vue file.

Congratulations, you have created a Single Page Application using Vue-Cli and Vue-router.

Conclusion

In this article, we learnt about SPAs, the difference between Server-Side and Client-Side routing, and the Pros and Cons of SPAs. We also learned how to build a SPA with Vue CLI and Vue-router and configure routing with the vue-router. Thanks for reading through if you made it this far, I hope you learned something valuable today.

Setting up your First React Native Application

HARITH O ONIGEMO — Sat, 26 Feb 2022 17:23:22 +0000

React Native is a Javascript framework which uses the full power of react and Javascript to make amazing Native applications. React Native compiles Javascript code to Native code, so components like Text, Button, View e.t.c which are used in React Native will be compiled to the Native code of each platform (Android or IOS) .

There are two ways of building React Native applications, The easy way using Expo or the React Native CLI way. This article will concentrate on building React Native applications using Expo.

Expo is a framework or platform which assists us to build, deploy and view our application on android, IOS or Web from the same Javascript/Typescript codebase. it works for universal React applications.

Alright, enough chit-chat, let's get started with setting our React Native Application. You'll need the following Prerequisites to start.

[ ] Node.Js Installed (install it via here)
[ ] Code Editor (Preferably VS code)
[ ] Internet connection
[ ] A can-do attitude

After checking each of these off, let's get started.

Step 1

Open your project directory on VS Code and install the Expo CLI by typing in your terminal:

npm install --global expo-cli

Step 2

Create a new expo project, let's call it first-rn

expo init first-rn

Step 3

install Expo on your phone via the play store/ app store.

Step 4

Once the expo project has been created type in the following to launch the application

// Change directory
cd first-rn

// Start the application 
npm start

Step 5

After installing the expo app on your phone and after the expo app has launched, you'll see a barcode, scan the barcode with your phone camera.

Note: On IOS you'll have to use the barcode scanner that comes with the expo app.

You should see something like this on your phone if you’ve followed each step successfully.

Congratulations!! You are done, you’ve successfully set up your React Native application. Now, go on ahead and make the next big thing, I can’t wait to see what you build. 😊