DEV Community: Jima Victor

Why I think Python is a Great first Language

Jima Victor — Sat, 13 Apr 2024 17:01:55 +0000

Introduction

Learning how to code is a great venture. You end up learning a lot of things along the way, and it can literally change your life as an individual. Though it can be risky, and you may fail, but even if you do, you still benefit from the process of trying.

I believe that even though hard skills (such as programming) are not always transferable to other areas of your life, soft skills are. And through the process of developing hard skills, soft skills are developed.

Programming is a hard skill, and as such, it teaches you how to persevere (if you are serious about succeeding). But even in perseverance, you can't practice coding 24 hours every day, 7 days a week. You have other things you need to do with your time, and for that reason, you need to learn time management and come up with a schedule for how you are going to practice programming every day.

Speaking of every day, you need to be consistent in learning to see desirable results. It doesn't matter how long you practice coding; if you don't practice consistently within a given period, you're not going to be very good.

So, as you can see, by learning how to code, there are a lot of soft skills you pick up - which are transferable to other areas of your life.

Not to mention the fact that learning how to code can also give you a sustainable income.

So, the question now is, why is Python a great first language for learning how to code?

Reasons why Python is a Great First Language

Here are the reasons why I think Python is a great first language:

1. Readability:

If you have seen Python code, you can agree that it is easier to read than code in other programming languages. Python was designed to be a beginner's language, and as such, it was made to be readable.

Compared to other programming languages like C++, Java, and Rust, Python has a syntax that is easier to read.

Here's a simple example of Python code that demonstrates some of the basic syntax features:

# This is a comment

# Variables and assignment
x = 5
y = 10

# Conditional statements
if x > y:
    print("x is greater than y")
elif x == y:
    print("x is equal to y")
else:
    print("x is less than y")

# Loops
for i in range(5):
    print(i)

# Functions
def add(a, b):
    return a + b

result = add(x, y)
print("Result of addition:", result)

# Lists
my_list = [1, 2, 3, 4, 5]
print("First element of the list:", my_list[0])

# Dictionaries
my_dict = {'key1': 'value1', 'key2': 'value2'}
print("Value corresponding to 'key1':", my_dict['key1'])

# Classes
class MyClass:
    def __init__(self, name):
        self.name = name

    def greet(self):
        print("Hello,", self.name)

obj = MyClass("Alice")
obj.greet()

Now, this may not mean much to you, but you can compare it to other programming languages and see for yourself.

2. Versatility:

Python is a versatile language used in various domains such as web development, data analysis, artificial intelligence, scientific computing, and more. Learning Python opens up opportunities in many different fields and gives you a taste of what these fields are like. You can't say you don't like the dish if you haven't tasted it.🤷

Contrary to what most people believe, having a taste of various domains of software development is a good thing. This helps you decide where you want to specialize, as opposed to choosing an area as soon as possible without knowing what other areas are like. Python gives you that opportunity to try different areas.

3. Large Community and Resources:

Python is a really popular programming language, and as such, has a vast community of developers who contribute to libraries, frameworks, and resources. This means it will be easier to get help in your learning journey, and there will be a lot resources to learn from, which will in turn reduce the chances of you giving up on learning.

Now, some may say learning JavaScript is just as easy as learning Python. However, in my opinion, it's not. Learning JavaScript comes with learning HTML and CSS too. And CSS is not for everybody. Not to mention the number of JavaScript frameworks out there, ready to choke and overwhelm you.
In fact, Thanos misused the Infinity Stones by wiping out half of the human population. He could have used them on half of the JavaScript frameworks instead.😂

Conclusion

Programming is challenging. Choosing Python as a first language is a great way to avert some of the challenges that come with learning how to code. After learning how to code in Python, you can choose a more difficult language with which you can further learn about other areas of software engineering and coding.

we_are_not_scared_of_Devin!😁

Happy Coding!😊

What exactly is an API

Jima Victor — Mon, 11 Mar 2024 11:46:17 +0000

Introduction

One of the terms thrown around a lot in the world of software development is "API" (Application Programming Interface). In fact, the term "API" is as popular as it is relevant in the field of software engineering.

As a beginner in programming, I had some issues understanding what the term "API" meant, and I believe a lot of beginners out there are facing a similar problem too. If you are one of those finding it difficult to understand what exactly an API is, then this article is for you.

In this article, I'm going to be explaining what an API is, providing different examples of an API, and everything you need to properly understand what an API is.

Let's get started!

What is an API

Simply put, an API is a standardized means through which an application can communicate, interact or share resources with another. You can call it an interface if you will. An API is to programmers, what a UI is, to users.

A lot of resources online use the restaurant analogy to explain APIs, which is great. However, I like to think of an API as a ladder that enables you to change a light bulb.

You can compare an API to a ladder that provides access to a light bulb. Just like how a ladder allows someone to reach a lightbulb that is out of reach, an API enables access to certain functionalities or data that may be otherwise inaccessible. The API defines the steps (or "rungs" of the ladder) that developers can use to interact with the underlying system or service, just as the ladder provides steps for someone to reach the light bulb.

The main benefit of APIs lies in the fact that it abstracts away the low-level details of how a system works, and gives you an easier way of accessing the functionalities of that system.

Let's take the DOM API for example, the DOM API provides a standardized way for developers to interact with HTML documents in web browsers. It abstracts away the low-level details of how the DOM (Document Object Model) is implemented, allowing developers to manipulate the structure, content, and styling of web pages using a set of classes and interfaces. This abstraction simplifies web development by providing a consistent interface for accessing and modifying HTML elements, regardless of the underlying browser implementation.

Difference between APIs and REST APIs

Today, it is very easy for a newbie to think that programming is all about the web. Due to the popularity of web programming, some developers think APIs and REST APIs are the same thing. They're not!

As previously explained, an API is a standardized means through which an application can communicate, interact or share resources with another. From this explanation, you can see that REST APIs qualify as APIs, but they do not represent the entire idea of APIs. You can think of them as a subset of APIs.

The DOM API is not a REST API but it is still an API.

The Java Swing API is not a REST API but it is still an API.

The Windows Registry API is not a REST API but it is still an API.

The OpenGL API is not a REST API but it is still an API.

The DirectX API is not a REST API but it is still an API.

The Vulkan API is not a REST API but it is still an API.

So what is the takeaway? All REST APIs are APIs, but not all APIs are REST APIs.

REST APIs are APIs that follow the principles of the REST (Representational State Transfer) architecture.
The REST architecture is an architecture that is used to design APIs that allow developers to communicate with applications using the HTTP protocol. Not all APIs are designed like this.

You can learn more about REST APIs and their principles in this article.

Difference between APIs and Libraries

Another area where there is a confusion is distinguishing between APIs and libraries.

A library, is a collection of pre-written code or functions that can be used by developers to perform specific tasks or implement certain functionality. Libraries are typically packaged as compiled code or source code that developers can include in their own projects.

However, in order to leverage the functionality of these libraries, an API has to be provided. This API comes in form of the list of methods, functions, classes, and other interfaces provided by the library to its users.

So what is the takeaway? The library provides the functionality, while the library's API provides a way to access this functionality through the list of methods, functions, classes, and other interfaces that it provides.

A very common example would be the React library.

The React library provides the functionality of building user interfaces for web applications. This functionality can be accessed using the React library's API, which includes hooks, such as useState, useEffect, useContext, etc. These hooks allow developers to add state and lifecycle features to functional components.
Also part of the React library's API, are components, which allow developers to encapsulate reusable pieces of UI.

Conclusion

APIs are a very important aspect of programming. They help us (as developers) abstract away all of the low-level details while providing us with a standardized means for accessing the functionalities of an application. There are different types of APIs, some are provided for applications that are accessible locally, while others are provided for applications that are accessible over a network. These APIs are also present in frameworks, libraries, and platforms, enabling developers to integrate their code with existing software seamlessly. By utilizing APIs, developers can save time and effort by leveraging pre-built functionalities rather than reinventing the wheel.

Markdown as Fast as Possible

Jima Victor — Wed, 31 Jan 2024 09:09:45 +0000

As a developer, in order for you to write a post on the DEV community, you need to know some markdown. Also, writing readme files on GitHub requires some markdown knowledge.

In this post, I'm going to be introducing the markdown language, and also show you how to use it.

What is Markdown

What if I told you markdown is markup? Would you believe me? Well, you better do.

Both HTML and markdown are examples of the markup language. As well as LaTeX and XML.

HTML and markdown are so similar to the point that you can actually write HTML in a markdown file (I didn't know we could do that until recently).

So, if markdown is markup, what is markup?

What is Markup

Markup refers to the set of symbols or codes inserted into a text document to specify how the document should be formatted or interpreted.

From the above definition, you can see that markdown, HTML, LaTeX, and XML fall under the category of markup as a language.

Markdown was created to be a simple markup language that could be easily converted into HTML while still being readable as plain text.

Writing Markdown

To start writing markdown, you can open any text/code editor of your choice and create a file with .md extension. You can also use the .markdown extension, but the .md is commonly used.

After creating this file, you can begin writing markdown.

Alternatively, you can use an online markdown editor like StackEdit or HackMD.

Markdown Syntax Overview

Here's some of the most frequently used markdown syntax elements:

Syntax	Explanation	Example
`#`, `##`, `###`, etc.	Used for creating headings. Prefix with one to six `#` symbols for heading levels one to six.	`# Header 1` `## Header 2` `### Header 3`
``, `_`, `*`, `__`	Used for emphasizing text. Surround text with `` or `_` for italics, `*` or `__` for bold.	`Italic` `Bold`
`-`, `*`, `1.`, `2.`, etc.	Used for creating ordered and unordered lists. Use `-` or `*` for unordered lists and numbers for ordered lists.	`- Item 1` `1. Item 1`
`[]`, `()`	Used for creating hyperlinks. Wrap link text in square brackets `[]` and the URL in parentheses `()`.	`[Link Text](URL)`
`![]`, `()`	Used for inserting images. Similar to links but with an exclamation mark `!` before the square brackets `[]`.	`![Alt Text](URL)`
`>`	Used for creating blockquotes. Prefixed with `>` at the beginning of a line.	`> This is a blockquote.`
`	Used for displaying inline code. Enclose code within backticks `.	`Inline Code`

Here's a template for creating a table:

| Column 1 | Column 2 | Column 3 |
| -------- | -------- | -------- |
| Text     | Text     | Text     |

Here's a template for creating a codeblock:

```python
def greet():
   print("Hello, Markdown!")
```

The code blocks are created by enclosing any code within three backticks. Specifying the programming language after the opening backticks enables syntax highlighting.

Conclusion

Markdown is an essential tool for all developers. It's a type of markup language that lets you easily format text (kind of like an alternative to HTML). In this post, I have introduced markdown, and also presented the most frequently used Markdown syntax elements.

Now you can start writing markdown from here. If there is something you don't know how to format, you can simply google how to do it. The answers are very easy to find online. With more practice, you get better!

How to convert mp4 to mp3 using python

Jima Victor — Thu, 19 Jan 2023 15:28:30 +0000

In this tutorial, I am going to be showing you how to convert files from mp4 to mp3, using python. In order to do this, we're going to be using the moviePy library, and it's only going to take about three lines of code. Yes! Three lines of code. That's the beauty of python as a lazy programmer😁.

Let's begin.

Installing moviePy

Firstly, we're going to need the moviePy library on our computer. So run the following command to install it:

> pip install moviepy

Import the necessary modules

from moviepy.editor import *

Load the mp4 file

Using the VideoFileClip method, we would load our video into a variable video

video = VideoFileClip("example.mp4")

where example.mp4 is the filename and the format of the video you want to convert.

Extract audio from video

Then, we are going to extract the audio from the video and save it with our desired filename.

video.audio.write_audiofile("example.mp3")

where example.mp3 is the filename and the format of the audio extracted from example.mp4.

Final code

from moviepy.editor import *

# Load the mp4 file
video = VideoFileClip("example.mp4")

# Extract audio from video
video.audio.write_audiofile("example.mp3")

So if you've done everything correctly, and run your code, you should see your conversion in progress in your terminal.

How to Create a Flip Card with CSS

Jima Victor — Mon, 28 Nov 2022 03:19:42 +0000

In this tutorial, we're going to be learning how to build out a flip card using html and CSS.

Prerequisites

This tutorial assumes basic knowledge of HTML and CSS: including topics such as flexbox, CSS pseudo selectors and how to properly layout elements using CSS.

This tutorial is not for absolute beginners, and as such, will not explain every basic concept.

Before we start, I will like to explain the step-by-step process we're going to follow in order to build out this flip card. So that you would know what to expect and have an idea of what we are doing even as we build along.

How this Flip Card will be built

Firstly, we're going to create a container that is going to represent our flip card.
In the container we've just created, we're going to create another container that is going to have the front side and the back side of the card (this is also going to be the container that rotates/flips).
In the container we've just created in step 2, we're going to place two containers in it: one would be for the front side while the other would be for the back side of the flip card.
The next thing we're going to do, is to properly align the front side and the back side of the flip card, then rotate the backside, in order to place the content properly whenever the card flips.
Then finally, we would apply the rotation.

Let's begin...

Create the Flip Card container

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Flip Card</title>
  </head>
  <body>
    <div class="flip-card"></div>
  </body>
</html>

Create the both sides of the Flip Card

To create the both sides of the flip card, we must first create a container to hold them:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Flip Card</title>
  </head>
  <body>
    <div class="flip-card">
      <div class="flip-card-inner"></div>
    </div>
  </body>
</html>

Now we can place the both sides of the flip card in the div we've just created.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Flip Card</title>
  </head>
  <body>
    <div class="flip-card">
      <div class="flip-card-inner">
        <div class="flip-card-front"></div>
        <div class="flip-card-back"></div>
      </div>
    </div>
  </body>
</html>

Add some content on both sides of the card

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Flip Card</title>
  </head>
  <body>
    <div class="flip-card">
      <div class="flip-card-inner">
        <div class="flip-card-front">
          <h1>This is the front side</h1>
        </div>
        <div class="flip-card-back">
          <h1>This is the back side</h1>
        </div>
      </div>
    </div>
  </body>
</html>

What we did here, was to add some content to differentiate between the front side and the back side of the flip card.

Align the both sides of the Flip Card

At this point, we are going to be writing some CSS.
Copy the following CSS to your CSS file to apply the recommended styles:

* {
  padding: 0%;
  margin: 0%;
  box-sizing: border-box;
}
body {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.flip-card {
  height: 300px;
  width: 300px;
  border: 1px solid black;
}
.flip-card-inner {
  height: 100%;
  position: relative;
}
.flip-card-front,
.flip-card-back {
  width: 100%;
  position: absolute;
  text-align: center;
}

The above CSS will not only align the both sides of the card, but will also add a little extra styles to our html page to ensure things look a little nicer.

Here is what we have now:

And it doesn't look really nice. This is because what we did was to place one side of the card on top of the other. This is how the card is meant to look for now, and as we progress, it will look better.

Align the back side of the card

So the next thing we need to do, is to properly align the back side of the card.

In order to do this, we need to rotate the back side of the card. We are doing this because, the back side of the card is meant to be a reverse image of what we have on the front side. If we do not rotate the back side of the card, when the card is flipped, the text on the back side will not be properly displayed.

Add the following style to the back side:

.flip-card-back {
  transform: rotateY(180deg);
}

Learn more about the transform property

Now this is what we have:

And it still doesn't look nice, but we're getting there.

Apply rotation on hover

The next thing we need to do, is to apply our rotation.
To achieve this, add the following styles:

.flip-card-inner {
  transition: transform 0.6s;
}
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

Hide backface-visibility

If you've done everything correctly to this point, you'd notice that the card still doesn't display properly, and even after the card is flipped, the text is still not properly displayed on either side of the card. This is because we haven't hidden the backface-visibility of each side of the card.
Here's how we can hide them:

.flip-card-front,
.flip-card-back {
  backface-visibility: hidden;
}

Learn about the backface-visibility property

Preserve the 3d view after rotation

Now if you check, you'd notice that we're almost there. The only remaining problem, is the fact that after the card has been flipped, the back side of the card is a mirror image of what it is supposed to be. This is how you fix it:

.flip-card-inner {
  transform-style: preserve-3d;
}

The default value for the above CSS property is "flat". This is what makes the back side of the card to look the way it did. We don't want the value to be set to flat by default, so we changed it to be "preserve-3d" instead.
Learn about the transform-style property.

Add the above styles to your CSS and you'll be good to go.

Add Perspective

The final thing we need to add is the perspective.

What the perspective property does, is to allow you set the distance between you (the viewer) and the card. The smaller the value, the closer the card would be; and the greater the value, the farther the card would be.

.flip-card {
  perspective: 1000px;
}

The perspective property is just a way of representing 3d objects on 2d planes. By including it, the 3d effect on the card is further enhanced.

And that's it! You have a flip card now.

How to add dark mode using javascript

Jima Victor — Wed, 29 Jun 2022 08:50:22 +0000

We're going to be adding dark mode to a simple website using javascript and the localStorage property of the window object.

The localStorage property will be used in order to maintain dark mode even after the page is refreshed.

Note: Before we start, I'd like to say that the best way to gain a lot from this tutorial is by following along, especially if you are a beginner.. (though it's not necessary, it's better if you could).

Some fun facts about localStorage

localStorage is quite similar to sessionStorage; the difference is that in sessionStorage, data is cleared whenever a session ends (a tab or window is closed) while in localStorage, data is retained even after the end of a session.
It stores data in key value pairs like in JSON format.
localStorage for a private tab is cleared when the last private tab is closed.
localStorage size is limited to 5MB per app per browser
It can only store strings.

Let's begin...

Create an index.html file and copy the following html code into it.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>dark mode</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="box">i am a box</div>
    <button class="switch">toggle dark mode</button>
    <script src="darkmode.js"></script>
  </body>
</html>

So for the above html code, what we did is link our html file with our style.css and darkmode.js files. We also created a box with some text and a button to enable us switch dark mode.

Create a style.css file and copy the following code into it.

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.box {
  height: 100px;
  width: 100px;
  background-color: black;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}
.darkMode {
  background-color: black;
}
.darkMode > .box {
  background-color: white;
  color: black;
}

In our style.css file:

We first set the height and width of our body element and centered our box div in the body using flexbox. We also change the flex-direction from row to column to make it look prettier.
Secondly, we set height and width of our box div, gave it a background color and centered the text inside of it using flexbox. We also added a margin bottom to it so as to create a little space between the box and the button
We also added some styles for our dark mode but it doesn't have any effect on the page yet, as we are going to activate it using javascript.

Create the darkmode.js file and add the following code to it.

let darkMode = localStorage.getItem("darkMode");

if (darkMode == "true") {
  addDarkMode();
}
document.querySelector(".switch").addEventListener("click", function () {
  darkMode = localStorage.getItem("darkMode");
  if (darkMode == "true") {
    removeDarkMode();
  } else {
    addDarkMode();
  }
});

function addDarkMode() {
  darkMode = localStorage.setItem("darkMode", "true");
  document.getElementsByTagName("body")[0].classList.add("darkMode");
}

function removeDarkMode() {
  darkMode = localStorage.setItem("darkMode", "false");
  document.getElementsByTagName("body")[0].classList.remove("darkMode");
}

Here's what we did in the javascript code.

We first try to get the value for the dark mode using the getItem() method. The getItem() method takes a key as its argument and returns the value for that key (if it is set) or null (if it is not).
The next thing we did, was to check if the value is set to true, and if it is, we call the addDarkMode() function which updates the value of the darkMode variable (the variable was declared at the top using the let keyword, so it can be updated) by setting the value of the darkMode key to true using the setItem() method. The first argument of the setItem() method is the key, while the second argument is its value. Then we add the darkMode class to the body element. So those CSS styles under the darkMode class can be added.
The final thing we did, was to add a click event listener to our button after it has been queried from the DOM, we fetch the value of the darkMode from the localStorage and check if it is true, so we can call our addDarkMode() function or false so we can call our removeDarkMode() function. The removeDarkMode() function is the same with the addDarkMode() function; the only difference is that the removeDarkMode() function removes the darkMode class from the body element while the addDarkMode() function adds it.

Once you've clicked the switch button, the value for the dark mode is set and will always be remembered by the browser even when the page is refreshed or at the end of a session. This is the reason why we try to get the value of darkMode at the top of our javascript code. So that once the page reloads, or we visit our website again, It will first get the value that we have set previously and set the dark mode depending on what the value of the key may be (true or false).

Javascript forEach - loop through js array items

Jima Victor — Fri, 28 Jan 2022 17:01:01 +0000

Javascript forEach - loop through js array items

So imagine you went fruit shopping and you came back home with a basket of fruits. You need to store these fruits separately i.e you need all apples to be put together, all bananas to also be put together, all oranges to be put together and so on..

If you only had around 20 fruits in the basket, it will be relatively easy to complete this task. However, if the number was increased to about 50 - 60 fruits in this basket, then it becomes difficult and the difficulty of this task gradually increases as the number of the fruits does.

So in a case where you have a large number of fruits to be sorted, you're going to need something or someone that can make this process a little faster and less of a hassle.

Now, to be really honest, I have no idea on how to help you sort your basket full of fruits. But if we can imagine that basket to be an array of fruits in javascript, then I can think of a solution using the forEach method in javascript.

The forEach method is a higher order function (a function that takes a function as an argument). Other types of higher order function include: sort, reduce, filter and map.

Syntax of the forEach method:

// Arrow function
forEach((element) => { /* ... */ } )
forEach((element, index) => { /* ... */ } )
forEach((element, index, array) => { /* ... */ } )

// Callback function
forEach(callbackFn)
forEach(callbackFn, thisArg)

// Inline callback function
forEach(function(element) { /* ... */ })
forEach(function(element, index) { /* ... */ })
forEach(function(element, index, array){ /* ... */ })
forEach(function(element, index, array) { /* ... */ }, thisArg)

The above syntax can be found on the MDN Web Docs

The forEach method takes a callback function (a function passed as a argument into a higher order function) as its parameter, and this callback function takes three parameters: the currentElement, the indexOfcurrentElement, and the array itself.

array.forEach(function(currentElement, indexOfcurrentElement, array), thisValue)

The return value of the forEach method is undefined. It only calls a callback function for each of the elements provided in an array.

Now back to our basket of fruits..

Let's say we have an array that looks like this:

const basketOfFruits = [
  "apple",
  "orange",
  "grape",
  "banana",
  "watermelon",
  "grape",
  "apple",
  "banana",
  "orange",
  "watermelon"
];

and we want to group and know how many apples, bananas, oranges, watermelons and grapes are in our basket. A good way to do this would be to use the ForEach method.

So let's create individual arrays where we can group these fruits into.

const apples = [];
const bananas = [];
const watermelons = [];
const grapes = [];
const oranges = [];

We are going to be sorting our various fruits into their arrays respectively. For this, we use the forEach method.

basketOfFruits.forEach(sortFruit);

and the body of our sortFruit function will be as follows:

function sortFruit(fruit) {
  switch (fruit) {
    case "apple":
      apples.push(fruit);
      break;
    case "orange":
      oranges.push(fruit);
      break;
    case "banana":
      bananas.push(fruit);
      break;
    case "grape":
      grapes.push(fruit);
      break;
    case "watermelon":
      watermelons.push(fruit);
      break;
    default:
      console.log("Not a Fruit");
  }
}

So what the above function will do is to go into the basketOfFruits array, check each fruit and put them into their respective arrays.

So if we want to know the number of the different fruits we have individually, we can just check the length of each of their arrays

console.log(
  apples.length,
  bananas.length,
  oranges.length,
  watermelons.length,
  grapes.length
);

Do you need to be good at math to be a programmer?

Jima Victor — Fri, 14 Jan 2022 04:21:10 +0000

So you want to get into programming or you've already been programming and you've been hearing a lot of people saying you need to be good at math in order for you to be successful as a programmer.

So you are now wondering if math is really necessary for you to become a good programmer.

This question is one question that is really common among beginners, especially those who do not have any background in mathematics or any STEM related field for that matter.

Well, the simple answer to this question is no. You do not need Einstein level mathematics to be a programmer and you do not need to be good at math in order to start programming.

Now, will the knowledge of mathematics be helpful in your career as a programmer? Yes! Definitely! But it is not necessary. If you are already good at math, it will set you at a better position when it comes to learning and if you are going into an area like machine learning or game development, then you are really going to need mathematics.

Come to think of it, mathematics is just a tool for analysis and problem solving. Mathematics helps in problem solving the same way programming languages have been created to enable us communicate with computers. Both our programming languages and mathematical skills can be considered as tools. What i like to consider as the real skill is critical thinking and problem solving.

So the real question should be "do you need to be a good problem solver in order to be a good programmer?" And the answer to that is a resounding yes. Although, this is not really required when you're just starting out, but if you are going to be a good programmer, you need to be a good problem solver at some point.

The reason why a lot of beginners struggle with programming is because they are not yet very conversant with the new way of thinking and solving problems using code and this is what bring about the long hours in front of a computer trying to figure things out. But as your skills develop, you'd become a lot faster in figuring things out by yourself.

Programming is a field that tests your ability to research and think critically. And these are skills that will gradually improve with time as you continue programming.

So as a programmer, you now know you need to be a good problem solver. Now the next question would be "how do you improve your problem solving skills as a programmer?". Well, the only real way to do that is by consistently solving problems that are a little above your level. You don't want to do anything too easy because you're not going to improve, or anything too difficult because you're more likely to give up. Just move one step at a time at your own pace.

Here are some websites you can actually use to improve your problem solving skills.

HackerRank
Codewars
CodeChef
LeetCode
Exercism
JSCodebox - for JavaScript developers

Programming is a field that really improves your ability to solve problems and the skills you acquire in programming can be very much applied in other areas of your life.

Always remember, you can be given any problem solving tool to solve a problem with, but as long as the problems don't change, the algorithms remain the same.

HtmlCollection vs NodeList in Javascript

Jima Victor — Tue, 11 Jan 2022 04:43:32 +0000

At some point in your journey as a developer, you might have come across this error.

If you haven't come across this error, maybe one day you will.

The above error occurs as a result of trying to use the forEach array method on an htmlCollection.

What is an htmlCollection

Well, an htmlCollection is a live and ordered list of nodes that represents a collection of HTML elements extracted from the DOM.

The htmlCollection may seem very much like an array, but it is not. That’s why whenever you try to use array methods like forEach(), push(), or join() on an htmlCollection, you get different types of errors similar to the one above.

Difference between a nodeList and an htmlCollection

Another collection of objects that happens to be very similar to the htmlCollection, is the nodeList. While they may both be an array-like list of html elements, the htmlCollection is a live list while the nodeList can either be live or static.

Difference between live and static

Being live means that any changes made in the underlying document will be automatically updated in the htmlCollection while being static means that whenever there is a change in the DOM, it doesn’t affect the htmlCollection.

Note: The nodeList may not be an array. However, it is possible to iterate through nodeLists using the forEach() method in some browsers.

In order to prevent the changes made in the DOM from affecting the elements in your htmlCollection, you will first need to convert the htmlCollection into an array.

How to Convert an htmlCollection into an Array

The following methods are some of the methods in javascript that can be used to convert an htmlCollection into an array:

1. Array.from()

For instance, if we have an htmlCollection as follows:

var headers = document. document.getElementsByClassname(“heading”);

The above can easily be converted into an array by using the following syntax:

arrayOfHeaders = Array.from(headers);

2. Spread operator (…)

For example:
If we have a method that returns an htmlCollection like:

var buttons = document.getElementsByClassname(“button”);

We can make use of the spread operator to input the values of buttons into an array and maybe store them into a variable if you want.

var arrayOfButtons = […buttons];

3. Slice() method

The slice() method can be used for converting an htmlCollection by creating a variable for the new array and using the following method:

var arr = [].slice.call(document.getElementsByName(“classname”));

Methods that return a NodeList

document.querySelectorAll()

document.getElementsByName()

Methods that return an htmlCollection

document.getElementsByClassName()

document.getElementsByTagName()

For a more detailed explanation, you can make reference to the documentation via the links below:

For nodeList: https://developer.mozilla.org/en-US/docs/Web/API/NodeList

For htmlCollection: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection

My blog --- https://webcodespace.com/

How to add Color to your code snippets using markdown

Jima Victor — Sat, 01 Jan 2022 10:36:47 +0000

Which one of these look better?
this?👇

function printHello() {
 console.log("Hello"); // prints hello to the console..
}

or this..👇

function printHello() {
 console.log("Hello"); // prints hello to the console..
}

That's right! The code snippet with colors definitely looks better and there are many advantages of using this feature built into text editors.

This feature that enables us to add colors to our code is known as syntax highlighting and it makes it easier and more enjoyable to read and understand code.

How to add syntax hightlighting in markdown

This is actually very easy to implement. All you have to do is add the name of the the programming language after the backticks in your markdown editor.
like this👇



```javascript
function printHello() {
 console.log("Hello"); // prints hello to the console..
}
```

and viola! You're done!!

Make the world beautiful today by adding some color to it😊
Happy New Year Coders🎉🎉🎉..

How to build a simple BMI calculator using html and javascript

Jima Victor — Tue, 28 Dec 2021 12:06:17 +0000

This tutorial is going to cover how you can build your very own BMI calculator using simple html and javascript.

What is a BMI calculator?

BMI stands for Body Mass Index. A BMI calculator is just a simple calculator that can be used to measure the ratio of a person's weight to the square of a person's height. The aim of the BMI calculator is to find out if a person is overweight, underweight or have a good weight.

The formula for BMI is given as follows:

BMI = weight/ height²

where the weight is measured in kilograms and the height is measured in metres. The SI unit of BMI will be given in kg/m².

Note: There's no way to distinguish between fat and muscles using BMI. Therefore, a person with a high BMI due to muscle mass need not worry about health issues associated with obesity or being overweight.

Prerequisites:

This tutorial assumes you already have a basic understanding of html, css and javascript and is intended for anyone who is learning how to code in javascript and also looking for a little project to practice with.

We're not going to be using any css in this tutorial, so feel free to style this project the way you like.

HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="calculator-container">
        <h1>BMI CALCULATOR</h1>
        <p>Height in meters:</p>
        <input class="height-input-field" type="text">
        <p>weight in kilograms:</p>
        <input class="weight-input-field" type="text"><br>
        <button class="calculate"> Calculate</button>
    </div>
    <h3 class="result"></h3>
    <p class="result-statement"></p>
    <script src="script.js"></script>
</body>
</html>

The above code is the entire HTML we will be using for the project. Nothing complex, just all the elements needed to have the calculator.

Javascript code:

var heightInput = document.querySelector(".height-input-field");
var weightInput = document.querySelector(".weight-input-field");
var calculateButton = document.querySelector(".calculate");
var result = document.querySelector(".result");
var statement = document.querySelector(".result-statement");
var BMI, height, weight;

calculateButton.addEventListener("click", ()=>{

    height = heightInput.value;
    weight = weightInput.value;
    BMI = weight/(height**2); 
    result.innerText = BMI;

    if(BMI < 18.5){
        statement.innerText = "Your BMI falls within the underweight range";    
    }else if((BMI > 18.5) && (BMI < 24.9)){
        statement.innerText = "Your BMI falls within the normal or healthy weight range";
    }else if((BMI > 25) && (BMI < 29.9 )){
        statement.innerText = "Your BMI falls within the overweight range";
    }else{
        statement.innerText = "Your BMI falls within the obese range";
    }
});

Javascript Explained:

To explain the javascript, let's split the code into 3 parts.

Part 1:

var heightInput = document.querySelector(".height-input-field");
var weightInput = document.querySelector(".weight-input-field");
var calculateButton = document.querySelector(".calculate");
var result = document.querySelector(".result");
var statement = document.querySelector(".result-statement");
var BMI, height, weight;

In this part of the code, all we did was to get from the DOM, the html elements needed in the javascript.
In the last line of the above code, we declared the variables for the BMI, the height and the weight.

Part 2:

calculateButton.addEventListener("click", ()=>{

    height = heightInput.value;
    weight = weightInput.value;
    BMI = weight/(height**2); 
    result.innerText = BMI;

In this part of the code, the first thing we did was to add a click event listener to our calculate button.

This means that when the calculate button is clicked, the above code snippet allows us to store the value of the height and the weight that has been given to us by our users, then use those values to calculate the BMI.

Finally, the last line of the above code enables us to display the calculated BMI values to our users.

Part 3:

if(BMI < 18.5){
        statement.innerText = "Your BMI falls within the underweight range";    
    }else if((BMI > 18.5) && (BMI < 24.9)){
        statement.innerText = "Your BMI falls within the normal or healthy weight range";
    }else if((BMI > 25) && (BMI < 29.9 )){
        statement.innerText = "Your BMI falls within the overweight range";
    }else{
        statement.innerText = "Your BMI falls within the obese range";
    }
});

This is the last part of the code, and in this part, all we are interested in, is to evaluate the calculated BMI value using if/else statements.

A BMI less than 18.5 means your BMI falls within the underweight range.

A BMI between 18.5 and 24.9 means your BMI falls within the normal or healthy weight range.

A BMI between 25 and 29.9 means your BMI falls within the overweight range.

A BMI greater than 29.9 means your BMI falls within the underweight range.

If you have any questions, you can leave them in the comments below and I will try my best to answer them as soon as I can.

Best Programming Languages to Learn as a Beginner

Jima Victor — Sun, 14 Nov 2021 15:12:21 +0000

So you're just starting out and you want to learn a new programming language. But the problem is, there are so many options out there and it can really be confusing trying to choose the best language to begin with.

Maybe you've tried searching online for a good language to begin with, and you see a lot of these blog posts telling you to learn javascript or java or maybe C#.

Now I'm not saying these languages are the wrong ones and neither am I saying they the right ones.

It's just that choosing a programming language that is good for you depends on a number of factors.

These factors are there to guide you and to also reduce the confusion. So that when you finally make a choice, you're more likely to be satisfied with what you have chosen.

One other thing I will also like to point out is that, there is no best language.

All these programming languages are just tools programmers use to achieve anything they want on a computer.

When I first started out as a programmer, I knew of other programmers who could code in so many other languages and I was curious on how they could achieve that, but when I started coding, I discovered it wasn't as hard as I thought.

Why they were able to do that was because the basic concepts of programming are the same across all programming languages.

This means, if you know c++, it will be relatively easy to pick up another language like c# or java.

With that being said, it still doesn't mean you can just pick up any language and learn because the basic concepts are all the same.

You can decide to choose any language and you'll still do fine but I recommend that there should be some factors to be considered first, before choosing a new programming language as a beginner.

Factors to consider while choosing a programming language

1. Interest

What do you want to build? What do you think you will enjoy building the most? Do you enjoy playing games and think you will enjoy building them too? You can learn a good language for game development like C# and go into game development with the Unity game Engine.

Your interest in whatever you do is really important because you're more likely to be successful doing the things you love.

When you start building out the things you really like, it's going to give you a huge boost in your motivation, which will prompt you to want to keep building out things.

2. Job opportunities

For some newbies out there, the main reason they want to learn programming, is because of the job opportunities they can find.

And because of this, you need to take into consideration the jobs available to you either locally or remotely.

It wouldn't be really nice to learn c++ when the jobs around you are all based on javascript.

3. Learning curve

As a newbie developer, you'll need to understand the basics of programming before you'll finally be able to start building out projects.

As a result, you need to learn the basics of programming with a programming language that is easy to understand. I would suggest learning a scripting language first.

It wouldn't really be nice that while you're trying to understand the basics of programming, you're also struggling so hard with the syntax of the language you're trying to learn.

4. Popularity

I consider popularity to be really important due to the fact that, you're just starting out, and you're going to need all of the help that you can find.

Choosing a really popular programming language means there are a lot of people already using that language and if you get stuck along the way during learning, you can easily find some help online.

It also means there will be a lot of tutorials for whatever topic you want to learn.

Top 5 programming languages to learn as a beginner

These languages have been chosen based on the factors discussed above. In no particular order, they are:

1. JavaScript

This is the language of web developers. It happens to be a good choice due to the number of job opportunities you can find with it and also its popularity.

It is a scripting language popularly used for writing frontend code alongside with html and css. It is also commonly referred to as a client-side language.

Basic syntax for javascript:

 <!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>simple hello world program</title>
</head>
 <body>
<script type="text/javascript" charset="utf-8">
      // the hello world program
      alert("Hello, World!");
</script>
</body>
</html>

2. Java

Java is one of the languages that have remained popular for quite a long time now.

Java is a general purpose object oriented programming language which has been used commonly for the development of enterprise applications and the creation of web servers. One very popular framework used together with java is spring.

In terms of job opportunities, java still remains one of the best languages to learn.

Basic syntax for java:

// Your First Program

class PrintHelloWorld {

public static void main(String[] args) {


System.out.println("Hello, World!"); 

 }
}

3. PHP

PHP also known as hypertext processor. This happens to be one of the first server-side languages used on the web.

The syntax of this language is beginner-friendly and it also happens to be very popular.

One major framework used with PHP is Laravel. Together they are used for developing web servers.

Basic syntax for PHP:

<!DOCTYPE html>
<html>
<body>

<h1>My first PHP page</h1>

<?php echo "Hello World!"; ?>
</body>
</html>

4. Ruby

Ruby is another great choice for beginners. It is a high level general purpose programming language, commonly used in the development of web applications and also in areas like e-commerce, content management and prototyping.

One very popular framework used together with ruby is Ruby on rails.

Basic syntax for ruby:

#!/usr/bin/ruby -w

puts "Hello, Ruby!";

5. Python

Finally python.

Python is a very popular programming language and a very good one for anyone who wants to go into data science.

It is very beginner friendly and easy to understand because of its syntax.

Python can be used for a variety of purposes, from game development to the development of web servers.

Basic syntax for python:

# This program prints Hello, world!

 print('Hello, world!');