DEV Community: Josias Aurel

Object Oriented Programing

Josias Aurel — Wed, 22 Jun 2022 06:18:13 +0000

The object-Oriented Paradigm is a style of programming in which everything is considered to be an object.
An object here is an instance of a class that holds data and methods to mutate/modify the data held by the object and hence, the object's state.

Before we begin to take a deep look, let us understand some terms related to this paradigm.

Classes and Objects

You can think of a class as a general view of a group of items.

An item belonging to a group is considered an object. An object is an instance of a class i.e a specific implementation.

Each group of items has something peculiar about them.

For example, consider Fruits.
We know every fruit will have a taste, color, shape, etc. We then have pineapples, watermelon which is all
specific examples of fruits.
You can think of Fruits as being a general description/blueprint upon which every other fruit builds.
Watermelon and pineapples could also be seen as objects of the class Fruit.

Every object has a property and attribute. These properties and attributes can be thought of as key-value pairs holding data about
an object.

Methods

Methods are functions that are attached to a class.
These sorts of functions can only be called on instances of that class except for static methods which can be called from the class itself.

This paradigm encourages reusability and helps us to group items under a specific type.

In this article, we are going to look at some important concepts in the Object-Oriented paradigm namely;

Abstraction
Encapsulation
Inheritance
Polymorphism

Data Abstraction

Abstraction is a way of preventing the internal data held by an object from being accessed by some external agent.
This means that only methods of that class may access the data held by an object.
In languages like Java, this is typically done by adding access specifiers like private, public, or even protected.

Data Abstraction here is a design pattern.

It is worth noting that even methods can be abstracted in an object preventing direct access.

Encapsulation

Encapsulation is sometimes confused with Data Abstraction mainly because they are centered around
hiding stuff from a class. There is some sort of overlap here.

Unlike abstraction, encapsulation is concerned with unifying together data, and the methods that act
on that data under a single unit. This is usually to hide the way data is structured in the class.

This means that the internal structure of data as described by the class might change but the user of the class
need not be concerned by those changes as long as the method exposed by that class does the same operation.

Encapsulation is applied to restrict the direct access to object data.

Inheritance

This involves a class inheriting from another class.

Let's consider the Fruit class we described above.
We might have a higher class named LivingThing from which our Fruit will extend.

A living thing can grow, eat and eventually die. Our fruit class, inheriting from the LivingThing class
will therefore also be able to grow & eat.

In this context, we say LivingThing is a super class or parent class of Fruit while Fruit in itself is a child class of LivingThing.

Polymorphism

Polymorphism refers to providing a single generic view for objects of different types.
This generic view is typically referred to as an interface.

Looking at our Fruit example again, we know mangoes and watermelons both grow differently - but one thing is that they will both have a grow() method attached to them.

This mechanism applies even during inheritance.
This means that this grow() method may have been inherited from the LivingThing class even though it has different implementations.

You have reached the end. If you want to learn about other design patterns, then consider this article.

Programming Paradigms

Josias Aurel — Wed, 22 Jun 2022 06:16:31 +0000

A programming paradigm refers to the pattern which a program code follows.
It can be thought of as a style of programming.
Some languages will enforce a paradigm onto the programmers using it while others
allow you to program in whichever paradigm you wish.

In this article we are going to take a look at a few common programming paradigms;

Imperative
Procedural
Object-OrientedFunctional
Declarative

There are a few more interesting paradigms like reactive or mathematical
but I will limit this article to these five paradigms.

For the Object-Oriented paradigm, I will take a deeper dive in a separate article mainly because of how much it is applied and how daunting it can be to grasp.

Now you might wonder why you should even care about different paradigms.

In programming, we can have different solutions to the same problem to simply say there is not a single way
of tackling a problem. We can write code that solves the problem is different approaches and even programming languages and still make it.
Paradigms offer us guidelines in which we can structure our code for solving problems, they are merely just that.

Without further ado, let's get into it 🏃🏽

Imperative Paradigm

In the imperative paradigm, we write statements that describe the way to solve our problem step-by-step.
A statement here simply refers to some action to be carried out. One thing peculiar to imperative paradigm is that
every statement changes the program's state.

A typical example of an imperative language is C.

Let's say we want to calculate the area of a circle.
We know the area of a circle if given by $\pi \times radius^2$ so to do it step by step;


PI = 3.14

radius = input("Enter the radius : ")

area = PI*radius**2

print(area)

In the code above, we do the following;

we get the radius of a circle from the user.
we then compute the area of the circle
print the area of the circle

Every statement above changes the program's state.

In the first line, we declare the value of PI.
Next, we read some value from the user, here the state of the program is tilted towards reading from Standard Input
We then compute the area of the circle and
print the area of the circle, the program state is then towards Standard Output

Procedural Paradigm

The procedural paradigm is a subset of the imperative programming paradigm, so it
has all of the features of the imperative paradigm.

Here the program instructions are divided into subroutines or procedures
and these are just blocks of code to carry out a specific task/computation.

This paradigm encourages modularity i.e dividing your solution into smaller blocks
that do one thing and do it well. A procedure may call another procedure in itself.
This paradigm encourages reusability.

C language is a typical example of a language following the imperative procedural paradigm.

In C, we will divide each execution unit into separate functions/procedures.
We will then have the main function which will be the entry point of our program
and it is from there that every other procedure can be called.

Here is some example code to compute the area of a circle (This is not C).;

const PI: number = 3.14;

function readUserInput(): number {
  // read user input from keyboard for example
  return userInput;
}

function computeArea() {
  const radius = readUserInput();

  const area = PI * (radius * radius);

  print(area);
}

function main() {
  computeArea();
}

// more operations...

In the code above, we have defined functions readUserInput() to read input from the user
as well as a function computeArea() which should read the radius of the circle from the user as input
and then compute the area.

We then have the main function where we call out computeArea() function.

Object-Oriented Paradigm (OOP)

This is another form of the imperative paradigm.

In OOP, everything is considered an object.
Each object holds some information and methods/procedures to mutate/modify
its data.

This paradigm is very popular nowadays.

We will define classes/blueprints that will make the basis for any type of object in our code.

Some good examples of object-oriented languages include Java, Python3, and C++, etc.

You can read more about this paradigm here.

Declarative Paradigm

In this style, the program is written in a way that describes what results are expected from the program
without explicitly telling the computer how to carry out the task.

Any style that is non-imperative is said to be declarative.

A typical example of a language following this style is SQL.

SQL allows you to specify what results in you want but the inner workings of the system executing
it is none of your business.
A database might decide to store data in the form of a hierarchical structure while another might do so as tables.
Regardless of the way the database was designed, it will still execute your SQL code even if the way it does it is different.

SELECT count() FROM Africa WHERE area >= 1000000

The SQL code above will look into a table named Africa and count the number of countries having
a surface area of 1 million and above.

Functional Paradigm

This is a form of Declarative Paradigm.
A program is constructed by composing together functions.

Here, functions are capable of being used and do anything;

Assigned to variables
Passed as arguments to other functions
Returned from other functions
and much more...

With this ability, we will typically say functions are considered first class citizens.

Some examples of functional programming languages include; Lisp, Haskell while other
languages like JavaScript, Python and many more support this programming style.

In this style, we have the concept of pure functions and impure functions.
Pure functions are simply those that have no side effects i.e cannot modify an external variable, change the program's state or read/write values from/to a user.

Take a look at the computeArea() function we had from earlier;

// impure function
function computeArea() {
  const radius = readUserInput();

  const area = PI * (radius * radius);

  print(area);
}

We see that it is reading a value from the user and then printing its result.
This function is considered impure because it changes the program's state.

A pure function implementation might look like the code below;

// pure function

function computeArea(radius: number): number {
  const area = PI * (radius * radius);

  return area;
}

Here, the function does not read/write.
The radius is passed to the function as an argument and it returns the area of the circle - all this without mutating any external value
or changing the program's state.

If any function also modifies the value of an external variable, it is also considered impure. Consider the example below.

let area;

// impure function
function computeArea(radius: number): number {
  // changes the value of area which is an external variable to the function
  area = PI * (radius * radius);
}

At this point, we have taken a look at some of the programming paradigms
that are commonly used in the programming world today.

If you are interested in learning more paradigms, then consider reading this Wikipedia article.

We are going to close this here.
I hope you enjoyed reading this as much as I enjoyed writing it.

Private Fields in JavaScript

Josias Aurel — Sat, 29 Jan 2022 16:25:11 +0000

In this post, we are going to learn about private fields in JavaScript.

Before we start, I will like to apologise for not having updated my blog in such a long time. I have been absorbed with building my personal projects and learning. I also had to deal with school (and still have to) but I am trying to get back at creating content on both my Twitter account and my blog. In order to not miss anything, make sure to follow me on Twitter here

Now let us begin.

What are private fields (and public fields) ?

To get an idea of what that is, think abstraction. Let us take the example of a car.
When we buy a car, we don't know everything about the car right ? All we know is that this is a vehicle of brand Tesla, for example and that it has 4 tires.
You can think of the terms in italic as public details of the vehicle. These details are public to any individual that sees your car. Unless you work at Tesla, you won't know about the internal workings of the car. As a result, those other details hidden to us are considered private.

Now you should get an idea of what public and private fields are in general, this does not only apply in JavaScript.

In JavaScript, fields are public by default, which means that anyone can access it.
Let us define a class called Vehicle in which we will experiment with public and private fields.

Let us define that class and set some fields.

class Vehicle {
  constructor(vehicleType, vehicleBrand, wheelCount) {
    this.vehicleType = vehicleType;
    this.vehicleBrand = vehicleBrand;
    this.wheelCount = wheelCount;
  }
  getWheelCount() {
    return this.wheelCount;
  }
}

In the class above, the fields vehicleType, vehicleBrand and wheelCount are considered public fields.
If we instantiate our class, then we would be able to access the variable mentioned above very easily.

const myTesla = new Vehicle("car", "Tesla", 4);

console.log(myTesla.vehicleType);
console.log(myTesla.vehicleBrand);
console.log(myTesla.wheelCount);
console.log("Wheel Count : ", myTesla.getWheelCount());

If you run the code above, we would be able to get the value of the class fields and execute the getWheelCount() method without any issues.

Now let's see how we can define private fields or make methods private.

Let's update our class and add some private fields.
In order to make a field private, all we have to do is add a # before the field name like #fieldName.

Update the class code to look like the one below.

class Vehicle {
  #engineType; // Thermal, Electrical
  constructor(vehicleType, vehicleBrand, wheelCount, engineType) {
    this.vehicleType = vehicleType;
    this.vehicleBrand = vehicleBrand;
    this.wheelCount = wheelCount;
    this.#engineType = engineType;
  }
  getWheelCount() {
    return this.wheelCount;
  }
}

In the code above, we have defined a private field in our class called engineType. This field is accessible only within the class and therefore cannot be accessed from outside. When dealing with private field values, we must always add the # prefix to its name so that we know we are accessing a private field.

Now update the code were we instantiated our class to look like below;

console.log(myTesla.vehicleType);
console.log(myTesla.vehicleBrand);
console.log(myTesla.wheelCount);
console.log("Wheel Count : ", myTesla.getWheelCount());
console.log(myTesla.engineType);

If we instantiate the class once more and try to access the private field from outside, we get undefined as result. And if we add, the # like below;

console.log(myTesla.#engineType);

we will get a syntax error.

This is a proof that this field has effectively been made private in our class.
In order to make a method private too, we will add the # prefix to the method name,

class Vehicle {
  #engineType; // Thermal, Electrical
  constructor(vehicleType, vehicleBrand, wheelCount, engineType) {
    this.vehicleType = vehicleType;
    this.vehicleBrand = vehicleBrand;
    this.wheelCount = wheelCount;
    this.#engineType = engineType;
  }
  getWheelCount() {
    return this.wheelCount;
  }

  #getEngineType() {
    return this.#engineType;
  }

  whichEngine() {
    return this.#getEngineType();
  }
}

In the code above, I have defined a private method called getEngineType. We cannot access this method out of the class. For this reason, we could have another method execute this function and return to us the engine type of the car. Consider the whichEngine() method to be the technical support from the car manufacturing. We would not get the engine type of our car except from them and so we contact them using the whichEngine() method.

In the end, we can now update the code with our own Tesla object to look like this;

const myTesla = new Vehicle("car", "Tesla", 4, "Electric");

console.log(myTesla.vehicleType);
console.log(myTesla.vehicleBrand);
console.log(myTesla.wheelCount);
console.log(myTesla.whichEngine());
console.log("Wheel Count : ", myTesla.getWheelCount());

This will be the end for this blog post. I hope you learned something from here.

If you want to learn more about private fields, consider looking into the MDN docs

Have a nice day ;)

Classes and type in Python - Introduction

Josias Aurel — Wed, 14 Jul 2021 10:14:46 +0000

In this post we are going to discuss about Python classes and type.

We all know that Python is an object oriented language and here, everything is an object.
Everything is an object and is descendant of a class. But what you might have not know is that every class is itself decendant of another class known as type.

This might be a little confusing to grasp and i hope the examples here will make it clearer for you.

In python we have the built-in type() function which lets you view the type of any object in python.

Let us consider the example below

name = "Mike"
print(type(name)) # <class 'str'>

We see that the type of the name is a string (ofcourse you knew that).
No let us try building our own class.

We are going to build a class called Fruit and we are going to instantiate descendant fruits from our Fruit class.

class Fruit:
    def __init__(self, color, shape):
        self.color = color
        self.shape = shape

    def show_characteristics(self):
        characteristics = [self.shape, self.color]
        return characteristics

Fruits have a color, a shape and most of the time are sweet, so we are going to leave taste apart.

We know that we can instatiate a fruit from our fruit class and we have descendant.

Earlier i mentioned that even classes are descendant of another class above them. This means that strings, integers and even out fruit class has a supreme class above it.

The supreme class

When you inspect the time of an object like an instance of our Fruit or a string object like our name using the type() function, what it returns to you is the parent of that object. What will happen if we try to get the type of our Fruit class itself ?

Execute the code below

class Fruit:
    def __init__(self, color, shape):
        self.color = color
        self.shape = shape

    def show_characteristics(self):
        characteristics = [self.shape, self.color]
        return characteristics

print(type(Fruit))

What you get as output is . If you try to execute it on str, int and other python classes, you will get . Try executing it on the type too and you will get the same result.

This is because all classes and object inherit from the type class above everything else.

It is therefore possible to create classes in a less cleaner way than above.

We are going to re-create our fruit class directly from type.

Creating a class with type

If you look for type in the python help console, you see description of the arguments type takes in order to create a class.

It is worth noting that type takes either 1 or 3 arguments. When a single argument is passed, it will return the class from which the object inherits. When 3 arguments are passed, it returns to you a new class with the characteristics and attributes you pass in as last argument. More on that below

The first argument it takes is the name of the class you are creating.
The second argument is are the bases from which your class would inherit. Say you are creating a new class that inherits from str, then you will pass a tuple as second argument representing that
The third argument is a dictionary that will hold the methods and variables inside our class

Let us now create our class, We are going to recreate the same fruit class as above.

def fruit_init(self, shape, color):
    self.shape = shape
    self.color = color

def show_characteristics(self):
    characteristics = [self.color, self.shape]
    return characteristics

fruit_class = type("FruitClass", (), {"__init__": fruit_init, "show_characteristics": show_characteristics})

Let us explore what is happening here.

We are creating a class called FruitClass. It inherits from no other class (therefore the empty tuple).
Our class has some methods like init and show*characteristics* which map to the functions we created above.

We created those functions above because it will be hard to fit into the dictionary but you could make use of lambda expressions there.

What we end up with is a class that we can use. Let us try it out

def fruit_init(self, shape, color):
    self.shape = shape
    self.color = color


def show_characteristics(self):
    characteristics = [self.color, self.shape]
    return characteristics


fruit_class = type("FruitClass", (), {
                   "__init__": fruit_init, "show_characteristics": show_characteristics})

orange = fruit_class("spherical", "orange")

print(orange.show_characteristics())

Running the code above will print ["spherical", "orange"] which means our class worked.

How is this useful ?

Having knowledge of the above underlying functioning in python will help you understand more in-depth the behaviour of objects and some classes in Python. With this, you can even define your own blueprints for creating other classes and types by just creating a class that inherits from the type class above.

This gives you power to be able to define your own behaviour for objects and even set rules on what happen when a new object is created.

We are going to end here for now and hopefully we will explore this more in-depth and practically next time. I leave it to you to experiment with this knowledge.

Introduction to machine learning - Definition and common terms

Josias Aurel — Mon, 05 Jul 2021 11:06:59 +0000

Machine Learning is not a fancy new thing. You have probably heard about it several times. This concept has helped developed many software solutions and solved many problems.

What is Machine Learning ?

Computer programmers solve problems by giving instructions to the computer on what to do and how to do it in order to solve problems. This method of solving a problem is very prone to human error and bias. In this traditional method, computer programmers give instructions or rules to the computer and some information is given as output. The rules treat the information and give some output.

Machine learning by contrast, will take some information and output in order to build a model (or rules). The computer accomplishes this by making use of some mathematical operations and algorithms in order to obtain some rules for solving a problem.
Machine learning is therefore a problem solving method where the computer learns to come up with rules for solving a problem.

In this blog post, we are going to go through some basic commonly used machine learning terms.

Model

A model or machine learning model represents the patterns that has been learned by a machine learning algorithm.

Machine Learning Algorithm

A machine learning algorithm sometimes known as a predictor refer to the steps or procedure that helps to come up with a model.
These algorithms run on some data to find patterns.

dataset

A dataset is the sample data used in training a machine learning model

Weights

A weight in the context of machine learning refer to the internal variable to some equation that are fine tune during the training of a model to solve the problem statement.
Machine learning is based on mathematics and some equations under the hood are modified (fine tuned) to fit the particular situation.

bias

Bias are constants attached to the weighted input. This helps to handle situations where patterns are non-linear.

Training

The training of a machine learning model is a process whereby the computer continually loop over some sample data given to it for a given period of time, making use of machine learning algorithms to find patterns and build a model.

cost function

A cost function sometimes called loss function is a function used to calculate the error rate or error margin between the prediction of a model and the real value. An example of such a function is mean squared error

loss

Loss is the difference between the value a model has predicted and the actual value in the train data of a model

Optimizer

An optimizer is a function that serves as to modify the internal values if a model (weight and bias) to get closer to the correct output.

Neural network

When a problem is complex to solve, basic machine learning algorithms will not be good enought to solve the problem. In this case, there are special machine learning algorithms that can model complex pattern in data.
Neural networks are therefore special machine learning algorithms that finds complex patterns in data by passing it through many small tiny functions with small coefficients that have to be learned.

Neuron

This are units in a neural network layers that take some weighted inputs, applies some activation functions to produce a single output.

Activation Function

An activation function also known as a *transfer function*are functions that determine the output of a neuron in a neural network. Their output usually range between -1 and 1.
They could be linear or non-linear.
When they are linear, their output would range between -infinity and infinity.
When they are non-linear, their output will have a output values within a certain range.

Examples of activation functions include : ReLU, Sigmoid.

Activation function determine how the input of the next neuron will look like.

You have reached the end of this article.
Make sure to share it.
Suggestions are welcome 👏

eval() and Function() in JavaScript

Josias Aurel — Wed, 23 Jun 2021 04:58:11 +0000

Hey, in today's blog, we are going to briefly discuss eval() and Function() in JavaScript.

Let us begin.

Brief

eval() and Function() are two powerful tools in JavaScript that both allow you to evaluate any JavaScript expression passed to either of them as a string. They are both used for the same thing, though they differ in how they handle your expression.

Let us begin with eval().

eval()

eval() is a global function which takes a JavaScript expression as a string and executes it. It does not return anything except undefined. If you write some script into your HTML and use eval(), you will notice the output gets printed to the console while in an environment like node, you will want to use console.log(). This is because it tend to pipe the result of an expression for example to standard output or an equivalent.

Let us have an example. Say you write an app where a user inputs some value and your app has to output the result to the console. Tricky right? eval() saves you time. Just pass what the user inputs to eval and let the magic.



let userInput = "2+4";
eval(userInput); // output : 6

Function()

An alternative to eval is Function(). Just like eval(), it takes some expression as a string for execution except rather than outputing the result directly, it returns to you an anonymous function which you can call. It is a faster and more secure alternative to eval(). Let us try the same example as above but with Function().



let userInput = "2+4";
let result = Function(userInput);

If you try to log the result of above, you will get



function anonymous() {
        2+4
}

Why so ? This is because Function() returns to us an anonymous function. Looking more, we can see that the expression we passed in the string is found in the function body.
What if we add a return statement in our string ?



let userInput = "2+4";
let result = Function("return " + userInput); // which is same as "return 2+4"

Try logging result once more. We get this



function anonymous() {
        return 2+4
}

We notice we are now returning the result of our arithmetic operation. But now we want the actual value. We can get this by executing the function.



let userInput = "2+4";
let result = Function("return " + userInput)(); // which is same as "return 2+4"

Now if you log result and look up the console, you will notice we get 6, which is the result we expect.

Note

With great power comes great responsibility

eval() and Function() are really powerful tools we have at hand in JavaScript. But that power comes at a price. Arbitrary code can be executed by a technical enough user or malicious individual.

eval() is particularly dangerous. This is because it allows one to execute code with the same privileges as the caller of eval(). Say you create an app that evalues some code and stores the result on the user's machine using the FileApi in the browser. The user can use eval() against your app and get access to FileAPI too to carry out malicious tasks.
Again, eval() is much slower than Function().
Quote here

eval() is also slower than the alternatives, since it has to invoke the JavaScript interpreter, while many other constructs are optimized by modern JS engines.

Additionally, modern javascript interpreters convert javascript to machine code. This means that any concept of variable naming gets obliterated. Thus, any use of eval() will force the browser to do long expensive variable name lookups to figure out where the variable exists in the machine code and set its value. Additionally, new things can be introduced to that variable through eval() such as changing the type of that variable, forcing the browser to re-evaluate all of the generated machine code to compensate.

Learn more about eval and Function

Prefer Video ?

Create and serve a simple machine learning model

Josias Aurel — Sat, 27 Mar 2021 12:02:33 +0000

In this tutorial, we are going to create and deploy a simple machine learning model.
We are going to create the model using Python and the tensorflow library. We will finish up by serving the model in a flask application as an API (Application Programming Interface).

Let's get to it.

First create a directory/folder where you are going to put all the code from this tutorial.

The model we are going to create is a pretty simple one. Given an input x, we want to get an output 2x+1. Pretty simple! We want to create a model that will train on some sample data and come up with its own method to be able to find the right output.
Our sample data is pretty simple one.

sample_input = (1, 2, 3, 4, 5, 6)
sample_output = (3, 5, 7, 9, 11, 13)

If you try using the formula on the input, you should get a corresponding output.

Now open the project folder in your favorite editor and let's get to coding.

Creating the model

Create a new file called model.py and we are going ro write our model code in there.

First we are going to import tensorflow and keras.

import tensorflow as tf
from tensorflow import keras

Next is to create out model instance. Since it is simple one, a sequential model will be fine.

model = keras.Sequential([
  keras.layers.Dense(1, activation="relu", input_shape=[1])
])

Next step is to compile our model and give it an optmizer as well as a loss function. The loss function will help to look back at how the model progresses from errors while rhe optmizer will help optmize the model.

model.compile(optimizer="sgd", loss="mean_squared_error")

Next comes training our model.

# train model
model.fit(sample_input, sample_output, epochs=500)

You should now end up with this

import tensorflow as tf
from tensorflow import keras

model = keras.Sequential([
  keras.layers.Dense(1, activation="relu", input_shape=[1])
])

sample_input = (1, 2, 3, 4, 5, 6)
sample_output = (3, 5, 7, 9, 11, 13)

model.compile(optimizer="sgd", loss="mean_squared_error")

# train model
model.fit(sample_input, sample_output, epochs=500)

Time to test our model. Add this line at the end of the file. You can pass any value in it to see if the model works. Make sure its in the form of a list.

print(model.predict([8])) # my output [[17.074446]]

After training the model, we try to make it predict on a sample value. I choosed to test on 8 as my sample and i got ~17. If we substitute in our formula, 2(8)+1 equal 17. This confirms that our model actually works.

Saving the model

After creating the model, it is good to save it so it can be deployed more easily.
Saving the model is as simple as using the model.save() method.

Add this line at the end of your model.py file.

model.save(filepath="./")

The model.save() method takes a filepath keyword argument which is the path to which you want to save the model. I am saving my model in the root of the project.
You should see a file named saved_model.pb. This is our model and can now be shared or deployed.

Deploying the model

We are now going to create a simple flask API to serve our model.

Create a new file named app.py and add the follwing code in there.

from tensorflow.keras import models
from flask import Flask, request

app = Flask(__name__)

# load saved model from filesystem
model = models.load_model(filepath="./")

@app.route('/predict', methods=["POST"])
def predict():
    value = int(request.data)
    prediction = model.predict([value])
    # print(prediction)
    return str(prediction[0][0])

if __name__ == "__main__":
    app.run(debug=True)

First, we are importing models utility from keras and then Flask.
We can load a saved model using the models utility using the load_model method. It takes a filepath argument specifying the path to which the saved model is.

Next is we create a route which accpet POST requests.
Inside the function, we get the data sent through the request. We will get bytes, so we cast it to an integer.
We then we used our loaded model to predict the output of the value sent. We then return our prediction. Notice we cast the response a string. This is because flask allows us to return only strings, tuples or dictionaries.

Testing our API

To test your API, we are going to write a simple python program to do so.
Open a file called test.py and add the following code in it.

import requests
import sys

value = sys.argv[1]
res = requests.post("http://localhost:5000/predict", value)

print(res.content)

Testing it

python test.py 9

I get b'19.115118'. Yay it works!

You have reached the end of this tutorial.
I hope you enjoyed building and serving this simple model.

Feel free to play with the API with different values.

Final code here

If you liked this, make sure to share and follow me on twitter for more of such.

The difference between String and string in Typescript

Josias Aurel — Tue, 09 Feb 2021 19:01:22 +0000

TypeScript is a good advancement in the javascript ecosystem.
Today we are going to talk about the difference between the String and string types in Typescript.

Type error: Type 'String' is not assignable to type 'string'.

Let's take a look at the above error.

To begin, we know that whether we use String or string, we would want to refer to the same thing. But both of those are a little different.

String is a class in JavaScript to construct strings. It provides a way of creating strings using that constructor. What we get using String is an object.
If you check if it's a string or not, you will get *
object.

let name = new String('Mike');
console.log(typeof name); // object

string on the other hand does not exist in JavaScript. Rather it is used in Typescript to tell it it is an actual string.

Therefore, when you are creating a function, type or interface in Typescript, it is recommended to use lowercase string to tell Typescript you want to get an actual string. If you use String, then you will get an object (which is not what you would want).

Thank you for reading.

Create your own HTML element.

Josias Aurel — Sun, 17 Jan 2021 14:51:34 +0000

Have you ever thought about creating your own HTMl element ? If you have ever used a frontend framework like React or Vue or even Angular, you might have been amazed by the fact that you could create literally any component and have reused it throughout your app. What will typically happen with your elements is that they get compiled down into some javascript which takes care of the DOM.
But what about actually creating an HTML element ? That is what we are going to learn in this post.

At the end of this tutorialy you will be able to create your own basic HTML element.
To get started, create a new folder to contain the code from this tutorial.
Open that folder and create three files named index.html, style.css and main.js.

We are going to start with the usual HTML boilerplate like below :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Custom Element</title>
</head>
<body>
    <script src="main.js"></script>
</body>
</html>

Now that we have our basic html code, let us get a name for our element. I will name it hello-world, a pretty simple name ;). Now add your element into your HTML code, between the body tags above the script tag. You can add any text between your element tags. Your final HTML should look as such.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Custom Element</title>
</head>
<body>
    <hello-world id="hello" ishidden>
        Hello World
    </hello-world>
    <script src="main.js"></script>
</body>
</html>

We are done with the HTMl code. Time to write some javascript.
Create a class named HelloWorld which extends HTMLElement.

// Creating my own custom html element

class HelloWorld extends HTMLElement {

}

Now we need to define our element. This is to make the browser aware that we are creating a new element that we are going to reuse.
After the class, add the following line of code.

customElements.define("hello-world", HelloWorld)

What is this ?
The browser exposes a function called customElements.define which permits to define a new element that can be reused. It takes two arguments; the first being the element name (which should be the exact same as the one used in the HTML code) and a second argument which is the class of the element.

We create a class in order to have a custom element with our own properties and attributes. This permits us to as well add our own event listeners, functions and behaviours.

Now you have created your own custom html element.
It is good practice to add a constructor to your element class. You will also have to add a super() function in order to make sure you are inheriting all HTMlElement methods, attributes and properties.

Adding so, you will have a class looking as such.

// Creating my own custom html element

class HelloWorld extends HTMLElement {
    constructor() {
        super()
    }
}

You can also define custom methods like below.

// Creating my own custom html element

class HelloWorld extends HTMLElement {
    constructor() {
        super()
    }

    getId() {
        return this.id
    }
}

Above, we created a method on the element named getId() which will return the id of the element.

You can select your custom element from javascript just like you will do with any other element using document.querySelector() document.querySelectorAll() document.getElementById() etc. You can try adding an id attribute and selecting the element using a method of your choice and calling the getId() method on it.

Okay, we have created our own element using just html and javascript. Buy how can i access lifecycle hooks just like in React or Vue.
Using you defined class, you can as well have access to lifecycle methods, allowing you to execute some peice of code when for example, the component is connected to the DOM.
Below is an example.

connectedCallback() {
        if (this.hasAttribute("ishidden")) {
            this.style.backgroundColor = "grey"
            this.style.pointerEvents = "none"
        }
    }

This method connectedCallback will be executed when the element will be connected to the DOM, in other words, mounted. In the example, we are checking if the element has the ishidden attribute and we then change the background color and pointer event.
Your final javascript should look as below now.

// Creating my own custom html element

class HelloWorld extends HTMLElement {

    constructor() {
        super()
    }
    connectedCallback() {
        if (this.hasAttribute("ishidden")) {
            this.style.backgroundColor = "grey"
            this.style.pointerEvents = "none"
        }
    }

    getId() {
        return this.id
    }

}

customElements.define("hello-world", HelloWorld)

Now we have a basic element working.

It is good to note that connectedCallback() is not the only hook. We also have the disconnectedCallback() and attributeChangedCallback()

What about styling ?
You can directly access the element using its name in CSS. In my CSS file, i added some basic styling to make it look a little good.

hello-world {
    background-color: red;
    padding: 1em;
    border-radius: 5px;
    position: relative;
    top: 4em;
}

You have reached the end of this post. I hope you enjoyed it. If you did, make sure to give me a follow on twitter. I usually tweet about tech and experimentations i do as well as tips/advices.

Some JavaScript array methods

Josias Aurel — Fri, 15 Jan 2021 20:06:53 +0000

In this post you are going to learn some very useful javascript array methods. Coupled with examples, at the end of this post you will be having a good understamding of some javascript array methods.

Before we start, let's understand what we mean by the term array method. It is simply a function that is attached to every array and permits to easily carry out some operations like filtering, summing, adding and removing elements from the array and many more.

Let's get into it!

1. Join()

The join function allows you to join elements of an array and form a single string, which is by default separated by a comma.
Example :

let myArray = ["Hello", "World!"]
myArray.join() // "Hello,World"

You notice in the output that a string is return containing the elements of the array, joined by a comma. The .join() method also optionally takes a single argument which specifies by what the elements of the array will be joined.

let myArray = ["Hello", "World!"]
myArray.join(" ") // "Hello,World"

Here will passed a string containing a space. Therefore, the elements of the array are joined and separated by the space.

It is worth noting that the separator you pass in the join method should be a string.

Try playing around with this passing different string arguments and see what happens.

2. pop() and push()

pop() and push() are methods that allow you to remove the last element and add an element at the end of an array, respectively. Let's get back to the array in our first example ["Hello", "World"].
If we execute the .pop() method on this array, the last element (which in this case is "World") will be removed from the array. When the .pop() method is executed, it returns the value of the removed element. Let's try that !

let myArray = ["Hello", "World!"]
myArray.pop() // removes the last elements and returns it, in this case it it "World"
myArray // the new array now only contains "Hello"

Now that we have seen how .pop() works, let's try .push().
Contrary to .pop() which removes the last element of the array, .push() adds an element at the end of the array. It is going to be the element you will pass as argument to .push().

// assuming we are using the array we previously removed an element with .pop()
// it should  contain only a single element ["Hello"]
// We want to add "World" at the end of it.
myArray // ["Hello"]
// 'pushing' an element at the end of the array
myArray.push("World")
myArray // ["Hello", "World"]

// Hooray 🎉 we added an element at the end of our array.

.push() can take any value you wish to add to your array. It could be a number, string, another array, an object... Anything!

3. shift() and unshift()

The .shift() method is very similar to the .pop() method with the only difference that it removes the first element of the array instead of the last element.

let favoriteFruits = ["Kiwi", "Orange", "Pineapple", "Mango"]
favoriteFruits.shift() // removes and return the first element of the array.
console.log(favoriteFruits) // ["Orange", "Pineapple", "Mango"]

The .unshift() and .push() methods are also similar but .unshift() adds an element at the beginning of the array rather than at the end.

let favoriteFruits = ["Orange", "Pineapple", "Mango"]
favoriteFruits.unshift("Apple")
console.log(favoriteFruits) // ["Apple", "Orange", "Pineapple", "Mango"]

4. forEach()

.forEach() in javascript provides an easier way to iterate through the elements of an array and perform an action on each of the elements. It takes a callback function to which each element of the array is passed through so you can perform whatever oepra
Example:

let nums = [1, 2, 3, 4, 5]
let squaredNums = [] 
nums.forEach(num => {
    squaredNums.push(num*num)
})

console.log(squaredNums) // [1, 4, 9, 16, 25]

5. map()

The .map() method provides an easy way of transforming the content of an array.
Rethinking about the content of the previous example, rather than creating a new array, we modify the current array by finding their square root.

let nums = [1, 2, 3, 4, 5]
nums.map(num => num*num) // [1, 4, 9, 16, 25]

In the example above, we take each member of the array and return an array with the square root of each of the numbers in it.

Note that when using map, the returned array does not affect the original array. It rather returns a new array containing the modified members.

6. filter()

Sometimes, you will want to throw away and sometimes preserve the content of an array. Rather than having to go through the pains of using a for loop, javascript arrays have the .filter() methid which allow you to filter an array and keep only the content you wish to keep.

let randomNumbers = [4, 12, 2, 21, 7, 5, 98]
randomNumbers.filter(number => {
    return number < 10
}) // return [4, 2, 7, 5]

In this example, we have an array of numbers of different magnitude. Our goal is to filter the array and get only the number that is less that 10. The .filter() method takes a callback function which will take charge of the values to be returned. Usually the function will return a condition to be satisfied to obtained the filtered array. In the example, we pass an arrow function which checks if the element is less than 10 and then return all element less than 10. Therefore, it returns a new array which satifies the condition returned by the callback function.

7. reduce()

Let us say we want to add all the numbers in the array [4, 12, 2, 21, 7, 5, 98]. Usually you will iterate over the numbers and add them. This will result in alot of code. Fortunately, .reduce() abstracts all the code for this kind of usecase.
The .reduce() method takes 2 arguments ; an accumulator and a next value to take care of.

let randomNumbers = [4, 12, 2, 21, 7, 5, 98]
randomNumbers.reduce((total, nextNum) => {
    total += nextNum
    return total
})

If you run the above code, it will return the sum of all the numbers in this array. One thing two note is; referencing the example above, the .reduce() method takes a callback function to which 2 values are passed : an accumulator and a next value to be processed. In this case we are taking the accumulated number and add the next one to it until we finish iterating through the array.

Create and deploy a react app to stormkit

Josias Aurel — Mon, 21 Dec 2020 14:38:45 +0000

Build and host a Todo App with React and stormkit

Hey guys! In this tutorial, i am going to show you how to build and host a todo app made in react on stormkit.
Get your machine ready and let's start.

First things first, make sure you have NodeJS installed on your computer. I will recommend having Node 12 and above.

Scaffold a new react app with the create-react-app CLI as such.

npx create-react-app todo-app

Next, open your favorite IDE and let's code.

To make sure everything works ok, type npm run start in the location you created your react app. It should open your browser (otherwise, open [localhost:3000](localhost:3000)) and you should see the react logo rotating on your screen.

I want you to delete all the files in the src folder. We are going to start from scratch.

First create a file called index.js in the src folder and add the following code.

import React from "react"
import ReactDOM from "react-dom"

ReactDOM.render(<h1>Hello World</h1>, document.getElementById("root"))

Save the file and you should see Hello World in your browser.
Now create a file called Todo.jsx in the src folder and let's create the card that will make up a Todo in our app.

import React from "react"
import "./todo.css"

const Todo = ({name}) => { 
    return (
        <li>
            <h3>{name}</h3>
        </li>
    )
}

export default Todo

Here, we are creating a basic component. It's a react hook (function component) that contains a list element as the base and contains the name of the todo we extract from its props. Notice we extract the name props in particular, here, we are making use of the destructuring syntax in ES6.
We see the component contains a stylesheet name todo.css. But we have not created that yet. Let's do this.

Create a new file name todo.css in the same directory as the todo component and add the follwing code in it. It's a pretty simple style.

li {
    box-sizing: border-box;
    font-family: monospace;
    padding: 4px;
    margin: 1em;
    box-shadow: 0 0 4px 4px rgba(245, 245, 245, 0.466);
    border-radius: 5px;
    text-align: center;
}

Let use now create the functional component.
Create a file called App.jsx in the root of src folder and add the following

import React, {useState} from "react"
import Todo from "./Todo"

const App = () => {
    const [todos, setTodos] = useState(["Eat", "Sleep"])
    return (
        <div>
        <ul>
                {todos.map(todo => {
                    return <Todo name={todo} />
                })}
            </ul>
        </div>
    )
}

export default App

The code above is the base of out todo app. We import the useState hook from react and make use of it to store some todos.
The component return a div containing an unordered list. We make use the of the earlier imorted Todo component and render their content by iterating through them and returning a Todo with the corresponding value. We are using the JavaScript Array map function.

Let's now add ability to create a todo.
Add the following after the line we made use of the useState hook.

const [currentTodo, setCurrent] = useState("")
    //listening to input
    function handleInputChange(event) {
        setCurrent(event.target.value)
        return
    }

    //listen to form submit
    function handleFormSubmit(event) {
        event.preventDefault()
        setTodos([...todos, currentTodo])
        setCurrent("") // clear the input field
        return
    }

Here we create two functions that will handle input and submit process.
The first one will listen to every key press and update the input accordingly.
The second will add the input to the current todo list and clear the input.

Let's add the form

 <form onSubmit={handleFormSubmit}> 
                <input type="text" value={currentTodo} onChange={handleInputChange} />
            </form>

Add the above code after the div containing our app. We have set the value of the input field to currentTodo in our state and listen to every input change using our earlier created function. We also listen to the submit event of our form using our handleFormSubmit function.

Your code for the App.jsx component should look as such now.

import React, {useState} from "react"
import Todo from "./Todo"
import "./app.css"

const App = () => {
    const [todos, setTodos] = useState([])
    const [currentTodo, setCurrent] = useState("")
    //listening to input
    function handleInputChange(event) {
        setCurrent(event.target.value)
        return
    }

    //listen to form submit
    function handleFormSubmit(event) {
        event.preventDefault()
        setTodos([...todos, currentTodo])
        setCurrent("") // clear the input field
        return
    }

    return (
        <div>
            <h1>React Todo App</h1>
            <form onSubmit={handleFormSubmit}> 
                <input type="text" value={currentTodo} onChange={handleInputChange} />
            </form>
            <ul>
                {todos.map(todo => {
                    return <Todo name={todo} />
                })}
            </ul>
        </div>
    )
}

export default App

We have exported our app and added a big h1 to name our app. We have also remove the sample todos from the todos states.

We have some styles imported, which we have not created yet. Create a file called app.css and add the following styles to it.

* {
    box-sizing: border-box;
}

h1 {
    text-align: center;
}

body {
    font-family: monospace;
    background-color: hotpink;
}

ul {
    list-style-type: none;
}

form {
    display: flex;
    justify-content: center;
    align-items: center;
}

input {
    padding: 4px;
    border-radius: 4px;
    border: solid;
    border-color: transparent;
}

Update index.js to look as such too

import React from "react"
import ReactDOM from "react-dom"
import App from "./App"

ReactDOM.render(<App />, document.getElementById("root"))

Reload your browser and everything should be working fine. You can write anything and press enter. This will add a new todo to your list and clear the input for you so you can create more.

We have built a functional todo app in react. It's time to host it.

We are going to use stormkit to do so.
Head over to stormkit and create an account if you do not have one yet.
Click on the Deploy now free button on the homepage and add register with your github account if you have one (you could use other providers as well). Then on the next screen that appears, click New app to create a new app and choose github.
Now connect your repositiries to stormkit. You can choose connect all your repositories or select those you want. The choice is yours here.
On the dashboard, select the repo you want to deploy.

Now the next dashboard should look like the one below. Select the one you wish to deploy.
In the next page that comes up, click on Deploy Now.

It will ask you for configuration.
Go to the build command section and write npm run build as build command and the publish folder to build´. This should successfully deploy your app. In case this signals an error saying could not findapp.css`, this should probably be github had renamed the file to start with uppercase A. Got to your github repo and modify that. Then you can redeploy.

Thanks for reading. I hope you enjoyed this post.
Here is the source code and the running app

Enjoyed this post, you can buy me a coffee

Python print() and beyond

Josias Aurel — Sun, 20 Dec 2020 12:51:05 +0000

Beyond the `print()` function in Python

Hey guys, today I am going to talk about some features of the print() function in python. You will probably have come across some of these functions while others could seem new.

Let's start by understanding the basics of the print function.
In python, the built-in print function is used to print all kinds of stuff - text, numbers, objects, dictionaries etc.
But how does this function handle that ?! You might think; it just can do it, it was made for that. But in reality, the print function in python can only handle strings.

Under the hood, anything you pass to the print() function gets converted to a string before being printed to your screen. That mean it will make use of the str() type casting and convert all other data types to strings before displaying them to your console/terminal.
Now that you know how the print() work, let's dive into its features.

Furthermore, print doesn't know how to print text to the screen. I won't go detail into that for now. Later in this post, you will know what happens under it.

Basically, you can print whatever you want . The simplest example you have come across is print("Hello World!")
It take a string enclosed in double quotes or single quotes and prints it.
You can also print multiple stuff by simply separating them with comas as such :

name = "Mike"
age = 24
print("Hello", name, "Your age is", age)
# output : Hello Mike Your age is 24

You can as well print text that takes more than a line. In this case, you will be using the newline escape character \n
Example :

print("Hello \nWorld")
# Output : 
#Hello
#World

You can also format text with it. Making use of f-strings

name = "Samson"
print(f"Hello {name}")
# Output : Hello Samson

The example above showcase the basics of the print function. It can take a variable number of values to print. Other than that, there are also some keyword arguments.
Let's dive into them

1. Separator

print() allows you to decide what separates text we print with it. By default, all the values you pass to it are separated by empty strings. But we change that. It suffices to include sep= followed by whatever you want to separate your text.
Let's make use of the previous example.

name = "Mike"
age = 24
print("Hello", name, "Your age is", age, sep="-")
# output : Hello-Mike-Your age is-24

You notice that all what we passed into it separately are separated by a -. You can modify that however you want. You just need to make sure the separator is a valid string.

2. Ending

You can specify by whatever you want your output to end with. By default, what you print end with a newline escape character \n. Let's change that and see what happens

# without modified end character
print("Hello James")
print("How are you doing")
# Output
# Hello James
# How are you doing

# with modified end character
print("Hello James", end="")
print("How are you doing", end="")
# Output
# Hello JamesHow are you doing

If we execute that, we notice the text is no more separated by a new line. Let's try that again! But this time, we want it to end by y and move to a new line.

print("Hello James", end="y\n")
print("How are you doing", end="y\n")

We get the following output

Hello Jamesy
How are you doingy

Yay it worked !

3. Writing to a file

At the beginning of this post, I said python doesn't know how to print stuff to the screen by itself. It rather uses sys.stdout and writes your text to that file.
Wait what ! Print will write text to a file object which I sent to your screen via sys.stdout. Therefore, you can modify this behaviour too in order to have this printed elsewhere.
Let's give it a try.
Write the following code:

with open("hello.txt", "w") as file_object:
        print("This message is for you", file=file_object)

Executing the above will end in a file name hello.text in the same directory with the text This message is for you in it.
Therefore, we can direct where we want our text to be printed. In this case, we created a file name hello.txt and use the file keyword argument to direct the result to be written to that file rather than our terminal. You can use this to direct any result to wherever you want, even through a socket connection.

4. Flushing

This one requires an example. Let's have one!

import time

names = ["John", "Sylvia", "Smith"]

for name in names:
    print(name, end=" ")
    time.sleep(1)

What this code should do is; print a name after a second. Try and run it and see what happens.
You notice it unexpectedly waits and print all at once. This is because since it's on a single line, it is all buffered (packed) before we get it.
Read more about buffers here
But we could go around that by simply adding the flush= keyword argument to the print function. By default it it set to False. Setting it to true will ensure every print statement is executed and freed from buffer before the next one.
The following code will make it :

import time

names = ["John", "Sylvia", "Smith"]

for name in names:
    print(name, end=", ", flush=True)
    time.sleep(1)

If you run it. It will print a name, sleep for a second and print another, all on the same line.
Yay we did it !

You have reached the end of this post.

DEV Community: Josias Aurel

Object Oriented Programing

Classes and Objects

Methods

Data Abstraction

Encapsulation

Inheritance

Polymorphism

Programming Paradigms

Imperative Paradigm

Procedural Paradigm

Object-Oriented Paradigm (OOP)

Declarative Paradigm

Functional Paradigm

Private Fields in JavaScript

What are private fields (and public fields) ?

Classes and type in Python - Introduction

The supreme class

Creating a class with type

How is this useful ?

Introduction to machine learning - Definition and common terms

What is Machine Learning ?

Model

Machine Learning Algorithm

dataset

Weights

bias

Training

cost function

loss

Optimizer

Neural network

Neuron

Activation Function

eval() and Function() in JavaScript

Brief

eval()

Function()

Note

Create and serve a simple machine learning model

Creating the model

Saving the model

Deploying the model

Testing our API

Other articles of mine that you might like

The difference between String and string in Typescript

Other articles of mine that you might like

Create your own HTML element.

Some JavaScript array methods

1. Join()

2. pop() and push()

3. shift() and unshift()

4. forEach()

5. map()

6. filter()

7. reduce()

Other articles of mine that you might like

Create and deploy a react app to stormkit

Build and host a Todo App with React and stormkit

Python print() and beyond

Beyond the print() function in Python

1. Separator

2. Ending

3. Writing to a file

4. Flushing

Beyond the `print()` function in Python