DEV Community: Kwaku Duah

Building an Artificial Neural Network to make Predictions with Machine Learning.

Kwaku Duah — Thu, 17 Apr 2025 15:38:05 +0000

Introduction

Artificial Neural Networks (ANNs) are computational models inspired by the human brain's biological neural networks. They are designed to simulate the way humans learn and process information. By recognizing patterns, approximating functions, and optimizing tasks, ANNs serve as the backbone of many artificial intelligence (AI) applications.

Biological Inspiration

In the human brain, neurons are the fundamental units that transmit signals. Each neuron receives input, processes it, and passes the result to other neurons. ANNs replicate this behavior by using nodes (artificial neurons) organized in layers:

Input Layer: Takes in raw data.
Hidden Layers: Perform intermediate computations.
Output Layer: Produces the final result.

Each connection between neurons has an associated weight which is adjusted during training.

Structure of an ANN

An ANN typically consists of:

Neurons: Basic processing units.
Layers: Organized into input, hidden, and output.
Weights and Biases: Parameters adjusted during training.
Activation Function: Determines the output of a neuron.

Common activation functions:

Sigmoid: ( \sigma(x) = \frac{1}{1 + e^{-x}} )
ReLU (Rectified Linear Unit): ( f(x) = \max(0, x) )
Tanh: ( \tanh(x) = \frac{e^x - e^{-x}}{e^x + e^{-x}} )

Training an ANN

Training involves adjusting the weights and biases to minimize error using a method called Backpropagation. The key steps are:

Forward Propagation: Calculate outputs based on current weights.
Loss Calculation: Compute the error (e.g., Mean Squared Error).
Backpropagation: Adjust weights using gradients.
Optimization: Apply an algorithm like Stochastic Gradient Descent (SGD) or Adam to update weights.

Python Implementation of a Simple ANN (From Scratch)

import numpy as np

def sigmoid(x):
    return 1 / (1 + np.exp(-x))

def sigmoid_derivative(x):
    return x * (1 - x)

# Input data (4 samples, 2 features)
x = np.array([[0, 0],
              [0, 1],
              [1, 0],
              [1, 1]])

# Output data (4 samples, 1 output)
y = np.array([[0],
              [1],
              [1],
              [0]])  # XOR problem

# Seed random numbers for reproducibility
np.random.seed(1)

# Initialize weights randomly with mean 0
input_layer_neurons = 2
hidden_layer_neurons = 4
output_neurons = 1

weights_input_hidden = 2 * np.random.random((input_layer_neurons, hidden_layer_neurons)) - 1
weights_hidden_output = 2 * np.random.random((hidden_layer_neurons, output_neurons)) - 1

# Training process
epochs = 10000
learning_rate = 0.1

for epoch in range(epochs):
    # Forward propagation
    hidden_input = np.dot(x, weights_input_hidden)
    hidden_output = sigmoid(hidden_input)

    final_input = np.dot(hidden_output, weights_hidden_output)
    predicted_output = sigmoid(final_input)

    # Backpropagation
    error = y - predicted_output
    d_predicted_output = error * sigmoid_derivative(predicted_output)

    error_hidden_layer = d_predicted_output.dot(weights_hidden_output.T)
    d_hidden_layer = error_hidden_layer * sigmoid_derivative(hidden_output)

    # Updating Weights
    weights_hidden_output += hidden_output.T.dot(d_predicted_output) * learning_rate
    weights_input_hidden += x.T.dot(d_hidden_layer) * learning_rate

    if epoch % 1000 == 0:
        loss = np.mean(np.square(error))
        print(f"Epoch {epoch} Loss: {loss:.4f}")

# Final output
print("\nFinal Predicted Output:")
print(predicted_output)

Applications of ANN

Computer Vision: Image classification, object detection
Natural Language Processing (NLP): Language translation, sentiment analysis
Healthcare: Disease prediction, medical image analysis
Finance: Fraud detection, algorithmic trading
Robotics: Autonomous navigation, control systems

Summary

Artificial Neural Networks are powerful tools capable of learning from data and making complex decisions. They consist of layers of interconnected neurons that adapt through training. As data-driven models, their effectiveness continues to grow with more data, better algorithms, and advanced hardware.

JDK Setup On Linux, Windows, Mac

Kwaku Duah — Mon, 16 Sep 2024 09:56:02 +0000

🚀 Setting Up JDK on Windows, macOS, and Linux – Complete Guide

If you're starting out with Java programming, your first essential step is to install the Java Development Kit (JDK). The JDK contains all the tools required to compile, debug, and run Java programs.

In this guide, I’ll walk you through the JDK setup process on Windows, macOS, and Linux, and also show you how to run your first Java program!

🪟 1. Setting Up JDK on Windows

✅ Step 1: Download the JDK

Go to either the Oracle JDK or OpenJDK site.

Choose the correct installer (e.g., jdk-21_windows-x64_bin.exe) for your system.

✅ Step 2: Install the JDK

Run the installer and follow the prompts.
Accept the license agreement and select the default installation path: C:\Program Files\Java\jdk-<version>.

✅ Step 3: Set Environment Variables

To run Java from the command line, add the JDK bin directory to your PATH.

Open System Properties → Advanced → Environment Variables
Under System Variables, edit the Path variable.
Add:

   C:\Program Files\Java\jdk-<version>\bin

✅ Step 4: Verify Installation

Open Command Prompt and run:

java -version
javac -version

🍎 2. Setting Up JDK on macOS

✅ Step 1: Download the JDK

Head over to Oracle or Adoptium and download the .dmg file for macOS.

✅ Step 2: Install the JDK

Double-click the .dmg and follow the wizard.

JDK will be installed in /Library/Java/JavaVirtualMachines/.

✅ Step 3: Set Environment Variables

Edit your shell config file based on your terminal:

nano ~/.zshrc     # For zsh users
nano ~/.bash_profile   # For bash users

Add these lines:

export JAVA_HOME=$(/usr/libexec/java_home)
export PATH=$JAVA_HOME/bin:$PATH

Reload config:

source ~/.zshrc
# or
source ~/.bash_profile

✅ Step 4: Verify Installation

java -version
javac -version

🐧 3. Setting Up JDK on Linux

✅ Step 1: Install via Terminal

Ubuntu/Debian:

sudo apt update
sudo apt install openjdk-21-jdk

Fedora/CentOS/RHEL:

sudo dnf install java-21-openjdk-devel

Arch Linux:

sudo pacman -S jdk21-openjdk

✅ Step 2: Configure JAVA_HOME

Edit your shell config file:

nano ~/.bashrc    # or ~/.zshrc

Add:

export JAVA_HOME=$(dirname $(dirname $(readlink -f $(which javac))))
export PATH=$JAVA_HOME/bin:$PATH

Then reload:

source ~/.bashrc
# or
source ~/.zshrc

✅ Step 3: Verify Installation

java -version
javac -version

💻 Writing and Running Your First Java Program

✍️ Step 1: Create a Java File

Save this as HelloWorld.java:

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

⚙️ Step 2: Compile the Program

javac HelloWorld.java

This creates a HelloWorld.class file.

▶️ Step 3: Run the Program

java HelloWorld

You should see:

Hello, World!

📚 Bonus: Intro to Data Structures & Algorithms (DSA) in Java

Now that your JDK is ready, here’s a glimpse of what you can build next:

🔢 Basic Data Structures:

Arrays: Linear collection of items in memory.
Linked Lists: Nodes with data + pointer to the next.
Stacks: LIFO structure.
Queues: FIFO structure.
Hash Tables: Key-value mappings.
Trees: Hierarchical structure (Binary Tree, BST).
Graphs: Nodes + edges (great for pathfinding, social networks, etc.).

⚙️ Basic Algorithms:

Sorting: Bubble, Merge, Quick.
Searching: Linear, Binary.
Traversal: DFS, BFS (especially useful in trees and graphs).

Mastering DSA is essential for technical interviews and solving real-world coding challenges.

🎉 Conclusion

Setting up the JDK is your gateway into the powerful world of Java. Whether you're building full-stack web apps, preparing for coding interviews, or diving into open-source projects—this setup will serve as your foundation.

If you found this guide helpful, consider following me on Dev.to for more tutorials on Python, Java, and full-stack development.

Happy coding! 💻⚡

INSTALL SLACK ON LINUX MINT 21.1

Kwaku Duah — Tue, 30 May 2023 22:58:00 +0000

Slack remains an effective messaging platform that connects businesses and communities together in a peculiar space. Chatrooms on Slack are called channels, and they connect developers, professionals, and community members.

Pros Of Using Slack

The following are advantages of using Slack, in no particular order:

Slack can be used by individuals to host files and personal resources.
Slack is flexible and available for all businesses worldwide.
Slack is designed for businesses and allows resources to be updated at once by members in a community.
Slack allows users to search through over 10,000 messages.

Download Slack For Linux
Install Dependencies
Install Slack
Conclusion

Download Slack For Linux

Update your Linux system to fetch the latest security patches from the repositories with the following commands:

sudo apt-get update  
sudo apt-get upgrade

Visit the official website of Slack and download the RPM version.

Note: The RPM version cannot be installed on Debian-based operating systems like Ubuntu or Linux Mint.

In this tutorial, I will use a workaround to convert the RPM version to a DEB version, which is installable on Debian-based systems.

Installing Dependencies

Conversion of an RPM package to a DEB package requires a Linux utility called Alien. Alien is a conversion program that converts different Linux software packages to .deb files for installation.

Install Alien using the following command:

sudo apt-get install alien

This is the downloaded RPM package located at:

home/.../Downloads/Programs

Convert the RPM file to a DEB file using Alien:

sudo alien slack-4.32.122-0.1.el8.x86_64.rpm

Replace the Slack package filename with the version you downloaded.

This command will convert the .rpm file to a .deb file, which can now be installed on all Debian-based operating systems.

Install Slack

Install the newly created .deb package on Linux Mint using:

sudo apt install ./slack_4.32.122-1.1_amd64.deb

To confirm the installation and check the installed Slack version, run:

slack --version

Conclusion

And ta-da! 🎉

This is a working Slack Desktop on Linux Mint.

Full Stack Todo WebApp With React and Python-Django.

Kwaku Duah — Wed, 24 May 2023 00:33:27 +0000

This is a detailed tutorial on how to build a full stack To-Do application using React Javascript Framework and Django Web Framework.

React is a framework that is used for building Single Page Applications (SPAs). React was introduced by Facebook (now Meta) and has a wonderful community of developers and a slick documentation.

Django, on the other hand, is a simple web framework that aims to simplify web development. Django has a lot of ready-made libraries and vibrant documentation that supports developer needs.

In this application, the React framework serves as the client-side that handles the UI (User Interface). It also gets and sends data via requests to the Django backend with an API built atop the Django REST Framework (DRF).

This web application allows users to create tasks and mark the tasks as complete or incomplete.

PREREQUISITES

In this tutorial, you must have:

Set up a local programming environment for Python 3
Set up Node.js on your local development environment

SETTING UP DJANGO BACKEND

Create a new project directory:

mkdir react-django-todo
cd react-django-todo

Install and activate a virtual environment using Pipenv:

pip install pipenv
pipenv shell

Install Django:

pipenv install django

Start a new Django project:

django-admin startproject backend
cd backend

Create a Django app:

python3 manage.py startapp todo

Perform initial migrations:

python3 manage.py migrate

Run the server:

python3 manage.py runserver

Visit http://localhost:8000 in your browser to confirm the setup.

REGISTERING THE `todo` APPLICATION IN DJANGO

Add 'todo' to INSTALLED_APPS in backend/settings.py.

CREATING A `Todo` MODEL

In todo/models.py:

from django.db import models

class Todo(models.Model):
    title = models.CharField(max_length=200)
    description = models.TextField()
    completed = models.BooleanField(default=False)

    def __str__(self):
        return self.title

Migrate the model:

python3 manage.py makemigrations todo
python3 manage.py migrate

REGISTERING THE MODEL IN ADMIN

In todo/admin.py:

from django.contrib import admin
from .models import Todo

class TodoAdmin(admin.ModelAdmin):
    list_display = ('title', 'description', 'completed')

admin.site.register(Todo, TodoAdmin)

Create a superuser:

python3 manage.py createsuperuser

SETTING UP APIs

Install DRF and CORS headers:

pipenv install djangorestframework django-cors-headers

Update INSTALLED_APPS in settings.py:

INSTALLED_APPS = [
    ...,
    'rest_framework',
    'corsheaders',
    'todo'
]

Add the CORS settings:

CORS_ORIGIN_WHITELIST = [
    'http://localhost:3000'
]

CREATING SERIALIZERS

In todo/serializers.py:

from rest_framework import serializers
from .models import Todo

class TodoSerializer(serializers.ModelSerializer):
    class Meta:
        model = Todo
        fields = ('id', 'title', 'description', 'completed')

CREATING VIEWS

In todo/views.py:

from rest_framework import viewsets
from .serializers import TodoSerializer
from .models import Todo

class TodoView(viewsets.ModelViewSet):
    serializer_class = TodoSerializer
    queryset = Todo.objects.all()

ADDING ROUTES

In backend/urls.py:

from django.contrib import admin
from django.urls import path, include
from rest_framework import routers
from todo import views

router = routers.DefaultRouter()
router.register(r'todos', views.TodoView, 'todo')

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include(router.urls)),
]

SETTING UP THE FRONTEND

Create the frontend:

cd ..
npx create-react-app frontend
cd frontend
npm start

Install Bootstrap and Reactstrap:

npm install bootstrap reactstrap --legacy-peer-deps

In frontend/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

In frontend/App.js, you can now build your UI logic and interact with the API endpoints at http://localhost:8000/api/todos/.

USE SPARE ANDROID PHONE AS WEBCAM FOR YOUR PC.

Kwaku Duah — Mon, 15 May 2023 22:14:16 +0000

🔧 Turn Your Spare Android Phone into a Webcam for Linux!

Ever had that awkward moment when you're all set for a video interview on your PC—only to find out your webcam quality is atrocious?

Breathe easy. You can turn that spare Android phone lying around into a high-quality webcam for your Linux PC!

Chances are, that old phone has a camera that's leagues better than your laptop's built-in one. Since webcams are pricey, this budget-friendly guide has you covered.

✅ What You Need:

An Android Phone
USB Cable
A Linux PC

This is a beginner-friendly tutorial. Just follow along step-by-step, and you’ll be ready to roll.

📚 Table of Contents:

Prepare the Android Phone
Install Dependencies on the PC
Configure the Phone with the PC
Launch the Phone’s Camera as Webcam
Conclusion

🛠️ Prepare the Android Phone

Android runs on the Linux kernel. A few tweaks and we’re good to go.

Go to Settings > About Phone
Tap Build Number 7 times to activate Developer Mode
Go back, open Developer Options
Toggle on USB Debugging
Connect your phone via USB to your Linux PC

📦 Install Dependencies on the PC

Open a terminal and run:

sudo apt install android-tools-adb -y
adb devices

Your Android phone will ask to allow USB debugging. Accept it.

🔹 ADB stands for Android Debug Bridge.

Install scrcpy (Screen Copy tool):

sudo apt install scrcpy

Then launch:

scrcpy

This mirrors your phone screen to the PC.

⚙️ Configure the Camera with PC

Install ffmpeg:

sudo apt install ffmpeg -y

Clone and install v4l2loopback to create a virtual camera:

git clone https://github.com/umlaeute/v4l2loopback
cd v4l2loopback
make && sudo make install
sudo depmod -a
sudo modprobe v4l2loopback

📲 Setting Up the Android Camera

Install IP Webcam from the Play Store.

Note: The free version has ads. Consider going premium for a smoother experience.
Open the app and scroll down to tap Start Server
You'll see an IPv4 address at the bottom (e.g., http://192.168.x.x:8080)

🔄 Port Forwarding via ADB

List devices:

adb devices -l

Output:

List of devices attached
affhh41a device usb: product:phone brand device transport_id:2

Export the device ID:

export ANDROID_SERIAL=affhh41a

Forward the port:

adb forward tcp:8080 tcp:8080

Now visit:

http://localhost:8080 – full IP Webcam interface
http://localhost:8080/video – direct video stream (use Firefox only)

🎥 Create a Virtual Webcam

Run this to create the virtual webcam:

sudo modprobe v4l2loopback

List available devices:

v4l2-ctl --list-devices

Your new virtual webcam is likely /dev/video2.

🚀 Redirect the Video Stream

Use ffmpeg to pipe the stream to your virtual webcam:

sudo ffmpeg -i http://localhost:8080/video -vf format=yuv420p -f v4l2 /dev/video2

Now, applications like Google Meet, Zoom, OBS, or OpenCV can use your phone as a webcam 🎉

🎬 Webcam in Google Meet (via Firefox):

🔴 OBS Studio Preview:

✅ Conclusion

While there isn’t a GUI to handle all this, the command-line workflow with tools like scrcpy, adb, and ffmpeg makes it totally doable—even for beginners.

Questions? Suggestions? Drop them in the comments—your feedback is golden!

Formatting External Drives On Linux Using Gparted.

Kwaku Duah — Sun, 07 May 2023 23:33:23 +0000

Formatting a pendrive or external hard drive can sometimes be a real pain. There are a variety of tools that can be used to format a drive. Commandline tools, third party premium software and open source tools like gparted.
Gparted is a free partition tool that is used for disk management.It allows for creating, moving and deleting a partition on a drive.

Table Of Content

Installation of gparted on linux
Formatting a drive with gparted
Labelling a drive after formatting

Installation of gparted on linux

Gparted can be installed in several forms. However, the method I will discuss here is with the use of the Command Line Interface(CLI).
Firstly, update the repositories on the linux installation with the command:

After a successful update of all the programs, the next command to run is:

You can then run the command gparted in the terminal to open the application.

Formatting the drive in gparted

From the top right corner of the display, select from the partitions dropdown the partition or device you want to work on.

Exercise caution by double checking that you have selected the right device.Right-click on the device and a popup will appear like this:

Unmount the device/partition you selected.
From the popup, click on 'format to' to have all the possible formats you can format the drive to displayed.

Select from the dropdown list the format you want the drive to be formatted to among NTFS(New Technology File System), FAT 16, FAT 32 and a whole lot.
Depending on the size of the drive, the operation may be done quickly or it will take some time.

Labelling the filesystem

Furthermore, once the formatting is completed, right-click on the device and from the popup choose 'label filesytem'.

The device will show as the name defined above when mounted in any computer.
Gparted is an advanced software that can be used to make a bootable to use on live partitions without data loss.
That is a beyond the scope of this tutorial.
Ta-da, you have successfully learned how to use gparted.

CRUD Notes Web App In Javascript.

Kwaku Duah — Sat, 06 May 2023 19:26:11 +0000

Javascript is a high-level progamming language that can be used to build modern web applications. It has evolved over the years as only a front-end/UI language to having the full capability of been deployed for back-end development.
In this project, we will use Javascript to build a simple password generator web application and deploy it to vercel.

Table Of Content

Set Up Development Environment
Create the frame, style the UI
Add the logic to complete the program
Commit the project to github
Deploy to vercel for hosting

Set Up Development Environment

This is a simple project that is beginner friendly. However, having prior knowledge in HTML, CSS and Javascript will help matters.In this tutorial, I will be using commands on the Command Line Interface(CLI) to create,read and update folders and files. However, it is not mandatory to have knowledge of the command line.
Create a new folder where all the files that will be created will be housed. Issue this command on the Linux Terminal:

mkdir notesapp

On Windows, simply create a new folder 'noteapp'.

Create the frame, style the UI

HyperText Markup Language(HTML) is a standardized way for tagging text files on the World Wide Web(www). HTML provides the frame for the structure of webpages. This may be likened to a building a house. The house entirely rests on the foundation and in web application design, HTML plays a similar role.
However, Cascading Style Sheets(CSS) describes how HMTL elements will look like on a webpage. Fonts, colors and styles on webpages are entirely done with CSS. In relation to the building of a house example, paints,designs, and decorations will be the CSS of the house.
In this project, we will create a root HTML file named; 'index.html'.
Using the terminal, enter this command:

touch index.html.

On Windows OS, create a new file named 'index.html'
Contents of the HTML file:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Notes App In Pure HTML CSS JS</title> <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"> </head> <body> <div class="popup-box"> <div class="popup"> <div class="content"> <header> <p></p> <i class="uil uil-times"></i> </header> <form action="#"> <div class="row title"> <label>Title</label> <input type="text" spellcheck="false"> </div> <div class="row description"> <label>Description</label> <textarea spellcheck="false"></textarea> </div> <button></button> </form> </div> </div> </div> <div class="wrapper"> <li class="add-box"> <div class="icon"><i class="uil uil-plus"></i></div> <p>Add New Note</p> </li> </div> <div class="footer"> <p>Made by kdwebdeveloper<a href="https://kdwebdeveloper.vercel.app/"> Porfolio </a></p> </div> <script src="script.js"></script> </body> </html>

This is the structure of the web application. Now, we need to choose fonts, colors and give design the page beautifully with CSS.
In the linux terminal, issue the command:

touch style.css

On Windows, create a file 'style.css'

Note: You must create the two files all in the same folder "notesapp".
Link the CSS file 'style.css' to the web page with an with the HTML 'link element' in the 'head' element in the HTML structure.

This is the content for the CSS file 'style.css'.

`* {
list-style: none;
padding: 0;
margin:0;
box-sizing: border-box;
font-family: 'Raleway', sans-serif;
}
body {
background-image: linear-gradient(to right, rgba(127,127,67,0.5), rgb(97, 141, 61));

}
::selection{
color: #fff;
background: #618cf8;
}
.wrapper{
margin: 50px;
display: grid;
gap: 25px;
grid-template-columns: repeat(auto-fill, 265px);
}
.wrapper li{
height: 250px;
list-style: none;
border-radius: 5px;
padding: 15px 20px 20px;
background: #fff;
box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}
.add-box, .icon, .bottom-content,
.popup, header, .settings .menu li{
display: flex;
align-items: center;
justify-content: space-between;
}
.add-box{
cursor: pointer;
flex-direction: column;
justify-content: center;
}
.add-box .icon{
height: 78px;
width: 78px;
color: #88ABFF;
font-size: 40px;
border-radius: 50%;
justify-content: center;
border: 2px solid #88ABFF;
}
.add-box p{
color: #88ABFF;
font-weight: 500;
margin-top: 20px;
}
.note{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.note .details{
max-height: 165px;
overflow-y: auto;
}
.note .details::-webkit-scrollbar,
.popup textarea::-webkit-scrollbar{
width: 0;
}
.note .details:hover::-webkit-scrollbar,
.popup textarea:hover::-webkit-scrollbar{
width: 5px;
}
.note .details:hover::-webkit-scrollbar-track,
.popup textarea:hover::-webkit-scrollbar-track{
background: #f1f1f1;
border-radius: 25px;
}
.note .details:hover::-webkit-scrollbar-thumb,
.popup textarea:hover::-webkit-scrollbar-thumb{
background: #e6e6e6;
border-radius: 25px;
}
.note p{
font-size: 22px;
font-weight: 500;
}
.note span{
display: block;
color: #575757;
font-size: 16px;
margin-top: 5px;
}
.note .bottom-content{
padding-top: 10px;
border-top: 1px solid #ccc;
}
.bottom-content span{
color: #6D6D6D;
font-size: 14px;
}
.bottom-content .settings{
position: relative;
}
.bottom-content .settings i{
color: #6D6D6D;
cursor: pointer;
font-size: 15px;
}
.settings .menu{
z-index: 1;
bottom: 0;
right: -5px;
padding: 5px 0;
background: #fff;
position: absolute;
border-radius: 4px;
transform: scale(0);
transform-origin: bottom right;
box-shadow: 0 0 6px rgba(0,0,0,0.15);
transition: transform 0.2s ease;
}
.settings.show .menu{
transform: scale(1);
}
.settings .menu li{
height: 25px;
font-size: 16px;
margin-bottom: 2px;
padding: 17px 15px;
cursor: pointer;
box-shadow: none;
border-radius: 0;
justify-content: flex-start;
}
.menu li:last-child{
margin-bottom: 0;
}
.menu li:hover{
background: #f5f5f5;
}
.menu li i{
padding-right: 8px;
}
.popup-box{
position: fixed;
top: 0;
left: 0;
z-index: 2;
height: 100%;
width: 100%;
background: rgba(0,0,0,0.4);
}
.popup-box .popup{
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
width: 100%;
max-width: 400px;
justify-content: center;
transform: translate(-50%, -50%) scale(0.95);
}
.popup-box, .popup{
opacity: 0;
pointer-events: none;
transition: all 0.25s ease;
}
.popup-box.show, .popup-box.show .popup{
opacity: 1;
pointer-events: auto;
}
.popup-box.show .popup{
transform: translate(-50%, -50%) scale(1);
}
.popup .content{
border-radius: 5px;
background: #fff;
width: calc(100% - 15px);
box-shadow: 0 0 15px rgba(0,0,0,0.1);
}
.content header{
padding: 15px 25px;
border-bottom: 1px solid #ccc;
}
.content header p{
font-size: 20px;
font-weight: 500;
}
.content header i{
color: #8b8989;
cursor: pointer;
font-size: 23px;
}
.content form{
margin: 15px 25px 35px;
}
.content form .row{
margin-bottom: 20px;
}
form .row label{
font-size: 18px;
display: block;
margin-bottom: 6px;
}
form :where(input, textarea){
height: 50px;
width: 100%;
outline: none;
font-size: 17px;
padding: 0 15px;
border-radius: 4px;
border: 1px solid #999;
}
form :where(input, textarea):focus{
box-shadow: 0 2px 4px rgba(0,0,0,0.11);
}
form .row textarea{
height: 150px;
resize: none;
padding: 8px 15px;
}
form button{
width: 100%;
height: 50px;
color: #fff;
outline: none;
border: none;
cursor: pointer;
font-size: 17px;
border-radius: 4px;
background: #6A93F8;
}
@media (max-width: 660px){
.wrapper{
margin: 15px;
gap: 15px;
grid-template-columns: repeat(auto-fill, 100%);
}
.popup-box .popup{
max-width: calc(100% - 15px);
}
.bottom-content .settings i{
font-size: 17px;
}
}
.footer p{
float:inline-start;
}`

Add Logic To Complete the project

The (User Interface)UI of the page is now just as we want it, now proceed to add logic to the application. Javascript is a highly dynamic language and it will allow us to achieve that effect.
Create a new file 'script.js'. With the terminal, issue the command:

touch script.js in the root directory in addition to the index.html file and style.css files.

We proceed to link the 'script.js' file to the 'index.html' file to render the javascript file with HTML script tag.

This is the content of the 'script.js' javascript file:

Do not worry, I will attach the link to the source code.
Now we have a notes app written entirely in Javascript.

Commit the project to Github
Goto github and sign up for account or sign in if you have an account.
Create a new repository and commit the project to github.
This is how it will look like:

Deploy the project to vercel for hosting

Goto vercel and sign up for an account with github.Goto the dashboard and click on deploy a project. Select the repostory you created and ta-da!, the project is live.
Here is link to the web application we just created:
notesapp.

This is the link to the source code at github.
Feedbacks are welcome!

Javascript Password Generator.

Kwaku Duah — Tue, 02 May 2023 22:11:47 +0000

Javascript is a high-level programming language that is efficient and performant. Javascript has evolved over the years as only a language good for the front-end.
Javascript can be used to do server-side rendering and hence it is used to build fullstack applications.
In this project,HTML, CSS and Javascript is used to build a password generator web application. This web application has been deployed to vercel on with this link password generator app.

Table Of Content

Setting up environment
Building index.html, styles.css
Javascript code to complete the application
Committing the project to git
Signing up to Vercel with github
Deploying web app to vercel

Setting Up Environment
This project makes use of only HTML,CSS and Javascript.
Create a folder with any desired name. On linux use this command:
mkdir jspassword

Change from your current directory to the new directory with the command:
cd jspassword

Building Index.html and Styles.css
Create a new file with the name 'index.html.
If you are using the Command Line Interface(CLI), issue the command:
touch index.html

This file will contain the structure/frame of the page.
Content of the index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Password Generator</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="box"> <h2>Password Generator</h2> <input type="text" name="" placeholder="Create password" id="password" readonly required> <table> <th><div id="button" class="btn1"onclick="genPassword()">Generate</div></th> <th><a id="button" class="btn2" onclick="copyPassword()">Copy</a></th> </table> </div> <script src="script.js"></script> </body> </html>

Furthermore, the heading texts, buttons needs to be arranged and styled nicely. This effect is achieved with the styles.css file.
The 'index.html' is linked with the styles.css with the following line:
<link rel="stylesheet" href="style.css">

This is the content of the styles.css file:

* { margin: 0; padding: 0; user-select: none; box-sizing: border-box; } body { background-color: rgb(79, 75, 75); } .box { background-color: rgb(176, 169, 169); padding: 40px ; border-radius: 30px; box-shadow: 8px 5px 14px -1px rgb(94, 94, 94); -webkit-box-shadow: 8px 5px 14px -1px rgba(94, 94, 94); -moz-box-shadow: 8px 5px 14px -1px rgba(94, 94, 94); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow:hidden; } @media (min-width:600px) and (max-width:720px){ body{ background-color: lightseagreen; } .box{ height: 100vh; width:100%; overflow: hidden; padding:20px; } } .box h2 { margin-bottom: 40px; text-align: center; font-size: 26px; color: black; font-family: Roboto; } input { padding: 20px; user-select: none; height: 50px; width: 400px; border-radius: 6px; border: none; border: 2px solid black; outline: none; font-size: 22px; } input::placeholder { font-size: 23px; }
#button { font-family: sans-serif; font-size: 15px; margin-top: 40px; width: 155px; height: 50px; text-align: center; background-color: #14e5; display: flex; color: rgb(255, 255, 255); justify-content: center; align-items: center; cursor: pointer; border-radius: 7px; transition: 300ms ease-in-out; } .btn2 { margin-left: 85px; }
#button:hover { color: white; background-color: black; }

Most importantly, buttons, header texts are arranged nicely like this:

The HTML and CSS files were responsible for framing and design/look of the web application. In clearer terms, HTML will be likened to the foundation/structure of a house whereas CSS refers to the painting/aesthetics of the web page.

Javascript code to complete the application
Javascript is the language that will provide the logic for the web application.
Javascript functions like the in-built random function will used to generate different passwords upon each iteration.
A new variable labelled 'password' declared with the 'let' keyword will be used to define the element to define logic for in this project.
In the same directory;

index.html
style.css
script.js

here we have added script.js.
Earlier, we added script.js to the index.html file.This is the snippet:

<script src="script.js"></script>

This is the code for the script.js:

The directory 'jspassword' now contains three files namely; index.html,styles.css and script.js.

Committing the Project To Github

Goto github and sign up for a new account.

Create a new repository and commit the files to github with the following commands:
git init git add . git commit - m "JSPASSWORD APP" git branch -M main git remote add origin (paste your ssh or httpS link of the git repostory you created) git push -u origin main

Your completed push to github will look like this:

Deploying to vercel
Goto vercel and signup for an account with Github.
On the top right corner, there is an add new project.
Select that option and link your github account.
Select the git repository you just created and wait for sometime.
Kudos, you just deployed a password generator application to the whole world for free

This is a link to the source code for the project.
That is it!, you have deployed a password generator web application built with javascript!
Follow me on twitter

My Journey Into Tech.

Kwaku Duah — Tue, 02 May 2023 19:57:02 +0000

Learning to code can be a tedious task when you do not know where to start from. There are several programming languages available for use to acccomplish various tasks.
Low-level programming languages have two categories: assembly language and machine code have steep learning curves.Hoewever, high-level programming languages like Python,C++,C# are easier to start with a bit of grit and determination.

This is a quick privy into my tech journey. I started with the idea of using another operating system besides Windows OS(Operating System).A thorough research gave me a foray into all the possibilities of using Linux OS. I quickly settled with Linux Mint between Ubuntu and Linux Mint. It was evident from all the blogs I read from that Linux Mint was a bit faster than Ubuntu on devices with the similar specifications.

I watched several videos to acquaint myself with knowledge of dual booting Windows OS alongside Linux Mint OS. The use of linux mint opened up a world of possibilities and I settled with choosing to code. The big question of where to begin and what language to begin with arose. I started first of all by taking courses on familiarizing myself with the linux Command Line Interface(CLI). The creating of files, folders, deleting of files, copying of files and moving of files with commands felt like magic to me at first. I was honestly enthralled with this new possibility and decided to dig deeper.

Bootcamps offer ways to learn to code. There are other platforms like freecodecamp that are donor-supported and they have self-paced courses in:

Front-end development
Back-end development
Database
Datascience
Machine Learning

I started with the first course and took introductory courses in HTML, CSS and Javascript.
I gave up along the way to focus on my final year project which was to be done using Machine Learning(ML).
That is a topic for another day,sigh.

Twitter remains one of the best things to have ever happened to me. I found a link blacks in tech foundation where donors have either paid in full or partial for courses on Coursera, Udemy and other platforms to be accessed freely by all most especially by underprivileged black communities. I took on a software developer course from Meta through Coursera in both front-end development and back-end development.I took courses in the following stacks:

HTML
CSS
Programming in Javascript
React
Advanced React
Principles of UI/UX
Git

...and back-end development stacks in:

Programming in Python
Django Web Framework
APIs
MySQL Database
The curriculum took me through an entire stack to become a full stack software developer.
Project oriented courses and I took about 8 months to complete the entire stack and all projects.
This is a link to my portfolio website kdwebdeveloper

This is my third year in tech and I am proud to have had the chance, desire and attitude to persevere through it all.Glory to God Almighty.
This is a link to my github.
Follow me on twitter

Build A Weather App With Django.

Kwaku Duah — Thu, 27 Apr 2023 01:52:42 +0000

In this tutorial, I will build a weather web application using python, django web framework and Open Weather Map API. In order to do this, I will use python requests to call the Open Weather Map API.

Current weather data can be accessed freely by creating an account at OPen Weather Map API.

Table Of Contents

Installation
Admin Dashboard
Creating the project
Calling the Open Weather API in our code.
Creating a template and displaying data in it.
Creating a form
Conclusion

This is simple application that will fetch weather data for varying cities. However, we will make use of a database and a form element so knowledge from this project can be applied to complicated projects in the future.

Python 3.0 and Django 4 were used to code this project. It is a beginner friendly project but people with a tint of experience will find it much easier to follow. A preview of how the application will look like has been shown below:

Installation
The installation of python-django follows the same process of installing other frameworks of python.
Note: It is very important to create a virtual environment for this project. This allows the developer the flexibility of opting for any particular version of python,django without needing to cause a system wide change.
In this article, I will be using pipenv to create the virtual environment. You can create a directory, navigate into the directory and follow the instructions.

pipenv install django

This will install the latest version of Django.
Once Django has been installed successfully, in the next step you will generate a project in django.

django-admin startproject weatherproj .

New files will be generated in the directory akin to this:

This is the directory with the file 'manage.py' which is essential for deployment to the server.
You can run this command to check if so far your project deploys on the local server:

python3 manage.py runserver

If you see this page you have installed django correctly.

Admin Dashboard
Django comes with an admin dashboard that allows for Creating, Reading, Updating and Deleting(CRUD) as a super user.
Now in order to view our admin dashboard, we will migrate our database which means django created predefined tables for default apps. TO do this, you will use the migrate command. Stop the server with CTRL + C and run:

python3 manage.py makemigrations
python3 manage.py migrate

After running these commands, django created a SQLite database for this project. You can check your directory to confirm the presence of a db.sqlite3 file.
By default, several tables are created by django in the database. However, the cons of SQLite database such as insecurity will not hinder this project in anyway.This is a minimal project with emphasis on acquisition of knowledge for test projects. Secure databases such as MySQL may however be used for projects with otherwise sensitive data.

The database comes with a user table which will be used to store any users in our application. This table has an admin user which we will allow us to access the admin dashboard.
To create an admin user, we will run the createsuperuser command.

python3 manage.py createsuperuser

Follow the instructions to input name, email address and password for your admin user.
Once you are done with that, you have to restart the server again and access the admin dashboard.

python3 manage.py runserver

then goto the link 127.0.0.1:8000/admin
The reason why we can access this endpoint is that admin is defined in the urls.py at the project level (weatherproj).
Login to the admin dashboard with your credentials. You should see a page like this:

Groups and Users represent two models in Django. Models are representations of tables in code form. I encourage you to click around in the dashboard and exercise in caution in the deletion of users else you will have to createsuperuser again.

Creating the App

Django allows for the separation of functionality in projects in smaller chunks called apps. App is a confusing term since it generally represents entire codebases, projects.However, in Django, app refers to a specific funtionality in your project.Furthermore, a quick look at settings.py file shows a section with heading INSTALLED_APPS list.

The first on the list, django.contrib.admin is what we used for the admin user. This further elaborates the fact that pieces of functionality called apps in django is what is collectively used to build a project.

In our weatherproj, we need to create an app to handle another functionality.This is the command to create an app.

python3 manage.py startapp weatherapp

After running the commmand, a Django app called weatherapp folder is generated in the directory.
Navigate to the repository with the command
cd weatherapp
and add a new file called urls.py.
weatherproj/weatherapp/urls.py

from django.urls import path

urlpatterns = [ ]

There is a similar file in the weatherproj directory. The difference between the urls.py file at the app level(weatherapp) and urls.py file at the project level(weatherproj) is that the former contains all the URLS that are relevant to the app itself.This further buttresses the point of apps in Django representing separate functionalites in the project as each app has urls.py file with relevant URL links to itself.

Navigate to the project directory(weatherproj) and in the settings.py file add the name of the app we just created(weatherapp) to the list of INSTALLED_APPS.

The app weatherapp will now be used by Django in the weatherproj project.

Navigate to the project level urls.py and alter it to point to our apps urls.py. To do that, we need to add a line below the existing path for admin dashboard. We need to import 'include' so we can properly point our apps urls.py.

from django.contrib import admin
from django.urls import path,include

urlpatterns = [
path('admin/', admin.site.urls),
path('', include('weatherapp.urls')),
]

The empty path string indicates we are not using any endpoint as an entry to the app. Instead, the app is allowed to handle the endpoints.Defining a string like 'weather' would have forced us to access that endpoint with ('weather/').
This would mean to access it, we would have to use that endpoint in 127.0.0.1:8000/weather/ to access anything related to the weatherapp. This is a simple project and we will not be using that approach.

Templating and Modifying the Views.py file
A template in Django is simply an HTML file that allows for extra syntax to make it dynamic than an ordinary HTML file. This dynamics include adding loops, if statements and variables.

Navigate to the weatherapp directory and enter these commands:
mkdir templates
cd templates
mkdir weatherapp

Becareful to note the addition of a new directory with same name as our app.Django combines template directories from the various apps we have and to prevent duplication by repeating the name of the app.
Navigate to the template folder, then to the weatherapp and create an index.html. This will the template and it is named index.html because it will be at root level and be the topmost element. This is the HTML to use for the template:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>What is the current weather?</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.css" /> </head> <body> <section class="hero is-primary"> <div class="hero-body"> <div class="container"> <h1 class="title"> What's the weather like? </h1> </div> </div> </section> <section class="section"> <div class="container"> <div class="columns"> <div class="column is-offset-4 is-4"> <form method="POST"> {% csrf_token %} <div class="field has-addons"> <div class="control is-expanded"> {{ form.name }} </div> <div class="control"> <button class="button is-info"> Add New City </button> </div> </div> </form> </div> </div> </div> </section> <section class="section"> <div class="container"> <div class="columns"> <div class="column is-offset-4 is-4"> {% for weather in weather_data %} <div class="box"> <article class="media"> <div class="media-left"> <figure class="image is-50x50"> <img src="http://openweathermap.org/img/w/{{ weather.icon }}.png" alt="Image"> </figure> </div> <div class="media-content"> <div class="content"> <p> <span class="title">{{ weather.city }}</span> <br> <span class="subtitle">{{ weather.temperature }}° F</span> <br> {{ weather.description }} </p> </div> </div> </article> </div> {% endfor %} </div> </div> </div> </section> <footer class="footer"> <h2>Made by KDUAH of <a href="kdwebdeveloper.vercel.app">PCkingpin INC</a></h2> <p>Contact Developer through duah229@gmail.com</p> </footer> </body> </html>

With the creation of the template successful, we will create a view and with URL combination render this to be displayed in the app.

Views in Django are either functions or classes. In this tutorial, we will be creating a simple function in our views.py file.

from django.shortcuts import render

def index(request):
return render(request, 'weatherapp/index.html')

Add the URL that will send the request to this view. At the app level, update the urlpatterns list.

from django.urls import path from . import views urlpatterns = [ path('',views.index), ]

This allows us to reference the view we just created.Django will route to the view function we just created.

Using the Open Weather API
Goto Open Weather Map API Open Weather Map API and sign up.
Confirm your email and click on your username, generate an API key.

The endpoint we will use is written below and you can insert your generated API key to access the data. Note, it may take a few minutes for your API to become active.

https://api.openweathermap.org/data/2.5/weather?q={}&units=imperial&appid=YOUR_API_KEY

After that, let us install python requests which is what we will use to access the data in our app with this command.

pipenv install requests

Let us update the views.py to send a request to the URL we have.

from django.shortcuts import render import requests

def index(request): url = 'http://api.openweathermap.org/data/2.5/weather?q={}&units=imperial&appid=YOUR_APP_KEY' city = 'Las Vegas' city_weather = requests.get(url.format(city)).json() #request the API data and convert the JSON to Python data types return render(request, 'weather/index.html')

With those lines, we have added the URL that we will send requests to. We will make the part of the city a placholder for when users add their own cities.

Finally, we will send the request to the URL using the city and get the JSON representation of that city. If we print that to the console we can see the same data we saw when we put the URL in our address bar.

If you start your server again and reload the page, you’ll see the data get printed to your console.

Creating a Weather App in Django Using Python Requests

Displaying the Data in the Template
Next, we need to pass the data to the template so it can be displayed to the user.

Let us create a dictionary to hold all of the data we need. Of the data returned to us, we need temp, description, and icon.

def index(request): weather = { 'city' : city, 'temperature' : city_weather['main']['temp'], 'description' : city_weather['weather'][0]['description'], 'icon' : city_weather['weather'][0]['icon'] } return render(request, 'weather/index.html')

Now that we all the information we want, we can pass that to the template. To pass it to the template, we’ll create a variable called context. This will be a dictionary that allows us to use its values inside of the template.

def index(request): context = {'weather' : weather} return render(request, 'weather/index.html', context)

And then in render, we will add the context as the third argument.

With the weather data added inside of context, lets go to the template to add the data.

Inside of the template, all we need to do is modify the HTML to use variables instead of the values I typed in. Variables will use

{{ }}

tags, and they will reference anything inside of your context dictionary.

Note that Django converts dictionary keys so you can only access them using dot notation. For example, weather.city will give us the city name. We don’t use weather['city'] like we would in Python.

And then in render, we will add the context as the third argument.

With the weather data added inside of context, lets go to the template to add the data.

Note that Django converts dictionary keys so you can only access them using dot notation. For example, weather.city will give us the city name. We don’t use weather['city'] like we would in Python.

Find the box div, and update it to this:

<div class="box"> <article class="media"> <div class="media-left"> <figure class="image is-50x50"> <img src="http://openweathermap.org/img/w/{{ weather.icon }}.png" alt="Image"> </figure> </div> <div class="media-content"> <div class="content"> <p> <span class="title">{{ weather.city }}</span> <br> <span class="subtitle">{{ weather.temperature }}° F</span> <br> {{ weather.description }} </p> </div> </div> </article> </div>`

With all the variables replaced, we should now see the current weather for our city.

Creating a Weather App in Django Using Python Requests

Great! Now we can see the weather for one city, but we had to hard code the city. What we want to do now is pull from the database and show the cities that are in our database.

To do that, we will create a table in our database to hold the cities that we want to know the weather for. We will create a model for this.

Go to the models.py in your weather app, and add the following:

from django.db import models

class City(models.Model): name = models.CharField(max_length=25)

```def _str_(self): #show the actual city name on the dashboard
    return self.name```

```class Meta: #show the plural of city as cities instead of citys
    verbose_name_plural = 'cities'```

This will create a table in our database that will have a column called name, which is the name of the city. This city will be a charfield, which is just a string.

To get these changes in the database, we have to run makemigrations to generate the code to update the database and migrate to apply those changes. Here are the commands

python manage.py makemigrations python manage.py migrate

We need to make it to where we can see this model on our admin dashboard. To do that, we need to register it in our admin.py file.

from django.contrib import admin from .models import City

admin.site.register(City)

You’ll see the city as an option on the admin dashboard.

Creating a Weather App in Django Using Python Requests

We can then go into the admin dashboard and add some cities. I will start with three: London, Tokyo, and Las Vegas.

Creating a Weather App

With the entries in the database, we need to query these entries in our view. Start by importing the City model and then querying that model for all objects.

from django.shortcuts import render import requests from .models import City`

`def index(request): url = 'http://api.openweathermap.org/data/2.5/weather?q={}&units=imperial&appid=YOUR_APP_KEY' cities = City.objects.all()`

Since we have the list of cities, we want to loop over them and get the weather for each one and add it to a list that will eventually be passed to the template.

This will just a variation of what we did in the first case. The other difference is we are looping and appending each dictionary to a list. We will remove the original city variable in favor a city variable in the loop.

`def index(request): weather_data = []`

`for city in cities:`

    ```city_weather = requests.get(url.format(city)).json() #request the API data and convert the JSON to Python data types```

    ```weather = {
        'city' : city,
        'temperature' : city_weather['main']['temp'],
        'description' : city_weather['weather'][0]['description'],
        'icon' : city_weather['weather'][0]['icon']
    }```

    ```weather_data.append(weather)```

```context = {'weather_data' : weather_data}```

Cool, so we have the data. Now let’s update the context to pass this list instead of a single dictionary.

`context = {'weather_data' : weather_data}`

Next, inside of the template, we need to loop over this list and generate the HTML for each city in the list. To do this, we can put a for loop around the HTML that generates a single box for the city.

`<div class="column is-offset-4 is-4"> {% for weather in weather_data %} <div class="box"> <article class="media"> <div class="media-left"> <figure class="image is-50x50"> <img src="http://openweathermap.org/img/w/{{ weather.icon }}.png" alt="Image"> </figure> </div> <div class="media-content"> <div class="content"> <p> <span class="title">{{ weather.city }}</span> <br> <span class="subtitle">{{ weather.temperature }}° F</span> <br> {{ weather.description }} </p> </div> </div> </article> </div> {% endfor %} </div>`

Awesome! Now we can see the data for all the cities we have in the database.

Creating the Form
The last thing we want to do is allow the user to add a city directly in the form.

To do that, we need to create a form. We could create the form directly, but since our form will have exactly the same field as our model, we can use a ModelForm.

Create a new file called forms.py.

`from django.forms import ModelForm, TextInput from . models import City`

`class CityForm(ModelForm): class Meta: model = City fields = ['name'] widgets = { 'name': TextInput(attrs={'class' : 'input', 'placeholder' : 'City Name'}), }`

To do that, lets update the index video to create the form. We will replace the old city variable at the same time since we no longer need it. We also need to update the context so the form gets passed to the template.

`def index(request): form = CityForm()`

```weather_data = []```
```context = {'weather_data' : weather_data, 'form' : form}```

Now in the template, let’s update the form section to use the form from our view and a csrf_token, which is necessary for POST requests in Django.

`<form method="POST"> {% csrf_token %} <div class="field has-addons"> <div class="control is-expanded"> {{ form.name }} </div> <div class="control"> <button class="button is-info"> Add City </button> </div> </div> </form>`

With the form in our HTML working, we now need to handle the form data as it comes in. For that, we’ll create an if block checking for a POST request. We need to add the check for the type of request before we start grabbing the weather data so we immediately get the data for the city we add.

`def index(request): cities = City.objects.all() #return all the cities in the database`

```url = 'http://api.openweathermap.org/data/2.5/weather?q={}&units=imperial&appid=YOUR_APP_KEY'```

```if request.method == 'POST': # only true if form is submitted
    form = CityForm(request.POST) # add actual request data to form for processing
    form.save()```

```form = CityForm()```

By passing request.POST, we will be able to validate the form data.

Now you should be able to type in the name of a city, click add, and see it show up. I’ll add Miami as the next city.

Creating a Weather App in Django

When we drop out of the if block, the form will be recreated so we can add another city if we choose. The rest of the code will behave in the same way.

Conclusion

In this article, we had to work with various parts of Django to get this working: views, models, forms, and templates. We also had to use the Python library requests to get the actual weather data. So even though the app is simple, you will use many of the same concepts in apps with more complexity.

Here is a link to the project in github:
Github
Feel free to clone and modify.

LAMP STACK

Kwaku Duah — Mon, 24 Apr 2023 22:44:19 +0000

Website design is at an all time high since the internet brigdes the gap between the world. In the past, making websites were reserved for those with high IQ's.Presently, there are so many tools and frameworks that have made it easier.

Frameworks like ReactJS, VueJS, AngularJS provide a structure within which developers are supposed to build removing the redundant work developers do everytime.
ReactJS was made by Facebook now Meta in 2011 and it gained popularity around 2013.
A major feature it had was the possibility to work on the DOM(Document 0bject Module) intra the framework before rendering to the webpage. Moreover, SPA (Songle Page Applications) which means resources loaded as and when needed improved user experience.

The aformentioned frameworks almost perform the same tasks. There is wordpress which has the backend written in PHP and it is flexible as it allows developers to tweak themes and add plugins to build full stack web applications in the minimum possible time.LAMP stack as it is called represents Linux, Apache, MySQL and PHP.

Installing wordpress on a linux machine:
a) sudo apt-get install apache2
b) sudo apt-get install mysql-server
c)sudo apt-get install php
This is a MD and ....

DEV Community: Kwaku Duah

Building an Artificial Neural Network to make Predictions with Machine Learning.

Introduction

Biological Inspiration

Structure of an ANN

Training an ANN

Python Implementation of a Simple ANN (From Scratch)

Applications of ANN

Summary

JDK Setup On Linux, Windows, Mac

🚀 Setting Up JDK on Windows, macOS, and Linux – Complete Guide

🪟 1. Setting Up JDK on Windows

✅ Step 1: Download the JDK

✅ Step 2: Install the JDK

✅ Step 3: Set Environment Variables

✅ Step 4: Verify Installation

🍎 2. Setting Up JDK on macOS

✅ Step 1: Download the JDK

✅ Step 2: Install the JDK

✅ Step 3: Set Environment Variables

✅ Step 4: Verify Installation

🐧 3. Setting Up JDK on Linux

✅ Step 1: Install via Terminal

✅ Step 2: Configure JAVA_HOME

✅ Step 3: Verify Installation

💻 Writing and Running Your First Java Program

✍️ Step 1: Create a Java File

⚙️ Step 2: Compile the Program

▶️ Step 3: Run the Program

📚 Bonus: Intro to Data Structures & Algorithms (DSA) in Java

🔢 Basic Data Structures:

⚙️ Basic Algorithms:

🎉 Conclusion

INSTALL SLACK ON LINUX MINT 21.1

Pros Of Using Slack

TABLE OF CONTENTS

Download Slack For Linux

Installing Dependencies

Install Slack

Conclusion

Full Stack Todo WebApp With React and Python-Django.

PREREQUISITES

SETTING UP DJANGO BACKEND

REGISTERING THE todo APPLICATION IN DJANGO

CREATING A Todo MODEL

REGISTERING THE MODEL IN ADMIN

SETTING UP APIs

CREATING SERIALIZERS

CREATING VIEWS

ADDING ROUTES

SETTING UP THE FRONTEND

USE SPARE ANDROID PHONE AS WEBCAM FOR YOUR PC.

🔧 Turn Your Spare Android Phone into a Webcam for Linux!

✅ What You Need:

📚 Table of Contents:

🛠️ Prepare the Android Phone

📦 Install Dependencies on the PC

⚙️ Configure the Camera with PC

📲 Setting Up the Android Camera

🔄 Port Forwarding via ADB

🎥 Create a Virtual Webcam

🚀 Redirect the Video Stream

🎬 Webcam in Google Meet (via Firefox):

🔴 OBS Studio Preview:

✅ Conclusion

Formatting External Drives On Linux Using Gparted.

CRUD Notes Web App In Javascript.

Javascript Password Generator.

My Journey Into Tech.

Build A Weather App With Django.

LAMP STACK

REGISTERING THE `todo` APPLICATION IN DJANGO

CREATING A `Todo` MODEL