DEV Community: Favourite Jome

Overcoming Challenges When Moving from Create React App (CRA) to Vite: Debugging Tips

Favourite Jome — Wed, 08 Mar 2023 18:20:50 +0000

At my work, we have a reasonably large codebase using Create React App (CRA) and the codebase started feeling slow, starting up the server took forever, and hot module reload took forever to reflect changes on the browser also, so at that point, I knew I had to move to the Next Generation Frontend Tooling - Vite 🔥

In this article, I'll go over the 5 challenges I encountered in migrating and updating dependencies, how I fixed them, and some Vite-specific things that just had to be done.

Please note that this article is centred on the libraries which my work codebase uses, so it might not cover all possible errors, you might encounter will migrating from CRA to Vite. Some of the libraries mentioned in the article and used in the codebase are:

Context before Successfully Migrating to Vite

Before I successfully migrated from CRA to Vite, I had failed in the past and given up because of the pill of errors I encountered. The way started the process of migrating was by finding articles about the migration process and following them, step by step, yet I ended up with errors the articles didn't account for.

So I decided to go with the divide-and-conquer approach (without recursion 😏), by initializing a Vite project from scratch and setting up the project gradually, while adding new necessary files from the CRA codebase to the Vite codebase.

Essentially, I had two branches managed by git, one for the codebase with CRA and another with Vite. The Vite branch was pulled from the CRA branch but then all the files were deleted to initialise the Vite application.

There might have been a better way for this process, but that's what I did, and it's tedious but it works 🤧

Challenges and Errors I encountered

1. The JSX syntax extension is not currently enabled

The very first error I encountered was: The JSX syntax extension is not currently enabled which means that if you have a file that has a React component that returns JSX, then the file extension should be .jsx and not .js.

Here's how the error shows on the terminal:

All the files in the codebase were using .js as the file extension and now Vite was saying I have to move 50+ files to .jsx 🤯.

Evan You, the creator of Vite, gave a good reason why .jsx extension should be used with files that return JSX. The response from Evan You was mentioned in the issue: Add an option to transpile .js file with esbuild Issue #769.

Solution

The way I overcame this challenge was by using a tool called PowerToys created by Microsoft. It comes with a feature named PowerRename, which allowed me to rename multiple file extensions at the same time quickly. So I renamed all the file extensions from .js to .jsx provided the file contains some form of JSX being returned.

Visit here to learn about the feature PowerRename offers: PowerToys PowerRename utility for Windows | Microsoft Learn

2. Upgrading dependencies in the codebase

Since I was already making a large change to the codebase, by migrating from CRA to Vite, I thought to myself, why not update all the dependencies to the latest and greatest version?

Honestly, I don't know who sent me to do this, cause it ended up being a terrible experience 🤣

One of the dependencies that had lots of breaking changes was Material UI now called MUI. Before upgrading, Material UI v4.11.2 was used in the codebase along with some of its peer dependencies like Material Icons around similar versions.

Upgrading to MUI v5 introduced a lot of changes, to where components were imported from, all the packages' import names were changed from @material-ui/* to @mui/* and many more changes.

I mean, just look at this mess MUI put me through 😅

Other dependencies had some changes too, which I had to implement due to the upgrade, but none was as stressful as MUI, hence, I'm only mentioning MUI in this section.

Another problem that came with upgrading Material UI was changes to where components are imported from. For example, the Button component in Material UI v4 is imported from @material-ui/core/ while MUI v5 is from @mui/material/. So I had to be aware, that not only the prefix @material-ui/ was changed but also

Material UI v4 example for the Button component:

import Button from '@material-ui/core/Button';
// ----------------- OR -------------------- //
import { Button } from '@material-ui/core';

MUI v5 example for the Button component:

import Button from '@mui/material/Button';
// ----------------- OR -------------------- //
import { Button } from '@mui/material';

So how did I overcome the changes that MUI brought?

I failed to upgrade from React 17 to 18 in my work codebase because I wasn't ready for the stress, especially now that components are rendered twice and I might need to change the architecture of how useEffect is used 😏.

Maybe I'll do this later in the future... 😤

Solution

There was no way I could go over 500+ files that depended on Material UI and change them to the new MUI structure manually. To overcome this challenge, I relied on VS Code Search and Replace feature.

From the image below, you'll see that 601 files had the word @material-ui/ , which needed to be replaced with @mui/. Luckily for me VS Code did the replacement in a bliss.

Using the Search and Replace feature in VS Code, I was able to quickly make global fixes on the codebase.

Reading the documentation for the dependencies I upgrade was a huge help, like documentation of MUI has a migration step, so I was aware of the breaking changes, which can be found here: Migrating to v5: getting started - Material UI (mui.com ).

3. Error: Minified React error

The error Minified React error was caused by the library react-phone-input-2 used in the codebase. This error was also one that gave me a tough time, to figure out, cause it worked fine on the development server but shows the error on production.

The root of the error, explained by sodatea is that many packages follow a bad practice that breaks Rollup ESM-CJS interop.

Truthfully, I don't know enough about how Vite works with Rollup, and how libraries are made, so I'll direct you to the root of this error, explained by sodatea here https://github.com/vitejs/vite/issues/2139#issuecomment-1024852072

Fortunately, the discussion about the problem on the Vite repository led me to discover a solution.

Solution

Before I mention the solution, here's the issue raised for the error on the Vite repository: Encountered Minified React error in the production environment

It has 71 participants contributing to the discussion and still the issue isn't closed, so it seems there are still some libraries that may cause the error.

The solution to this problem was to check if the imported component has the property default if it has the property default, then the default component should be used otherwise the component should be used.

Here's a snippet to check for default components in the react-phone-input-2 library and the solution to my problem.

import RPI from "react-phone-input-2"; 

const ReactPhoneInput = RPI.default ? RPI.default : RPI;

Thanks to Kylar13 for his comment, I was able to detect that it was the react-phone-input-2 library that was giving me the error, but then from the issue discussions, I could have other libraries installed that could have the same problem.

So I needed a permanent fix, luckily after going through the 80+ comments on the issue I found a permanent fix posted by Boni0.

Here's the full discussion by Boni0: https://github.com/vitejs/vite/issues/2139#issuecomment-1399098579

But here's the solution I ended up using in my codebase, which works fine now.

4. Uncaught ReferenceError: makeStyles_default is not defined

This is one of that errors that can make one cry and regret migrating to Vite 😅. Why do I say this? (assume you heard me ask the question 😄) Because the error is unpredictable and comes and goes while blocking you from doing anything in development. Also, the error comes in different forms, it could be Uncaught ReferenceError: Box_default is not defined.

I guess the issue is with MUI, not working properly with ESM or something like that, though I found a solution that works, I can't say the root of the problem.

Solution

Remember I mentioned the error is unpredictable, so take this solution with a grain of salt, cause I don't know why the issue comes up.

From the issue - Exported variable in chunk is not defined Issue #1853, I found out it's better to use named import while importing components from MUI.

So use this:

import { Box } from '@mui/material';

Instead of:

import Box from '@mui/material/Box';

Also, from the issue, it was mentioned to add esm as the suffix to the package MUI.

So I did this on my end, in the vite.config.js file:

5. Uncaught TypeError: styled_default is not a function

This error is also one that's unpredictable and is caused by MUI. I've encountered this error more than once, and I haven't found a permanent fix for it, I just hope I wouldn't see it again.

The error doesn't allow me to make changes on development, so all I saw on the browser is a blank white screen, hence I had to fix it.

At the point of writing this article, I still got this error and here's a comment I made on the issue - Popper.js:9 Uncaught TypeError: styled_default is not a function

Proposed Solution

From the issue mentioned above, the solution which works most time is to delete the node_modules folder and reinstall all your dependencies.

Another solution that worked for someone is to use @vitejs/plugin-react-swc instead of @vitejs/plugin-react.

I have tried all the proposed solutions on the issue - Popper.js:9 Uncaught TypeError: styled_default is not a function, must times it works, while sometimes it doesn't. I'll leave it at that, though currently, I don't get the error.

Conclusion

Do I regret migrating from Create-React-App to Vite? No, maybe a little, Yes, cause I have to go through lots of issues to figure things out.

Was there an improvement in server startup time, installing dependencies, and production build? Yessss, Vite is so fast. Blazingly fast 🔥.

So I cloned the legacy codebase, the one using Create-React-App, installed the dependencies and started the server. It took 5 min, and 34 sec for the server to startup and reflect on the browser 😫.

The above test was done when I was starting the server for the first time, the second time I started the server, it took 1 min and 33 secs which is fairly okay I guess. But Vite took 35 secs for the browser to show the webpage fully loaded though it wasn't the first time I had started the server.

Would I ever use MUI for any reason in the future? Definitely, NO. If not that it would be a tug of war to remove MUI from my work codebase, I would have removed it.

With all of this, I leave with this, if you're migrating from CRA to Vite, and you're using MUI in your codebase, just know you're in for soup 🤣.

If you found this article helpful in a way, do like, share and follow me for more articles. Also, if you have a simpler approach or solution to solve the issues I mentioned in the article, please drop them in the comment, I'll love to see them.

I'll make sure to keep this article updated if I encounter more errors or bugs due to the migration.

Thanks for reading!

4 Features in VSCode I use to speed up my Workflow

Favourite Jome — Sat, 18 Feb 2023 05:32:46 +0000

Visual Studio Code (VS Code) is my favourite code editor, even though I haven't tried all the possible code editors out there, I can say VS Code is my best 😊. In this article, we'll go over 4 features this great editor has, which make it just right, to speed up productivity and a lifesaver at best.

1. Searching Capabilities

The search feature is just amazing in VS Code and there are several modes of searching too, we could search for files, symbols (which means variable names, function names and so on), references, etc. but let's go over the 3 search features I mostly make use of.

1a) Command Palette (Ctrl+Shift+P)

The Command Palette allows you to have all the functionalities of VS Code in one place. Functionalities such as all GIT commands (like push, pull, etc.), reloading the window, and so on can be accessed from the command palette, but that's not all.

The command palette gives room for many commands, but let's go over just one, which allows us to navigate the various files in the codebase, by their file names or symbols. To work with the navigating feature, the command is Ctrl + P.

And when the command Ctrl + P is typed, the interface appears like the image below, and of course, shows your files in your codebase, allowing you to jump through files quickly.

Bonus trick, you could press the command Ctrl + P multiple times, to navigate down through the files showing on the command palette. In the case of the image above, if Ctrl + P is typed again, the file ChartTiles.jsx will be selected. Then to up the files, you can make use of Ctrl + Shift + P provided, you were on the navigating palette.

To view all other amazing commands you have access to using the command palette, please visit Visual Studio Code User Interface

1b) Search on Activity Bar (Ctrl + Shift + F)

The Search on the Activity Bar is pretty powerful, as well, it allows you to search and replace words across the codebase. So if you're looking for every occurrence of some symbol or string for example "@mui/material" in the codebase, you could just search for it.

This search feature is even more powerful especially when you want to find something really specific, like every occurrence of the symbol or variable name for example getNames.

From the image below, you can see the word GETNAME is searched and it's capitalised, yet the result isn't case-sensitive.

To make it case-sensitive or in any other case, search accurately to what is actually being searched for, that's where the three options provided come into play, which are Match Case (Alt + C), Match Whole Word (Alt + W), Use Regular Expression (Alt + R).

From the example above, we care about the case, so we can select Match Case (Alt + C) to be precise.

If by chance, you don't what's the Activity Bar, please visit here: Activity Bar | Visual Studio Code Extension API

1c) Search by Reference (Shift + F12)

The search by reference or as named in VS Code, Go to Reference comes in handy when you want to quickly just see all occurrences of symbols or words across your codebase or the current file opened.

For example, let's say you've made use of the useState hook from React, in multiple places in a file and you, want to jump over to every reference of the hook in your file. While the hook, useState is selected, you could either right-click on the word and select Go to Reference or use the shortcut Shift + F12. Doing so you get something similar to the image below:

The file currently opened is named IncomeModal.jsx so that is why it shows on the left-hand side of the pop-up, but take note of the other file there, the index.d.ts file which is in the node_modules directory. The index.d.ts file shows because the useState hook is coming from the definition in the index.d.ts file.

Quick note, in my use case, I don't care about the index.d.ts file and I don't know how it really works😅 but I think there's a reference to the index.d.ts file. All I care about is jumping around where I have the useState hook in my current file.

Now, there's another cool feature with the Search by Reference worth mentioning that brings the power of reference. Let's go over another use case.

For example, let's say you've made a custom hook in React or you're using some library that has its custom hook and you want to search for every reference to the custom hook. Then again, using the shortcut Shift + F12 you can see every reference of the hook and in most cases, if used in multiple files you'll see that too.

From the image, below, I made a search by reference for the useTranslation hook, and it's being referenced in 213 files.

The Search by Reference feature is kinda similar to the Search on the Activity bar, but then they are very different, so you can choose which to use.

2. Rename Symbols (F2)

Rename Symbols is just mind-blowing 🤯 (I might be overemphasising but it's a cool feature). This feature allows you to rename a symbol (again which could be a file name, function name, variable name, etc) across multiple files. So you can rename a variable name and be certain that all references to that variable name will be changed as well.

For example, on a file, let's rename the state name of the useState hook to something else. In the image below, I'm renaming the state revenueDate to revenueDatee, now everywhere where revenueDate was used will be changed to revenueDatee.

Quick note, to see all the occurrences of the state changing, type Shift + Enter , which opens the Refactor Preview and shows what would be removed and replaced. If you're happy with it, click Apply else Discard.

3. Source Control with Git (Ctrl + Shift + G)

The Souce Control in VS Code allows the ease of just clicking on some buttons and all your GIT operations will be done for you without writing a single command. The Souce Control view can be accessed on the Activity bar, or with the shortcut Ctrl + Shift + G.

I wrote an article about source control in VS Code: VS Code Version Control: Understanding the basics of Git operations # 1 , you can read it to know how it works.

Also, please the VS Code docs are extremely helpful, here's all the Source Control with Git in Visual Studio Code.

4. Multiple selections (multi-cursor)

Multiple selection is a feature that allows you to place your cursor in multiple locations on a file, and then give room for editing where the cursor has been placed. The most common way of using this feature is when you have similar text all around a file, and you'll like to change the text to something else.

Looking at the image below, you'll see the text 200 is changed to 120 at the same time.

The above image is from VS Code docs

There are different commands in VS Code that'll aid you to make sure of the Multiple selection feature, but the most common command, at least the one I use often is Ctrl + D , which selects the next occurrence of some text or symbol selected, and adds multiple cursors.

There are other commands that could multi-select in a different scenario, mostly when the texts aren't similar, but please go through the docs to find out more.

Conclusion

There are several other features in VS Code not covered in this article and it will be an endless article if we were to go over all of them. So, I'll advise you to go through VS Code documentation more frequently or at least subscribe to their YouTube Channel, their shorts are very helpful.

Hopefully, you've learnt a new feature in VS Code, and if you already make use of all these features, you're a PRO 😅. By the way, if you know of any feature that helps you a lot while coding, please drop it in the comments.

Thanks for reading and see you in the next article!

Let's build a Calculator App (React Native)

Favourite Jome — Thu, 19 Jan 2023 00:42:22 +0000

Welcome back to the Let's build Something Cool series, where we build cool things, at least from my perspective 😊, but really it's a series where we go in-depth about the cool things I build, but then we get to build it together.

In this article, we'll build a Calculator application similar to Samsung's calculator app, and use Expo, a framework that allows us to get started with React Native applications quickly.

There are a bunch of requirements we'll need before building in the Calculator application, but if you'll like to skip the requirements section cause you're familiar with React Native and Expo, click here to do so.

Prerequisite

Basic knowledge of React
Basic knowledge of React Native

Requirements

Install Node

Node is pretty much essential, so visit Nodejs.org and download the Long Term Support (LTS) version of Nodejs.

Once you're done downloading and installing Node.js, run the command below to know if it's up and running on your machine.

node -v

Install Expo

There are two tools we'll need to set up Expo, first is the Expo CLI which serves the project, and second is the client app called Expo GO which allows us to view the project on either an Andriod or IOS device.

Install Expo CLI

npm install -g expo-cli

Install Expo Go

Further guides for the Expo installation can be found here.

Getting Started

Firstly we'll need to install the necessary dependencies to get building, and the first would be Expo.

npx create-expo-app calculator-app && cd calculator-app

Once the installation process is completed and we've changed our directory to calculator-app, let's start our app, making sure it works.

Run the Project

npm start

yarn start would also work if you have yarn installed.

On the terminal, you'll see a QR code, which we'll need to scan with the Expo Go app, which I guess you've downloaded from Play Store already.

But if you've not got the Expo app yet, download it here for Android and here for iOS to follow along with the article.

To work with the Expo Go app and our project on our computers, we would need to be connected to the same network; this is very important.

The terminal interface should look like this when the start command is run:

Now, we need to open the Expo Go app on our mobile devices, scan the QR code, and we should see this interface on our phones.

Folder Structure

Let's go over what the folder structure entails:

Note: As of the Expo version 47.0.12, this is how the folder structure is

/.expo - this folder got created when we started the application and contains devices.json and README.md files. Please go through the README file to know what this folder is about, but really we can ignore it.
/assets - this is where we store any assets we may want to use in our application, like images, videos, fonts and icons
/node_modules - these are all the packages we have installed that allow Expo and React Native to run. Further packages installed with npm install get added here.
.gitignore - this is a file to tell .git which files and directories we want to omit from source control (Git). node_modules and .expo directories are omitted by default.
App.js - the main entry point to our application. This is where you'll start adding code!
app.json - another config file that contains expo metadata
babel.config.js - babel config, used to add the expo preset
package.json - this is where you list dependencies and add scripts
package-lock.json - this file shows the map of all the dependencies installed

Breakdown of the Calculator Layout

The calculator app UI can be broken down into four main components we'll need to build; first, an input box where the calculations would be done, referred to as the Calculation Input from the image below.

Then we have the Preview Calculation component, which shows a preview of the answer when a valid operation occurs; next, we have Rows of Buttons.

I'm sorry for the poor image quality, I'll look for better ways to edit images next time 😅

Coding Time

Let's open the App.js file, we should have the snippet of code below or similar in the file:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

We'll need to create the Calculation Input first, so remove the <Text> component and replace it with an <TextInput /> component.

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <TextInput value="Here's were we type our calculation!" />
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Here's what we should have on the Expo Go app on our devices.

Notice the input is at the centre of the screen; let's fix that and add some colours.

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, TextInput, View } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        value="Here's were we type our calculation!"
      />
      <StatusBar style='auto' />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#010101",
    paddingVertical: 30,
    paddingHorizontal: 20,
  },
  input: {
    marginTop: 40,
    borderWidth: 1,
    padding: 10,
    color: "#fff",
    fontSize: 36,
  },
});

Now the UI should look like this, which is much better.

Let's add state to the <TextInput /> to keep track of the calculating number and operators entered.

...
export default function App() {
  const [calValue, setCalValue] = useState("");
  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        value={calValue}
        onChangeText={setCalValue}
        cursorColor='#8ad8d1'
        autoFocus={true}
        textAlign='right'
        showSoftInputOnFocus={false}
      />
      <StatusBar style='auto' />
    </View>
  );
}
...

The Calculation Input is all set, but notice the showSoftInputOnFocus={false} prop on the <TextInput /> component. The prop is added to make sure the phone keyboard doesn't show when the input is on focus cause we don't need the phone's keyboard; we'll create ours.

Let's move to the Preview Calculation Input, which follows the same pattern we did for the calculation input.

import { StatusBar } from "expo-status-bar";
import { useState } from "react";
import { StyleSheet, Text, TextInput, View } from "react-native";

export default function App() {
  const [calValue, setCalValue] = useState("");
  const [previewValue, setPreviewValue] = useState("");

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        value={calValue}
        onChangeText={setCalValue}
        cursorColor='#8ad8d1'
        autoFocus={true}
        textAlign='right'
        showSoftInputOnFocus={false}
      />
      <TextInput
        value={previewValue}
        onChangeText={setPreviewValue}
        cursorColor='#8ad8d1'
        textAlign='right'
        caretHidden={true}
        style={[styles.input, styles.prevInput]}
        showSoftInputOnFocus={false}
      />
      <StatusBar style='auto' />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#010101",
    paddingVertical: 30,
    paddingHorizontal: 20,
  },
  input: {
    marginTop: 40,
    borderWidth: 1,
    padding: 10,
    color: "#fff",
    fontSize: 36,
  },
  prevInput: {
    fontSize: 24,
    marginTop: 40,
    marginBottom: 30,
    color: "#616161",
  },
});

Next, let's move the backspace button; for this, we'll need to install a package @expo/vector-icons which comes with the icon we need. Run the command below:

npm install @expo/vector-icons

Once it's installed, we'll need to add the backspace icon to the code and its functionality.

...
import { Pressable, StyleSheet, Text, TextInput, View } from "react-native";

export default function App() {
  const [calValue, setCalValue] = useState("");
  const [previewValue, setPreviewValue] = useState("");

  const handleBackSpace = () => {
    const remainValue = calValue.slice(0, calValue.length - 1);
    setCalValue(() => remainValue);
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input} ...
      />
      <TextInput
        value={previewValue} ...
      />

      <View style={styles.backButton}>
        <Pressable
          onPress={() => handleBackSpace()}
          disabled={calValue ? false : true}
        >
          <Ionicons
            name='md-backspace-outline'
            size={24}
            color={calValue ? "green" : "#035903"}
          />
        </Pressable>
      </View>

      <View
        style={{
          height: 1,
          backgroundColor: "#575757",
          marginVertical: 20,
        }}
      />
      <StatusBar style='auto' />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {...},
  input: {...},
  prevInput: {...},
  backButton: {
    flexDirection: "row",
    justifyContent: "flex-end",
  },
});

Notice from the snippet above the Pressable component is used to indicate the icon would be clicked and has two props, onPress which listens to the pressing of the icon, which then calls the handleBackSpace function, and the second prop is disabled , which makes the icons not pressable when there's no value in the Calculation input.

The handleBackSpace() function removes the last value in the calValue state and then update the calValue state.

The self-closing View component is to indicate a line in the UI. Now the UI should look like this:

From the UI, we know we need a row of buttons, so let's create a component named Row but still, in this App.js file cause, it isn't a complicated component.

...
export default function App() {
...
}

function Row({ children }) {
  return <View style={styles.row}>{children}</View>;
}

const styles = StyleSheet.create({
  ...
  row: {
    flex: 1,
    flexDirection: "row",
    justifyContent: "space-between",
  },
});

That's all for the Row component; it basically composes several button components, which we'll be working on next.

Let's create a new component named Button.js in a components directory from the root directory, that is:

|-components
| -- Button.js
App.js


// Button.js

import { TouchableHighlight, Text, StyleSheet } from "react-native";
import React from "react";

export default function Button({ label, type, handlePress, icon }) {
  const getTextColor =
    type === "operator" ? "green" : type === "clear" ? "red" : "#fff";

  const getButtonColor =
    type === "equal"
      ? { backgroundColor: "green" }
      : { backgroundColor: "#171717" };

  return (
    <TouchableHighlight
      underlayColor={type === "equal" ? "#04ac04" : "#444444"}
      style={[styles.button, getButtonColor]}
      onPress={() => handlePress(label)}
    >
      {icon ? (
        icon
      ) : (
        <Text style={{ fontSize: 26, color: getTextColor, fontWeight: "bold" }}>
          {label}
        </Text>
      )}
    </TouchableHighlight>
  );
}

const styles = StyleSheet.create({
  button: {
    borderRadius: 50,
    backgroundColor: "#171717",
    width: 80,
    height: 80,
    alignItems: "center",
    justifyContent: "center",
  },
});

From the code above, we can see there's a lot going on. The Button component accepts four pros { label, type, handlePress, icon } where

Label is the text or number that the button should display
type prop is to identify what the button does; is it going to be for an operator or clear (which removes the numbers and operator for the Calculation Input) or number.
handlePress prop is a function that takes in the label as an argument and does the necessary operation with it, which we'll get into later on.
icon prop is an icon component that will be displayed in the button instead of the label if available.

Now, let's add the button components to the App.js file and their various functionalities.

import { StatusBar } from "expo-status-bar";
import { useState } from "react";
import { Pressable, StyleSheet, Text, TextInput, View } from "react-native";
import { Ionicons, FontAwesome5, FontAwesome } from "@expo/vector-icons";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import Button from "./components/Button";

export default function App() {
  const [calValue, setCalValue] = useState("");
  const [previewValue, setPreviewValue] = useState("");
  const [isAnswer, setIsAnswer] = useState(false);

  const ansColor = {
    color: isAnswer ? "green" : "white",
  };

  const handleBackSpace = () => {
    const remainValue = calValue.slice(0, calValue.length - 1);
    setCalValue(() => remainValue);
  };

  const handlePress = (text) => {
    setIsAnswer(false);
    const corrText = text === "X" ? "*" : text === "+/-" ? "-" : text;
    setCalValue((prev) => prev + `${corrText}`);
  };

  const handleClear = () => {
    setCalValue("");
  };

  const handleEqual = () => {
    if (!previewValue) return;
    setCalValue(previewValue);
    setPreviewValue("");
    setIsAnswer(true);
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={[styles.input, ansColor]}
        value={calValue}
        onChangeText={setCalValue}
        cursorColor='#8ad8d1'
        autoFocus={true}
        textAlign='right'
        showSoftInputOnFocus={false}
      />
      <TextInput
        value={previewValue}
        onChangeText={setPreviewValue}
        cursorColor='#8ad8d1'
        textAlign='right'
        caretHidden={true}
        showSoftInputOnFocus={false}
        style={[styles.input, styles.prevInput]}
      />

      <View style={styles.backButton}>
        <Pressable
          onPress={() => handleBackSpace()}
          disabled={calValue ? false : true}
        >
          <Ionicons
            name='md-backspace-outline'
            size={24}
            color={calValue ? "green" : "#035903"}
          />
        </Pressable>
      </View>

      <View
        style={{
          height: 2,
          backgroundColor: "#575757",
          marginVertical: 20,
        }}
      />

      <View style={styles.buttonContainer}>
        <Row>
          <Button handlePress={handleClear} label={"C"} type='clear' />
          <Button
            handlePress={handlePress}
            label={"()"}
            type='operator'
            icon={
              <MaterialCommunityIcons
                name='code-parentheses'
                size={30}
                color='green'
                style={{ fontWeight: "bold" }}
              />
            }
          />
          <Button handlePress={handlePress} label={"%"} type='operator' />
          <Button
            handlePress={handlePress}
            label={"/"}
            type='operator'
            icon={<FontAwesome5 name='divide' size={24} color='green' />}
          />
        </Row>
        <Row>
          <Button handlePress={handlePress} label={"7"} />
          <Button handlePress={handlePress} label={"8"} />
          <Button handlePress={handlePress} label={"9"} />
          <Button
            handlePress={handlePress}
            label={"X"}
            type='operator'
            icon={<FontAwesome5 name='times' size={24} color='green' />}
          />
        </Row>
        <Row>
          <Button handlePress={handlePress} label={"4"} />
          <Button handlePress={handlePress} label={"5"} />
          <Button handlePress={handlePress} label={"6"} />
          <Button
            handlePress={handlePress}
            label={"-"}
            type='operator'
            icon={<FontAwesome name='minus' size={24} color='green' />}
          />
        </Row>
        <Row>
          <Button handlePress={handlePress} label={"1"} />
          <Button handlePress={handlePress} label={"2"} />
          <Button handlePress={handlePress} label={"3"} />
          <Button
            handlePress={handlePress}
            label={"+"}
            type='operator'
            icon={<FontAwesome5 name='plus' size={24} color='green' />}
          />
        </Row>
        <Row>
          <Button handlePress={handlePress} label={"+/-"} />
          <Button handlePress={handlePress} label={"0"} />
          <Button handlePress={handlePress} label={"."} />
          <Button
            handlePress={handleEqual}
            label={"="}
            type='equal'
            icon={<FontAwesome5 name='equals' size={24} color='white' />}
          />
        </Row>
      </View>

      <StatusBar style='auto' />
    </View>
  );
}

function Row({ children }) {
  return <View style={styles.row}>{children}</View>;
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#010101",
    paddingVertical: 30,
    paddingHorizontal: 20,
  },
  input: {
    marginTop: 40,
    borderWidth: 1,
    padding: 10,
    color: "#fff",
    fontSize: 36,
  },
  prevInput: {
    fontSize: 24,
    marginTop: 40,
    marginBottom: 30,
    color: "#616161",
  },
  backButton: {
    flexDirection: "row",
    justifyContent: "flex-end",
  },
  row: {
    flex: 1,
    flexDirection: "row",
    justifyContent: "space-between",
  },
  buttonContainer: {
    flex: 4,
  },
});

From the snippet above, we can tell a lot is going on, so I've created an Expo snack for this point of the application so that we can see and play around with the application at this point, just in case you haven't been coding along 😊.

To get the best experience please switch to the Andriod / iOS tab below (depending on your device), and scan the QR code to test on your mobile device with the Expo Go app.

The Row component composes of four Button components and each Button has a different or similar prop value. For example, the button for the equal operation, the prop handlePress uses the handleEqual() function, which sets the preview Calculation to the Calculation Input.

The handlePress() function takes a text, and if the text is X it returns * and if +\- it returns - to the corrText variable, which then added to the previous value of the calValue state, also, the setIsAnswer(false) function is made false.

Notice also a new state is added const [isAnswer, setIsAnswer] = useState(false) , and it's to keep track of when the arithmetic calculation is correct and determine what colour the Calculation Input should be, either green or white, in the ansColor variable, which is added to the Calculation Input styles.

Just to be clear , Calculation Input is referred to the very first <TextInput /> component, while Preview Input is the second <TextInput />.

Let's move to the preview input and make it work:

...
import { useEffect, useState } from "react";
...

function valueHasOp(text) {
  if (text.length === 0) return false;
  if (
    text[text.length - 1] === "+" ||
    text[text.length - 1] === "-" ||
    text[text.length - 1] === "*" ||
    text[text.length - 1] === "/" ||
    text[text.length - 1] === "%" ||
    text[text.length - 1] === "(" ||
    text[text.length - 1] === ")"
  )
    return false;

  for (let i = 0; i <= text.length; i++) {
    if (
      text[i] === "+" ||
      text[i] === "-" ||
      text[i] === "*" ||
      text[i] === "/" ||
      text[i] === "%"
    ) {
      return true;
    }
  }
  return false;
}

export default function App() {
  const [calValue, setCalValue] = useState("");
  const [previewValue, setPreviewValue] = useState("");
  const [isAnswer, setIsAnswer] = useState(false);

  useEffect(() => {
    if (valueHasOp(calValue)) {
      let prevAns = eval(calValue);
      setPreviewValue(`${prevAns}`);
    } else {
      setPreviewValue(``);
    }
  }, [calValue]);

 ...

 return (
    ...
 )
}

From the snippet above, there's a useEffect hook, which checks for changes in the calValue state, and in its callback, there's a check with the valueHasOp() function, which checks if the string calValue has an operator, for example, if calValue is 2*2 the function returns true, if calValue is 2* it returns false cause that isn't a valid operation, also if calValue is an empty string, it returns false.

If the valueHasOp(calValue) function returns true then this expression is executed Function(return ${calValue})() which evaluate JavaScript expressions as strings. If you've seen the eval() method before, it is similar to the Funtion() method.

If you'll like to learn more about the Function method, do read this guide: Function - JavaScript | MDN (mozilla.org ) and also this article to know the difference between eval() and Function() : eval() vs. Function() in JavaScript (educative.io )

The returned value from the Function(return ${calValue})() method is set in the setPreviewValue(${prevAns)) but if the valueHasOp(calValue) function returns false then setPreviewValue() method is made an empty string for nothing should be previewed.

At this point, the calculator application's main functionality works, but then there is a bug with selecting a portion of the Calculation Input to add a new number. To demonstrate the bug, see the video below:

For us to fix this bug, we'll need to know where the selection cursor is at every time on the Calculation Input (first TextInput); therefore, we need to listen to every change on the selection. Luckily, the React Native <TextInput /> component allows us to keep track of this with some props.

...

export default function App() {
    const [calValue, setCalValue] = useState("");
    const [previewValue, setPreviewValue] = useState("");
    const [isAnswer, setIsAnswer] = useState(false);
    const [cursorSel, setCursorSel] = useState({ end: 0, start: 0 });
    const [isCursorSel, setIsCursorSel] = useState(false);

    ...

    return (
        <View style={styles.container}>
          <TextInput
            style={[styles.input, ansColor]}
            value={calValue}
            onChangeText={setCalValue}
            selection={cursorSel}
            cursorColor='#8ad8d1'
            autoFocus={true}
            textAlign='right'
            onSelectionChange={(e) => {
              setIsCursorSel(true);
              setCursorSel(e.nativeEvent.selection);
            }}
            showSoftInputOnFocus={false}
          />
           <TextInput
             value={previewValue}...
           />

            ...
        </View>
    )
}

The above snippet shows only the changes; we'll need two new states. The first state const [cursorSel, setCursorSel] = useState({ end: 0, start: 0 }) keeps track of the selection cursor end and start property, while the second state const [isCursorSel, setIsCursorSel] = useState(false) track if the selection cursor has been changed.

On the Calculation Input, two new props were added, selection which take in the cursorSel state and onSelectionChange an event handler. The e.nativeEvent.selection expression gets the current location of the selection cursor, which is an object like this {start: 0, end: 0}.

onSelectionChange={(e) => {
   setIsCursorSel(true);
   setCursorSel(e.nativeEvent.selection);
}}

Even though we now keep track of when the selection cursor is moved with the onSelectionChange event handler, we haven't solved the bug. To solve the bug, every time a number is added to the Calculation Input, we need to know where the selection cursor is located and add the number to that spot. Therefore we'll need to change the functionality of the handlePress function.

const handlePress = (text) => {
    setIsAnswer(false);
    const corrText = text === "X" ? "*" : text === "+/-" ? "-" : text;

    setCursorSel({ end: cursorSel.end + 1, start: cursorSel.start + 1 });
    setCalValue((prev) => {
      if (prev.length !== cursorSel.end && isCursorSel) {
        let leftOver = prev.slice(0, cursorSel.end);
        let rightOver = prev.slice(cursorSel.end, prev.length);

        return `${leftOver}` + `${corrText}` + `${rightOver}`;
      }
      return prev + `${corrText}`;
    });
  };

Looking at the above snippet, it might look scary, but really what going on is that we first set the current selection cursor position with the setCursorSel function and then in the setCalValue function, there is a check if the previous value length prev is not equal to the cursorSel.end and isCursorSel is true.

Let's say the prev value is 5*4 and the cursorSel.end is at 0 , which means the selection cursor is next to 5 .

The leftOver variable would be "5*4".slice(0, 0) which returns an empty string ""

The rightOver variable would be "5*4".slice(0,3) which returns 5*4

Now, if the text parameter is "4", then corrText would be "4"

Put all together would be "" + "4" + "5*4" which evaluate to "45*4" .

This is a hacky solutions I know, but it works 😅

Okay, so that is it; we've successfully solved the bug; if you'll like to play around with it on your device, use the Expo snack below along with the Expo Go app; it's not suitable for the web.

GitHub repo: jomefavourite/calculator-native at blog branch (github.com )

Conclusion

If you've followed along with the article to this point, thank you very much, and if you can't tell, I'm still new to React Native 😊, and this is a project I built by myself without a guide just to get my hands dirty, and I can say React Native is really cool.

If you have suggestions on how the app could be improved, please leave a comment; also, I know there are other bugs. If you can fix them, do message on Twitter Favourite Jome (@FavouriteJome1).

Thanks for reading once again, and see you in the next Let's build Something Cool series 🤩

First look at the GitHub CLI

Favourite Jome — Mon, 05 Dec 2022 09:54:05 +0000

We all know about Github, I presume but do we know about the Github CLI (Command Line Interface)?

The GitHub CLI is a tool I've been using recently, and I doubt many of us developers are aware of it, so we'll be looking at some of its use cases which would help boost your productivity when it comes to using Github.

The GitHub CLI is a tool that takes Github to the command line, allowing us to perform GitHub operations such as making a pull request (PR), creating repositories (repo) etc., that would have been done on the GitHub website directly.

Prerequisite

Basic knowledge of Git and GitHub
Basic knowledge of the terminal or the Command Line Interface (CLI)

How to get GitHub CLI up on your machine

There are various means of installing the GitHub CLI on our devices depending on the Operating System (OS) you make use of.

Windows

You can use these package managers or command line installers such as WinGet, and scoop, which of course, must be installed first on your machine. But if you're on Windows 10 upwards, you should have WinGet by default.

winget install --id GitHub.cli

MacOS

brew install gh

For further instructions on how to install the GitHub CLI, please visit their documentation

Configuring GitHub CLI

Now that we got the CLI on our various machines, we need to be authenticated with our GitHub accounts to utilise the CLI.

Firstly, run the command on the terminal

gh auth login

When you run the command above, you'll get more prompt; the images below work you through the steps

Syntax of the GitHub CLI

The GitHub CLI commands follow a certain basic syntax or usage, which is:

gh : is the initial command, saying I want to use GitHub CLI

command : specifies the action you'll like to take, like login , pr (pull request), browse e.t.c

subcommand : specifies further commands that complete the command essentially. E.g.gh auth login, which we've used.

[flags]: specifies additional options or arguments to the command.

GitHub CLI Basic Commands

There are a lot of commands that serve different GitHub operations, so we aren't going to cover all; we'll look at two commands, which I offend make use of.

gh repo

The gh repo command is used for handling repositories, and it comes with lots of subcommands, such as:

gh repo create
gh repo clone
gh repo delete
gh repo edit
gh repo fork
e.t.c

To view the complete lists of the gh repo commands, do visit the docs here

Let's go over just one of the subcommands under the gh repo command:

`gh repo create [<name>] [flags]`

The command above is to create a repository, making it private and public, with flags and lots of other cool stuff concerning a repository beyond this article's scope.

[name]: specifies the name of the repository while

[flags]: specifies particular arguments for the repository being created, for example, making the repo public or private

Running the commands

Before we run the commands, you should know that there are two modes of using this command: the interactive mode and the non-interactive mode.

The interactive mode means you'd go through a list of questions like whether you want to clone the repo after it's been created, whether it should be a private or public repo, and other questions. Note the interactive mode doesn't take arguments, so only the command gh repo create is used.

Let's look at a step-by-step guide using the interactive mode command:

The non-interactive mode is a declarative way of specifying how the repo should be created, where the name and various flags would be specified.

Now, let's create a new repository just like we've done before, but this time in a non-interactive mode whereby there is no step-by-step procedure and no questions.

gh repo create new_repo --add-readme --private -d "Hello this is a new repo" -c

Notice I have 4 flags along with the repository name

--add-readme : specifies you want a Readme file added to the repo, obviously 😅

--private : specifies, hey repo, be a private repo 🔏

-d [string]: specifies description for the repo

-c : specifies you'll like to clone the repo once it's created

Here's the output of the command:

If you'll like to know more about how the other subcommand are to be used, please read up on their docs here

gh pr

The gh pr command is used to work with GitHub pull requests, and it comes with lots of subcommands, such as:

gh pr create
gh pr close
gh pr diff
gh pr comment
gh pr reopen
e.t.c

To view the complete lists of the gh pr commands, do visit the docs here

Let's go over just one of the subcommands under the gh pr command:

`gh pr create [flags]`

The command above would be used to create a pull request, and there are two modes of running this command, just like the gh repo create command; we have the interactive mode and the non-interactive mode.

Running the command

Let's create a pull request on the new_repo repository we created earlier. Though in other for us to make the pull request to the repo, we must have created a new branch first because the sole purpose of a pull request is to say hey, I've made some changes would you like to merge my changes to some other branch (target branch).

So once you've identified that you have multiple branches, another thing to look out for is ensuring the working directory on the terminal is the directory you want to make the pull request to. That is, if the command pwd (print working directory) is run, it should output something like this /c/Users/..../new_repo. Basically, the last path should be a git repository, which in this case is new_repo.

Now, let's practicalize all this:

Interactive mode

Recap, so we need to create a new branch first, then make some changes, push those changes and make the pull request to the main branch from the new branch

Non-interactive mode

Now for this example, we write the entire command with flags such as --title or --body, which is used in the image below:

Note : if you're going to run the command above, you should have made some changes to your codebase and pushed it before creating the pull request. Also, note there are more flags when using the gh pr create command, to view all, visit the docs here

Conclusion

Now I believe you've got the hang of the GitHub CLI and will be willing to explore the various commands provided if you've got to this point in the article. One helpful flag to always make use of is the --help flag. I believe you could use it along with all the commands, which would guide you on utilising the commands instead of running to the documentation all the time.

Thanks for reading!

VS Code Version Control: Understanding the basics of Git operations # 1

Favourite Jome — Tue, 25 Jan 2022 21:17:43 +0000

Visual Studio Code (VS Code) is one of the most used Integrated Development Environment (IDE) with lots of features, which most users don't know about (including myself, I can't say I've used all the features that VS Code provides 😃).

So in this article, we'll look into a feature we developers would probably use frequently in VS Code which is the Version Control feature called Source Control in VS Code. Understanding some of the various operations it provides, how they translate to the Git commands and how the operations are useful for managing source control in VS Code.

Note: Please feel free to jump around the Table of Content cause you might not need all the information if you already know about them, but you could read all and probably learn something new

Prerequisite

Basic knowledge of Git
Basic knowledge of VS Code interface

What's the Source Control or the Version Control

The Source Control or Version Control is a system used to manage all activities carried out on a computer program which is also referred to as a human-readable program known as the source code.

If you'll like to read more about what Source Control or Version Control is, please do here.

Source Control Panel on VS code

VS Code makes use of Git right out of the box as its primary Version Control system. Meaning that you'll need Git installed on your PC before making use of Git through the Source Control sidebar on VS Code.

To get Git on your machines, follow the links below:

For Windows OS

Download Git for Windows

For Linux OS

Download Git for Linux or run the command on the terminal

sudo apt install git

For Mac OS

Download Git for Mac

Now that we've got Git installed on our various machines, we need to config Git to our machine. Don't worry, this step is a one-time process.

Setting up Git for VS code

Firstly, we need to set up our identity through the terminal which can be opened/closed on VS code by using (Ctrl + J). Our username and email address are what is needed to set up our identity for Git.

git config --global user.name "John Doe"
git config --global user.email johndoe@example.com

Note: Please do change " John Doe" to your username as it is on Github and also the email address johndoe@example.com to your email address

The next step is to configure the code editor which is being used to access Git, since we're making use of VS code we input the command below into the terminal.

git config --global core.editor "code --wait"

If for any reason you're making use of a different editor, do visit here listing out the commands for other editors

Lastly, we need to set up the default branch name. Recently, the default Git branch name was changed to main from master, so to configure the branch name, we make use of the command:

git config --global init.defaultBranch main

That's it! Git is fully configured on our machines, we can now go back to explore the Source Control Panel.

Note: Read more about Getting Started First Time Git Setup

Working with the Source Control Panel

Now that we know what Source Control is, let's dive into VS Code and explore the various options that it provides.

The source control can be accessed by using the keys (Ctrl+Shift+G) or by clicking the icon shown below.

While working on a directory/folder in VS code and having the source control sidebar opened, two options will be shown which are:

Initialize Repository
Publish to Github

![source-control-option.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638048077887/TrRUzhAaX.png)

Initialize Repository when clicked create a .git folder, which is hidden by default in the working directory (or current folder being used) except you turn on the option of showing all hidden files on your PC file explorer, that's when it's visible.

The .git folder contains all the necessary information for a project to be recognized as a version control project, information about commits, branches, remote repository addresses etc are all managed in the .git folder.

The Publish to Github button when clicked, pops out a input for us to enter our repository name. By default, the name of the folder housing your project files would be selected as the name of the repository but it's changeable.

Note: you can't publish to Github if you've not connected VS code to Github.

Connect Github with VS code

There are various means to connect VS Code to GitHub, well we'll go through just one means, which is clicking on the Accounts icon, at the bottom of the sidebar.

![account.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638048145040/MJeqmiPQY.png)

Then we click on the Sign in to Sync Settings option which present us with a pop-up, signifying if we'll like to sign up with Microsoft or Github.

![pop-up-signup.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638048168920/-uiIr5QFV.png)

Let's signup with Github, upon clicking on the option we will be redirected to the browser window, where we are to click on the continue green button, which then signs VS code with Github. To confirm it worked correctly, go to the "Accounts Icon" on the sidebar once more, this time you should find your GitHub username displayed.

![signed-up.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638048226411/Y8f4g-p4n.png)

Great! We've been able to completely get VS code up and running with Git and Github. Now let's look into the various features that VS code offers through the Source Control panel.

Recording Changes to Git

When a project is initialized with Git either by clicking on the Initialize Repository or running the command git init, all the files or folders in the current directory move to an Untracked State (U) shown underneath the Changes Dropdown at the Source Control Panel.

![changes.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638048286878/i_a2-rc7y.png)

Note: the U at the right side of each file from the image above means Untracked, and this shows on files that Git doesn't recognize.

Remember: the .git folder is created once git is initialized in a folder, which keeps track of all the files

Let's go over some features, which are accessed by icons on the files.

1 Discard Changes: discarding changes on a file or files which simply means removing files from the changes dropdown, deleting all changes made to the files that haven't been committed. In this case, we've not committed our files and there still in the Untracked State so if the files were to be discarded all the files will be deleted, so be really sure you want to discard a file or the entire files to be committed.

Note: To discard changes, you make use of the hook-like icon shown below:

![discard-changes.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638048309191/Zug-I5qvY.png)

Note: Each file underneath the Changes Dropdown also have the Discard icon

2 Stage Changes: Stage changes means that the file or the files are to be tracked by git. At this point, the file(s) are in the Tracking State, which means git recognizes that these files would be committed.

Note: The files in the Staged Changes dropdown only shows those changes/files to be committed or rather that are being tracked by git

You must have used the command shown below if you've ever used git before. All you're doing with the command is to tell git, hey, I'll like you to keep track of these files or a file, which means you're staging the file/files.

git add <name of file>

To add file(s) to the Stage Changes on VS code, you click on the + icon on each file or on the Changes dropdown.

![stage-changes-icon.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638048351623/lXlzeiy5C.png)

From the image above, I'm going to stage both account.png and changes.png files. By doing this, a new dropdown would be created named the Staged Changes

![staged-changes-2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638048374029/mHRnDtUsV.png)

Notice the A letter added to the files at the Staged Changes dropdown, it means Added, which denotes that git is keeping track of the files

Committing Files

While following Git command instructions, here's how we'll commit a file/files to Git:

git commit -m "First Commit"

Now using VS code, in order to commit out staged files which are account.png and changes.png, we go to the message input at the top of the Source Control Panel.

![commit-input.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638051772942/bPilkbVIj.png)

Then we type in a message like "First Commit", then click in the checkmark icon to commit the files.

![commit.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638048394565/4y2SPqmzD.png)

Once the Staged changes files have been committed, the files wouldn't be seen anymore on the Source Control panel, because Git now recognizes those files as its own.

Publishing to Github

To publish the committed files to Github, we'll need to move to VS code Status Bar, right at bottom of the IDE.

![status-bar.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638048424415/zYNVsPl_D.png)

Notice: from the image above, it says "blog (Git) - Publish to Github". This is because my working directory/folder is named blog that's why you can see the blog there. Also, whatever the working directory name is, that will be taken as the default repository name but still changeable.

The next step would be to click on the icon next to the branch name which is main. When the icon is clicked there would be a pop up prompting you to sign up using Github.

![prompt.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638048450631/uFViSSMUx.png)

Click on Allow, which then redirect you to the browser, click on the continue button and that's it, next off would be to input the repository name.

![repository-name.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638048468533/ZgYkp_TbP.png)

From the image above, the repository name is "vscode-test", then you can decide if you'll like the repository to be private or public, once you either pick private or public it should show an indication at the right bottom view of VS code that the repository is publishing.

![success.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638048490476/_6zntb9SX.png)

Once it shows "successfully published...", you can open Github to view the newly created repository.

![vs-code.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638048507087/FpTE_Jf7Q.png)

Conclusion

We've covered how to set up Git in VS Code, how to initialize a repository and then publish the repository. In the next part of the article, we'll look into more advanced operations like Stashing, Switching between branches, Synchronization and many more.

Thanks for reading! I hope you find the article useful and don't forget to like and share the article.

See you in the next article! 👋

Resources

First Internship Journey as a Front-End Developer and What I've Learnt

Favourite Jome — Sun, 02 Jan 2022 20:42:59 +0000

In this article, I'll share my journey to how I became a Frontend Developer Intern at a company named Vasiti.com for 5 months, how I got in, my process of getting the role and what I've leant through the internship.

After a certain amount of years in college, most faculties make it compulsory for students to embark on the Industrial Training Programme, where students undergo supervised practical training (real-world training) in a selected industry to learn and get acquainted with some industrial skills. I had gotten to the year where I had to undergo this training which lead to questions like where would I like to work?

Since I was already into the Web ecosystem, I wanted to work for a company that was utilizing Web technologies, so as for me not to do something I wasn't interested in.

How I got the internship

In the desperate search for a place to have my Industrial Training (IT), I went online and searched for internship roles that were web-related and Front-end Development roles. I found a lot of remote roles, physical roles through platforms like Indeed, Google Jobs, MyJobMag etc then I applied to all I found meaningful, though I didn't apply to remote roles since I didn't want to work remotely.

Application process

I applied by sending in my resume and a brief write up, for example saying "I'll love to be an intern at your company". Upon doing this, I made some research about the companies that interest me, like what are they doing, their goals and their mission. Here's a preview of the message I sent to the company I worked with.

Funny enough Vasiti.com wasn't looking for an intern when I applied, they needed a Frontend Developer. But I took a leap of faith and still sent my resume by saying I'll love to be an intern at their organization knowing fully well that the role wasn't an internship role.

If you'll like to view the job description, responsibilities about the job when I applied, click the link here

So if you're looking for an internship role and you have a company in mind, even if they aren't looking for an intern just apply and pitch yourself, who knows, you might just get your desired outcome.

Though I didn't have a cover letter to support my resume, I made sure to include my best projects on the resume also I had the resume reviewed, all thanks to @Victoria Lo and her wonderful article The Ultimate Resume Guide for Developers which set me to a right path.

If you're like to view the resume, click here

Just like that, I got replies from two organizations I applied to among several organizations. Here's the feedback I got:

I ended up going for the company Vasiti.com since I first got a reply from them and I liked they were geared towards helping students grow as an entrepreneur as of that time, then I took their assessment which spanned 24 hrs, honestly, that day was a rush 🥴. The assessment was to build a testimonial page from the design provided and also to allow users to add testimonials.

That day I didn't rest until I got the web page ready and looking much like the design and also implemented adding more testimonials. I made use of React and Styled Components to accomplish the project, here's the live demo and codebase

Platforms that impacted my skills building web pages from a design template are frontendmentor.io and devchallenges.io. I higher recommend these two platforms, just get a challenge and build.

Interview process

On July 1st, a mail was sent to me, congratulating me on the successful assessment submission, including the interview date which was the next day 😊.

So I consulted YouTube on how an interview would be structured, what questions would be asked and how to answer them. Even though I did watch some videos and practised what I'd say, the interview didn't go as planned 🤣. You see, in those videos I watched, the questions asked weren't technical they were questions like "Tell me about yourself?", "What experience do you have?", "How do you handle stress and pressure?"

Here's one of the videos I watched: Interview Questions and Answers! (How to PASS a JOB INTERVIEW!)

I eventually didn't practice any technical questions for the role as a Frontend Developer, which showed effect when I got to the interview seat. Also, I didn't make more research about the company, what could be improved on their website, well I guessed I believed the questions in the youtube videos I watched were what I'll be asked.

The next day, getting to the hot seat, faced with the CEO, CTO and HR of the company was really intimidating for me, even though they hadn't asked questions 😂. Eventually, after introductions, the questions started, firstly by the HR manager. She asked questions like how I got to know about the company, a brief introduction about myself and other questions alike.

Next off, technical questions by the CTO were thrown at me, mainly about React. Questions like what's the difference between a Functional Component and Class-based components, what's OOP, can hooks be used in a Class Component. But I think the very first question was how I would rate my skills with React from 1 to 10 and silly me at that time said 5.

Well, I guess I felt confident rating myself 5 in React as of that time and I didn't want to rate myself too low as for me to get employed, but really that lead to more follow-up questions that I couldn't give correct answers to because I was unprepared.

I felt bad for not practising enough, that when it came to the CEO questions I was down and while answering his questions I tried thinking deeply for an appropriate answer. I remember being asked by the CEO from the website what can I improve. Seriously, when I heard the question I couldn't think of any reasonable answer because I didn't take note of what could be improved.

I ended up talking about SEO (Search Engine Optimization) and saying whatever came to my mind 😂. Other questions like if I'll like to get paid as an intern at the company was asked and I eagerly said YES! 😁. Then I was asked how much I'll like to be paid, hmm, this was a tough question.

Initially, upon getting to the interview I had concluded I would like to be paid at least N30k per month, but weighing how the interview had gone I changed my mind and said N20k to the CEO. After responding to the question, I could see on the CEO's face a sign of relievement that I didn't go too far with the money.

I know! probably if I had went with a price higher or stuck to N30k as I planned I might have still gotten the role, but right now it doesn't matter

Landing the Job

After a week from the interview, almost losing hope of getting feedback, I got a mail on July 11th, welcoming me to the company. I wouldn't lie, I was really happy getting the mail that day and grateful I was accepted.

Then, I had to relocate from my family home to a new home closer to my workplace. The family I stayed with accepted and accommodated me very well and for that, I'm sincerely grateful to them.

While starting the job my salary was concluded to be N25k per month and I learnt a lot during the space of 5 months, so here are some of what I've learnt.

What I've Learnt

I'm going to share both technical and non-technical things I have learnt doing the 5 month internship

1. Asking Questions when stuck is one of the best ways to learn

There were so many tasks I was given, that I literally had no idea how to tackle and solve them. Even after my supervisor has taken his time, explaining how and what I needed to do, I might still not just get it right on the first trial.

There was this night, I got really frustrated and left the office angry just because I couldn't complete my task, this was around the second to fourth week working at the company.

The next day, when I got to work with a fresh mind, I asked questions to the other Frontend Developer who is a Guru BTW, and he helped me out fixing my issue.

The main reason I got to the point of being frustrated was that I was stubborn and didn't want to follow my colleague's method, well being strong-headed didn't work out well 😂.

2. Own up to Your Mistakes

I've made some mistakes and pushed them to production 🤦‍♂️. Mistakes such as not changing an API endpoint, so when users search for a product they get the wrong product, not checking properly if the webpage is fully responsive on all devices, using a test authorization key and pushed to production.

Lots of mistakes, I've made but when it came to answering those mistakes, I learnt to admit that I was the cause of those issues and quickly I was able to fix them as well with some help from my colleagues.

3. Acquired knowledge on business terms

Every morning by 9 am, Start of Business (SOB), we attend a stand-up meeting, where everyone has to talk about what they did the previous day and what they plan to do that current day. Questions during this period were also allowed.

I got exposed to what each department of the company does, be it the sales department, customer care, marketing department etc. Through questions and just listening I learnt a lot.

I got to know about setting OKR's (Objective Key Results), KPI (Key Performance Indicator) and many more organisational terms.

4. New Technologies

I got to learn about new technologies I hadn't used before on the job, such as Next.js, Material UI, react-hook-form, SWR and lots more. Working with these tools daily got me acquitted with many concepts.

5. Reading an already written codebase saves you time

Reading my colleagues code, what they've done in the past saved me a ton of time. Whenever I was tasked to do something similar to what have been done in the past, all I had to do was go read and understand what my colleagues had done.

From there, I could manipulate their code and achieve what I want, a win-win situation right? But honestly most times I don't understand what some code does, once I know that the solution to my problem, all I do is copy and paste, a typical trait of a developer 😏

6. Stress and Fatigue comes with the Job

Sitting down all day, leaving the office late mostly around 6 pm - 7 pm, facing challenging tasks, all bring about stress and tiredness. Most days I felt like not doing anything cause the previous day I was stressed out.

So this is something you might experience

7. How to be a team player

Learnt how to listen to others opinions, instead of just jumping right into coding, how to comport what I say, how does it affect my colleagues, accepting when it is totally my fault when something is wrong.

I got to collaborate with the backend developer, getting API endpoint from him, what parameter/data should be sent back to the backend, how's the API structured and stuff like that.

Collaborated with the designer, the other Frontend developer and the Full-stack developer in other to achieve our tasks.

8. Working to get paid isn't easy

Yeah, this is something I learnt while working since this was my very first job and a means to make money from my web skills.

Waking up early, preparing for work by 6 am and being on the road just to get to work before 9 am and still getting home late mostly around 8 pm-ish or much more later every working day isn't easy. I applaud my parents for working and providing for me and my siblings, money is really hard to get.

I could go on and on about what I've learnt during does 5 months but I'll stop here, I hope you've learnt something from my experience if you've gotten to this point of the article.

Conclusion

In the end, I think I've acquired a good amount of knowledge from the company. I might have been lucky to get accepted but I went for what I wanted.

So I'll say, go for what you want, make sure it's a place you can learn something new every day, tackle challenging problems and eventually solve them.

I had a wonderful team to work with, people I could learn from, a wonderful supervisor that wanted me to grow and learn, a CEO that leads by example, overall it was a wonderful experience working at the company. Grateful for the push and complicated task I was assigned 😏. Thank you Vasiti.com

I'm also truly grateful to everyone that helped me in the process of looking for an IT placement, my parents, friends and family, grateful to people on Twitter that sent me applications to apply. Thank you all.

Thanks for reading ✌

The World of Programming Paradigms

Favourite Jome — Fri, 28 May 2021 18:46:13 +0000

There are so many ways of writing programs, either by the programming language of choice or by the different features of a language. Understanding this fact will help you write more efficient programs if you ask me 😏.

So, in this article, I'll be sharing what are programming paradigms and mentioning a few of the paradigms we have out there in the world of programming and also reasons to use a particle paradigm.

"The world of programming paradigms" - From the statement, the words can be broken down into three, which are "World", "Programming" and "Paradigms".

Let's know what these words mean:

World: can be thought of as a pictural view of the region/domain.
Programming: From the word programming, there's another word - program, so what's a program.

A program is a set of instructions used to solve/perform a specific task/problem.

With the word program being defined, now what's programming?

Programming is simply the act of writing programs.

Paradigms: are a set of concepts, thought patterns used in a domain/field.

Programming Paradigms

So, Programming Paradigm can be thought of like a way/style of writing programs. Also, it can be viewed as ways programs are classified based on their features.

There are so many programming paradigms out there, developed to solve problems and implemented in all programming languages like Java, C, JavaScript, etc. Due to the numerous paradigms, we are looking at just the two most common paradigms in this article.

Note: Programming Paradigms doesn't refer to a particular programming language but rather the way of writing programs in that programming language.

Click here to view most of the Programming paradigm that exist.

Before proceeding further, you should know that mostly all recently used programming languages are multi-paradigm, meaning they can be written using not just one but as many paradigms supported in the language.

There are two common programming paradigms, which are:

Imperative programming paradigm
Declarative programming paradigm

Both programming paradigms can further be divided as shown in the image below:

Note: There're more subdivisions to the Imperative programming paradigm and the Declarative programming paradigm, but we'll be concerned about the subdivisions shown in the image for this article.

Imperative Programming Paradigm

Firstly, what's the meaning of the word, Imperative?

Imperative could mean something vitally important, crucial or an act of giving an authoritative command.

So, therefore, In an Imperative Programming Paradigm, the order of steps is crucial, because the next step is mostly dependent on the previous step.

Here's an example in JavaScript to demonstrate my point:

let sum = 0

sum+= 1 // sum = sum + 1
sum+= 2 // sum = sum + 2
sum+= 3 // sum = sum + 3

console.log(sum) // 6

From the snippet above, we notice that the variable sum is initialised with the value 0.

Then the next couple of line is dependent on the current value of the variable sum which sums up to 6.

From Imperative Programming Paradigm, other styles of writing programs were also derived and for this article, we'll be looking at two sub-modules which are Procedural programming and Object-Oriented programming

Procedural Programming

Procedural programming is derived from the Imperative Programming Paradigm, which allows splitting of instructions into procedures also is concerned about the series of instructions to concur whereby each step relies on the previous step.

Procedural programming is much more like an iterative approach to solving a task/problem using loops (for, while) and if statements for control flow.

Here's an example to find the sum of numbers from 0 to 10, written in JavaScript:

let sum = 0

for (let i = 0; i <= 10; i++) {
  sum+= i 
}

console.log(sum) // 55

From the snippet of code above, a for loop that iterates from 0 to 10 adding the previous sum variable with i and then the final output of the variable sum will be 55.

Some major procedural programming language includes Fortran, ALGOL, BASIC and Pascal but more examples are found here List of programming languages by type - Procedural languages

Click here to know more about Procedural Programming

Why learn Procedural Programming?

It's simple.
An easier way to keep track of program flow.
It has the ability to be strongly modular or structured.
Needs less memory: It's efficient and effective.

Object-Oriented Programming (OOP)

In Object-Oriented Programming, the concept of classes and objects are used. The paradigms specialise in modularity, breaking real-world entities into objects that can be reused.

Also, Object-Oriented Programming is based on the concept of objects where an object contains data/fields (attributes) and methods (behaviours).

Some key characteristics of the OOP are:

Class: A class is a blueprint or template of an object.
Object: An object is an instantiation of a class.
Abstraction: This is the process of hiding away complexity and showing only what is need.
Inheritance: enables hierarchical relationships between classes.
Encapsulation: is the concept that binds together the data and methods that manipulate the data, and that keeps both safe from outside interference and misuse.
Polymorphism: this is the process by which variables, methods or objects can take multiple forms.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

class Student extends Person {
  constructor(name, age, matricNo, level) {
    super(name, age)

    this.matricNo = matricNo;
    this.level = level;
  }

  getStudenDetails() {
    return `${this.name} is of age ${this.age}, 
his Matric Number is ${this.matricNo} and his in ${this.level}L`
  }
}

const student1 = new Student('Favourite', 18, 'RUN/CMP/18/7796', 300)
console.log(student1.getStudenDetails())

// outputs
// 'Favourite is of age 18, his Matric Number is RUN/CMP/18/7796 and his in 300L'

From the snippet of code above, a class Person was first declared with its data/attributes as name and age. Also, the Person class is known as the Superclass because another class extends its properties.

Next off, another class was declared as Student, this class extends all the properties of the Person class because all students are also a person and this brings about inheritance.

Why use/learn Database programming

Reuse of code through Inheritance.
Flexibility through Polymorphism.
High security with the use of data hiding (Encapsulation) and Abstraction mechanisms.
An object-oriented programmer can stitch new software objects to make completely new programs.
For faster development of programs.

Declarative Programming Paradigm

Declarative programming is a style of building programs that express the logic of a computation without talking about its control flow.

From the word, Declarative; it means an announcement / a statement, so in this paradigm, the instructions that are to be carried out are declared meaning it doesn't need to be explicitly defined with how the instruction is to be meant done but just what is meant to be done.

Imagine being asked to draw a rectangle on a book, an imperative approach would state the various procedures like drawing two parallel lines on both axes while a declarative approach would just state the end goal and doesn't care about the process takes.

So the main differences are that imperative tells you how to do something and declarative tells you what to do.

Declarative Programming also has some programming languages beneath it, we'll be looking at Functional Programming and Database Programming.

Functional Programming

The functional programming paradigm is rooted in using mathematical operation, it's a way of writing programs elegantly like you'll think of when thinking about a problem.

Also, Functional programming is the process of solving problems by composing pure functions, avoiding shared state, mutable data, and side effects. Functional programming is declarative rather than imperative, and application state flows through pure functions

Terms like: Recursion, Memoization, Pure Function, Composition are used along with Functional Programming.

Let's say, a Fibonacci problem is to be solved, using a Functional approach makes the problem easier to solve and think about.

Each Fibonacci number is defined as the sum of the previous two Fibonacci numbers, so fibonacci(n) = fibonacci(n-1) + fibonacci(n-2). By convention, the first two numbers are fixed: fibonacci(0) = 0 and fibonacci(1) = 1.

Here's the Functional approach of solving a Fibonacci problem using JavaScript.

function recursiveFibonacci(n) {
  if ( n <== 0) return 0
  if ( n === 1) return 1

  return recursiveFibonacci(n-1) + recursiveFibonacci(n-2)
}

recursiveFibonacci(6) // 8

Note, there some caveat to Functional Programmings, like the Memory Stackoverflow, but there are also solutions to this caveat like Tail Call Optimation

Read this wonder article to know more about Functional Programming: [Master the JavaScript Interview: What is Functional Programming?](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-functional-programming-7f218c68b3a0#:~:text=Functional%20programming%20(often%20abbreviated%20FP,state%20flows%20through%20pure%20functions.)

Why use/learning Functional programming?

Functions can be coded quickly and easily.
Unit testing is easier.
Debugging is easier.
Overall application is less complex since functions are pretty straightforward.

Database Programming

A database is an organized collection of structured information, or data,
typically stored electronically in a computer system. A database is usually
controlled by a database management system (DBMS).

To process the data and querying them, databases use tables. Data can then be
easily accessed, managed, modified, updated, controlled and organized.

Most databases use Structured Query Language (SQL) for writing and querying
data.

There're three major parts to Database Programming:

Relational Database
NoSQL Database
Cloud Database

Read this article to know more about Databases: What is a Database? - edureka

Below, are simple declaration and schema declaration on what should be in a data show be in a database.

CREATE DATABASE Students;

CREATE TABLE ComputerScienceStudent (
      MatricID int,
      LastName varchar(25),
      FirstName varchar(25)
);

Why learn/use Database Programming

When you need to handle massive amount of data.
With the help of built-in functionalities in a database, we can easily validate data coming into the database.
Easy to update data: Data Manipulation Languages (DML) such as SQL are used to update data in a database easily.
Data integrity: With the help of built-in validity checks, we can ensure the consistency of data.

Conclusion

I'm pretty sure in some ways, directly or indirectly you've written programs using the combinations of all the Programming paradigms mentioned above, probably without your knowledge. Well, know you know some of the most used programming paradigms and reasons to use them.

I hope you found the article useful, thanks for reading!

References

Hacktoberfest Completed 2020

Favourite Jome — Mon, 19 Oct 2020 12:54:20 +0000

What I Learned From Hacktoberfest

This is my first hacktoberfest event ever and it was awesome. Due to my excitement, I made 3 Pull Request on the 1st of October (not spams BTW).

I know right, that's funny, well all 3 Pull Request weren't merged because I was making changes unknowingly to me, to package.json file that weren't supposed to be changed (increase in version numbers).

But, what I've learnt is the process it entails to contribute to a project. I learnt how to created my own issues due to a problem I'll like to fix or to be fixed by others. Then sync projects to my local repository. The steps of making a good Pull Request.

Through all these processes involved with contributing, I've got familiar and comfortable with git and GitHub.

So if you're thinking, if you should contribute or not, you should TOTALLY contribute.