Forem: Busari Ridwan

Java: The WHORE Without The H

Busari Ridwan — Mon, 24 Jun 2024 18:37:24 +0000

After a hard fast thrust, comes Sun's 1995 release, Java. People's love for Java is abound. This is because of the Java Virtual Machine, which ensures the same Java code can be run on different operating systems and platforms. This made Sun Microsystems’ slogan for Java was “Write Once, Run Everywhere”. The WhORE,
Java, runs on different platforms, but programmers write it the same way.

Which other programming language is a WORE?

Using ChatGPT: Examples of POST and GET API Call in JavaScript

Busari Ridwan — Wed, 11 Jan 2023 10:58:59 +0000

Netizens have been talking about ChatGPT by OpenAPI and I decided to try it out. My search goes thus - "Example of get and post call in JavaScript" and below is the response I got.

In JavaScript, you can use the fetch() API to make HTTP requests, such as GET and POST requests. Here's an example of a GET request:

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => response.json())
  .then(data => {
    console.log(data);
  });

This code uses the fetch() method to make a GET request to the specified URL. The .then() method is used to handle the response returned by the server. The first .then() method is used to parse the response as JSON, and the second .then() method is used to access the data and do something with it.

For a POST request, you can use the fetch() method along with the Request() constructor to specify the request method and the request body:

const data = { title: "foo", body: "bar", userId: 1 };

fetch("https://jsonplaceholder.typicode.com/posts", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(data)
  })
  .then(response => response.json())
  .then(data => {
    console.log(data);
  });

This code creates a JavaScript object that represents the data to be sent to the server, and then it uses the fetch() method to make a POST request to the specified URL. The headers option is used to set the Content-Type header to application/json, and the body option is used to send the data as the request body.

Please note that these are examples only and the URLs are not real endpoints, that means that you will not get a real response from these URLs.
Also, in a real-world scenario, you should also handle errors and other edge cases, and add validations, loading spinners, and other features.

What's your thought on ChatGPT?

React Native: Prevent Screen Capture on Selected Screens

Busari Ridwan — Sat, 07 Jan 2023 17:05:22 +0000

Apps prevent users from recording screens or taking screenshots of screens with sensitive informations. When screen capture is disabled on an app, users usually gets a notification informing them the feature have been disabled while users who tries to record the screen(s) see only dark screens when viewing the recording.

React Native Screen Capture: Prevent Screen Recording and Screenshot

How to Prevent Screen Capture (Screenshot and Screen Record) in React Native

To prevent screen capture on a React Native app, the following package is installed and implemented as below.

Install expo-screen-capture using expo.

npx expo install expo-screen-capture

You can read more on the documentation here

Import usePreventScreenCapture from expo-screen-capture on any of your screens.

import { usePreventScreenCapture } from 'expo-screen-capture';

Call the usePreventScreenCapture(); function on the screen.

See full code below:

import { usePreventScreenCapture } from 'expo-screen-capture';
import React from 'react';
import { Text, View } from 'react-native';

export default function ScreenCaptureExample() {
  usePreventScreenCapture();

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>As long as this component is mounted, this screen is unrecordable!</Text>
    </View>
  );
}

The above steps prevents screen capture (screenshot and screen record) for the entire app. But sometimes, we just want to prevent screenshot or screen record on certain screens and not all the screens.

React Native: How to Prevent Screen Capture (Screenshot and Record) for Selected Screens (Single or more Screens)

To prevent screenshot on selected screens and not the entire app, we will be activating the prevent screen capture function when focus is on the selected screen and disable the feature when the screen is out of focus. We will simply be using the useIsFocused function of @react-navigation/native to check when the selected screen is in focus or out of focus and the preventScreenCaptureAsync and allowScreenCaptureAsync functions from expo-screen-capture we installed in the above steps to activate and deactivate the functionality respectively.

Here are the steps to prevent screen capture on selected screens.

First install the react-navigation using npm or yarn as below:

npm install @react-navigation/native

Here is the full documentation on how to install the react-navigation

Import the useIsFocused function from @react-navigation/native

import { useIsFocused } from '@react-navigation/native';

Call the useIsFocused() you just imported and assign it to a variable on the selected screen.

const isFocused = useIsFocused();

Now, install expo-screen-capture using expo if you've not done that already.
Import all the functions from expo-screen-capture using the wild card * as ScreenCapture

import * as ScreenCapture from 'expo-screen-capture';

Create to async functions using the preventScreenCaptureAsync() and allowScreenCaptureAsync() respectively.


const activate = async () => {
    await ScreenCapture.preventScreenCaptureAsync();
  };

  const deactivate = async () => {
    await ScreenCapture.allowScreenCaptureAsync();
  };

Call the activate function just created when screen is in focus and call the deactivate function when the screen is out of focus as shown in the full code below.

import * as React from 'react';
import { Button, StyleSheet, View } from 'react-native';
import * as ScreenCapture from 'expo-screen-capture';
import { useIsFocused } from '@react-navigation/native';

export default function LoginScreen() {
 // This hook returns `true` if the screen is focused, `false` otherwise
  const isFocused = useIsFocused();

  const activate = async () => {
    await ScreenCapture.preventScreenCaptureAsync();
  };

  const deactivate = async () => {
    await ScreenCapture.allowScreenCaptureAsync();
  };

if(isFocused){
       activate();
   }else{
       deactivate();
   }


  return (
    <View style={styles.container}>
      ...
    </View>
  );
}

The above prevents screen capture just on Login screen and allows screen capture on all other screens except specified.

Thank you for reading. I will like to here from you in the comments section.

Single Line and Multiline Comment in Top Programming Languages

Busari Ridwan — Sun, 01 Jan 2023 14:51:45 +0000

A comment in computer programming is a programmer-readable explanation or annotation in a computer program's source code. They are included to make the source code simpler to comprehend for humans, and are often disregarded by compilers and interpreters. A programmer can use comments to make their code more readable.

Here, I will be showing you how to comment in some of the top programming languages of 2023. Some of they languages include JavaScript, Python, Java, TypeScript, C#, C++, PHP, Shell, C, Ruby, Kotlin and Go.

Most of the C based programming language uses

How to Write Comment in VS Code, IntelliJ, Atom, Sublime and Other IDEs

Most IDE uses the Control + / on Windows and Command + / on Mac to make comment.

What Language do you write and how do you write your comments?

Javascript: Concept of OOP in ES5 vs ES6

Busari Ridwan — Sat, 05 Nov 2022 18:24:58 +0000

Javascript is originally a functional programming language. Not until ES5 was the concept OOP introduced to Javascript.

Object Oriented Programming (OOP) is the concept of liking programming to real life. This is the process of giving objects in programming the characteristics of objects in reality. E.g In reality, objects like ‘car’ have attributes like color, number of doors, number of wheel drives etc and perform some actions like start, speed, stop etc.

The replication of such characteristics of a car can be done in programming via OOP. In object oriented programming those attributes are called properties while the actions are called methods.

Ways to Create Objects in Javascript

Objects can be created using the constructor functions with prototype in ES5 and using classes in ES6.

In ES5, Object Oriented Programming (OOP) is done by creating objects using the Constructor function. Let’s say you want a Person object, you create a constructor function and pass in the properties you want to set as arguments/parameters. After passing them in, we set them to properties of the object using the ‘this’ keyword. See code snippet below.

function Person(firstName, lastName, dateOfBirth){
    this.firstName = firstName;
    this.lastName = lastName;
    this.dateOfBirth = new Date(dateOfBirth);

We then instantiate the object with the constructor function as shown below.

const person1 = new Person(‘Busari’, ‘Ridwan’, ’14-09-1998’);

The code above created the person1 object. When you console.log(person1); you should get an object.


console.log(person1);

// Outputs result to the console

Notice the dateOfBirth was displayed as an object and not as a string, this is because, we passed it to the Date object so we can use the Date methods to get the Birth Year, Birth Month and Day which you will see below.

const person2 = new Person(‘Sari’, Wan’, ’24-07-2004’);

console.log(person2.dateOfBirth.getFullYear());

// We get 2004

Now, let’s add methods which are basically functions to our Person object.

There are two ways to do this in ES5. We can either add the methods directly inside our Person object or outside using the .prototype. You will see the implementation below as you read on.

Adding the methods directly into the object in ES5


function Person(firstname, lastname, dob){
    this.firstName = firstname;
    this.lastName = lastname;
    this.dateOfBirth = new Date(dob);

    this.getBirthYear = function() {
        return this.dateOfBirth.getFullYear(); 
// the getFullYear() is a method of the Date object.
    }

    this.getFullName = () => `${this.firstName} ${this.lastName}`;

// I used template literal and arrow function above. 

}

Now let’s call our method - getBirthYear and log it to the console.

console.log(person1.getBirthYear()); // logs the birth year
console.log(person1.getFullName());  // logs the full name

Now let’s talk about the prototypes. This is actually the better way to create object methods in ES5.

function Person(firstname, lastname, dob){
    this.firstName = firstname;
    this.lastName = lastname;
    this.dateOfBirth = new Date(dob);
}

Person.prototype.getBirthYear = function() {
    return this.dateOfBirth.getFullYear();
}

Let’s do the same with the getFullName method.


Person.prototype.getBirthYear = () => `${this.firstName} ${this.lastName}`;

Let’s log the newly created methods


console.log(person2.getFullName());

That’s it for object oriented programming in Javascript ES5

Let’s now dive into Object Oriented Programming in ES6 also called ES2015.

How to Create Object in Javascript ES6 Using class keyword

We use classes to create objects in ES6. This does the same thing as the constructor function of ES5 and its prototype, but it’s just a prettier way to write it.

Let’s create our Person class with a constructor/method which takes the arguments and assign it to it’s properties.


class Person {
    constructor(firstName, lastName, dob ){
        this.lastName = lastName;
        this.firstName = firstName;
        this.dob = dob; 
// I have deliberately changed dateOfBirth to dob for ease of writing
    }

// Now let’s create our prototypes or methods.
    getBirthYear(){
        return this.dob.getFullYear();
    }

    getFullName() {
        return `${this.firstName} ${this.lastName}`;
    }
}

Now, let’s instantiate our newly created object.


const person1 = new Person(‘You’, ‘Me’, ’05-11-2022’);

console.log(person1.getBirthYear());  // 2022
console.log(person1.getFullName());   // Busari Ridwan

The code is doing same thing as the constructor function of ES5 and as you can see, it’s a shorter, easier and cleaner way to create an object Person.

See you next time...

Here are my social media handles for possible connections:
Twitter
LinkedIn

Don’t Have a Computer? Here is How to Build a Website Using Your Phone

Busari Ridwan — Tue, 18 Jan 2022 11:38:09 +0000

As a tech enthusiast, I am always reviewing websites, apps, the designs, creativity, functionalities, user experience and interface of the Web apps. I love playing around with websites and admiring the creativity of the designers.

A friend noticed this about me and advised that I started my review blog on different brand websites. That way, I will get to learn more about designs and also have an archive for my reviews.

So I decided to get my own blog but the constraint was that I don't have a personal computer. Only my phone and Internet. I said to myself, the lack of a computer won't make me procrastinate. I won't leave this for later like I always do.

One other thing about me is, I love professionality. Yes, I want a blog with a custom domain which looks very professional and user friendly.

How I started Building my Blog on my Phone

The first thing I did was to go to Google on my phone browser and searched for "How To Creat a Blog".

To be continued...
How did you learn about Wed development?

Learn Web Development Using Your Phone

Busari Ridwan — Sun, 21 Nov 2021 11:49:47 +0000

As a student from one of the rural areas of Nigeria — a country in Africa, owning a smartphone is a luxury not all parents can afford to give their children not to speak of a personal computer. However, I was lucky enough to be one of the University Scholars, a scholarship program for students with highest grades in every department. I enjoyed free hostel and $200 yearly for upkeep from which I was able to buy my first smartphone, Tecno Q1.

Before gaining admission into the university, I have always wondered how phones and computers were made, how browser were built and how Web pages were developed and what makes up Google and its ability to search other websites?

So having my first smartphone and a free WiFi in the library gave me the resources I needed to answer my questions. Google and YouTube became my best friends whom I visited every time I was in the Library.

Though, I was studying Biology, I made it upon myself to design my website too.

But how will I do this with just a phone?

So I started finding ways to build a website using my Tecno Q1. I will be sharing the resources available to phone users to build a complete website and learn Web development.

Note, a website can either be built from scratch by coding your way through or using a content management system like WordPress, Wix or Google's Blogger.

Know the basics of Web Development

Through Google searches, I came to know about HTML, CSS and Javascript which are the building blocks of every website on the World Wide Web (WWW).

HTML is HyperText Markup Language, the skeleton of every Web page which holds the content you see and read on the Web pages. The Cascading Style Sheet shortened as CSS on the other hand is similar to the outer part of the body which gives it shape and beautify the body. CSS as it called is use for styling Web pages while Javacript gives the website its functionality.

Google is your assistance for those who needs to know more about the three building blocks of a website.

How To Learn HTML, CSS and Javascript using your Phone

There are several ways to learn the basics of Web development using your phone when you have a good Internet.
W3schools is a great site to learn any programming language of your choice and Web Development with a platform to test your codes. There are also several Youtube tutorials on Web development and FreeCodeCamp is also an amazing website to learn to be a Web developer.

Android Apps to Learn Web Development/Programming

Sololearn: I personally love this app. The interface is superb and the course structures are intuitive. You get to test your knowledge after every lessons. It's also has discussion forums to help out when yiu encounter issues.

Grasshopper: developed by the tech giant, Google. It is also an amazing app that teaches users Web Development.

Android App Integrated Development Environment IDE and Code Editor on your Phone

Code editors makes your Code neater, well structured and readable. Below are samples of good Code editors to make it all easier for you. You can get the apps on your android PlayStore or Apple's Appstore.

AIDE Web
QuickEdit
DroidEdit

Get Your Website Online Using Your Phone

There are other things apart from building a website you need to know. Before your beautiful website can be seen by others around the world just like you can access Google which was built abroad from your location, you need to host your website on a server and get a domain name for your website.

What's a domain name and a Hosting Plan?

First, your website is like a beautiful house on a piece of land whose location can be determined using latitude and longitudinal measurements. The land or space your house is built on is the server or host (hostinger.com, whogohost.com are good place to buy your hosting plan) while the latitude and longitude numbers is the IP address of your website. The IP address is long numbers which can be difficult to recall by your visitors which is why we map the numbers on the domain name (address). So people know your location using the address (domain name).

A domain name can have different extensions like .com .org .net for example code.ng is my country's specific domain extension. You can get your domain name from domain brokers or registrars like namecheap or goDaddy

Most of the domain registers offer hosting service. Just make sure do your search to check which of the registrars has the cheapest domain and hosting plans and how good their service is.

Serving and Testing Your Website On Your Phone

You don't have enough fund to buy a hosting plan to serve your website or just want to test your newly developed website on your phone?
You need not worry, I've got you covered.
PAW Server is an amazing app to serve your website, with several features and guide that makes it easy to use.

Using No Code Website Builders

There some other ways to build a website without necessarily knowing how to code. These are through content management system CMS like WordPress, Blogger, Wix etc.

Most of your favorite blogs and popular news website are built using CMS. For example, TED.com was built with WordPress. You can check this out by adding /wp-admin to the Web url i.e. TED.com/wp-admin