DEV Community: Charisma Elohe

Uncaught Typeerror: cannot read properties of undefined (reading 'render')

Charisma Elohe — Sat, 10 Dec 2022 23:14:59 +0000

Encountered a blank screen after running my Server.
Everything had been rendered correctly, but none of the components was visible on the browser.

Check the render method in the ReactDOM. The likely error is wrong method of importing the ReactDOM

ReactDOM is a default export from the 'react-dom' module

Your code editor might have autocompleted the import by putting curly braces around ReactDOM ie import {ReactDOM} from 'react-dom' rather than import ReactDOM from 'react-dom'

Having it in curly braces treats ReactDOM as a named import and not a default one.

Plugin "react" was conflicted between "package.json..." and "BaseConfig..."

Charisma Elohe — Sat, 10 Dec 2022 09:17:09 +0000

I tried to start my react app by starting my server - npm start
But I kept on encountering the error above on my browser.

Here is why:

I was running my project on the right folder, but canonically the wrong one. (The capitalization of the path to the folder should be correctly capitalized as it is in your directories)

For example
D:/dev/projects/react-app-1

D:/Dev/Projects/React-app-1

The above paths are not identical.

Wordpress file upload capacity limitation. (How to increase maximum upload file size, wordpress)

Charisma Elohe — Thu, 22 Sep 2022 23:17:02 +0000

You sometimes build your website on a staging site to ensure you only push the final and most desired output to the live site.
However, trying to import the staging site file (wordpress) could prove to be an issue, like it was for me.

Wordpress by default, takes in files not more than 90MB. But the file you've exported from your staging site is probably upwards of 200 MB

Solution 1

_Edit on the .htaccess file
_


php_value upload_max_filesize 256M
php_value post_max_size 256M
php_value memory_limit 256M
php_value max_execution_time 300
php_value max_input_time 300

Solution 2

Edit on the wp-config file

Wp_config.php
@ini_set('upload_max_filesize','256M');
@ini_set('post_max_filesize','128M');
@ini_set('memory_limit','256M');
@ini_set('max_execution_time','300');
@ini_set('max_input_time','300');

These are my go to solutions for this limitation, I will update the thread with more solutions.

Django Admin Login Problem

Charisma Elohe — Wed, 21 Sep 2022 06:46:56 +0000

While creating your Django application, you're probably unable to login as the administrator to your site. And this can handicap you since you lose control.

This is a Django x NonRelational Databases limitation

Solution
While creating your superuser, ensure that your server is not running.

Stop your server from running . Ctrl + C for those in local webserver development
Create superuser python manage.py createsuperuser
Run your webserver python manage.py runserver

You're good to go.

Stripe payment gateway

Charisma Elohe — Mon, 19 Sep 2022 09:53:21 +0000

Client code and server code on the same URL

Is a common payment gateway and as a dev, you probably are required to integrate this for click commerce purposes.

You need a checkout button to make a request with.
Link a script from a Javascript file to ensure you select the button and embed functionality to it.

Create a server → to process the payment requests . This needs to be processed on a server away from the client side to ensure they do not manipulate the payment details.

Create an express server

Set up an express server. By making a directory mkdir server

Set up a new project in this directory by initializing npm init -y
Install express , the stripe library & dotenv library that shall be essential in loading our environment variables
Add a dev dependency nodemon for autoreloads / restarts whenever changes are made to your server.(dynamism)

Server.js boilerplate logic

Load the environment variables that you have set up in using the dotenv and config()
Require express
The call made when the checkout function is called is API-like and so we need to send the information in json format
Set up stripe by requiring it.
Declare the items in your store → this can be loaded from a DB. [ This ensures the client does not tweak product info from their end]. Products are declared in Dictionary like formats, where an ID has a respective value for product name and price. Capitalizes on the Map function.
- The client only sends an ID to the server, and quantity . and the rest is populated by the server.
The app should listen to the port that is taking requests. in my case, port 3000

require('dotenv').config()

const express = require('express')
const app = express()

//calls shall be made like apis. We need to send the data packets in json
app.use(express.json())
app.use(express.static('public'))

const stripe = require('stripe')(process.env.STRIPE_PRIVATE_KEY)


const storeItems= new Map([
    [1, {priceInCents:10000, name:"White Jordan Sneakers"}],
    [2, {priceInCents:15000, name: "Customized Airforce Sneakers"}],
])

app.post('/create-checkout-session', async(req,res)=>{
    try{
      const session =await stripe.checkout.sessions.create({
        payment_method_types: ['card'],
        mode:'payment',
        line_items: req.body.items.map(item =>{
            const storeItem = storeItems.get(item.id)
            return {
                price_data: {
                    currency:'usd',
                    product_data:{
                        name:storeItem.name
                    },
                    unit_amount: storeItem.priceInCents
                },
                quantity:item.quantity,

            }
        }),
        success_url:`${process.env.SERVER_URL}/success.html`,
        cancel_url:`${process.env.SERVER_URL}/cancel.html`
        })
        res.json({url: session.url})
    }catch(e){
        res.status(500).json({error: e.message})
    }

})
app.listen(3000)

Create a public directory, where all the client logic files are stored.
In the server javascript file, you’ll be required to define that the client side code will reside in this newly created directory.

app.use(express.static(”public”)

const button = document.getElementById("button")
button.addEventListener("click",()=>{
    fetch('/create-checkout-session',{
        method:'POST',
        headers:{
            'Content-Type':'application/json'
        },
        body: JSON.stringify({
            items: [
                {id: 1, quantity:2},
                {id:2, quantity:2}
            ]
        })           
        }).then(res => {
            if (res.ok) return res.json()
            return res.json.then(json => Promise.reject(json))
        }).then (({url })=>{
            console.log(url)
            //window.location = url
        }).catch(e=> {
            console.error(e.error)
        })
})

Integrate client and server

On the event listener (on the script js file), we have to make a request to the server , to prompt return of a URL to a checkout page.

In the request (parametric) , we pass in info about our purchase [id of the product , quantity etc] → we get a unique URL in return on where we’ll get the pay out.
Within this logic, we have to define success and failure redirect mechanisms.

Sessions
You need to create a session, where you’re redirected on success episodes.
Here we also define the payment methods that we accept. Methods include bank transfers, cards etcetera.

Modes→ we define the specific transaction iterations. Could be one time payments, or subscriptions etcetera.

The success and failure urls are defined here.

*success *→ ${process.env.SERVER_URL}/success.html
*cancel *→ ${process.env.SERVER_URL}/cancel.html

We use environment variables to be able to push the same code to production. we could also however use the static way by explicitly defining the url → http://localhost:3000/success.html

The SERVER_URL variable is declared in the .env file

SERVER_URL = http://localhost:3000 for the development url, and will be changed before being pushed to production.

Remember to add your .env file to the gitignore file setup to protect the info that you push on a public repo.

Stripe PRIVATE_KEY
You require a stripe account for this.
Have the variable stored in the .env file since you’ll not push it to your public repo.

This is all you need to have your stripe working.

Click Here to go to my github repo for clones, forks and collabs!!

For the full stripe code and you could also go through the official documentation.

Micro-frontends (3/)

Charisma Elohe — Sat, 12 Feb 2022 21:51:43 +0000

So micro-frontends are simply a collection of decentralised
portions of a frontend application that compound to the same website.

As part of the architecture, we have a framework that communicates between host pages and the individual mfes.
It manages the loading and unloading of these mfes.

While designing this framework, we ought to consider:
1.What elements of the application need to be decentralised.
Here we analyse the parts that could more likely recycle and would not make sense to redo them each time we want to make use of them.

2.We make the units work together.
3.Routing -> we create a consistent and reliable way to make these artefacts interconnected and interdependent.
4.The elements should also have the capability of communicating with each other

Microservices architecture
-It refers to a pattern for organising computer systems into services that can scale with demand.
-Traditionally , scaling up demands meant we have to replicate multiple instances of the existing monolith so as to suffice the demands.

-A monolith application describes a single-tiered software application where the user interface and data access code are combined into a single program from a single platform.

-A monolith centralises the codebase so that it is one place.
-Also, there are lesser calls involved when we get a user request, and hence thinning the chances of failure.

-However, problems start to occur when these monoliths get big. Centralised code leads to tight coupling that becomes difficult to break up.

-There is also a cap to the performance of a machine. To mean, a very big program would be impossible to run on these machines.
-As a solution, applications are broken down into services.

-A service oriented architecture is able to scale the parts of an application that are under load.
-Operating System Virtualization made service oriented architecture even more economical since one server could host multiple virtualized operating system instances.
-Each of these instances can run a service. Therefore, you can host you multi-split application
on just one server.

The catch.
-Using this platform meant that engineers would have to manage more layers of infrastructure .
These are:
-The virtual machine hosts.
-The hypervisor layer
-the hardware

-As if that’s not enough, it is prone to failures due to its complexity, and hence a harder debugging process

solution
Elastic compute cloud
-The Elastic Compute Cloud (EC2) by amazon solves this predicament to some
point.
-Amazon rents out virtual machines to application owners. amazon focuses on the hardware
maintenance and hypervisor, whereas the application programmers focus on
the vm hosts - where their application code is running.

Containers.
-It is wasteful to have an entire virtual machine just to run a small piece of application code
containers allow a vm to be sliced up into isolated file system regions
-A size of the container ranges from the equivalent of an entire virtual machine down
to a single service, hence, microservice.

The hierarchy
-Micro-services run in containers, which run on a virtual machine, that runs on a hypervisor which runs on a server.

-The concept of micro-frontends is not altogether different from that of microservices.
They both work on the principle of separating elements in order to achieve independence.

The Devil in details
-There are hurdles that you must overcome for the micro-frontend to be deemed successful:

Pulling data from a micro-service
Routing the micro-frontends
Web components
Communication with micro-frontends

Micro-Frontends (2/)

Charisma Elohe — Thu, 10 Feb 2022 06:48:37 +0000

Micro-frontend
A micro-frontend (mfe)can simply be described as the code for a portion **of a webpage.
The webpage that hosts the component is referred to as the **host page.
There should be a framework that sits between the host page and mfe .
This framework manages the loading and unloading the microfrontends.

The Architecture
-Microfrontends
-MicroFrontend Framework
-Host pages

A good example of mfes would be product section you use to display your products in the product section in your ecommerce site.
You could use the same concept in the product description part.

Another would be the headers and footers, which you would statically include in all pages of your site rather than hard code them in each page.

An example in Django is using the static imports and extends.

You would create the skeleton file ie base.html in my case - where you would have all the static elements including the header and footer, then you would include this page wherever you need it.

I preferably develop the statics using bootstrap them load them as templates in my project.
You simply render the file that you want.

My base.html

{% load static %}

<!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" />
    <!--Start of Imports -->
    <link
      href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,700;0,800;1,200;1,300;1,400;1,500;1,700&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link rel="stylesheet" href="{% static 'css/animate.css' %}" />
    <link rel="stylesheet" href="{% static 'css/owl.carousel.min.css' %}" />
    <link
      rel="stylesheet"
      href="{% static 'css/owl.theme.default.min.css' %}"
    />
    <link rel="stylesheet" href="{% static 'css/magnific-popup.css' %}" />
    <link rel="stylesheet" href="{% static 'css/flaticon.css' %}" />
    <link rel="stylesheet" href="{% static 'css/style.css' %}" />

    <!-- End of Imports -->

    <title>Prima's Liquours and Fine Wines</title>
  </head>
  <body>
    {% include 'partials/_topbar.html' %} {%block content%} {%endblock%}
    {%include 'partials/_footer.html' %}

    <!-- Beginning of Javascipt -->
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/jquery-migrate-3.0.1.min.js' %}"></script>
    <script src="{% static 'js/popper.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <script src="{% static 'js/jquery.easing.1.3.js' %}"></script>
    <script src="{% static 'js/jquery.waypoints.min.js' %}"></script>
    <script src="{% static 'js/jquery.stellar.min.js' %}"></script>
    <script src="{% static 'js/owl.carousel.min.js' %}"></script>
    <script src="{% static 'js/jquery.magnific-popup.min.js' %}"></script>
    <script src="{% static 'js/jquery.animateNumber.min.js' %}"></script>
    <script src="{% static 'js/scrollax.min.js' %}"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
    <script src="{% static 'js/google-map.js' %}"></script>
    <script src="{% static 'js/main.js' %}"></script>

    <!-- End of Javascipt -->
  </body>
</html>

Header section

Footer section

I have written the header and footer elements once in my partials file, and import them in every page I wish to use, rather than include their code all over.
It makes it easier to clean my code. Also, I only have to make any changes and corrections once.

This is my header partial

{% load static %}

<!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" />
    <!--Start of Imports -->
    <link
      href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,700;0,800;1,200;1,300;1,400;1,500;1,700&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link rel="stylesheet" href="{% static 'css/animate.css' %}" />
    <link rel="stylesheet" href="{% static 'css/owl.carousel.min.css' %}" />
    <link
      rel="stylesheet"
      href="{% static 'css/owl.theme.default.min.css' %}"
    />
    <link rel="stylesheet" href="{% static 'css/magnific-popup.css' %}" />
    <link rel="stylesheet" href="{% static 'css/flaticon.css' %}" />
    <link rel="stylesheet" href="{% static 'css/style.css' %}" />

    <!-- End of Imports -->

    <title>Prima's Liquours and Fine Wines</title>
  </head>
  <body>
    {% include 'partials/_topbar.html' %} {%block content%} {%endblock%}
    {%include 'partials/_footer.html' %}

    <!-- Beginning of Javascipt -->
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/jquery-migrate-3.0.1.min.js' %}"></script>
    <script src="{% static 'js/popper.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <script src="{% static 'js/jquery.easing.1.3.js' %}"></script>
    <script src="{% static 'js/jquery.waypoints.min.js' %}"></script>
    <script src="{% static 'js/jquery.stellar.min.js' %}"></script>
    <script src="{% static 'js/owl.carousel.min.js' %}"></script>
    <script src="{% static 'js/jquery.magnific-popup.min.js' %}"></script>
    <script src="{% static 'js/jquery.animateNumber.min.js' %}"></script>
    <script src="{% static 'js/scrollax.min.js' %}"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
    <script src="{% static 'js/google-map.js' %}"></script>
    <script src="{% static 'js/main.js' %}"></script>

    <!-- End of Javascipt -->
  </body>
</html>

So why would you use microfrontends?

1. Team scalability - It is easier to collaborate on one element ie web page since the micro-frontends are versioned and independently deployed
You can think of each microfrontend as it's own project.
So the microfrontend team can work independently from the host page team.

2. Performance increase strategy -
The division of tasks and roles in development make sure that each team
gives total focus on what they are developing. The integration of these
features gives a better end product.
Think of car manufacturing - The interior designers worry less about
the engine functionality, because that is not their domain - but the end
product is one clean ride. You conquer by subdividing and micromanaging
tasks

3. Reusability
As long as the host pages meet the standards of the micro-frontends (mfe), the mfes can be reused
I would still use cars. Those that develop engines, develop engines alone,
any car from this industry that fits the standard the engine was meant for, can use
this engine. This engine is therefore reusable.
You would want prolly want a uniform design for you headers and footers in all

pages of your website - to make sure users do not feel detached from it while using it.

4. Techstack weaving
You are able to use different technologies to produce your final
product. As long as the host and mfe meet the standard.
You can develop your pages using Vue, or react, and have python used to build
your backend.
This breaks beyond technology limits and opens doors for innovation.

I implement some of this using Ionic and Angular and I will be documenting that soon.

_I will keep you posted once I push the code to production. (The django project)

For the ionic, I will push it to my github and share the link in the comment section. So be sure to check it out as well._

Micro-frontends .

Charisma Elohe — Wed, 09 Feb 2022 21:06:34 +0000

Monolithic to micro-frontend migration.

I have been indulging in micro-frontends these last few days and here is what I would share. Make sure you read through chronologically to get the gist of it.

Ecommerce and online transactions for businesses have recently mushroomed. In 2020 alone, there was a 16 - 19% increase in online retail sales' share of total retail sales (according to estimates in an UNCTAD report , 3 May).

So suppose you are starting out your ecommerce store, all you require is a small scale website and it will suffice your needs. You have very few orders and you require only a handful of staff members. This website consists of the front-end and a business logic part that handles all your functionality. i.e the backend.

With not so involving apps on your site, like about us, blog section, manageable cart checkouts etcetera , a monolithic architecture will most likely cut it for you.

Over time, the ecommerce site grows and becomes a multinational business, and you process very many orders at a go, you are recruiting staff members, you are stocking up on goods etc, you are maintaining the inventory etcetera - This means that you have to beef up your site (more sections, more content, bigger capacity databases etc). There has to be accuracy in database queries lest
it breaks your application, or give erring reports.

You can solve this baggage by considering migration from monolithic to a micro-frontend architecture.

Micro-frontends

**
Micro-frontends refer to a sub-division of a front-end application into multiple independent sections which are a part of a whole.

For the approximately 260 islands of Japan to be still considered part of this state they communicate with each other. Verily, the constructs of micro-frontends have to be in consistent communication with each other.

Deleting unused media files in Django (Step by step)

Charisma Elohe — Mon, 31 Jan 2022 09:49:45 +0000

We seldom have projects (web projects for example) that lack media files. A good example is, images. Images give unmatched and accurate description that words would have failed to bring out.

We can load media as static elements on your web application or have them stored in the database for retrieval and rendering. The latter is used for major projects - where we only store what we need and can use.
It is possible to deplete your space (or unnecessarily occupy it) with media files that we upload.

It can be quite hectic to go through the deletion process. On the flip side, there is possibility to automatically clean up the unused media files from our project. We depend on a clean package for this.

Installation
This can be done on your virtual environment (like I have done) or entire system , depending on the user’s preference.

pip install django-cleanup

In the settings.py file, under the installed_apps, add the following line

‘django_cleanup.apps.CleanupConfig’

The impact of Data Science in elections.

Charisma Elohe — Sat, 29 Jan 2022 22:43:34 +0000

_
(The return of Cambridge Analytica?)_

Just how strongly could technology (data science) alter votes in general elections.
The term ***_data* is the new oil_** has most certainly gained popularity (from
not so long ago, but recently has.)
From root definition, data refers to raw facts and information-pieces that
can be collected about an entity.Our entity here is human beings.

Human beings have many data points.These data points are relayed through our preferences (likes) and dislikes from our interactions,
our speech, our social media and browsing patterns etcetera.
With the right tools and technology, we can have this data collected and stored - then later used.

Back to data as oil - Oil is of most benefit after being refined. The same way, crude data is of lesser benefit to us. The data we collect is crude, since it has (both relevant and irrelevant) parts.
The data we collect is beneficial only when it has meaning.
Collected data is cleaned. Here we remove outliers, inconsistent and or is irrelevant parts.
We then analyze the data we have and interpret results.

Artificial intelligence thrives from this aspect, data. The data that we have cleaned and interpreted reveals patterns to us (data scientists) who use this patterns to predict things and make decisions that are informed.

You would more likely not go wrong on the predictions made from analyzed data,rather
than simply following instincts.

Back to elections.To ensure you garner the most votes, you must have the majority on your side. You can easily do this when you have information on these people,then manipulate their decisions by tailoring your products based on their likes and dislikes.

Sources of data
You need a lot of data for you to form the right classifiers - and establish the groups that are formed,to influence your decision models.
It is expensive and time consuming to collect data about every citizen that forms the voter's population.
These analytics companies buy data from companies that store huge chunks of them - social media platforms.
Facebook, Twitter , to name a few - trade your personal data to these companies.
This is one of the ways they use to make profit.

Why are developing countries a fit in this?
There is an encouraging economic growth here in Kenya and burgeoning of the middle class. Improving infrastructure and
electrification means that internet and smartphone access get a shilling friendlier everyday. This means that there is greater incalcation of the internet in many facets today - this is evident from the so vocal KOT group who are running riot everyday.
By January 2020, Kenya had a little bit shy of 9 million facebook users. (Two years is a lot - so numbers have most probably tremendously grown),
you can imagine how politicians can powerfully gain from this access.

So ,When is this unethical and considered crime?
Interested parties approach data science companies to help them in the tailoring of 'products' to sell to
their supporters. (By products we refer to rebrands, speech creation etcetera). Voters are also manipulated with
ominous attack advertisements against their opponents. They use hatespeech and image tainting to flourish their own bids.
It requires good legal muscle to sanction such companies and opponents - especially in developing countries where
data privacy and rules have not very well come into play.I am sure you have heard of Cambridge Analytica who have had a history
with such sanctions.
We are having elections this year (Kenya,2022), technology is still growing, there is power in information, and the outreach it could make. Could there be a repeat of this?

Is Cambridge Analytica V2.0 feasible?

Beginning Cyber-Security practice.

Charisma Elohe — Thu, 27 Jan 2022 22:36:23 +0000

Cyber Security is one of the most lucrative fields in computer science that is registering streams of new learners and professionals.
The massive move from analogue to digital data has greatly led to this migration.

Here are some vital resources you could use to make your learning path smooth. You could moreso use them to practise and affirm the skills you have learnt.

1. Exploit.education
https://exploit.education/ - Exploit education is a platform with a variety of resources for learning vulnerability analysis, software debugging, exploit development, binary analysis and general cyber security issues.

2. Vulnhub.com
https://www.vulnhub.com/ - This refers to a collection of exploitable Virtual Machines where you can practise penetration without fear of infringement policies.

3. Newbiecontest.org
https://www.newbiecontest.org/ - It is an online forum/platform that provides different challenges to your Cyber Security skills. The skills are not limited to: cryptography, forensics, Hacking etcetera.

4. Command Challenge
https://cmdchallenge.com/ - This is a platform where you get to practise your bash commands. It is simple and friendly to use since it instructs you on the command execution.